/* =================================================================
   Ergebnisbildschirm des Scheidungs-Checks (formular.html, #checkErgebnis)
   Eigene Datei, damit style.css unberührt bleibt. Mobil zuerst (375 px).
   Umbau-Konzept 14.09.2026, Punkte 10–12: persönlicher Befund, Kostenzusage
   ohne Zahl, Kurzformular als Hauptweg, Antrags-Knopf als leise Zweitoption,
   Terminerinnerung für Besucher ohne laufendes Trennungsjahr.
   Seit 27.09.2026 auf EINE Handlung verdichtet (Reihenfolge im Markup): Befund →
   Zusagezeile → Kontaktbrücke → Zweitweg → Hinweiskarten → Ergebnis-Karten →
   Terminerinnerung – Regeln dazu am Ende der Datei.
   ================================================================= */

/* Sicherheitsnetz: alle Ergebnis-Elemente mit hidden sind wirklich weg –
   style.css setzt für .field-row/.field teils display:grid/flex. */
#checkErgebnis [hidden] { display: none !important; }

/* --- Persönlicher Befund (Kopf) --- */
.ergebnis-saetze {
  list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .55rem;
}
.ergebnis-saetze li {
  position: relative; padding-left: 1.7em; font-size: .97rem; line-height: 1.55; color: var(--ink-soft);
}
.ergebnis-saetze li::before {
  content: ""; position: absolute; left: .15em; top: .5em; width: .8em; height: .8em; border-radius: 50%;
  background: var(--accent);
}
.ergebnis-saetze li.hinweis::before { background: var(--warn); }
.ergebnis-saetze b { color: var(--ink); }
/* Prüfvorbehalt direkt unter dem Befund (Nachbesserung 27.09.2026, formular.js) */
.ergebnis-vorbehalt { margin: -.5rem 0 1.2rem; font-size: .85rem; line-height: 1.5; color: var(--ink-50); }

/* --- Kostenzusage (Karte ohne Zahl) --- */
.kostenzusage { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .45rem; }
.kostenzusage li { position: relative; padding-left: 1.5em; line-height: 1.5; }
.kostenzusage li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .95em; height: .95em;
  border-radius: 50%; background: var(--ok);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12.5l3.4 3.4L17.5 8.5'/></svg>");
  background-size: 100% 100%;
}
.kostenzusage-link { font-weight: 650; }
.kostenzusage-link::after { content: " →"; }

/* --- Hauptweg: kostenfreie Einschätzung --- */
.lead-haupt {
  margin-top: 1.4rem; padding: 22px 20px; border-radius: var(--radius-lg);
  background: #fff; border: 1.5px solid #b9d6ea;
  box-shadow: 0 1px 2px rgba(22,24,28,.05), 0 14px 34px rgba(0,109,176,.10);
}
.lead-haupt h3 { font-size: 1.08rem; line-height: 1.4; margin: 0 0 .4rem; color: var(--ink); }
.lead-haupt .lead-text { margin-bottom: .9rem; }
.lead-haupt .field { margin-bottom: 14px; }
.lead-haupt .btn { margin-top: .4rem; width: 100%; }
.lead-haupt .lead-hinweis { margin-top: .8rem; }

/* Umschalter Telefon | E-Mail: zwei gleich große Flächen, fingergerecht */
.kanal-wahl { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.kanal-wahl legend { font-size: .88rem; font-weight: 600; margin: 0 0 6px; padding: 0; color: var(--ink); }
.kanal-wahl-optionen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: #fff;
}
.kanal-wahl-optionen label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 46px; padding: .55em .6em; cursor: pointer; font-size: .95rem; font-weight: 600;
  color: var(--ink-70); background: #fafbfc; transition: background .16s var(--ease), color .16s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.kanal-wahl-optionen label + label { border-left: 1.5px solid var(--line); }
