/*
 * LFS Online-Anmeldung — Formular (Frontend und Backend-Korrekturformular)
 * Alle Regeln beginnen mit .lfsb… — keine globalen Elementregeln (läuft auch im WordPress-Backend).
 * Barrierefreiheit: Knöpfe und Felder ≥ 44 px hoch (Fortschrittslinks am Handy ≥ 24 px, WCAG 2.5.8),
 * sichtbarer Fokus (3 px, ≥ 10:1), Fehler nicht nur über Farbe,
 * Schriftgröße in Feldern 16 px (kein Auto-Zoom auf iOS), prefers-reduced-motion beachtet.
 */

.lfsb { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.lfsb *, .lfsb *::before, .lfsb *::after { box-sizing: border-box; }
.lfsb [hidden] { display: none !important; }
.lfsb a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.lfsb a:hover { color: var(--primary-800); text-decoration-thickness: 2px; }
.lfsb strong { color: var(--ink2); font-weight: 600; }

/* Fokus — überall gleich deutlich. Die Fehlerübersicht mit :focus statt :focus-visible: form.js setzt den Fokus
   per Skript, dabei zeigen Browser :focus-visible nicht verlässlich an. */
.lfsb a:focus-visible, .lfsb button:focus-visible, .lfsb input:focus-visible, .lfsb select:focus-visible,
.lfsb textarea:focus-visible, .lfsb summary:focus-visible, .lfsb-errors:focus {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--white);
}

