/* ============================================================
   polyDesign — sect/  (Sections: komponierte col-Bausteine)
   Baut auf tokens.css + elem.css + mod.css + comp.css + col.css auf.
   Sections setzen col-Bausteine zusammen und regeln den Reflow
   pro Breakpoint (Desktop 240px-Seitenspalte; Tablet/Mobile ohne).
   Linien: Sections sind überwiegend [container] — die Zellen behalten
   ihren Rahmen, benachbarte überlappen -1px (lines-h/-v); der
   Section-Container zeichnet keinen eigenen Rahmen. Siehe
   linien-register.md.
   ============================================================ */

/* ---------- Seite: Sections stapeln (−1px-Naht) -------------
   Gestapelte Sections teilen ihre angrenzenden Kanten: jede Section
   ab der zweiten überlappt die vorige um −1px, sonst 2px-Doppellinie.
   Wrapper .poly-page um die Section-Folge (Konfigurator + build.py).
------------------------------------------------------------- */
.poly-page > * + *{ margin-top:calc(-1 * var(--linewidth)); }

/* ---------- Klebende Kapitel-Sections -----------------------
   Eine Section mit dem Schalter „klebt oben" bleibt beim Scrollen unter der
   Kopf-Bar stehen, bis die nächste klebende Section sie hinausschiebt.

   Dass das ohne ein einziges Skript geht, hängt an der Hülle: `position:sticky`
   klebt nur, solange der ELTERNBLOCK sichtbar ist. Deshalb fasst der Bau eine
   klebende Section mit allem zusammen, was unter ihr steht (`.sect-kapitel`,
   s. build.py.seiten_rumpf) — dann endet der Elternblock genau dort, wo das
   nächste Kapitel beginnt. Ohne Hülle bliebe die erste Zeile bis zum
   Seitenende stehen und die nächste legte sich nur darüber; gemessen: flach
   bleibt A bei top=60, mit Hülle geht A auf -120 und wird hinausgeschoben.

   Die Hülle ist sonst NICHTS: kein Rahmen, kein Abstand, keine eigene Fläche.
   Sie muss nur die −1px-Naht weiterreichen, die zwischen Sections gilt —
   zwischen den Hüllen macht das die Regel darüber, innerhalb diese hier.

   `top` ist die Nav-Höhe OHNE Abzug: die Section schiebt sich damit ein, zwei
   Pixel unter die Kopf-Bar (die liegt mit z-index 100 darüber). Genau so soll
   es sein — überlappen statt eine Lücke lassen, wie bei jeder anderen Naht.
------------------------------------------------------------- */
.sect-kapitel > * + *{ margin-top:calc(-1 * var(--linewidth)); }
.sect-grid--klebt{
  position:sticky; top:var(--nav-h); z-index:60;
  /* Eigene Fläche: sonst scrollt der Inhalt darunter durch die Zell-Zwischen-
     räume. `--surface` und nicht poly-beige, damit ein Theme an der Section
     (dark/green/…) auch für die klebende Zeile gilt. */
  background:var(--surface);
}
@media (max-width:480px){ .sect-grid--klebt{ top:var(--nav-h-mobile); } }

/* ---------- sect/polylogo-nav-horizontal --------------------
   Figma 2029:503 — Kopf-Bar in Nav-Höhe: Logo-Zelle (links) +
   col/nav-horizontal (rechts). [container] mit lines-h: Logo und
   nav-horizontal behalten ihren Rahmen, die gemeinsame Kante wird
   -1px überlappt (eine Naht); der Container hat keinen eigenen
   Rahmen. Höhe = nav-h (120) / Mobile nav-h-mobile (60); das Logo
   bringt seine Breakpoints selbst mit (240x120 -> 120x60), die
   nav-horizontal ebenfalls (Burger ab Tablet, Bar 120->60).
   Sticky + Fullscreen-Burger-Overlay folgen auf Page-/sect-Ebene.
------------------------------------------------------------- */
.sect-polylogo-nav-horizontal{
  display:flex; align-items:stretch;   /* Zellen gleich hoch */
  /* Kopf-Bar bleibt in allen Breakpoints oben kleben. Beiger Hintergrund,
     damit der durchlaufende Inhalt hinter den transparenten Zell-Flächen
     (Ticker) sauber verdeckt wird. */
  position:sticky; top:0; z-index:100;
  background:var(--poly-beige);
}
/* lines-h-Naht statt eigenem Container-Rahmen */
.sect-polylogo-nav-horizontal > * + *{
  margin-left:calc(-1 * var(--linewidth));
}
/* Logo-Zelle: eigener Rahmen (bildet den linken Frame-Teil), hugt
   das Logo; Höhe kommt aus dem Row-Stretch (= Bar-Höhe). */
