/* ══════════════════════════════════════════════════════════════════════
   LEISTUNG — gemeinsamer Showcase-Layer für alle Leistungsseiten
   ─────────────────────────────────────────────────────────────────────
   Hebt die sieben Unterseiten auf die Bühnen-Grammatik von webdesign.html:
   Kino-Hero mit Video, Mask-Rise-Überschriften, Reveal-Stufen und eine
   Handvoll Bühnen-Primitive (lz-*) für die Signature-Momente.

   Wird VOR dem Seiten-<style> geladen — Seiten-CSS gewinnt immer.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --lz-ink:#0E0D0C;
  --lz-bone:#EFEDE4;
  --lz-org:#E85C0A;
  --lz-line:rgba(239,237,228,.14);
}

/* ── 1 · Kino-Hero: Video hinter der Schlagzeile ───────────────────────
   Das Poster steht beim First Paint, das Video blendet darüber. 112 %
   Höhe, damit die Scroll-Parallaxe unten nicht ins Leere läuft. */
.lhero-media img,
.lhero-media video{
  position:absolute;left:0;top:0;width:100%;height:112%;
  object-fit:cover;display:block;
}
.lhero-media video{opacity:0;transition:opacity .55s ease;will-change:transform}
.lhero-media video.is-on{opacity:1}

/* Die Schattenschicht liegt über dem Video, nicht darunter. */
.lhero-shade{z-index:1}
.lhero-in{z-index:2}
.lhero-num{z-index:1}

/* ── 2 · Schlagzeile: zeilenweise aus der Maske hochfahren ─────────────
   Wird per JS umgebaut (jede Zeile bekommt eine Maske). Ohne JS bleibt
   die Überschrift normal stehen — kein FOUC, kein leerer Hero. */
.lz-mask{display:block;overflow:hidden;padding-bottom:.06em}
.lz-line{display:block;will-change:transform}
@media(prefers-reduced-motion:no-preference){
  .lz-wipe .lz-line{animation:lzWipe 1.05s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(.06s + var(--i,0) * .09s)}
}
@keyframes lzWipe{from{transform:translateY(106%)}to{transform:none}}

/* ── 3 · Reveal: eine Stufe für alle Seiten ───────────────────────────
   Die Seiten nennen den Sichtbar-Zustand historisch .on, .in oder .is-in
   — das Skript setzt alle drei. Die Versteck-Regel hängt an .js-anim,
   damit ohne JavaScript nichts unsichtbar bleibt. */
.js-anim .rv{opacity:0;transform:translateY(24px);
  transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.js-anim .rv.on,.js-anim .rv.in,.js-anim .rv.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.reveal{opacity:1;transform:none;transition:none}
  .lz-wipe .lz-line{animation:none}
}

/* ══ 4 · Bühnen-Primitive für die Signature-Momente ══════════════════ */

.lz-stage{position:relative;background:#0E0D0C;color:var(--lz-bone);
  padding:clamp(80px,12vh,140px) clamp(20px,4vw,40px);overflow:hidden}
.lz-stage-in{position:relative;z-index:2;max-width:1240px;margin:0 auto}

/* Kopfzeile einer Bühne: Klammer-Eyebrow links, Notiz rechts */
.lz-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:16px;padding-bottom:22px;margin-bottom:clamp(34px,5vh,54px);
  border-bottom:1px solid var(--lz-line)}
.lz-eb{margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lz-org)}
.lz-note{margin:0;font-family:'Hanken Grotesk',sans-serif;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(239,237,228,.42)}

.lz-title{margin:0;font-family:Archivo,sans-serif;font-weight:900;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:.98;letter-spacing:-.025em;
  text-transform:uppercase;color:var(--lz-bone)}
.lz-title em{font-style:normal;color:var(--lz-org)}
.lz-lead{font-family:'Hanken Grotesk',sans-serif;font-size:clamp(1rem,1.3vw,1.12rem);
  line-height:1.68;color:rgba(239,237,228,.72);max-width:62ch;margin:20px 0 0}

/* Rahmen für Medien und Panels — dünne Kante, kein Schatten-Kitsch */
.lz-frame{position:relative;border:1px solid var(--lz-line);border-radius:3px;
  background:#121110;overflow:hidden}

/* Weicher Auslauf ins Knochenweiß der nächsten Sektion */
.lz-tobone{height:clamp(60px,9vh,120px);
  background:linear-gradient(180deg,#0E0D0C 0%,#0E0D0C 34%,var(--lz-bone) 100%)}
.lz-toink{height:clamp(60px,9vh,120px);
  background:linear-gradient(180deg,var(--lz-bone) 0%,#0E0D0C 100%)}

/* Zahl, die hochzählt — Tabellenziffern, damit nichts springt */
.lz-num{font-family:Archivo,sans-serif;font-weight:900;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Haarlinie, die beim Scrollen von links einläuft */
.lz-rule{height:1px;background:var(--lz-line);transform-origin:left center;
  transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.lz-rule.on{transform:scaleX(1)}

@media(max-width:767px){
  .lz-stage{padding:clamp(56px,9vh,80px) 20px}
  .lz-head{padding-bottom:16px;margin-bottom:30px}
  .lz-note{display:none}
}