/* Die Detektiv-Werkstatt · © 2026 Steffen Klee — gebaut, nicht von Hand geschrieben.
   Der erste Block stammt unveraendert aus src/styles/02-tokens.css,
   derselben Datei, aus der die Fachmodule bauen. */
/* === TOKENS === */
:root{
  --scale: 1;
  --font-display: "Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --font-body:    "Segoe UI",Verdana,system-ui,sans-serif;
  --font-read:    "Andika",Verdana,"Segoe UI",system-ui,sans-serif;   /* Kinder-Lesetext: einstoeckiges a, l mit Bogen */

  --paper:#fbf7ef; --paper-2:#f2ead9; --card:#fffdf8;
  --ink:#23201b; --ink-soft:#5c5346; --line:#e6dcc9;

  --brand:#0f8a6a; --brand-ink:#0a5f49; --brand-soft:#d9f0e8;
  --amber:#e39a2e; --amber-soft:#fbeccb;
  --blue:#3667cf;  --blue-soft:#dbe6fb;
  --red:#d5403f;   --red-soft:#fadedd;
  --green:#2c9c55; --green-soft:#d7f0de;
  --purple:#7c4dd6; --purple-soft:#ece2fb;

  --shadow-1:0 1px 2px rgba(40,30,10,.10),0 4px 12px rgba(40,30,10,.06);
  --shadow-2:0 2px 4px rgba(40,30,10,.12),0 12px 28px rgba(40,30,10,.12);
  --radius:18px; --radius-s:12px; --tap:52px;
}
html[data-theme="dark"]{
  --paper:#171a1f; --paper-2:#12151a; --card:#20242b;
  --ink:#f2ece0; --ink-soft:#b0a894; --line:#333a44;
  --brand:#35c295; --brand-ink:#7fe0c4; --brand-soft:#123a30;
  --amber:#f0b24a; --amber-soft:#3a2e14;
  --blue:#6f9bff;  --blue-soft:#1b2640;
  --red:#ff6b68;   --red-soft:#3a1c1c;
  --green:#4fcf7d; --green-soft:#123321;
  --purple:#b18cff; --purple-soft:#241a3a;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35);
  --shadow-2:0 3px 6px rgba(0,0,0,.5),0 16px 34px rgba(0,0,0,.5);
}


/* ==================================================================
   portal.css — Gestaltung des Portals
   Die Detektiv-Werkstatt · © 2026 Steffen Klee
   ==================================================================

   Die Farb- und Formtokens stehen NICHT hier, sondern in
   src/styles/02-tokens.css — derselben Datei, aus der auch die
   Wortarten-Werkstatt baut. build/portal.mjs stellt sie dieser Datei voran.
   Dadurch sehen Portal und Fachmodul wie ein Produkt aus, ohne dass
   irgendeine Farbe zweimal gepflegt wird.

   LEITGEDANKE
   Das Portal ist erwachsen, das Fachmodul ist kindgerecht. Ueber
   diese Seite entscheidet eine Schulleitung, ob sie das Produkt
   ernst nimmt; Wanda gehoert deshalb auf die Wortarten-Werkstatt-Kachel und
   nicht ins Logo der Dachmarke. Die Waerme lebt drinnen.
   ================================================================== */

/* === PORTAL-TOKENS: nur, was die App nicht kennt ================== */
:root{
  /* Ueberschriften in Literata (SIL OFL 1.1), selbst gehostet.
     Georgia als Rueckfall, weil es ueberall liegt und aehnlich baut. */
  --font-display:"Literata",Georgia,"Times New Roman",serif;
  --breite:1140px;
  --luft:clamp(3rem,7vw,6rem);
}

@font-face{
  font-family:"Literata";
  src:url("schriften/literata-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* === GRUNDLAGE ==================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.65 var(--font-body);
  text-rendering:optimizeLegibility;
}
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.15; letter-spacing:-.01em; margin:0; }
h1{ font-size:clamp(2.3rem,1.4rem + 3.2vw,3.7rem); }
h2{ font-size:clamp(1.65rem,1.2rem + 1.6vw,2.35rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1em; }
a{ color:var(--brand-ink); text-underline-offset:.18em; text-decoration-thickness:.08em; }
a:hover{ color:var(--brand); }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:6px; }
img,svg{ max-width:100%; }

.breite{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.sprung{
  position:absolute; left:.5rem; top:-4rem; z-index:100;
  background:var(--brand); color:#fff; padding:.7rem 1.1rem; border-radius:var(--radius-s);
  font-weight:600; text-decoration:none; transition:top .15s;
}
.sprung:focus{ top:.5rem; color:#fff; }

/* === KNOEPFE ====================================================== */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:.85rem 1.5rem;
  background:var(--brand); color:#fff; border:1px solid transparent; border-radius:999px;
  font:600 1rem/1 var(--font-body); text-decoration:none; cursor:pointer;
  box-shadow:var(--shadow-1); transition:transform .15s, box-shadow .15s, background .15s;
}
.knopf:hover{ background:var(--brand-ink); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-2); }
.knopf-zweit{ background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; }
.knopf-zweit:hover{ background:var(--card); color:var(--ink); border-color:var(--brand); }
.knopf-klein{ min-height:2.6rem; padding:.55rem 1.05rem; font-size:.95rem; }

/* === KOPFZEILE ==================================================== */
/* Deckender Grund statt durchscheinendem Weichzeichner. Das sah huebscher
   aus, hat sich aber beim Nachmessen als Fehlerquelle erwiesen: Nach dem
   Scrollen zeichnete der Browser die Kopfzeile mitten auf die Seite, obwohl
   ihre Geometrie richtig war - ein Compositing-Fehler von backdrop-filter.
   Auf Smartboards mit schwacher Grafik ist das kein theoretisches Risiko,
   und gewonnen war damit nichts als ein Effekt. */
.kopf{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.kopf-innen{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.5rem; }
.marke{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); }
/* nowrap seit E72: "Detektiv-Werkstatt" brach bei 761 px am Bindestrich in zwei Zeilen um. */
.marke-text{ font:700 1.16rem/1 var(--font-display); letter-spacing:-.01em; white-space:nowrap; }
.marke-text b{ font-weight:400; color:var(--ink-soft); }
.kopf-nav{ display:flex; align-items:center; gap:.4rem 1.2rem; }
.kopf-nav > a:not(.knopf){ color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:.98rem; }
.kopf-nav > a:not(.knopf):hover{ color:var(--brand-ink); }
.thema{
  min-width:2.6rem; min-height:2.6rem; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-soft); font-size:1.15rem; cursor:pointer;
}
.thema:hover{ border-color:var(--brand); color:var(--brand-ink); }
/* Seit AP 8.5b sind es fuenf Links: Unter 64 rem passten sie nicht mehr neben die
   Marke (gemessen bei 768 px: 790 px breit, die Seite scrollte waagerecht). Zuerst
   gehen die beiden Sprungmarken der Startseite - dort stehen die Abschnitte ohnehin. */
/* Seit AP 8.13 steht dort auch "Preise". Lokal (Segoe UI) passte es knapp, im
   Workflow (Linux, breitere Ersatzschrift) war die Kopfzeile bei 761 px 808 px breit.
   Nachgestellt mit Verdana als --font-body; die Stufen unten sind fuer DIESE Schrift
   gemessen (Bedarf je Stufe + Rand), nicht fuer Segoe. Was zuerst geht: "Module"
   (Sprungmarke der Startseite), "Hilfe" (Fusszeile, Lehrerbereich), "Uebungen"
   (Fusszeile, Startseite) - "Preise" und "Fuer Lehrkraefte" bleiben am laengsten.
   "Warum" steht seit AP 8.13 nicht mehr in der Kopfzeile. Als Netz darf die
   Navigation umbrechen, statt die Seite zu verbreitern. */
.kopf-nav{ flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:68.74rem){ .kopf-nav > a.kopf-start{ display:none; } }
@media (max-width:63.74rem){ .kopf-nav > a.kopf-breit{ display:none; } }   /* seit E118 (laengerer Modulname) 1020 statt 1000 px */
@media (max-width:59.99rem){
  .kopf-nav > a.kopf-mittel{ display:none; }
  .kopf-nav{ column-gap:.85rem; }
}
@media (max-width:53.74rem){
  .kopf-nav > a:not(.knopf){ display:none; }
}
/* Unter 560 px passen Marke, Knopf und Schalter nicht mehr nebeneinander -
   gemessen an einem 316 px breiten Fenster, wo die Kopfzeile 385 px belegte
   und die ganze Seite waagerecht scrollen liess. Der Knopf entfaellt, weil
   derselbe Weg zwei Bildschirmzentimeter tiefer noch einmal steht. */
@media (max-width:40rem){
  .kopf-nav > .knopf{ display:none; }
  .marke-text{ font-size:1.02rem; }
}

/* === STARTSEITE: DER HEFTSTAPEL =================================== */
/* Nur die Startseite. Sie ist ein Stapel Schulhefte auf dem Pult: oben
   das Deutsch-Heft, aufgeschlagen - links die Botschaft, rechts ein Fall
   zum Ausprobieren (start.js). Darunter die Fachmodule als Hefte in ihrer
   Farbe, ein gelochtes Blatt mit den vier Gruenden und die Rueckseite.

   EIGENE FARBEN (--hs-*) stehen bewusst hier und NICHT in 02-tokens.css:
   Steffens Entscheidung vom 2026-09-28, eigene Farben nur fuer die
   Startseite. Die Tokendatei - und damit die Wortarten-Werkstatt - bleibt
   unberuehrt. Die Umschlaege nehmen weiter die Modulfarben der Tokens.

   Gebunden wird alles an `.heftstapel` (bzw. `body:has(.heftstapel)` fuer
   Kopf- und Fusszeile). Keine andere Portalseite traegt diese Klasse. */

@font-face{
  /* Die Leseschrift der Wortarten-Werkstatt, aus deren Ordner - keine zweite Kopie. */
  font-family:"Andika";
  src:url("wortdetektei/assets/andika-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

.heftstapel, body:has(.heftstapel){
  --hs-pult:#dce2de; --hs-pult-2:#d0d8d3;
  --hs-papier:#fcfcfa; --hs-linie:#b9cde8; --hs-linie-stark:#8fb0dc; --hs-band:#edf3fb; --hs-rand:#e8b1b1;
  --hs-tinte:#1b2130; --hs-tinte-2:#485266; --hs-fueller:#2141b4;
  --hs-marker:#fbe94d; --hs-marker-tinte:#1b2130;
  --hs-etikett:#ffffff; --hs-etikett-tinte:#1b2130; --hs-etikett-fueller:#2141b4;
  --hs-ruecken:#1b2130; --hs-ruecken-tinte:#eef0f4; --hs-ruecken-leise:#c3cad8;
  --hs-knopf-hell:#ffffff;
  --hs-klebeband:rgba(238,235,222,.8); --hs-handy:#1b2130; /* Uebungsschau: Klebestreifen, Handyrahmen */
  --hs-deck:100%;              /* wie kraeftig die Umschlaege leuchten */
  --hs-schatten:0 1px 1px rgba(27,33,48,.10),0 3px 8px rgba(27,33,48,.08),0 26px 48px -20px rgba(27,33,48,.50);
  --hs-glanz:linear-gradient(112deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.10) 100%);
  --zeile:2rem;
  /* Schiebt die Lineatur unter die Schriftlinie: Bei einer Zeilenhoehe z
     steht die Grundlinie eines 17-px-Textes bei z/2 + ~7 px (gemessen). */
  --hs-lage:calc(var(--zeile) / -2 + .55rem);
}
html[data-theme="dark"] .heftstapel, html[data-theme="dark"] body:has(.heftstapel){
  --hs-pult:#12151a; --hs-pult-2:#0d1014;
  --hs-papier:#2a2b2f; --hs-linie:#41495a; --hs-linie-stark:#5b6679; --hs-band:#31343c; --hs-rand:#6a4046;
  --hs-deck:70%;               /* Pult am Abend: die Farben gedaempft, nichts leuchtet */
  --hs-tinte:#eef0f4; --hs-tinte-2:#b1bacb; --hs-fueller:#a9bcff;
  --hs-etikett:#ecebe6;
  --hs-ruecken:#262d3b; --hs-ruecken-leise:#b9c1d1;
  --hs-knopf-hell:#08231b;
  --hs-klebeband:rgba(190,186,172,.55); --hs-handy:#07090c;
  --hs-schatten:0 1px 1px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.35),0 28px 50px -18px rgba(0,0,0,.8);
  --hs-glanz:linear-gradient(112deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%);
}

