/* KURDISCH-AKADEMIE — Redesign-Vorlage · Module (Abschnitte, Karten, Listen) */

/* ---------- Bildplatzhalter ---------- */
.bild{ position:relative; background:var(--papier-2); overflow:hidden }
.bild img{ width:100%; height:100%; object-fit:cover; transition:transform 700ms cubic-bezier(.2,.7,.3,1) }
.bild::after{
  content:attr(data-datei); position:absolute; inset:0; display:none;
  align-items:center; justify-content:center; padding:14px; text-align:center;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grau);
  background:repeating-linear-gradient(135deg,var(--papier-2) 0 12px,var(--papier-3) 12px 24px);
}
.bild.fehlt::after{ display:flex }
.bild.fehlt img{ visibility:hidden }

/* ---------- Kopfbereich (Start) ---------- */
.held{ position:relative; padding-block:clamp(48px,7vw,96px) clamp(96px,11vw,150px); overflow:hidden }

/* Startseite: der Auftakt fuellt den Schirm. Abzueglich der Kopfhoehe — der
   Kopf klebt oben und gehoert zum Bild, das man beim Ankommen sieht.

   `svh` statt `vh`: auf dem Telefon zaehlt `vh` die Adressleiste mit, und der
   Auftakt ragte unten darueber hinaus. `vh` bleibt als Rueckfall stehen, aeltere
   Browser kennen `svh` nicht.

   Der Textblock wandert in die Mitte. Das untere Polster ist absichtlich
   groesser als das obere — darunter liegt die Risskante, und Text, der bis an
   sie heranreicht, wirkt angeschnitten. */
.held--voll{
  min-height:calc(100vh - var(--kopf-hoehe));
  min-height:calc(100svh - var(--kopf-hoehe));
  display:flex; flex-direction:column; justify-content:center;
}
.held__satz{ position:absolute; inset:0; padding:22px 2.4vw; z-index:0 }
.held__inhalt{ position:relative; z-index:1; text-align:center }
.held__titel{ font-size:clamp(2.8rem,10.5vw,10.5rem); margin:0 auto; max-width:14ch }
.held__titel .zeile{ display:block }
.held__marker{
  font-family:var(--schrift-ui); font-weight:700; font-size:clamp(.75rem,1.7vw,1.5rem);
  letter-spacing:.02em; vertical-align:.9em; margin-left:.4em; padding:.28em .5em .34em; white-space:nowrap;
  background:var(--papier); color:var(--rot); text-transform:uppercase;
}

/* Auf schmalen Schirmen darf der Marker umbrechen. Mit `nowrap` war er auf
   `woerterbuch.html` bei 375 px 436 px breit — der Auftakt klammert, und
   „… Deutsch und Kurdisch" endete mitten im Wort am Bildrand. */
@media (max-width:560px){
  .held__marker{ white-space:normal }
}
.held__aktion{ margin-top:clamp(28px,4vw,46px) }
.held__aktion .knopf{ min-width:min(320px,80vw) }

/* ---------- Abschnittskopf ---------- */
.kopfzeile{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4) }
.kopfzeile h2{ margin:0 }
.marke-rot{ background:var(--rot); color:#fff; padding:.06em .26em .12em }

/* ---------- Kartenraster ---------- */
.raster{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3) }
.raster > *{ min-width:0 }   /* verhindert Überlauf durch lange Titel */
.raster__text{ align-self:center; padding-right:var(--s3) }
.karte{ display:flex; flex-direction:column; gap:14px; position:relative; min-width:0 }
.karte--gross{ grid-column:span 2 }
.karte__bild{ aspect-ratio:3/4 }
.karte--gross .karte__bild{ aspect-ratio:4/3.1 }
/* Breite Kachel: Deckel vollständig zeigen statt oben/unten zu beschneiden */
.karte--gross .karte__bild img{ object-fit:contain; padding:clamp(16px,2.2vw,34px) }
.karte__titel a{ text-decoration:none }
.karte__titel a::after{ content:""; position:absolute; inset:0; z-index:1 }  /* ganze Karte klickbar */
.karte:hover .bild img{ transform:scale(1.035) }
.karte__fuss{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s2) }
.karte__fuss > div{ min-width:0 }
.karte__titel{ font-size:16px; font-weight:600; margin:0 0 4px; line-height:1.35 }
.karte__meta{ font-size:13px; color:var(--grau); margin:0 }
.karte__merken{
  position:absolute; top:12px; right:12px; z-index:3; width:36px; height:36px;
  display:grid; place-items:center; background:rgba(252,251,249,.86); border:0; border-radius:50%;
  transition:background var(--takt), transform var(--takt);
}
.karte__merken:hover{ background:#fff; transform:scale(1.06) }
.karte__merken[aria-pressed="true"] .ikone{ fill:var(--rot); stroke:var(--rot) }
.karte__start{
  z-index:3; width:40px; height:40px; display:grid; place-items:center; flex:none;
  border:1.5px solid var(--rot); color:var(--rot); background:transparent;
  transition:background var(--takt), color var(--takt);
}
.karte__start:hover{ background:var(--rot); color:#fff }
@media (max-width:900px){
  .raster{ grid-template-columns:repeat(2,1fr); gap:var(--s2) }
  .karte--gross{ grid-column:span 2 }
  .raster__text{ grid-column:span 2; padding:0 }
}

/* ---------- Mega-Überschrift mit schwebenden Titeln ---------- */
.wortmarke{ position:relative; margin-bottom:var(--s4) }
.wortmarke h2{ position:relative; z-index:1 }
.wortmarke__deckel{ position:absolute; z-index:2; width:clamp(74px,9vw,132px); aspect-ratio:3/4; box-shadow:0 14px 34px rgba(20,17,16,.22) }
.wortmarke__deckel--a{ right:8%; top:-16%; transform:rotate(-7deg) }
.wortmarke__deckel--b{ right:0; bottom:-24%; transform:rotate(5deg) }
@media (max-width:720px){ .wortmarke__deckel{ display:none } }

/* ---------- Nummerierte Lernwege ---------- */
.wege{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.wege li{ border-bottom:1px solid var(--papier-3) }
.wege a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s3);
  padding:clamp(14px,2vw,22px) clamp(10px,2vw,24px); text-decoration:none;
  transition:background var(--takt), color var(--takt), padding-left var(--takt);
}
.wege a:hover, .wege a:focus-visible{ background:var(--rot); color:#fff; padding-left:clamp(18px,3vw,38px) }
.wege .nr{ font-family:var(--schrift-display); font-style:italic; font-size:18px; opacity:.7; min-width:2.4ch }
.wege .name{ font-size:clamp(13px,1.6vw,15px); font-weight:600; letter-spacing:.14em; text-transform:uppercase }
.wege .zahl{ font-size:13px; opacity:.65; letter-spacing:.06em }
.wege a:hover .zahl{ opacity:.9 }
.wege li.aktiv a{ background:var(--rot); color:#fff }
.wege__fuss{ display:flex; justify-content:center; padding-top:var(--s4) }

/* ---------- Über uns / Zahlen ---------- */
.streifen{ position:relative; height:clamp(220px,30vw,420px); background:var(--papier-2); overflow:hidden }
.streifen .riss{ z-index:2 }
.streifen .bild{ height:100% }
.streifen img{ filter:grayscale(1) contrast(1.08); object-position:50% 32% }
.ueber{ position:relative; overflow:hidden }
.ueber__satz{ position:absolute; left:0; top:0; bottom:0; width:max(58px, calc((100vw - var(--mass)) / 2));
  padding:30px 0 30px 8px; z-index:0; columns:2; opacity:.22 }
.ueber__inhalt{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s5) var(--s4); align-items:start }
.ueber__titel{ grid-column:1/-1; max-width:22ch; line-height:1.16 }
.zahlen{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s3) }
.zahl-block b{ display:block; font-family:var(--schrift-display); font-weight:900; font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:1 }
.zahl-block span{ display:block; margin-top:10px; font-size:14px; opacity:.82; max-width:26ch }
@media (max-width:860px){ .ueber__inhalt{ grid-template-columns:1fr; gap:var(--s4) } }

/* ---------- Sammlungen ---------- */
.sammlung{ display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s4); align-items:center; padding-block:var(--s4); border-bottom:1px solid var(--papier-3) }
.sammlung:first-of-type{ border-top:1px solid var(--papier-3) }
.sammlung h3{ font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:700; letter-spacing:.02em; margin:0 0 12px; text-transform:uppercase }
.sammlung h3 sup{ font-size:.5em; opacity:.5; margin-left:.35em }
.sammlung p{ margin:0 0 18px; color:var(--tinte-2); max-width:56ch }
.sammlung .bild{ aspect-ratio:16/9 }
.band-rot{
  display:flex; align-items:center; justify-content:center; gap:12px; min-height:64px;
  background:var(--rot); color:#fff; text-decoration:none; margin-top:var(--s4);
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition:background var(--takt), gap var(--takt);
}
.band-rot:hover{ background:var(--rot-tief); gap:20px }
@media (max-width:820px){ .sammlung{ grid-template-columns:1fr; gap:var(--s3) } }

/* ---------- Schiene (nur bei uns / Stimmen) ---------- */
.schiene{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:var(--s3);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:2px; padding-bottom:var(--s2); scrollbar-width:thin }
.schiene > *{ scroll-snap-align:start }
.pfeile{ display:flex; gap:10px }
.pfeil{ width:44px; height:44px; display:grid; place-items:center; background:transparent; border:1.5px solid currentColor; transition:background var(--takt), color var(--takt) }
.pfeil:hover{ background:#fff; color:var(--rot) }
.rot-flaeche .karte__merken{ background:rgba(255,255,255,.9) }

/* ---------- Stimmen ---------- */
.stimmen{ display:grid; grid-template-columns:.85fr 1.6fr; gap:var(--s5) }
.stimme{ background:transparent }
.stimme__kopf{ display:flex; align-items:center; gap:14px; margin-bottom:16px }
.stimme__bild{ width:56px; height:56px; border-radius:50%; flex:none }
.stimme__name{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px }
.sterne{ display:flex; gap:3px }
.sterne svg{ width:15px; height:15px; fill:#fff }
.stimme__datum{ font-size:12px; opacity:.82; margin-left:auto; align-self:flex-start }
.stimme p{ max-width:64ch; margin:0 0 18px }
.stimme__fotos{ display:flex; gap:12px; flex-wrap:wrap }
.stimme__fotos .bild{ width:clamp(96px,13vw,150px); aspect-ratio:3/4 }
@media (max-width:900px){ .stimmen{ grid-template-columns:1fr; gap:var(--s3) } }

/* ---------- Katalog ---------- */
.krumen{ display:flex; gap:10px; flex-wrap:wrap; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau); padding-block:var(--s3) }
.krumen a{ text-decoration:none }
.krumen a:hover{ color:var(--rot) }
.krumen [aria-current]{ color:var(--tinte) }
.pillen{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--s3) }
.pille{ min-height:46px; padding:0 22px; border:1px solid var(--papier-3); background:var(--weiss);
  font-size:13px; font-weight:500; transition:background var(--takt), color var(--takt), border-color var(--takt) }
.pille:hover{ border-color:var(--rot); color:var(--rot) }
.pille[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:#fff }
.werkzeugleiste{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border-top:1px solid var(--papier-3); border-bottom:1px solid var(--papier-3); padding-block:14px; margin-bottom:var(--s4) }
.werkzeugleiste label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.werkzeugleiste select{ font:inherit; font-size:14px; background:transparent; border:0; border-bottom:1.5px solid var(--tinte); padding:6px 2px }
.blaettern{ display:flex; align-items:center; justify-content:center; gap:8px; padding-top:var(--s5) }
.blaettern a, .blaettern span{ min-width:38px; height:38px; display:grid; place-items:center; text-decoration:none; font-size:14px }
.blaettern a:hover{ color:var(--rot) }
.blaettern [aria-current="page"]{ font-weight:700; border-bottom:2px solid var(--rot) }
.blaettern .rand{ border:1px solid var(--papier-3) }

/* ---------- Kursseite ---------- */
.kurs{ display:grid; grid-template-columns:.75fr 1.15fr 1fr; gap:var(--s4); align-items:start }
.kurs__preis{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(2rem,4vw,3.2rem); line-height:1; margin:0 0 var(--s3) }
.kurs__hinweis{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--grau); margin-bottom:18px }
.kurs__aktionen{ display:grid; gap:12px; max-width:340px }
.kurs__deckel{ aspect-ratio:3/4 }
.kurs__mini{ display:flex; gap:12px; margin-top:var(--s3) }
.kurs__mini .bild{ width:calc(50% - 6px); aspect-ratio:4/3 }
.falt{ border-bottom:1px solid var(--papier-3) }
.falt:first-of-type{ border-top:1px solid var(--papier-3) }
.falt summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:20px 4px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.falt summary::-webkit-details-marker{ display:none }
.falt summary::after{ content:""; width:11px; height:11px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px); transition:transform var(--takt); flex:none }
.falt[open] summary::after{ transform:rotate(225deg) translate(-3px,-3px) }
.falt__inhalt{ padding:0 4px 24px; color:var(--tinte-2) }
/* Auf roter Flaeche ist die Tinte unlesbar: gemessen 1,5:1. Die Zusammen-
   fassung war schon weiss, nur die Antwort darunter blieb dunkel — sie steckt
   in einem zugeklappten <details> und faellt beim Durchsehen nicht auf. */
.rot-flaeche .falt__inhalt{ color:rgba(255,255,255,.88) }
.rot-flaeche .falt{ border-color:rgba(255,255,255,.22) }
.rot-flaeche .falt:first-of-type{ border-top-color:rgba(255,255,255,.22) }
.falt__inhalt p{ margin:0 0 12px; max-width:60ch }
.falt__inhalt ul{ margin:0; padding-left:1.1em; display:grid; gap:8px }
.merkmal{ display:flex; gap:14px; font-size:14px; padding:10px 0; border-bottom:1px dashed var(--papier-3) }
.merkmal dt{ min-width:9em; color:var(--grau) }
.merkmal dd{ margin:0; font-weight:500 }
@media (max-width:1000px){ .kurs{ grid-template-columns:1fr; gap:var(--s3) } .kurs__aktionen{ max-width:none } }

/* ---------- Kleine Schirme ---------- */
@media (max-width:640px){
  .held__titel{ max-width:none }
  .held__marker{ display:block; width:fit-content; margin:.4em auto 0; vertical-align:baseline; font-size:.8rem }
  .held__aktion .knopf{ width:100% }
  .zahlen{ grid-template-columns:1fr 1fr; gap:var(--s3) }
  .wortmarke{ margin-bottom:var(--s3) }
  .werkzeugleiste{ gap:12px }
  .kurs__mini .bild{ width:calc(50% - 6px) }
  .stimme__kopf{ flex-wrap:wrap }
  .stimme__datum{ width:100%; margin-left:0 }
}

/* Auftaktzeile in einer Zeile: die Groesse rechnet skript.js auf die
   Spaltenbreite. Der Zusatz steht darunter als eigene Marke. */
.held__titel.mega{ max-width:none; width:100% }
.held__marker--eigen{
  display:inline-block; margin:clamp(14px,2vw,26px) auto 0; vertical-align:baseline;
  font-size:clamp(.72rem,1.25vw,1.05rem);
}

/* Foto hinter der roten Fläche: entfärbt und eingeschmolzen, damit das Rot
   die Leitfarbe bleibt und die weiße Schrift lesbar bleibt. Fehlt die Datei,
   nimmt skript.js die Ebene heraus — dann steht die Fläche wie bisher. */
.held__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; filter:grayscale(1) contrast(1.05); opacity:.55;
  /* Multiplizieren, nicht Luminanz: so kann das Foto die Fläche nur
     abdunkeln. Über hellen Stellen wäre die weiße Schrift sonst
     unlesbar — gemessen 2,4:1 statt der nötigen 4,5:1. */
  mix-blend-mode:multiply; pointer-events:none;
}
.held__satz{ z-index:1 }
/* Wo ein Foto liegt, entfaellt der Zeitungssatz — beide zugleich waere
   unruhig. Faellt das Foto aus, nimmt skript.js es heraus und der Satz
   erscheint von selbst wieder. */
.held:has(.held__foto) .held__satz{ display:none }
.held__inhalt{ z-index:2 }

/* ══════════════════════════════════════════════════════════════════════════
   Lernbibliothek
   ══════════════════════════════════════════════════════════════════════════ */
/* Der rote Kasten der Marke traegt Innenabstand nach oben — bei der engen
   Zeilenschaltung des Displaysatzes deckt er sonst die Zeile darueber zu. */
.kat-auftakt{ padding-block:clamp(18px,3vw,34px) clamp(26px,4vw,48px) }
.kat-auftakt h1{ line-height:1.06 }
.kat-auftakt__reihe{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s4); align-items:end }
.kat-auftakt__satz{ margin:0 0 .4em }
@media (max-width:900px){ .kat-auftakt__reihe{ grid-template-columns:1fr; gap:var(--s2) } }

/* Sammlungen als Einstieg — Deckel im Hochformat, kantig, ohne Spielerei */
.kat-kacheln{ display:grid; grid-template-columns:repeat(9,1fr); gap:var(--s2); margin-bottom:var(--s4) }
.kat-kachel{
  display:flex; flex-direction:column; gap:9px; text-align:left; min-width:0;
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:none; color:inherit;   /* auch als Verweis kein Unterstrich */
}
.kat-kachel__bild{ display:block; aspect-ratio:3/4; width:100% }
.kat-kachel__bild img{ width:100%; height:100%; object-fit:cover;
  transition:transform 700ms cubic-bezier(.2,.7,.3,1), filter var(--takt); filter:grayscale(.25) }
