/* EES Academy – Gestaltung nach EES-CI (Farbpalette Logo). Hell als Standard, dunkel nur über Systemeinstellung.
   Erkennungszeichen: Lernweg als Stromkreis (Schaltzeichen), Fortschritt als Akku-Ladestand. */

:root {
  --blau: #2885c7;
  --blau-tief: #1a5f91;
  --sonne: #fbbe37;
  --oliv: #87973b;
  --blatt: #42ae50;
  --gruen: #299546;
  --wald: #08753d;

  --tinte: #12324a;          /* Text: tiefes EES-Blau statt Schwarz */
  --tinte-2: #4d6578;
  --grund: #ffffff;
  --flaeche: #f1f6fa;
  --linie: #d7e3ec;
  --karte: #ffffff;
  --fokus: #fbbe37;
  --gesperrt: #9fb2c1;

  --verlauf-strom: linear-gradient(90deg, var(--sonne), var(--oliv) 55%, var(--gruen));
  --verlauf-hero: linear-gradient(135deg, #2f93d8 0%, var(--blau) 40%, var(--blau-tief) 100%);

  --schrift-din: "DIN Alternate", "Bahnschrift", "DIN Condensed", "DIN Next", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-gross: 22px;
  --r-mittel: 14px;
  --r-klein: 8px;
  --schnell: 160ms cubic-bezier(.2, .8, .2, 1);
  --rand: 16px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #e7f1f8;
    --tinte-2: #9db4c6;
    --grund: #07131c;
    --flaeche: #0e202d;
    --linie: #1d3a4f;
    --karte: #10273a;
    --gesperrt: #4c6477;
    --verlauf-hero: linear-gradient(135deg, #1f78b7 0%, #175a8a 50%, #0c3a5c 100%);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--tinte);
  font: 16px/1.5 var(--schrift);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, .din { font-family: var(--schrift-din); font-weight: 700; letter-spacing: .005em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2rem, 8vw, 3.4rem); }
h2 { font-size: clamp(1.35rem, 4.6vw, 1.75rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }

/* ---------- Kopf und Tab-Leiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) var(--rand) 10px;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf .marke { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.kopf .marke img { width: 30px; height: auto; }
.kopf .marke span { font-family: var(--schrift-din); font-weight: 700; font-size: 1.25rem; color: var(--blau); }
.kopf .platz { flex: 1; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--verlauf-strom); color: #10301c;
  font-family: var(--schrift-din); font-weight: 700; text-decoration: none;
}

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px);
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 48px; justify-content: center; text-decoration: none;
  font-size: .75rem; color: var(--tinte-2); border-radius: 12px;
  transition: color var(--schnell), background var(--schnell);
}
.tabs a svg { width: 24px; height: 24px; }
.tabs a[aria-current="page"] { color: var(--blau); background: color-mix(in srgb, var(--blau) 10%, transparent); font-weight: 600; }

main { max-width: 1120px; margin: 0 auto; padding: 18px var(--rand) calc(96px + env(safe-area-inset-bottom)); }
.abschnitt { margin-top: 30px; }
.abschnitt > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.abschnitt > header a { font-size: .9rem; color: var(--blau); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Demo-Kennzeichnung ---------- */
.demo-band {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 6px 12px; font-size: .8rem; font-weight: 700;
  background: repeating-linear-gradient(-45deg, var(--sonne) 0 14px, #ffd36e 14px 28px);
  color: #3a2a00;
}
.demo-marke {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .72rem; font-weight: 700;
  background: var(--sonne); color: #3a2a00; vertical-align: middle;
}

/* ---------- Hero-Slide „Weiter lernen“ ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-gross);
  background: var(--verlauf-hero); color: #fff;
  padding: 22px 20px 20px;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  box-shadow: 0 18px 40px -18px rgba(26, 95, 145, .65);
}
.hero .blitz {
  position: absolute; z-index: -1; right: -30%; top: 2%;
  width: 92%; max-width: 560px;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .35));
  transform: rotate(-10deg);
}
.hero::after { /* Lichtkante: hält den Text links lesbar, der Blitz leuchtet rechts */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(16, 70, 110, .55) 0%, rgba(16, 70, 110, .15) 55%, transparent 75%);
}
.hero .oben { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: auto; padding-bottom: 18px; }
.hero .thema { font-size: .82rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); }
.hero .hero-titel { font-size: clamp(1.9rem, 7.5vw, 3rem); max-width: 13ch; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.hero .naechste { font-size: .95rem; opacity: .92; max-width: 34ch; }
.hero .los {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sonne); color: #2b2100; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(251, 190, 55, .9);
  transition: transform var(--schnell);
}
.hero .los:active { transform: scale(.96); }
.hero .los svg { width: 22px; height: 22px; }

/* ---------- Chamäleon-Bühne (Startseite) ----------
   Bühne bleibt in beiden Modi hellgrau: der Videohintergrund ist #e5e5e5. */
.buehne {
  --buehne-grund: #e5e5e5;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - var(--oben, 64px)); /* --oben = Unterkante des Kopfs, per JS gemessen */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--rand) calc(88px + env(safe-area-inset-bottom)); /* Platz für die Tab-Leiste */
  background: var(--buehne-grund); color: #000;
  touch-action: pan-y;               /* senkrecht scrollen bleibt, waagerecht folgt der Kopf */
  user-select: none; -webkit-user-select: none;
}
.buehne-video {
  position: absolute; z-index: 0; left: 50%; top: 0; transform: translateX(-50%);
  height: 58%; width: auto; max-width: none; aspect-ratio: 600 / 640;
  object-fit: contain; pointer-events: none; background: var(--buehne-grund);
  /* weiche Kanten, damit der Videorand im Grau verschwindet */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.buehne-text { position: relative; z-index: 1; max-width: 36rem; }
.buehne-intro {
  pointer-events: none; margin-bottom: 18px;
  font-size: clamp(18px, 4vw, 26px); line-height: 1.3; font-weight: 400; color: #000;
  filter: blur(4px);
}
.buehne-satz {
  margin-bottom: 20px; min-height: 2.7em;
  font-family: var(--schrift-din); font-size: clamp(22px, 5.4vw, 34px); line-height: 1.25; font-weight: 700; color: #000;
}
.buehne-satz .cursor {
  display: inline-block; width: 3px; height: 1.05em; margin-left: 3px; vertical-align: -0.12em;
  background: var(--blau); animation: blinken 1s step-end infinite;
}
.buehne-satz.fertig .cursor { display: none; }
@keyframes blinken { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.pillen {
  display: flex; flex-wrap: wrap; gap: 8px 6px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease;
}
.buehne.bereit .pillen { opacity: 1; transform: none; }
.pille {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, .1); text-decoration: none;
  font-size: 15px; font-weight: 600;
  transition: background-color .2s, color .2s, transform var(--schnell);
}
.pille:hover { background: #000; color: #fff; }
.pille:active { transform: scale(.96); }
.pille.voll { background: var(--blau); color: #fff; border-color: var(--blau); }
.pille.voll:hover { background: var(--blau-tief); }
.buehne :focus-visible { outline-color: var(--blau); }

/* Akku-Ladestand */
.akku { display: flex; align-items: center; gap: 10px; }
.akku .huelle {
  position: relative; flex: 1; height: 16px; border-radius: 5px; padding: 2px;
  border: 2px solid currentColor; opacity: .95;
}
.akku .huelle::after { content: ""; position: absolute; right: -6px; top: 3px; width: 4px; height: 6px; border-radius: 0 2px 2px 0; background: currentColor; }
.akku .ladung { height: 100%; width: 0; border-radius: 2px; background: var(--verlauf-strom); transition: width 700ms cubic-bezier(.2, .8, .2, 1); }
.akku .wert { font-family: var(--schrift-din); font-weight: 700; min-width: 3.2ch; text-align: right; }

/* ---------- Slides (wischbar) ---------- */
.slides {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 14px;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slides > * { scroll-snap-align: start; }

.themen-slide {
  position: relative; overflow: hidden; text-decoration: none;
  border-radius: var(--r-gross); background: var(--karte);
  border: 1px solid var(--linie);
  display: grid; grid-template-rows: 150px auto;
  transition: transform var(--schnell);
}
.themen-slide:active { transform: scale(.97); }
.themen-slide .bild {
  position: relative; background: var(--themenfarbe, var(--blau)); color: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.themen-slide .bild::before { /* Blitzschnitt an der Unterkante */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--karte);
  clip-path: polygon(0 100%, 0 40%, 46% 75%, 40% 20%, 100% 70%, 100% 100%);
}
.themen-slide .bild svg { width: 76px; height: 76px; stroke: currentColor; transform: translateY(-6px); }
.themen-slide .text { padding: 12px 16px 16px; display: grid; gap: 6px; }
.themen-slide h3 { font-size: 1.2rem; }
.themen-slide .zahl { font-size: .85rem; color: var(--tinte-2); }
.themen-slide.hell .bild { color: #3a2a00; }

.kurs-slide {
  text-decoration: none; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie);
  padding: 16px; display: grid; gap: 12px; align-content: start; min-height: 172px;
  transition: transform var(--schnell);
}
.kurs-slide:active { transform: scale(.97); }
.kurs-slide .kopfzeile { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.kurs-slide .streifen { width: 36px; height: 6px; border-radius: 3px; background: var(--themenfarbe, var(--blau)); }
.kurs-slide .akku { color: var(--tinte-2); font-size: .85rem; }
.kurs-slide .akku .huelle { height: 12px; }

.frist { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--flaeche); color: var(--tinte-2); white-space: nowrap; }
.frist.bald { background: color-mix(in srgb, var(--sonne) 30%, transparent); color: var(--tinte); }
.frist.ueber { background: #d6453d; color: #fff; }
.frist.ok { background: color-mix(in srgb, var(--blatt) 22%, transparent); color: var(--wald); }
@media (prefers-color-scheme: dark) { .frist.ok { color: #8fe09b; } }

/* ---------- Kursseite: Lernweg als Stromkreis ---------- */
.kurs-kopf { border-radius: var(--r-gross); padding: 22px 20px; background: var(--verlauf-hero); color: #fff; position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 12px; }
.kurs-kopf .blitz { position: absolute; z-index: -1; right: -40px; bottom: -60px; width: 220px; opacity: .9; transform: rotate(10deg); }
.kurs-kopf h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); max-width: 16ch; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blau); font-weight: 600; text-decoration: none; }
.zurueck svg { width: 20px; height: 20px; flex: none; }

.stromkreis { list-style: none; margin: 0; padding: 0; position: relative; }
.modul { margin-top: 0; }
.modul > h2 { position: relative; font-size: 1.2rem; margin: 0; padding: 22px 0 8px 54px; color: var(--tinte-2); }
.modul > h2::before { /* Leitung läuft durch die Modulüberschrift weiter */
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--linie);
}
.modul > h2.strom::before { background: var(--gruen); }
.modul:first-child > h2::before { top: 60%; }
.lektion {
  position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center;
  min-height: 64px; padding: 8px 0;
}
.lektion::before { /* Leitung */
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 3px; background: var(--linie); border-radius: 2px;
}
.lektion.fertig::before, .lektion.aktiv::before { background: linear-gradient(var(--gruen), var(--gruen)); }
.lektion.aktiv::before { background: linear-gradient(var(--gruen) 0 50%, var(--linie) 50%); }
.lektion.letzte::before { bottom: 50%; }
.lektion.fertig.letzte::before { background: var(--gruen); }
.lektion .zeichen {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--grund); border: 3px solid var(--linie); color: var(--gesperrt);
}
.lektion .zeichen svg { width: 24px; height: 24px; }
.lektion.fertig .zeichen { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.lektion.aktiv .zeichen { background: var(--sonne); border-color: var(--sonne); color: #2b2100; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sonne) 35%, transparent); }
.lektion .titel { display: grid; gap: 2px; text-decoration: none; min-width: 0; }
.lektion .titel strong { font-weight: 600; line-height: 1.3; }
.lektion .titel small { color: var(--tinte-2); font-size: .82rem; }
.lektion.gesperrt .titel { color: var(--tinte-2); } /* lesbar (AA); gesperrt zeigt das offene Schaltzeichen */
.lektion .nr { font-family: var(--schrift-din); font-weight: 700; color: var(--tinte-2); font-size: .95rem; }
.lektion a.titel { min-height: 44px; align-content: center; }

.test-kachel {
  margin-top: 28px; padding: 18px; border-radius: var(--r-mittel); border: 2px dashed var(--linie);
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; color: var(--tinte-2);
}
.test-kachel svg { width: 44px; height: 44px; }
.test-kachel.offen { border-style: solid; border-color: var(--blau); color: var(--tinte); }

/* Einmaliger Stromfluss beim Öffnen der Kursseite */
.strom-puls { position: absolute; left: 18px; width: 5px; height: 60px; top: 0; border-radius: 3px; background: linear-gradient(transparent, var(--sonne)); z-index: 0; opacity: 0; pointer-events: none; }
.strom-puls.los { animation: strom 900ms cubic-bezier(.4, 0, .2, 1) 1; }
@keyframes strom { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--weg, 200px)); } }

/* ---------- Anmeldung ---------- */
.anmelden-seite { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--grund); }
.anmelden-buehne {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--verlauf-hero); color: #fff; padding: calc(env(safe-area-inset-top) + 28px) 24px 70px;
  min-height: 42dvh; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 58% 100%, 64% 88%, 0 96%);
}
.anmelden-buehne .blitz { position: absolute; z-index: -1; right: -90px; top: -80px; width: 320px; transform: rotate(12deg); }
.anmelden-buehne h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); }
.anmelden-buehne p { opacity: .9; max-width: 30ch; }
.anmelden-form { width: 100%; max-width: 420px; margin: 0 auto; padding: 8px 24px 40px; display: grid; gap: 14px; align-content: start; }
.anmelden-form > img { width: min(230px, 66%); height: auto; justify-self: center; margin-bottom: 6px; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 600; font-size: .92rem; }
.feld input {
  min-height: 52px; padding: 0 16px; border-radius: var(--r-mittel); border: 2px solid var(--linie); background: var(--karte);
  transition: border-color var(--schnell);
}
.feld input:focus { border-color: var(--blau); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blau) 20%, transparent); }
.knopf {
  min-height: 54px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 1.05rem;
  background: var(--blau); color: #fff; transition: transform var(--schnell), background var(--schnell);
}
.knopf:hover { background: var(--blau-tief); }
.knopf:active { transform: scale(.97); }
.meldung { padding: 12px 14px; border-radius: var(--r-mittel); font-size: .92rem; background: color-mix(in srgb, var(--sonne) 22%, var(--karte)); border: 1px solid color-mix(in srgb, var(--sonne) 60%, transparent); }
.meldung[hidden] { display: none; }
.kleingedruckt { font-size: .82rem; color: var(--tinte-2); text-align: center; }