/* --- Pult, Kopf- und Fusszeile ------------------------------------ */
body:has(.heftstapel){ background:var(--hs-pult); color:var(--hs-tinte); scrollbar-color:var(--hs-tinte-2) var(--hs-pult); }
body:has(.heftstapel) ::selection{ background:var(--hs-marker); color:var(--hs-marker-tinte); }
body:has(.heftstapel) :focus-visible{ outline-color:var(--hs-fueller); }
body:has(.heftstapel) .kopf{ background:var(--hs-pult); border-bottom-color:transparent; }
body:has(.heftstapel) .marke-text{ color:var(--hs-tinte); }
body:has(.heftstapel) .marke-text b,
body:has(.heftstapel) .kopf-nav > a:not(.knopf){ color:var(--hs-tinte-2); }
body:has(.heftstapel) .kopf-nav > a:not(.knopf):hover{ color:var(--hs-fueller); }
body:has(.heftstapel) .kopf .knopf{ border-radius:10px; box-shadow:none; color:var(--hs-knopf-hell); background:color-mix(in srgb,var(--brand) 82%,#000); }
html[data-theme="dark"] body:has(.heftstapel) .kopf .knopf{ background:var(--brand); }
body:has(.heftstapel) .thema{ border-color:color-mix(in srgb,var(--hs-tinte-2) 35%,transparent); color:var(--hs-tinte-2); }
body:has(.heftstapel) .fuss{ background:var(--hs-pult-2); border-top-color:transparent; }
body:has(.heftstapel) .fuss-marke span,
body:has(.heftstapel) .fuss-nav a,
body:has(.heftstapel) .fuss-zeile{ color:var(--hs-tinte-2); }

.heftstapel [hidden]{ display:none !important; }
/* Der Platz fuer „Geloest“ bleibt frei, damit das Heft beim Loesen nicht springt. */
.heftstapel .hs-geloest[hidden]{ display:flex !important; visibility:hidden; }
.heftstapel h2, .heftstapel h3{ color:var(--hs-tinte); }

/* --- Heftpapier: Lineatur mit Rand -------------------------------- */
.hs-seite, .hs-innen, .hs-blatt{
  --rand-x:2.9rem;
  background-color:var(--hs-papier);
  background-image:
    linear-gradient(to right,transparent var(--rand-x),var(--hs-rand) var(--rand-x),var(--hs-rand) calc(var(--rand-x) + 1px),transparent calc(var(--rand-x) + 1px)),
    linear-gradient(to bottom,transparent calc(var(--zeile) - 1px),var(--hs-linie) calc(var(--zeile) - 1px));
  background-size:100% 100%,100% var(--zeile);
  background-position:0 0,0 var(--hs-lage);
  color:var(--hs-tinte);
}

/* --- Knoepfe: zwei gleich starke Wege ----------------------------- */
.hs-knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:var(--tap); padding:.8rem 1.35rem; border:0; border-radius:10px;
  font:700 1rem/1.15 var(--font-body); text-decoration:none; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.12),0 8px 16px -8px rgba(27,33,48,.55);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1);
}
.hs-knopf:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(0,0,0,.12),0 14px 22px -10px rgba(27,33,48,.6); }
.hs-knopf:active{ transform:translateY(0); }
.hs-knopf:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:3px; }
/* Hell: der Umschlag eine Spur dunkler, sonst traegt Weiss auf #0f8a6a nur 4,3:1. */
.hs-knopf--umschlag{ background:color-mix(in srgb,var(--umschlag,var(--brand)) 82%,#000); color:var(--hs-knopf-hell); }
html[data-theme="dark"] .hs-knopf--umschlag{ background:var(--umschlag,var(--brand)); }
.hs-knopf--umschlag:hover{ color:var(--hs-knopf-hell); }
.hs-knopf--tinte{ background:var(--hs-tinte); color:var(--hs-papier); }
.hs-knopf--tinte:hover{ color:var(--hs-papier); }
.hs-knopf--marker{ background:var(--hs-marker); color:var(--hs-marker-tinte); }
.hs-knopf--marker:hover{ color:var(--hs-marker-tinte); }

/* --- Das aufgeschlagene Heft -------------------------------------- */
.hs-auf{ padding-block:clamp(1.5rem,3.5vw,3rem) clamp(3.5rem,6vw,5rem); overflow-x:clip; }
.hs-stapel{ position:relative; }
.hs-darunter{
  position:absolute; border-radius:10px; box-shadow:var(--hs-schatten); pointer-events:none;
}
.hs-darunter--eins{ inset:1.6rem -.7rem -1.2rem 2.4rem; background:var(--hs-glanz),color-mix(in srgb,var(--blue) var(--hs-deck),var(--hs-pult)); transform:rotate(1.5deg); }
.hs-darunter--zwei{ inset:2.6rem 2rem -2rem -.9rem; background:var(--hs-glanz),color-mix(in srgb,var(--amber) var(--hs-deck),var(--hs-pult)); transform:rotate(-1.3deg); }

.hs-heft{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  padding:.7rem; border-radius:10px;
  background:var(--hs-glanz),color-mix(in srgb,var(--brand) var(--hs-deck),var(--hs-pult));
  box-shadow:var(--hs-schatten);
}
/* Zwei Heftklammern in der Falz. */
.hs-heft::before, .hs-heft::after{
  content:""; position:absolute; z-index:3; left:calc(.7rem + (100% - 1.4rem) * 1.3 / 2.3); top:24%;
  width:4px; height:2.6rem; margin-left:-2px; border-radius:2px;
  background:linear-gradient(90deg,#8d949e,#e3e7ec 45%,#9aa1ab);
  box-shadow:0 1px 1px rgba(0,0,0,.25);
}
.hs-heft::after{ top:auto; bottom:24%; }
/* Die Schau von Karos Kunst-Werkstatt (K.10b): das Heft in der Fachfarbe Rot. */
.heftschau--kunst .hs-heft{ background:var(--hs-glanz),color-mix(in srgb,var(--red) var(--hs-deck),var(--hs-pult)); }
.heftschau--mathe .hs-heft{ background:var(--hs-glanz),color-mix(in srgb,var(--blue) var(--hs-deck),var(--hs-pult)); }

.hs-seite{ position:relative; min-width:0; }
.hs-seite--rechts{ display:flex; flex-direction:column; }
.hs-seite--rechts .hs-herkunft{ margin-top:auto; padding-top:var(--zeile); }
.hs-seite--links{
  border-radius:4px 0 0 4px;
  padding:calc(var(--zeile) * 2) clamp(1.5rem,3.5vw,3rem) calc(var(--zeile) * 1.5) calc(var(--rand-x) + 1.6rem);
  background-image:
    linear-gradient(to right,transparent var(--rand-x),var(--hs-rand) var(--rand-x),var(--hs-rand) calc(var(--rand-x) + 1px),transparent calc(var(--rand-x) + 1px)),
    linear-gradient(to left,rgba(27,33,48,.10),transparent 2.2rem),
    linear-gradient(to bottom,transparent calc(var(--zeile) - 1px),var(--hs-linie) calc(var(--zeile) - 1px));
  background-size:100% 100%,100% 100%,100% var(--zeile);
  background-position:0 0,0 0,0 var(--hs-lage);
}
.hs-seite--rechts{
  --rand-x:calc(100% - 2.9rem);
  border-radius:0 4px 4px 0;
  padding:calc(var(--zeile) * 2) calc(2.9rem + 1.2rem) calc(var(--zeile) * 1.5) clamp(1.5rem,3vw,2.6rem);
  background-image:
    linear-gradient(to right,transparent var(--rand-x),var(--hs-rand) var(--rand-x),var(--hs-rand) calc(var(--rand-x) + 1px),transparent calc(var(--rand-x) + 1px)),
    linear-gradient(to right,rgba(27,33,48,.07),transparent 1.6rem),
    linear-gradient(to bottom,transparent calc(var(--zeile) - 1px),var(--hs-linie) calc(var(--zeile) - 1px));
  background-size:100% 100%,100% 100%,100% var(--zeile);
  background-position:0 0,0 0,0 var(--hs-lage);
}

/* Die Neuigkeit klebt auf dem Heft, um das es geht - nicht ueber der H1. */
.hs-haftnotiz{
  position:absolute; z-index:3; top:-1.1rem; right:calc(50% + .6rem); max-width:12rem;
  margin:0; padding:.7rem .95rem .8rem;
  background:var(--hs-marker); color:var(--hs-marker-tinte);
  font:400 1.05rem/1.35 "Andika",var(--font-body);
  transform:rotate(2.5deg); border-radius:2px;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 10px 18px -10px rgba(27,33,48,.55);
}
.hs-haftnotiz b{ font-weight:400; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.15em; }

/* Literata steht ihre Grundlinie bei 0,43 em unter der Mitte der Zeile
   (gemessen); `top` setzt sie auf die Linie des Hefts, bei jeder Groesse. */
.hs-seite--links h1, .hs-blatt h2{ position:relative; top:calc(var(--zeile) / 2 + .425rem - .43em); }
.hs-fall-titel, .hs-gruende h3{ position:relative; top:calc(.425rem - .43em); }
.hs-seite--links h1{
  font-size:clamp(2.6rem,1.4rem + 2.8vw,4rem);
  line-height:calc(var(--zeile) * 2); letter-spacing:-.025em;
  margin:0 0 var(--zeile); text-wrap:balance;
}
.hs-vorspann{ font-size:1.12rem; line-height:var(--zeile); color:var(--hs-tinte-2); max-width:36rem; margin:0 0 var(--zeile); }
/* Knoepfe im Zeilentakt: zwei Zeilen hoch, eine Zeile Abstand, wenn sie
   untereinander umbrechen - der Text darunter steht dann wieder auf der Linie. */
.hs-knoepfe{ display:flex; flex-wrap:wrap; gap:var(--zeile) .8rem; margin:0 0 var(--zeile); }
.hs-knoepfe .hs-knopf{ flex:1 1 11rem; min-height:calc(var(--zeile) * 2); }
/* Die Demo-App ist fuer Laptop und Tafel gebaut: Der Hinweis steht nur auf schmalen Bildschirmen (AP 8.12, E78). */
/* Seit AP 4.3c: was die Probezeit kostet - nichts (AP 8.12 Nachtrag). */
.hs-probe-hinweis{ margin:0; line-height:var(--zeile); font-size:.95rem; color:var(--hs-tinte-2); }
.hs-demo-hinweis{ display:none; margin:0; line-height:var(--zeile); font-size:.95rem; color:var(--hs-tinte-2); }
@media (max-width:48rem){ .hs-demo-hinweis{ display:block; } }
.hs-weiter{ margin:0; line-height:var(--zeile); font-size:.98rem; }
.hs-weiter a{ color:var(--hs-fueller); }

/* --- Der Fall zum Ausprobieren ------------------------------------ */
.hs-fall-titel{ font-size:1.45rem; line-height:var(--zeile); margin:0; }
.hs-auftrag{ font:400 1.15rem/var(--zeile) "Andika",var(--font-body); color:var(--hs-fueller); margin:0; }
.hs-satz{
  --sz:calc(var(--zeile) * 2);
  margin:calc(var(--zeile) * .5) 0; padding:0 .4rem; border-radius:3px;
  font:400 calc(var(--zeile) * 1.1)/var(--sz) "Andika",var(--font-body);
  font-feature-settings:"cv39" 1;
  color:var(--hs-tinte);
  background-color:var(--hs-papier);
  /* Grundschul-Lineatur: Oberlinie, Mittelband, Grundlinie, Unterlinie. */
  background-image:linear-gradient(to bottom,
    transparent 0 calc(14% - 1px), var(--hs-linie-stark) calc(14% - 1px) 14%,
    transparent 14% 38%, var(--hs-linie-stark) 38% calc(38% + 1px),
    var(--hs-band) calc(38% + 1px) calc(66% - 1px), var(--hs-linie-stark) calc(66% - 1px) 66%,
    transparent 66% calc(90% - 1px), var(--hs-linie-stark) calc(90% - 1px) 90%, transparent 90%);
  background-size:100% var(--sz);
  /* Grundlinie der Andika: Zeilenmitte + 0,41 em (gemessen) -> auf 66 %. */
  background-position:0 calc(.41em - .16 * var(--sz));
}
.hs-wort{
  font:inherit; line-height:inherit; color:inherit; vertical-align:baseline;
  margin:0; padding:0 .1em; border:0; border-radius:6px; background:none no-repeat 0 62% / 100% 44%;
  cursor:pointer; text-decoration:underline dotted 2px color-mix(in srgb,var(--hs-fueller) 60%,transparent);
  text-underline-offset:.22em; font-feature-settings:inherit;
  transition:background-color .2s;
}
.hs-wort:hover{ background-color:color-mix(in srgb,var(--hs-fueller) 9%,transparent); }
.hs-wort:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:0; }
.hs-wort--gefunden{
  cursor:default; text-decoration:none; color:var(--hs-marker-tinte);
  background-image:linear-gradient(var(--hs-marker),var(--hs-marker));
  animation:hs-streichen .55s cubic-bezier(.16,1,.3,1);
}
.hs-wort--gefunden:hover{ background-color:transparent; }
.hs-wort--nein{ animation:hs-wackeln .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes hs-streichen{ from{ background-size:0% 44%; } to{ background-size:100% 44%; } }
@keyframes hs-wackeln{
  20%{ transform:translateX(-3px) rotate(-1.5deg); } 45%{ transform:translateX(3px) rotate(1deg); }
  70%{ transform:translateX(-2px); } 100%{ transform:none; }
}
.hs-punkt{ margin-left:-.1em; }   /* der Punkt gehoert an „Sofa“, ohne Luecke */

.hs-randnotiz{ display:grid; grid-template-columns:1.6rem 1fr; gap:.6rem; align-items:start; min-height:calc(var(--zeile) * 3); }
.hs-randnotiz svg{ width:1.6rem; height:1.6rem; margin-top:.2rem; fill:none; stroke:var(--hs-fueller); stroke-width:1.9; stroke-linecap:round; }
.hs-randnotiz p{ margin:0; font:400 1.1rem/var(--zeile) "Andika",var(--font-body); color:var(--hs-fueller); }
.hs-stand{ margin:0; line-height:var(--zeile); font-size:.95rem; font-weight:600; color:var(--hs-tinte-2); }
.hs-geloest{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; min-height:calc(var(--zeile) * 2); }
.hs-nochmal{
  min-height:2.75rem; padding:.45rem 1rem; border-radius:10px; cursor:pointer;
  font:700 .95rem/1 var(--font-body); color:var(--hs-fueller);
  background:transparent; border:2px solid color-mix(in srgb,var(--hs-fueller) 55%,transparent);
}
.hs-nochmal:hover{ background:color-mix(in srgb,var(--hs-fueller) 9%,transparent); }
.hs-herkunft{ margin:var(--zeile) 0 0; line-height:var(--zeile); font-size:.9rem; color:var(--hs-tinte-2); }

/* Stempel - im Fall und auf den Heften in Vorbereitung. */
.hs-stempel{
  display:inline-block; padding:.3rem .7rem .32rem; border:2.5px solid currentColor; border-radius:6px;
  font:800 .82rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--hs-tinte-2); transform:rotate(-6deg);
}
.hs-stempel--gross{ font-size:1.35rem; padding:.45rem .9rem; border-width:3px; color:var(--brand-ink); }
.hs-fall--geloest .hs-stempel--gross{ animation:hs-stempeln .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes hs-stempeln{
  0%{ opacity:0; transform:rotate(-6deg) scale(1.9); }
  55%{ opacity:1; transform:rotate(-6deg) scale(.94); }
  100%{ opacity:1; transform:rotate(-6deg) scale(1); }
}

/* --- Das Faecher-Register (2026-10-23) ------------------------------
   Laschen Deutsch · Mathe · Kunst oben auf der rechten Heftseite. Die
   gewaehlte Lasche faerbt das Heft (`data-fach` am Stapel); die beiden
   Hefte darunter tragen die Farben der anderen Faecher. */
.hs-stapel[data-fach="mathe"] .hs-heft{ background:var(--hs-glanz),color-mix(in srgb,var(--blue) var(--hs-deck),var(--hs-pult)); }
.hs-stapel[data-fach="kunst"] .hs-heft{ background:var(--hs-glanz),color-mix(in srgb,var(--red) var(--hs-deck),var(--hs-pult)); }
.hs-stapel[data-fach="mathe"] .hs-darunter--eins{ background:var(--hs-glanz),color-mix(in srgb,var(--brand) var(--hs-deck),var(--hs-pult)); }
.hs-stapel[data-fach="mathe"] .hs-darunter--zwei{ background:var(--hs-glanz),color-mix(in srgb,var(--red) var(--hs-deck),var(--hs-pult)); }
.hs-stapel[data-fach="kunst"] .hs-darunter--eins{ background:var(--hs-glanz),color-mix(in srgb,var(--brand) var(--hs-deck),var(--hs-pult)); }
.hs-stapel[data-fach="kunst"] .hs-darunter--zwei{ background:var(--hs-glanz),color-mix(in srgb,var(--blue) var(--hs-deck),var(--hs-pult)); }
.hs-stapel[data-fach="mathe"] .hs-knopf--umschlag{ --umschlag:var(--blue); }
.hs-stapel[data-fach="kunst"] .hs-knopf--umschlag{ --umschlag:var(--red); }
.hs-heft, .hs-darunter{ transition:background .35s; }

.hs-laschen{
  position:absolute; z-index:2; top:calc(var(--zeile) * .25); left:clamp(1.5rem,3vw,2.6rem); right:calc(2.9rem + 1.2rem);
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.hs-laschen[hidden]{ display:none; }
.hs-lasche{
  min-height:2.75rem; min-width:5.2rem; padding:.4rem .95rem; border:0; border-radius:10px 10px 4px 4px; cursor:pointer;
  font:700 1rem/1 var(--font-body); letter-spacing:.01em;
  color:var(--hs-knopf-hell,#fff); background:var(--umschlag);
  opacity:.5; transform:translateY(.15rem); transition:opacity .2s, transform .2s;
}
.hs-lasche:hover{ opacity:.8; }
.hs-lasche[aria-selected="true"]{ opacity:1; transform:none; box-shadow:0 2px 0 color-mix(in srgb,var(--umschlag) 60%,#000); }
.hs-lasche:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:2px; }
/* Mit Laschen beginnt der Fall eine Zeile tiefer. */
.hs-register:has(.hs-laschen:not([hidden])){ padding-top:calc(var(--zeile) * 3); }
.hs-fall{ display:flex; flex-direction:column; flex:1 1 auto; }
.hs-fall[hidden]{ display:none; }
.hs-fall .hs-herkunft{ margin-top:auto; padding-top:var(--zeile); }

/* Mathe: das Zehnerfeld, Plaettchen rot voll / blau Ring (Farbe nie allein). */
.hs-zehnerfeld{
  display:grid; grid-template-columns:repeat(5,minmax(0,3.4rem)); width:max-content; max-width:100%;
  margin:calc(var(--zeile) * .5) 0; border:3px solid var(--hs-tinte-2); background:var(--hs-papier);
}
.hs-pl{ aspect-ratio:1; border:1.5px solid color-mix(in srgb,var(--hs-tinte-2) 55%,transparent); position:relative; }
.hs-pl:nth-child(5n){ border-right:0; }
.hs-pl:nth-child(n+6){ border-bottom:0; }
.hs-pl:nth-child(-n+5){ border-top:0; }
.hs-pl:nth-child(5n+1){ border-left:0; }
.hs-pl--rot::after, .hs-pl--blau::after{ content:""; position:absolute; inset:14%; border-radius:50%; }
.hs-pl--rot::after{ background:#d5403f; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
.hs-pl--blau::after{ border:.42rem solid #2f6fd0; }

/* Antwortknoepfe: gross, Andika, im Zeilentakt. */
.hs-wahl{ display:flex; flex-wrap:wrap; gap:.6rem; margin:calc(var(--zeile) * .5) 0; }
.hs-antwort{
  min-width:3.4rem; min-height:3.4rem; padding:.3rem .9rem; border-radius:10px; cursor:pointer;
  font:400 1.6rem/1 "Andika",var(--font-body); color:var(--hs-tinte);
  background:var(--hs-papier); border:2px solid color-mix(in srgb,var(--hs-fueller) 45%,transparent);
  box-shadow:0 2px 0 color-mix(in srgb,var(--hs-fueller) 25%,transparent);
}
.hs-antwort[style*="--farbe"]{ font-size:1.15rem; padding-left:2.4rem; position:relative; }
.hs-antwort[style*="--farbe"]::before{
  content:""; position:absolute; left:.7rem; top:50%; width:1.2rem; height:1.2rem; margin-top:-.6rem;
  border-radius:50%; background:var(--farbe); border:1.5px solid rgba(0,0,0,.25);
}
.hs-antwort:hover:not(:disabled){ background:color-mix(in srgb,var(--hs-fueller) 8%,var(--hs-papier)); }
.hs-antwort:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:2px; }
.hs-antwort:disabled{ cursor:default; opacity:.45; }
.hs-antwort--richtig, .hs-antwort--richtig:disabled{
  opacity:1; color:var(--hs-marker-tinte); background:var(--hs-marker); border-color:transparent;
}

/* Kunst: zwei Toepfe, die Schale. */
.hs-mischen{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:calc(var(--zeile) * .5) 0; }
.hs-topf, .hs-schale{
  display:grid; place-items:end center; width:4.4rem; height:4.4rem; padding-bottom:.25rem; border-radius:50%;
  font:700 .85rem/1 var(--font-body); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.55);
  background:var(--farbe); border:3px solid rgba(0,0,0,.18);
}
.hs-schale{
  place-items:center; padding:0; width:5rem; height:5rem;
  color:var(--hs-tinte-2); text-shadow:none; font:400 2rem/1 "Andika",var(--font-body);
  background:var(--hs-papier); border:3px dashed color-mix(in srgb,var(--hs-tinte-2) 60%,transparent);
  transition:background .4s;
}
.hs-schale--voll{ background:var(--farbe); border-style:solid; border-color:rgba(0,0,0,.18); }
.hs-plus{ font:700 1.6rem/1 var(--font-body); color:var(--hs-tinte-2); }

@media (max-width:40rem){
  .hs-laschen{ flex-wrap:nowrap; gap:.3rem; left:1rem; right:1rem; }
  .hs-lasche{ min-width:0; flex:1 1 0; padding:.4rem .4rem; font-size:.92rem; }
}
@media (max-width:30rem){
  .hs-zehnerfeld{ grid-template-columns:repeat(5,minmax(0,2.7rem)); }
  .hs-topf{ width:3.6rem; height:3.6rem; font-size:.75rem; }
  .hs-schale{ width:4rem; height:4rem; }
}

/* --- Abschnitte ---------------------------------------------------- */
.hs-abschnitt{ padding-block:clamp(3rem,7vw,5.5rem) 0; }
.hs-kopf{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem); }
.hs-kopf h2{ font-size:clamp(1.9rem,1.3rem + 1.9vw,2.8rem); letter-spacing:-.02em; margin-bottom:.8rem; }
.hs-kopf p{ color:var(--hs-tinte-2); font-size:1.08rem; margin:0; }

/* --- Die Hefte der Fachmodule ------------------------------------- */
.hs-hefte{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:clamp(2rem,4vw,3.2rem); align-items:start; }
.hs-hefte-offen{ display:grid; gap:clamp(3.6rem,6vw,5rem); }
.hs-hefte-zu{ display:grid; gap:clamp(1.6rem,3vw,2.4rem); padding-top:.6rem; }

.hs-modul--offen{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:.6rem; border-radius:10px;
  background:var(--hs-glanz),color-mix(in srgb,var(--umschlag) var(--hs-deck),var(--hs-pult)); box-shadow:var(--hs-schatten);
}
.hs-modul--offen{ position:relative; }
.hs-umschlag{ position:relative; }
.hs-modul--offen .hs-umschlag{ padding:1.2rem 1.2rem 11rem; }
.hs-innen{
  --rand-x:calc(100% - 2.2rem);
  border-radius:4px; padding:calc(var(--zeile) * 1) calc(2.2rem + 1rem) var(--zeile) 1.6rem;
}
.hs-innen p{ margin:0 0 var(--zeile); line-height:var(--zeile); font-size:1.02rem; }
.hs-innen ul{ list-style:none; margin:0 0 var(--zeile); padding:0; }
.hs-innen li{ position:relative; padding-left:1.7rem; line-height:var(--zeile); font-size:.98rem; color:var(--hs-tinte-2); }
.hs-innen li + li{ margin-top:0; }
.hs-innen li::before{
  content:""; position:absolute; left:.2rem; top:calc(var(--zeile) / 2 - .32rem);
  width:.6rem; height:.6rem; border:2px solid var(--hs-fueller); border-radius:50% 45% 55% 50%;
}
.hs-innen .hs-knopf{ display:flex; width:100%; padding-inline:.9rem; }
.hs-innen p.hs-innen-schau{ margin:var(--zeile) 0 0; text-align:center; }
.hs-innen-schau a, .hs-herkunft a{ color:var(--hs-fueller); }
.hs-aufkleber{
  position:absolute; z-index:2; right:clamp(.4rem,2vw,1.4rem); bottom:-3.2rem;
  width:clamp(9.5rem,16.5vw,13.5rem); height:auto;
  padding:.45rem; background:#fff; border-radius:14px; transform:rotate(-4deg);
  box-shadow:0 1px 1px rgba(0,0,0,.14),0 16px 28px -12px rgba(27,33,48,.55);
}

/* Zugeklappt: ein Heft, kein Kasten - Umschlag mit Ruecken, Etikett als Aufkleber
   in der oberen Haelfte, darunter sichtbar Umschlagfarbe. */
.hs-modul--zu{
  position:relative; min-height:15.5rem; padding:1.4rem 1.4rem 4.2rem 2.1rem; border-radius:6px 10px 10px 6px;
  background:var(--hs-glanz),color-mix(in srgb,var(--umschlag) var(--hs-deck),var(--hs-pult)); box-shadow:var(--hs-schatten);
}
.hs-modul--zu::before, .hs-rueckseite::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:.75rem; border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.06));
}
.hs-modul--zu .hs-etikett{ position:static; max-width:17.5rem; }
.hs-modul--zu .hs-etikett > p{ font-size:.9rem; }
.hs-modul--zu .hs-stempel{ right:1.3rem; bottom:1.2rem; }
.hs-hefte-zu .hs-modul--zu:nth-child(1){ transform:rotate(-1.2deg); }
.hs-hefte-zu .hs-modul--zu:nth-child(2){ transform:rotate(.9deg); }

/* Das Namensetikett: weiss, Doppelrahmen, Eintraege mit dem Fueller. */
.hs-etikett{
  position:relative; padding:.85rem 1rem .9rem; border-radius:10px;
  background:var(--hs-etikett); color:var(--hs-etikett-tinte);
  box-shadow:inset 0 0 0 1px rgba(27,33,48,.55),inset 0 0 0 4px var(--hs-etikett),inset 0 0 0 5px rgba(27,33,48,.35),0 2px 4px rgba(0,0,0,.12);
}
.hs-etikett dl{ margin:0; }
.hs-zeile{ display:grid; grid-template-columns:4.6rem minmax(0,1fr); align-items:baseline; gap:.5rem; padding:.3rem .2rem .15rem; border-bottom:1.5px dotted rgba(27,33,48,.4); }
.hs-zeile dt{ font-size:.8rem; font-weight:600; color:#485266; }
.hs-zeile dd{ margin:0; font:400 1.12rem/1.35 "Andika",var(--font-body); color:var(--hs-etikett-fueller); overflow-wrap:break-word; }
.hs-zeile dd h3{ font:inherit; font-size:1.3rem; line-height:1.25; letter-spacing:0; color:inherit; }
.hs-etikett > p{ margin:.8rem .2rem .4rem; font-size:.95rem; line-height:1.5; color:#343c4d; }
.hs-etikett .hs-stempel{ position:absolute; right:.8rem; bottom:-.95rem; background:var(--hs-etikett); color:#343c4d; }

/* --- Das gelochte Blatt: vier Gruende ----------------------------- */
.hs-blatt{
  --rand-x:3.6rem;
  position:relative; border-radius:3px; box-shadow:var(--hs-schatten);
  padding:calc(var(--zeile) * 2) clamp(1.4rem,4vw,3.4rem) var(--zeile) calc(var(--rand-x) + 1.6rem);
}
/* Die Lochung: zeigt den Pult darunter. */
.hs-blatt::before, .hs-blatt::after{
  content:""; position:absolute; left:1.15rem; top:26%;
  width:1rem; height:1rem; border-radius:50%;
  background:var(--hs-pult); box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}
.hs-blatt::after{ top:auto; bottom:26%; }
.hs-blatt h2{
  font-size:clamp(1.6rem,1.1rem + 2vw,2.8rem); letter-spacing:-.02em;
  line-height:calc(var(--zeile) * 2); max-width:20ch; margin:0 0 var(--zeile); text-wrap:balance;
}
.hs-gruende{ list-style:none; margin:0; padding:0; display:grid; align-items:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2rem,4vw,3.6rem); }
.hs-gruende li{ display:grid; align-content:start; grid-template-columns:2.6rem minmax(0,1fr); column-gap:.5rem; margin-bottom:var(--zeile); }
.hs-haken{ grid-row:span 2; width:2.3rem; height:1.85rem; margin-top:.1rem; fill:none; stroke:var(--hs-fueller); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.hs-gruende h3{ font-size:1.22rem; line-height:var(--zeile); margin:0; }
.hs-gruende p{ margin:0; line-height:var(--zeile); font-size:1rem; color:var(--hs-tinte-2); }
.hs-gruende mark{
  color:var(--hs-tinte); padding:0 .08em;
  background:linear-gradient(transparent 40%,var(--hs-marker) 40%,var(--hs-marker) 90%,transparent 90%);
}
html[data-theme="dark"] .hs-gruende mark{ color:var(--hs-marker-tinte); background:var(--hs-marker); }

/* --- Die Rueckseite: Kontakt --------------------------------------- */
/* Die Rueckseite des gruenen Hefts: Etikett mit dem Angebot, Knopf in Textmarker-Gelb. */
.hs-rueckseite{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem 2.4rem;
  padding:clamp(1.6rem,4vw,3rem) clamp(1.6rem,4vw,3rem) clamp(1.6rem,4vw,3rem) clamp(2.2rem,4.5vw,3.6rem); border-radius:6px 10px 10px 6px;
  background:var(--hs-glanz),color-mix(in srgb,var(--brand) var(--hs-deck),var(--hs-pult)); box-shadow:var(--hs-schatten);
}
.hs-rueckseite .hs-etikett{ max-width:38rem; padding:1.4rem 1.6rem 1.3rem; }
.heftstapel .hs-rueckseite h2{ color:var(--hs-etikett-tinte); font-size:clamp(1.6rem,1.2rem + 1.3vw,2.2rem); margin-bottom:.7rem; }
.hs-rueckseite .hs-etikett > p{ margin:0; font-size:1rem; line-height:1.6; }
.hs-rueckseite .hs-pilot{ margin-top:.9rem; padding-top:.7rem; border-top:1.5px dotted rgba(27,33,48,.4); font:400 1.08rem/1.5 "Andika",var(--font-body); color:var(--hs-etikett-fueller); }
.hs-rueckseite .hs-knopf--marker{ box-shadow:0 1px 0 rgba(0,0,0,.18),0 10px 18px -8px rgba(0,0,0,.5); }

/* --- Der Unterrichtsablauf in vier Bildern (AP 8.12) --------------- */
/* Eingeklebte Fotos wie in der Uebungsschau (weisser Rand, Klebestreifen),
   alle in einem Feld gleicher Hoehe - die Querbilder im Ausschnitt oben
   links, das Handy hochkant in der Mitte. Darunter Nummer, Titel, ein Satz. */
.hs-ablauf{ list-style:none; margin:0; padding:0; display:grid; gap:2.4rem clamp(1.2rem,2.4vw,2rem);
  grid-template-columns:repeat(4,minmax(0,1fr)); }
.hs-ablauf-schritt{ display:flex; flex-direction:column; min-width:0; }
.hs-ablauf-bild{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; margin-bottom:1.1rem; }
.hs-ablauf-foto{ position:relative; width:100%; height:100%; margin:0; padding:.35rem; background:var(--hs-etikett);
  border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 26px -14px rgba(27,33,48,.6); transform:rotate(var(--kipp,-1deg)); }
.hs-ablauf-schritt:nth-child(2) .hs-ablauf-foto{ --kipp:.8deg; --band:2deg; }
.hs-ablauf-schritt:nth-child(4) .hs-ablauf-foto{ --kipp:-.6deg; --band:-2deg; }
.hs-ablauf-foto::before{
  content:""; position:absolute; z-index:2; top:-.65rem; left:50%; width:4.6rem; height:1.3rem; margin-left:-2.3rem;
  background:var(--hs-klebeband); border-left:1px dashed rgba(27,33,48,.08); border-right:1px dashed rgba(27,33,48,.08);
  box-shadow:0 1px 2px rgba(27,33,48,.12); transform:rotate(var(--band,-3deg)); pointer-events:none;
}
/* Das ganze Bildschirmfoto waere in dieser Groesse unlesbar: Gezeigt wird ein
   vergroesserter Ausschnitt (--zoom, Verschiebung --x/--y in Prozent des Bildes),
   ausgesucht am Foto - Editor, Auftrag mit Silben, Namen mit den ersten Spalten.
   Wer ein Foto neu macht, prueft den Ausschnitt. */
.hs-ablauf-ausschnitt{ position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.hs-ablauf-ausschnitt img{ position:absolute; left:0; top:0; display:block; width:calc(var(--zoom,1) * 100%); max-width:none; height:auto;
  transform:translate(calc(var(--x,0%) * -1), calc(var(--y,0%) * -1)); }
.hs-ablauf-schritt:nth-child(1) .hs-ablauf-ausschnitt{ --zoom:1.6; --x:32%; --y:22%; }
.hs-ablauf-schritt:nth-child(2) .hs-ablauf-ausschnitt{ --zoom:1.7; --x:8%; --y:29%; }
.hs-ablauf-schritt:nth-child(4) .hs-ablauf-ausschnitt{ --zoom:1.5; --x:0%; --y:0%; }
/* Das Handy steht hochkant im selben Feld: so hoch wie das Feld, die Breite folgt. */
.hs-ablauf-handy{ position:absolute; top:-.3rem; bottom:-.3rem; left:50%; aspect-ratio:5/8; margin:0; padding:.3rem;
  border-radius:1rem; background:var(--hs-handy); transform:translateX(-50%) rotate(2deg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.25),0 20px 34px -16px rgba(27,33,48,.7); }
.hs-ablauf-handy img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:.75rem; }
html[data-theme="dark"] .hs-ablauf img{ filter:brightness(.9); }
.hs-ablauf h3{ display:flex; align-items:center; gap:.6rem; margin:0 0 .45rem; font-size:1.25rem; line-height:1.25; }
.hs-ablauf-nr{ flex:none; display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%;
  border:2px solid var(--hs-fueller); color:var(--hs-fueller); font:700 1.1rem/1 "Andika",var(--font-body); }
.hs-ablauf p{ margin:0; color:var(--hs-tinte-2); font-size:1rem; line-height:1.55; }
.hs-ablauf-weiter{ margin:2rem 0 0; font-size:1.02rem; }
.hs-ablauf-weiter a{ color:var(--hs-fueller); font-weight:600; }
@media (max-width:63.99rem){ .hs-ablauf{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:34rem){ .hs-ablauf{ grid-template-columns:minmax(0,1fr); } }

/* --- Die Unterrichtspakete (AP 9.6a) ------------------------------- */
/* Oben der Ablauf einer Stunde als Leiste, darunter je Paket eine
   Karteikarte (Papier wie die Etiketten, oben ein Streifen in der Farbe des
   Lernbereichs - ein Token, nie --hs-*), dann „In Vorbereitung“ und vier
   Saetze. Die Karten setzt build/portal.mjs aus PAKETE ein. */
.hs-stunde{ list-style:none; margin:0 0 2.4rem; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.8rem; }
.hs-stunde li{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem; min-width:0;
  padding:.9rem .6rem .8rem; border-radius:.9rem; background:var(--hs-papier); box-shadow:0 1px 1px rgba(27,33,48,.10),0 8px 18px -12px rgba(27,33,48,.45); }
.hs-stunde li + li::before{ content:""; position:absolute; top:50%; left:-.8rem; width:.8rem; border-top:2px dotted var(--hs-tinte-2); }
.hs-stunde-zeichen{ font-size:1.6rem; line-height:1.2; }
.hs-stunde b{ font-size:1.02rem; line-height:1.3; color:var(--hs-tinte); }
.hs-stunde li > span:last-child{ font-size:.9rem; line-height:1.35; color:var(--hs-tinte-2); }
.hs-stunde .hs-stunde-niveaus{ outline:2px solid var(--hs-fueller); outline-offset:-2px; }
.hs-pakete{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(13.5rem,100%),1fr)); gap:1.6rem clamp(1.2rem,2.4vw,1.8rem); }
.hs-paket{ display:flex; flex-direction:column; min-width:0; padding:1.1rem 1.2rem 1rem; border-top:.45rem solid var(--c);
  border-radius:.25rem .25rem .6rem .6rem; background:var(--hs-etikett); color:var(--hs-etikett-tinte);
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 26px -14px rgba(27,33,48,.6); transform:rotate(var(--kipp,-.5deg)); }
.hs-paket:nth-child(2n){ --kipp:.6deg; }
.hs-paket:nth-child(3n){ --kipp:-.2deg; }
.hs-paket-bereich{ margin:0 0 .3rem; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(27,33,48,.7); }
.heftstapel .hs-paket h3{ display:flex; align-items:center; gap:.5rem; margin:0 0 .55rem; font-size:1.3rem; line-height:1.25; color:var(--hs-etikett-tinte);
  /* Lange Wörter („Zusammengesetzte Nomen“) brechen an den weichen Trennstellen aus build/portal.mjs (trennbar) um, statt über die Karte und in der rechten Spalte über den Seitenrand zu ragen; anywhere nur als letzter Ausweg (2026-11-06). */
  hyphens:manual; overflow-wrap:anywhere; }
.hs-paket-icon{ font-size:1.5rem; line-height:1; }
.hs-paket > p{ margin:0; font-size:.98rem; line-height:1.5; }
.hs-paket .hs-paket-fakten{ margin-top:auto; padding-top:.8rem; font-size:.9rem; color:rgba(27,33,48,.72); }
.hs-pakete-bald{ margin:1.6rem 0 0; color:var(--hs-tinte-2); font-size:1rem; line-height:1.55; }
.hs-pakete-bald b{ color:var(--hs-tinte); }
.hs-pakete-punkte{ list-style:none; margin:2.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem clamp(1.6rem,3vw,2.6rem); }
.hs-pakete-punkte li{ position:relative; padding-left:1.8rem; color:var(--hs-tinte-2); font-size:1rem; line-height:1.55; }
.hs-pakete-punkte li::before{ content:"✓"; position:absolute; left:0; top:-.05rem; color:var(--hs-fueller); font-weight:700; font-size:1.15rem; }
.hs-pakete-punkte b{ color:var(--hs-tinte); }
@media (max-width:63.99rem){
  .hs-stunde{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hs-stunde li + li::before{ display:none; }
}
@media (max-width:40rem){
  .hs-stunde{ grid-template-columns:minmax(0,1fr); gap:.5rem; }
  .hs-stunde li{ flex-direction:row; flex-wrap:wrap; text-align:left; column-gap:.6rem; padding:.6rem .9rem; }
  .hs-stunde li > span:last-child{ flex-basis:100%; padding-left:2.3rem; }
  .hs-pakete-punkte{ grid-template-columns:minmax(0,1fr); }
}

/* --- Schmalere Fenster --------------------------------------------- */
@media (max-width:63.99rem){
  .hs-heft{ grid-template-columns:minmax(0,1fr); }
  .hs-heft::before, .hs-heft::after{ display:none; }
  .hs-seite--links{ border-radius:4px 4px 0 0; }
  .hs-seite--rechts{ border-radius:0 0 4px 4px; border-top:2px dashed color-mix(in srgb,var(--hs-tinte-2) 30%,transparent); }
}
/* Die Hefte der Module brauchen mehr Breite als die Doppelseite: Unter 75 rem
   steht das offene Heft allein, die zugeklappten liegen darunter nebeneinander. */
@media (max-width:74.99rem){
  .hs-hefte{ grid-template-columns:minmax(0,1fr); }
  .hs-hefte-zu{ grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr)); }
}
@media (max-width:40rem){
  .heftstapel{ --zeile:1.75rem; }
  .hs-seite, .hs-innen, .hs-blatt{ --rand-x:1.9rem; }
  .hs-seite--links{ padding:calc(var(--zeile) * 1) 1.2rem var(--zeile) calc(var(--rand-x) + 1rem); }
  .hs-seite--rechts{ --rand-x:calc(100% - 1.9rem); padding:var(--zeile) calc(1.9rem + .8rem) var(--zeile) 1.2rem; }
  .hs-haftnotiz{ top:-1rem; right:.8rem; max-width:9.5rem; font-size:.95rem; padding:.5rem .7rem .55rem; }
  .hs-modul--offen .hs-umschlag{ padding-top:3.4rem; }
  .hs-knoepfe .hs-knopf{ flex-basis:100%; }
  .hs-modul--offen{ grid-template-columns:minmax(0,1fr); }
  .hs-modul--offen .hs-umschlag{ padding:3.4rem 1rem .4rem; }
  .hs-aufkleber{ position:relative; display:block; right:auto; bottom:auto; width:8.5rem; margin:.9rem .4rem .6rem auto; transform:rotate(4deg); }
  .hs-innen{ --rand-x:calc(100% - 1.6rem); padding-right:calc(1.6rem + .8rem); }
  .hs-blatt{ padding-left:calc(var(--rand-x) + 1rem); }
  .hs-blatt::before, .hs-blatt::after{ left:.45rem; width:.8rem; height:.8rem; }
  .hs-gruende{ grid-template-columns:minmax(0,1fr); }
}

/* === UEBUNGSSCHAU /uebungen/ (AP 8.5b, E71) ======================= */
/* Die zweite Seite im Heftstil (Steffens Wunsch): Sie traegt
   `.heftstapel` UND `.heftschau` und erbt damit Pult, Papier, Umschlaege,
   Etiketten und Knoepfe der Startseite. Was nur hier gilt, hat `us-`.
   Neu im Material: eingeklebte Fotos (Klebestreifen, weisser Rand),
   ein Handy als Rahmen fuer die Fotos der Kinderseite und ein
   Karteikasten mit Reitern je Bereich - in der Farbe des Bereichs aus
   den Tokens (uebungstypen.js: `farbe`), nie aus --hs-*. */

.heftschau .hs-auf{ padding-bottom:clamp(3.5rem,6vw,5rem); }
/* Hier traegt die rechte Seite die Bilder - sie bekommt die breitere Haelfte. */
@media (min-width:64rem){
  .heftschau .hs-heft{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .heftschau .hs-heft::before, .heftschau .hs-heft::after{ left:50%; }
  .heftschau .hs-knoepfe .hs-knopf{ flex-basis:9rem; padding-inline:1rem; }
}
.us-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Ein eingeklebtes Foto: weisser Rand, Klebestreifen, liegt auf. */
.us-zwei-tafel, .us-karte, .us-vergleich, .us-foto, .us-ausdruck, .us-streifen, .us-ausweise{
  position:relative; margin:0; background:var(--hs-etikett); color:var(--hs-etikett-tinte); border-radius:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 26px -14px rgba(27,33,48,.6);
}
.us-zwei-tafel::before, .us-karte::before, .us-vergleich::before, .us-foto::before, .us-streifen::before{
  content:""; position:absolute; z-index:2; top:-.7rem; left:50%; width:5.2rem; height:1.45rem; margin-left:-2.6rem;
  background:var(--hs-klebeband); border-left:1px dashed rgba(27,33,48,.08); border-right:1px dashed rgba(27,33,48,.08);
  box-shadow:0 1px 2px rgba(27,33,48,.12); transform:rotate(var(--band,-3deg)); pointer-events:none;
}
.us-zwei-tafel img, .us-karte img, .us-vergleich img, .us-foto img, .us-ausdruck img, .us-streifen img, .us-ausweise img,
.us-handy img, .us-stempelheft img{ display:block; width:100%; height:auto; }
html[data-theme="dark"] .heftschau img{ filter:brightness(.9); }

/* Ein Handy: dunkler Rahmen, runde Ecken - darin das Foto der Kinderseite. */
.us-handy{
  position:relative; margin:0; padding:.42rem; border-radius:1.55rem; background:var(--hs-handy);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 3px rgba(0,0,0,.25),0 24px 40px -18px rgba(27,33,48,.7);
}
.us-handy img{ border-radius:1.15rem; }

/* --- Das Heft oben: Inhaltsverzeichnis und "Ein Fall, zwei Orte" --- */
.us-verzeichnis{ max-width:30rem; margin:0 0 var(--zeile); }
.us-verzeichnis-titel{ margin:0; line-height:var(--zeile); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hs-tinte-2); }
.us-verzeichnis ol{ list-style:none; margin:0; padding:0; }
.us-verzeichnis a{
  display:flex; align-items:baseline; gap:.45rem; text-decoration:none;
  font:400 1.12rem/var(--zeile) "Andika",var(--font-body); color:var(--hs-fueller);
}
.us-verzeichnis i{ flex:1 1 1rem; min-width:1rem; border-bottom:2px dotted color-mix(in srgb,var(--hs-fueller) 40%,transparent); transform:translateY(-.28em); }
.us-verzeichnis b{ font-weight:400; min-width:1.5ch; text-align:right; }
.us-verzeichnis a:hover span, .us-verzeichnis a:focus-visible span{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.2em; }

.us-zwei-bild{ position:relative; margin:var(--zeile) 0 calc(var(--zeile) * 4); padding:0 11% 0 0; cursor:zoom-in; }
.us-zwei-tafel{ padding:.35rem; transform:rotate(-1.4deg); }
.us-zwei-handy{ position:absolute; right:-.8rem; bottom:-6rem; width:34%; transform:rotate(4deg); }
.us-zwei-leiste{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; margin-top:auto; }
.us-zwei-name{ margin:0; font:400 1.02rem/var(--zeile) "Andika",var(--font-body); color:var(--hs-tinte-2); }
.us-zwei--neu .us-zwei-tafel{ animation:us-auflegen .5s cubic-bezier(.16,1,.3,1) both; }
.us-zwei--neu .us-zwei-handy{ animation:us-auflegen-handy .55s .06s cubic-bezier(.16,1,.3,1) both; }
@keyframes us-auflegen{ from{ opacity:0; transform:translateY(-10px) rotate(-4deg) scale(1.03); } to{ opacity:1; transform:rotate(-1.4deg); } }
@keyframes us-auflegen-handy{ from{ opacity:0; transform:translate(14px,-8px) rotate(9deg); } to{ opacity:1; transform:rotate(4deg); } }

/* --- Der Karteikasten: Reiter und Blatt ---------------------------- */
.us-kasten{ position:relative; }
.us-reiter{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.4rem; padding:0 0 0 clamp(.6rem,3vw,2.4rem); margin-bottom:-4px; }
.us-reiter-knopf{
  --bereich:var(--hs-tinte);
  min-height:3rem; padding:.55rem 1.05rem .7rem; border:0; border-top:4px solid var(--bereich); border-radius:10px 10px 0 0;
  background:color-mix(in srgb,var(--bereich) 20%,var(--hs-pult)); color:var(--hs-tinte);
  font:700 .98rem/1.1 var(--font-body); cursor:pointer;
  box-shadow:inset 0 -8px 10px -8px rgba(27,33,48,.28); transform:translateY(5px);
  transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s;
}
.us-reiter-knopf span{ margin-left:.2rem; font:400 1rem/1 "Andika",var(--font-body); color:var(--hs-tinte-2); }
.us-reiter-knopf:hover{ transform:translateY(1px); }
.us-reiter-knopf[aria-pressed="true"]{ background:var(--hs-papier); transform:none; box-shadow:none; }
.us-reiter-knopf:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:2px; }

.hs-blatt.us-blatt{ padding:calc(var(--zeile) * 1.5) clamp(1rem,3.5vw,3rem) calc(var(--zeile) * 1.5) calc(var(--rand-x) + 1.4rem); border-radius:3px 6px 6px 6px; }
.us-bereich{ scroll-margin-top:6rem; }
.us-bereich + .us-bereich{ margin-top:calc(var(--zeile) * 2); }
.us-bereich-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 1.2rem; margin-bottom:calc(var(--zeile) * 1.25); }
.us-bereich-kopf h3{
  position:relative; top:calc(.425rem - .43em); display:flex; align-items:center; gap:.6rem;
  font-size:1.55rem; line-height:var(--zeile); margin:0; letter-spacing:-.015em;
}
.us-bereich-kopf h3::before{ content:""; width:.95rem; height:.95rem; border-radius:3px; background:var(--bereich); transform:rotate(-8deg); box-shadow:0 1px 1px rgba(0,0,0,.15); }
.us-bereich-kopf p{ margin:0; font:400 1.05rem/var(--zeile) "Andika",var(--font-body); color:var(--hs-fueller); }

.us-karten{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr)); gap:calc(var(--zeile) * 1.25) clamp(1.1rem,2.4vw,1.9rem); }
.us-karte{
  display:block; height:100%; padding:.45rem .45rem .8rem; text-decoration:none;
  transform:rotate(var(--dreh,0deg));
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.us-karten > li:nth-child(3n+1) .us-karte{ --dreh:-.9deg; --band:-4deg; }
.us-karten > li:nth-child(3n+2) .us-karte{ --dreh:.7deg; --band:2deg; }
.us-karten > li:nth-child(3n) .us-karte{ --dreh:-.25deg; --band:-1deg; }
.us-karte:hover, .us-karte:focus-visible{
  transform:translateY(-5px) rotate(0deg); color:var(--hs-etikett-tinte);
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 26px 36px -18px rgba(27,33,48,.65);
}
.us-karte:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:4px; }
.us-karte-foto{ display:block; aspect-ratio:16 / 9; overflow:hidden; border-radius:2px; background:#f6f2ea; box-shadow:inset 0 0 0 1px rgba(27,33,48,.08); }
.us-karte-foto img{ height:100%; object-fit:cover; object-position:top; transition:transform .45s cubic-bezier(.16,1,.3,1); }
.us-karte:hover .us-karte-foto img{ transform:scale(1.035); }
.us-karte-name{
  display:flex; align-items:center; gap:.5rem; margin:.7rem .3rem .2rem;
  font:400 1.2rem/1.25 "Andika",var(--font-body); color:var(--hs-etikett-fueller);
}
.us-karte-name::before{ content:""; flex:none; width:.6rem; height:.6rem; border-radius:50%; background:var(--bereich); }
.us-karte-name::after{ content:"→"; margin-left:auto; opacity:0; transform:translateX(-4px); transition:opacity .2s,transform .2s; }
.us-karte:hover .us-karte-name::after, .us-karte:focus-visible .us-karte-name::after{ opacity:1; transform:none; }
.us-karte-text{ display:block; margin:0 .3rem; font-size:.92rem; line-height:1.5; color:#485266; }

/* --- Was die Wortarten-Werkstatt sonst noch kann -------------------------- */
.us-seite{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr); align-items:center;
  gap:clamp(2.2rem,5vw,4.5rem); margin-bottom:clamp(4.5rem,10vw,7.5rem); scroll-margin-top:6rem;
}
.us-seite--gedreht .us-seite-text{ order:2; }
.us-seite:last-child{ margin-bottom:0; }
.us-seite--breit{ grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr); }
.us-marke{
  display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .7rem;
  font:700 .8rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--hs-fueller);
}
.us-marke::before{ content:""; width:1.6rem; height:3px; border-radius:2px; background:currentColor; }
.us-seite h3{ font-size:clamp(1.75rem,1.2rem + 1.6vw,2.45rem); letter-spacing:-.02em; margin:0 0 1rem; text-wrap:balance; }
.us-seite-text > p{ color:var(--hs-tinte-2); font-size:1.05rem; line-height:1.7; max-width:34rem; }
.us-liste, .us-schritte{ list-style:none; margin:0 0 1.2rem; padding:0; max-width:34rem; }
.us-liste li{ position:relative; padding-left:1.7rem; margin-bottom:.45rem; line-height:1.55; color:var(--hs-tinte-2); }
.us-liste li::before{
  content:""; position:absolute; left:.2rem; top:.48em; width:.6rem; height:.6rem;
  border:2px solid var(--hs-fueller); border-radius:50% 45% 55% 50%;
}
.us-liste b, .us-schritte b{ color:var(--hs-tinte); }
.us-schritte{ counter-reset:schritt; }
.us-schritte li{ counter-increment:schritt; position:relative; padding-left:3rem; margin-bottom:1rem; line-height:1.55; color:var(--hs-tinte-2); }
.us-schritte li::before{
  content:counter(schritt); position:absolute; left:0; top:-.2rem; display:grid; place-items:center;
  width:2.1rem; height:2.1rem; border:2px solid var(--hs-fueller); border-radius:52% 48% 46% 54%;
  font:400 1.2rem/1 "Andika",var(--font-body); color:var(--hs-fueller); transform:rotate(-6deg);
}
.us-randnotiz{
  max-width:32rem; margin:1.4rem 0 0; padding:.1rem 0 .1rem 1rem; border-left:2px solid var(--hs-rand);
  font:400 1.1rem/1.5 "Andika",var(--font-body) !important; color:var(--hs-fueller) !important;
}

