/* ══════════════════════════════════════════════════════════════════════════════════════════════
   NF-R85  WERBEVIDEOS-UNTERSEITE
   Leitmotiv: eine praezise Medienbuehne. Grosse Bildschirmflaechen mit zurueckhaltenden Rahmen,
   ruhiges Navy, einzelne Lichtakzente und eine feine goldene Timeline als wiederkehrendes Detail.
   Videos sind die Bewegung - Texte und Bedienelemente bleiben ruhig.
   Alle Klassen tragen das Praefix wv-. Grundbausteine (Navigation, Knoepfe, Farben) stehen im
   Kopf der Seite, der Footer in footer.css.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.wv{
  --wv-gold:#c9a063;--wv-gold-hell:#e3bf82;--wv-gold-tief:#9c7440;
  --wv-linie:rgba(201,160,99,.42);--wv-linie-leise:rgba(201,160,99,.18);
  --wv-navy-0:#04070c;--wv-navy-1:#070b13;--wv-navy-2:#0b111c;--wv-navy-3:#101827;
  --wv-weiss:#f3f5f8;--wv-text:#c3cad6;--wv-text-2:#a2abb9;--wv-text-3:#7d8797;
  --wv-rahmen:rgba(255,255,255,.09);--wv-rahmen-hell:rgba(255,255,255,.14);
  --wv-radius:16px;--wv-zone:clamp(220px,30vh,380px);
  --wv-ease:cubic-bezier(.22,.61,.36,1);
}
/* NF-R89: overflow:clip in beiden Richtungen. Die Huelle des Abschluss-Hintergrunds (.wv-abschluss-huelle)
   reicht um Fensterhoehe + Zone unter ihre Region hinaus (noetig fuer das klebende Canvas), ist dort aber
   vollstaendig maskiert. Ohne Clip verlaengerte sie den scrollbaren Bereich um ~200 px unter den Footer.
   clip ist kein Scrollcontainer: sticky, Masken und Ueberblendungen innerhalb von main bleiben unveraendert. */
.wv main{position:relative;overflow:clip}
.wv [id]{scroll-margin-top:88px}
.wv-container{max-width:1240px;margin:0 auto;padding:0 32px}
.wv-container--schmal{max-width:860px}
.wv section{position:relative}

/* ── Typografie ─────────────────────────────────────────────────────────────────────────────── */
.wv-label{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#d9a962;margin-bottom:20px}
.wv-label::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,rgba(217,169,98,0),rgba(217,169,98,.7))}
.wv-kopf--mitte .wv-label::after{content:'';width:34px;height:1px;background:linear-gradient(270deg,rgba(217,169,98,0),rgba(217,169,98,.7))}
/* Ueberschriften (NF-R86): Titel und Fliesstext haben getrennte Breiten. Der Kopf darf bis 1160 px
   (begrenzt durch den Container) - kurze und mittlere Titel stehen auf dem Desktop in einer Zeile, der
   Absatz darunter behaelt seine 620 px. Zweiteilige Titel tragen ihre Satzteile als .wv-satz: reicht die
   Zeile nicht, bricht der Titel zwischen den Saetzen statt mitten im Gedanken; schmal umbricht jeder
   Satzteil fuer sich. "balance" nur bei zentrierten Koepfen (symmetrisches Schriftbild), linksbuendig
   "pretty" (volle erste Zeile, keine Einzelwoerter). */
.wv-titel{font-size:clamp(2.2rem,4.1vw,3.7rem);line-height:1.07;letter-spacing:-.01em;color:var(--wv-weiss);text-wrap:pretty;margin-bottom:18px}
.wv-kopf--mitte .wv-titel{text-wrap:balance}
.wv-satz{display:inline-block;text-wrap:inherit}
.wv-text{font-size:17px;line-height:1.8;color:var(--wv-text-2);max-width:620px}
.wv-kopf{max-width:1160px;margin-bottom:56px}
.wv-kopf--mitte{margin-left:auto;margin-right:auto;text-align:center}

/* Sectiontrennung: eine feine, weich auslaufende Linie an der Oberkante - an der Inhaltsbreite
   ausgerichtet, ueber den weichen Hintergrundverlaeufen (die bleiben unveraendert). */
.wv{--wv-inhalt:min(1176px,calc(100% - 64px))}
.wv-orte::after,.wv-show::after,.wv-warum::after,.wv-display::after,.wv-umfang::after,.wv-ablauf::after,
.wv-preise::after,.wv-serien::after,.wv-anfrage::after,.wv-faq::after{content:'';position:absolute;top:0;left:50%;width:var(--wv-inhalt);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(236,240,246,.11) 22%,rgba(236,240,246,.11) 78%,rgba(255,255,255,0))}
.wv-kopf--mitte .wv-text{margin:0 auto}

/* ── Einblendungen (nur mit Skript; ohne Skript ist alles sichtbar) ─────────────────────────── */
.js:not(.wv-sofort) .wv-ein,.js:not(.wv-sofort) .wv-ablegen,.js:not(.wv-sofort) .wv-klappen{opacity:0}
@media (prefers-reduced-motion: reduce){.js .wv-ein,.js .wv-ablegen,.js .wv-klappen{opacity:1}}
/* Ohne Skript: Formatknoepfe haetten keine Wirkung - ausblenden (die Videos selbst bleiben abspielbar). */
html:not(.js) .wv-varianten{display:none}

/* ══ Bildschirme ═══════════════════════════════════════════════════════════════════════════════
   Ein Rahmen, der sich zuruecknimmt: schmale Einfassung, feine Kante, Tiefe nur ueber den Schatten.
   Die Videoflaeche fuellt ihr Seitenverhaeltnis exakt (object-fit: cover auf identischem Format -
   nichts wird gestreckt oder beschnitten). */
.wv-screen{position:relative;margin:0;padding:7px;border-radius:18px;background:linear-gradient(160deg,#171d28,#0a0d14 55%,#0d1119);
  border:1px solid var(--wv-rahmen);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.wv-screen-flaeche{position:relative;overflow:hidden;border-radius:12px;background:#05070b;isolation:isolate}
.wv-screen-flaeche video{display:block;width:100%;height:100%;object-fit:cover;background:#05070b}
.wv-screen--tv .wv-screen-flaeche,.wv-screen--display .wv-screen-flaeche{aspect-ratio:16/9}
.wv-screen--phone{padding:8px;border-radius:30px}
.wv-screen--phone .wv-screen-flaeche{aspect-ratio:9/16;border-radius:23px}
.wv-screen--phone::before{content:'';position:absolute;top:14px;left:50%;width:42px;height:5px;margin-left:-21px;border-radius:5px;background:rgba(0,0,0,.55);z-index:2;pointer-events:none}
.wv-screen-zeile{display:flex;align-items:center;gap:10px;margin-top:12px;padding:0 4px;font-size:12.5px;letter-spacing:.04em;color:var(--wv-text-3)}

/* Wiedergabeknopf (setzt js/werbevideos-medien.js). Unaufdringlich in der Ecke; gross in der Mitte,
   solange ein Video auf eine ausdrueckliche Wiedergabe wartet (Autoplay blockiert / reduzierte Bewegung). */
.wv-play{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(8,11,17,.55);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.72;transition:opacity .25s,transform .25s var(--wv-ease),background .25s,border-color .25s}
.wv-play:hover,.wv-play:focus-visible{opacity:1;background:rgba(8,11,17,.8);border-color:rgba(227,191,130,.7)}
.wv-play:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:3px}
.wv-play svg{width:15px;height:15px}
.wv-play[hidden],video[data-wartet="true"] ~ .wv-play{display:none}
.wv-video{cursor:pointer}
.wv-play .wv-i-pause{display:none}
.wv-play[data-laeuft="true"] .wv-i-play{display:none}
.wv-play[data-laeuft="true"] .wv-i-pause{display:block}
.wv-screen--phone .wv-play,.wv-geraet--phone .wv-play,.wv-geraet--stele .wv-play{right:10px;bottom:10px;width:36px;height:36px}
/* Hochformate: oben rechts - dort ist in allen 9:16-Demos Ruhe, unten stehen CTA und Preise */
.wv-hero-phone .wv-play{top:8px;right:8px;width:30px;height:30px}
.wv-hero-phone .wv-play svg{width:12px;height:12px}
.wv-werk-phone .wv-play,.wv-geraet--phone .wv-play,.wv-geraet--stele .wv-play,[data-format="9x16"] .wv-play{top:14px;right:14px;bottom:auto}
.wv-hero-phone .wv-play{bottom:auto}
.wv-geraet--phone .wv-play,.wv-geraet--stele .wv-play{top:8px;right:8px;width:28px;height:28px}
.wv-geraet--phone .wv-play svg,.wv-geraet--stele .wv-play svg{width:11px;height:11px}
.wv [data-warten="true"] > .wv-play{top:auto;right:50%;bottom:50%;transform:translate(50%,50%);width:64px;height:64px;opacity:1;background:rgba(8,11,17,.62);border-color:rgba(227,191,130,.55)}
.wv [data-warten="true"] > .wv-play svg{width:22px;height:22px}

/* ══ Goldene Timeline (wiederkehrendes Detail) ═══════════════════════════════════════════════ */
.wv-zeitleiste{--fortschritt:0;position:relative}
.wv-zeit-spur{position:relative;height:1px;background:var(--wv-linie-leise)}
.wv-zeit-fuell{position:absolute;left:0;top:0;height:1px;width:calc(var(--fortschritt) * 100%);background:linear-gradient(90deg,rgba(201,160,99,.5),var(--wv-gold-hell))}
.wv-zeit-kopf{position:absolute;top:50%;left:calc(var(--fortschritt) * 100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--wv-gold-hell);box-shadow:0 0 0 4px rgba(227,191,130,.12),0 0 16px rgba(227,191,130,.55)}
.wv-zeit-phasen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px}
.wv-zeit-phasen li{position:relative;padding:0 10px 0 12px;border-left:1px solid var(--wv-linie-leise);transition:border-color .4s}
.wv-zeit-phasen li::before{content:'';position:absolute;left:-3px;top:-20px;width:5px;height:5px;border-radius:50%;background:var(--wv-linie)}
.wv-zeit-phasen strong{display:block;font:600 11px/1.3 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--wv-text-3);transition:color .4s}
.wv-zeit-phasen span{display:block;margin-top:3px;font-size:12.5px;color:var(--wv-text-3);opacity:.8}
.wv-zeit-phasen li.ist-aktiv{border-left-color:var(--wv-gold)}
.wv-zeit-phasen li.ist-aktiv strong{color:var(--wv-gold-hell)}
.wv-zeitleiste--schlicht .wv-zeit-spur{height:2px;border-radius:2px;background:rgba(255,255,255,.08)}
.wv-zeitleiste--schlicht .wv-zeit-fuell{height:2px;border-radius:2px}

/* ══ LICHTREGION (Hero + Formate) ══════════════════════════════════════════════════════════════
   Huelle dokumentfest; oben beginnt sie mit der Seite (kein Einlauf noetig), unten laeuft sie ueber
   --wv-zone weich aus. Darin klebt das Canvas am Fensterkopf. Kein Ein-/Ausschalten per Sichtbarkeit,
   keine scrollabhaengige Maske - die Maske ist an die Huelle gebunden. */
.wv-licht{position:relative;isolation:isolate}
.wv-licht-huelle{position:absolute;left:0;right:0;top:0;bottom:calc(-1 * (100vh + var(--wv-zone)));z-index:-1;pointer-events:none;
  --wv-vor:calc(100vh + var(--wv-zone));
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--wv-vor) - var(--wv-zone)),rgba(0,0,0,0.957) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.875),rgba(0,0,0,0.844) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.75),rgba(0,0,0,0.684) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.625),rgba(0,0,0,0.5) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.5),rgba(0,0,0,0.316) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.375),rgba(0,0,0,0.156) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.25),rgba(0,0,0,0.043) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.125),transparent calc(100% - var(--wv-vor)),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - var(--wv-vor) - var(--wv-zone)),rgba(0,0,0,0.957) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.875),rgba(0,0,0,0.844) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.75),rgba(0,0,0,0.684) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.625),rgba(0,0,0,0.5) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.5),rgba(0,0,0,0.316) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.375),rgba(0,0,0,0.156) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.25),rgba(0,0,0,0.043) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.125),transparent calc(100% - var(--wv-vor)),transparent 100%)}
.wv-licht-canvas{position:sticky;top:0;display:block;width:100%;height:100vh;opacity:.86;
  background:#0a0f1a url('../animation/websites-licht/poster.webp') 50% 50%/cover no-repeat}
@media (max-aspect-ratio:4/5){.wv-licht-canvas{background-image:url('../animation/websites-licht/poster-hoch.webp')}}
/* Korn gegen Tonwertstufen (wie auf der Websites-Seite) und zwei ruhende goldene Lichtakzente -
   an die Huelle gebunden, also dokumentfest; sie wandern mit dem Inhalt, nicht mit dem Film. */
.wv-licht-huelle::after{content:'';position:absolute;inset:0;pointer-events:none;background:url('../animation/websites-licht/korn.png') 0 0/160px 160px repeat}
.wv-licht-huelle::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38vw 34vw at 78% 44vh,rgba(201,160,99,.12),rgba(201,160,99,0) 70%),
             radial-gradient(30vw 30vw at 8% 150vh,rgba(201,160,99,.08),rgba(201,160,99,0) 70%),
             radial-gradient(60vw 50vw at 50% 0,rgba(4,7,12,.5),rgba(4,7,12,0) 70%)}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   ABSCHLUSS-HINTERGRUND (NF-R87) - eigene Lichtfolge hinter #varianten, #cta und #details.
   Aufbau wie die obere Region, aber mit Ein- UND Ausblendung: die Huelle reicht oben und unten
   um Fensterhoehe + Zone ueber die Region hinaus, die dokumentfeste Maske laeuft ueber
   --wv-zone auf und wieder ab. Der Film ist eine eigene Aufnahme (werbevideos-abschluss),
   nicht der Film von oben; seine Spitzen sind beim Aufbereiten weich begrenzt, damit Formular
   und FAQ nie ueberstrahlt werden. Gezeichnet wird von js/websites-licht.js (zweite Instanz).
   ════════════════════════════════════════════════════════════════════════════════════════════ */
.wv-abschluss{position:relative;isolation:isolate}
.wv-abschluss-huelle{position:absolute;left:0;right:0;z-index:-1;pointer-events:none;
  --wv-vor:calc(100vh + var(--wv-zone));
  top:calc(-1 * var(--wv-vor));bottom:calc(-1 * var(--wv-vor));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--wv-vor) - var(--wv-zone)),rgba(0,0,0,0.043) calc(var(--wv-vor) - var(--wv-zone) * 0.875),rgba(0,0,0,0.156) calc(var(--wv-vor) - var(--wv-zone) * 0.75),rgba(0,0,0,0.316) calc(var(--wv-vor) - var(--wv-zone) * 0.625),rgba(0,0,0,0.5) calc(var(--wv-vor) - var(--wv-zone) * 0.5),rgba(0,0,0,0.684) calc(var(--wv-vor) - var(--wv-zone) * 0.375),rgba(0,0,0,0.844) calc(var(--wv-vor) - var(--wv-zone) * 0.25),rgba(0,0,0,0.957) calc(var(--wv-vor) - var(--wv-zone) * 0.125),#000 var(--wv-vor),#000 calc(100% - var(--wv-vor) - var(--wv-zone)),rgba(0,0,0,0.957) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.875),rgba(0,0,0,0.844) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.75),rgba(0,0,0,0.684) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.625),rgba(0,0,0,0.5) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.5),rgba(0,0,0,0.316) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.375),rgba(0,0,0,0.156) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.25),rgba(0,0,0,0.043) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.125),transparent calc(100% - var(--wv-vor)),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,transparent calc(var(--wv-vor) - var(--wv-zone)),rgba(0,0,0,0.043) calc(var(--wv-vor) - var(--wv-zone) * 0.875),rgba(0,0,0,0.156) calc(var(--wv-vor) - var(--wv-zone) * 0.75),rgba(0,0,0,0.316) calc(var(--wv-vor) - var(--wv-zone) * 0.625),rgba(0,0,0,0.5) calc(var(--wv-vor) - var(--wv-zone) * 0.5),rgba(0,0,0,0.684) calc(var(--wv-vor) - var(--wv-zone) * 0.375),rgba(0,0,0,0.844) calc(var(--wv-vor) - var(--wv-zone) * 0.25),rgba(0,0,0,0.957) calc(var(--wv-vor) - var(--wv-zone) * 0.125),#000 var(--wv-vor),#000 calc(100% - var(--wv-vor) - var(--wv-zone)),rgba(0,0,0,0.957) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.875),rgba(0,0,0,0.844) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.75),rgba(0,0,0,0.684) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.625),rgba(0,0,0,0.5) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.5),rgba(0,0,0,0.316) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.375),rgba(0,0,0,0.156) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.25),rgba(0,0,0,0.043) calc(100% - var(--wv-vor) - var(--wv-zone) * 0.125),transparent calc(100% - var(--wv-vor)),transparent 100%)}
