/* =========================================================================
   pitch-deck.css — Mandantenschicht „Himmel und Erde“. Lane DK, 14.09.2026.
   -------------------------------------------------------------------------
   WAS DAS HIER IST: ein Port, keine Neugestaltung. Das abgenommene Deck
   (Prototyp, Stefan 12.09.2026, EGON 8,4/10) liegt als statischer Abzug
   unter kunden/evkirche/preview/himmel-erde/typo3-first/praesentation.html.
   Seine Optik ist das Soll. Sein CSS ist aber fuer die Prototyp-Klassen
   (.pitch-title, .pitch-zeilen, .pitch-feld, .pitch-split__text) gebaut, und
   die stehen im Live-Markup nicht: dort rendert der min_core-Content-Block
   min_pitch_slide mit .pitch-display, .pitch-editorial-foot, .pitch-split__txt
   und .pitch-layout-editorial. Die alte Datei traf deshalb 32 gemeinsame
   Klassennamen mit fremder Bedeutung — daher die Bildlaufbalken (Lane O2,
   Bericht P0). Diese Fassung zielt ausschliesslich auf die Klassen, die im
   Live-Markup wirklich stehen.

   WARUM DAS OHNE !important GEWINNT: layer-order.css (min_core, forceOnTop)
   setzt die Reihenfolge
     reset, tokens, base, layout, components, min-navmain, modules, utilities,
     mandant, a11y
   fest. min_core/Css/ContentElements/pitchdeck.css schreibt in
   @layer components, diese Datei in @layer mandant — spaeter in der
   Reihenfolge, also gewinnt jede Regel hier unabhaengig von der Spezifitaet.
   Genau eine min_core-Regel traegt !important und ist damit unerreichbar:
     .pitch-t-dark .pitch-body { color: rgba(255,255,255,.82) !important }
   Deshalb faerbt die Vollbildfolie ihren Fliesstext ueber die Kinder
   (.pitch-body p/li), nicht ueber .pitch-body selbst.

   ROLLMODELL: unveraendert min_core. .pitch-card__inner bekommt hier KEIN
   overflow und keine feste Hoehe; eine Folie darf wachsen, gerollt wird die
   Seite. Die Hoehendeckel an den Bildern stammen aus dem Prototyp und halten
   die Folien in der Fensterhoehe.

   TOKENS: Farben, Schriften, Abstaende kommen aus dem Mandanten
   (prototype.css, --he-*). Eigene Werte stehen nur im Block „Tokens“ und
   nirgends sonst.
   ========================================================================= */

