/* =============================================================
   Startseite (Entwurf) – Parallax-Headersection
   Lädt NUR auf diesem Template (konditionaler Enqueue). Nutzt bestehende
   Theme-Tokens (variables.css) und lässt das restliche Theme unberührt.
   ============================================================= */

/* Breadcrumb der aktiven Startseite gibt's nicht → auch hier ausblenden */
.breadcrumbs { display: none; }

/* =============================================================
   MENÜBAND – nur transparenter Ausgangszustand über dem Hero
   -------------------------------------------------------------
   Das bestehende Theme-Menüband bleibt vollständig erhalten. Es wird
   NICHT als Parallax-Ebene animiert. Per JS bekommt es die Klasse
   .sp-over-hero, solange es über dem dunklen Bereich (Hero + Features)
   steht. Ohne diese Klasse gilt unverändert der Theme-Standard
   (cremefarben, sticky, Border). Beim geöffneten Mobile-Menü (body.nav-open)
   greift wieder ausschließlich das Theme.
   ============================================================= */
.site-header {
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header .nav-link,
.site-header .btn-text { transition: color .35s ease, opacity .2s ease; }
.site-header .nav-logo-img { transition: filter .35s ease; }

/* Initialer Hero-Zustand: Menüband VOLLSTÄNDIG transparent – kein Balken,
   kein Scrim, kein Blur/Backdrop, kein Schatten, keine Border/Unterkante.
   Der Hero-Hintergrund reicht dahinter bis an den oberen Viewportrand.
   Logo & Links bleiben zu 100 % deckend (nur die Fläche wird transparent). */
body:not(.nav-open) .site-header.sp-over-hero {
  background: transparent;
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Helle Nav-Elemente über dunklem Hero – bestehende Theme-Farbe --text-light */
body:not(.nav-open) .site-header.sp-over-hero .nav-link,
body:not(.nav-open) .site-header.sp-over-hero .btn-text {
  color: var(--text-light);
}
/* Hamburger folgt derselben Logik: über dem dunklen Hero hell (dunkelgrün wäre dort unsichtbar);
   auf dem hellen Header außerhalb des Heros greift wieder die dunkelgrüne Basisfarbe. */
body:not(.nav-open) .site-header.sp-over-hero .nav-hamburger span {
  background: var(--text-light);
}
body:not(.nav-open) .site-header.sp-over-hero .nav-hamburger:focus-visible {
  outline-color: var(--text-light);
}
/* helle Logo-Variante des Themes (logo-light.svg) wird per JS gesetzt;
   Filter als robuster Fallback, falls das Bild noch nicht geladen ist */
body:not(.nav-open) .site-header.sp-over-hero .nav-logo-img {
  filter: brightness(0) invert(1);
}
body:not(.nav-open) .site-header.sp-over-hero .nav-logo {
  border-right-color: transparent;   /* Trennlinie im transparenten Zustand weg */
}

/* ── Header auf Mobile sticky wie Desktop ──────────────────────
   Das Theme setzt ≤960px `html,body{overflow-x:hidden}` → body wird zum
   Scroll-Container und bricht das theme-eigene `position:sticky` des Headers.
   Auf DIESER Seite den horizontalen Overflow stattdessen auf <main> begrenzen
   (Geschwister des Headers) → Header nutzt weiterhin die bestehende Theme-
   Sticky-Logik. Gilt nur hier (home.css lädt nur auf diesem Template). */
@media (max-width: 960px) {
  html, body { overflow-x: visible; }
  #main-content { overflow-x: clip; }
}

/* =============================================================
   ENTWURF-BLOCK (dunkel): Hero + Feature-Sektionen
   ============================================================= */
.sp-page {
  /* Farb-Tokens – identisch zur aktiven Startseite (--dark) */
  --sp-dark:      #272e26;
  --sp-dark-2:    #1e241d;
  --sp-text:      #f4f1ec;
  --sp-muted:     rgba(244,241,236,0.62);
  --sp-accent:    #e8e4de;   /* Creme/Hell wie Text auf dunklen Theme-Sektionen */

  --sp-maxw:      1240px;
  --sp-eyebrow-ls: 0.34em;
  --sp-header-h:  64px;      /* Höhe des Theme-Menübandes (.site-header) */

  position: relative;
  background: var(--sp-dark);
  color: var(--sp-text);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* KEIN overflow hier: würde .sp-page zum Scroll-Container machen und das
     position:sticky des Hero brechen. Die Hero-Ebenen clippt .sp-hero__sticky. */
}

.sp-page *,
.sp-page *::before,
.sp-page *::after { box-sizing: border-box; }

.sp-page img { max-width: 100%; display: block; }
.sp-page a { color: inherit; text-decoration: none; }

/* .sp-container + .sp-readmore liegen jetzt zentral in sections-shared.css
   (global geladen, damit sie auch auf Unterseiten verfügbar sind). */

/* Wiederkehrende Bausteine (.sp-eyebrow/.sp-rule), die Feature-Komponente
   (.sp-features/.sp-feature*) und .sp-reveal liegen jetzt zentral in
   sections-shared.css (global – auch auf Unterseiten wie Leistungen verfügbar).
   .sp-hero .sp-eyebrow (Hero-Override) bleibt hier. */

/* =============================================================
   HERO – Parallax (Sticky-Scroll)
   .sp-hero = Scrollstrecke; .sp-hero__sticky = fixierte 100vh-Bühne.
   Nur Bildebenen + Text + Scrollindikator werden animiert (JS/progress).
   ============================================================= */
.sp-hero {
  position: relative;
  height: 100vh;             /* Fallback ohne JS / reduced-motion: einfache Bühne */
  /* Hero unter das sticky Menüband ziehen, damit das Bild bis an die obere
     Viewportkante reicht und hinter dem transparenten Menü sichtbar ist. */
  margin-top: calc(-1 * var(--sp-header-h));
  background: var(--sp-dark);
}
.sp-hero.is-parallax { height: 180vh; }   /* JS aktiviert die Scrollstrecke (Desktop) */

/* Die Bühne wird von JS im Hero-Bereich am Viewport fixiert (fake-sticky):
   das Theme setzt auf ≤960px html/body { overflow-x:hidden } und würde damit
   position:sticky brechen – die globale Theme-Regel bleibt unangetastet. */
.sp-hero__sticky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--sp-dark);
  isolation: isolate;
}
.sp-hero__sticky.is-fixed { position: fixed; }
.sp-hero__sticky.is-bottom { position: absolute; top: auto; bottom: 0; }

