/* Prüfungsportal: Musterfamilie 1 «Zeitgebunden prüfen» (PP-05), auf den Bausteinen von fundament-ui.
   Freiheitsgrad geführt: gleiche Bausteine, eigene Anordnung, Leseregel 17 px und 880 px für Aufgabentexte. */

.pf-pruefung .inhalt{max-width:1280px}
.pf-kopf{gap:14px}
.pf-titel{display:grid; line-height:1.25; min-width:0}
.pf-titel b{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-titel .leise-text{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-zeit{font:600 20px/1 var(--mono); font-variant-numeric:tabular-nums; padding:8px 12px; border-radius:var(--r); background:var(--flaeche-2); min-width:92px; text-align:center}
.pf-zeit.warn{background:var(--warn-hg); color:var(--warn)}
.pf-zeit.knapp{background:var(--fehler-hg); color:var(--fehler)}

.pf-raum{display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start}
.pf-raster{position:sticky; top:84px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); padding:16px; display:grid; gap:12px}
.pf-raster-kopf{display:flex; justify-content:space-between; align-items:baseline; font-size:14px}
.pf-raster ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.pf-r{width:100%; aspect-ratio:1; min-height:34px; border-radius:9px; border:1px solid var(--linie-stark); background:var(--flaeche); color:var(--text); font:600 14px/1 var(--schrift); font-variant-numeric:tabular-nums; cursor:pointer; position:relative}
.pf-r.beantwortet{background:var(--p-zart); border-color:var(--p-rand); color:var(--p-text)}
.pf-r.markiert::after{content:""; position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%; background:var(--warn)}
.pf-r[aria-current="true"]{outline:2px solid var(--p-knopf); outline-offset:1px}
.pf-legende{display:grid; gap:6px; font-size:12.5px; color:var(--text-2)}
.pf-legende span{display:flex; align-items:center; gap:8px}
.pf-legende i.pf-r{width:18px; min-height:18px; height:18px; border-radius:5px; display:inline-block; cursor:default}

.pf-aufgabe{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--r-gross); padding:24px; display:grid; gap:18px; max-width:calc(var(--lesebreite) + 50px); box-shadow:var(--sch-1)}
.pf-a-kopf{display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px}
.pf-markieren[aria-pressed="true"]{background:var(--warn-hg); color:var(--warn)}
.pf-a-titel{font-size:var(--lesegroesse); font-weight:500; line-height:1.6; max-width:var(--lesebreite); text-wrap:pretty}
.pf-a-fuss{display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--linie); padding-top:16px}

.pf-material{margin:0; display:grid; gap:6px}
.pf-material figcaption{font-weight:600; font-size:15px}
.pf-tab-huelle{overflow-x:auto; border:1px solid var(--linie); border-radius:var(--r)}
.pf-tab{border-collapse:collapse; width:100%; font-size:15px; font-variant-numeric:tabular-nums}
.pf-tab th,.pf-tab td{padding:7px 12px; border-bottom:1px solid var(--linie); text-align:right; white-space:nowrap}
.pf-tab th[scope=row],.pf-tab thead th:first-child{text-align:left; font-weight:500; white-space:normal}
.pf-tab thead th{background:var(--flaeche-2); font-weight:600; font-size:13.5px; text-align:right}
.pf-tab tbody tr:last-child th,.pf-tab tbody tr:last-child td{border-bottom:0}
.pf-fuss{font-size:13.5px; color:var(--text-2)}

.pf-optionen{border:0; margin:0; padding:0; display:grid; gap:8px; max-width:var(--lesebreite)}
.pf-option{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--linie-stark); border-radius:var(--r); cursor:pointer; font-size:var(--lesegroesse); line-height:1.5; background:var(--flaeche)}
.pf-option:hover{border-color:var(--p-rand); background:var(--p-hauch)}
.pf-option input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--p-knopf)}
.pf-option:has(input:checked){border-color:var(--p-knopf); background:var(--p-zart)}
.pf-option:has(input:focus-visible){outline:2px solid var(--fokus); outline-offset:2px}

.pf-zuordnung{display:grid; gap:16px}
.pf-z-zeile{border:0; margin:0; padding:0; display:grid; gap:8px}
.pf-z-zeile legend{font-size:var(--lesegroesse); font-weight:500; padding:0; margin-bottom:8px}
.pf-z-zeile .wahl label{font-variant-numeric:tabular-nums}

.pf-reihe{list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:r; max-width:var(--lesebreite)}
.pf-reihe li{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--linie-stark); border-radius:var(--r); background:var(--flaeche); font-size:var(--lesegroesse); counter-increment:r}
.pf-reihe li::before{content:counter(r) "."; font-weight:600; color:var(--text-3); min-width:1.6em; font-variant-numeric:tabular-nums}
.pf-reihe .griff{cursor:grab; color:var(--text-3); display:flex}
.pf-r-text{flex:1}
.pf-r-k{display:flex; gap:2px}