.kat-kachel:hover .kat-kachel__bild img,
.kat-kachel:focus-visible .kat-kachel__bild img{ transform:scale(1.04); filter:grayscale(0) }
.kat-kachel__fuss{ display:flex; align-items:baseline; justify-content:space-between; gap:8px }
.kat-kachel__fuss b{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.kat-kachel__zahl{ font-size:12px; color:var(--grau); flex:none }
.kat-kachel__satz{ font-size:12.5px; line-height:1.45; color:var(--grau) }
.kat-kachel[data-art]:hover .kat-kachel__fuss b{ color:var(--rot) }
@media (max-width:1200px){ .kat-kacheln{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:760px){
  .kat-kacheln{ grid-template-columns:repeat(3,1fr); gap:var(--s1) }
  .kat-kachel__satz{ display:none }
}

/* Suchfeld — eine Linie, kein Kasten */
.kat-suche{ position:relative; display:flex; align-items:center; margin-bottom:var(--s3) }
.kat-suche input{
  flex:1; font:inherit; font-size:clamp(1.05rem,2vw,1.5rem); font-family:var(--schrift-display);
  background:transparent; border:0; border-bottom:1.5px solid var(--tinte);
  padding:14px 40px 14px 2px; color:var(--tinte);
}
.kat-suche input::placeholder{ color:var(--grau); opacity:.8 }
.kat-suche input:focus{ outline:none; border-bottom-color:var(--rot) }
.kat-loeschen{ position:absolute; right:0; background:none; border:0; display:grid; place-items:center;
  width:34px; height:34px; color:var(--grau) }
.kat-loeschen:hover{ color:var(--rot) }

.kat-treffer{ margin:0; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.kat-treffer b{ color:var(--tinte) }
.kat-stufen{ display:flex; gap:2px; flex-wrap:wrap }
.kat-stufe{
  background:none; border:0; padding:6px 10px; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grau); border-bottom:2px solid transparent;
}
.kat-stufe:hover{ color:var(--rot) }
.kat-stufe[aria-pressed="true"]{ color:var(--tinte); border-bottom-color:var(--rot); font-weight:600 }

/* Trefferliste: dieselbe Zeilenform wie die Lernwege */
.kat-liste{ border-top:1px solid var(--papier-3) }
.kat-liste .nr{ font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55 }
.kat-liste .name{ text-transform:none; letter-spacing:0; font-size:clamp(15px,1.7vw,17px); font-weight:500 }
.kat-liste a{ grid-template-columns:2.6em 1fr auto }
.kat-leer{ padding:var(--s4) 0; color:var(--grau); max-width:52ch }

/* Lernweg-Zeilen: die Kennung („A1.2 · Modul 3") ist breiter als eine Nummer,
   deshalb bekommt sie eine eigene feste Spalte, damit der Titel Platz behält. */
.wege--stufe a{ grid-template-columns:88px minmax(7.5em,9.5em) minmax(0,1fr) minmax(0,1.25fr) }
.wege--stufe .nr{ font-size:13px; opacity:.6 }
.wege--stufe .zahl{ text-align:right; line-height:1.5 }
/* Ein Bild je Modul. Feste Groesse statt Rasterbreite: so bleibt es auch dann
   klein, wenn das Raster auf dem Telefon zu einer Spalte zusammenfaellt.
   Quadratisch, seit die freigestellten Bilder da sind: die meisten sind hoeher
   als 4:3, und in einem liegenden Kasten blieben sie unnoetig klein. */
.wege__bild{ width:88px; height:88px; align-self:center }
/* Die neuen Modulbilder sind freigestellt (PNG mit Alphakanal). Zwei Regeln
   holen sie aus dem Kasten: kein Papierfeld hinter dem Bild, und eingepasst
   statt gefuellt, damit der Gegenstand nicht angeschnitten wird. Für die
   Strichzeichnungen der uebrigen Stufen aendert das nichts — sie sind selbst
   4:3 und fuellen den Kasten weiterhin ganz. */
.wege__bild{ background:none }
.wege__bild img{ object-fit:contain }
.wege a:hover .wege__bild img, .wege a:focus-visible .wege__bild img{ transform:scale(1.06) }
@media (max-width:860px){
  /* Bild links, die drei Textzeilen rechts daneben. */
  .wege--stufe a{ grid-template-columns:88px minmax(0,1fr); gap:4px 14px }
  .wege--stufe .wege__bild{ grid-row:1 / span 3; align-self:start }
  .wege--stufe .nr,
  .wege--stufe .name,
  .wege--stufe .zahl{ grid-column:2; text-align:left }
}

/* Bei einer Nabe mit fester Art treten sechs Stufen an die Stelle der neun
   Sammlungen — dann darf jede Kachel breiter stehen. */
.kat-kacheln--stufen{ grid-template-columns:repeat(6,1fr) }
@media (max-width:1000px){ .kat-kacheln--stufen{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:620px){ .kat-kacheln--stufen{ grid-template-columns:repeat(2,1fr) } }
.kat-einleitung{ margin:0 0 var(--s3); max-width:68ch }

/* ── Wörterbuch ─────────────────────────────────────────────────────────── */
.fh-buchstaben{ display:grid; grid-template-columns:repeat(9,1fr); gap:2px; margin-bottom:var(--s3) }
.fh-buchstabe{
  display:grid; gap:2px; place-items:center; padding:12px 6px;
  background:var(--weiss); border:1px solid var(--papier-3); border-radius:0;
  transition:background var(--takt), color var(--takt), border-color var(--takt);
}
.fh-buchstabe:hover{ border-color:var(--rot); color:var(--rot) }
.fh-buchstabe[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:#fff }
.fh-buchstabe__z{ font-family:"Noto Naskh Arabic",Tahoma,serif; font-size:26px; line-height:1 }
.fh-buchstabe__n{ font-size:11px; opacity:.62; letter-spacing:.04em }
@media (max-width:900px){ .fh-buchstaben{ grid-template-columns:repeat(6,1fr) } }
@media (max-width:560px){ .fh-buchstaben{ grid-template-columns:repeat(4,1fr) } }

.fh-liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.fh-liste li{ border-bottom:1px solid var(--papier-3) }
.fh-zeile{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto; gap:var(--s3);
  align-items:baseline; width:100%; text-align:left; padding:13px 4px;
  background:none; border:0; transition:background var(--takt), color var(--takt), padding-left var(--takt);
}
.fh-zeile:hover, .fh-zeile:focus-visible{ background:var(--rot); color:#fff; padding-left:14px }
.fh-wort{ font-family:"Noto Naskh Arabic",Tahoma,serif; font-size:21px; line-height:1.35 }
.fh-tr{ font-family:var(--schrift-display); font-style:italic; font-size:16px; opacity:.85 }
.fh-mehr{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.5 }
.fh-zeile:hover .fh-mehr{ opacity:.9 }
.fh-erklaerung{ padding:4px 4px 20px; color:var(--tinte-2); max-width:70ch }
.fh-erklaerung p{ margin:0 0 8px }
.fh-pos{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.fh-ku{ font-family:"Noto Naskh Arabic",Tahoma,serif; font-size:18px; line-height:1.8 }
.fh-see{ font-size:14px; color:var(--grau) }
@media (max-width:700px){
  .fh-zeile{ grid-template-columns:1fr; gap:4px }
  .fh-mehr{ display:none }
}
/* Wenige Sammlungen dürfen breiter stehen als neun. */
.kat-kacheln--wenige{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:900px }
@media (max-width:760px){ .kat-kacheln--wenige{ grid-template-columns:repeat(3,1fr) } }

/* ── Sängerinnen und Sänger ─────────────────────────────────────────────── */
.sg-liste a{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr) }
.sg-name{ font-size:clamp(15px,1.8vw,18px); font-weight:600; letter-spacing:0; text-transform:none }
.sg-kurd{ font-family:"Noto Naskh Arabic",Tahoma,serif; font-size:19px; line-height:1.4; text-align:right }
.sg-zusatz{ font-size:13px; color:var(--grau); text-align:right; line-height:1.5 }
.wege a:hover .sg-zusatz{ color:rgba(255,255,255,.86) }
@media (max-width:820px){
  .sg-liste a{ grid-template-columns:1fr auto; gap:4px 12px }
  .sg-zusatz{ grid-column:1/-1; text-align:left }
}

/* Nummerierte Liste auf roter Fläche: Haarlinien und Überfahren umgekehrt. */
.rot-flaeche .wege--hell{ border-top-color:rgba(255,255,255,.3) }
.rot-flaeche .wege--hell li{ border-bottom-color:rgba(255,255,255,.3) }
.rot-flaeche .wege--hell a:hover,
.rot-flaeche .wege--hell a:focus-visible{ background:var(--papier); color:var(--rot) }
.rot-flaeche .wege--hell a{ padding-block:12px }

/* Überschriften mit farbigem Kasten (.marke-rot, .kasten-weiss) brauchen
   etwas mehr Zeilenabstand — der Innenabstand des Kastens ragt sonst in die
   Zeile darüber und deckt sie zu. */
.kopfzeile h2, .wortmarke h2, .ueber__titel{ line-height:1.06 }

/* ── Werkzeuge ──────────────────────────────────────────────────────────── */
.wege--werkzeug a{ grid-template-columns:2.6em minmax(0,1fr) minmax(0,1.35fr) }
.wege--werkzeug .name{ text-transform:none; letter-spacing:0; font-size:clamp(15px,1.7vw,17px) }
.wege--werkzeug .zahl{ text-align:right; line-height:1.5; letter-spacing:0 }
.wz-marke{
  display:inline-block; margin-left:10px; padding:2px 7px 3px; vertical-align:1px;
  background:var(--rot); color:#fff; font-family:var(--schrift-ui);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.wege a:hover .wz-marke{ background:#fff; color:var(--rot) }
@media (max-width:860px){
  .wege--werkzeug a{ grid-template-columns:2.4em 1fr }
  .wege--werkzeug .zahl{ grid-column:2; text-align:left }
}

/* ── Bücher ─────────────────────────────────────────────────────────────── */
.bu-reihe{ display:grid; gap:var(--s4) }
.bu-buch{ border-top:1px solid var(--papier-3); padding-top:var(--s3);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--s3) var(--s4);
  align-items:start }
.bu-titel{ grid-column:1/-1; font-size:clamp(1.15rem,2.4vw,1.75rem); font-weight:700;
  letter-spacing:.01em; margin:0; text-transform:uppercase }
.bu-kurd{ font-family:"Noto Naskh Arabic",Tahoma,serif; font-weight:400;
  font-size:.8em; color:var(--rot); margin-left:.4em; text-transform:none }
.bu-verfasser{ grid-column:1/-1; margin:-8px 0 0; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.bu-buch .fliess{ margin:0 }
.bu-angaben{ display:grid; gap:0; align-self:start }
.bu-angabe{ font-size:13.5px; color:var(--tinte-2); padding:7px 0;
  border-bottom:1px dashed var(--papier-3) }
.bu-aktion{ grid-column:1/-1; margin:6px 0 0 }
@media (max-width:820px){ .bu-buch{ grid-template-columns:1fr } }

/* Lektionen, deren Aufnahme noch aussteht, treten zurück — aber sie stehen da,
   damit man sieht, was kommt. */
.au-wartend a{ opacity:.62 }
.au-wartend a:hover{ opacity:1 }
.au-wartet{ background:var(--tinte-2) }
.wege a:hover .au-wartet{ background:#fff; color:var(--tinte) }

/* ── Bildungssprache ────────────────────────────────────────────────────── */
.bi-buchstaben{ grid-template-columns:repeat(13,1fr) }
.bi-lat{ font-family:var(--schrift-display); font-weight:900; font-size:22px; line-height:1 }
.bi-zeile{ grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr) auto }
.bi-wort{ font-family:var(--schrift-display); font-weight:700; font-size:18px; line-height:1.3 }
.bi-genus{ font-family:var(--schrift-ui); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55; margin-left:8px; vertical-align:2px }
.bi-kurz{ font-size:14px; color:var(--tinte-2); line-height:1.5 }
.fh-zeile:hover .bi-kurz{ color:rgba(255,255,255,.88) }
.bi-beispiel{ font-family:var(--schrift-display); font-style:italic; font-size:16px }
@media (max-width:1100px){ .bi-buchstaben{ grid-template-columns:repeat(9,1fr) } }
@media (max-width:760px){ .bi-buchstaben{ grid-template-columns:repeat(6,1fr) } }
@media (max-width:700px){ .bi-zeile{ grid-template-columns:1fr } }
/* Audio-Zeilen sind (noch) Auflistung, kein Verweis — dieselbe Form, aber
   ohne Anfassgeste. */
.au-zeile{ display:grid; grid-template-columns:2.6em minmax(0,1fr) minmax(0,1.35fr);
  align-items:center; gap:var(--s3); padding:clamp(14px,2vw,20px) clamp(10px,2vw,24px) }
.au-zeile .name{ font-size:clamp(15px,1.7vw,17px); font-weight:600; text-transform:none; letter-spacing:0 }
.au-zeile .zahl{ text-align:right; line-height:1.5; letter-spacing:0 }
@media (max-width:860px){
  .au-zeile{ grid-template-columns:2.4em 1fr }
  .au-zeile .zahl{ grid-column:2; text-align:left }
}

/* ── Sprichwörter ───────────────────────────────────────────────────────── */
.sp-zeile{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) auto; align-items:start }
/* ── Sprichwörter ───────────────────────────────────────────────────────────
   Jedes Sprichwort ist ein eigener Block, kein Tabellenfeld. Der kurdische
   Wortlaut steht groß und rechtsläufig, darunter die Hawar-Umschrift, dann die
   Bedeutung; das deutsche Sprichwort, das dasselbe meint, sitzt abgesetzt am
   roten Strich. Die Reihenfolge ist die des Lesens, nicht die einer Datenbank. */
.sp-karte{
  padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:1px solid var(--papier-3);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px); align-items:start;
}
/* Rechts das Kurdische: die Schrift laeuft von rechts nach links, dort
   beginnt der Satz. Die Umschrift bleibt bei ihm, nicht bei der Uebersetzung. */
.sp-ku-seite{ grid-column:2; display:grid; gap:4px; text-align:right }
.sp-de-seite{ grid-column:1; display:grid; gap:6px }
.sp-karte:first-child{ border-top:0 }
.sp-ku{
  font-family:"Shasenem Soran","Noto Naskh Arabic",Tahoma,serif;
  font-size:clamp(1.45rem,2.6vw,1.9rem); line-height:1.75;
  text-align:right; color:var(--tinte); margin:0; font-weight:400;
}
.sp-hw{
  font-family:Inter,system-ui,sans-serif; font-style:normal; font-weight:600;
  font-size:clamp(.95rem,1.3vw,1.02rem); color:var(--rot); margin:0 0 6px;
  letter-spacing:.01em;
}
.sp-de{ font-size:1.02rem; line-height:1.65; color:var(--tinte); margin:0 }
/* Die woertliche Uebersetzung und die deutsche Entsprechung tragen ihre
   Beschriftung vorne — so braucht die Zeile keinen eigenen Kasten. */
.sp-lit, .sp-eq{ margin:0; font-size:.95rem; line-height:1.6; color:var(--grau) }
.sp-lit span, .sp-eq span{
  display:inline-block; margin-right:10px; color:var(--grau);
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
.sp-eq{
  margin-top:6px; padding-left:14px; border-left:2px solid var(--rot);
  color:var(--tinte);
}
.sp-eq span{ display:block; margin:0 0 2px; color:var(--rot) }
@media (max-width:760px){
  /* Untereinander, das Kurdische zuerst — es ist der Gegenstand. */
  .sp-karte{ padding:20px 0; grid-template-columns:1fr; gap:10px }
  .sp-ku-seite{ grid-column:1; grid-row:1 }
  .sp-de-seite{ grid-column:1; grid-row:2 }
  .sp-lit span, .sp-eq span{ display:block; margin:0 0 2px }
}

/* ── Kontakt ────────────────────────────────────────────────────────────── */
.kt-gitter{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s5) var(--s4) }
.kt-feld{ display:grid; gap:6px; margin:0 0 var(--s3) }
.kt-feld label{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.kt-feld input, .kt-feld textarea{
  font:inherit; font-size:16px; background:var(--weiss); color:var(--tinte);
  border:1px solid var(--papier-3); border-radius:0; padding:13px 14px; width:100%;
}
.kt-feld input:focus, .kt-feld textarea:focus{ outline:none; border-color:var(--rot) }
.kt-feld textarea{ resize:vertical; min-height:150px }
.kt-hinweis{ font-size:13.5px; color:var(--grau); max-width:52ch; line-height:1.6 }
.merkmal-liste{ margin:0 }
.merkmal-liste .merkmal:first-child{ border-top:1px dashed var(--papier-3) }
@media (max-width:900px){ .kt-gitter{ grid-template-columns:1fr; gap:var(--s4) } }

/* ---------- Hoersammlung: Liste und Abspielleiste ---------- */
.ls-werkzeug{
  display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap;
  margin-bottom:var(--s3); padding-bottom:var(--s2);
  border-bottom:2px solid var(--tinte);
}
.ls-werkzeug label{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.ls-werkzeug input, .ls-werkzeug select{
  font-family:var(--schrift-ui); font-size:15px; color:var(--tinte);
  background:var(--weiss); border:1px solid var(--papier-3); border-radius:var(--rand);
  padding:12px 14px; min-height:46px;
}
.ls-werkzeug input{ flex:1 1 260px; min-width:0 }
.ls-werkzeug select{ flex:0 1 260px; max-width:100% }
.ls-werkzeug input:focus-visible, .ls-werkzeug select:focus-visible{
  outline:2px solid var(--rot); outline-offset:1px; border-color:var(--rot);
}
.ls-zaehler{ font-size:13px; color:var(--grau); letter-spacing:.06em; margin-left:auto }

.ls-liste{ list-style:none; margin:0; padding:0 }
.ls-liste li{ border-bottom:1px solid var(--papier-3) }
.ls-leer{ padding:var(--s4) 0; color:var(--grau); font-size:15px }
.ls-zeile{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s3);
  width:100%; padding:14px clamp(10px,2vw,20px); background:none; border:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:background var(--takt), color var(--takt), padding-left var(--takt);
}
.ls-zeile:hover, .ls-zeile:focus-visible{
  background:var(--rot); color:#fff; padding-left:clamp(16px,3vw,32px);
}
.ls-zeile:focus-visible{ outline:2px solid var(--tinte); outline-offset:-2px }
.ls-knopf{
  width:34px; height:34px; flex:none; border:1px solid currentColor;
  display:grid; place-items:center; opacity:.75;
}
.ls-knopf::before{
  content:""; width:11px; height:12px; background:currentColor;
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.ls-zeile:hover .ls-knopf, .ls-zeile:focus-visible .ls-knopf{ opacity:1 }
.ls-text{ min-width:0 }
.ls-titel{ display:block; font-size:16px; font-weight:600; line-height:1.35 }
.ls-interpret{ display:block; font-size:13px; opacity:.7; margin-top:2px }
.ls-dauer{ font-family:var(--schrift-display); font-style:italic; font-size:16px; opacity:.7 }

.ls-zeile.ls-aktiv{ background:var(--tinte); color:var(--papier) }
.ls-zeile.ls-aktiv .ls-knopf{ opacity:1; border-color:var(--rot-hell); color:var(--rot-hell) }
.ls-zeile.ls-aktiv .ls-knopf::before{
  width:12px; height:13px;
  clip-path:polygon(0 0,36% 0,36% 100%,0 100%,0 0,64% 0,100% 0,100% 100%,64% 100%,64% 0);
}
.ls-zeile.ls-aktiv.ls-pause .ls-knopf::before{
  width:11px; height:12px; clip-path:polygon(0 0, 100% 50%, 0 100%);
}

/* Abspielleiste */
.ls-leiste{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-kopf);
  background:var(--tinte); color:var(--papier);
  border-top:3px solid var(--rot);
  padding:12px clamp(12px,3vw,28px);
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(12px,2vw,24px);
}
.ls-leiste[hidden]{ display:none }
body.hat-leiste{ padding-bottom:132px }
.ls-l-tasten{ display:flex; align-items:center; gap:8px }
.ls-l-tasten button{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  background:none; color:var(--papier); border:1px solid rgba(241,239,234,.42);
  border-radius:var(--rand); cursor:pointer; transition:background var(--takt), color var(--takt);
}
.ls-l-tasten button:hover{ background:var(--rot); border-color:var(--rot); color:#fff }
.ls-l-tasten button:focus-visible{ outline:2px solid var(--papier); outline-offset:2px }
.ls-l-spiel{ background:var(--rot) !important; border-color:var(--rot) !important; color:#fff !important }
.ls-l-spiel:hover{ background:var(--rot-hell) !important; border-color:var(--rot-hell) !important }
.ls-l-tasten .ikone{ width:18px; height:18px; fill:currentColor; stroke:none }
.ls-l-mitte{ min-width:0 }
.ls-l-titel{
  display:block; font-size:15px; font-weight:600; line-height:1.3; color:var(--papier);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:none; border-bottom:1px solid transparent; width:fit-content; max-width:100%;
}
.ls-l-titel:hover{ border-bottom-color:var(--rot-hell) }
.ls-l-titel:focus-visible{ outline:2px solid var(--papier); outline-offset:2px }
.ls-l-interpret{ font-size:13px; color:#C9C3BA }
.ls-l-zeile{ display:flex; align-items:center; gap:12px; margin-top:6px }
.ls-l-jetzt, .ls-l-ganz{ font-size:12px; color:#C9C3BA; font-variant-numeric:tabular-nums; flex:none }
.ls-l-bahn{
  flex:1 1 auto; min-width:0; height:20px; -webkit-appearance:none; appearance:none;
  background:none; cursor:pointer; --anteil:0%;
}
.ls-l-bahn::-webkit-slider-runnable-track{
  height:4px; background:linear-gradient(to right,
    var(--rot-hell) 0 var(--anteil), rgba(241,239,234,.3) var(--anteil) 100%);
}
.ls-l-bahn::-moz-range-track{ height:4px; background:rgba(241,239,234,.3) }
.ls-l-bahn::-moz-range-progress{ height:4px; background:var(--rot-hell) }
.ls-l-bahn::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5px;
  background:var(--papier); border:2px solid var(--rot);
}
.ls-l-bahn::-moz-range-thumb{ width:14px; height:14px; border:2px solid var(--rot);
  background:var(--papier); border-radius:0 }
.ls-l-bahn:focus-visible{ outline:2px solid var(--papier); outline-offset:3px }

@media (max-width:760px){
  .ls-leiste{ gap:12px; padding:10px 14px }
  body.hat-leiste{ padding-bottom:120px }
  .ls-zeile{ gap:var(--s2); padding:12px 6px }
  .ls-dauer{ font-size:14px }
  .ls-zaehler{ margin-left:0; width:100% }
}

/* ═══════════ Lernweg: sechs Reihen, darunter Sonstige ═══════════
   Hallmark · redesign · macrostructure: Stufenleiter + Kapitel je Reihe
   theme: POLKA (gesperrt, basis.css) · tone: editorial · anchor hue: Rot #AE151B
   Die Reihen (Řêga … Lûtke) sind der Weg und stehen als Karten vorn; was der
   Bestand sonst unter einer Stufe fuehrt, folgt als schlichte Liste
   „Sonstige Uebungen", damit beides nicht mehr ineinanderlaeuft. */
:root{ --schrift-ku:"Shasenem Soran","Noto Naskh Arabic","Geeza Pro",Tahoma,serif; --ease-aus:cubic-bezier(.2,.7,.2,1) }

.lw-ueberblick{ padding-block:var(--s3) clamp(48px,7vw,var(--s6)) }
.lw-ueberblick__titel{ font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.04; margin:var(--s2) 0 var(--s2) }
.lw-ueberblick .fliess{ margin:0 0 var(--s4) }

/* Die Leiter steigt von A1 nach C2 an: die Stufen stehen auf einer Linie
   und jede ragt etwas hoeher als die vorige. */
.lw-leiter{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s1); align-items:end }
.lw-leiter li{ display:flex }
.lw-leiter__stufe{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0;
  padding:var(--s2) var(--s2) var(--s3); background:var(--papier-2);
  border-top:4px solid var(--rot); color:var(--tinte); text-decoration:none;
  min-height:calc(232px + var(--i) * 28px);
  transition:transform var(--takt) var(--ease-aus) }
.lw-leiter__code{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:var(--rot) }
.lw-leiter__ku{ display:block; font-family:var(--schrift-ku); font-size:1.5rem; line-height:1.6; text-align:left }
.lw-leiter__name{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase }
.lw-leiter__sinn{ font-size:14px; color:var(--tinte-2) }
.lw-leiter__zahl{ font-size:13px; color:var(--tinte-2); margin-top:auto; padding-top:var(--s1); border-top:1px solid var(--papier-3) }
.lw-leiter__stufe:hover, .lw-leiter__stufe:focus-visible{ background:var(--rot); color:#fff; transform:translateY(-4px) }
.lw-leiter__stufe:hover :is(.lw-leiter__code,.lw-leiter__sinn,.lw-leiter__zahl),
.lw-leiter__stufe:focus-visible :is(.lw-leiter__code,.lw-leiter__sinn,.lw-leiter__zahl){ color:#fff }
.lw-leiter__stufe:hover .lw-leiter__zahl{ border-top-color:rgba(255,255,255,.4) }
.lw-leiter__stufe:focus-visible{ outline:3px solid var(--tinte); outline-offset:3px }

/* Kapitel je Reihe; jede zweite Stufe auf getoentem Grund, damit man beim
   Blaettern sieht, wo eine Reihe endet. */
.lw-stufe--ton{ background:var(--papier-2) }
.lw-stufe__kopf{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s4); align-items:end;
  padding-bottom:var(--s3); margin-bottom:var(--s4); border-bottom:2px solid var(--tinte) }
.lw-stufe__kopf > :not(.lw-stufe__knopf){ grid-column:1 }
.lw-stufe__marke{ margin:0 0 var(--s1); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tinte-2) }
.lw-stufe__marke .marke-rot{ margin-right:.5em; letter-spacing:.06em }
.lw-stufe__titel{ margin:.26em 0 0; line-height:1.02; overflow-wrap:anywhere; min-width:0 } /* Platz für Ř, Ê, Ô, Û unter der Reihenzeile */
.lw-stufe__ku{ font-family:var(--schrift-ku); font-weight:400; font-size:.62em; color:var(--rot); margin-left:.25em; white-space:nowrap }
.lw-stufe__satz{ margin:var(--s1) 0 0; max-width:62ch; color:var(--tinte-2) }
.lw-stufe__knopf{ grid-column:2; grid-row:1 / span 3; align-self:end; white-space:nowrap }

.lw-module{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:var(--s2) }
.lw-module li{ display:flex; min-width:0 }
.lw-modul{ flex:1; min-width:0; display:grid; grid-template-columns:88px minmax(0,1fr);
  grid-template-areas:"bild nr" "bild ku" "bild de" "bild inhalt"; grid-template-rows:auto auto auto 1fr;
  gap:2px var(--s2); padding:var(--s2); background:var(--weiss); border:1px solid var(--papier-3);
  color:var(--tinte); text-decoration:none }
.lw-modul:hover{ border-color:var(--rot); box-shadow:inset 0 -3px 0 var(--rot) }
.lw-modul:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.lw-modul__bild{ grid-area:bild; width:88px; height:88px; align-self:start; background:var(--papier) }
.lw-modul__bild img{ width:100%; height:100%; object-fit:contain; display:block }
.lw-modul__bild--zahl{ display:grid; place-items:center; font-family:var(--schrift-display);
  font-weight:900; font-size:2.4rem; color:var(--rot); background:var(--papier-2) }
.lw-stufe--ton .lw-modul__bild--zahl{ background:var(--papier) }
.lw-modul__nr{ grid-area:nr; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.lw-modul__ku{ grid-area:ku; display:block; font-family:var(--schrift-ku); font-size:1.3rem; line-height:1.55; text-align:left; color:var(--rot) }
.lw-modul__de{ grid-area:de; font-weight:600; font-size:16px; line-height:1.3; overflow-wrap:anywhere }
.lw-modul__inhalt{ grid-area:inhalt; margin-top:4px; font-size:13px; line-height:1.5; color:var(--tinte-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

/* Sonstige: ein liniertes Register unter der Reihe. Kein Kartengrund wie bei
   den Modulen, damit die Reihe führt; dafür große Bildmarken, die Bilder sind
   Freisteller 216 × 162 und tragen die Orientierung. */
.lw-sonst{ margin-top:clamp(48px,7vw,var(--s6)) }
.lw-sonst__kopf{ padding-top:var(--s3); margin-bottom:var(--s2); border-top:2px solid var(--tinte) }
.lw-sonst__titel{ margin:0; font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.1; letter-spacing:0; text-transform:none; color:var(--tinte); overflow-wrap:anywhere; min-width:0 }
.lw-sonst__stufe{ color:var(--rot); font-variant-numeric:lining-nums }
.lw-sonst__satz{ margin:var(--s1) 0 0; max-width:62ch; font-size:15px; line-height:1.5; color:var(--tinte-2) }
.lw-sonst__zahl{ font-weight:600; color:var(--tinte); font-variant-numeric:lining-nums tabular-nums }
.lw-sonst__liste{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); column-gap:var(--s3) }
.lw-sonst__liste li{ display:flex; min-width:0 }
.lw-sonst__eintrag{ flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr; align-content:start; gap:4px;
  padding:var(--s2) 0 var(--s3); border-top:1px solid var(--papier-3);
  color:var(--tinte); text-decoration:none; transition:box-shadow .18s var(--ease-aus) }
.lw-sonst__bild{ display:block; width:112px; height:84px; margin-bottom:var(--s1) }
.lw-sonst__bild img{ width:100%; height:100%; object-fit:contain; object-position:left bottom; display:block;
  transition:transform .22s var(--ease-aus) }
.lw-sonst__name{ font-weight:600; font-size:16px; line-height:1.3; overflow-wrap:anywhere }
.lw-sonst__inhalt{ font-size:13px; line-height:1.5; color:var(--tinte-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.lw-sonst__eintrag:hover{ box-shadow:inset 0 2px 0 var(--rot) }
.lw-sonst__eintrag:hover .lw-sonst__name{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.lw-sonst__eintrag:hover .lw-sonst__bild img{ transform:translateY(-3px) }
.lw-sonst__eintrag:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
  .lw-sonst__eintrag, .lw-sonst__bild img{ transition:none }
  .lw-sonst__eintrag:hover .lw-sonst__bild img{ transform:none }
}
@media (max-width:560px){
  .lw-sonst__eintrag{ grid-template-columns:72px minmax(0,1fr); grid-template-rows:auto 1fr;
    column-gap:var(--s2); row-gap:2px; padding:12px 0; align-items:start }
  .lw-sonst__bild{ grid-row:1 / span 2; width:72px; height:54px; margin:0 }
}

@media (max-width:1024px){
  .lw-leiter{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .lw-leiter__stufe{ min-height:0 }
  .lw-leiter__zahl{ margin-top:var(--s2) }
}
@media (max-width:720px){
  .lw-stufe__kopf{ grid-template-columns:minmax(0,1fr) }
  .lw-stufe__knopf{ grid-column:1; grid-row:auto; justify-self:start; margin-top:var(--s2) }
}
@media (max-width:560px){
  .lw-leiter{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lw-modul{ grid-template-columns:64px minmax(0,1fr) }
  .lw-modul__bild{ width:64px; height:64px }
  .lw-modul__bild--zahl{ font-size:1.8rem }
}
@media (prefers-reduced-motion:reduce){
  .lw-leiter__stufe{ transition:none }
  .lw-leiter__stufe:hover, .lw-leiter__stufe:focus-visible{ transform:none }
}

/* ═══════════ Lernbibliothek: Leiste links, Sammlungen rechts ═══════════
   Hallmark · redesign · macrostructure: Katalog mit Filterleiste
   theme: POLKA (gesperrt) · tone: editorial, ruhig · anchor hue: Rot #AE151B
   Vorher: zehn Deckelkacheln, Pillen und eine flache Liste ueber 1.057
   Eintraege, alphabetisch in 27 Seiten. Jetzt waehlt man links Sammlung und
   Stufe; ohne Wahl steht jede Sammlung mit ihren ersten Eintraegen da. */
.bi-vorspann{ padding-block:var(--s3) var(--s4) }
.bi-vorspann .fliess{ margin:var(--s2) 0 0 }
.bi-vorspann .fliess a{ color:var(--rot); text-underline-offset:3px }

.bi-rahmen{ display:grid; grid-template-columns:272px minmax(0,1fr); gap:clamp(32px,5vw,var(--s6)); align-items:start }
.bi-leiste{ position:sticky; top:calc(var(--kopf-hoehe) + var(--s2)); max-height:calc(100vh - var(--kopf-hoehe) - var(--s4));
  overflow:auto; overscroll-behavior:contain; padding-right:4px }
.bi-leiste__titel{ display:block; margin:var(--s3) 0 var(--s1); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinte-2) }
.bi-suche .bi-leiste__titel{ margin-top:0 }
[data-sammlungen]{ margin-top:var(--s3) }
.bi-suche__feld{ position:relative }
.bi-suche input{ width:100%; font:inherit; font-size:16px; padding:10px 40px 10px 12px; background:var(--weiss);
  border:1px solid var(--papier-3); border-radius:var(--rand); color:var(--tinte) }
.bi-suche input::placeholder{ color:var(--grau) }
.bi-suche input:focus-visible{ outline:3px solid var(--rot); outline-offset:0; border-color:var(--rot) }
.bi-suche__weg{ position:absolute; right:2px; top:50%; transform:translateY(-50%); width:40px; height:40px;
  display:grid; place-items:center; background:none; border:0; color:var(--tinte-2); cursor:pointer }
.bi-suche__weg:hover{ color:var(--rot) }

.bi-stufen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px }
.bi-stufe{ display:flex; align-items:baseline; justify-content:space-between; gap:4px; min-height:44px; padding:0 10px;
  font:inherit; background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); cursor:pointer }
.bi-stufe b{ font-family:var(--schrift-display); font-weight:900; font-size:18px; line-height:44px }
.bi-stufe:hover:not(:disabled){ border-color:var(--rot) }
.bi-stufe[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:#fff }
.bi-stufe[aria-pressed="true"] .bi-zahl{ color:#fff }

.bi-sammlungen{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.bi-sammlung{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
  min-height:44px; padding:0 10px 0 12px; font:inherit; font-size:15px; text-align:left; background:none;
  border:0; border-bottom:1px solid var(--papier-3); border-left:3px solid transparent; color:var(--tinte); cursor:pointer }
.bi-sammlung:hover:not(:disabled){ color:var(--rot) }
.bi-sammlung[aria-pressed="true"]{ border-left-color:var(--rot); background:var(--weiss); font-weight:700 }
.bi-sammlung:focus-visible, .bi-stufe:focus-visible, .bi-zurueck:focus-visible, .bi-mehr:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.bi-zahl{ font-size:12px; font-weight:400; color:var(--grau); font-variant-numeric:tabular-nums }
.bi-sammlung:disabled, .bi-stufe:disabled{ color:var(--grau); cursor:default; opacity:.6 }
.bi-zurueck{ margin-top:var(--s3); padding:10px 0; font:inherit; font-size:14px; background:none; border:0;
  color:var(--rot); text-decoration:underline; text-underline-offset:3px; cursor:pointer }

.bi-ergebnis{ min-width:0 }
.bi-ergebnis__kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
  padding-bottom:var(--s2); border-bottom:2px solid var(--tinte); margin-bottom:var(--s4) }
.bi-ergebnis__titel{ margin:0; font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.8rem,3.4vw,2.8rem);
  line-height:1.05; overflow-wrap:anywhere; min-width:0 }
.bi-ergebnis__titel:focus{ outline:none }
.bi-ergebnis__zahl{ margin:0; font-size:14px; color:var(--tinte-2); font-variant-numeric:tabular-nums }

.bi-gruppe{ margin-bottom:clamp(40px,5vw,var(--s5)) }
.bi-gruppe__kopf{ margin-bottom:var(--s2) }
.bi-gruppe__titel{ margin:0; font-family:var(--schrift-display); font-weight:800; font-size:clamp(1.35rem,2.2vw,1.75rem); line-height:1.15 }
.bi-gruppe__zahl{ font-size:12px; color:var(--grau); white-space:nowrap; margin-left:.4em }
.bi-gruppe__satz{ margin:4px 0 0; font-size:14px; color:var(--tinte-2) }

.bi-liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.bi-liste a{ display:grid; grid-template-columns:3em minmax(0,1fr) auto; align-items:baseline; gap:var(--s2);
  padding:12px 4px; border-bottom:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.bi-liste a:hover .bi-name{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.bi-liste a:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }
.bi-marke{ justify-self:start; min-width:2.6em; padding:2px 0; text-align:center; font-size:12px; font-weight:700;
  letter-spacing:.06em; color:var(--rot); border:1px solid currentColor }
.bi-marke--leer{ color:var(--grau); border-color:var(--papier-3); font-weight:400 }
.bi-name{ font-size:16px; line-height:1.4; overflow-wrap:anywhere }
.bi-meta{ font-size:13px; color:var(--tinte-2); white-space:nowrap }
.bi-mehr{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:var(--s1); padding:0;
  font:inherit; font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:none; border:0;
  color:var(--rot); cursor:pointer; white-space:nowrap }
.bi-mehr .ikone{ width:18px; height:18px; transition:transform var(--takt) var(--ease-aus) }
.bi-mehr:hover .ikone{ transform:translateX(4px) }
/* Schmale Schirme: „Alle 1.234 … zeigen“ lief in Versalien mit Sperrung bei 320 px bis 49 px ueber den Rand. */
@media (max-width:480px){ .bi-mehr{ text-transform:none; letter-spacing:0; font-size:15px; max-width:100% } }
.bi-leer{ padding:var(--s4) 0; color:var(--tinte-2); max-width:52ch }

@media (max-width:900px){
  .bi-rahmen{ grid-template-columns:minmax(0,1fr) }
  .bi-leiste{ position:static; max-height:none; overflow:visible; padding:0 }
  .bi-stufen{ grid-template-columns:repeat(6,minmax(0,1fr)) }
  .bi-stufe{ flex-direction:column; align-items:center; justify-content:center; gap:0; padding:4px 0 6px }
  .bi-stufe b{ line-height:1.2 }
  .bi-sammlungen{ display:flex; flex-wrap:wrap; gap:6px; border:0 }
  .bi-sammlung{ width:auto; gap:8px; min-height:40px; padding:0 12px; border:1px solid var(--papier-3); background:var(--weiss) }
  .bi-sammlung[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:#fff }
  .bi-sammlung[aria-pressed="true"] .bi-zahl{ color:#fff }
}
@media (max-width:560px){
  .bi-liste a{ grid-template-columns:2.8em minmax(0,1fr) }
  .bi-meta{ grid-column:2; white-space:normal }
}
@media (prefers-reduced-motion:reduce){ .bi-mehr .ikone{ transition:none } }

/* ═══════════ Übungen: eine Stufe, Module links, weitere Übungen rechts ═══════════
   Hallmark · redesign · macrostructure: Arbeitstisch mit Stufenreitern
   theme: POLKA (gesperrt) · tone: editorial, werkzeughaft · anchor hue: Rot #AE151B
   Vorher Stufenkacheln und eine alphabetische Liste, in der Module und
   Einzeluebungen durcheinander standen. Jetzt pro Stufe zwei getrennte Spalten. */
.ub-vorspann{ padding-block:var(--s3) var(--s3) }
.ub-vorspann .fliess{ margin:var(--s2) 0 0 }

.ub-steuer{ display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:var(--s3); align-items:end;
  padding-bottom:var(--s3); border-bottom:2px solid var(--tinte) }
.ub-reiterleiste{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px }
.ub-reiter{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"code zahl" "name name";
  align-items:baseline; gap:0 8px; min-height:64px; padding:8px 12px; font:inherit; text-align:left;
  background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); cursor:pointer }
.ub-reiter b{ grid-area:code; font-family:var(--schrift-display); font-weight:900; font-size:22px; line-height:1.1 }
.ub-reiter .bi-zahl{ grid-area:zahl; justify-self:end }
.ub-reiter__name{ grid-area:name; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tinte-2) }
.ub-reiter:hover{ border-color:var(--rot) }
.ub-reiter[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:#fff }
.ub-reiter[aria-pressed="true"] :is(.bi-zahl,.ub-reiter__name){ color:#fff }
.ub-reiter:focus-visible{ outline:3px solid var(--tinte); outline-offset:2px }
.ub-suche .bi-suche__feld input{ min-height:48px }

.ub-stufen{ padding-top:var(--s4); padding-bottom:var(--s2) }
.ub-treffer{ margin:0 0 var(--s3); font-size:14px; color:var(--tinte-2) }
.ub-stufe{ margin-bottom:clamp(48px,6vw,var(--s5)) }
.ub-stufe__titel{ margin:0 0 var(--s3); font-family:var(--schrift-display); font-weight:900;
  font-size:clamp(2rem,4vw,3.2rem); line-height:1.05 }
.ub-stufe__titel span{ font-family:var(--schrift-ui); font-weight:400; font-size:.42em; letter-spacing:.02em; color:var(--tinte-2); margin-left:.3em }
/* Mit Skript steht immer nur eine Stufe da; der Titel waere dann doppelt zum Reiter. */
.ub-stufen--eine .ub-stufe__titel{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }

.ub-spalten{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(28px,4vw,var(--s5)); align-items:start }
.ub-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
  padding-bottom:var(--s1); border-bottom:1px solid var(--tinte); margin-bottom:0 }
.ub-kopf h3, .ub-ohne__titel{ margin:0; font-family:var(--schrift-ui); font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase }
.ub-kopf__ku{ font-family:var(--schrift-ku); font-size:1.15rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--rot); margin-left:.3em }
.ub-kopf__zahl{ font-size:13px; color:var(--tinte-2) }

.ub-module{ list-style:none; margin:0; padding:0 }
.ub-module li{ display:flex; align-items:center; gap:var(--s2); border-bottom:1px solid var(--papier-3) }
.ub-modul{ flex:1; min-width:0; display:grid; grid-template-columns:3.2rem minmax(0,1fr); align-items:center; gap:var(--s2);
  padding:12px 0; color:var(--tinte); text-decoration:none }
.ub-modul__nr{ font-family:var(--schrift-display); font-weight:900; font-size:1.7rem; line-height:1; color:var(--rot); font-variant-numeric:lining-nums }
.ub-modul__text{ display:grid; gap:2px; min-width:0 }
.ub-modul__ku{ display:block; font-family:var(--schrift-ku); font-size:1.15rem; line-height:1.5; text-align:left; color:var(--tinte-2) }
.ub-modul__de{ font-weight:600; font-size:16px; line-height:1.35; overflow-wrap:anywhere }
.ub-modul:hover .ub-modul__de{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.ub-modul:focus-visible, .ub-video:focus-visible, .ub-liste a:focus-visible, .ub-nabe:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.ub-video{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rot); border:1px solid var(--papier-3); text-decoration:none }
.ub-video::before{ content:""; width:0; height:0; border-left:7px solid currentColor; border-block:5px solid transparent }
.ub-video:hover{ border-color:var(--rot); background:var(--rot); color:#fff }
.ub-nabe{ display:inline-block; margin-top:var(--s2); padding-block:10px; font-size:14px; font-weight:700; color:var(--rot);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap }

.ub-liste{ list-style:none; margin:0; padding:0 }
.ub-liste li{ border-bottom:1px solid var(--papier-3) }
.ub-liste a{ display:block; padding:12px 0; font-size:16px; line-height:1.4; color:var(--tinte); text-decoration:none; overflow-wrap:anywhere }
.ub-liste a:hover{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.ub-liste--breit{ columns:3 260px; column-gap:var(--s4) }
.ub-liste--breit li{ break-inside:avoid }
.ub-stufe--ohne{ padding-top:var(--s3); border-top:1px solid var(--papier-3) }
.ub-stufe--ohne .ub-kopf{ border-bottom-color:var(--papier-3) }

@media (max-width:1024px){
  .ub-steuer{ grid-template-columns:minmax(0,1fr) }
  .ub-spalten{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px){
  .ub-reiterleiste{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .ub-reiter{ min-height:56px; padding:6px 10px }
  .ub-modul{ grid-template-columns:2.4rem minmax(0,1fr) }
  .ub-modul__nr{ font-size:1.35rem }
}

/* ═══════════ Werkzeuge: nach Zweck geordnet, Sprungleiste, Kartenraster ═══════════
   Hallmark · redesign · macrostructure: Register mit Sprungleiste
   theme: POLKA (gesperrt) · tone: editorial, werkzeughaft · anchor hue: Rot #AE151B
   Vorher sieben gewachsene Rubriken als lange nummerierte Zeilen, fast jede
   mit „NEU". Jetzt elf Rubriken nach Zweck, Karten im Raster, Suche oben. */
.wz-vorspann{ padding-block:var(--s3) var(--s3) }
.wz-vorspann .fliess{ margin:var(--s2) 0 0 }

.wz-leiste{ position:sticky; top:var(--kopf-hoehe); z-index:var(--z-ueber); background:var(--papier);
  border-bottom:2px solid var(--tinte) }
.wz-leiste__innen{ display:grid; grid-template-columns:minmax(200px,280px) minmax(0,1fr); gap:var(--s3); align-items:center;
  padding-block:var(--s2) }
.wz-suche input{ min-height:44px }
.wz-sprung ul{ list-style:none; margin:0; padding:0 0 2px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin }
.wz-sprung a{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; white-space:nowrap;
  font-size:14px; color:var(--tinte); text-decoration:none; border:1px solid var(--papier-3); background:var(--weiss) }
.wz-sprung a:hover{ border-color:var(--rot); color:var(--rot) }
.wz-sprung a[aria-current]{ background:var(--rot); border-color:var(--rot); color:#fff }
.wz-sprung a[aria-current] .bi-zahl{ color:#fff }
.wz-sprung a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

.wz-rubriken{ padding-top:var(--s4) }
.wz-rubrik{ scroll-margin-top:calc(var(--kopf-hoehe) + 96px); margin-bottom:clamp(48px,6vw,var(--s5)) }
.wz-rubrik__kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s1) var(--s3); flex-wrap:wrap;
  padding-bottom:var(--s1); margin-bottom:var(--s2); border-bottom:1px solid var(--tinte) }
.wz-rubrik__titel{ margin:0; font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.1;
  overflow-wrap:anywhere; min-width:0 }
.wz-rubrik__zahl{ font-size:12px; color:var(--grau); white-space:nowrap; margin-left:.4em }
.wz-rubrik__satz{ margin:0; font-size:14px; color:var(--tinte-2) }

.wz-raster{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:var(--s2) }
.wz-raster li{ display:flex; min-width:0 }
.wz-karte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding:var(--s2); background:var(--weiss);
  border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.wz-karte:hover{ border-color:var(--rot); box-shadow:inset 0 -3px 0 var(--rot) }
.wz-karte:hover .wz-karte__titel{ color:var(--rot) }
.wz-karte:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.wz-karte__kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s1) }
.wz-karte__titel{ font-weight:700; font-size:16px; line-height:1.3; overflow-wrap:anywhere; min-width:0 }
.wz-karte__marke{ flex:none; padding:1px 6px; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--tinte-2);
  border:1px solid var(--papier-3); white-space:nowrap }
.wz-karte__text{ font-size:14px; line-height:1.5; color:var(--tinte-2);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }

@media (max-width:800px){
  .wz-leiste__innen{ grid-template-columns:minmax(0,1fr); gap:var(--s1) }
}
@media (prefers-reduced-motion:reduce){ .wz-sprung ul{ scroll-behavior:auto } }

/* ═══════════ Wörterbuch: Suche vorn, Alphabet, Bedeutung gleich sichtbar ═══════════
   Hallmark · redesign · macrostructure: Nachschlagewerk (Suchfeld + Register)
   theme: POLKA (gesperrt) · tone: editorial, sachlich · anchor hue: Rot #AE151B
   Vorher: Buchstaben nach Haeufigkeit, leere Liste beim Laden, deutsche
   Bedeutung erst nach Klick, keine Suche vom Deutschen her. */
.wb-vorspann{ padding-top:var(--s3) }
.wb-suche{ padding-block:var(--s3) var(--s2) }
.wb-suche__label{ display:block; margin-bottom:var(--s1); font-size:15px; font-weight:600; color:var(--tinte) }
.wb-suche .bi-suche__feld input{ min-height:60px; font-size:clamp(18px,2vw,22px); padding-left:18px; max-width:none }
.wb-beispiele{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:var(--s2) 0 0; font-size:14px; color:var(--tinte-2) }
.wb-beispiele button{ min-height:36px; padding:0 12px; font:inherit; font-size:14px; background:var(--weiss);
  border:1px solid var(--papier-3); color:var(--tinte); cursor:pointer }
.wb-beispiele button:hover{ border-color:var(--rot); color:var(--rot) }
.wb-beispiele button:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.wb-beispiele bdi{ font-family:var(--schrift-ku); font-size:16px }

.wb-alphabet{ padding-block:var(--s3) var(--s4) }
.wb-alphabet .bi-leiste__titel{ margin-top:0 }
.wb-buchstaben{ display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:3px }
.wb-buchstabe{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:60px;
  padding:4px 2px; font:inherit; background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); cursor:pointer }
.wb-buchstabe__z{ font-family:var(--schrift-ku); font-size:24px; line-height:1.2 }
.wb-buchstabe__n{ font-size:11px; color:var(--grau); font-variant-numeric:tabular-nums }
.wb-buchstabe:hover{ border-color:var(--rot); color:var(--rot) }
.wb-buchstabe[aria-pressed="true"]{ background:var(--rot); border-color:var(--rot); color:#fff }
.wb-buchstabe[aria-pressed="true"] .wb-buchstabe__n{ color:#fff }
.wb-buchstabe:focus-visible{ outline:3px solid var(--tinte); outline-offset:2px }

.wb-ergebnis{ padding-bottom:var(--s4) }
.wb-titel-z{ font-family:var(--schrift-ku); font-weight:400; color:var(--rot); margin-left:.15em }
.bi-ergebnis__titel:focus{ outline:none }
.wb-lage{ margin:0 0 var(--s2); font-size:14px; color:var(--tinte-2) }
.wb-liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.wb-liste li{ border-bottom:1px solid var(--papier-3) }
/* Leserichtung des Kurdischen: das Wort steht als Spalte rechts, links
   daneben die Bedeutung, ganz links der Pfeil zum Aufklappen. */
.wb-eintrag{ width:100%; display:grid; grid-template-columns:24px minmax(0,1.6fr) minmax(0,.9fr);
  grid-template-areas:"pfeil de ku"; align-items:center;
  gap:var(--s3); padding:14px 4px; font:inherit; text-align:left; background:none; border:0; color:var(--tinte); cursor:pointer }
.wb-eintrag__ku{ grid-area:ku; align-items:flex-end; text-align:right; padding-left:var(--s3); border-left:1px solid var(--papier-3) }
.wb-eintrag__de{ grid-area:de }
.wb-pfeil{ grid-area:pfeil }
.wb-de--ohne{ color:var(--grau); font-size:14px }
.wb-eintrag:hover .wb-de{ color:var(--rot) }
.wb-eintrag:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }
.wb-eintrag__ku{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.wb-wort{ display:block; font-family:var(--schrift-ku); font-size:23px; line-height:1.45; text-align:right; overflow-wrap:anywhere }
.wb-tr{ font-size:14px; color:var(--tinte-2); letter-spacing:.02em }
.wb-eintrag__de{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.wb-pos{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grau) }
.wb-de{ font-size:16px; line-height:1.45; overflow-wrap:anywhere }
.wb-pfeil{ justify-self:start; width:12px; height:12px; border-right:2px solid var(--tinte-2); border-bottom:2px solid var(--tinte-2);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform var(--takt) var(--ease-aus) }
.wb-eintrag[aria-expanded="true"] .wb-pfeil{ transform:rotate(-135deg) translate(-3px,-3px) }
/* Aufgeklappt in denselben Spalten wie die Zeile: Deutsch unter der
   Bedeutung, Kurdisch rechtsbuendig unter dem kurdischen Wort. */
.wb-erklaerung{ display:grid; grid-template-columns:24px minmax(0,1.6fr) minmax(0,.9fr);
  grid-template-areas:". de ku"; gap:var(--s2) var(--s3);
  padding:var(--s2) 4px var(--s3); margin:0 0 var(--s2); background:var(--weiss); border-left:3px solid var(--rot) }
.wb-erklaerung__de{ grid-area:de }
.wb-erklaerung__ku{ grid-area:ku; text-align:right; padding-left:var(--s3); border-left:1px solid var(--papier-3) }
.wb-erklaerung__ku .bi-leiste__titel{ text-align:right }
.wb-erklaerung[hidden]{ display:none }
.wb-erklaerung p{ margin:0 }
.wb-erklaerung .bi-leiste__titel{ margin:0 0 4px }
.wb-ku{ font-family:var(--schrift-ku); font-size:19px; line-height:1.8; text-align:right }
.wb-see{ grid-column:1 / -1; font-size:14px; color:var(--tinte-2) }

.wb-lexika{ margin-bottom:var(--s4) }
.wb-lexika .wz-karte__titel{ font-size:17px }

@media (max-width:700px){
  .wb-eintrag{ grid-template-columns:20px minmax(0,1fr); grid-template-areas:"pfeil ku" "pfeil de"; gap:6px var(--s2) }
  .wb-eintrag__ku{ padding-left:0; border-left:0 }
  .wb-erklaerung{ grid-template-columns:minmax(0,1fr); grid-template-areas:"ku" "de"; padding-inline:var(--s2) }
  .wb-erklaerung__ku{ padding-left:0; border-left:0 }
}
@media (prefers-reduced-motion:reduce){ .wb-pfeil{ transition:none } }

/* ═══════════ Die Kurden: Einstieg, vier Themengruppen, Dichtung in drei Spalten ═══════════
   Hallmark · redesign · macrostructure: Themenregister mit Leitkarte
   theme: POLKA (gesperrt) · tone: editorial · anchor hue: Rot #AE151B
   Vorher zwoelf nummerierte Zeilen plus elf weitere im roten Block. Jetzt
   eine Einstiegskarte, vier Gruppen nach Thema, das kurdische Wort rechts. */
.kd-vorspann{ padding-top:var(--s3) }
.kd-ku{ font-family:var(--schrift-ku); font-weight:400; font-size:1.3rem; line-height:1.4; color:var(--rot); text-align:right }
.kd-ku--gross{ font-size:clamp(1.6rem,2.6vw,2.2rem) }
.kd-marke{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rot) }

.kd-einstieg{ padding-block:var(--s3) var(--s5) }
.kd-einstieg__karte{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); background:var(--weiss);
  border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.kd-einstieg__karte:hover{ border-color:var(--rot) }
.kd-einstieg__karte:hover .kd-einstieg__titel{ color:var(--rot) }
.kd-einstieg__karte:focus-visible{ outline:3px solid var(--rot); outline-offset:3px }
.kd-einstieg__bild{ display:block; min-height:240px; background:var(--papier-2) }
.kd-einstieg__bild img{ width:100%; height:100%; object-fit:cover; display:block }
.kd-einstieg__text{ display:flex; flex-direction:column; justify-content:center; gap:var(--s1); padding:clamp(24px,4vw,var(--s5)) }
.kd-einstieg__titel{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05 }
.kd-einstieg__text .kd-ku--gross{ text-align:left }
.kd-einstieg__satz{ font-size:16px; line-height:1.55; color:var(--tinte-2); max-width:42ch }

.kd-themen{ padding-bottom:var(--s5) }
.kd-gruppe{ margin-bottom:clamp(36px,5vw,var(--s5)) }
.kd-gruppe__titel{ margin:0 0 var(--s2); padding-bottom:var(--s1); border-bottom:1px solid var(--tinte);
  font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.5rem,2.8vw,2.2rem); line-height:1.1 }
.kd-raster{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:var(--s2) }
.kd-raster li{ display:flex; min-width:0 }
.kd-karte{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--s1); padding:var(--s3) var(--s2) var(--s2);
  background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.kd-karte:hover{ border-color:var(--rot); box-shadow:inset 0 -3px 0 var(--rot) }
.kd-karte:hover .kd-karte__titel{ color:var(--rot) }
.kd-karte:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.kd-karte__kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2) }
.kd-karte__titel{ font-weight:700; font-size:18px; line-height:1.3; overflow-wrap:anywhere; min-width:0 }
.kd-karte__satz{ font-size:14px; line-height:1.5; color:var(--tinte-2) }

.kd-quiz{ display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3);
  border:1px solid var(--tinte); color:var(--tinte); text-decoration:none; font-size:15px }
.kd-quiz b{ font-weight:700 }
.kd-quiz:hover{ background:var(--tinte); color:#fff }
.kd-quiz:hover :is(.kd-marke,.kd-ku){ color:#fff }
.kd-quiz:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

.kd-dichtung__kopf{ max-width:62ch; margin-bottom:var(--s4) }
.kd-dichtung__kopf h2{ margin:0 0 var(--s4); line-height:1.12 }
.kd-dichtung__kopf .fliess{ color:#fff }
.kd-spalten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4) }
.kd-spalte__titel{ margin:0 0 var(--s1); padding-bottom:var(--s1); border-bottom:1px solid rgba(255,255,255,.5);
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff }
.kd-liste{ list-style:none; margin:0; padding:0 }
.kd-liste li{ border-bottom:1px solid rgba(255,255,255,.25) }
.kd-liste a{ display:flex; flex-direction:column; gap:2px; padding:12px 0; color:#fff; text-decoration:none }
.kd-liste b{ font-size:16px }
.kd-liste span{ font-size:14px; color:rgba(255,255,255,.88) }
.kd-liste a:hover b{ text-decoration:underline; text-underline-offset:3px }
.kd-liste a:focus-visible{ outline:3px solid #fff; outline-offset:2px }

@media (max-width:860px){
  .kd-einstieg__karte{ grid-template-columns:minmax(0,1fr) }
  .kd-einstieg__bild{ min-height:0; aspect-ratio:16/9 }
  .kd-spalten{ grid-template-columns:minmax(0,1fr); gap:var(--s3) }
  .kd-quiz{ flex-wrap:wrap }
}

/* ═══════════ Sprichwörter: Tagesspruch, Suche, Alphabet ═══════════
   Hallmark · redesign · macrostructure: Nachschlagewerk mit Leitzitat
   theme: POLKA (gesperrt) · tone: editorial · anchor hue: Rot #AE151B
   Gleiches Bedienmuster wie das Woerterbuch (Suchfeld, Alphabet in
   Sorani-Reihenfolge, Ergebniskopf), dazu oben das Sprichwort des Tages. */
.sp-tag{ padding-block:var(--s3) var(--s2) }
.sp-tag .kd-marke{ margin:0 0 var(--s1) }
.sp-tag__karte{ background:var(--weiss); border:1px solid var(--papier-3); border-top:4px solid var(--rot);
  padding:0 clamp(18px,3vw,var(--s4)) }
.sp-tag__karte:empty{ min-height:160px }
.sp-karte--gross{ border-bottom:0 }
.sp-karte--gross .sp-ku{ font-size:clamp(1.8rem,3.6vw,2.6rem) }
.sp-karte--gross .sp-de{ font-size:1.15rem }
.sp-liste{ list-style:none; margin:0; padding:0 }
.sp-ergebnis .bi-ergebnis__kopf{ margin-bottom:0 }
.sp-ergebnis .wb-lage{ margin-top:var(--s2) }

/* ═══════════ Lieder und Literatur, getrennt ═══════════
   Hallmark · redesign · macrostructure: Register in Spalten (Lieder nach
   Interpret) und Zeitleiste in Karten (Literatur nach Jahrhundert)
   theme: POLKA (gesperrt) · tone: editorial · anchor hue: Rot #AE151B
   Vorher eine gemeinsame Seite mit Kacheln, Pillen und einer flachen
   alphabetischen Liste ueber Lieder, Dichtung und Maerchen. */
.li-einleitung{ margin:var(--s2) 0 0 }
.li-einleitung a{ color:var(--rot); text-underline-offset:3px }

/* Lieder: Interpreten als Bloecke in zwei Spalten, damit 56 Gruppen mit
   oft nur einem Lied nicht eine endlose Spalte ergeben. */
.li-gruppen{ padding-top:var(--s4); padding-bottom:var(--s3); columns:2 420px; column-gap:clamp(32px,5vw,var(--s6)) }
.li-gruppen > .ub-treffer, .li-gruppen > .bi-leer{ column-span:all }
.li-gruppe{ break-inside:avoid; margin-bottom:var(--s4); scroll-margin-top:calc(var(--kopf-hoehe) + 96px) }
.li-gruppe__titel{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); margin:0;
  padding-bottom:6px; border-bottom:1px solid var(--tinte); font-family:var(--schrift-display); font-weight:800;
  font-size:clamp(1.2rem,1.8vw,1.45rem); line-height:1.2; overflow-wrap:anywhere }
.li-gruppe__zahl{ flex:none; font-family:var(--schrift-ui); font-weight:400; font-size:12px; color:var(--grau) }
.li-liste{ list-style:none; margin:0; padding:0 }
.li-liste li{ border-bottom:1px solid var(--papier-3) }
.li-lied{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"titel dauer" "ku ku";
  align-items:baseline; gap:2px var(--s2); padding:10px 0; color:var(--tinte); text-decoration:none }
.li-titel{ grid-area:titel; display:flex; flex-direction:column; gap:1px; min-width:0 }
.li-titel b{ font-weight:600; font-size:16px; line-height:1.35; overflow-wrap:anywhere }
.li-de, .li-text{ font-size:13px; line-height:1.45; color:var(--tinte-2) }
.li-text{ color:var(--grau) }
.li-ku{ grid-area:ku; display:block; font-family:var(--schrift-ku); font-size:1.05rem; text-align:right; color:var(--rot) }
.li-dauer{ grid-area:dauer; font-size:13px; color:var(--grau); font-variant-numeric:tabular-nums; white-space:nowrap }
.li-dauer--ohne{ font-size:12px }
.li-lied:hover b{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.li-lied:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

/* Literatur */
.dt-werkzeuge{ padding-block:var(--s4) var(--s5) }
.dt-spalten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4) }
.dt-spalte__titel{ margin:0 0 var(--s1); padding-bottom:var(--s1); border-bottom:1px solid var(--tinte);
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tinte) }
.dt-liste li{ border-bottom-color:var(--papier-3) }
.dt-liste a{ color:var(--tinte) }
.dt-liste span{ color:var(--tinte-2) }
.dt-liste a:focus-visible{ outline-color:var(--rot) }
.dt-liste a:hover b{ color:var(--rot) }
.dt-dichter{ padding-top:var(--s4) }
.dt-jh{ margin-bottom:clamp(40px,5vw,var(--s5)) }
.dt-raster{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:var(--s1) }
.dt-raster li{ display:flex; min-width:0 }
.dt-karte{ flex:1; min-width:0; display:grid; grid-template-areas:"ku" "lat" "fuss"; gap:2px; padding:12px 14px;
  background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.dt-karte:hover{ border-color:var(--rot) }
.dt-karte:hover .dt-karte__lat{ color:var(--rot) }
.dt-karte:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.dt-karte__ku{ grid-area:ku; display:block; font-family:var(--schrift-ku); font-size:1.35rem; line-height:1.5; text-align:right; color:var(--tinte) }
.dt-karte__lat{ grid-area:lat; font-weight:600; font-size:15px; line-height:1.35; overflow-wrap:anywhere }
.dt-karte__fuss{ grid-area:fuss; display:flex; justify-content:space-between; gap:var(--s1); font-size:13px; color:var(--tinte-2); font-variant-numeric:tabular-nums }
.dt-karte__art{ color:var(--grau); font-size:12px }
.dt-maerchen .wz-karte__titel{ font-size:15px }

@media (max-width:860px){
  .dt-spalten{ grid-template-columns:minmax(0,1fr); gap:var(--s3) }
}
.ll-weiche{ padding-block:var(--s5) var(--s6) }
.ll-weiche__titel{ margin:var(--s3) 0 var(--s4); font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.1; max-width:24ch }
.ll-weiche__karten{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); gap:var(--s2); max-width:900px }
.ll-weiche__karten li{ display:flex }

/* Sängerinnen und Sänger: zwei Gruppen in Karten */
.sg-gruppen{ padding-top:var(--s4); padding-bottom:var(--s3) }
.sg-gruppe{ margin-bottom:clamp(40px,5vw,var(--s5)) }
.sg-raster--gross{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)) }
.sg-karte--gross .kd-karte__titel{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.25rem,2vw,1.5rem) }
.sg-karte--gross .kd-ku{ font-size:1.5rem }
.sg-karte--gross .kd-karte__kopf{ flex-direction:column; align-items:stretch; gap:2px }
.sg-karte--gross .kd-ku{ display:block }

/* ═══════════ Bücher: Lehrbücher, Grammatik in 17 Bänden, Nachschlagewerke ═══════════
   Hallmark · redesign · macrostructure: Verlagsprogramm (Status je Werk sichtbar)
   theme: POLKA (gesperrt) · tone: editorial · anchor hue: Rot #AE151B
   Vorher fehlten die 17 Grammatikbaende ganz (sie stehen im Bestand als
   Skriptdaten), dafuer stand „'+b.de+'" als Titel auf der Seite. */
.bu2-sprung{ display:flex; flex-wrap:wrap; gap:6px; padding-block:var(--s3) var(--s4) }
.bu2-sprung a{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; font-size:14px;
  color:var(--tinte); text-decoration:none; background:var(--weiss); border:1px solid var(--papier-3); white-space:nowrap }
.bu2-sprung a:hover{ border-color:var(--rot); color:var(--rot) }
.bu2-sprung a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.bu2-abschnitt{ padding-bottom:clamp(48px,6vw,var(--s5)); scroll-margin-top:calc(var(--kopf-hoehe) + 16px) }

.bu2-raster{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:var(--s2) }
.bu2-raster li{ display:flex; min-width:0 }
.bu2-buch{ flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--s3); background:var(--weiss); border:1px solid var(--papier-3) }
.bu2-buch--umschlag{ flex-direction:row; align-items:flex-start; gap:var(--s2) }
.bu2-buch__rumpf{ flex:1; min-width:0; align-self:stretch; display:flex; flex-direction:column; gap:6px }
.bu2-umschlag{ flex:0 0 clamp(88px,26%,120px); display:block; line-height:0; box-shadow:0 1px 2px rgb(20 17 16 / .12), 0 6px 16px -6px rgb(20 17 16 / .28); transition:transform .2s ease, box-shadow .2s ease }
.bu2-umschlag img{ display:block; width:100%; height:auto; aspect-ratio:2/3 }
@media (hover:hover){ .bu2-umschlag:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgb(20 17 16 / .14), 0 12px 24px -8px rgb(20 17 16 / .32) } }
@media (prefers-reduced-motion:reduce){ .bu2-umschlag{ transition:none } }
.bu2-titel{ margin:0; font-family:var(--schrift-display); font-weight:800; font-size:1.3rem; line-height:1.2; overflow-wrap:anywhere; min-width:0 }
.bu2-verf{ margin:0; font-size:13px; color:var(--tinte-2) }
.bu2-text{ margin:4px 0 0; font-size:15px; line-height:1.55; color:var(--tinte); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
.bu2-angaben{ margin:0; font-size:13px; color:var(--tinte-2) }
.bu2-fuss{ margin-top:auto; padding-top:var(--s2) }
.bu2-knopf{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; font-size:14px; font-weight:700;
  color:#fff; background:var(--rot); text-decoration:none; white-space:nowrap }
.bu2-knopf span{ font-weight:400; opacity:.9 }
.bu2-knopf:hover{ background:var(--rot-tief) }
.bu2-knopf:focus-visible{ outline:3px solid var(--tinte); outline-offset:2px }
.bu2-status{ display:inline-block; padding:6px 10px; font-size:13px; color:var(--tinte-2); border:1px dashed var(--papier-3) }

.bu2-einleitung{ margin:0 0 var(--s3) }
/* Bandverzeichnis (25.10.2026): Zeilen wie in einem Inhaltsverzeichnis statt gleicher Kacheln.
   Breit zwei Spalten, von oben nach unten gelesen (I–IX links, X–XVII rechts). */
.bu2-baende{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); column-gap:var(--s4);
  border-top:1px solid var(--tinte) }
@media (min-width:880px){
  .bu2-baende{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:column; grid-template-rows:repeat(9,auto) }
  .bu2-baende--spezial{ grid-template-rows:none; grid-auto-flow:row }
}
.bu2-baende li{ display:flex; min-width:0; border-bottom:1px solid var(--papier-3) }
.bu2-band{ flex:1; min-width:0; display:grid; grid-template-columns:3.25rem minmax(0,1fr) auto; grid-template-rows:auto auto;
  column-gap:var(--s2); row-gap:10px; align-items:baseline; padding:14px 10px 12px 4px; color:var(--grau); text-decoration:none;
  transition:background-color var(--takt) }
.bu2-band__nr{ grid-row:1 / span 2; font-family:var(--schrift-display); font-size:1.55rem; line-height:1; color:var(--papier-3);
  font-variant-numeric:lining-nums }
.bu2-band__titel{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); min-width:0 }
.bu2-band__de{ font-family:var(--schrift-display); font-weight:700; font-size:1.1rem; line-height:1.25; color:inherit; overflow-wrap:anywhere; min-width:0 }
.bu2-band__ku{ font-family:var(--schrift-ku); font-size:1.12rem; line-height:1.3; white-space:nowrap; color:inherit }
.bu2-band__fuss{ grid-row:1 / span 2; grid-column:3; display:grid; justify-items:end; gap:2px; font-size:12px;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--grau) }
.bu2-band__status{ color:var(--grau) }
.bu2-band__ruecken{ grid-column:2; height:2px; background:linear-gradient(90deg,var(--papier-3) var(--anteil),transparent var(--anteil)) }
.bu2-band--da{ color:var(--tinte) }
.bu2-band--da .bu2-band__nr{ color:var(--rot) }
.bu2-band--da .bu2-band__ku{ color:var(--rot) }
.bu2-band--da .bu2-band__seiten{ color:var(--tinte-2) }
.bu2-band__status--da{ color:var(--rot); font-weight:700 }
.bu2-band--da .bu2-band__ruecken{ background:linear-gradient(90deg,var(--tinte-2) var(--anteil),transparent var(--anteil)) }
.bu2-band--da:hover{ background:var(--papier-2) }
.bu2-band--da:hover .bu2-band__de{ color:var(--rot) }
.bu2-band--da:hover .bu2-band__ruecken{ background:linear-gradient(90deg,var(--rot) var(--anteil),transparent var(--anteil)) }
.bu2-band--da:active{ background:var(--papier-3) }
.bu2-band--da:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }
@media (max-width:420px){
  .bu2-band{ grid-template-columns:2.4rem minmax(0,1fr) auto; column-gap:12px }
  .bu2-band__titel{ flex-direction:column; gap:2px }
}
@media (prefers-reduced-motion:reduce){ .bu2-band{ transition:none } }
.bu2-unter{ margin:var(--s4) 0 var(--s2); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase }

/* ═══════════ Manuskript: Lehrseite statt Linkliste ═══════════
   Hallmark · redesign · macrostructure: Lehrtext in vier Kapiteln
   theme: POLKA (gesperrt) · tone: editorial, lehrend · anchor hue: Rot #AE151B
   Vorher war jede Zeile ein Verweis auf grammatik.html, auch die
   Personalendungen. Jetzt Schema, Gruppen und Endungen als Lehrstoff. */
.ms-vorspann .fliess{ margin:var(--s2) 0 0 }
.ms-inhalt{ padding-bottom:0 }
.ms-abschnitt{ padding-block:var(--s4) clamp(40px,5vw,var(--s5)); scroll-margin-top:calc(var(--kopf-hoehe) + 16px) }
.ms-satz{ margin:0 0 var(--s3) }
.ms-schritte{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
  counter-reset:none; border:1px solid var(--papier-3); background:var(--weiss) }
.ms-schritte li{ position:relative; padding:var(--s3); border-left:1px solid var(--papier-3) }
.ms-schritte li:first-child{ border-left:0 }
.ms-schritt__nr{ display:block; font-family:var(--schrift-display); font-weight:900; font-size:3rem; line-height:1; color:var(--rot) }
.ms-schritt__titel{ margin:var(--s1) 0 4px; font-size:18px; font-weight:700 }
.ms-schritte p{ margin:0; font-size:15px; line-height:1.55; color:var(--tinte-2) }

.ms-gruppen{ list-style:none; margin:0; padding:0; border-top:1px solid var(--tinte) }
.ms-gruppe{ display:grid; grid-template-columns:minmax(0,1fr) 120px; grid-template-areas:"text endung"; gap:var(--s3);
  align-items:start; padding:var(--s3) 0; border-bottom:1px solid var(--papier-3) }
.ms-gruppe > div{ grid-area:text; min-width:0 }
.ms-gruppe__endung{ grid-area:endung; display:block; font-family:var(--schrift-ku); font-size:2.6rem; line-height:1.1; text-align:right; color:var(--rot) }
.ms-gruppe__titel{ margin:0 0 6px; font-size:18px; font-weight:700 }
.ms-gruppe p{ margin:0; font-size:15px; line-height:1.65; color:var(--tinte-2); max-width:68ch }
.ms-gruppe p bdi{ font-family:var(--schrift-ku); font-size:1.08em; color:var(--tinte) }
.ms-mehr{ margin:var(--s3) 0 0; font-size:15px; color:var(--tinte-2) }

.ms-tabelle{ width:100%; max-width:760px; border-collapse:collapse; background:var(--weiss); border:1px solid var(--papier-3) }
.ms-tabelle th, .ms-tabelle td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--papier-3); font-size:15px }
.ms-tabelle thead th{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--rot); border-bottom:0 }
.ms-tabelle tbody th{ font-weight:600 }
.ms-tabelle td{ color:var(--tinte-2) }
.ms-tabelle .ms-ku{ text-align:right }
.ms-tabelle td.ms-ku bdi{ font-family:var(--schrift-ku); font-size:1.5rem; color:var(--rot) }
.ms-tabelle tbody tr:last-child > *{ border-bottom:0 }

