/* =========================================================
   Prüfstand – gemeinsame Stildatei
   Gilt für Startseite, Materialsammlung, Rechtstexte und
   alle Kontrollstationen. Schriften liegen lokal (DSGVO).
   ========================================================= */

@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/bricolage-grotesque-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2")}

/* ---------- Farben ----------
   --marker  = Farbe der Seite (Textmarker Gelb)
   --c0…--c8 = Kapitelfarben, in jeder Einheit gleich:
               Kapitel 1 immer Blau, 2 immer Grün usw.   */
:root{
  color-scheme:light;
  --paper:#F5F1EB; --surface:#FFFFFF; --ink:#141414; --muted:#5F5B55;
  --line:#E6E0D7; --line-strong:#CFC7BB; --slot:#F1ECE4;
  --marker:#F7E55A; --on-marker:#141414; --on-c:#FFFFFF;
  --c0:#595959; --c1:#1F5FA8; --c2:#2E7D32; --c3:#B45F06; --c4:#6A3D9A;
  --c5:#00796B; --c6:#B3261E; --c7:#37474F; --c8:#8A6D00;
  --shadow:0 1px 2px rgba(40,30,10,.05),0 12px 30px rgba(60,45,20,.09);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Segoe UI",Verdana,system-ui,sans-serif;
  --r:14px; --scale:1;
  --mint:#9FE6CC; --rosa:#F9BCD3; --lila:#D2C1F4; --sky:#B5D6F4;
  --fach-mathe:var(--mint); --fach-technik:var(--rosa); --fach-lehr:var(--lila);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#171614; --surface:#211F1C; --ink:#F1EEE9; --muted:#AAA39A;
    --line:#34312C; --line-strong:#48443D; --slot:#2A2724;
    --marker:#E3D24E; --on-c:#171614;
    --mint:#3F8F75; --rosa:#A3506F; --lila:#6F5A9C; --sky:#3F6FA3;
    --c0:#B6C0CA; --c1:#7DB3F0; --c2:#86CF8B; --c3:#F2A75F; --c4:#BC9DE2;
    --c5:#5ECDBA; --c6:#F38E84; --c7:#B1C2CE; --c8:#E3C15A;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#171614; --surface:#211F1C; --ink:#F1EEE9; --muted:#AAA39A;
  --line:#34312C; --line-strong:#48443D; --slot:#2A2724;
  --marker:#E3D24E; --on-c:#171614;
  --c0:#B6C0CA; --c1:#7DB3F0; --c2:#86CF8B; --c3:#F2A75F; --c4:#BC9DE2;
  --c5:#5ECDBA; --c6:#F38E84; --c7:#B1C2CE; --c8:#E3C15A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.35);
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:calc(17px * var(--scale));line-height:1.55;padding-inline:clamp(16px,4vw,48px);padding-block:0 40px;overflow-x:clip}
:root[data-size="s"]{--scale:.9}
:root[data-size="l"]{--scale:1.25}
.wrap{max-width:1180px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0;letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.eyebrow{font-size:.78em;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hl{background:linear-gradient(transparent 50%,var(--hl,var(--marker)) 50%,var(--hl,var(--marker)) 92%,transparent 92%);padding-inline:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:16px}

/* ---------- Kopfzeile ---------- */
.site-top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-block:18px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.mark{width:42px;height:42px;border-radius:10px;background:var(--marker);display:grid;place-items:center;flex:none;transform:rotate(-4deg)}
.mark svg{width:24px;height:24px;stroke:var(--on-marker)}
.brand b{font-family:var(--display);font-size:1.3em;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.1}
.brand small{display:block;color:var(--muted);font-size:.74em;line-height:1.25}
.site-nav{display:flex;gap:2px;flex-wrap:wrap}
.site-nav a{text-decoration:none;padding:10px 12px;border-radius:10px;font-weight:700;font-size:.92em;color:var(--muted)}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"] span{background:linear-gradient(transparent 58%,var(--hl,var(--marker)) 58%,var(--hl,var(--marker)) 94%,transparent 94%)}
.pillbtn{border:1px solid var(--line-strong);background:var(--surface);border-radius:99px;padding:8px 16px;min-height:44px;font-weight:700;font-size:.85em;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.pillbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pillbtn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink);font-size:.95em;padding:10px 20px;min-height:50px}
.tools{display:flex;gap:8px;align-items:center}

/* ---------- Startseite ---------- */
.hero{padding-block:clamp(36px,7vw,84px) clamp(28px,5vw,56px);display:grid;gap:20px;max-width:900px}
.hero h1{font-size:clamp(2.5rem,7vw,5.2rem);font-weight:800;letter-spacing:-.03em}
.hero .lead{font-size:1.12em;color:var(--muted);max-width:52ch}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.section{padding-block:34px 8px;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:18px}
.section-head h2{font-size:var(--fs-hub);font-weight:800}
.section-head p{color:var(--muted);max-width:52ch}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:12px;align-content:start;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .15s ease,border-color .15s ease}
a.card:hover{transform:translateY(-2px);border-color:var(--ink)}
.card h3{font-size:1.4em;font-weight:800}
.card p{color:var(--muted);font-size:.95em}
.card .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88em;font-weight:700;margin-top:4px}
.card .meta .muted{font-weight:400}
.card .go{display:inline-flex;align-items:center;gap:6px}
.stripe{display:flex;gap:4px;height:10px}
.stripe i{flex:1;border-radius:3px;background:var(--cc)}
.chapters{display:flex;flex-wrap:wrap;gap:6px}
.chapters span{display:inline-flex;align-items:center;gap:6px;font-size:.8em;color:var(--muted)}
.chapters span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--cc)}
.card.ext .tag{font-size:.74em;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--muted)}