.wv-abschluss-canvas{position:sticky;top:0;display:block;width:100%;height:100vh;opacity:.86;
  background:#0a0f1a url('../animation/werbevideos-abschluss/poster.webp') 50% 50%/cover no-repeat}
@media (max-aspect-ratio:4/5){.wv-abschluss-canvas{background-image:url('../animation/werbevideos-abschluss/poster-hoch.webp')}}
/* Dasselbe Korn wie oben (eine Datei, kein zweites Bild) gegen Tonwertstufen. */
.wv-abschluss-huelle::after{content:'';position:absolute;inset:0;pointer-events:none;background:url('../animation/websites-licht/korn.png') 0 0/160px 160px repeat}
@media (prefers-reduced-motion: reduce){.wv-abschluss-canvas{opacity:.7}}

/* ══ 01 HERO ═══════════════════════════════════════════════════════════════════════════════════ */
.wv-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:132px 0 88px}
.wv-hero-inner{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(40px,5vw,84px);align-items:center;max-width:1400px;width:100%;margin:0 auto;padding:0 40px}
.wv-hero h1{font-size:clamp(2.9rem,5.2vw,5.3rem);line-height:1.02;letter-spacing:-.02em;color:var(--wv-weiss);text-wrap:balance;margin-bottom:24px}
.wv-hero-sub{font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.8;color:var(--wv-text);max-width:520px;margin-bottom:34px}
.wv-hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.wv-hero-ctas .btn-primary{box-shadow:0 12px 32px rgba(160,120,64,.32)}
.wv-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--wv-text-3)}
.wv-meta span:not(:last-child)::after{content:'·';margin:0 12px;color:var(--wv-gold)}
.wv-hero-buehne{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.wv-hero-tv{grid-area:1 / 1;width:100%}
.wv-hero-phone{grid-area:1 / 1;align-self:end;justify-self:start;position:relative;width:24%;min-width:140px;max-width:220px;margin:0 0 calc(83px - 31.4%) -10%;z-index:2;box-shadow:0 40px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.wv-hero-phone .wv-screen-zeile{position:absolute;left:0;right:0;top:100%;justify-content:center;white-space:nowrap}
.wv-hero-tv .wv-screen-zeile{justify-content:flex-end}
.wv-hero-zeit{grid-area:2 / 1;margin:30px 4px 0 22%}
/* Scrollhinweis (NF-R86): kein absolut gesetztes Element mehr, sondern ein eigener Platz im Fluss des
   Hero - unter der Buehne, nie auf ihr. Das Telefon und seine Zeile ragen per negativem Rand ueber die
   Buehne hinaus; im zweispaltigen Layout (dort liegt das Telefon unter der Seitenmitte) reserviert die
   Buehne diesen Ueberstand deshalb als eigenen Innenabstand. Die Bewegungen sind darin eingerechnet:
   Die Parallaxe hebt das Telefon nur an (weg vom Hinweis), die Einblendung startet 22 px tiefer und
   bleibt im Sicherheitsabstand. Sichtbar ist der Hinweis nur, wo Buehne und Hinweis zusammen ins
   Fenster passen - sonst laege er unter der Falz und wuerde den Hero nur verlaengern.
   Ueberstand unter der Buehne = 31,4 % (Telefonrand) - 30 px (Abstand) - ca. 54 px (Zeitleiste)
   - 83 px (Randkonstante) + 33 px (Zeile unter dem Telefon) + 24 px Luft  =  31,4 % - 110 px. */
.wv-weiter{position:relative;flex:0 0 auto;display:none;width:26px;height:42px;margin:18px auto 0;border-radius:14px;border:1px solid rgba(255,255,255,.18)}
.wv-weiter span{position:absolute;left:50%;top:9px;width:2px;height:8px;margin-left:-1px;border-radius:2px;background:var(--wv-gold-hell);animation:wvWeiter 2.4s var(--wv-ease) infinite}
.wv-weiter:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:4px}
@media (min-width:1181px) and (max-width:1999px) and (min-height:880px),(min-width:2000px) and (min-height:990px){
  .wv-hero{padding-bottom:28px}
  .wv-hero-inner{margin-top:auto;margin-bottom:auto}
  .wv-hero-buehne{padding-bottom:max(0px,calc(31.4% - 110px))}
  .wv-weiter{display:block}
}
/* Einspaltig (Tablet hochkant): Telefon links, Hinweis mittig - kein waagerechter Konflikt, nur die
   Zeitleiste liegt darueber und steht im Fluss. */
@media (min-width:769px) and (max-width:1180px) and (min-height:1180px){
  .wv-hero{padding-bottom:28px}
  .wv-hero-inner{margin-top:auto;margin-bottom:auto}
  .wv-weiter{display:block;margin-top:30px}
}
@keyframes wvWeiter{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:1;transform:translateY(12px)}100%{opacity:0;transform:translateY(14px)}}

/* ══ 02 DREI KERNFORMATE ═══════════════════════════════════════════════════════════════════════ */
.wv-formate{padding:120px 0 150px}
.wv-modul{display:grid;align-items:center;gap:clamp(40px,6vw,96px);margin-top:120px}
.wv-modul:first-of-type{margin-top:40px}
.wv-modul-nr{font:600 12px/1.4 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--wv-gold);margin-bottom:14px}
.wv-modul-titel{font-size:clamp(2.6rem,4.4vw,4rem);line-height:1;color:var(--wv-weiss);margin-bottom:14px}
.wv-modul-claim{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.3;color:var(--wv-gold-hell);margin-bottom:18px}
.wv-modul-desc{font-size:16px;line-height:1.8;color:var(--wv-text-2);max-width:520px;margin-bottom:26px}
.wv-fakten{display:grid;gap:14px;margin-bottom:26px;max-width:520px}
.wv-fakten div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.wv-fakten dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wv-text-3);padding-top:2px}
.wv-fakten dd{font-size:14.5px;line-height:1.6;color:var(--wv-text)}
.wv-varianten{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.wv-var{min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.02);color:var(--wv-text-2);
  font:600 12.5px/1 'Inter',sans-serif;letter-spacing:.06em;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.wv-var:hover{border-color:rgba(227,191,130,.5);color:var(--wv-weiss)}
.wv-var[aria-pressed="true"]{border-color:var(--wv-gold);background:rgba(201,160,99,.12);color:var(--wv-gold-hell)}
.wv-var:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:3px}
.wv-modul-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:600;color:var(--wv-gold-hell);transition:gap .25s var(--wv-ease),color .2s}
.wv-modul-cta:hover{gap:16px;color:#f1d29d}
.wv-modul-cta:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:4px;border-radius:4px}

/* A Micro Clip: kompakt - ein Telefon, eine Botschaft, ein 5-Sekunden-Ring */
.wv-modul--micro{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.wv-modul--micro .wv-modul-medien{position:relative;display:flex;justify-content:center;align-items:center;min-height:540px}
.wv-micro-screen{width:min(300px,62%);transition:width .5s var(--wv-ease)}
.wv-micro-screen[data-format="1x1"]{width:min(420px,86%)}
.wv-micro-screen[data-format="1x1"] .wv-screen-flaeche{aspect-ratio:1/1}
.wv-micro-screen[data-format="16x9"]{width:min(560px,100%);border-radius:18px;padding:7px}
.wv-micro-screen[data-format="16x9"] .wv-screen-flaeche{aspect-ratio:16/9;border-radius:12px}
.wv-micro-screen[data-format="16x9"]::before,.wv-micro-screen[data-format="1x1"]::before{display:none}
.wv-micro-screen[data-format="1x1"]{border-radius:22px}
.wv-micro-screen[data-format="1x1"] .wv-screen-flaeche{border-radius:15px}
.wv-sekunden{--fortschritt:0;position:absolute;right:max(0px,calc(50% - 250px));top:30px;width:92px;height:92px}
.wv-sekunden svg{width:100%;height:100%;transform:rotate(-90deg)}
.wv-sek-spur{fill:none;stroke:rgba(201,160,99,.18);stroke-width:1.5}
.wv-sek-fuell{fill:none;stroke:var(--wv-gold-hell);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:calc(339.3 * (1 - var(--fortschritt)))}
.wv-sek-zahl{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:26px;font-size:13px;letter-spacing:.08em;color:var(--wv-text-3)}
.wv-sek-zahl strong{font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:600;color:var(--wv-weiss);margin-right:2px;line-height:1}

/* B Short Ad: breite Leinwand mit drei klar erkennbaren Phasen */
.wv-modul--short{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.wv-short-screen{transition:width .5s var(--wv-ease),margin .5s var(--wv-ease)}
.wv-short-screen[data-format="9x16"]{width:min(320px,52%);margin:0 auto;padding:8px;border-radius:30px}
.wv-short-screen[data-format="9x16"] .wv-screen-flaeche{aspect-ratio:9/16;border-radius:23px}
.wv-zeitleiste--gross{margin-top:34px}
.wv-zeitleiste--gross .wv-zeit-phasen strong{font-size:12px}

/* C Display Loop (NF-R86): links das grosse Display, rechts die komplette Produktgruppe. Die Buehne
   .wv-loop-feld ist immer so hoch wie das Querformat (Containereinheit: Breite - Rahmen, mal 9/16, plus
   Rahmen). Das Hochformat wird in diese Hoehe eingepasst - kein Layoutsprung, die rechte Spalte bleibt
   stehen. Einspaltig (<= 1024 px) waechst das Hochformat wie bisher frei nach unten. */
.wv-modul--loop{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:clamp(36px,4.5vw,72px)}
.wv-modul--loop .wv-modul-medien{position:relative;min-width:0;container-type:inline-size}
.wv-screen--display{padding:10px;border-radius:14px;background:linear-gradient(180deg,#12161d,#07090d);border-color:rgba(255,255,255,.07)}
.wv-screen--display .wv-screen-flaeche{border-radius:4px}
.wv-loop-feld{display:flex;justify-content:center;align-items:center;height:calc((100cqw - 22px) * .5625 + 22px)}
.wv-loop-screen{width:100%;margin:0 auto}
.wv-loop-screen[data-format="9x16"]{width:auto;height:100%}
.wv-loop-screen[data-format="9x16"] .wv-screen-flaeche{height:100%;width:auto;aspect-ratio:9/16}
.wv-modul--loop .wv-modul-text .wv-fakten div{grid-template-columns:112px minmax(0,1fr)}
.wv-loopkreis{--szene:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin:26px auto 0}
.wv-loopkreis ol{list-style:none;display:flex;gap:10px;counter-reset:s}
.wv-loopkreis li{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08);transition:border-color .4s,background .4s}
.wv-loopkreis li b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--wv-linie-leise);font:600 11px/1 'Inter',sans-serif;color:var(--wv-text-3);transition:all .4s}
.wv-loopkreis li span{font-size:12.5px;color:var(--wv-text-3);transition:color .4s}
.wv-loopkreis li.ist-aktiv{border-color:rgba(201,160,99,.45);background:rgba(201,160,99,.07)}
.wv-loopkreis li.ist-aktiv b{border-color:var(--wv-gold);color:var(--wv-gold-hell)}
.wv-loopkreis li.ist-aktiv span{color:var(--wv-weiss)}
.wv-loop-zurueck{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--wv-text-3)}
.wv-loop-zurueck svg{width:17px;height:17px;color:var(--wv-gold)}

/* ══ 03 EINSATZORTE ════════════════════════════════════════════════════════════════════════════ */
.wv-orte{padding:120px 0 130px;background:linear-gradient(180deg,rgba(11,17,28,0) 0,rgba(11,17,28,.7) 18%,rgba(11,17,28,.7) 82%,rgba(11,17,28,0) 100%)}
/* NF-R86: Links Bedienhilfe, Liste und Beschreibung als eine Spalte - Auswahl und Erklaerung stehen
   zusammen. Nicht mehr sticky: Liste + Beschreibung sind etwa so hoch wie die Wand, Kleben braechte
   nichts und schnitte in niedrigen Fenstern die Beschreibung ab. */
.wv-orte-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.wv-orte-steuer{display:flex;flex-direction:column;min-width:0}
.wv-orte-hilfe{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--wv-text-3)}
.wv-orte-hilfe::before{content:'';flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--wv-gold);box-shadow:0 0 0 4px rgba(201,160,99,.12)}
.wv-orte-hilfe-mobil{display:none}
html:not(.js) .wv-orte-hilfe{display:none}
.wv-orte-liste{display:flex;flex-direction:column;gap:8px}
.wv-orte-liste [role="tab"]{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:58px;padding:11px 46px 11px 18px;
  border:1px solid rgba(255,255,255,.085);border-radius:12px;background:rgba(255,255,255,.018);color:var(--wv-text-2);text-align:left;cursor:pointer;font-family:'Inter',sans-serif;
  transition:background .25s,border-color .25s,color .25s}
.wv-orte-liste [role="tab"]::before{content:'';position:absolute;left:-1px;top:12px;bottom:12px;width:2px;border-radius:2px;background:transparent;transition:background .25s}
.wv-orte-liste [role="tab"]::after{content:'';position:absolute;right:20px;top:50%;width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  color:var(--wv-text-3);transform:rotate(-45deg);transition:transform .25s var(--wv-ease),color .25s}
.wv-orte-liste [role="tab"] strong{font-size:15.5px;font-weight:600;color:var(--wv-text)}
.wv-orte-liste [role="tab"] span{font-size:13px;color:var(--wv-text-3)}
.wv-orte-liste [role="tab"]:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.wv-orte-liste [role="tab"]:hover::after{color:var(--wv-weiss);transform:translateX(3px) rotate(-45deg)}
.wv-orte-liste [role="tab"][aria-selected="true"]{border-color:rgba(201,160,99,.55);background:rgba(201,160,99,.09)}
.wv-orte-liste [role="tab"][aria-selected="true"]::before{background:var(--wv-gold-hell)}
.wv-orte-liste [role="tab"][aria-selected="true"]::after{color:var(--wv-gold-hell)}
.wv-orte-liste [role="tab"][aria-selected="true"] strong{color:var(--wv-weiss)}
.wv-orte-liste [role="tab"]:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:3px}
.wv-orte-buehne{min-width:0}
/* Bildschirmwand: vier Geraete mit nachvollziehbaren Groessen - Browser und Menueboard quer, Telefon
   und Stele hochkant. Das aktive Geraet ist hell und spielt, die anderen stehen ruhig als Poster. */
