/* ============================================================
   layering.css — Paket P3: Tiefe fuer die 14 Sektionen der Startseite
   ============================================================
   Nur NEUE Klassen (Praefix ly-), die P4 an bestehende Elemente in
   index.html haengt. Keine bestehende Regel aus dem <style>-Block wird
   ueberschrieben — wo eine ly-Klasse per hoeherer Spezifitaet (Kompositum
   wie ".horizon.ly-kamm") einzelne Eigenschaften eines Elements aendert,
   ist das gewollt (P4 haengt die Klasse gezielt an); die urspruengliche
   Regel selbst bleibt unangetastet.

   Nutzt ausschliesslich Variablen aus dem :root von index.html. Neue
   --ly-*-Variablen sind reine Bau-Variablen (Schatten-Komposition), keine
   neuen Farben — sie referenzieren immer bestehende Tokens.

   Seit Runde 2 (Paket 2) liegen Block 8 (Lesegrund) und Block 9 (Akte) in
   css/akte.css (siehe Schlussblock).

   Voraussetzung (Paket P2, css/berg.css): das feste Berg-Bett liegt
   position:fixed, z-index:0; main bekommt position:relative;z-index:1.
   Alle Klassen hier gehen davon aus, dass sie INNERHALB von main wirken.

   Wichtiger Fund beim Bau (siehe Bericht): scroll-fx.css setzt bei
   revealten [data-reveal]-Elementen "transform:none" — ein Stagger-Versatz
   ueber `transform` wuerde also nach dem Reveal verschwinden. ly-stagger
   nutzt deshalb bewusst die STANDALONE-Eigenschaft `translate` (nicht
   `transform`) — die komponiert unabhaengig und ueberlebt jeden
   Transform-Reset des Reveal-Systems sowie jeden bestehenden Hover-
   Transform (z. B. .uc-card:hover{transform:translateY(-4px)}).
   ============================================================ */

/* ---------- 1) Elevation + Kantenlicht ----------
   Drei Stufen + ein Kantenlicht, komponiert ueber zwei Bau-Variablen statt
   ueber konkurrierende box-shadow-Deklarationen, damit sich z. B.
   "ly-e2 ly-edge" frei kombinieren lassen, ohne dass eine Klasse die
   box-shadow der anderen ersetzt. Ton: Canvas-Dunkel (--bg-deep, #05080F),
   kein Zero-Offset-Halo — Versatz + Weichzeichnung wie bei echtem Lichteinfall. */
.ly-e1, .ly-e2, .ly-e3, .ly-edge, .ly-peak{
  box-shadow: var(--ly-edge, inset 0 0 0 rgba(5,8,15,0)), var(--ly-shadow, 0 0 0 rgba(5,8,15,0));
}
.ly-e1{ --ly-shadow: 0 1px 2px rgba(5,8,15,.4), 0 6px 18px -8px rgba(5,8,15,.5); }
.ly-e2{ --ly-shadow: 0 2px 4px rgba(5,8,15,.45), 0 16px 34px -12px rgba(5,8,15,.58); }
.ly-e3{ --ly-shadow: 0 4px 10px rgba(5,8,15,.5), 0 30px 60px -16px rgba(5,8,15,.65); }
/* Kantenlicht: 1px oben, Ton aus --line-strong (Text-Farbe) mit Eis-Beimischung,
   niedrige Alpha — siehe taste.md "Edge light sells a raised surface". */
.ly-edge{ --ly-edge: inset 0 1px 0 0 rgba(125,211,252,.14); }

/* ---------- 2) Ueberlappung (Lift-up) ----------
   Negative obere Margin, damit ein Panel die Kante der vorigen Sektion
   ueberdeckt. z-index:2 (statt blossem position:relative) macht das
   Ergebnis unabhaengig von der Dokumentreihenfolge robust: `section`
   traegt bereits global position:relative (Zeile ~105 im <style>-Block),
   ohne eigenen z-index — die liegende Sektion bleibt also bei auto (0)
   und die lift-Klasse gewinnt garantiert, unabhaengig davon, welche der
   beiden Sektionen im DOM zuerst kommt. */
