/**
 * pitchdeck.css — Pitchdeck-Engine (generisch, alle migrierten Decks)
 *
 * House asset since 2026-09-04. Moved from min_mandant_madeinn2 without a
 * single change to selectors or behaviour, so migrated decks keep working.
 * made in nature — Relaunch-Prototyp (Welle 2: Pitchdeck-Migration „Der Überblick")
 *
 * Herkunft: portiert aus dem <style>-Block von
 * kunden/madeinn2/preview/tools/pitchdeck/start/index.html (finales
 * Überblick-Deck, Vier-Modi-System + GSAP-Snapping + Kachel-Slider).
 * NICHT 1:1 kopiert — siehe Abweichungen unten und im Session-Report.
 *
 * Geltungsbereich: JEDE Seite mit einem `.pitch-deck`-Root-Element (siehe
 * js/deck.js — Root-Selektor `[data-pitch-deck]`, keine `start-*`-Präfixe
 * mehr). Diese Datei ist bewusst generisch gehalten, damit die nächsten acht
 * Pitchdecks (moab, mincore, minpaos, mindesign, minedit, mincity, madeinn,
 * kama) dieselbe deck.css + deck.js-Basis wiederverwenden, nur mit eigenen
 * `_includes/pitch/<slug>/s*.php`-Partials und Foto-Ordnern.
 *
 * Klassennamen — neuer kanonischer Namensraum `pitch-*` (Stefan 21.07.):
 * jede Klasse aus der Quelle (`start-*`, `mn-deck__*`, `s-intro`, `s-split`,
 * `t-dark/t-light`, `m`, `fade`, `cbtn`, `pill`, `deck-ref/deck-next`, …)
 * wurde umbenannt — siehe Mapping-Tabelle im Session-Report.
 *
 * Tokens — aus css/tokens.css übernommen (1:1, keine Duplikate):
 * --disp/--body/--mono, --space-*, --radius-sm|md|lg, --enter, --header-h.
 * Deck-scoped Custom Properties (dieser Datei, Block „PITCH DECK — TOKENS"
 * unten) NUR für Werte, die tokens.css nicht liefern kann oder darf
 * (tokens.css gehört der Website-Wurzel, s. Task-Vorgabe):
 *   1) das echte Schwarz/Weiß-Paar der PITCHDECK-STANDARD (Memory
 *      pitchdeck-vier-modi-standard.md) — bewusst NICHT --ink/--surface
 *      aus tokens.css, die sind das softere #111-Body-Copy-Paar;
 *   2) die Foto-Filter/Veil-Paare der zweiten, unabhängigen data-color-
 *      Achse (grayscale ⇄ Farbbilder).
 *
 * ABWEICHUNG 1 — durchgehender Foto-Backdrop (PITCHDECK-STANDARD, Stefan
 * 21.07., wichtigste Änderung ggü. der Quelle): die Quelle teilte sich
 * EIN --bg-img-filter/--bg-veil-Paar zwischen (a) dem immer sichtbaren
 * Backdrop-Rand um JEDE Karte und (b) dem vollflächigen Foto der beiden
 * Akzent-Folien 1+10. brightness(.5) kombiniert mit einem 42%-Veil machte
 * den Rand auf mehreren Serienbildern faktisch fast einfarbig-schwarz,
 * besonders im echten Schwarz-Theme — genau die vom Auftrag benannte
 * „nackte Fläche". Hier aufgeteilt in --pitch-backdrop-filter/-veil
 * (aufgehellt, für den IMMER sichtbaren Rand) und --pitch-slidebg-filter/
 * -veil (unverändert dunkler, NUR für die beiden vollflächigen Akzent-
 * Folien — dort ist die Verdunkelung dokumentierte Text-Lesbarkeits-Absicht
 * aus der Quelle, siehe deren Kopfkommentar, und bleibt bestehen).
 *
 * ABWEICHUNG 2 (ÜBERHOLT durch KORREKTUR 21.07. abends, siehe unten) — Site-
 * Topbar bleibt über dem Deck sichtbar: die Quelle blendete ihre eigene
 * (Tool-globale) Topbar aus, sobald das Deck offen war
 * (`body.deck-open #mn-topbar{display:none}`). Eine erste Fassung hielt
 * dagegen die echte Site-Topbar (_includes/header.php) IMMER sichtbar —
 * alle vier deck-eigenen Ecken-Buttons (Kachel-Toggle, Farbe, Theme, Close)
 * sitzen seitdem UNTER der (früheren) Topbar-Höhe statt in der Viewport-
 * Ecke (`top: calc(var(--header-h) + 16px)`, unten unverändert belassen —
 * nicht Teil dieser Korrektur, siehe KORREKTUR-Absatz).
 *
 * KORREKTUR 21.07. abends (Stefan wörtlich: „Auf den Pitchdeck-Seiten dürfen
 * wir nur die Pitchdeck-Navigation haben") — ersetzt ABWEICHUNG 2 oben:
 * pitch/ueberblick.php bindet _includes/header.php NICHT MEHR ein. Die
 * Deck-eigenen Ecken-Buttons behalten ihren `header-h + 16px`-Versatz als
 * ruhigen Sicherheitsabstand zur Kante (nicht beauftragt, neu zu vermessen);
 * NEU ist stattdessen `.pitch-intro__back` unten — ein ruhiger Mono-Link auf
 * der Intro-Ebene, der die Seite ohne Site-Header überhaupt erst verlassbar
 * macht (Rückweg zu /pitch/), plus eine scoped Neutralisierung von
 * body { padding-top: var(--header-h) } (base.css, sitewide) auf dieser
 * Seite — siehe Block „SITE-HEADER-WEGFALL" unten.
 *
 * ABWEICHUNG 3 — Vier-Modi-Bedienung sitzt wieder im Deck (Stefan-Korrektur
 * 21.07., revidiert eine erste Fassung ohne deck-eigene Buttons): die
 * Site-Topbar wird auf Logo + Hamburger reduziert (anderer Agent) und
 * trägt keine Theme-/Farb-Schalter mehr. Die zwei Ecken-Buttons
 * `.pitch-btn--theme`/`.pitch-btn--color` sind 1:1 aus der Quelle
 * portiert (dort `#start-thm`/`#start-color`) und schreiben dieselben
 * html[data-theme]/html[data-color]-Attribute + dieselben localStorage-
 * Keys (`mn-theme`/`mn-color`) wie zuvor die Site-Topbar — Deck und Site
 * teilen weiter EINE Zustandsquelle, nur die Bedienoberfläche ist jetzt
 * ausschließlich im Deck (siehe js/deck.js).
 *
 * ABWEICHUNG 4 (ÜBERHOLT durch KORREKTUR 21.07. abends) — Footer nach dem
 * Deck: die Quelle war ein Einzel-Tool ohne nachfolgenden Inhalt. Eine erste
 * Fassung hatte einen echten Site-Footer NACH dem Deck (ueberblick.php) —
 * der fixe Backdrop wurde per IntersectionObserver (js/deck.js) ausgeblendet,
 * sobald der Footer ins Bild scrollte. Seit der KORREKTUR 21.07. abends
 * (siehe ABWEICHUNG 2 oben) bindet ueberblick.php _includes/footer.php NICHT
 * MEHR ein — der Observer in js/deck.js findet kein `.site-footer` mehr,
 * bleibt aber unverändert tolerant (`if (footer && ...)`-Guard war schon
 * vorher da) und tut einfach nichts (no-op); der Backdrop bleibt jetzt bis
 * zum Ende des Decks durchgehend sichtbar, was ohne nachfolgenden
 * Seiteninhalt korrekt ist.
 *
 * ABWEICHUNG 5 — mn-id-Debug-Chips („start-01" …) entfernt: die Quelle
 * lud `/tools/_shared/mn-id.css`, eine Preview-Tool-Debughilfe, die hier
 * nicht existiert und nicht Teil des Prototyps ist.
 *
 * ABWEICHUNG 6 — Edit-Modus-Weiche (siehe js/deck.js): wenn minEdit aktiv
 * ist, unterbleiben Wort-Splitting und GSAP-Snapping, das Intro-Overlay
 * startet offen/statisch und alle Folien sind normal scrollbar — der
 * Editor braucht zusammenhängende Text-Knoten und ein zerlegungsfreies DOM.
 *
 * NACHTRAG 21.07. (Engine-Ausbau Welle 3) — zwei Korrekturen + Klassen-Ausbau
 * vor der Migration der restlichen acht Decks (moab, mincore, minpaos,
 * mindesign, minedit, mincity, madeinn, kama):
 *   a) Ecken-Buttons: `top: calc(var(--header-h) + 16px)` (ABWEICHUNG 2/3
 *      oben, "nicht Teil dieser Korrektur" markiert) ist seit der
 *      KORREKTUR 21.07. abends (ueberblick.php bindet KEINE Site-Topbar
 *      mehr ein) obsolet — jetzt auf `top: 16px` zurückgesetzt (Block
 *      „ECKEN-BUTTONS" unten). Deckt sich vertikal mit `.pitch-intro__back`
 *      (top: header-h/2 ≈ Button-Mittelpunkt bei 16px + halbe Button-Höhe).
 *   b) A11y: `.pitch-intro` bekam beim Öffnen des Decks `aria-hidden`, aber
 *      seine interaktiven Kinder („Los geht's", `.pitch-intro__back`)
 *      blieben per Tab erreichbar (aria-hidden entfernt nur aus dem
 *      Accessibility-Tree, nicht aus der Tab-Reihenfolge). js/deck.js
 *      setzt jetzt zusätzlich `inert` beim Öffnen und entfernt es beim
 *      Schließen — deckt Fokus UND a11y-Tree in einem Attribut ab.
 *   c) Klassen-Ausbau: Listing-/Zahlen-/Terminal-/Voice-/Galerie-Spalten-
 *      Folientypen + Dense- und Chain-Link-Modifier aus den Preview-Decks
 *      destilliert (waren bisher nur im Überblick-Umfang vorhanden). Siehe
 *      Zuordnungstabelle direkt im Anschluss — sie ist die wörtliche
 *      Übersetzungsreferenz für die 8 Migrations-Briefe.
 *
 * NACHTRAG 22.07. spät (Welle 6.2 „Deck-FA-Runde" — Bauplan §S6/§6.11,
 * Stefan-GO 22.07. spät: „ja, und wir nutzen nur Font Awesome" + Eckig-Kanon
 * auch auf die Deck-Karten) — löst die Restpunkte aus REPORT_W5.12b.md ein:
 *   a) ↗-Pfeil (.pitch-pill__arrow, alle CTAs/Pills/Intro-Launch-Buttons,
 *      23 Fundstellen) — Eigenbau-Stroke-SVG (`M7 17L17 7M8 7h9v9`) durch
 *      FA Pro 7 Light „arrow-up-right" (fill-basiert) ersetzt; CSS von
 *      stroke/fill:none auf fill:currentColor umgestellt.
 *   b) Kachel-Nav-Pfeile (.pitch-tilenav__arrow, 8 Decks × prev/next) —
 *      hand-drawn Chevron-Strokes durch FA Pro 7 Light „chevron-left"/
 *      „chevron-right" ersetzt UND von einem geboxten Button (Blur/Border/
 *      Theme-Fläche) auf nackt/flach umgestellt (wie die Ecken-Buttons seit
 *      Welle 5.12b) — die vormalige Box-Fläche --pitch-btn-bg/-br/-hover-*
 *      ist damit verwaist und aus dem TOKENS-Block entfernt (s. dortiger
 *      Kommentar). Neuer theme-invarianter Ink/Halo (--pitch-deck-ink +
 *      --pitch-tilenav-icon-shadow), weil die Tilenav-Leiste IMMER auf einer
 *      dunklen Foto-Scrim sitzt (wie --pitch-navfoot), unabhängig vom Theme.
 *   c) Tile-Labels (.pitch-tile__label, .pitch-tilenav__foot) — 9.5px auf
 *      0.75rem-Mono-Floor (prototype-rules §4) angehoben; Ellipsis-
 *      Sicherheitsnetz ergänzt bzw. bereits vorhandenes genutzt.
 *   d) Eckig-Kanon auf .pitch-card (var(--radius-lg) → 0) — deckt sich mit
 *      .pitch-hub__glass (css/hub.css, selbe Welle). overflow/Schatten
 *      unverändert, kein Clipping-Regress (s. Kommentar an .pitch-card).
 */