@media (max-width:760px){
  .ms-schritte{ grid-template-columns:minmax(0,1fr) }
  .ms-schritte li{ border-left:0; border-top:1px solid var(--papier-3) }
  .ms-schritte li:first-child{ border-top:0 }
  .ms-gruppe{ grid-template-columns:minmax(0,1fr) 72px; gap:var(--s2) }
  .ms-gruppe__endung{ font-size:2rem }
  .ms-tabelle th, .ms-tabelle td{ padding:10px }
}
/* Abspielknopf je Lied */
.li-zeile{ display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:var(--s1) }
.li-spiel{ width:36px; height:36px; display:grid; place-items:center; padding:0; background:var(--weiss);
  border:1px solid var(--papier-3); border-radius:50%; color:var(--rot); cursor:pointer }
.li-spiel .ikone{ width:16px; height:16px; fill:currentColor; stroke:none }
.li-spiel:hover{ border-color:var(--rot) }
.li-spiel--aktiv{ background:var(--rot); border-color:var(--rot); color:#fff }
.li-spiel:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.li-spiel--leer{ background:none; border:0 }

/* ═══════════ Literatur-Unterseiten: Epochen, Frauen, Werke, Anthologie ═══════════
   Hallmark · redesign · macrostructure: Zeitleiste (Epochen), Porträtkarten
   (Frauen), Register (Werke), Lesebuch nach Themen (Anthologie)
   theme: POLKA (gesperrt) · tone: editorial · anchor hue: Rot #AE151B */
.ep2-band{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; padding-block:var(--s3) var(--s4) }
.ep2-band a{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--weiss); border:1px solid var(--papier-3);
  border-top:3px solid var(--rot); color:var(--tinte); text-decoration:none; min-width:0 }