/* ---------- Unterseiten ---------- */
.crumb{font-size:.88em;color:var(--muted);padding-top:22px}
.crumb a{font-weight:700;text-decoration:none}
.page-head{padding-block:14px 26px;display:grid;gap:12px}
.page-head h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:800}
.page-head p{color:var(--muted);max-width:62ch}

/* Materialsammlung */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters button{border:1px solid var(--line-strong);background:var(--surface);border-radius:99px;padding:8px 16px;min-height:44px;font-weight:700;font-size:.88em}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mat-group{margin-bottom:30px}
.mat-group>h2{font-size:1.35em;margin-bottom:12px}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.93em}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.74em;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:0}
td.topic{font-weight:700}
td.topic .dot{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--cc);margin-right:10px;vertical-align:-1px}
.file{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;border:1px solid var(--line-strong);text-decoration:none;font-weight:700;font-size:.9em;white-space:nowrap;min-height:40px;margin:2px 4px 2px 0}
.file:hover{border-color:var(--ink)}
.file .fmt{font-size:.72em;letter-spacing:.06em;padding:2px 6px;border-radius:4px;background:var(--slot);color:var(--muted)}
.note{display:grid;gap:6px;padding:16px 18px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font-size:.92em;color:var(--muted);margin-bottom:22px;max-width:780px}
.note b{color:var(--ink)}

/* Materialsammlung: Fächer farblich getrennt */
.filters{flex-direction:column;align-items:flex-start}
.filterrow{display:flex;gap:8px;flex-wrap:wrap}
.filterrow.sub button{font-weight:600;font-size:.82em;min-height:38px;padding:6px 14px}
.filters .fachbtn{display:inline-flex;align-items:center;gap:8px}
.filters .fachbtn[aria-pressed="true"],.filterrow.sub button[style][aria-pressed="true"]{background:var(--fc);border-color:var(--fc);color:var(--ink)}
.fdot{width:12px;height:12px;border-radius:3px;background:var(--fc);flex:none}
.fachbtn[aria-pressed="true"] .fdot{background:var(--ink)}
.fach{margin-bottom:36px}
.fach-head{display:flex;align-items:center;gap:12px;margin:10px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fach-head h2{font-size:var(--fs-hub);font-weight:800}
.fach-head .fdot{width:16px;height:16px}
.fach .mat-group>h2{padding-left:12px;border-left:5px solid var(--fc)}
.fach .table-scroll{border-top:4px solid var(--fc)}
td .mtext{display:block;font-weight:400;color:var(--muted);font-size:.9em;margin-top:4px;max-width:46ch}

/* Rechtstexte */
.legal{max-width:760px;padding-bottom:20px}
.legal h2{font-size:1.3em;margin:30px 0 10px}
.legal h3{font-size:1.05em;margin:20px 0 6px;font-family:var(--body);font-weight:700;letter-spacing:0}
.legal p,.legal ul{margin:0 0 10px;color:var(--ink)}
.legal ul{padding-left:1.2em}
.legal address{font-style:normal;margin-bottom:10px}

/* Fußzeile */
.site-foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font-size:.84em;color:var(--muted)}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.site-foot a{color:inherit}