.ly-lift-up{
  margin-top: -48px;
  position: relative;
  z-index: 2;
}
.ly-lift-up-lg{
  margin-top: -96px;
  position: relative;
  z-index: 2;
}
@media (max-width: 640px){
  .ly-lift-up{ margin-top: -24px; }
  .ly-lift-up-lg{ margin-top: -48px; }
}

/* ---------- 3) Gestaffelte Kartenraster ----------
   Auf den GRID-Container (z. B. .uc-grid, .trust-grid), wirkt auf die
   direkten Kinder. `translate` statt `transform` — Begruendung im
   Dateikopf. Nur Desktop (>=1000px, dort sind uc-grid/trust-grid
   tatsaechlich mehrspaltig); darunter kein Versatz. */
/* PAKET 2: Der Versatz steht als Variable --ly-y, die Regel selbst setzt
   translate nur aus ihr. So kann eine Karte (Use Cases, Block 9) ihren
   eigenen waagerechten Weg mit dem Versatz KOMBINIEREN, statt ihn zu
   ueberschreiben. */
@media (min-width: 1000px){
  .ly-stagger > *:nth-child(2n){ --ly-y: 24px; }
  .ly-stagger > *:nth-child(3n){ --ly-y: -16px; }
  .ly-stagger > *{ translate: 0 var(--ly-y, 0px); }
}
/* Hover bleibt bewusst den bestehenden Karten-Regeln ueberlassen
   (.uc-card:hover / .trust-card:hover) — die animieren bereits nur
   transform/opacity. Keine zusaetzliche Hover-Regel hier, damit nichts
   mit deren Spezifitaet konkurriert. */

/* ---------- 4) Anker-Varianten fuer Sektionskoepfe ----------
   Bestehendes Muster: <div data-reveal="up"><span class="sec-label">…
   <h2>…</h2><p class="sec-sub | trust-note">…</p></div> in .wrap.
   Drei Varianten, damit nicht jeder Kopf zentriert/links steht. Nur ab
   Tablet-Breite aktiv — auf dem Handy bleibt jeder Kopf links, sonst
   kippt rechtsbuendiger Flieextext auf 375px. */
.ly-anchor-lead{ text-align: left; }
@media (min-width: 640px){
  .ly-anchor-trail{ text-align: right; }
  .ly-anchor-trail h2,
  .ly-anchor-trail .sec-sub,
  .ly-anchor-trail .trust-note{ margin-left: auto; margin-right: 0; }
}
@media (min-width: 900px){
  .ly-anchor-split{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    column-gap: 56px;
    align-items: end;
  }
  /* Label + Ueberschrift bleiben in Spalte 1 (Dokumentreihenfolge erhalten),
     der Flieextext (sec-sub ODER trust-note) rutscht daneben in Spalte 2.
     Ohne sec-sub/trust-note (Branchen, ROI, FAQ) bleibt Spalte 2 leer —
     ly-anchor-split lohnt sich nur bei Koepfen MIT Flieextext, siehe Bericht. */
  .ly-anchor-split .sec-label,
  .ly-anchor-split h2{ grid-column: 1; }
  .ly-anchor-split .sec-sub,
  .ly-anchor-split .trust-note{ grid-column: 2; }
}

/* ---------- 5) Gemeinsame Flaeche ----------
   Surface-Ton mit Transparenz, damit das Berg-Bett minimal durchscheint.
   Kontrast geprueft: --text (#F2F5FC) gegen --surface OPAK (#0D1526) liegt
   bei ~16,7:1 — bei 82% Deckkraft bleibt selbst bei einem ueberraschend
   hellen Bett-Ausschnitt dahinter (bis Luminanz ~0,16, deutlich ueber dem,
   was ein dunkles Bergmotiv realistisch liefert) noch klar >4,5:1 Puffer. */