/* Bildebenen: natürliche Höhe der hohen Original-Assets (überdecken sicher),
   oben verankert für die Komposition. JS animiert transform (translateY in vh
   + scale) und opacity je nach Scrollfortschritt – keine freien Bildkanten. */
.sp-hero__layer {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.sp-hero__layer--sky       { top: 0;   z-index: 1; }
.sp-hero__layer--mountains { top: 40%; z-index: 2; }
.sp-hero__layer--grass     { top: 60%; z-index: 4; }

/* Diagonaler Kontrast-Verlauf hinter dem Text (über MG, unter dem Text) */
.sp-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, var(--sp-dark), rgba(39,46,38,0) 87%);
  opacity: 0.6;
}

/* Ebenenreihenfolge: HG(1) · MG(2) · TEXT(3) · VG(4) · Menü(Theme z100).
   Der Text liegt damit ZWISCHEN MG und VG und wird beim Scrollen von der
   Wiese (VG) verdeckt – zusätzlich zum Opacity-Fade. */
.sp-hero__content {                 /* statische Layoutposition */
  position: absolute;
  inset: 0;
  z-index: 3;
}
.sp-hero__content .sp-container {
  position: absolute;
  top: 29vh;                         /* höher/ausgewogen, näher an der Vorlage */
  left: 0; right: 0;
}
.sp-hero__inner {                   /* ausschließlich Scroll-Transform + Opacity */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  max-width: 720px;                  /* linksbündig am Container (kein margin auto) */
  transform-origin: left top;
  will-change: transform, opacity;
}
/* Eyebrow – nur im Hero verfeinert (Feature-Sektionen bleiben unverändert) */
.sp-hero .sp-eyebrow {
  font-weight: 600;
  letter-spacing: 0.28em;
}
/* Hero-Überschrift: bestehende Theme-Serifenschrift, normaler (nicht fetter)
   Schnitt, kleiner & kontrollierter – näher an der Vorlage. */
.sp-hero__title {
  margin: 0;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 4.8vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 15ch;
  text-wrap: balance;   /* gleichmäßiger Auto-Umbruch statt willkürlicher letzter Zeile;
                           manuelle Umbrüche (\n im Feld → <br class="sp-hero__br">) bleiben möglich */
}
.sp-scroll {
  display: flex; align-items: center; gap: 16px;
  margin-top: 8px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  will-change: opacity;
}
.sp-scroll svg { animation: sp-bob 1.8s ease-in-out infinite; }
@keyframes sp-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Übergang der Hero-Szene in den nachfolgenden dunklen Contentbereich
   (Feature-Sektionen). Gleiche dunkle Theme-Farbe; dezent + tief angesetzt,
   damit der in VG.png bereits vorhandene Übergang nicht verdoppelt wird. */