.pf-luecken{display:grid; gap:12px; font-size:var(--lesegroesse); line-height:2.4; max-width:var(--lesebreite)}
.pf-luecken p{margin:0}
.pf-l.eingabe{display:inline-block; min-height:38px; height:38px; padding:0 10px; margin:0 4px; font-variant-numeric:tabular-nums; max-width:100%}
.pf-zahl{display:flex; align-items:center; gap:10px; font-size:var(--lesegroesse); max-width:360px}
.pf-zahl .eingabe{font-variant-numeric:tabular-nums}

.pf-band{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--fehler-hg); color:var(--fehler); padding:12px 18px; border-radius:var(--r); box-shadow:var(--sch-2); font-weight:600; z-index:60; max-width:calc(100vw - 32px)}
.pf-band.info{background:var(--hinweis-hg); color:var(--hinweis)}

.pf-einsicht{display:grid; gap:6px}
.pf-einsicht .zeile{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--linie); font-size:15px}

@media (max-width:860px){
  .pf-raum{grid-template-columns:1fr; gap:14px}
  .pf-raster{position:static; padding:12px}
  .pf-raster ol{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
  .pf-legende{display:flex; flex-wrap:wrap; gap:6px 14px}
  .pf-aufgabe{padding:18px}
  .pf-titel{display:none}
  .pf-zeit{font-size:17px; min-width:76px}
  #pf-speicher span{display:none}
}
.chips a.chip-w{text-decoration:none; color:var(--text)}
.pf-tab td.text{text-align:left; white-space:normal}
.pf-tab thead th{text-align:left}
.pf-aufgabe,.pf-material,.pf-optionen,.pf-luecken{font-feature-settings:"calt" 0,"ss01" 0}
.pf-a-titel:focus{outline:none}
.pf-a-titel:focus-visible{outline:2px solid var(--fokus); outline-offset:4px; border-radius:4px}
.pf-a-titel:focus,.pf-a-titel:focus-visible{outline:none}

/* Startseite: Verweis auf die Website des Mandanten */
.pf-landing .inhalt{max-width:none; place-items:center; min-height:calc(100dvh - 140px)}
.pf-hero{width:min(560px,100%); background:var(--flaeche); border:1px solid var(--linie); border-radius:24px; box-shadow:var(--sch-2);
  padding:44px 40px 32px; display:grid; gap:14px; justify-items:center; text-align:center; position:relative; overflow:hidden}
.pf-hero::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:linear-gradient(90deg,var(--p),var(--s))}
.pf-hero-zeichen{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--p-zart); color:var(--p-text)}
.pf-hero-zeichen .ic{width:30px; height:30px}
.pf-hero-ober{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.pf-hero-titel{font-family:var(--schrift-titel); font-weight:var(--titel-gewicht); letter-spacing:var(--titel-sperrung); font-size:34px}
.pf-hero-text{font-size:var(--lesegroesse); line-height:1.6; color:var(--text-2); max-width:44ch}
.pf-hero-k{margin-top:6px; min-height:48px; padding:0 22px; font-size:16px}
.pf-code{width:100%; margin-top:10px; border-top:1px solid var(--linie); padding-top:14px; text-align:left}
.pf-code summary{cursor:pointer; text-align:center; color:var(--p-text); font-weight:600; font-size:15px; list-style:none}
.pf-code summary::-webkit-details-marker{display:none}
.pf-code[open] summary{margin-bottom:12px}
.pf-hero-leise{font-size:13px; color:var(--text-3)}
@media (max-width:600px){ .pf-hero{padding:36px 22px 26px} .pf-hero-titel{font-size:28px} }
.pf-l-form{display:grid; grid-template-columns:max-content auto; gap:10px 16px; align-items:center; font-size:var(--lesegroesse); max-width:var(--lesebreite)}
.pf-l-label{font-weight:500}
.pf-l-feld{display:flex; align-items:center; gap:8px}
.pf-l-feld .pf-l.eingabe{margin:0; height:42px; min-width:9ch}
.pf-l-tabelle td{text-align:left; white-space:normal; vertical-align:middle}
.pf-l-tabelle .pf-l.eingabe{margin:0; width:100%!important; min-width:7ch}
@media (max-width:600px){ .pf-l-form{grid-template-columns:1fr; gap:4px 0} .pf-l-feld{margin-bottom:8px} }

/* Formulare der Leitung */
.pf-formular{max-width:820px}
.pf-aufgabe-form .block{margin-bottom:16px}
.pf-aufgabe-form h2{font-size:17px;margin:0 0 12px}
.pf-zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:640px){.pf-zwei{grid-template-columns:1fr}}
.pf-formular textarea.mono,.pf-formular textarea[name=lueckentext],.pf-formular textarea[name=loesungen]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.pf-lz .wahl{max-height:320px;overflow:auto;padding-right:8px}
.pf-lz .wahl label{font-size:14px}