@font-face{
    font-family:'InstrumentSans';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('/static/fonts/instrument-sans.woff2') format('woff2');
  }
  :root{
    --bg:#060605;
    --ink:#f2ede3;
    --ink-dim:#9a9184;
    --ink-faint:#5c564b;
    --accent:#e4712a;
    --line:rgba(242,237,227,.1);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --sans: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
    --disp: 'InstrumentSans', "Helvetica Neue", Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-behavior:auto;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:rgba(228,113,42,.25);}

  /* ---------- fixed visual layer ---------- */
  #gl{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:0;
  }
  #line2d{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
  }
  .grain{
    position:fixed;
    inset:0;
    z-index:3;
    pointer-events:none;
    opacity:.5;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .vignette{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 48%, transparent 30%, rgba(6,6,5,.75) 100%);
  }

  /* ---------- hero scroll section ---------- */
  .hero-space{ height:269vh; position:relative; z-index:2; }

  .hero-ui{
    position:fixed;
    inset:0;
    z-index:2;
    pointer-events:none;
  }
  .hero-eyebrow{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) translateY(calc(-1 * (11vw + 5.5vh)));
    font-family:var(--mono);
    font-size:clamp(10px,1.1vw,13px);
    letter-spacing:.26em;
    color:var(--accent);
    text-transform:uppercase;
    white-space:nowrap;
  }
  .hero-line{
    position:absolute;
    left:50%;
    font-family:var(--disp);
    font-weight:700;
    font-size:clamp(44px,10.5vw,168px);
    line-height:.94;
    letter-spacing:-.035em;
    white-space:nowrap;
    will-change:transform,opacity;
  }
  .hero-line-1{ top:50%; transform:translate(-50%,-100%); }
  .hero-line-2{ top:50%; color:var(--accent); transform:translate(-50%,4%); }
  .hero-sub{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%) translateY(calc(11vw + 5.5vh));
    font-family:var(--mono);
    font-size:clamp(11px,1.2vw,14px);
    letter-spacing:.08em;
    color:var(--ink-dim);
    white-space:nowrap;
  }
  .hero-hint{
    position:absolute;
    bottom:30px; left:50%;
    transform:translateX(-50%);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.24em;
    color:var(--ink-dim);
    text-shadow:0 0 12px rgba(228,113,42,.4);
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .hero-hint::after{
    content:"";
    width:2px; height:34px;
    background:linear-gradient(180deg, rgba(242,237,227,.95), rgba(255,178,122,.95) 55%, rgba(228,113,42,1));
    box-shadow:0 0 10px rgba(228,113,42,.65);
    position:absolute;
    left:50%; top:22px;
    animation:hintPulse 2.2s ease-in-out infinite;
  }
  @keyframes hintPulse{
    0%,100%{transform:scaleY(.4); opacity:.3; transform-origin:top;}
    50%{transform:scaleY(1); opacity:1; transform-origin:top;}
  }

  /* ---------- landing after fly-through ---------- */
  .landing{
    position:relative;
    z-index:4;
    padding:0 clamp(20px,5vw,72px) 120px;
  }
  .landing-inner{ max-width:1140px; margin:0 auto; }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:34px 0 60px;
  }
  .logo-mark{ display:flex; align-items:center; gap:10px; }
  .logo-glyph{ width:26px; height:26px; flex:none; }
  .logo-word{ font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:-.01em; }
  .logo-tag{ font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); letter-spacing:.1em; text-transform:uppercase; display:block; margin-top:1px; }
  .nav-cta{
    font-family:var(--disp); font-weight:500; font-size:13px; letter-spacing:0;
    color:var(--bg); background:var(--accent);
    border-radius:100px; padding:10px 20px; text-decoration:none;
  }

  .landing h2{
    font-family:var(--disp);
    font-size:clamp(28px,4.4vw,52px);
    font-weight:700;
    letter-spacing:-.025em;
    line-height:1.05;
    margin:0 auto 14px;
    max-width:24ch;
    text-wrap:balance;
    text-align:center;
  }
  .landing .lede{
    color:var(--ink-dim);
    font-size:15px;
    line-height:1.65;
    max-width:56ch;
    margin:0 auto 44px;
    text-align:center;
  }

  /* ---------- before/after slider ---------- */
  .ba{
    margin:140px auto 0;
    max-width:960px;
  }
  .ba h3{
    font-family:var(--disp);
    font-size:clamp(24px,3.6vw,42px);
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.05;
    margin:0 auto 26px;
    max-width:26ch;
    text-align:center;
  }
  .ba-hl{ color:var(--accent); }
  .ba-wrap{
    position:relative;
    aspect-ratio:16/9;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(242,237,227,.12);
    cursor:ew-resize;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y;
    background:#0a0908;
  }
  /* both layers fill the box identically -> the divider cuts both images at the
     exact same point; at 50% each photo is split precisely down its middle */
  .ba-side{
    position:absolute;
    inset:0;
  }
  .ba-side img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    pointer-events:none;
  }
  .ba-after{
    background:
      radial-gradient(circle at 72% 30%, rgba(228,113,42,.18), transparent 55%),
      linear-gradient(160deg,#171310,#0c0b09);
  }
  .ba-before{
    background:
      repeating-linear-gradient(115deg, rgba(242,237,227,.025) 0 2px, transparent 2px 14px),
      linear-gradient(160deg,#15130f,#0a0908);
    clip-path:inset(0 50% 0 0);
    will-change:clip-path;
    z-index:1;
  }
  .ba-shade{
    position:absolute;
    inset:auto 0 0 0;
    height:45%;
    background:linear-gradient(180deg, transparent, rgba(6,6,5,.85));
    pointer-events:none;
    z-index:2;
  }
  .ba-cap{
    position:absolute;
    bottom:0;
    padding:clamp(18px,3vw,30px);
    max-width:60%;
    z-index:3;
    pointer-events:none;
    will-change:transform,opacity;
  }
  .ba-cap-l{ left:0; }
  .ba-cap-r{ right:0; text-align:right; }
  .ba-tag{
    font-family:var(--mono);
    font-weight:700;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    display:block;
    margin-bottom:8px;
  }
  .ba-cap-l .ba-tag{ color:var(--ink); }
  .ba-cap-r .ba-tag{ color:var(--accent); }
  .ba-title{
    font-family:var(--disp);
    font-weight:700;
    font-size:clamp(20px,3.2vw,36px);
    letter-spacing:-.025em;
    line-height:1.02;
    margin:0;
    color:var(--ink);
    text-shadow:0 2px 18px rgba(0,0,0,.7);
  }
  .ba-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  .ba-divider{
    position:absolute;
    top:0; bottom:0;
    left:50%;
    width:2px;
    background:rgba(242,237,227,.9);
    z-index:4;
    will-change:left;
  }
  .ba-knob{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:46px; height:46px;
    border-radius:50%;
    background:var(--ink);
    color:#0b0a08;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:13px;
    font-weight:700;
    box-shadow:0 4px 18px rgba(0,0,0,.5);
  }
  .aud{
    margin-top:130px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:16px;
  }
  .aud-item{
    padding:24px 22px 28px;
    border-radius:14px;
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    transition:border-color .25s ease, transform .25s ease;
  }
  .aud-item:hover{
    border-color:rgba(228,113,42,.5);
    transform:translateY(-3px);
  }
  .aud-item h4{
    font-family:var(--disp);
    font-size:19px;
    font-weight:700;
    letter-spacing:-.015em;
    margin:0 0 8px;
  }
  .aud-item p{
    font-size:13px;
    color:var(--ink-dim);
    line-height:1.6;
    margin:0;
  }

  .cta-final{
    margin-top:150px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
  }
  .cta-final h3{
    font-family:var(--disp);
    font-size:clamp(34px,6vw,76px);
    font-weight:700;
    letter-spacing:-.03em;
    line-height:1;
    margin:0;
    max-width:16ch;
    text-wrap:balance;
  }
  .cta-final p{
    color:var(--ink-dim);
    font-size:14.5px;
    max-width:44ch;
    line-height:1.65;
    margin:0;
  }
  .cta-btn{
    font-family:var(--disp);
    font-weight:500;
    font-size:15px;
    color:var(--bg);
    background:var(--accent);
    border:none;
    border-radius:100px;
    padding:16px 34px;
    cursor:pointer;
    margin-top:10px;
    text-decoration:none;
    display:inline-block;
    transition:transform .15s ease;
  }
  .cta-btn:hover{ transform:translateY(-2px); }
  .cta-fine{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--ink-faint);
    letter-spacing:.04em;
  }

  /* ---------- about section (photo + bio, glass) ---------- */
  .about{
    margin:160px auto 0;
    display:grid;
    grid-template-columns:minmax(240px,360px) 1fr;
    gap:18px;
    align-items:stretch;
    max-width:960px;
  }
  @media (max-width:720px){
    .about{ grid-template-columns:1fr; }
  }
  .about-photo{
    position:relative;
    border-radius:14px;
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    aspect-ratio:4/5;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .about-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .about-photo-ph{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    color:var(--ink-faint);
  }
  .about-photo-ph svg{ opacity:.5; }
  .about-photo-ph span{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .about-bio{
    border-radius:14px;
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    padding:clamp(24px,4vw,44px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
  }
  .about-kicker{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .about-bio h3{
    font-family:var(--disp);
    font-size:clamp(26px,3.6vw,42px);
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.05;
    margin:0;
  }
  .about-bio p{
    color:var(--ink-dim);
    font-size:14.5px;
    line-height:1.65;
    margin:0;
    max-width:52ch;
  }
  .about-link{
    font-family:var(--disp);
    font-weight:500;
    font-size:13.5px;
    color:var(--accent);
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:6px;
    transition:gap .2s ease;
  }
  .about-link:hover{ gap:12px; }

  /* ---------- video card expansion (skill reveal) ---------- */
  .vchev{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(228,113,42,.92);
    display:flex; align-items:center; justify-content:center;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .vchev::after{
    content:"";
    width:10px; height:10px;
    border-right:2px solid #0b0a08;
    border-bottom:2px solid #0b0a08;
    transform:rotate(45deg) translate(-2px,-2px);
  }
  .vcard:hover .vchev{ transform:translate(-50%,-50%) scale(1.12); }
  .vcard.open .vchev{ transform:translate(-50%,-50%) rotate(180deg); }

  .vdrop{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s cubic-bezier(.4,0,.2,1);
  }
  .vcard.open .vdrop{ max-height:340px; }
  .vdrop-inner{
    border-top:1px solid rgba(242,237,227,.1);
    margin:0 7px;
    padding:14px 0 8px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .vskill{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:12px;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.04em;
    color:var(--accent);
    text-decoration:none;
    padding:10px 12px;
    border-radius:100px;
    background:rgba(228,113,42,.12);
    border:1px solid rgba(228,113,42,.42);
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .vskill:hover{
    background:var(--accent);
    border-color:var(--accent);
    color:#0b0a08;
  }
  .vskill .vs-ico{ display:flex; flex:none; }
  .vfiles{
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-faint);
    letter-spacing:.03em;
    line-height:1.5;
  }
  .vyt{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--ink-faint);
    text-decoration:none;
    letter-spacing:.03em;
    transition:color .2s ease;
  }
  .vyt:hover{ color:var(--accent); }
  .vlock-hint{
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-faint);
    line-height:1.5;
  }

  .demo-switch{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 0 18px;
    font-family:var(--mono);
    font-size:10px;
    color:var(--ink-faint);
    letter-spacing:.08em;
    text-transform:uppercase;
    flex-wrap:wrap;
  }
  .demo-switch button{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.06em;
    color:var(--ink-faint);
    background:transparent;
    border:1px dashed rgba(242,237,227,.2);
    border-radius:100px;
    padding:5px 11px;
    cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
  }
  .demo-switch button.on{ color:var(--accent); border-color:rgba(228,113,42,.55); border-style:solid; }

  /* ---------- signup form ---------- */
  .signup{
    width:100%;
    max-width:560px;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:6px;
  }
  .signup-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .signup-input{
    flex:1 1 240px;
    font-family:var(--sans);
    font-size:14.5px;
    color:var(--ink);
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.14);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-radius:100px;
    padding:15px 22px;
    outline:none;
    transition:border-color .2s ease;
  }
  .signup-input::placeholder{ color:var(--ink-faint); }
  .signup-input:focus{ border-color:var(--accent); }
  .signup .cta-btn{ margin-top:0; flex:none; }
  .signup-check{
    display:flex;
    align-items:flex-start;
    gap:10px;
    text-align:left;
    cursor:pointer;
  }
  .signup-check input{
    flex:none;
    width:17px; height:17px;
    margin-top:2px;
    accent-color:var(--accent);
    cursor:pointer;
  }
  .signup-check span{
    font-size:11.5px;
    line-height:1.55;
    color:var(--ink-dim);
  }
  .signup-check a{ color:var(--accent); }
  .signup-done{
    font-family:var(--mono);
    font-size:12px;
    color:var(--accent);
    letter-spacing:.04em;
    line-height:1.6;
    margin:0;
  }

  .vcard:focus-visible,
  .vtab:focus-visible,
  .cta-btn:focus-visible,
  .foot-links a:focus-visible,
  .about-link:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
  }

  /* ---------- Legal-Overlay (Rechtsseiten-Panel) ---------- */
  .legal-modal{
    position:fixed; inset:0; z-index:900;
    display:none;
    align-items:center; justify-content:center;
    padding:clamp(16px,4vw,48px);
  }
  .legal-modal.open{ display:flex; }
  .legal-modal .legal-backdrop{
    position:absolute; inset:0;
    background:rgba(6,6,5,.72);
    animation:fadeIn .25s ease both;
  }
  .legal-card{
    position:relative;
    width:100%; max-width:720px;
    max-height:80vh;
    display:flex; flex-direction:column;
    background:rgba(20,18,16,.94);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(242,237,227,.12);
    border-radius:14px;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    animation:popIn .3s cubic-bezier(.2,.9,.3,1.1) both;
  }
  .legal-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    padding:18px 24px 0 28px;
    flex:0 0 auto;
  }
  .legal-head .legal-kicker{
    font-family:var(--mono);
    font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--ink-faint);
  }
  .legal-x{
    flex:0 0 auto;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    border-radius:100px;
    color:var(--ink-dim);
    font-size:15px; line-height:1;
    cursor:pointer;
    transition:color .25s, border-color .25s, transform .25s;
  }
  .legal-x:hover{
    color:var(--ink);
    border-color:rgba(228,113,42,.5);
    transform:translateY(-2px);
  }
  .legal-body{
    flex:1 1 auto;
    overflow-y:auto;
    padding:10px 28px 30px 28px;
    scrollbar-width:thin;
    scrollbar-color:rgba(228,113,42,.35) transparent;
  }
  .legal-body::-webkit-scrollbar{ width:8px; }
  .legal-body::-webkit-scrollbar-track{ background:transparent; }
  .legal-body::-webkit-scrollbar-thumb{
    background:rgba(228,113,42,.35);
    border-radius:100px;
  }
  .legal-body h2{
    font-family:var(--disp);
    font-weight:700;
    font-size:28px; line-height:1.1;
    letter-spacing:-.02em;
    color:var(--ink);
    margin:8px 0 18px;
    outline:none;
  }
  .legal-body h3{
    font-family:var(--disp);
    font-weight:700;
    font-size:16px; line-height:1.25;
    letter-spacing:-.02em;
    color:var(--ink);
    margin:26px 0 8px;
  }
  .legal-body p,
  .legal-body li{
    font-family:var(--sans);
    font-size:13.5px; line-height:1.7;
    color:var(--ink-dim);
    margin:0 0 12px;
  }
  .legal-body ul, .legal-body ol{ padding-left:20px; margin:0 0 12px; }
  .legal-body a{
    color:var(--accent);
    text-decoration:none;
    border-bottom:1px solid rgba(228,113,42,.35);
    transition:border-color .25s;
  }
  .legal-body a:hover{ border-bottom-color:var(--accent); }
  .legal-body .legal-note{
    font-family:var(--mono);
    font-size:11px; letter-spacing:.1em;
    color:var(--ink-faint);
  }
  @media (prefers-reduced-motion: reduce){
    .legal-modal .legal-backdrop,
    .legal-card{ animation:none; }
    .legal-x{ transition:none; }
  }

  /* ---------- footer ---------- */
  .site-footer{
    margin-top:110px;
    padding-top:26px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .foot-links{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
  }
  .foot-links a{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.05em;
    color:var(--ink-dim);
    text-decoration:none;
    transition:color .2s ease;
  }
  .foot-links a:hover{ color:var(--accent); }
  .foot-copy{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--ink-faint);
    letter-spacing:.04em;
  }

  .cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:14px;
  }
  .card{
    position:relative;
    padding:22px;
    border-radius:12px;
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    transition:border-color .25s ease, transform .25s ease;
  }
  .card:hover{ border-color:rgba(228,113,42,.5); transform:translateY(-3px); }
  .card-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; color:var(--accent); text-transform:uppercase; }
  .card h4{ font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:-.01em; margin:10px 0 6px; line-height:1.3; }
  .card p{ font-size:12.5px; color:var(--ink-dim); line-height:1.55; margin:0 0 14px; }
  .card-dl{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); transition:color .2s ease; }
  .card:hover .card-dl{ color:var(--accent); }

  /* ---------- staggered video grid ---------- */
  .vtabs{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 28px;
  }
  .vtab{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.05em;
    color:var(--ink-dim);
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-radius:100px;
    padding:8px 16px;
    cursor:pointer;
    transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .vtab:hover{
    color:var(--ink);
    border-color:rgba(228,113,42,.5);
    transform:translateY(-2px);
  }
  .vtab.active{
    color:#0b0a08;
    background:var(--accent);
    border-color:var(--accent);
  }

  .vwrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px;
    max-width:630px;
    margin:0 auto;
  }
  .vcol{ display:flex; flex-direction:column; gap:20px; }
  .vcol-b{ margin-top:76px; }
  #vpool{ display:none; }
  @media (max-width:720px){
    .vwrap{ grid-template-columns:1fr; }
    .vcol-b{ margin-top:22px; }
  }
  .vcard{
    border-radius:14px;
    padding:10px 10px 6px;
    background:rgba(242,237,227,.035);
    border:1px solid rgba(242,237,227,.1);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    cursor:pointer;
    transition:border-color .25s ease, transform .25s ease;
  }
  .vcard:hover{ border-color:rgba(228,113,42,.55); transform:translateY(-4px); }
  .vthumb{
    position:relative;
    aspect-ratio:16/9;
    border-radius:9px;
    overflow:hidden;
    background:
      radial-gradient(circle at 22% 28%, rgba(228,113,42,.22), transparent 55%),
      linear-gradient(160deg,#1a1713,#0c0b09);
  }
  .vthumb img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* --- Zustaende: noch keine / nur ein Video --- */
  .vempty{
    max-width:630px;
    margin:0 auto;
    padding:44px 32px 48px;
    text-align:center;
    border-radius:14px;
    background:rgba(242,237,227,.04);
    border:1px solid rgba(242,237,227,.12);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
  }
  .vempty-kicker{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--accent);
    display:block;
    margin-bottom:14px;
  }
  .vempty h3{
    font-family:var(--disp);
    font-size:clamp(20px,3vw,28px);
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.15;
    margin:0 0 12px;
  }
  .vempty p{
    color:var(--ink-dim);
    font-size:14px;
    line-height:1.65;
    max-width:42ch;
    margin:0 auto 22px;
  }
  .vempty .cta-btn{ margin-top:0; }

  .vwrap-single{ grid-template-columns:minmax(0,305px); justify-content:center; }
  .vwrap-single .vcol-b{ display:none; }

  .vsoon{
    text-align:center;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.06em;
    color:var(--ink-faint);
    margin:26px 0 0;
  }
  .vskill-soon{
    display:inline-block;
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-faint);
    letter-spacing:.03em;
    padding:9px 0 2px;
  }

  .vcard.v2 .vthumb{ background:radial-gradient(circle at 78% 24%, rgba(228,113,42,.2), transparent 55%), linear-gradient(200deg,#181511,#0c0b09); }
  .vcard.v3 .vthumb{ background:radial-gradient(circle at 30% 75%, rgba(242,237,227,.12), transparent 55%), linear-gradient(140deg,#171512,#0b0a08); }
  .vcard.v4 .vthumb{ background:radial-gradient(circle at 70% 70%, rgba(228,113,42,.24), transparent 50%), linear-gradient(180deg,#191612,#0c0b09); }
  .vcard.v5 .vthumb{ background:radial-gradient(circle at 50% 20%, rgba(242,237,227,.1), transparent 55%), linear-gradient(150deg,#181613,#0b0a08); }
  .vcard.v6 .vthumb{ background:radial-gradient(circle at 18% 60%, rgba(228,113,42,.18), transparent 55%), linear-gradient(170deg,#171410,#0c0b09); }
  .vdur{
    position:absolute;
    right:8px; bottom:8px;
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.04em;
    color:var(--ink);
    background:rgba(6,6,5,.72);
    border-radius:5px;
    padding:3px 7px;
  }
  .vnew{
    position:absolute;
    left:8px; top:8px;
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#0b0a08;
    background:var(--accent);
    border-radius:5px;
    padding:3px 7px;
  }
  .vmeta{ padding:11px 7px 8px; }
  .vtag{
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .vmeta h4{
    font-family:var(--disp);
    font-size:14.5px;
    font-weight:700;
    letter-spacing:-.01em;
    line-height:1.28;
    margin:7px 0 7px;
  }
  .vinfo{
    font-family:var(--mono);
    font-size:10.5px;
    color:var(--ink-faint);
    letter-spacing:.03em;
  }
  .vinfo b{ color:var(--ink-dim); font-weight:500; }

  .demo-note{
    margin-top:70px;
    padding-top:22px;
    border-top:1px solid var(--line);
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink-faint);
    letter-spacing:.03em;
    line-height:1.7;
    max-width:72ch;
  }

  /* ---------- access gate modal ---------- */
  .modal[hidden]{ display:none; }
  .modal{
    position:fixed;
    inset:0;
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
  }
  .modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(6,6,5,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    animation:fadeIn .25s ease;
  }
  .modal-card{
    position:relative;
    width:min(100%,370px);
    border-radius:14px;
    background:rgba(20,18,16,.94);
    border:1px solid rgba(242,237,227,.14);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 24px 70px rgba(0,0,0,.6);
    padding:26px 26px 24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    animation:popIn .3s cubic-bezier(.16,.8,.24,1);
  }
  @keyframes fadeIn{ from{opacity:0} to{opacity:1} }
  @keyframes popIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
  .modal-card .about-kicker{ font-size:9.5px; }
  .modal-card h3{
    font-family:var(--disp);
    font-size:23px;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1.05;
    margin:0;
  }
  .modal-card > p{
    color:var(--ink-dim);
    font-size:12.5px;
    line-height:1.5;
    margin:0 0 2px;
  }
  .modal-card .signup{ max-width:none; margin-top:2px; gap:11px; }
  .modal-card .signup-row{ flex-direction:column; }
  .modal-card .signup-input{ flex:none; padding:12px 18px; font-size:13.5px; }
  .modal-card .cta-btn{ width:100%; text-align:center; padding:13px 24px; font-size:14px; }
  .modal-card .signup-check span{ font-size:10.5px; line-height:1.5; }
  .modal-card .cta-fine{ font-size:9.5px; }
  .modal-x{
    position:absolute;
    top:12px; right:12px;
    width:28px; height:28px;
    border-radius:50%;
    background:transparent;
    border:1px solid rgba(242,237,227,.16);
    color:var(--ink-dim);
    font-size:15px;
    line-height:1;
    cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
  }
  .modal-x:hover{ color:var(--ink); border-color:var(--accent); }
  .modal-x:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  @media (prefers-reduced-motion: reduce){
    .modal-backdrop, .modal-card{ animation:none !important; }
    .hero-hint::after{ animation:none; }
  }