.sp-hero__sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24vh;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(39,46,38,0) 0%, var(--sp-dark) 92%);
}

/* FEATURE-SEKTIONEN (.sp-features/.sp-feature*/.sp-reveal) → jetzt zentral in
   sections-shared.css (global; self-contained, auch auf Unterseiten nutzbar). */

/* ── Zentral ausgelagerte Komponenten (jetzt in sections-shared.css, global) ──
   statement_fullwidth (.section-statement), personal_lead (.section-personal),
   contact_cta (.section-contact-cta) und certificates (.section-certificates + .cert-*)
   liegen komponentenbasiert und self-contained in sections-shared.css → funktionieren
   auf JEDER Seite, nicht mehr nur auf der Startseite. Hier verbleibt nur der
   Startseite-SPEZIFISCHE Parallax-Hero (unten). */

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .sp-hero.is-parallax { height: 165vh; }     /* Tablet: kürzere Scrollstrecke */
  /* .sp-feature-Responsive → sections-shared.css */
}

/* ── Tablet-Portrait (769–1024px): denselben großen grünen Zwischenraum wie auf
     Mobile verkleinern. Nutzt bereits die kleinere Mobile-Animationskonfig
     (home.js: ≤1024 → CFG.mobile), damit die Wiese nicht komplett aus dem
     Bild fährt. Desktop (>1024px) und Phone (≤768px) bleiben unberührt. ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sp-hero.is-parallax { height: 115svh; }     /* vorher 165→125svh – noch kürzerer dunkler Scroll-Track */
  .sp-hero__sticky { height: 100svh; min-height: 100svh; }
  .sp-page .sp-hero__layer--grass { top: 65%; }   /* Wiese tiefer → schattiger Foto-Vordergrund unten stärker geclippt */
  .sp-hero__sticky::after { height: 12svh; }         /* kürzeres Dunkelband am Bühnenboden (vorher 24vh) */
  /* .sp-features padding-top → sections-shared.css */
  .sp-hero__title { max-width: none; }               /* lange Headline gleichmäßig umbrechen (nutzt Spaltenbreite + text-wrap:balance) */
}

/* ── Desktop (≥1025px): denselben grünen Zwischenraum reduzieren.
     Erste Folge-Section früher, kürzerer Scroll-Track, Wiese tiefer. ── */
@media (min-width: 1025px) {
  .sp-hero.is-parallax { height: 150vh; }            /* vorher 180vh */
  .sp-page .sp-hero__layer--grass { top: 62%; }     /* vorher 60% – Foto-Vordergrund unten stärker geclippt */
  .sp-hero__sticky::after { height: 16vh; }          /* vorher 24vh */
  /* .sp-features padding-top → sections-shared.css */

  /* Längere Headlines: mehr Spaltenbreite + etwas kleinere Kappe → passt
     automatisch in ~2 ausgewogene Zeilen (statt 4 enge). Enge 15ch-Grenze weg;
     manuelle Umbrüche im Feld greifen weiterhin. */
  .sp-hero__inner { max-width: min(92vw, 62rem); }
  .sp-hero__title { max-width: none; font-size: clamp(3rem, 4vw, 3.6rem); }
}

