/* ═══ STEINBAUER · Creative Pitch · DW Studio ════════════════════════════ */

:root{
  --bg:#07090B;
  --bg-2:#0C1116;
  --panel:#151A20;
  --line:rgba(232,237,242,.10);
  --ink:#E8EDF2;
  --ink-2:#7C8B99;
  --ink-3:#4E5C69;
  --red:#E1051C;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(24px,5vw,90px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2{margin:0;font-weight:650;letter-spacing:-.03em;line-height:1.02;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── Fortschrittsbalken ─────────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;background:rgba(255,255,255,.05);}
.progress i{display:block;height:100%;width:0;background:var(--red);transition:width .12s linear;}

/* ── Chromatic Waves · ein einziges Fullscreen-Canvas hinter allem ─────── */
.waves{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:0;
  /* Textschutz: die Mitte wird gedämpft, nicht ausgeräumt — sonst fehlt der
     Effekt genau dort, wo hingeschaut wird. */
  -webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 50%,
    rgba(0,0,0,.42) 0%,rgba(0,0,0,.72) 56%,rgba(0,0,0,1) 100%);
  mask-image:radial-gradient(ellipse 62% 52% at 50% 50%,
    rgba(0,0,0,.42) 0%,rgba(0,0,0,.72) 56%,rgba(0,0,0,1) 100%);
}

/* ── Grundbausteine ─────────────────────────────────────────────────────── */
.chapter{position:relative;z-index:1;}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;}
/* safe center: läuft der Inhalt einmal über, wird unten beschnitten statt
   oben — die Überschrift bleibt damit in jedem Fall lesbar. */
.stage--pad{display:flex;flex-direction:column;justify-content:safe center;gap:clamp(20px,3vh,42px);padding:calc(var(--pad) * .8) var(--pad);}

.section{padding:clamp(90px,14vh,190px) var(--pad);position:relative;z-index:1;}
.section--tight{padding:clamp(58px,8.5vh,120px) var(--pad);}
.wrap{max-width:1240px;margin:0 auto;width:100%;}
.wrap--head{max-width:1240px;margin:0 auto;width:100%;}

/* Sehr schwache Platinen-Textur in freien Zonen — bricht das flache Schwarz */
.section--tex::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/img/pcb.jpg) center/cover no-repeat;
  opacity:.035;
}
/* Dünne, auslaufende Trennlinie an der Sektionsnaht */
.section--seam::after{
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(232,237,242,0),rgba(232,237,242,.14) 30%,rgba(232,237,242,.14) 70%,rgba(232,237,242,0));
}

.eyebrow{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-2);font-weight:600;margin-bottom:18px;
}
.eyebrow::before{
  content:"";display:inline-block;width:16px;height:1px;
  background:var(--red);vertical-align:middle;margin-right:12px;
}
.h-lg{font-size:clamp(30px,5.2vw,70px);}
.h-xl{font-size:clamp(34px,6.4vw,94px);}
.h-md{font-size:clamp(22px,3.2vw,40px);line-height:1.1;}
.muted{color:var(--ink-2);}
.body{color:var(--ink-2);font-size:clamp(15px,1.25vw,18px);line-height:1.6;max-width:46ch;margin-top:20px;}
.body--wide{max-width:60ch;margin-top:36px;}

/* ── Sanftes Einblenden ─────────────────────────────────────────────────── */
.reveal [class*="eyebrow"],
.reveal h2,.reveal .body,.reveal li,.reveal .ft,.reveal .ft-arrow,
.reveal .media-frame,.reveal .close-text,.reveal .cta-row,
.reveal .about-role,.reveal .basis-text,.reveal .close-tags,.reveal .copy-line{
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease),transform .75s var(--ease);
}
.reveal.is-in [class*="eyebrow"],
.reveal.is-in h2,.reveal.is-in .body,.reveal.is-in li,
.reveal.is-in .ft,.reveal.is-in .ft-arrow,.reveal.is-in .media-frame,
.reveal.is-in .close-text,.reveal.is-in .cta-row,
.reveal.is-in .about-role,.reveal.is-in .basis-text,
.reveal.is-in .close-tags,.reveal.is-in .copy-line{
  opacity:1;transform:none;
}
.reveal.is-in h2{transition-delay:.04s;}
.reveal.is-in .about-role{transition-delay:.06s;}
.reveal.is-in .body{transition-delay:.08s;}

/* ═══ 01 · HERO ═════════════════════════════════════════════════════════ */
.chapter--hero{height:170vh;}
.hero-bg{
  position:absolute;inset:0;
  background:url(../assets/img/pcb.jpg) center/cover no-repeat;
  transform-origin:50% 46%;will-change:transform,opacity;
  filter:blur(9px) brightness(.72);
}
/* Zweite, scharfe Ebene: die Schärfe wird eingeblendet statt pro Frame
   neu berechnet — reiner Compositor-Job statt Repaint. */
.hero-bg--sharp{filter:brightness(.92);opacity:0;will-change:transform,opacity;}
.hero-vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 62% at 50% 46%,
    rgba(6,10,14,0) 0%,rgba(5,8,11,.58) 60%,rgba(3,5,7,.96) 100%);
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;}

