/* ===========================================================================
   Detailansicht im Stil des Relaunchs (Nachbesserung nach Testseite 1, Andi, 16.10.2026)

   „Die Texte stehen teilweise außerhalb der Button, weil sie durch ‚Freiwillig‘
   verschoben werden; das Design entspricht nicht dem Rest der Seite; die
   Schriftart ist noch alt.“

   Regeln wie im Rest der Seite: Der Text steht frei, ohne Fläche dahinter. Was man
   antippt, ist ein Gelstück (jelly-form.css). Überschriften in der Serifenschrift der
   Abschnitte, alles andere in Figtree. Die Datei löst die alte Glasgestaltung der
   Detailansicht aus stil.css (Abschnitt „Detailansicht mit Bild und Glas“) ab; jede
   Regel trägt deshalb body.zeigt-detail, damit sie dieselbe Gewichtung hat und durch
   die spätere Stellung gewinnt. Die Rechnung selbst bleibt unberührt.
   =========================================================================== */

/* Der Hauptbereich bekommt per Skript den Fokus (app.js); ein Rahmen darum wäre ein weißer Kasten. */
#hauptbereich:focus, #hauptbereich:focus-visible { outline: none; }

/* --- Kopf: Überschrift, Zurück, Reiter -------------------------------------- */
body.zeigt-detail .detail-titel { margin: 32px 0 26px; max-width: 1100px; }
body.zeigt-detail .detail-titel .etikett { font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 0 0 12px; }
body.zeigt-detail #detailansicht .detail-ueberschrift {
    margin: 0; max-width: 18ch; font: 400 60px/1 var(--f-serif); letter-spacing: -.01em; text-transform: none;
    color: var(--text); text-wrap: balance; background: none; -webkit-text-fill-color: currentColor;
}
body.zeigt-detail #detailansicht .detail-ueberschrift em { font-style: italic; color: var(--akzent); -webkit-text-fill-color: currentColor; background: none; }