@media (max-width: 768px) {
  /* ── Mobile-Hero: kürzere Scrollstrecke, Bilder decken den schmalen
       Viewport (object-fit:cover) → keine Lücken/„zerrissene" Komposition,
       keine harte MG-Silhouette. Fallback bleibt Theme-Grün (--sp-dark). ── */
  .sp-hero.is-parallax { height: 138vh; }
  .sp-hero__sticky { height: 100svh; min-height: 100svh; }

  /* Bilder überbreit → auf schmalem Viewport höher (natürliche Proportion,
     Stapelung bleibt erhalten), zentriert. Kein object-fit:cover (würde die
     freigestellten Ebenen zerdrücken). */
  /* .sp-page-Präfix → schlägt `.sp-page img { max-width:100% }` (Spezifität) */
  .sp-page .sp-hero__layer {
    left: 50%; right: auto;
    width: 172%;
    max-width: none;
    margin-left: -64%;      /* Szene leicht nach rechts → Person center-left */
    height: auto;
  }
  .sp-page .sp-hero__layer--sky       { top: -8%; }   /* Himmel früher, weniger Leerraum */
  .sp-page .sp-hero__layer--mountains { top: 28%; }
  .sp-page .sp-hero__layer--grass     { top: 62%; }   /* Wiese tiefer positioniert (vorher 54%): schattiger Foto-Vordergrund wird unten stärker geclippt → kleineres Dunkelband am Scroll-Ende; Scroll-0-Komposition (Wiese trifft Berge) bleibt sauber */

  /* Mobile-Content-Block (Eyebrow + H1 + Scroll-Hinweis) als EINHEIT höher: eine
     Steuerung über `top` (war 38svh), keine konkurrierende transform-Logik. Höher →
     Scroll-Hinweis liegt über der vorderen Wiese (VG), nicht mehr dahinter verdeckt.
     Feinjustierung nur über die Variable. */
  /* Position aus der Bildgeometrie abgeleitet statt geraten.
     Zwei Messgrößen, beide über alle geprüften Telefongrößen konstant:
       • Die sichtbare Oberkante der Wiese (VG) liegt bei ~57 % der Viewporthöhe.
         Sie folgt der Bühnenhöhe, nicht der Displaybreite.
       • Der Textblock (Eyebrow + H1 + Scroll-Hinweis) ist ~312px hoch – die
         Schriftgrößen sind auf Mobile fix.
     Daraus: 57svh − 312px = Unterkante bündig mit der Wiesenkante. Davon
     40px wieder abgezogen (→ −272px), damit der Block bewusst tiefer sitzt:
     Der Scroll-Hinweis darf die Person im Bild überlappen – die liegt in der
     Bergebene UNTER dem Text und verdeckt ihn nicht. Nur die Wiese (VG) liegt
     darüber, und die bleibt unterhalb des Hinweises. Der `max()`-Boden
     verhindert, dass der Block auf sehr kurzen Displays unter das Menüband
     rutscht. */
  :root { --hero-mobile-content-offset: max(72px, calc(57svh - 272px)); }
  .sp-hero__content .sp-container { top: var(--hero-mobile-content-offset); }
  .sp-hero__inner { max-width: none; }
  .sp-hero__title { max-width: 18ch; }
  .sp-hero__br { display: none; }             /* natürlicher Umbruch statt erzwungen */

  /* Eyebrow-Block kompakter & weiter links: Linie halbiert (64→32px) + engerer Abstand
     Linie↔Text (24→14px) → Eyebrow rückt näher an die linke H1-Kante. Nur im Hero +
     nur Mobile (globale .sp-rule/.sp-eyebrow-row der Feature-Sektionen + Desktop bleiben). */
  .sp-hero .sp-rule { width: 32px; }
  .sp-hero .sp-eyebrow-row { gap: 14px; }

  /* .sp-container + .sp-feature*-Mobile-Regeln jetzt in sections-shared.css */
}

/* ── Nur Smartphone-Portrait (≤480px): Hero-Textblock etwas höher ──
   Ausschließlich die STATISCHE Position des Positions-Wrappers (.sp-container);
   die Scroll-Animation/Opacity (.sp-hero__inner) bleibt unberührt. Tablets,
   größere Mobile-/Landscape-Breiten (bis 767px) und Landscape bleiben bei 38svh. */
@media (max-width: 480px) and (orientation: portrait) {
  /* Die frühere feste Höhe (30svh, davor 34/38svh) entfällt: Sie war der Grund,
     warum der Scroll-Hinweis hinter der Wiese lag. Die Position kommt jetzt aus
     --hero-mobile-content-offset und rechnet sich pro Displayhöhe selbst aus. */

  /* Leeren grünen Zwischenraum zum nächsten Abschnitt verkleinern:
     kürzere Scrollstrecke → nächste Section beginnt früher. Sticky-Bühne
     (100svh) und Animation/Ebenen/Bilder bleiben unverändert. */
  .sp-hero.is-parallax { height: 120svh; }           /* vorher 138vh (Track 38→20svh) */
  .sp-hero__sticky::after { height: 10svh; }         /* kürzeres flaches Dunkelband am Bühnenboden (vorher 24→16svh) */
}

/* Die frühere gerätespezifische Korrektur für die „iPhone-14-Pro-Klasse"
   (~393×852, −40px margin-top) ist entfallen. Sie glich einen Sonderfall der
   festen svh-Position aus; die neue Formel oben trifft jede Displayhöhe von
   sich aus, ein Zusatzversatz würde den Block dort jetzt zu weit hochziehen. */

/* =============================================================
   BARRIEREFREIHEIT – reduzierte Bewegung: statisch & voll sichtbar
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .sp-hero { height: 100svh; }                       /* keine Scrollstrecke */
  .sp-hero__sticky { position: absolute !important; top: 0 !important; bottom: auto !important; }
  /* Text bleibt voll sichtbar und zwischen MG (z2) und VG (z4); grüner Fallback aktiv */
  .sp-hero__layer,
  .sp-hero__inner,
  .sp-scroll { transform: none !important; opacity: 1 !important; }
  .sp-scroll svg { animation: none; }
  /* .sp-reveal reduced-motion → sections-shared.css */
}