/* Hülle der Startsektion in index.html.

   Geschichte: eigene Scroll-Inszenierung (bis 25.08.2026) -> gelieferte
   Scroll-Expand-Insel #dwc-hero-root (25.-29.08.) -> seit 29.08.2026 der
   statische Editorial-Split .hero-split. Die Insel liegt vollständig als
   Baustein in _intern/_bausteine/scroll-expand-hero/.

   In dieser Datei stehen bewusst weiter: die Hülle hier, die komplette
   Kopfzeilen-Logik weiter unten (seit jeher hier, nicht in index.html), die
   .hero-split*-Regeln und die (inerte) Übergabe an Seite 2 ganz am Ende.

   min-height:100dvh, weil die Höhe nicht mehr von der Insel kommt. Der
   negative Versatz bleibt - die transparente Kopfzeile liegt über der Sektion,
   nicht davor. */
.scrolly-hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-height));
  min-height: 100dvh;
  background: #05070a;
}

#site-header:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Weisses Logo und weisse Schrift haengen seit 23.08.2026 an .over-dark statt
   an :not(.scrolled).

   Vorher war "hell geschrieben" gleichbedeutend mit "noch nicht gescrollt" -
   zehn Pixel nach dem Seitenanfang kippte die Leiste auf weiss, und zwar
   mitten auf der schwarzen Buehne und der schwarzen Seite 2. .over-dark fragt
   stattdessen, was hinter der Leiste liegt (siehe Skript in index.html,
   Sektionen mit data-nav-dunkel). Damit gilt dieselbe Regel auch weiter unten
   bei Referenzen, Kontakt und Fusszeile.

   Die Regel darueber bleibt bei :not(.scrolled): ob die Leiste ueberhaupt
   sichtbar wird, ist eine Frage der Scrollposition, nicht des Untergrunds.

   <header> traegt over-dark schon im Markup, damit die Schrift nicht erst
   nach dem ersten Skriptlauf hell wird. */
#site-header.over-dark .header-logo-light {
  display: none;
}

#site-header.over-dark .header-logo-dark {
  display: block;
}

#site-header.over-dark .nav-btn,
#site-header.over-dark .nav-dropdown-btn {
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.46);
}

#site-header.over-dark .nav-btn:hover,
#site-header.over-dark .nav-dropdown-btn:hover,
#site-header.over-dark .nav-dropdown-btn.open {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

/* Kopfzeile im Hero-Startzustand als schmaler, diagonaler Schatten des
   schwarzen Panels sichtbar; die Navigation sitzt dabei bereits innerhalb
   der schwarzen Fläche (Leo, 30.08.2026).

   Nutzt bewusst die BESTEHENDE Klasse .scrolled, die das Skript in index.html
   ohnehin schon bei scrollY > 10 setzt - es kommt also keine neue Scroll-Logik
   dazu. Diese Datei ist nur in index.html verlinkt, Unterseiten wie Galerie
   oder Preise behalten ihre Kopfzeile unverändert.

   Ab 900px, weil unterhalb davon der Burger-Knopf die einzige Navigation ist -
   der darf nicht verschwinden. Mobil bleibt damit exakt wie bisher.

   Die Positionierung im Ruhemodus ist ausschließlich auf diesen Zustand
   begrenzt; beim vorhandenen .scrolled-Zustand gelten die Originalwerte. */
