/* Montibit-Website – Gestaltung wie das Spiel (Design «tween», Oktober 2026). Nur helle Anzeige.
   Schrift Nunito, selbst ausgeliefert (schriften/, SIL Open Font License) – keine fremden Server.
   Farben: Markenfarben (werkzeuge/STIL.md, «Markenfarben»). Die Seiten baut werkzeuge/website_bauen.py. */
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("schriften/nunito-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url("schriften/nunito-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:italic;font-weight:400;font-display:swap;src:url("schriften/nunito-400-kursiv-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600;font-display:swap;src:url("schriften/nunito-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url("schriften/nunito-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("schriften/nunito-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:800;font-display:swap;src:url("schriften/nunito-800-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

:root{
  --mittelblau:#1874e6; --dunkelblau:#0c243a; --hellblau:#a9d9fc; --gelb:#fdc201; --orange:#fa7001;
  --bg:#f9fafb; --paper:#ffffff; --flaeche2:#f1f5f9; --ink:#0c243a; --muted:#5b6577; --line:#e2e8f0;
  --soft:#e4f1fe; --gruen:#047857; --gruen-soft:#d1fae5; --rot:#dc2626;
  --sh:0 1px 2px rgba(12,36,58,.05),0 4px 16px rgba(12,36,58,.06);
  --sh-gross:0 12px 32px rgba(12,36,58,.16),0 2px 6px rgba(12,36,58,.08);
  --schrift:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:max(16px,env(safe-area-inset-left,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:130px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--schrift);letter-spacing:.005em;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--mittelblau);font-weight:700;text-underline-offset:2px}
b,strong{font-weight:800}
h1,h2,h3,h4{font-family:var(--schrift);font-weight:800;line-height:1.15;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.05rem)}
h3{font-size:1.18rem}
p{margin:0}
ul,ol{margin:0}
mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--gelb) 65%,transparent) 55%);color:inherit;padding:0 .1em}
.innen{max-width:1160px;margin:0 auto;padding-left:var(--rand);padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--mittelblau);outline-offset:2px;border-radius:6px}
::selection{background:var(--soft)}
[hidden]{display:none!important}
.springen{position:absolute;left:-999px;top:8px;z-index:50;background:var(--paper);padding:8px 14px;border-radius:10px}
.springen:focus{left:8px}