/* ---------- Ich / Profil ---------- */
.liste { display: grid; gap: 10px; }
.zeile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); min-height: 56px; }
.zeile .platz { flex: 1; }
.leer { padding: 26px 18px; border-radius: var(--r-mittel); background: var(--karte); border: 1px dashed var(--linie); color: var(--tinte-2); text-align: center; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root { --rand: 32px; }
  .tabs { top: 0; bottom: auto; left: auto; right: 90px; width: auto; padding: calc(env(safe-area-inset-top) + 9px) 0 0; grid-template-columns: repeat(3, auto); gap: 4px; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 21; }
  .tabs a { flex-direction: row; gap: 8px; padding: 0 14px; font-size: .95rem; min-height: 40px; }
  .tabs a svg { width: 20px; height: 20px; }
  main { padding-bottom: 60px; }
  .buehne { justify-content: center; padding: 0 40px; }
  .buehne-text { max-width: 38rem; }
  .buehne-video { left: auto; right: 4%; transform: none; top: 50%; translate: 0 -50%; height: 96%; }
  .start-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
  .start-raster .abschnitt { margin-top: 0; }
  .hero { min-height: 380px; padding: 30px; }
  .slides { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .themen-slide:hover, .kurs-slide:hover { transform: translateY(-3px); }
  .anmelden-seite { grid-template-rows: none; grid-template-columns: 1.1fr 1fr; }
  .anmelden-buehne { min-height: 100dvh; clip-path: polygon(0 0, 100% 0, 88% 52%, 96% 50%, 84% 100%, 0 100%); padding: 60px; }
  .anmelden-buehne .blitz { width: 460px; right: 40px; top: 60px; }
  .anmelden-form { align-content: center; }
  .kurs-seite { display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: start; }
  .kurs-seite .kurs-kopf { position: sticky; top: 84px; }
}

/* ---------- Anmeldung: Zweitfaktor ---------- */
.anmelden-form h2 { font-size: 1.5rem; }
.schritte { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: .95rem; }
.qr { width: 200px; height: 200px; justify-self: center; border-radius: var(--r-mittel); background: #fff; padding: 6px; image-rendering: pixelated; }
.schluessel { font-size: .85rem; color: var(--tinte-2); }
.schluessel code { font-size: .95rem; word-break: break-all; color: var(--tinte); }
.notfallcodes { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; border-radius: var(--r-mittel); background: var(--flaeche); border: 1px solid var(--linie); }
.notfallcodes code { font-size: 1.05rem; letter-spacing: .04em; }

/* ---------- Hinweis (Toast) ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 999px; background: var(--tinte); color: var(--grund); font-weight: 600; font-size: .92rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); transition: opacity var(--schnell), transform var(--schnell); max-width: calc(100vw - 32px);
}
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Verwaltung ---------- */
body.verwaltung { background: var(--flaeche); }
.v-kopf {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) var(--rand) 10px; background: var(--grund); border-bottom: 1px solid var(--linie);
}
.v-kopf .marke { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.v-kopf .marke img { width: 30px; }
.v-kopf .marke span { font-family: var(--schrift-din); font-weight: 700; font-size: 1.2rem; color: var(--blau); white-space: nowrap; }
@media (max-width: 420px) { .v-kopf .marke em { display: none; } }
.v-kopf .marke em { font-style: normal; font-size: .85rem; color: var(--tinte-2); padding: 2px 8px; border-radius: 6px; background: var(--flaeche); }
.v-kopf .platz { flex: 1; }
.v-ich { font-size: .9rem; color: var(--tinte-2); }
.v-abmelden, .zweit {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); cursor: pointer; font-weight: 600; font-size: .9rem;
}
.v-abmelden:hover, .zweit:hover { border-color: var(--blau); color: var(--blau); }
.v-raster { display: grid; grid-template-columns: 1fr; }
.v-nav { display: flex; gap: 4px; padding: 8px var(--rand); overflow-x: auto; background: var(--grund); border-bottom: 1px solid var(--linie); }
.v-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; text-decoration: none; color: var(--tinte-2); font-weight: 600; white-space: nowrap; }
.v-nav a[aria-current="page"] { color: var(--blau); background: color-mix(in srgb, var(--blau) 10%, transparent); }
.v-inhalt { padding: 20px var(--rand) 60px; max-width: 1200px; width: 100%; }
.v-titelzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.v-titelzeile .knopf { padding: 0 22px; min-height: 48px; }
.v-unter { color: var(--tinte-2); font-size: .9rem; margin-top: 4px; }
.v-leer { max-width: 420px; margin: 20vh auto; padding: 0 24px; display: grid; gap: 14px; text-align: center; }
.v-leer .knopf { display: inline-grid; place-items: center; text-decoration: none; }

