/* GIEDORF Academy – App-Seiten (Anmeldung, Start, Admin)
   CI: Tinte #16181A, Creme, Punkte Gelb #FABD1D · Blau #4B68B0 · Grün #65BC99.
   Zwei Ansichten: Desktop (ab 761px) mit Seitenleiste, Mobil (bis 760px) als App mit fester
   Kopf- und Tab-Leiste. Mobil gibt es keine langen Seiten: Inhalte liegen in Tabs/Panels, Listen blättern seitenweise. */
:root{
  --bg:#F8F8F3; --panel:#FFFFFF; --panel2:#F1F2EC; --ink:#16181A; --muted:#4A4F4C; --line:#D6D8D4;
  --yellow:#FABD1D; --blue:#4B68B0; --green:#65BC99; --mint:#D3F2C6; --cream:#FBF6DA; --link:#3F5A9E;
  --ok:#1F7A58; --bad:#B42318; --warn:#9A6400;
  --onInk:#FFFFFF; --d-desk:#3F5FB5; --d-mob:#16946A;
  --f-display:'Bricolage Grotesque','Plus Jakarta Sans',Arial,sans-serif;
  --f-body:'Plus Jakarta Sans',-apple-system,'Segoe UI',Arial,sans-serif;
  --r:18px; --r-s:12px;
  --top:calc(56px + env(safe-area-inset-top,0px));
  --tab:calc(64px + env(safe-area-inset-bottom,0px));
  --schatten:0 1px 2px rgba(22,24,26,.06),0 8px 24px rgba(22,24,26,.06);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121416; --panel:#1E2124; --panel2:#181B1D; --ink:#F1F2EC; --muted:#A9AEAB; --line:#363B38; --mint:#1D2E25; --cream:#2A2717; --link:#9DB3EE;
  --ok:#65BC99; --bad:#F87171; --warn:#FABD1D; --onInk:#16181A; --d-desk:#6F8CEB; --d-mob:#22AD7A; --schatten:none; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#121416; --panel:#1E2124; --panel2:#181B1D; --ink:#F1F2EC; --muted:#A9AEAB; --line:#363B38; --mint:#1D2E25; --cream:#2A2717; --link:#9DB3EE;
  --ok:#65BC99; --bad:#F87171; --warn:#FABD1D; --onInk:#16181A; --d-desk:#6F8CEB; --d-mob:#22AD7A; --schatten:none; color-scheme:dark }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
h1,h2,h3{font-family:var(--f-display);line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.015em}
h2{font-size:1.3rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ic{width:22px;height:22px;flex:none}
.leise{color:var(--muted)}
.klein-t{font-size:.88rem}
@media (min-width:761px) and (min-height:501px), (min-width:761px) and (pointer:fine){.nur-mobil{display:none!important}}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo (hell/dunkel) */
.logo{display:inline-flex;line-height:0}
.logo img{height:30px;width:auto}
.logo .logo-dunkel{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .logo-hell{display:none}:root:not([data-theme="light"]) .logo .logo-dunkel{display:inline}}
:root[data-theme="dark"] .logo .logo-hell{display:none}
:root[data-theme="dark"] .logo .logo-dunkel{display:inline}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:var(--r-s);border:1.5px solid var(--ink);background:var(--ink);color:var(--onInk);font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s ease,opacity .12s}
.knopf:active{transform:scale(.98)}
.knopf.hell{background:var(--panel);color:var(--ink);border-color:var(--line)}
.knopf.gelb{background:var(--yellow);border-color:var(--yellow);color:#16181A}
.knopf.gefahr{background:none;color:var(--bad);border-color:currentColor}
.knopf.klein{min-height:38px;padding:6px 12px;font-size:.9rem}
.knopf.voll{width:100%}
.knopf.aus,.knopf[disabled]{opacity:.4;pointer-events:none}
.knopf .ic{width:18px;height:18px}
.textknopf{background:none;border:0;padding:6px 4px;color:var(--link);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* Formulare */
.feld{display:grid;gap:6px}
.feld>span,.feld legend{font-weight:700;font-size:.92rem}
.feld small{color:var(--muted);font-size:.84rem}
input[type=text],input[type=password],input[type=search],input[type=number],input[type=date],select,textarea{
  width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--panel);color:var(--ink);font-size:16px}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 30%,transparent)}
