/* AYLEEN — gemeinsames Aussehen der Plattform-Oberflächen (Elternbereich, App-Konto, Admin). Ergänzt app.css (Farben, Schrift,
   Kopf, Fuss); alle Klassen beginnen mit «pf-», damit bestehende Seiten unberührt bleiben. Material 3 (Farben aus app.css :root),
   Trefferflächen ≥ 44 px, sichtbarer Fokus, nur logische Abstände (rtl: Arabisch). Keine Inline-Stile (CSP style-src 'self'). */

:root {
  --pf-fehler: #BA1A1A;                       /* M3 error (Kontrast auf Weiss 6,5:1) */
  --pf-fehler-container: #FFDAD6;
  --pf-auf-fehler-container: #410002;
  --pf-erfolg-container: #D7F5DD;             /* auf-Farbe #0B3D1C: Kontrast 11:1 */
  --pf-auf-erfolg-container: #0B3D1C;
  --pf-rand: #74777F;                          /* M3 outline (Feldrand, Kontrast 4,6:1 auf surface) */
}

/* Arabisch ist verbunden (Sperrung zerreisst die Buchstaben), CJK wird nicht gesperrt → auf diesen Seiten jede pf-Sperrung 0
   (wie app.css; Abnahme-Fund 28.09.2026: «Sperrung 0.15px» auf /ar/eltern) */
html[lang="ar"] [class*="pf-"], html[lang="zh-Hans"] [class*="pf-"], html[lang="ja"] [class*="pf-"] { letter-spacing: 0; }

.pf-wurzel { margin-top: 24px; }
.pf-wurzel > * + * { margin-top: 16px; }
.pf-titel { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
.pf-untertitel { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.15px; }
.pf-text { color: var(--md-on-surface-variant); }
.pf-text + .pf-text { margin-top: 8px; }

/* ── Karte ── */
.pf-karte {
  border-radius: 12px; background: var(--md-surface-container-low); box-shadow: var(--md-schatten-1);
  padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.pf-karte--rand { background: var(--md-surface); box-shadow: none; border: 1px solid var(--md-outline-variant); }
.pf-karte__kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-karte__kopf > :first-child { flex: 1 1 auto; min-width: 0; }

/* ── Knöpfe (M3: gefüllt, tonal, umrandet, Text, Gefahr) — 44 px Trefferhöhe ── */
.pf-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 10px 24px; border-radius: 22px; border: 0;
  background: var(--md-primary); color: var(--weiss);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.1px;
  text-decoration: none; cursor: pointer; text-align: center;
}
.pf-knopf:hover { box-shadow: var(--md-schatten-1); }
.pf-knopf--ton { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.pf-knopf--rand { background: transparent; color: var(--md-primary); border: 1px solid var(--pf-rand); }
.pf-knopf--text { background: transparent; color: var(--md-primary); padding-inline: 12px; }
.pf-knopf--text:hover, .pf-knopf--rand:hover { box-shadow: none; background: rgba(72, 93, 146, 0.08); }
.pf-knopf--gefahr { background: var(--pf-fehler); color: var(--weiss); }
.pf-knopf[disabled], .pf-knopf[aria-disabled="true"] { background: rgba(26, 27, 33, 0.12); color: rgba(26, 27, 33, 0.60); box-shadow: none; cursor: default; }
.pf-knopf--text[disabled], .pf-knopf--rand[disabled], .pf-knopf--text[aria-disabled="true"], .pf-knopf--rand[aria-disabled="true"] { background: transparent; }
.pf-knopf[aria-busy="true"] { cursor: progress; }
/* Kästchen während der Anfrage: bleibt fokussierbar (aria-disabled statt disabled, Befund Zugang 26), wirkt aber gesperrt */
.pf-auswahl input[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.pf-knopf .pf-symbol { width: 18px; height: 18px; fill: currentColor; flex: 0 0 18px; }
.pf-knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* ── Formular (M3 umrandetes Textfeld, 56 px) ── */
.pf-formular { display: flex; flex-direction: column; gap: 16px; }
.pf-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-feld__label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface); }
.pf-feld__optional { font-weight: 400; color: var(--md-on-surface-variant); }
.pf-feld__hilfe { font-size: 12px; line-height: 16px; letter-spacing: 0.4px; color: var(--md-on-surface-variant); }
.pf-eingabe {
  width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 4px;
  border: 1px solid var(--pf-rand); background: var(--md-surface); color: var(--md-on-surface);
  font: inherit; font-size: 16px; line-height: 24px; letter-spacing: 0.5px;   /* 16 px: kein Zoom beim Fokus auf iOS */
}
.pf-eingabe--text { min-height: 120px; resize: vertical; }
select.pf-eingabe { appearance: auto; }
.pf-eingabe::placeholder { color: var(--md-on-surface-variant); opacity: 0.8; }
.pf-eingabe:hover { border-color: var(--md-on-surface); }
.pf-eingabe:focus { outline: none; border: 2px solid var(--md-primary); padding: 13px 15px; }
.pf-eingabe:user-invalid, .pf-eingabe[aria-invalid="true"] { border: 2px solid var(--pf-fehler); padding: 13px 15px; }
/* Fehlertext am Feld (plattform.js feldMarkieren; per aria-describedby mit dem Feld verbunden, Befund Zugang 25) */
.pf-feld__fehler { font-size: 12px; line-height: 16px; letter-spacing: 0.4px; font-weight: 500; color: var(--pf-fehler); }
.pf-eingabe--code { font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; letter-spacing: 2px; }
.pf-auswahl { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.pf-auswahl input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--md-primary); }
.pf-datei { min-height: 44px; }