/* Typografie */
.lfsb-h1 { font-family: var(--font-serif); font-weight: 800; font-size: var(--fs-h1); line-height: 1.15; color: var(--ink2); margin: 0 0 var(--space-4); letter-spacing: -0.01em; text-wrap: balance; }
.lfsb-h2 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h2); line-height: 1.25; color: var(--ink2); margin: var(--space-6) 0 var(--space-3); padding: 0; }
.lfsb-h3 { font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink2); margin: 0 0 var(--space-3); }
.lfsb-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink2); max-width: 40rem; margin: 0 0 var(--space-6); }
.lfsb-eyebrow { font-family: var(--font-mono); font-size: var(--fs-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--primary); margin: 0 0 var(--space-2); }
.lfsb-muted { color: var(--ink); font-size: var(--fs-body-sm); }
.lfsb-mono, .lfsb-number { font-family: var(--font-mono); letter-spacing: 0.02em; }
.lfsb-list { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.lfsb-list li { margin-bottom: var(--space-2); }
.lfsb-list ul { margin: var(--space-2) 0 var(--space-1); padding-left: var(--space-5); }
.lfsb-sr, .lfsb-default-submit { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lfsb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Fortschritt: nummerierte Kreise, durch Linien verbunden — zu erledigten und erreichten Seiten durchgezogen, zu
   offenen gestrichelt; Beschriftung darunter. Zustand nicht nur über Farbe (WCAG 1.4.1): Füllung, Umriss, Strichart,
   fette Schrift; Screenreader hören „aktuelle Seite“ (aria-current) bzw. „erledigt“. */
.lfsb-progress { --dot: 2.25rem; margin: 0 0 var(--space-6); }
.lfsb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.lfsb-steps li { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--fs-caption); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
/* Linie vom vorigen Kreis zu diesem — mit etwas Luft zu beiden Kreisen */
.lfsb-steps li + li::before { content: ""; position: absolute; top: calc(var(--dot) / 2 - 1px); left: calc(-50% + var(--dot) / 2 + 6px); right: calc(50% + var(--dot) / 2 + 6px); border-top: 2px solid var(--primary); }
.lfsb-steps li.is-todo::before { border-top: 2px dashed var(--field-border); }
.lfsb-steps a { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.lfsb-step-num { display: grid; place-items: center; width: var(--dot); height: var(--dot); margin: 0 0 var(--space-2); border: 2px solid var(--field-border); border-radius: 50%; background: var(--white); color: var(--ink2); font-weight: 600; font-size: 0.95rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lfsb-steps li.is-done .lfsb-step-num, .lfsb-steps li.is-current .lfsb-step-num { background: var(--primary); border-color: var(--primary); color: var(--white); }
/* aktuelle Seite: gefüllt wie „erledigt“, unterschieden durch den Doppelring */
.lfsb-steps li.is-current .lfsb-step-num { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary); }
/* erreicht, aber noch nicht abgeschlossen (nach „Zurück“) */
.lfsb-steps li.is-open .lfsb-step-num { border-color: var(--primary); color: var(--primary); }
.lfsb-steps li.is-done .lfsb-step-name, .lfsb-steps li.is-open .lfsb-step-name { color: var(--ink2); }
.lfsb-steps li.is-current .lfsb-step-name { color: var(--ink2); font-weight: 700; }
.lfsb-steps a:hover .lfsb-step-name { text-decoration: underline; color: var(--primary); }
.lfsb-steps a:hover .lfsb-step-num { box-shadow: 0 0 0 3px var(--primary-tint); }
@media (max-width: 40rem) {
	/* Handy: nur Kreise und Linien; der Name der aktuellen Seite steht als Überschrift darunter */
	.lfsb-progress { --dot: 1.75rem; }
	.lfsb-step-num { margin: 0; font-size: 0.8rem; }
	.lfsb-steps li + li::before { left: calc(-50% + var(--dot) / 2 + 3px); right: calc(50% + var(--dot) / 2 + 3px); }
	.lfsb-step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Formular */
.lfsb-form { max-width: 46rem; }
.lfsb-field { margin: 0 0 var(--space-4); padding: 0; border: 0; min-width: 0; }
.lfsb-field.has-error { border-left: 4px solid var(--error); padding-left: var(--space-4); }
.lfsb-label { display: block; font-weight: 600; color: var(--ink2); margin: 0 0 var(--space-1); font-size: var(--fs-body); line-height: 1.4; padding: 0; }
.lfsb-label--small { font-weight: 500; font-size: var(--fs-body-sm); }
.lfsb-optional { font-weight: 400; color: var(--ink); }
.lfsb-req { color: var(--error); font-weight: 700; }
.lfsb-form .lfsb-section-h { margin: var(--space-6) 0 var(--space-3); } /* Zwischenüberschrift ohne Trennlinie (Wunsch 18.10.2026) */
.lfsb-note { max-width: 40rem; margin: 0 0 var(--space-4); color: var(--ink2); }
.lfsb-note--italic { margin-top: var(--space-4); font-style: italic; color: var(--ink); }
.lfsb-note p { margin: 0 0 var(--space-3); }
/* Zwei Auswahlen nebeneinander — auch am Handy (je halbe Breite) */
.lfsb-pair { display: flex; gap: var(--space-3); max-width: 23rem; }
.lfsb-pair-part { flex: 1 1 0; min-width: 0; }
.lfsb-pair-part label, .lfsb-date-part label { display: block; font-size: var(--fs-body-sm); margin-bottom: var(--space-1); color: var(--ink2); }
.lfsb-date-part label { margin: var(--space-1) 0 0; } /* „Tag“, „Monat“, „Jahr“ stehen unter den Feldern */
.lfsb .lfsb-pair-part select { padding-left: 0.6rem; padding-right: 1.9rem; background-position: right 0.6rem center; }
.lfsb-hint { color: var(--ink); font-size: var(--fs-body-sm); margin: 0 0 var(--space-2); max-width: 40rem; overflow-wrap: anywhere; }
.lfsb-hint--below { margin: var(--space-2) 0 0; } /* Hinweis unter dem Eingabefeld (LFSB_Render::describe) */
.lfsb-cond-note { font-size: var(--fs-caption); color: var(--ink); margin: 0 0 var(--space-2); font-style: italic; }
/* .lfsb-upload-msg: Meldung von form.js zur Dateiauswahl (ohne Warnzeichen und Abstand der Feldfehler) */
.lfsb-error, .lfsb-upload-msg { color: var(--error); font-weight: 600; font-size: var(--fs-body-sm); }
.lfsb-error { margin: 0 0 var(--space-2); }
.lfsb-upload-msg:empty { margin: 0; } /* liegt schon beim Laden bereit (role=alert) — leer ohne Abstand */
.lfsb-error::before { content: "⚠ "; }

.lfsb input[type="text"], .lfsb input[type="email"], .lfsb input[type="tel"], .lfsb select, .lfsb textarea {
	display: block; width: 100%; min-height: var(--target); padding: 0.55rem 0.75rem;
	font: inherit; font-size: var(--fs-body); color: var(--ink2); background: var(--white);
	border: 2px solid var(--field-border); border-radius: var(--radius-md); box-shadow: none; margin: 0;
	appearance: none; -webkit-appearance: none;
}
.lfsb select { padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%233a403b' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; }
.lfsb input[aria-invalid="true"], .lfsb select[aria-invalid="true"] { border-color: var(--error); border-width: 3px; }
.lfsb-w-s input, .lfsb-w-s select { max-width: 9rem; }
.lfsb-w-m input, .lfsb-w-m select, .lfsb-w-row input, .lfsb-w-row select { max-width: 22rem; }
.lfsb-w-l input, .lfsb-w-l select { max-width: 34rem; }

/* Feld mit Umschaltknopf „Keinen“ (Feld-Eigenschaft „none“): Knopf rechts daneben, bei Platzmangel darunter.
   Gedrückt: gefüllt und mit Häkchen (nicht nur über die Farbe erkennbar, WCAG 1.4.1), das Feld ist schreibgeschützt */
.lfsb-with-none { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); max-width: 34rem; }
.lfsb .lfsb-with-none input[type="text"] { flex: 1 1 12rem; width: auto; min-width: 0; max-width: none; }
.lfsb .lfsb-with-none input[readonly] { background: var(--paper); }
.lfsb-none-btn { flex: 0 0 auto; }
.lfsb .lfsb-none-btn[aria-pressed="true"] { background: var(--primary); color: var(--white); border-color: var(--primary); }
.lfsb .lfsb-none-btn[aria-pressed="true"]:hover { background: var(--primary-700); color: var(--white); }
.lfsb-none-check { display: none; }
.lfsb-none-btn[aria-pressed="true"] .lfsb-none-check { display: inline; }

/* Am Desktop ein Raster aus sechs Spalten: schmale Felder (s = 2, m = 3, w = 4 Spalten) stehen nebeneinander,
   breite (l), Zwischenüberschriften, Hinweise, Ja/Nein-Fragen, Blöcke und Dateien über die volle Breite;
   „row“ = schmales Feld in eigener Zeile. Am Handy bleibt alles untereinander. Ausgeblendete Felder ([hidden])
   nehmen keinen Platz ein. Reihenfolge im Quelltext = Lese- und Tab-Reihenfolge (WCAG 1.3.2). */
@media (min-width: 48rem) {
	.lfsb-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
	.lfsb-fields > * { grid-column: 1 / -1; min-width: 0; }
	.lfsb-fields > .lfsb-w-s { grid-column: span 2; }
	.lfsb-fields > .lfsb-w-m { grid-column: span 3; }
	.lfsb-fields > .lfsb-w-w { grid-column: span 4; }
	.lfsb-fields > .lfsb-w-m input, .lfsb-fields > .lfsb-w-m select, .lfsb-fields > .lfsb-w-w input, .lfsb-fields > .lfsb-w-w select, .lfsb-fields > .lfsb-w-s input, .lfsb-fields > .lfsb-w-s select { max-width: none; }
	.lfsb-fields > .lfsb-w-l input, .lfsb-fields > .lfsb-w-l select, .lfsb-fields > .lfsb-w-l .lfsb-with-none { max-width: none; } /* rechte Kante bündig mit den Feldern daneben */
	.lfsb-fields > .lfsb-w-row input, .lfsb-fields > .lfsb-w-row select { max-width: calc(50% - var(--space-5) / 2); } /* so breit wie ein halbes Feld */
	.lfsb-fields > .lfsb-w-m .lfsb-pair, .lfsb-fields > .lfsb-w-l .lfsb-offer-hints { max-width: none; }
}

/* Datum aus drei Feldern */
.lfsb-date { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.lfsb-date-t input, .lfsb-date-m input { width: 4rem !important; }
.lfsb-date-j input { width: 6rem !important; }

/* Radio / Checkbox */
.lfsb-choices { display: flex; flex-direction: column; gap: var(--space-2); }
.lfsb-choices--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.lfsb-choice { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target); padding: 0.55rem 0; }
.lfsb-choice input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--primary); cursor: pointer; }
.lfsb-choice label { cursor: pointer; line-height: 1.45; color: var(--ink2); }
.lfsb-choice--check { padding: var(--space-3) var(--space-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
.lfsb-field.has-error .lfsb-choice--check { border-color: var(--error); }

/* Wiederholungsblöcke */
.lfsb-repeater { margin: 0 0 var(--space-5); }
.lfsb-repeater > legend { margin-bottom: var(--space-3); }
.lfsb-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-1); margin: 0 0 var(--space-3); min-width: 0; }
/* Überschrift INNERHALB des Kastens: Ein Float holt die Legende aus dem Rahmen in den Inhaltsbereich */
.lfsb fieldset.lfsb-item > legend, .lfsb fieldset.lfsb-doc > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-3); font-family: var(--font-serif); font-weight: 700; font-size: var(--fs-body-lg); line-height: 1.35; color: var(--ink2); }
.lfsb fieldset.lfsb-item > legend + *, .lfsb fieldset.lfsb-doc > legend + * { clear: both; }
.lfsb-item--optional { background: var(--paper); border-style: dashed; }
.lfsb-remove { margin: 0 0 var(--space-4); }