.sect-polylogo-nav-horizontal__logo{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:var(--linewidth) solid var(--poly-line);
  line-height:0;                 /* kein Inline-Whitespace unter dem Bild */
}
.sect-polylogo-nav-horizontal__logo img{ display:block; }
/* nav-horizontal füllt den Rest der Bar */
.sect-polylogo-nav-horizontal > .col-nav-horizontal{ flex:1 1 0; min-width:0; }

/* ---------- Generischer Section-Motor -----------------------
   Basis für den Werkbank-Composer und die benannten Presets.
   Muster: [side 240] + [main-stack]. Zellen bündig (kein Gutter),
   Linien = −1px-Nähte; der Grid-Container zeichnet keinen eigenen
   Rahmen. Die Side-Col streckt auf die Section-Höhe.
   Reflow: ab Tablet (≤960) fällt die 240er-Spalte weg → alles voll
   breit gestapelt; die hinterlegte Side-Reflow-Variante
   (`__side-reflow`, z.B. …-tablet-mobile-horizontal) rutscht oben
   in den Stack. (Ausgeblendete Zellen sind 0-breit/-hoch, deshalb
   greifen die −1px-Nähte über sie hinweg korrekt.)
------------------------------------------------------------- */
.sect-grid{ display:flex; align-items:stretch; }
.sect-grid > * + *{ margin-left:calc(-1 * var(--linewidth)); }   /* side|main-Naht */
.sect-grid__side{
  flex:0 0 var(--grid-side);
  display:flex; flex-direction:column; align-items:stretch;
}
.sect-grid__side > *{ flex:1 1 auto; }        /* Side-Col füllt die Section-Höhe (ohne height:100%) */
.sect-grid__side-reflow{ display:none; }       /* nur Tablet/Mobile */
.sect-grid__main{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:stretch;
}
.sect-grid__main > * + *{ margin-top:calc(-1 * var(--linewidth)); }   /* Stack-Nähte */
@media (max-width:960px){
  .sect-grid{ flex-direction:column; align-items:stretch; }
  .sect-grid > * + *{ margin-left:0; margin-top:calc(-1 * var(--linewidth)); }
  .sect-grid__side{ display:none; }            /* Desktop-Side weg */
  .sect-grid__side-reflow{ display:block; }     /* Reflow-Variante in den Stack */
  /* Das erste sichtbare Element NACH der (versteckten) Desktop-Side darf nicht
     um −1px hochgezogen werden — sonst steht seine Oberkante 1px über der
     Section und ergibt an der poly-page-Naht eine 2px-Doppellinie. Footer
     ausgenommen (dort bleibt die Side sichtbar). */
  .sect-grid:not(.sect-grid--footer) > .sect-grid__side + *{ margin-top:0; }
}
/* Ausnahme (z.B. kapitel): Side bleibt auf Tablet gehugt, erst Mobile stapelt.
   Modifier .sect-grid--tablethug. Die Side-Col hugt über ihre eigene ≤960-Regel
   (width:fit-content); erst ≤480 greift die Basis (Side weg, die Modul-Mobile-
   Variante trägt dann z.B. die Kapitelnummer). Steht nach der Basis → gewinnt im
   Tablet-Band; ≤480 ist ausgeschlossen (min-width:481). */