.wv-wand{position:relative;display:grid;grid-template-columns:1.25fr .5fr .52fr;grid-template-rows:auto auto;gap:58px 24px;align-items:center;padding:6px 0 78px}
.wv-geraet{position:relative;margin:0;transition:opacity .5s var(--wv-ease),filter .5s var(--wv-ease)}
.wv-geraet figcaption{position:absolute;left:-20px;right:-20px;top:calc(100% + 12px);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wv-text-3);text-align:center;white-space:nowrap;transition:color .3s}
.wv-geraet--browser{grid-column:1;grid-row:1;border-radius:12px;background:#0d1219;border:1px solid var(--wv-rahmen);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.wv-browser-leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.06);border-radius:11px 11px 0 0;background:#10161f}
.wv-browser-leiste i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.14)}
.wv-browser-leiste span{flex:1;margin-left:10px;max-width:260px;height:18px;border-radius:9px;background:rgba(255,255,255,.05);font-size:10.5px;line-height:18px;padding:0 10px;color:var(--wv-text-3);overflow:hidden;white-space:nowrap}
.wv-geraet--browser .wv-screen-flaeche{aspect-ratio:16/9;border-radius:0 0 11px 11px}
.wv-geraet--tv{grid-column:1;grid-row:2;padding:9px;border-radius:10px;background:linear-gradient(180deg,#12161d,#07090d);border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.wv-geraet--tv .wv-screen-flaeche{aspect-ratio:16/9;border-radius:3px}
.wv-geraet--phone{grid-column:2;grid-row:1 / span 2;padding:7px;border-radius:26px;background:linear-gradient(160deg,#171d28,#0a0d14);border:1px solid var(--wv-rahmen);box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.wv-geraet--phone .wv-screen-flaeche{aspect-ratio:9/16;border-radius:20px}
.wv-geraet--stele{grid-column:3;grid-row:1 / span 2;padding:8px;border-radius:8px;background:linear-gradient(180deg,#141922,#07090d);border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.wv-geraet--stele .wv-screen-flaeche{aspect-ratio:9/16;border-radius:3px}
.wv-geraet--stele::after{content:'';position:absolute;left:36%;right:36%;top:100%;height:30px;border:1px solid rgba(255,255,255,.06);border-top:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#141922,#0b0e14)}
.wv-geraet--stele figcaption{top:calc(100% + 42px)}
/* Inaktive Geraete bleiben gut erkennbar (leicht zurueckgenommen, nicht "deaktiviert") und sind
   selbst waehlbar: Klick auf Geraet oder Videoflaeche waehlt den Ort, den das Geraet gerade zeigt. Der
   runde Knopf bleibt allein fuer Play/Pause (inaktive Geraete haben keinen). */
.wv-wand .wv-geraet{opacity:.7;filter:saturate(.72) brightness(.84);cursor:pointer}
.wv-wand .wv-video{cursor:inherit}
.wv-wand .wv-geraet:hover,.wv-wand .wv-geraet:has(.wv-geraet-wahl:focus-visible){opacity:.94;filter:saturate(.92) brightness(.97)}
.wv-wand[data-aktiv="browser"] .wv-geraet--browser,.wv-wand[data-aktiv="tv"] .wv-geraet--tv,
.wv-wand[data-aktiv="phone"] .wv-geraet--phone,.wv-wand[data-aktiv="stele"] .wv-geraet--stele{opacity:1;filter:none;cursor:default;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(227,191,130,.42),0 0 48px -10px rgba(201,160,99,.4)}
.wv-wand[data-aktiv="browser"] .wv-geraet--browser figcaption,.wv-wand[data-aktiv="tv"] .wv-geraet--tv figcaption,
.wv-wand[data-aktiv="phone"] .wv-geraet--phone figcaption,.wv-wand[data-aktiv="stele"] .wv-geraet--stele figcaption{color:var(--wv-gold-hell)}
/* Tastaturweg zur Geraeteauswahl: die Beschriftung unter dem Geraet wird ein Knopf (setzt das Skript) */
.wv-geraet-wahl{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:4px 12px;border:1px solid transparent;border-radius:999px;background:transparent;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.wv-geraet:hover .wv-geraet-wahl,.wv-geraet-wahl:hover{border-color:rgba(255,255,255,.18);color:var(--wv-weiss)}
.wv-geraet-wahl[aria-pressed="true"]{border-color:rgba(201,160,99,.45);background:rgba(201,160,99,.08);color:var(--wv-gold-hell);cursor:default}
.wv-geraet-wahl:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:2px}
.wv-geraet figcaption:has(.wv-geraet-wahl){top:calc(100% + 7px)}
.wv-geraet--stele figcaption:has(.wv-geraet-wahl){top:calc(100% + 37px)}
/* Stele steht ganz rechts: ist die Spalte schmaler als ihre Beschriftung, laeuft diese nach links aus,
   nicht ueber den Containerrand */
.wv-geraet--stele figcaption{left:auto;right:-8px;min-width:calc(100% + 16px);width:max-content;text-align:center}
/* Beschreibung direkt unter der Liste. Bei jedem Wechsel ein kurzer, ruhiger Lichtimpuls (visueller
   Fokus, ohne den Tastaturfokus zu versetzen). */
.wv-orte-info{position:relative;margin-top:22px;padding:22px 22px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.022);transition:border-color .5s,background .5s}
.wv-orte-info::before{content:'';position:absolute;left:22px;right:22px;top:-1px;height:1px;background:linear-gradient(90deg,rgba(227,191,130,0),rgba(227,191,130,.7) 50%,rgba(227,191,130,0));opacity:.55;transition:opacity .5s}
.wv-orte-info.ist-neu{border-color:rgba(201,160,99,.45);background:rgba(201,160,99,.07)}
.wv-orte-info.ist-neu::before{opacity:1}
.wv-orte-info h3{font-size:clamp(1.55rem,2.1vw,1.95rem);color:var(--wv-weiss);margin-bottom:10px}
.wv-orte-info p{font-size:15.5px;line-height:1.72;color:var(--wv-text-2)}
.wv-orte-format{margin-top:12px;font-size:12px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--wv-gold)!important}

/* ══ 04 SHOWCASE ═══════════════════════════════════════════════════════════════════════════════ */
.wv-show{padding:140px 0 150px;background:linear-gradient(180deg,rgba(4,7,12,0) 0,var(--wv-navy-0) 16%,var(--wv-navy-0) 84%,rgba(4,7,12,0) 100%)}
.wv-show::before{content:'';position:absolute;left:50%;top:18%;width:min(1100px,90vw);height:60%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,160,99,.07),rgba(201,160,99,0) 70%)}
.wv-show-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(32px,4vw,64px);align-items:start}
.wv-show-player{min-width:0}
.wv-show-rahmen{position:relative;display:flex;justify-content:center;align-items:center;height:min(640px,72vh);min-height:420px}
.wv-show-schein{position:absolute;left:8%;right:8%;top:8%;bottom:8%;width:84%;height:84%;object-fit:cover;border-radius:40px;filter:blur(70px) saturate(1.25);opacity:.34;pointer-events:none;transition:opacity .5s}
.wv-show-rahmen[data-format="16x9"] .wv-show-schein{opacity:.18}
.wv-screen--show{position:relative}
.wv-screen--show{height:100%;max-width:100%;padding:8px;border-radius:30px}
.wv-screen--show .wv-screen-flaeche{height:100%;max-width:100%;aspect-ratio:9/16;border-radius:23px}
.wv-show-rahmen[data-format="1x1"] .wv-screen--show{border-radius:20px}
.wv-show-rahmen[data-format="1x1"] .wv-screen-flaeche{aspect-ratio:1/1;border-radius:13px}
.wv-show-rahmen[data-format="16x9"] .wv-screen--show{height:auto;width:100%;padding:7px;border-radius:18px}
.wv-show-rahmen[data-format="16x9"] .wv-screen-flaeche{height:auto;width:100%;aspect-ratio:16/9;border-radius:12px}
.wv-show-steuer{display:flex;align-items:center;gap:24px;margin-top:24px}
.wv-show-steuer .wv-zeitleiste{flex:1}
.wv-varianten--show{margin:0}
.wv-show-liste{display:flex;flex-direction:column;gap:10px}
.wv-show-liste [role="tab"]{display:flex;align-items:center;gap:16px;width:100%;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.015);color:var(--wv-text);text-align:left;cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .25s,background .25s}
.wv-show-liste [role="tab"] img{flex:0 0 auto;width:96px;height:72px;object-fit:cover;border-radius:8px;opacity:.75;transition:opacity .25s}
.wv-show-liste [role="tab"] strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;line-height:1.15;color:var(--wv-weiss)}
.wv-show-liste [role="tab"] em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;letter-spacing:.06em;color:var(--wv-text-3)}
.wv-show-liste [role="tab"]:hover{border-color:rgba(255,255,255,.14)}
.wv-show-liste [role="tab"][aria-selected="true"]{border-color:rgba(201,160,99,.5);background:rgba(201,160,99,.06)}
.wv-show-liste [role="tab"][aria-selected="true"] img{opacity:1}
.wv-show-liste [role="tab"]:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:2px}
.wv-show-meta{margin-top:28px;display:grid;gap:0}
.wv-show-meta div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}
.wv-show-meta dt{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wv-text-3);padding-top:3px}
.wv-show-meta dd{font-size:14px;line-height:1.55;color:var(--wv-text)}

/* ══ 05 WARUM KURZ FUNKTIONIERT ════════════════════════════════════════════════════════════════ */
.wv-warum{padding:140px 0;background:linear-gradient(180deg,rgba(11,17,28,0) 0,var(--wv-navy-2) 14%,var(--wv-navy-2) 86%,rgba(11,17,28,0) 100%)}
/* NF-R86: Kopfspalte breiter, damit der Titel an der Satzgrenze bricht statt dreizeilig zu werden */
.wv-warum-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(40px,4vw,72px);align-items:start}
.wv-warum-kopf{position:sticky;top:130px}
.wv-aussagen{list-style:none;display:flex;flex-direction:column}
.wv-aussage{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 18px;padding:26px 0;border-top:1px solid rgba(255,255,255,.07)}
.wv-aussage:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.wv-aussage-nr{grid-row:1 / span 2;font:600 12px/1 'Inter',sans-serif;letter-spacing:.14em;color:var(--wv-gold);padding-top:14px}
.wv-aussage p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.12;color:var(--wv-text-2)}
.wv-aussage p strong{font-weight:600;color:var(--wv-weiss)}
.wv-aussage-sub{font-size:15px;line-height:1.7;color:var(--wv-text-3)}
/* Anatomie eines Short Ads: drei echte Standbilder, darunter die 15-Sekunden-Timeline */
.wv-anatomie{margin:110px 0 0}
.wv-anatomie-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;letter-spacing:.02em;color:var(--wv-text-2);margin-bottom:22px}
.wv-anatomie-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wv-anatomie-bilder img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.07)}
.wv-anatomie-zeit{--fortschritt:0;margin-top:26px}
.wv-anatomie-spur{position:relative;height:2px;border-radius:2px;background:var(--wv-linie-leise)}
.wv-anatomie-spur i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--fortschritt) * 100%);border-radius:2px;background:linear-gradient(90deg,rgba(201,160,99,.6),var(--wv-gold-hell))}
.wv-anatomie-spur::before,.wv-anatomie-spur::after{content:'';position:absolute;top:-5px;width:1px;height:12px;background:var(--wv-linie)}
.wv-anatomie-spur::before{left:33.333%}.wv-anatomie-spur::after{left:66.666%}
.wv-anatomie-marken{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;letter-spacing:.08em;color:var(--wv-text-3)}
.wv-anatomie-bilder img{transition:filter .45s var(--wv-ease),border-color .45s}
.wv-anatomie--aktiv .wv-anatomie-bilder img{filter:brightness(.55) saturate(.6)}
.wv-anatomie--aktiv .wv-anatomie-bilder .ist-aktiv img{filter:none;border-color:rgba(201,160,99,.55)}
.wv-anatomie--aktiv .wv-anatomie-phasen strong{color:var(--wv-text-3);transition:color .45s}
.wv-anatomie--aktiv .wv-anatomie-phasen .ist-aktiv strong{color:var(--wv-gold-hell)}
.wv-anatomie-phasen{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.wv-anatomie-phasen strong{display:block;font:600 12px/1.3 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--wv-gold-hell);margin-bottom:6px}
.wv-anatomie-phasen span{font-size:14.5px;line-height:1.65;color:var(--wv-text-2)}

/* ══ 06 DISPLAY- UND MENUE-LOOPS ═══════════════════════════════════════════════════════════════ */
.wv-display{padding:140px 0 130px}
.wv-display::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 38%,rgba(201,160,99,.09),rgba(201,160,99,0) 70%)}
.wv-szene{position:relative;margin:0 auto;max-width:1320px}
.wv-szene-bild{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.07);box-shadow:0 60px 120px -50px rgba(0,0,0,.9);background:#0a0d12}
.wv-szene-innen{position:relative}
.wv-szene-bild img{width:100%;height:auto}
/* Glasflaeche exakt aus dem 4K-Motiv ausgemessen (x 1227-2609, y 234-966 von 3840 x 2160,
   Ausschnitt 568/0 2700 x 1519). Frontal, keine Perspektive noetig. Das 16:9-Video fuellt die etwas
   breitere Glasflaeche in der Breite; oben/unten je ~3 % Rand im Loop, der dort nichts traegt. */
.wv-szene-glas{position:absolute;left:24.4074%;top:15.4049%;width:51.1852%;height:48.1896%;overflow:hidden;background:#000;
  box-shadow:0 0 60px 6px rgba(201,160,99,.10)}
.wv-szene-glas video{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.94) contrast(1.02)}
.wv-szene-spiegel{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.025) 100%)}
.wv-szene > figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;letter-spacing:.04em;color:var(--wv-text-3)}
.wv-szenenfolge{--szene:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 24px;margin:40px auto 0;max-width:1100px}
.wv-szenenfolge ol{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:0;counter-reset:x}
.wv-szenenfolge li{position:relative;display:flex;flex-direction:column;gap:3px;padding:10px 26px 10px 18px;border-top:1px solid rgba(255,255,255,.1);transition:border-color .4s}
.wv-szenenfolge li::after{content:'→';position:absolute;right:4px;top:18px;font-size:13px;color:var(--wv-text-3)}
.wv-szenenfolge li:last-child::after{content:''}
.wv-szenenfolge li span{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--wv-text-3)}
.wv-szenenfolge li strong{font-family:'Cormorant Garamond',serif;font-size:1.28rem;font-weight:600;color:var(--wv-text-2);transition:color .4s}
.wv-szenenfolge li.ist-aktiv{border-top-color:var(--wv-gold-hell)}
.wv-szenenfolge li.ist-aktiv strong{color:var(--wv-weiss)}
.wv-szenenfolge-zurueck{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--wv-gold-hell)}
.wv-szenenfolge-zurueck svg{width:18px;height:18px}
.wv-display-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:72px}
.wv-display-block h3{font-size:1.55rem;color:var(--wv-weiss);margin-bottom:14px}
.wv-display-block p{font-size:15px;line-height:1.75;color:var(--wv-text-2)}
.wv-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.wv-chips li{padding:7px 13px;border-radius:999px;border:1px solid rgba(201,160,99,.28);font-size:13px;color:var(--wv-text)}
.wv-display-cta{text-align:center;margin-top:56px}

/* ══ 07 WAS NORTHFRAME UEBERNIMMT ══════════════════════════════════════════════════════════════ */
.wv-umfang{padding:140px 0;background:linear-gradient(180deg,rgba(11,17,28,0) 0,var(--wv-navy-2) 14%,var(--wv-navy-2) 86%,rgba(11,17,28,0) 100%)}
.wv-werkbank{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.6fr);gap:clamp(20px,3vw,40px);align-items:stretch;
  padding:34px;border-radius:20px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,.005))}