.hero-copy{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(34px,7.5vh,92px);
  text-align:center;pointer-events:none;
}
.hero-copy .lead{
  font-size:clamp(22px,3.3vw,46px);line-height:1.14;letter-spacing:-.025em;
  font-weight:600;margin-bottom:18px;
}
.hero-copy .eyebrow{margin-bottom:24px;}
.hero-copy .eyebrow::before{display:none;}
.hero-sub{
  font-size:clamp(9px,.92vw,12px);letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:30px;
}
.cta{
  pointer-events:auto;display:inline-flex;align-items:center;gap:12px;
  padding:14px 26px;border:1px solid var(--line);border-radius:100px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
  transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease);
}
.cta svg{width:15px;height:15px;fill:none;stroke:var(--red);stroke-width:2;}
.cta:hover{border-color:rgba(225,5,28,.55);background:rgba(225,5,28,.08);transform:translateY(-2px);}
.cta--solid{border-color:rgba(225,5,28,.4);}

/* Tastaturfokus: der Standardring des Browsers verschwindet auf dieser
   dunklen Fläche fast — hier ein eigener, der zur Marke passt. */
.cta:focus-visible,.copy-line:focus-visible{
  outline:2px solid var(--red);outline-offset:3px;
  border-color:rgba(225,5,28,.55);
}

.d1,.d2,.d3,.d4{opacity:0;transform:translateY(18px);animation:fadeUp 1.2s var(--ease) forwards;}
.d1{animation-delay:.25s;} .d2{animation-delay:.6s;}
.d3{animation-delay:.95s;} .d4{animation-delay:1.3s;}
@keyframes fadeUp{to{opacity:1;transform:none;}}

/* Kurze Viewports (Laptop-Fenster mit Browser-Chrome, eingebettete Vorschauen):
   Copy-Block verkleinert sich, damit er nie in die Logo-Zone reicht. */
@media (max-height:760px){
  .hero-copy{bottom:clamp(22px,5vh,54px);}
  .hero-copy .lead{font-size:clamp(17px,2.6vw,30px);margin-bottom:12px;}
  .hero-copy .eyebrow{margin-bottom:13px;}
  .hero-sub{margin-bottom:18px;letter-spacing:.24em;}
}
@media (max-height:560px){
  .hero-copy{bottom:12px;}
  .hero-copy .eyebrow,.hero-sub{display:none;}
  .hero-copy .lead{font-size:15px;line-height:1.25;margin-bottom:12px;}
  .hero-copy .cta{padding:9px 18px;font-size:11px;}
}

.brand-label{
  position:absolute;left:0;right:0;top:50%;text-align:center;
  font-size:clamp(10px,.95vw,13px);letter-spacing:.5em;text-transform:uppercase;
  color:var(--ink-2);opacity:0;transition:opacity .8s var(--ease);pointer-events:none;
}

/* ═══ Bildrahmen (geteilt) ══════════════════════════════════════════════ */
.media-frame{
  position:relative;overflow:hidden;border-radius:3px;
  background:var(--panel);border:1px solid var(--line);
  aspect-ratio:4/5;                       /* verhindert 1.236-px-Hochformat */
}
.media-frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 2.4s var(--ease);
}
.reveal.is-in .media-frame img{transform:scale(1);}
.media-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 16px 13px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,237,242,.72);
  background:linear-gradient(0deg,rgba(4,6,9,.9),rgba(4,6,9,0));
}

/* ═══ 02 · WER ICH BIN ══════════════════════════════════════════════════ */
.about-split{
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:center;
}
.about-media.media-frame{max-width:360px;width:100%;}
/* Das Foto ist Tageslicht/tropisch — Grade und Scrim holen es in die
   dunkle Palette, ohne es zu verfälschen. Der Kopf sitzt rechts der Mitte. */
.media-frame--warm img{
  filter:saturate(.68) contrast(1.06) brightness(.78);
  object-position:56% 50%;
}
.media-frame--warm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,12,18,.32) 0%,rgba(7,12,18,0) 40%,rgba(4,6,9,.5) 100%);
}
.about-role{
  font-size:clamp(11px,1.05vw,14px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-top:20px;font-weight:600;
}
.about-copy .body:first-of-type{margin-top:22px;}

/* ═══ 03 · WAS ICH BEI STEINBAUER SEHE ══════════════════════════════════ */
.see-split{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(28px,4.5vw,72px);align-items:start;margin-top:8px;
}
.see-copy .body{max-width:52ch;}
/* Echtes Firmenbild: 2:3, wird nicht auf 4:5 beschnitten — sonst fehlen
   Dachkante und Vorplatz, also genau das, was das Gebäude ausmacht. */
.see-media.media-frame{
  aspect-ratio:2/3;max-width:320px;width:100%;margin:0 0 0 auto;
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95);
}

/* Die sechs realen Anwendungsbereiche — typografisch statt mit erfundenen Bildern */
.segments{
  display:flex;flex-wrap:wrap;row-gap:12px;
  margin-top:clamp(34px,4.5vh,58px);padding-top:22px;
  border-top:1px solid var(--line);
}
.segments li{position:relative;padding:0 clamp(13px,1.7vw,24px);}
.segments li:first-child{padding-left:0;}
.segments li::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:1px;background:var(--line);
}
.segments li:first-child::before{display:none;}
.segments li span{
  font-size:clamp(12px,1.1vw,15px);letter-spacing:.04em;
  color:var(--ink-3);transition:color .6s var(--ease);
}
.segments li.on span{color:var(--ink-2);}
/* Das EV PowerModule ist das Beispiel dieses Pitches — markiert, nicht behauptet */
.segments-new span::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--red);margin-right:9px;vertical-align:middle;
}
.segments li.segments-new.on span{color:var(--ink);}