/* ================================================================
   PITCH-* KLASSEN-ZUORDNUNGSTABELLE (Engine-Ausbau 21.07., Welle 3 —
   Vorbereitung der 8 Deck-Migrationen). Jede Preview-Klasse links mappt
   1:1 semantisch auf die pitch-Klasse rechts. Quellen: preview/tools/
   pitchdeck/{moab,mincore,minpaos,kama,mindesign}/index.html (vollständig
   gelesen — minedit/mincity/madeinn nur stichprobenartig gegengeprüft,
   sie verwenden ausschließlich eine Teilmenge derselben Klassen).

   BEREITS VORHANDEN (Welle 2, unverändert — nur zur Vollständigkeit):
     start-* / mn-deck__* Wrapper → pitch-deck / pitch-deck__backdrop / pitch-deck__stage
     s-intro / kb                 → pitch-slide--intro / pitch-slide--kenburns
     s-split / .flip / .layout    → pitch-slide--split (reiner Typ-Marker, KEINE
                                     eigene Regel, genau wie in der Quelle) /
                                     pitch-slide--flip / pitch-split__layout
     .txt / .media                → pitch-split__txt / pitch-split__media
     m / m>span (Wort-Reveal)     → pitch-split-word / pitch-split-word > span
     fade                         → pitch-fade
     lay-editorial / ed-foot      → pitch-layout-editorial / pitch-editorial-foot
       (ed-foot bei CTA-Folien)   → pitch-editorial-foot--cta / __col
     actions / pill / pill.solid  → pitch-actions / pitch-pill / pitch-pill--solid
     .arw                         → pitch-pill__arrow
     cbtn / *-toggle/-close/-thm  → pitch-btn / pitch-btn--toggle/--close/--theme
     *-nav (Kachelleiste)         → pitch-tilenav (+ __foot/__bar/__arrow/__track)
     *-tile / .thumb / .tlabel    → pitch-tile / pitch-tile__thumb / pitch-tile__label
     *-label / *-display / *-body → pitch-label / pitch-display / pitch-body
     scrollcue                    → pitch-scrollcue
     t-dark                       → pitch-t-dark (IMMER dunkel, beide Themes —
                                     PITCHDECK-STANDARD, s. Tokens-Kommentar unten)
     t-light                      → pitch-t-light (theme-reaktiv Schwarz/Weiß —
                                     PITCHDECK-STANDARD, bewusst NICHT identisch zur
                                     Quelle, deren --paper immer warmes Off-White war)
     t-bright                     → pitch-t-light (in der Quelle nur ein Synonym:
                                     „.t-light,.t-bright{...}" — keine eigene
                                     visuelle Variante, daher KEINE separate
                                     pitch-Klasse nötig, kein Gap zu schließen)

   NEU IN DIESEM AUSBAU (Aufgabe 1, 21.07.):

   Listing-Folie (moab s6/s15, mincore s7/s15, minpaos s12, kama s5,
   mindesign s11 — Vorbild moab/mincore .rows/.row/.rlabel/.rtitle/
   .listing-note):
     s-listing (Typ-Marker, keine eigene Regel) → pitch-slide--listing
     .rows                          → pitch-listing__rows
     .row                           → pitch-listing__row
     .rlabel                        → pitch-listing__label
     .rlabel .no                    → pitch-listing__no
     .rtitle                        → pitch-listing__title
     .row p (bare Element-Selektor) → pitch-listing__row p (bleibt bare)
     .listing-note                  → pitch-listing__note
     .compact (mincore s7, 5 Zeilen) → pitch-slide--listing-compact (kombiniert
                                        mit pitch-slide--listing, verschärft
                                        Display/Row/Title/Body zusätzlich zu --dense)

   Zahlen-Folie (kama s8 — .nrow/.nfig; Ziffern line-height 1 ist eine
   DOKUMENTIERTE AUSNAHME von der Anton-≥1.1-Regel: Ziffern haben keine
   Umlaut-Punkte/Unterlängen, daher unkritisch — Begründung an der Regel
   selbst wiederholt):
     s-numbers (Typ-Marker) → pitch-slide--numbers
     .rows                  → pitch-numbers__rows
     .nrow                  → pitch-numbers__row
     .nfig                  → pitch-numbers__fig
     .nfig .unit            → pitch-numbers__unit
     .ntext                 → pitch-numbers__text
     (Label-Abstand vor der Headline: Quelle nutzte inline
     style="margin-bottom:18px" + dense-!important-Override — hier
     vereinheitlicht als Wrapper .pitch-numbers__head{margin-bottom:18px},
     dense reduziert auf 8px ohne inline style/!important.)

   Terminal-Panel (moab s5/s7/s14, mincore s14, minpaos s13 „im Einsatz",
   kama s7, mindesign s9 — .term/.term-head/.term-line/.no/.tx/
   .term-cursor; Markup-Muster role="img" + aria-label AUF dem Panel,
   aria-hidden auf Kopf + Body — dieses ARIA-Muster 1:1 in den neuen
   Fluid-Partials übernehmen, es ist kein CSS-Gap):
     .term        → pitch-term
     .term-head   → pitch-term__head
     .lights / i  → pitch-term__lights / pitch-term__lights i
     .term-body   → pitch-term__body
     .term-line   → pitch-term__line
     .no          → pitch-term__no
     .tx          → pitch-term__tx
     .term-cursor → pitch-term__cursor (Farbe var(--accent) — globaler Token
                    aus tokens.css, NICHT dupliziert, einziger Farbfleck im Deck)
     .media.frame → pitch-split__media--frame (dunkler Rahmen ums Panel; neuer
                    Modifier auf dem bereits vorhandenen pitch-split__media)

   Voice-Zeilen (minpaos s5–s7 — gesprochener Befehl mit pulsierendem
   Mikro-Punkt; eigenständige Schwester-Komponente zu pitch-term, gleicher
   CSS-Abschnitt, andere Struktur — KEIN Terminal-Panel):
     .voice      → pitch-voice
     .voice .mic → pitch-voice__mic
     .voice .cmd → pitch-voice__cmd

   Galerie-Spalten (kama s2 „Menschen" — .cols mit drei Portraitfotos; die
   STRUKTURELL GEFIXTE Fassung mit height:clamp im Dense-Fall wird portiert,
   NICHT die alte aspect-ratio-Falle, die bei fixem Seitenverhältnis + voller
   Spaltenbreite strukturell über die Karte hinaus wächst):
     s-people (Typ-Marker, hier generisch benannt) → pitch-slide--cols
     .top (Label/Display/Body-Gruppe)              → pitch-cols__head
     .cols                                          → pitch-cols
     figure / img (bare Element-Selektoren)         → bleiben bare unter .pitch-cols

   Dense-Modifier (mincore/minpaos/madeinn/kama .s-dense — Display eine
   Stufe runter + engere vertikale Abstände, kombinierbar mit split/
   listing/numbers/cols/editorial; hier als BEM-Modifier auf dem
   Slide-Root statt als bare Utility-Klasse, konsistent zu den bereits
   vorhandenen pitch-slide--Modifiern):
     s-dense → pitch-slide--dense

   Chain-Links (moab s16: inline onmouseover/onmouseout ohne eigene Regel;
   mincore: .chain-link; minpaos/mindesign/minedit/mincity: .deck-next —
   drei Schreibweisen derselben Komponente, hier auf EINEN Namen
   konsolidiert; kann mehrfach auf einer Folie vorkommen, sitzt UNTER
   .pitch-actions, nicht wie .pitch-next INNERHALB davon):
     .deck-next / .chain-link → pitch-chain-link
   ================================================================ */

/* ================================================================
   PITCH DECK — TOKENS (Deck-Root, siehe js/deck.js Root-Selektor)
   ================================================================ */