.us-seite-bild{ position:relative; min-width:0; }

/* Hilfen: ohne/mit Lese-Stuetze zum Ziehen, daneben Wandas Tipp auf dem Handy. */
.us-hilfen{ padding:1.4rem 31% 4.5rem 0; }
.us-vergleich{ padding:.5rem .5rem .6rem; transform:rotate(-1deg); }
.us-vergleich-rahmen{ position:relative; overflow:hidden; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(27,33,48,.08); touch-action:pan-y; }
.us-vergleich--an .us-vergleich-rahmen{ cursor:ew-resize; }
.us-vergleich-mit{ position:absolute; inset:0; height:100%; clip-path:inset(0 0 0 var(--pos,50%)); }
.us-vergleich-strich{ position:absolute; top:0; bottom:0; left:var(--pos,50%); width:3px; margin-left:-1.5px; background:var(--hs-fueller); pointer-events:none; }
.us-vergleich-strich::after{
  content:"↔"; position:absolute; top:50%; left:50%; width:2.3rem; height:2.3rem; margin:-1.15rem 0 0 -1.15rem;
  display:grid; place-items:center; border-radius:50%; background:var(--hs-fueller); color:#fff; font:700 1.05rem/1 var(--font-body);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.us-vergleich-regler{ display:block; margin:.5rem .2rem 0; }
.us-vergleich-regler input{ display:block; width:100%; margin:0; accent-color:var(--hs-fueller); }
.us-vergleich figcaption{ display:flex; justify-content:space-between; gap:1rem; margin:.35rem .25rem 0; font:400 1rem/1.3 "Andika",var(--font-body); color:var(--hs-etikett-fueller); }
.us-handy--tipp{ position:absolute; right:0; top:-.6rem; width:29%; transform:rotate(3.5deg); z-index:3; }
.heftschau .us-notiz-tipp{ top:auto; bottom:.6rem; left:1.2rem; right:auto; z-index:4; transform:rotate(-2.5deg); }

.us-foto--gross{ padding:.5rem; transform:rotate(.8deg); }
.us-foto--gross img{ border-radius:2px; box-shadow:inset 0 0 0 1px rgba(27,33,48,.08); }

/* Lehrerbereich: Ausdruck mit Bueroklammer, darueber ein Streifen, daneben die Ausweise. */
.us-akten{ padding:1rem 0 4rem; }
.us-ausdruck{ padding:.55rem; transform:rotate(.5deg); }
.us-ausdruck::before{
  content:""; position:absolute; z-index:2; top:-1.3rem; left:42%; width:1.05rem; height:3.4rem;
  border:3px solid #9aa1ab; border-bottom-color:#b6bcc5; border-radius:1rem; transform:rotate(-6deg);
  box-shadow:0 1px 1px rgba(0,0,0,.15);
}
.us-streifen{ width:74%; margin:-2.6rem 0 0 -1.2rem; padding:.3rem; transform:rotate(-1.6deg); z-index:2; --band:3deg; }
.us-ausweise{ position:absolute; z-index:3; right:-1.2rem; bottom:.4rem; width:40%; padding:.3rem; transform:rotate(3deg); }

/* Fallakte: das Handy des Kindes, daneben das Stempelheft als kleines gruenes Heft. */
.us-akte{ display:flex; align-items:flex-end; justify-content:center; gap:0; padding:1rem 0 1rem; }
.us-akte .us-handy{ width:min(19rem,52%); transform:rotate(-2.5deg); z-index:1; }
.us-stempelheft{
  width:min(17rem,46%); margin:0 0 -1rem -2.2rem; padding:.6rem .6rem .6rem 1.2rem; border-radius:6px 10px 10px 6px; transform:rotate(3deg);
  background:var(--hs-glanz),color-mix(in srgb,var(--brand) var(--hs-deck),var(--hs-pult)); box-shadow:var(--hs-schatten); position:relative; z-index:2;
}
.us-stempelheft::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:.6rem; border-radius:6px 0 0 6px; background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.06)); }
.us-stempelheft img{ border-radius:4px; }

