/* assets/css/erklaerung.css – Öffentliche Erklärungsseiten (erklaerung-dozenten.php, später Lehrkräfte).
   Gestaltung nach dem Vorbild der Projektvorstellung im Lernportal Rettungsdienst (vorstellung/funktionen.php):
   Einstieg mit Zahlen, Sprungleiste, Text und Bild im Wechsel, „Bühnen" für Abläufe.
   Statt Screenshots zeigen die Geräte nachgebaute Ausschnitte der echten Oberfläche mit Beispieldaten
   (keine echten Namen, keine Datenbank). Nur Variablen aus app.css; Hell/Dunkel über :root[data-theme]. */

/* Der schwebende Hell/Dunkel-Knopf aus layout_head() entfällt hier: die Seite hat ihn in der eigenen Kopfzeile. */
body:has(#ek) > .theme-toggle { display:none; }

#ek {
  --ek-gruen:#16a34a; --ek-gruen-bg:color-mix(in srgb,#16a34a 14%,var(--panel)); --ek-gruen-txt:#166534;
  --ek-gelb:#d99a1c;  --ek-gelb-bg:color-mix(in srgb,#eab308 20%,var(--panel));  --ek-gelb-txt:#92400e;
  --ek-rot:var(--accent); --ek-rot-bg:var(--accent-soft); --ek-rot-txt:var(--accent-strong);
  --ek-blau:#2563eb;  --ek-blau-bg:color-mix(in srgb,#2563eb 12%,var(--panel));  --ek-blau-txt:#1e40af;
  --ek-rahmen:#1b1f27;
  max-width:1120px; margin:0 auto; padding:0 1rem 3rem; color:var(--text); min-width:0; overflow-x:clip;
}
:root[data-theme="dark"] #ek { --ek-gruen-txt:#86efac; --ek-gelb-txt:#fcd34d; --ek-blau-txt:#93c5fd; --ek-rahmen:#05080e; }
#ek h1, #ek h2, #ek h3, #ek h4 { color:var(--text); }
#ek [id] { scroll-margin-top:5rem; }
#ek p { line-height:1.7; }
#ek .ek-kicker { font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
#ek .ek-lead { font-size:1.1rem; line-height:1.65; color:var(--muted); }
#ek .ek-mut { color:var(--muted); }

/* Kopfzeile */
#ek .ek-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; }
#ek .ek-marke { display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--text); }
#ek .ek-marke svg { flex:0 0 auto; }
#ek .ek-marke b { display:block; font-size:1rem; line-height:1.15; }
#ek .ek-marke small { display:block; font-size:.75rem; color:var(--muted); }
#ek .ek-top-r { display:flex; align-items:center; gap:.5rem; }
#ek .theme-btn { width:2.4rem; height:2.4rem; border-radius:999px; border:1.5px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; font-size:1rem; }
#ek .theme-btn:hover { border-color:var(--accent); }

/* Knöpfe */
#ek .ek-knoepfe { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
#ek .ek-mitte { justify-content:center; }
#ek .ek-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.75rem 1.3rem; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; border:1.5px solid var(--border-strong); background:var(--panel); color:var(--text); }
#ek .ek-btn:hover { border-color:var(--text); }
#ek .ek-btn-rot { background:var(--accent); border-color:var(--accent); color:#fff; }
#ek .ek-btn-rot:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
#ek .ek-btn-klein { padding:.5rem .95rem; font-size:.85rem; }

/* Einstieg */
#ek .ek-held { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:32px 0 0; }
#ek .ek-held h1 { font-size:3rem; line-height:1.08; font-weight:800; letter-spacing:-.025em; margin:.5rem 0 1rem; }
#ek .ek-held h1 span { color:var(--accent); }
#ek .ek-zahlen { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:24px; }
#ek .ek-zahlen div { background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:14px; padding:16px 18px; }
#ek .ek-zahlen b { display:block; font-size:1.6rem; font-weight:800; line-height:1.1; }
#ek .ek-zahlen span { font-size:.85rem; color:var(--muted); }