@media (min-width: 900px) {
  #site-header {
    transition:
      background 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.2s ease,
      opacity 0.3s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }

  /* Nur der schwarze Hintergrund wird diagonal beschnitten. Die Inhalte
     bleiben ausserhalb der Hero-Haelfte sichtbar, damit der CTA am rechten
     Rand stehen kann, ohne von der Maske abgeschnitten zu werden. */
  #site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #05070a;
    clip-path: polygon(0 0, 60% 0, calc(60% - 0.7vw) 100%, 0 100%);
    pointer-events: none;
    transition:
      clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease;
  }

  #site-header .header-inner {
    position: relative;
    z-index: 1;
  }

  #site-header .header-logo,
  #site-header .header-nav,
  #site-header .header-cta {
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #site-header:not(.scrolled) {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    background: transparent;
    transition:
      background 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.2s ease,
      visibility 0s linear 0s;
  }

  #site-header:not(.scrolled) .header-inner {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, visibility 0s linear 0s;
  }

  /* Ruhemodus-Geometrie: Logo am linken Rand, Navigation mittig in der
     schwarzen Hero-Haelfte, CTA mit mehr Abstand zum Inhaltsblock. */
  /* Auf grossen Bildschirmen liegt .header-inner auf --shell-max (1672px).
     Das Logo startet bewusst zwischen Außenkante und späterer Shell-Position:
     der halbierte Korrekturterm verkürzt die sichtbare Bewegung beim ersten
     Scrollen deutlich, ohne die ausgefahrene Navbar selbst zu verändern.
     Bei schmalen Fenstern bleibt der Term 0 und damit die bisherige Position. */
  #site-header:not(.scrolled) .header-logo {
    transform: translate3d(
      calc(
        -13px -
          max(0px, (100vw - var(--shell-max)) / 4 - var(--gutter) / 2)
      ),
      0,
      0
    );
  }

  #site-header:not(.scrolled) .header-nav,
  #site-header:not(.scrolled) .header-cta {
    visibility: visible;
  }

  #site-header:not(.scrolled) .header-nav {
    transform: translate3d(-150px, 2px, 0);
  }

  #site-header:not(.scrolled) .header-cta {
    transform: translate3d(20px, 3px, 0);
  }

  /* Der Header übernimmt im Ruhemodus die Logo-Position; das dekorative Hero-
     Duplikat bleibt deshalb ausgeblendet und erzeugt keinen Doppelrand. */
  .scrolly-hero .hero-split__logo {
    visibility: hidden;
  }

  /* Dunkler Balken nur, solange die Leiste noch ueber einer dunklen Sektion
     liegt (.over-dark). Ohne die Kopplung blieb der Balken auch ueber den
     hellen Sektionen dunkel - die Farbumschaltung war damit tot, obwohl die
     Ruhemodus-Geometrie (Diagonale, Logo/Nav-Position) davon unberuehrt ist.
     Der weisse Balken auf hellen Sektionen kommt weiter aus
     `header.scrolled` (index.html); .scrolled.over-dark daraus wiederum aus
     `#site-header.scrolled.over-dark` (index.html), das hier nicht dupliziert
     werden muss. (Leo, 30.08.2026)

     Frueher stand hier trotzdem eine eigene Regel mit rgba(...,0.74) - exakt
     der alte Transparenzwert, den Julian in index.html am 30.08.2026 bewusst
     auf 100% Deckkraft gezogen hat ("schimmerte durch die restlichen 8% ein
     Rand der vorherigen Section durch"). Weil dieses Stylesheet PER <link>
     nach dem Inline-<style> mit dem echten Fix laedt, gewann bei gleicher
     Spezifitaet die spaetere (diese) Regel im Cascade und hat den Fix auf
     JEDER Seite mit dieser Datei lautlos wieder rueckgaengig gemacht - der
     Rand schimmerte also weiterhin durch, obwohl index.html laut eigenem
     Kommentar bereits "opak" sagte. Entfernt (31.08.2026), der Kommentar
     oben stimmt jetzt tatsaechlich: nichts hier ueberschreibt index.html
     noch. */

  #site-header.scrolled::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0;
  }

  #site-header.scrolled .header-inner {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.08s, visibility 0s linear 0s;
  }
}

/* Die Hero-Diagonale liegt im schmalen Desktopbereich weiter rechts. */
@media (min-width: 900px) and (max-width: 1023px) {
  #site-header:not(.scrolled)::before {
    clip-path: polygon(0 0, 70% 0, calc(70% - 0.8vw) 100%, 0 100%);
  }
}

