/* =====================================================================
   MV WEBDESIGN — LICHTPFAD-WELT  ·  licht-pfad.css
   Geladen von index.html (nach styles.css) und der internen Testseite
   licht-pfad.html. Überschreibt styles.css für die Wald-Welt-Optik.

   SEIT 2026-08-31 (User-Entscheid): Der WebGL-Lichtstrahl (#lpCanvas +
   licht-pfad.js) ist entfernt — die Welt ist reines CSS. Zusätzlich:
   alle Sektionsflächen EINHEITLICH transluzent (ein Wert, keine
   „Block"-Kanten), keine vollbreiten Trennlinien, Korn-Textur aus,
   Nebel als sanft ziehende Schwaden-Textur.

   Ebenen-Modell:
     body-Hintergrund   dunkelster Grundton (#0d0a07)
     .lp-world   fixed   z -3   der Wald: Foto + Nebelbahnen + Abdunklung
     Content     z auto/1+      Header, Sections, Formular — unangetastet
   ===================================================================== */

/* ---------- Grundwelt: EIN durchgehender, fotorealistischer Schwarzwald ----------
   Das Hero-Foto (hero-forest.jpg) steht als fixe Welt hinter der GESAMTEN
   Seite — vom Hero bis zum Footer derselbe Wald. */
body.lp { background: #0d0a07; }

.lp-world {
  position: fixed; inset: 0; z-index: -3;
  pointer-events: none;
  /* Foto (scale 1.04) und die ueberbreiten Nebelbahnen bleiben im Viewport —
     ausserhalb war ohnehin nichts sichtbar, aber so kann die Welt-Ebene auf
     Touch-Geraeten keine seitliche Scroll-Flaeche mehr erzeugen. */
  overflow: hidden;
  background: #0d0a07;
}
.lp-photo {
  position: absolute; inset: 0;
  background: url("hero-forest.jpg") center 42% / cover no-repeat;
  transform: scale(1.04); /* Kantenreserve, identisch zur bisherigen Hero-Inszenierung */
}
.lp-dim {
  position: absolute; inset: 0;
  /* Statischer Licht-Verlauf statt Scroll-JS: oben (Himmel/Hero) bleibt
     der Wald hell und klar, nach unten hin dunkelt die Welt leicht ab.
     Die eigentliche Dunkelheit unterhalb des Heros liefern die
     einheitlichen Sektionsflächen (rgba(24,20,15,.7)). */
  background: linear-gradient(180deg,
    rgba(13, 10, 7, .08) 0%,
    rgba(13, 10, 7, .3) 52%,
    rgba(13, 10, 7, .48) 100%);
}

/* ---------- Nebel: sanft durch die Bäume ziehende Schwaden ----------
   nebel-schleier.webp = nahtlos kachelbare, weichgezeichnete Nebel-Textur
   (fraktales Rauschen, creme-getönt). Zwei Bahnen ziehen gleichmäßig und
   gegenläufig durch den Wald — jede wandert um exakt eine Kachelbreite,
   dadurch endloser Zug ohne Loop-Kante. Am deutlichsten im Hero (dort ist
   die Welt am wenigsten abgedunkelt), dezent hinter allen Sections. */
.lp-fog {
  position: absolute; left: 0;
  pointer-events: none;
  will-change: transform;
  background: url("nebel-schleier.webp") repeat-x left top;
}
.lp-fog-a {
  top: 30%; height: 30%;
  width: calc(100% + 1600px);
  background-size: 1600px 100%;
  opacity: .32;
  animation: lpNebelZugA 110s linear infinite;
}
@keyframes lpNebelZugA { to { transform: translateX(-1600px); } }
.lp-fog-b {
  top: 48%; height: 28%;
  width: calc(100% + 2200px);
  background-size: 2200px 100%;
  opacity: .22;
  animation: lpNebelZugB 170s linear infinite;
}
@keyframes lpNebelZugB { from { transform: translateX(-2200px); } to { transform: translateX(0); } }

/* ---------- Hero: ruhige Fullscreen-Inszenierung (kein Scroll-Zoom) ---------- */
.lp-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: stretch;
  overflow: hidden;
}
/* Der Hero hat keinen eigenen Foto-Layer — die Welt (.lp-photo) IST der Wald;
   der Licht-Verlauf in .lp-dim lässt ihn oben klar durchscheinen. */
/* Scrim hält die Copy-Zone links ruhig und lesbar, rechts bleibt der
   Wald mit den ziehenden Nebelschwaden frei sichtbar. */
.lp-hero-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  /* HELLER Hero (User-Vorgabe): nur so viel Abdunklung, wie die Copy links
     zum Lesen braucht — der Wald mit dem ziehenden Nebel bleibt präsent.
     Unten läuft der Hero weich in die dunklen Sektionsflächen aus. */
  background:
    linear-gradient(96deg, rgba(10,8,6,.66) 0%, rgba(10,8,6,.44) 34%, rgba(10,8,6,.06) 62%, rgba(10,8,6,.16) 100%),
    linear-gradient(180deg, rgba(10,8,6,.24) 0%, transparent 24%, transparent 62%, rgba(16,13,10,.78) 100%);
}
.lp-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 4.5rem;
}
.lp-hero .hero-scroll-cue { position: absolute; }

