/* skillbyte · Video-ATF (erste Bildschirmseite als eine Komposition:
   Kopfzeile, Vertrauensreihe, Pixel-Headline, Unterzeile, CTA, Zahlenfuss
   ueber einem laufenden Video). Nach externer Spez gebaut, an drei
   Stellen bewusst abgewichen:
   - Schriften liegen lokal (DSGVO): Inter aus fonts.css, die Pixel-
     Schrift ist Geist Pixel Circle (SIL OFL, aus dem geist-npm-Paket).
     Die Spez wollte BubbledotICG von einem Font-CDN -- das CDN leakt
     Besucher-IPs und die Lizenzlage ist unklar.
   - Nav-Links inaktiv bei Opacity .7 statt .5: #2e2e2e auf Weiss faellt
     bei .5 auf 2,8:1 und damit unter AA; .7 liegt bei 4,6:1.
   - Video laeuft im Marken-Duotone (Graustufe + Babyblau-Farbblend) wie
     auf den /en-Seiten; Wunsch aus derselben Serie: "use our baby blue
     branding in the background".
   Alles unter .vh gescopet, damit edda-service.css unberuehrt bleibt. */

@font-face{
  font-family:'Geist Pixel Circle';
  src:url(/10_ASSETS/landing_pages/fonts/GeistPixel-Circle.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}

.vh{
  --bg:#000000; --text:#ffffff; --muted:#8e8e8e; --nav-text:#2e2e2e;
  --pill-dark:#28282a; --sign-in-text:#c8c8c8;
  --nav-shadow:0 4px 14px rgba(0,0,0,.16);
  --trust-bg:#28282a; --trust-border:rgba(255,255,255,.4); --trust-text:#c4c2c3;
  --font-sans:"Inter","Segoe UI",system-ui,sans-serif;
  --font-display:"Geist Pixel Circle",monospace;
  position:relative;height:100vh;height:100dvh;overflow:hidden;
  background:var(--bg);color:var(--text);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── Video: volle Flaeche hinter allem, Duotone in Babyblau.
   Eigener dunkler Grund im Container: laedt das Video nicht, blendet
   der Farbton sonst gegen Transparenz und zeigt die Rohfarbe. ── */
.vh-bg{position:absolute;inset:0;background:#000;overflow:hidden;z-index:0}
.vh-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;filter:grayscale(1) contrast(1.08) brightness(.8)}
.vh-ton{position:absolute;inset:0;background:#29BFDE;mix-blend-mode:color;opacity:.9;pointer-events:none}

.vh-page{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:clamp(16px,2.4vh,28px) clamp(14px,3vw,32px)}

/* ── 1) Kopfzeile ─────────────────────────────────────────────── */
/* Verankert statt mittig schwebend: Marke links, CTA rechts, die
   Nav-Pille bleibt durch die Auto-Raender in der Mitte. */
.vh-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;width:100%;
  max-width:1200px;margin:0 auto;gap:clamp(18px,2.8vw,28px);
  animation:vhSlideDown .7s cubic-bezier(.22,1,.36,1) both}
.vh-nav{margin:0 auto}
.vh-logo{flex:none;width:clamp(40px,4.4vw,46px);height:clamp(40px,4.4vw,46px);border-radius:50%;
  background:#fff;box-shadow:var(--nav-shadow);display:grid;place-items:center;
  transition:transform .25s}
.vh-logo:hover{transform:scale(1.04)}
.vh-logo img{width:72%;height:72%;object-fit:contain}
.vh-nav{display:flex;align-items:center;justify-content:space-around;flex:1;max-width:430px;
  height:clamp(44px,5.2vw,48px);background:#fff;border-radius:999px;padding:4px 8px;
  box-shadow:var(--nav-shadow)}
.vh-nav a{position:relative;display:flex;align-items:center;height:100%;padding:0 10px;
  font-weight:500;font-size:clamp(13px,1.4vw,15px);letter-spacing:-.01em;
  color:var(--nav-text);text-decoration:none;opacity:.7;transition:opacity .2s}
.vh-nav a:hover{opacity:.85}
.vh-nav a.on{opacity:1}
.vh-nav a.on::after{content:"";position:absolute;left:50%;bottom:5px;width:3px;height:3px;
  margin-left:-1.5px;background:#000;box-shadow:-5px 0 0 #000,5px 0 0 #000}
.vh-signin{flex:none;display:flex;align-items:center;height:clamp(44px,5.2vw,48px);
  padding:0 clamp(16px,2vw,22px);background:var(--pill-dark);color:var(--sign-in-text);
  border-radius:999px;box-shadow:var(--nav-shadow);text-decoration:none;font-weight:500;
  font-size:clamp(13px,1.4vw,14.5px);transition:background .25s,color .25s,transform .25s}
.vh-signin:hover{background:#323234;color:#fff;transform:translateY(-1px)}
@keyframes vhSlideDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

/* ── 2) Hero (Mitte) ──────────────────────────────────────────── */
.vh-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;max-width:900px;width:100%}

/* Vertrauensreihe: drei ueberlappende Ringe (dunkler Ring, weisser
   Innenkreis, echtes Zeichen) plus Pille. Die Marken sind Bilddateien,
   keine Nachbauten. */
.vh-trust{--trust-size:clamp(36px,4.5vw,42px);display:inline-flex;align-items:center;
  margin-bottom:clamp(16px,2.5vh,26px)}
.vh-av{flex:none;width:var(--trust-size);height:var(--trust-size);border-radius:50%;
  background:var(--trust-bg);border:1px solid var(--trust-border);padding:5px;
  transition:transform .35s}
.vh-av .in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;overflow:hidden}
.vh-av .in img{width:78%;height:auto;max-height:70%;object-fit:contain}
.vh-av .in.vh-star{font-family:var(--font-sans);font-weight:600;color:#111;
  font-size:calc(var(--trust-size)*.4);line-height:1}
.vh-av.a1{z-index:1}
.vh-av.a2{z-index:2;margin-left:calc(var(--trust-size)*-.42)}
.vh-av.a3{z-index:4;margin-left:calc(var(--trust-size)*-.42)}
.vh-av.a1:hover{transform:translateY(-2px)}
.vh-av.a2:hover{transform:translateY(-4px)}
.vh-av.a3:hover{transform:translateY(-2px)}
.vh-tpill{display:flex;align-items:center;height:var(--trust-size);
  margin-left:calc(var(--trust-size)*-.42);padding-left:calc(var(--trust-size)*.58);
  padding-right:16px;background:var(--trust-bg);border:1px solid var(--trust-border);
  border-radius:999px;color:var(--trust-text);font-weight:500;
  font-size:clamp(12px,1.4vw,13.5px);white-space:nowrap}

/* Headline: zwei Zeilen Pixelschrift, deckend weiss, ohne Verlauf. */
.vh-headline{margin:0;font-family:var(--font-display);font-weight:400;color:#fff;
  font-size:clamp(28px,6.2vw,80px);letter-spacing:-.04em;line-height:1.12;overflow:hidden}
.vh-headline span{display:block;white-space:nowrap;opacity:0;transform:translateY(14px);
  animation:vhHeadlineFade .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes vhHeadlineFade{to{opacity:1;transform:none}}

.vh-sub{max-width:min(500px,92%);margin:clamp(12px,2vh,18px) auto 0;
  font-size:clamp(calc(13.5px + 2pt),calc(1.55vw + 2pt),calc(16.5px + 2pt));
  font-weight:400;line-height:1.55;color:#d0d0d0;opacity:.8}

.vh-cta{display:inline-block;margin-top:clamp(18px,3vh,26px);padding:clamp(11px,1.6vh,13px) clamp(22px,3vw,28px);
  background:#fff;color:#000;border-radius:999px;text-decoration:none;font-weight:600;
  font-size:clamp(13.5px,1.5vw,14.5px);
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 22px rgba(255,255,255,.32),0 0 44px rgba(255,255,255,.12);
  transition:transform .25s,box-shadow .3s}
.vh-cta:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.2)}

/* ── 3) Zahlenfuss ────────────────────────────────────────────── */
.vh-stats{flex-shrink:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.5vw,28px);
  width:100%;max-width:920px}
.vh-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.vh-stat .ic{font-family:var(--font-display);font-size:clamp(22px,3vw,33px);color:#fff;line-height:1}
.vh-stat .val{font-family:var(--font-sans);font-weight:600;color:#fff;
  font-size:clamp(18px,2.2vw,26px);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.vh-stat .lbl{color:var(--muted);font-size:clamp(11px,1.2vw,12.5px);line-height:1.35}

/* ── Eingangs-Animation ───────────────────────────────────────── */
.vh .anim{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px);
  animation:vhReveal .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes vhReveal{to{opacity:1;transform:none;filter:none}}
.vh .anim-pulse{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px);
  animation:vhRevealPulse 1.1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes vhRevealPulse{
  0%{opacity:0;transform:translateY(22px) scale(.98);filter:blur(6px)}
  70%{opacity:1;transform:none;filter:none}
  84%{transform:scale(1.03)}
  100%{opacity:1;transform:none;filter:none}}

/* ── Burger + mobiles Menue ───────────────────────────────────── */
.vh-burger{display:none;flex:none;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:var(--pill-dark);box-shadow:var(--nav-shadow);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .25s}
.vh-burger i{display:block;width:18px;height:1.5px;background:#fff;border-radius:2px;
  transition:transform .3s,background .25s,opacity .2s}
.vh-burger[aria-expanded="true"]{background:#fff}
.vh-burger[aria-expanded="true"] i{background:#000}
.vh-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.vh-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.vh-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.vh-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:vhOverlayIn .28s ease both}
@keyframes vhOverlayIn{from{opacity:0}to{opacity:1}}
.vh-menu{position:fixed;left:14px;right:14px;top:84px;z-index:51;background:#fff;border-radius:28px;
  padding:22px 18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:vhMenuIn .38s cubic-bezier(.22,1,.36,1) both}
@keyframes vhMenuIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.vh-menu a{position:relative;display:block;padding:13px 10px;text-align:center;border-radius:14px;
  color:var(--nav-text);text-decoration:none;font-weight:500;font-size:16px;
  opacity:0;animation:vhLinkIn .4s cubic-bezier(.22,1,.36,1) forwards}
.vh-menu a:nth-child(1){animation-delay:.06s}
.vh-menu a:nth-child(2){animation-delay:.11s}
.vh-menu a:nth-child(3){animation-delay:.16s}
.vh-menu a:nth-child(4){animation-delay:.21s}
.vh-menu a:nth-child(5){animation-delay:.26s}
@keyframes vhLinkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vh-menu a.on::after{content:"";position:absolute;left:50%;bottom:8px;width:3px;height:3px;
  margin-left:-1.5px;background:#000;box-shadow:-5px 0 0 #000,5px 0 0 #000}
.vh-menu .vh-msign{margin-top:8px;background:var(--pill-dark);color:#fff;border-radius:999px}
body.vh-menu-open{overflow:hidden}

/* ── Breakpoints ──────────────────────────────────────────────── */
@media(max-width:720px){
  .vh-nav,.vh-signin{display:none}
  .vh-head{justify-content:space-between;max-width:none}
  .vh-logo{width:48px;height:48px}
  .vh-burger{display:flex}
  /* Die Spez wollte -.08em; Geist Pixel laeuft enger als Bubbledot,
     bei 28px ueberlappen die Punktraster dann. Gemessen am Screenshot. */
  .vh-headline{letter-spacing:-.02em;line-height:1.05}
  .vh-stats{grid-template-columns:repeat(2,1fr);row-gap:16px}
  .vh-tpill{font-size:12px}
}
@media(max-width:420px){
  .vh-trust{--trust-size:34px}
  .vh-headline{letter-spacing:-.03em;line-height:1.04}
}
@media(max-height:700px){
  .vh-trust{margin-bottom:12px}
  .vh-sub{margin-top:10px}
  .vh-cta{margin-top:14px}
}

@media(prefers-reduced-motion:reduce){
  .vh-head,.vh-headline span,.vh .anim,.vh .anim-pulse,.vh-overlay,.vh-menu,.vh-menu a{animation:none!important}
  .vh-headline span,.vh .anim,.vh .anim-pulse,.vh-menu a{opacity:1!important;transform:none!important;filter:none!important}
}