.ep2-band b{ font-size:12px; letter-spacing:.06em; color:var(--rot) }
.ep2-band span{ font-size:14px; font-weight:600; line-height:1.3; overflow-wrap:anywhere }
.ep2-band a:hover{ border-color:var(--rot) }
.ep2-band a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.ep2-leiste{ list-style:none; margin:0 auto; padding:0 0 var(--s4); position:relative }
.ep2{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--papier-3);
  scroll-margin-top:calc(var(--kopf-hoehe) + 16px) }
.ep2:first-child{ border-top:2px solid var(--tinte) }
.ep2__jahre{ margin:0; font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.15; color:var(--rot) }
.ep2__titel{ margin:0 0 10px; font-family:var(--schrift-display); font-weight:800; font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.15 }
.ep2__text{ margin:0 0 var(--s2); max-width:68ch; font-size:1.05rem; line-height:1.75; color:var(--tinte) }
.ep2__leute{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px }
.ep2__leute a{ display:inline-flex; align-items:center; min-height:36px; padding:0 12px; font-size:14px; color:var(--tinte);
  text-decoration:none; background:var(--weiss); border:1px solid var(--papier-3) }
.ep2__leute a:hover{ border-color:var(--rot); color:var(--rot) }
.ep2__leute a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

.fr2{ padding-block:var(--s4) var(--s5) }
.fr2-spalten{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,4vw,var(--s5)); align-items:start }
.fr2-text p{ margin:0 0 14px; max-width:68ch; font-size:1.05rem; line-height:1.75 }
.fr2-raster{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2) }
.fr2-karte{ display:grid; grid-template-areas:"name ku" "jahre ort"; grid-template-columns:minmax(0,1fr) auto; gap:4px var(--s2);
  padding:var(--s3); background:var(--weiss); border:1px solid var(--papier-3); border-left:4px solid var(--rot); color:var(--tinte); text-decoration:none }