@media (min-width:481px) and (max-width:960px){
  .sect-grid--tablethug{ flex-direction:row; align-items:stretch; }
  .sect-grid--tablethug > * + *{ margin-left:calc(-1 * var(--linewidth)); margin-top:0; }
  .sect-grid--tablethug > .sect-grid__side{ display:flex; flex:0 0 auto; }
  .sect-grid--tablethug > .sect-grid__side-reflow{ display:none; }
}
/* Footer-Ausnahme: Side (Logo + Links) bleibt auf Tablet (240, row). Mobile:
   Side voll breit oben (Logo fullwidth + Links darunter), dann Main — kein
   Wegfall. Tablet-Band = Row + Side sichtbar; ≤480 = Stapel (Basis) + Side
   sichtbar in natürlicher Höhe. */
@media (min-width:481px) and (max-width:960px){
  .sect-grid--footer{ flex-direction:row; align-items:stretch; }
  .sect-grid--footer > * + *{ margin-left:calc(-1 * var(--linewidth)); margin-top:0; }
  .sect-grid--footer > .sect-grid__side{ display:flex; }
  .sect-grid--footer > .sect-grid__side-reflow{ display:none; }
}
@media (max-width:480px){
  .sect-grid--footer > .sect-grid__side{ display:flex; flex:0 0 auto; }
  .sect-grid--footer > .sect-grid__side-reflow{ display:none; }
  /* Füll-Rahmen (nur für die Desktop-Seitenspalte) auf Mobile weg — sonst
     2px-Artefakt (0-hoher Kasten mit Rahmen) zwischen Links und Main. */
  .sect-grid--footer .col-side-polylogo-nav-vertikal__filler{ display:none; }
  /* Ausnahme: das Logo wird im Footer auf Mobile full-width (statt 120px). */
  .sect-grid--footer .col-polymono{ width:100%; }
}

/* ---------- Modus kaplinks (col/side-kapitel+links) --------------
   Wie kapitel: die ZAHL bleibt ab Tablet als kompakte Side-Spalte „in der
   Zeile" neben dem Eintrag; die LINKS rutschen (wie side-links) volle Breite
   UNTER den Eintrag (der Reflow trägt nur die Links). Mobile (≤480): Zahl-Side
   ganz weg (Basis-Regel greift), nur die Links unter dem Eintrag. */
@media (min-width:481px) and (max-width:960px){
  .sect-grid--kaplinks{ flex-flow:row wrap; align-items:stretch; }   /* Zahl-Side auf Zeilenhöhe → Füll-Rahmen füllt darunter */
  .sect-grid--kaplinks > .sect-grid__side{ display:flex; flex:0 0 auto; }
  .sect-grid--kaplinks > .sect-grid__side + *{ margin-left:calc(-1 * var(--linewidth)); margin-top:0; }   /* Zahl|Main-Naht */
  .sect-grid--kaplinks > .sect-grid__side-reflow{ display:block; flex:1 0 100%; margin-left:0; margin-top:calc(-1 * var(--linewidth)); }   /* Links volle Breite unter der Zeile */
  /* Links raus (liegen jetzt unten). Damit hat auch der Füll-Rahmen im
     Tablet-Band keine Aufgabe mehr — statt seiner streckt sich die ZAHL auf die
     Zeilenhöhe (wie col/side-kapitel-num im Modus tablethug).
     Grund: leer kollabiert der Füll-Rahmen nicht auf 0, sondern auf seine beiden
     Rahmen (2px, minus 1px Naht = 1px) → die Side wurde 1px höher als die grüne
     Fläche, sichtbar als Doppellinie unter einzeiligen Kapitelköpfen. Bei
     mehrzeiligen Köpfen blieb die grüne Fläche zahlhoch und der Rest darunter
     beige. Beides erledigt sich mit der gestreckten Zahl. */
  .sect-grid--kaplinks .col-side-kapitel-links__links{ display:none; }
  .sect-grid--kaplinks .col-side-kapitel-links__filler{ display:none; }
  .sect-grid--kaplinks .col-side-kapitel-links__num{ flex:1 1 auto; }
}