/* ── Meldungen (aria-live) ── */
.pf-meldung { padding: 12px 16px; border-radius: 12px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.pf-meldung--fehler { background: var(--pf-fehler-container); color: var(--pf-auf-fehler-container); }
.pf-meldung--erfolg { background: var(--pf-erfolg-container); color: var(--pf-auf-erfolg-container); }
/* Wird ein Fehler ins Bild geholt (plattform.js meldungsfeld): frei vom klebenden Kopf oben und vom Nach-oben-Knopf (48 px, 18 px vom
   Rand) bzw. der Reiterleiste unten — gemessen im Gesamtablauf (Fehler halb unter dem Nach-oben-Knopf, 28.09.2026) */
.pf-meldung { scroll-margin-block-start: calc(var(--kopf-h, 64px) + 12px); scroll-margin-block-end: 80px; }
body.hat-leiste .pf-meldung { scroll-margin-block-end: calc(var(--leiste-h, 80px) + var(--unten-sicher, 0px) + 76px); }

/* ── Listen, Zeilen, Status-Chips ── */
.pf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-zeile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; flex-wrap: wrap; }
.pf-zeile > .pf-zeile__text { flex: 1 1 12em; min-width: 0; }
.pf-zeile__titel { font-size: 16px; line-height: 24px; color: var(--md-on-surface); }
.pf-zeile__unter { color: var(--md-on-surface-variant); }
.pf-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); font-size: 14px; line-height: 20px; font-weight: 500;
}
.pf-chip--gut { background: var(--pf-erfolg-container); color: var(--pf-auf-erfolg-container); border-color: transparent; }
.pf-chip--warte { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.pf-chip--schlecht { background: var(--pf-fehler-container); color: var(--pf-auf-fehler-container); border-color: transparent; }
.pf-bald {                                                    /* ehrliche Kennzeichnung «Kommt bald» */
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 12px;
  background: var(--md-surface-container); color: var(--md-on-surface-variant); font-size: 12px; line-height: 16px; font-weight: 500;
}

/* ── Code, Vergleichszahl, QR ── */
.pf-code {
  font-family: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
  font-size: 22px; line-height: 32px; letter-spacing: 3px; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate;
}
.pf-vergleich { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 6px; direction: ltr; unicode-bidi: isolate; }
.pf-qr { width: min(264px, 100%); aspect-ratio: 1; background: var(--weiss); border-radius: 12px; padding: 8px; }
.pf-qr .qr { display: block; width: 100%; height: 100%; }

/* ── Dialog ── */
.pf-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 0; border-radius: 28px; padding: 24px; background: var(--md-surface-container); color: var(--md-on-surface);
}
.pf-dialog::backdrop { background: rgba(17, 19, 41, 0.45); }
.pf-dialog__titel { margin: 0 0 16px; font-size: 24px; line-height: 32px; font-weight: 400; }
.pf-dialog__text { color: var(--md-on-surface-variant); }
.pf-dialog__knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* ── Symbole, Fokus, nur für Bildschirmleser ── */
.pf-symbol { width: 24px; height: 24px; fill: currentColor; flex: 0 0 24px; }
.pf-knopf:focus-visible, .pf-eingabe:focus-visible, .pf-auswahl input:focus-visible, .pf-wurzel a:focus-visible,
.pf-dialog button:focus-visible, .pf-chip:focus-visible, .pf-datei:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px;
}
.pf-nur-leser {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pf-laden { color: var(--md-on-surface-variant); }

@media (max-width: 480px) {
  .pf-karte { padding: 16px 12px; }
  .pf-knoepfe > .pf-knopf { flex: 1 1 auto; }
}