@layer components {
  /* `.pitch-slide` bekommt denselben Token-Satz wie `.pitch-deck` (siehe
     Begründung weiter unten bei den theme-/color-Overrides) — Single-Source-
     Partials müssen auch ohne den vollen Deck-Wrapper funktionieren. */
  .pitch-deck,
  .pitch-slide {
    /* ---- echtes Schwarz/Weiß-Paar (PITCHDECK-STANDARD) — bewusst NICHT
       --ink/--surface aus tokens.css (die sind das #111-Body-Copy-Paar) ---- */
    /* Stefan-Direktive 30.08.2026: „alles CSS variabel gesteuert, dass ich
       mit einem Mausklick das Aussehen saemtlicher Elemente beeinflussen
       kann." Jeder Wert liest zuerst eine Website-Einstellung
       (--deck-*) und faellt nur dann auf den Wert hier zurueck, wenn das
       Backend noch nichts gesetzt hat. Die Felder selbst legt die
       Styleguide-Lane an (settings.definitions.yaml gehoert ihr) — die
       Namen stehen im Pitchdeck-Anker unter „Was die Styleguide-Lane
       noch anlegen muss". */
    --pitch-paper: var(--deck-dunkel-flaeche, #000);
    --pitch-ink: var(--deck-dunkel-schrift, #fff);
    --pitch-line: var(--deck-dunkel-linie, rgba(255, 255, 255, 0.16));
    --pitch-muted: var(--deck-dunkel-ruhig, #b3b3b3);
    --pitch-faint: var(--deck-dunkel-leise, #737373);

    /* Fliesstext des Decks — EINE Variable statt vier Literalwerten.
       Kompakte Folien senken nur diesen Wert. Schnitt ist ueberall 400. */
    --pitch-text: var(--deck-textgroesse, clamp(17px, 1.15vw, 21px));
    /* Die halbe Karte — Stefans Mass fuer Fliesstext auf voller Flaeche.
       In den Split-Spalten wird sie aufgehoben, dort ist die Spalte selbst
       schon die Haelfte. */
    --pitch-textspalte: var(--deck-textbreite, min(100%, clamp(38ch, 50%, 62ch)));

    /* Die Kleinschrift des Decks ist dieselbe wie die der Website
       (.mn-klein, css/typo.css). Hier wird nur ihre Farbe an die
       Deck-Palette gehaengt — Familie, Groesse und Schnitt nie. */
    --mn-klein-color: var(--pitch-muted);

    /* ---- Akzent-Folien 1 + 10 ("pitch-slide--intro") — IMMER echtes
       Schwarz/Weiß in BEIDEN THEMES (dokumentierte Ausnahme aus der Quelle:
       diese beiden Custom Properties + der Veil unten (--pitch-slidebg-veil)
       werden in KEINEM Theme-Override redefiniert, s. Block darunter — der
       weiße Text auf dieser Karte bleibt also unabhängig von Theme dark/
       light immer derselbe). Das betrifft NUR die Theme-Achse. Die
       unabhängige FARBMODUS-Achse (data-color) ist eine andere Geschichte —
       siehe Kommentar bei --pitch-slidebg-filter direkt unten. ---- */
    --pitch-deck-bg: #000;
    --pitch-deck-ink: #fff;
    --pitch-navfoot: rgba(255, 255, 255, 0.78);

    /* ---- durchgehender Backdrop-Rand (ABWEICHUNG 1 oben) ---- */
    --pitch-backdrop-filter: grayscale(1) contrast(1.05) brightness(0.62);
    --pitch-backdrop-veil: rgba(0, 0, 0, 0.3);

    /* ---- vollflächiges Foto NUR auf Folie 1 + 10. grayscale(1) ist der
       DEFAULT dieser Variable und gilt in BEIDEN Themes gleich (bewusst
       nicht pro Theme redefiniert, wie beim Veil-Paar oben) — dokumentierte
       Lesbarkeits-Absicht aus der Quelle für die THEME-Achse.
       PITCHDECK-STANDARD (Stefan 21.07., von Stefan im Farbmodus so gesehen
       und ausdrücklich gelobt — „Veil folgt dem Theme, Bild folgt dem
       Farbmodus"): im FARBMODUS (data-color='on') gewinnt die spezifischere
       Regel `html[data-color='on'] .pitch-slide img{filter:contrast(1)}`
       (Block „TOKENS" unten, höhere Selektor-Spezifität als die
       `.pitch-slide--intro .pitch-slide__bg img`-Regel im Block
       „VOLLFLÄCHIGE AKZENT-FOLIEN") und macht auch DIESES Vollbild-Foto
       farbig, GEWOLLT — kein Grayscale-Zwang hier. --pitch-slidebg-veil
       bleibt davon unberührt (theme- UND farbmodus-invariante Konstante) und
       verdunkelt weiterhin zuverlässig genug für AA-Kontrast: echte
       Pixelmessung (Screenshot-Sampling der Foto-/Veil-Fläche direkt hinter
       der Headline, Playwright, data-color='on', Slide 1 + 10, beide
       Themes — dark/light liefern hier identische Werte, da theme-invariant)
       ergab 9,69:1 (Ø) / 4,91:1 (hellster Bildpunkt im Sample) auf Folie 1
       und 14,73:1 (Ø) / 12,42:1 (hellster Punkt) auf Folie 10 — beide klar
       über der AA-Schwelle von 4,5:1 für Fließtext. Kein Veil-Verstärken
       nötig. ---- */
    --pitch-slidebg-filter: grayscale(1) contrast(1.05);
    --pitch-slidebg-veil: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.36) 42%, rgba(0, 0, 0, 0.86));

    /* ---- fixe Ecken-Buttons (Kachel-Toggle, Close) — nackte Icons ----
       Welle 6.2 (Bauplan §S6/§6.11, Stefan-GO 22.07. spät „nur Font
       Awesome" + Eckig-Kanon): die Kachel-Leisten-Pfeile
       (.pitch-tilenav__arrow, Block „KACHEL-NAVIGATION" unten) sind jetzt
       ebenfalls nackt (kein Kasten/Blur/Border mehr) — die vormalige
       Box-Fläche --pitch-btn-bg/-br/-hover-bg/-hover-fg ist damit verwaist
       und entfernt. --pitch-btn-fg bleibt (Ink der Ecken-Icon-Buttons,
       s. Block „ECKEN-BUTTONS"). --pitch-icon-shadow ist ein sehr weicher
       Legibilitäts-Halo, damit die flächenlosen Ecken-Icons über beliebigen
       Backdrop-Fotos ≥3:1 tragen (kein Kasten, keine Fläche — nur eine
       dezente Kante am Glyph). Die Tilenav-Pfeile sitzen auf der IMMER
       dunklen Foto-Scrim der Leiste (wie --pitch-navfoot) und nutzen daher
       --pitch-deck-ink (immer Weiß, theme-invariant) statt des
       theme-reaktiven --pitch-btn-fg + einen eigenen, ebenfalls
       theme-invarianten Halo --pitch-tilenav-icon-shadow. */
    --pitch-btn-fg: #fff;
    --pitch-icon-shadow: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    --pitch-tilenav-icon-shadow: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    --pitch-tile-active-bg: #fff;
    --pitch-tile-active-fg: #000;

    /* ---- Foto-Rand um jede Karte + Pill-Radius (tokens.css deckt nur
       bis --radius-lg=14px ab, kein Vollkreis-Radius) + Karten-Deckel
       (verhindert absurd breite Karten auf Ultra-Wide, siehe unten) ---- */
    --pitch-pad: clamp(0.75rem, 4vw, 4rem);
    --pitch-radius-pill: 999px;
    --pitch-card-max: 1560px;

    /* ---- Deck-lokaler --accent-Fallback (Welle 5.8, 2026-07-22) ----
       tokens.css' --accent wechselt mit dieser Welle von Pitchdeck-Orange
       (#ff8700) auf die neue Website-Markenfarbe Forest Green — siehe
       dortiger Docblock. Dieses Deck (.pitch-term__cursor, siehe Block
       "TERMINAL" unten) liest weiterhin `var(--accent)` direkt (kein
       eigenes --pitch-accent-Alias existiert), würde also sonst
       kommentarlos grün statt orange werden. Der Vier-Modi-Pitchdeck-
       Standard (Memory pitchdeck-vier-modi-standard.md) ist eine EIGENE,
       von der Website getrennte Farbwelt — Stefans Direktive betraf
       ausdrücklich nur die Website, nicht die Decks. Diese lokale
       Custom-Property-Überschreibung auf der Deck-Wurzel hält das
       Orange hier fest, ohne tokens.css' Definition anzutasten (dieselbe
       Scoping-Technik wie --pitch-paper/--pitch-ink oben, nur für einen
       sitewide statt einen deck-eigenen Tokennamen). */
    /* Bis 30.08.2026 hielt diese Zeile das alte Pitchdeck-Orange fest, mit
       Verweis darauf, die Decks haetten eine eigene Farbwelt. Stefan an
       diesem Tag: „Dieses Orange gibt es bei Made in Nature im Farbschema
       nicht. Wo hast du das her?" Danach stand hier der Gruenwert fest
       verdrahtet — und damit schlug das Deck die Website-Einstellung.
       Seit 30.08.2026 steht hier gar nichts mehr: --accent kommt aus
       Website-Einstellungen > made in nature > Farben und gilt fuer Deck
       und Website gleichermassen. Ein Klick im Backend faerbt beides. */
  }

  /* `.pitch-slide` läuft in JEDER Regel dieses Blocks neben `.pitch-deck` mit
     (identische Werte, keine Drift-Gefahr): Folien-Partials sind Single-
     Source (siehe _includes/pitch/ueberblick/s*.php, $ctx 'deck'|'page') und
     müssen ihre Tokens auch STANDALONE bekommen, wenn sie künftig ohne den
     vollen `.pitch-deck`-Wrapper als normale Seiten-Sektion eingebunden
     werden ($ctx='page', kein Backdrop/Intro/Kachel-Nav drumherum). */
  html[data-theme='light'] .pitch-deck,
  html[data-theme='light'] .pitch-slide {
    --pitch-paper: var(--deck-hell-flaeche, #fff);
    --pitch-ink: var(--deck-hell-schrift, #000);
    --pitch-line: var(--deck-hell-linie, rgba(0, 0, 0, 0.14));
    --pitch-muted: var(--deck-hell-ruhig, #4d4d4d);
    --pitch-faint: var(--deck-hell-leise, #808080);
    --pitch-backdrop-filter: grayscale(1) contrast(0.98) brightness(1.18);
    --pitch-backdrop-veil: rgba(255, 255, 255, 0.26);
    --pitch-btn-fg: #000;
    /* White-Theme: Icon ist dunkel, Halo hell — hebt das Glyph von dunklen
       Foto-Partien ab (Gegenstück zum dunklen Halo im Dark-Theme). Betrifft
       NUR die Ecken-Icon-Buttons (--pitch-btn-fg-Ink) — --pitch-tilenav-
       icon-shadow bleibt bewusst theme-invariant (s. TOKENS-Kommentar oben,
       die Tilenav-Scrim ist in BEIDEN Themes gleich dunkel). */
    --pitch-icon-shadow: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.98)) drop-shadow(0 1px 3px rgba(255, 255, 255, 0.7));
  }

  /* Farbmodus ("Farbbilder") — zweite, unabhängige Achse (data-color) */
  html[data-color='on'] .pitch-deck,
  html[data-color='on'] .pitch-slide {
    --pitch-backdrop-filter: contrast(1) brightness(0.64);
    --pitch-backdrop-veil: rgba(0, 0, 0, 0.34);
  }
  html[data-theme='light'][data-color='on'] .pitch-deck,
  html[data-theme='light'][data-color='on'] .pitch-slide {
    --pitch-backdrop-filter: contrast(0.96) brightness(1.1);
    --pitch-backdrop-veil: rgba(255, 255, 255, 0.28);
  }
  html[data-color='on'] .pitch-deck img,
  html[data-color='on'] .pitch-slide img { filter: contrast(1); }
  html[data-color='on'] .pitch-tile__thumb { filter: contrast(1) brightness(0.92); }
  html[data-color='on'] .pitch-tile:hover .pitch-tile__thumb,
  html[data-color='on'] .pitch-tile:focus-visible .pitch-tile__thumb { filter: contrast(1) brightness(1); }
  html[data-color='on'] .pitch-tile[aria-selected='true'] .pitch-tile__thumb { filter: contrast(1.02) brightness(1.03); }
}

/* ================================================================
   SITE-HEADER-WEGFALL — body-padding-top neutralisieren (KORREKTUR 21.07.
   abends, siehe ABWEICHUNG 2 oben). body { padding-top: var(--header-h) }
   (base.css, @layer base, sitewide) würde sonst die erste Folie/das
   Intro-Grid um --header-h nach unten verschieben und den Fixpunkt "Folie 1
   liegt bei y:0" brechen (openDeck() ruft window.scrollTo(0,0) und verlässt
   sich darauf, dass das exakt die Oberkante der Deck-Stage ist). Scoped auf
   `body[data-backend-layout='pitchdeck']` (siehe head.php $backendLayout) —
   generisch für ALLE künftigen Pitchdeck-Seiten, die dieses Layout teilen
   (moab, mincore, … — siehe deck.css Kopfkommentar „Geltungsbereich").
   @layer components liegt in der von base.css global registrierten
   Layer-Reihenfolge über @layer base und gewinnt daher unabhängig von
   Spezifität — kein base.css-Edit nötig.
   ================================================================ */
@layer components {
  body[data-backend-layout='pitchdeck'],
  body:has(.pitch-deck) {
    padding-top: 0;
  }
}

/* ================================================================
   INTRO — fixe Basisebene (Wolkenbild, „Los geht's"). Läuft nie weg,
   bleibt exakt erhalten, solange das Deck offen ist (siehe Overlay
   unten). Edit-Modus hebt die fixe Positionierung auf (siehe unten).
   ================================================================ */
@layer components {
  .pitch-intro { position: fixed; inset: 0; z-index: 1; display: flex; overflow: hidden; background: var(--pitch-deck-bg, #000); }
  .pitch-intro__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .pitch-intro__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--pitch-backdrop-filter); transform: scale(1.04); }
  .pitch-intro__bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.84));
  }
  @media (prefers-reduced-motion: no-preference) {
    .pitch-intro__bg img { animation: pitch-kenburns 30s ease-in-out infinite alternate; }
  }
  .pitch-intro__inner {
    position: relative; z-index: 1; margin: auto; width: min(100%, 1200px);
    padding: clamp(96px, 16vh, 150px) clamp(28px, 6vw, 72px) clamp(40px, 8vh, 90px);
    display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.6vh, 28px);
    color: var(--pitch-deck-ink, #fff);
  }
  /* Die EINE Kleinschrift des Decks (Stefan-Direktive 29.08.2026).
     Vorher: neun Groessen in JetBrains Mono mit Sperrungen bis 0.2em.
     Jetzt: ein Selektor, vier Variablen, ein Wert. Bewusst OHNE
     .pitch-deck davor — die Regel bleibt damit auf der Spezifitaet einer
     einzelnen Klasse, spaetere Einzelregeln gewinnen ueber die
     Reihenfolge. --mono bleibt allein .pitch-term vorbehalten. */
  :is(
    .mn-klein,
    .pitch-intro__label,
    .pitch-intro__back,
    .pitch-label,
    .pitch-ref,
    .pitch-scrollcue,
    .pitch-listing__label,
    .pitch-listing__note,
    .pitch-numbers__fuss,
    .pitch-agentnet__legende,
    .pitch-pill,
    .pitch-next,
    .pitch-chain-link,
    .pitch-tilenav__foot,
    .pitch-tile__label
  ) {
    font-family: var(--mn-klein-family);
    font-size: var(--mn-klein-size);
    font-weight: var(--mn-klein-weight);
    line-height: var(--lh-klein);
    letter-spacing: var(--mn-klein-track);
    text-transform: none;
    color: var(--mn-klein-color);
  }

  /* Etiketten der Intro-Folien stehen immer auf einem Foto. */
  .pitch-intro__label { --mn-klein-color: rgba(255, 255, 255, 0.92); }
  .pitch-intro__title { font-family: var(--pitch-kopf, var(--disp)); font-weight: var(--weight-pitch-h1, 400); text-transform: var(--versal-pitch-h1, uppercase); line-height: var(--lh-pitch-h1, 1.1); letter-spacing: var(--ls-pitch-h1, -0.012em); font-size: var(--type-pitch-h1, clamp(40px, 8vw, 120px)); max-width: var(--pitch-kopf-breite, 16ch); }
  .pitch-intro__body { font-family: var(--body); font-weight: 400; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.6; color: rgba(255, 255, 255, 0.85); max-width: var(--pitch-textspalte); }
  .pitch-intro__launch { margin-top: clamp(8px, 1.8vh, 20px); }

  /* Rückweg zum Pitch-Hub (KORREKTUR 21.07. abends, siehe ABWEICHUNG 2 oben) —
     ruhiger Mono-Link, direktes Kind von .pitch-intro (nicht .pitch-intro__inner),
     damit er unabhängig von dessen margin:auto-Zentrierung an der Stelle sitzt,
     an der optisch früher die Site-Topbar saß (vertikal auf halber
     --header-h-Höhe, gleicher linker Einzug wie die Topbar-Innenpolsterung
     in chrome.css .mn-topbar__inner). Nur auf der Intro-Ebene erreichbar —
     deck.js setzt aria-hidden="true" auf die ganze .pitch-intro-Sektion,
     sobald das Deck-Overlay offen ist (dieselbe Mechanik wie beim
     "Los geht's"-Button), zusätzlich deckt die Deck-Stage sie optisch ab
     (höherer z-index, siehe OVERLAY-STEUERUNG unten). */
  .pitch-intro__back {
    position: absolute;
    z-index: 2;
    top: calc(var(--header-h) / 2);
    transform: translateY(-50%);
    left: clamp(var(--space-sm), 3vw, var(--space-lg));
    text-decoration: none;
    --mn-klein-color: rgba(255, 255, 255, 0.68);
    transition: color 0.25s var(--enter);
  }
  .pitch-intro__back:hover,
  .pitch-intro__back:focus-visible {
    color: rgba(255, 255, 255, 0.95);
  }
  .pitch-intro__back:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }
}

/* ================================================================
   KURZVIEWPORT-SCHUTZ — Intro-Ebene (KORREKTUR 21.07., Engine-Fix 3).
   Befund (Migrations-Agent, madeinn-Deck-Vorlage): dreizeilige Headlines
   schieben den „Los geht's"-Button aus dem `overflow:hidden`-Layer von
   .pitch-intro (siehe OVERLAY-STEUERUNG oben — der Button wird dadurch
   unsichtbar UND unerreichbar, nicht nur optisch abgeschnitten). Gemessen:
   bei 1280×800 blieben nur ~9px Marge zwischen Button-Unterkante und
   Viewport-Unterkante; ab 1280×768 wurde der Button bereits geclippt. Diese
   Datei hatte VOR diesem Fix keine einzige max-height-Regel — die madeinn-
   Vorlage hatte das schon als `@media (max-height:820px)` gelöst, hier jetzt
   generisch für ALLE Decks nachgezogen (Geltungsbereich siehe Kopfkommentar
   „Geltungsbereich"), da jedes Deck dieselbe .pitch-intro__inner-Struktur
   teilt. Trimmt NUR vertikale Innenabstände + Titel-Größe (spart die meiste
   Höhe pro Pixel Aufwand); linkes/rechtes Padding, max-width, Farben,
   Kachel-Nav etc. bleiben unangetastet. Bewusst nur bis 820px Höhe aktiv —
   ab 900px Höhe (Verify-Gegenprobe) unverändert wie vor diesem Fix.
   ================================================================ */
@media (max-height: 820px) {
  .pitch-intro__inner {
    padding-top: clamp(56px, 10vh, 96px);
    padding-bottom: clamp(20px, 5vh, 48px);
    gap: clamp(10px, 1.8vh, 18px);
  }
  .pitch-intro__title { font-size: clamp(32px, 6.4vw, 88px); }
}

/* ================================================================
   OVERLAY-STEUERUNG — Deck-Ebenen nur sichtbar, wenn body.pitch-open.
   Site-Topbar bleibt IMMER sichtbar (ABWEICHUNG 2, siehe Kopfkommentar) —
   anders als die Quelle, die ihre eigene Tool-Topbar hier ausblendete.
   ================================================================ */
@layer components {
  body:not(.pitch-open) .pitch-deck__backdrop,
  body:not(.pitch-open) .pitch-deck__stage,
  body:not(.pitch-open) .pitch-btn,
  body:not(.pitch-open) .pitch-tilenav { display: none; }

  /* Intro sperrt die Seite, solange das Deck zu ist — sobald offen, gibt
     window den Scroll frei (GSAP normalizeScroll übernimmt die Steuerung,
     siehe deck.js). overflow-x bleibt immer hidden (Karten sind 100%-breit
     ohne horizontalen Overlauf-Bedarf). */
  body:not(.pitch-open) { overflow: hidden; height: 100svh; }
  body.pitch-open { overflow-x: hidden; }
}

/* ================================================================
   BACKDROP — durchgehende Foto-Bühne hinter ALLEN Folien (PITCHDECK-
   STANDARD). Bleibt fix im Viewport, während `main` darüber scrollt.
   Wird ausgeblendet, sobald der Site-Footer ins Bild scrollt (ABWEICHUNG
   4 — js/deck.js setzt body.pitch-past-deck über IntersectionObserver).
   ================================================================ */
