/* Reset + Layout-Primitives. Mobile-first, kein Framework. */

/* ---- Seitenuebergaenge (Cross-Document View Transitions) ----
   Reine CSS-Funktion, kein JS: bei jeder normalen Navigation zwischen zwei
   Seiten dieser Site (inkl. Sprachwechsel, Zurueck/Vor) nimmt der Browser
   selbststaendig einen Schnappschuss der alten Seite, laesst die neue
   rendern und blendet beides ueber diese Pseudo-Elemente. Browser ohne
   Unterstuetzung ignorieren die @view-transition-Regel einfach und
   navigieren normal weiter -- keine JS-Abhaengigkeit, kein Fallback noetig
   (CLAUDE.md: JS nur als progressive enhancement, Funktion nie davon
   abhaengig). Bewusst ausserhalb jedes @layer: Transition-Pseudo-Elemente
   leben in einer eigenen, immer obenauf liegenden Ebene, Layer-Reihenfolge
   greift hier ohnehin nicht. */
@view-transition {
  navigation: auto;
}

/* Reines Fade: das vorherige Scale/TranslateY (Soft Settle) sah beim
   echten Seitenwechsel fehlerhaft/glitchy aus (View-Transition-
   Snapshots skalieren nicht immer sauber, je nach Seiteninhalt/
   Groesse). Nur noch Opacity -- alte Seite faded schnell weg, neue
   Seite startet mit kurzer Verzoegerung (140ms) VOR Ende der alten
   (Ueberlappung verhindert einen leeren Zwischenzustand) und faded
   weich herein. */
::view-transition-old(root) {
  animation: st-page-out var(--dur-base) cubic-bezier(0.5, 0, 1, 0.5) both;
}

::view-transition-new(root) {
  animation: st-page-in var(--dur-slow) var(--ease-out-expo) 140ms both;
}

@keyframes st-page-out {
  to {
    opacity: 0;
  }
}

@keyframes st-page-in {
  from {
    opacity: 0;
  }
}

/* Kopfzeile ist auf jeder Seite identisch -- eigener Transition-Name statt
   Teil des Root-Schnappschusses, sonst blitzt sie bei jeder Navigation
   unnoetig auf, obwohl sie sich nie aendert. */
.site-header {
  view-transition-name: site-header;
}

/* ::view-transition-group(site-header) zusaetzlich zu old/new: die Gruppe
   steuert die GEOMETRIE (Groesse/Position) des Snapshots, alt/new nur
   dessen Bildinhalt. Ohne dieses Group-animation:none morpht der Browser
   die Snapshot-Box automatisch, sobald sie sich zwischen alter und neuer
   Seite unterscheidet -- "ST" ist per transform:scale unterschiedlich
   gross je nach .is-scrolled-Zustand (haengt vom Scrollstand der
   jeweiligen Seite ab, nicht synchron).

   animation:none allein reicht aber nicht: ohne eigene Crossfade-Animation
   bleiben alt- UND neu-Snapshot gleichzeitig bei voller Deckkraft
   uebereinander liegen (die UA-Standardanimation, die genau das
   verhindert, ist ja abgeschaltet) -- das war der gemeldete "doppelt
   uebereinandergelegte" Logo-Glitch. display:none auf dem alten Snapshot
   blendet ihn komplett aus, es ist immer nur der neue sichtbar. */
::view-transition-group(site-header) {
  animation: none;
}

::view-transition-old(site-header) {
  display: none;
}

::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