.fr2-karte:hover{ border-color:var(--rot) }
.fr2-karte:hover .fr2-karte__name{ color:var(--rot) }
.fr2-karte:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.fr2-karte__name{ grid-area:name; font-family:var(--schrift-display); font-weight:800; font-size:1.3rem; line-height:1.2; overflow-wrap:anywhere }
.fr2-karte__ku{ grid-area:ku; font-family:var(--schrift-ku); font-size:1.35rem; text-align:right; color:var(--rot) }
.fr2-karte__jahre{ grid-area:jahre; font-size:14px; color:var(--tinte-2); font-variant-numeric:tabular-nums }
.fr2-karte__ort{ grid-area:ort; font-family:var(--schrift-ku); font-size:1rem; text-align:right; color:var(--tinte-2) }

.wk2-zeile{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s2); padding:9px 0; color:var(--tinte); text-decoration:none }
.wk2-zeile b{ font-weight:600; font-size:15px; line-height:1.4; overflow-wrap:anywhere }
.wk2-zeile span{ font-size:14px; color:var(--tinte-2); line-height:1.4 }
.wk2-zeile:hover span{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.wk2-zeile:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

.an2{ padding-top:var(--s4) }
.an2-thema{ margin-bottom:clamp(40px,5vw,var(--s5)); scroll-margin-top:calc(var(--kopf-hoehe) + 96px) }
.an2-liste{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3) }
.an2-gedicht{ background:var(--weiss); border:1px solid var(--papier-3); padding:var(--s3) var(--s3) var(--s2) }
.an2-titel{ margin:0 0 4px; font-family:var(--schrift-display); font-weight:800; font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.2 }
.an2-besch{ margin:0 0 var(--s2); font-size:14px; line-height:1.55; color:var(--tinte-2) }
.an2-besch a{ color:var(--rot); text-underline-offset:3px }
.an2-verse{ border-top:1px solid var(--papier-3) }
.an2-vers{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s3); padding:8px 0; border-bottom:1px solid var(--papier-2) }
.an2-vers:last-child{ border-bottom:0 }
.an2-de{ font-size:15px; line-height:1.6 }
.an2-ku{ display:block; font-family:var(--schrift-ku); font-size:1.2rem; line-height:1.75; text-align:right }