.wv-werk-spalte{display:flex;flex-direction:column;min-width:0}
.wv-werk-label{font:600 11px/1.4 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--wv-gold);margin-bottom:18px}
.wv-material{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px;flex:1}
.wv-mat{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.wv-mat figcaption{font-size:11.5px;color:var(--wv-text-3)}
.wv-mat--bild{grid-row:1 / span 2}
.wv-mat--bild img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;border:1px dashed rgba(255,255,255,.18)}
.wv-mat-logo,.wv-mat-notiz{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;border-radius:10px;border:1px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.02);text-align:center}
.wv-mat-logo{flex-direction:column;gap:2px;font:600 10.5px/1.5 'Inter',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f6efe4}
.wv-mat-logo span{color:#d9a860}
.wv-mat-notiz{font-family:'Cormorant Garamond',serif;font-size:1.15rem;line-height:1.3;color:var(--wv-weiss);flex-direction:column}
.wv-mat-notiz span{font-family:'Inter',sans-serif;font-size:11px;color:var(--wv-text-3)}
.wv-schnitt{--fortschritt:0;position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 18px 22px;border-radius:12px;background:#080c13;border:1px solid rgba(255,255,255,.06)}
.wv-schnitt-lineal{display:flex;justify-content:space-between;margin-left:62px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:10.5px;color:var(--wv-text-3)}
.wv-schnitt-spur{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;height:30px}
.wv-schnitt-spur em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--wv-text-3)}
.wv-clip{position:absolute;left:calc(62px + (100% - 62px) * var(--a));width:calc((100% - 62px) * (var(--b) - var(--a)));top:4px;bottom:4px;border-radius:6px;
  display:flex;align-items:center;padding:0 10px;overflow:hidden;white-space:nowrap;font-style:normal;font-size:11.5px;font-weight:500;color:#0b0f17}
.wv-clip--bild{background:linear-gradient(90deg,rgba(201,160,99,.28),rgba(201,160,99,.18));border:1px solid rgba(201,160,99,.4);background-image:url('../werbevideos/roh-kfz-quer.webp');background-size:auto 100%;background-repeat:repeat-x}
/* NF-R88: zweite Einstellung des Clips (fertiges Fahrzeug) als eigener Bildclip in der Spur. */
.wv-clip--bild2{background-image:url('../werbevideos/kfz-fertig-quer.webp')}
.wv-clip--text{background:#e9dcc4}
.wv-clip--zeile{background:#bfb3a0}
.wv-clip--marke{background:var(--wv-gold)}
.wv-schnitt-kopf{position:absolute;top:10px;bottom:10px;left:calc(18px + 62px + (100% - 36px - 62px) * var(--fortschritt));width:1px;background:var(--wv-gold-hell);box-shadow:0 0 12px rgba(227,191,130,.6)}
.wv-schnitt-kopf::before{content:'';position:absolute;top:-4px;left:-5px;border:5px solid transparent;border-top-color:var(--wv-gold-hell)}
.wv-werk-ergebnis{align-items:center}
.wv-werk-phone{width:min(210px,100%)}
.wv-leistungen{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:64px}
.wv-leistungen li{padding:20px 0 22px;border-top:1px solid rgba(255,255,255,.08)}
.wv-leistungen strong{display:block;font-size:15px;font-weight:600;color:var(--wv-weiss);margin-bottom:5px}
.wv-leistungen span{font-size:13.5px;line-height:1.6;color:var(--wv-text-3)}

/* ══ 08 ABLAUF ═════════════════════════════════════════════════════════════════════════════════
   Fuenf Schritte an einer duennen Goldlinie. Punktmitten liegen exakt auf der Linie; die Linie
   laeuft von der ersten zur letzten Punktmitte und fuellt sich mit dem Scrollen (--fuell). */
.wv-ablauf{padding:140px 0 130px}
.wv-schritte{--fuell:0;--punkt:44px;list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 20px}
.wv-schritte-linie{position:absolute;top:calc(var(--punkt) / 2);left:calc((100% - 80px) / 10);right:calc((100% - 80px) / 10);height:1px;background:var(--wv-linie-leise);pointer-events:none}
.wv-schritte-linie i{position:absolute;left:0;top:0;height:1px;width:calc(var(--fuell) * 100%);background:linear-gradient(90deg,rgba(201,160,99,.5),var(--wv-gold-hell));box-shadow:0 0 10px rgba(227,191,130,.35)}
.wv-schritt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.wv-schritt-punkt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:var(--punkt);height:var(--punkt);border-radius:50%;
  background:var(--bg);border:1px solid var(--wv-linie);font:600 12px/1 'Inter',sans-serif;letter-spacing:.06em;color:var(--wv-text-3);transition:border-color .4s,color .4s,box-shadow .4s}
.wv-schritt.ist-erreicht .wv-schritt-punkt{border-color:var(--wv-gold-hell);color:var(--wv-gold-hell);box-shadow:0 0 0 5px rgba(227,191,130,.08)}
.wv-schritt-vorschau{position:relative;width:100%;max-width:180px;aspect-ratio:16/10;margin:28px 0 22px;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:#0a0f18;overflow:hidden}
.wv-schritt h3{font-size:1.55rem;color:var(--wv-weiss);margin-bottom:8px}
.wv-schritt p{font-size:14px;line-height:1.65;color:var(--wv-text-2);max-width:220px}
/* kleine Vorschauen, rein gestaltet */
.wv-vs-anfrage{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 16px}
.wv-vs-anfrage i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}
.wv-vs-anfrage i:nth-child(2){width:72%}.wv-vs-anfrage i:nth-child(3){width:86%}
.wv-vs-anfrage b{display:block;width:46%;height:12px;margin-top:4px;border-radius:6px;background:var(--wv-gold)}
.wv-vs-konzept{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:16px 12px;align-content:center}
.wv-vs-konzept i{aspect-ratio:4/3;border-radius:4px;border:1px solid rgba(201,160,99,.35);background:rgba(201,160,99,.06)}
.wv-vs-entwurf img{width:100%;height:100%;object-fit:cover;opacity:.75}
.wv-vs-entwurf span{position:absolute;right:8px;top:8px;padding:2px 7px;border-radius:999px;background:rgba(8,11,17,.75);font:600 9.5px/1.5 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--wv-gold-hell)}
.wv-vs-korrektur i{position:absolute;left:12px;right:12px;top:50%;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.wv-vs-korrektur b{position:absolute;top:calc(50% - 20px);left:calc(12px + (100% - 24px) * var(--x));width:16px;height:14px;margin-left:-8px;border-radius:4px 4px 4px 0;background:var(--wv-gold)}
.wv-vs-lieferung{display:flex;align-items:center;justify-content:center;gap:8px}
.wv-vs-lieferung i{position:relative;display:block;border:1px solid rgba(201,160,99,.45);border-radius:3px;background:rgba(201,160,99,.06)}
.wv-vs-lieferung i:nth-child(1){width:22px;height:39px}.wv-vs-lieferung i:nth-child(2){width:34px;height:34px}.wv-vs-lieferung i:nth-child(3){width:58px;height:33px}

/* ══ 09 PREISE ═════════════════════════════════════════════════════════════════════════════════
   Bewusst ruhig: keine bewegten Hintergruende, gleich hohe Spalten, klare Anfrageknoepfe. */
.wv-preise{padding:150px 0 140px;background:linear-gradient(180deg,rgba(11,17,28,0) 0,var(--wv-navy-2) 12%,var(--wv-navy-2) 88%,rgba(11,17,28,0) 100%)}
.wv-preis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;perspective:1400px}
.wv-preis{position:relative;display:flex;flex-direction:column;padding:38px 32px 32px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(7,11,19,.72);transition:border-color .3s,transform .35s var(--wv-ease),box-shadow .35s}
.wv-preis:hover{border-color:rgba(201,160,99,.35);transform:translateY(-4px);box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
.wv-preis--betont{border-color:rgba(201,160,99,.4);background:linear-gradient(160deg,rgba(201,160,99,.1),rgba(7,11,19,.8) 55%)}
.wv-preis-name{font:600 12px/1.4 'Inter',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--wv-gold-hell)}
.wv-preis-dauer{margin-top:4px;font-size:13px;color:var(--wv-text-3)}
.wv-preis-betrag{margin-top:26px;font-family:'Cormorant Garamond',serif;font-size:3rem;font-weight:600;line-height:1;color:var(--wv-weiss)}
.wv-preis-betrag span{font-size:1.3rem;font-weight:500;color:var(--wv-text-2);margin-right:4px}
.wv-preis-betrag--anfrage{font-size:2.2rem;line-height:1.1}
.wv-preis-sub{margin-top:8px;font-size:13px;color:var(--wv-text-3)}
.wv-preis-ideal{margin-top:24px;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.03);font-size:13.5px;line-height:1.55;color:var(--wv-text)}
.wv-preis-ideal span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wv-text-3);margin-bottom:3px}
.wv-preis-liste{list-style:none;margin:22px 0 26px;flex:1}
.wv-preis-liste li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:14px;line-height:1.5;color:var(--wv-text-2)}
.wv-preis-liste li:last-child{border-bottom:0}
.wv-preis-liste li::before{content:'';flex:0 0 auto;width:14px;height:8px;margin-top:6px;border-left:1.5px solid var(--wv-gold-hell);border-bottom:1.5px solid var(--wv-gold-hell);transform:rotate(-45deg) scale(.8)}
.wv-preis-hinweis{margin:-10px 0 22px;font-size:12.5px;line-height:1.55;color:var(--wv-text-3)}
.wv-preis-cta{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;background:var(--gold);color:#fff;font-size:14.5px;font-weight:600;transition:background .25s,transform .25s,box-shadow .25s}
.wv-preis-cta:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 26px rgba(160,120,64,.3)}
.wv-preis-cta--ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--wv-weiss)}
.wv-preis-cta--ghost:hover{background:rgba(201,160,99,.1);border-color:rgba(201,160,99,.5);box-shadow:none}
.wv-preis-cta:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:3px}
.wv-preis-extra{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px;margin-top:40px;padding:20px 24px;border-radius:14px;border:1px solid rgba(255,255,255,.07)}
.wv-preis-extra-titel{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wv-gold)}
.wv-preis-extra ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.wv-preis-extra li{font-size:14px;color:var(--wv-text)}
.wv-preis-extra li::before{content:'+';margin-right:7px;color:var(--wv-gold-hell)}
.wv-preis-notiz{max-width:720px;margin:28px auto 0;text-align:center;font-size:13.5px;line-height:1.65;color:var(--wv-text-3)}
.wv-ustg{text-align:center;font-size:.8rem;color:var(--wv-text-3);margin-top:14px;opacity:.85}

/* ══ 10 VARIANTEN, SERIEN & UPDATES ════════════════════════════════════════════════════════════ */
.wv-serien{padding:140px 0 130px}
.wv-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;perspective:1400px}
.wv-kachel{position:relative;display:flex;flex-direction:column;padding:26px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.008));transition:border-color .3s}
.wv-kachel:hover{border-color:rgba(201,160,99,.3)}
.wv-kachel h3{font-size:1.5rem;color:var(--wv-weiss);margin:auto 0 8px}
.wv-kachel p{font-size:14px;line-height:1.65;color:var(--wv-text-2)}
.wv-kachel--formate{grid-column:span 2;grid-row:span 2}
.wv-kachel--serie{grid-column:span 2}
.wv-bento > .wv-kachel:nth-child(5),.wv-bento > .wv-kachel:nth-child(6){grid-column:span 2}
.wv-kachel-bild{margin-bottom:24px}
.wv-drei-formate{display:flex;flex-wrap:wrap;align-content:center;align-items:flex-end;justify-content:center;gap:16px;padding:18px 0 8px;flex:1}
.wv-drei-formate figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.wv-drei-formate img{border-radius:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px -20px rgba(0,0,0,.8);height:auto}
.wv-drei-formate figure:nth-child(1) img{width:clamp(64px,5.6vw,96px)}
.wv-drei-formate figure:nth-child(2) img{width:clamp(96px,8.6vw,150px)}
.wv-drei-formate figure:nth-child(3) img{width:clamp(150px,14vw,240px)}
.wv-drei-formate figcaption{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--wv-gold-hell)}
/* NF-R87: Der Angebotswechsel zeigt dieselbe Gestaltung mit zwei Botschaften nebeneinander -
   ein Formatwechsel allein waere keine inhaltliche Aenderung. */