.tech-wide{
  margin:clamp(30px,4.5vh,60px) 0 0;
  aspect-ratio:16/5;min-height:220px;max-width:100%;
}
.tech-wide img{object-position:50% 42%;}
/* Verlauf statt blossem Textschatten — der Lack im Bild ist stellenweise hell */
.tech-wide-copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(44px,9vh,110px) clamp(20px,3vw,44px) clamp(18px,3vh,36px);
  background:linear-gradient(0deg,rgba(4,6,9,.94) 0%,rgba(4,6,9,.72) 48%,rgba(4,6,9,0) 100%);
}
.tech-wide-copy .eyebrow{margin-bottom:10px;}
.tech-wide-text{
  font-size:clamp(16px,2vw,28px);line-height:1.24;letter-spacing:-.02em;
  text-shadow:0 2px 22px rgba(0,0,0,.8);
}
.xray-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,9,11,.92),rgba(7,9,11,0) 55%);
  clip-path:inset(0 0 0 0);
  transition:clip-path 2.2s var(--ease) .35s;
}
.reveal.is-in .xray-veil{clip-path:inset(0 0 0 100%);}

/* ═══ 04 · MEINE VISION ═════════════════════════════════════════════════ */
.section--statement{min-height:80vh;display:flex;align-items:center;}
.statement{font-size:clamp(26px,4.4vw,60px);line-height:1.12;}
.statement .line{display:block;}
.statement .l2{transition-delay:.18s !important;}
.statement .l3{transition-delay:.34s !important;}

.vision-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,32px);margin-top:clamp(44px,6vh,84px);
}
.vision-grid li{position:relative;border-top:1px solid var(--line);padding-top:22px;}
.vision-grid li::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--red);transition:width 1s var(--ease);
}
.vision-grid li.on::before{width:100%;}
.vision-grid b{
  display:block;font-size:clamp(13px,1.4vw,18px);letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;margin-bottom:13px;
  color:var(--ink-3);transition:color .7s var(--ease);
}
.vision-grid li.on b{color:var(--ink);}
.vision-grid p{
  font-size:clamp(13px,1.05vw,15px);line-height:1.6;
  color:var(--ink-3);transition:color .7s var(--ease);
}
.vision-grid li.on p{color:var(--ink-2);}

/* ═══ 05 · WEBSITE-DEMO ═════════════════════════════════════════════════ */
/* Bewusst das längste Kapitel: zwei Entwürfe teilen sich den Scrollweg.
   Grob 0–40 % Version 01, 40–60 % Übergang, 60–100 % Version 02 — bei
   kürzerem Weg bekäme der Wechsel nur ein paar Pixel und wirkt wie ein
   Bildtausch statt wie eine Entwicklung. */
.chapter--web{height:230vh;}
.compare{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(12px,2.2vw,32px);margin-top:clamp(18px,2.6vh,32px);
}
.compare-col{flex:1;min-width:210px;}
.compare-label{
  display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.compare-col b{
  display:block;font-size:clamp(11px,1vw,14px);font-weight:500;
  letter-spacing:.02em;line-height:1.5;color:var(--ink-3);
}
/* Aktiv ist immer die Spalte, deren Entwurf gerade im Fenster steht */
.compare-label,.compare-col b{transition:color .6s var(--ease);}
.compare-col.is-on .compare-label{color:var(--red);}
.compare-col.is-on b{color:var(--ink);}
.compare-arrow{color:var(--red);font-size:17px;line-height:1;}

/* Fensterbreite folgt der zulässigen Höhe, damit der Entwurf im Seiten-
   verhältnis der Vorlage (1920×1072) sitzt und nichts beschnitten wird. */
.browser-scene{--shot-h:min(48vh,460px);}
.browser{
  width:min(1080px,100%,calc(var(--shot-h) * 1920 / 1072));margin:0 auto;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--panel);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);
  transform-origin:50% 40%;will-change:transform;
}
.browser-bar{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:#10151A;border-bottom:1px solid var(--line);
}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#242C34;}
.browser-bar .url{
  margin-left:14px;font-size:11px;color:var(--ink-3);letter-spacing:.06em;
  background:#0B0F13;padding:5px 14px;border-radius:100px;
}
.concept-tag{
  margin-left:auto;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);padding:4px 9px;border-radius:3px;
}
.browser-view{position:relative;aspect-ratio:1920/1072;overflow:hidden;background:var(--bg-2);}

/* Die beiden Entwürfe liegen deckungsgleich übereinander; der Scroll blendet
   sie ineinander und schiebt sie leicht gegeneinander. */
.shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:opacity,transform;
}
.shot--a{opacity:1;transform:scale(1.02);}
/* Entwurf 02 kommt aus einer helleren Studioaufnahme — der leichte Grade
   holt ihn in die Palette des Pitches, ohne ihn zu verfälschen. */