@layer components {
  .pitch-deck__backdrop { position: fixed; inset: 0; z-index: 2; overflow: hidden; background: var(--pitch-deck-bg, #000); }
  .pitch-deck__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: var(--pitch-backdrop-filter) blur(3px); transform: scale(1.08); transition: filter 0.4s; }
  .pitch-deck__backdrop::after { content: ''; position: absolute; inset: 0; background: var(--pitch-backdrop-veil); transition: background 0.4s; }
}

/* ================================================================
   STAGE / SLIDES / CARDS
   ================================================================ */
@layer components {
  .pitch-deck__stage { position: relative; z-index: 3; }

  /* Kontext-Weiche ($ctx im Partial, siehe _includes/pitch/ueberblick/s*.php):
     --deck = volle Viewport-Karte im Overlay (Standardfall, s. Kopfkommentar);
     --page = normale Fluss-Sektion für Single-Source-Wiederverwendung derselben
     Partials außerhalb des Decks (kein 100svh/Snap, reguläre Sektion-Abstände
     nach prototype-rules §8: min. clamp(5rem,10vw,9rem) zwischen Sektionen). */
  .pitch-slide { position: relative; }
  .pitch-slide--deck {
    /* jede Folie = ein voller Viewport; die Karte sitzt darin mit dem
       Foto-Rand-Padding, sodass Nachbarkarten einen ganzen Viewport
       entfernt sind — im Ruhezustand ist immer nur EINE Karte sichtbar. */
    min-height: 100svh; height: auto; padding: var(--pitch-pad); display: flex;
  }
  .pitch-slide--page { padding-block: clamp(5rem, 10vw, 9rem); display: flex; }

  /* Karte ist zugleich der Pflicht-.min-container (prototype-rules §6) —
     überschreibt dessen width-Formel (die eigenes Gutter abzieht) mit
     einer reinen max-width-Deckelung, damit sie den vom Slide bereits
     per --pitch-pad vorgegebenen Platz exakt ausfüllt statt doppelt
     einzurücken. Der Deckel greift erst jenseits ~1700px Viewportbreite —
     bei 1280/1440px (Testviewports) identisch zu width:100%. */
  .pitch-slide > .pitch-card.min-container {
    width: 100%;
    max-width: var(--pitch-card-max);
    margin-inline: auto;
    padding-inline: 0;
  }
  /* Eckig-Kanon (Welle 6.2 — Bauplan §S6/§6.11, Stefan-GO 22.07. spät):
     border-radius 0 statt --radius-lg. overflow:hidden bleibt unverändert
     (klippt weiterhin den vollflächigen Foto-Hintergrund der Karte, nur
     jetzt an eckigen statt runden Kanten) — kein Clipping-Regress, da
     rechteckige Kinder (Karten-Inner, Fotos, Terminal-Panel) ohnehin schon
     bündig an den Kanten sitzen. Der weiche Ambient-Schatten
     (box-shadow, s.u.) bleibt unverändert und wirkt an eckigen Kanten
     ebenso ruhig wie zuvor an runden — gegengeprüft in allen vier Modi
     (Dark/Hell × SW/Farbe), s. Session-Report. */
  .pitch-card {
    position: relative; flex: 1 1 auto; min-width: 0; display: flex; border-radius: 0; overflow: hidden;
    isolation: isolate; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .pitch-card__inner {
    position: relative; z-index: 2; height: 100%; width: 100%; display: flex; flex-direction: column;
    --karte-oben: clamp(84px, 11vh, 116px);
    --karte-seite: clamp(28px, 4.5vw, 68px);
    --karte-unten: clamp(28px, 4.5vw, 64px);
    padding: var(--karte-oben) var(--karte-seite) var(--karte-unten);
    /* Karten-Folien beginnen oben — dieselbe Hoehe auf jeder Folie.
       Die Vollbild-Folien setzen den Anschlag weiter unten selbst zurueck. */
    justify-content: flex-start;
  }
  .pitch-slide--intro .pitch-card__inner { justify-content: space-between; }

  /* Karten-Oberflächen: pitch-t-dark = Akzent-Folien (immer echtes
     Schwarz/Weiß, s. Tokens); pitch-t-light = alle übrigen Folien
     (theme-reaktiv über --pitch-paper/--pitch-ink). */
  .pitch-t-dark { background: var(--pitch-deck-bg); color: var(--pitch-deck-ink); }
  .pitch-t-light { background: var(--pitch-paper); color: var(--pitch-ink); }

  /* alle Deck-Fotos sind grundsätzlich grau (color:on hebt es je Bild auf,
     s. Tokens-Block) */
  .pitch-deck img { filter: grayscale(1) contrast(1.05); }
}

/* ================================================================
   TYPOGRAFIE
   ================================================================ */
@layer components {
  /* Konzeptueberschrift ueber einer Folie — unterscheidet sich vom Rest
     der Kleinschrift NUR durch die Signalfarbe. Kein Fett, keine
     Klammern, keine Sperrung. */
  .pitch-label { --mn-klein-color: var(--accent); }
  /* Stefan 30.08.2026: „die Ueberschrift ragt in das gruene!" — Anton setzt
     Versalien bis an die Zeilenoberkante, die Trema-Punkte von Ü/Ä/Ö noch
     darueber. Bei line-height 1.1 beruehrt das ohne Abstand das Etikett.
     Der Abstand haengt an einer Variablen, damit er einstellbar bleibt. */
  .pitch-label + :is(h1, h2, h3, .pitch-display, .pitch-hub-karte__titel),
  .pitch-intro__label + .pitch-intro__title {
    margin-top: var(--pitch-etikett-abstand, 0.42em);
  }
  /* Und nach unten dasselbe: der Fliesstext bekommt Abstand zur Anton-Zeile. */
  :is(.pitch-display, .pitch-hub-karte__titel, .pitch-intro__title) + * {
    margin-top: var(--pitch-kopf-abstand, 0.5em);
  }
  .pitch-t-dark .pitch-label { color: rgba(255, 255, 255, 0.75); }

  /* Ghost-Kicker "Vorstellung: …" (Folien 3–9). Die Blässe kommt aus
     color-mix auf `color`, NICHT aus CSS-opacity: die .pitch-fade-GSAP-
     Reveal-Animation fährt opacity/autoAlpha 0→1, was eine opacity-
     basierte Blässe wieder auf voll Deckkraft überschreiben würde. Die
     Transparenz steckt fest in der Farbe selbst — übersteht das. */
  .pitch-ghost {
    font-family: var(--pitch-kopf, var(--disp)); font-weight: var(--weight-pitch-h1, 400); text-transform: var(--versal-pitch-h1, uppercase); line-height: var(--lh-pitch-h1, 1.1); letter-spacing: var(--ls-pitch-h1, -0.012em);
    font-size: clamp(24px, 2.9vw, 44px); color: color-mix(in srgb, currentColor 14%, transparent); margin-bottom: 10px;
  }
  /* Anton-Displays: line-height nie unter 1.1 (Trema-Kollision Ü/Ä/Ö) */
  .pitch-display { font-family: var(--pitch-kopf, var(--disp)); font-weight: var(--weight-pitch-h1, 400); text-transform: var(--versal-pitch-h1, uppercase); line-height: var(--lh-pitch-h1, 1.1); letter-spacing: var(--ls-pitch-h1, -0.012em); font-size: clamp(34px, 6.4vw, 104px); max-width: var(--pitch-kopf-breite, 15ch); }
  .pitch-body { font-family: var(--body); font-weight: 400; font-size: var(--pitch-text); line-height: 1.66; color: var(--pitch-muted); max-width: var(--pitch-textspalte); }
  .pitch-t-dark .pitch-body { color: rgba(255, 255, 255, 0.82) !important; }

  /* ruhiger Mono-Verweis-Link (Folien 3–9) */
  .pitch-ref {
    align-self: flex-start; text-decoration: none;
    margin-top: clamp(4px, 1vh, 10px); transition: color 0.25s var(--enter);
  }
  .pitch-ref:hover, .pitch-ref:focus-visible { color: var(--pitch-ink); }
  .pitch-ref:focus-visible { outline: 2px solid var(--pitch-ink); outline-offset: 3px; border-radius: var(--radius-sm); }

  /* maskiertes Wort-Reveal — padding-top gibt dem Clip Kopffreiheit,
     damit Trema-Punkte (Ü/Ä/Ö) während UND nach dem Aufstieg sichtbar
     bleiben; overflow:hidden clippt das von unten aufsteigende Wort. */
  .pitch-split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: 0.32em; margin-top: -0.32em; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .pitch-split-word > span { display: inline-block; will-change: transform; }
  .pitch-display.pitch-split { visibility: hidden; }
  .pitch-fade { will-change: transform, opacity; }

  /* editorial: Display oben, Label unten-links, Body unten-rechts */
  /* ARTD 30.08.2026: „Etikett -> Ueberschrift -> Inhalt. Ohne Ausnahme."
     Auf den Vollbild-Folien stand das Etikett bisher als einzige Stelle im
     Deck UNTER der Ueberschrift — das Deck widersprach sich selbst.
     Es steht jetzt oben; die Ueberschrift bleibt unten am Bild verankert. */
  .pitch-layout-editorial { justify-content: space-between; }
  .pitch-layout-editorial > .pitch-label { flex: 0 0 auto; }
  .pitch-layout-editorial .pitch-display { margin-top: auto; width: min(100%, 74%); }
  .pitch-editorial-foot { margin-top: clamp(28px, 5vh, 64px); display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
  .pitch-editorial-foot .pitch-label { flex: 0 0 auto; }
  .pitch-editorial-foot .pitch-body { width: min(100%, var(--pitch-fuss-breite, 52%)); min-width: 320px; margin-left: auto; --pitch-textspalte: 100%; }
  .pitch-editorial-foot--cta { align-items: flex-start; }
  .pitch-editorial-foot--cta .pitch-editorial-foot__col { width: min(100%, var(--pitch-fuss-breite, 52%)); min-width: 320px; margin-left: auto; }
  @media (max-width: 820px) {
    .pitch-layout-editorial .pitch-display { width: 100%; }
    .pitch-editorial-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
    .pitch-editorial-foot .pitch-body { width: 100%; margin-left: 0; }
    .pitch-editorial-foot--cta .pitch-editorial-foot__col { width: 100%; margin-left: 0; }
  }
}

/* ================================================================
   VOLLFLÄCHIGE AKZENT-FOLIEN (1 + 10) — pitch-slide--intro
   ================================================================ */
@layer components {
  .pitch-slide--intro .pitch-slide__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .pitch-slide--intro .pitch-slide__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--pitch-slidebg-filter); transform: scale(1.06); }
  .pitch-slide--intro .pitch-slide__bg::after { content: ''; position: absolute; inset: 0; background: var(--pitch-slidebg-veil); }
  @media (prefers-reduced-motion: no-preference) {
    .pitch-slide--kenburns .pitch-slide__bg img { animation: pitch-kenburns 26s ease-in-out infinite alternate; }
  }
  /* Half-picture and picture-row images drift very slowly instead of following
     the scroll: a quiet Ken Burns, off for readers who reduce motion. */
  @media (prefers-reduced-motion: no-preference) {
    .pitch-split__media img, .pitch-reihe__bild img { animation: pitch-kenburns-leise 28s ease-in-out infinite alternate; }
  }
  @keyframes pitch-kenburns-leise {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.06) translate3d(-1%, -1%, 0); }
  }
  @keyframes pitch-kenburns {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to { transform: scale(1.2) translate3d(-2%, -2%, 0); }
  }
  .pitch-slide--intro .pitch-display { max-width: var(--pitch-kopf-breite, 18ch); }
  .pitch-scrollcue { margin-top: 30px; --mn-klein-color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; gap: 10px; }
  .pitch-scrollcue::before { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.6; }
}

/* ================================================================
   SPLIT-FOLIEN (2–9) — Text + Media, Bildseite wechselt via --flip
   ================================================================ */
@layer components {
  /* Das Halbbild laeuft randlos: kein Abstand zur Textspalte, kein Radius,
     und es reicht ueber die Innenpolsterung hinaus bis an die Kartenkante.
     Die Textspalte behaelt ihren Abstand. */
  .pitch-split__layout {
    margin-top: var(--pitch-anschlag, 0); display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(28px, 5vw, 72px);
    align-items: var(--pitch-anschlag-quer, start);
    width: 100%; flex: 1; min-height: 0;
  }
  /* Das Halbbild sitzt an der Kartenkante, nicht im Innenabstand. Es wird
     dafuer aus dem Fluss genommen und gegen die Innenflaeche der Karte
     versetzt — genau um deren Polsterung, die oben Namen bekommen hat.
     Die leere Rasterspalte haelt den Platz. */
  /* Ein absolut gesetztes Kind richtet sich an der POLSTERKANTE seines
     Bezugselements aus, nicht am Inhalt. inset:0 ist damit bereits die
     Kartenkante — die zusaetzlichen Negativwerte haben es um genau die
     Polsterung darueber hinausgeschoben. */
  .pitch-slide--split .pitch-split__media { position: absolute; inset: 0 0 0 auto; width: 50%; }
  .pitch-slide--split.pitch-slide--flip .pitch-split__media { inset: 0 auto 0 0; }
  /* Ein absolut gesetztes Bild faellt aus dem Raster. Damit war der Text
     das einzige verbliebene Rasterkind und landete IMMER in Spalte 1 —
     bei „Bild links" also unter dem Bild. Er ist dort nicht verschwunden,
     er lag dahinter. Die Spalte wird deshalb ausdruecklich zugewiesen. */
  .pitch-slide--split .pitch-split__txt { grid-column: 1; }
  .pitch-slide--split.pitch-slide--flip .pitch-split__txt { grid-column: 2; }
  @media (max-width: 700px) {
    .pitch-slide--split .pitch-split__txt,
    .pitch-slide--split.pitch-slide--flip .pitch-split__txt { grid-column: 1; }
  }
  .pitch-slide--flip .pitch-split__txt { order: 2; }
  .pitch-slide--flip .pitch-split__media { order: 1; }
  .pitch-split__txt { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 26px); --pitch-textspalte: 100%; }
  .pitch-split__media { position: relative; overflow: hidden; border-radius: 0; background: var(--pitch-line); align-self: stretch; }
  .pitch-split__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
  /* Rahmen-Modifier für ein eingebettetes Terminal-Panel statt eines Fotos
     (siehe Zuordnungstabelle: .media.frame → pitch-split__media--frame).
     aspect-ratio 4/3 bleibt von .pitch-split__media geerbt — der Panel
     füllt sie zu 100% (pitch-term ist selbst height:100%;width:100%). */
  .pitch-split__media--frame { background: var(--pitch-panel-rahmen, color-mix(in srgb, var(--pitch-ink) 8%, var(--pitch-paper))); padding: 12px; border-radius: var(--radius-md); }
  .pitch-split__media--frame img { border-radius: var(--radius-sm); height: 100%; }
  /* Produkt-Capture-Modifier (Welle 5.12b) — echter Screenshot statt Attrappe.
     Eckiger 1px-Hairline-Rahmen in der Karten-Ink + sehr weicher Schatten;
     behält bewusst das 16/9-Format des Screenshots (overrides das 4/3 der
     Basis), damit die Editier-UI vollständig und unbeschnitten bleibt. */
  .pitch-split__media--capture {
    aspect-ratio: 16 / 9;
    background: var(--pitch-paper);
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: 0;
    box-shadow: 0 26px 64px -40px rgba(0, 0, 0, 0.55);
  }
  .pitch-split__media--capture img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 820px) {
    .pitch-split__layout { grid-template-columns: 1fr; gap: 24px; }
    .pitch-slide--flip .pitch-split__txt { order: 1; }
    .pitch-slide--flip .pitch-split__media { order: 2; }
    .pitch-split__media { aspect-ratio: 16 / 10; }
  }
}