.us-schluss-knoepfe{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.heftschau .us-schluss-link{ color:var(--hs-knopf-hell); font-weight:700; text-underline-offset:.2em; }

/* --- Grossansicht: die Uebung als aufgeschlagenes Heft --------------- */
html.us-gross-offen{ overflow:hidden; }
.us-gross{
  width:min(74rem,calc(100vw - 2rem)); max-width:none; max-height:none; margin:auto; padding:0; border:0;
  background:transparent; color:var(--hs-tinte); overflow:visible;
}
.us-gross::backdrop{ background:rgba(16,19,24,.66); }
.us-gross-heft{
  position:relative; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  max-height:calc(100dvh - 2rem); padding:.7rem; border-radius:10px;
  background:var(--hs-glanz),color-mix(in srgb,var(--umschlag,var(--brand)) var(--hs-deck),var(--hs-pult));
  box-shadow:0 2px 4px rgba(0,0,0,.2),0 40px 90px -30px rgba(0,0,0,.75);
}
.us-gross[open] .us-gross-heft{ animation:us-aufschlagen .38s cubic-bezier(.16,1,.3,1); }
@keyframes us-aufschlagen{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.us-gross-links, .us-gross-rechts{ min-width:0; min-height:0; overflow:auto; background-color:var(--hs-papier); }
.us-gross-links{
  display:flex; flex-direction:column; gap:1rem; padding:1.2rem 1.4rem 1.4rem; border-radius:4px 0 0 4px;
  background-image:linear-gradient(to left,rgba(27,33,48,.09),transparent 1.8rem);
}
.us-gross-rechts{
  --rand-x:calc(100% - 2.4rem);
  display:flex; flex-direction:column; padding:calc(var(--zeile) * 1.5) calc(2.4rem + 1.1rem) var(--zeile) 1.6rem; border-radius:0 4px 4px 0;
  background-image:
    linear-gradient(to right,transparent var(--rand-x),var(--hs-rand) var(--rand-x),var(--hs-rand) calc(var(--rand-x) + 1px),transparent calc(var(--rand-x) + 1px)),
    linear-gradient(to right,rgba(27,33,48,.07),transparent 1.6rem),
    linear-gradient(to bottom,transparent calc(var(--zeile) - 1px),var(--hs-linie) calc(var(--zeile) - 1px));
  background-size:100% 100%,100% 100%,100% var(--zeile);
  background-position:0 0,0 0,0 var(--hs-lage);
}
.us-ansicht{ display:inline-flex; align-self:flex-start; gap:.3rem; padding:.25rem; border-radius:12px; background:color-mix(in srgb,var(--hs-tinte) 7%,transparent); }
.us-ansicht button{
  min-height:2.75rem; padding:.45rem .95rem; border:0; border-radius:9px; background:transparent; cursor:pointer;
  font:700 .95rem/1.1 var(--font-body); color:var(--hs-tinte-2);
}
.us-ansicht button[aria-pressed="true"]{ background:var(--hs-etikett); color:var(--hs-etikett-tinte); box-shadow:0 1px 2px rgba(0,0,0,.15),0 4px 10px -6px rgba(27,33,48,.5); }
.us-ansicht button:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:2px; }
.us-gross-bild{ flex:1; min-height:0; display:grid; place-items:center; touch-action:pan-y; user-select:none; }
.us-gross-tafel{
  display:block; width:100%; height:auto; max-height:calc(100dvh - 10rem); object-fit:contain;
  padding:.4rem; background:var(--hs-etikett); border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.12),0 14px 26px -14px rgba(27,33,48,.6);
}
.us-gross-handy{ height:min(calc(100dvh - 10rem),40rem); aspect-ratio:1 / 2; padding:.45rem; border-radius:1.8rem; background:var(--hs-handy); box-shadow:0 24px 40px -18px rgba(27,33,48,.7); }
.us-gross-handy img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:1.35rem; }
.us-gross-nummer{ margin:0; line-height:var(--zeile); font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--hs-tinte-2); }
.heftschau .us-gross h2{ font-size:clamp(1.7rem,1.2rem + 1.4vw,2.3rem); line-height:calc(var(--zeile) * 1.5); letter-spacing:-.02em; margin:0; color:var(--hs-tinte); text-wrap:balance; }
.us-gross-bereich{ display:flex; align-items:center; gap:.5rem; margin:0 0 var(--zeile); font:400 1.1rem/var(--zeile) "Andika",var(--font-body); color:var(--hs-fueller); }
.us-gross-bereich::before{ content:""; width:.8rem; height:.8rem; border-radius:3px; background:var(--umschlag); transform:rotate(-8deg); }
.us-gross-etikett{
  margin:0 0 var(--zeile); padding:.8rem 1rem .9rem; border-radius:10px; background:var(--hs-etikett); color:var(--hs-etikett-tinte);
  box-shadow:inset 0 0 0 1px rgba(27,33,48,.55),inset 0 0 0 4px var(--hs-etikett),inset 0 0 0 5px rgba(27,33,48,.35),0 2px 4px rgba(0,0,0,.12);
}
.us-gross-etikett > div{ padding:.45rem .2rem .5rem; border-bottom:1.5px dotted rgba(27,33,48,.4); }
.us-gross-etikett > div:last-child{ border-bottom:0; }
.us-gross-etikett dt{ font-size:.8rem; font-weight:700; color:#485266; margin-bottom:.15rem; }
.us-gross-etikett dd{ margin:0; font:400 1.1rem/1.45 "Andika",var(--font-body); color:var(--hs-etikett-fueller); }
.us-gross-blaettern{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:auto; }
.us-gross-blaettern .hs-nochmal{ flex:1 1 9rem; min-height:3rem; line-height:1.25; }
.us-gross-blaettern [data-gross-vor]{ text-align:right; }
.us-gross-zu{
  position:absolute; z-index:5; top:-1rem; right:-1rem; width:3.1rem; height:3.1rem; display:grid; place-items:center;
  border:0; border-radius:50%; background:var(--hs-etikett); color:var(--hs-etikett-tinte); cursor:pointer;
  font:400 2rem/1 var(--font-body); box-shadow:0 2px 4px rgba(0,0,0,.25),0 10px 20px -8px rgba(0,0,0,.5);
}
.us-gross-zu:hover{ transform:rotate(90deg); transition:transform .25s cubic-bezier(.16,1,.3,1); }
.us-gross-zu:focus-visible{ outline:3px solid var(--hs-marker); outline-offset:3px; }
.us-blaettert-vor .us-gross-bild, .us-blaettert-vor .us-gross-rechts > *{ animation:us-vor .32s cubic-bezier(.16,1,.3,1); }
.us-blaettert-zurueck .us-gross-bild, .us-blaettert-zurueck .us-gross-rechts > *{ animation:us-zurueck .32s cubic-bezier(.16,1,.3,1); }
@keyframes us-vor{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
@keyframes us-zurueck{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }

/* --- Uebungsschau in schmaleren Fenstern ---------------------------- */
@media (max-width:63.99rem){
  .us-zwei-bild{ max-width:34rem; }
  .us-seite, .us-seite--breit{ grid-template-columns:minmax(0,1fr); }
  .us-seite--gedreht .us-seite-text{ order:0; }
  .us-gross-heft{ grid-template-columns:minmax(0,1fr); overflow:auto; }
  .us-gross-links, .us-gross-rechts{ overflow:visible; }
  .us-gross-links{ border-radius:4px 4px 0 0; background-image:none; }
  .us-gross-rechts{ border-radius:0 0 4px 4px; border-top:2px dashed color-mix(in srgb,var(--hs-tinte-2) 30%,transparent); }
  .us-gross-tafel{ max-height:none; }
  .us-gross-handy{ height:min(70dvh,36rem); }
}
@media (max-width:40rem){
  .us-reiter{ padding-left:.4rem; gap:.3rem; }
  .us-reiter-knopf{ padding:.5rem .7rem .65rem; font-size:.9rem; }
  .hs-blatt.us-blatt{ padding:var(--zeile) .9rem var(--zeile) calc(var(--rand-x) + .8rem); }
  .us-hilfen{ padding:1.2rem 0 0; }
  .us-handy--tipp{ position:relative; top:auto; right:auto; width:52%; margin:1rem .4rem 0 auto; }
  .heftschau .us-notiz-tipp{ top:auto; bottom:5rem; left:.2rem; right:auto; max-width:9.5rem; }
  .us-streifen{ width:92%; margin-left:-.4rem; }
  .us-ausweise{ position:relative; right:auto; bottom:auto; width:78%; margin:-1rem 0 0 auto; }
  .us-akten{ padding-bottom:1rem; }
  .us-gross{ width:calc(100vw - 1rem); }
  .us-gross-heft{ max-height:calc(100dvh - 1rem); padding:.45rem; }
  .us-gross-links{ padding:.9rem .8rem 1rem; }
  .us-gross-rechts{ --rand-x:calc(100% - 1.6rem); padding:var(--zeile) calc(1.6rem + .7rem) var(--zeile) 1rem; }
  .us-gross-zu{ top:.4rem; right:.4rem; width:2.8rem; height:2.8rem; }
  .us-ansicht button{ padding:.45rem .7rem; font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce){
  .us-karte, .us-karte-foto img{ transition:none; }
}

/* === FLIESSTEXTSEITEN ============================================= */
.text{ max-width:44rem; padding-block:clamp(2.5rem,6vw,4.5rem); }
.text h1{ font-size:clamp(2rem,1.4rem + 2vw,2.8rem); margin-bottom:.6rem; }
.text h2{ font-size:1.42rem; margin-top:2.6rem; margin-bottom:.7rem; }
.text h3{ font-size:1.1rem; margin-top:1.8rem; margin-bottom:.4rem; }
.text .stand{ color:var(--ink-soft); font-size:.95rem; margin-bottom:2rem; }
.text ul{ padding-left:1.2rem; }
.text li{ margin-bottom:.45rem; }
.text dl{ margin:0 0 1.4rem; }
.text dt{ font-weight:700; margin-top:.9rem; }
.text dd{ margin:0; color:var(--ink-soft); }
.luecke{
  background:var(--amber-soft); border:1px dashed var(--amber);
  border-radius:var(--radius-s); padding:1rem 1.2rem; margin-bottom:1.6rem;
}
.luecke b{ color:var(--ink); }

/* === HILFE (AP 8.5a, E70) ========================================= */
/* Eine Fliesstextseite mit nummerierten Schritten. Die Nummer steht in
   einem Kreis links, der Anker (#schritt-…) landet unter der klebenden
   Kopfzeile statt dahinter. Gedruckt wird ohne Kopf, Fuss und Inhalt. */
.hilfe-inhalt{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0 0 1rem;
  padding:.8rem 1rem; background:var(--paper-2); border-radius:var(--radius-s); }
.hilfe-inhalt a{ font-weight:600; }
.hilfe [id]{ scroll-margin-top:5.5rem; }
.text .hilfe-schritte{ list-style:none; counter-reset:schritt; padding:0; margin:1.4rem 0 0; }
.hilfe-schritte > li{ counter-increment:schritt; position:relative; margin:0 0 0 1.15rem;
  padding:0 0 1.2rem 2.25rem; border-left:2px solid var(--line); }
.hilfe-schritte > li:last-child{ border-left-color:transparent; padding-bottom:0; }
.hilfe-schritte > li::before{
  content:counter(schritt); position:absolute; left:-1.2rem; top:-.15rem;
  width:2.3rem; height:2.3rem; display:grid; place-items:center; border-radius:50%; box-sizing:border-box;
  background:var(--brand-soft); color:var(--brand-ink); border:2px solid var(--brand);
  font:700 1.05rem/1 var(--font-display);
}
.text .hilfe-schritte h3{ margin-top:0; }
.hilfe-schritte p{ margin-top:.3rem; }
.hilfe-schritte > li:target h3{ color:var(--brand-ink); }
@media print{
  body:has(.hilfe) .kopf, body:has(.hilfe) .fuss, .hilfe-inhalt{ display:none !important; }
  .hilfe{ padding-block:0; max-width:none; }
  .hilfe h2, .hilfe h3{ break-after:avoid; }
  .hilfe-schritte > li{ break-inside:avoid; }
  .hilfe-schritte > li::before{ top:0; }       /* sonst ragt die Nummer auf die vorige Seite */
}

/* === FORMULAR (Passwort vergessen, AP 4.3b) ====================== */
.formular{ display:grid; gap:.45rem; max-width:26rem; }
/* Ein verstecktes Formular bleibt versteckt - display:grid schlaegt sonst das hidden-Attribut (AP 8.16). */
.formular[hidden]{ display:none; }
.formular label{ font-weight:700; margin-top:.6rem; }
.formular input{
  min-height:var(--tap); padding:.6rem .9rem; font:inherit; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
}
.formular input:focus-visible{ border-color:var(--brand); }
.formular .knopf{ margin-top:1.1rem; justify-self:start; }
.formular .knopf:disabled{ opacity:.6; cursor:default; transform:none; }
.formular-meldung{ min-height:1.4em; margin:.6rem 0 0; }
.formular-meldung--warnung{ color:var(--red); font-weight:600; }
.formular-meldung--gut{ background:var(--green-soft); border-left:4px solid var(--green); padding:.8rem 1rem; border-radius:var(--radius-s); }
.text .formular-fuss{ margin-top:2.4rem; margin-bottom:0; }
.formular select{ font:inherit; }
.unsichtbar{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* === LEHRERBEREICH (AP 7.1b) ===================================== */
.lk{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.lk h1{ font-size:clamp(2rem,1.4rem + 2vw,2.8rem); margin-bottom:1rem; }
.lk h2{ font-size:1.6rem; margin:1.4rem 0 1rem; }
.lk h3{ margin:2.4rem 0 .6rem; }
.lk .stand{ color:var(--ink-soft); }
.lk .formular{ margin-top:1.8rem; }
.lk-fuss{ margin-top:2rem; font-size:.95rem; }
.lk-leiste{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line); }
.lk-leiste p{ margin:0; }
.lk-leiste-rechts{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.lk-hilfe{ font-weight:600; min-height:2.6rem; display:inline-flex; align-items:center; }

/* Erste Schritte (AP 8.5a, E70): eine Liste mit Haken ueber den Gruppen.
   Der naechste offene Schritt ist hervorgehoben und sagt, wie es geht. */
.lk-schritte{ margin:1.6rem 0 0; padding:1rem 1.2rem 1.1rem; background:var(--brand-soft);
  border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-s); }
.lk-schritte h2{ margin:0; font-size:1.25rem; }
.lk-schritte-liste{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.45rem; }
.lk-schritt{ display:grid; grid-template-columns:1.6rem minmax(0,1fr); gap:.6rem; align-items:start; }
.lk-schritt-haken{ width:1.6rem; height:1.6rem; box-sizing:border-box; display:grid; place-items:center;
  border:2px solid var(--brand); border-radius:50%; color:var(--brand-ink); font-weight:800; font-size:.9rem;
  background:var(--card); }
.lk-schritt--fertig .lk-schritt-text{ color:var(--ink-soft); }
.lk-schritt--fertig .lk-schritt-text b{ font-weight:600; text-decoration:line-through; text-decoration-thickness:1px; }
.lk-schritt-text{ padding-top:.1rem; }
.lk-schritt-wie{ display:block; margin-top:.15rem; color:var(--ink); font-size:.95rem; max-width:40rem; }
.lk-schritt--jetzt .lk-schritt-haken{ border-width:3px; }
.lk-hinweis{ color:var(--ink-soft); font-size:.93rem; margin:.2rem 0 0; max-width:40rem; }
/* Die letzten sieben Tage der Probe oder Lizenz (AP 8.13, E83 ③). */
.lk-ablauf{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:1rem 0 0; padding:.8rem 1rem;
  background:var(--amber-soft); border-left:4px solid var(--amber); border-radius:var(--radius-s); }
.lk-ablauf[hidden]{ display:none; }
.lk-ablauf p{ margin:0; flex:1 1 20rem; }
.lk-klein{ color:var(--ink-soft); font-size:.86rem; font-weight:400; }
.lk-gruppen{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr)); }
.lk-gruppe-knopf{
  width:100%; min-height:var(--tap); display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.9rem 1.1rem; text-align:left; font:inherit; color:var(--ink); cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:var(--shadow-1);
}
.lk-gruppe-knopf:hover{ border-color:var(--brand); }
.lk-gruppe-name{ font-weight:700; }
.lk-zurueck{ background:none; border:0; padding:.4rem 0; min-height:2.6rem; font:600 1rem var(--font-body);
  color:var(--brand-ink); cursor:pointer; }
.lk-knoepfe{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 .6rem; }
.lk-knoepfe .knopf:disabled{ opacity:.55; cursor:default; transform:none; }
.lk-tabelle-rahmen{ overflow-x:auto; margin-top:.6rem; }
.lk-tabelle{ width:100%; border-collapse:collapse; font-size:.97rem; }
.lk-tabelle th{ text-align:left; font-size:.86rem; color:var(--ink-soft); font-weight:700; padding:.5rem .6rem;
  border-bottom:2px solid var(--line); white-space:nowrap; }
.lk-tabelle td{ padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.lk-tabelle input[type=checkbox], .lk-auswahl input[type=checkbox]{ width:1.3rem; height:1.3rem; accent-color:var(--brand); }
.lk-still td{ color:var(--ink-soft); }
.lk-code{ font-family:ui-monospace,Consolas,monospace; letter-spacing:.08em; white-space:nowrap; }
.lk-aktionen{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.lk-aktionen select, .lk-mini{
  min-height:2.4rem; padding:.3rem .7rem; font:inherit; font-size:.9rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:999px; cursor:pointer;
}
.lk-mini:hover, .lk-aktionen select:hover{ border-color:var(--brand); }
.lk-gefahr{ color:var(--red); }
.lk-gefahr:hover{ border-color:var(--red); }
.lk-auswahl{ list-style:none; margin:.8rem 0 1rem; padding:0; display:grid; gap:.3rem 1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr)); }
.lk-auswahl li{ display:flex; align-items:center; gap:.5rem; min-height:2.6rem; }
.lk-ohne input{ max-width:7rem; }

/* Zuweisungen (AP 7.2b) */
.lk-zuweisungen{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.6rem; }
.lk-zw{ padding:.8rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-zw--beendet, .lk-zw--ruht{ background:transparent; }
.lk-zw-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; }
/* Das Fach einer Uebung (AP P.3) - nur sichtbar, wenn es mehr als eines gibt.
   Die Farbe setzt lehrkraft.js aus module.js (--fach: var(--<token>)). */
.lk-fach{ display:inline-block; padding:.05rem .5rem; border-radius:999px; border:2px solid var(--fach, var(--brand));
  color:var(--ink); font-size:.8rem; font-weight:700; line-height:1.4; }
.lk-fach-wahl{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem; margin:1rem 0 0; }
.lk-fach-wahl[hidden]{ display:none; }
.lk-fach-wahl select{ min-height:var(--tap); font:inherit; }
.lk-zw-titel{ font-weight:700; overflow-wrap:anywhere; }
.lk-zw-zustand{ font-size:.86rem; font-weight:700; padding:.05rem .55rem; border-radius:999px; background:var(--green-soft); }
.lk-zw--beendet .lk-zw-zustand, .lk-zw--ruht .lk-zw-zustand{ background:var(--line); color:var(--ink-soft); }
.lk-zw-wem{ margin:.25rem 0 .5rem; overflow-wrap:anywhere; }
.lk-zuweisen{ margin-top:1.4rem; padding:1rem 1.2rem 1.2rem; max-width:40rem;
  border:1px solid var(--line); border-radius:var(--radius-s);
  /* Eine Spalte, die schmaler werden darf als ihr breitestes Feld: Sonst
     behalten Datumsfeld und Auswahl ihre Mindestbreite und ragen bei
     375 px ueber den Rahmen (gemessen: 10 px). */
  grid-template-columns:minmax(0,1fr); }
.lk-zuweisen select, .lk-zuweisen input[type=date]{ width:100%; min-width:0; box-sizing:border-box; }
.lk-zuweisen h4{ margin:0; font-size:1.1rem; }
.lk-zuweisen select{
  min-height:var(--tap); padding:.6rem .9rem; color:var(--ink); max-width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
}
.lk-wem{ border:0; margin:.6rem 0 0; padding:0; min-width:0; }
.lk-wem legend{ font-weight:700; padding:0; }
.lk-wem > label{ display:flex; align-items:center; gap:.5rem; min-height:2.6rem; font-weight:400; margin:0; }
.lk-wem input[type=radio]{ width:1.2rem; height:1.2rem; accent-color:var(--brand); }
/* Hilfen fuer die Kinder (AP 6.2b) - gebaut wie "Fuer wen?". */
.lk-hilfen{ border:0; margin:.6rem 0 0; padding:0; min-width:0; }
.lk-hilfen legend{ font-weight:700; padding:0; }
.lk-hilfen > label:first-of-type{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem; min-height:2.6rem; font-weight:400; margin:0; }
.lk-hilfen input[type=checkbox]{ width:1.2rem; height:1.2rem; min-height:0; padding:0; accent-color:var(--brand); }
.lk-zuweisen .lk-knoepfe .knopf{ margin-top:.6rem; }
/* .formular gibt jedem input Hoehe und Polster und jedem label Fettdruck -
   fuer Kaestchen und Knoepfe in der Liste ist das falsch. */
.lk-zuweisen input[type=radio], .lk-zuweisen input[type=checkbox]{ min-height:0; padding:0; }
.lk-zuweisen .lk-auswahl label{ font-weight:400; margin:0; }
/* Ein Unterrichtspaket verteilen (AP 9.3): ein Kasten wie "Wo hakt es?",
   darin je Kind eine Zeile mit vier Knoepfen und je Niveau die Hilfen. */
.lk-paket{ margin-top:1.4rem; max-width:40rem; }
.lk-paket[hidden]{ display:none; }
.lk-pk-titel{ margin:.2rem 0 .3rem; font-weight:700; overflow-wrap:anywhere; }
.lk-pk-label{ display:block; font-weight:700; margin:.9rem 0 .3rem; }
.lk-pk-wahl, .lk-pk-faellig, .lk-pk-niveau select{ font:inherit; min-height:2.6rem; max-width:100%; min-width:0; box-sizing:border-box;
  padding:.3rem .7rem; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-pk-tabelle th[scope=row]{ white-space:normal; overflow-wrap:anywhere; font-weight:400; color:var(--ink); font-size:.97rem; }
.lk-pk-tabelle th, .lk-pk-tabelle td{ padding:.45rem .35rem; }
.lk-pk-tabelle .lk-pk-spalte{ text-align:center; }
.lk-pk-tabelle thead .lk-klein{ display:block; font-weight:400; }
.lk-pk-tabelle input[type=radio]{ width:1.3rem; height:1.3rem; margin:0; accent-color:var(--brand); }
.lk-pk-niveaus{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(min(11rem,100%),1fr)); }
.lk-pk-niveau{ margin:0; padding:.5rem .7rem .7rem; border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-pk-niveau legend{ padding:0 .3rem; overflow-wrap:anywhere; }
.lk-pk-niveau legend .lk-klein{ font-weight:400; }
.lk-pk-niveau select{ width:100%; }
/* Die Klassenuebersicht nennt das Paket ueber seinen Niveaus (E103). */
.lk-matrix-pakete th, .lk-matrix-pakete td{ border-bottom:0; padding-bottom:0; }
.lk-matrix-pakete .lk-matrix-paket{ text-align:center; color:var(--ink); border-bottom:2px solid var(--brand); }
.lk-matrix-unter{ display:block; font-weight:400; overflow-wrap:anywhere; white-space:normal; }

/* Klassenuebersicht (AP 7.3, E65): breit eine Tabelle Kinder x Uebungen,
   schmal dieselben Felder je Uebung als Liste. Der Stand steht immer als
   Wort im Feld - die Farbe hilft nur beim Ueberfliegen. Gruen/Bernstein
   nur als Flaeche, die Schrift bleibt --ink (Kontrast). */
.lk-stand{ margin-top:1.6rem; }
.lk-stand-kopf{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1rem; }
.lk-stand-kopf h3{ margin:0; }
.lk-stand-beendete{ display:flex; align-items:center; gap:.5rem; min-height:2.6rem; font-weight:400; }
.lk-stand-beendete[hidden]{ display:none; }
.lk-stand-beendete input{ width:1.2rem; height:1.2rem; accent-color:var(--brand); }
.lk-matrix th[scope=col]{ vertical-align:bottom; min-width:7.5rem; }
.lk-matrix th[scope=col]:first-child{ min-width:0; }
.lk-matrix-titel{ display:block; color:var(--ink); font-size:.93rem; overflow-wrap:anywhere; }
.lk-matrix th[scope=row]{ text-align:left; font-weight:700; padding:.55rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.lk-matrix tfoot th, .lk-matrix tfoot td{ border-bottom:0; padding-top:.7rem; vertical-align:top; }
.lk-feld{ display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.9rem; white-space:nowrap; }
.lk-feld--allein{ background:var(--green-soft); font-weight:700; }
.lk-feld--tipp{ background:var(--brand-soft); font-weight:700; }
.lk-feld--abgegeben{ background:var(--green-soft); font-weight:700; }
.lk-feld--versuche{ background:var(--amber-soft); font-weight:700; }
.lk-feld--hilfe{ background:var(--red-soft); font-weight:700; }
.lk-feld--angefangen{ background:var(--blue-soft); }
.lk-feld--offen{ color:var(--ink-soft); }
.lk-feld--fremd{ color:var(--ink-soft); }
.lk-spaet{ font-weight:400; font-size:.82rem; }
.lk-legende .lk-feld{ font-size:.82rem; }
.lk-versuche{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin:.4rem 0 0; }
.lk-versuche[hidden]{ display:none; }
.lk-versuche select{ font:inherit; min-height:2.6rem; max-width:100%; min-width:0; }
.lk-stand-schmal{ display:none; }
.lk-stand-uebung{ padding:.8rem 1rem; margin-top:.6rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-stand-uebung h4{ margin:0; font-size:1rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .6rem; }
.lk-stand-uebung h4 .lk-matrix-titel{ display:inline; font-size:1rem; }
.lk-stand-uebung p{ margin:.2rem 0 .4rem; }
.lk-stand-uebung ul{ list-style:none; margin:0; padding:0; }
.lk-stand-uebung li{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.2rem .8rem;
  min-height:2.4rem; border-top:1px solid var(--line); overflow-wrap:anywhere; }
/* Wo hakt es? (AP 7.3b) - breit je Uebung ein Kasten unter der Tabelle,
   schmal im Block der Uebung. */
.lk-stellen-breit{ margin-top:.8rem; }
.lk-stellen{ margin-top:.5rem; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--card); }
.lk-stand-uebung .lk-stellen{ margin-top:.6rem; }
.lk-stellen summary{ cursor:pointer; min-height:2.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:0 .4rem;
  padding:.3rem .9rem; font-weight:700; overflow-wrap:anywhere; }
.lk-stellen summary .lk-klein{ font-weight:400; }
.lk-stellen-inhalt{ padding:0 .9rem .7rem; }
.lk-stellen .lk-stellen-liste{ margin:0; padding:0 0 0 1.4rem; }
.lk-stellen .lk-stellen-liste li{ display:list-item; min-height:0; padding:.45rem 0; border-top:1px solid var(--line); }
.lk-stellen-zeile{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.3rem .8rem; overflow-wrap:anywhere; }
.lk-stellen-zeile > span{ flex:1 1 14rem; min-width:0; }
.lk-stellen-namen{ margin:.3rem 0 0; }
.lk-stellen-namen[hidden]{ display:none; }
/* Namen auf anderen Geraeten (AP 8.9c, E73): unter "Ihre Gruppen", je Weg
   ein aufklappbarer Kasten wie "Wo hakt es?". */
.lk-namen{ margin-top:2rem; }
.lk-namen[hidden]{ display:none; }
.lk-namen h2{ margin-bottom:.2rem; }
.lk-namen-teil{ margin-top:.7rem; }
.lk-namen-teil .formular{ margin-top:.8rem; }
.lk-namen-teil .lk-stellen{ margin-top:.8rem; }

/* Materialschrank (Stufe 15, AP 15.3): Katalog der PDFs, gebaut wie das Kollegium. */
.lk-material{ margin-top:2rem; }
.lk-material[hidden]{ display:none; }
.lk-material h2{ margin-bottom:.2rem; }
/* AP 15.7: Reiter je Art, Gruppen je Bereich, Karten im Raster - bleibt bei 30+ PDFs übersichtlich. */
.lk-material-werkzeug{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem 1rem; margin:.8rem 0 .2rem; }
.lk-material-reiter{ display:flex; flex-wrap:wrap; gap:.3rem; }
.lk-material-reiter-knopf{ font:inherit; font-size:.92rem; padding:.3rem .8rem; border-radius:999px; cursor:pointer;
  background:var(--card); color:inherit; border:1px solid var(--line); }
.lk-material-reiter-knopf:hover{ border-color:var(--brand); }
.lk-material-reiter-knopf[aria-pressed="true"]{ background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); font-weight:700; }
.lk-material-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.lk-material-filter label[hidden]{ display:none; }
.lk-material-filter select, .lk-material-filter input{ font:inherit; font-size:.92rem; padding:.3rem .5rem;
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--card); color:inherit; }
.lk-material-filter input{ width:13rem; max-width:100%; }
.lk-material-art{ margin-top:1.1rem; }
.lk-material-art h3{ margin:0 0 .1rem; font-size:1.1rem; }
.lk-material-bereich{ display:flex; align-items:center; gap:.5rem; margin:.7rem 0 .35rem; font-size:.92rem; font-weight:600; opacity:.8; }
.lk-material-jetzt{ font-size:.75rem; font-weight:600; padding:.05rem .5rem; border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); }
.lk-material-karten{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(14.5rem, 1fr)); }
.lk-material-karte{ display:flex; flex-direction:column; gap:.25rem; padding:.65rem .8rem; min-width:0;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-material-titel{ overflow-wrap:anywhere; }
.lk-material-knoepfe{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:auto; padding-top:.35rem; }
.lk-material-knoepfe .knopf{ min-height:2.2rem; font-size:.85rem; padding:.35rem .75rem; }
#lk-material-leer[hidden]{ display:none; }

/* Kollegium (AP 8.16) */
.ein-folgen{ margin:.6rem 0 1rem; padding-left:1.3rem; }
.ein-folgen li{ margin:.35rem 0; }
.lk-kollegium{ margin-top:2rem; }
.lk-kollegium[hidden]{ display:none; }
.lk-kollegium h2{ margin-bottom:.2rem; }
.lk-kollegium h3{ margin:1rem 0 .2rem; font-size:1.05rem; }
.lk-kollegium-liste{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.4rem; }
.lk-kollege{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.4rem .8rem;
  padding:.6rem .9rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-kollege-name{ flex:1 1 16rem; min-width:0; overflow-wrap:anywhere; }
.lk-kollege-rolle{ display:block; }
.lk-kollegium .formular{ margin-top:1rem; max-width:32rem; }
.lk-namen-teil select{ min-height:var(--tap); max-width:100%; }
/* Ein Dateifeld bringt seine eigene Mindestbreite mit - bei 360 px ragte
   es 13 px heraus und die Seite scrollte waagerecht (gemessen). */
.lk-namen-teil .formular{ min-width:0; }
.lk-namen-teil input[type="file"]{ width:100%; max-width:100%; min-width:0; }
.lk-haken{ display:flex; align-items:flex-start; gap:.5rem; font-weight:400; margin:.5rem 0; }
.lk-haken input{ width:1.25rem; height:1.25rem; margin:.15rem 0 0; flex:none; }
.lk-notfall-schluessel{
  font:700 1.25rem/1.4 Consolas,"Courier New",monospace; letter-spacing:.06em; overflow-wrap:anywhere;
  padding:.7rem 1rem; margin:.6rem 0; border:2px dashed var(--line); border-radius:var(--radius-s); background:var(--paper-2);
}
.lk-namen-aus{ margin-top:1rem; }
.lk-namen-fehlen{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; max-width:none;
  padding:.6rem .9rem; margin:.4rem 0 .6rem; background:var(--brand-soft); border-radius:var(--radius-s); color:var(--ink); }
.lk-namen-fehlen[hidden]{ display:none; }
/* Ein Kind (AP 7.4, E67): der Name in der Klassenuebersicht ist ein Link,
   die Ansicht je Uebung ein Block wie schmal in der Klassenuebersicht. */
.lk-kind-link{ color:var(--brand-ink); font-weight:700; text-decoration:underline; text-underline-offset:.18em;
  display:inline-block; padding:.35rem 0; }
.lk-kind-link:hover{ text-decoration-thickness:2px; }
.lk-kind-kopf h2{ margin:.4rem 0 0; overflow-wrap:anywhere; }
.lk-kind-wer{ margin:.2rem 0 .8rem; }
.lk-kind-fall{ padding:.8rem 1rem; margin-top:.8rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-kind-fall--zu{ background:transparent; }
.lk-kind-fall-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.2rem .8rem; }
.lk .lk-kind-fall h3{ margin:0; font-size:1.05rem; overflow-wrap:anywhere; min-width:0; }
.lk-kind-angaben{ margin:.2rem 0 0; }
.lk-verlauf{ list-style:none; margin:.6rem 0 0; padding:0; }
.lk-verlauf li{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .7rem; padding:.45rem 0; border-top:1px solid var(--line); }
.lk-verlauf-zeit{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.9rem; min-width:9.5rem; }
.lk-verlauf-zahlen{ flex:1 1 16rem; min-width:0; font-size:.93rem; overflow-wrap:anywhere; }
.lk-kind-fall .lk-stellen{ margin-top:.7rem; }
.lk-kind-fall .lk-stellen-liste li{ overflow-wrap:anywhere; }

/* In die Foerderdoku (AP 7.5, E68) - je Kind unter dem Fall, fuer die Gruppe
   ein Kasten unter der Klassenuebersicht (breit und schmal derselbe). */
.lk-foerder{ margin-top:.7rem; }
.lk-foerder-zeile{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; min-width:0; }
.lk-foerder-zeile label{ display:flex; align-items:center; gap:.4rem; overflow-wrap:anywhere; }
.lk-foerder-zeile input[type=checkbox]{ width:1.3rem; height:1.3rem; accent-color:var(--brand); flex:none; }
.lk-foerder-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:.45rem; margin-top:.6rem; max-width:40rem; }
.lk-foerder-form[hidden]{ display:none; }
.lk-foerder-form label{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.lk-foerder-stufe{
  min-height:2.4rem; padding:.3rem .6rem; font:inherit; font-size:.93rem; color:var(--ink); max-width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s);
}
.lk-foerder-text{
  width:100%; box-sizing:border-box; min-width:0; padding:.5rem .7rem; font:inherit; font-size:.93rem; line-height:1.45;
  color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); resize:vertical;
}
.lk-foerder-text:focus-visible, .lk-foerder-stufe:focus-visible{ border-color:var(--brand); }
.lk-foerder-gruppe{ margin-top:.8rem; }
.lk-foerder-gruppe[hidden]{ display:none; }
.lk-foerder-gruppe select#lk-foerder-uebung{ display:block; margin:.2rem 0 .4rem; max-width:100%; min-height:2.4rem; font:inherit; }
.lk .lk-foerder-liste{ list-style:none; margin:.4rem 0 .8rem; padding:0; }
.lk .lk-foerder-liste li{ display:grid; grid-template-columns:minmax(0,1fr); gap:.35rem; margin:0; padding:.55rem 0; border-top:1px solid var(--line); }
.lk .lk-foerder-liste li.lk-foerder-aus{ display:block; color:var(--ink-soft); }
@media (max-width:40rem){
  .lk-stand-breit{ display:none; }
  .lk-stand-schmal{ display:block; }
}