.shot--b{opacity:0;transform:scale(1.08);filter:brightness(.92) saturate(.94);}
/* Statisch weichgezeichnete Kopie von 01: nur die Deckkraft wird animiert,
   der Blur selbst wird einmal gerastert. Die Quelle kommt über data-bg,
   damit sie nicht schon beim Seitenstart geladen wird. */
.shot-blur{
  position:absolute;inset:-4%;pointer-events:none;opacity:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(18px) brightness(.9);will-change:opacity;
}
.shot-vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 82% 82% at 50% 45%,
    rgba(4,6,9,0) 42%,rgba(4,6,9,.36) 100%);
}
.shot-label{
  margin-top:14px;text-align:center;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}

/* ═══ 06 · SOCIAL · GERÄTE + KANÄLE ═════════════════════════════════════ */
.chapter--social{height:160vh;}
/* Zwei Geräte nebeneinander: Instagram links, YouTube rechts. Der gemeinsame
   Fluchtpunkt liegt jetzt mittig, sonst würde das rechte Gerät stärker
   verzerren als das linke. */
.phone-scene{
  flex:1;display:grid;grid-template-columns:auto auto;
  gap:clamp(24px,4.5vw,72px);align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 45%;min-height:0;
}
/* Höhe führt, Breite folgt — so passt das Gerät auch auf kurze Viewports,
   ohne dass die Bühne den Fuss abschneidet. */
.phone{
  position:relative;height:min(46vh,460px);width:auto;aspect-ratio:9/19.5;
  max-width:40vw;transform-style:preserve-3d;will-change:transform;
}
.phone-body{
  position:absolute;inset:0;border-radius:38px;overflow:hidden;
  background:#0A0D10;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 8px #0C1015,0 50px 90px -30px rgba(0,0,0,.95);
}
/* Die Oberfläche darin wird am Gerät gemessen, nicht in festen Pixeln — sonst
   läuft der Profilname aus dem Bildschirm, sobald das Telefon schmaler wird.
   Bezugsbreite ist 224 px, also die Größe, für die die Werte gesetzt waren. */
.phone-screen{
  position:absolute;inset:0;overflow:hidden;background:#0B0E12;color:#F2F5F8;
  container-type:inline-size;
}
.phone-glare{
  position:absolute;inset:0;border-radius:38px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%,
             rgba(255,255,255,0) 66%,rgba(255,255,255,.07) 100%);
  will-change:opacity;
}
.phone-shadow{
  position:absolute;left:8%;right:8%;bottom:-38px;height:36px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.7),rgba(0,0,0,0) 70%);
  filter:blur(9px);
}
.concept-note{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}

/* ── YouTube · zweites Gerät, gleiche Sprache ───────────────────────────── */
/* Nicht das Gerät, sondern die Bildfläche trägt das Seitenverhältnis der
   Vorlage — sonst frisst die Leiste Höhe und der Kanal wird unten beschnitten.
   Die Breite wird deshalb aus der Zielhöhe minus Leiste gerechnet. */
.yt{
  --yt-bar:34px;
  position:relative;
  width:min(56vw,calc((min(38vh,380px) - var(--yt-bar)) * 1920 / 1072));
  max-width:100%;transform-style:preserve-3d;will-change:transform;
}
.yt-body{
  position:relative;border-radius:10px;overflow:hidden;
  background:#0F0F0F;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.95);
}
.yt-body .browser-bar{height:var(--yt-bar);padding:0 12px;flex:none;}
.yt-body .browser-bar .url{margin-left:11px;font-size:9.5px;padding:4px 11px;}
.yt-screen{position:relative;aspect-ratio:1920/1072;overflow:hidden;}
.yt-screen img{width:100%;height:100%;object-fit:cover;}
.yt-glare{border-radius:10px;opacity:.4;}
/* Blenden sitzen exakt über den fünf Thumbnails — Werte am Bild gemessen */
.yt-tiles{position:absolute;inset:0;pointer-events:none;}
.yt-tiles i{
  position:absolute;top:70.2%;height:18.6%;width:17.9%;background:#0F0F0F;
  opacity:1;transition:opacity .7s var(--ease);
}
.yt-tiles i:nth-child(1){left:5.3%;}
.yt-tiles i:nth-child(2){left:23.9%;}
.yt-tiles i:nth-child(3){left:42.6%;}
.yt-tiles i:nth-child(4){left:61.3%;}
.yt-tiles i:nth-child(5){left:79.9%;}
.yt-tiles i.on{opacity:0;}
/* Setzt unter den Thumbnails (Unterkante 88,4 %) auf und deckt Titelzeile,
   Aufrufzahlen und Datum vollständig zu. */
.yt-fade{
  position:absolute;left:0;right:0;bottom:0;height:11.5%;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,15,0) 0%,rgba(15,15,15,.96) 18%,#0F0F0F 32%);
}

