/* ==========================================================================
   KI-Lernportal Stadt Uster · Welle 2 · portal.css
   --------------------------------------------------------------------------
   Seitenstile des Portals (Kopfzeile, Menue, Dashboard, Etappenseite, Dialoge).
   Baut auf assets/pfyffer-tokens.css und assets/pfyffer-komponenten.css auf
   (Stylebook vom 20.10.2026) und wird NACH diesen beiden eingebunden.
   Entstanden aus den Mockups v10 (Dashboard) und v12 (Etappenseite).
   Pfadfarbe pro Seite ueber die Body-Klasse: bf-change (Pfad 1),
   bf-leadership (Pfad 2), bf-culture (Pfad 3).
   ========================================================================== */

/* ---------- Schriften (lokal, LEUNET-sicher) ---------- */
@font-face { font-family: "Satoshi"; src: url(schriften/satoshi-variabel-normal.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(schriften/satoshi-variabel-kursiv.woff2) format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(schriften/cabinet-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url(schriften/cabinet-grotesk-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

/* ==========================================================================
   1) Gemeinsam: Grundlayout, Kopfzeile, Menue, Hilfe-Dropdown, Toast, Fuss,
      Dialoge und alles, was die Etappenseite braucht (aus Mockup v12)
   ========================================================================== */

:root { --dok:#C2510A; --dok-tint:#FFF2E9; --dok-line:#F5CDB4; --dok-ab:#9E4208; }
body { background:#fff; padding-top:72px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ms { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; font-size:20px; line-height:1; display:inline-flex; vertical-align:middle; font-variation-settings:'FILL' 0,'wght' 500,'opsz' 24; user-select:none; }
.ms.fill, .ms-fill { font-variation-settings:'FILL' 1; }
.ms-fill { font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; display:inline-flex; vertical-align:middle; line-height:1; }
.topnav { position:fixed; top:0; left:0; right:0; z-index:90; height:72px; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); }
.topnav .in { max-width:var(--breite); height:100%; margin:0 auto; padding:0 max(var(--gut), env(safe-area-inset-left, 0px)); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.marke { display:flex; align-items:center; text-decoration:none; color:var(--tinte); }
.marke img { height:50px; width:auto; }
@media (max-width:640px) { .marke img { height:42px; } }
.nav { gap:2px; }
.nav .haupt { gap:2px; }
.nav .haupt a { font: 700 15.5px/1.3 var(--font-text); padding:10px 12px; display:inline-flex; align-items:center; gap:4px; }
.nav .haupt a .ms.pfeil, .nav .wer .ms.pfeil { font-size:18px; color:var(--grau); margin-left:-2px; }
.nav .haupt a[aria-current] { color:var(--bf); }
.nav .trenn { margin:0 10px 0 14px; }
.nav .ab { font-weight:600; color:var(--text-2); }
/* Person rechts: nur Initialen und ein kleiner Pfeil; Name, Pfad, interne Links und Abmelden im Menue */
.nav .wer { display:inline-flex; align-items:center; gap:2px; padding:4px 6px 4px 4px; border-radius:999px; }
.nav .wer .avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--bf); color:#fff; font: 700 13px/1 var(--font-text); letter-spacing:.02em; }
.nav .wer:hover, .nav .wer[aria-expanded="true"] { background:rgba(0,27,23,.05); }
.dd.open > a { background:rgba(0,27,23,.05); }
/* Dropdowns (Hilfe, Person): gleiche Mechanik */
.dd { position:relative; }
.dd .sub { display:none; position:absolute; right:0; top:calc(100% + 10px); z-index:60; min-width:300px; }
.dd.open .sub { display:block; }
.dd .sub ul { display:grid; gap:2px; align-items:stretch; }
.dd .sub li a { display:flex; align-items:center; gap:12px; padding:9px 10px; }
.dd .sub li a .ms { font-size:19px; color:var(--bf); }
.dd .sub li a span.t { display:block; }
.dd .sub li a small { display:block; font-size:13px; color:var(--grau); margin-top:1px; }
.dd .sub li.info { padding:8px 10px 12px; margin-bottom:4px; border-bottom:1px solid var(--linie-soft); }
.dd .sub li.info b { display:block; font: 700 15px/1.3 var(--font-text); color:var(--tinte); }
.dd .sub li.info small { display:block; margin-top:3px; font-size:13px; color:var(--grau); }
.hilfe-wrap .sub { min-width:340px; }
.wer-wrap .sub { min-width:260px; }
.dd .sub li.gr { padding:12px 10px 4px; font: 700 12px/1 var(--font-text); color:var(--grau); letter-spacing:.04em; text-transform:uppercase; }
.dd .sub li.trennlinie { height:1px; margin:6px 0; background:var(--linie-soft); }
.dd .sub li a[aria-current] { color:var(--bf); font-weight:700; }
#menu-btn { display:none; }
#menu { display:none; }
@media (max-width:980px) {
  .topnav .nav { display:none;}
  #menu-btn { display:grid; width:44px; height:44px; border-radius:12px;}
  #menu-btn[aria-expanded="true"] { background:var(--bf-tint); border-color:var(--bf); color:var(--bf);}
  /* Handy-Menue: #menu ist selbst die .sub-Flaeche (Stylebook), darum Regeln direkt auf #menu */
  #menu.open { display:block; position:absolute; right:max(var(--gut), env(safe-area-inset-right, 0px)); left:auto; top:calc(100% + 8px); z-index:60; width:min(360px, calc(100vw - 2 * var(--gut))); max-height:calc(100vh - 96px); overflow:auto; padding:14px 12px 10px; min-width:0;}
  #menu ul { display:grid; gap:2px;}
  #menu li a { display:flex; align-items:center; gap:12px; margin:0; padding:11px 10px; border-radius:10px; font: 600 16px/1.2 var(--font-text); color:var(--tinte);}
  #menu li a .ms { font-size:21px; color:var(--bf); flex:none;}
  #menu li a[aria-current] { background:var(--bf-tint); color:var(--bf);}
  #menu .wer { margin:0 0 8px; padding:4px 10px 12px; border-bottom:1px solid var(--linie-soft); font: 500 14px/1.4 var(--font-text); color:var(--grau);}
  #menu .gr { padding:14px 10px 4px; font: 700 12.5px/1 var(--font-text); color:var(--grau); letter-spacing:.04em; text-transform:uppercase;}
}
.layout { max-width:var(--breite); margin:0 auto; padding:0 max(var(--gut), env(safe-area-inset-left, 0px)); display:grid; grid-template-columns:232px minmax(0, 860px); gap:0 64px; justify-content:center; }
.rail { position:sticky; top:72px; align-self:start; padding:40px 0 40px; max-height:calc(100vh - 72px); overflow:auto; }
.rail .zurueck { display:inline-flex; align-items:center; gap:6px; font: 600 15px/1 var(--font-text); color:var(--text-2); text-decoration:none; }
.rail .zurueck:hover { color:var(--bf); }
.rail .zurueck .ms { font-size:18px; }
.rail .et-k { margin-top:26px; font: 600 13px/1.3 var(--font-text); color:var(--grau); }
.rail .et-t { margin-top:4px; font: 700 17px/1.25 var(--font-titel); }
.rail .auf { margin-top:22px; padding-top:18px; border-top:1px solid var(--linie); font: 700 12.5px/1 var(--font-text); color:var(--grau); letter-spacing:.02em; }
.rail ol { margin-top:10px; display:grid; gap:2px; }
.rail ol a { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:var(--r-tab); font: 600 15px/1.2 var(--font-text); color:var(--text-2); text-decoration:none; }
.rail ol a .n { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--bf-tint); color:var(--bf); font: 700 12px/1 var(--font-titel); flex:none; }
.rail ol a:hover { background:rgba(0,27,23,.05); }
.rail ol a[aria-current] { color:var(--bf); background:var(--bf-tint); }
.rail ol a[aria-current] .n { background:var(--bf); color:#fff; }
.rail .termin-r { margin-top:22px; padding-top:18px; border-top:1px solid var(--linie-soft); font-size:14px; color:var(--text-2); display:flex; gap:8px; align-items:flex-start; }
.rail .termin-r .ms { color:var(--bf); font-size:18px; flex:none; margin-top:1px; }
.rail .termin-r b { display:block; color:var(--tinte); font-weight:600; }
@media (max-width:1100px) {
  .layout { grid-template-columns:minmax(0,1fr); gap:0;}
  .rail { display:none;}
}
.sprung { display:none; position:sticky; top:72px; z-index:40; background:var(--bf-hell); backdrop-filter:blur(10px); border-bottom:1px solid var(--linie); }
@media (max-width:1100px) {
  .sprung { display:block;}
}
.sprung .in { max-width:var(--breite); margin:0 auto; padding:0 max(var(--gut), env(safe-area-inset-left, 0px)); display:flex; align-items:center; gap:18px; height:52px; }
.sprung .zurueck { display:inline-flex; align-items:center; gap:6px; font: 600 15px/1 var(--font-text); color:var(--text-2); text-decoration:none; white-space:nowrap; }
.sprung .zurueck:hover { color:var(--bf); }
.sprung .zurueck .ms { font-size:18px; }
.sprung .trenn { width:1px; height:22px; background:rgba(0,27,23,.18); flex:none; }
.sprung .wo { font: 600 14px/1 var(--font-text); color:var(--grau); white-space:nowrap; }
.sprung .wo.auf { margin-left:auto; }
.sprung ol { display:flex; gap:0 4px; overflow-x:auto; scrollbar-width:none; }
.sprung ol::-webkit-scrollbar { display:none; }
.sprung ol a { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:var(--r-tab); font: 600 14.5px/1 var(--font-text); color:var(--text-2); text-decoration:none; white-space:nowrap; }
.sprung ol a .n { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--bf-tint); color:var(--bf); font: 700 11px/1 var(--font-titel); }
.sprung ol a:hover { background:rgba(0,27,23,.05); }
.sprung ol a[aria-current] { color:var(--bf); background:var(--bf-tint); }
.sprung ol a[aria-current] .n { background:var(--bf); color:#fff; }
@media (max-width:760px) {
  .sprung .in { gap:10px; height:50px;}
  .sprung .wo, .sprung .trenn { display:none;}
  .sprung ol { margin-left:auto;}
  .sprung .zurueck span.t { display:none;}
  .sprung ol a { padding:8px 9px; font-size:13.5px;}
}
.inhalt { min-width:0; padding-bottom:72px; }
.kopf-e { padding-top:40px; }
.kopf-e .etappe-label { margin-bottom:16px; }
.kopf-e h1 { font-size:var(--h1-detail); }
.kopf-e .lead { margin-top:14px; max-width:46em; }
.nimm { margin-top:22px; display:grid; gap:8px; }
.nimm li { display:flex; gap:10px; align-items:flex-start; font-size:16.5px; color:var(--text-2); line-height:1.45; }
.nimm li .ms { flex:none; color:var(--bf); font-size:20px; margin-top:2px; }
.nimm-t { margin-top:22px; font: 700 15px/1.3 var(--font-text); color:var(--grau); }
.treff-k { margin-top:22px; display:flex; align-items:center; gap:12px; padding:13px 16px; border:1px solid var(--linie); border-radius:var(--r-m); }
.treff-k .w { flex:1; min-width:0; display:flex; align-items:center; gap:10px; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.treff-k .w > span { overflow:hidden; text-overflow:ellipsis; }
.treff-k .w .ms { color:var(--bf); flex:none; }
.treff-k .w b { font-weight:700; }
.treff-k .w .ort { color:var(--grau); }
.treff-k .edit { flex:none; width:38px; height:38px; border-radius:var(--r-s); border:1px solid var(--linie); background:#fff; color:var(--text-2); display:grid; place-items:center; cursor:pointer; }
.treff-k .edit:hover { border-color:var(--bf); color:var(--bf); background:var(--bf-tint); }
.treff-k .edit .ms { font-size:19px; }
.treff-k .plan { flex:none; }
@media (max-width:640px) {
  .treff-k .w { white-space:normal;}
}
.erklaer-f { margin-top:26px; }
.erklaer-f summary { font-size:17px; }
.erklaer-f .antwort { padding-right:0; font-size:16px; }
.erklaer-f .intro { max-width:46em; color:var(--text-2); }
.ablauf-karten { display:grid; gap:12px; margin-top:18px; }
.ablauf-karten a { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:16px 18px; border:1px solid var(--linie); border-radius:var(--r-m); background:#fff; text-decoration:none; color:inherit; transition:border-color var(--dauer), box-shadow var(--dauer); }
.ablauf-karten a:hover { border-color:color-mix(in srgb, var(--bf) 42%, transparent); box-shadow:var(--schatten-hover); }
.ablauf-karten .k { grid-column:1; grid-row:1 / span 2; width:40px; height:40px; border-radius:50%; background:var(--bf); color:#fff; display:grid; place-items:center; font: 800 16px/1 var(--font-titel); }
.ablauf-karten .k .ms { font-size:20px; }
.ablauf-karten b { grid-column:2; grid-row:1; font: 700 16.5px/1.3 var(--font-titel); color:var(--tinte); }
.ablauf-karten .t { grid-column:2; grid-row:2; font-size:15px; line-height:1.5; color:var(--text-2); }
.ablauf-karten .t strong { color:var(--tinte); font-weight:600; }
.ablauf-karten .pf { grid-column:3; grid-row:1 / span 2; color:var(--grau); }
.ablauf-karten a:hover .pf { color:var(--bf); }
.erklaer-f .tipp { margin-top:14px; display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-m); background:var(--bf-tint); font-size:15px; color:var(--text-2); }
.erklaer-f .tipp .ms { color:var(--bf); flex:none; margin-top:2px; }
.erklaer-f .tipp b { color:var(--tinte); }
@media (max-width:560px) {
  .ablauf-karten a { grid-template-columns:36px minmax(0,1fr); padding:14px;}
  .ablauf-karten .pf { display:none;}
  .ablauf-karten .k { width:36px; height:36px; font-size:15px;}
}
.teil { padding-top:56px; scroll-margin-top:140px; }
#einzelauftrag { margin-top:52px; padding-top:48px; border-top:1px solid var(--linie); }
.themen summary { white-space:nowrap; }
.teil-kopf { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; }
.teil-kopf .nr { font-size:15px; }
.teil-kopf h2 { font-size:var(--h2-s); }
.teil-kopf .meta { margin-left:auto; font-size:14.5px; color:var(--grau); white-space:nowrap; }
.teil-lead { margin:-6px 0 18px; font-size:16.5px; color:var(--text-2); max-width:46em; }
.teil-lead b { color:var(--tinte); font-weight:600; }
@media (max-width:640px) {
  .teil { padding-top:44px;}
  .teil-kopf { flex-wrap:wrap;}
  .teil-kopf .meta { margin-left:0; width:100%;}
}
.video { position:relative; aspect-ratio:16 / 9; border-radius:var(--r-l); overflow:hidden; background:var(--bf-tint); isolation:isolate; display:grid; place-items:center; cursor:pointer; border:0; width:100%; padding:0; }
.video::before { content:""; position:absolute; z-index:-1; right:-120px; top:-160px; width:440px; height:440px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--bf) 28%, transparent); }
.video .play { width:72px; height:72px; border-radius:50%; background:var(--bf); color:#fff; display:grid; place-items:center; box-shadow:0 16px 34px rgba(0,27,23,.18); transition:transform var(--dauer) var(--ease); }
.video:hover .play { transform:scale(1.05); }
.video .play .ms { font-size:36px; }
.video .cap { position:absolute; left:20px; bottom:16px; font: 600 14px/1.3 var(--font-text); color:var(--bf-ab); display:flex; gap:8px; align-items:center; }
.video .dauer { position:absolute; right:16px; bottom:16px; background:#fff; border-radius:999px; padding:6px 12px; font: 600 13px/1 var(--font-text); color:var(--tinte); }
.unter { margin-top:14px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; }
.unter .hint { font-size:14.5px; color:var(--grau); }
.unter .dok { flex:1 1 360px; max-width:520px; }
.themen { margin-top:22px; }
.themen summary { font-size:16px; }
.themen .antwort { font-size:15.5px; padding-bottom:14px; }
.themen .antwort ol { display:grid; gap:6px; padding-left:22px; }
.themen .antwort li { list-style:decimal; }
.themen .antwort li::marker { color:var(--bf); font-weight:700; }
/* Kapitel im Video: Zeitmarke in der Pfadfarbe, ganze Zeile klickbar, springt im Player an die Stelle */
.themen .kapitel-hinweis { margin:0 0 10px; font-size:14.5px; color:var(--grau); }
.themen .kapitel { display:flex; align-items:baseline; gap:10px; width:calc(100% + 16px); margin:-3px -8px; padding:3px 8px; border:0; border-radius:8px; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; transition:background var(--dauer), color var(--dauer); }
.themen .kapitel:hover { background:var(--bf-tint); color:var(--bf-ab); }
.themen .kapitel:focus-visible { outline:3px solid var(--bf); outline-offset:1px; }
.themen .kapitel .zeit { flex:none; min-width:42px; font: 600 13.5px/1.6 var(--font-text); color:var(--bf); font-variant-numeric:tabular-nums; }
.themen .kapitel .kt { text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; transition:text-decoration-color var(--dauer); }
.themen .kapitel:hover .kt, .themen .kapitel:focus-visible .kt { text-decoration-color:currentColor; }
.dok { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 14px 14px 16px; border:1.5px solid var(--dok-line); background:var(--dok-tint); border-radius:var(--r-m); text-decoration:none; color:inherit; transition:border-color var(--dauer), box-shadow var(--dauer); }
.dok:hover { border-color:var(--dok); box-shadow:0 12px 28px -18px rgba(194,81,10,.45); }
.dok .tile { position:relative; width:44px; height:54px; border-radius:6px; background:var(--dok); color:#fff; display:grid; place-items:center; font: 800 11px/1 var(--font-titel); letter-spacing:.04em; flex:none; }
.dok .tile::after { content:""; position:absolute; right:0; top:0; border-style:solid; border-width:0 12px 12px 0; border-color:transparent var(--dok-tint) var(--dok-ab) transparent; border-top-right-radius:6px; }
.dok b { display:block; font: 700 16px/1.3 var(--font-text); color:var(--tinte); }
.dok span.s { display:block; font-size:14px; color:var(--grau); margin-top:2px; }
.dok .dl { display:inline-flex; align-items:center; gap:6px; background:var(--dok); color:#fff; border-radius:var(--r-btn); padding:11px 14px; font: 700 14.5px/1 var(--font-text); white-space:nowrap; }
.dok:hover .dl { background:var(--dok-ab); }
.dok .dl .ms { font-size:18px; }
.dok.klein { padding:10px 10px 10px 12px; border-radius:var(--r-s); gap:12px; }
.dok.klein .tile { width:34px; height:42px; font-size:10px; }
.dok.klein b { font-size:15px; }
.dok.klein .dl { padding:9px 12px; font-size:14px; }
.dok .muss { display:inline-flex; align-items:center; gap:5px; font: 700 12px/1 var(--font-text); color:var(--dok); background:#fff; border:1px solid var(--dok-line); border-radius:999px; padding:4px 9px; margin-bottom:7px; }
.dok .muss .ms { font-size:13px; }
.dok.gross { grid-template-columns:auto minmax(0,1fr); padding:16px; }
.dok.gross .dl { grid-column:1 / span 2; justify-content:center; padding:13px 14px; font-size:15.5px; }
.dok.gross .tile { width:48px; height:58px; }
.dok.gross b { font-size:16.5px; }
@media (max-width:560px) {
  .dok { grid-template-columns:auto minmax(0,1fr);}
  .dok .dl { grid-column:1 / span 2; justify-content:center;}
}
.lg { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.lg .lg-l { display:grid; grid-template-rows:auto minmax(0,1fr); gap:16px; }
.lg .karte { min-width:0; }
.lg .karte .mitbringen { margin-top:auto; padding-top:16px; }
.lg .karte h3 .ms { color:var(--bf); font-size:20px; margin-right:6px; vertical-align:-3px; }
.lg .wer { margin-top:6px; font-size:14.5px; color:var(--text-2); }
.lg .termin-gross { display:flex; align-items:center; gap:14px; margin-top:14px; }
/* Karte «Euer Treffen» weiss wie die Lerndossier-Karte, nur der Termin sitzt in einer hellgruenen Box (seit 26.10.2026) */
.lg .treffen-k .termin-gross { padding:14px 16px; border-radius:var(--r-m); background:var(--bf-hell); border:1px solid var(--bf-tint2); }
.lg .termin-gross .t1 { font: 700 17px/1.3 var(--font-titel); }
.lg .termin-gross .t2 { font-size:14.5px; color:var(--text-2); margin-top:2px; }
.lg .edit-l { margin-top:14px; display:inline-flex; align-items:center; gap:6px; font: 600 14.5px/1 var(--font-text); color:var(--bf); text-decoration:none; }
.lg .edit-l .ms { font-size:18px; }
.lg .dossier-k p { margin-top:0; padding-top:12px; font-size:14.5px; color:var(--text-2); }   /* Inhalt bleibt oben, auch wenn die Karte neben dem Ablauf mitwaechst */
.lg .dossier-k p b { color:var(--tinte); font-weight:600; }
.ablauf-k { margin-top:16px; padding:22px 22px 20px; }
.ablauf-k h3 { font-size:18px; margin-bottom:14px; }
.ablauf-k .schritte { gap:20px; }
.ablauf-k .schritte b { font-size:16px; }
.ablauf-k .schritte .t { font-size:14.5px; }
@media (max-width:700px) {
  .lg { grid-template-columns:1fr;}
}
.lg .karte { padding:22px 22px 20px; }
.lg .karte h3 { font-size:18px; }
.lg .termin { margin-top:12px; max-width:none; padding:12px 14px; background:#fff; border-color:transparent; gap:14px; }
.lg .termin .t-titel { font-size:16px; }
.lg .termin .t-sub { font-size:14.5px; margin-top:2px; }
.lg .datum { width:56px; height:56px; }
.lg .datum b { font-size:20px; }
.lg .acts { margin-top:12px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.lg .link { font-size:14.5px; }
.dossier { display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px; border:1px solid transparent; background:#fff; border-radius:var(--r-s); text-decoration:none; color:inherit; transition:border-color var(--dauer); }
.dossier:hover { border-color:var(--bf); }
.dossier .pdf { flex:none; width:44px; height:52px; border-radius:6px; background:var(--bf); color:#fff; display:grid; place-items:center; font: 800 11px/1 var(--font-titel); letter-spacing:.04em; }
.dossier b { display:block; font: 700 15.5px/1.3 var(--font-text); }
.dossier span { display:block; font-size:14px; color:var(--grau); margin-top:2px; }
.dossier .ms { margin-left:auto; color:var(--bf); }
.lg .lern-liste { margin-top:12px; }
.lg .lern-liste li { font-size:15.5px; }
.lg .lern-liste li span { font-size:14.5px; }
.mitbringen { margin-top:14px; font-size:14.5px; color:var(--grau); }
.mitbringen b { color:var(--tinte); font-weight:600; }
.lg .leer { margin-top:12px; font-size:15px; color:var(--text-2); }
.stufen .umschalter { margin-top:4px; }
.stufen .umschalter button[aria-pressed="true"] { background:var(--bf); }
.stufe { margin-top:18px; }
.stufe[hidden] { display:none; }
.stufe .karte { padding:26px 26px 24px; }
.stufe h3 { font-size:21px; }
.stufe .unter-s { display:block; margin-top:6px; font: 600 15px/1.3 var(--font-text); color:var(--bf); }
.stufe .prosa { margin-top:14px; font-size:16.5px; }
.stufe h4 { margin-top:22px; font: 700 15px/1.3 var(--font-text); color:var(--grau); }
.stufe .punkte { margin-top:10px; }
.stufe .punkte li { font-size:15.5px; }
.prompts { margin-top:10px; display:grid; gap:10px; }
.prompt { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 14px 14px 16px; border-radius:var(--r-s); background:var(--bf-hell); border:1px solid color-mix(in srgb, var(--bf) 18%, transparent); }
.prompt p { font-size:15px; line-height:1.5; color:var(--tinte); }
.prompt p mark { background:color-mix(in srgb, var(--bf) 16%, #fff); border-radius:4px; padding:0 4px; }
.prompt button { display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb, var(--bf) 35%, transparent); background:#fff; color:var(--bf); border-radius:8px; padding:9px 12px; font: 600 14px/1 var(--font-text); cursor:pointer; white-space:nowrap; }
.prompt button:hover { border-color:var(--bf); background:var(--bf-tint); }
.prompt button .ms { font-size:17px; }
@media (max-width:560px) {
  .prompt { grid-template-columns:1fr;}
  .prompt button { justify-self:start;}
}
.stufe .hinweis-box { margin-top:22px; }
.stufe .hinweis-box .ampel { display:inline-block; width:10px; height:10px; border-radius:50%; background:#2E9E4F; margin-right:6px; vertical-align:middle; }
.schritte-k { display:grid; gap:12px; }
.schritt-k { padding:22px 24px 22px 76px; position:relative; }
.schritt-k .k { position:absolute; left:24px; top:22px; width:36px; height:36px; border-radius:50%; background:var(--bf); color:#fff; display:grid; place-items:center; font: 800 15px/1 var(--font-titel); }
.schritt-k h3 { font-size:18px; padding-top:6px; }
.schritt-k .prosa { margin-top:8px; font-size:16px; }
.schritt-k h4 { margin-top:16px; font: 700 15px/1.3 var(--font-text); color:var(--grau); }
.schritt-k .prompts { margin-top:8px; }
@media (max-width:560px) {
  .schritt-k { padding:18px 16px 18px 16px;}
  .schritt-k .k { position:static; margin-bottom:8px;}
  .schritt-k h3 { padding-top:0;}
}
.mehr-mat { margin-top:44px; }
.mehr-mat summary { font-size:17px; }
.mehr-mat .antwort ul { display:grid; gap:10px; padding-left:0; }
.abschluss { margin-top:56px; scroll-margin-top:140px; padding:34px 36px; }
.abschluss h2 { font-size:var(--h2-s); }
.abschluss .lead { margin-top:8px; font-size:16px; max-width:46em; }
.sterne { display:flex; gap:6px; margin-top:16px; }
.sterne button { width:46px; height:46px; border-radius:10px; border:1px solid var(--linie); background:#fff; color:var(--grau); cursor:pointer; display:grid; place-items:center; transition:background var(--dauer), color var(--dauer), border-color var(--dauer); }
.sterne button .ms { font-size:26px; }
.sterne button.an { background:var(--bf); border-color:var(--bf); color:#fff; }
.sterne button:hover { border-color:var(--bf); }
.sterne-t { margin-top:8px; font-size:14px; color:var(--grau); min-height:1.4em; }
.abschluss label { display:block; margin-top:20px; font: 600 15px/1.3 var(--font-text); }
.abschluss label .opt { font-weight:400; color:var(--grau); }
.abschluss textarea { width:100%; min-height:96px; margin-top:8px; border:1px solid var(--linie); border-radius:var(--r-s); padding:12px 14px; font: 500 15.5px/1.5 var(--font-text); color:var(--tinte); background:#fff; resize:vertical; }
.abschluss textarea:focus { outline:none; border-color:var(--bf); box-shadow:0 0 0 3px color-mix(in srgb, var(--bf) 18%, transparent); }
.abschluss .acts { margin-top:20px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.abschluss .frage { margin-top:22px; font: 700 16px/1.3 var(--font-text); }
.abschluss .klein-t { font-size:14px; color:var(--grau); }
.abschluss.fertig { background:var(--bf-tint); }
.abschluss .fertig-k { display:flex; align-items:center; gap:14px; }
.abschluss .fertig-k .ms { width:52px; height:52px; border-radius:50%; background:var(--bf); color:#fff; font-size:28px; display:grid; place-items:center; flex:none; }
.abschluss .fertig-k h2 { font-size:24px; }
.abschluss .fertig-k p { margin-top:4px; font-size:15.5px; color:var(--text-2); }
@media (max-width:640px) {
  .abschluss { padding:24px 20px;}
  .abschluss .acts .btn { width:100%; justify-content:center;}
}
.abschluss-dlg .frage { margin-top:6px; font: 700 16px/1.3 var(--font-text); }
.abschluss-dlg .sterne { display:flex; gap:6px; margin-top:12px; }
.abschluss-dlg .sterne button { width:46px; height:46px; border-radius:10px; border:1px solid var(--linie); background:#fff; color:var(--grau); cursor:pointer; display:grid; place-items:center; }
.abschluss-dlg .sterne button .ms { font-size:26px; }
.abschluss-dlg .sterne button.an { background:var(--bf); border-color:var(--bf); color:#fff; }
.abschluss-dlg .sterne-t { margin-top:8px; font-size:14px; color:var(--grau); min-height:1.4em; }
.abschluss-dlg .frage.zweite { margin-top:18px; }
.abschluss-dlg { max-height:calc(100vh - 32px); overflow:auto; }
.abschluss-dlg > p { margin-bottom:10px; }
/* Teilbewertungen: Lernimpuls, Lerndossier, Einzelauftrag je eine Zeile */
.bw-teile { margin-top:10px; border:1px solid var(--linie); border-radius:var(--r-m); overflow:hidden; }
.bw-teil { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label sterne" "label text"; align-items:center; column-gap:14px; padding:10px 14px; background:#fff; }
.bw-teil + .bw-teil { border-top:1px solid var(--linie); }
.bw-teil .tb-label { grid-area:label; display:flex; flex-direction:column; gap:2px; min-width:0; }
.bw-teil .tb-label b { font: 700 15px/1.3 var(--font-text); color:var(--tinte); }
.bw-teil .tb-label span { font: 400 13px/1.3 var(--font-text); color:var(--grau); }
.abschluss-dlg .bw-teil .sterne { grid-area:sterne; margin-top:0; gap:4px; }
.abschluss-dlg .bw-teil .sterne.klein button { width:36px; height:36px; border-radius:8px; }
.abschluss-dlg .bw-teil .sterne.klein button .ms { font-size:21px; }
.abschluss-dlg .bw-teil .sterne-t { grid-area:text; margin-top:2px; min-height:0; font-size:12.5px; text-align:right; }
.abschluss-dlg .bw-teil .sterne-t:empty { display:none; }
.abschluss-dlg .bw-gesamt .sterne { margin-top:10px; }
@media (max-width:479px) {
  .bw-teil { grid-template-columns:1fr; grid-template-areas:"label" "sterne" "text"; row-gap:6px; }
  .abschluss-dlg .bw-teil .sterne-t { text-align:left; }
}
/* Video-Platzhalter kompakt, wenn die Folien schon da sind */
.video.folgt.kompakt { aspect-ratio:auto; min-height:0; padding:18px 20px; display:flex; align-items:center; gap:14px; justify-content:flex-start; }
.video.folgt.kompakt .play { width:44px; height:44px; flex:0 0 auto; }
.video.folgt.kompakt .play .ms { font-size:24px; }
.video.folgt.kompakt .cap { position:static; flex:1 1 auto; }
.video.folgt.kompakt .dauer { position:static; flex:0 0 auto; }
.video.folgt.kompakt::before { width:260px; height:260px; right:-90px; top:-120px; }
.unter .dok.gross { max-width:none; flex-basis:100%; }
.dauer-wahl { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.dauer-wahl button { padding:11px 12px; border-radius:10px; border:1px solid var(--linie); background:#fff; font: 600 14.5px/1.2 var(--font-text); color:var(--tinte); cursor:pointer; text-align:center; }
.dauer-wahl button:hover { border-color:var(--bf); }
.dauer-wahl button.an { background:var(--bf); border-color:var(--bf); color:#fff; }
@media (min-width:560px) { .dauer-wahl { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.abschluss-dlg label { display:block; margin-top:18px; font: 600 15px/1.3 var(--font-text); }
.abschluss-dlg label .opt { font-weight:400; color:var(--grau); }
.abschluss-dlg textarea { width:100%; min-height:96px; margin-top:8px; border:1px solid var(--linie); border-radius:var(--r-s); padding:12px 14px; font: 500 15.5px/1.5 var(--font-text); color:var(--tinte); background:#fff; resize:vertical; }
.abschluss-dlg textarea:focus { outline:none; border-color:var(--bf); box-shadow:0 0 0 3px color-mix(in srgb, var(--bf) 18%, transparent); }
.abschluss-dlg .acts { display:flex; justify-content:space-between; gap:10px; margin-top:20px; flex-wrap:wrap; }
.seitenfuss { padding:22px 0; }
.seitenfuss .fuss-unten { border-top:0; padding-top:0; justify-content:center; }
@media (max-width:820px) {
}
#toast { position:fixed; left:50%; bottom:76px; transform:translate(-50%, 20px); background:var(--tinte); color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:70; max-width:calc(100% - 32px); }
#toast.show { opacity:1; transform:translate(-50%, 0); }

/* ==========================================================================
   2) Dashboard (aus Mockup v10): Hero mit Ring, Erklaerteil, Naechster Schritt,
      Etappenliste, Lerngruppe (Variante B), KI-Ampel, Hilfe, Fenster Termine
   ========================================================================== */

main.wrap { padding-top:40px; padding-bottom:64px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:end; }
.hero h1 { font-size:var(--h1-detail); }
.hero .lead { margin-top:12px; }
.prog { display:flex; align-items:center; gap:16px; padding:14px 20px 14px 14px; border:1px solid var(--linie); border-radius:var(--r-m); background:#fff; min-width:280px; }
.ring4 { width:76px; height:76px; position:relative; flex:none; }
.ring4 svg { width:100%; height:100%; transform:rotate(-90deg); display:block; }
.ring4 .seg { fill:none; stroke:var(--bf-tint); stroke-width:7; }
.ring4 .seg.on { stroke:var(--bf); }
.ring4 .seg.now { stroke:var(--bf); opacity:.32; }
.ring4 .val { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font: 800 18px/1 var(--font-titel); letter-spacing:-.02em; color:var(--tinte); }
.ring4 .val small { font: 600 11px/1 var(--font-text); color:var(--grau); margin-left:1px; }
.prog b { display:block; font: 700 16px/1.3 var(--font-titel); }
.prog span { display:block; font-size:14.5px; line-height:1.4; color:var(--grau); margin-top:3px; max-width:24em; }
.prog span em { font-style:normal; color:var(--tinte); font-weight:600; }
@media (max-width:860px) {
  .hero { grid-template-columns:1fr; align-items:start;}
  .prog { min-width:0;}
}
.erklaer { margin-top:22px; border:1px solid var(--linie); border-radius:var(--r-m); background:var(--karte-hell); }
.erklaer summary { display:flex; align-items:center; gap:12px; padding:16px 20px; cursor:pointer; list-style:none; font: 700 16px/1.3 var(--font-titel); }
.erklaer summary::-webkit-details-marker { display:none; }
.erklaer summary .ms.i { color:var(--bf); }
.erklaer summary .zu { margin-left:auto; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--linie); background:#fff; color:var(--bf); font: 500 20px/1 var(--font-text); }
.erklaer[open] summary .zu::before { content:"−"; }
.erklaer:not([open]) summary .zu::before { content:"+"; }
.erklaer summary .hint { font: 500 14px/1.3 var(--font-text); color:var(--grau); margin-left:4px; }
.erklaer .body { padding:4px 20px 20px; }
.erklaer .schritte { margin-top:8px; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
.erklaer .schritte li { border-top-color:color-mix(in srgb, var(--bf) 40%, #fff); }
.erklaer .schritte b { font-size:16px; }
.erklaer .schritte .t { font-size:14px; }
.erklaer .wo { margin-top:18px; padding-top:14px; border-top:1px solid var(--linie-soft); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 24px; font-size:14.5px; color:var(--text-2); }
.erklaer .wo li { display:flex; gap:8px; }
.erklaer .wo li .ms { color:var(--bf); font-size:18px; flex:none; margin-top:1px; }
.erklaer .wo b { color:var(--tinte); font-weight:600; }
@media (max-width:900px) {
  .erklaer .schritte { grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:560px) {
  .erklaer .schritte { grid-template-columns:1fr;}
  .erklaer .wo { grid-template-columns:1fr;}
  .erklaer summary .hint { display:none;}
}
.nx { margin-top:28px; padding:28px 32px; display:flex; align-items:center; gap:22px; --kd:360px; --kr:-120px; --kt:-150px; }
.nx .ico { flex:none; width:52px; height:52px; border-radius:50%; background:var(--bf); color:#fff; display:grid; place-items:center; }
.nx .ico .ms { font-size:26px; }
.nx .txt { flex:1; min-width:0; }
.nx .k { font: 600 var(--mini)/1.3 var(--font-text); color:var(--bf); }
.nx h2 { font-size:clamp(20px, 2.1vw, 24px); line-height:1.2; margin-top:4px; }
.nx .d { margin-top:6px; font-size:var(--klein); color:var(--text-2); max-width:60ch; }
.nx .acts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.btn-o.ohne::after { content:none; }
.btn-o.weiss { background:#fff; }
@media (max-width:700px) {
  .nx { flex-wrap:wrap; padding:22px 20px;}
  .nx .acts, .nx .acts .btn, .nx .acts .btn-o { width:100%; justify-content:center;}
}
.teil-titel { margin-top:44px; margin-bottom:18px; font-size:var(--h2-s); }
.raster { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px 40px; align-items:start; margin-top:44px; }
.raster .teil-titel { margin:0 0 18px; }
@media (max-width:980px) {
  .raster { grid-template-columns:1fr;}
}
/* Beide Spalten immer buendig (oben und unten): die Karten der kuerzeren Spalte wachsen gleichmaessig mit,
   damit kein einzelner Block leer bleibt. Der Inhalt in den Karten bleibt oben. */
@media (min-width:981px) {
  /* Seit 26.10.2026: links Lerngruppe, KI-Ampel und Hilfe, rechts die Etappen (im Code bleiben die Etappen zuerst) */
  .raster { align-items:stretch; grid-template-columns:340px minmax(0,1fr); }
  .raster > .seite { grid-column:1; grid-row:1; }
  .raster > div:first-child { grid-column:2; grid-row:1; }
  .raster > div:first-child > .teil-titel { margin-bottom:4px; }
  .raster > div:first-child, .raster > .seite { display:flex; flex-direction:column; gap:14px; min-width:0; }
  .raster > div:first-child > .et-liste { flex:1 1 auto; display:flex; flex-direction:column; gap:14px; }
  .raster .et-liste > li, .raster > .seite > .karte { flex:1 1 auto; }
  /* Inhalt der Kachel vertikal mittig im freien Raum ueber dem Knopf, statt oben zu kleben (seit 26.10.2026) */
  .et { align-content:center; }
  /* «Zur Etappe» / «Nochmals ansehen» bleibt unten rechts in der Karte, auch wenn sie mitwaechst */
  .et.mit-fuss { padding-bottom:84px; }
  .et.mit-fuss .fuss { position:absolute; right:26px; bottom:22px; margin-top:0; }
}
.et-liste { display:grid; gap:14px; }
.et { padding:24px 26px 22px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:6px 18px; align-items:start; }
.et.is-current { border-color:color-mix(in srgb, var(--bf) 45%, transparent); box-shadow:var(--schatten-hover); }
.et .num { grid-row:1 / span 3; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font: 800 18px/1 var(--font-titel); border:1.5px solid var(--linie); color:var(--text-2); background:#fff; }
.et.is-current .num { background:var(--bf); border-color:var(--bf); color:#fff; }
.et.is-done .num { background:var(--bf-tint2); color:var(--bf-ab); border-color:transparent; }
.et.is-locked .num { background:var(--karte-hell); color:var(--grau); }
.et .num .ms { font-size:22px; }
.et h3 { font-size:21px; padding-top:7px; }
.et.is-locked h3 { color:var(--text-2); }
.et h3 a { color:inherit; text-decoration:none; }
.et h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--r-m); }
.et .label { justify-self:end; align-self:start; margin-top:6px; }
.etappe-label.still { background:#fff; border-color:var(--linie); color:var(--grau); }
.etappe-label.fertig { background:var(--bf-tint2); border-color:transparent; color:var(--bf-ab); }
.et .txt { grid-column:2 / span 2; font-size:16px; color:var(--grau); margin-top:2px; max-width:62ch; }
.ablauf { grid-column:2 / span 2; margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--text-2); }
.ablauf span { display:inline-flex; align-items:center; gap:6px; }
.ablauf .ms { font-size:18px; color:var(--bf); }
.et.is-locked .ablauf .ms { color:var(--grau); }
.treff { grid-column:2 / span 2; margin-top:12px; padding-top:12px; border-top:1px solid var(--linie-soft); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; position:relative; z-index:1; }
.treff .w { display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--tinte); }
.treff .w .ms { color:var(--bf); font-size:19px; }
.treff .w b { font-weight:700; }
.treff .w .ort { color:var(--grau); }
.treff .w.leer { color:var(--grau); }
.treff .w.leer .ms { color:var(--grau); }
.treff .a { display:inline-flex; gap:14px; align-items:center; }
.treff .link { font-size:14.5px; }
.treff .vorbei { font-size:14px; color:var(--grau); }
.et.is-done .treff { display:none; }
.et .fuss { grid-column:2 / span 2; margin-top:12px; display:flex; justify-content:flex-end; }
.et .fuss .link { position:relative; z-index:1; font-size:15px; }
/* «Zur Etappe» / «Nochmals ansehen» als echter Knopf, liegt ueber dem Link der ganzen Kachel */
.et .fuss .et-btn { position:relative; z-index:1; padding:12px 20px; font-size:15.5px; gap:8px; }
.et .fuss .btn-o.et-btn { background:#fff; }
.et.is-done .fuss .btn-o.et-btn { color:var(--text-2); border-color:var(--linie); }
.et.is-done .fuss .link { color:var(--grau); }
.et .fertig-am { grid-column:2 / span 2; margin-top:10px; font-size:14.5px; color:var(--grau); display:inline-flex; gap:6px; align-items:center; }
.et .fertig-am .ms { font-size:18px; color:var(--bf); }
@media (max-width:640px) {
  .et { grid-template-columns:40px minmax(0,1fr); padding:18px 18px 16px; gap:4px 12px;}
  .et .num { width:40px; height:40px; font-size:16px; grid-row:1 / span 2;}
  .et h3 { font-size:19px; padding-top:6px;}
  .et .label { grid-column:2; grid-row:2; justify-self:start; margin-top:4px;}
  .et .txt, .et .ablauf, .et .treff, .et .fuss, .et .fertig-am { grid-column:1 / span 2;}
  .et .txt { margin-top:10px;}
  .et.is-locked .txt, .et.is-locked .ablauf { display:none;}
  .et.is-locked .treff { border-top:0; padding-top:0; margin-top:8px;}
}
.seite { display:grid; gap:14px; }
@media (min-width:981px) {
  .seite.klebt-oben { position:sticky; top:96px;}
  .seite.klebt-unten { position:sticky; bottom:24px; align-self:end;}
}
.ampel-l { display:grid; gap:8px; margin-top:12px; }
.ampel-l li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:10px; align-items:start; font-size:14.5px; line-height:1.45; color:var(--text-2); }
.ampel-l .dot { width:14px; height:14px; border-radius:50%; margin-top:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.ampel-l .gr .dot { background:#2E9E4F; }
.ampel-l .ge .dot { background:#E5A50A; }
.ampel-l .ro .dot { background:var(--fehler); }
.ampel-l b { color:var(--tinte); font-weight:700; }
.ampel .link { margin-top:12px; font-size:15px; }
.seite .karte { padding:24px 24px 22px; }
.seite h2 { font-size:19px; line-height:1.25; }
.seite .karte p { font-size:var(--klein); color:var(--text-2); }
.gruppe .kopfz { display:flex; align-items:center; gap:12px; }
.gruppe .gi { flex:none; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--bf); display:grid; place-items:center; }
.gruppe .gname { font: 600 13.5px/1.3 var(--font-text); color:var(--bf); margin-top:2px; }
.gruppe h3 { font: 700 13.5px/1.3 var(--font-text); color:var(--grau); text-transform:none; margin:16px 0 8px; }
.gruppe .zeile { display:flex; align-items:flex-start; gap:12px; margin-top:14px; font-size:14.5px; line-height:1.4; color:var(--text-2); }
.gruppe .zeile .ms { color:var(--bf); flex:none; font-size:20px; margin-top:1px; }
.gruppe .zeile + .zeile { margin-top:8px; }
.gruppe .zeile b { color:var(--tinte); font-weight:600; }
.gruppe .zeile .du { color:var(--tinte); font-weight:600; }
.treffen { width:100%; border-collapse:collapse; margin-top:14px; background:#fff; border-radius:var(--r-s); overflow:hidden; }
.treffen td { padding:11px 12px; font-size:14px; border-top:1px solid var(--linie-soft); vertical-align:middle; }
.treffen tr:first-child td { border-top:0; }
.treffen td.e { width:1%; font-weight:600; color:var(--tinte); white-space:nowrap; }
.treffen td.d { color:var(--text-2); white-space:nowrap; }
.treffen td.d > span { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.treffen tr.vorbei td { color:var(--grau); }
.treffen tr.vorbei td.e { color:var(--grau); font-weight:500; }
.treffen tr.vorbei .ms { color:var(--bf); font-size:18px; }
.treffen tr.naechst td { background:var(--bf-hell); }
.treffen tr.naechst td.e { color:var(--bf); box-shadow:inset 3px 0 0 var(--bf); }
.treffen tr.naechst td.e small { display:block; font: 700 11px/1 var(--font-text); letter-spacing:.02em; margin-bottom:3px; }
.treffen tr.naechst td.d { color:var(--tinte); font-weight:600; }
.treffen tr.offen td.d { color:var(--grau); font-style:italic; }
.gruppe .link.mitte { justify-self:center; font-size:14.5px; }
.gruppe .acts { margin-top:16px; display:grid; gap:10px; }
.gruppe .btn-o, .gruppe .btn { justify-content:center; padding:13px 16px; font-size:15px; text-align:center; }
.gruppe .btn.klein { padding:14px 12px; font-size:14.5px; gap:8px; white-space:nowrap; }
.gruppe .stand { margin-top:12px; font-size:13px; color:var(--grau); }
.seite .lern-liste { margin-top:12px; }
.seite .lern-liste li { font-size:15.5px; }
.seite .link { margin-top:14px; font-size:15px; }
.hilfe p { margin-top:6px; }
.hilfe .textlink { display:inline-block; margin-top:8px; font-weight:600; }
.dialog { max-width:640px; }
.dialog .lead { font-size:16px; margin-top:6px; }
.plan { display:grid; gap:12px; margin-top:18px; }
.plan .zeile { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr); gap:10px; align-items:end; padding:12px 14px; border:1px solid var(--linie); border-radius:var(--r-s); }
.plan .zeile .et-t { grid-column:1 / span 3; font: 700 15px/1.3 var(--font-titel); }
.plan .zeile .et-t span { font-weight:500; color:var(--grau); font-family:var(--font-text); }
.plan label { display:block; font: 600 13px/1.3 var(--font-text); color:var(--grau); margin-bottom:4px; }
.plan input { width:100%; min-height:44px; border:1px solid var(--linie); border-radius:8px; padding:9px 10px; font: 500 15px/1.3 var(--font-text); color:var(--tinte); background:#fff; }
.plan input:focus { outline:none; border-color:var(--bf); box-shadow:0 0 0 3px color-mix(in srgb, var(--bf) 18%, transparent); }
/* Uhrzeit: Stunde und Minuten (5er-Schritte) als zwei Auswahllisten */
.plan .zeit-wahl { display:flex; align-items:center; gap:4px; }
.plan .zeit-wahl span { font-weight:700; color:var(--grau); }
.plan select { flex:1 1 0; min-width:0; min-height:44px; border:1px solid var(--linie); border-radius:8px; padding:9px 6px; font: 500 15px/1.3 var(--font-text); color:var(--tinte); background:#fff; cursor:pointer; }
.plan select:focus { outline:none; border-color:var(--bf); box-shadow:0 0 0 3px color-mix(in srgb, var(--bf) 18%, transparent); }
.plan .ort { padding:12px 14px; border:1px solid var(--linie); border-radius:var(--r-s); }
.plan .ort input { margin-top:0; }
.dialog .acts { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; }
.dialog .acts .r { display:flex; gap:10px; }
.dialog .hinweis-box { margin-top:14px; font-size:14.5px; }
@media (max-width:560px) {
  .plan .zeile { grid-template-columns:1fr 1fr;}
  .plan .zeile .et-t { grid-column:1 / span 2;}
  .plan .zeile .zeit-f { grid-column:2;}
}
body.seite-dashboard .seitenfuss { margin-top:40px; padding:22px 0; }
/* ==========================================================================
   3) Ergaenzungen fuer die echten Seiten (nicht im Mockup)
   ========================================================================== */
/* Echter Videoplayer: gleiche Form wie die Video-Kachel im Mockup */
.video-wrap { position:relative; border-radius:var(--r-l); overflow:hidden; background:#001B17; aspect-ratio:16 / 9; border:1px solid var(--linie); background-clip:padding-box; }
/* Folien unter dem Video: zurueckhaltender Knopf rechts, in der Dokumentfarbe Orange */
.video-unter { display:flex; justify-content:flex-end; margin-top:12px; }
.folien-link { display:inline-flex; align-items:center; gap:7px; padding:8px 12px 8px 10px; border:1px solid var(--dok-line); border-radius:var(--r-btn); background:#fff; color:var(--dok); font: 600 14.5px/1 var(--font-text); text-decoration:none; transition:background var(--dauer), border-color var(--dauer); }
.folien-link:hover { background:var(--dok-tint); border-color:var(--dok); }
.folien-link:focus-visible { outline:3px solid var(--dok); outline-offset:2px; }
.folien-link .ms { font-size:18px; }
.folien-link .pdf { font: 700 11px/1 var(--font-text); letter-spacing:.04em; color:var(--dok-ab); background:var(--dok-tint); border-radius:4px; padding:3px 5px; margin-left:2px; }
.video-wrap video { display:block; width:100%; height:100%; object-fit:contain; background:#001B17; }
.video-wrap .dauer { position:absolute; right:16px; top:16px; background:#fff; border-radius:999px; padding:6px 12px; font: 600 13px/1 var(--font-text); color:var(--tinte); pointer-events:none; }
/* Startbild vor dem Abspielen: ruhige Kachel (wie im Mockup) mit Play-Knopf in der Mitte, deckt den Player ganz ab */
.video-wrap .video.start { position:absolute; inset:0; aspect-ratio:auto; border-radius:0; font:inherit; color:inherit; text-align:left; }
.video-wrap .video.start:focus-visible { outline:3px solid var(--bf); outline-offset:-3px; }
.video-wrap .video.start .dauer { top:auto; bottom:16px; }
/* Video noch nicht da: die Kachel bleibt, aber ohne Play */
.video.folgt { cursor:default; }
.video.folgt .play { background:#fff; color:var(--bf); box-shadow:none; }
.video.folgt .play .ms { font-size:32px; }
/* Ablauf des Treffens: Zeit rechts */
.lern-liste li > div { display:grid; gap:2px; }
.lern-liste li .z { display:block; font: 600 13px/1.3 var(--font-text); color:var(--grau); margin-top:2px; }
/* Hinweis zum Treffen («Heute ist alles gruen») */
.heute-box { margin-top:14px; padding:12px 14px; border-radius:var(--r-s); background:var(--bf-hell); border:1px solid var(--bf-tint2); font-size:15px; color:var(--text-2); display:flex; gap:10px; align-items:flex-start; }
.heute-box .ms { color:var(--bf); flex:none; font-size:19px; }
/* Dokument-Kachel als externer Link */
.dok .tile.link { background:var(--bf-tint); color:var(--bf); }
/* Platzhalter-Seite (Inhalt folgt) */
.platzhalter-box { margin-top:28px; padding:28px; border:1px dashed var(--linie); border-radius:var(--r-l); background:var(--karte-hell); }
.platzhalter-box h2 { font-size:var(--h2-s); }
.platzhalter-box p { margin-top:10px; color:var(--text-2); max-width:46em; }
/* Fehlertext im Bewertungsfenster */
.abschluss-dlg .fehler { margin-top:10px; min-height:1.2em; }
/* Abschluss-Button beschaeftigt */
.btn[disabled], .btn-o[disabled] { opacity:.6; cursor:wait; }

/* ==========================================================================
   4) Einstieg: Login, Erstanmeldung, Pfadwahl, Reset, Aktivierung, Startseite
   ========================================================================== */
body.seite-einstieg { padding-top:0; background:var(--eis-hell); min-height:100vh; }
.einstieg { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.einstieg-kopf { display:flex; align-items:center; justify-content:center; gap:14px; padding:34px var(--gut) 10px; }
.einstieg-kopf img { height:60px; width:auto; }
.einstieg-kopf .mn { font: 800 22px/1 var(--font-titel); letter-spacing:-.01em; color:var(--tinte); }
.einstieg-main { display:grid; place-items:center; padding:8px var(--gut) 40px; }
.einstieg.ohne-kopf { grid-template-rows:1fr auto; }   /* Login, Passwort setzen, Aktivieren, Reset: ohne Logo und Wortmarke (Entscheid 27.10.2026) */
.einstieg.ohne-kopf .einstieg-main { padding-top:48px; }
.einstieg-karte { width:100%; max-width:480px; background:#fff; border:1px solid var(--linie); border-radius:var(--r-l); padding:36px 34px 32px; box-shadow:var(--schatten-schwebend); }
.einstieg-karte.breit { max-width:1100px; }
.einstieg-karte .welle { font: 700 12.5px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--grau); }
.einstieg-karte h1 { font-size:clamp(26px, 3vw, 32px); margin-top:10px; }
.einstieg-karte .lead { margin-top:10px; font-size:16px; }
.einstieg .formular { grid-template-columns:1fr; margin-top:22px; }
.einstieg .formular input { min-height:52px; }
.einstieg .formular .f-fuss { margin-top:4px; }
.einstieg .btn { width:100%; justify-content:center; }
.pw-feld { position:relative; }
.pw-feld input { padding-right:50px; }
.pw-feld button { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; display:grid; place-items:center; border:0; background:transparent; border-radius:8px; color:var(--grau); cursor:pointer; }
.pw-feld button:hover { background:var(--eis); color:var(--petrol-text); }
.pw-feld button .ms { font-size:21px; }
.meldung { display:none; margin-top:18px; padding:12px 14px; border-radius:var(--r-s); font-size:15px; line-height:1.5; }
.meldung.show { display:block; }
.meldung.info { background:var(--eis); color:var(--petrol-text); border:1px solid var(--eis-tief); }
.meldung.fehler-box { background:#FDECEA; color:var(--fehler); border:1px solid #F0A898; }
.meldung.ok { background:var(--change-tint); color:var(--change-ab); border:1px solid var(--change-tint2); }
.pfad-streifen { display:flex; height:5px; border-radius:999px; overflow:hidden; margin-bottom:22px; }
.pfad-streifen span { flex:1; }
.pfad-streifen .s1 { background:var(--change); } .pfad-streifen .s2 { background:var(--leadership); } .pfad-streifen .s3 { background:var(--culture); }
.einstieg-links { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; font-size:14.5px; }
.einstieg-links a { color:var(--text-2); text-decoration:underline; text-underline-offset:3px; }
.einstieg-links a:hover { color:var(--petrol-text); }
.einstieg-fuss { text-align:center; font-size:14px; color:var(--grau); padding:22px var(--gut); }
.einstieg-fuss a { color:var(--grau); }
.pw-regeln { margin-top:10px; font-size:13.5px; color:var(--grau); line-height:1.5; }
.pw-regeln .ok { color:var(--change-ab); font-weight:600; }
/* Pfadwahl und Startseite: drei Pfadkarten */
.pfad-karten { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--karten-gap); margin-top:28px; }
.pfad-karte { display:flex; flex-direction:column; border:1px solid var(--linie); border-top:5px solid var(--bf); border-radius:var(--r-m); padding:26px 24px 24px; background:#fff; text-decoration:none; color:inherit; }
.pfad-karte .ms.gross { font-size:40px; color:var(--bf); }
.pfad-karte .label { margin-top:10px; align-self:flex-start; }
.pfad-karte h2 { font-size:24px; margin-top:12px; }
.pfad-karte .claim { margin-top:6px; font: 600 16px/1.4 var(--font-text); color:var(--tinte); }
.pfad-karte .fuer { margin-top:4px; font-size:15px; color:var(--grau); }
.pfad-karte .lernst { margin-top:16px; font: 700 12.5px/1 var(--font-text); letter-spacing:.05em; text-transform:uppercase; color:var(--bf); }
.pfad-karte .punkte { margin-top:10px; }
.pfad-karte .punkte li::before { background:var(--bf); }
.pfad-karte .punkte { flex:1; }
.pfad-karte .btn { margin-top:22px; }
@media (hover:hover) { .pfad-karte:hover { border-color:color-mix(in srgb, var(--bf) 42%, transparent); box-shadow:var(--schatten-hover); } }
@media (max-width:900px) { .pfad-karten { grid-template-columns:1fr; } .einstieg-karte.breit { padding:28px 22px; } }
@media (max-width:640px) { .einstieg-karte { padding:28px 22px 26px; } .einstieg-kopf { padding-top:24px; } }
/* Bestaetigungsdialog Pfadwahl */
.dialog.klein { max-width:460px; }
/* Zentrierter Hinweis (PortalShell.hinweis): Symbol, Titel und Text mittig */
.hinweis-dlg { text-align:center; padding-top:34px; }
.hinweis-dlg .gi { display:inline-flex; width:52px; height:52px; border-radius:50%; align-items:center; justify-content:center; background:var(--bf-hell, var(--karte-hell)); color:var(--bf, var(--petrol)); margin-bottom:12px; }
.hinweis-dlg .gi .ms { font-size:28px; }
.hinweis-dlg h2 { font-size:22px; }
.hinweis-dlg .lead { font-size:16.5px; line-height:1.55; margin-top:4px; }
.hinweis-dlg .acts { justify-content:center; margin-top:20px; }

/* ==========================================================================
   5) Hilfeseiten (Lernreise, KI-Ampel): ruhige Textseiten
   ========================================================================== */
.hilfe-seite { max-width:860px; margin:0 auto; padding:40px max(var(--gut), env(safe-area-inset-left, 0px)) 72px; }
.hilfe-seite .kopf-h h1 { font-size:var(--h1-detail); }
.hilfe-seite .kopf-h .lead { margin-top:14px; max-width:46em; }
.hilfe-seite .zurueck { display:inline-flex; align-items:center; gap:6px; font: 600 15px/1 var(--font-text); color:var(--text-2); text-decoration:none; margin-bottom:22px; }
.hilfe-seite .zurueck:hover { color:var(--bf); }
.hilfe-seite .zurueck .ms { font-size:18px; }
.hilfe-seite section.block { margin-top:48px; padding-top:40px; border-top:1px solid var(--linie); }
.hilfe-seite section.block > h2 { font-size:var(--h2-s); }
.hilfe-seite section.block > p { margin-top:14px; font-size:17px; line-height:1.65; color:var(--text-2); max-width:46em; }
.hilfe-seite .schritte-drei { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:22px; }
.hilfe-seite .schritte-drei .karte { padding:24px 22px 22px; }
.hilfe-seite .schritte-drei .k { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--bf); color:#fff; font: 800 15px/1 var(--font-titel); }
.hilfe-seite .schritte-drei h3 { font-size:19px; margin-top:14px; }
.hilfe-seite .schritte-drei p { margin-top:8px; font-size:15.5px; line-height:1.55; color:var(--text-2); }
.hilfe-seite .schritte-drei .dauer { margin-top:12px; font: 600 13.5px/1 var(--font-text); color:var(--grau); }
.hilfe-seite .pfade-drei { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:22px; }
.hilfe-seite .pfade-drei .karte { padding:24px 22px 22px; border-top:4px solid var(--bf); }
.hilfe-seite .pfade-drei h3 { font-size:20px; }
.hilfe-seite .pfade-drei .fuer { margin-top:4px; font-size:14.5px; color:var(--grau); }
.hilfe-seite .pfade-drei ol { margin-top:14px; display:grid; gap:8px; padding:0; list-style:none; }
.hilfe-seite .pfade-drei ol li { display:flex; gap:10px; font-size:15px; line-height:1.4; color:var(--text-2); }
.hilfe-seite .pfade-drei ol li .n { flex:none; width:22px; height:22px; border-radius:50%; background:var(--bf-tint); color:var(--bf); font: 700 12px/22px var(--font-titel); text-align:center; }
.hilfe-seite .termine { margin-top:18px; }
.ampel-gross { display:grid; gap:14px; margin-top:22px; }
.ampel-gross .zeile { display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:start; padding:20px 22px; border:1px solid var(--linie); border-radius:var(--r-m); background:#fff; }
.ampel-gross .dot { width:40px; height:40px; border-radius:50%; margin-top:2px; }
.ampel-gross .gr .dot { background:#2A9068; } .ampel-gross .ge .dot { background:#E0A000; } .ampel-gross .ro .dot { background:#C8362B; }
.ampel-gross h3 { font-size:20px; }
.ampel-gross p { margin-top:6px; font-size:16px; line-height:1.55; color:var(--text-2); }
.ampel-gross .regel { margin-top:8px; font: 700 15px/1.4 var(--font-text); color:var(--tinte); }
.ampel-gross .bsp { margin-top:8px; font-size:14.5px; color:var(--grau); }
.frage-box { margin-top:22px; padding:22px 24px; border-radius:var(--r-m); background:var(--bf-tint); font: 700 20px/1.35 var(--font-titel); color:var(--tinte); }
.frage-box small { display:block; margin-top:8px; font: 400 15px/1.5 var(--font-text); color:var(--text-2); }
@media (max-width:760px) { .hilfe-seite .schritte-drei, .hilfe-seite .pfade-drei { grid-template-columns:1fr; } }

/* ==========================================================================
   6  Abschlussseite (pfadN-abschluss.html, assets/abschluss.js)
   ========================================================================== */
.abschluss-seite { padding-top:40px; padding-bottom:72px; }
.ab-hero { text-align:center; padding:36px 0 10px; }
.ab-hero .ab-kreis { display:grid; place-items:center; width:84px; height:84px; margin:0 auto 22px; border-radius:50%; background:var(--bf-tint); color:var(--bf); }
.ab-hero .ab-kreis .ms { font-size:42px; }
.ab-hero .etappe-label { margin:0 auto; }
.ab-hero h1 { margin-top:18px; font-size:var(--h1-detail); }
.ab-hero .lead { margin:14px auto 0; max-width:40em; }
.ab-hero .ab-rueckblick { margin-top:16px; font: 600 15px/1.5 var(--font-text); color:var(--grau); }
.etappe-label.fertig { border-color:var(--bf); background:var(--bf-tint); color:var(--bf); }
.ab-karte { margin-top:28px; padding:30px 32px 28px; }
.ab-karte .kopfz { display:flex; align-items:center; gap:14px; }
.ab-karte .gi { flex:none; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--bf); display:grid; place-items:center; border:1px solid var(--linie); }
.ab-karte.flaeche .gi { border-color:transparent; }
.ab-karte .gi .ms { font-size:24px; }
.ab-karte .k { font: 700 12.5px/1 var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--grau); }
.ab-karte h2 { margin-top:4px; font-size:var(--h2-s); }
.ab-karte > .txt { margin-top:16px; font-size:16.5px; line-height:1.6; color:var(--text-2); max-width:46em; }
.ab-karte .acts { margin-top:20px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; }
.ab-karte .klein-t { font-size:14px; color:var(--grau); }
.ab-karte .fehler { margin-top:12px; min-height:0; }
.ab-karte .fehler:empty { display:none; }
.ab-klein { margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--grau); }
.ab-klein a { color:var(--petrol-text); text-decoration:underline; text-underline-offset:3px; }
.ab-ok { margin-top:16px; }
.ab-aktionen { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; }
.ab-aktionen a { font-weight:600; color:var(--petrol-text); text-decoration:underline; text-underline-offset:3px; }
.wl-frage { grid-column:1 / -1; font: 700 16px/1.3 var(--font-text); color:var(--tinte); }
.wahl { grid-column:1 / -1; display:grid; gap:8px; }
.wahl label { display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--linie); border-radius:var(--r-s); background:#fff; font: 500 15.5px/1.35 var(--font-text); color:var(--tinte); cursor:pointer; }
.wahl label:has(input:checked) { border-color:var(--bf); background:var(--bf-tint); }
.wahl input { flex:none; width:18px; height:18px; min-height:0; margin:0; accent-color:var(--bf); }
.fehlt-liste { margin-top:18px; display:grid; gap:10px; }
.fehlt { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--linie); border-radius:var(--r-m); background:#fff; text-decoration:none; color:inherit; transition:border-color var(--dauer) var(--ease), transform var(--dauer) var(--ease); }
a.fehlt:hover { border-color:var(--bf); transform:translateY(-1px); }
.fehlt.still { background:var(--eis-hell); color:var(--grau); }
.fehlt .num { flex:none; width:32px; height:32px; border-radius:50%; background:var(--bf-tint); color:var(--bf); font: 800 14px/32px var(--font-titel); text-align:center; }
.fehlt.still .num { background:#fff; color:var(--grau); border:1px solid var(--linie); }
.fehlt .t { flex:1; display:grid; gap:2px; font-size:14.5px; color:var(--grau); }
.fehlt .t b { font: 700 16px/1.3 var(--font-text); color:var(--tinte); }
.fehlt.still .t b { color:var(--text-2); }
.fehlt .ms { color:var(--bf); }
.ab-links { margin-top:28px; text-align:center; }
.c-dot { position:fixed; z-index:200; pointer-events:none; top:-20px; }
@keyframes fall { to { transform:translateY(110vh) rotate(540deg); opacity:.2; } }
@media (max-width:640px) {
  .ab-karte { padding:24px 20px 22px; }
  .ab-karte .acts .btn { width:100%; justify-content:center; }
  .ab-hero { padding-top:16px; }
}

/* ==========================================================================
   7  FAQ (faq.html)
   ========================================================================== */
.faq-themen { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.faq-themen a { display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border:1px solid var(--linie); border-radius:999px; background:#fff; font: 600 14px/1 var(--font-text); color:var(--text-2); text-decoration:none; }
.faq-themen a:hover { border-color:var(--bf); color:var(--bf); }
.faq-themen a .ms { font-size:17px; }
.faq-liste { margin-top:18px; display:grid; gap:10px; }
.faq-liste details { border:1px solid var(--linie); border-radius:var(--r-m); background:#fff; overflow:hidden; }
.faq-liste details[open] { border-color:var(--bf); }
.faq-liste summary { list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:12px; padding:16px 18px; font: 700 16.5px/1.35 var(--font-text); color:var(--tinte); }
.faq-liste summary::-webkit-details-marker { display:none; }
.faq-liste summary .ms { flex:none; color:var(--grau); transition:transform var(--dauer) var(--ease); margin-top:-1px; }
.faq-liste details[open] summary .ms { transform:rotate(180deg); color:var(--bf); }
.faq-liste .a { padding:0 18px 18px 54px; font-size:15.5px; line-height:1.6; color:var(--text-2); }
.faq-liste .a p + p { margin-top:10px; }
.faq-liste .a a { color:var(--petrol-text); text-decoration:underline; text-underline-offset:3px; }
.faq-liste .a ul { margin:8px 0 0 18px; display:grid; gap:4px; }
.faq-liste .a ul + p { margin-top:10px; }
.faq-liste .a .gr { color:#2A9068; font-weight:700; } .faq-liste .a .ge { color:#B37E00; font-weight:700; } .faq-liste .a .ro { color:#C8362B; font-weight:700; }
.faq-kontakt { margin-top:40px; padding:24px 26px; border-radius:var(--r-m); background:var(--eis-hell); text-align:center; }
.faq-kontakt p { color:var(--text-2); }
.faq-kontakt a { display:inline-flex; align-items:center; gap:8px; margin-top:8px; font: 700 17px/1 var(--font-text); color:var(--petrol-text); text-decoration:none; }
.faq-kontakt a:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:640px) { .faq-liste .a { padding-left:18px; } }

/* ==========================================================================
   8  Admin-Dashboard (admin-dashboard.html, assets/admin.js)
   ========================================================================== */
.seite-admin { --p1:#1F7A55; --p1l:#E6F6EE; --p2:#0D7491; --p2l:#E1F8FF; --p3:#634991; --p3l:#F3EBFD; --warn:#B37E00; --warnl:#FFF4D6; --rot:#C8362B; --rotl:#FDECEA; }
.admin-sprung { display:block; }
.admin-sprung .in { height:48px; }
.admin { max-width:var(--breite); padding-top:36px; padding-bottom:72px; }
.admin-kopf { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 24px; }
.admin-kopf h1 { margin-top:14px; font-size:var(--h1-detail); }
.admin-kopf .stand { margin-top:8px; font-size:15px; color:var(--grau); }
.admin-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.admin-tools .btn-o { padding:10px 16px; font-size:15px; }
.welle-schalter { display:inline-flex; border:1px solid var(--linie); border-radius:999px; padding:3px; background:#fff; }
.welle-schalter button { border:0; background:transparent; padding:8px 16px; border-radius:999px; font: 600 14.5px/1 var(--font-text); color:var(--text-2); cursor:pointer; }
.welle-schalter button.active { background:var(--tinte); color:#fff; }
.admin-laden { margin-top:60px; text-align:center; font-size:16px; color:var(--grau); display:flex; flex-direction:column; align-items:center; gap:10px; }
.admin-laden .ms { font-size:40px; color:var(--bf); }
.admin-laden[hidden], .admin [hidden] { display:none !important; }
.admin-block { margin-top:48px; padding-top:36px; border-top:1px solid var(--linie); scroll-margin-top:130px; }
.admin-block > h2, .admin-block .zeile-kopf h2 { font-size:var(--h2-s); }
.admin-block h3 { font-size:20px; }
.admin-block .erkl { margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--text-2); max-width:60em; }
.admin-block .erkl code { font-size:13px; background:var(--eis-hell); padding:1px 6px; border-radius:6px; }
.zeile-kopf { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 20px; }
.unterblock { margin-top:36px; padding-top:28px; border-top:1px dashed var(--linie); }
.werkzeuge { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.werkzeuge select, .werkzeuge .suche { height:40px; border:1px solid var(--linie); border-radius:999px; background:#fff; font: 500 14.5px/1 var(--font-text); color:var(--tinte); }
.werkzeuge select { padding:0 34px 0 14px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23536360' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.werkzeuge .suche { display:inline-flex; align-items:center; gap:6px; padding:0 14px; min-width:240px; }
.werkzeuge .suche .ms { font-size:18px; color:var(--grau); }
.werkzeuge .suche input { border:0; outline:0; background:transparent; flex:1; font: 500 14.5px/1 var(--font-text); color:var(--tinte); min-width:0; }
.werkzeuge .btn-o.klein, .gp-tools .btn-o.klein, .btn-o.klein { padding:9px 14px; font-size:14px; height:40px; }
.btn.klein.ohne-pfeil { height:40px; padding:0 16px; font-size:14.5px; }
.haken { display:inline-flex; align-items:center; gap:8px; font: 500 14px/1.3 var(--font-text); color:var(--text-2); cursor:pointer; }
.haken input { width:16px; height:16px; margin:0; accent-color:var(--petrol); }
.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:18px; }
.tabs button { border:1px solid var(--linie); background:#fff; border-radius:999px; padding:8px 14px; font: 600 14px/1 var(--font-text); color:var(--text-2); cursor:pointer; }
.tabs button:hover { border-color:var(--tinte); color:var(--tinte); }
.tabs button.active { background:var(--tinte); border-color:var(--tinte); color:#fff; }
.tabs .tabs-info { margin-left:auto; font-size:13.5px; color:var(--grau); }
.tabs .chip { display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:7px 10px 7px 12px; border-radius:999px; background:var(--warnl); color:var(--warn); font: 700 13px/1 var(--font-text); }
.tabs .chip button { border:0; background:transparent; padding:0; color:inherit; line-height:0; cursor:pointer; }
.tabs .chip .ms { font-size:15px; }
.admin .tabelle { margin-top:16px; background:#fff; }
.admin .tabelle th.mitte, .admin .tabelle td.mitte { text-align:center; }
.admin .tabelle th.rechts, .admin .tabelle td.rechts { text-align:right; }
.admin .tabelle td { font-size:14.5px; }
.admin .tabelle td .klein { display:block; font-size:12.5px; color:var(--grau); margin-top:2px; }
.admin .tabelle tr.leer td { text-align:center; padding:26px; color:var(--grau); }
.admin .tabelle tr.klick { cursor:pointer; }
.admin .tabelle tr.klick:hover td { background:var(--eis-hell); }
.admin .tabelle tr.detail td { background:var(--eis-hell); padding:6px 14px 14px 44px; }
.admin .tabelle table.innen { font-size:13.5px; }
.admin .tabelle table.innen td { padding:7px 10px 7px 0; border-bottom:1px solid var(--linie-soft); }
.admin .tabelle tr.blass td { color:var(--grau); }
.tabelle-fuss { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; font-size:13.5px; color:var(--grau); }
.pager { display:flex; align-items:center; gap:8px; }
.pager button { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--linie); background:#fff; border-radius:999px; padding:6px 12px; font: 600 13.5px/1 var(--font-text); color:var(--text-2); cursor:pointer; }
.pager button:disabled { opacity:.4; cursor:default; }
.pager .ms { font-size:16px; }
.pill { display:inline-block; padding:4px 10px; border-radius:999px; font: 700 12.5px/1 var(--font-text); white-space:nowrap; }
.pill.p1 { background:var(--p1l); color:var(--p1); } .pill.p2 { background:var(--p2l); color:var(--p2); } .pill.p3 { background:var(--p3l); color:var(--p3); }
.pill.aktiv { background:var(--p1l); color:var(--p1); } .pill.eingeladen { background:var(--warnl); color:var(--warn); } .pill.deaktiviert, .pill.grau { background:var(--eis-hell); color:var(--grau); }
.pill.offen { background:var(--warnl); color:var(--warn); } .pill.versendet { background:var(--p1l); color:var(--p1); }
.pill .ms { font-size:13px; vertical-align:-2px; margin-right:3px; }
.kpi-raster { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:12px; margin-top:22px; }
.kpi-raster.vier { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.kpi-raster.drei { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.kpi { background:#fff; border:1px solid var(--linie); border-radius:var(--r-m); padding:18px 18px 16px; min-width:0; }
.kpi .lab { font: 700 12px/1.2 var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--grau); }
.kpi .wert { margin-top:10px; font: 800 30px/1 var(--font-titel); color:var(--tinte); letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kpi .wert.p1 { color:var(--p1); } .kpi .wert.p2 { color:var(--p2); } .kpi .wert.p3 { color:var(--p3); } .kpi .wert.warn { color:var(--rot); }
.kpi .unter { margin-top:8px; font-size:13px; line-height:1.4; color:var(--grau); }
.kpi.klick { cursor:pointer; } .kpi.klick:hover { border-color:var(--tinte); }
.trend { display:inline-block; padding:3px 8px; border-radius:999px; font: 700 12px/1 var(--font-text); }
.trend.up { background:var(--p1l); color:var(--p1); } .trend.down { background:var(--rotl); color:var(--rot); } .trend.flat { background:var(--eis-hell); color:var(--grau); }
.grafik-raster { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.karte.grafik { padding:18px 20px 16px; display:flex; flex-direction:column; min-height:240px; }
.grafik .lab { font: 700 12px/1.2 var(--font-text); letter-spacing:.06em; text-transform:uppercase; color:var(--grau); }
.grafik-kopf { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.wochen-nav { display:flex; align-items:center; gap:4px; font: 700 12.5px/1 var(--font-text); color:var(--text-2); }
.wochen-nav button { border:1px solid var(--linie); background:#fff; border-radius:999px; width:26px; height:26px; display:grid; place-items:center; cursor:pointer; color:var(--text-2); }
.wochen-nav button .ms { font-size:16px; } .wochen-nav button[hidden] { visibility:hidden; display:grid !important; }
.wochen-nav span { min-width:92px; text-align:center; }
#g-status { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.donut-legende { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:13px; color:var(--text-2); }
.donut-legende i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.donut-legende b { color:var(--tinte); margin-left:4px; }
.saeulen { flex:1; display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:14px; }
.saeulen .s { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.saeulen .s .v { font: 700 12px/1 var(--font-text); color:var(--text-2); margin-bottom:4px; }
.saeulen .s .bar { width:70%; max-width:26px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:4px 4px 0 0; overflow:hidden; min-height:2px; }
.saeulen-labels { display:flex; gap:6px; margin-top:6px; }
.saeulen-labels span { flex:1; text-align:center; font-size:11px; line-height:1.25; color:var(--grau); }
.legende { display:flex; gap:12px; justify-content:center; margin-top:8px; font-size:11.5px; color:var(--grau); }
.legende i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; }
.pfad-balken { margin-top:14px; }
.pfad-balken .pf { margin-bottom:12px; }
.pfad-balken .pf .k { display:flex; justify-content:space-between; align-items:center; font: 700 13px/1 var(--font-text); margin-bottom:6px; }
.pfad-balken .pf .k small { font-weight:700; font-size:11px; padding:3px 8px; border-radius:999px; }
.pfad-balken .z { display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:12px; color:var(--text-2); }
.pfad-balken .z span:first-child { width:56px; flex:none; }
.pfad-balken .z .bar { flex:1; height:8px; border-radius:4px; overflow:hidden; }
.pfad-balken .z .bar i { display:block; height:100%; }
.pfad-balken .z b { min-width:84px; text-align:right; font-size:12px; color:var(--tinte); white-space:nowrap; }
.heat td .zelle { display:inline-block; min-width:64px; padding:12px 14px; border-radius:var(--r-s); font: 800 18px/1 var(--font-titel); text-align:center; }
.heat td .zelle.klick { cursor:pointer; } .heat td .zelle.klick:hover { outline:2px solid currentColor; outline-offset:1px; }
.heat td .zelle.leer { opacity:.45; }
.heat td .zelle.fertig { color:#fff; }
.heat th.fertig, .heat td.fertig { border-left:1px solid var(--linie); }
.heat td, .heat th { text-align:center; } .heat td:first-child, .heat th:first-child { text-align:left; }
.ef-raster { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:18px; }
.ef-pfad { background:#fff; border:1px solid var(--linie); border-radius:var(--r-m); padding:16px 18px; border-top:4px solid var(--pc); }
.ef-pfad.p1 { --pc:var(--p1); --pl:var(--p1l); } .ef-pfad.p2 { --pc:var(--p2); --pl:var(--p2l); } .ef-pfad.p3 { --pc:var(--p3); --pl:var(--p3l); }
.ef-pfad .k { font: 700 13px/1 var(--font-text); color:var(--pc); }
.ef-pfad .et { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.ef-pfad .et .e { text-align:center; padding:12px 8px 10px; border-radius:var(--r-s); background:var(--eis-hell); }
.ef-pfad .et .e.aktiv { background:var(--pl); }
.ef-pfad .et .e .n { font: 600 11.5px/1 var(--font-text); color:var(--grau); }
.ef-pfad .et .e .avg { margin-top:6px; font: 800 20px/1 var(--font-titel); color:var(--tinte); }
.ef-pfad .et .e .avg .ms { font-size:16px; color:#E0A000; vertical-align:-2px; }
.ef-pfad .et .e .cnt { margin-top:4px; font-size:11px; color:var(--grau); }
.ef-pfad .et .e.leer .avg { color:var(--grau); font-size:16px; }
.ef-liste { margin-top:16px; display:grid; gap:8px; }
.ef-liste .eintrag { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:start; padding:12px 16px; background:#fff; border:1px solid var(--linie); border-radius:var(--r-m); font-size:14.5px; }
.ef-liste .eintrag .meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13px; color:var(--grau); }
.ef-liste .eintrag .meta b { color:var(--tinte); font-weight:600; }
.ef-liste .eintrag .text { color:var(--text-2); line-height:1.5; }
.ef-liste .eintrag .text.leer { color:var(--grau); font-style:italic; }
.ef-liste .leer-hinweis { padding:18px; text-align:center; color:var(--grau); font-size:14.5px; background:#fff; border:1px dashed var(--linie); border-radius:var(--r-m); }
.sterne-mini { display:inline-flex; gap:1px; white-space:nowrap; }
.sterne-mini .ms { font-size:15px; color:#E0A000; } .sterne-mini .ms.aus { color:#D7DDDB; }
.ef-pfad .et .e .cnt.zeit { display:flex; justify-content:center; align-items:center; gap:3px; color:var(--text-2); } .ef-pfad .et .e .cnt.zeit .ms { font-size:13px; }
.ef-liste .eintrag .meta .pill .ms { font-size:12px; vertical-align:-2px; margin-right:2px; }
/* Teilbewertungen je Etappe (Lernimpuls, Lerndossier, Einzelauftrag) */
.ef-pfad .et .e .teile { margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,27,23,.08); display:grid; gap:3px; }
.ef-pfad .et .e .teile span { display:flex; justify-content:space-between; gap:8px; font: 500 11.5px/1.2 var(--font-text); color:var(--text-2); }
.ef-pfad .et .e .teile span i { font-style:normal; color:var(--grau); }
.ef-pfad .et .e .teile span b { font-weight:700; color:var(--tinte); font-variant-numeric:tabular-nums; }
.ef-liste .eintrag .meta .teile-pill { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--eis-hell); color:var(--text-2); font: 500 12px/1.4 var(--font-text); white-space:nowrap; }
/* Bewertungen, die nicht in den Schnitt zählen (Admin- und Testkonten, zurückgenommene Abschlüsse) */
.ef-aus { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; padding:10px 14px; border-radius:var(--r-s); background:var(--eis-hell); color:var(--text-2); font-size:13.5px; line-height:1.45; }
.ef-aus > .ms { font-size:18px; color:var(--grau); }
.ef-aus > span:nth-child(2) { flex:1 1 320px; }
.ef-liste .eintrag.aus { background:var(--eis-hell); border-style:dashed; }
.ef-liste .eintrag.aus .sterne-mini { opacity:.55; }
.etappen-punkte { display:inline-flex; gap:4px; align-items:center; }
.etappen-punkte i { width:12px; height:12px; border-radius:50%; background:var(--linie); display:inline-block; }
.etappen-punkte i.d { background:var(--pc, var(--petrol)); }
.etappen-punkte.p1 { --pc:var(--p1); } .etappen-punkte.p2 { --pc:var(--p2); } .etappen-punkte.p3 { --pc:var(--p3); }
.etappen-punkte small { margin-left:4px; font-size:12px; color:var(--grau); }
.balken { display:inline-flex; align-items:center; gap:8px; }
.balken .bar { width:96px; height:8px; border-radius:4px; background:var(--eis-hell); overflow:hidden; }
.balken .bar i { display:block; height:100%; }
.balken small { font-size:12.5px; color:var(--grau); white-space:nowrap; }
.hinweis-box.ok { display:flex; align-items:center; gap:10px; margin-top:16px; background:var(--p1l); color:var(--p1); font-weight:600; }
.aufklapp { margin-top:16px; background:#fff; border:1px solid var(--linie); border-radius:var(--r-m); }
.aufklapp summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:14px 18px; font: 700 15px/1.3 var(--font-text); }
.aufklapp summary::-webkit-details-marker { display:none; }
.aufklapp summary .ms { color:var(--warn); }
.aufklapp .body { padding:0 18px 16px; }
.unbest-liste { display:grid; gap:8px; margin-top:12px; }
.unbest-liste .z { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--linie); border-radius:var(--r-s); font-size:14px; }
.unbest-liste .z .r { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--grau); }
.fb-raster { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:18px; }
.fb-karte { background:#fff; border:1px solid var(--linie); border-radius:var(--r-m); padding:16px 18px; border-top:4px solid var(--pc); }
.fb-karte.p1 { --pc:var(--p1); } .fb-karte.p2 { --pc:var(--p2); } .fb-karte.p3 { --pc:var(--p3); }
.fb-karte .karte-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.fb-karte .karte-kopf .k { font: 700 13px/1 var(--font-text); color:var(--pc); } .fb-karte .karte-kopf .n { margin-top:4px; font-size:12.5px; color:var(--grau); }
.fb-karte .nps { text-align:right; } .fb-karte .nps b { display:block; font: 800 26px/1 var(--font-titel); } .fb-karte .nps small { font: 700 10.5px/1 var(--font-text); letter-spacing:.06em; color:var(--grau); }
.fb-karte .dim { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-2); margin-top:7px; }
.fb-karte .dim span:first-child { width:120px; flex:none; }
.fb-karte .dim .bar { flex:1; height:7px; border-radius:4px; background:var(--eis-hell); overflow:hidden; } .fb-karte .dim .bar i { display:block; height:100%; background:var(--pc); }
.fb-karte .dim b { width:28px; text-align:right; color:var(--tinte); }
.btn-mini { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--linie); background:#fff; border-radius:999px; padding:6px 11px; font: 600 12.5px/1 var(--font-text); color:var(--text-2); cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn-mini:hover { border-color:var(--tinte); color:var(--tinte); }
.btn-mini.voll { background:var(--petrol-text); border-color:var(--petrol-text); color:#fff; }
.btn-mini .ms { font-size:14px; }
.btn-mini:disabled { opacity:.6; cursor:wait; }
/* Gruppen-Einteilung */
.gp-karte { margin-top:18px; padding:20px 22px; }
.gp-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.gp-pool-info { font-size:14px; color:var(--grau); }
#gp-result { margin-top:16px; }
#gp-result .gp-lead { font-size:14.5px; color:var(--text-2); }
.gp-bucket-kopf { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; margin-bottom:10px; }
.gp-bucket-kopf .pill { font-size:13px; padding:6px 12px; color:#fff; }
.gp-bucket-kopf .pill.p1 { background:var(--p1); } .gp-bucket-kopf .pill.p2 { background:var(--p2); } .gp-bucket-kopf .pill.p3 { background:var(--p3); }
.gp-bucket-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gp-ergaenzen { max-width:300px; height:32px; padding:0 28px 0 12px; border:1px solid var(--linie); border-radius:999px; background-color:#fff; font: 600 12.5px/1 var(--font-text); color:var(--text-2); cursor:pointer; }
.gp-abgleich { margin:0 0 14px; } .gp-abgleich .ms { font-size:18px; }
.gp-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.gp-gruppe { border:1px solid var(--linie); border-radius:var(--r-m); padding:12px; background:#fff; }
.gp-gruppe.bestaetigt { border-color:var(--p1); background:var(--p1l); }
.gp-gruppe.klein { border-style:dashed; }
.gp-gruppe.pool { border-style:dashed; background:var(--eis-hell); }
.gp-gruppe .karte-kopf { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.gp-gruppe .karte-kopf .l { display:flex; align-items:center; gap:6px; min-width:0; font: 700 14px/1.2 var(--font-text); }
.gp-gruppe .karte-kopf .l input { width:15px; height:15px; margin:0; accent-color:var(--petrol); cursor:pointer; }
.gp-gruppe .karte-kopf .l .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-gruppe .karte-kopf .r { display:flex; align-items:center; gap:4px; }
.gp-gruppe .karte-kopf .anz { font: 700 11px/1 var(--font-text); padding:4px 8px; border-radius:999px; color:#fff; background:var(--pc); }
.gp-gruppe.klein .kopf .anz { background:var(--linie); color:var(--text-2); }
.gp-gruppe .karte-kopf .loeschen { border:0; background:transparent; color:var(--grau); cursor:pointer; line-height:0; padding:2px; } .gp-gruppe .karte-kopf .loeschen:hover { color:var(--rot); }
.gp-gruppe .note { font-size:11.5px; margin-bottom:6px; } .gp-gruppe .note.ok { color:var(--p1); font-weight:700; } .gp-gruppe .note.warn { color:var(--rot); }
.gp-zone { min-height:44px; border-radius:var(--r-s); padding:2px; display:grid; gap:4px; }
.gp-zone.ziel { outline:2px dashed var(--petrol); outline-offset:1px; }
.gp-zone .leer { font-size:11.5px; color:var(--grau); font-style:italic; padding:8px 4px; }
.gp-chip { display:flex; align-items:center; gap:4px; font-size:12.5px; padding:5px 8px; border-radius:8px; background:var(--eis-hell); border:1px solid var(--linie); cursor:grab; }
.gp-chip.fest { cursor:default; background:#fff; }
.gp-chip .ms { font-size:14px; color:var(--grau); }
.gp-chip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-chip small { color:var(--grau); }
.gp-confirm { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:16px; padding-top:16px; border-top:1px solid var(--linie); }
.gp-confirm .gp-summary { font-size:13.5px; color:var(--grau); }
.gp-confirm .btn { margin-left:auto; }
.gp-dialog { max-width:760px; }
.gp-dialog .gp-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:12px; }
.gp-dialog .acts { justify-content:flex-end; }
.gp-dialog .acts:empty { display:none; }
.gp-dialog ul.mitglieder { font-size:13.5px; color:var(--text-2); display:grid; gap:4px; margin-top:6px; }
.gp-dialog .ergebnis { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.5; padding:6px 0; }
.gp-dialog .ergebnis .ms { font-size:24px; flex:none; }
.gp-dialog .ergebnis.ok .ms { color:var(--p1); } .gp-dialog .ergebnis.err .ms { color:var(--rot); }
@keyframes dreh { to { transform:rotate(360deg); } }
.dreh { display:inline-block; animation:dreh 1s linear infinite; }
@media (max-width:1100px) {
  .kpi-raster { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .grafik-raster, .ef-raster, .fb-raster, .gp-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .kpi-raster, .kpi-raster.vier, .kpi-raster.drei, .grafik-raster, .ef-raster, .fb-raster, .gp-grid, .gp-dialog .gp-grid { grid-template-columns:1fr 1fr; }
  .werkzeuge .suche { min-width:0; flex:1 1 100%; }
  .admin-block { scroll-margin-top:124px; }
}
@media (max-width:480px) {
  .kpi-raster, .kpi-raster.vier, .kpi-raster.drei, .grafik-raster, .ef-raster, .fb-raster, .gp-grid, .gp-dialog .gp-grid { grid-template-columns:1fr; }
  .ef-liste .eintrag { grid-template-columns:1fr; }
}

/* Sicherheitsnetz: Die Stylebook-Klasse .kopf ist die klebende Seitenkopfzeile. In Inhalten darf nichts kleben. */
.wrap .kopf, .hilfe-seite .kopf, .admin .kopf, .karte .kopf { position:static; z-index:auto; padding-inline:0; }
/* Lernreise: Video direkt unter dem Seitenkopf, ohne Trennlinie */
.hilfe-seite section.block.erstes { margin-top:28px; padding-top:0; border-top:0; }
.hilfe-seite section.block.erstes > h2 { font-size:22px; }
/* Beilagen fuers Lerngruppentreffen (unter dem Lerndossier) */
.dossier-k .beilagen-t { margin-top:14px; font-size:14.5px; }
.dossier-k .beilagen { display:grid; gap:8px; margin-top:8px; }
/* Beilagen in der halben Spalte: Knopf unter den Text wie beim Lerndossier, sonst wird der Text sehr schmal (3.11.2026) */
.dossier-k .beilagen .dok { grid-template-columns:auto minmax(0,1fr); }
.dossier-k .beilagen .dok .dl { grid-column:1 / span 2; justify-content:center; }
/* Lernreise: OLA-Methode */
.hilfe-seite .ola-liste { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:ola; }
.hilfe-seite .ola-liste li { position:relative; padding:14px 18px 14px 56px; border:1px solid var(--linie); border-radius:var(--r-m); background:#fff; font-size:15.5px; line-height:1.55; color:var(--text-2); counter-increment:ola; }
.hilfe-seite .ola-liste li::before { content:counter(ola); position:absolute; left:16px; top:14px; width:28px; height:28px; border-radius:50%; background:var(--bf); color:#fff; display:grid; place-items:center; font: 800 13px/1 var(--font-titel); }
.hilfe-seite .ola-liste li b { color:var(--tinte); }
.hilfe-seite .ola-link { margin-top:18px; }
.hilfe-seite .ola-link small { display:block; margin-top:6px; font-size:14px; color:var(--grau); }
/* Gruppen einteilen: bestehende Gruppen, Abteilungs-Chips */
.gp-gruppe.bestehend { border-left:4px solid var(--pc, var(--petrol)); }
.gp-chip .ms { font-size:16px; color:var(--grau); }
.gp-chip small.warn { color:#B37E00; }
.gp-gruppe .note { font-size:12.5px; color:var(--grau); margin:6px 0 0; }
.haken.klein { font-size:13px; }
/* Geschlossene Lerngruppen (Haken «Gruppe schliessen», 2.11.2026) */
.gp-gruppe .gp-zu { margin:0 0 6px; font-size:12.5px; gap:6px; }
.gp-gruppe .gp-zu input { width:14px; height:14px; }
.gp-gruppe .karte-kopf .l .gp-schloss { font-size:15px; color:var(--text-2); flex-shrink:0; }
.gp-gruppe .note .ms { font-size:14px; vertical-align:-3px; margin-right:2px; }
.zu-pill { margin-left:6px; }
.zu-haken { display:inline-flex; align-items:center; justify-content:center; padding:6px; cursor:pointer; }
.zu-haken input { width:17px; height:17px; margin:0; accent-color:var(--petrol); cursor:pointer; }
.zu-haken input:disabled { cursor:not-allowed; opacity:.5; }
.pill.hinweis { background:var(--warnl); color:var(--warn); }
.grp-hinweis { display:flex; gap:6px; align-items:flex-start; margin:0 0 8px; padding:8px 10px; border-radius:var(--r-s); background:var(--warnl); color:#6B4C00; font-size:13px; line-height:1.4; }
.grp-hinweis .ms { font-size:16px; color:var(--warn); }

/* ==========================================================================
   Review Welle 2 (26.10.2026): Anpassungen nach Jans Review
   ========================================================================== */
:root { --ampel-gruen:#2A9068; --ampel-gelb:#E0A000; --ampel-rot:#C8362B; }
/* Dokumente zum Herunterladen: Bereichsfarbe der Seite statt Orange (Entscheid Selina, 26.10.); Herunterladen als Umriss-Knopf */
.dok, .folien-link { --dok:var(--bf); --dok-tint:var(--bf-hell); --dok-line:var(--bf-tint2); --dok-ab:var(--bf-ab); }
.dok:hover { box-shadow:0 12px 28px -18px color-mix(in srgb, var(--bf) 45%, transparent); }
.dok .dl { background:#fff; color:var(--bf-ab); border:1.5px solid var(--bf-tint2); }
.dok:hover .dl { background:var(--bf-tint); border-color:var(--bf); }
.folien-link .pdf { background:var(--bf-tint); }
/* Ampel-Hinweise immer in Ampel-Grün, unabhängig von der Pfadfarbe (L06) */
.heute-box { background:var(--change-hauch); border-color:var(--change-tint2); }
.heute-box .ms { color:var(--change); }
.ampel-l .gr .dot, .stufe .hinweis-box .ampel, .hinweis-box .ampel { background:var(--ampel-gruen); }
.ampel-l .ge .dot { background:var(--ampel-gelb); }
.ampel-l .ro .dot { background:var(--ampel-rot); }
.ampel-unsicher { margin-top:10px; font-size:var(--klein); color:var(--grau); }
/* KI-Ampel beim Einzelauftrag: einmal unter den Stufen, neutral, mit den drei Farben (U04) */
.ampel-box { margin-top:22px; padding:18px 20px; border:1px solid var(--linie); border-radius:var(--r-m); background:var(--karte-hell); }
.ampel-box .ampel-k { font: 700 16px/1.3 var(--font-text); color:var(--tinte); }
.ampel-box .ampel-satz { margin-top:4px; font-size:15px; line-height:1.5; color:var(--text-2); }
.ampel-box .link { margin-top:12px; font-size:15px; }
/* Lernreise: langer OLA-Link darf umbrechen, sonst scrollt die Seite auf dem Handy seitlich */
.hilfe-seite .ola-link .link { white-space:normal; }
/* Prompts: neutraler Kasten, Stellen zum Anpassen in Marker-Gelb (L04) */
.prompt { background:var(--karte-hell); border-color:var(--linie); }
.prompt p mark { background:#FFF1B8; color:var(--tinte); }
.prompt-vor { margin-top:6px; font: 600 15px/1.4 var(--font-text); color:var(--tinte); }
.treff-k[hidden] { display:none; }

/* Video-Rahmen und Titelfolie (26.10.2026): Der Rand liegt als feine Linie UEBER dem Inhalt (::after), gleich dick
   rundherum. Vorher war der Rand am Rahmen selbst und die dunkle Flaeche dahinter schien rechts und in den Ecken durch. */
.video-wrap { border:0; background:#fff; isolation:isolate; }
.video-wrap::after { content:""; position:absolute; inset:0; border:1px solid var(--linie); border-radius:inherit; pointer-events:none; z-index:3; }
.video-wrap video { background:#fff; }
.video-wrap .video.start.mit-bild { background:#fff; }
.video-wrap .video.start.mit-bild::before { display:none; }
.video-wrap .video.start .titelbild { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.video-wrap .video.start .play { position:relative; z-index:1; }
.video-wrap .video.start.mit-bild .play { width:80px; height:80px; box-shadow:0 16px 40px rgba(0,27,23,.28); }
.video-wrap .video.start.mit-bild .play .ms { font-size:42px; }
.video-wrap .video.start.mit-bild .dauer { top:16px; bottom:auto; z-index:1; box-shadow:0 2px 8px rgba(0,27,23,.12); }
@media (max-width:640px) { .video-wrap .video.start.mit-bild .play { width:60px; height:60px; } .video-wrap .video.start.mit-bild .play .ms { font-size:32px; } }

/* Bewertungsfenster (26.10.2026): Pflicht sichtbar machen, fehlende Bewertungen markieren */
.abschluss-dlg .pflicht-hinweis { margin:0 0 14px; padding:10px 14px; border-radius:var(--r-s); background:var(--karte-hell); border:1px solid var(--linie); font-size:14.5px; color:var(--text-2); }
.abschluss-dlg .fehler:not(:empty) { padding:12px 14px; border-radius:var(--r-s); background:#FDECEA; border:1px solid #F3C4BE; color:#8A1C12; font-weight:600; font-size:15px; }
.abschluss-dlg .bw-teil.bw-fehlt, .abschluss-dlg .bw-gesamt.bw-fehlt { background:#FDF3F2; box-shadow:inset 3px 0 0 var(--fehler); }
.abschluss-dlg .bw-gesamt.bw-fehlt { padding:8px 12px; border-radius:var(--r-s); }
.abschluss-dlg .dauer-wahl.bw-fehlt { padding:8px; border-radius:var(--r-s); background:#FDF3F2; box-shadow:inset 3px 0 0 var(--fehler); }