/* Sanfter Content-Einstieg beim Laden. Progressive Enhancement wie beim
   Produktions-Reveal: versteckt startet NUR, wer .gsap-enabled hat (Motion
   erlaubt + JS läuft) — sonst ist die Copy sofort sichtbar. */
.gsap-enabled:not(.lp-static) .lp-fade {
  opacity: 0; transform: translateY(26px);
  animation: lpFade 1s var(--ease-out) forwards;
  animation-delay: var(--lpd, 0s);
}
@keyframes lpFade { to { opacity: 1; transform: none; } }

/* ---------- Durchgehende Welt: ALLE Flächen EINHEITLICH transluzent ----------
   Ein einziger Farb-/Alpha-Wert für alle Sektionsflächen: die früheren,
   je Sektion unterschiedlichen Alphas erzeugten sichtbare „Block"-Kanten
   an den Übergängen (User-Feedback). Ein Wert = ein Wald, keine Kanten. */
body.lp .marquee,
body.lp .on-ink-1,
body.lp .manifesto,
body.lp .final-cta,
body.lp .site-footer,
body.lp #angebot,
body.lp #projekte,
body.lp #ablauf,
body.lp #ueber,
body.lp #social { background: rgba(24, 20, 15, .7); }

/* Header im selben Ton — und keine vollbreiten Trennlinien mehr:
   Header-Unterkante, Laufband-Doppellinie und Footer-Oberkante aus. */
body.lp .site-header.scrolled {
  background: rgba(24, 20, 15, .7);
  border-bottom-color: transparent;
}
body.lp .marquee { border-block-color: transparent; }
body.lp .site-footer { border-top-color: transparent; }

/* Korn-Textur aus: das helle Rauschen lag nur auf einem Teil der
   Sektionen und erzeugte an jeder Grenze eine feine Tonwert-Kante. */
body.lp .grain::before { display: none; }

/* ---------- Lesbarkeit über der hellen Foto-Welt ----------
   Die Muted-Töne aus styles.css sind für satte dunkle Flächen kalibriert —
   über dem durchscheinenden Goldwald fehlt ihnen Kontrast. Hier global
   angehoben (ein Hebel für alle Sektionen), plus hauchfeiner Schatten
   unter dem Fließtext, damit er sich vom bewegten Licht abhebt. */
body.lp {
  --on-dark:       #f3ecdf;
  --on-dark-muted: #cfc5b3;
  --on-dark-faint: #9c917d;
}
body.lp main, body.lp .site-footer { text-shadow: 0 1px 3px rgba(13, 10, 7, .5); }
/* Keine Schatten auf eigenen (hellen/opaken) Flächen: Buttons, Formular-Karte, Chips */
body.lp .btn,
body.lp .form-card,
body.lp .price-badge,
body.lp .ck-spot-name { text-shadow: none; }
/* Der statische Gold-Radial der final-cta bleibt aktiv (ersetzt das
   frühere Shader-Licht als warmen Akzent). */

/* Dark-Surface-Anpassungen für die ehemals cremefarbenen Sektionen:
   styles.css setzt dort Text-/Linienfarben für hellen Grund — hier umgemappt. */
body.lp .step { border-top-color: var(--line-dark); }
body.lp .step:hover { border-top-color: var(--gold); }
body.lp .step .num { color: var(--gold); }
body.lp .step h3 { color: var(--on-dark); }
body.lp .step p { color: var(--on-dark-muted); }
body.lp .ck-hint { color: var(--on-dark-faint); }

/* Team-Kennzahlen: nur noch 3 echte Fakten.
   ACHTUNG: Diese Regel ist spezifischer als die Breakpoints in styles.css und
   hat die dortigen Mobil-Raster frueher ausgehebelt — drei starre Spalten
   passten auf Handys nicht in die Breite und machten die Seite seitlich
   verschiebbar. Deshalb hier eigener Mobil-Breakpoint. */
body.lp .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) {
  body.lp .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Prototyp-Badge ---------- */
.lp-badge {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  font-family: var(--font-sans); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-soft);
  background: rgba(22, 19, 15, .82); border: 1px solid var(--line-gold);
  border-radius: var(--r-pill); padding: .45rem .85rem;
  pointer-events: none;
}

/* ---------- Statischer Fallback ----------
   html.lp-static setzt der frühe Head-Check (reduced motion / Datensparmodus).
   Ergebnis: kein Nebel-Zug, kein Einstiegs-Fade — ruhige, statische
   Wald-Stimmung mit warmem Gold-Schimmer. Voll benutzbar. */
html.lp-static .lp-fog { animation: none; }
html.lp-static .lp-fade { animation: none; opacity: 1; transform: none; }
html.lp-static .lp-world::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 34% at 64% 30%, rgba(198, 161, 91, .16), transparent 70%),
    radial-gradient(50% 40% at 50% 86%, rgba(169, 132, 63, .12), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .lp-fog { animation: none; }
  .lp-fade { animation: none; opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .lp-hero-scrim {
    background:
      linear-gradient(180deg, rgba(10,8,6,.42) 0%, rgba(10,8,6,.26) 34%, rgba(10,8,6,.22) 60%, rgba(16,13,10,.85) 100%);
  }
  .lp-hero-inner { align-items: flex-end; padding-bottom: 5.5rem; }
}