.v-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-mittel); overflow: hidden; }
.v-tabelle th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--tinte-2); padding: 12px 14px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.v-tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; font-size: .93rem; }
.v-tabelle tr:last-child td { border-bottom: 0; }
.v-tabelle td small { color: var(--tinte-2); }
.v-tabelle tr.aus td { color: var(--tinte-2); }
.v-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.v-aktionen button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--grund); cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--tinte); }
.v-aktionen button:hover { border-color: var(--blau); color: var(--blau); }
.v-aktionen button.gefahr:hover { border-color: #d6453d; color: #d6453d; }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.status.an { background: color-mix(in srgb, var(--blatt) 20%, transparent); color: var(--wald); }
.status.aus { background: var(--flaeche); color: var(--tinte-2); }
.marke-klein { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: .72rem; font-weight: 700; background: var(--flaeche); color: var(--tinte-2); vertical-align: 1px; }
.marke-klein.warn { background: color-mix(in srgb, var(--sonne) 35%, transparent); color: var(--tinte); }
@media (prefers-color-scheme: dark) { .status.an { color: #8fe09b; } }

.v-dialog { border: 0; border-radius: var(--r-gross); padding: 0; width: min(480px, calc(100vw - 24px)); background: var(--grund); color: var(--tinte); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.v-dialog::backdrop { background: rgba(10, 30, 45, .45); backdrop-filter: blur(3px); }
.v-dialog form { padding: 22px; display: grid; gap: 14px; }
.v-dialog h2 { font-size: 1.4rem; }
.v-dialog select { min-height: 52px; padding: 0 12px; border-radius: var(--r-mittel); border: 2px solid var(--linie); background: var(--karte); font: inherit; color: inherit; }
.v-dialog small { color: var(--tinte-2); font-size: .8rem; }
.v-knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.v-knoepfe .knopf { min-height: 46px; padding: 0 22px; }
.pw-zeile { display: flex; gap: 6px; }
.pw-zeile input { flex: 1; min-width: 0; }
.haken { display: flex; gap: 10px; align-items: center; font-size: .92rem; min-height: 44px; }
.haken input { width: 20px; height: 20px; accent-color: var(--blau); }

/* Handy: Tabelle als Karten */
@media (max-width: 760px) {
  .v-ich { display: none; }
  .v-tabelle, .v-tabelle tbody, .v-tabelle tr, .v-tabelle td { display: block; }
  .v-tabelle { background: none; border: 0; }
  .v-tabelle thead { display: none; }
  .v-tabelle tr { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-mittel); margin-bottom: 12px; padding: 6px 0; }
  .v-tabelle td { border: 0; padding: 6px 16px; display: flex; justify-content: space-between; gap: 12px; }
  .v-tabelle td[data-titel]::before { content: attr(data-titel); color: var(--tinte-2); font-size: .8rem; }
  .v-tabelle td:first-child { display: block; }
  .v-tabelle td:first-child::before { display: none; }
  .v-aktionen { justify-content: flex-start; padding-top: 10px !important; }
  .v-aktionen button { min-height: 44px; }
}
@media (min-width: 900px) {
  .v-raster { grid-template-columns: 220px 1fr; min-height: calc(100dvh - 61px); }
  .v-nav { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--linie); padding: 18px 12px; }
  .v-inhalt { padding: 30px 36px 60px; }
}

/* ---------- Geräte ---------- */
.v-anfragen { margin-bottom: 20px; padding: 16px; border-radius: var(--r-mittel); border: 2px solid var(--sonne); background: color-mix(in srgb, var(--sonne) 12%, var(--karte)); display: grid; gap: 10px; }
.v-anfragen h2 { font-size: 1.15rem; }
.v-anfrage { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--linie); }
.v-anfrage small, .v-geraete small { color: var(--tinte-2); }
.v-geraete { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v-geraete li { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-mittel); border: 1px solid var(--linie); background: var(--karte); }
.v-geraete li.aus { opacity: .75; }
.v-geraete .v-aktionen { justify-content: flex-start; }
.v-wahl { border: 1px solid var(--linie); border-radius: var(--r-mittel); padding: 10px 14px; margin: 0; display: grid; gap: 4px; }
.v-wahl legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.v-dialog { max-height: calc(100dvh - 24px); }
.hilfe { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); }
.hilfe summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.hilfe p, .hilfe ul { margin: 10px 0 0; font-size: .94rem; }
.hilfe ul { padding-left: 1.2em; }