/* Die Kanalliste steht jetzt unter beiden Geräten, nicht mehr daneben */
.channels-block{width:100%;max-width:1000px;margin:0 auto;text-align:center;}
.channels-lead{
  font-size:clamp(13px,1.15vw,16px);line-height:1.5;color:var(--ink-2);
  margin-bottom:clamp(12px,1.8vh,20px);
}
.channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2.4vw,34px);}
.channels li{
  display:flex;flex-direction:column;gap:4px;align-items:center;
  padding:clamp(8px,1.2vh,13px) 0;border-top:1px solid var(--line);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.channels li.on{opacity:1;transform:none;}
.channels b{font-size:clamp(12px,1.1vw,15px);letter-spacing:-.01em;}
.channels span{font-size:clamp(10px,.85vw,12px);color:var(--ink-3);letter-spacing:.04em;line-height:1.4;}
.channels-block .concept-note{display:block;margin-top:clamp(10px,1.6vh,18px);}

/* Instagram-Oberfläche, live gebaut — keine erfundenen Kennzahlen */
.ig-head{display:flex;align-items:center;gap:5.4cqw;padding:9.8cqw 7.1cqw 4.5cqw;}
.ig-avatar{width:20.5cqw;height:20.5cqw;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.15);}
.ig-id{min-width:0;}
.ig-id b{display:block;font-size:5.6cqw;letter-spacing:.01em;}
.ig-id span{font-size:4.7cqw;color:#8A97A4;}
.ig-bio{padding:0 7.1cqw 6.3cqw;font-size:4.7cqw;line-height:1.55;color:#C3CCD5;}
.ig-tabs{display:flex;gap:8.9cqw;padding:0 7.1cqw 4.5cqw;border-bottom:1px solid rgba(255,255,255,.09);}
.ig-tabs b,.ig-tabs span{font-size:4.2cqw;letter-spacing:.14em;text-transform:uppercase;padding-bottom:4cqw;}
.ig-tabs b{border-bottom:1px solid #fff;}
.ig-tabs span{color:#6C7986;}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;}
.ig-grid i{
  display:block;aspect-ratio:1;background-size:cover;background-position:center;
  opacity:0;transform:scale(.9);
  transition:opacity .7s var(--ease),transform .8s var(--ease);
}
.ig-grid i.on{opacity:1;transform:none;}

/* ═══ 07 · CONTENT-SYSTEM ═══════════════════════════════════════════════ */
.cascade{
  margin-top:clamp(40px,5.5vh,76px);position:relative;padding-left:26px;
  column-gap:clamp(30px,5vw,80px);
}
.cascade::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line);
}
.cascade li{position:relative;padding:clamp(10px,1.6vh,17px) 0;break-inside:avoid;}
.cascade li::before{
  content:"";position:absolute;left:-26px;top:50%;width:16px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.cascade li.on::before{transform:scaleX(1);}
.cascade-root b{font-size:clamp(17px,2vw,26px);letter-spacing:-.02em;}
.cascade li span{
  font-size:clamp(14px,1.4vw,19px);color:var(--ink-2);
  transition:color .6s var(--ease);
}
.cascade li.on span{color:var(--ink);}

/* Bandbreite statt Aufzählung — gleiche Typografie wie die Anwendungsbereiche */
.spectrum-lead{
  margin-top:clamp(34px,4.5vh,60px);
  font-size:clamp(15px,1.5vw,20px);letter-spacing:-.01em;
}
.spectrum{
  display:flex;flex-wrap:wrap;row-gap:10px;
  margin-top:16px;padding-top:18px;border-top:1px solid var(--line);
}
.spectrum li{position:relative;padding:0 clamp(11px,1.4vw,20px);}
.spectrum li:first-child{padding-left:0;}
.spectrum li::before{
  content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:1px;background:var(--line);
}
.spectrum li:first-child::before{display:none;}
.spectrum li span{
  font-size:clamp(10px,.95vw,13px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);transition:color .6s var(--ease);
}
.spectrum li.on span{color:var(--ink-2);}

/* ═══ 08 · FPV ══════════════════════════════════════════════════════════ */
.chapter--fpv{height:170vh;}
.chapter--fpv .stage{background:#04070A;}
/* Unscharf skalierte Kopie füllt die Breite, ohne das Hochformat zu beschneiden */
.fpv-blur{
  position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(46px) brightness(.34) saturate(.7);
  transition:background-image .4s linear;will-change:transform;
}
.fpv-rail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.fpv-panel{
  position:absolute;margin:0;height:min(58vh,580px);aspect-ratio:9/16;
  border-radius:4px;overflow:hidden;background:#04070A;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95);
  will-change:transform,opacity;
}
.fpv-panel video{width:100%;height:100%;object-fit:cover;}
.fpv-panel figcaption{
  position:absolute;left:16px;bottom:14px;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.fpv-head{
  position:absolute;left:var(--pad);right:var(--pad);top:clamp(26px,6vh,70px);
  text-align:center;opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .8s var(--ease);pointer-events:none;
}
.fpv-head.on{opacity:1;transform:none;}
.fpv-head .eyebrow::before{display:none;}
.fpv-head .h-xl{font-size:clamp(26px,4.4vw,60px);}
/* Die Positionierung: FPV ist Werkzeug, nicht Selbstzweck */
.fpv-sub{
  margin-top:14px;font-size:clamp(11px,1.1vw,16px);line-height:1.5;
  color:var(--ink-2);
}
/* Die drei Aussagezeilen laufen in der Schiene mit — eigene Sektion entfällt */
.fpv-lines{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,7vh,72px);
  height:2.6em;text-align:center;pointer-events:none;
}
.fpv-lines li{
  position:absolute;left:0;right:0;top:0;
  font-size:clamp(14px,1.7vw,22px);color:var(--ink-2);letter-spacing:-.01em;
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.fpv-lines li.on{opacity:1;transform:none;color:var(--ink);}

/* ═══ 09 · STORYTELLING ═════════════════════════════════════════════════ */
.chapter--voice{height:108vh;}
/* Poster liegt als Hintergrund darunter — kein Schwarzblitz vor dem Videostart */
.voice-media{
  position:absolute;inset:0;
  background:url(../assets/img/poster-workshop.jpg) center/cover no-repeat;
}
.voice-media video{width:100%;height:100%;object-fit:cover;opacity:.5;}
.voice-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(4,6,9,.96) 12%,rgba(4,6,9,.62) 62%,rgba(4,6,9,.9) 100%);
}
.voice-copy{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);max-width:1240px;margin:0 auto;
}
.voice-type{display:flex;flex-direction:column;gap:4px;margin-bottom:24px;}
.vt{display:block;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease);}
.vt.on{clip-path:inset(0 0 0 0);}
.voice-type .vt:nth-child(2){transition-delay:.18s;}
.voice-lead{
  max-width:44ch;font-size:clamp(14px,1.25vw,18px);line-height:1.55;
  color:var(--ink-2);margin-bottom:26px;
}
.voice-list li{
  font-size:clamp(13px,1.35vw,17px);color:var(--ink-2);padding:9px 0;
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.voice-list.on li{opacity:1;transform:none;}
.voice-list.on li:nth-child(2){transition-delay:.1s;}
.voice-list.on li:nth-child(3){transition-delay:.2s;}

/* ═══ 10 · ÖKOSYSTEM ════════════════════════════════════════════════════ */
.chapter--one{height:108vh;}
.chapter--one .stage{display:flex;align-items:center;justify-content:center;}
.layers{position:absolute;inset:0;}
/* Die Zentrierung steht im CSS, nicht erst im Loop: bei reduzierter Bewegung
   und ohne JavaScript bleiben die Kacheln sonst nach unten rechts versetzt. */
.layer{
  position:absolute;top:50%;left:50%;width:clamp(200px,26vw,380px);aspect-ratio:1;
  transform:translate3d(-50%,-50%,0);
  background-size:cover;background-position:center;border-radius:3px;opacity:.3;
  border:1px solid rgba(255,255,255,.08);will-change:transform;
}
/* Eigener Hintergrund statt Pseudo-Element: er malt garantiert hinter dem
   eigenen Text, aber vor den Ebenen — sonst verschwindet die Unterzeile,
   sobald die Kacheln in der Mitte zusammenlaufen. */
.one-copy{
  position:relative;text-align:center;
  padding:clamp(28px,6vh,72px) var(--pad);
  background:radial-gradient(ellipse 72% 100% at 50% 50%,
    rgba(5,8,11,.9) 0%,rgba(5,8,11,.62) 52%,rgba(5,8,11,0) 80%);
}
.one-list{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.5vw,40px);margin-top:36px;}
.one-list li{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);}