/* Sprungleiste */
#ek .ek-sprung { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; padding:.7rem 0; margin:40px 0 0; background:var(--bg); border-bottom:1px solid var(--border); }
#ek .ek-sprung a { flex:0 0 auto; padding:.4rem .85rem; border-radius:999px; background:var(--panel); border:1px solid var(--border); color:var(--text); font-size:.85rem; font-weight:600; text-decoration:none; }
#ek .ek-sprung a:hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:760px) { #ek .ek-sprung { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; } #ek .ek-sprung::-webkit-scrollbar { display:none; } }

/* Text und Bild im Wechsel */
#ek .ek-reihe { display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; padding:64px 0; border-bottom:1px solid var(--border); }
#ek .ek-reihe.ek-links { grid-template-columns:1.1fr 1fr; }
#ek .ek-reihe.ek-links .ek-bild { order:-1; }
#ek .ek-text h2 { font-size:1.85rem; line-height:1.2; letter-spacing:-.01em; margin:.5rem 0 .9rem; }
#ek .ek-text p { margin:0 0 1rem; }
#ek .ek-haken { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
#ek .ek-haken li { position:relative; padding-left:32px; font-size:.95rem; line-height:1.5; }
#ek .ek-haken li::before { content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--ek-gruen-bg); color:var(--ek-gruen-txt); font-weight:800; font-size:.75rem; display:flex; align-items:center; justify-content:center; margin-top:1px; }
#ek .ek-mini { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:1.1rem; }
#ek .ek-mini div { background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--ek-blau); border-radius:12px; padding:12px 14px; }
#ek .ek-mini div:nth-child(2) { border-top-color:var(--ek-gruen); }
#ek .ek-mini div:nth-child(3) { border-top-color:var(--ek-gelb); }
#ek .ek-mini div:nth-child(4) { border-top-color:var(--ek-rot); }
#ek .ek-mini b { display:block; font-size:.95rem; margin-bottom:.15rem; }
#ek .ek-mini span { font-size:.84rem; color:var(--muted); line-height:1.45; }
#ek .ek-tipp { margin-top:1.1rem; display:flex; gap:.7rem; align-items:flex-start; background:var(--ek-blau-bg); border:1px solid color-mix(in srgb,var(--ek-blau) 30%,transparent); border-radius:12px; padding:.8rem 1rem; font-size:.9rem; line-height:1.5; }
#ek .ek-tipp > span { font-size:1.2rem; line-height:1.2; }
#ek .ek-optional { display:inline-block; margin-left:.4rem; vertical-align:middle; font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.15rem .55rem; border-radius:999px; background:var(--panel-2); border:1px solid var(--border); color:var(--muted); }

/* Bühne */
#ek .ek-buehne { background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:56px; margin:64px 0; }
#ek .ek-kopf { text-align:center; max-width:760px; margin:0 auto 40px; }
#ek .ek-kopf h2 { font-size:2.2rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:.5rem 0 .9rem; }

/* Ablauf (roter Faden) */
#ek .ek-ablauf { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; counter-reset:s; position:relative; }
#ek .ek-ablauf li { counter-increment:s; position:relative; background:var(--panel-2); border:1px solid var(--border); border-radius:16px; padding:46px 16px 18px; }
#ek .ek-ablauf li::before { content:counter(s); position:absolute; top:-18px; left:16px; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--accent-soft); }
#ek .ek-ablauf li > span { position:absolute; top:12px; right:14px; font-size:1.4rem; }
#ek .ek-ablauf b { display:block; font-size:1rem; margin-bottom:.3rem; }
#ek .ek-ablauf small { display:block; font-size:.85rem; color:var(--muted); line-height:1.5; }