/* =========================================================
   Kontrollstation
   ========================================================= */
.st-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);padding-block:12px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.st-brand{display:flex;align-items:center;gap:12px;min-width:0}
.st-brand .mark{width:38px;height:38px}
.st-brand .mark svg{width:21px;height:21px}
.st-home{background:none;border:0;padding:0;text-align:left;min-height:44px}
.st-home b{display:block;font-family:var(--display);font-size:1.25em;font-weight:800;line-height:1.1}
.st-home span{display:block;font-size:.8em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-width:48px;height:48px;border-radius:10px;border:2px solid var(--cc);background:var(--surface);color:var(--cc);font-weight:700;font-size:1.15em;font-family:var(--display)}
.chip[aria-current="true"]{background:var(--cc);color:var(--on-c)}

.st-intro{margin:28px 0 20px;max-width:62ch;color:var(--muted);font-size:1.05em}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:16px}
.st-card{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;min-height:100px}
.st-card:hover{border-color:var(--cc)}
.st-card .no{grid-row:span 2;width:64px;height:64px;border-radius:10px;background:var(--cc);color:var(--on-c);display:grid;place-items:center;font-size:2em;font-weight:800;font-family:var(--display)}
.st-card .t{font-weight:700;font-size:1.1em;line-height:1.2;align-self:end}
.st-card .s{color:var(--muted);font-size:.88em;align-self:start}

.chead{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:26px 0 18px}
.chead .no{width:64px;height:64px;border-radius:10px;background:var(--cc);color:var(--on-c);display:grid;place-items:center;font-size:2.2em;font-weight:800;font-family:var(--display);flex:none}
.chead h1{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:800}
.chead h1 span{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--cc) 26%,transparent) 55%,color-mix(in srgb,var(--cc) 26%,transparent) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chead .z{color:var(--muted);font-size:.88em;margin-top:4px}
.chead .tools{margin-left:auto;flex-wrap:wrap}
.btn{border:2px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 18px;min-height:48px;font-weight:700}
.btn:hover{border-color:var(--cc,var(--ink))}