input[type=file]{font-size:.95rem;max-width:100%;width:100%;min-width:0}
.datum{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;border:0;padding:0;margin:0}
.datum input{text-align:center;font-variant-numeric:tabular-nums}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--ink)}

.meldung{border-radius:var(--r-s);padding:12px 14px;font-weight:600;background:var(--mint)}
.meldung.fehler{background:color-mix(in srgb,var(--bad) 14%,var(--panel));color:var(--bad)}
.meldung.hinweis{background:var(--cream)}

/* ========== Anmeldung ========== */
.anm{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.anm-bild{background:#16181A;color:#F1F2EC;padding:48px clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;position:relative;overflow:hidden}
.anm-bild .logo img{height:36px}
.anm-bild .logo .logo-hell{display:none}.anm-bild .logo .logo-dunkel{display:inline}
.anm-bild h1{font-size:clamp(2.6rem,5vw,4.2rem);color:#F8F8F3;max-width:11ch}
.anm-bild p{color:#C9CCC6;max-width:38ch;font-size:1.08rem;margin-top:16px}
.anm-bild>*:not(.punkte){position:relative;z-index:1}
.punkte{position:absolute;right:-90px;top:-90px;width:min(26vw,300px);aspect-ratio:1;pointer-events:none;opacity:.95}
.punkte i{position:absolute;border-radius:50%;animation:schweben 9s ease-in-out infinite}
.punkte i:nth-child(1){width:46%;height:46%;left:4%;top:8%;background:var(--yellow)}
.punkte i:nth-child(2){width:34%;height:34%;left:52%;top:2%;background:#4B68B0;animation-delay:-3s}
.punkte i:nth-child(3){width:40%;height:40%;left:38%;top:48%;background:#65BC99;animation-delay:-6s}
@keyframes schweben{50%{transform:translate(0,-14px) scale(1.03)}}
@media (prefers-reduced-motion:reduce){.punkte i{animation:none}}
.anm-form{display:grid;place-items:center;padding:40px 24px}
.anm-karte{width:100%;max-width:420px;display:grid;gap:20px}
.anm-karte h2{font-size:1.8rem}
.umschalter{display:grid;grid-template-columns:1fr 1fr;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:4px}
.umschalter a{text-align:center;padding:9px 10px;border-radius:99px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.92rem}
.umschalter a[aria-current="page"]{background:var(--panel);color:var(--ink);box-shadow:var(--schatten)}
.anm-karte form{display:grid;gap:16px}
.anm-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.datenschutz{font-size:.84rem;color:var(--muted)}
.datenschutz summary{cursor:pointer;font-weight:600;color:var(--ink)}
.datenschutz p{margin-top:6px}

@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .anm{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .anm-bild{padding:calc(18px + env(safe-area-inset-top,0px)) 20px 22px;gap:14px}
  .anm-bild .logo img{height:26px}
  .anm-bild h1{font-size:1.75rem;max-width:none}
  .anm-bild p{display:none}
  .punkte{width:118px;right:-34px;top:-30px;opacity:.85}
  .anm-form{place-items:start center;padding:22px 16px calc(22px + env(safe-area-inset-bottom,0px))}
  .anm-karte{gap:16px}
  .anm-karte h2{font-size:1.45rem}
}

/* ========== App-Rahmen ========== */
.app{min-height:100vh;min-height:100dvh}
.kopf{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.kopf-l{display:flex;align-items:center;gap:14px;min-width:0}
.kopf-r{display:flex;align-items:center;gap:10px}
.wer{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.initialen{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#16181A;font-family:var(--f-display);font-weight:800;font-size:.95rem;flex:none}
.badge-beta{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--mint);padding:4px 10px;border-radius:99px}

/* Tab-Leiste (nur mobil sichtbar) */
.tabs{display:none}

/* ========== Gemeinsame Bausteine ========== */
.karte{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.ring{width:84px;height:84px;flex:none}
.ring-bg{fill:none;stroke:var(--line);stroke-width:7}
.ring-fg{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.ring-t{font-family:var(--f-display);font-weight:800;font-size:15px;text-anchor:middle;dominant-baseline:central;fill:var(--ink)}
.balken{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.balken i{display:block;height:100%;background:var(--green);border-radius:99px;transition:width .8s cubic-bezier(.2,.7,.2,1)}

.bereiche{display:flex;gap:8px;flex-wrap:wrap}
.chip{flex:none;font-size:.9rem;font-weight:700;color:var(--ink);text-decoration:none;background:var(--panel);border:1.5px solid var(--line);padding:8px 14px;border-radius:99px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--onInk)}
.chip small{font-weight:600;opacity:.7}
.legende{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.84rem;color:var(--muted)}
.legende i{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:6px}
.hinweis-beta{background:#16181A;color:#C9CCC6;border-radius:var(--r);padding:16px 18px;border-left:8px solid var(--yellow);font-size:.92rem;display:grid;gap:6px}
.hinweis-beta b{color:#F8F8F3}
.ideen .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ideen .chips span{background:var(--panel2);border:1px dashed var(--muted);border-radius:99px;padding:4px 10px;font-size:.85rem;font-weight:600}
.fussnote{font-size:.84rem;color:var(--muted);display:grid;gap:6px}

/* Eintritts-Animation (kurz, auch mobil gut sichtbar) */
.rein{animation:rein .45s cubic-bezier(.2,.7,.2,1) both}
.rein:nth-child(2){animation-delay:.04s}.rein:nth-child(3){animation-delay:.08s}.rein:nth-child(4){animation-delay:.12s}.rein:nth-child(5){animation-delay:.16s}
@keyframes rein{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.rein{animation:none}.ring-fg,.balken i{transition:none}}

/* ========== Admin ========== */
.adm{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.adm-nav{background:var(--panel);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;height:100dvh}
.adm-nav .logo{padding:0 10px 4px}
.adm-nav .logo img{height:26px}
.adm-nav .rolle{padding:0 10px 18px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.adm-nav a{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:var(--r-s);text-decoration:none;color:var(--ink);font-weight:600}
.adm-nav a:hover{background:var(--panel2)}
.adm-nav a[aria-current="page"]{background:var(--ink);color:var(--onInk)}
.adm-nav .unten{margin-top:auto;display:grid;gap:4px;border-top:1px solid var(--line);padding-top:12px}
.adm-main{padding:28px clamp(16px,3vw,36px) 48px;display:grid;gap:22px;align-content:start;min-width:0}
.adm-titel{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.adm-titel p{color:var(--muted);margin-top:4px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:4px;align-content:start}
.kpi .z{font-family:var(--f-display);font-size:2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.kpi .l{font-size:.85rem;color:var(--muted);font-weight:600}
.kpi .u{font-size:.8rem;color:var(--muted)}
.kpi.akzent{background:var(--ink);color:var(--onInk);border-color:var(--ink)}
.kpi.akzent .l,.kpi.akzent .u{color:color-mix(in srgb,var(--onInk) 70%,transparent)}
.zwei{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.karte h2{font-size:1.1rem;margin-bottom:12px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.karte h2 a,.karte h2 small{font-family:var(--f-body);font-size:.85rem;font-weight:600}
.karte h2 small{color:var(--muted)}

/* Balkendiagramm Lernzeit */
.diagramm{display:grid;gap:8px}
.saeulen{display:flex;align-items:flex-end;gap:3px;height:150px;border-bottom:1px solid var(--line);padding-top:8px}
.saeulen .s{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative}
.saeulen .s i{display:block;background:var(--d-desk);border-radius:0;min-height:0;transform-origin:bottom;animation:wachsen .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 12ms)}
.saeulen .s i.m{background:var(--d-mob);border-bottom:2px solid var(--panel)}
.saeulen .s i:first-of-type{border-radius:4px 4px 0 0}
.saeulen .s:hover i{filter:brightness(1.15)}
.saeulen .s .tip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--onInk);font-size:.75rem;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2}
.saeulen .s:hover .tip,.saeulen .s:focus .tip{opacity:1}
.saeulen-achse{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
.legende-d{display:flex;gap:14px;font-size:.8rem;color:var(--muted)}
.legende-d i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
@keyframes wachsen{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.saeulen .s i{animation:none}}

/* Tabellen */
.tabelle-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
table.t{border-collapse:collapse;width:100%;font-size:.92rem}
.t th,.t td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.t th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:var(--panel2);white-space:nowrap}
.t th a{color:inherit;text-decoration:none}
.t th a[aria-current]{color:var(--ink)}
.t tr:last-child td{border-bottom:0}
.t td.zahl,.t th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t tbody tr:hover{background:var(--panel2)}
.t a.name{font-weight:700;color:var(--ink);text-decoration:none}
.t a.name:hover{text-decoration:underline}
.t .mini{display:flex;align-items:center;gap:8px;min-width:120px}
.t .mini .balken{flex:1}
.status{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.fertig{background:color-mix(in srgb,var(--green) 22%,var(--panel));color:var(--ok)}
.status.quiz{background:color-mix(in srgb,var(--blue) 18%,var(--panel));color:var(--link)}
.status.arbeit{background:var(--cream);color:var(--warn)}
.status.offen{background:var(--panel2);color:var(--muted)}
.status.aus{background:var(--panel2);color:var(--muted)}
.kapitel-chips{display:flex;flex-wrap:wrap;gap:4px}
.kapitel-chips i{font-style:normal;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;font-size:.72rem;font-weight:700;background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.kapitel-chips i.ja{background:var(--green);border-color:var(--green);color:#16181A}
.antw{display:flex;flex-wrap:wrap;gap:4px}
.antw i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;border:1.5px solid var(--line);color:var(--muted)}
.antw i.r{background:color-mix(in srgb,var(--green) 30%,var(--panel));border-color:var(--ok);color:var(--ok)}
.antw i.f{background:color-mix(in srgb,var(--bad) 14%,var(--panel));border-color:var(--bad);color:var(--bad)}

.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.filter .feld{min-width:160px;flex:1}
.filter .suche{flex:2;min-width:200px}
.blaettern{display:flex;align-items:center;justify-content:space-between;gap:10px}
.blaettern-t{font-size:.88rem;color:var(--muted);font-weight:600}
.leer{padding:28px;text-align:center;color:var(--muted)}
.liste{list-style:none;margin:0;padding:0;display:grid}
.liste li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.liste li:last-child{border-bottom:0}
.liste a{font-weight:700;color:var(--ink);text-decoration:none}
.fehlerquote{display:grid;gap:10px}
.fehlerquote .fq{display:grid;gap:4px}
.fehlerquote .fq .kopfz{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.fehlerquote .fq .balken i{background:var(--bad)}
.trichter{display:grid;gap:8px}
.trichter .tz{display:grid;grid-template-columns:130px 1fr 54px;gap:10px;align-items:center;font-size:.9rem}
.trichter .balken{height:12px}
.einst{display:grid;gap:16px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.einst-spalte{display:grid;gap:16px;min-width:0}
.einst form{display:grid;gap:14px}
.vorschau{max-height:340px}
.hinweisbox{background:var(--cream);border-radius:var(--r-s);padding:12px 14px;font-size:.9rem}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--panel2);padding:1px 5px;border-radius:4px}
.gefahrzone{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.aktionen{display:flex;flex-wrap:wrap;gap:8px}
details.aufklapp>summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
details.aufklapp>summary::-webkit-details-marker{display:none}
details.aufklapp>summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--muted)}
details.aufklapp[open]>summary::after{content:"–"}

/* Karten-Liste (mobil statt Tabelle) */
.kliste{display:none}

@media (max-width:1100px){.zwei{grid-template-columns:1fr}}
@media (min-width:761px) and (max-width:1000px){
  .adm{grid-template-columns:76px minmax(0,1fr)}
  .adm-nav{padding:18px 10px}
  .adm-nav .logo,.adm-nav .rolle,.adm-nav a span{display:none}
  .adm-nav a{justify-content:center}
}

/* ================= MOBIL: eigene App-Ansicht ================= */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .nur-desktop{display:none!important}
  body.mobil-app{height:100vh;height:100dvh;overflow:hidden}
  .mobil-app .kopf{position:fixed;inset:0 0 auto 0;height:var(--top);padding:env(safe-area-inset-top,0px) 16px 0;border-bottom:1px solid var(--line)}
  .mobil-app .kopf .logo img{height:22px}
  .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset:auto 0 0 0;height:var(--tab);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--panel);border-top:1px solid var(--line);z-index:30}
  .tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.72rem;font-weight:700;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
  .tabs [aria-current="page"],.tabs [aria-selected="true"]{color:var(--ink)}
  .tabs [aria-current="page"]::before,.tabs [aria-selected="true"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--yellow)}
  .tabs .ic{width:24px;height:24px}

  /* Panels: genau eine Bildschirmhöhe zwischen Kopf und Tabs */
  .panels{position:fixed;inset:var(--top) 0 var(--tab) 0}
  .panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 16px 20px;display:flex!important;flex-direction:column;gap:14px}
  .panel>*{flex-shrink:0;min-width:0}
  .panel[data-aktiv="0"]{display:none!important}
  .panel[data-aktiv="1"]{animation:panelrein .28s cubic-bezier(.2,.7,.2,1)}
  @keyframes panelrein{from{opacity:0;transform:translateX(var(--rein-x,16px))}}
  @media (prefers-reduced-motion:reduce){.panel[data-aktiv="1"]{animation:none}}

  .karte{padding:16px}
  .bereiche{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none;scroll-snap-type:x proximity}
  .bereiche::-webkit-scrollbar{display:none}
  .bereiche .chip{scroll-snap-align:start}

  /* Admin mobil */
  .adm{display:block}
  .adm-nav{display:none}
  .adm-main{padding:0;display:block}
  .adm .panel{gap:14px}
  .adm-titel h1{font-size:1.5rem}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:12px 14px}
  .kpi .z{font-size:1.55rem}
  .tabelle-box.wird-karten{display:none}
  .kliste{display:grid;gap:8px;list-style:none;margin:0;padding:0}
  .kliste>li>a,.kliste>li>div{display:grid;grid-template-columns:1fr auto;gap:4px 10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;text-decoration:none;color:var(--ink)}
  .kliste b{font-size:1rem}
  .kliste .unter{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.82rem;color:var(--muted)}
  .kliste .balken{grid-column:1/-1}
  .filter{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filter .suche{grid-column:1/-1}
  .filter .feld{min-width:0}
  .filter .knopf{grid-column:1/-1}
  .saeulen{height:110px;gap:2px}
  .einst{grid-template-columns:minmax(0,1fr)}
  .einst-spalte{display:contents}
  .zwei{grid-template-columns:minmax(0,1fr)}
  .trichter .tz{grid-template-columns:96px 1fr 44px;font-size:.84rem}
  .knopf{min-height:48px}
  .unter-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .unter-tabs::-webkit-scrollbar{display:none}
}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .wisch-l{animation:wischl .3s cubic-bezier(.2,.7,.2,1)}
  .wisch-r{animation:wischr .3s cubic-bezier(.2,.7,.2,1)}
  @keyframes wischl{from{opacity:0;transform:translateX(40px)}}
  @keyframes wischr{from{opacity:0;transform:translateX(-40px)}}
  @media (prefers-reduced-motion:reduce){.wisch-l,.wisch-r{animation:none}}
}

/* Admin: Ergänzungen */
.adm .panel{display:grid;gap:22px;align-content:start;min-width:0}
.adm>.kopf{display:none}
.tabelle-ansicht summary{cursor:pointer;margin-top:4px}
.tabelle-ansicht table{margin-top:8px}
.kurs-zeilen{display:grid}
.kurs-zeile{border-bottom:1px solid var(--line);padding:10px 0}
.kurs-zeile:last-child{border-bottom:0}
.kurs-zeile>summary{flex-wrap:wrap;position:relative;padding-right:28px}
.kurs-zeile>summary::after{position:absolute;right:0;top:0}
.kz-name{display:grid;min-width:0;flex:1 1 260px}
.kz-werte{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.kz-detail{display:grid;gap:12px;padding:12px 0 4px}
.kz-detail .kapitel-chips,.kz-detail .antw{margin-top:6px}
.unter-tabs .chip{white-space:nowrap}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .adm>.kopf{display:flex}
  .adm .panel{gap:14px}
  .kz-werte{gap:4px 10px}
  .kurs-zeile>summary::after{align-self:flex-start}
}
.karte{min-width:0}
.einst>.karte,.einst form{grid-template-columns:minmax(0,1fr)}

/* Kurs an/aus-Schalter */
.schalter-form{display:inline-flex}
.schalter{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;cursor:pointer;font-weight:700;font-size:.85rem;color:var(--ink);min-height:36px}
.schalter i{position:relative;width:44px;height:26px;border-radius:99px;background:var(--line);transition:background .2s;flex:none}
.schalter i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.schalter[aria-checked="true"] i{background:var(--ok)}
.schalter[aria-checked="true"] i::after{transform:translateX(18px)}
.schalter[aria-checked="false"] span{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.schalter i,.schalter i::after{transition:none}}
tr.kurs-aus td:not(:first-child){opacity:.55}
.kliste li.kurs-aus>a{opacity:.6;border-style:dashed}
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  .kliste li{display:grid;gap:4px}
  .kliste li>.schalter-form{padding:0 6px}
}

/* Admin-Seitenleiste dunkel – passend zum Kopf der Startseite */
.adm-nav{background:#16181A;border-right-color:#16181A;color:#F4F5F0}
.adm-nav .logo .logo-hell{display:none}.adm-nav .logo .logo-dunkel{display:inline}
.adm-nav .rolle{color:#A9AEAB}
.adm-nav a{color:#D9DBD6}
.adm-nav a:hover{background:#24282B;color:#FFFFFF}
.adm-nav a[aria-current="page"]{background:#FABD1D;color:#16181A}
.adm-nav .unten{border-top-color:#2E3336}
.adm-titel h1{letter-spacing:-.02em}
@media (min-width:761px) and (max-width:1000px){.einst{grid-template-columns:minmax(0,1fr)}}
.adm-kopf{background:#16181A!important;border-bottom-color:#2A2E31!important;color:#F4F5F0}
.adm-kopf .logo .logo-hell{display:none}.adm-kopf .logo .logo-dunkel{display:inline}
.adm-kopf .knopf.hell{background:transparent;color:#F4F5F0;border-color:#3A3F42}
.adm-kopf .badge-beta{background:#FABD1D;color:#16181A}

/* ---------- Sprachwahl „DE | EN“ (Startseite, Admin) ---------- */
.sprachwahl{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--panel);flex:none}
.sprachwahl a{min-width:34px;padding:4px 9px;border-radius:99px;font-size:.74rem;font-weight:800;letter-spacing:.06em;line-height:1.3;text-align:center;text-decoration:none;color:var(--muted);transition:color .15s,background .15s}
.sprachwahl a:hover{color:var(--ink)}
.sprachwahl a[aria-current]{background:var(--ink);color:var(--bg)}
.sprachwahl a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* auf dunklem Grund (Kopf der Startseite, Admin-Seitenleiste) */
.sw-kopf,.adm-nav .sprachwahl{border-color:rgba(255,255,255,.16);background:transparent}
.sw-kopf a,.adm-nav .sprachwahl a{color:#A9AEAB}
.sw-kopf a:hover,.adm-nav .sprachwahl a:hover{color:#FFFFFF}
.sw-kopf a[aria-current],.adm-nav .sprachwahl a[aria-current]{background:#F4F5F0;color:#16181A}
.adm-nav .sprachwahl{margin:2px 0 6px 10px;justify-self:start}
.adm-nav .sprachwahl a{display:block;padding:4px 9px;font-weight:800}
.adm-nav .sprachwahl a:hover{background:none}
.adm-nav .sprachwahl a[aria-current]:hover{background:#F4F5F0;color:#16181A}
.sw-info{justify-self:start;margin:0}
.sw-einst{justify-self:start}
/* Kennzeichen für Kurse, die es in der gewählten Sprache noch nicht gibt */
.nur-de{display:inline-block;margin-left:6px;padding:1px 6px;border:1px solid currentColor;border-radius:6px;font-size:.66rem;font-weight:800;letter-spacing:.06em;line-height:1.4;vertical-align:1px;opacity:.7}
@media (min-width:761px) and (max-width:1000px){
  .adm-nav .sprachwahl{flex-direction:column;margin:2px auto 6px;justify-self:center}
}