/* ================================================================
   PROTOKOLL-PANEL (frueher „Terminal") — die Ablauf-Liste neben dem Text
   (mincore, moab, minpaos). Stefan-Direktive 30.08.2026: „Ich will
   nirgendwo diesen orangen Charakter und auch keine Monotype oder sowas
   oder eine Computers, alles in dem Styleguide von made in nature."

   Vorher: Schreibmaschinenschrift, drei Ampelpunkte, fest verdrahtetes
   Dunkelgruen (#111413/#efeadf/#8d8a81) und ein blinkender Cursor in der
   Akzentfarbe — eine eigene kleine Farbwelt, die weder dem Hell- noch dem
   Dunkel-Modus des Decks folgte.

   Jetzt: dieselbe Hausschrift wie der Fliesstext, dieselben Karten-Token
   wie jede andere Flaeche im Deck. Damit traegt das Panel Schwarz-Modus
   und Farbe ohne eine einzige eigene Farbe. Jede Groesse und jeder
   Abstand haengt an einer Variablen — wer im Backend die Schrift oder
   die Farbe wechselt, wechselt sie hier mit.
   ================================================================ */
@layer components {
  .pitch-term {
    height: 100%; width: 100%; border-radius: var(--radius-sm); overflow: hidden;
    background: var(--pitch-panel-bg, color-mix(in srgb, var(--pitch-ink) 5%, var(--pitch-paper)));
    display: flex; flex-direction: column; font-family: var(--body); text-align: left;
    font-size: var(--pitch-panel-text, clamp(12px, 1.15vw, 15px)); color: var(--pitch-ink);
  }
  .pitch-term__head {
    display: flex; align-items: center; gap: 12px;
    padding: clamp(10px, 1.3vw, 16px) clamp(12px, 1.6vw, 22px);
    border-bottom: 1px solid var(--pitch-line); color: var(--pitch-muted);
    font-size: 0.9em; letter-spacing: 0.01em;
  }
  /* Die drei Ampelpunkte sind mit der Computer-Anmutung entfallen. Der
     Selektor bleibt stehen, damit aelteres Markup nichts Kaputtes zeigt. */
  .pitch-term__lights { display: none; }
  .pitch-term__body {
    flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(9px, 1.5vh, 17px);
    padding: clamp(14px, 2vw, 28px) clamp(12px, 1.6vw, 22px);
  }
  .pitch-term__line { display: flex; gap: clamp(10px, 1.2vw, 16px); line-height: 1.55; }
  .pitch-term__no { color: var(--pitch-faint); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .pitch-term__tx { color: var(--pitch-ink); }
  /* Der blinkende Cursor war das letzte Stueck Computer im Deck. Er ist
     weg — die letzte Zeile endet einfach, wie jede andere Zeile auch. */
  .pitch-term__cursor { display: none; }
}

/* ================================================================
   VOICE-ZEILEN — gesprochener Befehl mit pulsierendem Mikro-Punkt
   (minpaos s5–s7). Eigenständige Schwester-Komponente zu pitch-term
   (kein Panel, sitzt direkt im Textfluss über der pitch-body-Zeile).
   Farbe/Ring nutzen currentColor + color-mix (wie .pitch-ghost oben),
   damit Dark/Light automatisch mitläuft statt fixer Hex-Duplikate.
   ================================================================ */
@layer components {
  .pitch-voice {
    /* Zitatzeile — Hausschrift, kein Fett; stand bis 29.08.2026 in Mono
       mit Schnitt 500 und war die dritte Schriftart auf der Folie. */
    display: flex; align-items: center; gap: 14px; font-family: var(--body); font-weight: 400;
    font-size: clamp(16px, 1.75vw, 21px); line-height: 1.45; color: var(--pitch-ink); letter-spacing: 0.004em;
  }
  .pitch-voice__mic { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 999px; background: currentColor; position: relative; }
  .pitch-voice__mic::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
  @media (prefers-reduced-motion: no-preference) {
    .pitch-voice__mic::after { animation: pitch-micpulse 2.1s ease-out infinite; }
  }
  @keyframes pitch-micpulse { 0% { transform: scale(0.55); opacity: 0.85; } 70% { opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
  .pitch-voice__cmd { min-width: 0; }
}

/* ================================================================
   LISTING-FOLIE — Zeilen mit Mono-Label+Ziffer, Anton-Titel, Fließtext
   (moab s6/s15, mincore s7/s15, minpaos s12, kama s5, mindesign s11).
   s-listing war in der Quelle ein reiner Typ-Marker ohne eigene Regel —
   pitch-slide--listing bleibt das hier ebenso, das Styling steckt
   vollständig in den pitch-listing__*-Klassen.
   ================================================================ */
@layer components {
  .pitch-listing__rows { margin-top: clamp(24px, 5vh, 64px); width: 100%; }
  .pitch-listing__row {
    display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr); gap: clamp(16px, 3vw, 54px); align-items: baseline;
    padding: clamp(16px, 2.4vh, 26px) 0; border-top: 1px solid var(--pitch-line);
  }
  .pitch-listing__row p { --pitch-textspalte: 100%; }
  .pitch-listing__label { --mn-klein-color: var(--pitch-ink); }
  /* Stefan 30.08.2026: keine Nummerierungen. */
  .pitch-listing__no { display: none; }
  /* Anton-Display: line-height nie unter 1.1 (Trema-Kollision Ü/Ä/Ö) — Regel
     gilt auch hier, obwohl die Quelle sie für .rtitle nicht explizit setzte. */
  .pitch-listing__title { font-family: var(--pitch-kopf, var(--disp)); font-weight: var(--weight-pitch-h1, 400); text-transform: var(--versal-pitch-h1, uppercase); line-height: var(--lh-pitch-h1, 1.1); font-size: clamp(18px, 2.2vw, 30px); letter-spacing: var(--ls-pitch-h1, 0.01em); margin-top: 6px; }
  .pitch-listing__row p { font-family: var(--body); font-weight: 400; font-size: var(--pitch-text); line-height: 1.6; color: var(--pitch-muted); max-width: var(--pitch-textspalte); }
  /* Anmerkung am Fuss der Folie — normale Hausschrift, nur kleiner. */
  .pitch-listing__note { margin-top: clamp(18px, 3vh, 32px); }
  @media (max-width: 700px) {
    .pitch-listing__row { grid-template-columns: 1fr; gap: 8px; }
  }

  /* Compact-Variante (mincore s7, fünf Zeilen statt zwei bis vier) —
     verschärft Display/Row/Title/Body zusätzlich zu --dense, kombiniert
     IMMER mit pitch-slide--listing. */
  .pitch-slide--listing-compact .pitch-display { font-size: clamp(26px, 4.4vw, 58px); }
  .pitch-slide--listing-compact .pitch-listing__row { padding: clamp(9px, 1.5vh, 16px) 0; }
  .pitch-slide--listing-compact .pitch-listing__title { font-size: clamp(16px, 1.7vw, 24px); margin-top: 4px; }
  .pitch-slide--listing-compact { --pitch-text: var(--deck-textgroesse-kompakt, clamp(15px, 1.05vw, 18px)); }
  .pitch-slide--listing-compact .pitch-listing__row p { line-height: 1.5; }
}

/* ================================================================
   ZAHLEN-FOLIE — kama s8 „Woran man es messen kann". .pitch-numbers__fig
   nutzt bewusst line-height:1 (DOKUMENTIERTE AUSNAHME von der Anton-≥1.1-
   Regel oben): einzeilige Ziffernreihen ohne Umlaut-Punkte/Unterlängen
   haben kein Kollisionsrisiko, die engere Zeilenhöhe spart hier Höhe pro
   Zeile ohne Trema-Gefahr — Regel bleibt bewusst beim engen Original-Wert.
   ================================================================ */
@layer components {
  .pitch-numbers__head { margin-bottom: 18px; }
  .pitch-numbers__rows { margin-top: clamp(24px, 5vh, 64px); width: 100%; }
  .pitch-numbers__row { display: flex; align-items: baseline; gap: 20px; padding: clamp(10px, 1.8vh, 20px) 0; border-top: 1px solid var(--pitch-line); }
  .pitch-numbers__fig { font-family: var(--pitch-kopf, var(--disp)); font-weight: var(--weight-pitch-h1, 400); letter-spacing: 0; font-size: clamp(24px, 3.2vw, 42px); line-height: 1; flex: 0 0 auto; min-width: 4.6ch; }
  .pitch-numbers__unit { font-size: 0.55em; color: var(--pitch-muted); }
  .pitch-numbers__text { font-family: var(--body); font-weight: 400; font-size: var(--pitch-text); color: var(--pitch-muted); }
}

/* ================================================================
   GALERIE-SPALTEN — kama s2 „Menschen", drei Portraitfotos im Grid.
   Dense-Fix (siehe Dense-Block unten): height:clamp statt aspect-ratio,
   damit die Karte bei voller Spaltenbreite nicht strukturell überläuft
   (die alte aspect-ratio-Falle) — NUR im Dense-Fall aktiv, der
   Normalfall bleibt aspect-ratio 3/4 wie in der Quelle.
   ================================================================ */
@layer components {
  .pitch-cols__head { display: flex; flex-direction: column; gap: 14px; }
  .pitch-cols__head .pitch-body { margin-top: clamp(22px, 4vh, 44px); }
  .pitch-cols { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.2vw, 16px); }
  .pitch-cols figure { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-sm); background: var(--pitch-line); }
  .pitch-cols figure img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 640px) {
    .pitch-cols { grid-template-columns: 1fr 1fr; }
    .pitch-cols figure:last-child { display: none; }
  }
}

/* ================================================================
   CTA-PILLS (Akzent-Folie 10, einfarbige Pills)
   ================================================================ */
@layer components {
  .pitch-actions { margin-top: clamp(24px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); align-items: center; }

  /* Flache, eckige Hairline-CTA (Welle 5.12b — Bauplan §S6): mono, klein
     (0.8rem), border-radius 0, 1px-Hairline in der aktuellen Deck-Ink (auf
     den Foto-Folien hell), kompaktes Padding. Kein Vollkreis-Pill mehr;
     --pitch-radius-pill bleibt als Token bestehen (unbenutzt hier, aber Teil
     des Deck-Token-Satzes). Der ↗-Pfeil bleibt (Deck-Konvention), ist aber
     seit Welle 6.2 (Stefan-GO 22.07. spät „nur Font Awesome") kein
     Eigenbau-Stroke-SVG mehr, sondern FA Pro Light „arrow-up-right"
     (fill-basiert statt stroke-basiert, s. Markup in den *-kontakt.php-
     Partials + Intro-/CTA-Buttons). */
  .pitch-pill {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; --mn-klein-color: var(--pitch-deck-ink);
    border: 1px solid color-mix(in srgb, currentColor 55%, transparent); border-radius: 0; padding: 0.5rem 1rem; cursor: pointer;
    background: transparent; transition: background 0.3s var(--enter), color 0.3s var(--enter), border-color 0.3s var(--enter);
  }
  .pitch-pill__arrow { display: inline-block; width: 12px; height: 12px; position: relative; transition: transform 0.35s var(--enter); }
  .pitch-pill__arrow svg { display: block; width: 100%; height: 100%; fill: currentColor; }
  .pitch-pill:hover, .pitch-pill:focus-visible { background: var(--pitch-deck-ink); color: var(--pitch-deck-bg); border-color: var(--pitch-deck-ink); }
  .pitch-pill:focus-visible { outline: none; box-shadow: inset 0 -2px 0 0 var(--pitch-deck-bg); }
  .pitch-pill:hover .pitch-pill__arrow, .pitch-pill:focus-visible .pitch-pill__arrow { transform: translate(2px, -2px); }
  .pitch-pill--solid { background: var(--pitch-deck-ink); border-color: var(--pitch-deck-ink); color: var(--pitch-deck-bg); }
  .pitch-pill--solid:hover, .pitch-pill--solid:focus-visible { background: #fff; border-color: #fff; color: #000; }

  /* E-Mail-Zweitlink (der nicht-solide Pill in .pitch-actions): noch stiller —
     reiner Text ohne Rahmen/Kasten, der ↗-Pfeil entfällt ("nur Text"). Beim
     Hover erscheint eine 1px-Hairline-Unterkante, im Fokus eine 2px-Ink-
     Unterkante (Marken-Fokuskanon). Trifft ausschließlich die Mail-Adresse
     der Kontakt-Folien (Primär-CTA = --solid; Übersicht = .pitch-next/-chain). */
  .pitch-actions .pitch-pill:not(.pitch-pill--solid) {
    border-color: transparent; background: none; padding-inline: 0;
    color: color-mix(in srgb, var(--pitch-deck-ink) 82%, transparent);
  }
  .pitch-actions .pitch-pill:not(.pitch-pill--solid) .pitch-pill__arrow { display: none; }
  .pitch-actions .pitch-pill:not(.pitch-pill--solid):hover,
  .pitch-actions .pitch-pill:not(.pitch-pill--solid):focus-visible {
    background: none; border-color: transparent; color: var(--pitch-deck-ink);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  .pitch-actions .pitch-pill:not(.pitch-pill--solid):focus-visible {
    outline: none; box-shadow: none; text-decoration-thickness: 2px;
  }

  /* ruhiger Mono-Link neben der primären Pill (Akzent-Folie) */
  .pitch-next { text-decoration: none; --mn-klein-color: rgba(255, 255, 255, 0.6); transition: color 0.25s var(--enter); }
  .pitch-next:hover, .pitch-next:focus-visible { color: rgba(255, 255, 255, 0.95); }
  .pitch-next:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; border-radius: var(--radius-sm); }

  /* Chain-Link — „weiter im Pitch: X →" / „zur Übersicht →" (siehe
     Zuordnungstabelle oben: konsolidiert .deck-next + .chain-link aus vier
     bzw. einer Quelle). Anders als .pitch-next (INNERHALB .pitch-actions,
     neben der primären Pill) sitzt der Chain-Link UNTERHALB der Actions,
     block-level, meist zu zweit (Kette zum nächsten Deck + Rückweg zur
     Übersicht) — daher eigener margin-top statt Flex-Gap, und ein
     Geschwister-Abstand für den zweiten Link in derselben Zeile. */
  .pitch-chain-link {
    display: inline-block; margin-top: clamp(20px, 3vh, 28px);
    text-decoration: none; --mn-klein-color: rgba(255, 255, 255, 0.5); transition: color 0.25s var(--enter);
  }
  .pitch-chain-link + .pitch-chain-link { margin-left: clamp(16px, 2vw, 24px); }
  .pitch-chain-link:hover, .pitch-chain-link:focus-visible { color: rgba(255, 255, 255, 0.92); }
  .pitch-chain-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; border-radius: var(--radius-sm); }
}