.ly-panel{
  background: rgba(13,21,38,.82); /* --surface bei 82% */
  border: 1px solid var(--line);
  border-radius: 22px; /* wie .roi-panel / .founder-photo */
}

/* ---------- 6) Kamm-Reskin der Trenner ----------
   .horizon und .thread haben BEIDE bereits ::before UND ::after belegt
   (Lichtlinie + Glow bzw. Glow + laufender Puls) — ein drittes Pseudo-
   Element ist nicht moeglich. Die Maske sitzt deshalb auf dem TRENNER-
   ELEMENT SELBST: sein eigener Hintergrund wird zur Kammsilhouette
   zugeschnitten, die beiden vorhandenen Pseudo-Elemente sind absolut
   positionierte Kinder und rendern automatisch DARueBER — die Lichtlinie
   bleibt also ueber dem Kamm sichtbar, ganz ohne Markup-Aenderung.

   NACHBESSERUNG (Messprotokoll, Kacheln 37/62/75 %): eine schmale,
   zentrierte "Mini"-Breite (min(420px,58vw)) las sich auf der echten
   Seite als kleiner dunkler Fleck, nicht als Grat — jetzt volle
   Viewport-Breite (width:100%), mask-size:cover statt 100% 100% (haelt
   die Bergsilhouette unverzerrt, auch wenn sich das Box-Seitenverhaeltnis
   je nach Breite stark von der SVG-viewBox 1920:120 unterscheidet — bei
   Cover wird nur minimal rechts/links bzw. oben/unten beschnitten statt
   gestaucht). Farbe --surface-2 mit leichter Transparenz (statt opak).

   .thread braucht dafuer --tw MIT: die Variable speist sowohl die Breite
   als auch die Laufstrecke von .thread::after (dem Lichtpuls, in
   translate(var(--tw),-50%)). Meine fruehere Sorge galt nur PROZENT-
   Werten (translate() rechnet % gegen die Box des Pseudo-Elements
   selbst) — ein vw-Wert ist dagegen eine echte Laenge wie das
   urspruengliche min(420px,58vw) und funktioniert genauso, nur eben
   ueber die volle Breite. --tw:100vw haelt Breite und Pulslaufstrecke
   synchron, ganz ohne Pseudo-Element-Ersatz; der body hat overflow-x:
   hidden, ein um Scrollbar-Breite abweichendes vw faellt nicht auf.

   @supports-Gate: ohne Masken-Unterstuetzung bleibt der Trenner exakt in
   seiner heutigen Form (progressive enhancement, kein kaputter Zustand). */
/* NACHBESSERUNG RUNDE 1 (Befund vom 05.09.2026): DEAKTIVIERT.
   ------------------------------------------------------------------
   Hier stand ein @supports-Block, der .horizon.ly-kamm und .thread.ly-kamm
   (sieben Trenner zwischen den Sektionen, index.html:1202/1242/1296/1334/
   1420/1441/1477) mit assets/berg/kamm-mini.svg maskiert und 68 px hoch
   eingefaerbt hat. Genau das sind die "flachen Dreiecks-Zacken ueber die
   ganze Breite", die in JEDER Sektion oberhalb der Fotokette auffielen
   — und der "harte blaue Gipfelstrich" ist die vorhandene Lichtlinie
   .horizon::before (index.html:130) bzw. der laufende Puls von .thread,
   die als absolut positionierte Kinder VON DERSELBEN MASKE beschnitten
   werden und deshalb der Zackenkante folgen.

   Vor der Bergwelt (flacher Grund) war das ein Zitat der Kammlinie. Mit
   einem echten Bergfoto im Bett ist es eine zweite, geometrische Bergkette
   vor der echten — deshalb ersatzlos raus. .horizon und .thread fallen
   damit auf ihre Grundform aus dem <style>-Block von index.html zurueck:
   1 px Linie mit Lichtpuls, keine Maske, keine Flaeche.

   Kein Markup geaendert: die Klasse ly-kamm steht weiter im HTML, tut aber
   nichts mehr. Die sechs Unterseiten laden layering.css ohnehin nicht; ihr
   .berg-crest (SVG-Maske in berg.css) bleibt unangetastet.

   Falls das Zitat je zurueck soll: alte Fassung in git, Commit vor dieser
   Nachbesserung. */