.wv-wechsel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}
.wv-wechsel figure{margin:0;display:flex;flex-direction:column;gap:8px}
.wv-wechsel img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid rgba(255,255,255,.08)}
.wv-wechsel figcaption{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--wv-gold-hell)}
.wv-wechsel-pfeil{font-size:19px;line-height:1;color:var(--wv-gold-hell)}
.wv-kachel-symbol--serie{align-items:center}
.wv-kachel-symbol--serie i{width:24px;height:32px}
.wv-kachel-symbol{display:flex;align-items:flex-end;gap:6px;height:54px;margin-bottom:22px}
.wv-kachel-symbol i{display:block;width:20px;height:28px;border-radius:3px;border:1px solid rgba(201,160,99,.45);background:rgba(201,160,99,.06)}
.wv-kachel-symbol i.gross{width:54px;height:40px;background:rgba(201,160,99,.16)}
.wv-kachel-symbol--saison{align-items:center;gap:10px;font:600 11px/1 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--wv-text-2)}
.wv-kachel-symbol--saison span{padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.wv-kachel-symbol--saison b{font-size:20px;color:var(--wv-gold-hell)}
.wv-kachel-symbol--szenen{align-items:center}
.wv-kachel-symbol--szenen i{width:36px;height:24px}
.wv-kachel-symbol--szenen i.neu{border-color:var(--wv-gold-hell);background:rgba(227,191,130,.25);transform:translateY(-6px)}
.wv-kachel-symbol--rhythmus{align-items:center;gap:0}
.wv-kachel-symbol--rhythmus i{width:9px;height:9px;border-radius:50%;border:0;background:var(--wv-gold)}
.wv-kachel-symbol--rhythmus i+i{margin-left:24px;position:relative}
.wv-kachel-symbol--rhythmus i+i::before{content:'';position:absolute;right:9px;top:4px;width:24px;height:1px;background:var(--wv-linie)}
.wv-serien-cta{text-align:center;margin-top:48px}

/* ══ 11 FAQ ════════════════════════════════════════════════════════════════════════════════════ */
.wv-faq{padding:112px 0 120px}   /* seit NF-R86 letzter Bereich vor dem Footer */
.wv-faq-liste{border-top:1px solid rgba(255,255,255,.08)}
.wv-frage{border-bottom:1px solid rgba(255,255,255,.08)}
.wv-frage summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:18px 4px;cursor:pointer;list-style:none;
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;line-height:1.3;color:var(--wv-weiss);transition:color .2s}
.wv-frage summary::-webkit-details-marker{display:none}
.wv-frage summary::after{content:'';flex:0 0 auto;width:12px;height:12px;border-right:1.5px solid var(--wv-gold-hell);border-bottom:1.5px solid var(--wv-gold-hell);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--wv-ease)}
.wv-frage[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.wv-frage summary:hover{color:var(--wv-gold-hell)}
.wv-frage summary:focus-visible{outline:2px solid var(--wv-gold-hell);outline-offset:2px;border-radius:4px}
.wv-antwort{padding:0 4px 24px}
.wv-antwort p{font-size:15.5px;line-height:1.8;color:var(--wv-text-2);max-width:700px}

/* ══ 12 ANFRAGE ════════════════════════════════════════════════════════════════════════════════
   Kartenstil des Kurzformulars wie auf Startseite und Websites-Unterseite, ergaenzt um Auswahl-Chips. */
.wv-anfrage{padding:120px 0 112px}
.wv-anfrage::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 70% 50%,rgba(201,160,99,.08),rgba(201,160,99,0) 70%)}
/* NF-R86: Textspalte nimmt den ganzen Rest (vorher nur 85 % davon) - der Titel passt auf dem Desktop in eine Zeile */
.wv-anfrage-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,530px);gap:clamp(40px,4vw,64px);align-items:start}
.wv-anfrage-text{position:sticky;top:130px}
.wv-vertrauen{list-style:none;margin:30px 0 0;display:flex;flex-direction:column;gap:12px}
.wv-vertrauen li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--wv-text)}
.wv-vertrauen svg{flex:0 0 auto;width:18px;height:18px;color:#d9a962}
#cta .kurzform{position:relative;margin:0;padding:44px 34px 30px;border-radius:22px;overflow:hidden;background:rgba(7,12,19,.8);border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 80px rgba(2,5,10,.4)}
#cta .kurzform::before{content:'';position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent 4%,rgba(228,170,100,.75) 49%,transparent 94%)}
#cta .field-row{display:grid;gap:18px;border:0;min-width:0}
#cta .field-row.cols2{grid-template-columns:1fr 1fr}
#cta .field-row+.field-row{margin-top:24px}
#cta .field{position:relative;display:flex;flex-direction:column;min-width:0}
#cta .kurzform label,#cta .kurzform legend{display:block;font-size:13px;line-height:16px;font-weight:600;color:rgb(150,157,172);margin-bottom:9px}
#cta .kurzform .req{color:rgb(190,145,80);margin-left:.28em}
#cta .kurzform .opt{color:rgb(108,116,130);font-weight:400;margin-left:.28em}
#cta .kurzform input[type="text"],#cta .kurzform input[type="email"],#cta .kurzform input[type="tel"],#cta .kurzform textarea{box-sizing:border-box;width:100%;margin:0;font:400 15px/1.4 'Inter',sans-serif;
  color:rgb(226,231,238);background:rgba(200,215,235,.045);border:1px solid rgba(255,255,255,.10);border-radius:10px;outline:none;appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
#cta .kurzform input[type="text"],#cta .kurzform input[type="email"],#cta .kurzform input[type="tel"]{height:50px;padding:0 16px}
#cta .kurzform textarea{height:110px;min-height:92px;max-height:260px;padding:13px 16px;line-height:22px;resize:vertical}
#cta .kurzform input::placeholder,#cta .kurzform textarea::placeholder{color:rgb(96,106,120);opacity:1}
#cta .kurzform input:focus,#cta .kurzform textarea:focus{border-color:rgba(228,170,100,.55);box-shadow:0 0 0 3px rgba(228,170,100,.12)}
#cta .kurzform .field.has-error input,#cta .kurzform .field.has-error textarea{border-color:var(--danger-strong)}
#cta .kurzform .field-error{display:none;position:absolute;left:0;top:100%;margin-top:4px;font-size:12px;line-height:1.3;color:var(--danger)}
#cta .kurzform .field.has-error .field-error{display:block}
/* Auswahl-Chips: echte Checkboxen/Radios, nur optisch als Chips; Tastatur und Screenreader wie gewohnt */
.wv-chipwahl{padding:0;margin:0}
.wv-chipgruppe{display:flex;flex-wrap:wrap;gap:8px}
.wv-chipgruppe label{position:relative;display:inline-flex!important;margin:0!important;cursor:pointer}
.wv-chipgruppe input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.wv-chipgruppe span{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(200,215,235,.03);
  font:500 13.5px/1.2 'Inter',sans-serif;color:rgb(190,197,210);transition:border-color .15s,background .15s,color .15s}
.wv-chipgruppe input:hover+span{border-color:rgba(255,255,255,.25)}
.wv-chipgruppe input:checked+span{border-color:rgba(228,170,100,.7);background:rgba(201,160,99,.14);color:#f1d8ad}
.wv-chipgruppe input[type="checkbox"]:checked+span::before{content:'';width:9px;height:5px;margin-right:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-1px)}
.wv-chipgruppe input:focus-visible+span{outline:2px solid rgb(228,170,100);outline-offset:2px}
#cta .kurzform-footer{margin-top:30px}
#cta .kurzform-submit{display:flex;width:100%;height:55px;align-items:center;justify-content:center;gap:9px;padding:0;border:0;border-radius:999px;
  background:linear-gradient(180deg,rgb(176,131,71),rgb(152,111,59));color:#fff;font:600 16px/1 'Inter',sans-serif;cursor:pointer;box-shadow:0 0 26px rgba(228,170,100,.30);transition:box-shadow .2s,background .2s}
#cta .kurzform-submit::after{content:'';flex:none;width:16px;height:14px;background:#fff;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h14M9 1l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h14M9 1l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
#cta .kurzform-submit:hover{background:linear-gradient(180deg,rgb(185,138,75),rgb(160,117,62));box-shadow:0 0 26px rgba(228,170,100,.45)}
#cta .kurzform-submit:hover::after{transform:translateX(3px)}
#cta .kurzform-submit:focus-visible{outline:2px solid rgb(190,145,80);outline-offset:3px}
#cta .kurzform-submit:disabled{cursor:progress;opacity:.8}
#cta .kurzform-submit:disabled::after{display:none}
#cta .trust-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:17px;font-size:13px;color:rgb(95,106,120)}
#cta .anf-schloss{width:11px;height:13px;fill:none;stroke:rgb(190,145,80);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;overflow:visible;display:block}
#cta .anf-trenn{height:0;margin:24px 0 0;border:0;border-top:1px solid rgba(255,255,255,.07)}
#cta .kurzform-privacy{margin-top:20px;font-size:12.5px;line-height:1.6;color:rgb(110,116,124);text-align:center;text-wrap:balance}
#cta .kurzform-privacy a,#cta .kurzform-alt a{color:rgb(200,154,88);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
#cta .kurzform-privacy a:hover,#cta .kurzform-alt a:hover{color:rgb(226,182,112)}
#cta .kurzform-privacy a:focus-visible,#cta .kurzform-alt a:focus-visible{outline:2px solid rgb(190,145,80);outline-offset:3px;border-radius:3px}
#cta .kurzform-meldung{margin:16px 0 0;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;color:#f3b0a8;background:var(--danger-bg);border:1px solid var(--danger-border);text-align:center}
#cta .kurzform-meldung[hidden]{display:none}
#cta .kurzform-alt{position:relative;margin:36px 0 0;text-align:center;font-size:14.5px;color:rgb(130,140,155)}
@keyframes spin{to{transform:rotate(360deg)}}
#cta .spinner{width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
/* Erfolgsmeldung (wie Startseite / Websites-Unterseite) */
.success-screen{display:none;position:fixed;inset:0;z-index:2000;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px;background:var(--bg)}
.success-screen.show{display:flex;animation:fadeInBg .4s ease}
.success-screen[hidden]{display:none}
@keyframes fadeInBg{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.success-icon-wrap{width:80px;height:80px;border-radius:50%;background:var(--gold-glow);border:1px solid var(--border-gold);display:flex;align-items:center;justify-content:center;margin:0 auto 32px;animation:scaleIn .55s .15s cubic-bezier(.34,1.56,.64,1) both}
.success-icon{width:34px;height:34px;color:var(--gold-light)}
.success-title{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:20px;animation:slideUp .4s .3s ease both;outline:none}
.success-text{color:var(--text-muted);font-size:17px;line-height:1.9;max-width:460px;margin:0 auto 44px;animation:slideUp .4s .4s ease both}
.success-home{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border-gold);color:var(--gold-light);font:500 14px/1 'Inter',sans-serif;padding:14px 28px;min-height:44px;border-radius:var(--r-pill);transition:all .2s;animation:slideUp .4s .5s ease both;cursor:pointer}
.success-home:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.success-home:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* ══ Reduzierte Bewegung ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .wv-weiter span{animation:none;opacity:1;transform:translateY(6px)}
  .wv-geraet,.wv-micro-screen,.wv-short-screen,.wv-loop-screen,.wv-preis{transition:none}
  .success-screen.show,.success-icon-wrap,.success-title,.success-text,.success-home{animation:none}
  #cta .spinner{animation-duration:1.6s}
}