/* === KINDERSEITE /kind/ — die Fallakte (AP 6.1b) =================== */
/* Das Portal ist erwachsen - diese eine Seite liest ein Kind. Deshalb
   groessere Schrift, weniger Text, grosse Trefferflaechen; Farben wie
   ueberall aus den Tokens. */
.kind-gross{ font-size:1.35rem; line-height:1.5; }
.kind.text{ padding-block:clamp(1.4rem,4vw,3rem) clamp(2rem,5vw,3.5rem); }

/* --- Wanda und ihre Sprechblase (AP 8.11) --------------------------- */
.kind-wanda{ display:flex; align-items:center; gap:clamp(.8rem,3vw,1.4rem); margin-bottom:1.6rem; }
.kind-wanda-bild{ flex:none; width:clamp(5.5rem,22vw,8rem); height:auto; aspect-ratio:1; border-radius:50%;
  object-fit:cover; border:4px solid var(--brand); background:var(--card); }
.kind-wanda-text{ min-width:0; }
.kind .kind-wanda h1{ margin:0 0 .5rem; overflow-wrap:anywhere; }
.kind-blase{ position:relative; margin:0; padding:.6rem .9rem; font-size:1.15rem; line-height:1.4;
  background:var(--brand-soft); border-radius:var(--radius-s); }