/* ---------- Kapitel-Sonderrolle in col/einträge (nur Tablet) -----
   Auf regulären Seiten steht der Kapitel-Kopf in einer EIGENEN Section: die
   gehugte Zahl-Side ist deshalb nur so hoch wie der Kopf, die nachfolgende
   Section läuft voll breit. Ein Eintrag ist dagegen EINE .sect-grid — ohne
   Zutun liefe die Zahl-Spalte (samt Füll-Rahmen) über die ganze Eintragshöhe.
   Lösung im Tablet-Band: der Main wird aufgelöst (display:contents), seine
   Bausteine werden direkt zu Flex-Items des Grids. Der ERSTE Baustein (der
   Kapitel-Kopf) bildet mit der Zahl-Side die Kopfzeile, alle weiteren brechen
   auf volle Breite darunter um. Der Füll-Rahmen unter der Zahl bleibt und füllt
   den Rest der Kopfzeile — exakt wie in der regulären Section.
   Gilt nur für Einträge — reguläre Sections bleiben unverändert, dort löst man
   dasselbe durch eine eigene Section für den Kapitel-Kopf.
   Desktop (>960) und Mobile (≤480) sind ausgenommen: dort greift die
   Basis-/Desktop-Regel wie bisher.
------------------------------------------------------------------ */
@media (min-width:481px) and (max-width:960px){
  .sect-grid--tablethug.col-entries__entry,
  .sect-grid--kaplinks.col-entries__entry{ flex-flow:row wrap; }
  .sect-grid--tablethug.col-entries__entry > .sect-grid__main,
  .sect-grid--kaplinks.col-entries__entry > .sect-grid__main{ display:contents; }
  /* Kopfzeile: erster Baustein neben der Zahl (Naht −1px, da der Main selbst
     keine Margins mehr trägt) */
  .sect-grid--tablethug.col-entries__entry > .sect-grid__main > :first-child,
  .sect-grid--kaplinks.col-entries__entry > .sect-grid__main > :first-child{
    flex:1 1 0; min-width:0;
    margin-left:calc(-1 * var(--linewidth)); margin-top:0;
  }
  /* alles danach volle Breite unter der Kopfzeile */
  .sect-grid--tablethug.col-entries__entry > .sect-grid__main > * + *,
  .sect-grid--kaplinks.col-entries__entry > .sect-grid__main > * + *{
    flex:1 0 100%; min-width:0;
    margin-left:0; margin-top:calc(-1 * var(--linewidth));
  }
}

/* ---------- Header-Modus: nie stapeln (Logo + Nav in einer Zeile) ----
   Für die Kopf-Bar: die Logo-Side hugt auf ihre Breite (240 → Mobile 120),
   die Nav füllt den Rest. Über ALLE Breakpoints eine Reihe (kein Umbruch
   auf Mobile). Mit `--snap` rastet die Nav auf die Logo-Höhe ein.
------------------------------------------------------------- */
/* Kopf-Bar (Logo + Nav) bleibt in ALLEN Breakpoints oben kleben. Theme-
   abhängiger Hintergrund (var(--surface)) verdeckt den durchlaufenden Inhalt
   hinter den transparenten Zell-Flächen (Nav-Menü/Ticker). */
.sect-grid--headbar{ position:sticky; top:0; z-index:100; background:var(--surface); }
/* Sprungmarken (Anker an einer Section, s. build.py._assemble_section):
   weich hinscrollen statt zu springen, und um die klebende Kopfleiste herum —
   sonst verschwindet der Anfang der Ziel-Section darunter. Die Höhe der Leiste
   ist --nav-h plus ihre beiden Linien. Bei „Bewegung reduzieren" springt es
   wieder hart, das ist dort ausdrücklich gewollt. */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