@media (min-width:2000px){
  .wv-hero-inner{max-width:1640px}
  .wv-container{max-width:1400px}
  .wv{--wv-inhalt:1336px}
  .wv-hero h1{font-size:5.8rem}
}
/* ══ Responsive ════════════════════════════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .wv-hero-inner{grid-template-columns:minmax(0,1fr);gap:56px;max-width:900px;padding:0 32px}
  .wv-hero-text{max-width:720px}
  .wv-hero-phone{margin-left:-1%}
  .wv-hero-zeit{margin-left:28%}
  .wv-leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wv-werkbank{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .wv-werk-zeit{grid-column:1 / -1;order:3}
  .wv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023.98px){   /* NF-R114: 1024 px gehoert zur Tablet-Stufe ab 1024 (zweispaltig wie 1025-1180) */
  .wv-modul--micro,.wv-modul--short,.wv-modul--loop{grid-template-columns:minmax(0,1fr)}
  .wv-modul--short .wv-modul-medien{order:-1}
  .wv-modul--micro .wv-modul-medien{min-height:0}
  .wv-loop-feld{display:block;height:auto}
  .wv-loop-screen[data-format="9x16"]{width:auto;height:auto;max-width:360px}
  .wv-loop-screen[data-format="9x16"] .wv-screen-flaeche{height:auto;width:100%}
  /* Einsatzorte bleiben zweispaltig (schmalere Liste) - untereinander laege die ganze Wand unter der
     Beschreibung und passte quer auf dem Tablet nicht mehr mit der Auswahl ins Bild */
  .wv-orte-grid{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:40px}
  .wv-orte-liste [role="tab"]{min-height:54px;padding-top:9px;padding-bottom:9px}
  .wv-show-grid{grid-template-columns:minmax(0,1fr)}
  .wv-show-liste{flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .wv-show-liste [role="tab"]{flex:0 0 auto;width:auto;min-width:250px}
  .wv-warum-grid{grid-template-columns:minmax(0,1fr)}
  .wv-warum-kopf{position:static}
  .wv-display-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .wv-preis-grid{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
  .wv-anfrage-grid{grid-template-columns:minmax(0,1fr);max-width:620px;margin:0 auto}
  .wv-anfrage-text{position:static}
}
@media (max-width:900px){
  /* Einsatzorte untereinander: Liste waagerecht, darunter Beschreibung, dann nur das aktive Geraet */
  .wv-orte-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .wv-orte-liste{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:3px 3px 8px;margin:-3px -3px 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .wv-orte-liste [role="tab"]{flex:0 0 auto;width:auto;min-width:190px;padding-right:18px}
  .wv-orte-liste [role="tab"]::before,.wv-orte-liste [role="tab"]::after{display:none}
  .wv-orte-info{margin-top:14px}
  .wv-orte-hilfe-wand{display:none}
  .wv-orte-hilfe-mobil{display:inline}
  .wv-wand{display:block;min-height:0}
  .wv-wand .wv-geraet{display:none}
  .wv-wand[data-aktiv="browser"] .wv-geraet--browser,.wv-wand[data-aktiv="tv"] .wv-geraet--tv{display:block;margin:0}
  .wv-wand[data-aktiv="phone"] .wv-geraet--phone,.wv-wand[data-aktiv="stele"] .wv-geraet--stele{display:block;width:min(224px,62%);margin:0 auto}
  .wv-geraet--browser figcaption{position:static}
  .wv-schritte{grid-template-columns:minmax(0,1fr);gap:0;max-width:560px;margin:0 auto}
  .wv-schritte-linie{top:22px;bottom:22px;left:22px;right:auto;width:1px;height:auto}
  .wv-schritte-linie i{width:1px;height:calc(var(--fuell) * 100%)}
  .wv-schritt{display:grid;grid-template-columns:44px minmax(0,1fr) 120px;grid-template-rows:auto auto;column-gap:22px;align-items:start;text-align:left;padding-bottom:44px}
  .wv-schritt-punkt{grid-row:1 / span 2}
  .wv-schritt h3{grid-column:2;margin-top:6px}
  .wv-schritt p{grid-column:2;max-width:none}
  .wv-schritt-vorschau{grid-column:3;grid-row:1 / span 2;margin:0;max-width:120px}
}
@media (max-width:767px){   /* NF-R114: vorher 768 - exakt 768 px erhielt Smartphone-Regeln ohne den Smartphone-Block; 768 ist jetzt Tablet */
  .wv-container{padding:0 20px}
  .wv{--wv-inhalt:calc(100% - 40px)}
  .wv-hero{padding:104px 0 64px;min-height:0}
  .wv-hero-inner{padding:0 20px;gap:44px}
  .wv-hero h1{font-size:clamp(2.45rem,10vw,3.4rem)}
  .wv-hero-ctas{flex-direction:column;align-items:stretch}
  .wv-hero-ctas a{width:100%}
  .wv-meta{margin-top:26px;font-size:11.5px;letter-spacing:.12em}
  .wv-hero-buehne{margin:0 -8px}
  .wv-hero-phone{width:30%;min-width:0;margin:0 0 calc(53px - 42%) 0}
  .wv-hero-phone .wv-screen-zeile{display:none}
  .wv-hero-zeit{margin:22px 0 0 36%}
  .wv-zeit-phasen span{display:none}
  .wv-weiter{display:none}
  .wv-formate,.wv-orte,.wv-show,.wv-warum,.wv-display,.wv-umfang,.wv-ablauf,.wv-preise,.wv-serien,.wv-faq,.wv-anfrage{padding:88px 0}
  .wv-kopf{margin-bottom:40px}
  .wv-text{font-size:16px}
  .wv-modul{margin-top:92px;gap:32px}
  .wv-fakten div{grid-template-columns:minmax(0,1fr);gap:4px}
  .wv-micro-screen{width:min(230px,62%)}
  .wv-sekunden{right:0;top:0;width:64px;height:64px}
  .wv-sek-zahl{padding-top:17px;font-size:11px}
  .wv-sek-zahl strong{font-size:24px}
  .wv-short-screen[data-format="9x16"]{width:min(280px,72%)}
  .wv-loop-screen[data-format="9x16"]{max-width:280px}
  .wv-screen--display{padding:6px}
  .wv-loopkreis li span{display:none}
  .wv-loopkreis li{padding:6px}
  .wv-orte-grid{gap:32px}
  .wv-show-rahmen{height:min(560px,70vh);min-height:0}
  .wv-show-rahmen[data-format="16x9"]{height:auto}
  .wv-show-steuer{flex-direction:column;align-items:stretch;gap:18px}
  .wv-anatomie{margin-top:72px}
  .wv-anatomie-bilder{grid-template-columns:minmax(0,1fr);gap:10px}
  .wv-anatomie-phasen{grid-template-columns:minmax(0,1fr)}
  /* Schmal: Ausschnitt um den Bildschirm (Motiv 150 % breit, Bildschirm mittig) - sonst waere der Loop
     nur daumengross. Glasflaeche und Motiv bleiben ein Element, die Lage stimmt weiter exakt. */
  .wv-szene-bild{border-radius:12px;aspect-ratio:5/4}
  .wv-szene-innen{position:absolute;left:-25%;top:0;width:150%}
  .wv-szenenfolge li{padding:8px 20px 8px 10px}
  .wv-szenenfolge li strong{font-size:1.05rem}
  .wv-werkbank{grid-template-columns:minmax(0,1fr);padding:20px}
  .wv-werk-ergebnis{order:4}
  .wv-leistungen{grid-template-columns:minmax(0,1fr)}
  .wv-bento{grid-template-columns:minmax(0,1fr)}
  .wv-bento > .wv-kachel{grid-column:auto!important;grid-row:auto!important}
  #cta .kurzform{padding:32px 20px 24px;border-radius:18px}
  #cta .field-row.cols2{grid-template-columns:minmax(0,1fr);gap:24px}
  #cta .kurzform input[type="text"],#cta .kurzform input[type="email"],#cta .kurzform input[type="tel"],#cta .kurzform textarea{font-size:16px}
}
@media (max-width:520px){
  .wv-schritt{grid-template-columns:44px minmax(0,1fr)}
  .wv-schritt-vorschau{display:none}
  .wv-preis{padding:30px 22px 24px}
  .wv-show-meta div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* ══ NF-R113  SMARTPHONE-FASSUNG (bis 767 px) ═══════════════════════════════════════════════════════
   Ab 768 px gilt nichts hiervon (die aelteren Stufen 1024/900/768/520 oben greifen teils bis 768 px; dieser Block
   steht zuletzt und beginnt eine Stufe darunter). Leitlinie: jede Section beantwortet eine Frage - wiederholte
   Erklaerungen entfallen mobil, Auswahl und Ergebnis stehen unmittelbar beieinander, nichts schwebt ueber dem Text.
   Tablet- und Desktop-Inhalte bleiben vollstaendig. */
.wv-nur-schmal{display:none}
@media (max-width:767px){
  .js .wv-nur-breit{display:none}
  .js .wv-nur-schmal{display:inline}
  .wv-var-lang{display:none}

  /* Kapitel: klare Wechsel (sichtbarere Trennlinie, gleichmaessiger Abstand), innen enger. */
  .wv-formate,.wv-orte,.wv-show,.wv-warum,.wv-display,.wv-umfang,.wv-ablauf,.wv-preise,.wv-serien,.wv-faq,.wv-anfrage{padding:72px 0 64px}
  .wv-orte::after,.wv-show::after,.wv-warum::after,.wv-display::after,.wv-umfang::after,.wv-ablauf::after,
  .wv-preise::after,.wv-serien::after,.wv-anfrage::after,.wv-faq::after{background:linear-gradient(90deg,rgba(201,160,99,0),rgba(201,160,99,.4) 50%,rgba(201,160,99,0))}
  .wv-kopf{margin-bottom:26px}
  .wv-kopf--mitte{text-align:left}
  .wv-kopf--mitte .wv-label::after{display:none}
  .wv-kopf--mitte .wv-text{margin:0}
  .wv-display-cta{text-align:left}
  .wv-ustg{text-align:left;color:var(--wv-text-2);opacity:1}
  .wv-preis-notiz{text-align:left}
  .wv-titel{margin-bottom:12px}
  .wv-text{font-size:15.5px;line-height:1.65}

  /* Bildschirmrahmen: schlanke Einfassung (4 px statt 7-9 px), Formate und Bildinhalt unveraendert. */
  .wv-screen,.wv-screen--show,.wv-show-rahmen[data-format="16x9"] .wv-screen--show,.wv-micro-screen[data-format="16x9"]{padding:4px;border-radius:14px}
  .wv-screen--phone,.wv-short-screen[data-format="9x16"],.wv-show-rahmen:not([data-format="16x9"]) .wv-screen--show,.wv-micro-screen[data-format="1x1"]{padding:4px;border-radius:20px}
  .wv-screen--phone .wv-screen-flaeche,.wv-short-screen[data-format="9x16"] .wv-screen-flaeche,.wv-show-rahmen:not([data-format="16x9"]) .wv-screen-flaeche{border-radius:16px}
  .wv-screen--phone::before{top:8px;width:28px;height:4px;margin-left:-14px}
  .wv-geraet--phone{padding:4px;border-radius:20px}
  .wv-geraet--phone .wv-screen-flaeche{border-radius:16px}
  .wv-geraet--stele,.wv-geraet--tv{padding:4px}
  /* Wiedergabeknoepfe: mindestens 40 px; im Hochformat unten statt oben (oben steht in den Clips die Headline). */
  .wv-play{width:40px;height:40px}
  .wv-werk-phone .wv-play,.wv-geraet--phone .wv-play,.wv-geraet--stele .wv-play,.wv-screen--phone .wv-play,[data-format="9x16"] .wv-play{top:auto;bottom:10px;right:10px;width:40px;height:40px}
  .wv-var{min-height:40px}

  /* 01 Hero: die vier Begriffe in einer Zeile; die Leiste ueber die volle Breite, Phasen ohne Ueberlauf. */
  .wv-meta{flex-wrap:wrap;row-gap:4px;margin-top:22px;font-size:11px;letter-spacing:.04em;white-space:nowrap}   /* passt bei 320 px in eine Zeile; bei groesserer Schrift darf sie umbrechen */
  .wv-meta span:not(:last-child)::after{margin:0 5px}
  .wv-hero{padding-bottom:36px}
  /* Bildschirm und Telefon nebeneinander statt uebereinander - beide Bildinhalte vollstaendig sichtbar (das
     ueberlappende Telefon verdeckte die Headline im Bildschirm). Gleiche Bildhoehe: Spalten 76 : 24. */
  .wv-hero-buehne{grid-template-columns:minmax(0,76fr) minmax(0,24fr);column-gap:8px;align-items:start;margin:0}
  .wv-hero-tv{grid-area:1 / 1}
  .wv-hero-tv .wv-screen-zeile{justify-content:flex-start;font-size:12px}
  .wv-hero-phone{grid-area:1 / 2;align-self:start;width:auto;min-width:0;max-width:none;margin:0;box-shadow:0 20px 40px -16px rgba(0,0,0,.8)}
  .wv-hero-phone::before{display:none}
  .wv-hero-phone .wv-play{top:auto;bottom:6px;right:50%;transform:translateX(50%);width:32px;height:32px}
  .wv-hero-phone .wv-play::after{content:'';position:absolute;inset:-6px}   /* Trefferflaeche 44 px */
  .wv-hero-zeit{grid-area:2 / 1 / 3 / 3;margin:18px 0 0}
  .wv-formate{padding-top:56px}
  .wv-zeit-phasen li{min-width:0;padding:0 4px 0 8px}
  .wv-zeit-phasen strong,.wv-zeitleiste--gross .wv-zeit-phasen strong{font-size:10.5px;letter-spacing:.08em;overflow-wrap:anywhere}

  /* 02 Drei Formate: je eine Einheit - Nummer/Dauer, Titel, Kernnutzen, Formatwahl, darunter direkt das Video,
     eine Zeile typische Inhalte, Anfrage. Die lange Beschreibung und die Einsatzorte (eigene Section) entfallen. */
  .wv-modul{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:72px;text-align:left}
  .wv-modul:first-of-type{margin-top:6px}
  .wv-modul-text{display:contents}
  .wv-modul-nr{order:1;margin-bottom:6px;font-size:11px}
  .wv-modul-titel{order:2;font-size:2.4rem;margin-bottom:6px}
  .wv-modul-claim{order:3;font-size:1.3rem;margin-bottom:16px}
  .wv-modul-desc{display:none}
  .wv-modul .wv-varianten{order:4;flex-wrap:nowrap;justify-content:flex-start;margin:0 0 12px}
  .wv-modul .wv-modul-medien,.wv-modul--short .wv-modul-medien{order:5}
  .wv-modul .wv-fakten{order:6;margin:16px 0 14px;gap:0}
  .wv-modul .wv-modul-cta{order:7}
  .wv-modul .wv-fakten div,.wv-modul--loop .wv-modul-text .wv-fakten div{display:block;padding:0;border:0}
  .wv-modul .wv-fakten div:first-child,.wv-modul--loop .wv-modul-text .wv-fakten div:first-child{display:none}
  .wv-modul .wv-fakten dt{display:inline;margin-right:8px;font-size:10px}
  .wv-modul .wv-fakten dd{display:inline;font-size:14px;line-height:1.55;color:var(--wv-text-2)}
  .wv-micro-screen{width:min(170px,62%)}
  .wv-sekunden{width:56px;height:56px;right:max(0px,calc(50% - 150px))}
  .wv-modul-medien:has(.wv-micro-screen:not([data-format="9x16"])) .wv-sekunden{display:none}   /* laege sonst auf dem breiteren Bild; die Dauer steht in der Kopfzeile */
  .wv-micro-screen[data-format="1x1"]{width:min(240px,86%)}
  .wv-sek-zahl{padding-top:15px}
  .wv-sek-zahl strong{font-size:20px}
  .wv-zeitleiste--gross{margin-top:18px}
  .wv-short-screen[data-format="9x16"]{width:min(170px,62%)}
  .wv-loop-screen[data-format="9x16"]{max-width:170px}
  .wv-werk-phone{width:min(170px,62%)}
  .wv-orte-liste [role="tab"] strong{text-wrap:balance}
  .wv-loopkreis{margin-top:16px}
  .wv-loop-zurueck{display:none}

  /* 03 Einsatzorte: sechs Orte als Raster 2 x 3 (kein Seitwaertssuchen), direkt darunter das passende Geraet und die
     Kernaussage. Hochformat-Geraete stehen neben ihrer Aussage - so passt die Einheit unter die Navigation. */
  .wv-orte-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .wv-orte-steuer{display:contents}
  .wv-orte-hilfe{display:none}
  .wv-orte-liste{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0;margin:0}
  .wv-orte-liste [role="tab"]{min-width:0;width:auto;min-height:44px;justify-content:center;gap:0;padding:5px 10px 5px 12px}
  .wv-orte-liste [role="tab"] strong{font-size:13.5px;line-height:1.3}
  .wv-orte-liste [role="tab"] span{display:none}
  .wv-orte-buehne{order:2;margin-top:10px}
  .wv-orte-info{order:3;margin-top:8px;padding:0;border:0;background:none}
  .wv-orte-info::before{display:none}
  .wv-orte-info.ist-neu{background:none}
  .wv-orte-info h3{display:none}
  .wv-orte-info p{font-size:14px;line-height:1.55}
  .wv-orte-format{margin-top:6px;letter-spacing:.08em!important}
  .wv-geraet figcaption{display:none}
  .wv-wand{padding:0}
  .wv-wand[data-aktiv="phone"] .wv-geraet--phone,.wv-wand[data-aktiv="stele"] .wv-geraet--stele{width:min(100%,170px)}   /* ohne :has() mittig untereinander */
  .wv-orte-grid:has(.wv-wand[data-aktiv="phone"]),.wv-orte-grid:has(.wv-wand[data-aktiv="stele"]){grid-template-columns:118px minmax(0,1fr);column-gap:16px}
  .wv-orte-grid:has(.wv-wand[data-aktiv="phone"]) .wv-orte-liste,.wv-orte-grid:has(.wv-wand[data-aktiv="stele"]) .wv-orte-liste{grid-column:1 / -1}
  .wv-orte-grid:has(.wv-wand[data-aktiv="phone"]) .wv-orte-info,.wv-orte-grid:has(.wv-wand[data-aktiv="stele"]) .wv-orte-info{align-self:center;margin-top:14px}

  /* 04 Showcase: das Video mit seinen Kernangaben, direkt darunter die Auswahl aus vier Beispielen (2 x 2) - alles im
     normalen Seitenfluss, kein feststehender Player. Reihenfolge wie im Quelltext (Player, Liste), nur die nicht
     fokussierbaren Angaben ruecken zwischen beide. Die uebrigen drei Beispiele stehen ab 768 px (ohne Skript alle). */
  .wv-show-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:0}
  .wv-show-seite{display:contents}
  .js #bsp-salon,.js #bsp-buehne,.js #bsp-sanitaer{display:none}
  .wv-show-liste{order:3;margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:0}
  .wv-show-liste [role="tab"]{min-width:0;width:auto;align-items:flex-start;gap:0;padding:9px 10px 9px 12px}
  .wv-show-liste [role="tab"] img{display:none}
  .wv-show-liste [role="tab"] strong{font-size:1.08rem;line-height:1.15}
  .wv-show-liste [role="tab"] em{margin-top:3px;font-size:11.5px;letter-spacing:.03em}
  .wv-show-player{order:1}
  .wv-show-rahmen{height:clamp(240px,42vh,380px);height:clamp(240px,42svh,380px)}
  .wv-show-steuer{flex-direction:row;align-items:center;gap:12px;margin-top:10px}
  .wv-varianten--show{flex-wrap:nowrap}
  .wv-show-meta{order:2;margin-top:12px}
  .wv-show-meta div{display:block;padding:0 0 4px;border:0}
  .wv-show-meta div:nth-child(n+3){display:none}
  .wv-show-meta dt{display:inline;margin-right:8px}
  .wv-show-meta dd{display:inline;font-size:14px}
  /* Hochformat: die Angaben stehen neben dem Video (sonst laege das Ziel unter dem Bildrand). */
  .wv-show-grid:has(.wv-show-rahmen:not([data-format="16x9"])){grid-template-columns:auto minmax(0,1fr);column-gap:16px}
  .wv-show-grid:has(.wv-show-rahmen:not([data-format="16x9"])) .wv-show-liste{grid-column:1 / -1}
  .wv-show-grid:has(.wv-show-rahmen:not([data-format="16x9"])) .wv-show-meta{align-self:center;margin-top:0}
  .wv-show-grid:has(.wv-show-rahmen:not([data-format="16x9"])) .wv-show-meta div{padding-bottom:10px}
  .wv-show-grid:has(.wv-show-rahmen:not([data-format="16x9"])) .wv-show-meta dt{display:block;margin:0 0 2px}

  /* 05 Warum kurz: vier Kernaussagen kompakt (Nummer daneben, ohne Erlaeuterung); die Anatomie wiederholt die
     Phasen, die das Short-Ad-Modul am laufenden Video zeigt - mobil ohne sie. Keine klebende Leiste. */
  .wv-warum-grid{gap:18px}
  .wv-aussage{grid-template-columns:28px minmax(0,1fr);gap:0 8px;padding:14px 0}
  .wv-aussage-nr{padding-top:7px;font-size:11px}
  .wv-aussage p{font-size:1.45rem;line-height:1.18}
  .wv-aussage-sub{display:none}
  .wv-anatomie{display:none}

  /* 06 Display-Loops: Raumbild, Nutzen, der Hinweis zu Geraet und Format (mit "projektabhaengig ... im Angebot") und
     die Anfrage. Szenenliste, Inhaltsliste und die Wiederholung zur Schleife entfallen mobil. */
  .wv-szenenfolge{display:none}
  .wv-display-grid{margin-top:26px}
  .wv-display-block:nth-child(-n+2){display:none}
  .wv-display-block h3{font-size:1.3rem;margin-bottom:8px}
  .wv-display-block p{font-size:14.5px;line-height:1.65}
  .wv-display-cta{margin-top:24px}

  /* 07 Umfang: Werkbank vollstaendig (Material -> Timeline -> fertiger Clip - das ist, was NorthFrame uebernimmt), die
     acht Leistungen als kompakte Liste in zwei Spalten - nur die Leistung, ohne Unterzeile. */
  .wv-werkbank{gap:20px;padding:18px}
  .wv-clip{font-size:0;padding:0}
  .wv-werk-ergebnis .wv-werk-label{align-self:flex-start}   /* schmale Zeitspur: Clips als Farbbalken, die Spurnamen tragen die Erklaerung */
  .wv-leistungen{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:28px}
  .wv-leistungen li{padding:10px 0}
  .wv-leistungen strong{margin:0;font-size:13.5px;line-height:1.35}
  .wv-leistungen span{display:none}

  /* 08 Ablauf: fuenf Schritte dicht untereinander. */
  .wv-schritt{padding-bottom:26px}
  .wv-schritt:last-child{padding-bottom:0}
  .wv-schritt h3{font-size:1.35rem;margin-bottom:4px}
  .wv-schritt p{font-size:14.5px;line-height:1.55}

  /* 09 Preise: sofort sichtbar (keine Einblendung, die leere Karten stehen lassen koennte), dichter gesetzt. */
  .js:not(.wv-sofort) .wv-preis.wv-klappen{opacity:1}
  /* Die Abschluss-Lichtflaeche (.wv-abschluss-huelle) blendet in der Zone VOR #varianten ein und lag als spaetere,
     isolierte Ebene ueber dem Ende der Preise (Preisnotiz, MwSt.) - mobil wirkte das wie eine leere dunkle Flaeche.
     Die Preise stehen jetzt darueber; das Licht laeuft weiter dahinter ein. */
  .wv-preise{position:relative;z-index:1}
  .wv-preis-betrag{margin-top:16px}
  .wv-preis-ideal{margin-top:16px;padding:10px 12px}
  .wv-preis-liste{margin:14px 0 20px}
  .wv-preis-liste li{padding:6px 0;font-size:13.5px}
  .wv-preis-extra{justify-content:flex-start;margin-top:28px;padding:16px 18px}

  /* 10 Varianten: die zwei Bildkacheln (Seitenverhaeltnisse, Saison-Update) als Beleg; die vier Symbolkacheln
     entfallen mobil - die Einleitung nennt Formate, Serie und Updates bereits. */
  .js:not(.wv-sofort) .wv-kachel.wv-klappen{opacity:1}
  .wv-bento{gap:14px}
  .wv-bento > .wv-kachel:nth-child(n+3){display:none}
  .wv-kachel{padding:18px}
  .wv-kachel h3{font-size:1.3rem;margin-top:14px}
}
/* NF-R113: flaches Smartphone-Querformat - Geraete hoechstens so hoch wie das Fenster unter der Navigation. */
@media (max-width:767px) and (orientation:landscape){
  .wv-hero-buehne{max-width:calc((100vh - 110px) * 2.35);margin:0 auto}
  .wv-micro-screen,.wv-micro-screen[data-format="1x1"],.wv-short-screen[data-format="9x16"],.wv-loop-screen[data-format="9x16"],.wv-werk-phone,
  .wv-wand[data-aktiv="phone"] .wv-geraet--phone,.wv-wand[data-aktiv="stele"] .wv-geraet--stele{width:min(62%,calc((100vh - 120px) * .5625));max-width:none}
  .wv-micro-screen[data-format="1x1"]{width:min(62%,calc(100vh - 120px))}
  .wv-micro-screen[data-format="16x9"],.wv-short-screen[data-format="16x9"],.wv-loop-screen[data-format="16x9"],.wv-show-rahmen[data-format="16x9"] .wv-screen--show,
  .wv-wand[data-aktiv="browser"] .wv-geraet--browser,.wv-wand[data-aktiv="tv"] .wv-geraet--tv{width:min(100%,calc((100vh - 130px) * 1.7778));margin-left:auto;margin-right:auto}
  .wv-show-rahmen{height:calc(100vh - 130px);min-height:0}
  .wv-show-rahmen[data-format="16x9"]{height:auto}
  .wv-szene-bild{max-width:calc((100vh - 110px) * 1.25);margin:0 auto}
}

/* ══ NF-R114  PREISE-AUFTAKT UND LICHTFLAECHE (Smartphone und Tablet, bis 1180 px) ══════════════════════
   Der Beginn von "Preise & Pakete" bekommt beim Hineinscrollen einen eigenen, kurzen Akzent: die Kante zeichnet sich
   als goldene Linie von der Mitte aus, dahinter blueht ein weiches Licht auf und setzt sich ruhig ab, die Linie am
   Label wird laenger. Nur Kante, Licht und Label bewegen sich - Preiskarten und Hinweise stehen jederzeit.
   js/werbevideos-effekte.js setzt .ist-auftritt (einmal); ohne Skript / bei reduzierter Bewegung gilt der Endzustand.
   Die Preise liegen wie mobil seit NF-R113 ueber der Abschluss-Lichtflaeche (die blendet vor #varianten ein). */
@media (max-width:1180px){
  .wv-preise{position:relative;z-index:1}
  .wv-preise::after{background:linear-gradient(90deg,rgba(227,191,130,0),rgba(227,191,130,.8) 50%,rgba(227,191,130,0));box-shadow:0 0 14px rgba(227,191,130,.3);
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1),opacity .8s}
  .wv-preise::before{content:'';position:absolute;z-index:-1;left:50%;top:0;width:min(760px,130%);height:420px;transform:translate(-50%,-16%);pointer-events:none;
    background:radial-gradient(closest-side,rgba(227,191,130,.2),rgba(201,160,99,.07) 55%,rgba(201,160,99,0));opacity:.45}
  .js:not(.wv-sofort) .wv-preise:not(.ist-auftritt)::after{transform:translateX(-50%) scaleX(0);opacity:0}
  .js:not(.wv-sofort) .wv-preise:not(.ist-auftritt)::before{opacity:0}
  .js:not(.wv-sofort) .wv-preise.ist-auftritt::before{animation:wvPreisLicht 2.2s cubic-bezier(.22,.61,.36,1) both}
  .wv-preise .wv-kopf .wv-label::before{transition:width .9s .25s cubic-bezier(.22,.61,.36,1)}
  .wv-preise.ist-auftritt .wv-kopf .wv-label::before{width:58px}
}
@keyframes wvPreisLicht{0%{opacity:0}40%{opacity:1}100%{opacity:.45}}

/* ══ NF-R114  TABLET (768-1180 px) ═════════════════════════════════════════════════════════════════
   Eigene Stufe zwischen Smartphone und Desktop, ab 767,02 px (luekenlos an die Smartphone-Stufe bis 767 px - Emulatoren
   und Zoom liefern Breiten wie 767,2). Die alte 768er-Stufe endet seit NF-R114 bei 767 px (exakt 768
   bekam vorher Smartphone-Regeln ohne den Smartphone-Block - eine harte Kante); die 1024er-Stufe endet bei 1023 px,
   1024 ist damit zweispaltig wie 1025-1180. Hier: was alle Tablets gemeinsam brauchen; darunter die hochkante Stufe
   768-1023 und die Einsatzorte bis 900. Desktop ab 1181 px bleibt unberuehrt. */
@media (min-width:767.02px) and (max-width:1180px){
  .wv-formate,.wv-orte,.wv-show,.wv-warum,.wv-display,.wv-umfang,.wv-ablauf,.wv-preise,.wv-serien,.wv-faq,.wv-anfrage{padding:112px 0 104px}
  .wv-kopf{margin-bottom:48px}

  /* 01 Hero: der erste Bildschirm zeigt Text, Buehne und Zeitleiste vollstaendig; die naechste Section beginnt darunter. */
  .wv-hero{min-height:100vh;min-height:100svh;padding:108px 0 44px}
  .wv-hero-inner{gap:40px}
  .wv-hero-sub{margin-bottom:28px}
  .wv-meta{margin-top:26px}

  /* 04 Showcase: alle sieben Beispiele sichtbar als Kacheln unter dem Player (statt einer seitlich scrollenden
     Reihe, in der fuenf von sieben verborgen lagen). Die Buehne hat immer die Hoehe des Querformats (Container-
     einheit) - beim Wechsel zwischen 16:9 und 9:16 springt nichts. */
  .wv-show-grid{grid-template-columns:minmax(0,1fr);gap:0;max-width:900px;margin:0 auto}
  .wv-show-player{container-type:inline-size}
  .wv-show-rahmen{height:calc((100cqw - 14px) * .5625 + 14px);min-height:0}
  .wv-show-steuer{flex-direction:row;align-items:center;gap:20px;margin-top:18px}
  .wv-show-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px;overflow:visible;padding:0}
  .wv-show-liste [role="tab"]{flex-direction:column;align-items:stretch;gap:10px;min-width:0;width:auto;padding:8px 8px 12px}
  .wv-show-liste [role="tab"] img{width:100%;height:auto;aspect-ratio:16/10}
  .wv-show-liste [role="tab"] > span{padding:0 4px}
  .wv-show-liste [role="tab"] strong{font-size:1.14rem}
  .wv-show-liste [role="tab"] em{font-size:12px}
  .wv-show-meta{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;margin-top:26px}
  .wv-show-meta div{grid-template-columns:136px minmax(0,1fr)}   /* "Seitenverhaeltnis" braucht 130 px */

  /* 07 Werkbank in Lesereihenfolge: 1 Material und 2 Timeline links untereinander, 3 der fertige Clip rechts daneben
     (vorher stand der Clip vor der Timeline). Die Zeitspur behaelt ihre natuerliche Hoehe. */
  .wv-werkbank{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mat clip" "zeit clip";gap:30px 40px;align-items:start;padding:30px}
  .wv-werk-material{grid-area:mat}
  .wv-werk-zeit{grid-area:zeit;order:0}
  .wv-werk-ergebnis{grid-area:clip;align-self:center}
  .wv-werk-phone{width:clamp(180px,22vw,230px)}
  .wv-material{grid-template-columns:clamp(96px,11vw,120px) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;flex:0 0 auto}
  .wv-mat--bild{grid-row:auto}
  .wv-schnitt{flex:0 0 auto}

  /* Gibt es ein Beispiel nur in einem Format, steht dort ein einzelner (gewaehlter) Knopf - er sieht als Angabe aus,
     nicht als Schalter ohne Wirkung. */
  .wv-varianten--show .wv-var:only-child{border-color:transparent;background:none;color:var(--wv-text-3);cursor:default;padding:6px 4px}

  /* 10 Varianten: die vier Textkarten ohne die abstrakten Symbolgrafiken - kompakt, ruhig, gleich hoch. Die beiden
     Bildkarten (Seitenverhaeltnisse, Saison-Update) tragen die Anschauung. */
  .wv-bento > .wv-kachel:nth-child(n+3) .wv-kachel-symbol{display:none}
  .wv-bento > .wv-kachel:nth-child(n+3) h3{margin:0 0 8px}
  .wv-bento > .wv-kachel:nth-child(n+3){padding:22px 24px}

  /* 09/10 Preis- und Variantenkarten ohne Einblendung (wie mobil) - Preise sind nie zeitweise unsichtbar. */
  .js:not(.wv-sofort) .wv-preis.wv-klappen,.js:not(.wv-sofort) .wv-kachel.wv-klappen{opacity:1}
}
/* Tablet hochkant: die Buehne so breit, dass sie samt ueberstehendem Telefon und Zeitleiste im ersten Bildschirm
   steht (Hoehe ca. 0,81 x Breite; ueber ihr ca. 530 px Navigation, Text und Abstand, unter ihr 44 px). */
@media (min-width:767.02px) and (max-width:1180px) and (orientation:portrait){
  .wv-hero-buehne{width:100%;max-width:max(420px,calc((100vh - 580px) * 1.23));max-width:max(420px,calc((100svh - 580px) * 1.23));margin:0 auto}
}
/* Tablet hochkant (768-1023): Formate, Display, Preise */
@media (min-width:767.02px) and (max-width:1023.98px){
  /* 02 Formate: alle drei Module als dieselbe Einheit - Kopf, Formatwahl direkt ueber dem Bild, das Bild in voller
     Breite auf einer Buehne mit der Hoehe des Querformats (Hochformat und Quadrat stehen in dieser Hoehe: gleiche
     Groesse fuer alle drei Produkte, kein Sprung beim Formatwechsel), darunter Beschreibung und Anfrage links, Fakten
     rechts. Die Knoepfe tragen wie mobil die kurzen Namen (16:9 / 9:16), die langen bleiben fuer Screenreader. */
  .wv-modul{margin-top:104px;gap:0 44px}
  .wv-modul:first-of-type{margin-top:24px}
  .wv-var-lang{display:none}
  .wv-loop-zurueck{display:none}
  .wv-modul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"nr nr" "titel titel" "claim claim" "var var" "medien medien" "desc fakten" "cta fakten";align-items:start}
  .wv-modul .wv-modul-text{display:contents}
  .wv-modul .wv-modul-nr{grid-area:nr}
  .wv-modul .wv-modul-titel{grid-area:titel}
  .wv-modul .wv-modul-claim{grid-area:claim}
  .wv-modul .wv-varianten{grid-area:var;margin-bottom:18px}
  .wv-modul .wv-modul-medien{grid-area:medien;order:0}
  .wv-modul .wv-modul-desc{grid-area:desc;max-width:none;margin:32px 0 18px}
  .wv-modul .wv-fakten{grid-area:fakten;max-width:none;margin:32px 0 0}
  .wv-modul .wv-modul-cta{grid-area:cta;justify-self:start}
  .wv-modul--micro .wv-modul-medien{container-type:inline-size}
  .wv-micro-screen,.wv-micro-screen[data-format="1x1"]{width:auto;height:calc((100cqw - 14px) * .5625 + 14px)}
  .wv-micro-screen .wv-screen-flaeche{width:auto;height:100%}
  .wv-micro-screen[data-format="16x9"]{width:100%;height:auto}
  .wv-micro-screen[data-format="16x9"] .wv-screen-flaeche{width:100%;height:auto}
  /* Sekundenring rechts neben dem Telefon (Telefonbreite = 0,316 x Buehnenbreite); bei 1:1/16:9 fuellt das Bild die
     Buehne - dort ohne Ring, die Dauer steht in der Kopfzeile. */
  .wv-sekunden{left:calc(50% + 100cqw * .158 + 20px);right:auto;top:0;width:72px;height:72px}
  .wv-modul-medien:has(.wv-micro-screen:not([data-format="9x16"])) .wv-sekunden{display:none}
  .wv-sek-zahl{padding-top:20px;font-size:12px}
  .wv-sek-zahl strong{font-size:26px}
  .wv-modul--short .wv-modul-medien{display:flex;flex-direction:column;align-items:center;container-type:inline-size}
  .wv-short-screen{width:100%}
  .wv-short-screen[data-format="9x16"]{width:auto;height:calc((100cqw - 14px) * .5625 + 14px);margin:0}
  .wv-short-screen[data-format="9x16"] .wv-screen-flaeche{width:auto;height:100%}
  .wv-modul--short .wv-zeitleiste--gross{align-self:stretch}
  .wv-loop-feld{display:flex;height:calc((100cqw - 22px) * .5625 + 22px)}
  .wv-loop-screen[data-format="9x16"]{width:auto;height:100%;max-width:none}
  .wv-loop-screen[data-format="9x16"] .wv-screen-flaeche{width:auto;height:100%}

  /* 07 Werkbank: Zeitspur mit schmaleren Spurnamen, Bausteintexte mit Auslassungszeichen statt hart abgeschnitten. */
  .wv-schnitt{padding:14px 14px 18px}
  .wv-schnitt-lineal{margin-left:50px}
  .wv-schnitt-spur{grid-template-columns:50px minmax(0,1fr)}
  .wv-clip{left:calc(50px + (100% - 50px) * var(--a));width:calc((100% - 50px) * (var(--b) - var(--a)));padding:0 7px;font-size:10.5px;text-overflow:ellipsis}
  .wv-schnitt-kopf{left:calc(14px + 50px + (100% - 28px - 50px) * var(--fortschritt))}

  /* 06 Display: drei kurze Bloecke nebeneinander statt untereinander. */
  .wv-display-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px}
  .wv-display-block h3{font-size:1.35rem;margin-bottom:10px}
  .wv-display-block p{font-size:14.5px;line-height:1.7}

  /* 09 Preise: drei breite Karten - links Name, Preis, Einordnung; rechts Leistungen und Anfrage. So steht jedes Paket
     mit einem Blick, statt drei sehr hohe Karten untereinander. Inhalte unveraendert. */
  .wv-preis-grid{max-width:none;gap:18px}
  .wv-preis{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:44px;align-content:start;padding:30px 34px}
  .wv-preis > *{grid-column:1}
  .wv-preis-betrag{margin-top:18px}
  .wv-preis-ideal{margin-top:18px}
  .wv-preis-liste{grid-column:2;grid-row:1 / span 5;align-self:start;margin:0}
  .wv-preis-hinweis{grid-column:2;grid-row:6;margin:10px 0 0}
  .wv-preis-cta{grid-column:2;grid-row:7;margin-top:18px}
}
/* Tablet quer/gross (1024-1180): drei Preiskarten nebeneinander - "Preis auf Anfrage" einzeilig in der Zeilenhoehe der
   Zahlenpreise, damit "Ideal fuer" in allen drei Karten auf einer Hoehe steht (Inhalt unveraendert). */