@layer reset, layout, components;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Mehrere Bloecke bluten absichtlich ueber ihre eigene Section hinaus
     (tile_band-Plaketten-Klone als Kulisse, Scroll-Reveal-Startzustaende
     mit Transform vor dem Eintreten in den Viewport) -- ohne diese Grenze
     wurde daraus auf schmalen Viewports ein horizontal scrollbarer
     Seitenkoerper, der den fixierten Header/Burger wegscrollbar machte.
     Der Header bleibt trotzdem an Ort und Stelle (position:fixed haengt am
     Viewport, nicht am gescrollten Inhalt) -- overflow-x hier verhindert
     nur, dass ueberhaupt seitlich gescrollt werden kann.
     NUR auf html, nicht zusaetzlich auf body: overflow-x auf body macht
     body zum scrollenden Element und bricht dadurch position:sticky bei
     allen Nachfahren (bekannter Chromium/Safari-Effekt, hat den
     Kartenstapel-Scroll-Effekt bei industry_stack lahmgelegt). */
  html {
    overflow-x: hidden;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    padding-top: var(--menu-h);
    background: var(--color-bg-light);
    color: var(--color-text-on-light);
    font: var(--font-text);
  }

  body.theme-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
  }

  img, video, svg {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
  }

  strong, b {
    /* Söhne Mono liegt nur in Buch (400) und Halbfett (600) vor -- kein 700er Schnitt. */
    font-weight: 600;
  }

  h1, h2, h3, h4, p, dl, dd {
    margin: 0;
  }

  ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
}

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Gegenstueck zu .container: voller Viewport statt auf --container-max
     (Menue-/Header-Breite) begrenzt, behaelt aber denselben Seitenabstand --
     per Block editierbar ueber das "wide"-Feld, siehe block_width_class()
     in helpers.php. */
  .block--wide {
    padding-inline: var(--gutter);
  }

  .stack {
    display: flex;
    flex-direction: column;
  }

  .stack > * + * {
    margin-top: var(--stack-gap, var(--space-2xs));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-sm));
  }

  .section {
    padding-block: var(--space-xl);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--gutter);
    z-index: 100;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    transition: top var(--dur-fast) var(--ease-out-quad);
  }

  .skip-link:focus {
    top: var(--space-sm);
  }
}

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Etwas kompakter als vorher (war --space-2xs/--space-sm @ 1rem
       Schrift) -- die Pille wirkte im Vergleich zu den restlichen
       Mono-Textgroessen ueberdimensioniert. */
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: 400 0.9rem var(--font-family-mono);
    letter-spacing: var(--letter-spacing-btn);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--dur-fast) var(--ease-out-quad);
  }

  .btn:hover, .btn:focus-visible {
    transform: translateY(-2px);
  }

  .btn--small {
    padding: 0.4rem 0.9rem;
    font-size: 0.75rem;
  }

  /* Fuer Buttons auf bereits akzentfarbenem Grund (z.B. .block-info--accent)
     -- der normale orangene .btn wuerde dort im Hintergrund verschwinden. */
  .btn--dark {
    background: var(--color-bg-dark);
    color: var(--color-text-on-dark);
  }

  .media-placeholder {
    display: flex;
    align-items: flex-end;
    min-height: 12rem;
    padding: var(--space-2xs);
    background-color: rgb(0 0 0 / 6%);
    background-image: repeating-linear-gradient(
      45deg,
      rgb(0 0 0 / 6%),
      rgb(0 0 0 / 6%) 10px,
      transparent 10px,
      transparent 20px
    );
    border: 1px dashed rgb(0 0 0 / 25%);
    color: rgb(0 0 0 / 55%);
    font: 400 0.75rem var(--font-family-mono);
  }

  [data-theme-dark] .media-placeholder,
  .theme-dark .media-placeholder {
    background-color: rgb(255 255 255 / 8%);
    border-color: rgb(255 255 255 / 25%);
    color: rgb(255 255 255 / 55%);
  }

  /* Bleibt immer sichtbar (kein Hide-on-scroll-down mehr, kein .is-hidden
     -- motion.js toggelt nur noch .is-scrolled). */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    min-height: var(--menu-h);
    color: var(--color-text-on-dark);
  }

  /* Der Header-Balken selbst hat KEINEN eigenen Hintergrund mehr, auch
     nicht beim Scrollen -- Kontrast kommt stattdessen von der Nav-Pille
     und der Burger-Kapsel (siehe .site-header__nav / .site-header__burger
     weiter unten), die beide erst bei .is-scrolled ihren Hintergrund
     bekommen. Ein zweiter Hintergrund auf dem ganzen Balken waere
     redundant. */

  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: var(--menu-h);
  }

  .site-header__logo {
    display: flex;
    align-items: center;
    line-height: 0;
  }

  /* Komplettes Logo ("ST" + "connect") ist am Seitenanfang ohne Scrollen
     sichtbar. Beim Scrollen klappt "connect" (logo-word) per
     max-width/opacity weg UND "ST" (logo-mark) wird gleichzeitig
     groesser -- per transform:scale statt animierter height, das laeuft
     nur auf dem Compositor (kein Reflow, keine Ruckler) und die Position
     bleibt trotzdem fest, weil transform-origin am linken Rand sitzt. */
  .site-header__logo-mark {
    display: block;
    flex: none;
    width: auto;
    height: 32px;
    height: 2rem;
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .site-header.is-scrolled .site-header__logo-mark {
    transform: scale(1.55);
  }

  /* max-width statt width: das Bild behaelt sein eigenes
     Seitenverhaeltnis (width:auto), max-width ist der animierbare
     Blocker. 8rem liegt ueber der tatsaechlichen Breite bei 2rem Hoehe
     (~7.4rem) -- reicht als Start-Obergrenze, ohne selbst sichtbar zu
     clippen. */
  .site-header__logo-word {
    display: block;
    width: auto;
    height: 32px;
    height: 2rem;
    max-width: 8rem;
    margin-left: 0.5rem;
    opacity: 1;
    overflow: hidden;
    transition: max-width var(--dur-base) var(--ease-out-expo),
      opacity var(--dur-fast) var(--ease-out-quad),
      margin-left var(--dur-base) var(--ease-out-expo);
  }

  .site-header.is-scrolled .site-header__logo-word {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
  }


  /* ---- burger toggle: reines CSS (:checked), kein JS -- funktioniert also
     auch ohne JS/bei JS-Fehlern (CLAUDE.md). Sichtbar nur unterhalb der
     Desktop-Breite, siehe @media weiter unten. ---- */
  /* Eigene, immer sichtbare dunkle Glass-Flaeche hinter dem Button (nicht
     erst ab .is-scrolled wie bei der Nav-Pille): der Burger steht per
     position:fixed ueber wechselndem Seiteninhalt (helle Sections, das
     Akzentorange der CTA-Banner/des Footers) -- die reine Akzentfarbe der
     Striche allein ging darauf sichtbar unter. */
  .site-header__burger {
    position: relative;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem;
    margin: calc(var(--space-2xs) * -1);
    cursor: pointer;
    background: rgb(10 10 10 / 55%);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgb(255 255 255 / 12%);
  }

  .site-header__burger span {
    display: block;
    height: 2px;
    background: var(--color-accent);
    transition: transform var(--dur-fast) var(--ease-out-quad), opacity var(--dur-fast) var(--ease-out-quad);
  }

  .site-header__nav-toggle:checked ~ .site-header__burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header__nav-toggle:checked ~ .site-header__burger span:nth-child(2) {
    opacity: 0;
  }

  .site-header__nav-toggle:checked ~ .site-header__burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ---- mobile panel: full-height slide-down overlay, own scroll if the
     nav ever grows taller than the viewport. Desktop reverts to the
     original inline row, see @media below.

     position: fixed statt absolute -- "will-change: transform" auf
     .site-header (fuer das inzwischen entfernte Hide-on-scroll) ist weg,
     der Grund fuer den frueheren absolute-Umweg (Containing-Block-Falle)
     entfaellt damit. Echtes fixed deckt den kompletten Viewport ab (inset:0),
     dadurch keine Luecke mehr oben hinter der Menueleiste. ---- */
  .site-header__panel {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--gutter);
    background: #000;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out-quad), transform var(--dur-fast) var(--ease-out-quad),
      visibility 0s linear var(--dur-fast);
  }

  .site-header__nav-toggle:checked ~ .site-header__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity var(--dur-fast) var(--ease-out-quad), transform var(--dur-fast) var(--ease-out-quad);
  }

  /* Nur im Mobile-Overlay sichtbar -- ab 64rem (siehe @media weiter unten)
     ist das Panel zurueck im normalen Fluss neben dem echten Header-Logo,
     ein zweites Logo dort waere doppelt. Position/Groesse decken sich
     bewusst 1:1 mit .site-header__logo (gleicher linker Rand ueber
     padding-inline:var(--gutter), gleiche vertikale Mitte ueber
     height:var(--menu-h) + align-items:center, gleiche Bildhoehe 2rem) --
     aus dem Panel heraus soll es wirken, als wuerde exakt dasselbe Logo an
     Ort und Stelle stehen bleiben, nicht ein zweites, anders platziertes. */
  .site-header__panel-logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--menu-h);
    display: flex;
    align-items: center;
    padding-inline: var(--gutter);
    line-height: 0;
  }

  .site-header__panel-logo img {
    display: block;
    height: 2rem;
    width: auto;
  }

  /* Nav nimmt den ganzen verfuegbaren Platz und zentriert ihren Inhalt
     (Menuepunkte) darin -- "mittig" statt oben ausgerichtet. */
  .site-header__panel .site-header__nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  /* Sprachumschalter bleibt unten, sichtbar abgesetzt von den
     Menuepunkten (Trennlinie + eigener Abstand) statt direkt darunter
     zu haengen. */
  .site-header__panel .lang-switcher {
    flex: none;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgb(255 255 255 / 15%);
  }

  .site-header__panel .cluster {
    flex-direction: column;
    align-items: center;
    --cluster-gap: var(--space-sm);
  }

  .site-header__nav a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    font: var(--font-nav);
    letter-spacing: var(--letter-spacing-nav);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out-quad);
  }

  .site-header__nav a:hover,
  .site-header__nav a:focus-visible {
    color: var(--color-accent);
  }

  .site-header__nav a.is-active {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
  }

  .site-header__nav a.is-active:hover,
  .site-header__nav a.is-active:focus-visible {
    color: var(--color-accent-contrast);
  }

  .lang-switcher {
    --cluster-gap: var(--space-2xs);
    font: var(--font-nav);
  }

  .lang-switcher a,
  .lang-switcher__current {
    text-decoration: none;
  }

  .lang-switcher__current {
    color: var(--color-accent);
  }

  .lang-switcher__disabled {
    color: rgb(255 255 255 / 35%);
    cursor: not-allowed;
  }

  /* ---- Desktop: Panel zurueck in den normalen Fluss, Burger weg -- exakt
     das urspruengliche Layout (Logo | Nav | Sprachumschalter in einer
     Zeile). 64rem statt der sonst ueblichen 48rem-Schwelle: 4 Nav-Links +
     Sprachumschalter brauchen mehr Platz, bevor sie umbrechen wuerden. */
  @media (min-width: 64rem) {
    .site-header__burger {
      display: none;
    }

    .site-header__panel-logo {
      display: none;
    }

    /* Nav-Pille: bekommt Hintergrund/Rand/Schatten erst beim Scrollen,
       zusammen mit der wachsenden Logo-Marke (siehe .site-header__logo
       -mark). Dunkles Glass (dunkler, halbtransparenter Grund + Blur)
       statt hellem Grund -- bleibt auch ueber hellem Content lesbar. Auf
       dem GANZEN Panel (Nav + Sprachumschalter zusammen), nicht nur auf
       der Nav -- eine Pille. Nur ab dieser Breite -- im mobilen
       Dropdown-Panel steckt schon ein eigener soliden schwarzer
       Hintergrund (.site-header__panel unten), eine zweite Pille darin
       waere falsch.

       KEIN flex:1 mehr: das Panel wuerde sonst den ganzen Platz zwischen
       Logo und rechtem Rand fuellen und die Pille reichte optisch bis
       ans Logo heran, obwohl dort kein Inhalt ist. .site-header__inner's
       eigenes justify-content:space-between schiebt das (jetzt
       inhaltsbreite) Panel trotzdem an den rechten Rand. */
    /* Padding ist von Anfang an da (nicht erst bei .is-scrolled) --
       genau wie border weiter unten kann sonst nichts sauber
       eintransitionieren. Wichtiger Grund diesmal: animierte padding
       aendert die Panel-Groesse bei JEDEM Frame, wodurch die Nav-Links
       (Flex-Kinder) reflowen und sichtbar hin- und herspringen -- das
       war der gemeldete Glitch bei den Menuepunkten. Jetzt bleibt die
       Panel-Box immer gleich gross, nur Hintergrund/Rand/Blur blenden
       ein -- kein Reflow mehr moeglich. */
    .site-header__panel {
      position: static;
      height: auto;
      z-index: auto;
      flex-direction: row;
      align-items: center;
      gap: var(--space-lg);
      padding: 0.5rem 1.125rem;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      overflow: visible;
      opacity: 1;
      visibility: visible;
      transform: none;
      pointer-events: auto;
      transition: background-color var(--dur-base) var(--ease-out-expo),
        box-shadow var(--dur-base) var(--ease-out-expo),
        backdrop-filter var(--dur-base) var(--ease-out-expo),
        border-color var(--dur-base) var(--ease-out-expo);
    }

    /* Deutlich sichtbares dunkles Glass -- gleiche Werte wie die
       Burger-Kapsel (siehe .site-header__burger), damit Mobile/Desktop
       gleich aussehen. */
    .site-header.is-scrolled .site-header__panel {
      background: rgb(10 10 10 / 55%);
      box-shadow: 0 8px 20px rgb(0 0 0 / 5%);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-color: rgb(255 255 255 / 12%);
    }

    .site-header__panel .cluster {
      flex-direction: row;
      align-items: center;
    }

    /* Mobile-only Vollbild-Zentrierung (siehe .site-header__panel
       .site-header__nav / .lang-switcher oben) zurueck auf die normale
       Inline-Reihe fuer Desktop. */
    .site-header__panel .site-header__nav {
      flex: none;
      display: block;
    }

    .site-header__panel .lang-switcher {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }

    .site-header__nav ul {
      --cluster-gap: 3.625rem;
    }

    .site-header__nav a {
      font-size: 0.85rem;
    }
  }

  /* Ecken-Chamfer in festen rem statt Prozent -- Prozent bezieht sich auf
     die eigene Box (Breite fuer x, Hoehe fuer y) und aendert dadurch
     sichtbar Groesse/Winkel je nach Viewport-Breite UND Footer-Hoehe
     (die wiederum vom Inhalt abhaengt). Ein fester rem-Wert bleibt beim
     Skalieren gleich gross. */
  .site-footer {
    --corner-chamfer: 1.5rem;
    position: relative;
    padding-block: var(--space-xl);
    background-color: var(--color-accent);
    clip-path: polygon(
      var(--corner-chamfer) 0,
      calc(100% - var(--corner-chamfer)) 0,
      100% var(--corner-chamfer),
      100% 100%,
      0 100%,
      0 var(--corner-chamfer)
    );
    color: var(--color-accent-contrast);
    margin-top: -2rem
  }

  /* Wenn eine cta_banner-Section direkt vor dem Footer steht (z.B. Home):
     der Footer schiebt sich etwas darueber, statt exakt an der Kante
     anzuschliessen -- verdeckt zuverlaessig jeden Rest-Spalt aus der
     Parallax-Bewegung, auch wenn die schon in der Section selbst
     eingehegt ist (siehe .block-cta-banner). */
  main:has(> .block-cta-banner:last-child) + .site-footer {
    margin-top: clamp(-3rem, -6vw, -1.5rem);
  }

  .site-footer__logo {
    height: 2rem;
    width: auto;
    margin-bottom: var(--space-lg);
  }

  .site-footer__inner {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 48rem) {
    .site-footer__inner {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  .site-footer a {
    text-decoration: none;
  }

  .site-footer a:hover,
  .site-footer a:focus-visible {
    text-decoration: underline;
  }

  .site-footer__company {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1xs);
    font: var(--font-text);
  }
}