/* Die Kaufseite - was ein angemeldetes Konto ohne bezahltes Abo sieht.
 *
 * Bis zum 23.08.2026 hatte diese Seite KEINE einzige Regel. Das war kein
 * Schoenheitsfehler: "durchgestrichen" war ausschliesslich eine CSS-Klasse, und
 * ohne Stylesheet stand auf der Live-Seite "593,81 EUR 0 EUR" nebeneinander -
 * zwei gueltige Preise fuer denselben Posten. Die Durchstreichung sitzt seither
 * als <s> im Markup; dieses Stylesheet GESTALTET sie nur noch, statt sie zu sein.
 *
 * ⚠️ REIHENFOLGE NICHT UMSTELLEN. Paragraf 312j Abs. 2 BGB verlangt die
 * Pflichtangaben UNMITTELBAR vor der ausloesenden Schaltflaeche, und
 * "unmittelbar" ist raeumlich gemeint. Ein order:, ein flex-direction mit
 * -reverse, ein position:absolute oder ein float koennte die Angaben visuell
 * hinter das Bezahlformular schieben, ohne dass ein einziger Test rot wird - der
 * Test prueft das DOM, nicht das Rendering. KaufenCssWaechterTest haelt das fest.
 *
 * Keine eigene Designsprache: Die Kaufseite ist die Verkaufsflaeche derselben
 * Anwendung, kein Fremdkoerper mit eigenem Auftritt. Alle Farben, Radien und
 * Schriften kommen aus den Tokens in app.css und flippen damit im dunklen Design
 * von selbst mit.
 */

.kaufen {
  max-width: 46rem;
  margin: 0 auto;
  /* ⚠️ width MUSS hier stehen, seit die Kaufseite in der Huelle sitzt (Befund B42).
     Die Huelle ist ein Grid, und "margin: 0 auto" auf einem Grid-Kind schaltet das
     Strecken ab: der Kasten faellt dann auf die Breite seines Inhalts zusammen,
     statt die Spalte zu fuellen. Genau so stand am 26.08.2026 eine Karte 244 px
     breit da, obwohl max-width 640 px erlaubte - und im Quelltext sah nichts falsch
     aus. Mit width:100% gilt wieder die Spaltenbreite, gedeckelt auf 46rem, und die
     auto-Raender zentrieren den Rest. */
  width: 100%;
}

/* Der Rueckweg. Bewusst zurueckhaltend und ueber der Ueberschrift: er ist der
   Ausgang, nicht das Angebot. */
.kaufen-zurueck {
  margin: 0 0 1rem;
  font-size: .9rem;
}

.kaufen .kaufen-zurueck .kaufen-zurueck-link {
  color: var(--text-blau);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: var(--radius);
  padding: .2rem .1rem;
}

.kaufen .kaufen-zurueck .kaufen-zurueck-link::before {
  content: "\2190";           /* Pfeil links */
  font-size: 1.05em;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .kaufen .kaufen-zurueck .kaufen-zurueck-link:hover { text-decoration: underline; }
}

.kaufen .kaufen-zurueck .kaufen-zurueck-link:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}

.kaufen > h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

/* Die Pflichtangaben sind der rechtlich tragende Block und bekommen deshalb die
   Karte - nicht als Schmuck, sondern damit sichtbar zusammengehoert, was das
   Gesetz zusammen verlangt: Leistung, Gesamtpreis, Laufzeit, Kuendigung. */
.fk-pflichtangaben {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gr);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--schatten);
}

.fk-pflichtangaben-leistung-label {
  margin: 0 0 .5rem;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-weich);
}

.fk-pflichtangaben-leistung {
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}

/* Zwei Spalten statt absolut gesetztem Haken. Nicht Geschmack: position:absolute
   ist in dieser Datei verboten, weil es die Pflichtangaben nach Paragraf 312j
   raeumlich verschieben koennte - und ein Waechter, der Ausnahmen kennt, ist
   keiner mehr. Das Raster tut hier ohnehin dasselbe, nur robuster: mehrzeilige
   Punkte ruecken sauber ein, statt unter den Haken zu laufen. */
.fk-pflichtangaben-leistung li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: .4rem;
  align-items: start;
  color: var(--ink);
}

/* Haken statt Aufzaehlungspunkt: die Liste sagt "das ist enthalten", und ein
   Haken sagt das mit, ohne ein Wort zu kosten. */
.fk-pflichtangaben-leistung li::before {
  content: "\2713";
  color: var(--gruen);
  font-weight: 700;
  line-height: 1.45;
}

/* Der Gruendungspreis ist die Aktion und traegt als einziger Block die
   Signalfarbe. Genau EIN Akzent auf der Seite - traegt jede Flaeche Farbe,
   traegt keine mehr etwas aus. */
.kaufen-aktion {
  margin: 0 0 1.1rem;
  padding: .8rem .95rem;
  background: color-mix(in srgb, var(--gelb) 14%, transparent);
  border-left: 3px solid var(--gelb);
  border-radius: var(--radius);
  font-size: .95rem;
  color: var(--ink);
}

/* Die zwei Posten nebeneinander, auf schmalen Schirmen untereinander.
   auto-fit statt fester Spalten: bei einem Posten fuellt er die Breite. */
.kaufen-preise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .9rem;
  margin: 0 0 1.1rem;
}

.kaufen-posten {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}

.kaufen-posten-label {
  font-size: .82rem;
  color: var(--ink-weich);
  margin-bottom: .3rem;
}

/* Die grosse Zahl ist der ENDPREIS. Gegenueber Verbrauchern ist er
   auszuzeichnen; der Nettobetrag steht klein darunter. Wer die Groessen
   vertauscht, macht aus einer Pflichtangabe eine Falle. */