.alist{display:flex;flex-direction:column;gap:12px}
.aufg{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ahead{width:100%;display:grid;grid-template-columns:auto auto 1fr auto auto;gap:6px 14px;align-items:center;text-align:left;background:none;border:0;padding:14px 18px;min-height:64px}
.ahead .id{font-weight:800;color:var(--cc);font-size:1.2em;min-width:3.2ch;font-family:var(--display)}
.ahead .lv{font-size:.95em;color:var(--muted);min-width:3.6em;letter-spacing:.1em}
.ahead .ti{font-weight:700;font-size:1.05em;line-height:1.25}
.ahead .pg{color:var(--muted);font-size:.85em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ahead .ch{width:14px;height:14px;border-right:3px solid var(--muted);border-bottom:3px solid var(--muted);transform:rotate(45deg);margin-right:6px;transition:transform .15s}
.aufg[data-expanded="true"] .ahead{border-bottom:1px solid var(--line)}
.aufg[data-expanded="true"] .ch{transform:rotate(-135deg)}
.abody{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:12px}
.abody.wide{grid-template-columns:1fr}
.tile{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left;background:var(--slot);border:2px solid transparent;border-radius:12px;padding:14px 16px;min-height:118px}
.tile .h{display:flex;gap:10px;align-items:baseline}
.tile .l{font-weight:700;font-size:1.12em;color:var(--cc);white-space:nowrap}
.tile .q{color:var(--muted);font-size:.95em;flex:1}
.tile .slot{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:.9em;font-weight:700;margin-top:auto}
.tile .slot svg{flex:none}
.tile .a{font-size:calc(clamp(1.35rem,2.2vw,1.9rem) * var(--scale));line-height:1.45;border-top:3px solid var(--cc);padding-top:8px;margin-top:auto;overflow-wrap:anywhere}
.tile .a .det{display:block;font-size:max(15px,.52em);line-height:1.45;color:var(--muted);margin-top:6px;font-weight:400}
.tile .a img{display:block;max-width:100%;height:auto;margin-top:8px;background:#fff;border-radius:8px;padding:6px}
.tile[aria-pressed="true"]{background:color-mix(in srgb,var(--cc) 12%,var(--surface));border-color:var(--cc)}
.tile[aria-pressed="false"]:hover{border-color:var(--line-strong)}
.wide .tile{min-height:0}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85em;color:var(--muted);margin:22px 0 0}

/* Brüche und Platzhalter */
.m{white-space:normal}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin-inline:.14em;line-height:1.08;font-size:.9em;font-variant-numeric:tabular-nums}
.fr .n{padding-inline:.2em;border-bottom:.075em solid currentColor}
.fr .d{padding-inline:.2em}
.mx{margin-right:.04em}
.box{display:inline-block;width:.68em;height:.68em;border:.09em solid currentColor;vertical-align:-.04em;margin-inline:.08em;border-radius:2px}
.cb{display:inline-block;width:.7em;height:.7em;border:.09em solid currentColor;vertical-align:-.05em;margin-inline:.15em;border-radius:2px}
.tile .q .fr{font-size:.95em}

/* Teilerbäume */
.tree-wrap{display:flex;justify-content:center;padding-top:4px;overflow-x:auto;font-size:max(15px,.55em)}
.tree,.tree ul,.tree li{margin:0;padding:0;list-style:none}
.tree{text-align:center}
.tree ul{display:flex;padding-top:22px;position:relative;justify-content:center}
.tree li{display:flex;flex-direction:column;align-items:center;position:relative;padding:22px 10px 0}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:22px;border-top:2px solid var(--muted)}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--muted)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--muted);border-radius:0 6px 0 0}
.tree li:first-child::after{border-radius:6px 0 0 0}
.tree ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--muted);width:0;height:22px}
.tnode{display:inline-block;background:var(--surface);color:var(--ink);border-radius:8px;padding:4px 12px;font-weight:700;border:2px solid var(--line-strong);min-width:34px}
.tnode.leaf{background:var(--cc);border-color:var(--cc);color:var(--on-c)}
.factorization{margin-top:12px;text-align:center;font-weight:700}

@media (max-width:640px){
  .brand small{display:none}
  .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:none}
  .chip{min-width:44px;height:44px;flex:none}
  .chead .no{width:52px;height:52px;font-size:1.8em}
  .ahead{grid-template-columns:auto 1fr auto}
  .ahead .lv,.ahead .pg{display:none}
  .chead .tools{margin-left:0}
}

/* =========================================================
   Darstellung: Schriftgröße, Hell/Dunkel, Bedienbarkeit
   ========================================================= */
.darst{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dpanel{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dtoggle{display:none;min-width:48px;min-height:48px;border:2px solid var(--ink);border-radius:10px;background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1em;padding:0 12px;align-items:center;justify-content:center}
.darst.open .dtoggle{background:var(--ink);color:var(--paper);box-shadow:inset 0 -4px 0 var(--marker)}
/* Sticky Leisten: Einstellungen am Handy hinter einem Knopf, damit die Leiste schmal bleibt */
@media (max-width:640px){
  .st-top .dtoggle{display:inline-flex}
  .st-top .dpanel{display:none}
}
@media (max-width:700px){
  .top .dtoggle{display:inline-flex}
  .top .dpanel{display:none}
}
@media (max-width:700px){
  .top .darst.open .dpanel{display:flex;position:absolute;right:0;top:calc(100% + 10px);z-index:60;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:10px;width:max-content;max-width:calc(100vw - 24px);justify-content:flex-end}
}
@media (max-width:640px){
  .st-top .darst.open .dpanel{display:flex;position:absolute;right:0;top:calc(100% + 10px);z-index:60;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:10px;width:max-content;max-width:calc(100vw - 24px);justify-content:flex-end}
}
.dseg{display:inline-flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--surface)}
.dseg button{border:0;background:none;min-width:48px;min-height:44px;padding:0 14px;font-family:var(--display);font-weight:700;font-size:.95em;line-height:1}
.dseg button+button{border-left:2px solid var(--ink)}
.dseg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:inset 0 -4px 0 var(--marker)}
.dseg button:hover:not([aria-pressed="true"]){background:var(--slot)}
.dseg button:focus-visible{outline-offset:-5px}
.dseg button svg{display:block;margin:auto}
.dseg-size button:nth-child(1){font-size:.85em}
.dseg-size button:nth-child(3){font-size:1.1em}