/* ── 10b · Der Weg ──────────────────────────────────────────────────────── */
.funnel{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;margin-top:clamp(34px,4.5vh,60px);
  counter-reset:fstep;
}
.funnel li{position:relative;padding-top:20px;counter-increment:fstep;}
.funnel li::before{
  content:"";position:absolute;left:0;right:8px;top:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.funnel li.on::before{transform:scaleX(1);}
.funnel-step{
  display:block;font-size:clamp(11px,1vw,14px);letter-spacing:.06em;
  color:var(--ink-3);transition:color .6s var(--ease);
}
.funnel li.on .funnel-step{color:var(--ink);}
.funnel-step::before{
  content:"0" counter(fstep);display:block;
  font-size:9px;letter-spacing:.2em;color:var(--ink-3);margin-bottom:8px;
}

/* ═══ 11 · WARUM DW STUDIO ══════════════════════════════════════════════ */
.why-triad{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,44px);margin-top:clamp(40px,5.5vh,76px);
}
.why-triad li{position:relative;border-top:1px solid var(--line);padding-top:22px;}
.why-triad li::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--red);transition:width 1s var(--ease);
}
.why-triad li.on::before{width:100%;}
.why-num{
  display:block;font-size:10px;letter-spacing:.22em;color:var(--ink-3);margin-bottom:14px;
}
.why-triad b{
  display:block;font-size:clamp(17px,2vw,26px);letter-spacing:-.02em;margin-bottom:12px;
  color:var(--ink-3);transition:color .7s var(--ease);
}
.why-triad li.on b{color:var(--ink);}
.why-triad p{font-size:clamp(13px,1.1vw,15px);line-height:1.6;color:var(--ink-2);}