/* ================================================================
   ECKEN-BUTTONS — Kachel-Toggle, Farbe, Theme, Close. Sitzen seit dem
   NACHTRAG 21.07. (Engine-Ausbau Welle 3, siehe Kopfkommentar) wieder in
   der ruhigen Viewport-Ecke (top:16px, wie in der Quelle) statt unter
   einer Topbar-Höhe — die frühere `calc(var(--header-h) + 16px)`-Reserve
   (ABWEICHUNG 2/3) war nur nötig, solange die Seite eine Site-Topbar
   einband. Seit der KORREKTUR 21.07. abends bindet pitch/ueberblick.php
   KEINE Site-Topbar mehr ein (_includes/header.php nicht mehr require't)
   — der Versatz war seitdem eine leere Reserve ohne Gegenstück und
   schuf unnötig viel Abstand zur echten Ecke. top:16px deckt sich zudem
   vertikal mit `.pitch-intro__back` (dessen top:calc(var(--header-h)/2)
   bei den üblichen --header-h-Werten (clamp 64–88px) ziemlich genau auf
   Höhe des Button-Mittelpunkts bei top:16px + halbe Button-Höhe liegt —
   kein Bruch im ruhigen Rhythmus der Intro-Ebene). Geprüft bei 1440/390px
   (Kollisionsfreiheit zu Site-Inhalt entfällt ohnehin, da kein Site-Header
   mehr existiert) — Nachweis: Session-Report „Regression Überblick".
   Rechtsbündige Abstände (16/72/128) unverändert wie zuvor.
   ================================================================ */
@layer components {
  /* Nackte Icon-Bedienelemente (Welle 5.12b — Bauplan §S6): keine gerundeten
     Karten-Kästen mehr. Kleine FA-Pro-Light-Icons (16px) direkt auf dem
     Foto-Backdrop; die ≥44px-Hit-Area bleibt als unsichtbarer Button-Kasten
     erhalten (transparent, fängt weiterhin Klick/Tap). Ruhe-Opacity 0.7,
     Hover/Fokus 1.0. Fokus = 2px-Ink-Unterkante (Marken-Fokuskanon, wie
     Suchfeld/Chrome), kein Ring-Kasten. Ink adaptiert über --pitch-btn-fg. */
  .pitch-btn {
    position: fixed; z-index: 500; display: grid; place-items: center; cursor: pointer;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; border-radius: 0;
    color: var(--pitch-btn-fg); text-decoration: none; opacity: 0.7;
    transition: opacity 0.22s var(--enter), color 0.22s var(--enter);
  }
  .pitch-btn:hover, .pitch-btn:focus-visible { opacity: 1; }
  .pitch-btn:focus-visible { outline: none; box-shadow: inset 0 -2px 0 0 currentColor; }
  .pitch-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; filter: var(--pitch-icon-shadow); }
  /* Positionen: 48px-Raster (44px Hit-Area + 4px Luft), Rand fluid 12–20px. */
  .pitch-btn--toggle { top: 12px; left: clamp(12px, 3vw, 20px); }
  .pitch-btn--close  { top: 12px; right: clamp(12px, 3vw, 20px); }
  .pitch-btn--theme  { top: 12px; right: calc(clamp(12px, 3vw, 20px) + 48px); }
  .pitch-btn--color  { top: 12px; right: calc(clamp(12px, 3vw, 20px) + 96px); }
  .pitch-btn--theme .pitch-ic-sun { display: none; }
  html[data-theme='light'] .pitch-btn--theme .pitch-ic-sun { display: block; }
  html[data-theme='light'] .pitch-btn--theme .pitch-ic-moon { display: none; }
  /* Mobil (< 400px): drei rechtsbündige Icons würden in den Rand laufen —
     Farbe/Theme wandern links neben den Kachel-Toggle, Close bleibt rechts. */
  @media (max-width: 400px) {
    .pitch-btn--color { top: 12px; left: calc(clamp(12px, 3vw, 20px) + 96px); right: auto; }
    .pitch-btn--theme { top: 12px; left: calc(clamp(12px, 3vw, 20px) + 48px); right: auto; }
  }
}

/* ================================================================
   KACHEL-NAVIGATION — echter Bild-Kachel-Slider im unteren Foto-Rand
   ================================================================ */