@media (max-width:900px){
  .ep2-band{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .fr2-spalten{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px){
  .ep2-band{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ep2{ grid-template-columns:minmax(0,1fr); gap:6px }
  .wk2-zeile{ grid-template-columns:minmax(0,1fr); gap:2px }
  .an2-vers{ grid-template-columns:minmax(0,1fr); gap:2px }
  .an2-ku{ order:-1 }
  .fr2-karte{ grid-template-areas:"ku" "name" "jahre" "ort"; grid-template-columns:minmax(0,1fr) }
}
@media print{
  .wz-leiste, .held, .kopf, .fuss, .band-rot{ display:none !important }
  .an2-gedicht{ break-inside:avoid; border:0 }
}

/* ═══════════ Literatur-Werkzeuge: gemeinsame Leiste, Zeitstrahl, Gedenktage, Statistik ═══════════ */
.lw2-leiste{ padding-block:var(--s2) 0 }
.lw2-leiste ul{ list-style:none; margin:0; padding:0 0 2px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin }
.lw2-leiste a{ display:inline-flex; align-items:center; min-height:38px; padding:0 12px; white-space:nowrap; font-size:14px;
  color:var(--tinte); text-decoration:none; background:var(--weiss); border:1px solid var(--papier-3) }
.lw2-leiste a:hover{ border-color:var(--rot); color:var(--rot) }
.lw2-leiste a[aria-current]{ background:var(--tinte); border-color:var(--tinte); color:#fff }
.lw2-leiste a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

.zs2{ padding-top:var(--s4) }
.zs2-abschnitt{ margin-bottom:clamp(40px,5vw,var(--s5)); scroll-margin-top:calc(var(--kopf-hoehe) + 96px) }
.zs2-kopf{ display:grid; gap:6px; padding-bottom:var(--s2); border-bottom:2px solid var(--tinte) }
.zs2-kopf .wz-rubrik__titel{ margin:0 }
.zs2-text{ margin:0; max-width:78ch; font-size:15px; line-height:1.65; color:var(--tinte-2) }
.zs2-liste{ list-style:none; margin:0; padding:0 }
.zs2-liste li{ border-bottom:1px solid var(--papier-3) }
.zs2-zeile{ display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,auto); align-items:baseline; gap:var(--s2);
  padding:10px 0; color:var(--tinte); text-decoration:none }
.zs2-jahr{ font-size:14px; font-weight:700; color:var(--rot); font-variant-numeric:tabular-nums; white-space:nowrap }
.zs2-name{ font-weight:600; font-size:16px; overflow-wrap:anywhere }
.zs2-name small{ margin-left:.6em; font-weight:400; font-size:12px; color:var(--grau) }
.zs2-ku{ font-family:var(--schrift-ku); font-size:1.15rem; text-align:right; color:var(--tinte-2) }
.zs2-zeile:hover .zs2-name{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.zs2-zeile:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

.kl2-zeile{ display:grid; grid-template-columns:2.6em minmax(0,1fr) auto; align-items:baseline; gap:var(--s2); padding:9px 0; color:var(--tinte); text-decoration:none }
.kl2-tag{ font-family:var(--schrift-display); font-weight:900; font-size:1.1rem; color:var(--rot) }
.kl2-name{ font-size:15px; font-weight:600; overflow-wrap:anywhere }
.kl2-art{ font-size:13px; color:var(--tinte-2); white-space:nowrap; font-variant-numeric:tabular-nums }
.kl2-zeile:hover .kl2-name{ color:var(--rot) }
.kl2-zeile:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.ist-heute{ background:var(--weiss); box-shadow:inset 3px 0 0 var(--rot) }
.ist-heute .kl2-zeile{ padding-left:10px }
.ist-heute .kl2-art::after{ content:attr(data-jubilaeum); margin-left:.4em; color:var(--rot); font-weight:700 }

.st2{ padding-block:var(--s4) var(--s5) }
.st2-zahlen{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2); margin-bottom:var(--s4) }
.st2-zahl{ display:grid; gap:4px; padding:var(--s3) var(--s2); background:var(--weiss); border:1px solid var(--papier-3); border-top:3px solid var(--rot) }
.st2-zahl b{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(2rem,4vw,3rem); line-height:1 }
.st2-zahl span{ font-size:14px; color:var(--tinte-2) }
.st2-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr)); gap:var(--s2) }
.st2-karte{ padding:var(--s3); background:var(--weiss); border:1px solid var(--papier-3) }
.st2-karte h2{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 var(--s2); font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase }
.st2-karte p{ margin:0; font-size:15px; line-height:1.65; color:var(--tinte-2) }
.st2-karte a{ color:var(--rot); text-underline-offset:3px }
.st2-balken{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.st2-balken li{ display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr) 2.5em; align-items:center; gap:10px }
.st2-lb{ font-size:14px; overflow-wrap:anywhere }
.st2-balken--ku .st2-lb{ font-family:var(--schrift-ku); font-size:1.05rem; text-align:right }
.st2-bahn{ height:10px; background:var(--papier-2) }
.st2-bahn span{ display:block; height:100%; background:var(--rot) }
.st2-n{ font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:var(--tinte) }

@media (max-width:760px){
  .st2-zahlen{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .zs2-zeile{ grid-template-columns:minmax(0,1fr); gap:2px }
  .zs2-ku{ text-align:left }
}

/* ═══════════ Pioniere der Sprache ═══════════
   Hallmark · redesign · macrostructure: Epochen mit Personenkarten
   theme: POLKA (gesperrt) · tone: editorial · anchor hue: Rot #AE151B */
.pi2-band{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.pi2-epoche{ padding-block:var(--s4) var(--s4); scroll-margin-top:calc(var(--kopf-hoehe) + 16px) }
.pi2-epoche__kopf{ padding-bottom:var(--s2); margin-bottom:var(--s3); border-bottom:2px solid var(--tinte) }
.pi2-epoche__sub{ margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rot) }
.pi2-epoche__kopf .wz-rubrik__titel{ margin:0 0 8px }
.pi2-epoche__text{ margin:0; max-width:74ch; font-size:1.02rem; line-height:1.7; color:var(--tinte-2) }
.pi2-raster{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:var(--s2) }
.pi2-raster li{ display:flex; min-width:0 }
.pi2-person{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding:var(--s3); background:var(--weiss); border:1px solid var(--papier-3) }
.pi2-person__kopf{ display:grid; gap:2px }
.pi2-person__name{ margin:0; font-family:var(--schrift-display); font-weight:800; font-size:1.25rem; line-height:1.2; overflow-wrap:anywhere }
.pi2-person__ku{ display:block; font-family:var(--schrift-ku); font-size:1.2rem; text-align:right; color:var(--rot) }
.pi2-person__meta{ margin:0; font-size:13px; color:var(--tinte-2) }
.pi2-person__fokus{ align-self:flex-start; margin:2px 0 0; padding:3px 8px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--rot); border:1px solid currentColor }
.pi2-person__bio{ margin:6px 0 0; font-size:15px; line-height:1.6 }
.pi2-person__werk{ margin:auto 0 0; padding-top:var(--s1); font-size:14px; color:var(--tinte-2); border-top:1px solid var(--papier-2) }
.pi2-person__werk span{ display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--grau) }
.pi2-tabelle-huelle{ overflow-x:auto }
.pi2-tabelle{ max-width:none }
@media (max-width:900px){ .pi2-band{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ── Kurdisch lernen (kl-) ───────────────────────────────────────────── */
.kl-einstieg{ padding-top:var(--s4) }
.kl-schritte{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) }
.kl-schritte li{ display:flex; min-width:0 }
.kl-schritt{ flex:1; min-width:0; display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto; gap:4px var(--s2); align-items:baseline;
  padding:var(--s3); background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.kl-schritt:hover{ border-color:var(--rot); box-shadow:inset 0 -3px 0 var(--rot) }
.kl-schritt:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.kl-schritt__nr{ grid-row:span 3; font-family:var(--schrift-display); font-weight:900; font-size:2.6rem; line-height:1; color:var(--rot) }
.kl-schritt__titel{ font-weight:700; font-size:19px; line-height:1.3 }
.kl-schritt__ku{ font-size:1.15rem }
.kl-schritt__text{ grid-column:2 / -1; font-size:15px; line-height:1.55; color:var(--tinte-2) }
.kl-schritt__mehr{ grid-column:2 / -1; font-size:14px; font-weight:600; color:var(--rot) }
.kl-schritt__mehr::after{ content:" →" }

.kl-stufen{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.kl-stufe{ border-bottom:1px solid var(--papier-3) }
.kl-stufe__link{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:6px var(--s3); align-items:baseline;
  padding:var(--s3) var(--s1); color:var(--tinte); text-decoration:none; transition:background-color .2s var(--ease-aus) }
.kl-stufe__link:hover{ background:var(--weiss) }
.kl-stufe__link:hover .kl-stufe__name{ color:var(--rot) }
.kl-stufe__link:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }
.kl-stufe__code{ grid-row:span 3; font-family:var(--schrift-display); font-weight:900; font-size:2.4rem; line-height:1; color:var(--rot) }
.kl-stufe__kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); min-width:0 }
.kl-stufe__name{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.2; min-width:0 }
.kl-stufe__sinn{ display:block; margin-top:2px; font-family:var(--schrift-ui); font-weight:400; font-size:13px; color:var(--grau) }
.kl-stufe__ku{ flex:none }
.kl-stufe__kann{ grid-column:2; font-size:15px; line-height:1.55; max-width:68ch }
.kl-stufe__themen{ grid-column:2; font-size:13px; color:var(--grau) }
.kl-stufe__fuss{ grid-column:3; grid-row:1 / span 3; align-self:center; display:flex; align-items:center; gap:var(--s1);
  font-size:13px; color:var(--grau); white-space:nowrap }
.kl-stufe__fuss .ikone{ width:20px; height:20px; color:var(--rot); transition:transform .2s var(--ease-aus) }
.kl-stufe__link:hover .kl-stufe__fuss .ikone{ transform:translateX(4px) }
.kl-stufen__weiter{ margin:var(--s2) 0 0; font-size:15px }
.kl-stufen__weiter a{ color:var(--rot); font-weight:600; text-underline-offset:3px }