.kanal-wahl-optionen input { position: absolute; opacity: 0; pointer-events: none; }
.kanal-wahl-optionen label:has(input:checked) { background: var(--accent); color: #fff; }
.kanal-wahl-optionen label:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.kanal-wahl-optionen svg { width: 18px; height: 18px; flex: none; }

/* Leise Zweitoption: Antrag direkt vorbereiten */
.ergebnis-zweitweg { text-align: center; margin: 1.3rem 0 .2rem; }
.ergebnis-zweitweg .btn { width: 100%; max-width: 460px; white-space: normal; line-height: 1.35; }
.ergebnis-zweitweg .hint { text-align: left; }

/* Terminerinnerung */
.termin-panel {
  margin-top: 1.2rem; padding: 20px; border-radius: var(--radius-lg);
  background: #f0f6fb; border: 1px solid #cfe1ef; color: #24435f;
}
.termin-panel h3 { font-size: 1rem; margin: 0 0 .4rem; color: #16324a; }
.termin-panel .lead-text { color: #24435f; margin-bottom: .9rem; }
.termin-panel .field { margin-bottom: 10px; }
.termin-panel .btn { margin-top: .2rem; width: 100%; }
.termin-panel .lead-hinweis { color: #4c6982; }

/* Statuszeilen (Erfolg/Fehler) */
.rueckruf-status.erfolg { color: var(--ok); font-weight: 600; }

@media (min-width: 600px) {
  .lead-haupt { padding: 26px 28px; }
  .lead-haupt .btn, .termin-panel .btn { width: auto; min-width: 320px; }
  .termin-panel { padding: 22px 26px; }
}

/* =================================================================
   Vorab-Mandat — Beauftragung schon vor Ablauf des Trennungsjahres
   (Umbau-Konzept 14.09.2026, Punkte 23a/23b). Mobil zuerst (375 px).
   ================================================================= */

/* Sicherheitsnetz: style.css setzt für .radio-cards display:grid, das
   schlägt das hidden-Attribut sonst. */
#vmBox[hidden], #vmDatum[hidden], #terminIntro[hidden], #t_vorab[hidden],
#tDatumFeld[hidden], #tArtWahl[hidden], #tGeplantFeld[hidden] { display: none !important; }

/* --- Hauptbotschaft am Ergebnisbildschirm --- */
.vm-box {
  margin: 0 0 1.3rem; padding: 22px 20px; border-radius: var(--radius-lg);
  background: #eef7fd; border: 1.5px solid #8ec3e4;
  box-shadow: 0 1px 2px rgba(22,24,28,.05), 0 16px 38px rgba(0,109,176,.13);
}
.vm-titel { font-size: 1.16rem; line-height: 1.35; margin: 0 0 .5rem; color: var(--ink); }
.vm-text { margin: 0 0 .8rem; line-height: 1.6; color: var(--ink-soft); }
.vm-datum {
  margin: 0 0 .5rem; padding-left: 1.5em; position: relative;
  font-weight: 650; line-height: 1.5; color: var(--accent-ink);
}
.vm-norm { margin: 0 0 1rem; font-size: .82rem; line-height: 1.5; color: var(--ink-50); }
.vm-datum::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1em; height: 1em;
  background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6.5A2 2 0 0 1 5 4.5h14a2 2 0 0 1 2 2V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M3 10h18M8 2.5v4M16 2.5v4'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6.5A2 2 0 0 1 5 4.5h14a2 2 0 0 1 2 2V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/><path fill='none' stroke='black' stroke-width='2' stroke-linecap='round' d='M3 10h18M8 2.5v4M16 2.5v4'/></svg>") center/contain no-repeat;
}
.vm-knopf { width: 100%; white-space: normal; line-height: 1.35; }
.vm-fuss { margin: .8rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-50); }

/* (.vm-lead-klein entfällt seit 27.09.2026: Die Kontaktbrücke führt immer in voller
   Größe; die Vorab-Karte steht darunter und übernimmt die Rolle des Zweitwegs.) */

/* Einleitungszeile der Terminerinnerung, solange die Vorab-Karte steht */
.vm-termin-intro { margin: 0 0 .35rem; font-size: .9rem; font-weight: 600; color: #4c6982; line-height: 1.45; }

/* --- Schritt „Trennung": geplante Trennung --- */
.vm-geplant { margin: 0 0 18px; }
.vm-geplant-legende { font-size: .88rem; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.vm-geplant-legende span { font-weight: 400; color: var(--ink-50); }
.vm-geplant-teile { display: flex; gap: 10px; flex-wrap: wrap; }
.vm-geplant-teile .field { margin-bottom: 6px; }
.vm-geplant-teile .field label {
  font-size: .72rem; color: var(--ink-50); text-transform: uppercase; letter-spacing: .04em;
}
/* Monat und Jahr nebeneinander – auch auf 375 px (Kartenbreite ca. 297 px) */
.vm-geplant-monat { flex: 1 1 8.5em; min-width: 8.5em; }
.vm-geplant-jahr { flex: 0 1 6.4em; }
.vm-geplant-monat select { padding-left: .6em; padding-right: .4em; }
.vm-geplant-jahr input { text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.vm-hinweis { color: var(--ink-soft); font-weight: 600; }

/* Der Knopf der Vorab-Karte (seit 27.09.2026 im Stil des Zweitwegs, btn-gold) trägt einen
   langen Satz – auf schmalen Geräten etwas kleiner, damit er drei statt vier Zeilen braucht. */
@media (max-width: 420px) {
  .vm-knopf { font-size: .98rem; padding-left: 1em; padding-right: 1em; }
}

@media (min-width: 600px) {
  .vm-box { padding: 26px 28px; }
  .vm-knopf { width: auto; min-width: 340px; }
}

/* =================================================================
   Kinderfragen noch offen, aber nicht streitig (Umbau-Konzept 13,
   freigegeben 14.09.2026). Ruhiger Absatz ohne Knopf – er soll
   beruhigen, nicht zum Klicken auffordern. Mobil zuerst (375 px).
   ================================================================= */

/* Sicherheitsnetz wie bei #vmBox: style.css setzt für manche Container
   display-Werte, die das hidden-Attribut sonst schlagen. */
#kinderKlaerung[hidden] { display: none !important; }

.kk-box {
  margin: 0 0 1.3rem; padding: 18px 16px; border-radius: var(--radius-lg);
  background: #f7faf8; border: 1px solid #cfe0d6; border-left: 4px solid var(--ok);
}
.kk-titel { font-size: 1.02rem; line-height: 1.4; margin: 0 0 .45rem; color: var(--ink); }
.kk-text { margin: 0; line-height: 1.6; color: var(--ink-soft); }
.kk-fuss { margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-50); }

/* Zusatzzeile unter einer Antwortmöglichkeit des Checks: trennt „noch offen"
   sichtbar von „streitig", ohne die Antwort selbst lang zu machen. */
.radio-cards label .antwort-zusatz {
  display: block; margin-top: .2em; font-size: .84rem; line-height: 1.45;
  font-weight: 400; color: var(--ink-50);
}

@media (min-width: 600px) {
  .kk-box { padding: 22px 24px; }
}

/* Goldener Knopf „Ich möchte direkt starten" (Wunsch Frank, 14.09.2026).
   Dunkle Schrift auf Gold — weiße Schrift hätte auf diesem Ton zu wenig Kontrast. */
.btn-gold {
  background: linear-gradient(180deg, #f7b431, #e09a08);
  color: #16181c; border: 1px solid #d08f06; font-weight: 700;
  box-shadow: 0 2px 6px rgba(224,154,8,.28);
}
.btn-gold:hover { background: linear-gradient(180deg, #f9bf4d, #cf8c05); }
.btn-gold:active { background: #cf8c05; }
.btn-gold:focus-visible { outline: 2px solid #16181c; outline-offset: 2px; }

/* Einwilligung in Erinnerungs-Mails (18.09.2026): Kästchen im E-Mail-Feld der Einschätzung.
   Die Feld-Regeln (.field label halbfett, .field input:focus ohne Umriss) gelten hier nicht. */
.lead-einwilligung { margin-top: 10px; }
.lead-einwilligung label { font-weight: 400; font-size: .92em; line-height: 1.5; }
.lead-einwilligung input:focus,
.lead-einwilligung input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.field.valid .lead-einwilligung input { background-image: none; padding: 0; }

/* Kontaktbrücke (27.09.2026): beide Kontaktwege sichtbar – zuerst das Feld des gewählten
   Wegs (Pflicht), darunter das andere als freiwilliges Feld mit kurzem Hinweis; formular.js
   hängt die Felder um. Das Anruf-Kästchen (#leadAnrufOk) erscheint nur beim Weg E-Mail mit
   Telefonnummer – als eigenes .field, damit sein Fehlertext nicht am Nummernfeld hängt. */
.lead-kontakt .field .hint { margin: 6px 0 0; font-size: .8rem; line-height: 1.5; }
.lead-kontakt .lead-anruf-ok { margin: -4px 0 14px; }
.lead-kontakt .lead-anruf-ok .lead-einwilligung { margin-top: 0; }
.lead-kontakt .lead-anruf-ok .err { margin-top: 0; }

/* =================================================================
   Ergebnis auf EINE Handlung verdichtet (27.09.2026). Mobil zuerst (375 px).
   ================================================================= */
#ergebnisZusage[hidden], .uebernahme-hinweis[hidden], #kinderCheckOk[hidden] { display: none !important; }

/* Zusagezeile direkt über der Kontaktbrücke: schlicht, ohne Kasten */
.ergebnis-zusage {
  margin: 1.1rem 0 0; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--ink);
}
.ergebnis-zusage + .lead-haupt { margin-top: .7rem; }

/* Hinweiskarten und Ergebnis-Karten stehen jetzt UNTER Kontaktbrücke und Zweitweg */
.check-ergebnis .kk-box,
.check-ergebnis .vm-box,
.check-ergebnis .hinweis-box { margin-top: 1.3rem; }
.check-ergebnis .ergebnis-karten { margin-top: 1.4rem; }

/* =================================================================
   Mandatsteil (Datenwand-Umbau 27.09.2026)
   ================================================================= */
/* Übernahme aus dem Check: „Aus Ihrem Check übernommen – bitte prüfen." (formular.js) */
.uebernahme-hinweis {
  font-size: .8rem; line-height: 1.45; margin: 6px 0 0; color: var(--accent-ink); font-weight: 600;
}
/* In der Beschriftung eines Textfelds (formular.js): eigene Zeile unter dem Feldnamen */
.field label .uebernahme-hinweis { display: block; margin: 2px 0 0; }
.radio-cards > .uebernahme-hinweis { margin: -2px 0 0; }

/* Hinweis unter einer ganzen Feldzeile (PLZ/Ort → zuständiges Familiengericht) */
.step > .zeile-hinweis {
  font-size: .8rem; line-height: 1.5; color: var(--ink-50); margin: -10px 0 18px;
}