/* Karten (Regeln, Ampel) */
#ek .ek-karten { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
#ek .ek-karte { background:var(--panel-2); border:1px solid var(--border); border-radius:16px; padding:20px; }
#ek .ek-karte em { display:inline-block; font-style:normal; font-size:.72rem; font-weight:800; padding:.2rem .65rem; border-radius:999px; }
#ek .ek-karte h4 { margin:.7rem 0 .3rem; font-size:1.05rem; }
#ek .ek-karte p { margin:0; font-size:.9rem; color:var(--muted); line-height:1.55; }
#ek .ek-karte.ek-k-rot { border-top:4px solid var(--ek-rot); }
#ek .ek-karte.ek-k-gelb { border-top:4px solid var(--ek-gelb); }
#ek .ek-karte.ek-k-gruen { border-top:4px solid var(--ek-gruen); }
#ek .ek-karte.ek-k-blau { border-top:4px solid var(--ek-blau); }
#ek .ek-rot { background:var(--ek-rot-bg); color:var(--ek-rot-txt); }
#ek .ek-gelb { background:var(--ek-gelb-bg); color:var(--ek-gelb-txt); }
#ek .ek-gruen { background:var(--ek-gruen-bg); color:var(--ek-gruen-txt); }
#ek .ek-blau { background:var(--ek-blau-bg); color:var(--ek-blau-txt); }
#ek .ek-ampel { display:flex; gap:6px; margin-bottom:.2rem; }
#ek .ek-ampel i { width:14px; height:14px; border-radius:50%; background:var(--border); }
#ek .ek-k-rot .ek-ampel i:nth-child(1) { background:var(--ek-rot); box-shadow:0 0 0 4px var(--ek-rot-bg); }
#ek .ek-k-gelb .ek-ampel i:nth-child(2) { background:var(--ek-gelb); box-shadow:0 0 0 4px var(--ek-gelb-bg); }
#ek .ek-k-gruen .ek-ampel i:nth-child(3) { background:var(--ek-gruen); box-shadow:0 0 0 4px var(--ek-gruen-bg); }

/* Raster (E-Mails, weitere) */
#ek .ek-raster { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
#ek .ek-raster div { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:.25rem; }
#ek .ek-raster span { font-size:1.4rem; margin-bottom:.2rem; }
#ek .ek-raster b { font-size:.95rem; }
#ek .ek-raster small { font-size:.83rem; color:var(--muted); line-height:1.45; }

/* Häufige Fragen */
#ek .ek-faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
#ek .ek-faq details { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:0 18px; }
#ek .ek-faq summary { cursor:pointer; list-style:none; padding:16px 28px 16px 0; font-weight:700; position:relative; }
#ek .ek-faq summary::-webkit-details-marker { display:none; }
#ek .ek-faq summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-size:1.3rem; color:var(--accent); font-weight:800; }
#ek .ek-faq details[open] summary::after { content:"–"; }
#ek .ek-faq details p { margin:0 0 16px; color:var(--muted); font-size:.93rem; }

/* Schluss */
#ek .ek-schluss { text-align:center; padding:56px 24px; border-radius:24px; background:var(--panel); border:1px solid var(--border); margin-top:64px; position:relative; overflow:hidden; }
#ek .ek-schluss::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--accent); }
#ek .ek-schluss h2 { font-size:2rem; margin:.4rem 0 .6rem; }
#ek .ek-fuss { text-align:center; font-size:.85rem; color:var(--muted); margin-top:2rem; }
#ek .ek-fuss a { color:var(--muted); }