.sect-grid[id]{ scroll-margin-top:calc(var(--nav-h) + 2 * var(--linewidth)); }
@media (max-width:480px){
  .sect-grid[id]{ scroll-margin-top:calc(var(--nav-h-mobile) + 2 * var(--linewidth)); }
}
.sect-grid--headbar > .sect-grid__side{ flex:0 0 var(--grid-side); min-width:0; }   /* Desktop: exakt --grid-side (240), fluchtet mit den Sections darunter */
@media (max-width:960px){
  .sect-grid--headbar{ flex-direction:row; align-items:stretch; }
  .sect-grid--headbar > * + *{ margin-left:calc(-1 * var(--linewidth)); margin-top:0; }
  .sect-grid--headbar > .sect-grid__side{ display:flex; flex:0 0 auto; }
  .sect-grid--headbar > .sect-grid__side-reflow{ display:none; }
}

/* ---------- Modul-Mobile-Umschaltung ------------------------
   Manche Main-Bausteine haben eine eigene Mobile-Variante (z.B.
   col/kapitel-headline → col/kapitel-headline-mobile). Beide Fassungen
   liegen im Markup, umgeschaltet bei ≤480. Der Wrapper ist ein
   Stack-Kind → die −1px-Nähte greifen wie bei jedem Block.
------------------------------------------------------------- */
.sect-mswap > .sect-mswap__narrow{ display:none; }
@media (max-width:480px){
  .sect-mswap > .sect-mswap__wide{ display:none; }
  .sect-mswap > .sect-mswap__narrow{ display:block; }
}

/* ---------- An Logo-Höhe einrasten (nur col/polymono-Side) --
   Das Logo ist fix (2:1, variiert nicht) → es gibt die Section-Höhe
   vor, das Nachbar-Modul rastet ein: es füllt die Höhe, seine inneren
   Elemente verteilen sich gleichmäßig (Buttons/Nav-Items werden dabei
   z.B. 59 statt 60). Greift für col/grid und col/nav-horizontal, nur
   Desktop/Tablet (side-by-side); auf Mobile (gestapelt) normal.
   Mechanik: innere Fixhöhen → auto (Modul-Eigenhöhe wird klein, das
   Logo gewinnt), Modul flex:1 füllt die Section-Höhe, Zeilen 1fr. -- */
@media (min-width:481px){
  .sect-grid--snap .col-grid{ flex:1 1 auto; }
  .sect-grid--snap .col-grid .btn--big{ height:auto; }
  .sect-grid--snap .col-nav-horizontal,
  .sect-grid--snap .col-nav-close{ flex:1 1 auto; height:auto; }
  .sect-grid--snap .col-nav-horizontal .nav-item--h{ height:auto; }
}

/* ---------- sect/kapitel ------------------------------------
   Figma 2035:240 — Kapitel-Kopf: col/side-kapitel-num (grün) +
   col/kapitel-headline nebeneinander. [container] mit lines-h
   (eine Naht, kein eigener Rahmen). side-kapitel-num streckt auf
   die Reihenhöhe (align-items:stretch).
   Reflow (Section besitzt die Spaltenbreite pro Breakpoint):
   - Desktop (>960):  Grün 240px + Headline.
   - Tablet (481-960): Grün hugt auf Zahlbreite + Headline.
   - Mobile (<=480):   Umschaltung auf col/kapitel-headline-mobile
                       (grüner Kopf mit Nummer + H1, Body-Kasten).
------------------------------------------------------------- */
.sect-kapitel__wide{
  display:flex; align-items:stretch;
}
.sect-kapitel__wide > * + *{ margin-left:calc(-1 * var(--linewidth)); }
/* Desktop: grüne Nummer = feste Seitenspalte (240) */
.sect-kapitel__wide > .col-side-kapitel-num{ flex:0 0 auto; width:var(--grid-side); }
/* Headline füllt den Rest */
.sect-kapitel__wide > .col-kapitel-headline{ flex:1 1 0; min-width:0; }
/* Tablet: grüne Nummer hugt auf Zahlbreite (Section-Reflow) */
@media (max-width:960px){
  .sect-kapitel__wide > .col-side-kapitel-num{ width:fit-content; }
}
/* Mobile-Variante: standardmäßig versteckt, ab Mobile eingeblendet */
.sect-kapitel__narrow{ display:none; }
@media (max-width:480px){
  .sect-kapitel__wide{ display:none; }
  .sect-kapitel__narrow{ display:block; }
}