/* Bestellfluss — baut auf style.css (Tokens, Buttons, Header, Footer) auf.
   Werkstatt-System: rahmenlose, hairline-gegliederte Fieldsets mit Mono-
   Marker-Legenden, Meldungen als Randbemerkungen (3px-Lineal, transparenter
   Grund) — keine gefüllten Kästen. Gilt für Bestellen, Kündigen, Widerruf. */

.bestell-section {
  max-width: 640px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}

/* Abo-Hinweis („Korrektur im Abo enthalten“) — Randbemerkung in Grün */
.abo-hinweis {
  border-left: 3px solid var(--gruen);
  padding: .1rem 0 .1rem .9rem;
  color: var(--gruen-tief);
  margin-bottom: 1.25rem;
  font-size: .9rem;
}

/* Das Werk behält im Checkout seine Identität: gesetzter Kopf-Block mit
   starker Kopf-Linie und Fraunces-Titel statt grauem Kasten. */
.klausur-info {
  border-top: 2px solid var(--linie-stark);
  border-bottom: 1px solid var(--linie);
  padding: 1.1rem 0 1.2rem;
  margin-bottom: 2.25rem;
}
/* Mono-Eyebrow (Rechtsgebiet) */
.klausur-info .info-bereich {
  font-family: var(--schrift-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  font-weight: 500;
  margin-bottom: .4rem;
}
.klausur-info .info-titel {
  font-family: var(--schrift-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.018em;
  text-wrap: balance;
  /* lange Klausurtitel-Komposita weich brechen statt überlaufen */
  overflow-wrap: break-word;
  hyphens: auto;
  margin: 0 0 .5rem;
}
.klausur-info .info-preis {
  font-family: var(--schrift-mono);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
  margin: .25rem 0 0;
}

/* Fieldsets: rahmenlos, hairline-gegliedert; die Legende ist ein
   Mono-Marker. float:left nimmt die Legende aus der Rahmenlücke, sodass
   die Haarlinie durchläuft; legend + * { clear } stellt den Fluss her. */
.bestell-form fieldset {
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  padding: 1.4rem 0 0;
  margin: 0 0 2.25rem;
  background: transparent;
  min-width: 0;
}
.bestell-form legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 1.1rem;
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
}
/* ~ statt +: das erste sichtbare Geschwister räumt den Float auch dann,
   wenn davor ein [hidden]-Element steht (z. B. #abo-hinweis). */
.bestell-form legend ~ * { clear: both; }

.upload-label {
  display: block;
  border: 2px dashed var(--linie);
  border-radius: var(--radius);
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  background: var(--papier-tief);
}
.upload-label:hover,
.upload-label.dragover {
  border-color: var(--terra);
  background: var(--terra-blass);
}
.upload-label input[type="file"] {
  display: none;
}
.upload-text { display: block; }
.upload-hint {
  color: var(--tinte-blass);
  font-size: .85rem;
}
.datei-name {
  display: block;
  margin-top: .75rem;
  font-family: var(--schrift-mono);
  font-size: .85rem;
  color: var(--tinte);
  font-weight: 500;
  word-break: break-all;
}
.rand-status {
  display: none;
  margin-top: .5rem;
  font-size: .85rem;
  font-weight: 500;
}
.rand-status.aktiv { display: block; }
.rand-status.pruefen { color: var(--tinte-blass); }
.rand-status.ok { color: var(--gruen-tief); }
.rand-status.fehler { color: var(--rot-tief); }

.upload-hinweis {
  margin: .75rem 0 0;
  font-size: .85rem;
  color: var(--tinte-blass);
  line-height: 1.45;
}

.form-row {
  margin-bottom: 1rem;
}
.form-row:last-child { margin-bottom: 0; }
.form-row label {
  display: block;
  font-weight: 500;
  margin-bottom: .35rem;
  font-size: .95rem;
}
.form-row input[type="text"],
.form-row input[type="email"],
.form-row textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-sans);
  font-size: 1rem;
  background: var(--feld-bg);
  color: var(--tinte);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--terra);
  background: var(--fokus-bg);
}
.form-row small {
  display: block;
  font-size: .8rem;
  color: var(--tinte-leise);
  margin-top: .3rem;
}

/* Leerzustand des Zahlungsfelds: stiller Text, kein Kasten */
.payment-platzhalter {
  margin: 0;
  padding: .25rem 0;
  color: var(--tinte-blass);
  font-size: .9rem;
}

.agb {
  font-size: .85rem;
  color: var(--tinte-blass);
  margin: 0 0 1rem;
}