body.zeigt-detail .detail-kopfzeile { max-width: 1100px; gap: 12px; margin-bottom: 30px; align-items: stretch; }
body.zeigt-detail .detail-kopfzeile .wizard-progress-container { flex: 1 1 520px; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.zeigt-detail .step-indicators {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: none; padding: 0; overflow: visible;
    background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.zeigt-detail .step-zurueck { padding: 0 22px; border-radius: var(--r-jelly-knopf); background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--feld-text); }
/* Der Reiter: Nummer und Name in einer Zeile, „freiwillig“ darunter, nie daneben. */
body.zeigt-detail [data-jelly].jelly.step-pill {
    flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-content: center; justify-items: start;
    min-height: 56px; padding: 6px 18px; text-align: left; white-space: normal; font: 600 16px/1.2 var(--f-text);
    border: 1px solid var(--jelly-rand); background: linear-gradient(165deg, var(--jelly-a), var(--jelly-b)); color: var(--feld-text);
}
body.zeigt-detail [data-jelly].jelly.step-pill.active { background: radial-gradient(120% 130% at 30% 0%, var(--knopf-a), var(--knopf-b) 70%); color: var(--knopf-text); border-color: transparent; }
body.zeigt-detail .step-pill .pill-nr { grid-row: 1 / span 2; align-self: center; font: 600 13px/1 var(--f-text); font-variant-numeric: tabular-nums; color: inherit; opacity: .75; }
body.zeigt-detail .step-pill .pill-frei {
    grid-column: 2; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; text-transform: none; letter-spacing: 0;
    font: 400 12px/1.2 var(--f-text); opacity: .75; color: inherit;
}
body.zeigt-detail .step-pill.active :is(.pill-nr, .pill-frei) { color: inherit; box-shadow: none; opacity: .85; }
@media (max-width: 760px) {
    body.zeigt-detail #detailansicht .detail-ueberschrift { font-size: 44px; }
    body.zeigt-detail .detail-kopfzeile { gap: 10px; }
    body.zeigt-detail .detail-kopfzeile .step-zurueck { flex: 1 1 100%; justify-content: center; }
    body.zeigt-detail .step-indicators { gap: 8px; }
    body.zeigt-detail [data-jelly].jelly.step-pill { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 6px 8px; min-height: 64px; font-size: 14.5px; row-gap: 2px; border-radius: var(--r-jelly-zeile); }
    body.zeigt-detail .step-pill .pill-nr { grid-row: auto; font-size: 12px; }
    body.zeigt-detail .step-pill .pill-frei { grid-column: 1; font-size: 11.5px; padding: 0; }
}

/* --- Karten werden freier Text ----------------------------------------------- */
body.zeigt-detail :is(.wizard-card, .urteil-card, .haushalt-card, .chart-card, .kpi-card, .kpi-grid, #dashboard > .risiko-block, #dashboard > .reserve-satz, #dashboard > .speicher-hinweis, #dashboard > .aktion-hinweis, #dashboard > .ergebnis-vorbehalt),
body.zeigt-detail :is(.wizard-card, .urteil-card, .haushalt-card, .accordion-item, .chart-card) :is(.freiwillig-hinweis, .haftungshinweis, .steuer-disclaimer, .selbstaendig-hinweis, .haushalt-hinweis, .beleihung-hinweis, .reserve-satz, .tabelle-wrapper, .annahme-box, .annahme-hinweis) {
    background: none; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.zeigt-detail .wizard-card { padding: 0; margin-bottom: 28px; max-width: 1100px; border: 0; animation: none; }
body.zeigt-detail :is(.urteil-card, .haushalt-card, .chart-card) { padding: 22px 0 0; border: 0; border-top: 1px solid var(--strich); margin: 0 0 30px; max-width: 1100px; }
body.zeigt-detail .urteil-card.gruen { border-top-color: var(--s-gut); }
body.zeigt-detail .urteil-card.gelb { border-top-color: var(--s-halb); }
body.zeigt-detail .urteil-card.rot { border-top-color: var(--s-schlecht); }
body.zeigt-detail #dashboard > :is(.risiko-block, .reserve-satz, .aktion-hinweis, .speicher-hinweis) { padding: 0; border: 0; margin: 0 0 24px; max-width: 880px; }
body.zeigt-detail #detailansicht .haftungshinweis { width: 100%; box-sizing: border-box; padding: 0; margin: 0 0 24px; max-width: 1100px; font-size: 14px; line-height: 1.55; color: var(--leise); background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.zeigt-detail #dashboard { width: 100%; max-width: 1100px; }
body.zeigt-detail .haftungshinweis strong { color: var(--text); }

/* Kennzahlen: vier Spalten ohne Gitterlinien, jede mit einer Linie darüber. */
body.zeigt-detail .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; max-width: 1100px; margin: 0 0 30px; border: 0; overflow: visible; }
body.zeigt-detail .kpi-card { padding: 16px 0 0; border: 0; border-top: 1px solid var(--strich); }
@media (max-width: 900px) { body.zeigt-detail .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 480px) { body.zeigt-detail .kpi-grid { column-gap: 18px; } }

/* --- Schrift ----------------------------------------------------------------- */
body.zeigt-detail #detailansicht .step-header h3 { font: 400 40px/1.05 var(--f-serif); letter-spacing: -.005em; text-transform: none; color: var(--text); margin: 0 0 8px; }
body.zeigt-detail #detailansicht .step-header p { font: 400 16px/1.5 var(--f-text); color: var(--text); max-width: 56ch; }
body.zeigt-detail #detailansicht .abschnitt-titel { font: 600 12px/1.2 var(--f-etikett); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin: 34px 0 18px; padding: 0 0 10px; border-bottom: 1px solid var(--strich); }
body.zeigt-detail #detailansicht :is(label, .help-text, .annahme-hinweis, .detail-row, td, th) { font-family: var(--f-text); }
body.zeigt-detail #detailansicht label { font-size: 15px; font-weight: 600; color: var(--text); }
body.zeigt-detail #detailansicht .help-text { font-size: 14px; line-height: 1.5; color: var(--text); opacity: .85; }
.aufklapper-kopf, #exposeDialog :is(.aufklapper-kopf, button, label, p) { font-family: var(--f-text); }
@media (max-width: 760px) { body.zeigt-detail #detailansicht .step-header h3 { font-size: 34px; } }

/* --- Felder: Beschriftung oben, Feld darunter, Hilfe darunter ---------------- */
body.zeigt-detail .wizard-card .eingabe-gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 26px; max-width: 560px; }
body.zeigt-detail .wizard-card .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; max-width: 1100px; align-items: start; }
body.zeigt-detail .wizard-card .form-row .eingabe-gruppe { grid-template-columns: minmax(0, 1fr); max-width: none; }
body.zeigt-detail .wizard-card .eingabe-gruppe > * { grid-column: 1; }
body.zeigt-detail .wizard-card .eingabe-gruppe > label { margin: 0; font-weight: 600; color: var(--text); }
body.zeigt-detail .wizard-card .eingabe-gruppe :is(input, select, .readonly-field, .auswahl) { width: 100%; min-width: 0; box-sizing: border-box; grid-column: 1; }
body.zeigt-detail .wizard-card :is(input[type="text"], input[type="number"], select) { background: var(--feld); border-color: var(--strich); }
body.zeigt-detail #detailansicht .help-text { color: var(--text); }
body.zeigt-detail #detailansicht .mehr > summary { box-shadow: none; padding: 4px 0; color: var(--akzent); }
@media (max-width: 760px) { body.zeigt-detail .wizard-card .form-row { grid-template-columns: minmax(0, 1fr); } }

/* --- Zurück/Weiter unter dem Formular ----------------------------------------- */
body.zeigt-detail .button-bar { max-width: 1100px; margin: 30px 0 10px; }

/* --- Aktionen: nur noch „Eingaben ändern“ und „Exposé erstellen“ -------------------- */
body.zeigt-detail #dashboard .action-bar {
    position: static; display: flex; flex-wrap: wrap; align-self: stretch; width: 100%; max-width: 1100px; justify-content: flex-start; gap: 12px; margin: 10px 0 14px; padding: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.zeigt-detail #dashboard > .aktion-hinweis { max-width: 56ch; margin: 0 0 24px; padding: 0; font-size: 14px; line-height: 1.5; color: var(--leise); }
@media (max-width: 760px) {
    body.zeigt-detail #dashboard .action-bar { display: grid; grid-template-columns: minmax(0, 1fr); }
    body.zeigt-detail #dashboard .action-bar .action-btn { width: 100%; justify-content: center; }
}

/* --- Aufklapper und Tabellen --------------------------------------------------- */
body.zeigt-detail .accordion-item { max-width: 1100px; margin: 0 0 14px; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.zeigt-detail .accordion-item .accordion-header { border: 0; background: none; box-shadow: none; }
body.zeigt-detail .accordion-item .aufklapper-kopf, body.zeigt-detail .accordion-header { padding: 14px 22px; min-height: 52px; font: 600 16px/1.3 var(--f-text); color: var(--feld-text); border-radius: var(--r-jelly-zeile); }
body.zeigt-detail .accordion-body, body.zeigt-detail .accordion-item .aufklapper-inhalt { color: var(--feld-text); }
body.zeigt-detail table th { background: none; font: 600 11.5px/1.3 var(--f-etikett); letter-spacing: .06em; color: var(--leise); }
body.zeigt-detail table td, body.zeigt-detail table th { border-color: var(--strich); }
body.zeigt-detail .detail-row { border-color: var(--strich); }

/* Der Exposé-Dialog bleibt Papier: stil.css färbt .help-text in der Detailansicht hell (body.zeigt-detail .help-text),
   und das schlug auf das helle Blatt durch (Andi, 16.10.2026: Abend und Nacht weiß auf weiß). */
body.zeigt-detail .expose-dialog .help-text { color: var(--blatt-leise); }
body.zeigt-detail .expose-dialog .help-text strong { color: var(--blatt-text); }