/* große Tippflächen auf allen Geräten */
.pillbtn,.btn,.filters button,.filterrow.sub button{min-height:48px}
.site-nav a{min-height:44px;display:inline-flex;align-items:center}
.file{min-height:44px}
.chip{min-width:48px;height:48px}
.card,.st-card,.tile,.ahead{touch-action:manipulation}

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

@media print{
  .site-top,.site-foot,.st-top,.tools,.filters{display:none!important}
  body{background:#fff;color:#000}
}

/* Lange Wörter und große Schrift: nichts ragt über die Karte hinaus */
.cards>*,.card,.tile,.st-card{min-width:0}
.card h3,.card p,.card .meta,.tile .a,.tile .b{overflow-wrap:break-word;hyphens:auto}

/* Externe Links: Zeichen "öffnet in neuem Tab" */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card.ext .exttop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card.ext .exticon{flex:none;color:var(--ink);width:calc(22px * var(--scale));height:calc(22px * var(--scale))}
.card.ext{border-style:dashed;border-color:var(--line-strong)}

/* ---------- Kacheln mit Zeichnung ---------- */
.card.k{position:relative;padding:0;gap:0;overflow:hidden;align-content:stretch;grid-template-rows:auto 1fr}
.card.k .art{display:flex;align-items:center;justify-content:center;height:calc(136px * var(--scale));padding:14px;background:color-mix(in srgb,var(--t,var(--mint)) 38%,var(--surface));border-bottom:1px solid var(--line);position:relative}
.card.k .art svg{height:100%;width:auto;max-width:100%;background:#fff;border-radius:12px;padding:8px;box-sizing:content-box;max-height:calc(100% - 16px)}
.card.k .cbody{display:grid;gap:10px;align-content:start;padding:18px 20px 20px;grid-template-rows:auto auto 1fr}
.card.k .cbody .meta{align-self:end}
.card.k .exticon{position:absolute;right:12px;top:12px;width:calc(24px * var(--scale));height:calc(24px * var(--scale));color:var(--ink);background:var(--surface);border-radius:8px;padding:5px;box-sizing:content-box}
.card.k.ext{border-style:dashed}

/* ---------- Startseite: Kopf und Fachbänder ---------- */
.hero{max-width:none;padding-block:clamp(28px,5vw,56px) clamp(24px,4vw,40px);gap:14px}
.hero h1{font-size:clamp(2.4rem,6.4vw,5rem);text-wrap:balance}
.hero .lead{font-size:clamp(1.05em,1.6vw,1.3em);color:var(--ink);max-width:40ch}
.band{--bandbg:color-mix(in srgb,var(--t) 30%,var(--paper));position:relative;display:grid;gap:clamp(20px,3vw,32px);padding:clamp(30px,4.5vw,52px) 0;background:var(--bandbg);box-shadow:0 0 0 100vmax var(--bandbg);clip-path:inset(0 -100vmax)}
.bandhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(18px,3vw,40px)}
.bandhead h2{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;letter-spacing:-.02em}
.bandhead p{color:var(--ink);font-size:.98em;max-width:46ch;margin:0}
.band .hl{--hl:var(--t)}
.grps{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,34px) clamp(18px,2.4vw,32px)}
.grp{display:grid;gap:12px;align-content:start;flex:var(--n,1) 1 calc(var(--n,1) * 250px);min-width:0}
.grp .cards{grid-template-columns:repeat(var(--n,1),minmax(0,1fr))}
.band>.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.grp-h{font-size:clamp(1.1rem,1.7vw,1.3rem);font-weight:800;margin:0}
.band .card{border-color:color-mix(in srgb,var(--t) 45%,var(--line))}
.band .card.k .art{background:color-mix(in srgb,var(--t) 55%,var(--surface))}
.site-foot{margin-top:clamp(36px,5vw,64px)}
@media (max-width:1000px){.grp .cards,.band>.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}}
@media (max-width:860px){.bandhead{display:grid}}