@layer mandant {
  /* =====================================================================
     TOKENS
     ===================================================================== */
  :root {
    /* Gedaempftes Weiss fuer die Flaechen, die in beiden Darstellungen
       dunkel bleiben (Einstieg, Vollbildfolien, Folienleiste). Kein reines
       Weiss auf Schwarz — Design-DNA des Kunden. */
    --pitch-ink-dark: #f6f2eb;
    --pitch-ink-dark-text: color-mix(in srgb, var(--pitch-ink-dark) 90%, transparent);
    --pitch-ink-dark-meta: color-mix(in srgb, var(--pitch-ink-dark) 86%, transparent);
    --pitch-ink-dark-leise: color-mix(in srgb, var(--pitch-ink-dark) 76%, transparent);
    --pitch-ink-dark-linie: color-mix(in srgb, var(--pitch-ink-dark) 12%, transparent);

    /* Scheibe unter einem Bedienelement: 0,55 haelt das helle Zeichen auch
       ueber der hellen Karte bei 3:1 (WCAG 1.4.11). */
    --pitch-scheibe: color-mix(in srgb, var(--he-ink-dark) 55%, transparent);
    --pitch-scheibe-stark: color-mix(in srgb, var(--he-ink-dark) 82%, transparent);

    /* Grund der Folienleiste: eine eigene Flaeche, kein Schleier. */
    --pitch-leiste-oben: color-mix(in srgb, var(--he-ink-dark) 74%, transparent);
    --pitch-leiste-mitte: color-mix(in srgb, var(--he-ink-dark) 94%, transparent);
    --pitch-leiste-unten: color-mix(in srgb, var(--he-ink-dark) 97%, transparent);
  }

  .pitch-deck,
  .pitch-slide {
    /* --- Karte und Tinte folgen der Darstellung des Mandanten --- */
    --pitch-paper: var(--he-paper);
    --pitch-ink: var(--he-ink);
    --pitch-muted: var(--he-muted);
    --pitch-line: var(--he-line);
    /* Einordnungszeile: im Hellen Himmelblau (9,9:1), im Dunkeln Gold. */
    --pitch-label: var(--he-blue);

    /* Flaechen, die min_core als echtes Schwarz/Weiss fuehrt. */
    --pitch-deck-bg: var(--he-ink-dark);
    --pitch-deck-ink: var(--pitch-ink-dark);
    --pitch-navfoot: var(--pitch-ink-dark-leise);
    --pitch-btn-fg: var(--pitch-ink-dark);
    --pitch-icon-shadow: none;
    --pitch-tilenav-icon-shadow: none;

    /* --- Zwei Achsen: der Schleier folgt der Darstellung, der Bildfilter
       dem Farbmodus. Farbe ist der Grundzustand dieses Decks. --- */
    --pitch-bildfilter: contrast(1);
    --pitch-slidebg-filter: var(--pitch-bildfilter);
    --pitch-backdrop-filter: contrast(1) brightness(0.62);
    --pitch-backdrop-veil: color-mix(in srgb, var(--he-blue-dark) 44%, transparent);

    /* Schleier NUR unter dem Textfeld eines Vollbilds: die oberen zwei
       Drittel des Fotos bleiben unberuehrt. */
    --pitch-veil: color-mix(in srgb, var(--he-ink-dark) 86%, transparent);
    --pitch-veil-mittel: color-mix(in srgb, var(--he-ink-dark) 62%, transparent);
    --pitch-veil-weich: color-mix(in srgb, var(--he-ink-dark) 42%, transparent);
    --pitch-slidebg-veil: linear-gradient(180deg, transparent 66%, var(--pitch-veil-weich) 100%);

    --pitch-pad: clamp(0.75rem, 3vw, 3rem);
    --pitch-card-max: 1360px;
    /* Die Kante, auf der die festen Bedienelemente stehen: die Kante der
       KARTE, nicht die des Fensters. */
    --ecke-x: max(calc((100vw - var(--pitch-card-max)) / 2), var(--pitch-pad));

    --pitch-text: clamp(1rem, 1.3vw, 1.18rem);
    --pitch-textspalte: min(100%, 46ch);
    /* Magazin-Display: mindestens 3x Body. */
    --pitch-display: clamp(2rem, 4.4vw, 4rem);
    /* Zweite Displaystufe fuer Ueberschriften, die ganze Saetze sind. */
    --pitch-display-klein: clamp(1.35rem, 2.5vw, 2.4rem);

    /* --- Stellschrauben, die min_core selbst fuer die Ueberschrift
       vorsieht. Gemischte Schreibung braucht deshalb keinen Selektorkampf,
       nur den richtigen Wert. --- */
    --pitch-kopf: var(--he-font-display);
    --versal-pitch-h1: none;
    --weight-pitch-h1: 700;
    --lh-pitch-h1: 1.1;
    --ls-pitch-h1: normal;
    --pitch-kopf-breite: 18ch;
    --type-pitch-h1: var(--pitch-display);
    --pitch-etikett-abstand: 0.42em;
    --pitch-kopf-abstand: 0.5em;
  }

  html[data-theme='dark'] .pitch-deck,
  html[data-theme='dark'] .pitch-slide {
    --pitch-label: var(--he-gold);
    --pitch-backdrop-filter: contrast(1) brightness(0.44);
    --pitch-backdrop-veil: color-mix(in srgb, var(--he-ink-dark) 60%, transparent);
  }

  /* Farbmodus aus: die Fotos werden grau, der Schleier bleibt. */
  html[data-color='off'] .pitch-deck,
  html[data-color='off'] .pitch-slide {
    --pitch-bildfilter: grayscale(1) contrast(1.04);
    --pitch-backdrop-filter: grayscale(1) contrast(1.05) brightness(0.58);
  }

  html[data-theme='dark'][data-color='off'] .pitch-deck,
  html[data-theme='dark'][data-color='off'] .pitch-slide {
    --pitch-backdrop-filter: grayscale(1) contrast(1.05) brightness(0.4);
  }

  /* In Graustufen gibt es keine Akzentfarbe mehr: das helle Gold wird zu
     einem mittleren Grau und faellt auf dem entfaerbten Foto durch. */
  html[data-color='off'] .pitch-intro__label,
  html[data-color='off'] .pitch-slide--vollbild .pitch-label {
    color: var(--pitch-ink-dark);
  }

  /* =====================================================================
     BILDER — Farbe ist der Grundzustand
     ===================================================================== */
  .pitch-slide img {
    filter: var(--pitch-bildfilter);
  }

  /* Das Einstiegsfoto ist im Soll eine Stufe gedaempft — es traegt Wortmarke
     und Tafel, nicht umgekehrt. Derselbe Filter wie die Buehne. */
  .pitch-intro__bg img {
    filter: var(--pitch-backdrop-filter);
  }

  .pitch-deck__backdrop img {
    filter: var(--pitch-backdrop-filter) blur(3px);
  }

  .pitch-tile__thumb {
    filter: var(--pitch-bildfilter);
  }

  /* =====================================================================
     EINSTIEG
     ===================================================================== */
  .pitch-intro {
    background: var(--he-ink-dark);
  }

  .pitch-intro__bg img {
    object-position: center 40%;
    transform: none;
  }

  /* Kein Verlauf ueber die ganze Flaeche: erst ab 66 Prozent Hoehe. */
  .pitch-intro__bg::after {
    background: linear-gradient(180deg, transparent 66%, var(--pitch-veil-weich) 100%);
  }

  .pitch-intro__label {
    font-family: var(--he-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--he-gold-light);
  }

  .pitch-intro__title {
    font-size: var(--pitch-display);
    max-width: 18ch;
    text-wrap: balance;
    color: var(--pitch-ink-dark);
  }

  /* Die Wortmarke steht oben links auf der Einstiegsflaeche, nie unter
     80 Pixel hoch (Regel vom 09.09.2026). Die Flaeche ist in beiden
     Darstellungen dunkel, deshalb reicht die helle Fassung. */
  .pitch-intro__marke {
    position: absolute;
    z-index: 2;
    top: clamp(18px, 3.4vh, 40px);
    left: clamp(1rem, 6.6vw, 96px);
    height: clamp(80px, 9vh, 110px);
    width: auto;
  }

  /* DIE TAFEL DES EINSTIEGS.
     Bis DK2 stand der Einstiegstext frei auf dem Foto; auf sonnenhellem Laub
     war die goldene Einordnungszeile praktisch unlesbar (EGON 14.09.2026).
     Der Prototyp legt ihn auf dieselbe Tafel wie jede Vollbildfolie. Im
     Live-Markup gibt es dafuer kein eigenes Element — also wird das
     Karteninnere des Einstiegs selbst zur Tafel: es schrumpft auf seinen
     Inhalt, steht unten links und traegt einen Grund. */
  .pitch-intro__inner {
    width: fit-content;
    max-width: 100%;
    margin: auto auto clamp(2rem, 6vw, 5rem) clamp(1rem, 6.6vw, 96px);
    padding: clamp(1.5rem, 3vw, 2.75rem);
    gap: clamp(0.75rem, 1.6vh, 1.25rem);
    background: var(--pitch-veil);
    border-radius: var(--he-radius);
    color: var(--pitch-ink-dark);
  }

  @media (min-width: 900px) {
    .pitch-intro__inner {
      max-width: 62%;
    }
  }

  @media (max-width: 899px) {
    .pitch-intro__inner {
      margin-left: clamp(0.75rem, 4vw, 1.5rem);
      margin-right: clamp(0.75rem, 4vw, 1.5rem);
      max-width: calc(100% - 2 * clamp(0.75rem, 4vw, 1.5rem));
    }
  }

  /* Startknopf und Rueckweg stehen in EINER Zeile in der Tafel. */
  .pitch-intro__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin-top: clamp(4px, 1.2vh, 14px);
  }

  /* Der Rueckweg ist ein Textlink neben dem Knopf, kein zweiter Kasten:
     eine Flaeche je Folie, und das ist das Gold. Die Zielgroesse kommt aus
     der Hoehe, nicht aus einem Rahmen. */
  .pitch-intro__back {
    position: static;
    transform: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: var(--pitch-ink-dark-text);
    font-family: var(--he-font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color var(--motion-fast) var(--motion-ease);
  }

  .pitch-intro__back:hover,
  .pitch-intro__back:focus-visible {
    background: none;
    color: var(--pitch-ink-dark);
    text-decoration-thickness: 2px;
  }

  .pitch-intro__back:focus-visible {
    outline: 3px solid var(--he-gold);
    outline-offset: 3px;
  }

  .pitch-intro__body {
    font-size: var(--pitch-text);
    line-height: 1.62;
    max-width: 46ch;
    color: var(--pitch-ink-dark-text);
  }

  /* =====================================================================
     BUEHNE UND KARTE
     ===================================================================== */
  .pitch-card {
    border-radius: var(--he-radius);
    box-shadow: 0 30px 80px -40px var(--pitch-veil);
  }

  .pitch-slide > .pitch-card.min-container {
    max-width: var(--pitch-card-max);
  }

  .pitch-card__inner {
    /* min_core benennt seine Polsterung als Variablen — nur die Werte
       wechseln hier, die Regel bleibt drueben. */
    --karte-oben: clamp(1.75rem, 4.5vh, 4rem);
    --karte-seite: clamp(1.5rem, 5vw, 5rem);
    --karte-unten: clamp(1.75rem, 4.5vh, 4rem);
    gap: clamp(1.25rem, 2.5vh, 2rem);
    /* „safe“ ist kein Beiwerk: bei zentriertem Inhalt, der hoeher wird als
       die Karte, schneidet Flexbox sonst den ANFANG ab. */
    justify-content: center;
    justify-content: safe center;
  }

  /* Auf schmalen Fenstern liegen die festen Knoepfe ueber der Karte. */
  @media (max-width: 700px) {
    .pitch-card__inner {
      --karte-oben: 68px;
      --karte-unten: 68px;
    }
  }

  /* =====================================================================
     TYPOGRAFIE — genau zwei Ebenen je Folie
     ===================================================================== */
  .pitch-label {
    font-family: var(--he-font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pitch-label);
  }

  .pitch-display {
    font-size: var(--pitch-display);
    max-width: var(--pitch-kopf-breite);
    /* Eine Adresse wie himmel-erde-pilgern.de darf umbrechen, statt aus der
       Karte zu laufen. */
    overflow-wrap: break-word;
    text-wrap: balance;
    color: var(--pitch-ink);
  }

  /* Die kurze Linie unter der Ueberschrift ist das Zeichen des min_core-
     Decks, nicht das dieses Mandanten. */
  :is(.pitch-display, .pitch-intro__title)::after {
    display: none;
  }

  /* Drei Ueberschriften sind ganze Saetze und keine kurzen Wendungen: der
     Videoimpuls-Satz, das Zitat und die Adresse. Der Prototyp gibt ihnen
     die zweite Displaystufe ueber eine eigene Klasse (.pitch-title--kleiner);
     im Live-Markup gibt es die nicht, deshalb haengt die Regel an den
     Folienkennungen aus dem Inhalt. */
  :is(#pitch-impulse, #pitch-ruhepunkt, #pitch-adresse) .pitch-display {
    font-size: var(--pitch-display-klein);
    line-height: 1.26;
    max-width: 32ch;
  }

  .pitch-body {
    font-size: var(--pitch-text);
    line-height: 1.62;
    max-width: var(--pitch-textspalte);
    color: var(--pitch-ink);
  }

  .pitch-body p {
    margin: 0 0 0.85em;
  }

  .pitch-body p:last-child {
    margin-bottom: 0;
  }

  /* Aufzaehlung ganzer Saetze — dieselbe Groesse wie ein Absatz, also
     dieselbe Ebene. Der Strich ersetzt den Punkt. */
  .pitch-punkte {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
  }

  .pitch-punkte li {
    position: relative;
    padding-left: 1.4rem;
  }

  .pitch-punkte li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.75rem;
    height: 1px;
    background: var(--pitch-label);
  }

  @media (max-width: 899px) {
    .pitch-punkte {
      gap: 0.5rem;
    }
  }

  /* =====================================================================
     AUFBAU „Geteilt“ — Text und Bild nebeneinander.
     min_core zieht das Halbbild randlos an die Kartenkante; der Prototyp
     stellt es als Bild mit Rundung in die Rasterspalte. Dafuer kommt es hier
     aus der absoluten Lage zurueck in den Fluss.
     ===================================================================== */
  .pitch-split__layout {
    align-items: center;
    column-gap: clamp(var(--space-md), 3vw, var(--space-lg));
  }

  .pitch-slide--split .pitch-split__media,
  .pitch-slide--split.pitch-slide--flip .pitch-split__media {
    position: static;
    inset: auto;
    width: auto;
    align-self: center;
    background: none;
    border-radius: var(--he-radius);
    overflow: hidden;
  }

  .pitch-split__media img {
    height: auto;
    object-position: center 40%;
  }

  /* Unter 820 px stehen Text und Bild untereinander (Bruchpunkt von
     min_core). Ohne Deckel wuerde das Bild die Folie sprengen. */
  @media (max-width: 820px) {
    .pitch-split__media {
      aspect-ratio: auto;
    }

    .pitch-split__media img {
      max-height: 26svh;
    }
  }

  @media (min-width: 900px) {
    .pitch-split__media img {
      max-height: 68svh;
    }

    /* Kein 50/50: jede Folie traegt ein anderes Verhaeltnis, und die
       Bildseite wechselt. Text zuerst, Bild in der zweiten Spalte. */
    .pitch-slide--anteil-38 .pitch-split__layout {
      grid-template-columns: 62fr 38fr;
    }

    .pitch-slide--anteil-46 .pitch-split__layout {
      grid-template-columns: 54fr 46fr;
    }

    .pitch-slide--anteil-58 .pitch-split__layout {
      grid-template-columns: 42fr 58fr;
    }

    .pitch-slide--anteil-62 .pitch-split__layout {
      grid-template-columns: 38fr 62fr;
    }

    /* Gespiegelt: das Bild belegt die erste Spalte, die Traktbreiten drehen
       sich mit. */
    .pitch-slide--gespiegelt.pitch-slide--anteil-38 .pitch-split__layout {
      grid-template-columns: 38fr 62fr;
    }

    .pitch-slide--gespiegelt.pitch-slide--anteil-46 .pitch-split__layout {
      grid-template-columns: 46fr 54fr;
    }

    .pitch-slide--gespiegelt.pitch-slide--anteil-58 .pitch-split__layout {
      grid-template-columns: 58fr 42fr;
    }

    .pitch-slide--gespiegelt.pitch-slide--anteil-62 .pitch-split__layout {
      grid-template-columns: 62fr 38fr;
    }

    /* Das Portraet liegt nur klein vor und wird nie hochskaliert. */
    .pitch-slide--anteil-38 .pitch-split__media {
      max-width: 560px;
      justify-self: start;
    }

    .pitch-slide--gespiegelt.pitch-slide--anteil-38 .pitch-split__media {
      justify-self: end;
    }
  }

  /* =====================================================================
     AUFBAU „Bildreihe“ — vier Bilder nebeneinander.
     min_core rechnet mit drei Bildern (4:3:5) und blendet auf dem Handy das
     dritte aus. Diese Folien tragen vier.
     ===================================================================== */
  .pitch-reihe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
    align-items: start;
    /* Ohne das fuellt die Reihe die Resthoehe der Karte, und die Bilder
       kleben oben statt mit der Ueberschrift zusammen in der Mitte. */
    flex: 0 0 auto;
    margin-top: 0;
  }

  /* Ein Zuschnitt je Reihe statt ragged gestellter Bilder. Die vier
     Bewegungsfotos liegen quer, die vier Videoposter stehen hoch; im
     Prototyp waehlt das eine Klasse (.pitch-reihe--quer/--hoch), die es im
     Live-Markup nicht gibt. */
  .pitch-reihe__bild {
    height: auto;
    min-height: 0;
    max-height: 38svh;
    aspect-ratio: 4 / 3;
    border-radius: var(--he-radius);
  }

  #pitch-impulse .pitch-reihe__bild {
    aspect-ratio: 3 / 4;
    max-height: 46svh;
  }

  .pitch-reihe__bild img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: var(--he-radius);
  }

  @media (max-width: 900px) {
    .pitch-reihe {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-xs);
    }

    /* Auch auf dem Handy bleiben es vier Bilder in zwei Reihen: eines zu
       verstecken hiesse, eine der vier Bewegungen wegzulassen. */
    .pitch-reihe__bild:nth-child(3) {
      display: block;
    }

    .pitch-reihe__bild {
      max-height: 20svh;
    }

    #pitch-impulse .pitch-reihe__bild {
      max-height: 26svh;
    }
  }

  /* =====================================================================
     AUFBAU „Vollbild“ — Foto fuellt die Karte, der Text steht unten links
     in einer eigenen Tafel (Positiv-Referenz „Textbox statt Gradient“).

     Der Prototyp hat dafuer EIN Element (.pitch-feld). Im Live-Markup sind
     Etikett, Ueberschrift und Fuss drei Geschwister. Die Tafel entsteht
     deshalb aus drei nahtlos aneinanderliegenden Flaechen in einer
     Rasterspalte, deren Breite dem breitesten Kind folgt und bei 62 Prozent
     gedeckelt ist — dasselbe Verhalten wie width:fit-content;max-width:62%.
     ===================================================================== */
  .pitch-slide--vollbild .pitch-card {
    background: var(--he-ink-dark);
    color: var(--pitch-ink-dark);
    --pitch-muted: var(--pitch-ink-dark-meta);
  }

  .pitch-slide--vollbild .pitch-slide__bg img {
    object-position: center 40%;
  }

  /* Die Tafel IST das Karteninnere: es schrumpft auf seinen Inhalt, steht
     unten links auf der Inhaltskante und traegt genau EINEN Grund. Drei
     einzeln hinterlegte Geschwister haetten an ihren Naehten eine sichtbare
     Kante — zwei halbdurchsichtige Flaechen stossen dort aneinander. */
  .pitch-slide--vollbild .pitch-card__inner {
    width: fit-content;
    max-width: 100%;
    height: auto;
    align-self: flex-end;
    margin: clamp(2rem, 6vw, 6rem);
    padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.5rem, 3vw, 2.75rem);
    gap: clamp(0.75rem, 1.6vh, 1.25rem);
    justify-content: flex-start;
    align-items: flex-start;
    background: var(--pitch-veil);
    border-radius: var(--he-radius);
  }

  @media (min-width: 900px) {
    .pitch-slide--vollbild .pitch-card__inner {
      max-width: 62%;
    }
  }

  /* Auf schmalen Fenstern liegen die festen Knoepfe ueber der Karte. */
  @media (max-width: 700px) {
    .pitch-slide--vollbild .pitch-card__inner {
      margin: 68px clamp(1rem, 4vw, 2rem);
    }
  }

  .pitch-slide--vollbild .pitch-card__inner > * {
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .pitch-slide--vollbild .pitch-display {
    color: var(--pitch-ink-dark);
  }

  .pitch-slide--vollbild .pitch-label {
    color: var(--he-gold-light);
  }

  /* Die eine min_core-Regel mit !important faerbt .pitch-body fest auf
     Weiss. Erreichbar bleiben die Kinder — dort steht das gedaempfte Weiss
     der Marke. */
  .pitch-slide--vollbild .pitch-body :is(p, li, ul, ol) {
    color: var(--pitch-ink-dark-text);
  }

  .pitch-slide--vollbild .pitch-punkte li::before {
    background: var(--he-gold-light);
  }

  /* Versblock: die erste Zeile steht in der Ueberschrift, die Folgezeilen
     kommen aus dem Fliesstextfeld. Gleiche Schrift, gleiche Farbe — optisch
     EIN Block und damit EINE Ebene. Im Prototyp ist das .pitch-zeilen; im
     Live-Markup stehen dieselben Zeilen als Listenpunkte im Absatz. */
  .pitch-slide--vollbild .pitch-body > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pitch-slide--vollbild .pitch-body > ul > li {
    display: block;
    list-style: none;
    font-family: var(--he-font-display);
    font-weight: 700;
    font-size: var(--pitch-display-klein);
    line-height: 1.26;
    color: var(--pitch-ink-dark);
  }

  .pitch-slide--vollbild .pitch-editorial-foot,
  .pitch-slide--vollbild .pitch-editorial-foot--cta {
    display: block;
  }

  .pitch-slide--vollbild .pitch-editorial-foot .pitch-body,
  .pitch-slide--vollbild .pitch-editorial-foot--cta .pitch-editorial-foot__col {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  /* Die Wortmarke steht im Soll ueber dem Titel der Schlussfolie. */
  .pitch-outro__marke {
    height: clamp(80px, 11vh, 132px);
    width: auto;
    margin-bottom: clamp(0.25rem, 1vh, 0.75rem);
  }

  /* Abschluss: Zeichen, Knopf, Absender — mittig, ohne Handlungsdruck. */
  .pitch-slide--abschluss .pitch-card__inner {
    align-self: center;
    margin-inline: auto;
    align-items: center;
    text-align: center;
  }

  /* Im Soll steht die Beschreibung des Pakets UNTER den Knoepfen und eine
     Stufe leiser — der Knopf ist die Handlung, die Zeile ist die Beschriftung
     dazu. Im Live-Markup steht sie davor; die Reihenfolge dreht das Raster,
     das Markup bleibt unberuehrt. */
  .pitch-slide--abschluss .pitch-editorial-foot__col {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pitch-slide--abschluss .pitch-editorial-foot__col > .pitch-body {
    order: 2;
    margin-top: clamp(0.5rem, 1.4vh, 0.9rem);
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .pitch-slide--abschluss .pitch-editorial-foot__col > .pitch-body :is(p, li) {
    color: var(--pitch-ink-dark-meta);
  }

  .pitch-slide--abschluss .pitch-actions {
    order: 1;
  }

  .pitch-slide--abschluss .pitch-actions {
    justify-content: center;
    margin-top: clamp(0.75rem, 1.6vh, 1.25rem);
  }

  /* =====================================================================
     KNOEPFE — eckig, hoechstens --he-radius, keine Zeichen am Text.
     ===================================================================== */
  .pitch-pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.85em 1.7em;
    border: 0;
    border-radius: var(--he-radius);
    background: var(--he-gold);
    color: var(--he-ink-dark);
    font-family: var(--he-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
  }

  .pitch-actions .pitch-pill:not(.pitch-pill--solid) {
    padding-inline: 1.7em;
    border-color: transparent;
    background: var(--he-gold);
    color: var(--he-ink-dark);
  }

  .pitch-pill:hover,
  .pitch-pill:focus-visible,
  .pitch-actions .pitch-pill:not(.pitch-pill--solid):hover,
  .pitch-actions .pitch-pill:not(.pitch-pill--solid):focus-visible {
    background: var(--he-gold-light);
    border-color: transparent;
    color: var(--he-ink-dark);
    text-decoration: none;
    box-shadow: none;
  }

  /* Der Rueckweg auf der Schlussfolie steht neben dem Pressepaket, aber eine
     Stufe leiser: der Download ist die einzige Akzentflaeche der Folie. */
  .pitch-pill--zurueck,
  .pitch-actions .pitch-pill--zurueck:not(.pitch-pill--solid) {
    background: none;
    border: 1px solid var(--pitch-ink-dark-meta);
    color: var(--pitch-ink-dark);
  }

  .pitch-pill--zurueck:hover,
  .pitch-pill--zurueck:focus-visible,
  .pitch-actions .pitch-pill--zurueck:not(.pitch-pill--solid):hover,
  .pitch-actions .pitch-pill--zurueck:not(.pitch-pill--solid):focus-visible {
    background: var(--pitch-ink-dark);
    border-color: var(--pitch-ink-dark);
    color: var(--he-ink-dark);
    text-decoration: none;
  }

  /* Ein Bedienelement darf sein Zeichen behalten, ein Textknopf nicht. */
  .pitch-pill__arrow {
    display: none;
  }

  .pitch-btn {
    background: var(--pitch-scheibe);
    border-radius: var(--he-radius);
    color: var(--pitch-ink-dark);
    opacity: 1;
  }

  .pitch-btn:hover,
  .pitch-btn:focus-visible {
    background: var(--pitch-scheibe-stark);
    opacity: 1;
  }

  .pitch-btn svg {
    width: 17px;
    height: 17px;
    filter: none;
  }

  /* Waagerecht auf der Kartenkante, senkrecht am Fensterrand. */
  .pitch-btn--toggle {
    top: clamp(12px, 2vh, 20px);
    left: var(--ecke-x);
    right: auto;
  }

  .pitch-btn--close {
    top: clamp(12px, 2vh, 20px);
    right: var(--ecke-x);
    left: auto;
  }

  /* Unten links steht auf jeder Seite dieses Mandanten schon der
     Darstellungsschalter von min_core (48 px, linker Rand 24 px). Die beiden
     Deck-Knoepfe ruecken deshalb hinter ihn: auf der Kartenkante, aber nie
     naeher als 96 px an den Fensterrand — sonst ueberdeckt der eine den
     anderen (gemessen 14.09.2026: 15,2 px freie Flaeche, WCAG 2.2 Ziel-
     groesse verletzt). */
  .pitch-btn--theme {
    top: auto;
    right: auto;
    bottom: clamp(12px, 2vh, 20px);
    left: max(calc(var(--ecke-x) + 60px), 96px);
  }

  .pitch-btn--color {
    top: auto;
    right: auto;
    bottom: clamp(12px, 2vh, 20px);
    left: max(calc(var(--ecke-x) + 112px), 148px);
  }

  /* Ist die Folienleiste offen, ruecken die unteren Knoepfe darueber. */
  body.pitch-nav-open .pitch-btn--theme,
  body.pitch-nav-open .pitch-btn--color {
    bottom: calc(clamp(12px, 2vh, 20px) + 124px);
  }

  /* Im Hellen zeigt der Knopf den Mond: er schaltet ins Dunkle. */
  .pitch-btn--theme .pitch-ic-sun {
    display: none;
  }

  .pitch-btn--theme .pitch-ic-moon {
    display: block;
  }

  html[data-theme='dark'] .pitch-btn--theme .pitch-ic-sun {
    display: block;
  }

  html[data-theme='dark'] .pitch-btn--theme .pitch-ic-moon {
    display: none;
  }

  /* =====================================================================
     FOLIENLEISTE
     ===================================================================== */
  .pitch-tilenav {
    gap: 6px;
    padding: 10px clamp(12px, 3vw, 28px) 12px;
    background: linear-gradient(
      180deg,
      var(--pitch-leiste-oben),
      var(--pitch-leiste-mitte) 46%,
      var(--pitch-leiste-unten)
    );
    box-shadow: inset 0 1px 0 var(--pitch-ink-dark-linie);
  }

  .pitch-tilenav__foot {
    --mn-klein-color: var(--pitch-ink-dark-leise);
  }

  .pitch-tilenav__arrow {
    border-radius: var(--he-radius);
    color: var(--pitch-ink-dark);
    opacity: 0.78;
  }

  .pitch-tilenav__arrow:hover:not([disabled]),
  .pitch-tilenav__arrow:focus-visible:not([disabled]) {
    opacity: 1;
  }

  .pitch-tilenav__arrow[disabled] {
    opacity: 0.24;
  }

  .pitch-tilenav__arrow svg {
    width: 15px;
    height: 15px;
    filter: none;
  }

  .pitch-tilenav__track {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .pitch-tile {
    width: 118px;
    gap: 4px;
    text-align: left;
    color: var(--pitch-ink-dark-meta);
  }

  .pitch-tile__thumb {
    width: 118px;
    height: 62px;
    border: 0;
    border-radius: var(--he-radius);
    opacity: 0.66;
    transform: none;
  }

  .pitch-tile:hover .pitch-tile__thumb,
  .pitch-tile:focus-visible .pitch-tile__thumb,
  .pitch-tile[aria-selected='true'] .pitch-tile__thumb {
    opacity: 1;
    transform: none;
  }

  .pitch-tile[aria-selected='true'] {
    color: var(--he-gold-light);
  }

  .pitch-tile__label,
  .pitch-tile[aria-selected='true'] .pitch-tile__label {
    --mn-klein-color: currentColor;
    max-width: 118px;
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: currentColor;
  }

  @media (max-width: 480px) {
    .pitch-tile,
    .pitch-tile__thumb {
      width: 96px;
    }

    .pitch-tile__thumb {
      height: 52px;
    }

    .pitch-tile__label {
      max-width: 96px;
    }
  }

  /* Sichtbarer Fokus in der ganzen Praesentation — Gold als einzige
     Akzentflaeche. */
  :is(.pitch-btn, .pitch-tile, .pitch-tilenav__arrow, .pitch-pill):focus-visible {
    outline: 3px solid var(--he-gold);
    outline-offset: 3px;
    box-shadow: none;
  }

  .pitch-tile:focus-visible .pitch-tile__thumb {
    outline: none;
  }

  /* =====================================================================
     BEWEGUNG — der Sprung bleibt, die Dauerbewegung geht.
     min_core laesst Halbbilder und Reihenbilder dauerhaft driften. Das Deck
     des Kunden kennt genau einen Signature-Move, den Bildzoom der
     Titelfolie; die Bilder in den Karten stehen still.
     ===================================================================== */
  .pitch-split__media img,
  .pitch-reihe__bild img {
    animation: none;
    will-change: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .pitch-slide--kenburns .pitch-slide__bg img,
    .pitch-intro__bg img {
      animation: none;
    }

    .pitch-tilenav {
      transition: none;
    }
  }

  html[data-motion='reduced'] .pitch-slide--kenburns .pitch-slide__bg img,
  html[data-motion='reduced'] .pitch-intro__bg img {
    animation: none;
  }

  /* =====================================================================
     KURZE FENSTER — zuerst die Luft kuerzen, dann die Bilder.
     ===================================================================== */
  @media (max-height: 780px) {
    .pitch-intro__inner {
      padding-block: clamp(1rem, 2.6vh, 1.75rem);
      margin-bottom: clamp(1rem, 3vh, 2rem);
    }

    .pitch-intro__marke {
      height: clamp(80px, 11vh, 96px);
    }

    .pitch-intro__title {
      font-size: clamp(1.6rem, 3.4vw, 2.7rem);
    }

    .pitch-card__inner {
      --karte-oben: clamp(1.25rem, 3.5vh, 2.5rem);
      --karte-unten: clamp(1.25rem, 3.5vh, 2.5rem);
    }
  }

  @media (max-height: 780px) and (min-width: 900px) {
    .pitch-split__media img {
      max-height: 44svh;
    }

    .pitch-reihe__bild {
      max-height: 30svh;
    }

    #pitch-impulse .pitch-reihe__bild {
      max-height: 36svh;
    }
  }

  @media (max-width: 899px) and (max-height: 780px) {
    .pitch-split__media img {
      max-height: 20svh;
    }
  }

  /* Der Folienfuss von min_core traegt eine Mindestbreite von 320 px. Bei
     360 px Geraetebreite bleiben im Karteninneren weniger uebrig, und die
     Spalte ragte ueber die Karte hinaus. */
  @media (max-width: 400px) {
    .pitch-editorial-foot .pitch-body,
    .pitch-editorial-foot--cta .pitch-editorial-foot__col {
      min-width: 0;
    }
  }
}