/* ============================================================================
   HERO CD-VEREINHEITLICHUNG · V3
   Referenz = Agentur-Hero (index.html / .home-page .hero-scene) — die
   verbindliche Corporate-Design-Referenz.

   Diese Datei gleicht SAEMTLICHE V3-Hero-Sections an die Agentur-Hero an:
   Schriftart/-groesse, Schriftdicke, Schriftfarbe/Kontrast, Zeilenhoehe,
   Laufweite, Textbreite, natuerliche Zeilenumbrueche, Alignment, Abstaende
   (Label -> Titel -> Beschreibung -> CTAs), Button-Stil, visuelle Hierarchie
   und responsives Verhalten (Desktop/Tablet/Mobile).

   Betroffene Hero-Roots:
     .hero-scene (Referenz + Subpage-Familie),
     .holo-hero (ki-loesungen),
     .term-hero (termin-agent).
   Signatur-Visuals (Holo-Tunnel-Bild, Termin-Signalfeld, Produkt-Visuals)
   bleiben als Hintergrund erhalten; nur das Textsystem wird vereinheitlicht.

   Diese Datei wird als LETZTES Stylesheet geladen. Der Projekt-Trick
   :not(#____never____) hebt die Spezifitaet auf ID-Ebene, um bestehende
   !important-Regeln zuverlaessig zu ueberstimmen, ohne echte IDs zu brauchen.
   Nur Hero-Roots werden angefasst — andere Sections/Inhalte bleiben unberuehrt.
   ============================================================================ */

:root {
  --hero-ref-bg:          #07111c;
  --hero-ref-title:       #f7f9fb;
  --hero-ref-copy:        rgba(239, 241, 243, 0.84);
  --hero-ref-accent:      #d91e18;   /* var(--saa-red) */
  --hero-ref-accent-icon: #ff312b;
  /* 2026-08-04 (Block 5b, Befund H): Untergrenze 36 -> 42px. Frueher setzte
     ein Media-Query unter 768px die Hero-Ueberschrift hart auf 42px, waehrend
     diese Kurve bei 860px nur 38.3px ergab — der Titel war auf dem Tablet
     also GROESSER als auf dem kleinen Laptop. Mit 42px als Untergrenze ist es
     eine einzige monotone Kurve, und sie deckt sich mit der Kurve, die
     styles.css fuer .hero-scene__title ohnehin schon nennt. */
  --hero-ref-title-fs:    clamp(42px, 4.45vw, 64px);
}

/* 2026-08-31: Untergrenze 42px greift auch auf sehr schmalen Handys (<=640px)
   unveraendert - dort gibt es kein vw-Spiel mehr nach unten. Bei einem langen,
   nicht umbrechbaren ersten Wort (z.B. "Kampagnenmotive," auf
   usecase-fashion-visual-studio.html) reisst das den Titel ueber den
   Bildschirmrand. Nur in diesem Bereich zusaetzlich mit vw skalieren, an der
   660px-Grenze stetig an die 42px oben anschliessend (9.5vw*640px=42px). */
@media (max-width: 640px) {
  :root {
    --hero-ref-title-fs: clamp(30px, 9.5vw, 42px);
  }
}

/* --------------------------------------------------------------------------
   1) HERO-HINTERGRUND  ->  dunkle Referenz (#07111c)
   -------------------------------------------------------------------------- */