.kaufen-preis-wert {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
}

.kaufen-einheit {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-weich);
}

/* Der ueberholte Preis: kleiner und gedaempft, damit die Rangfolge auch ohne
   den Strich lesbar bleibt. Der Strich selbst kommt vom <s> im Markup - hier
   wird er nur gefaerbt. */
.kaufen-preis-frueher {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-weich);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--rot);
}

.kaufen-preis-aktuell { color: var(--ink); }

.kaufen-netto {
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--ink-weich);
}

.kaufen-netto-frueher { text-decoration-color: var(--rot); }

.kaufen-bedingungen {
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-weich);
}

/* Zustimmung zum vorzeitigen Beginn. Das Kaestchen ist eine bewusste
   Entscheidung des Kunden und bekommt deshalb Luft und eine eigene Flaeche,
   statt als Kleingedrucktes durchzurutschen. */
.kaufen-sofortbeginn {
  margin: 1.25rem 0 0;
}

.kaufen-zustimmung {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.kaufen-zustimmung label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
}

.kaufen-zustimmung input[type="checkbox"] {
  width: var(--tippziel);
  height: var(--tippziel);
  margin: .1rem 0 0;
  accent-color: var(--blau);
  cursor: pointer;
}

/* Der Platzhalter fuer das spaetere Stripe-Formular.
 *
 * :empty ist der ganze Trick - der Container ist heute leer, und sobald Stripe
 * hineinrendert, ist er es nicht mehr. Der Platzhalter verschwindet damit VON
 * SELBST: kein Schalter, kein Zustand, nichts, was beim Anschluss aufgeraeumt
 * werden muss. Die Mindesthoehe reserviert den Raum, damit das Layout beim
 * Einsetzen nicht springt.
 *
 * ⚠️ Zwischen den Tags des Containers darf nichts stehen, auch kein Leerzeichen,
 * sonst greift :empty nie. Ein Test haelt das fest.
 */
.kaufen-checkout {
  margin-top: 1.25rem;
  border-radius: var(--radius-gr);
}

.kaufen-checkout:empty {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 2px dashed var(--linie-satt);
  background: color-mix(in srgb, var(--karte) 55%, transparent);
}

.kaufen-checkout:empty::before {
  content: "Hier erscheint das Bezahlformular.";
  font-size: .92rem;
  color: var(--ink-weich);
  text-align: center;
  max-width: 22rem;
}

.kaufen-fehler {
  margin: 1.25rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--rot-hell);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Der Knopf erbt sein Aussehen von .rechnen aus app.css - hier nur die
   Rueckmeldung auf den Druck. Ohne sie fuehlt sich ein Klick an, als sei er
   nicht angekommen. */
.kaufen .fk-aktionen { margin-top: 0; }

.kaufen .fk-aktionen .rechnen {
  transition: transform 160ms var(--ease-out);
}

.kaufen .fk-aktionen .rechnen:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .kaufen .fk-aktionen .rechnen {
    transition: none;
  }
  .kaufen .fk-aktionen .rechnen:active { transform: none; }
}

/* W7: Es wurde abgeschickt, das Token stimmte, das Haekchen fehlte.
   BEWUSST NICHT wie .kaufen-fehler in Rot: es ist nichts kaputt, es fehlt nur
   ein Schritt, und der naechste Klick loest ihn. Ein roter Kasten an dieser
   Stelle liest sich, als sei der Kauf gescheitert - genau die Auskunft, die
   jemanden von der einzigen Tuer zum Kauf wegtreibt.
   Die Farbe kommt aus --blau-hell/--blau: derselbe Ton, den die Oberflaeche
   sonst fuer Hinweise benutzt. --gelb waere die Markenfarbe und damit ein
   Aufruf zum Handeln, kein Hinweis. */
.kaufen-hinweis {
  margin: 1.25rem 0 0;
  padding: .85rem 1.1rem;
  background: var(--blau-hell);
  border-left: 3px solid var(--blau);
  border-radius: var(--radius);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---- Die Verzweigung gewerblich/privat -------------------------------------

   Die erste Frage des Kaufwegs, und an ihrer Antwort haengt das Widerrufsrecht.
   Sie soll deshalb ruhig und lesbar dastehen und nicht wie ein Formularschritt
   wirken, den man wegklickt. */
.kaufen-einleitung {
  margin: .6rem 0 1.25rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-weich, inherit);
  max-width: 62ch;
}

.kaufen-kundenart {
  margin-top: 1.25rem;
}

.kaufen-kundenart-wahl {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.15rem .4rem;
  margin: 0 0 1.1rem;
}

.kaufen-kundenart-wahl legend {
  padding: 0 .4rem;
  font-weight: 600;
  font-size: .9rem;
}

/* Die ganze Zeile ist das Klickziel, nicht nur der Punkt daneben. Ein
   Auswahlfeld von 13 px ist auf dem Handy kaum zu treffen - und wer danebentippt,
   trifft die Vorauswahl, also "Privatperson". Das ist die ungefaehrliche
   Richtung, aber ein Klickziel, das man verfehlen kann, bleibt ein Mangel. */
.kaufen-kundenart-wahl label {
  display: block;
  padding: .55rem 0;
  cursor: pointer;
  line-height: 1.5;
  min-height: 24px;
}

.kaufen-kundenart-wahl input[type="radio"] {
  margin-right: .5rem;
}

.kaufen-firmenname {
  margin: 0 0 1.1rem;
}

.kaufen-firmenname input {
  width: 100%;
  max-width: 28rem;
  padding: .5rem .65rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-s, 6px);
  font: inherit;
  margin-top: .3rem;
}

.kaufen-feld-hinweis {
  font-weight: 400;
  font-size: .85em;
  color: var(--ink-weich, inherit);
}