/* ═══ Geräte mit nachgebauter Oberfläche ═══ */
#ek .ek-geraet { background:var(--ek-rahmen); border-radius:22px; padding:12px; box-shadow:0 30px 60px -24px rgba(15,25,35,.55), 0 0 0 1px var(--border); }
#ek .ek-handy { max-width:330px; margin:0 auto; border-radius:34px; padding:12px 10px; }
#ek .ek-schirm { background:var(--bg); border-radius:12px; overflow:hidden; font-size:.82rem; color:var(--text); }
#ek .ek-handy .ek-schirm { border-radius:24px; }
#ek .ek-leiste { display:flex; align-items:center; gap:.5rem; background:#E2001A; color:#fff; padding:.55rem .8rem; font-weight:800; font-size:.78rem; }
#ek .ek-leiste i { font-style:normal; opacity:.85; font-weight:600; margin-left:auto; font-size:.72rem; }
#ek .ek-leiste .ek-burger { font-size:.95rem; line-height:1; }
#ek .ek-inhalt { padding:.8rem; display:flex; flex-direction:column; gap:.45rem; }
#ek .ek-s-kopf { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.15rem; }
#ek .ek-s-kopf b { font-size:.98rem; }
#ek .ek-monat { display:inline-flex; align-items:center; gap:.35rem; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:.15rem .55rem; font-size:.72rem; font-weight:700; }
#ek .ek-legende { display:flex; flex-wrap:wrap; gap:.3rem .7rem; font-size:.68rem; color:var(--muted); }

/* Zeile „Meine Termine" */
#ek .ek-zeile { display:flex; align-items:center; gap:.5rem; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.45rem .6rem; }
#ek .ek-zeile .ek-d { font-weight:800; font-size:.78rem; min-width:4.6rem; }
#ek .ek-zeile .ek-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
#ek .ek-zeile .ek-info small { font-size:.66rem; font-weight:700; }
#ek .ek-zeile .ek-info em { font-style:normal; font-size:.68rem; color:var(--muted); }
#ek .ek-zeile.ek-we { background:color-mix(in srgb,#2563eb 14%,var(--panel)); box-shadow:inset 3px 0 0 #2563eb; }
#ek .ek-zeile.ek-gebucht { background:var(--ek-gruen-bg); }
#ek .ek-zeile.ek-gebucht small { color:var(--ek-gruen-txt); }
#ek .ek-zeile.ek-pruef { background:var(--ek-rot-bg); box-shadow:inset 3px 0 0 var(--ek-rot); }
#ek .ek-zeile.ek-pruef small { color:var(--ek-rot-txt); }
#ek .ek-notiz { margin-top:.2rem; border:1.5px solid var(--ek-gelb); border-radius:7px; padding:.15rem .4rem; font-size:.64rem; color:var(--muted); font-style:italic; background:var(--ek-gelb-bg); }
#ek .ek-seg { display:inline-flex; gap:.2rem; margin-left:auto; }
#ek .ek-seg span { border:1.5px solid var(--border); background:var(--panel); border-radius:8px; width:1.85rem; height:1.85rem; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--muted); font-size:.82rem; }
#ek .ek-seg span.ek-ja { background:var(--ek-gruen-bg); border-color:var(--ek-gruen); color:var(--ek-gruen-txt); }
#ek .ek-seg span.ek-rue { background:var(--ek-gelb-bg); border-color:var(--ek-gelb); color:var(--ek-gelb-txt); }
#ek .ek-seg span.ek-nein { background:var(--ek-rot-bg); border-color:var(--ek-rot); color:var(--ek-rot-txt); }
#ek .ek-seg.ek-aus span { opacity:.45; }
#ek .ek-std { display:flex; gap:.2rem; margin-top:.15rem; }
#ek .ek-std span { font-size:.6rem; font-weight:800; border:1.5px solid var(--ek-gruen); color:var(--ek-gruen-txt); background:var(--ek-gruen-bg); border-radius:6px; padding:0 .35rem; }
#ek .ek-std span.ek-off { border-color:var(--border); color:var(--muted); background:var(--panel); text-decoration:line-through; opacity:.6; }