/* Der Zipfel zeigt auf Wanda. */
.kind-blase::before{ content:""; position:absolute; left:-.55rem; top:50%; margin-top:-.5rem;
  border:.5rem solid transparent; border-left:0; border-right-color:var(--brand-soft); }

/* --- So geht's: drei Bilder (AP 8.11) ------------------------------- */
.kind .kind-weg-titel{ margin-top:0; }
.text .kind-weg{ list-style:none; margin:.4rem 0 2rem; padding:0; display:grid; gap:.7rem;
  grid-template-columns:repeat(3, minmax(0, 1fr)); }
.text .kind-weg li{ margin:0; }
.kind-weg-schritt{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.8rem .4rem .9rem; text-align:center; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-s); }
.kind-weg-bild{ width:100%; max-width:8rem; height:auto; }
.kind-weg-nr{ position:absolute; top:-.7rem; left:-.4rem; display:grid; place-items:center; width:1.9rem; height:1.9rem;
  border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:1.05rem; }
.kind-weg-text{ font-weight:700; font-size:1.1rem; line-height:1.25; }
@media (max-width:26rem){ .kind-weg-text{ font-size:.98rem; } }
/* Die Zeichnungen: Linien in --ink, Flaechen aus Karte und Tokenfarben. */
.kind-weg-bild *{ stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.kw-karte, .kw-akte-blatt{ fill:var(--card); }
.kw-streifen{ fill:var(--brand); stroke:none; }
.kw-qr rect{ fill:var(--ink); stroke:none; }
.kw-linie{ fill:var(--line); stroke:none; }
.kw-rahmen, .kw-griff, .kw-haken{ fill:none; }
.kw-rahmen{ stroke:var(--amber); stroke-width:3.5; }
.kw-handy{ fill:var(--paper-2); }
.kw-linse{ fill:var(--ink); stroke:none; }
.kw-akte-hinten{ fill:var(--amber); }
.kw-akte-vorn{ fill:var(--amber-soft); }
.kw-lupe{ fill:var(--brand-soft); stroke:var(--brand-ink); stroke-width:4; }
.kw-griff{ stroke:var(--brand-ink); stroke-width:6; }
.kw-stempel{ fill:none; stroke:var(--green); stroke-width:4; }
.kw-stempel-innen{ fill:var(--green-soft); stroke:var(--green); stroke-width:2; }
.kw-haken{ stroke:var(--green); stroke-width:7; }

/* --- Die grosse Code-Eingabe ---------------------------------------- */
.kind-formular{ max-width:24rem; }
.kind-formular label{ font-size:1.15rem; }
/* width/min-width: Ein Eingabefeld ist von sich aus 20 Zeichen breit - in dieser
   Schrift 345 px, und die Seite scrollte bei 320 px waagerecht. */
.kind-formular input{ width:100%; min-width:0; min-height:4rem; font-size:clamp(1.6rem,6vw,2.1rem); letter-spacing:.14em; text-align:center;
  text-transform:uppercase; font-family:ui-monospace,Consolas,monospace; border-width:2px; }
.kind-formular input::placeholder{ letter-spacing:.14em; }
.kind-formular .knopf{ justify-self:stretch; min-height:3.6rem; font-size:1.25rem; }
/* `.text .kind-faelle` und nicht nur `.kind-faelle`: `.text ul` gibt jeder
   Liste links 1.2rem, und die Karten standen dadurch eingerueckt. */
.text .kind-faelle{ list-style:none; margin:.4rem 0 1.2rem; padding:0; display:grid; gap:.8rem; }
.text .kind-faelle li{ margin:0; }
.kind-fall{ display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.2rem;
  background:var(--card); border:1px solid var(--line); border-left:.4rem solid var(--fach, var(--brand));
  border-radius:var(--radius-s); }
/* Faelle aus mehreren Faechern (AP P.3): Fach als Wort, die Farbe am Rand links (--fach setzt kind.js). */
.kind-fall-fach{ align-self:flex-start; font-size:.95rem; font-weight:700; color:var(--ink); }
.kind-fall-titel{ font-size:1.3rem; line-height:1.35; overflow-wrap:anywhere; }
.kind-fall-faellig{ font-size:1.05rem; color:var(--ink-soft); }
.kind-fall-stempel{ align-self:flex-start; font-size:.95rem; font-weight:700; padding:.1rem .6rem;
  border-radius:999px; background:var(--green-soft); }
/* Seit AP 6.2 ist die ganze Karte der Link auf die Fallseite im Modul. */
.kind-fall:has(> .kind-fall-link){ padding:0; }
.kind-fall-link{ display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.2rem; color:inherit;
  text-decoration:none; border-radius:inherit; min-height:var(--tap); }
.kind-fall-link:hover, .kind-fall-link:focus-visible{ background:var(--brand-soft); }
.kind-fall-los{ align-self:flex-start; margin-top:.3rem; font-weight:700; font-size:1.1rem; color:var(--brand-ink);
  text-decoration:underline; text-underline-offset:.2em; }
.kind-fuss{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:2rem; }

/* --- Rang und Stempelheft (AP 6.4, E48/E64) ------------------------ */
/* Ein Stempel sieht aus wie einer: Ring, Grossbuchstaben, leicht schief.
   Gruen wie "Fall gelöst!" auf der Fallseite. Die Schrift im Ring ist
   fett und ab 1.2rem gross - Gruen auf Karte reicht nur fuer grosse
   Schrift (WCAG AA 3:1); alles Kleinere steht in --ink. */
.kind-rang{ margin:.2rem 0 1.4rem; padding:1rem 1.2rem; background:var(--card);
  border:2px solid var(--green); border-radius:var(--radius); }
.kind-rang-zeile{ font-size:1.35rem; line-height:1.4; margin:0 0 .6rem; }
.kind-rang-zeile strong{ font-family:var(--font-display); font-size:1.5rem; overflow-wrap:anywhere; }
.kind-rang-balken{ display:block; width:100%; height:1rem; accent-color:var(--green); }
.kind-rang-weiter{ font-size:1.15rem; line-height:1.45; margin:.5rem 0 0; }
.kind-fall-stempel--geloest{ background:none; border:2px solid var(--green); color:var(--ink);
  text-transform:uppercase; letter-spacing:.06em; transform:rotate(-4deg); }
.text .kind-stempelheft{ list-style:none; margin:.4rem 0 1.2rem; padding:0; display:grid; gap:1rem .8rem;
  grid-template-columns:repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); }