/* ═══ 12 · TECHNISCHE BASIS ═════════════════════════════════════════════ */
.section--basis{padding:clamp(40px,5.5vh,72px) var(--pad);}
.basis-row{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.basis-head .eyebrow{margin-bottom:12px;}
.basis-text{font-size:clamp(14px,1.2vw,17px);line-height:1.55;color:var(--ink-2);}
.basis-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,32px);}
.basis-list li{border-left:1px solid var(--line);padding-left:16px;}
.basis-list b{
  display:block;font-size:clamp(11px,1vw,13px);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:8px;color:var(--ink-3);transition:color .6s var(--ease);
}
.basis-list li.on b{color:var(--ink);}
.basis-list span{font-size:clamp(12px,1vw,14px);color:var(--ink-3);line-height:1.55;}

/* ═══ 13 · ABSCHLUSS ════════════════════════════════════════════════════ */
.chapter--close{height:118vh;}
.chapter--close .stage{background:radial-gradient(ellipse at 50% 40%,#0C1218,#05080B 72%);}
.hero-canvas--calm{opacity:.85;}
/* Der Block ist gewachsen (Eyebrow, Fliesstext, Tags, zwei Buttons, Kopierzeile) —
   er muss tiefer sitzen, sonst läuft er in die Partikel-Logo-Zone. */
.close-copy{
  position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,4vh,48px);
  text-align:center;
}
.close-copy .eyebrow{margin-bottom:14px;}
.close-copy .eyebrow::before{display:none;}
.close-copy h2{margin-bottom:14px;}
.close-text{
  color:var(--ink-2);font-size:clamp(14px,1.2vw,17px);line-height:1.6;
  max-width:56ch;margin:0 auto 16px;
}
.close-tags{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;
}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:12px;}
/* Kopierzeile: die Adresse ist sichtbar UND mit einem Klick übernehmbar */
.copy-line{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;
  padding:8px 16px;border:1px solid transparent;border-radius:100px;
  background:none;color:inherit;font-family:inherit;cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.copy-line:hover{border-color:var(--line);background:rgba(255,255,255,.03);}
.copy-mail{font-size:13px;letter-spacing:.04em;color:var(--ink-2);}
.copy-hint{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);}
.copy-line.copied .copy-hint{color:var(--red);}
.sig{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);}

.foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:34px var(--pad);border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  background:var(--bg);
}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .cascade{columns:2;}
}
/* Eine einzige Kante für alle mehrspaltigen Blöcke — 1024 als Grenzwert
   trifft gängige Gerätebreiten exakt und feuert dort nicht zuverlässig. */
@media (max-width:899px){
  .about-split{grid-template-columns:1fr;gap:30px;}
  .about-media.media-frame{max-width:300px;margin:0 auto;}
  .see-split{grid-template-columns:1fr;gap:28px;}
  .see-media.media-frame{max-width:320px;margin:0 auto;}
  .tech-wide{aspect-ratio:16/7;}
  .vision-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .why-triad{grid-template-columns:1fr;gap:22px;}
  .basis-row{grid-template-columns:1fr;gap:24px;}
  .basis-list{grid-template-columns:1fr;gap:14px;}
  /* Schmaler Viewport: die Breite führt, die Höhe folgt dem Seitenverhältnis */
  .browser-scene{--shot-h:92vh;}
  /* Geräte untereinander: Instagram, darunter YouTube */
  .phone-scene{grid-template-columns:1fr;gap:16px;justify-items:center;}
  .phone{height:min(30vh,300px);max-width:70vw;}
  .yt{width:min(100%,460px);}
  /* Gestapelt läge der Schlagschatten auf dem zweiten Gerät */
  .phone-shadow{display:none;}
  .channels-block{max-width:560px;}
  .channels{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;}
  .channels li:nth-child(2){border-top:1px solid var(--line);}
  .funnel{grid-template-columns:1fr;gap:0;}
  .funnel li{padding:14px 0 14px 26px;}
  .funnel li::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;
    transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease);}
  .funnel li.on::before{transform:scaleY(1);}
  .funnel-step::before{display:inline-block;margin:0 10px 0 0;}
}
@media (max-width:620px){
  .vision-grid{grid-template-columns:1fr;gap:0;}
  .vision-grid li{padding:18px 0;}
  .compare{gap:14px;}
  .compare-arrow{display:none;}
}
@media (max-width:768px){
  /* Der Dive braucht Weg, sonst wird die Auflösung am Ende zum Schnitt */
  .chapter--hero{height:125vh;}
  .chapter--fpv{height:128vh;}
  .chapter--social{height:140vh;}
  /* Wie am Desktop: beide Entwürfe und der Wechsel dazwischen brauchen Weg */
  .chapter--web{height:200vh;}
  .chapter--voice{height:108vh;}
  .chapter--one{height:105vh;}
  .chapter--close{height:115vh;}

  /* Mobile: dieselbe Dramaturgie, engere Abstände — Ziel ≤ 14 Screens */
  /* Auf kleinen Telefonen zählt jede Zeile in den 100vh-Bühnen */
  .stage--pad{padding:12px var(--pad);}
  .section{padding:clamp(56px,8vh,110px) var(--pad);}
  .section--tight{padding:clamp(42px,5.5vh,80px) var(--pad);}
  .section--basis{padding:clamp(32px,4.5vh,56px) var(--pad);}
  .section--statement{min-height:66vh;}
  .body{margin-top:16px;}
  .body--wide{margin-top:26px;}
  .cascade{margin-top:26px;}
  .cascade li{padding:9px 0;}
  .segments{margin-top:26px;padding-top:18px;}
  .vision-grid{margin-top:30px;}
  .why-triad{margin-top:28px;}
  .why-triad li{padding-top:18px;}
  .about-split{gap:24px;}
  .about-media.media-frame{max-width:230px;}
  .see-split{gap:22px;}
  .see-media.media-frame{max-width:240px;}
  /* aspect-ratio + min-height blähen sonst die BREITE auf (220 × 16/9 = 391 px)
     und sprengen bei 375 px den Viewport. Höhe folgt hier der Breite. */
  .tech-wide{margin-top:24px;aspect-ratio:16/9;min-height:0;}
  .statement{font-size:clamp(24px,7vw,38px);}
  .funnel{margin-top:24px;}
  .funnel li{padding:8px 0 8px 22px;}
  .hero-bg{filter:brightness(.66);}          /* blur auf Mobile aus — zu teuer */
  .hero-bg--sharp{display:none;}
  .fpv-blur{filter:brightness(.3) saturate(.7);}
  .fpv-panel{height:50vh;}
  .fpv-head .h-xl{font-size:clamp(22px,6.5vw,32px);}
  .fpv-sub{font-size:12px;margin-top:10px;}
  .voice-lead{margin-bottom:18px;}
  /* Zwei Geräte plus Kanäle in einer 100vh-Bühne: jede Zeile zählt */
  .phone-scene{gap:12px;}
  .phone{height:min(27vh,240px);max-width:44vw;}
  .yt{width:min(100%,380px);}
  .yt-body .browser-bar{padding:6px 9px;}
  .yt-body .browser-bar .url{font-size:8px;padding:3px 8px;margin-left:8px;}
  .yt-body .concept-tag{font-size:7.5px;padding:3px 6px;}
  .channels-lead{font-size:12px;margin-bottom:8px;}
  /* Vier Zeilen untereinander sprengen auf kleinen Telefonen die Bühne —
     als 2×2 halbiert sich die Höhe, ohne dass Text wegfällt. */
  .channels{gap:0 16px;}
  .channels li{padding:7px 0;}
  .channels span{font-size:10px;line-height:1.3;}
  .channels-block .concept-note{margin-top:8px;}

  /* Der Vergleich sitzt in der Bühne — hier zählt jede Zeile */
  .compare{margin-top:14px;gap:10px;}
  .compare-label{font-size:8px;margin-bottom:4px;}
  .compare-col b{font-size:10px;line-height:1.4;}

  .shot-blur{display:none;}                   /* wie hero-bg--sharp: zu teuer */
  .shot-label{margin-top:10px;font-size:9px;letter-spacing:.18em;}
  .waves{display:none;}                       /* Mobile: kein WebGL-Layer */
}