/* Karte „Mein Unterrichtsplan" */
#ek .ek-plan { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; display:flex; flex-direction:column; gap:.4rem; }
#ek .ek-plan.ek-ok { box-shadow:inset 3px 0 0 var(--ek-gruen); }
#ek .ek-plan.ek-abg { box-shadow:inset 3px 0 0 var(--ek-rot); }
#ek .ek-plan-top { display:flex; gap:.55rem; align-items:flex-start; }
#ek .ek-ort { flex:0 0 auto; font-size:.62rem; font-weight:800; padding:.1rem .4rem; border-radius:6px; background:var(--ek-blau-bg); color:var(--ek-blau-txt); }
#ek .ek-plan-top .ek-pd { font-size:.7rem; font-weight:700; color:var(--muted); white-space:nowrap; }
#ek .ek-plan-top .ek-pt { font-weight:800; font-size:.82rem; }
#ek .ek-plan.ek-ok .ek-pt { color:var(--ek-gruen-txt); }
#ek .ek-plan-top .ek-pk { font-size:.68rem; color:var(--muted); }
#ek .ek-plan-act { display:flex; align-items:center; justify-content:space-between; gap:.4rem; flex-wrap:wrap; font-size:.7rem; }
#ek .ek-pb { display:inline-flex; align-items:center; gap:.2rem; border-radius:8px; padding:.25rem .55rem; font-size:.68rem; font-weight:800; border:1.5px solid var(--border); background:var(--panel); color:var(--text); }
#ek .ek-pb.ek-pb-ok { background:var(--ek-gruen); border-color:var(--ek-gruen); color:#fff; }
#ek .ek-pb.ek-pb-warn { border-color:var(--ek-gelb); color:var(--ek-gelb-txt); background:var(--ek-gelb-bg); }
#ek .ek-pb.ek-pb-msg { border-color:color-mix(in srgb,var(--ek-blau) 40%,var(--border)); color:var(--ek-blau-txt); }
#ek .ek-pb.ek-gruen { background:var(--ek-gruen-bg); border-color:transparent; color:var(--ek-gruen-txt); }
#ek .ek-pb-reihe { display:flex; gap:.3rem; flex-wrap:wrap; }
#ek .ek-status-ok { color:var(--ek-gruen-txt); font-weight:800; }
#ek .ek-status-abg { color:var(--ek-rot-txt); font-weight:800; }

/* Fenster (Nachricht an Schüler) */
#ek .ek-fenster { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:.8rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.45rem; }
#ek .ek-fenster b { font-size:.88rem; }
#ek .ek-feld { border:1.5px solid var(--border-strong); background:var(--panel-2); border-radius:9px; padding:.45rem .55rem; font-size:.72rem; line-height:1.45; min-height:3.2rem; }
#ek .ek-anh { display:flex; flex-wrap:wrap; gap:.3rem; }
#ek .ek-anh span { font-size:.64rem; font-weight:700; border:1px dashed var(--border-strong); border-radius:7px; padding:.15rem .4rem; background:var(--panel-2); }
#ek .ek-fenster-fuss { display:flex; justify-content:flex-end; gap:.35rem; }

/* Offene Unterrichtstage */
#ek .ek-offen { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; display:flex; align-items:center; gap:.6rem; }
#ek .ek-offen .ek-kal { flex:0 0 auto; width:2.6rem; text-align:center; border-radius:9px; overflow:hidden; border:1px solid var(--border); background:var(--panel-2); }
#ek .ek-offen .ek-kal i { display:block; font-style:normal; background:var(--accent); color:#fff; font-size:.56rem; font-weight:800; padding:.08rem 0; }
#ek .ek-offen .ek-kal b { display:block; font-size:.95rem; padding:.1rem 0; }
#ek .ek-offen .ek-o-txt { flex:1; min-width:0; }
#ek .ek-offen .ek-o-txt b { display:block; font-size:.78rem; }
#ek .ek-offen .ek-o-txt small { font-size:.66rem; color:var(--muted); }

