/* ErfolgsAzubi Prüfungsdaten – Wissensseiten (33.11): Reiter „Wo stehst du gerade?“, abhakbare Listen, Atemhelfer und Berufswahl ([ea_pruefungsangst], [ea_berufe_wahl], includes/wissen.php). Ergänzt assets/ea-pd.css: Die Tokens stehen dort auf body, hier trägt jede var() denselben literalen Rückfallwert (dev/tests/test_css_rueckfall.js prüft beide Dateien). Handy zuerst (390 px), Fokus sichtbar, Kontrast ≥ 4,5:1. */ /* ---------- Reiter: vier Lagen ---------- */ /* Auf dem Handy 2 × 2 Pillen (vier Beschriftungen passen nicht in eine Zeile), ab 640 px eine Zeile. Die Leiste steht im HTML mit `hidden`; das Skript blendet sie ein — ohne Skript liegen die vier Blöcke untereinander. */ .ea-pd__lage .ea-pd__lead{margin-bottom:.9em} /* minmax(0,1fr) statt 1fr: Die stille Untergrenze „auto“ ließe die Spalten auf die Mindestbreite der Beschriftung wachsen — bei 390 px liefen die Reiter 13 px über den Rand und die Seite scrollte quer (gemessen 19.09.2026). */ .ea-pd__tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:0 0 18px;padding:0} .ea-pd__tabs[hidden]{display:none} .ea-pd__tab{font:inherit;font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ea-navy,#0A1E3F);background:#fff;border:1.5px solid var(--ea-linie,#D6DEEC);border-radius:12px;padding:.7rem .6rem;min-height:48px;min-width:0;white-space:normal;overflow-wrap:anywhere;cursor:pointer;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease} .ea-pd__tab:hover{border-color:var(--ea-navy,#0A1E3F)} .ea-pd__tab[aria-selected="true"]{color:#fff;background:var(--ea-navy,#0A1E3F);border-color:var(--ea-navy,#0A1E3F)} .ea-pd__tab:focus-visible{outline:3px solid var(--ea-orange,#FF9D3F);outline-offset:2px} @media (min-width:640px){.ea-pd__tabs{display:flex;flex-wrap:wrap}.ea-pd__tab{flex:1 1 auto}} /* Reiter-Inhalte: jeder ist eine eigene
(ohne Skript vier Abschnitte untereinander mit H3). Mit Skript ist nur der gewählte sichtbar; die H3 bleibt für Vorleser im Baum, der Reiter trägt den Titel schon. */ .ea-pd__lage-panel.ea-pd__abschnitt{margin:0} .ea-pd__lage-panel[hidden]{display:none} .ea-pd__lage-panel+.ea-pd__lage-panel{margin-top:32px;padding-top:24px;border-top:1px solid var(--ea-linie,#D6DEEC)} .ea-pd__lage-reiter--js .ea-pd__lage-panel+.ea-pd__lage-panel{margin-top:0;padding-top:0;border-top:0} .ea-pd .ea-pd__lage-titel,.ea-pd__lage-titel{margin-top:0} .ea-pd__lage-reiter--js .ea-pd__lage-titel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ea-pd__lage-panel>p{max-width:46rem} /* ---------- Abhakbare Listen ---------- */ /* Eigenes Kästchen (appearance:none), damit es auf jedem Gerät gleich groß und mit 24 px gut zu treffen ist; der Haken ist ein gedrehter Rahmen, kein Bild. Abgehakt: grüne Fläche, weißer Haken (5,4:1), Text grau. */ .ea-pd__abhaken{margin:0 0 .6em} .ea-pd__abhaken-titel{font-weight:700;color:var(--ea-navy,#0A1E3F);margin:0 0 .3em} .ea-pd__abhaken-liste{list-style:none;padding:0;margin:0} .ea-pd__abhaken-liste li{margin:0} .ea-pd__abhaken-punkt{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;margin:0 -10px;border-radius:10px;cursor:pointer;line-height:1.45;font-weight:400;color:var(--ea-text,#1E1E2F)} .ea-pd__abhaken-punkt:hover{background:var(--ea-hell,#F4F6FB)} .ea-pd__abhaken-punkt input[type="checkbox"]{appearance:none;-webkit-appearance:none;flex:0 0 24px;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--ea-grau,#5B6373);border-radius:7px;background:#fff;display:grid;place-content:center;cursor:pointer} .ea-pd__abhaken-punkt input[type="checkbox"]::before{content:"";width:12px;height:7px;border-style:solid;border-width:0 0 3px 3px;border-color:#fff;transform:translateY(-1px) rotate(-45deg);opacity:0} .ea-pd__abhaken-punkt input[type="checkbox"]:checked{background:var(--ea-gruen,#1E7A3A);border-color:var(--ea-gruen,#1E7A3A)} .ea-pd__abhaken-punkt input[type="checkbox"]:checked::before{opacity:1} .ea-pd__abhaken-punkt input[type="checkbox"]:focus-visible{outline:3px solid var(--ea-orange,#FF9D3F);outline-offset:2px} .ea-pd__abhaken-punkt input[type="checkbox"]:checked+span{color:var(--ea-grau,#5B6373);text-decoration:line-through;text-decoration-thickness:1px} .ea-pd__abhaken-stand{font-size:.9rem;font-weight:600;color:var(--ea-grau,#5B6373);margin:6px 0 0} .ea-pd__abhaken-stand--fertig{color:var(--ea-gruen,#1E7A3A)} .ea-pd__abhaken-stand[hidden]{display:none} /* ---------- Atemhelfer ---------- */ /* Der Kreis wächst beim Einatmen (Skala 0,6 → 1), steht beim Halten und schrumpft beim Ausatmen; die Dauer je Phase setzt das Skript als transition-duration. Wer weniger Bewegung wünscht, sieht Kreis, Zähler und Ansage ohne Skalierung. */ .ea-pd__atem{background:var(--ea-hell,#F4F6FB);border:1.5px solid var(--ea-linie,#D6DEEC);border-radius:16px;padding:18px 18px 16px;margin:22px 0 0;text-align:center} .ea-pd .ea-pd__atem-titel,.ea-pd__atem-titel{font-size:1.1rem;font-weight:700;line-height:1.3;color:var(--ea-navy,#0A1E3F);margin:0 0 .35em} .ea-pd__atem-hinweis{font-size:.92rem;color:var(--ea-grau,#5B6373);margin:0 0 .6em} .ea-pd__atem-buehne{height:160px;display:grid;place-items:center;margin:4px 0 8px} .ea-pd__atem-kreis{width:140px;height:140px;border-radius:50%;background:var(--ea-navy,#0A1E3F);color:#fff;display:grid;place-items:center;font-size:2.2rem;font-weight:700;line-height:1;transform:scale(.6);transition:transform 1s ease-in-out;will-change:transform} .ea-pd__atem-kreis--ein,.ea-pd__atem-kreis--halten{transform:scale(1)} .ea-pd__atem-kreis--aus{transform:scale(.6)} .ea-pd__atem-ansage{min-height:1.5em;font-weight:600;color:var(--ea-navy,#0A1E3F);margin:0 0 .8em} .ea-pd__atem-knoepfe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .ea-pd__atem-knoepfe[hidden]{display:none} .ea-pd__atem-knoepfe .ea-pd__btn[hidden]{display:none} .ea-pd__atem--ruhig .ea-pd__atem-kreis,.ea-pd__atem--ruhig .ea-pd__atem-kreis--ein,.ea-pd__atem--ruhig .ea-pd__atem-kreis--halten,.ea-pd__atem--ruhig .ea-pd__atem-kreis--aus{transform:scale(.8)!important;transition:none!important} @media (prefers-reduced-motion:reduce){.ea-pd__atem-kreis,.ea-pd__atem-kreis--ein,.ea-pd__atem-kreis--halten,.ea-pd__atem-kreis--aus{transform:scale(.8)!important;transition:none!important}} /* ---------- Berufswahl ---------- */ /* Ein