/*
 * Vendored copy of the NETZLICHT layout primitives (7 classes).
 * Source: web-modules/build_utils/layout-primitives.css (web-modules @ 02f62c5, 2026-07-07).
 * NO dual-push: change upstream first, then re-copy here.
 */
/* ============================================================
   NETZLICHT Layout-Primitives  (web-modules/build_utils/layout-primitives.css)
   ============================================================
   Sieben fundamentale Layout-Klassen die JEDES Layout abdecken,
   ohne Section-Template-Korsett. Pattern aus dem "Every Layout"-
   Buch von Heydon Pickering, adaptiert auf NETZLICHT-Tokens.

   Designerin denkt in diesen Begriffen (Figma-Components heissen
   gleich), Devs codieren in diesen Klassen, Greenshift-Blocks
   (Phase 2 des build-process-modernization) werden 1:1 dazu
   gebaut.

   Nutzt die --space-*-Skala aus tokens.json (auto-injected via
   tokens_to_css.py). Wenn ein Primitive einen eigenen Gap/Pad
   braucht, ueber CSS-Variable customizable.

   Diese Datei wird in jede Site's base.css gemerged (manuell
   oder via Build-Script, Phase 1.x). Bei Aenderungen hier ALLE
   Sites mit-aktualisieren oder eine Inject-Pipeline analog
   tokens_to_css.py bauen.
   ============================================================ */

/* STACK: vertikales Stacking mit konsistenten Gaps.
   Use-Case: Section-Inhalt, Card-Inhalt, Form-Felder, Hero-Text-Block.
   Gap-Override pro Instanz via style="--stack-gap: var(--space-lg)". */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-md));
}

/* CLUSTER: horizontales Gruppieren mit Wrap.
   Use-Case: Tag-Listen, Button-Groups, Inline-Nav, Meta-Info-Zeilen.
   Wraps auf Mobile automatisch. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-sm));
    align-items: center;
}

/* SWITCHER: 2-3 Spalten die unter Breakpoint X auf 1-Spalte droppen.
   Container-Query-basiert (kein viewport media query noetig).
   Use-Case: Split-Layout Text+Bild, Feature-Pair, Side-by-Side-Cards.
   Min-Breite pro Item ueber --switcher-min steuerbar (default 30ch). */
.switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-md));
}
.switcher > * {
    flex-basis: calc((var(--switcher-min, 30ch) - 100%) * 999);
    flex-grow: 1;
    /* min-width:0 erlaubt Items unter ihre min-content-Breite zu schrumpfen.
       Ohne das sprengt ein geladenes <img> (intrinsische Breite zaehlt als
       min-content) die Spalte → der Switcher wrappt faelschlich auf 1 Spalte,
       obwohl der Container breit genug ist. Klassischer Flexbox-img-Bug. */
    min-width: 0;
}

/* GRID-AUTO: Auto-Fit Grid mit Min-Width pro Item.
   Use-Case: Card-Grids, Feature-Grids, Logo-Walls, Galerien.
   Min-Width pro Card ueber --grid-min steuerbar (default 280px).
   min(100%, X) verhindert horizontal-overflow bei winzigen Containern. */
.grid-auto {
    display: grid;
    gap: var(--grid-gap, var(--space-md));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr));
}

/* COVER: Element zentriert in full-height-Container.
   Use-Case: Hero-Sections, Modal-Overlays, Empty-States.
   Min-height ueber --cover-h steuerbar (default 60svh = small-viewport,
   verhindert iOS-Adressleisten-Sprung). */
.cover {
    display: grid;
    place-items: center;
    min-block-size: var(--cover-h, 60svh);
}

/* FRAME: Padding + max-width Wrapper (Container-Pattern).
   Use-Case: Section-Content-Wrapper, Lese-Spalten.
   Max-Width ueber --frame-max steuerbar (default --container-wide).
   Padding fluid clamp() damit Mobile-Side-Padding nicht zu eng. */
.frame {
    padding-inline: clamp(1rem, 5vw, 2rem);
    max-width: var(--frame-max, var(--container-wide));
    margin-inline: auto;
}

/* SIDEBAR: 2-Spalten, eine fix-breit + eine flex.
   Use-Case: Content + Sidebar, Notdienst-Box + Main-Content.
   Sidebar-Breite ueber --sidebar-w (default 220px), Content nimmt Rest.
   Wraps auf Mobile auf 1-Spalte automatisch. */
.sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-md));
}
.sidebar > :first-child {
    flex-basis: var(--sidebar-w, 220px);
    flex-grow: 1;
}
.sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--sidebar-content-min, 50%);
}

/* ============================================================
   PRIMITIVES-MARKER-END
   ============================================================
   Composition-Beispiele (NICHT als Klasse, sondern als Pattern-Doku):

     Hero-Section mit Cover + zentriertem Stack:
       <section class="cover">
           <div class="stack frame">
               <h1>...</h1>
               <p>...</p>
               <div class="cluster">[CTAs]</div>
           </div>
       </section>

     Feature-Grid Section:
       <section class="frame stack" style="--stack-gap: var(--space-2xl)">
           <h2>...</h2>
           <p class="lead">...</p>
           <div class="grid-auto">
               <article class="card">...</article>
               <article class="card">...</article>
               <article class="card">...</article>
           </div>
       </section>

     Sidebar-Layout (Notdienst-Box + Main-Content):
       <div class="sidebar">
           <aside class="notdienst-box">...</aside>
           <div class="stack">[Content]</div>
       </div>

   Designerin-Naming-Equivalent (Figma-Components):
     stack    = "Stack / Vertical"
     cluster  = "Stack / Horizontal Wrap"
     switcher = "Layout / Switcher"
     grid-auto = "Grid / Auto-Fit"
     cover    = "Layout / Cover"
     frame    = "Container / Frame"
     sidebar  = "Layout / Sidebar"
*/