.checkbox-zeile {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  color: var(--tinte-blass);
  margin: 0 0 1rem;
  line-height: 1.45;
  cursor: pointer;
}
.checkbox-zeile input[type="checkbox"] {
  margin-top: .25rem;
  flex-shrink: 0;
  accent-color: var(--terra);
}

/* Nur das Delta zum .btn-Grundbestand (text-align, cursor, disabled kommen
   aus style.css; display/width deckungsgleich mit konto.css). */
.btn-block {
  display: block;
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1rem;
}
/* Gestapelte Aktionen (Widerruf, Stufe 2): Sekundär über Primär braucht
   definierten Abstand, damit die Rückwärts-Aktion nicht am CTA klebt. */
.bestell-form .btn + .btn-block { margin-top: .9rem; }
/* Hover darf Disabled nicht überstimmen: in style.css steht
   .btn-primary/-secondary:hover NACH .btn:disabled bei gleicher
   Spezifität — hier die höher spezifische Absicherung. */
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
  background: var(--linie);
  border-color: var(--linie);
  color: var(--tinte-blass);
}

/* Meldungen = Randbemerkungen: 3px-Lineal links, transparenter Grund */
.fehlermeldung {
  margin: 1.25rem 0 0;
  padding: .1rem 0 .1rem .9rem;
  border-left: 3px solid var(--rot);
  color: var(--rot-tief);
  font-size: .9rem;
  display: none;
}
.fehlermeldung.aktiv { display: block; }

.erfolgsmeldung {
  margin: 1.25rem 0 0;
  padding: .1rem 0 .1rem .9rem;
  border-left: 3px solid var(--gruen);
  color: var(--gruen-tief);
  font-size: .9rem;
  display: none;
}
.erfolgsmeldung.aktiv { display: block; }

/* Radio-Zeilen (Kündigungsart) — gleiche Optik wie .checkbox-zeile */
.radio-zeile {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .95rem;
  color: var(--tinte);
  margin: 0 0 .75rem;
  line-height: 1.45;
  cursor: pointer;
}
.radio-zeile input[type="radio"] {
  margin-top: .25rem;
  flex-shrink: 0;
  accent-color: var(--terra);
}
.form-row select {
  width: 100%;
  padding: .65rem .8rem;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-sans);
  font-size: 1rem;
  background: var(--feld-bg);
  color: var(--tinte);
}
.form-row select:focus {
  outline: none;
  border-color: var(--terra);
  background: var(--fokus-bg);
}

/* Zwei-Stufen-Formular (Widerruf): zweite Stufe erst nach „Weiter“ sichtbar */
.formular-stufe[hidden] { display: none; }
/* Bestätigungsübersicht: die eine ruhige getönte Fläche (Stufe 2) des
   Formulars — ohne Vollrahmen, ohne Schatten. */
/* Gleiche Rolle wie .tarif-uebersicht → gleiches Hairline-Muster, kein Kasten */
.bestaetigung-uebersicht {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  padding: 1rem .15rem;
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.7;
}
.bestaetigung-uebersicht dt {
  font-family: var(--schrift-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  font-weight: 500;
  margin-top: .6rem;
}
.bestaetigung-uebersicht dt:first-child { margin-top: 0; }
.bestaetigung-uebersicht dd {
  margin: 0;
  color: var(--tinte);
  font-weight: 500;
}

/* --- Tarif-/Abo-Seite (abo.html bindet dieses Blatt ein) ---------------- */

/* Bestellübersicht (§312j Abs.2 BGB) in der Tarif-Spalte: hairline-
   gesetzter Pflichttext unmittelbar über dem Bestell-Button. */
.tarif-uebersicht {
  font-size: .85rem;
  color: var(--tinte-blass);
  border-top: 1px solid var(--linie-zart);
  margin: 0 0 .9rem;
  padding-top: .7rem;
}
.tarif-uebersicht dl {
  margin: 0 0 .55rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .6rem;
}
.tarif-uebersicht dt {
  font-family: var(--schrift-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinte-blass);
  align-self: baseline;
  white-space: nowrap;
}
.tarif-uebersicht dd {
  margin: 0;
  color: var(--tinte);
}
.tarif-uebersicht .uebersicht-hinweis {
  margin: 0 0 .9rem;
}

/* Stiller Tarif-Status („bald verfügbar“, „in Premium enthalten“) —
   Ergänzung zu .tarif-aktuell aus style.css, ersetzt Inline-Styles. */
.tarif-aktuell.neutral { color: var(--tinte-blass); }

/* Einzelkorrektur-Hinweis unter der Tarif-Gegenüberstellung */
.portal-wrap .plattform-intro { margin-top: 2rem; }