/* ---------- Übersicht: Hinweise ---------- */
.v-block { margin-bottom: 28px; display: grid; gap: 10px; }
.v-block > h2 { font-size: 1.3rem; }
.v-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.v-hinweise li { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--sonne); }
.v-hinweise li > div:first-child { flex: 1 1 320px; max-width: 75ch; }
.v-hinweise span { font-size: .93rem; }
.v-hinweise small { color: var(--tinte-2); }

/* ---------- Verwaltung: Inhalte ---------- */
.knopf.klein, .zweit.klein { min-height: 34px; padding: 0 12px; font-size: .82rem; }
.knopf.klein { border-radius: 999px; }
a.zweit { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.v-thema { margin-bottom: 18px; padding: 16px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); border-top: 5px solid var(--themenfarbe, var(--blau)); }
.v-thema > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.v-thema > header h2 { font-size: 1.2rem; flex: 1 1 220px; }
.v-farbpunkt { width: 12px; height: 12px; border-radius: 50%; background: var(--themenfarbe, var(--blau)); }
.v-kursliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-kursliste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--flaeche); }
.v-kursliste li a { flex: 1 1 260px; text-decoration: none; display: grid; }
.v-kursliste li a small { color: var(--tinte-2); }
.v-sort { display: inline-flex; gap: 2px; }
.v-sort button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--linie); background: var(--grund); cursor: pointer; font-size: 1rem; }
.v-sort button:disabled { opacity: .3; cursor: default; }
.v-statusleiste { display: grid; gap: 8px; padding: 12px 16px; margin-bottom: 18px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); border-left: 5px solid var(--gesperrt); }
.v-statusleiste.an { border-left-color: var(--gruen); }
.v-statusleiste details ul { margin: 6px 0 0; padding-left: 1.2em; font-size: .9rem; }
.v-zuw { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.v-zuw li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); }
.v-modul { margin-bottom: 16px; padding: 14px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); }
.v-modul > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.v-modul > header h3 { flex: 1 1 200px; }
.v-nr { font-size: .78rem; font-weight: 700; color: var(--tinte-2); }
.v-lektionen { margin: 0 0 10px; padding-left: 1.4em; display: grid; gap: 10px; }
.v-lektionen > li { padding: 10px 12px; border-radius: 10px; background: var(--flaeche); }
.v-lektion-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v-lektion-kopf strong { flex: 1 1 180px; }
.v-bausteine { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.v-bausteine li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; background: var(--karte); }
.v-baustein-text { flex: 1 1 200px; display: grid; font-size: .9rem; }
.v-baustein-text small { color: var(--tinte-2); }
.v-baustein-text small.warn { color: #b26a00; }
.v-art { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; background: var(--blau); }
.v-art.text { background: var(--gruen); } .v-art.unterlage { background: var(--oliv); }
.v-plus { display: flex; gap: 6px; flex-wrap: wrap; }
.v-vorschau { padding: 12px; border-radius: 10px; background: var(--flaeche); max-height: 220px; overflow: auto; font-size: .92rem; }
.v-dialog textarea { min-height: 80px; padding: 10px 12px; border-radius: var(--r-mittel); border: 2px solid var(--linie); background: var(--karte); font: inherit; color: inherit; resize: vertical; }
.v-uploads { display: grid; gap: 8px; margin-bottom: 14px; }
.v-upload { padding: 10px 14px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); display: grid; gap: 6px; }
.v-upload.fehler { border-color: #d6453d; }
.v-balken { height: 8px; border-radius: 4px; background: var(--flaeche); overflow: hidden; }
.v-balken div { height: 100%; width: 0; background: var(--verlauf-strom); transition: width .3s; }
.v-hochladen { display: inline-grid; place-items: center; padding: 0 22px; min-height: 48px; cursor: pointer; }
.v-ordner { margin-top: 10px; }
.text-inhalt h3 { font-size: 1.15rem; margin: 14px 0 6px; }
.text-inhalt p, .text-inhalt ul, .text-inhalt ol { margin: 0 0 10px; }
.text-inhalt ul, .text-inhalt ol { padding-left: 1.3em; }

/* ---------- Lektion ---------- */
.lektion-seite { max-width: 820px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.lektion-kopf { display: grid; gap: 6px; }
.lektion-kopf h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); }
.baustein { padding: 18px; border-radius: var(--r-gross); background: var(--karte); border: 1px solid var(--linie); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.baustein.fertig { border-color: color-mix(in srgb, var(--gruen) 50%, var(--linie)); }
.baustein h2 { font-size: 1.25rem; }
.baustein .knopf { padding: 0 26px; justify-self: start; }
.erledigt-text { display: inline-flex; align-items: center; gap: 8px; color: var(--wald); font-weight: 700; }
.erledigt-text svg { width: 22px; height: 22px; }
@media (prefers-color-scheme: dark) { .erledigt-text { color: #8fe09b; } }
.unterlage { display: grid; gap: 10px; }
.unterlage-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.unterlage-knoepfe .knopf { display: inline-grid; place-items: center; text-decoration: none; }
.lektion-fuss { display: flex; justify-content: flex-end; }
.lektion-fuss .knopf { display: inline-grid; place-items: center; padding: 0 26px; text-decoration: none; }
.kurs-hinweis { color: var(--blau); font-weight: 600; }
.kurs-beschreibung { opacity: .92; max-width: 60ch; }
a.test-kachel { text-decoration: none; }
.test-kachel.bestanden { border-color: var(--gruen); }
body.ohne-scroll { overflow: hidden; }

/* ---------- Videoplayer ---------- */
.spieler { position: relative; border-radius: var(--r-mittel); overflow: hidden; background: #000; color: #fff; }
.sp-buehne { position: relative; aspect-ratio: 16 / 9; background: #000; }
.sp-buehne video { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-gross { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--sonne) 92%, transparent); color: #2b2100; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.sp-gross svg { width: 34px; height: 34px; margin-left: 4px; }
.sp-gross[hidden] { display: none; }
.wasserzeichen {
  position: absolute; left: var(--x, 10%); top: var(--y, 10%); z-index: 2; pointer-events: none; user-select: none;
  font: 600 clamp(11px, 1.6vw, 15px)/1.2 var(--schrift); color: rgba(255, 255, 255, .42); text-shadow: 0 0 2px rgba(0, 0, 0, .55);
  transition: left 1.2s ease, top 1.2s ease; white-space: nowrap;
}
.sp-leiste { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0d1b26; }
.sp-leiste button { min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-weight: 700; }
.sp-leiste button:hover { background: rgba(255,255,255,.2); }
.sp-pos { flex: 1; min-width: 60px; accent-color: var(--sonne); height: 32px; }
.sp-zeit { font-variant-numeric: tabular-nums; font-size: .82rem; white-space: nowrap; opacity: .85; }
.sp-erfasst { display: grid; gap: 4px; padding: 8px 12px 10px; background: #0d1b26; font-size: .82rem; color: rgba(255,255,255,.8); }
.spieler.fertig .sp-erfasst b { color: #8fe09b; }
.spieler:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
.spieler:fullscreen .sp-buehne { flex: 1; aspect-ratio: auto; }
.spieler.pseudo-voll { position: fixed; inset: 0; z-index: 100; border-radius: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.spieler.pseudo-voll .sp-buehne { flex: 1; aspect-ratio: auto; }
@media (max-width: 480px) { .sp-zeit { display: none; } .sp-leiste { gap: 6px; padding: 6px; } }
.v-kursliste li a .demo-marke, .v-kursliste li a small { justify-self: start; }

/* ---------- Abschlusstest ---------- */
.test-start, .test-ergebnis, .test-form { max-width: 760px; display: grid; gap: 16px; }
.test-regeln { margin: 0; padding: 16px 16px 16px 2em; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); display: grid; gap: 8px; }
.test-start .knopf, .test-ergebnis .knopf, .test-form > .knopf { justify-self: start; padding: 0 28px; display: inline-grid; place-items: center; text-decoration: none; }
.test-frage { margin: 0; padding: 16px; border-radius: var(--r-mittel); border: 1px solid var(--linie); background: var(--karte); display: grid; gap: 8px; min-width: 0; }
.test-frage legend { float: left; width: 100%; display: grid; gap: 4px; font-weight: 600; margin-bottom: 6px; }
.test-frage legend small { font-weight: 400; color: var(--tinte-2); }
.test-antwort { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--linie); cursor: pointer; }
.test-antwort input { width: 22px; height: 22px; accent-color: var(--blau); flex: none; }
.test-antwort:has(input:checked) { border-color: var(--blau); background: color-mix(in srgb, var(--blau) 8%, var(--karte)); }
.test-ergebnis { padding: 24px; border-radius: var(--r-gross); background: var(--karte); border: 1px solid var(--linie); border-top: 6px solid var(--gesperrt); }
.test-ergebnis.gut { border-top-color: var(--gruen); }
.test-ergebnis.schlecht { border-top-color: #d6453d; }
.test-punkte { font-size: 1.2rem; }
.test-punkte strong { font-family: var(--schrift-din); font-size: 2rem; }

.v-fragen { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.v-fragen > li { padding: 12px 14px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); }
.v-antworten { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .92rem; color: var(--tinte-2); }
.v-antworten li.richtig { color: var(--wald); font-weight: 600; }
.v-antwortliste { display: grid; gap: 6px; }
.v-antwort-zeile { display: flex; gap: 8px; align-items: center; }
.v-antwort-zeile input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--gruen); flex: none; }
.v-antwort-zeile input[name^=a] { flex: 1; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--linie); background: var(--karte); font: inherit; color: inherit; }

/* ---------- Übersicht ---------- */
.v-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 18px; }
.v-kachel { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-mittel); background: var(--karte); border: 1px solid var(--linie); text-decoration: none; border-top: 4px solid var(--linie); }
.v-kachel strong { font-family: var(--schrift-din); font-size: 2rem; line-height: 1; }
.v-kachel span { font-size: .85rem; color: var(--tinte-2); }
.v-kachel.rot { border-top-color: #d6453d; } .v-kachel.rot strong { color: #d6453d; }
.v-kachel.gelb { border-top-color: var(--sonne); }
.v-kachel.gruen { border-top-color: var(--gruen); }
button.v-kachel { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.v-kachel-sicherung strong { font-size: 1.5rem; padding-top: .25rem; }
.v-daten { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.v-daten th, .v-daten td { padding: 8px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; font-size: .92rem; }
.v-daten th { width: 42%; font-weight: 600; color: var(--tinte-2); padding-right: 12px; }
.v-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 14px; }
.v-filter label { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--tinte-2); }
.v-filter select { min-height: 40px; min-width: 150px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte); font: inherit; color: var(--tinte); }
.v-tabelle tr.rot td:first-child { box-shadow: inset 4px 0 0 #d6453d; }
.status.rot { background: color-mix(in srgb, #d6453d 16%, transparent); color: #b3261e; }
.v-mini-akku { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.v-mini-akku .v-balken { flex: 1; }
.v-tabelle-box { margin-bottom: 26px; overflow-x: auto; }
@media (prefers-color-scheme: dark) { .status.rot { color: #ff8a80; } }