.kl-hinweise{ padding-bottom:var(--s5) }
.kl-hinweise__spalten{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:var(--s4) }
.kl-hinweis__titel{ margin:0 0 var(--s1); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinte-2) }
.kl-hinweis ul,.kl-hinweis ol{ margin:0; padding:0 0 0 1.2em; display:grid; gap:var(--s2); font-size:15px; line-height:1.6 }
.kl-hinweis li::marker{ color:var(--rot); font-weight:700 }
.kl-hinweis__ku{ display:block; margin-top:6px; font-size:1.1rem }

.kl-leiste{ border-top:1px solid var(--papier-3) }
.kl-unter{ margin:var(--s3) 0 var(--s2); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinte-2) }
.wz-rubrik__kopf + .kl-unter{ margin-top:0 }
.kl-karte__ku{ flex:none; font-size:1.05rem; max-width:50%; overflow-wrap:anywhere }

.kl-schluss{ padding-top:var(--s3) }
.kl-zitat{ margin:0 0 var(--s4); padding:var(--s4) 0; border-top:1px solid var(--tinte); border-bottom:1px solid var(--tinte);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2) var(--s4); flex-wrap:wrap }
.kl-zitat__de{ margin:0; font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.2;
  max-width:22ch; overflow-wrap:anywhere }
.kl-zitat__ku{ margin-left:auto }

@media (max-width:760px){
  .kl-schritte,.kl-hinweise__spalten{ grid-template-columns:minmax(0,1fr) }
  .kl-hinweise__spalten{ gap:var(--s3) }
  .kl-stufe__link{ grid-template-columns:48px minmax(0,1fr); padding:var(--s2) 0 }
  .kl-stufe__code{ font-size:1.8rem; grid-row:span 4 }
  .kl-stufe__kopf{ flex-direction:column; gap:2px }
  .kl-stufe__ku{ align-self:flex-end }
  .kl-stufe__fuss{ grid-column:2; grid-row:auto; align-self:start }
  .kl-schritt{ grid-template-columns:2.2rem minmax(0,1fr); padding:var(--s2) }
  .kl-schritt__nr{ order:-2; grid-row:span 4 }
  .kl-schritt__ku{ order:-1; justify-self:end }
  .kl-schritt__text,.kl-schritt__mehr{ grid-column:2 }
  .kl-zitat__ku{ margin-left:0 }
}

/* ── KI-Tutor (kt2-) ─────────────────────────────────────────────────── */
.kt2-kopf{ padding-top:var(--s4) }
.kt2-kopf__zeile{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s1) var(--s3); flex-wrap:wrap;
  margin-top:var(--s2); padding-bottom:var(--s1); border-bottom:1px solid var(--tinte) }
.kt2-kopf__titel{ margin:0; font-size:clamp(2.6rem,6vw,4.4rem); line-height:1; overflow-wrap:anywhere; min-width:0 }
.kt2-kopf__satz{ margin:var(--s2) 0 0; max-width:62ch }
.kt2-raum{ display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:var(--s4); align-items:start; padding-top:var(--s4) }
.kt2-chat .kaki{ margin:0; max-width:none; padding:var(--s3); border-radius:0; background:var(--weiss); color:var(--tinte);
  border:1px solid var(--papier-3); border-top:3px solid var(--rot) }
.kt2-chat .kaki-head{ display:none }
.kt2-chat .kaki-in{ min-height:120px; border-radius:0; border:1px solid var(--tinte-2); background:var(--papier); color:var(--tinte);
  font-size:17px; padding:12px 14px }
.kt2-chat .kaki-in:focus-visible{ outline:3px solid var(--rot); outline-offset:1px; border-color:var(--rot) }
.kt2-chat .kaki-row{ margin-top:var(--s2) }
.kt2-chat .kaki-btn{ min-height:44px; border-radius:0; background:var(--rot); color:#fff; font-weight:700; padding:0 28px }
.kt2-chat .kaki-btn:hover{ background:var(--rot-tief) }
.kt2-chat .kaki-btn:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.kt2-chat .kaki-hint{ color:var(--tinte-2); font-size:14px }
.kt2-chat .kaki-out{ border-radius:0; background:var(--papier); color:var(--tinte); border:0; border-left:3px solid var(--rot);
  padding:var(--s2); font-size:16px }
.kt2-chat .kaki-note{ color:var(--grau); font-size:13px; margin-top:var(--s1) }
.kt2-seite__titel{ margin:0 0 var(--s1); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinte-2) }
.kt2-seite__titel + ul + .kt2-seite__titel{ margin-top:var(--s4) }
.kt2-fragen{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3) }
.kt2-fragen li{ border-bottom:1px solid var(--papier-3) }
.kt2-fragen button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--s1); min-height:48px;
  padding:10px 4px; background:none; border:0; font:inherit; font-size:15px; text-align:left; color:var(--tinte); cursor:pointer }
.kt2-fragen button::after{ content:"→"; color:var(--rot); transition:transform .2s var(--ease-aus) }
.kt2-fragen button:hover{ color:var(--rot) }
.kt2-fragen button:hover::after{ transform:translateX(4px) }
.kt2-fragen button:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }
.kt2-hinweise{ margin:0; padding:0 0 0 1.1em; display:grid; gap:var(--s1); font-size:14px; line-height:1.55; color:var(--tinte-2) }
.kt2-hinweise a{ color:var(--rot); text-underline-offset:3px }
@media (max-width:860px){
  .kt2-raum{ grid-template-columns:minmax(0,1fr); gap:var(--s3) }
}
.kt2-kopf__zeile .kd-ku{ margin-left:auto }

/* ── Wortschatz (ws-) ────────────────────────────────────────────────── */
.ws-suche{ padding-top:var(--s4) }
.ws-suche .bi-suche__feld input{ min-height:52px; font-size:18px }
.ws-treffer{ margin:var(--s2) 0 var(--s1); font-size:14px; color:var(--tinte-2) }
.ws-liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--papier-3); max-width:880px }
.ws-liste li{ border-bottom:1px solid var(--papier-3) }
.ws-zeile{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--s2); align-items:baseline;
  padding:10px 4px; color:var(--tinte); text-decoration:none }
.ws-zeile:hover{ background:var(--weiss) }
.ws-zeile:hover .ws-zeile__wort{ color:var(--rot) }
.ws-zeile:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }
.ws-zeile__wort{ font-weight:700; overflow-wrap:anywhere }
.ws-zeile__richtung{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--grau); white-space:nowrap }
.ws-zeile__entwurf{ font-size:14px; color:var(--tinte-2); text-align:right; overflow-wrap:anywhere }
.ws-regal{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:6px }
.ws-regal li{ display:flex; min-width:0 }
.ws-band{ flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s1); min-height:96px; padding:12px 14px;
  background:var(--weiss); border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
a.ws-band:hover{ border-color:var(--rot); box-shadow:inset 0 -3px 0 var(--rot) }
a.ws-band:hover .ws-band__b{ color:var(--rot) }
a.ws-band:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.ws-band__b{ font-family:var(--schrift-display); font-weight:900; font-size:2rem; line-height:1 }
.ws-band__n{ font-size:12px; color:var(--grau) }
.ws-band--leer{ background:transparent; border-style:dashed; color:var(--grau) }
.ws-band--leer .ws-band__b{ color:var(--papier-3) }
.ws-band__leiste{ position:relative; display:block; height:5px; background:var(--papier-2) }
.ws-band__leiste i,.ws-band__leiste b{ position:absolute; left:0; top:0; bottom:0 }
.ws-band__leiste i{ background:var(--tinte) }
.ws-band__leiste b{ width:0; background:var(--rot) }
a.ws-band:hover .ws-band__leiste i{ background:var(--rot-tief) }
.ws-band__n span{ color:var(--rot); font-weight:600 }
.ws-bestand{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:var(--s4) 0 0; max-width:880px;
  border-top:2px solid var(--tinte); border-bottom:1px solid var(--papier-3) }
.ws-bestand div{ min-width:0; padding:14px 16px 14px 0 }
.ws-bestand div+div{ padding-left:16px; border-left:1px solid var(--papier-3) }
.ws-bestand dt{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--grau) }
.ws-bestand dd{ margin:4px 0 0; font-family:var(--schrift-display); font-weight:900; font-size:1.9rem; line-height:1.1; color:var(--tinte) }
.ws-bestand dd small{ display:block; margin-top:4px; font-family:var(--schrift-ui); font-weight:400; font-size:13px; line-height:1.4; color:var(--grau) }
.ws-bestand--null dd{ color:var(--rot) }
.ws-schritte{ list-style:none; margin:0; padding:0; counter-reset:ws; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3) var(--s4) }
.ws-schritte li{ counter-increment:ws; border-top:1px solid var(--papier-3); padding-top:12px; font-size:15px; line-height:1.55; color:var(--tinte-2) }
.ws-schritte li::before{ content:counter(ws); display:block; margin-bottom:4px; font-family:var(--schrift-display); font-weight:900; font-size:1.3rem; color:var(--rot) }
.ws-schritte b{ color:var(--tinte) }
@media (max-width:760px){
  .ws-bestand{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ws-bestand div:nth-child(3){ padding-left:0; border-left:0 }
  .ws-bestand div:nth-child(n+3){ border-top:1px solid var(--papier-3) }
  .ws-schritte{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px){
  .ws-zeile{ grid-template-columns:minmax(0,1fr) auto; }
  .ws-zeile__entwurf{ grid-column:1 / -1; text-align:left }
  .ws-regal{ grid-template-columns:repeat(auto-fill,minmax(64px,1fr)) }
  .ws-band{ min-height:72px; padding:8px }
  .ws-band__b{ font-size:1.4rem }
  .ws-bestand dd{ font-size:1.5rem }
}

/* Lernweg: „Zur Reihe …" füllte sich beim Überfahren und Klicken mit der eigenen
   Schriftfarbe (.knopf:hover background:currentColor) und wurde zum schwarzen Block. */
.lw-stufe__knopf{ color:var(--rot); border-color:var(--rot) }
.lw-stufe__knopf:hover, .lw-stufe__knopf:active, .lw-stufe__knopf:focus-visible{ background:var(--rot); border-color:var(--rot); color:#fff }
.lw-stufe__knopf:focus-visible{ outline:2px solid var(--rot); outline-offset:3px }

/* ═══════════ Grammatik-Unterseite: Stufenleiter A1 bis C1 ═══════════
   Hallmark · macrostructure: Stufenleiter (Zeilen + Balken) · theme: POLKA (gesperrt)
   tone: editorial, sachlich · anchor hue: Rot #AE151B
   Jede Erklärung als Zeile: Thema links, Balken über den Stufen, Übung rechts. */
.gw-abschnitt{ padding-top:var(--s4); scroll-margin-top:calc(var(--kopf-hoehe) + 24px) }
.wz-rubrik__mehr{ margin:calc(var(--s1) * -1) 0 var(--s2); font-size:14px }
.wz-rubrik__mehr a{ color:var(--rot); font-weight:600; text-underline-offset:3px }
.gw-leiter{ --gw-spalten:minmax(0,1.25fr) minmax(0,1fr) 11rem; background:var(--weiss); border:1px solid var(--papier-3) }
.gw-leiter__skala{ display:grid; grid-template-columns:var(--gw-spalten); margin:0; padding:10px var(--s2) 8px;
  border-bottom:1px solid var(--papier-3); font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--grau) }
.gw-leiter__stufen{ grid-column:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) }
.gw-leiter__stufen span{ text-align:center }
.gw-leiter__liste{ list-style:none; margin:0; padding:0 }
.gw-zeile{ display:grid; grid-template-columns:var(--gw-spalten); align-items:center; gap:var(--s1) var(--s3);
  padding:14px var(--s2); border-top:1px solid var(--papier-3) }
.gw-zeile:first-child{ border-top:0 }
.gw-zeile__thema{ display:block; color:var(--tinte); text-decoration:none; min-width:0 }
.gw-zeile__thema b{ font-size:17px; font-weight:700 }
.gw-zeile__thema bdi{ font-family:var(--schrift-ku); font-size:17px; color:var(--rot); margin-left:6px }
.gw-zeile__thema > span{ display:block; margin-top:3px; font-size:14px; line-height:1.5; color:var(--tinte-2) }
.gw-zeile__thema > span bdi{ font-size:15px; color:var(--tinte); margin:0 }
.gw-zeile__thema:hover b{ color:var(--rot) }
.gw-zeile__thema:focus-visible, .gw-zeile__ueben:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.gw-zeile__stufe{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; margin:0; height:28px;
  background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--papier-3) calc(20% - 1px) 20%) }
.gw-zeile__balken{ grid-column:var(--von) / calc(var(--bis) + 1); grid-row:1; height:10px; background:var(--rot) }
.gw-zeile__text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.gw-zeile__ueben{ justify-self:end; font-size:14px; font-weight:600; color:var(--rot); white-space:nowrap; text-underline-offset:3px }
.gw-zeile__ueben:hover{ color:var(--rot-tief) }
@media (max-width:800px){
  .gw-leiter{ --gw-spalten:minmax(0,1fr) }
  .gw-leiter__skala{ padding:8px var(--s2) 6px }
  .gw-leiter__stufen{ grid-column:1 }
  .gw-zeile{ gap:8px; padding:14px var(--s2) 16px }
  .gw-zeile__ueben{ justify-self:start }
  .gw-zeile__text{ position:static; width:auto; height:auto; overflow:visible; clip:auto; grid-row:2; grid-column:1 / -1;
    font-size:12px; color:var(--grau) }
  .gw-zeile__stufe{ height:auto; row-gap:4px; background:none }
  .gw-zeile__balken{ height:8px; box-shadow:0 0 0 1px var(--rot) }
  .gw-zeile__stufe::before{ content:""; grid-row:1; grid-column:1 / -1; height:8px; background:var(--papier-2) }
}

/* ═══════════ Schrift und Aussprache: fünf Stationen ═══════════
   Hallmark · macrostructure: Stationen (nummerierte Spalten) · theme: POLKA (gesperrt) · anchor hue: Rot */
.sw-stationen{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--papier-3); background:var(--weiss) }
.sw-station{ padding:var(--s2) var(--s2) var(--s3); border-left:1px solid var(--papier-3); min-width:0 }
.sw-station:first-child{ border-left:0 }
.sw-station__kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:0 0 var(--s1);
  padding-bottom:var(--s1); border-bottom:3px solid var(--rot) }
.sw-station__nr{ font-family:var(--schrift-display); font-weight:900; font-size:2rem; line-height:1; color:var(--rot) }
.sw-station__ku{ font-family:var(--schrift-ku); font-size:1.35rem; line-height:1.3; color:var(--tinte) }
.sw-station__name{ margin:0; font-size:18px; font-weight:700 }
.sw-station__satz{ margin:2px 0 var(--s2); font-size:13px; color:var(--grau) }
.sw-station__liste{ list-style:none; margin:0; padding:0 }
.sw-station__liste li{ border-top:1px solid var(--papier-3) }
.sw-station__liste a{ display:flex; flex-direction:column; gap:2px; padding:10px 0; color:var(--tinte); text-decoration:none }
.sw-station__liste b{ font-size:15px }
.sw-station__liste span{ font-size:13.5px; line-height:1.45; color:var(--tinte-2) }
.sw-station__liste bdi{ font-family:var(--schrift-ku); font-size:15px; color:var(--tinte) }
.sw-station__liste a:hover b{ color:var(--rot); text-decoration:underline; text-underline-offset:3px }
.sw-station__liste a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
@media (max-width:1000px){
  .sw-stationen{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .sw-station{ border-left:0; border-top:1px solid var(--papier-3) }
  .sw-station:nth-child(even){ border-left:1px solid var(--papier-3) }
  .sw-station:first-child, .sw-station:nth-child(2){ border-top:0 }
}
@media (max-width:600px){
  .sw-stationen{ grid-template-columns:minmax(0,1fr) }
  .sw-station:nth-child(even){ border-left:0 }
  .sw-station:nth-child(2){ border-top:1px solid var(--papier-3) }
}

/* ═══════════ Wörterbücher: Register mit Punktlinie und Zahl ═══════════
   Hallmark · macrostructure: Register (Inhaltsverzeichnis) · theme: POLKA (gesperrt) */
.ww-register{ padding-top:var(--s4); display:grid; gap:var(--s5) }
.ww-gruppe{ scroll-margin-top:calc(var(--kopf-hoehe) + 24px) }
.ww-liste{ list-style:none; margin:0; padding:0; columns:2 380px; column-gap:var(--s5) }
.ww-liste li{ break-inside:avoid; border-bottom:1px solid var(--papier-3) }
.ww-eintrag{ display:block; padding:12px 0 10px; color:var(--tinte); text-decoration:none }
.ww-eintrag__zeile{ display:flex; align-items:baseline; gap:8px }
.ww-eintrag__zeile b{ font-size:16px; font-weight:700; min-width:0; overflow-wrap:anywhere }
.ww-eintrag__punkte{ flex:1; min-width:16px; border-bottom:2px dotted var(--papier-3); transform:translateY(-4px) }
.ww-eintrag__zahl{ flex:none; font-family:var(--schrift-display); font-weight:900; font-size:1.35rem; line-height:1;
  color:var(--rot); font-variant-numeric:lining-nums tabular-nums }
.ww-eintrag__zahl small{ font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--grau);
  font-family:system-ui,sans-serif; text-transform:uppercase }
.ww-eintrag__text{ display:block; margin-top:3px; font-size:14px; line-height:1.5; color:var(--tinte-2) }
.ww-eintrag__text bdi{ font-family:var(--schrift-ku); font-size:15px; color:var(--tinte) }
.ww-eintrag:hover b{ color:var(--rot) }
.ww-eintrag:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }

/* ═══════════ Wiederholen: Kreislauf ═══════════
   Hallmark · macrostructure: Kreislauf (Schrittfolge mit Rückpfeil) · theme: POLKA (gesperrt) */
.wk-kreis{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); counter-reset:wk }
.wk-schritt{ position:relative; display:flex; min-width:0 }
.wk-schritt:not(:last-child)::after{ content:"→"; position:absolute; right:calc(var(--s3) * -0.5); top:50%;
  transform:translate(50%,-50%); color:var(--rot); font-weight:700; font-size:20px }