.text .kind-stempelheft li{ margin:0; }
.kind-stempel{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.kind-stempel-marke{ display:grid; place-items:center; width:6.5rem; aspect-ratio:1; border-radius:50%;
  border:4px double var(--green); color:var(--green); font-weight:800; font-size:1.2rem;
  text-transform:uppercase; letter-spacing:.08em; transform:rotate(-8deg); }
.kind-stempel:nth-child(3n+2) .kind-stempel-marke{ transform:rotate(5deg); }
.kind-stempel:nth-child(3n) .kind-stempel-marke{ transform:rotate(-2deg); }
.kind-stempel-titel{ font-size:1.05rem; line-height:1.35; overflow-wrap:anywhere; }

/* === DETEKTIV-AUSWEISE (nur im Druck) ============================== */
/* Scheckkartengroesse, zehn je A4-Seite. Die Farben stehen im Druck
   fest auf Schwarz auf Weiss statt auf den Tokens: Die Tokens wechseln
   im Dunkelmodus auf helle Schrift, und ein Ausweis auf dunklem Papier
   ist keiner - der QR-Code auch nicht. */
.ausweise{ display:none; }
@media print{
  @page{ size:A4 portrait; margin:10mm; }
  body.druckt-ausweise > *:not(main), body.druckt-ausweise main > *:not(.ausweise){ display:none !important; }
  body.druckt-ausweise{ background:#fff; color:#000; }
  body.druckt-ausweise .ausweise{
    display:grid; grid-template-columns:repeat(2,85.6mm); grid-auto-rows:54mm; gap:3mm 4mm; justify-content:center;
  }
  .ausweis{
    box-sizing:border-box; width:85.6mm; height:54mm; padding:3mm 3.5mm; overflow:hidden;
    display:grid; grid-template-rows:auto 1fr auto; gap:1mm;
    border:0.3mm dashed #777; border-radius:3mm; break-inside:avoid; color:#000; background:#fff;
    font-family:"Segoe UI",Verdana,system-ui,sans-serif;
  }
  .ausweis-kopf{ font-size:8pt; letter-spacing:.02em; border-bottom:0.3mm solid #000; padding-bottom:1mm; }
  .ausweis-mitte{ display:grid; grid-template-columns:1fr 30mm; gap:2mm; align-items:center; }
  .ausweis-name{ font-size:15pt; font-weight:700; line-height:1.1; }
  .ausweis-deck{ font-size:12pt; font-weight:700; margin-top:1mm; }
  .ausweis-code-titel{ font-size:7pt; text-transform:uppercase; letter-spacing:.08em; margin-top:2mm; }
  .ausweis-code{ font:700 15pt/1.1 Consolas,"Courier New",monospace; letter-spacing:.06em; }
  .ausweis-qr svg{ display:block; width:30mm; height:30mm; }
  .ausweis-fuss{ font-size:6.5pt; line-height:1.25; }
}

/* === NOTFALLBLATT (nur im Druck, AP 8.9c) ========================= */
/* Der Wiederherstellungsschluessel des Namenstresors. Das Blatt traegt
   auch `.elternbrief` und erbt damit Schrift und Kopf - gezeigt wird es
   aber nur unter `druckt-notfall`. */
@media print{
  body.druckt-notfall > *:not(main), body.druckt-notfall main > *:not(.notfallblatt){ display:none !important; }
  body.druckt-notfall{ background:#fff; color:#000; }
  body.druckt-notfall .notfallblatt{
    display:block; color:#000; background:#fff; padding:6mm 8mm 0;
    font:11pt/1.45 "Segoe UI",Verdana,system-ui,sans-serif;
  }
  .notfall-schluessel{
    font:700 18pt/1.4 Consolas,"Courier New",monospace; letter-spacing:.08em;
    border:0.4mm dashed #000; padding:4mm 5mm; margin:5mm 0 !important; text-align:center;
  }
}

/* === ELTERNBRIEF (nur im Druck, AP 8.5a) ========================== */
/* Eine A4-Seite, Schwarz auf Weiss aus demselben Grund wie die Ausweise. */
.elternbrief{ display:none; }
@media print{
  body.druckt-elternbrief > *:not(main), body.druckt-elternbrief main > *:not(.elternbrief){ display:none !important; }
  body.druckt-elternbrief{ background:#fff; color:#000; }
  body.druckt-elternbrief .elternbrief{
    display:block; color:#000; background:#fff; padding:6mm 8mm 0;
    font:11pt/1.45 "Segoe UI",Verdana,system-ui,sans-serif;
  }
  .elternbrief-kopf{ font-size:9pt; border-bottom:0.3mm solid #000; padding-bottom:1.5mm; margin-bottom:6mm; }
  .elternbrief h1{ font:700 16pt/1.25 "Segoe UI",Verdana,system-ui,sans-serif; margin:0 0 5mm; color:#000; }
  .elternbrief h2{ font:700 11.5pt/1.3 "Segoe UI",Verdana,system-ui,sans-serif; margin:5mm 0 1.5mm; color:#000; }
  .elternbrief p{ margin:0 0 2.5mm; }
  .elternbrief ol, .elternbrief ul{ margin:0 0 2mm; padding-left:6mm; }
  .elternbrief li{ margin-bottom:1.5mm; }
  .elternbrief-gruss{ margin-top:6mm; }
  .elternbrief-linie{ width:70mm; border-bottom:0.3mm solid #000; height:14mm; }
}

/* === PREISE UND INFOPAKET (AP 8.13, E83) ========================== */
.preise [id], .infopaket [id]{ scroll-margin-top:5.5rem; }
.pr-karten{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap:1rem; margin:1.2rem 0 1.4rem; }
.pr-karte{ background:var(--card); border:1px solid var(--line); border-top:5px solid var(--brand);
  border-radius:var(--radius); padding:1.3rem 1.4rem 1.2rem; box-shadow:var(--shadow-1); }
.pr-karte--schule{ border-top-color:var(--blue); }
.text .pr-karte h3{ margin:0; font-size:1.3rem; }
.pr-karte p{ margin:0; }
.pr-fuer{ color:var(--ink-soft); font-size:.95rem; }
.pr-preis{ font:700 2.6rem/1.1 var(--font-display); margin-top:.8rem !important; letter-spacing:-.02em; }
.pr-zeit{ color:var(--ink-soft); font-size:.95rem; }
.pr-neben{ margin-top:.9rem !important; padding-top:.8rem; border-top:1px dashed var(--line); font-size:.95rem; }
.text .pr-liste li{ margin-bottom:.6rem; }
.pr-heute{ background:var(--brand-soft); border-left:4px solid var(--brand); padding:.7rem 1rem; border-radius:var(--radius-s); }
.text .pr-weg{ padding-left:1.4rem; margin-bottom:1.6rem; }
.pr-formular{ max-width:34rem; gap:1.4rem; margin-top:1rem; }
.pr-formular fieldset{ display:grid; gap:.45rem; margin:0; padding:1.1rem 1.2rem 1.3rem; min-width:0;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.pr-formular legend{ font:700 1.1rem/1.2 var(--font-display); padding:0 .4rem; }
.pr-formular select, .pr-formular textarea{
  min-height:var(--tap); padding:.6rem .9rem; font:inherit; color:var(--ink); width:100%; min-width:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s);
}
.pr-formular input{ width:100%; min-width:0; background:var(--paper); }
.pr-formular textarea{ resize:vertical; }
.pr-formular select:focus-visible, .pr-formular textarea:focus-visible{ border-color:var(--brand); }
.pr-formular .knopf{ margin-top:.8rem; }
.pr-summe{ font-weight:700; margin:.8rem 0 0; }
.pr-summe:empty{ display:none; }
.text .pr-anmerkung{ color:var(--ink-soft); font-size:.9rem; margin:.2rem 0 0; }
.pr-weiter{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.angebot{ display:none; }
@media print{
  .pr-weiter{ display:none !important; }
  @page{ size:A4 portrait; margin:12mm 14mm; }
  body.druckt-angebot > *:not(main), body.druckt-angebot main > *:not(.angebot){ display:none !important; }
  body.druckt-angebot{ background:#fff; color:#000; }
  body.druckt-angebot .angebot{
    display:block; color:#000; background:#fff; font:10.5pt/1.45 "Segoe UI",Verdana,system-ui,sans-serif;
  }
  .angebot p{ margin:0 0 2mm; }
  .angebot-kopf{ display:grid; grid-template-columns:1fr auto; gap:2mm 10mm; margin-bottom:12mm; }
  .angebot .angebot-absender{ grid-column:1 / -1; font-size:8pt; border-bottom:0.3mm solid #000; padding-bottom:1mm; margin-bottom:4mm; }
  .angebot-an p{ margin:0; }
  .angebot-daten{ display:grid; grid-template-columns:auto auto; gap:.5mm 4mm; margin:0; font-size:9.5pt; align-self:start; }
  .angebot-daten dt{ font-weight:700; }
  .angebot-daten dd{ margin:0; }
  .angebot h1{ font:700 17pt/1.2 "Segoe UI",Verdana,system-ui,sans-serif; margin:0 0 5mm; color:#000; }
  .angebot h2{ font:700 11pt/1.3 "Segoe UI",Verdana,system-ui,sans-serif; margin:6mm 0 1.5mm; color:#000; }
  .angebot-posten{ width:100%; border-collapse:collapse; margin:4mm 0 3mm; }
  .angebot-posten th, .angebot-posten td{ border-bottom:0.3mm solid #000; padding:1.8mm 1.5mm; text-align:left; vertical-align:top; }
  .angebot-posten th:nth-child(n+3), .angebot-posten td:nth-child(n+3){ text-align:right; white-space:nowrap; }
  .angebot-posten td span{ display:block; }
  .angebot-summen{ display:grid; grid-template-columns:auto 32mm; justify-content:end; gap:1mm 6mm; margin:0 1.5mm 2mm 0; }
  .angebot-summen dt, .angebot-summen dd{ margin:0; text-align:right; }
  .angebot-summen dt:last-of-type, .angebot-summen dd:last-of-type{ font-weight:700; border-top:0.3mm solid #000; padding-top:1mm; }
  .angebot ul{ margin:0 0 2mm; padding-left:5mm; }
  .angebot li{ margin-bottom:1mm; }
  .angebot .angebot-gruss{ margin-top:6mm; }
  .angebot .angebot-fuss{ margin-top:10mm; border-top:0.3mm solid #000; padding-top:1.5mm; font-size:8pt; }
}

/* === FUSSZEILE ==================================================== */
.fuss{ border-top:1px solid var(--line); background:var(--paper-2); margin-top:var(--luft); }
.fuss-innen{
  display:flex; flex-wrap:wrap; gap:1.6rem 2rem; justify-content:space-between; align-items:center;
  padding-block:2.4rem;
}
.fuss-marke{ display:flex; align-items:center; gap:.85rem; }
.fuss-marke b{ display:block; font-family:var(--font-display); font-size:1.05rem; }
.fuss-marke span{ color:var(--ink-soft); font-size:.92rem; }
.fuss-nav{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; }
.fuss-nav a{ color:var(--ink-soft); text-decoration:none; font-size:.96rem; font-weight:600; }
.fuss-nav a:hover{ color:var(--brand-ink); text-decoration:underline; }
.fuss-zeile{
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between;
  border-top:1px solid var(--line); padding-block:1.2rem 1.6rem;
  color:var(--ink-soft); font-size:.86rem;
}
.fuss-zeile p{ margin:0; }
/* Der Fuss der Kinderseite (AP 8.11): eine kleine Zeile fuer die Erwachsenen. */
.fuss-kind{ margin-top:0; }
.fuss-kind-innen{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:space-between; align-items:center;
  padding-block:1rem 1.3rem; color:var(--ink-soft); font-size:.86rem; }
.fuss-kind-innen p{ margin:0; }
.fuss-kind-nav{ display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; }
.fuss-kind-nav a{ color:var(--ink-soft); font-weight:600; }

/* === VERTRAG UND VERZEICHNIS (AP 8.2) ============================== */
.avv [id], .verarbeitung [id]{ scroll-margin-top:5.5rem; }
.avv table, .verarbeitung table{ width:100%; border-collapse:collapse; margin:.8rem 0 1.4rem; font-size:.95rem; }
.avv th, .avv td, .verarbeitung th, .verarbeitung td{
  border:1px solid var(--line); padding:.55rem .7rem; text-align:left; vertical-align:top; }
.avv thead th, .verarbeitung thead th{ background:var(--brand-soft); font-weight:700; }
.avv .avv-kopf th{ width:34%; font-weight:600; background:transparent; }
.avv .avv-kopf td{ height:2.4rem; }
.avv-unterschrift{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap:1.6rem 3rem; margin:1.2rem 0 2rem; }
.avv-unterschrift p{ margin:0; }
.avv-unterschrift .linie{ margin-top:2.8rem; padding-top:.3rem; border-top:1px solid var(--ink); font-size:.9rem; color:var(--ink-soft); }
.text.avv h3{ break-after:avoid; }
@media (max-width:40rem){
  .avv .avv-tabelle, .verarbeitung table{ display:block; overflow-x:auto; }
}
@media print{
  .avv, .verarbeitung{ font-size:10.5pt; line-height:1.4; }
  .avv table, .verarbeitung table{ font-size:9.5pt; }
  .avv tr, .verarbeitung tr{ break-inside:avoid; }
  .avv h2{ break-before:page; }
  .avv h2#parteien, .avv h2#vertrag{ break-before:auto; }
  .avv-unterschrift{ break-inside:avoid; }
  .avv th, .avv td, .verarbeitung th, .verarbeitung td{ border-color:#000; }
  .avv thead th, .verarbeitung thead th{ background:#eee; color:#000; }
  .avv-unterschrift .linie{ border-top-color:#000; color:#000; }
}
.avv h1, .verarbeitung h1, .avv h2, .verarbeitung h2{ overflow-wrap:break-word; hyphens:auto; }

/* === FREIES SCHREIBEN LESEN (AP 9.7, E111) ========================= */
.lk-texte-kind{ margin:1rem 0 .3rem; }
.lk-texte-eintrag{ border-left:4px solid var(--green-soft); padding:.2rem 0 .4rem .7rem; margin:.4rem 0; }
.lk-texte-aufgabe{ margin:0; font-weight:700; }
.lk-texte-text{ margin:.2rem 0 .3rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.lk-texte-weg{ margin:.2rem 0; font-style:italic; }
/* Verteilung bei Meinung und Reflexion (Stufe 12, AP K.5) */
.lk-kaesten{ display:grid; gap:.4rem; }
.lk-verteilung-frage{ margin:.6rem 0 .2rem; }
.lk-verteilung-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.lk-verteilung-wahl{ display:inline-flex; align-items:center; gap:.5rem; }
.lk-verteilung-balken{ display:inline-block; height:.8rem; width:calc(var(--anteil) * 8rem + 2px); background:var(--blue, #2d6cdf); border-radius:3px; }
.lk-texte-durchgang{ margin:.6rem 0 0; }
@media print{
  body.druckt-texte > *:not(main), body.druckt-texte main > *:not(.texteblatt){ display:none !important; }
  body.druckt-texte{ background:#fff; color:#000; }
  body.druckt-texte .texteblatt{
    display:block; color:#000; background:#fff; padding:6mm 8mm 0;
    font:12pt/1.5 "Segoe UI",Verdana,system-ui,sans-serif;
  }
  .texteblatt h3{ break-after:avoid; margin:6mm 0 1mm; }
  .texteblatt .lk-texte-eintrag{ break-inside:avoid; border-left:0.6mm solid #999; }
}

/* === STATUS (AP 8.4, E122 ④) ======================================= */
.st-hinweis{ margin:1.4rem 0 0; padding:.9rem 1.1rem; border-radius:var(--radius-s); border-left:4px solid var(--amber);
  background:var(--amber-soft); }
.st-hinweis--stoerung{ border-left-color:var(--red); background:var(--red-soft); }
.st-hinweis--behoben{ border-left-color:var(--green); background:var(--green-soft); }
.st-hinweis p{ margin:0; }
.st-hinweis .st-hinweis-art{ font-weight:700; margin-bottom:.25rem; }
.st-pruefung{ margin-top:1.6rem; }
.st-gesamt{ font-weight:600; max-width:44rem; }
.st-liste, .text .st-liste{ list-style:none; margin:1rem 0; padding:0; display:grid; gap:.5rem; max-width:44rem; }
.st-zeile{ display:grid; grid-template-columns:1rem minmax(0,1fr) auto; gap:.4rem .8rem; align-items:baseline;
  padding:.7rem .9rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-s); }
.st-punkt{ width:.8rem; height:.8rem; border-radius:50%; background:var(--line); align-self:center; }
.st-zeile[data-stand="gut"] .st-punkt{ background:var(--green); }
.st-zeile[data-stand="schlecht"] .st-punkt{ background:var(--red); }
.st-zeile[data-stand="unklar"] .st-punkt{ background:var(--amber); }
.st-wozu{ display:block; color:var(--ink-soft); font-size:.92rem; }
.st-wert{ font-weight:600; text-align:right; }
.st-zeile[data-stand="schlecht"] .st-wert{ color:var(--red); }
@media (max-width:30rem){
  .st-zeile{ grid-template-columns:1rem minmax(0,1fr); }
  .st-wert{ grid-column:2; text-align:left; }
}
/* Der Weg zur Statusseite unter einer Meldung (Lehrerbereich, AP 8.4). */
.stoerung-link{ display:inline-block; margin-left:.4rem; font-weight:600; }

/* --- Galerie der Kunst im Lehrerbereich (Stufe 12, AP K.11b) ---------------- */
.lk-galerie-form{ max-width:34rem; margin:.4rem 0 1rem; }
.lk-galerie-vorschau{ margin:.4rem 0 .6rem; }
.lk-galerie-vorschau img{ display:block; max-width:100%; max-height:22rem; width:auto; height:auto; border:1px solid var(--line); border-radius:var(--radius-s); }
.lk-galerie-bald{ font-weight:700; color:var(--red); }
.lk-galerie-liste{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr)); gap:.8rem; }
.lk-galerie-foto{ border:1px solid var(--line); border-radius:var(--radius-s); padding:.5rem; background:var(--bg); display:flex; flex-direction:column; gap:.4rem; }
.lk-galerie-foto figure{ margin:0; display:flex; flex-direction:column; gap:.3rem; }
.lk-galerie-bild{ display:block; width:100%; height:9rem; object-fit:contain; background:var(--card); border-radius:calc(var(--radius-s) - 2px); }
.lk-galerie-foto figcaption{ display:flex; flex-direction:column; gap:.1rem; overflow-wrap:anywhere; }
.lk-galerie-foto .lk-knoepfe{ margin-top:auto; }

/* --- Pakete je Fach (Faecher-Register) ---------------------------- */
.hs-pk-reiter{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.6rem; }
.hs-pk-reiter[hidden]{ display:none; }
.hs-pk-reiter button{
  min-height:2.75rem; padding:.45rem 1rem; border-radius:999px; cursor:pointer;
  font:700 .98rem/1 var(--font-body); color:var(--hs-tinte);
  background:transparent; border:2px solid var(--c);
}
.hs-pk-reiter button span{ font-weight:400; color:var(--hs-tinte-2); margin-left:.3rem; }
.hs-pk-reiter button[aria-pressed="true"]{ background:var(--c); color:#fff; }
.hs-pk-reiter button[aria-pressed="true"] span{ color:#fff; }
.hs-pk-reiter button:focus-visible{ outline:3px solid var(--hs-fueller); outline-offset:2px; }
.hs-pk-fach + .hs-pk-fach{ margin-top:clamp(2rem,4vw,3rem); }
.hs-pk-fach[hidden]{ display:none; }
.hs-pk-fachtitel{ font-size:1.25rem; margin:0 0 1rem; }
.hs-pk-reiter:not([hidden]) ~ .hs-pk-fach .hs-pk-fachtitel{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hs-pk-mehr{ margin:1.2rem 0 0; color:var(--hs-tinte-2); }
.hs-pk-mehr a{ color:var(--hs-fueller); }

/* --- Uebungsschau: die Faecher als Reiter ueber dem Heft ----------- */
.us-faecher{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 1.4rem; }
.us-faecher p{ margin:0 .4rem 0 0; font-weight:700; color:var(--hs-tinte-2); }
.us-faecher a{
  display:inline-flex; align-items:center; min-height:2.75rem; padding:.4rem 1rem; border-radius:999px;
  font-weight:700; text-decoration:none; color:var(--hs-tinte); border:2px solid var(--c);
}
.us-faecher a span{ font-weight:400; margin-left:.35rem; color:var(--hs-tinte-2); }
.us-faecher a[aria-current="page"]{ background:var(--c); color:#fff; }
.us-faecher a[aria-current="page"] span{ color:#fff; }