@layer components {
  .pitch-tilenav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 499; display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 10px clamp(12px, 3vw, 28px) 11px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.72) 44%, rgba(0, 0, 0, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
  body:not(.pitch-nav-open) .pitch-tilenav { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(16px); }
  body.pitch-nav-open .pitch-tilenav { visibility: visible; opacity: 1; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .pitch-tilenav { transition: opacity 0.3s var(--enter), transform 0.35s var(--enter), visibility 0s 0.35s; }
    body.pitch-nav-open .pitch-tilenav { transition: opacity 0.3s var(--enter), transform 0.35s var(--enter), visibility 0s 0s; }
  }
  /* Floor-Fix (Welle 6.2 — Bauplan §6.11): 9.5px → 0.75rem-Mono-Floor
     (prototype-rules §4, kleinste erlaubte Größe). max-width/overflow/
     ellipsis als Sicherheitsnetz — die Zeile selbst bleibt bei üblichen
     Viewport-Breiten unbetroffen (fester Text, keine Kürzung nötig), greift
     nur als Schutz vor extrem schmalen Viewports. */
  .pitch-tilenav__foot { order: 2; --mn-klein-color: var(--pitch-navfoot); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: 0.85; }
  /* Wortmarke statt Textzeile (eigenstaendige Deck-Site, Shell-Argument tileFooterLogo). */
  .pitch-tilenav__marke { display: block; height: 18px; width: auto; }
  .pitch-tilenav__bar { order: 1; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 1160px; }
  /* Nackt/flach (Welle 6.2 — Bauplan §S6/§6.11): kein Kasten/Blur/Border mehr
     (vormals boxed mit --pitch-btn-bg/-br/-hover-*, jetzt verwaist + aus dem
     TOKENS-Block entfernt, s. dortiger Kommentar). Sitzt auf der IMMER
     dunklen Foto-Scrim der Leiste (wie .pitch-tilenav__foot) — Ink daher
     --pitch-deck-ink (immer Weiß, theme-invariant), NICHT das theme-reaktive
     --pitch-btn-fg. 44px-Hit-Area bleibt (FA-Icon 16px), Ruhe-Opacity 0.7 /
     Hover+Fokus 1.0, Fokus = 2px-Ink-Unterkante (Marken-Fokuskanon, wie
     .pitch-btn), theme-invarianter Legibilitäts-Halo
     --pitch-tilenav-icon-shadow. */
  .pitch-tilenav__arrow {
    flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    background: none; border: 0; border-radius: 0; cursor: pointer;
    color: var(--pitch-deck-ink); opacity: 0.7;
    transition: opacity 0.2s var(--enter);
  }
  .pitch-tilenav__arrow:hover:not([disabled]), .pitch-tilenav__arrow:focus-visible:not([disabled]) { opacity: 1; }
  .pitch-tilenav__arrow:focus-visible:not([disabled]) { outline: none; box-shadow: inset 0 -2px 0 0 currentColor; }
  .pitch-tilenav__arrow[disabled] { opacity: 0.3; cursor: default; }
  .pitch-tilenav__arrow svg { width: 16px; height: 16px; fill: currentColor; filter: var(--pitch-tilenav-icon-shadow); }
  .pitch-tilenav__track {
    flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding: 2px; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
  }
  .pitch-tilenav__track::-webkit-scrollbar { display: none; }
  .pitch-tile { flex: 0 0 auto; scroll-snap-align: center; display: flex; flex-direction: column; gap: 6px; width: 128px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; }
  .pitch-tile__thumb {
    width: 128px; height: 80px; object-fit: cover; border-radius: var(--radius-md); display: block;
    filter: grayscale(1) contrast(1.05) brightness(0.88); border: 1px solid rgba(255, 255, 255, 0.18);
    transition: filter 0.22s, border-color 0.22s, transform 0.22s;
  }
  /* Floor-Fix (Welle 6.2 — Bauplan §6.11): 9.5px → 0.75rem-Mono-Floor
     (prototype-rules §4). max-width/overflow/ellipsis bereits vorhanden —
     Kachel-Breite bleibt 128px (bzw. 104px im 560px-Breakpoint unten);
     wenige besonders lange Labels ("WAS EIN AGENT IST", "SO FÄNGST DU AN",
     "MASSGESCHNEIDERT") werden dadurch sichtbar per Ellipsis gekürzt statt
     umgetextet — geprüft, Kachel-Layout bricht nicht (s. Session-Report). */
  .pitch-tile__label { --mn-klein-color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 128px; transition: color 0.22s; }
  .pitch-tile:hover .pitch-tile__thumb, .pitch-tile:focus-visible .pitch-tile__thumb { border-color: rgba(255, 255, 255, 0.55); filter: grayscale(1) contrast(1.05) brightness(1); }
  .pitch-tile[aria-selected='true'] .pitch-tile__thumb { border-color: #fff; filter: grayscale(1) contrast(1.08) brightness(1.05); transform: translateY(-2px); }
  .pitch-tile[aria-selected='true'] .pitch-tile__label { color: #fff; }
  .pitch-tile:focus-visible { outline: none; }
  .pitch-tile:focus-visible .pitch-tile__thumb { outline: 2px solid #fff; outline-offset: 2px; }
  @media (max-width: 560px) {
    .pitch-tile { width: 104px; }
    .pitch-tile__thumb { width: 104px; height: 66px; }
    .pitch-tile__label { max-width: 104px; }
  }
}

/* ================================================================
   DENSE-MODIFIER — .pitch-slide--dense (siehe Zuordnungstabelle: portiert
   aus .s-dense, mincore/minpaos/madeinn/kama, 2026-07-21). Escape-Hatch
   für Folien, deren Headline auf viele Zeilen umbricht + einen langen
   Body-Absatz trägt — bei line-height 1.1 würden sie die Karte sprengen.
   Trimmt die Display-Größe eine Stufe runter und strafft den vertikalen
   Rhythmus NUR auf der geflaggten Folie; Copy bleibt unangetastet, jede
   andere Folie behält die regulären Maße. Kombinierbar mit split/
   listing/numbers/cols/editorial (Werte je Kombination aus den fünf
   gelesenen Preview-Decks synthetisiert — moab/mincore/minpaos stimmen
   für split/editorial/listing überein, kama ergänzt numbers/cols/den
   split-Sonderfall unten stammt aus minpaos).
   ================================================================ */
@layer components {
  .pitch-slide--dense .pitch-display { font-size: clamp(30px, 5.6vw, 86px); }
  .pitch-slide--dense .pitch-split__txt { gap: clamp(10px, 1.6vh, 18px); }
  .pitch-slide--dense .pitch-card__inner { padding-top: clamp(64px, 9vh, 92px); padding-bottom: clamp(20px, 3.5vw, 44px); }
  .pitch-slide--dense .pitch-editorial-foot { margin-top: clamp(16px, 3vh, 36px); gap: 16px; }
  .pitch-slide--dense .pitch-editorial-foot .pitch-actions { margin-top: clamp(14px, 2.4vh, 24px); }
  /* minpaos S8: zusätzlicher Spalten-Abstand im Split-Layout — ein
     umgebrochenes Dense-Wort sonst zu nah am Bild-Rand (gemessene ≥4px-
     Kollision; das 1fr/1fr-Grid reicht nur die Hälfte jeder Gap-Erhöhung
     an den Bildrand durch, daher +28px statt der sonst üblichen +14px). */
  .pitch-slide--dense .pitch-split__layout { column-gap: calc(clamp(28px, 5vw, 72px) + 28px); }
  .pitch-slide--dense .pitch-listing__row { padding: clamp(5px, 1vh, 14px) 0; }
  .pitch-slide--dense .pitch-listing__title { margin-top: 2px; }
  .pitch-slide--dense .pitch-listing__note { margin-top: clamp(8px, 1.6vh, 18px); }
  .pitch-slide--dense .pitch-numbers__row { padding: clamp(4px, 1vh, 12px) 0; }
  .pitch-slide--dense .pitch-numbers__head { margin-bottom: 8px; }
  .pitch-slide--dense .pitch-term__body { gap: clamp(6px, 1vh, 12px); }
  .pitch-slide--dense .pitch-cols__head { gap: 10px; }
  .pitch-slide--dense .pitch-cols__head .pitch-body { margin-top: clamp(14px, 2.4vh, 28px); }
  .pitch-slide--dense .pitch-cols figure { aspect-ratio: auto; height: clamp(120px, 24vh, 220px); }
}

/* ================================================================
   EDIT-MODUS (ABWEICHUNG 6) — deck.js setzt body.pitch-edit, sobald der
   minEdit-Marker im DOM erkannt wird. Hebt die feste Intro-Positionierung
   auf (normaler Fluss, damit Intro-Text UND Deck-Folien gleichzeitig
   sichtbar + editierbar sind), erzwingt freies Scrollen, unterbindet den
   CSS-Scroll-Snap-Fallback (auch den reduced-motion-Fallback unten).
   ================================================================ */
@layer components {
  body.pitch-edit.pitch-open { overflow-y: auto; height: auto; }
  body.pitch-edit .pitch-intro {
    position: static; inset: auto; height: auto; min-height: 60svh; z-index: auto;
  }
  body.pitch-edit .pitch-deck__stage,
  body.pitch-edit .pitch-btn,
  body.pitch-edit .pitch-tilenav { display: revert; }
  body.pitch-edit .pitch-slide { scroll-snap-align: none; }
  body.pitch-edit :where(.pitch-deck, .pitch-intro) { scroll-snap-type: none !important; }
}

/* Native Deck-Navigation für Touch/grobe Zeiger und den defensiven
   Fallback ohne GSAP. Reduced Motion bekommt bewusst KEIN Snapping. */
html:has(body.pitch-open.pitch-native-snap) { scroll-snap-type: y mandatory; }
body.pitch-open.pitch-native-snap .pitch-slide { scroll-snap-align: start; }

/* ================================================================
   REDUCED MOTION — alles sichtbar und vollständig frei scrollbar.
   Auch sanftes Scrollen und obligatorisches Snapping sind Bewegung und
   werden deshalb in diesem Modus nicht erzwungen.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .pitch-display.pitch-split { visibility: visible !important; }
  .pitch-split-word > span, .pitch-fade, .pitch-split__media img { transform: none !important; opacity: 1 !important; }
  .pitch-slide--intro .pitch-slide__bg img, .pitch-intro__bg img { animation: none !important; }
  html:has(body.pitch-open) { scroll-behavior: auto; scroll-snap-type: none; }
  body.pitch-open .pitch-slide { scroll-snap-align: none; }
}

/* ================================================================
   ORGANISMUS-EBENE IM DECK (Stefan-Direktive 30.08.2026)
   ================================================================
   „In der feinsten, unscheinbaren, dezentesten Form, dass die der Maus
   folgt … und das muss auch im Dark Mode funktionieren."

   Die Ebene wird von deck.js erzeugt und liegt zwischen dem festen
   Hintergrundfoto (--backdrop, z-index 2) und der Folienkarte
   (--stage, z-index 3). Sie liegt damit genau dort, wo das Deck
   ohnehin leer ist: auf dem Fotorand links und rechts der Karte.

   Sie faengt keine Klicks ab und ist fuer Screenreader unsichtbar
   (aria-hidden setzt deck.js). Jede Groesse haengt an einer Variablen —
   wer die Sichtbarkeit anders will, aendert genau einen Wert.
   ================================================================ */
@layer components {
  .pitch-organism {
    position: fixed; inset: 0; z-index: 2;
    pointer-events: none;
    opacity: var(--pitch-organism-deckkraft, 0.72);
    transition: opacity 0.6s var(--enter, ease);
  }
  .pitch-organism canvas { display: block; width: 100%; height: 100%; }

  /* Solange das Deck zu ist, steht der Einstieg im Vordergrund und die
     Ebene wuerde nur ueber seinem Foto liegen — sie bleibt still. */
  body:not(.pitch-open) .pitch-organism { opacity: 0; }

  /* Der Lichtkegel der Station „zeiger" hellt im Dunkelmodus additiv auf
     und duennt im Hellmodus Tinte aus (siehe stationen.js). Beide Faelle
     brauchen eine andere Deckkraft, damit er gleich leise wirkt. */
  html[data-theme='light'] .pitch-organism { --pitch-organism-deckkraft: 0.9; }

  /* Wer Bewegung reduziert bekommt gar keine Ebene (deck.js laedt die
     Engine dann nicht). Diese Regel ist der Guertel dazu. */
  @media (prefers-reduced-motion: reduce) {
    .pitch-organism { display: none; }
  }
}

/* ================================================================
   PITCH-UEBERSICHT (Backend-Layout „made in nature: Pitch-Uebersicht")
   ================================================================
   Stefan, 30.08.2026: „Wieso Fluid-Override. Mach doch ein
   Backend-Layout." Genau so gebaut — die Seite bekommt eigene Kaesten
   und laedt dieselbe deck.css wie die Decks. Damit gilt hier ohne eine
   einzige zusaetzliche Datei: Anton in den Titeln, die Kartenfarben,
   beide Farbmodi.

   Es entsteht KEIN neuer Content Block. Die Karten sind derselbe
   Baustein „Pitch-Folie" in zwei zusaetzlichen Aufbauten:
     hub-gate   breite Einstiegskarte, Bild links, Text rechts
     hub-card   Kachel, Bild oben, Text darunter
   Die breite Karte belegt im Raster die volle Zeile — die Reihenfolge
   macht die Redaktion durch Verschieben, nicht durch einen zweiten Kasten.
   ================================================================ */
@layer components {
  .pitch-hub {
    --hub-spalte: 20rem;
    --hub-luft: clamp(14px, 1.6vw, 24px);
    background: var(--pitch-hub-flaeche, var(--surface, #fff));
    color: var(--pitch-hub-schrift, var(--ink, #111));
    padding: clamp(24px, 4vw, 64px) clamp(20px, 4vw, 72px) clamp(48px, 7vw, 96px);
  }

  /* Der Kopf ist der vorhandene Pitch-Einstieg. Auf der Uebersicht steht
     er im Fluss statt fest im Fenster — sonst laege das Kartenraster
     unter einem bildschirmfuellenden Foto begraben. */
  .pitch-hub .pitch-intro {
    position: relative; inset: auto; min-height: clamp(360px, 52svh, 620px);
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: clamp(28px, 4vw, 56px);
  }
  .pitch-hub .pitch-deck__backdrop,
  .pitch-hub .pitch-btn,
  .pitch-hub .pitch-tilenav,
  .pitch-hub .pitch-intro__launch { display: none; }
  .pitch-hub .pitch-intro__inner { padding: clamp(48px, 7vh, 96px) clamp(28px, 5vw, 64px); }

  .pitch-hub__karten {
    display: grid; gap: var(--hub-luft);
    grid-template-columns: repeat(auto-fill, minmax(var(--hub-spalte), 1fr));
    align-items: stretch;
  }

  /* Die Karten tragen aus dem Baustein heraus weiterhin .pitch-slide und
     .pitch-slide--deck. Im Deck heisst das „eine Folie = ein voller
     Bildschirm" (height:100svh). Auf der Uebersicht waeren das neun
     Bildschirme uebereinander — hier zaehlt der Inhalt. */
  .pitch-hub .pitch-slide,
  .pitch-hub .pitch-slide--deck {
    height: auto; min-height: 0; padding: 0; display: flex;
    position: relative; inset: auto; scroll-snap-align: none;
  }

  .pitch-hub-karte {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--pitch-hub-karte-flaeche, color-mix(in srgb, currentColor 4%, transparent));
    border: 1px solid var(--pitch-hub-karte-linie, color-mix(in srgb, currentColor 12%, transparent));
    transition: transform 0.35s var(--enter, ease), border-color 0.35s;
  }
  .pitch-hub-karte:hover { transform: translateY(-2px); border-color: color-mix(in srgb, currentColor 26%, transparent); }

  .pitch-hub-karte__bild { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
  .pitch-hub-karte__bild img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(1) contrast(1.02);
    transition: transform 0.6s var(--enter, ease), filter 0.4s;
  }
  html[data-color='on'] .pitch-hub-karte__bild img { filter: none; }
  .pitch-hub-karte:hover .pitch-hub-karte__bild img { transform: scale(1.03); }

  .pitch-hub-karte__text {
    display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); flex: 1;
    padding: clamp(20px, 2vw, 30px);
  }
  /* Der Kartentitel nimmt dieselbe Pitchdeck-Ueberschrift wie die Folien —
     eine Quelle, sechs Werte aus den Website-Einstellungen. Nur die
     Groesse ist kartengerecht. */
  .pitch-hub-karte__titel {
    font-family: var(--pitch-kopf, var(--disp));
    font-weight: var(--weight-pitch-h1, 400);
    text-transform: var(--versal-pitch-h1, uppercase);
    line-height: var(--lh-pitch-h1, 1.1);
    letter-spacing: var(--ls-pitch-h1, -0.012em);
    font-size: var(--pitch-hub-titel, clamp(22px, 2.2vw, 34px));
    margin: 0;
  }
  .pitch-hub-karte__body {
    font-family: var(--body); font-size: var(--pitch-hub-text, clamp(16px, 1.05vw, 18px));
    line-height: 1.62; color: color-mix(in srgb, currentColor 76%, transparent);
  }
  .pitch-hub-karte__aktion { margin-top: auto; padding-top: 12px; }
  .pitch-hub-karte__link {
    font-family: var(--body); font-size: var(--pitch-hub-text, clamp(16px, 1.05vw, 18px));
    color: var(--accent); text-decoration: none;
  }
  .pitch-hub-karte__link:hover { text-decoration: underline; }
  /* Die ganze Karte ist anklickbar — der Link spannt sich darueber. */
  .pitch-hub-karte { position: relative; }
  .pitch-hub-karte__link::after { content: ''; position: absolute; inset: 0; }

  /* Die breite Einstiegskarte: volle Zeile, Bild links. */
  .pitch-hub-karte--breit { grid-column: 1 / -1; flex-direction: row; }
  .pitch-hub-karte--breit .pitch-hub-karte__bild { flex: 0 0 min(38%, 420px); aspect-ratio: auto; }
  .pitch-hub-karte--breit .pitch-hub-karte__text {
    justify-content: center; gap: 12px; padding: clamp(22px, 3vw, 44px);
  }
  .pitch-hub-karte--breit .pitch-hub-karte__titel { font-size: var(--pitch-hub-titel-breit, clamp(30px, 3.6vw, 56px)); }
  .pitch-hub-karte--breit .pitch-hub-karte__body { max-width: none; }
  @media (max-width: 720px) {
    .pitch-hub-karte--breit { flex-direction: column; }
    .pitch-hub-karte--breit .pitch-hub-karte__bild { flex: none; aspect-ratio: 16 / 10; }
  }
}

/* ================================================================
   PRODUKTBILD GROSS MIT BEWEGUNG (Aufbau „hq-visual")
   ================================================================
   Stefan, 30.08.2026 zur minCore-Folie: „hier geile Motiongraphik mit
   HQ-Graphic aus app."

   Der Bildschirmabzug der App ist 2200 px breit und wurde vorher in eine
   Spalte von rund 500 px gequetscht — von der Oberflaeche war nichts mehr
   zu lesen. Hier bekommt er die volle Kartenbreite, sitzt scharf auf der
   Kante und faehrt beim Scrollen langsam heran.

   Die Bewegung ist reines CSS an einer Scroll-Zeitachse. Faellt die
   Browser-Unterstuetzung aus, steht das Bild einfach still — es gibt
   keinen Zustand, in dem etwas fehlt. Wer Bewegung reduziert bekommt,
   sieht ebenfalls das ruhige Bild.
   ================================================================ */
@layer components {
  .pitch-hq { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 34px); }
  .pitch-hq__kopf { flex: 0 0 auto; max-width: var(--pitch-textspalte); --pitch-textspalte: 100%; }

  .pitch-hq__buehne {
    position: relative; flex: 1; min-height: 0;
    border-radius: var(--radius-md); overflow: hidden;
    background: var(--pitch-panel-bg, color-mix(in srgb, var(--pitch-ink) 5%, var(--pitch-paper)));
    border: 1px solid var(--pitch-line);
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--pitch-ink) 45%, transparent);
  }
  .pitch-hq__buehne img {
    width: 100%; height: 100%; object-fit: cover; object-position: 0 0; display: block;
    /* Der Abzug ist eine Bildschirmoberflaeche, keine Landschaft: er bleibt
       farbig und ungefiltert, auch wenn das Deck sonst grau zeichnet. */
    filter: none;
    transform-origin: 0 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .pitch-hq__buehne img {
        animation: pitch-hq-heran linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 70%;
      }
    }
  }
  @keyframes pitch-hq-heran {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(1.06) translateY(-2%); }
  }

  /* Im Schwarz-Modus bekommt die helle Oberflaeche einen ruhigen Rahmen,
     damit sie nicht als weisser Block auf der Karte steht. */
  .pitch-t-dark .pitch-hq__buehne { border-color: color-mix(in srgb, #fff 22%, transparent); }

  /* Auf schmalen Geraeten passt eine 2200 px breite Oberflaeche nicht als
     Ausschnitt: man saehe nur die linke obere Ecke. Dort steht sie ganz da,
     lieber klein als angeschnitten. */
  @media (max-width: 900px) {
    .pitch-hq__buehne { min-height: 0; }
    .pitch-hq__buehne img { object-fit: contain; object-position: center; height: auto; }
  }
}

/* ================================================================
   DAS GERUEST (Stefan-Referenz 30.08.2026)
   ================================================================
   Stefan hat zwei Vorlagen gezeigt und dazu gesagt: „Unser Styleguide
   bleibt. Ich meine das gestalterische Konzept."

   Was aus den Vorlagen uebernommen wird, ist kein Ton und keine Schrift,
   sondern ein Rahmen, der auf JEDER Folie gleich sitzt:

     oben rechts eine Kleinnotiz — der Folienname
     Kopf    Ueberschrift, darunter eine kurze Linie
     unten   die Inhaltszone

   Die Notiz steht bereits im Markup (data-tile an jeder Folie) und wird
   hier nur sichtbar gemacht — kein zusaetzliches Feld, keine Pflege, keine
   zweite Datenquelle.

   Eine senkrechte Randspalte, wie sie die zweite Vorlage zeigt, ist
   ausdruecklich NICHT uebernommen (Stefan, 30.08.2026).

   Farben und Schrift kommen unveraendert aus dem Styleguide: die
   Kleinschrift ist .mn-klein, die Linie nimmt --pitch-line, die
   Akzentfarbe steht in --accent.
   ================================================================ */
@layer components {
  .pitch-card {
    --geruest-rand: clamp(18px, 2.2vw, 34px);
    --geruest-notiz: var(--type-klein, 0.75rem);
  }

  /* Hier stand bis 30.08.2026 der Folienname als Kleinnotiz oben rechts,
     uebernommen aus Stefans zweiter Stilvorlage. Er sagte am selben Tag:
     „Kommunen steht da jetzt doppelt als Ueberschrift!" — die Notiz
     wiederholte auf fast jeder Folie das gruene Etikett. Sie ist damit
     gestrichen; das Etikett bleibt die einzige Einordnung. */

  /* Die kurze Linie unter der Ueberschrift. Sie ist das Zeichen, an dem
     man die Folie als Deck-Folie erkennt — kurz, nicht ueber die Breite. */
  :is(.pitch-display, .pitch-intro__title)::after {
    content: ''; display: block;
    width: var(--geruest-linie, 3.5rem); height: 2px;
    margin-top: var(--pitch-kopf-abstand, 0.5em);
    background: currentColor; opacity: 0.5;
  }

  /* Ein Zweiklang in der Ueberschrift (erstes Wort dunkel, Rest in der
     Markenfarbe) stand in Stefans zweiter Vorlage. Er ist hier bewusst
     NICHT uebernommen: Stefan am 30.08.2026 - Ansonsten alles in unserem
     Stil lassen. */
}

/* ================================================================
   DREI NEUE FOLIENTYPEN (ARTD, Erscheinungsbild-Brief 30.08.2026)
   ================================================================ */
@layer components {
  /* --- Kapitelmarke ------------------------------------------------
     Vollbild, ein bis drei Woerter, sonst nichts. Kein Etikett, kein
     Fuss, keine Linie, keine Bewegung. Sie ist die Zaesur vor einem
     Kapitel und traegt genau deshalb keinen zweiten Gedanken. */
  .pitch-marke {
    justify-content: center; align-items: flex-start;
  }
  .pitch-marke .pitch-display {
    margin: 0; max-width: var(--pitch-kopf-breite, 12ch);
    font-size: var(--type-marke, clamp(44px, 9vw, 148px));
  }
  /* Die kurze Linie unter der Ueberschrift entfaellt hier. */
  .pitch-marke .pitch-display::after { display: none; }

  /* --- Reihe -------------------------------------------------------
     Drei Hochformate nebeneinander in ungleichen Breiten 4 : 3 : 5,
     buendig an der Unterkante. Ungleich, damit es keine Tabelle wird. */
  .pitch-reihe {
    margin-top: clamp(24px, 5vh, 64px);
    display: grid; grid-template-columns: 4fr 3fr 5fr;
    gap: clamp(10px, 1.4vw, 20px);
    align-items: end; flex: 1; min-height: 0;
  }
  .pitch-reihe__bild { margin: 0; overflow: hidden; border-radius: 0; height: 100%; min-height: clamp(180px, 34vh, 420px); }
  .pitch-reihe__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Auf dem Handy bleiben zwei Bilder nebeneinander, ungleich breit.
     Untereinander gestapelt waere es keine Reihe mehr. */
  @media (max-width: 700px) {
    .pitch-reihe { grid-template-columns: 3fr 5fr; }
    .pitch-reihe__bild:nth-child(3) { display: none; }
  }

  /* Eine Zahlen-Folie ohne Karte stand in ARTDs Brief als staerkste
     Zaesur. Stefan am 30.08.2026: „Jedes Pitch muss einen Hintergrund
     haben!" Damit ist sie gestrichen; die Zahlen stehen auf der Karte
     wie jede andere Folie auch. */

  /* --- Liste: Verhaeltnis 5 : 7 statt 240 px : Rest ----------------- */
  .pitch-listing__row { grid-template-columns: 5fr 7fr; }
  @media (max-width: 700px) {
    .pitch-listing__row { grid-template-columns: 1fr; gap: 6px; }
  }

  /* --- Halbbild auf dem Handy --------------------------------------
     Einspaltig, Text zuerst, Bild darunter im Format 16:10 und
     weiterhin randlos zu den Seitenkanten. */
  @media (max-width: 700px) {
    /* Diese Regeln stehen bewusst HIER am Dateiende: der Split-Block weiter
       oben wurde spaeter neu geschrieben und haette die aeltere Handy-Regel
       sonst geschlagen — das Halbbild blieb dann zweispaltig und ragte bis
       zu 200 px aus der Karte. */
    .pitch-split__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pitch-slide--split .pitch-card__inner,
    .pitch-slide--split.pitch-slide--flip .pitch-card__inner { padding-left: clamp(20px, 6vw, 28px); padding-right: clamp(20px, 6vw, 28px); }
    .pitch-slide--split .pitch-split__media {
      position: relative; inset: auto; width: auto;
      /* align-self:stretch aus der Breitbild-Regel wuerde die Hoehe auf die
         Zeilenhoehe ziehen; zusammen mit aspect-ratio leitet das Bild daraus
         seine BREITE ab und wurde 559 px breit in einer 312-px-Spalte. */
      align-self: start; height: auto;
      margin: 0 calc(-1 * clamp(20px, 6vw, 28px)); aspect-ratio: 16 / 10;
    }
    .pitch-slide--split .pitch-split__txt { order: 1; }
    .pitch-slide--split .pitch-split__media { order: 2; }
  }
}

/* ================================================================
   LISTE IM NEUEN AUFBAU (Stefan 30.08.2026)
   ================================================================
   „Voellig unpassend zum neuen Pitch-Layout" und „wiederholen sich drei
   mal hintereinander". Beides stimmte: die Liste stand vollbreit mit
   einem leeren unteren Drittel, und vier gleiche Folien hintereinander
   lesen sich als Aufzaehlung statt als Kapitel.

   Zwei Antworten. Erstens fuellen die Zeilen die Karte, statt oben zu
   kleben. Zweitens kann eine Liste dasselbe randlose Halbbild tragen wie
   die Split-Folien — damit steht in einer Reihe von Listen nie dieselbe
   Folie zweimal.
   ================================================================ */
@layer components {
  /* Die Zeilen verteilen sich ueber die Resthoehe. Kein leerer Fuss mehr. */
  .pitch-slide--listing .pitch-card__inner { justify-content: flex-start; }
  .pitch-listing__rows {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: space-evenly;
  }
  .pitch-listing__row { border-top: 1px solid var(--pitch-line); }

  /* Liste mit Halbbild: Kopf und Zeilen auf der linken Haelfte, das Bild
     randlos rechts — dieselbe Kante wie bei den Split-Folien. */
  .pitch-slide--listing-bild .pitch-card__inner { padding-right: 0; }
  .pitch-slide--listing-bild .pitch-split__media {
    position: absolute; inset: 0 0 0 auto; width: 50%;
  }
  .pitch-slide--listing-bild :is(.pitch-label, .pitch-display, .pitch-body, .pitch-listing__rows) {
    width: calc(50% - clamp(28px, 5vw, 72px));
  }
  .pitch-slide--listing-bild .pitch-listing__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }

  @media (max-width: 900px) {
    .pitch-slide--listing-bild .pitch-card__inner { padding-right: clamp(20px, 6vw, 28px); }
    .pitch-slide--listing-bild .pitch-split__media { position: relative; inset: auto; width: auto; aspect-ratio: 16 / 10; margin-top: clamp(20px, 4vh, 36px); }
    .pitch-slide--listing-bild :is(.pitch-label, .pitch-display, .pitch-body, .pitch-listing__rows) { width: 100%; }
  }
}

/* ================================================================
   WORTMARKE AUF DER STARTSEITE (Stefan 30.08.2026)
   ================================================================
   „Startseite made in nature Logo". Die weisse Fassung, weil der
   Einstieg immer auf einem dunkel gefilterten Foto liegt — in beiden
   Modi. Groesse ueber eine Variable, damit sie einstellbar bleibt.
   ================================================================ */
@layer components {
  .pitch-intro__marke {
    display: block; height: auto;
    width: var(--pitch-marke-breite, clamp(132px, 13vw, 208px));
    margin-bottom: clamp(14px, 2.4vh, 26px);
  }
}

/* ================================================================
   ZAHLEN-FOLIE IM NEUEN AUFBAU (Stefan 30.08.2026: „das folgt keiner
   Gestaltung") — dieselbe Behandlung wie die Liste: die Zeilen fuellen
   die Karte, und ein randloses Halbbild bindet die Folie in den Rhythmus.
   ================================================================ */
@layer components {
  .pitch-slide--numbers .pitch-card__inner { justify-content: flex-start; }
  .pitch-numbers__rows {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: space-evenly;
  }
  .pitch-slide--numbers-bild .pitch-card__inner { padding-right: 0; }
  .pitch-slide--numbers-bild .pitch-split__media { position: absolute; inset: 0 0 0 auto; width: 50%; }
  .pitch-slide--numbers-bild :is(.pitch-numbers__head, .pitch-body, .pitch-numbers__rows) {
    width: calc(50% - clamp(28px, 5vw, 72px));
  }
  @media (max-width: 900px) {
    .pitch-slide--numbers-bild .pitch-card__inner { padding-right: clamp(20px, 6vw, 28px); }
    .pitch-slide--numbers-bild .pitch-split__media { position: relative; inset: auto; width: auto; aspect-ratio: 16 / 10; margin-top: clamp(20px, 4vh, 36px); }
    .pitch-slide--numbers-bild :is(.pitch-numbers__head, .pitch-body, .pitch-numbers__rows) { width: 100%; }
  }
}

/* ================================================================
   FOLIENREIHE — Folien, die nach rechts weitergehen
   ================================================================
   Eine Folie mit „Anordnung im Deck: rechts neben der vorigen" haengt sich
   an ihren Vorgaenger. deck.js fasst so einen Lauf samt Vorgaenger zu einer
   Reihe zusammen: nach aussen EINE Folie im senkrechten Deck (ein
   Snap-Punkt, eine Kachel), nach innen ein waagerechter Streifen mit
   eigenem x-Snap. Senkrecht geht es unter der Reihe ganz normal weiter. */
@layer components {
  .pitch-quer { position: relative; }
  .pitch-quer__band {
    display: flex;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    outline: none;
  }
  .pitch-quer__band::-webkit-scrollbar { display: none; }
  .pitch-quer__folie { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; }

  /* Im nativen y-Snap zaehlt die Reihe als Folie; ihre Kinder liegen in
     einem eigenen Scroll-Container und snappen dort nur waagerecht. */
  body.pitch-open.pitch-native-snap .pitch-quer { scroll-snap-align: start; }

  /* Die kleine Navigation: Punkte in der Fotokante unter der Karte, dazu
     zwei leise Pfeile. Ein Punkt je Folie, der aktuelle gefuellt. */
  .pitch-quer__nav {
    position: absolute; left: 50%; bottom: calc(var(--pitch-pad) / 2);
    transform: translate(-50%, 50%);
    z-index: 5;
    display: flex; align-items: center; gap: 10px;
    color: var(--pitch-deck-ink, #fff);
  }
  .pitch-quer__punkt,
  .pitch-quer__pfeil {
    appearance: none; border: 0; background: none; padding: 0; margin: 0;
    color: inherit; cursor: pointer; display: grid; place-items: center;
  }
  .pitch-quer__punkt { width: 22px; height: 22px; }
  .pitch-quer__punkt::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    border: 1px solid currentColor; background: transparent;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .pitch-quer__punkt[aria-current='true']::before { background: currentColor; transform: scale(1.15); }
  .pitch-quer__pfeil { width: 28px; height: 28px; opacity: 0.7; transition: opacity 0.2s ease; }
  .pitch-quer__pfeil:hover, .pitch-quer__pfeil:focus-visible { opacity: 1; }
  .pitch-quer__pfeil[disabled] { opacity: 0.25; cursor: default; }
  .pitch-quer__pfeil svg { width: 14px; height: 14px; display: block; }
  .pitch-quer__punkt:focus-visible, .pitch-quer__pfeil:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
  .pitch-quer__punkt-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) {
    .pitch-quer__band { scroll-behavior: auto; }
  }
}

/* ================================================================
   FASSUNG (lang/kurz) und Randpfeile der Folienreihe
   ================================================================ */
@layer components {
  /* Slides of the other version: the engine drops them from its list, this
     keeps them out of the flow (the deck's display:flex would beat [hidden]). */
  .pitch-slide[hidden] { display: none; }

  .pitch-btn--fassung {
    top: 12px; right: calc(clamp(12px, 3vw, 20px) + 192px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; line-height: 1;
  }
  .pitch-btn--fassung svg { width: 18px; height: 18px; }
  .pitch-btn__fassung { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
  body:not(.pitch-open) .pitch-btn--fassung { display: none; }
  @media (max-width: 720px) {
    .pitch-btn--fassung { left: calc(clamp(12px, 3vw, 20px) + 192px); right: auto; }
  }

  /* Edge arrows of a row, centred in the photo margin left and right of the
     card. Thin strokes in the deck's ink; the right one breathes so the eye
     finds it. Gone at the ends of the row, gone on phones (they swipe). */
  /* The arrows sit in a disc like the back-to-top button: dark on the light
     theme, white on the dark theme (Stefan, 10.09.2026). Same size, same
     shadow, so the corner and the edges speak one language. */
  .pitch-quer__seite {
    position: absolute; top: 50%; z-index: 5;
    width: 44px; height: 44px; margin-top: -22px;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%;
    background: var(--pitch-scheibe, rgba(30, 30, 30, 0.9));
    color: var(--pitch-scheibe-ink, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0.92; transition: opacity 0.2s ease;
  }
  html[data-theme='dark'] .pitch-quer__seite { --pitch-scheibe: rgba(255, 255, 255, 0.92); --pitch-scheibe-ink: #1e1e1e; }
  .pitch-quer__seite--links { left: calc(var(--pitch-pad) / 2 - 22px); }
  .pitch-quer__seite--rechts { right: calc(var(--pitch-pad) / 2 - 22px); }
  .pitch-quer__seite svg { width: 20px; height: 20px; display: block; }
  /* The deck's back-to-top follows the same rule, so both discs match. */
  html[data-theme='dark'] body:has([data-pitch-deck]) .mincore-back-to-top {
    background: rgba(255, 255, 255, 0.92); color: #1e1e1e;
  }
  .pitch-quer__seite:hover, .pitch-quer__seite:focus-visible { opacity: 1; }
  .pitch-quer__seite:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
  .pitch-quer__seite[disabled] { opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) {
    .pitch-quer__seite--rechts:not([disabled]) { animation: pitch-quer-wink 2.4s ease-in-out infinite; }
    .pitch-quer__seite--links:not([disabled]) { animation: pitch-quer-wink-links 2.4s ease-in-out infinite; }
  }
  @keyframes pitch-quer-wink { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  @keyframes pitch-quer-wink-links { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
  @media (max-width: 720px) { .pitch-quer__seite { display: none; } }
}