/* Stundenpläne des Monats */
#ek .ek-kacheln { display:grid; grid-template-columns:1fr 1fr; gap:.45rem; }
#ek .ek-kachel { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.55rem .6rem; border-top:3px solid var(--ek-gruen); }
#ek .ek-kachel b { display:block; font-size:.78rem; }
#ek .ek-kachel small { font-size:.64rem; color:var(--muted); }
#ek .ek-tabelle { width:100%; border-collapse:collapse; background:var(--panel); border-radius:10px; overflow:hidden; font-size:.68rem; }
#ek .ek-tabelle th, #ek .ek-tabelle td { text-align:left; padding:.32rem .45rem; border-bottom:1px solid var(--border); }
#ek .ek-tabelle th { background:var(--panel-2); font-size:.62rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
#ek .ek-tabelle tr:last-child td { border-bottom:0; }
#ek .ek-tabelle td.ek-r { text-align:right; font-variant-numeric:tabular-nums; }

/* Stundennachweis */
#ek .ek-unterschrift { background:var(--panel); border:1.5px dashed var(--border-strong); border-radius:10px; height:3.6rem; position:relative; }
#ek .ek-unterschrift svg { position:absolute; left:12%; top:12%; width:60%; height:76%; }
#ek .ek-unterschrift small { position:absolute; right:.5rem; bottom:.25rem; font-size:.58rem; color:var(--muted); }

/* Profil */
#ek .ek-profil { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; }
#ek .ek-profil b { display:block; font-size:.78rem; margin-bottom:.3rem; }
#ek .ek-check { display:flex; gap:.7rem; font-size:.72rem; }
#ek .ek-check span::before { content:"☑ "; color:var(--ek-gruen); font-weight:800; }
#ek .ek-check span.ek-leer::before { content:"☐ "; color:var(--muted); }
#ek .ek-input { border:1.5px solid var(--border-strong); background:var(--panel-2); border-radius:8px; padding:.3rem .5rem; font-size:.72rem; color:var(--muted); }

/* ═══ Gliederung in drei Teile (Toni 04.11.2026) ═══ */
#ek .ek-gruppe { display:flex; gap:22px; align-items:flex-start; margin:72px 0 8px; padding:28px 32px; border-radius:22px; background:var(--panel); border:1px solid var(--border); border-left:6px solid var(--accent); }
#ek .ek-gruppe h2 { font-size:1.9rem; line-height:1.2; margin:.35rem 0 .5rem; letter-spacing:-.015em; }
#ek .ek-gruppe p { margin:0; color:var(--muted); font-size:1.02rem; max-width:760px; }
#ek .ek-gruppe-nr { flex:0 0 auto; width:56px; height:56px; border-radius:16px; background:var(--accent); color:#fff; font-size:1.6rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
#ek .ek-gruppe-bald { border-left-color:var(--ek-gelb); background:repeating-linear-gradient(135deg, var(--panel) 0 22px, var(--panel-2) 22px 44px); }
#ek .ek-gruppe-bald .ek-gruppe-nr { background:var(--ek-gelb); }
#ek .ek-gruppe-bald .ek-kicker { color:var(--ek-gelb-txt); }
#ek .ek-schritt { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:.72rem; margin-right:.35rem; vertical-align:1px; letter-spacing:0; }
#ek .ek-sprung a.ek-sp-gruppe { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:800; }
#ek .ek-sprung a.ek-sp-gruppe:hover { background:var(--accent-strong); color:#fff; }
#ek .ek-sprung a.ek-sp-gruppe:not(:first-child) { margin-left:.6rem; }
#ek .ek-sprung a.ek-sp-bald { background:var(--ek-gelb-bg); border-color:var(--ek-gelb); color:var(--ek-gelb-txt); }
#ek .ek-sprung a.ek-sp-bald:hover { background:var(--ek-gelb-bg); color:var(--ek-gelb-txt); border-color:var(--ek-gelb-txt); }