/* ---------- 7) Gipfel- und Halt-Zustand ----------
   ly-peak: Kontakt-Sektion — kraeftigeres Kantenlicht + minimal hellere
   Flaeche (surface-2 statt surface), damit der "Gipfel" optisch heraussticht.
   Komponiert ueber dieselbe --ly-edge-Variable wie Block 1 (siehe .ly-e1
   etc. oben) — kombinierbar mit ly-panel/ly-e*, ersetzt aber deren Werte,
   wenn direkt kombiniert (letzte Klasse im Kaskaden-Sinn gewinnt bei
   gleicher Spezifitaet: P4 haengt ly-peak deshalb am besten ALLEIN an,
   ohne ly-e1/2/3, siehe Bericht). */
.ly-peak{
  --ly-edge: inset 0 1px 0 0 rgba(125,211,252,.24);
  background: rgba(17,26,46,.92); /* --surface-2 bei 92% */
  border-color: var(--line-strong);
}
/* ly-hold: Footer — haelt die Seite mit einer GETOENTEN, halbtransparenten
   Flaeche (statt vormals opakem --bg-deep): am Gipfel (licht=1, nebel=0)
   soll der mittlere Kamm durch den Footer sichtbar bleiben, sonst deckt
   Kontakt-Panel+Footer den gesamten Viewport ab und der Brief-Peak ("klare
   Sicht auf die Grate") geht verloren. --surface bei .45 Deckkraft: dunkel
   genug fuer Footer-Link-Kontrast (gemessen, siehe Bericht), hell genug,
   dass die Kamm-Silhouette durchscheint. Kein harter Block-Sprung mehr zur
   Kontakt-Flaeche davor (ly-peak, rgba(17,26,46,.92)) — nur noch die
   bestehende 1px-Hairline (border-top, siehe unten) trennt. */
.ly-hold{
  /* RUNDE 2: .45 liess bei 1920 px die 11-px-Spaltentitel (--faint) auf der
     Schneeflanke bei 3,15:1 stehen. .84 wie die Karten; der mittlere Kamm
     scheint mit 16 % weiter durch. */
  background: rgba(13,21,38,.84);
  border-top-color: var(--line-strong);
}

/* ---------- Reduced motion ----------
   Alle Stagger-Versaetze aus. Hover-Transforms sind bewusst nicht Teil
   dieser Datei (siehe Block 3) — nichts hier zusaetzlich abzuschalten.
   Wichtig: Der Reset muss dieselben Selektoren wiederholen (":nth-child"
   hat hoehere Spezifitaet als ein blosses "> *") — ein generisches
   ".ly-stagger > *{translate:none}" wuerde von den 2n/3n-Regeln aus
   Block 3 ausgestochen, egal ob es spaeter im File steht. Erst per
   Playwright-Check bei reduced-motion aufgefallen (siehe Bericht). */
@media (prefers-reduced-motion: reduce){
  .ly-stagger > *:nth-child(2n),
  .ly-stagger > *:nth-child(3n){ --ly-y: 0px; }
}

/* ============================================================
   8) + 9) — nach css/akte.css verschoben (Runde 2, Lighthouse)
   ============================================================
   Die Lesegrund-Scrims (Block 8) und die scroll-craft-Akte (Block 9) liegen
   seit Runde 2 in css/akte.css (eigener <link> in index.html, ebenfalls
   blockierend; das geplante Nachladen ist verworfen, Begruendung dort). Hier
   bleibt, was direkt unter dem Hero schon sichtbar ist: Lift-up, Flaechen,
   Schatten, Kantenlicht, Gipfel-/Halt-Zustand. Begruendung und Messung im
   internen Messprotokoll, Nachbesserung Runde 2. */