.wk-schritt a{ flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--s2); background:var(--weiss);
  border:1px solid var(--papier-3); border-top:3px solid var(--rot); color:var(--tinte); text-decoration:none }
.wk-schritt__nr{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--rot) }
.wk-schritt b{ font-size:17px }
.wk-schritt a > span:last-child{ font-size:14px; line-height:1.5; color:var(--tinte-2) }
.wk-schritt a:hover{ box-shadow:inset 0 -3px 0 var(--rot); border-color:var(--rot) }
.wk-schritt a:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.wk-zurueck{ margin:var(--s2) 0 var(--s2); padding-top:var(--s1); border-top:2px dotted var(--papier-3); text-align:center;
  font-size:13px; color:var(--grau) }
@media (max-width:900px){
  .wk-kreis{ grid-template-columns:minmax(0,1fr); gap:var(--s3) }
  .wk-schritt:not(:last-child)::after{ content:"↓"; right:50%; top:auto; bottom:calc(var(--s3) * -0.5); transform:translate(50%,50%) }
}

/* ═══════════ Praxis: Vierfeld (Hören/Sprechen | Lesen/Schreiben) ═══════════
   Hallmark · macrostructure: Vierfeld · theme: POLKA (gesperrt) */
.pv-feld{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--weiss); border:1px solid var(--papier-3) }
.pv-feld__teil{ padding:var(--s2) var(--s3) var(--s3); min-width:0 }
.pv-feld__teil:nth-child(odd){ border-right:1px solid var(--papier-3) }
.pv-feld__teil:nth-child(n+3){ border-top:1px solid var(--papier-3) }
.pv-feld__name{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 var(--s1);
  padding-bottom:var(--s1); border-bottom:3px solid var(--rot); font-family:var(--schrift-display); font-weight:900; font-size:1.6rem }
.pv-feld__name bdi{ font-family:var(--schrift-ku); font-weight:400; font-size:1.5rem; color:var(--rot) }
@media (max-width:700px){
  .pv-feld{ grid-template-columns:minmax(0,1fr) }
  .pv-feld__teil:nth-child(odd){ border-right:0 }
  .pv-feld__teil:nth-child(n+2){ border-top:1px solid var(--papier-3) }
  .pv-feld__teil{ padding:var(--s2) }
}

/* ═══════════ Alltag: drei Mappen mit Kennzahl ═══════════
   Hallmark · macrostructure: Mappen (drei hohe Tafeln) · theme: POLKA (gesperrt) */
.am-mappen{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3) }
.am-mappen li{ display:flex; min-width:0 }
.am-mappe{ flex:1; display:flex; flex-direction:column; gap:10px; padding:var(--s3); min-height:260px; background:var(--weiss);
  border:1px solid var(--papier-3); color:var(--tinte); text-decoration:none }
.am-mappe__zahl{ font-family:var(--schrift-display); font-weight:900; font-size:clamp(2rem,4vw,2.8rem); line-height:1; color:var(--rot) }
.am-mappe b{ font-size:19px }
.am-mappe__text{ font-size:14.5px; line-height:1.55; color:var(--tinte-2) }
.am-mappe__los{ margin-top:auto; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rot) }
.am-mappe:hover{ border-color:var(--rot); box-shadow:inset 0 -4px 0 var(--rot) }
.am-mappe:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
@media (max-width:800px){ .am-mappen{ grid-template-columns:minmax(0,1fr) } .am-mappe{ min-height:0 } }

/* ═══════════ Spiele: Spieltisch nach Spielart ═══════════
   Hallmark · macrostructure: Spieltisch (Kacheln mit Spielart-Kopf) · theme: POLKA (gesperrt) */
.sp-tisch{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:0; border-top:1px solid var(--tinte); border-left:1px solid var(--papier-3) }
.sp-tisch li{ display:flex; min-width:0; border-right:1px solid var(--papier-3); border-bottom:1px solid var(--papier-3) }
.sp-spiel{ flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--s3) var(--s2); background:var(--weiss);
  color:var(--tinte); text-decoration:none }
.sp-spiel__art{ font-family:var(--schrift-display); font-weight:900; font-size:1.45rem; line-height:1.1; color:var(--rot);
  overflow-wrap:anywhere }
.sp-spiel b{ font-size:16px }
.sp-spiel__text{ font-size:14px; line-height:1.5; color:var(--tinte-2) }
.sp-spiel:hover{ background:var(--papier) }
.sp-spiel:hover b{ color:var(--rot) }
.sp-spiel:focus-visible{ outline:3px solid var(--rot); outline-offset:-3px }

/* ═══════════ Dialekte: Vergleichsstreifen ═══════════
   Hallmark · macrostructure: Vergleichsstreifen + Liste · theme: POLKA (gesperrt) */
.dv-huelle{ overflow-x:auto }
.dv-streifen{ display:table !important; table-layout:fixed; width:100% !important; max-width:none !important; border-collapse:collapse; background:var(--weiss); border:1px solid var(--papier-3) }
.dv-streifen th, .dv-streifen td{ padding:14px var(--s2); border-top:1px solid var(--papier-3); text-align:center }
.dv-streifen thead th{ border-top:0; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--grau) }
.dv-streifen tbody th{ text-align:left; font-weight:700; font-size:15px }
.dv-streifen td{ font-size:1.35rem }
.dv-streifen td bdi{ font-family:var(--schrift-ku); font-size:1.45rem }
.dv-streifen td span{ font-family:var(--schrift-display); font-weight:700 }
@media (max-width:560px){ .dv-streifen th, .dv-streifen td{ padding:10px 2px; overflow-wrap:anywhere } .dv-streifen thead th{ font-size:9px; letter-spacing:.02em }
  .dv-streifen tbody th{ font-size:12px; padding-left:8px } .dv-streifen td{ font-size:.95rem } .dv-streifen td bdi{ font-size:1.05rem } }

/* ═══════════ Kultur: Monatsleiste + Feuilleton-Ressorts ═══════════
   Hallmark · macrostructure: Feuilleton (Ressorts in Spalten) + Monatsleiste · theme: POLKA (gesperrt) */
.km-leiste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  border-top:3px solid var(--rot); border-bottom:1px solid var(--papier-3); background:var(--weiss) }
.km-leiste li{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 4px; border-left:1px solid var(--papier-3); min-width:0 }
.km-leiste li:last-child{ border-left:0 }
.km-leiste bdi{ font-family:var(--schrift-ku); font-size:1.05rem; line-height:1.5; color:var(--tinte); white-space:nowrap }
.km-leiste li:first-child bdi{ color:var(--rot); font-weight:700 }
.km-leiste small{ direction:ltr; font-size:11px; color:var(--grau); font-variant-numeric:tabular-nums }
@media (max-width:1000px){ .km-leiste{ grid-template-columns:repeat(6,minmax(0,1fr)) } .km-leiste li:nth-child(6){ border-left:0 }
  .km-leiste li:nth-child(n+7){ border-top:1px solid var(--papier-3) } }
@media (max-width:520px){ .km-leiste{ grid-template-columns:repeat(3,minmax(0,1fr)) } .km-leiste li{ border-left:1px solid var(--papier-3) !important }
  .km-leiste li:nth-child(3n){ border-left:0 !important } .km-leiste li:nth-child(n+4){ border-top:1px solid var(--papier-3) } }
.kf-ressorts{ columns:3 300px; column-gap:var(--s4) }
.kf-ressort{ break-inside:avoid; margin:0 0 var(--s4) }
.kf-ressort__name{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 4px;
  padding-bottom:6px; border-bottom:1px solid var(--tinte); font-family:var(--schrift-display); font-weight:900; font-size:1.7rem; line-height:1.15 }
.kf-ressort__name bdi{ font-family:var(--schrift-ku); font-weight:400; font-size:1.3rem; color:var(--rot) }

/* ═══════════ Unterricht: zwei Türen ═══════════
   Hallmark · macrostructure: Zwei Türen (geteilte Fläche) · theme: POLKA (gesperrt) */
.zt-tueren{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) }
.zt-tuer{ padding:var(--s4) var(--s4) var(--s3); background:var(--weiss); border:1px solid var(--papier-3) }
.zt-tuer + .zt-tuer{ border-left:0; background:var(--rot); color:#fff; border-color:var(--rot) }
.zt-tuer__name{ margin:0; font-family:var(--schrift-display); font-weight:900; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.05; overflow-wrap:anywhere }
.zt-tuer__ku{ margin:6px 0 0; font-family:var(--schrift-ku); font-size:1.3rem; color:var(--rot) }
.zt-tuer__satz{ margin:4px 0 var(--s3); font-size:14px; color:var(--grau) }
.zt-tuer + .zt-tuer .zt-tuer__ku, .zt-tuer + .zt-tuer .zt-tuer__satz{ color:#fff }
.zt-tuer + .zt-tuer .sw-station__liste li{ border-top-color:rgba(255,255,255,.35) }
.zt-tuer + .zt-tuer .sw-station__liste a, .zt-tuer + .zt-tuer .sw-station__liste span{ color:#fff }
.zt-tuer + .zt-tuer .sw-station__liste a:hover b{ color:#fff }
.zt-tuer + .zt-tuer .sw-station__liste a:focus-visible{ outline-color:#fff }
@media (max-width:760px){ .zt-tueren{ grid-template-columns:minmax(0,1fr) } .zt-tuer{ padding:var(--s3) var(--s2) }
  .zt-tuer + .zt-tuer{ border-left:1px solid var(--rot); border-top:0 } }
.zt-tuer + .zt-tuer bdi{ color:#fff }
.km-leiste + .wz-rubrik__mehr{ margin-top:var(--s2) }

/* Wörterbuch: Vorlesen nur Kurdisch, in der aufgeklappten Erklärung (12.10.2026) */
.wb-vl-zeile{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:var(--s2); padding-top:12px; border-top:1px solid var(--papier-3) }
.wb-vl-etikett{ font-family:var(--schrift-ui); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grau) }
.wb-vl-gruppe{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.wb-vl-was{ font-size:.85rem; font-weight:600; color:var(--tinte); margin-inline-end:2px }
.wb-vl-zeile button{ border:1px solid var(--papier-3); background:transparent; color:var(--tinte); font:600 .8rem/1.2 var(--schrift-ui); padding:6px 10px; min-height:34px; white-space:nowrap; cursor:pointer; border-radius:0 }
.wb-vl-zeile button:hover{ border-color:var(--tinte) }
.wb-vl-zeile button:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.wb-vl-zeile .wb-vl[aria-pressed="true"]{ background:var(--tinte); color:var(--papier); border-color:var(--tinte) }
.wb-vl-zeile .wb-vl-stopp{ color:var(--rot); border-color:var(--rot) }
.wb-vl-zeile .wb-vl-stopp[hidden]{ display:none }
.wb-liest{ background:color-mix(in srgb, var(--rot) 8%, transparent) }
.wb-vl-hinweis{ margin:8px 0 0; font-size:.82rem; line-height:1.45; color:var(--grau) }
.wb-erklaerung > .wb-vl-zeile, .wb-erklaerung > .wb-vl-hinweis{ grid-column:1 / -1 }

/* Lernweg: Kurdisch vorlesen (12.10.2026), Knöpfe neben den Links, nie darin */
.lw-vl-wahl{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:var(--s3) 0 var(--s2) }
.lw-vl-etikett{ font-family:var(--schrift-ui); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); margin-inline-end:4px }
.lw-vl-wahl button, .lw-vl{ border:1px solid var(--papier-3); background:var(--weiss); color:var(--tinte); font:600 .8rem/1.2 var(--schrift-ui); padding:6px 11px; min-height:34px; white-space:nowrap; cursor:pointer; border-radius:0 }
.lw-vl-wahl button[aria-pressed="true"]{ background:var(--tinte); border-color:var(--tinte); color:var(--papier) }
.lw-vl-wahl button:hover, .lw-vl:hover{ border-color:var(--tinte) }
.lw-vl-wahl button:focus-visible, .lw-vl:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.lw-vl[aria-pressed="true"]{ color:var(--rot); border-color:var(--rot) }
.lw-vl:disabled{ color:var(--grau); cursor:default }
.lw-vl-hinweis{ flex-basis:100%; margin:2px 0 0; font-size:.82rem; color:var(--grau) }
.lw-vl--reihe{ grid-column:1; justify-self:start; margin-top:var(--s1) }
.lw-module li{ position:relative }
.lw-vl--modul{ position:absolute; top:calc(var(--s2) - 6px); right:calc(var(--s2) - 6px); min-height:30px; padding:4px 9px; font-size:.75rem }
.lw-modul__nr{ padding-right:84px }

/* Übungen: Kurdisch vorlesen (12.10.2026), nutzt lw-vorlesen.js und die Knopfstile des Lernwegs */
.ub-kopf .lw-vl--reihe{ margin:0; min-height:30px; padding:4px 9px; font-size:.75rem }
.ub-module li .lw-vl--modul{ position:static; flex:none; min-height:30px; padding:4px 9px; font-size:.75rem }
.ub-stufen > .lw-vl-wahl{ margin:0 0 var(--s3) }

/* ═══════════ Bandseiten buch-*.html (25.10.2026) ═══════════
   Hallmark · macrostructure: Long Document · tone: editorial, wissenschaftlich · anchor hue: Rot der Akademie
   Gleiche Ordnung wie das Bandverzeichnis: Kennzahlen als Datenzeile, ein Hauptknopf,
   Kapitelnummer klein über dem Titel, Tabellen und Quiz mit Haarlinien statt Flächen.
   Überschreibt die älteren .polka-buchseite-Regeln aus polka.css (gleiche Spezifität, spätere Datei). */
.polka-buchseite .bk-daten{ display:grid; grid-template-columns:repeat(4,max-content); margin:var(--s3) 0 var(--s2);
  border-top:1px solid var(--tinte); border-bottom:1px solid var(--papier-3) }
.polka-buchseite .bk-daten > div{ padding:12px var(--s4) 12px 0; margin-right:var(--s3); border-right:1px solid var(--papier-3) }
.polka-buchseite .bk-daten > div:last-child{ border-right:0; margin-right:0 }
.polka-buchseite .bk-daten dt{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--grau) }
.polka-buchseite .bk-daten dd{ margin:4px 0 0; font-family:var(--schrift-display); font-size:1.3rem; line-height:1.2; color:var(--tinte);
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap }
@media (max-width:640px){
  .polka-buchseite .bk-daten{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .polka-buchseite .bk-daten > div{ margin-right:0; padding-right:var(--s2) }
  .polka-buchseite .bk-daten > div:nth-child(2n){ border-right:0; padding-left:var(--s2) }
  .polka-buchseite .bk-daten > div:nth-child(n+3){ border-top:1px solid var(--papier-3) }
}
.polka-buchseite .toolkit{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3) }
.polka-buchseite .tk.tk--leise{ background:none; border:0; padding:0; min-height:44px; font-weight:600; font-size:.92rem; color:var(--tinte-2);
  text-decoration:underline; text-decoration-color:var(--papier-3); text-underline-offset:5px; text-decoration-thickness:1px; white-space:nowrap }
.polka-buchseite .tk.tk--leise:hover{ color:var(--rot); text-decoration-color:var(--rot) }
.polka-buchseite .tk.tk--leise:active{ color:var(--rot-tief) }
.polka-buchseite .tk:focus-visible{ outline:3px solid var(--rot); outline-offset:3px }
.polka-buchseite .tk.primary{ white-space:nowrap }
.polka-buchseite .ch-h{ gap:var(--s2) }
.polka-buchseite .ch-kopf{ display:grid; gap:6px; min-width:0 }
.polka-buchseite .ch-nr{ font-family:var(--schrift-ui); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rot) }
.polka-buchseite .ch-t{ overflow-wrap:anywhere }
.polka-buchseite .ch-nav a{ display:grid; grid-template-columns:2.4em minmax(0,1fr); align-items:baseline }
.polka-buchseite .ch-nav a:not(:has(.nav-nr)){ display:block }
.polka-buchseite .nav-nr{ font-size:12px; font-weight:700; color:var(--grau); font-variant-numeric:lining-nums }
.polka-buchseite .ch-nav a:hover .nav-nr, .polka-buchseite .ch-nav a.active .nav-nr{ color:var(--rot) }
.polka-buchseite .ztbl{ background:none; border:0; border-top:1px solid var(--tinte); border-bottom:1px solid var(--tinte); border-radius:0 }
.polka-buchseite .ztbl th{ background:none; color:var(--tinte); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--tinte) }
.polka-buchseite .ztbl td{ border-top:1px solid var(--papier-3) }
.polka-buchseite .ztbl tr:nth-child(even) td{ background:none }
.polka-buchseite .ztbl td.num-de, .polka-buchseite .ztbl td.ku{ color:var(--tinte) }
.polka-buchseite .note-mini{ font-style:normal; color:var(--tinte-2) }
.polka-buchseite .quiz{ background:none; border:0; border-top:2px solid var(--tinte); border-radius:0; padding:var(--s3) 0 0; margin:var(--s5) 0 var(--s3) }
.polka-buchseite .quiz h3{ font-family:var(--schrift-display); font-weight:800; font-size:1.5rem; color:var(--tinte) }
.polka-buchseite .qopt{ background:var(--weiss); border-color:var(--papier-3); min-height:44px; color:var(--tinte) }
.polka-buchseite .qopt:hover{ border-color:var(--tinte) }
.polka-buchseite .qopt:focus-visible{ outline:3px solid var(--rot); outline-offset:2px }
.polka-buchseite .qopt.right{ border-color:var(--tinte); background:var(--papier-2); box-shadow:inset 3px 0 0 var(--tinte) }
.polka-buchseite .qopt.wrong{ border-color:var(--rot); background:var(--weiss); color:var(--rot) }
.polka-buchseite .qfb{ background:none; border-radius:0; border-left:2px solid var(--rot); padding:4px 0 4px 12px; color:var(--tinte-2) }
.polka-buchseite #quizScore{ color:var(--tinte) }
.polka-buchseite #readbar{ background:var(--rot) }