/* Funktionen in Vorbereitung: Band über der Überschrift, Gerät gedämpft mit Schild */
#ek .ek-status-band { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:800; padding:.4rem .85rem; border-radius:999px; margin-bottom:.8rem; border:1.5px solid; }
#ek .ek-band-gelb { background:var(--ek-gelb-bg); border-color:var(--ek-gelb); color:var(--ek-gelb-txt); }
#ek .ek-band-grau { background:var(--panel-2); border-color:var(--border-strong); color:var(--muted); }
#ek .ek-band-blau { background:var(--ek-blau-bg); border-color:var(--ek-blau); color:var(--ek-blau-txt); }
#ek .ek-geraet-bald { position:relative; }
#ek .ek-geraet-bald .ek-schirm { filter:grayscale(.85); opacity:.6; }
#ek .ek-geraet-bald::after { content:attr(data-bald); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-8deg); white-space:nowrap; background:var(--ek-gelb); color:#1b1f27; font-weight:800; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; padding:.55rem 1.2rem; border-radius:10px; box-shadow:0 10px 24px -8px rgba(0,0,0,.45); border:2px solid #fff; }
#ek .ek-sterne { display:flex; gap:.1rem; font-size:.95rem; color:var(--border-strong); }
#ek .ek-sterne i { font-style:normal; }
#ek .ek-sterne i.an { color:#eab308; }
#ek .ek-text a { color:var(--accent); }
@media (max-width:600px) {
  #ek .ek-gruppe { flex-direction:column; gap:12px; padding:22px 18px; margin-top:48px; }
  #ek .ek-gruppe h2 { font-size:1.45rem; }
  #ek .ek-gruppe-nr { width:44px; height:44px; font-size:1.3rem; border-radius:12px; }
}

/* Kurzer Ablauf (eine Zeile) */
#ek .ek-faden { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.8rem 1.4rem; margin:28px 0 0; padding:16px 22px; background:var(--panel); border:1px solid var(--border); border-radius:16px; }
#ek .ek-faden-titel { font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
#ek .ek-faden ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; counter-reset:f; }
#ek .ek-faden li { counter-increment:f; display:flex; align-items:center; gap:.45rem; font-weight:700; font-size:.95rem; background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:.4rem .9rem .4rem .45rem; }
#ek .ek-faden li span { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:.9rem; }
#ek .ek-faden li:not(:last-child)::after { content:"→"; margin-left:.55rem; margin-right:-.4rem; color:var(--muted); font-weight:800; }