/* Direkte Übergabe an Seite 2: Die Scroll-Bühne endet im selben Schwarz wie
   „Was uns ausmacht“. Die vorhandene Reveal-Logik wird nur für diesen Einstieg
   gestaffelt, damit kein neuer Zwischenbereich entsteht. */
.scrolly-hero + .about-section {
  z-index: 4;
  margin-top: -1px;
  background-color: #000;
}

.scrolly-hero + .about-section .s3-head.reveal,
.scrolly-hero + .about-section .s3-left.reveal,
.scrolly-hero + .about-section .s3-body.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition-property: opacity, transform;
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.scrolly-hero + .about-section .s3-head.reveal {
  transition-delay: 0s;
}

.scrolly-hero + .about-section .s3-left.reveal {
  transition-delay: 0.14s;
}

.scrolly-hero + .about-section .s3-body.reveal {
  transition-delay: 0.26s;
}

.scrolly-hero + .about-section .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 760px) {
  .scrolly-hero + .about-section .s3-left.reveal {
    transition-delay: 0.12s;
  }
}

/* ═══════════ HERO · Diagonaler Editorial-Split (29.08.2026) ═══════════

   Der Hero der Startseite: schwarze Flaeche links mit Logo, Headline, Linie,
   Kurztext und drei Siegeln; helle diagonale Flaeche rechts mit dem Dresdner
   Elbpanorama. Traegt die einzige echte <h1> der Seite. Logo und Linie sind
   aria-hidden (das Logo doppelt die Navbar im gescrollten Zustand).

   Bis 29.08.2026 lag hier zusaetzlich die Scroll-Expand-Insel darunter und
   dieser Block war eine pointer-events:none-Ebene, die beim Aufziehen
   ausblendete (--hero-split-weg). Insel raus -> jetzt ein normaler,
   scrollbarer Hero ohne Fade. Archiv + Wiedereinbau:
   _intern/_bausteine/scroll-expand-hero/. */

.scrolly-hero {
  /* Diagonale: X-Position der Kante oben / unten (Anteil der Breite). Schwarz
     ist oben breiter - wie im Referenzbild. In der Browser-QA feinjustiert. */
  --hero-split-cut-top: 60%;
  --hero-split-cut-bot: 53%;
}

/* Aufbau (voll responsiv, 30.08.2026):
   .hero-split ist ein Flex-Spalten-Container. Die beiden Hintergrund-Ebenen
   (dark / light+Motiv) liegen absolut darüber/darunter. Logo und Content
   fließen NICHT absolut, sondern im normalen Fluss -> nichts kann sich
   verschieben oder unter der Diagonale verschwinden. Ist der Inhalt höher als
   der Viewport (flache Landscape-Fenster), wächst die Sektion mit statt zu
   beschneiden. */
.hero-split {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 84px);
  /* oben Platz fürs absolut sitzende Logo bzw. die mobile Navbar, unten Luft */
  padding-block: max(var(--nav-height), clamp(96px, 13vh, 156px))
    clamp(44px, 7vh, 84px);
}

/* schwarze Grundflaeche - volle Breite, unterste Ebene */
.hero-split__dark {
  position: absolute;
  inset: 0;
  background: #05070a;
}

/* helle Flaeche rechts, diagonale linke Kante. Grundton dient nur noch als
   Rand/Fallback - das Motiv füllt die Fläche. */
.hero-split__light {
  position: absolute;
  inset: 0;
  background: #dedcd7;
  /* Der Wipe aendert nur clip-path. Paint-Containment haelt die teure
     Foto-/Masken-Neuzeichnung auf dieses Panel begrenzt; will-change reserviert
     die Compositing-Schicht vor dem ersten Frame. Animation und Geometrie
     bleiben unveraendert. */
  contain: paint;
  will-change: clip-path;
  clip-path: polygon(
    var(--hero-split-cut-top) 0,
    100% 0,
    100% 100%,
    var(--hero-split-cut-bot) 100%
  );
}