/* Textmarker im Dunkelmodus: gedämpft, damit heller Text darauf lesbar bleibt */
:root[data-theme="dark"] .hero h1 .hl{--hl:color-mix(in srgb,var(--marker) 50%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1 .hl{--hl:color-mix(in srgb,var(--marker) 50%,transparent)}}

/* =========================================================
   Vereinheitlichung (Rahmen, Überschriften, Karten, Knöpfe)
   ========================================================= */
:root{--fs-page:clamp(2rem,5vw,3.4rem);--fs-tool:clamp(1.7rem,3.4vw,2.25rem);--fs-sec:clamp(1.3rem,2.2vw,1.5rem);--fs-hub:clamp(1.6rem,3vw,2rem)}

/* Menü im Standardkopf: Navigation am Rechner, Menü-Knopf am Handy */
.nmenu{position:relative;display:none}
.nmenu-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:2px solid var(--ink);border-radius:10px;background:var(--surface);color:var(--ink);font-family:var(--display);font-weight:800;font-size:.95em}
.nmenu.open .nmenu-btn{background:var(--ink);color:var(--paper);box-shadow:inset 0 -4px 0 var(--marker)}
.nmenu-panel{display:none;position:absolute;left:0;top:calc(100% + 10px);z-index:60;min-width:210px;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:8px;box-shadow:var(--shadow)}
.nmenu.open .nmenu-panel{display:grid;gap:2px}
.nmenu-panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;font-weight:700;text-decoration:none;color:var(--ink)}
.nmenu-panel a:hover{background:var(--slot)}
@media (max-width:760px){
  .site-top{flex-wrap:nowrap;padding-block:12px}
  .site-top .brand{flex:1 1 auto}
  .site-top .brand small{display:none}
  .site-top .site-nav{display:none}
  .site-top .tools{flex:none;position:relative}
  .site-top .nmenu{display:block}
  .site-top .dtoggle{display:inline-flex}
  .site-top .dpanel{display:none}
  .site-top .darst.open .dpanel{display:flex;position:absolute;right:0;top:calc(100% + 10px);z-index:60;background:var(--surface);border:2px solid var(--ink);border-radius:12px;padding:10px;width:max-content;max-width:calc(100vw - 32px);box-shadow:var(--shadow)}
  .site-top .nmenu-panel{left:auto;right:0}
  .site-top .tools{position:static}
  .site-top .darst{position:static}
  .site-top{position:relative}
}

/* Fußzeile: überall gleich, Sicherheitshinweis als eigene Zeile */
.site-foot .foot-note{flex-basis:100%;margin:0;color:var(--ink);font-weight:700}

/* Brotkrumen: überall gleich */
.crumb{font-size:.88em;color:var(--muted);padding-top:22px}
.crumb a{font-weight:700}
.crumb .muted{font-weight:400}

/* Überschriften: drei Stufen. Seitentitel (Hub), Werkzeugseite, Abschnitt */
.page-head.compact h1{font-size:var(--fs-tool)}
.page-head.compact p{font-size:1.05em}

/* Kategorie-Labels: kleine Chips statt Großbuchstaben */
.eyebrow,.card.ext .tag{display:inline-block;justify-self:start;width:fit-content;font-size:.78em;letter-spacing:0;text-transform:none;font-weight:700;color:var(--muted);border:1px solid var(--line-strong);border-radius:99px;padding:2px 10px;background:var(--surface)}

/* Knöpfe: eine Form, eine Höhe */
.btn,.pillbtn{border-radius:12px}

/* Kontrollstation am Handy: Titel und Einstellungen in einer Zeile, Kapitel-Chips darunter */
@media (max-width:640px){
  .st-top{flex-wrap:wrap}
  .st-top .st-brand{flex:1 1 0;order:1}
  .st-top>.tools{order:2;flex:none}
  .st-top .chips{order:3}
}