/* App-Bühne */
#ek .ek-app { margin-top:32px; border-top:5px solid var(--accent); }
#ek .ek-app-raster { display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; }
#ek .ek-app h2 { font-size:2.2rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:.5rem 0 .9rem; }
#ek .ek-app-wege { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
#ek .ek-app-wege > div { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:14px 14px 10px; }
#ek .ek-app-wege b { display:block; font-size:.92rem; margin-bottom:.35rem; }
#ek .ek-app-wege ol { margin:0; padding-left:1.15rem; font-size:.84rem; color:var(--muted); line-height:1.55; }
#ek .ek-sprung a.ek-sp-app { background:var(--text); border-color:var(--text); color:var(--panel); }
#ek .ek-sprung a.ek-sp-app:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
/* Startbildschirm im Handy */
#ek .ek-home { background:linear-gradient(160deg,#1e3a8a,#7c2d12 55%,#E2001A); color:#fff; padding:14px 16px 26px; display:flex; flex-direction:column; gap:14px; }
#ek .ek-home { min-height:400px; }
#ek .ek-home-dock { margin-top:auto; display:flex; justify-content:space-around; background:rgba(255,255,255,.18); border-radius:22px; padding:10px; }
#ek .ek-home-dock i { font-style:normal; width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
#ek .ek-home-zeit { text-align:center; font-weight:800; font-size:.8rem; opacity:.9; }
#ek .ek-home-raster { display:grid; grid-template-columns:repeat(4,1fr); gap:18px 10px; margin-top:8px; }
#ek .ek-home-app { display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; }
#ek .ek-home-app i { font-style:normal; width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:1.5rem; }
#ek .ek-home-app small { font-size:.6rem; line-height:1.15; opacity:.95; }
#ek .ek-home-unsere i { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.55), 0 8px 18px rgba(0,0,0,.35); animation:ek-puls 2.4s ease-in-out infinite; }
#ek .ek-home-unsere i svg { width:40px; height:40px; }
#ek .ek-home-unsere small { font-weight:800; }
@keyframes ek-puls { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce) { #ek .ek-home-unsere i { animation:none; } }
@media (max-width:960px) { #ek .ek-app-raster { grid-template-columns:1fr; gap:28px; } }
@media (max-width:600px) { #ek .ek-app h2 { font-size:1.6rem; } #ek .ek-app-wege { grid-template-columns:1fr; } #ek .ek-faden { justify-content:flex-start; } #ek .ek-faden li:not(:last-child)::after { display:none; } }

/* Tablet und Handy */
@media (max-width:960px) {
  #ek .ek-held, #ek .ek-reihe, #ek .ek-reihe.ek-links { grid-template-columns:1fr; gap:28px; }
  #ek .ek-reihe.ek-links .ek-bild { order:0; }
  #ek .ek-reihe { padding:44px 0; }
  #ek .ek-ablauf { grid-template-columns:1fr 1fr; row-gap:30px; }
  #ek .ek-raster { grid-template-columns:1fr 1fr; }
  #ek .ek-karten { grid-template-columns:1fr; }
  #ek .ek-buehne { padding:36px 22px; }
}
@media (max-width:600px) {
  #ek { padding:0 16px 2.5rem; }
  #ek .ek-held { padding-top:12px; }
  #ek .ek-held h1 { font-size:2.1rem; }
  #ek .ek-kopf h2, #ek .ek-schluss h2 { font-size:1.6rem; }
  #ek .ek-text h2 { font-size:1.45rem; }
  #ek .ek-zahlen, #ek .ek-mini { grid-template-columns:1fr 1fr; }
  #ek .ek-zahlen b { font-size:1.3rem; }
  #ek .ek-ablauf { grid-template-columns:1fr; }
  #ek .ek-geraet { padding:8px; border-radius:16px; }
  #ek .ek-handy { border-radius:28px; padding:10px 8px; }
  #ek .ek-buehne { padding:28px 16px; border-radius:18px; margin:40px 0; }
  #ek .ek-marke small { display:none; }
}
@media (max-width:420px) { #ek .ek-raster, #ek .ek-mini { grid-template-columns:1fr; } }
@media print { #ek .ek-sprung, #ek .theme-btn { display:none; } #ek .ek-reihe, #ek .ek-buehne { break-inside:avoid; } }

/* ═══ Lehrkräfte-Seite (erklaerung-lehrkraefte.php, Toni 05.11.2026) ═══
   Die Geräte zeigen echte Aufnahmen der Lehrkräfte-Oberfläche (mit erfundenen Beispieldaten),
   je eine Fassung hell und dunkel: assets/img/erklaerung/lehrkraefte/<name>-light|dark.webp.
   Angezeigt wird die Fassung, die zum gewählten Design der Erklärungsseite passt. */
#ek .ek-reihe > .ek-text, #ek .ek-reihe > .ek-bild { min-width:0; }
#ek .ek-echt .ek-schirm { background:var(--bg); line-height:0; }
#ek .ek-echt a { display:block; cursor:zoom-in; }
#ek .ek-echt img { display:block; width:100%; height:auto; }
#ek .ek-echt .ek-dunkel { display:none; }
:root[data-theme="dark"] #ek .ek-echt .ek-hell { display:none; }
:root[data-theme="dark"] #ek .ek-echt .ek-dunkel { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #ek .ek-echt .ek-hell { display:none; }
  :root:not([data-theme="light"]) #ek .ek-echt .ek-dunkel { display:block; }
}
#ek .ek-bild-zwei { display:flex; flex-direction:column; gap:22px; }
#ek .ek-bild-zwei .ek-handy { max-width:300px; }