/* ---------- Kopf wie im Spiel: hellblaues Kopfband, darunter mittelblauer Pfad-Streifen mit weisser Schrift ---------- */
.kopf{position:sticky;top:0;z-index:20}
.kopfband{background:#e4f1fe}
.kopfband .innen{display:flex;align-items:center;gap:14px;min-height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:40px;width:auto}
.kopf-unter{color:var(--muted);font-weight:700;font-size:.9rem;border-left:2px solid var(--hellblau);padding-left:12px;line-height:1.2}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.kopf-link{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;font-weight:800;font-size:.95rem;box-shadow:0 1px 2px rgba(12,36,58,.08),0 0 0 1px rgba(12,36,58,.05)}
.kopf-link:hover{background:var(--soft);color:var(--mittelblau)}
.kopf-link svg{width:20px;height:20px}
.menueknopf{display:none;align-items:center;gap:8px;height:44px;padding:0 14px;border:0;border-radius:12px;background:#fff;color:var(--ink);font:800 .95rem var(--schrift);cursor:pointer;box-shadow:0 1px 2px rgba(12,36,58,.08),0 0 0 1px rgba(12,36,58,.05)}
.menueknopf svg{width:22px;height:22px}
.menueknopf[aria-expanded="true"]{background:var(--dunkelblau);color:#fff}
.pfad{background:var(--mittelblau);color:#fff}
.pfad ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:2px;align-items:center;min-height:52px}
.pfad a{display:block;color:#fff;text-decoration:none;font-weight:800;font-size:.96rem;padding:7px 11px;border-radius:10px;white-space:nowrap}
.pfad a:hover{background:rgba(255,255,255,.16)}
.pfad a[aria-current="page"]{background:#fff;color:var(--mittelblau)}
.pfad a:focus-visible{outline:3px solid #fff;outline-offset:1px}
.pfad a.haus{display:flex;align-items:center;gap:6px}
.pfad a.haus svg{width:20px;height:20px}
.pfad .haus-wort{display:none}
.knopf.demo{min-height:44px;padding:8px 18px;font-size:1rem;letter-spacing:.05em}
.knopf.demo[aria-current="page"]{box-shadow:0 0 0 3px var(--dunkelblau)}
@media (max-width:1240px){.kopf-unter{display:none}}
@media (max-width:1220px){.pfad a{padding:7px 8px;font-size:.92rem}}
@media (max-width:1120px){
  html.js .pfad .haus-wort{display:inline}
  html.js .menueknopf{display:inline-flex}
  html.js .pfad{display:none}
  html.js .pfad.offen{display:block;max-height:calc(100vh - 68px);overflow-y:auto;box-shadow:var(--sh-gross)}
  html.js .pfad ul{flex-direction:column;align-items:stretch;padding-block:8px;gap:2px}
  html.js .pfad a{padding:12px 14px;font-size:1.05rem}
}
@media (max-width:520px){
  .logo img{height:30px}
  .kopf-link .wort,.menueknopf .wort{display:none}
  .kopf-link,.menueknopf{padding:0 11px}
  .knopf.demo{padding:8px 13px}
  .kopfband .innen{gap:8px}
  .kopf-rechts{gap:7px}
}
.krumen{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.92rem;color:var(--muted);margin:0 0 6px}
.krumen li+li::before{content:"›";margin-right:6px;color:var(--muted)}

/* ---------- Knöpfe: flach, 12 px Rundung (wie im Spiel) ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 1.06rem/1.2 var(--schrift);text-decoration:none;padding:12px 22px;min-height:50px;border-radius:12px;border:0;cursor:pointer;text-align:center;
  background:var(--mittelblau);color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.14),0 6px 16px -6px color-mix(in srgb,var(--mittelblau) 60%,transparent);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),filter .2s,background-color .2s}
.knopf svg{width:22px;height:22px;flex:none}
.knopf:hover{filter:brightness(1.08) saturate(1.05)}
.knopf.gelb{background:var(--gelb);color:var(--dunkelblau);box-shadow:0 1px 2px rgba(15,23,42,.14),0 6px 16px -6px rgba(201,150,0,.7)}
.knopf.dunkel{background:var(--dunkelblau)}
.knopf.zweit,.knopf.leise{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 1px 2px rgba(15,23,42,.05)}
.knopf.zweit:hover,.knopf.leise:hover{filter:none;background:var(--soft);color:var(--mittelblau)}
.knopf.klein{font-size:.96rem;padding:8px 16px;min-height:42px;border-radius:10px}
.knopf[aria-disabled="true"]{background:var(--flaeche2);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);cursor:default;filter:none}
.knopf[disabled]{opacity:.6;cursor:wait}
@media (prefers-reduced-motion:no-preference){.knopf:hover:not([aria-disabled="true"]){transform:scale(1.02)}.knopf:active{transform:scale(.97)}}
.knoepfe{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- Grundbausteine ---------- */
.abschnitt{padding-block:52px}
.abschnitt.weiss{background:var(--paper);border-block:1px solid var(--line)}
.abschnitt.hell{background:#e4f1fe}
.abschnitt .innen{display:grid;gap:24px}
.abschnitt.eng{padding-block:32px}
.kopfzeile{display:grid;gap:10px;max-width:70ch}
.kopfzeile p{color:var(--muted);font-size:1.06rem}
.dach{font-weight:800;color:var(--mittelblau);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.lead{font-size:1.15rem;color:var(--muted)}
.kleiner,.klein{font-size:.93rem;color:var(--muted)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.raster>*{min-width:0}
.karte{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:22px;display:grid;gap:10px;align-content:start;color:inherit}
a.karte{text-decoration:none;font-weight:400;transition:transform .16s cubic-bezier(.2,.8,.2,1),border-color .2s}
a.karte:hover{border-color:color-mix(in srgb,var(--mittelblau) 45%,var(--line))}
@media (prefers-reduced-motion:no-preference){a.karte:hover{transform:scale(1.015)}}
.karte p{color:var(--muted)}
.karte h3{color:var(--ink)}
.karte .mehr{color:var(--mittelblau);font-weight:800;font-size:.95rem}
.karte .ico{width:56px;height:56px;border-radius:14px;background:var(--soft);display:grid;place-items:center;flex:none}
.karte .ico svg{width:38px;height:38px}
.karte img.abz-bild{width:76px;height:76px}
.karte.haupt{border:2.5px solid var(--mittelblau);box-shadow:var(--sh-gross)}
.karte .kopf-zeile{display:flex;gap:14px;align-items:center}
.hinweis{background:#e4f1fe;border-radius:16px;padding:18px 22px;display:grid;gap:6px;border:1px solid #cfe5fb}
.hinweis.gelb{background:#fff8db;border-color:#f6dd7a}
.vorschlag{display:flex;gap:12px;align-items:flex-start;background:#fff8db;border:1.5px dashed #d9ad00;border-radius:14px;padding:14px 18px}
.vorschlag svg{width:26px;height:26px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chips li,.chip{display:inline-flex;align-items:center;gap:6px;background:var(--flaeche2);border-radius:999px;padding:4px 12px;font-size:.88rem;font-weight:700;color:var(--ink)}
.chip.blau{background:var(--soft);color:var(--mittelblau)}
.chip.gelb{background:#fff3bf;color:#6b4f00}
.chip.gruen{background:var(--gruen-soft);color:var(--gruen)}
.haken{list-style:none;padding:0;display:grid;gap:8px}
.haken li{padding-left:30px;position:relative}
.haken li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--gruen-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.punkte{padding-left:1.2em;display:grid;gap:6px;color:var(--muted)}
.punkte li::marker{color:var(--mittelblau)}

/* Bipo mit Sprechblase */
.bipo{display:flex;gap:14px;align-items:flex-end}
.bipo img{width:72px;flex:none}
.bipo .blase{position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh);border-radius:16px;padding:14px 18px;font-weight:700;line-height:1.45;margin-bottom:26px}
.bipo .blase::after{content:"";position:absolute;left:-9px;bottom:16px;width:16px;height:16px;background:var(--paper);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.bipo.flach .blase{background:var(--flaeche2);box-shadow:none}
.bipo.flach .blase::after{background:var(--flaeche2)}

/* ---------- Titelbereich ---------- */
.held{background:linear-gradient(#e4f1fe,var(--bg));padding-block:38px 46px;overflow:hidden}
.held .innen{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:36px;align-items:center}
.held-text{display:grid;gap:18px;min-width:0;justify-items:start}
.held-text .lead{max-width:44ch}
.held-bild{position:relative;min-width:0}
.held.schlicht{padding-block:30px 30px}
.held.schlicht .innen{grid-template-columns:minmax(0,1fr) auto}
.held.schlicht .held-bild img{width:170px}
.held.schlicht .held-bild img.abz-bild{width:150px}
@media (max-width:860px){.held .innen,.held.schlicht .innen{grid-template-columns:1fr}.held.schlicht .held-bild{display:none}}

/* Berg (wie die Seite «So funktioniert Montibit» im Spiel) */
.berg{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-gross);overflow:hidden;position:relative}
.berg svg{display:block;width:100%;height:auto}
.berg svg a:hover circle:not([opacity]){stroke-width:4.5}
.berg figcaption{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;padding:10px 14px 14px;font-weight:700;font-size:.86rem;color:var(--muted)}
.berg figcaption span{display:inline-flex;align-items:center;gap:6px}
.berg figcaption i{width:13px;height:13px;border-radius:50%;background:var(--f);box-shadow:0 0 0 1.5px var(--dunkelblau)}
.berg .siegel{position:absolute;right:12px;top:12px;width:78px;height:auto;filter:drop-shadow(0 4px 8px rgba(12,36,58,.3))}
@media (max-width:520px){.berg .siegel{width:54px}}

/* Kennzahlen */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.zahl{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:14px 16px;display:grid;gap:2px;text-align:center}
.zahl b{font-size:2.1rem;line-height:1.05;color:var(--z,var(--mittelblau));font-variant-numeric:tabular-nums}
.zahl span{font-size:.9rem;font-weight:700;color:var(--muted)}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;counter-reset:s;list-style:none;padding:0}
.schritte li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:center;align-content:start;padding:18px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh)}
.schritte li::before{content:counter(s);font-weight:800;width:36px;height:36px;border-radius:50%;background:var(--mittelblau);color:#fff;display:grid;place-items:center}
/* Nummer links neben dem Titel (Wunsch Martin 22.10.2026: spart Platz); alles Weitere über die ganze Breite */
.schritte li>*{grid-column:1/-1}
.schritte li>:first-child{grid-column:2}
.schritte strong{font-size:1.08rem}
.schritte span{color:var(--muted);font-size:.95rem}

/* Teile («Was lernt man?») */
/* Basislager, Teile und Gipfel: immer eine Karte pro Zeile (Wunsch Martin 22.10.2026) */
.teile{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.teile .breit{grid-column:1/-1}
.teil{background:var(--paper);border:1px solid var(--line);border-top:6px solid var(--f);border-radius:16px;box-shadow:var(--sh);padding:20px 22px;display:grid;gap:12px;align-content:start}
.teil-kopf{display:flex;gap:12px;align-items:center}
.teil-kopf .nr{width:42px;height:42px;border-radius:50%;background:var(--f);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.15rem;flex:none;box-shadow:0 0 0 2.5px var(--dunkelblau)}
.teil-kopf .nr svg{width:24px;height:24px}
.teil-kopf small{display:block;color:var(--muted);font-weight:700;font-size:.88rem}
.teil p{color:var(--muted)}
/* Einleitung deutlich von der Aufzählung abheben */
.teil .teil-lead{color:var(--ink);font-size:1.1rem;font-weight:700;line-height:1.45;padding-bottom:12px;border-bottom:1px solid var(--line)}
.teil .punkte{font-size:.95rem;color:var(--muted)}
.teil h3 a{color:inherit;text-decoration:none}
.teil h3 a:hover{color:var(--mittelblau)}
@media (max-width:760px){.teile{grid-template-columns:1fr}}
.teil-welten{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.teil-welten a{display:inline-flex;align-items:center;gap:8px;background:var(--flaeche2);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:700}
.teil-welten a:hover{background:var(--soft);color:var(--mittelblau)}
.teil-welten img{width:30px;height:30px}
.teil-welten i{font-style:normal;color:var(--muted);font-weight:800}

/* Abzeichen */
.abz-gruppe{display:grid;gap:14px}
.abz-titel{display:flex;align-items:center;gap:10px;font-size:1.2rem}
.abz-titel::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--f,#888);box-shadow:0 0 0 2px var(--dunkelblau);flex:none}
.abz-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
/* Abzeichen-Seite: alle nacheinander, Teil an der Farbe oben und am Fähnchen der ersten Karte erkennbar */
.abz-raster.abz-alle{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));column-gap:16px;row-gap:30px;padding-top:12px}
.abz-alle .abz{position:relative;border-top:6px solid var(--f,var(--line));display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 14px 14px}
.abz-alle .abz img{width:100%;max-width:200px;height:auto;aspect-ratio:1}
.abz-alle .abz b{font-size:1.08rem}
.abz-kapitel{position:absolute;top:-15px;left:12px;max-width:calc(100% - 24px);background:var(--f);color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.02em;padding:3px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 2px var(--dunkelblau)}
.abz-info{margin-top:auto;width:100%;display:grid;gap:4px;background:var(--flaeche2);border-radius:12px;padding:10px 12px;text-align:center}
.abz-ort{font-weight:800;font-size:.88rem;color:var(--ink)}
.abz-pruef{font-size:.82rem;color:var(--muted);line-height:1.35}
.abz-pruef i{font-style:normal;display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--mittelblau)}
.abz-legende{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px 18px}
.abz-legende li{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem}
.abz-legende li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--f);box-shadow:0 0 0 2px var(--dunkelblau)}
.abz{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:16px 12px;display:grid;gap:6px;justify-items:center;align-content:start;text-align:center;text-decoration:none;color:inherit;font-weight:400}
.abz img{width:124px;height:124px}
.abz b{font-size:1rem;line-height:1.25}
.abz small{color:var(--muted);font-size:.82rem;line-height:1.35}
a.abz:hover{border-color:color-mix(in srgb,var(--mittelblau) 45%,var(--line))}
.abz-leiste{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.abz-leiste a{display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--muted);font-size:.74rem;font-weight:700;line-height:1.2;text-align:center}
.abz-leiste img{width:72px;height:72px}
@media (max-width:420px){.abz-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.abz img{width:100px;height:100px}.abz-alle .abz img{width:100%;height:auto}.abz-raster.abz-alle{column-gap:10px}}

/* Werkstätten */
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{font:800 .95rem var(--schrift);border:0;border-radius:999px;padding:8px 16px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;min-height:42px}
.filter button[aria-pressed="true"]{background:var(--dunkelblau);color:#fff;box-shadow:none}
.wk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.wk{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.wk .bild{background:#f4f8fd;aspect-ratio:400/260;display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line)}
.wk .bild img{width:100%;height:100%;object-fit:contain}
.wk .bild img.vorschau{object-fit:cover;object-position:top left}
.wk .bild img.abz-ersatz{width:46%;height:auto}
.wk .stern{position:absolute;left:10px;top:10px;background:var(--gelb);color:var(--dunkelblau);font-weight:800;font-size:.78rem;border-radius:999px;padding:3px 10px;box-shadow:0 1px 3px rgba(12,36,58,.25)}
.wk .text{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}
.wk h3{font-size:1.08rem}
.wk p{color:var(--muted);font-size:.95rem}
.wk .welt{font-size:.85rem;font-weight:700;color:var(--muted)}
.wk .welt a{color:var(--muted);text-decoration:none}
.wk a:hover{text-decoration:underline}
.wk .los{text-decoration:none}
.wk .los{font-weight:800;font-size:.95rem}

/* Themen: Welt-Seiten und Lektionen */
.welt-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.welt-kopf img.abz-bild{width:150px;height:150px}
.welt-kopf .held-text{gap:12px}
@media (max-width:640px){.welt-kopf{grid-template-columns:1fr}.welt-kopf img.abz-bild{width:110px;height:110px}}
.lektionen{list-style:none;padding:0;display:grid;gap:14px}
.lek{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--f,var(--mittelblau));border-radius:16px;box-shadow:var(--sh);display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;padding:14px 18px 14px 14px;align-items:start}
.lek .bild{background:#f4f8fd;border-radius:12px;aspect-ratio:400/260;overflow:hidden}
.lek .bild img{width:100%;height:100%;object-fit:contain}
.lek-text{display:grid;gap:6px;min-width:0}
.lek-nr{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lek h3{font-size:1.15rem}
.lek p{color:var(--muted)}
.lek summary{cursor:pointer;font-weight:800;color:var(--mittelblau);font-size:.95rem;list-style:none;display:inline-flex;align-items:center;gap:8px}
.lek summary::-webkit-details-marker{display:none}
.lek summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft);font-size:1rem}
.lek details[open] summary::before{content:"–"}
.lek .details{display:grid;gap:10px;padding-top:10px}
.lek .zeile{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.merke{background:#fff8db;border:1.5px solid #f6dd7a;border-radius:12px;padding:10px 14px;margin:0;font-weight:700;color:var(--ink)}
.merke span{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#6b4f00}
.woerter{font-size:.92rem;color:var(--muted)}
@media (max-width:640px){.lek{grid-template-columns:1fr}.lek .bild{max-width:280px}}
.weiter-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.suche{display:grid;gap:8px;max-width:640px}
.suche label{font-weight:800}
.suche input{font:600 1.05rem var(--schrift);padding:13px 16px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);width:100%}
.suche input:focus{border-color:var(--mittelblau);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mittelblau) 25%,transparent)}
.treffer{list-style:none;padding:0;display:grid;gap:8px;max-width:820px}
.treffer a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-decoration:none;color:var(--ink);font-weight:400}
.treffer a:hover{border-color:var(--mittelblau)}
.treffer b{color:var(--mittelblau)}
.treffer small{display:block;color:var(--muted)}

/* Pakete und Preise */
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;align-items:stretch}
.preise .karte{gap:14px}
.betrag{font-weight:800;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.betrag small{font-size:1rem;color:var(--muted);font-weight:700}
.paket{border-top:6px solid var(--f)}
.stufen{display:flex;gap:4px}
.stufen i{width:22px;height:8px;border-radius:4px;background:var(--line)}
.stufen i.an{background:var(--f)}
.paket-zahlen{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.92rem;font-weight:700;color:var(--muted)}
.paket-zahlen b{color:var(--ink)}

/* Länder */
.laender{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.land{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:16px;display:grid;gap:10px;align-content:start}
.land.bald{background:var(--flaeche2)}
.land-kopf{display:flex;align-items:center;gap:10px}
.land-kopf svg{width:42px;height:28px;flex:none}
.land-kopf .status{margin-left:auto;white-space:nowrap;font-size:.75rem;font-weight:800;border-radius:999px;padding:2px 9px;background:var(--gruen-soft);color:var(--gruen)}
.land.bald .status{background:var(--paper);color:var(--muted)}
.land ul{padding-left:1.1em;color:var(--muted);font-size:.93rem}
.sprachen{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--muted);font-weight:700}
.sprachen i{font-style:normal;border-radius:6px;padding:1px 7px;background:var(--line);color:var(--muted)}
.sprachen i.da{background:var(--mittelblau);color:#fff}

/* Zitat-Band und Aufruf */
.band{background:var(--dunkelblau);color:#fff}
.band .innen{padding-block:50px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.band img{width:110px}
.band blockquote{margin:0;font-weight:800;font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.35}
.band cite{display:block;margin-top:12px;font-style:normal;font-weight:700;font-size:1rem;color:var(--hellblau)}
@media (max-width:600px){.band .innen{grid-template-columns:1fr}.band img{width:80px}}
.aufruf{background:var(--mittelblau);color:#fff;border-radius:20px;padding:26px 28px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;box-shadow:var(--sh-gross)}
.aufruf img{width:86px}
.aufruf h2{color:#fff}
.aufruf p{color:#e4f1fe}
@media (max-width:760px){.aufruf{grid-template-columns:1fr}.aufruf img{width:66px}}
.aktuell{display:grid;grid-template-columns:130px minmax(0,1fr);gap:22px;align-items:center}
.aktuell img{width:130px}
@media (max-width:520px){.aktuell{grid-template-columns:1fr}.aktuell img{width:110px}}

/* Fragen */
.fragen{display:grid;gap:10px}
.fragen details{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:2px 18px;box-shadow:var(--sh)}
.fragen summary{font-weight:800;font-size:1.06rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding-block:12px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";color:var(--mittelblau);font-size:1.4rem;line-height:1;flex:none}
.fragen details[open] summary::after{content:"–"}
.fragen details>p,.fragen details>ul{margin:0 0 14px;color:var(--muted);max-width:74ch}
.fragen-gruppe{display:grid;gap:12px}
.fragen-gruppe h2{font-size:1.35rem}
.ratgeber{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.ratgeber a{display:block;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.ratgeber a:hover{border-color:var(--mittelblau)}
.ratgeber b{display:block;color:var(--mittelblau)}
.ratgeber span{display:block;font-weight:400;color:var(--muted);font-size:.9rem}

/* Geräte-Anleitungen (Elternseite) */
.geraet-wahl{display:grid;gap:12px}
.geraet-wahl details{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:2px 18px}
.geraet-wahl summary{font-weight:800;font-size:1.1rem;cursor:pointer;padding-block:14px;list-style:none;display:flex;justify-content:space-between}
.geraet-wahl summary::-webkit-details-marker{display:none}
.geraet-wahl summary::after{content:"+";color:var(--mittelblau);font-size:1.4rem;line-height:1}
.geraet-wahl details[open] summary::after{content:"–"}
.geraet-teile{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding-bottom:16px}
.geraet-teile h4{font-size:1rem;margin-bottom:6px}
.geraet-teile ol{padding-left:1.2em;color:var(--muted);font-size:.95rem;display:grid;gap:4px}
.geraet-teile p{color:var(--muted);font-size:.95rem}

/* Formulare und Shop */
.formular{display:grid;gap:12px;max-width:540px}
.formular label{display:grid;gap:4px;font-weight:800;font-size:.95rem}
.formular input,.formular select,.formular textarea{font:600 1rem var(--schrift);padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink)}
.formular input:focus,.formular select:focus,.formular textarea:focus{border-color:var(--mittelblau);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mittelblau) 25%,transparent)}
.formular textarea{resize:vertical;min-height:80px}
.formular .haken-feld{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.formular .haken-feld input{width:22px;height:22px;margin-top:3px;flex:none}
.formular .wahl{font-weight:600;color:var(--muted);font-size:.9rem}
.shop{max-width:680px}
.shop .karte{gap:14px}
.meldung{font-size:.98rem;margin:0}
.meldung.fehler{color:#b3261e}
.meldung.ok{color:var(--gruen)}
.code-feld{letter-spacing:.3em;font-weight:800;font-size:1.6rem!important;text-align:center;max-width:260px}
.status-band{display:flex;gap:14px;align-items:center;border-radius:16px;padding:16px 20px;background:#e4f1fe}
.status-band.ja{background:var(--gruen-soft)}
.status-band .gross{font-size:2rem;line-height:1}
.geraete{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.geraete li{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 16px;flex-wrap:wrap;background:var(--paper)}
.geraete small{color:var(--muted);display:block}
.warte{display:inline-block;width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--mittelblau);animation:dreh 1s linear infinite;vertical-align:middle}
@keyframes dreh{to{transform:rotate(360deg)}}
.probe-band{background:#b00020;color:#fff;text-align:center;font-weight:800;padding:6px 16px;font-size:.95rem}

/* Rechtstexte */
.text{max-width:72ch;display:grid;gap:14px}
.text h2{font-size:1.35rem;margin-top:12px}
.platzhalter{background:#fff3c4;color:#5a4300;padding:0 4px;border-radius:4px}

/* Grössere Schrift (Seiten für Grosseltern und Erwachsene) */
.gross-schrift{font-size:19px}

/* ---------- Fuss ---------- */
.fuss{margin-top:48px;background:var(--dunkelblau);color:#cfe3f4;font-size:.95rem}
.fuss .innen{padding-block:40px 26px;display:grid;gap:26px}
.fuss-spalten{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px}
.fuss h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--hellblau);margin-bottom:10px}
.fuss ul{list-style:none;padding:0;display:grid;gap:6px}
.fuss a{color:#fff;font-weight:700;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-marke{display:grid;gap:12px;align-content:start}
.fuss-marke .zeile{display:flex;gap:12px;align-items:center}
.fuss-marke img{width:56px;flex:none}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid rgba(169,217,252,.25);padding-top:18px;font-size:.88rem}
@media (max-width:860px){.fuss-spalten{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}
@media (max-width:420px){.fuss-spalten{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.kopf,.fuss,.knopf{display:none!important}body{background:#fff}}
.lek.zeit .bild{background:#f6efe2}.lek.zeit .bild img{filter:sepia(.55) saturate(.8)}

/* ==================================================================================================================
   Mein Montibit-Konto (konto.html, konto.js, konto-pruefung.js) – alle Klassen mit «ko-». Druck: A4 weiter unten.
   ================================================================================================================== */
.kopf-link[aria-current="page"]{background:var(--dunkelblau);color:#fff}
/* .klein (graue Kleinschrift) darf die Schrift kleiner Knöpfe nicht grau färben */
.knopf.klein:not(.zweit):not(.leise):not(.gelb){color:#fff}
.ko-abschnitt{padding-block:30px 40px}
.ko-abschnitt .innen{gap:20px}
.ko-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ko-laedt{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700;padding:18px 0}
.ko-kopf .kopfzeile{max-width:none}
.ko-kopf h1{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.ko-reiter ul{list-style:none;margin:0;padding:6px;display:flex;flex-wrap:wrap;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
.ko-reiter a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 16px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:800}
.ko-reiter a svg{width:22px;height:22px;flex:none}
.ko-reiter a:hover{background:var(--soft);color:var(--mittelblau)}
.ko-reiter a[aria-current="page"]{background:var(--mittelblau);color:#fff}
@media (max-width:560px){.ko-reiter ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:4px;padding:4px}.ko-reiter a{flex-direction:column;gap:2px;padding:8px 4px;font-size:.82rem;text-align:center;justify-content:center}}
.ko-inhalt{display:grid;gap:20px;min-width:0}
.ko-inhalt>*{min-width:0}
.ko-titelzeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.ko-titelzeile h2,.ko-titelzeile h3{margin-right:auto}
.ko-teil{display:grid;gap:12px}
.ko-meldung{font-weight:700}
.ko-fehler p{color:var(--ink)}
.ko-rot{color:#b3261e;font-weight:700}
.ko-gefahr{color:#b3261e!important}
.knopf.ko-rot-knopf{background:#b3261e;box-shadow:0 1px 2px rgba(15,23,42,.14)}
.ko-live{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:var(--gruen);background:var(--gruen-soft);border-radius:999px;padding:4px 12px}
.ko-live i{width:9px;height:9px;border-radius:50%;background:var(--gruen)}
@media (prefers-reduced-motion:no-preference){.ko-live i{animation:ko-puls 2s ease-in-out infinite}}
@keyframes ko-puls{50%{opacity:.25}}
.ko-live.aus{color:#6b4f00;background:#fff3bf}.ko-live.aus i{background:#d9ad00;animation:none}
.ko-balken{display:block;height:10px;border-radius:999px;background:var(--flaeche2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.ko-balken i{display:block;height:100%;background:var(--mittelblau);border-radius:inherit}
.ko-leer{display:flex;gap:18px;align-items:flex-start;background:var(--paper);border:2px dashed var(--line);border-radius:16px;padding:20px}
.ko-leer img{width:64px;flex:none}
.ko-leer>div{display:grid;gap:10px;min-width:0}
.ko-leer.gross{padding:26px}
@media (max-width:520px){.ko-leer{flex-direction:column}.ko-leer img{width:52px}}
.ko-sprung{display:flex;flex-wrap:wrap;gap:8px}
.ko-sprung a{font-size:.92rem;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none}
.ko-sprung a:hover{border-color:var(--mittelblau)}
.ko-schmal-box{max-width:560px}
.ko-mit-einheit{display:flex;align-items:center;gap:8px;font-weight:600}
.ko-mit-einheit input{width:6.5em}

/* Anmelden und Rolle */
.ko-anmelden{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;align-items:start}
.ko-anmelden-text{display:grid;gap:16px}
@media (max-width:820px){.ko-anmelden{grid-template-columns:1fr}}
#ko-login{display:grid;gap:12px}
.ko-willkommen{display:grid;gap:16px;max-width:720px}
.ko-rolle-form{gap:16px}
.ko-rollen{border:0;padding:0;margin:0;display:grid;gap:10px}
.ko-rollen legend{font-weight:800;font-size:1.1rem;margin-bottom:8px}
.ko-rolle{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;background:var(--paper)}
.ko-rolle:has(input:checked){border-color:var(--mittelblau);background:var(--soft)}
.ko-rolle input{width:24px;height:24px;margin-top:2px;flex:none;accent-color:var(--mittelblau)}
.ko-rolle span{display:grid;gap:2px}
.ko-rolle b{font-size:1.08rem}
.ko-rolle small{color:var(--muted);font-size:.93rem}
.ko-lehrperson{max-width:none}

/* Formulare */
.ko-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ko-felder label{display:grid;gap:4px;font-weight:800;font-size:.95rem}
.ko-felder input,.ko-felder select,.ko-filter select,.ko-inline select,.ko-mit-einheit input{font:600 1rem var(--schrift);padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--paper);color:var(--ink);min-height:46px;max-width:100%}
.ko-felder input:focus,.ko-felder select:focus,.ko-filter select:focus,.ko-inline select:focus,.ko-mit-einheit input:focus{border-color:var(--mittelblau);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mittelblau) 25%,transparent)}
.ko-breit-form{max-width:760px}
.ko-wahl{border:0;padding:0;margin:0;display:grid;gap:8px}
.ko-wahl legend{font-weight:800;margin-bottom:6px}
.ko-wahl>label{display:flex;gap:10px;align-items:flex-start;font-weight:600;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--paper);cursor:pointer}
.ko-wahl>label:has(input:checked){border-color:var(--mittelblau);background:var(--soft)}
.ko-wahl>label input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--mittelblau)}
.ko-wahl>label.aus{opacity:.65;cursor:default}
.ko-wahl.klein>label{padding:8px 12px;font-size:.95rem}
.ko-unter{margin:-2px 0 4px 34px;display:grid;gap:8px}
.ko-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:800}
.ko-zaehler{display:grid;gap:6px;font-weight:800;font-size:.95rem}
.ko-zaehler>div{display:flex;align-items:center;gap:8px}
.ko-zaehler input{width:90px;text-align:center;font:800 1.2rem var(--schrift);padding:8px;border-radius:12px;border:2px solid var(--line);min-height:46px}
.ko-zaehler .knopf{min-width:46px;font-size:1.3rem}
.ko-profilwahl{display:flex;flex-wrap:wrap;gap:8px}
.ko-profilwahl .haken-feld,.ko-dialog .haken-feld{display:flex;align-items:center;gap:8px;font-weight:700;background:var(--flaeche2);border-radius:999px;padding:4px 14px 4px 8px;cursor:pointer}
.ko-profilwahl input{width:20px;height:20px;accent-color:var(--mittelblau)}
.haken-feld{display:flex;gap:10px;align-items:flex-start}
.haken-feld input[type=checkbox]{width:22px;height:22px;flex:none;accent-color:var(--mittelblau)}

/* Dialog */
.ko-dialog{border:0;border-radius:20px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);box-shadow:var(--sh-gross);color:var(--ink);background:var(--paper)}
.ko-dialog.breit{width:min(820px,calc(100vw - 24px))}
.ko-dialog::backdrop{background:rgba(12,36,58,.45)}
.ko-dialog-form{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.ko-dialog-kopf{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ko-dialog-kopf h2{font-size:1.3rem;margin-right:auto}
.ko-zu{width:44px;height:44px;border-radius:12px;border:0;background:var(--flaeche2);font:800 1.5rem var(--schrift);color:var(--ink);cursor:pointer;flex:none}
.ko-zu:hover{background:var(--soft)}
.ko-dialog-inhalt{padding:16px 20px;overflow:auto;display:grid;gap:12px}
.ko-dialog-inhalt h3{margin-top:6px}
.ko-dialog>form>.meldung{padding:0 20px}
.ko-dialog-knoepfe{padding:14px 20px 18px;border-top:1px solid var(--line)}
@media (max-width:520px){.ko-dialog-knoepfe .knopf{flex:1 1 100%}}

/* Profile (Familie) */
.ko-profile{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
@media (max-width:400px){.ko-profile{grid-template-columns:1fr}}
.ko-profil{gap:12px}
.ko-profil-kopf,.ko-platz-kopf{display:flex;gap:14px;align-items:center}
.ko-profil-kopf h3{font-size:1.3rem;margin-bottom:4px}
.ko-figur{width:var(--g,56px);height:var(--g,56px);flex:none;display:grid;place-items:center;border-radius:28%;overflow:hidden}
.ko-figur svg,.ko-figur img{width:100%;height:100%;display:block}
.ko-figur.leer{background:var(--soft);color:var(--mittelblau);font-weight:800;font-size:calc(var(--g,56px) * .45);box-shadow:inset 0 0 0 2px var(--hellblau)}
.ko-wunsch{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff8db;border:1.5px solid #f6dd7a;border-radius:14px;padding:10px 14px}
.ko-wunsch>span{font-size:1.6rem}
.ko-wunsch>div{display:grid;flex:1 1 180px}
.ko-wunsch small{color:#5a4300}
.ko-haengt{background:#fdecea;border-radius:12px;padding:8px 12px;color:var(--ink)!important;font-size:.95rem}
.ko-route{display:flex;gap:8px;align-items:center}
.ko-punkt{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--dunkelblau)}
.ko-etappe{display:grid;gap:4px;font-size:.95rem}
.ko-zahlen-zeile{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.93rem;color:var(--muted)}
.ko-zahlen-zeile b{color:var(--ink)}
.ko-abzeichen{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.ko-abzeichen img{width:40px;height:40px}
.ko-abzeichen .mehr{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--flaeche2);font-weight:800;font-size:.85rem}
.ko-spielzeit{display:grid;gap:6px}
.ko-klein-titel{font-size:.9rem;color:var(--muted)}
.ko-tage{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end}
.ko-tage li{display:grid;gap:3px;justify-items:center;position:relative}
.ko-saeule{width:100%;max-width:30px;height:46px;border-radius:6px;background:var(--flaeche2);position:relative;overflow:hidden}
.ko-saeule::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h);background:var(--hellblau)}
.ko-tage li.heute .ko-saeule::after{background:var(--mittelblau)}
.ko-tage small{font-size:.75rem;font-weight:700;color:var(--muted)}
.ko-tests{font-size:.95rem}
.ko-aktionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.ko-mehr{position:relative}
.ko-mehr>summary{list-style:none;cursor:pointer;font-weight:800;color:var(--mittelblau);padding:8px 12px;border-radius:10px;min-height:42px;display:inline-flex;align-items:center}
.ko-mehr>summary::-webkit-details-marker{display:none}
.ko-mehr>summary::after{content:"▾";margin-left:6px}
.ko-mehr>summary:hover{background:var(--soft)}
.ko-mehr>div{position:absolute;z-index:5;right:0;top:100%;display:grid;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-gross);padding:8px;min-width:220px}
.ko-mehr>div .knopf{justify-content:flex-start}
.ko-routen{border:0;padding:0;margin:0;display:grid;gap:8px}
.ko-routewahl{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);border-left:8px solid var(--f);border-radius:14px;padding:10px 14px;cursor:pointer}
.ko-routewahl:has(input:checked){border-color:var(--mittelblau);border-left-color:var(--f);background:var(--soft)}
.ko-routewahl input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--mittelblau)}
.ko-routewahl span{display:grid;gap:2px}
.ko-routewahl small{color:var(--muted)}
.ko-zusammen p{color:var(--ink)}

/* Tabellen */
.ko-tabelle-rahmen{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--sh);max-width:100%}
.ko-tabelle-rahmen:focus-visible{outline:3px solid var(--mittelblau)}
.ko-tabelle{width:100%;border-collapse:collapse;font-size:.95rem}
.ko-tabelle caption{text-align:left;font-weight:800;padding:8px 0}
.ko-tabelle th,.ko-tabelle td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.ko-tabelle thead th{font-size:.82rem;color:var(--muted);font-weight:800;background:var(--flaeche2);white-space:nowrap}
.ko-tabelle tbody th{font-weight:800;white-space:nowrap}
.ko-tabelle tbody th small{display:block;font-weight:600;color:var(--muted)}
.ko-tabelle .z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ko-tabelle tr.frei{color:var(--muted)}
.ko-tabelle.ko-schmal{margin-bottom:8px}
.ko-uebersicht tbody th{position:sticky;left:0;background:var(--paper);z-index:1;box-shadow:1px 0 0 var(--line)}
.ko-uebersicht tbody th a{text-decoration:none;display:inline-block;padding:4px 0}
.ko-uebersicht tbody th a:hover{text-decoration:underline}
.ko-et{border-top:5px solid var(--f)}
.ko-zelle{text-align:center!important;min-width:84px}
.ko-zelle.fertig{background:var(--gruen-soft);color:var(--gruen);font-weight:800;font-size:1.1rem}
.ko-zelle.dran{background:#e4f1fe}
.ko-zelle.dran small{display:block;font-size:.75rem;color:var(--muted);font-weight:700}
.ko-zelle.nicht{background:#f8fafc}
.ko-zelle.leer{background:repeating-linear-gradient(45deg,#f8fafc 0 6px,#eef2f6 6px 12px)}
.ko-mini{display:block;height:7px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #cfe5fb;overflow:hidden;margin:2px auto 2px;max-width:60px}
.ko-mini i{display:block;height:100%;background:var(--mittelblau)}
.ko-hilfe{font-size:.9rem;min-width:160px}
.ko-hilfe small{color:var(--muted)}
.ko-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.88rem;font-weight:700;color:var(--muted)}
.ko-legende span{display:inline-flex;align-items:center;gap:6px}
.ko-legende i{width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.ko-legende i.fertig{background:var(--gruen-soft)}.ko-legende i.dran{background:#e4f1fe}.ko-legende i.nicht{background:#f8fafc}
.ko-legende i.leer{background:repeating-linear-gradient(45deg,#f8fafc 0 3px,#e2e8f0 3px 6px)}

/* Schule */
.ko-schritte{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ko-klassen{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.ko-klasse.alt{background:var(--flaeche2)}
.ko-code-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ko-code{font:800 1.25rem/1.2 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.06em;background:#fff8db;border:1.5px dashed #d9ad00;border-radius:10px;padding:4px 10px;color:var(--dunkelblau)}
.ko-archiv{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:4px 16px}
.ko-archiv>summary{cursor:pointer;font-weight:800;padding:10px 0}
.ko-archiv[open]>summary{margin-bottom:10px}
.ko-archiv[open]{padding-bottom:16px}
.ko-klassenkopf{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.ko-oben{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ko-oben .karte{gap:8px}
.ko-gross-zahl{font-size:1.05rem;color:var(--ink)!important}
.ko-gross-zahl b{font-size:2rem;color:var(--gruen)}
.ko-zuerst{list-style:none;padding:0;display:grid;gap:8px}
.ko-zuerst li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ko-zuerst span{background:var(--flaeche2);border-radius:999px;padding:1px 10px;font-weight:700;font-size:.92rem}
.ko-zuerst small{color:var(--muted)}
.ko-chip-link{text-decoration:none;color:inherit}
.ko-bildcode-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ko-bildcode{display:inline-flex;gap:10px}
.ko-bildcode>span{display:grid;justify-items:center;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--flaeche2);border-radius:12px;padding:6px 8px}
.ko-linie{border:0;border-top:1px solid var(--line);margin:4px 0}
.ko-platz-profil{display:grid;gap:10px}

/* Prüfungen */
.ko-pruefungen{display:grid;gap:14px}
.ko-freigaben{list-style:none;padding:0;display:grid;gap:8px}
.ko-freigaben li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.ko-freigaben li>span:first-child{display:grid;margin-right:auto}
.ko-freigaben small{color:var(--muted)}
.ko-freigaben li.offen{border-color:#9fd9bd;background:#f3fbf7}
.ko-abgaben{font-weight:800;font-variant-numeric:tabular-nums}
.ko-status{display:inline-block;border-radius:999px;padding:0 9px;font-size:.78rem;font-weight:800;background:var(--flaeche2);color:var(--muted)}
.ko-status.offen{background:var(--gruen-soft);color:var(--gruen)}.ko-status.geplant{background:#e4f1fe;color:var(--mittelblau)}
.ko-bau{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:20px;align-items:start}
.ko-bau-links{display:grid;gap:14px;min-width:0}
.ko-bau-rechts{position:sticky;top:140px;max-height:calc(100vh - 160px);overflow:auto;border-radius:16px}
@media (max-width:1120px){.ko-bau-rechts{top:84px;max-height:calc(100vh - 100px)}}
@media (max-width:900px){.ko-bau{grid-template-columns:1fr}.ko-bau-rechts{position:static;max-height:none;overflow:visible}}
.ko-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line)}
.ko-tabs [role=tab]{font:800 1rem var(--schrift);border:0;background:none;color:var(--muted);padding:10px 16px;min-height:46px;border-radius:12px 12px 0 0;cursor:pointer;margin-bottom:-2px;border-bottom:3px solid transparent}
.ko-tabs [role=tab][aria-selected=true]{color:var(--mittelblau);border-bottom-color:var(--mittelblau);background:var(--paper)}
.ko-tabs [role=tab]:hover{color:var(--mittelblau)}
.ko-suche{display:grid;gap:10px}
.ko-suchfeld input{width:100%;font:600 1.05rem var(--schrift);padding:13px 16px 13px 44px;border-radius:14px;border:2px solid var(--line);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%235b6577' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%235b6577' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 14px center/20px no-repeat;color:var(--ink)}
.ko-suchfeld input:focus{border-color:var(--mittelblau);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--mittelblau) 25%,transparent)}
.ko-filter{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 10px;align-items:end}
.ko-filter label{display:grid;gap:3px;font-weight:800;font-size:.85rem;min-width:0}
.ko-filter select{width:100%;padding:8px 10px;min-height:44px;font-size:.95rem}
.ko-filter .haken-feld{display:flex;align-items:center;gap:8px;min-height:44px;font-size:.95rem}
.ko-anzahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-weight:800}
.ko-fragen{display:grid;gap:10px}
.ko-frage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ko-frage.drin{border-color:var(--mittelblau);box-shadow:inset 4px 0 0 var(--mittelblau)}
.ko-frage-text{display:grid;gap:6px;min-width:0}
.ko-q{font-weight:800}
.ko-fbild{display:block}
.ko-frage .ko-fbild img{max-height:90px;width:auto;max-width:160px;border-radius:8px;background:#f4f8fd}
.ko-optionen{list-style:none;padding:0;margin:0;display:grid;gap:3px;font-size:.93rem;color:var(--muted)}
.ko-optionen li{display:flex;gap:6px;align-items:center}
.ko-optionen li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--flaeche2);font-size:.78rem;flex:none}
.ko-optionen li.richtig{color:var(--gruen);font-weight:700}
.ko-optionen li.richtig b{background:var(--gruen);color:#fff}
.ko-optionen img{width:28px;height:28px}
.ko-herkunft{font-size:.82rem;color:var(--muted)}
@media (max-width:520px){.ko-frage{grid-template-columns:1fr}.ko-frage>.knopf{justify-self:start}}
.ko-vorlagen{display:grid;gap:10px;margin-bottom:10px}
.ko-vorlagen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ko-vorlage{display:grid;gap:6px;align-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ko-vorlage small{color:var(--muted);font-size:.88rem;line-height:1.4}
.ko-vorlage-fuss{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ko-zus{gap:12px}
.ko-zus .formular{max-width:none}
.ko-auswahl{list-style:none;padding:0;margin:0;display:grid;gap:6px;counter-reset:a}
.ko-auswahl li[data-id]{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--flaeche2);border-radius:10px;padding:6px 6px 6px 8px;font-size:.92rem}
.ko-auswahl li.zieht{opacity:.4}
.ko-auswahl li.ueber-oben{box-shadow:0 -3px 0 var(--mittelblau)}
.ko-auswahl li.ueber-unten{box-shadow:0 3px 0 var(--mittelblau)}
.ko-griff{cursor:grab;color:var(--muted);font-size:1.1rem;user-select:none}
.ko-nr{font-weight:800;color:var(--mittelblau);min-width:1.4em;text-align:right}
.ko-auswahl .ko-q{font-weight:600}
.ko-mini-knoepfe{display:flex;gap:2px}
.ko-mini-knoepfe button{width:36px;height:36px;border:0;border-radius:8px;background:var(--paper);font:800 1rem var(--schrift);color:var(--ink);cursor:pointer}
.ko-mini-knoepfe button:hover:not([disabled]){background:var(--soft);color:var(--mittelblau)}
.ko-mini-knoepfe button[disabled]{opacity:.35;cursor:default}
.ko-auswahl-leer{color:var(--muted);font-size:.93rem;padding:8px;border:2px dashed var(--line);border-radius:10px}
.ko-einst>summary{cursor:pointer;font-weight:800;padding:6px 0}
.ko-einst .formular{gap:10px;padding-top:6px}
.ko-bau-leiste{display:none}
@media (max-width:900px){.ko-bau-leiste{display:flex;position:sticky;bottom:10px;z-index:6;margin:0 auto;align-items:center;gap:8px;font:800 1rem var(--schrift);background:var(--dunkelblau);color:#fff;border:0;border-radius:999px;padding:12px 22px;box-shadow:var(--sh-gross);cursor:pointer;min-height:48px}}
.ko-druckwahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.ko-druckwahl fieldset{border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;gap:8px;background:var(--paper)}
.ko-druckwahl legend{font-weight:800;padding:0 6px}
.ko-werkzeug{display:grid;gap:12px}

/* Auswertung */
.ko-noten{gap:10px}
.ko-aw-zahlen .zahl b small{font-size:1rem;color:var(--muted)}
.ko-note{display:inline-block;min-width:2.6em;text-align:center;border-radius:8px;padding:1px 6px;background:var(--gruen-soft);color:var(--gruen)}
.ko-note.tief{background:#fdecea;color:#b3261e}
.ko-afragen{list-style:none;padding:0;display:grid;gap:10px}
.ko-afrage{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:grid;gap:8px}
.ko-afrage.rot{border-color:#f3b4ae;box-shadow:inset 5px 0 0 #dc2626}
.ko-afrage-zahl{display:grid;grid-template-columns:minmax(80px,220px) auto;gap:10px;align-items:center;font-size:.93rem}
.ko-vert{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem}
.ko-vert li{background:var(--flaeche2);border-radius:999px;padding:2px 10px}
.ko-vert li.richtig{background:var(--gruen-soft);color:var(--gruen);font-weight:700}
.ko-kind-antworten{padding-left:0;list-style:none;display:grid;gap:8px}
.ko-kind-antworten li{border-radius:12px;padding:8px 12px;background:var(--flaeche2)}
.ko-kind-antworten li.ok{background:#f0faf5}.ko-kind-antworten li.falsch{background:#fdf1f0}
.ko-aw-knoepfe{justify-content:space-between}
.ko-gefahrzone>summary{color:#b3261e}
.ko-gefahr-box{display:grid;gap:10px;border-left:5px solid #b3261e;padding-left:14px}
.ko-gefahr-box p{color:var(--ink)}

/* ---------- Papier: Vorschau am Bildschirm und Druck (A4, Rand 14 mm → Inhalt 182 × 269 mm) ---------- */
.ko-papier-vorschau{zoom:var(--zoom,1);padding:14mm 0 4mm;overflow:hidden}
.ko-blatt{width:182mm;margin:0 auto 28mm;background:#fff;color:#000;box-shadow:0 0 0 14mm #fff,0 0 0 calc(14mm + 1px) #cbd5e1,0 10mm 20mm 14mm rgba(12,36,58,.12);font:400 11pt/1.4 var(--schrift);position:relative}
.ko-blatt-fest{height:269mm;overflow:hidden}
.ko-blatt-fluss{min-height:269mm}
.ko-blatt img{display:inline-block}
.ko-blatt-kopf,.ko-r-kopf{display:flex;align-items:center;justify-content:space-between;gap:6mm;border-bottom:.5mm solid #0c243a;padding-bottom:2.5mm;margin-bottom:4mm;font-size:12pt}
.ko-blatt-kopf img,.ko-r-kopf img{width:28mm;height:auto}
.ko-blatt-kopf div,.ko-r-kopf div{text-align:right}
.ko-klein-druck{font-size:9.5pt;color:#333;margin:2mm 0}
.ko-druck-h{font-size:13pt;margin:5mm 0 2mm}
.ko-druck-tabelle{width:100%;border-collapse:collapse;font-size:10pt}
.ko-druck-tabelle th,.ko-druck-tabelle td{border:.3mm solid #666;padding:1.6mm 2mm;text-align:left;vertical-align:top}
.ko-druck-tabelle th{background:#eef2f6}
.ko-druck-tabelle .z{text-align:center;width:12mm}
.ko-druck-tabelle.ko-punkte td{height:8.5mm}
.ko-dt-bilder{white-space:nowrap}.ko-dt-bilder svg{vertical-align:middle;margin-right:1mm}.ko-dt-bilder small{font-size:8pt;color:#444}
.ko-skala{display:flex;flex-wrap:wrap;gap:1.5mm;font-size:9pt}
.ko-skala span{border:.3mm solid #999;border-radius:1.5mm;padding:.6mm 1.8mm}
/* Prüfungsblatt */
.ko-r-felder{display:flex;flex-wrap:wrap;gap:3mm 8mm;font-size:11pt}
.ko-r-felder span{display:inline-flex;align-items:flex-end;gap:2mm}
.ko-r-felder i{display:inline-block;width:45mm;border-bottom:.3mm solid #000;height:5mm}
.ko-r-felder i.kurz{width:0;border:0}
.ko-r-felder.fluss{margin-bottom:3mm}
.ko-dfragen{list-style:none;padding:0;margin:0;display:grid;gap:3mm}
.ko-dfrage{break-inside:avoid;page-break-inside:avoid;border-top:.2mm solid #ccc;padding-top:3mm;display:grid;gap:2mm}
.ko-dq{font-weight:700;font-size:11.5pt}
.ko-dq b{display:inline-grid;place-items:center;min-width:7mm;height:7mm;border-radius:50%;background:#0c243a;color:#fff;font-size:10pt;margin-right:2mm}
.ko-dbild img{max-height:26mm;max-width:60mm;width:auto}
.ko-dopt{list-style:none;padding:0 0 0 9mm;margin:0;display:grid;gap:1.6mm}
.ko-dopt li{display:flex;align-items:center;gap:2.5mm}
.ko-dopt .ko-fbild img{width:10mm;height:10mm}
.ko-kasten{width:5mm;height:5mm;border:.35mm solid #000;border-radius:.8mm;flex:none}
/* Antwortraster und Lösungsschablone: feste Positionen in mm (konto-pruefung.js RASTER) */
.ko-raster>*{position:absolute}
.ko-raster .ko-r-kopf{top:4mm;left:10mm;right:10mm}
.ko-raster .ko-r-hinweis{top:20mm;left:10mm;right:10mm;font-size:9.5pt;color:#333}
.ko-raster .ko-r-felder{top:31mm;left:10mm;right:10mm;font-size:10pt;flex-wrap:nowrap;gap:6mm;white-space:nowrap} /* eine Zeile, sonst rutscht das Datum in die Buchstaben A B C D */
.ko-raster .ko-r-felder i{width:36mm}
.ko-raster .ko-r-felder i{width:40mm}
.ko-r-punkte{display:inline-block;width:14mm;border-bottom:.3mm solid #000}
.ko-r-kreuz{width:7mm;height:7mm;transform:translate(-50%,-50%)}
.ko-r-kreuz::before,.ko-r-kreuz::after{content:"";position:absolute;background:#000}
.ko-r-kreuz::before{left:50%;top:0;bottom:0;width:.35mm;margin-left:-.175mm}
.ko-r-kreuz::after{top:50%;left:0;right:0;height:.35mm;margin-top:-.175mm}
.ko-r-buchst{width:7mm;text-align:center;font-weight:800;font-size:10pt;margin-left:-1.5mm}
.ko-r-label{font-size:10pt;font-weight:700;line-height:5mm}
.ko-r-feld{width:7mm;height:7mm;border:.35mm solid #0c243a;border-radius:1mm}
.ko-r-feld.schwarz{background:#000;border-color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.ko-r-feld.rahmen{border:1.6mm solid #000}
.ko-r-feld.blind{border:.2mm dotted #9aa4b0}
/* Kärtchen (2 × 5 pro Blatt, je 89 × 53 mm) */
.ko-kaertchen-seite{display:grid;grid-template-columns:repeat(2,89mm);grid-auto-rows:53mm;justify-content:center;align-content:start}
.ko-kaertchen{border:.3mm dashed #8a96a3;padding:3.5mm 4mm;display:grid;grid-template-rows:auto auto 1fr auto;gap:1.5mm;overflow:hidden}
.ko-k-kopf{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:10pt}
.ko-k-kopf img{width:22mm}
.ko-k-mitte{display:flex;justify-content:space-between;align-items:flex-end;gap:2mm}
.ko-k-mitte small{display:block;font-size:7pt;text-transform:uppercase;letter-spacing:.06em;color:#444}
.ko-k-code{font:800 11.5pt ui-monospace,Consolas,monospace;letter-spacing:.04em}
.ko-k-nr{text-align:right}
.ko-k-nr b{font-size:24pt;line-height:1;color:#0c243a}
.ko-k-bilder{display:flex;gap:3mm;align-items:center;justify-content:center}
.ko-k-bilder span{display:grid;justify-items:center;position:relative;font-size:7.5pt;font-weight:700}
.ko-k-bilder svg{width:12mm;height:12mm}
.ko-k-bilder i{position:absolute;left:-1.5mm;top:-1mm;font-style:normal;font-weight:800;font-size:7pt;width:3.6mm;height:3.6mm;border-radius:50%;background:#0c243a;color:#fff;display:grid;place-items:center}
.ko-k-fuss{font-size:6.8pt;line-height:1.25;color:#333;text-align:center}
@page{size:A4;margin:14mm}
@media print{
  body.ko-druck{background:#fff}
  body.ko-druck .kopf,body.ko-druck .fuss,body.ko-druck .ko-kopf,body.ko-druck .ko-reiter,body.ko-druck .ko-werkzeug,body.ko-druck .ko-meldung,body.ko-druck .probe-band,body.ko-druck .springen,body.ko-druck noscript{display:none!important}
  body.ko-druck .abschnitt,body.ko-druck .ko-abschnitt{padding:0}
  body.ko-druck .innen{max-width:none;padding:0;display:block}
  body.ko-druck .ko-inhalt{display:block}
  .ko-papier-vorschau{zoom:1!important;padding:0;overflow:visible}
  .ko-blatt{box-shadow:none;margin:0;break-after:page;page-break-after:always}
  .ko-blatt:last-child{break-after:auto;page-break-after:auto}
  .ko-blatt-fluss{min-height:0}
  .ko-dialog{display:none}
}
/* Gitter-Kinder dürfen schmaler werden als ihr Inhalt (breite Tabellen scrollen in ihrem Rahmen, nicht die Seite) */
#ko-aw,#ko-kl,#ko-pl,#ko-klassen,#ko-profile{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);min-width:0}
#ko-aw>*,#ko-kl>*,#ko-pl>*,.ko-werkzeug>*,.ko-bau-links>*,.ko-oben>*{min-width:0}
.ko-werkzeug,.ko-papier-vorschau{min-width:0}
.ko-oben{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.ko-druckwahl{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.ko-druckwahl .formular input,.ko-druckwahl .formular select{max-width:100%;min-width:0}

/* Für Lehrpersonen: halbes A4-Blatt «Montibit speichert keine Namen» (schule.html), allein druckbar */
.schul-blatt{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:22px 26px;display:grid;gap:10px;max-width:760px}
.schul-blatt-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:2px solid var(--dunkelblau);padding-bottom:8px;font-weight:800;color:var(--muted);font-size:.9rem}
.schul-blatt-kopf img{width:120px}
.schul-blatt h3{font-size:1.35rem}
.schul-blatt .haken{gap:6px;font-size:.98rem}
@media print{
  body.drucke-blatt main>section:not(#datenschutz),body.drucke-blatt #datenschutz .kopfzeile,body.drucke-blatt #datenschutz .knoepfe{display:none!important}
  body.drucke-blatt .abschnitt{padding:0;border:0}
  body.drucke-blatt .schul-blatt{box-shadow:none;border:.3mm solid #999;max-width:none;font-size:10.5pt;padding:8mm 10mm;break-inside:avoid}
}
/* Preis-Staffel Klassen-Abo (schule.html) */
.staffel{width:100%;border-collapse:collapse;font-size:.95rem}
.staffel caption{text-align:left;font-weight:800;font-size:.85rem;color:var(--muted);padding-bottom:4px}
.staffel th,.staffel td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.staffel th{font-size:.82rem;color:var(--muted)}
.staffel td:last-child{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.ko-routewahl>span>.chip{justify-self:start}

/* sc-anfang (Für Schulen) */
/* ---------- Für Schulen (schule.html, pakete.html, Startseite) – Präfix sc- ---------- */
.sc-start{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid #cfe5fb;border-radius:16px;padding:8px 14px 8px 10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem;box-shadow:var(--sh);max-width:100%}
.sc-start svg{width:30px;height:30px;flex:none}
.sc-start b{color:var(--mittelblau)}
.sc-start:hover{border-color:var(--mittelblau)}
/* Sprung-Leiste und Inhalt */
.sc-sprung{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px}
.sc-sprung a{display:flex;align-items:center;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--sh);text-decoration:none;color:var(--ink)}
.sc-sprung a:hover{border-color:var(--mittelblau)}
.sc-sprung .ico{width:48px;height:48px;border-radius:12px;background:var(--soft);display:grid;place-items:center;flex:none}
.sc-sprung .ico svg{width:34px;height:34px}
.sc-sprung b{display:block;font-size:1.08rem}
.sc-sprung small{display:block;color:var(--muted);font-weight:600;font-size:.88rem}
.sc-inhalt{display:flex;flex-wrap:wrap;gap:8px}
.sc-inhalt a{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.93rem;text-decoration:none;color:var(--ink)}
.sc-inhalt a:hover{border-color:var(--mittelblau);color:var(--mittelblau)}
/* Schild «In Entwicklung» / «bald» */
.sc-bald{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px;line-height:1.3;vertical-align:middle;white-space:nowrap}
.sc-bald.klein{font-size:.66rem;padding:1px 7px;letter-spacing:.04em}
.sc-bald.gross{font-size:.8rem;padding:4px 12px;margin-right:6px;position:relative;top:-.2em}
.sc-bald-hinweis{background:#fff4ea;border-color:#fdd2ad}
.sc-bald-hinweis b .sc-bald{margin-right:6px}
/* Schulband auf der Pakete-Seite: gleichwertig zur Familie, eigene Fläche */
.abschnitt.sc-schulband{background:linear-gradient(180deg,#e4f1fe,#f4f9ff);border-block:1px solid #cfe5fb}
.sc-preise .karte .knopf{justify-self:start}
.sc-preise .karte p.kleiner{margin-top:-6px}
/* Bilder mit Rahmen */
.sc-rahmen{margin:0;display:grid;gap:8px;min-width:0}
.sc-rahmen img{width:100%;border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh-gross);background:#fff}
.sc-rahmen figcaption{font-size:.88rem;color:var(--muted);font-weight:600}
.sc-held-bilder{position:relative;padding:0 0 18% 0}
.sc-held-bilder .breit{width:92%}
.sc-held-bilder .breit img{aspect-ratio:1100/620;object-fit:cover;object-position:top left}
.sc-held-bilder .tablet{position:absolute;right:0;bottom:0;width:52%}
.sc-held-bilder .tablet img{border:6px solid var(--dunkelblau);border-radius:18px}
@media (max-width:900px){.sc-held .innen{grid-template-columns:minmax(0,1fr)}.sc-held-bilder{max-width:560px}}
/* Zweispaltig: Bild und Punkte */
.sc-zwei{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start}
.sc-zwei.gleich{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
@media (max-width:860px){.sc-zwei,.sc-zwei.gleich{grid-template-columns:minmax(0,1fr)}}
.sc-punkte{display:grid;gap:16px}
.sc-punkte>div{border-left:4px solid var(--hellblau);padding-left:14px;display:grid;gap:4px}
.sc-punkte p{color:var(--muted)}
.sc-punkte h3{font-size:1.1rem}
.sc-punkte>.sc-kind{border-left-color:var(--gelb);display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.sc-nr{background:var(--dunkelblau);color:#fff;font-weight:800;border-radius:10px;padding:4px 12px}
.sc-sym{display:flex;gap:6px}
.sc-sym i{font-style:normal;font-weight:800;font-size:.85rem;background:#fff8db;border:1px solid #f6dd7a;border-radius:8px;padding:3px 9px}
.sc-kind p{flex-basis:100%}
/* Lehrplan 21: Zusammenfassung */
.sc-zyk-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.sc-zyk{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:18px 20px;display:grid;gap:10px;align-content:start}
.sc-zyk.z2{border:2.5px solid var(--mittelblau)}
.sc-zyk.z0{background:var(--flaeche2);box-shadow:none}
.sc-zyk-kopf{display:grid;gap:2px}
.sc-zyk-kopf span{color:var(--muted);font-size:.88rem;font-weight:700}
.sc-zyk-zahl{font-weight:700}
.sc-zyk-zahl b{font-size:2.2rem;line-height:1;color:var(--mittelblau);font-variant-numeric:tabular-nums;margin-right:4px}
.sc-zyk.z3 .sc-zyk-zahl b{color:#2a5f9e}
.sc-balken{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--line)}
.sc-balken i{display:block;height:100%}
.sc-balken .ab,.sc-legende .ab{background:#2e9e63}
.sc-balken .te,.sc-legende .te{background:var(--gelb)}
.sc-balken .ni,.sc-legende .ni{background:#c3ccd6}
.sc-legende{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;font-weight:700;color:var(--muted)}
.sc-legende li{display:flex;align-items:center;gap:6px}
.sc-legende i{width:12px;height:12px;border-radius:3px;display:inline-block}
.sc-regel{line-height:1.9}
.sc-status{display:inline-block;font-size:.78rem;font-weight:800;border-radius:999px;padding:1px 9px;line-height:1.5;white-space:nowrap}
.sc-status.ab{background:var(--gruen-soft);color:var(--gruen)}
.sc-status.te{background:#fff3bf;color:#6b4f00}
.sc-status.ni{background:var(--flaeche2);color:#4a5568;box-shadow:inset 0 0 0 1px var(--line)}
.sc-lp-werkzeug{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.sc-bereich{font-size:1.3rem;margin-top:8px}
.sc-bereich small{font-size:.9rem;color:var(--muted);font-weight:700;margin-left:6px}
/* Lehrplan 21: Kompetenzen zum Aufklappen */
.sc-lp-liste{display:grid;gap:10px}
.sc-komp{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
.sc-komp[open]{border-color:#b9d8f8}
.sc-komp>summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 18px}
.sc-komp>summary::-webkit-details-marker{display:none}
.sc-komp>summary::after{content:"+";color:var(--mittelblau);font-size:1.5rem;font-weight:800;line-height:1;grid-column:3;grid-row:1}
.sc-komp[open]>summary::after{content:"–"}
.sc-komp-t{display:grid;gap:2px}
.sc-komp-t b{font-size:1.1rem}
.sc-komp-t small{color:var(--muted);font-size:.9rem}
.sc-komp-n{grid-column:2/4;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.88rem;color:var(--muted);font-weight:700}
.sc-komp-n b{color:var(--ink)}
.sc-komp-hinweis{padding:0 18px}
.sc-komp>p:last-child{padding:6px 18px 16px}
.sc-code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-weight:700;font-size:.85rem;background:var(--soft);color:var(--dunkelblau);border-radius:8px;padding:2px 8px;white-space:nowrap;align-self:start;justify-self:start}
.sc-code.gross{font-size:1rem;padding:6px 10px;background:var(--dunkelblau);color:#fff}
.sc-stufen{list-style:none;padding:0 12px 6px;margin:0;display:grid;gap:0}
.sc-stufe{display:grid;grid-template-columns:96px minmax(0,1fr) 190px 170px;gap:8px 14px;align-items:start;padding:12px 6px;border-top:1px solid var(--line)}
.sc-stufe[data-z="1"]{opacity:.82}
.sc-stufe-t{display:grid;gap:2px}
.sc-stufe-t span{color:var(--muted);font-size:.92rem}
.sc-marken{display:flex;flex-wrap:wrap;gap:4px}
.sc-marken i{font-style:normal;font-size:.72rem;font-weight:800;color:#2a5f9e;border:1px solid #b9d8f8;border-radius:6px;padding:0 6px}
.sc-stufe-z{display:flex;flex-wrap:wrap;gap:6px;align-content:start}
.sc-z{font-size:.78rem;font-weight:800;border-radius:999px;padding:1px 9px;line-height:1.5;white-space:nowrap}
.sc-z.z2{background:var(--mittelblau);color:#fff}
.sc-z.z3{background:var(--soft);color:#2a5f9e}
.sc-z.z1{background:var(--flaeche2);color:var(--muted)}
.sc-stufe-n{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:.9rem;color:var(--muted);font-weight:600}
.sc-stufe-n b{color:var(--ink);font-variant-numeric:tabular-nums}
.sc-auf{font-size:.84rem;color:#8a4a00}
.sc-lek{grid-column:2/-1}
.sc-lek summary{cursor:pointer;font-weight:800;font-size:.9rem;color:var(--mittelblau);width:max-content;max-width:100%}
.sc-lek ul{list-style:none;padding:6px 0 0;margin:0;display:grid;gap:4px;font-size:.93rem}
.sc-lek li small{color:var(--muted)}
.sc-haupt{font-size:.7rem;font-weight:800;color:var(--gruen);background:var(--gruen-soft);border-radius:6px;padding:0 6px;white-space:nowrap}
@media (max-width:900px){
  .sc-stufe{grid-template-columns:auto minmax(0,1fr)}
  .sc-stufe-z,.sc-stufe-n,.sc-lek{grid-column:1/-1}
  .sc-komp>summary{grid-template-columns:minmax(0,1fr) auto}
  .sc-komp>summary .sc-code{grid-column:1}
  .sc-komp>summary::after{grid-column:2;grid-row:1}
  .sc-komp-t,.sc-komp-n{grid-column:1/-1}
}
.sc-ak{align-content:start}
.sc-nicht{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
.sc-nicht li{background:var(--flaeche2);border-radius:14px;padding:14px 16px;display:grid;gap:4px;align-content:start;border-left:4px solid #c3ccd6}
.sc-nicht span{color:var(--muted);font-size:.95rem}
/* Werkstätten mit Lehrplan-Codes */
.sc-codes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.sc-codes li{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.75rem;font-weight:700;background:var(--soft);color:var(--dunkelblau);border-radius:6px;padding:1px 6px}
.sc-wk-raster{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
@media (max-width:600px){
  .sc-wk-raster{gap:10px}
  .sc-wk-raster .wk{grid-template-columns:118px minmax(0,1fr);grid-template-rows:none}
  .sc-wk-raster .wk .bild{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--line)}
  .sc-wk-raster .wk .text{padding:10px 12px}
  .sc-wk-raster .wk p{font-size:.88rem}
}
/* Prüfungen: Schritte mit Bild */
.sc-schritte-bild{list-style:none;padding:0;display:grid;gap:28px}
.sc-schritte-bild>li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px;align-items:center}
.sc-schritte-bild>li:nth-child(even){grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
.sc-schritte-bild>li:nth-child(even)>div{order:2}
.sc-schritte-bild>li>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:center;justify-items:start}
.sc-schritte-bild>li>div>*{grid-column:1/-1}
.sc-schritte-bild>li>div>.sc-schritt-nr{grid-column:1}
.sc-schritte-bild>li>div>.sc-schritt-nr+*{grid-column:2;margin:0}
.sc-schritte-bild p{color:var(--muted)}
.sc-schritt-nr{width:38px;height:38px;border-radius:50%;background:var(--mittelblau);color:#fff;font-weight:800;display:grid;place-items:center}
@media (max-width:860px){.sc-schritte-bild>li,.sc-schritte-bild>li:nth-child(even){grid-template-columns:minmax(0,1fr);gap:14px}.sc-schritte-bild>li:nth-child(even)>div{order:0}}
/* Unterrichts-Studio */
.sc-gross{font-size:2rem;font-weight:800;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums}
.sc-studio-beispiele{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px;align-items:start}
.sc-studio-beispiele .karte{border-style:dashed;border-width:1.5px;border-color:#f3b77f}
.sc-studio-beispiele .sc-bald{justify-self:start;white-space:normal}
.sc-zeitleiste{list-style:none;padding:0;display:grid;gap:0}
.sc-zeitleiste li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.sc-zeitleiste li:first-child{border-top:0}
.sc-zeitleiste div{display:grid;gap:2px}
.sc-zeitleiste div span{color:var(--muted);font-size:.9rem}
.sc-min{font-weight:800;color:var(--mittelblau);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-auftrag-meta{display:flex;flex-wrap:wrap;gap:6px}
.sc-auftrag-meta span{font-size:.8rem;font-weight:800;background:var(--flaeche2);color:var(--ink);border-radius:999px;padding:2px 10px}
.karte p.sc-auftrag-text{color:var(--ink);background:#fffdf3;border-left:4px solid var(--gelb);padding:10px 12px;border-radius:0 10px 10px 0}
.sc-kommentar dl{margin:0;display:grid;gap:4px}
.sc-kommentar dt{font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mittelblau);margin-top:6px}
.sc-kommentar dd{margin:0;color:var(--muted)}
.sc-kommentar dd ul{padding-left:1.1em;display:grid;gap:2px}
.sc-einheit-kopf{display:flex;gap:12px;align-items:flex-start}
.sc-buchstabe{width:44px;height:44px;border-radius:12px;background:var(--dunkelblau);color:var(--gelb);font-weight:800;font-size:1.3rem;display:grid;place-items:center;flex:none}
/* Konten getrennt */
.sc-konten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sc-konto{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh)}
.sc-konto .ico{width:52px;height:52px;border-radius:14px;background:var(--soft);display:grid;place-items:center;flex:none}
.sc-konto .ico svg{width:36px;height:36px}
.sc-konto>div{display:grid;gap:4px}
.sc-konto.sch{border-color:#b9d8f8}
.sc-konto p{color:var(--muted);font-size:.95rem}
.sc-konten-regel{grid-column:1/-1;background:#fff8db;border:1px solid #f6dd7a;border-radius:14px;padding:12px 16px}
@media (max-width:640px){.sc-konten{grid-template-columns:minmax(0,1fr)}}
/* Vergleich Familien | Schulklassen */
.sc-vergleich-rahmen{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden}
.sc-vergleich{width:100%;border-collapse:collapse;font-size:.97rem}
.sc-vergleich caption{text-align:left;padding:12px 18px 0}
.sc-vergleich th,.sc-vergleich td{padding:11px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.sc-vergleich thead th{font-size:1.05rem;border-top:0;white-space:nowrap}
.sc-vergleich thead th svg{width:28px;height:28px;vertical-align:middle;margin-right:8px;display:inline-block}
.sc-vergleich{table-layout:fixed}
.sc-vergleich thead td{border-top:0;width:22%}
.sc-vergleich thead th{width:39%}
.sc-vergleich tbody th{font-weight:800;width:20%;color:var(--ink)}
.sc-vergleich td{color:var(--muted);width:40%}
.sc-vergleich td:last-child{background:#f4f9ff}
.sc-vergleich thead th:last-child{background:#e4f1fe}
@media (max-width:640px){
  .sc-vergleich thead{display:none}
  .sc-vergleich,.sc-vergleich tbody,.sc-vergleich tr,.sc-vergleich th,.sc-vergleich td{display:block;width:auto}
  .sc-vergleich tr{border-top:1px solid var(--line);padding:10px 14px}
  .sc-vergleich tbody th,.sc-vergleich td{border:0;padding:3px 0;width:auto}
  .sc-vergleich caption{display:block;padding:12px 14px 0}
  .sc-vergleich td::before{content:attr(data-k) ": ";font-weight:800;color:var(--ink)}
  .sc-vergleich td:last-child{background:none}
}
/* sc-ende */
/* ko-abo: Konto-Seite, Bereich «Klassen-Abo» (konto-abo.js) */
.chip.ko-abo-rot{background:#fee2e2;color:#991b1b}
.ko-abo-einleitung{max-width:72ch;margin:0}
.ko-abo-kauf{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
.ko-abo-kauf h3,.ko-abo-schule-raster h3{margin:0}
.ko-abo-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ko-abo-klasse{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--paper);cursor:pointer}
.ko-abo-klasse.an{border-color:var(--mittelblau);background:var(--soft)}
.ko-abo-klasse.aus{cursor:default;background:var(--flaeche2)}
.ko-abo-klasse input{width:22px;height:22px;accent-color:var(--mittelblau);margin:0}
.ko-abo-kname{display:grid;gap:2px;min-width:0}
.ko-abo-kname small{color:var(--muted);font-weight:600}
.ko-abo-klasse.aus .ko-abo-kname small{color:#7a4b00}
.ko-abo-neu{border-top:1px dashed var(--line);padding-top:12px;font-weight:600}
.ko-abo-bestellung{position:sticky;top:84px}
.ko-abo-leer{margin:0;color:var(--muted);font-weight:700}
.ko-abo-satz{margin:0;font-weight:600}
.ko-abo-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:4px 0 0;border-top:2px solid var(--ink);padding-top:8px;font-weight:800}
.ko-abo-total b{font-size:1.6rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.ko-abo-mwst{margin:-4px 0 0}
.ko-abo-staffel{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:4px}
.ko-abo-staffel caption{text-align:left;font-weight:800;font-size:.85rem;color:var(--muted);padding-bottom:4px}
.ko-abo-staffel td{padding:5px 8px;border-bottom:1px solid var(--line)}
.ko-abo-staffel .z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ko-abo-staffel tr.ko-abo-aktiv td{background:var(--gruen-soft);color:var(--gruen);font-weight:800}
.ko-abo-staffel tr.ko-abo-aktiv td:first-child{border-radius:8px 0 0 8px}
.ko-abo-staffel tr.ko-abo-aktiv td:last-child{border-radius:0 8px 8px 0}
.ko-abo-zahlart{margin-top:6px}
.ko-abo-an p{margin:2px 0 0}
.ko-abo-an .hinweis{padding:12px 16px}
.ko-abo-los{width:100%;justify-content:center}
.ko-abo-rechnungen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ko-abo-rechnungen li{display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,2fr) auto auto auto;gap:8px 14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--paper)}
.ko-abo-rechnungen small{display:block;color:var(--muted);font-weight:600;font-size:.85rem}
.ko-abo-rnr b{font-variant-numeric:tabular-nums}
.ko-abo-rkl{min-width:0}
.ko-abo-rkl small{display:inline}
.ko-abo-rbetrag{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ko-abo-schule-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.ko-abo-schule-raster .karte>p{margin:0}
.ko-abo-plzort{grid-template-columns:110px minmax(0,1fr)}
.ko-abo-leute li small{display:block;color:var(--muted);font-weight:600}
.ko-abo-uid{white-space:nowrap}
.ko-abo-bestaetigung tfoot th{text-align:left;font-weight:600}
@media (max-width:860px){
  .ko-abo-kauf,.ko-abo-schule-raster{grid-template-columns:1fr}
  .ko-abo-bestellung{position:static}
  .ko-abo-rechnungen li{grid-template-columns:minmax(0,1fr) auto}
  .ko-abo-rkl{grid-column:1/-1;order:3}
  .ko-abo-rechnungen .chip{justify-self:start}
}
@media (max-width:480px){
  .ko-abo-klasse{grid-template-columns:auto minmax(0,1fr)}
  .ko-abo-klasse .chip{grid-column:2;justify-self:start}
  .ko-abo-plzort{grid-template-columns:90px minmax(0,1fr)}
}

/* Länder-Ausgabe auf Preiskarten (21.10.2026) */
.ausgabe{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:.88rem;color:var(--leise,#5b6577)}
.ausgabe b{color:var(--ink,#0c243a)}
.ausgabe-flagge{width:20px;height:20px;flex:none}