/* Breite, flache Desktop-Fenster (1280×800, 1440×900 und Verwandte):
   Die Typografie skaliert mit der BREITE (clamp auf vw), die Bühnen-Medien
   aber mit der HÖHE (58vh Panel, 46vh Telefon). Auf flachen Fenstern trifft
   grosse Schrift auf wenig Höhe — das FPV-Panel lief in die Unterzeile, das
   Telefon in die Kanalzeile. Kopf etwas höher, Medien etwas kleiner.
   Ab 1000 px Fensterhöhe greift die Regel nicht, dort ist Platz genug. */
@media (min-width:900px) and (max-height:1000px){
  .fpv-head{top:clamp(18px,3.4vh,44px);}
  .fpv-sub{margin-top:11px;}
  .fpv-panel{height:min(50vh,500px);}
  .phone{height:min(42vh,420px);}
}

/* Kurze Telefone (iPhone SE & Co): zwei Geräte, Kopf und Kanäle passen nur,
   wenn die Kanalliste auf ihre Namen zusammenschnurrt. */
@media (max-width:768px) and (max-height:720px){
  .chapter--social .stage--pad{gap:10px;}
  .phone-scene{gap:10px;}
  .phone{height:min(22vh,190px);}
  .channels-lead{font-size:11px;line-height:1.4;margin-bottom:6px;}
  .channels{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;}
  .channels span{display:none;}
  .channels li{padding:6px 0;}
  .channels b{font-size:11px;}
  .channels-block .concept-note{margin-top:6px;font-size:8.5px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;}
  .reveal [class*="eyebrow"],.reveal h2,.reveal .body,.reveal li,
  .reveal .ft,.reveal .ft-arrow,.reveal .media-frame,
  .reveal .close-text,.reveal .cta-row,.reveal .about-role,
  .reveal .basis-text,.reveal .close-tags,.reveal .copy-line,
  .d1,.d2,.d3,.d4{opacity:1 !important;transform:none !important;}
  .vt{clip-path:none !important;}
  .ig-grid i,.channels li{opacity:1 !important;transform:none !important;}
  .yt-tiles i{opacity:0 !important;}          /* Blenden liegen offen */
  .shot{transform:none !important;}           /* Deckkraft bleibt scrollgesteuert */
  .fpv-head{opacity:1 !important;transform:none !important;}
  .fpv-lines{position:static;height:auto;}
  .fpv-lines li{position:static;opacity:1 !important;transform:none !important;}
  .voice-list li{opacity:1 !important;transform:none !important;}
  .waves{display:none;}
}