/* Buttons — Varianten mit .lfsb davor, damit sie auch an Links die Farben aus .lfsb a / .lfsb a:hover überstimmen */
.lfsb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--target); padding: 0.6rem 1.35rem; font: inherit; font-weight: 600; font-size: var(--fs-body); line-height: 1.2; text-decoration: none; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lfsb .lfsb-btn--primary { background: var(--primary); color: var(--white); }
.lfsb .lfsb-btn--primary:hover { background: var(--primary-700); color: var(--white); }
.lfsb .lfsb-btn--primary:active { background: var(--primary-800); color: var(--white); }
.lfsb .lfsb-btn--secondary { background: var(--white); color: var(--primary); border-color: var(--primary); }
.lfsb .lfsb-btn--secondary:hover { background: var(--primary-tint); color: var(--primary-800); }
.lfsb .lfsb-btn--ghost { background: transparent; color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; }
.lfsb .lfsb-btn--ghost:hover { background: var(--primary-tint); color: var(--primary-800); }
.lfsb .lfsb-btn--link { background: none; border: 0; padding: 0.4rem 0; min-height: 2.75rem; color: var(--primary); text-decoration: underline; font-weight: 500; }
.lfsb-btn--large { font-size: var(--fs-body-lg); padding: 0.8rem 1.8rem; }
.lfsb-btn--small { min-height: 2.75rem; padding: 0.4rem 1rem; font-size: var(--fs-body-sm); }
.lfsb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-6) 0 var(--space-4); } /* ohne Trennlinie */
/* Formularseiten: „Zurück“ links, „Weiter“ rechts (auch ohne „Zurück“ auf Seite 1), „Zwischenspeichern“ darunter */
.lfsb-actions--nav .lfsb-btn-next { margin-left: auto; }
.lfsb-actions-more { flex: 1 1 100%; }
.lfsb-actions-more .lfsb-btn--ghost { padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0; } /* Text bündig mit „Zurück“ und „Bewerbung abbrechen“ */
.lfsb-discard { margin: var(--space-4) 0 0; }
@media (max-width: 40rem) {
	/* Handy: Hauptknöpfe volle Breite, Textknöpfe linksbündig statt eingerückt/zentriert */
	.lfsb-actions .lfsb-btn--primary, .lfsb-actions .lfsb-btn--secondary { flex: 1 1 100%; }
	.lfsb-actions .lfsb-btn--ghost, .lfsb .lfsb-btn--link { justify-content: flex-start; text-align: left; padding-left: 0; padding-right: 0; }
	/* Formularseiten: „Zurück“ und „Weiter“ bleiben nebeneinander — „Weiter“ nimmt den Rest der Zeile, lange
	   Beschriftungen („Speichern und zurück zu den Dateien“) brechen im Knopf um */
	.lfsb-actions--nav .lfsb-btn-back { flex: 0 0 auto; }
	.lfsb-actions--nav .lfsb-btn-next { flex: 1 1 0; min-width: 0; text-align: center; }
	.lfsb-actions--nav .lfsb-btn--large { padding-left: 1rem; padding-right: 1rem; }
}