/* Dresden-Motiv: Elbpanorama bei Dämmerung — rechter Ausschnitt mit
   Hausmannsturm, Hofkirche, den Fahrgastschiffen und viel Himmel, nur ein
   schmaler Streifen Elbwiese unten (Leo, 30.08.2026, aus
   _intern/_design-archiv/seite-1-hero/hintergrund-live.jpg zugeschnitten).

   Das Element deckt nur noch die rechte Bildhälfte + Puffer ab (left: 42%),
   nicht mehr die volle Breite: so füllt der Zuschnitt die sichtbare Diagonal-
   fläche fast 1:1 und behält seine Auflösung, statt über die ganze Seite
   gestreckt und dann zu 57 % weggeschnitten zu werden (das war die Unschärfe).
   Die harte Kante an der Diagonale kappt weiterhin das Panel selbst
   (.hero-split__light clip-path); die Maske weicht nur den Bildrand direkt an
   der Diagonale auf. */
.hero-split__motif {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 42%;
  background: url("../images/hero-section/hero-dresden-elbe-guhr.jpg")
    50% 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(
    97deg,
    transparent 12%,
    rgba(0, 0, 0, 0.4) 22%,
    #000 34%
  );
  mask-image: linear-gradient(
    97deg,
    transparent 12%,
    rgba(0, 0, 0, 0.4) 22%,
    #000 34%
  );
  opacity: 0.96;
}

/* dezenter Aufheller unten links: hält die Naht Bild -> Diagonale ruhig */
.hero-split__light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(212deg, rgba(222, 220, 215, 0) 62%, rgba(222, 220, 215, 0.5) 88%);
}

/* ── linke Textspalte ─────────────────────────────────────────────── */
/* Logo oben links, absolut verankert (fester Bezugspunkt, unabhängig von der
   Content-Höhe). Größe = Navbar-Wortmarke (54px), damit beim Einfahren der
   Navbar kein Sprung entsteht. Linke Kante bündig mit dem Content. */
.hero-split__logo {
  position: absolute;
  top: clamp(26px, 4.4vh, 52px);
  left: clamp(24px, 4vw, 84px);
  z-index: 3;
}
.hero-split__logo img {
  display: block;
  height: clamp(34px, 3.2vw, 54px);
  width: auto;
}

/* Content im Fluss, vom Flex-Container vertikal zentriert. max-width bleibt
   immer links der Diagonale (die sitzt bei ~60vw oben): 48vw + Rand < 60vw. */
.hero-split__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(700px, 48vw);
}

.hero-split__headline {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4.7vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: #f6f7f9;
}

.hero-split__rule {
  width: clamp(84px, 7vw, 120px);
  height: 2px;
  margin: clamp(22px, 2.3vw, 32px) 0 0;
  background: rgba(255, 255, 255, 0.55);
}

.hero-split__desc {
  margin: clamp(22px, 2.3vw, 32px) 0 0;
  max-width: 46ch;
  color: rgba(233, 236, 242, 0.66);
  font-size: clamp(15px, 1.05vw, 17.5px);
  line-height: 1.6;
}

/* ── Zertifikatsreihe ─────────────────────────────────────────────────
   ⚠ PLATZHALTER (29.08.2026): die drei Bilder unter
   assets/images/zertifikate/zert-*-platzhalter.jpg sind KI-generierte
   Beispiel-Urkunden und dürfen NICHT so live gehen. Das sichtbare
   "Platzhalter"-Badge wurde auf Leos Wunsch entfernt - sie sind jetzt NICHT
   mehr als Platzhalter erkennbar. Go-Live-Checkliste: PROJEKTSTAND.md,
   Abschnitt "GO-LIVE-BLOCKER". Vor Deploy: echte Nachweise rein,
   "-platzhalter" aus den Namen, diesen Kommentar + die Warnung in index.html
   entfernen. */