@media (min-width:1024px) and (max-width:1180px){
  .wv-preis-betrag--anfrage{font-size:1.85rem;line-height:48px;white-space:nowrap}
}
/* Tablet: Einsatzorte - alle sechs Orte als Raster 3 x 2 (kein Seitwaertsscrollen), darunter die Beschreibung und die
   ganze Bildschirmwand wie am Desktop: das passende Geraet leuchtet im Zusammenhang der anderen. Die Wand hoechstens
   820 px breit und mittig - ab 1024 stand sie vorher klein neben der Liste. */
@media (min-width:767.02px) and (max-width:1180px){
  .wv-orte-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .wv-orte-buehne{width:100%;max-width:820px;margin:0 auto}
  .wv-orte-hilfe-wand{display:inline}
  .wv-orte-hilfe-mobil{display:none}
  .wv-orte-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:visible;padding:0;margin:0}
  .wv-orte-liste [role="tab"]{min-width:0;width:auto;min-height:64px;justify-content:center;padding:10px 14px}
  .wv-orte-liste [role="tab"] strong{font-size:14.5px;line-height:1.3}
  .wv-orte-liste [role="tab"] span{font-size:12px}
  .wv-orte-info{margin-top:14px;min-height:122px}
  .wv-wand{display:grid;padding:6px 0 72px}
  .wv-wand .wv-geraet,.wv-wand[data-aktiv] .wv-geraet{display:block;width:auto;margin:0}
  .wv-geraet--browser figcaption{position:absolute}
}
/* Tablet quer (ab 900 px, Querformat): Hero zweispaltig wie am Desktop - einspaltig passte die Buehne nicht ins Bild. */
@media (min-width:900px) and (max-width:1180px) and (orientation:landscape){
  .wv-hero-inner{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:40px;max-width:1400px;padding:0 40px}
  .wv-hero h1{font-size:clamp(2.6rem,4.6vw,3.6rem)}
  .wv-hero-phone{margin-left:-3%}   /* Desktop -10 % - bei 40 px Spaltenabstand laege das Telefon sonst ueber dem Fliesstext */
  .wv-hero-zeit{margin-left:22%}
  .wv-meta{font-size:11.5px;letter-spacing:.08em}   /* die vier Begriffe bleiben in der schmalen Textspalte einzeilig */
}

/* ══ NF-R114  SMARTPHONE (bis 767 px): HERO, WERKBANK, SECTIONWECHSEL ══════════════════════════════════
   Ergaenzt NF-R113. Hero bei 320 x 568 vollstaendig im ersten Bild (Text, beide Knoepfe, Begriffe - behutsam
   verdichtet, Knoepfe 48 px hoch); die Werkbank kompakter; etwas mehr Luft an den Sectionkanten, die Kante selbst
   linksbuendig wie die Koepfe. */