/* Fehlerübersicht und Hinweise */
.lfsb-errors { background: var(--white); border: 4px solid var(--error); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-6); max-width: 46rem; }
.lfsb-errors-title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--error); margin: 0 0 var(--space-3); }
.lfsb-errors ul { margin: 0; padding-left: var(--space-5); }
.lfsb-errors li { margin-bottom: var(--space-1); }
.lfsb .lfsb-errors a, .lfsb .lfsb-errors a:hover { color: var(--error); font-weight: 600; }
.lfsb-notice { border-left: 6px solid var(--primary); background: var(--ok-tint); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); border-radius: var(--radius-md); max-width: 46rem; }
.lfsb-notice p { margin: 0; color: var(--ink2); }
.lfsb-notice--warn { border-color: var(--warn); background: var(--warn-tint); }
.lfsb-notice--warn p { color: var(--warn); font-weight: 600; }
.lfsb-notice--info { border-color: var(--ink2); background: var(--white); }

/* Bildungsgang-Hinweise (die Aufklappzeile teilen sie mit „Ihre Angaben noch einmal ansehen“) */
.lfsb-offer-hints { margin-top: var(--space-3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); max-width: 34rem; }
.lfsb-offer-hints summary, .lfsb-summary-details > summary { cursor: pointer; font-weight: 600; color: var(--primary); min-height: 2.75rem; display: flex; align-items: center; }
.lfsb-offer-hint .lfsb-offer-title { font-size: var(--fs-body); font-weight: 600; margin: var(--space-3) 0 var(--space-1); color: var(--ink2); }
.lfsb-offer-hint ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.lfsb-offer-hint p { margin: 0 0 var(--space-2); font-size: var(--fs-body-sm); }
.lfsb-offer-sub { font-weight: 600; color: var(--ink2); }
/* is-single setzt form.js, sobald ein Bildungsgang gewählt ist: dann nur dessen Hinweise, ohne Aufklappzeile */
.lfsb-offer-hints.is-single summary { display: none; }