html body:not(#saig-x) .holo-hero.holo-tone:not(#____never____) {
  background:
    linear-gradient(135deg, rgba(217, 30, 24, .14), transparent 18%, transparent 82%, rgba(53, 135, 242, .10)),
    linear-gradient(114deg, transparent 0 18%, rgba(217, 30, 24, .12) 18.1% 18.35%, transparent 18.45% 100%),
    var(--hero-ref-bg) !important;
}
html body:not(#saig-x) .pn-hero:not(#____never____),
html body:not(#saig-x) .pv-hero:not(#____never____) {
  background: var(--hero-ref-bg) !important;
  background-color: var(--hero-ref-bg) !important;
}

/* --------------------------------------------------------------------------
   2) LABEL / EYEBROW  ->  rotes Uppercase-Kicker, einheitlich
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(
  .hero-scene__kicker,
  .holo-hero .holo-eyebrow,
  .pn-hero .pn-kicker,
  .pv-hero .pv-kicker,
  .pl-hero .pl-kicker,
  .pw-hero .pw-kicker,
  .term-hero .term-kicker
):not(#____never____) {
  display: block !important;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  color: var(--hero-ref-accent-icon) !important;
  -webkit-text-fill-color: var(--hero-ref-accent-icon) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 18px !important;
}

/* --------------------------------------------------------------------------
   3) TITEL (H1)  ->  Referenz-Typografie
      Inter, clamp(36..64px), weight 500, LH 1.05, weiss, LS normal,
      max-width 720, margin 0, links, natuerlicher Umbruch (balance).
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(
  .hero-scene__title,
  .holo-hero h1,
  .pn-hero h1,
  .pv-hero h1,
  .pl-hero h1,
  .pw-hero h1,
  .term-hero h1
):not(#____never____) {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: var(--hero-ref-title-fs) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: normal !important;
  color: var(--hero-ref-title) !important;
  -webkit-text-fill-color: var(--hero-ref-title) !important;
  max-width: 720px !important;
  margin: 0 !important;
  text-align: left !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 8px 34px rgba(3, 8, 15, .45);
}
/* Rote Akzent-Woerter/-Zeilen im Titel bleiben rot (wie Referenz 2. Zeile) */
html body:not(#saig-x) :is(.hero-scene__title, .holo-hero h1, .pn-hero h1, .pv-hero h1, .term-hero h1)
  :is(.hero-title-line--accent, .hero-word-accent, .text-swiss-red, .hero-typewriter):not(#____never____) {
  color: var(--hero-ref-accent-icon) !important;
  -webkit-text-fill-color: var(--hero-ref-accent-icon) !important;
}
/* Einfache (nicht-akzentuierte) Titelzeilen/-spans in Custom-Heroes -> weiss.
   Verhindert dunkle, unlesbare Titelzeilen (z. B. holo-Mittelzeile auf Dunkel). */
html body:not(#saig-x) :is(.holo-hero h1, .pn-hero h1, .pv-hero h1, .term-hero h1)
  span:not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent):not(#____never____) {
  color: var(--hero-ref-title) !important;
  -webkit-text-fill-color: var(--hero-ref-title) !important;
}

/* --------------------------------------------------------------------------
   3b) HERO-TYPEWRITER: rotierendes Wort auf eigener, fester Zeile.
   Auf Mobile/Tablet macht styles.css (@max-width:980px) die beiden Titelzeilen
   inline -> dadurch verschiebt sich der Zeilenumbruch je nach Wortlänge und der
   Titel springt (2 <-> 3 Zeilen). Hier stapeln wir beide Zeilen wieder als Block
   und zwingen das Wort einzeilig (nowrap). Höhe bleibt konstant, nichts springt.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html body:not(#saig-x) .hero-scene__title .hero-title-line:not(#____never____) {
    display: block !important;
  }
  html body:not(#saig-x) .hero-scene__title .hero-title-line + .hero-title-line::before {
    content: "" !important;
    display: none !important;
  }
  html body:not(#saig-x) .hero-scene__title .hero-typewriter:not(#____never____) {
    display: inline-block !important;
    white-space: nowrap !important;
  }
}

/* --------------------------------------------------------------------------
   4) BESCHREIBUNG / COPY  ->  Referenz-Lauftext
      18px, weight 400, LH 1.6, rgba(239,241,243,.84), max-width 640,
      margin-top 34px (fluid).
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(
  .hero-scene__copy,
  .holo-hero__copy > p,
  .pn-hero h1 + p,
  .pv-hero__pitch,
  .pl-hero h1 + p,
  .pw-hero h1 + p,
  .term-hero__copy > p
):not(#____never____) {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
  color: var(--hero-ref-copy) !important;
  -webkit-text-fill-color: var(--hero-ref-copy) !important;
  max-width: 640px !important;
  margin-top: clamp(18px, 3vw, 34px) !important;
  margin-bottom: 0 !important;
  text-shadow: 0 6px 26px rgba(3, 8, 15, .4);
}

/* --------------------------------------------------------------------------
   5) CTA-ZEILE (Actions)  ->  Referenz-Abstaende
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(
  .hero-scene__actions,
  .holo-actions,
  .pn-hero__actions,
  .pv-hero__actions,
  .term-hero__actions
):not(#____never____) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: clamp(18px, 4vw, 42px) !important;
}

/* --------------------------------------------------------------------------
   6a) PRIMAER-CTA  ->  Referenz-Button
       dunkler Grund, roter Rand + roter Glow, weisser Text, roter Pfeil,
       radius 10, min-height 48, padding 14/28, 14px/500.
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(
  .hero-scene__primary,
  .hero-scene__secondary--upgraded,
  .holo-button--primary,
  .pn-btn--primary,
  .pv-btn--primary,
  .term-btn--primary
):not(#____never____) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(217, 30, 24, .68) !important;
  background: var(--hero-ref-bg) !important;
  background-color: var(--hero-ref-bg) !important;
  color: var(--hero-ref-title) !important;
  -webkit-text-fill-color: var(--hero-ref-title) !important;
  box-shadow: 0 18px 44px rgba(217, 30, 24, .24) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease !important;
}
html body:not(#saig-x) :is(
  .hero-scene__primary, .hero-scene__secondary--upgraded, .holo-button--primary,
  .pn-btn--primary, .pv-btn--primary, .term-btn--primary
) .material-symbols-outlined:not(#____never____) {
  color: var(--hero-ref-accent-icon) !important;
  -webkit-text-fill-color: var(--hero-ref-accent-icon) !important;
}
/* Label-Spans/Strong im Button duerfen KEINE eigene Flaeche haben.
   Die globale Primary-CTA-"Rotfuellung" (styles.css) rotet auch die inneren
   Text-Spans ein; da hero-unify den Button auf dunklen Referenzgrund setzt,
   blieben sonst rote Kaesten hinter der Schrift stehen (Wissen/Ueber-uns/Academy).
   Grund transparent -> weisser Text sitzt sauber auf dunklem Button. */
html body:not(#saig-x) :is(
  .hero-scene__primary, .hero-scene__secondary--upgraded, .holo-button--primary,
  .pn-btn--primary, .pv-btn--primary, .term-btn--primary
) :where(span, strong, b, em, small):not(.material-symbols-outlined):not(#____never____) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
html body:not(#saig-x) :is(
  .hero-scene__primary, .hero-scene__secondary--upgraded, .holo-button--primary,
  .pn-btn--primary, .pv-btn--primary, .term-btn--primary
):not(#____never____):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(217, 30, 24, .92) !important;
  box-shadow: 0 22px 54px rgba(217, 30, 24, .34) !important;
}

/* --------------------------------------------------------------------------
   6a-2) HERO-CTA-AUSNAHME (Blueprint 2026-08-30): nur der CTA, der wirklich
   INNERHALB des Hero liegt, bekommt die Labs-Optik (rote Flaeche, 6px
   Radius). Die Klassen .hero-scene__primary/--upgraded werden ausserhalb
   des Hero fuer die Abschluss-CTA-Flaechen wiederverwendet (Agentur-Optik,
   dunkler Referenz-Button aus 6a) - deshalb hier bewusst auf ".hero-scene
   .hero-scene__content" gescoped statt global, und mit hoeherer
   Klassenspezifitaet als 6a platziert (schlaegt 6a nur fuer den Hero-Fall).
   Werte: siehe Blueprint "Dokumentierte Labs-Werte" (.lp-btn--primary).
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(.hero-scene, .hero-scene--subpage) .hero-scene__content :is(
  .hero-scene__primary,
  .hero-scene__secondary.hero-scene__secondary--upgraded
):not(#____never____):not(#____never2____) {
  min-height: 52px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  border-color: var(--saa-red, #d91e18) !important;
  background: var(--saa-red, #d91e18) !important;
  background-color: var(--saa-red, #d91e18) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red, #d91e18) 24%, transparent) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
html body:not(#saig-x) :is(.hero-scene, .hero-scene--subpage) .hero-scene__content :is(
  .hero-scene__primary,
  .hero-scene__secondary.hero-scene__secondary--upgraded
) .material-symbols-outlined:not(#____never____) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html body:not(#saig-x) :is(.hero-scene, .hero-scene--subpage) .hero-scene__content :is(
  .hero-scene__primary,
  .hero-scene__secondary.hero-scene__secondary--upgraded
):not(#____never____):not(#____never2____):hover {
  border-color: #b91813 !important;
  background: #b91813 !important;
  background-color: #b91813 !important;
  box-shadow: 0 22px 54px rgba(185, 24, 19, .34) !important;
}
html body:not(#saig-x) :is(.hero-scene, .hero-scene--subpage) .hero-scene__content :is(
  .hero-scene__primary,
  .hero-scene__secondary.hero-scene__secondary--upgraded
):not(#____never____):not(#____never2____):focus-visible {
  outline: 3px solid var(--saa-red, #d91e18) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   6b) SEKUNDAER-/GHOST-CTA  ->  dezenter Umriss, gleiche Masse
   -------------------------------------------------------------------------- */
html body:not(#saig-x) :is(
  .hero-scene__secondary:not(.hero-scene__secondary--upgraded),
  .holo-button--ghost,
  .pn-btn--ghost,
  .pv-btn--ghost,
  .term-btn:not(.term-btn--primary)
):not(#____never____) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 14px 28px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--hero-ref-title) !important;
  -webkit-text-fill-color: var(--hero-ref-title) !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease !important;
}
html body:not(#saig-x) :is(
  .hero-scene__secondary:not(.hero-scene__secondary--upgraded),
  .holo-button--ghost, .pn-btn--ghost, .pv-btn--ghost, .term-btn:not(.term-btn--primary)
):not(#____never____):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 255, 255, .45) !important;
  background-color: rgba(255, 255, 255, .04) !important;
}

/* --------------------------------------------------------------------------
   7) TERMIN-AGENT: schmale Signal-Box auf Referenz-Breite bringen,
      Kartendekor entfernen, damit Titel Referenzgroesse fasst.
   -------------------------------------------------------------------------- */
html body:not(#saig-x) .term-hero .term-hero__copy:not(#____never____) {
  max-width: min(660px, 94%) !important;
  padding: 0 !important;
  margin: clamp(24px, 4vw, 52px) 0 0 0 !important;
  background: none !important;
  border-left: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body:not(#saig-x) .term-hero__grid:not(#____never____) {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  align-items: center !important;
}
html body:not(#saig-x) .term-hero .term-hero__copy > p:not(#____never____) {
  max-width: 640px !important;
}

/* --------------------------------------------------------------------------
   8) RESPONSIVE  ->  Referenz-Kurve (Tablet 768 / Mobile 430)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* 2026-08-04 (Block 5b): feste 42px entfallen — sie stehen jetzt als
     Untergrenze in --hero-ref-title-fs und gelten damit stufenlos. */
  html body:not(#saig-x) :is(.hero-scene__copy, .holo-hero__copy > p, .pn-hero h1 + p, .pv-hero__pitch, .term-hero__copy > p):not(#____never____) {
    max-width: 100% !important;
    line-height: 1.55 !important;
    margin-top: 18px !important;
  }
  html body:not(#saig-x) :is(.hero-scene__actions, .holo-actions, .pn-hero__actions, .pv-hero__actions, .term-hero__actions):not(#____never____) {
    gap: 12px !important;
    margin-top: 18px !important;
  }
  /* CTAs auf Tablet/Mobile voll-breit stapeln (wie Referenz) */
  html body:not(#saig-x) :is(
    .hero-scene__primary, .hero-scene__secondary,
    .holo-button--primary, .holo-button--ghost,
    .pn-btn--primary, .pn-btn--ghost,
    .pv-btn--primary, .pv-btn--ghost,
    .term-btn--primary, .term-btn
  ):not(#____never____) {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  html body:not(#saig-x) .term-hero__grid:not(#____never____) {
    grid-template-columns: 1fr !important;
  }
  html body:not(#saig-x) .term-hero .term-hero__copy:not(#____never____) {
    max-width: 100% !important;
  }
}
@media (max-width: 430px) {
  /* 2026-08-04 (Block 5b): dritte Groessendefinition fuer denselben Titel
     entfallen. --hero-ref-title-fs deckt den ganzen Bereich ab. */
  html body:not(#saig-x) :is(.hero-scene__copy, .holo-hero__copy > p, .pn-hero h1 + p, .pv-hero__pitch, .term-hero__copy > p):not(#____never____) {
    font-size: 15.5px !important;
  }
}

/* --------------------------------------------------------------------------
   9) HOLO-HERO (ki-loesungen)  ->  Mitglied der .hero-scene-Familie
   Joshua 2026-07-15: "KI Loesung muss noch angepasst werden."

   Die Sektion traegt jetzt .hero-scene und ist markup-gleich zu index (Bild und
   Content als direkte Kinder, KEIN .holo-shell-Grid mehr). Damit greifen die
   Blocks 2/3/4/10/11 automatisch - hier bleibt nur, was ki-loesungen-v2.css dem
   Bild noch als Karte aufdrueckt.

   HISTORIE, weil lehrreich: Bis 14.07. baute dieser Block das Muster der
   styles.css-BASISREGEL nach - 88vw Breite, diagonaler clip-path bei 13%,
   saturate(.98) contrast(1.04), scale(1.025). Gemessen rendert index davon
   NICHTS: Bild 100% breit, clip-path none, filter none, transform none. Der
   Block war also an einer GELESENEN statt an einer GEMESSENEN Referenz gebaut -
   exakt dieselbe Falle wie beim uebrigen Hero-Drift. Deshalb steht in HERO.md
   Abschnitt 3 die gemessene Tabelle und nicht der Quelltext von styles.css.

   Das frueher hier definierte Lesbarkeits-Overlay (px-Stops) ist entfallen:
   Block 11 traegt jetzt index' Verlauf fuer die ganze Familie. Kontrast dieser
   Hero danach nachgemessen (siehe HERO.md Abschnitt 9).
   -------------------------------------------------------------------------- */
html body:not(#saig-x) .holo-hero .holo-hero__media:not(#____never____) {
  /* v2.css:22-23 machte daraus eine Karte: Radius 16, Schatten, aspect-ratio
     16/11. Das aspect-ratio diktierte die Hoehe statt der Sektion. */
  border-radius: 12px !important;   /* index misst 12px */
  box-shadow: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: none !important;
}
html body:not(#saig-x) .holo-hero .holo-hero__media img:not(#____never____) {
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;          /* index: none */
  transform: none !important;       /* index: none */
}


/* ============================================================================
   10) HERO-LAYOUT MOBILE/TABLET  ->  Referenz index.html
   Joshua 2026-07-15: "Die HeroSection muessen wir auch so definieren das diese
   immer gleich aufgebaut sind (mobile, Desktop, Tablet) wie im Index.html."

   BEFUND, der zu diesem Block fuehrte. Drei Generationen Hero-Design lagen
   uebereinander, der Gewinner entschied sich allein ueber Ladereihenfolge:
     (a) styles.css @760  .ki-beratung-page/.ki-dienste-page  -> "Mobile Guard":
         gestapeltes Layout (280px-Bildband oben, Text auf solidem #06111d
         darunter).
     (b) mobile-refine.css Block 7 @980 .hero-scene--subpage -> Vollflaechenbild,
         Text darueber, content padding 84/16/36 + min-height clamp(520,72svh,640).
     (c) index.html (.hero-scene OHNE --subpage) -> von keinem der beiden
         getroffen, blieb auf der Basis: flex, content padding 0, Hoehe aus dem
         Inhalt.
   Gemessen war (b) der Gewinner auf 8 Subpages und (c) auf index -> Sektion
   690-722px vs. 348px bei 390/768px Breite. Desktop war bereits identisch.

   Diese Datei IST der Hero-Contract (siehe Dateikopf) und laedt als letztes
   Stylesheet. Sie setzt hier das index-Verhalten fuer die GANZE
   .hero-scene-Familie durch und macht (a) und (b) damit wirkungslos.
   (b) ist in mobile-refine.css entfernt; (a) bleibt vorerst als toter Code in
   styles.css stehen (dort haengen Nicht-Hero-Regeln im selben @media-Block) und
   wird von hier ueberstimmt. Siehe SAIG-v3-intern/HERO.md.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Sektion: Flex-Bezugsrahmen wie index; Hoehe kommt aus dem Inhalt.
     Padding gemessen an index (28/54 bei 390 UND 768). Es steht hier, weil
     ki-loesungen-connected.css:336 mit doppeltem :not(#…) (2,2,3) sonst 108/72
     durchsetzt - siehe Block 10b. Fuer die uebrigen Seiten wertgleich.
     DREI ID-Ebenen noetig (3,1,3), zwei reichen gegen den Holo-Layer nicht. */
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage):not(#____never____):not(#____never____) {
    display: flex !important;
    position: relative !important;
    /* Blueprint 2026-08-30 "Verbindlicher Hero-Aufbau": der erste Bildschirm
       wird vollstaendig durch die Hero-Flaeche eingenommen (loest die
       aeltere HERO.md-Vorgabe "Hoehe kommt aus dem Inhalt" ab, siehe
       Abschlussbericht). Vorher min-height:0. */
    min-height: calc(100svh - var(--saa-header-h-mobile, 98px)) !important;
    padding-top: 28px !important;
    padding-bottom: 54px !important;
  }

  /* Bild: Vollflaechen-Hintergrund (kein 280px-Band, keine Desktop-Diagonale). */
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage) .hero-scene__media:not(#____never____) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    clip-path: none !important;
    z-index: 0 !important;
  }
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage) .hero-scene__media img:not(#____never____) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  /* Blueprint 2026-08-30 "Bild vollflaechig": der bestehende Lesbarkeits-
     Verlauf ist horizontal (links dunkel, rechts frei) fuer die Desktop-
     Text-links/Bild-rechts-Teilung ausgelegt. Auf schmalen Mobilbreiten
     deckt derselbe prozentuale Verlauf praktisch das ganze Bild ab, weil
     der Text hier unten ueber die volle Breite steht statt nur links.
     Vertikaler Verlauf (oben frei, unten dunkel) passt zur tatsaechlichen
     Textposition (align-items/justify-content: flex-end) und laesst das
     Bild im oberen Bereich sichtbar. */
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage):not(#____never____):not(#____never____)::before {
    background: linear-gradient(180deg, rgba(7, 17, 28, 0) 0%, rgba(7, 17, 28, .22) 52%, rgba(7, 17, 28, .84) 100%) !important;
  }
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage) .hero-scene__media:not(#____never____):not(#____never____)::after {
    background: linear-gradient(180deg, rgba(4, 11, 19, 0) 0%, rgba(4, 11, 19, .18) 52%, rgba(4, 11, 19, .8) 100%) !important;
  }

  /* Textblock: transparent, ohne Eigen-Padding und ohne reservierte Hoehe -
     exakt wie index. Das Lesbarkeits-Overlay liegt auf der Sektion (::before),
     nicht als Flaeche hinter dem Text. */
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage) .hero-scene__content:not(#____never____) {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   10b) HERO-LAYOUT DESKTOP (>=981px)  ->  Referenz index.html
   Nachgezogen 2026-07-15 beim Angleichen von ki-loesungen.

   BEFUND: index bezieht Hoehe und Padding auf Desktop aus einer Regel, die an
   eine SEITEN-KLASSENLISTE gebunden ist:
     body:is(.home-page,.ki-beratung-page,.ki-dienste-page,.wissen-page,…)
       { padding: clamp(76px,9vw,128px) var(--saa-shell-x,80px) clamp(56px,7vw,104px) !important }
   ki-loesungen hat KEINE solche Body-Klasse (<body class="page-shell …">) und
   fiel deshalb durch: Padding 108px statt 115.2px, Einzug 75 statt 80, und
   ki-loesungen-connected.css setzte zusaetzlich min-height:0 !important
   (Spezifitaet 1,2,3) -> Hero 691px statt 824px.

   Statt die Klassenliste zu erweitern (das waere genau die Seitenbindung, die
   Abschnitt 2 des Contracts verbietet) stehen die gemessenen Referenzwerte hier.
   Fuer die uebrigen 9 Seiten sind sie wertgleich, also wirkungslos.

   DREI ID-Ebenen, nicht zwei: ki-loesungen-connected.css:336 haengt
   :not(#____never____) DOPPELT an (html body .holo-page .holo-hero:not(#…):not(#…)
   = 2,2,3) und schlaegt damit die sonst uebliche 2-ID-Form (2,1,3) - gemessen:
   min-height blieb 0, padding-top 108 statt 115.2, waehrend das left/right aus
   derselben Regel ankam. Mit (3,1,3) gewinnt der Contract. Der Holo-Layer nutzt
   den Trick selbst, deshalb reicht hier die uebliche Dosis nicht.
   -------------------------------------------------------------------------- */
html body:not(#saig-x) main :is(.pl-hero, .pw-hero) :is(.pl-hero__visual, .pw-hero__visual):not(#____never____) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
html body:not(#saig-x) main :is(.pl-hero, .pw-hero) :is(.pl-hero__visual, .pw-hero__visual) img:not(#____never____) {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
}

@media (min-width: 1025px) {
  /* index/Home: nackte .hero-scene behaelt den 920px-Deckel (Referenz unveraendert). */
  html body:not(#saig-x) main .hero-scene:not(.hero-scene--subpage):not(#____never____):not(#____never____) {
    min-height: min(920px, calc(100svh - var(--saa-header-h, 96px))) !important;
    padding: clamp(76px, 9vw, 128px) var(--saa-shell-x, 80px) clamp(56px, 7vw, 104px) !important;
  }
  /* Detailseiten (Subpage-Hero): volle Viewport-Hoehe, kein Deckel (Wunsch 2026-07-18). */
  html body:not(#saig-x) main .hero-scene--subpage:not(#____never____):not(#____never____) {
    min-height: max(640px, calc(100svh - var(--saa-header-h, 96px))) !important;
    padding: clamp(76px, 9vw, 128px) var(--saa-shell-x, 80px) clamp(56px, 7vw, 104px) !important;
  }
  /* Term-Hero (Gastro/Immo/Termin/DocMan/Recherche/Data-Insight/Market-Signal):
     schlaegt den 920px-P6-Deckel (styles.css:27182) via ID-Trick + Last-Load.
     Padding bleibt bei termin-agent.css; nur die Hoehe fuellt jetzt den Viewport. */
  html body:not(#saig-x) main .term-hero:not(#____never____):not(#____never____) {
    min-height: max(640px, calc(100svh - var(--saa-header-h, 96px))) !important;
  }
  /* Produkt-Heroes (Wissens/LiqPlaner/Offertwerk): fuellen den
     Viewport und zentrieren ihren Inhalt vertikal (flat-dark + Karte, kein
     Vollbild-Foto -> zentrieren statt oben-kleben). */
  html body:not(#saig-x) main :is(.pw-hero, .pl-hero, .po-hero):not(#____never____):not(#____never____) {
    min-height: max(640px, calc(100svh - var(--saa-header-h, 96px))) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* Der Hero ist eine Vollbreiten-Szene, kein 1280px-Content-Container.
   Einige neue Use-Case-Seiten erben sonst die globale section-Maximalbreite
   und lassen rechts eine leere Fläche stehen.

   2026-08-04 (Responsive-Sanierung, Befund D): frueher stand hier
   width:100vw mit margin-left/right: calc(50% - 50vw). 100vw enthaelt die
   Scrollbar, der Viewport nicht — das ergab auf jeder Seite mit sichtbarer
   Scrollbar 15px horizontalen Ueberlauf, verdeckt durch overflow-x:hidden.
   <main> ist bereits exakt so breit wie der Viewport, darum genuegt es,
   die Breite offen zu lassen. Siehe .saig-bleed in css/_contract.css. */
html body:not(#saig-x) main > .hero-scene:not(#____never____):not(#____never____),
html body:not(#saig-x) main > .hero-scene--subpage:not(#____never____):not(#____never____) {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body:not(#saig-x) main > .hero-scene .hero-scene__media:not(#____never____):not(#____never____),
html body:not(#saig-x) main > .hero-scene--subpage .hero-scene__media:not(#____never____):not(#____never____) {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  clip-path: none !important;
}

html body:not(#saig-x) main > .hero-scene .hero-scene__media > img:not(#____never____):not(#____never____),
html body:not(#saig-x) main > .hero-scene--subpage .hero-scene__media > img:not(#____never____):not(#____never____) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   11) LESBARKEITS-OVERLAY  ->  Referenz index.html (102deg)
   Gemessen: index nutzt .home-page .hero-scene::before mit 102deg und eigenen
   Stops; alle Subpages die Basis-Regel mit 90deg. mobile-refine Block 7 hatte
   das Overlay auf Subpages mobil ganz abgeschaltet (content:none) - dort trug
   allein ein enger text-shadow die Lesbarkeit. Hier: index-Verlauf fuer alle.
   -------------------------------------------------------------------------- */
html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage):not(#____never____)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(102deg, rgba(7, 17, 28, 0.88) 0%, rgba(7, 17, 28, 0.62) 31%, rgba(7, 17, 28, 0.18) 58%, transparent 76%) !important;
}

/* Keine weisse Ausblendung am unteren Bildrand: Das Hero-Foto bleibt bis zur
   Section-Kante sichtbar. Der dunkle Lesbarkeitsverlauf oben bleibt erhalten. */
html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage):not(#____never____)::after {
  background: none !important;
  content: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   12) TYPEWRITER-SLOT  ->  variabler Inhalt darf keine Metrik verbiegen
   Der Grund, warum ki-beratung aus dem System fiel: das rotierende Wort
   ("Potenzialanalyse") liess die Zeile bei jedem Wortwechsel umbrechen. Gefixt
   wurde das, indem die GANZE H1 der Seite auf clamp(19px,5.4vw,26px) verkleinert
   wurde (mobile-refine.css) -> 21px Hauptueberschrift auf dem Handy, waehrend
   alle anderen Seiten 36px hatten.
   Richtig ist das Gegenteil: der Slot bekommt reservierten Platz, dann bleibt
   die Zeile stabil UND die H1 systemkonform. Die Breite misst js/typewriter.js
   am laengsten Wort und setzt sie als inline min-width (schriftgenau, reagiert
   auf resize). Ohne JS greift der Reflow wie bisher - kein Layout-Bruch.
   -------------------------------------------------------------------------- */
html body:not(#saig-x) .hero-typewriter:not(#____never____) {
  display: inline-block !important;
  text-align: left !important;
  /* nowrap + reservierte min-width (aus JS) = stabile Zeile ohne Sprung. */
  white-space: nowrap !important;
}

/* Cursor + Wortfarbe — 2026-07-15 aus usp-conversion.css hierher verschoben.
   Grund: Das ist Hero-Darstellung, gehoert also in den Contract. usp-conversion
   laedt zudem VOR hero-unify und liegt nur auf 6 der 9 Hero-Seiten; die drei
   Typewriter-Seiten (index, ki-beratung, usecase-werbetraeger) waren zufaellig
   alle dabei - verlassen wollen wir uns darauf nicht. */
html body:not(#saig-x) .hero-typewriter:not(#____never____)::after {
  content: "|";
  margin-left: 2px;
  color: rgba(239, 241, 243, .85);
  font-weight: 400;
  animation: saaCaretBlink 1s steps(1) infinite;
}
html body:not(#saig-x) .hero-typewriter.is-typewriter-static:not(#____never____)::after {
  animation: none;
}
/* Heller Cursor passt auf dunkle Heros; auf dem hellen KI-Loesungen-Hero rot. */
html body:not(#saig-x) .usecase-overview-page .hero-typewriter:not(#____never____)::after {
  color: var(--saa-red, #d91e18);
}
/* Wort immer rot - schlaegt die Hero-Ink-Haertung mancher Seiten (0,3,2). */
html body:not(#saig-x) main .hero-typewriter:not(#____never____) {
  color: var(--hero-ref-accent, #d91e18) !important;
}
@keyframes saaCaretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html body:not(#saig-x) .hero-typewriter:not(#____never____)::after { animation: none; }
}

/* 2026-08-04: ohne 100vw, siehe Begruendung oben (Befund D). */
html body .hero-scene {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .hero-scene .hero-scene__media {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  clip-path: none !important;
}

html body .hero-scene .hero-scene__media > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: none !important;
  transform: none !important;
}

/* Der Termin Agent besitzt eine eigene Hintergrundschicht statt
   .hero-scene__media. Er folgt derselben Vollbreiten-Regel. */
html body .term-hero {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .term-hero .term-hero__background,
html body .term-hero .term-hero__background > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html body .term-hero .term-hero__background > img {
  object-fit: cover !important;
}

/* --------------------------------------------------------------------------
   13) HERO-TEXT-ALIGNMENT  ->  Referenz index.html (linke Textkante = 80px)
   Joshua 2026-07-18: "Alignment des Textes/Titel auf alle Hero Section
   uebertragen als Referenz index.html nutzen."

   GEMESSEN (1440): index .hero-scene__title.left = 80px (Hero-Padding
   var(--saa-shell-x, 80px), Block 10b). Die .hero-scene--subpage-Familie
   (social-content, ki-image, product-commercial, video-studio, fashion,
   werbetraeger) liegt bereits auf 80px -> unberuehrt.
   AUSREISSER auf 80px gezogen:
     .term-hero  -> Container war min(1520, 100vw-72) zentriert = 36px links.
     .ucd-hero   -> Inner war min(1200, ..) zentriert = 120px links.
   Nur der horizontale Einzug wird angeglichen; Titel-/Copy-Typografie und
   das 2-Spalten-Raster (Text links, Visual rechts) bleiben unveraendert.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* TERM-HERO: Raster-Container an die Shell-Kante statt zentrierter Box. */
  html body:not(#saig-x) main .term-hero .term-container:not(#____never____):not(#____never____) {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--saa-shell-x, 80px) !important;
    padding-right: var(--saa-shell-x, 80px) !important;
  }
  /* UCD-HERO (Call Agent): zentrierten Inner links an die Shell-Kante. */
  html body:not(#saig-x) main .ucd-hero:not(#____never____):not(#____never____) {
    padding-left: var(--saa-shell-x, 80px) !important;
    padding-right: var(--saa-shell-x, 80px) !important;
  }
  html body:not(#saig-x) main .ucd-hero .ucd-hero__inner:not(#____never____):not(#____never____) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Produkt-Heroes an dieselbe Textkante und Bildproportion wie die übrigen
     KI-Lösungsseiten bringen. Mobile bleibt beim bestehenden Stapel-Layout. */
  html body:not(#saig-x) main :is(.pl-hero, .pw-hero) :is(.pl-container, .pw-container):not(#____never____) {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--saa-shell-x, 80px) !important;
    padding-right: var(--saa-shell-x, 80px) !important;
  }
  html body:not(#saig-x) main :is(.pl-hero, .pw-hero) :is(.pl-hero__grid, .pw-hero__grid):not(#____never____) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(32px, 5vw, 72px) !important;
  }
}

/* --------------------------------------------------------------------------
   6) HERO-TITEL: Ueberlauf bei langen Woertern
   Gemessen 31.08.2026 auf usecase-fashion-visual-studio.html bei 375px.

   (a) Schriftgrad. --hero-ref-title-fs ist clamp(42px, 4.45vw, 64px); der
       Boden 42px greift damit auf jeder Handybreite unveraendert. Das
       laengste Wort "Kampagnenmotive," misst dort 390px gegen 347px
       verfuegbare Breite und reisst ueber den Rand. Regel unten identisch
       zu der auf Branch Agent/main-tabs-redesign (Commit c46bacc), damit
       beim Zusammenfuehren kein zweiter, konkurrierender Mechanismus
       entsteht. Jener Branch ist NICHT deployt -- live auf /r5 fehlt der
       Block, der Fehler ist dort weiterhin sichtbar.

   (b) Zusaetzlich, aus diesem Audit neu: .hero-scene__content ist
       flex/column mit align-items:flex-start. Die h1 wird dadurch nicht
       gestreckt, sondern fit-content berechnet:
       max(min-content, min(max-content, verfuegbar)). Ist die
       min-content-Breite -- das laengste untrennbare Wort -- groesser als
       der verfuegbare Platz, gewinnt sie, und die Box wird breiter als der
       Container. Genau das war hier der Fall: 389px in einem 347px-Container.
       (Nicht max-content: die wird durch den verfuegbaren Platz begrenzt,
       min-content nicht.) Sichtbar wird das nicht als Scrollbalken, weil
       .hero-scene overflow-x:hidden hat; der Text wird schlicht
       abgeschnitten. max-width:100% bindet die Box wieder an den Container.
       Das behebt den Ueberlauf der BOX; ein einzelnes Wort, das breiter als
       der Container ist, ragt weiterhin heraus -- dagegen hilft nur (a).
       Beide Teile zusammen sind noetig.

       Nur bis 640px: darueber haelt Abschnitt 4 die Zeilenlaenge mit
       max-width:720px in Schach; ein globales 100% wuerde diese Bremse auf
       Desktop aufheben. Bei 641px wurden alle 15 Hero-Seiten geprueft, keine
       laeuft ueber -- das haengt aber am Textinhalt, nicht an einer Garantie.
       Bei neuen, sehr langen Titelwoertern hier erneut messen.
       Das "main" im Selektor ist noetig, nicht Deko -- ohne dieses eine
       Element bleibt die Regel bei (2,1,2) und verliert gegen die
       720px-Regel in Abschnitt 4, die durch ihr :is() auf (2,1,3) kommt.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --hero-ref-title-fs: clamp(30px, 9.5vw, 42px);
  }
  html body:not(#saig-x) main .hero-scene__title:not(#____never____) {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   7) HERO-TYPEWRITER: rotierendes Wort auf eigene Zeile (nur Mobile)
   Joshua, 31.08.: "Der Text der sich bewegt in rot darf keinen anderen Text
   in der Mobile-Ansicht verschieben." Auf Nachfrage: "Alle Hero-Sections
   muessen fuer die Mobile-Ansicht so angepasst werden." Deshalb global.

   Gemessen bei 375px, Hoehe der h1 ueber ALLE Tippzustaende, vor dem Fix:
     labs          176 / 220 / 265 px  -> 89 px Sprung
     ki-beratung   265 / 309 / 353 px  -> 88 px Sprung
     werbetraeger  220 / 265 px        -> 45 px Sprung
     partner       265 / 309 px        -> 44 px Sprung
     index, usecase-fashion-visual-studio: konstant, kein Sprung

   Dies ist der dritte Anlauf; die Historie steht im Kopf von js/typewriter.js:
   Breiten-Reservierung liess Folgetext in einer Luecke stehen (abgelehnt),
   gar keine Reservierung laesst die Zeile umbrechen (ebenfalls abgelehnt).
   Beides zugleich geht inline nicht. Loesung: dem Wort eine eigene Zeile geben
   -- dann steht kein Folgetext daneben, der verschoben werden koennte, und es
   entsteht keine Luecke. Zeilenzahl konstant, egal welches Wort laeuft.

   min-width:0 hebt die Inline-Reservierung von js/typewriter.js auf; sie ist
   hier gegenstandslos und wuerde nur die Zeile unnoetig breit halten.

   SPEZIFITAET: Das "main" im Selektor ist noetig, nicht Deko. Ohne es liegt die
   Regel bei (2,2,2) und verliert -- gemessen auf der Live-Seite labs.html gegen
   die inline-block-Regel in Abschnitt 3b (gleiche Spezifitaet) und gegen
   css/labs-partner.css, das fuer .labs-page/.partner-page ebenfalls
   inline-block !important setzt und in diesem Worktree gar nicht existiert.
   Mit "main" sind es (2,2,3) und die Regel greift. Alle Hero-Titel liegen in
   <main> (index .site-main, uebrige .subpage-main, labs/partner geprueft).

   WORT-EINHEIT (.hero-typewriter-unit): Wo das rotierende Wort mit dem Text
   davor EIN Wort bildet, darf nicht das Wort allein umbrechen, sondern nur die
   Einheit. Fall ki-beratung: "KI-" + Wort ergibt "KI-Beratung"; ohne Einheit
   stuende "KI-" allein auf einer Zeile. Die Einheit traegt dann die Zeile, das
   Wort darin bleibt inline. Neue Faelle dieser Art bitte ebenso einpacken.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html body:not(#saig-x) main .hero-scene__title
    :is(.hero-typewriter, .hero-typewriter-unit):not(#____never____) {
    display: block !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  /* In einer Einheit traegt die Einheit die Zeile, nicht das Wort. */
  html body:not(#saig-x) main .hero-scene__title
    .hero-typewriter-unit .hero-typewriter:not(#____never____) {
    display: inline !important;
    white-space: nowrap !important;
  }
}