@media (max-width:767px){
  .wv-formate,.wv-orte,.wv-show,.wv-warum,.wv-display,.wv-umfang,.wv-ablauf,.wv-preise,.wv-serien,.wv-faq,.wv-anfrage{padding:88px 0 76px}
  .wv-formate{padding-top:64px}
  .wv-orte::after,.wv-show::after,.wv-warum::after,.wv-display::after,.wv-umfang::after,.wv-ablauf::after,
  .wv-preise::after,.wv-serien::after,.wv-anfrage::after,.wv-faq::after{background:linear-gradient(90deg,rgba(227,191,130,.75) 0,rgba(201,160,99,.42) 56px,rgba(201,160,99,.14) 62%,rgba(201,160,99,0) 100%)}
  .wv-preise::after{box-shadow:none;transform-origin:0 50%}
  .wv-preise::before{left:34%;width:150%}

  /* 01 Hero verdichtet */
  .wv-hero{padding-top:92px}
  .wv-hero .wv-label{margin-bottom:14px}
  .wv-hero h1{font-size:clamp(2.2rem,9.6vw,2.9rem);line-height:1.04;margin-bottom:16px}
  .wv-hero-sub{font-size:15px;line-height:1.6;margin-bottom:22px}
  .wv-hero-ctas{gap:10px}
  .wv-hero-ctas a{min-height:48px;padding-top:12px;padding-bottom:12px}
  .wv-meta{margin-top:18px}

  /* 07 Werkbank: Material in einer Reihe (Rohaufnahme schmal im Originalformat, daneben Logo und Botschaft), die
     Zeitspur flach (Spuren 22 statt 30 px, schmalere Spurnamen), der fertige Clip darunter (ab 360 px daneben, s. u.). */
  .wv-werkbank{gap:18px;padding:16px}
  .wv-werk-label{margin-bottom:10px}
  .wv-material{grid-template-columns:76px minmax(0,1fr);gap:8px 10px;flex:0 0 auto}
  .wv-mat{gap:4px}
  .wv-mat figcaption{font-size:10.5px}
  .wv-mat-logo,.wv-mat-notiz{padding:8px 10px}
  .wv-mat-notiz{font-size:1.02rem}
  .wv-schnitt{flex:0 0 auto;gap:6px;padding:12px 12px 14px}
  .wv-schnitt-lineal{margin-left:46px;padding-bottom:6px}
  .wv-schnitt-spur{grid-template-columns:46px minmax(0,1fr);height:22px}
  .wv-schnitt-spur em{font-size:9.5px;letter-spacing:.1em}
  .wv-clip{left:calc(46px + (100% - 46px) * var(--a));width:calc((100% - 46px) * (var(--b) - var(--a)));top:3px;bottom:3px;border-radius:4px}
  .wv-schnitt-kopf{left:calc(12px + 46px + (100% - 24px - 46px) * var(--fortschritt));top:8px;bottom:8px}
  .wv-werk-phone{width:min(150px,62%)}
}

/* Flaches Smartphone-Querformat: die beiden Hero-Knoepfe nebeneinander statt zweier 700 px breiter Balken. */
@media (max-width:767px) and (orientation:landscape){
  .wv-hero-ctas{flex-direction:row}
  .wv-hero-ctas a{width:auto}
}
/* Ab 360 px: der fertige Clip steht neben der Zeitspur - Timeline und Ergebnis als Paar (der Abspielkopf der Spur
   laeuft mit dem Clip), die Werkbank wird rund halb so hoch. Bei 320 px bleibt der Clip darunter (sonst zu schmal). */
@media (min-width:360px) and (max-width:767px){
  .wv-werkbank{grid-template-columns:minmax(0,1fr) clamp(120px,34vw,140px);grid-template-areas:"mat mat" "zeit clip";column-gap:12px;align-items:start}
  .wv-werk-material{grid-area:mat}
  .wv-werk-zeit{grid-area:zeit}
  .wv-werk-ergebnis{grid-area:clip}
  .wv-werk-zeit .wv-werk-label,.wv-werk-ergebnis .wv-werk-label{font-size:10px;letter-spacing:.08em}
  .wv-werk-ergebnis .wv-werk-label{white-space:nowrap}
  .wv-werk-phone{width:100%}
}

/* ══ NF-R114  SMARTPHONE-HERO: DRAMATURGIE ═══════════════════════════════════════════════════════════
   Nur hochkant (ab 500 px Fensterhoehe), mit Skript und ohne reduzierte Bewegung - sonst gilt der gestapelte Hero.
   Kein Pin: die Buehne klebt (position:sticky) im Hero-Raster. Zeile 1 ist eine Fensterhoehe Text, Zeile 2 (67 %
   Fensterhoehe) der Weg, auf dem die Buehne stehen bleibt; sie loest sich bei 82 % Scrollweg. Beim Laden liegt sie zurueckgenommen hinter dem Text: ein
   Schleier aus dem unscharfen Standbild und einer Abdunklung liegt UEBER dem Video (Unschaerfe nur auf dem ruhenden
   Standbild, kein Filter auf dem laufenden Video). Beim Scrollen gehen die Texte weich, der Schleier hebt sich
   (js/werbevideos-effekte.js: --wv-schleier 1 -> 0), die Buehne steht einen Moment klar und laeuft dann mit dem Ende
   des Hero natuerlich weg - erst danach erscheint "Drei Kernformate". Lage: Buehnenmitte bei 53 % Fensterhoehe. */
@media (max-width:767px) and (min-height:500px) and (prefers-reduced-motion:no-preference){
  .js:not(.wv-sofort) .wv-hero{--wv-schleier:1;display:block;min-height:0;padding:0}
  .js:not(.wv-sofort) .wv-hero-inner{grid-template-rows:minmax(100vh,auto) 67vh;grid-template-rows:minmax(100svh,auto) 67svh;gap:0;overflow-anchor:none}   /* s. u. */
  .js:not(.wv-sofort) .wv-hero-text{grid-area:1 / 1;align-self:stretch;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:84px 0 44px}
  .js:not(.wv-sofort) .wv-hero-buehne{grid-area:1 / 1 / 3 / 2;position:sticky;z-index:1;top:21vh;top:21svh;height:64vh;height:64svh;align-self:start;align-content:center;
    scale:calc(1.03 - var(--wv-schleier) * .08)}   /* zurueckgenommen 0,95 -> klar 1,03: der Moment kommt dem Betrachter entgegen, ohne an den Rand zu stossen */
  .js:not(.wv-sofort) .wv-hero-buehne.wv-ein{opacity:1}   /* keine Einblendung per Skript (s. js/werbevideos-effekte.js) */
  .js:not(.wv-sofort) .wv-hero-tv,.js:not(.wv-sofort) .wv-hero-phone{opacity:calc(1 - var(--wv-schleier) * .42)}
  .js:not(.wv-sofort) .wv-hero.ist-geht .wv-hero-text{pointer-events:none}
  .js:not(.wv-sofort) .wv-hero-tv .wv-screen-flaeche::after,.js:not(.wv-sofort) .wv-hero-phone .wv-screen-flaeche::after{content:'';position:absolute;inset:-14px;z-index:2;pointer-events:none;
    opacity:var(--wv-schleier);will-change:opacity;filter:blur(9px);
    background:linear-gradient(rgba(5,8,13,.6),rgba(5,8,13,.6)),url('../werbevideos/cafe-16x9-klein.webp') 50% 50%/cover no-repeat}
  .js:not(.wv-sofort) .wv-hero-phone .wv-screen-flaeche::after{background-image:linear-gradient(rgba(5,8,13,.6),rgba(5,8,13,.6)),url('../werbevideos/micro-9x16-klein.webp')}
  .js:not(.wv-sofort) .wv-hero-zeit,.js:not(.wv-sofort) .wv-hero-tv .wv-screen-zeile{opacity:calc(1 - var(--wv-schleier))}
  /* Solange die Buehne Hintergrund ist, nimmt sie keine Beruehrung an (kein versehentliches Anhalten) und zeigt keine
     Wiedergabeknoepfe; per Tastatur erreichbar bleiben sie. */
  .js:not(.wv-sofort) .wv-hero:not(.ist-klar) .wv-hero-buehne{pointer-events:none}
  .js:not(.wv-sofort) .wv-hero:not(.ist-klar) .wv-hero-buehne .wv-play:not(:focus-visible){opacity:0}
  /* Die Section beginnt an der Unterkante der Buehnenflaeche (85 % Fensterhoehe); ihr Label erst knapp unter dem
     Fensterrand - "Drei Kernformate" erscheint also erst, wenn die Buehne sich schon bewegt. */
  .js:not(.wv-sofort) .wv-formate{padding-top:calc(15vh + 16px);padding-top:calc(15svh + 16px)}
  /* overflow-anchor:none am Hero-Raster: Chrome stellt die Scrollposition beim Neuladen ueber ein Ankerelement wieder
     her - die klebende Buehne (bzw. der wegblendende Text) als Anker setzte die Seite auf den Anfang zurueck. Ohne
     Ankerkandidat im Hero gilt die gespeicherte Position. */
}

/* ══ NF-R115  SMARTPHONE: FORMATMODULE ALS EINHEIT, WERKBANK GEORDNET (bis 767 px) ══════════════════════
   Ab 768 px gilt nichts hiervon (Tablet und Desktop unveraendert). */
@media (max-width:767px){
  /* 02 Jedes Produkt eine Karte: Kopf (Dauer, Name, Kernnutzen), darunter ein durchgehendes Buehnenfeld ueber die
     ganze Kartenbreite - die Formatwahl steht als Kopfzeile IN diesem Feld direkt ueber ihrem Video (auch ohne
     Animation eindeutig: diese Knoepfe gehoeren zu diesem Bild) -, darunter Angaben und Anfrage. Die Karten liegen
     enger beieinander als die frueheren freien Module; die Kante trennt, nicht der Leerraum. */
  .wv-modul{position:relative;margin-top:28px;padding:22px 16px 6px;border-radius:24px;border:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(17,23,35,.8),rgba(9,13,21,.66));box-shadow:0 34px 60px -40px rgba(0,0,0,.9)}
  .wv-modul:first-of-type{margin-top:6px}
  .wv-modul::before{content:'';position:absolute;top:-1px;left:22px;right:22px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,rgba(227,191,130,0),rgba(227,191,130,.7) 50%,rgba(227,191,130,0))}
  .wv-modul-claim{margin-bottom:18px}
  .wv-modul .wv-varianten{position:relative;align-items:center;gap:8px;margin:0 -16px;padding:14px 16px 0;background:rgba(4,7,12,.5);border-top:1px solid rgba(255,255,255,.07)}
  .wv-modul .wv-varianten::before{content:'Format';margin-right:4px;font:600 10px/1 'Inter',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--wv-text-3)}
  .wv-modul .wv-modul-medien,.wv-modul--short .wv-modul-medien{margin:0 -16px;padding:16px 16px 18px;background:rgba(4,7,12,.5);border-bottom:1px solid rgba(255,255,255,.07)}
  html:not(.js) .wv-modul .wv-modul-medien{border-top:1px solid rgba(255,255,255,.07)}   /* ohne Skript keine Formatwahl */
  .wv-sekunden{top:16px}
  .wv-modul .wv-fakten{margin:16px 0 8px}

  /* Gemeinsame Fuehrung (js/werbevideos-effekte.js setzt .wv-fokus und die beiden Variablen je Gruppe): Deckkraft
     und Versatz folgen der Lage - von unten 26 px herein, oben 14 px zurueck und auf 40 %. Mit Tastaturfokus voll. */
  .js:not(.wv-sofort) .wv-fokus{opacity:calc(var(--wv-auf,1) - var(--wv-weg,0) * .6);translate:0 calc((1 - var(--wv-auf,1)) * 26px - var(--wv-weg,0) * 14px)}
  .js:not(.wv-sofort) .wv-fokus:focus-within{opacity:1;translate:none}
}

/* 07 Werkbank wie ein Schnittplatz: oben die Materialleiste (Rohaufnahme, Logo, Botschaft - gestrichelt, weil
   Rohmaterial), darunter Timeline und fertiger Clip als gleich hohes Paar. Ab 360 px steht die Spalte der Botschaft
   genau ueber dem Clip, Logo und Rohaufnahme ueber der Timeline - ein Raster fuer alle drei Schritte; zwei goldene Pfeile
   zeigen den Weg Material -> Schnitt -> Clip. Alle drei Beschriftungen in derselben Groesse. */
@media (max-width:767px){
  .wv-werkbank{--wv-clipbreite:clamp(112px,33vw,146px);grid-template-columns:minmax(0,1fr) var(--wv-clipbreite);grid-template-areas:"mat mat" "zeit clip";gap:22px 12px;align-items:stretch;padding:16px 14px 18px}
  .wv-werk-material{grid-area:mat;position:relative}
  .wv-werk-zeit{grid-area:zeit}
  .wv-werk-ergebnis{grid-area:clip}
  .wv-werk-label,.wv-werk-zeit .wv-werk-label,.wv-werk-ergebnis .wv-werk-label{font-size:10px;letter-spacing:.1em;white-space:nowrap;margin-bottom:9px}
  .wv-mat figcaption{font-size:10px;white-space:nowrap}
  .wv-mat-logo{padding:8px 6px;font-size:10px;letter-spacing:min(.14em,calc(100vw * .025 - 8.3px))}   /* 360 px: .07em - die Wortmarke passt in die Kachel */
  .wv-mat-notiz{font-size:.98rem}
  .wv-werk-zeit{position:relative}
  .wv-werk-ergebnis{align-items:stretch}
  .wv-werk-ergebnis .wv-werk-label{align-self:auto}
  .wv-schnitt{flex:1 1 auto;justify-content:center;gap:7px}
  .wv-schnitt-spur{height:30px}
  .wv-werk-phone{width:100%}
  .wv-werk-material::after,.wv-werk-zeit::after{content:'';position:absolute;width:0;height:0;pointer-events:none;border:5px solid transparent}
  .wv-werk-material::after{left:calc((100% - var(--wv-clipbreite) - 12px) / 2 - 5px);bottom:-18px;border-top:6px solid rgba(227,191,130,.75);border-bottom:0}
  .wv-werk-zeit::after{right:-10px;top:calc(50% + 9px);margin-top:-5px;border-left:6px solid rgba(227,191,130,.75);border-right:0}
}
@media (min-width:360px) and (max-width:767px){
  .wv-material{grid-template-columns:66px minmax(0,1fr) var(--wv-clipbreite);grid-template-rows:auto;column-gap:12px}
  .wv-mat--bild{grid-row:auto}
}
/* 320-359 px: Clip 108 px breit neben der Timeline; Logo und Botschaft stehen uebereinander neben der Rohaufnahme (fuer
   drei Kacheln waere die Leiste zu schmal). Die zwei unteren Beschriftungen duerfen zweizeilig sein - beide gleich hoch. */
@media (max-width:359px){
  .wv-werkbank{--wv-clipbreite:108px}
  .wv-werk-zeit .wv-werk-label,.wv-werk-ergebnis .wv-werk-label{white-space:normal;min-height:2.8em}
  .wv-material{grid-template-columns:66px minmax(0,1fr);column-gap:12px}
  .wv-schnitt-spur{height:25px}   /* Timeline nicht hoeher als der Clip */
}
/* NF-R107: Sehr schmale Ansichten.
   - Wartet ein Video auf Antippen (kein Autoplay: reduzierte Bewegung, Datensparmodus, Stromsparmodus), steht mittig
     ein 64-px-Knopf. Auf dem kleinen Telefon im Kopf ist der Bildschirm bei 320 px nur 55 px breit - der Knopf wurde
     links und rechts abgeschnitten. Dort jetzt hoechstens 80 % der Bildschirmbreite (bei 320 px 44 px Tastflaeche).
   - Unter 300 px duerfen die Formatknoepfe (9:16, 1:1, 16:9) umbrechen; vorher liefen sie bis 40 px aus dem Modul. */
.wv .wv-hero-phone [data-warten="true"] > .wv-play{width:min(64px,80%);height:auto;aspect-ratio:1/1}
@media (max-width:299px){
  .wv-modul .wv-varianten,.wv-varianten--show{flex-wrap:wrap}
}