/* Dokumente */
.lfsb-docs { margin: var(--space-4) 0 0; }
.lfsb-doc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-3); }
.lfsb-doc.has-error { padding-left: calc(var(--space-5) - 3px); } /* Fehlerrand (.lfsb-field.has-error) ist 3 px breiter — Inhalt bleibt bündig */
.lfsb-filelist { list-style: none; margin: var(--space-3) 0; padding: 0; }
.lfsb-filelist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--ok-tint); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
/* Vorschau hochgeladener Dateien (Formular und Backend; im Backend außerhalb von .lfsb, daher eigenes box-sizing) */
.lfsb-thumb { flex: none; box-sizing: border-box; display: inline-grid; place-items: center; width: 4rem; height: 4rem; object-fit: contain; vertical-align: middle; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lfsb-thumb--text { font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.06em; color: var(--ink2); }
.lfsb-thumb-link { flex: none; display: inline-block; line-height: 0; border-radius: var(--radius-sm); }
.lfsb-thumb-link:hover .lfsb-thumb { border-color: var(--primary); }
.lfsb-file-view { font-weight: 600; }
.lfsb-file-name { font-weight: 600; color: var(--ink2); word-break: break-all; }
.lfsb-file-size { color: var(--ink); font-size: var(--fs-body-sm); }
.lfsb-upload { margin-top: var(--space-3); }
.lfsb-upload input[type="file"] { display: block; margin: var(--space-1) 0 var(--space-2); font: inherit; font-size: var(--fs-body-sm); padding: var(--space-3); border: 2px dashed var(--field-border); border-radius: var(--radius-md); background: var(--paper); width: 100%; }
.lfsb-upload input[type="file"][aria-invalid="true"] { border-color: var(--error); border-style: solid; }
.lfsb-later { margin-top: var(--space-3); }
/* Statuszeile je Dokument (LFSB_Render::docs): leer ohne Höhe — als Live-Region besteht sie trotzdem schon beim Laden */
.lfsb-upload-status { margin: 0; color: var(--ok); font-weight: 600; font-size: var(--fs-body-sm); }
.lfsb-upload-status:not(:empty) { margin: var(--space-3) 0 0; }
.lfsb-docs > .lfsb-hint p { margin: 0 0 var(--space-2); }

/* Zusammenfassung */
.lfsb-summary { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-4); }
.lfsb-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.lfsb-edit { font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center; }
.lfsb-dl { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: var(--space-2) var(--space-6); margin: var(--space-3) 0 0; }
.lfsb-dl dt { color: var(--ink); font-size: var(--fs-body-sm); }
.lfsb-dl dd { margin: 0; color: var(--ink2); font-weight: 500; overflow-wrap: anywhere; }
.lfsb-dl dt.lfsb-dl-group { grid-column: 1 / -1; font-weight: 600; color: var(--ink2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.lfsb-dl dd.lfsb-dl-group { grid-column: 1 / -1; }
.lfsb-dl--inner { margin-top: 0; }
@media (max-width: 34rem) {
	.lfsb-dl { grid-template-columns: 1fr; gap: 0; }
	.lfsb-dl dd { margin-bottom: var(--space-3); }
}
.lfsb-overview { margin: var(--space-6) 0 var(--space-4); }
.lfsb-summary-details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-5); margin: 0 0 var(--space-4); }
.lfsb-summary-details[open] > summary { margin-bottom: var(--space-3); }
.lfsb-summary-details .lfsb-summary { border: 0; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }

/* Startseite */
.lfsb-lead--strong { font-weight: 600; }
.lfsb-welcome { margin: 0 0 var(--space-6); }
.lfsb-welcome p { margin: 0 0 var(--space-3); }
.lfsb-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin: 0 0 var(--space-6); }
.lfsb-card--quiet { background: transparent; }
.lfsb-welcome-footer { margin-top: var(--space-10); }

/* Eingangsbestätigung */
.lfsb-success { background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--primary); border-radius: var(--radius-lg); padding: var(--space-8); margin-bottom: var(--space-6); }
.lfsb-receipt { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4) var(--space-6); margin: var(--space-6) 0; }
.lfsb-receipt dt { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-overline); font-family: var(--font-mono); color: var(--primary); }
.lfsb-receipt dd { margin: var(--space-1) 0 0; color: var(--ink2); font-weight: 600; }
.lfsb-receipt .lfsb-number { font-size: 1.5rem; }
.lfsb-print-only { display: none; }

/* Längere Texte: Datenschutzhinweise, Barrierefreiheit, Startseite */
.lfsb-prose { max-width: 46rem; }
.lfsb-prose h2 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--ink2); line-height: 1.3; margin: var(--space-8) 0 var(--space-2); }
.lfsb-prose h3 { font-family: var(--font-serif); font-size: var(--fs-body-lg); color: var(--ink2); margin: var(--space-6) 0 var(--space-2); }
.lfsb-draft-note { background: var(--warn-tint); border-left: 6px solid var(--warn); padding: var(--space-3) var(--space-4); color: var(--warn); }

@media (prefers-reduced-motion: reduce) {
	.lfsb * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
	/* Schwarz hier statt im Theme: .lfsb setzt eine eigene Textfarbe, die Druckfarbe von body käme nicht an */
	.lfsb { color: #000; }
	.lfsb-no-print, .lfsb-actions, .lfsb-progress, .lfsb-discard { display: none !important; }
	.lfsb-print-only { display: block; }
	.lfsb-success, .lfsb-summary, .lfsb-card { border: 1px solid #999; break-inside: avoid; }
	.lfsb-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12) var(--space-8); margin-top: var(--space-12); }
	.lfsb-signatures p { border-top: 1px solid #000; padding-top: .3rem; font-size: 10pt; }
	.lfsb a { color: #000; text-decoration: none; }
}