.hero-split__certs {
  margin-top: clamp(44px, 5.2vw, 70px);
}
.hero-split__certs-label {
  display: block;
  margin-bottom: clamp(16px, 1.7vw, 24px);
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.hero-split__certs-row {
  display: flex;
  flex-wrap: wrap; /* bricht auf schmalen Fenstern um statt zu quetschen */
  align-items: center;
  justify-content: flex-start; /* linksbündig, wie Logo/Headline/Text */
  gap: clamp(12px, 1.5vw, 24px);
  width: 100%;
}
/* Alle drei gleich behandelt: feste Höhe, Bild füllt formatgetreu (contain),
   Kärtchen hugt sein Bild. Die zwei schwarzen Urkunden verschmelzen mit der
   dunklen Fläche, die weiße Google-Urkunde steht als heller Block davor -
   genau die Wirkung aus dem Referenzbild. Die mittlere Urkunde ist hochkant
   und dadurch schmaler - gewollt, Hauptsache nichts abgeschnitten. */
.hero-split__cert {
  flex: 0 1 auto;
  min-width: 0;
  height: clamp(122px, 11.5vw, 176px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  overflow: hidden;
}
.hero-split__cert img {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* ── Trust-Bar unter den Zertifikaten (30.08.2026) ─────────────────────
   Ersetzt die weisse .cf-trust-Karte: transparent, linksbuendig wie der
   Rest der Spalte, direkt auf der dunklen Hero-Flaeche. Zahl-Animation
   siehe index.html-Skriptteil. Struktur pro Kennwert bewusst als eigener
   .hero-trust-stat gebaut (flex-Reihe im Wrapper), damit weitere echte
   Kennzahlen spaeter einfach als Geschwister danebengesetzt werden koennen -
   aktuell nur die eine echte Google-Bewertung, keine erfundenen Zahlen. */
.hero-trust {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 3vw, 48px);
}
.hero-trust-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-trust-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f6f7f9;
  font-variant-numeric: tabular-nums;
}
.hero-trust-denom {
  font-size: 0.4em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}
/* Duenn und dezent (Julian): 1px, 28% Weiss - reine Trennung, keine
   dekorative Linie wie .hero-split__rule (die ist bewusst kraeftiger). */
.hero-trust-rule {
  display: block;
  width: 52px;
  height: 1px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.28);
}
.hero-trust-label {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.hero-trust-stars {
  display: flex;
  gap: 2px;
  color: #ffb80f;
  font-size: 14px;
}
.hero-trust-star-wrap {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.hero-trust-star-wrap i {
  display: block;
  color: rgba(255, 255, 255, 0.22);
}
.hero-trust-star-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #ffb80f;
}
.hero-trust-t {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
.hero-trust-google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}
.hero-trust-google svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.hero-trust-google:hover {
  color: #fff;
}

/* Sozialer Beweis (Avatare + Zeile) - eigenstaendig, keine Karte, transparent
   auf dem Hero, sitzt UNTER der Trust-Bar (Julian). */
.hero-proof {
  margin-top: clamp(22px, 2.6vw, 30px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-proof-avatars {
  display: flex;
  flex: none;
}
.hero-proof-avatars img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hero-proof-avatars img + img {
  margin-left: -12px;
}
.hero-proof-text {
  max-width: 280px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(233, 236, 242, 0.75);
}
.hero-proof-text strong {
  font-weight: 600;
  color: var(--dwc-action-blue, #0757f7);
}

/* ── Eintritts-Animation beim Seitenaufruf ────────────────────────────
   Einmalig beim Laden, kein Scroll-Trigger, kein Exit. Nachbau des von Leo
   gelieferten Referenz-Effekts (Framer-Motion clip-path-Wipe, 1,2 s,
   "circOut"): die helle diagonale Fläche wischt von rechts herein, danach
   steigen Logo, Headline, Linie, Text und Zertifikate gestaffelt auf.

   Der Wipe läuft bewusst IMMER - auch bei "Bewegung reduzieren" im
   Betriebssystem (Leo hat das mehrfach ausdrücklich so verlangt; die
   Referenz-Komponente prüft die Einstellung ebenfalls nicht). Bei reduzierter
   Bewegung entfällt nur der vertikale Textversatz, der Text blendet dann
   an Ort und Stelle auf. */
@keyframes hero-panel-wipe {
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes hero-fade {
  from {
    opacity: 0;
  }
}
.hero-split__light {
  animation: hero-panel-wipe 1.2s cubic-bezier(0, 0.55, 0.45, 1) 0.05s both;
}
.hero-split__logo {
  animation: hero-rise 0.95s cubic-bezier(0.33, 0.9, 0.28, 1) 0.22s both;
}
.hero-split__headline {
  animation: hero-rise 0.95s cubic-bezier(0.33, 0.9, 0.28, 1) 0.34s both;
}
.hero-split__rule {
  animation: hero-rise 0.95s cubic-bezier(0.33, 0.9, 0.28, 1) 0.46s both;
}
.hero-split__desc {
  animation: hero-rise 0.95s cubic-bezier(0.33, 0.9, 0.28, 1) 0.55s both;
}
/* Zertifikate einzeln statt als ein Block (30.08.2026, Leo: "smoother").
   Vorher stieg die ganze Gruppe als eine Flaeche auf - bei drei nebeneinander
   liegenden Karten wirkte das wie ein Ruck. Jetzt kommt zuerst die
   Beschriftung, dann die drei Karten mit je 90 ms Versatz. */
.hero-split__certs-label {
  animation: hero-rise 0.95s cubic-bezier(0.33, 0.9, 0.28, 1) 0.64s both;
}
.hero-split__cert {
  animation: hero-rise 0.95s cubic-bezier(0.33, 0.9, 0.28, 1) both;
}
.hero-split__cert:nth-child(1) { animation-delay: 0.72s; }
.hero-split__cert:nth-child(2) { animation-delay: 0.79s; }
.hero-split__cert:nth-child(3) { animation-delay: 0.86s; }

/* Reduzierte Bewegung: Wipe bleibt, nur der Textversatz entfällt. */
@media (prefers-reduced-motion: reduce) {
  .hero-split__logo,
  .hero-split__headline,
  .hero-split__rule,
  .hero-split__desc,
  .hero-split__certs-label,
  .hero-split__cert {
    animation-name: hero-fade;
  }
}

/* Tablet (768-1023): Diagonale flacher, Content darf breiter werden (die
   Diagonale sitzt hier bei ~68vw), Headline etwas kleiner. Fluss-Layout
   bleibt - nichts wird absolut verschoben. */
@media (max-width: 1023px) {
  .scrolly-hero {
    --hero-split-cut-top: 70%;
    --hero-split-cut-bot: 62%;
  }
  .hero-split__content {
    max-width: min(560px, 60vw);
  }
  .hero-split__headline {
    font-size: clamp(34px, 5.2vw, 52px);
  }
}

/* Ab hier trägt die Navbar (Burger) dauerhaft das Logo - das Hero-Logo
   entfällt, damit es nicht doppelt steht. */
@media (max-width: 899px) {
  .hero-split__logo {
    display: none;
  }
}

/* Mobil (<=767): kein Split, dunkle Editorial-Fläche, Motiv weg (darf den
   Text nie überdecken). Content volle Breite, Abstand oben so, dass die
   sichtbare Navbar frei bleibt. */
@media (max-width: 767px) {
  .hero-split__light {
    display: none;
  }
  .hero-split {
    padding-inline: clamp(20px, 6vw, 32px);
    padding-block: calc(var(--nav-height) + clamp(20px, 5vh, 44px))
      clamp(40px, 8vh, 72px);
  }
  .hero-split__content {
    max-width: 34rem;
  }
  .hero-split__headline {
    font-size: clamp(29px, 8vw, 40px);
  }
}

/* schmal: Zertifikate kleiner */
@media (max-width: 560px) {
  .hero-split__cert {
    height: clamp(74px, 22vw, 104px);
  }
}