:root {
    --black: #060505;
    --panel: #0e0b0b;
    --red: #e3170a;        /* Signalrot, Hauptakzent */
    --red-hot: #ff4a3d;    /* Glanzlicht */
    --red-deep: #5c0705;   /* Schattenrot */
    --white: #f4f1ef;
    --grey: #9b9493;
    --line: rgba(244,241,239,.12);

    --font: "Archivo", system-ui, sans-serif;
    --wide: 108%;
    --mono: "JetBrains Mono", ui-monospace, monospace;
    --gutter: clamp(20px, 4.5vw, 64px);
    --max: 1320px;
    --ease: cubic-bezier(.16,1,.3,1);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
  body {
    margin: 0; background: var(--black); color: var(--white);
    font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
    -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  a { color: inherit; }
  button { font: inherit; color: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

  /* ---------- WebGL-Hintergrund ---------- */
  #silk {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; display: block;
    /* Fallback, falls WebGL fehlt */
    background:
      radial-gradient(60% 50% at 80% 10%, rgba(227,23,10,.35), transparent 70%),
      radial-gradient(50% 45% at 10% 95%, rgba(227,23,10,.28), transparent 70%),
      var(--black);
  }
  .silk-dim { position: fixed; inset: 0; z-index: -1; background: var(--black); opacity: 0; pointer-events: none; }

  /* ---------- Navigation ---------- */
  .nav {
    position: fixed; inset: 0 0 auto; z-index: 50;
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px var(--gutter);
    transition: background-color .4s;
  }
  .nav.is-solid { background: rgba(6,5,5,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .logo {
    position: relative; z-index: 2;
    display: inline-flex; align-items: center; text-decoration: none;
    font-weight: 900; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1;
  }
  .nav-links { display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0; }
  .nav-links a { text-decoration: none; font-weight: 500; font-size: .98rem; color: rgba(244,241,239,.8); transition: color .2s; }
  .nav-links a:hover { color: var(--white); }
  .burger { position: relative; z-index: 2; display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 11px 9px; }
  .burger span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: transform .4s var(--ease), opacity .2s; }
  .burger span + span { margin-top: 7px; }
  .menu-open .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


  /* ---------- Startbildschirm ---------- */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .intro { position: relative; height: 100svh; display: grid; place-items: center; overflow: hidden; padding: 0 var(--gutter); }
  .sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
  .intro-stage { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(26px, 4.5vh, 48px); width: 100%; }
  .iris-wrap { position: relative; width: min(44vmin, 300px); aspect-ratio: 1; display: grid; place-items: center; }
  .iris { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 30px rgba(227,23,10,.45)); }
  .iris-glow {
    position: absolute; inset: -60%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(227,23,10,.55), rgba(227,23,10,.12) 45%, transparent 70%);
    animation: breathe 4s ease-in-out infinite;
  }
  @keyframes breathe { 50% { transform: scale(1.08); opacity: .75; } }
  .shock {
    position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 3px rgba(255,120,100,.9), 0 0 40px 6px rgba(227,23,10,.8), inset 0 0 40px rgba(227,23,10,.6);
  }
  .flare {
    position: absolute; left: 50%; top: 50%; width: 260vw; height: 3px; translate: -50% -50%; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,70,50,.0) 20%, rgba(255,120,100,.9) 46%, #fff 50%, rgba(255,120,100,.9) 54%, rgba(255,70,50,0) 80%, transparent);
    box-shadow: 0 0 24px 6px rgba(255,60,40,.55);
    border-radius: 50%;
  }
  .word-wrap { margin: 0; width: min(90vw, 860px); line-height: 0; }
  .word { width: 100%; height: auto; overflow: visible; }
  .slice { opacity: 0; }
  .intro-tag { margin: 0; color: rgba(244,241,239,.7); font-weight: 300; font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: .02em; }
  .scroll-cue {
    position: absolute; left: 50%; bottom: 28px; translate: -50% 0; z-index: 2;
    display: grid; justify-items: center; gap: 10px; min-height: 44px; text-decoration: none;
    color: rgba(244,241,239,.6); font-size: .9rem; font-weight: 500;
  }
  .scroll-cue i { display: block; width: 1.5px; height: 46px; background: linear-gradient(var(--red), transparent); transform-origin: top; animation: cue 2s var(--ease) infinite; }
  @keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

  /* Logo in der Navigation */
  .logo { gap: 10px; }
  .logo-icon { width: 34px; height: 34px; }
  .logo-word { width: 150px; height: auto; }
  @media (max-width: 420px) { .logo-word { width: 128px; } }

  /* ---------- Buttons ---------- */
  .pill {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
    min-height: 60px; padding: 0 10px 0 32px; border-radius: 999px; border: 0;
    font-weight: 600; font-size: 1.08rem; text-decoration: none; color: var(--white);
    background: linear-gradient(180deg, var(--red-hot) 0%, var(--red) 55%, #b30f06 100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 18px 50px -12px rgba(227,23,10,.7);
    transition: box-shadow .4s var(--ease);
    will-change: transform;
  }
  .pill i {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--black); color: var(--white); transition: transform .5s var(--ease);
  }
  .pill i svg { width: 16px; height: 16px; }
  .pill:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 22px 70px -10px rgba(255,74,61,.9); }
  .pill:hover i { transform: rotate(45deg); }
  .link-arrow {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    font-weight: 500; text-decoration: none; color: rgba(244,241,239,.85);
  }
  .link-arrow:hover { color: var(--white); }
  .link-arrow svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
  .link-arrow:hover svg { transform: translate(3px, -3px); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative; isolation: isolate; min-height: 100svh;
    display: grid; align-content: center; justify-items: center; text-align: center;
    padding: 110px var(--gutter) 70px;
  }
  .hero::before {
    content: ""; position: absolute; left: 50%; top: 62%; z-index: -1; pointer-events: none;
    width: min(1100px, 130vw); height: 62%; translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(6,5,5,.92), rgba(6,5,5,.75) 50%, transparent);
  }
  .tiles {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px);
    width: min(100%, 760px, 78svh); margin-bottom: clamp(28px, 5vh, 56px);
  }
  .tile {
    position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: clamp(10px, 1.4vw, 18px);
    overflow: hidden; background: linear-gradient(160deg, var(--red-hot), var(--red-deep) 75%);
    -webkit-mask: var(--cut) center / 100% 100% no-repeat; mask: var(--cut) center / 100% 100% no-repeat;
  }
  .tile img {
    position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover;
    filter: grayscale(1) contrast(1.25) brightness(1.35); mix-blend-mode: multiply;
    transition: filter .6s var(--ease);
  }
  .tile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(255,90,70,.35), transparent 50%);
    mix-blend-mode: screen; pointer-events: none;
  }
  .tile:hover img, .tile:focus-visible img { filter: grayscale(0) contrast(1.05); mix-blend-mode: normal; }
  /* Eingeschnittene Formen */
  .tile:nth-child(1) { --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M100 14 L100 22 L14 100 L4 100Z M100 34 L100 38 L32 100 L28 100Z'/%3E%3C/svg%3E"); }
  .tile:nth-child(2) { --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M0 12 L74 50 L0 88 L0 76 L52 50 L0 24Z'/%3E%3C/svg%3E"); }
  .tile:nth-child(3) { --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0H100V100H0Z M30 0 L40 0 L22 100 L10 100Z M62 0 L66 0 L84 100 L76 100Z'/%3E%3C/svg%3E"); }

  .hero .hero-title {
    margin: 0; font-weight: 800; letter-spacing: -.045em; text-transform: uppercase;
    font-size: clamp(3rem, min(9.2vw, 12.5svh), 8.6rem); line-height: .9;
  }
  .accent { color: var(--red); }
  .hero-sub {
    max-width: 30em; margin: clamp(20px, 3vh, 30px) auto clamp(30px, 4.5vh, 44px);
    color: rgba(244,241,239,.75); font-size: clamp(1.08rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.55;
  }
  .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; }

  .line { display: block; overflow: hidden; padding-bottom: .05em; }
  .line > span { display: inline-block; }

  /* ---------- Gedreht für ---------- */
  .clients { padding: clamp(40px, 6vw, 70px) 0; border-block: 1px solid var(--line); }
  .clients .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
  .clients p { margin: 0; color: var(--grey); font-size: .98rem; }
  .clients ul { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 5vw, 72px); list-style: none; margin: 0; padding: 0; }
  .clients li { font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: rgba(244,241,239,.6); }

  /* ---------- Sektionen ---------- */
  .section { padding: clamp(90px, 13vw, 170px) 0; }
  .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-bottom: clamp(40px, 6vw, 72px); }
  h2 {
    margin: 0; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase;
    font-size: clamp(2.6rem, 6.6vw, 6rem); line-height: .92;
  }
  h2 em { font-style: normal; color: var(--red); }
  .head p { margin: 0; max-width: 26em; color: var(--grey); font-weight: 300; font-size: 1.12rem; }

  /* ---------- HUD: Kamera-Rahmen um den Bildschirm ---------- */
  .hud { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; }
  .hc { position: absolute; width: 26px; height: 26px; border: 1.5px solid rgba(244,241,239,.45); }
  .hc.tl { top: 76px; left: 14px; border-right: 0; border-bottom: 0; }
  .hc.tr { top: 76px; right: 14px; border-left: 0; border-bottom: 0; }
  .hc.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
  .hc.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
  .hud-rec, .hud-meta {
    position: absolute; bottom: 20px; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
    color: rgba(244,241,239,.6); font-variant-numeric: tabular-nums;
  }
  .hud-rec { left: 50px; display: flex; align-items: center; gap: 8px; }
  .hud-rec b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.2s steps(1) infinite; }
  .hud-meta { right: 50px; }
  @keyframes blink { 50% { opacity: 0; } }

  /* ---------- Video-Hintergründe ---------- */
  .intro, .hero, .contact, .reelsec { isolation: isolate; }
  .vbg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0b0707; }
  .vbg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
  .vbg video.on { opacity: 1; }
  .vbg::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(6,5,5,.85) 100%); }
  .vbg.red { opacity: .62; mix-blend-mode: screen; background: transparent; }
  .vbg.red.faint { opacity: .4; }
  .vbg.red video { filter: grayscale(1) contrast(1.35) brightness(.85); }
  .vbg.red::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #ff2414; mix-blend-mode: multiply; }
  .vbg .flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; mix-blend-mode: overlay; }
  .about-card { position: relative; overflow: hidden; isolation: isolate; }

  /* ---------- Showreel-Bühne ---------- */
  .reelsec { position: relative; height: 100svh; }
  .reel-stage { position: relative; height: 100svh; overflow: hidden; }
  .reel-frame { position: absolute; inset: 0; clip-path: inset(16% 20% round 22px); }
  .reel-frame .vbg { z-index: 0; }
  .reel-frame .vbg video { filter: saturate(.8) contrast(1.08); }
  .reel-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
  .reel-lines line { stroke: rgba(255,74,61,.55); stroke-width: .12; vector-effect: non-scaling-stroke; }
  .reel-cross { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; z-index: 3;
    background: linear-gradient(var(--white), var(--white)) center / 1.5px 100% no-repeat, linear-gradient(var(--white), var(--white)) center / 100% 1.5px no-repeat; opacity: .7; }
  .reel-hud { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); top: clamp(20px, 3vw, 40px); z-index: 3;
    display: flex; justify-content: space-between; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: rgba(244,241,239,.85); }
  .reel-hud.bottom { top: auto; bottom: clamp(20px, 3vw, 40px); }
  .reel-hud span:first-child { display: inline-flex; align-items: center; gap: 8px; }
  .reel-hud b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
  .reel-copy { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 30px; text-align: center; pointer-events: none; }
  .reel-title { font-size: clamp(3rem, 9vw, 8.4rem); text-shadow: 0 10px 60px rgba(0,0,0,.6); }
  .reel-play {
    pointer-events: auto; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 26px 0 8px; border: 0; border-radius: 999px;
    background: rgba(6,5,5,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
    font-weight: 600; font-size: 1.05rem;
  }
  .reel-play i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); }
  .reel-play i svg { width: 16px; height: 16px; margin-left: 3px; }
  .reel-play:hover { background: var(--red); }
  .reel-play:hover i { background: var(--black); }

  /* ---------- Video-Buttons ---------- */
  .vbtn { position: relative; overflow: hidden; isolation: isolate; }
  .vbtn > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; filter: saturate(.9) brightness(.8); }
  .vbtn > svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
  .pill i.vbtn { background: #000; box-shadow: 0 0 0 2px rgba(0,0,0,.35); width: 44px; height: 44px; }
  .badge i.vbtn { background: #000; box-shadow: 0 0 0 2px var(--red), 0 0 30px rgba(227,23,10,.6); }

  /* Leistungen: rundes Video pro Zeile, Hover füllt die Zeile */
  .services li { isolation: isolate; overflow: hidden; }
  .svc-dot { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; align-self: center; position: relative; box-shadow: 0 0 0 1.5px rgba(244,241,239,.2); transition: box-shadow .4s; }
  .svc-dot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.85); }
  .services li:hover .svc-dot { box-shadow: 0 0 0 2px var(--red), 0 0 24px rgba(227,23,10,.6); }
  .svc-fill { position: absolute; inset: 0; z-index: -1; clip-path: circle(0% at calc(100% - 32px) 50%); transition: clip-path .9s var(--ease); }
  .svc-fill video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(.5); }
  .svc-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,5,5,.9), rgba(227,23,10,.35)); mix-blend-mode: multiply; }
  .services li:hover .svc-fill { clip-path: circle(150% at calc(100% - 32px) 50%); }
  .services li { padding-inline: 4px; }

  /* Arbeiten: YouTube-Vorschau beim Hover */
  .card-preview { position: absolute; inset: -12% -12%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1s; }
  .card-preview.on { opacity: 1; }
  .card-preview iframe { width: 100%; height: 100%; border: 0; }


  /* ---------- 22 Jahre ---------- */
  .years-sec { position: relative; isolation: isolate; }
  .ys-stage { position: relative; height: 100svh; overflow: hidden; display: grid; place-items: center; }
  .ys-strip { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 0; opacity: .55; }
  .ys-track {
    display: flex; gap: 0; width: max-content; padding: 22px 0;
    background:
      radial-gradient(circle, transparent 4px, transparent 4px) ,
      #0a0606;
    border-block: 1px solid rgba(244,241,239,.08);
    position: relative;
  }
  .ys-track::before, .ys-track::after {
    content: ""; position: absolute; left: 0; right: 0; height: 12px;
    background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(244,241,239,.28) 10px 22px, transparent 22px 32px);
    -webkit-mask: linear-gradient(#000, #000); border-radius: 2px;
  }
  .ys-track::before { top: 5px; } .ys-track::after { bottom: 5px; }
  .ys-frame { position: relative; width: clamp(180px, 22vw, 320px); aspect-ratio: 16 / 10; margin: 0 6px; overflow: hidden; border-radius: 4px;
    background: linear-gradient(160deg, var(--red-hot), var(--red-deep)); }
  .ys-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply; }
  .ys-frame span { position: absolute; left: 8px; bottom: 6px; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: rgba(244,241,239,.85); }
  .ys-ring { position: absolute; width: min(118vmin, 980px); height: auto; z-index: 1; overflow: visible; }
  .ys-ring line { stroke: rgba(244,241,239,.35); stroke-width: 1.5; }
  .ys-ring line.b { stroke: var(--red); stroke-width: 3; }
  .ys-ring text { fill: rgba(244,241,239,.55); font-family: "JetBrains Mono", monospace; font-size: 15px; letter-spacing: .1em; }
  .ys-ring-in { fill: none; stroke: rgba(227,23,10,.35); stroke-width: 1.5; stroke-dasharray: 4 10; }
  .ys-center { position: relative; z-index: 3; display: grid; justify-items: center; }
  .ys-count {
    display: flex; font-weight: 900; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; font-stretch: 100%;
    font-size: clamp(11rem, 40vmin, 30rem); height: 1em;
    filter: drop-shadow(0 0 40px rgba(227,23,10,.45));
  }
  .odo { display: block; height: 1em; overflow: hidden; width: .64em; }
  .odo .col { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.34,1.56,.64,1); will-change: transform; }
  .odo .col span { display: block; height: 1em; line-height: 1; text-align: center; width: .64em;
    background: linear-gradient(180deg, #fff 0%, #ffb3a8 30%, var(--red) 60%, var(--red-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ys-label { margin: .4em 0 0; font-family: var(--mono); font-size: clamp(.8rem, 1.4vw, 1rem); letter-spacing: .3em; text-transform: uppercase; color: rgba(244,241,239,.75); }
  .ys-words { position: absolute; z-index: 4; left: 0; right: 0; top: clamp(90px, 14vh, 150px); height: 1.2em; text-align: center;
    font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; font-size: clamp(1.6rem, 4.6vw, 3.8rem); line-height: 1.1; }
  .yw { position: absolute; left: 0; right: 0; opacity: 0; }
  .yw .c { display: inline-block; }
  .ys-hud { position: absolute; z-index: 4; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(56px, 8vh, 80px);
    display: flex; justify-content: space-between; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; color: rgba(244,241,239,.6); }
  .ys-hud > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--red-hot); }
  .ys-hud b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
  .ys-flash { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(227,23,10,.6) 40%, transparent 70%); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
  @media (max-width: 760px) { .ys-hud > span:last-child { display: none; } .ys-ring { width: 150vmin; } }

  /* Über mich ohne Zahl */
  .about-side { display: grid; gap: 18px; align-content: center; }
  .about-since { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); }
  .about-big { font-weight: 900; letter-spacing: -.05em; text-transform: uppercase; line-height: .86; font-size: clamp(4rem, 10vw, 9rem); }
  .about-big em { font-style: normal; color: var(--red); }

  /* ---------- Szenen-Labels ---------- */
  .scene {
    display: flex; align-items: center; gap: 16px; margin-bottom: clamp(26px, 4vw, 44px);
    font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: rgba(244,241,239,.5);
  }
  .scene span:first-child { color: var(--red-hot); }
  .scene i { flex: 1; height: 1px; background: var(--line); }

  /* ---------- Statement ---------- */
  .statement-sec { padding: clamp(100px, 14vw, 190px) 0 clamp(70px, 9vw, 120px); }
  .big-fill {
    margin: 0; max-width: 18em; font-weight: 700; letter-spacing: -.035em; line-height: 1.08;
    font-size: clamp(2.2rem, 5.4vw, 5rem);
  }
  .big-fill .w { display: inline-block; }
  .big-fill .hl { color: var(--red); }

  /* ---------- Laufband ---------- */
  .ticker { overflow: hidden; border-block: 1px solid var(--line); padding: clamp(16px, 2vw, 26px) 0; }
  .ticker-row { display: flex; width: max-content; }
  .ticker-track, .ft-track { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; }
  .ticker-track span { padding: 0 .4em; font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.05; }
  .ticker-track span.o { color: transparent; -webkit-text-stroke: 1.5px rgba(244,241,239,.55); }
  .ticker-track b, .ft-track b { color: var(--red); font-size: clamp(1.4rem, 3vw, 2.6rem); }

  /* ---------- Arbeiten: gestapelte Karten ---------- */
  .stack { display: grid; gap: clamp(20px, 3vw, 40px); }
  .card { position: sticky; top: calc(90px + var(--i) * 18px); height: min(76svh, 760px); }
  .card-btn {
    position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; text-align: left;
    border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden; isolation: isolate; background: #120c0c;
    box-shadow: 0 0 0 1px var(--line) inset, 0 -30px 60px -20px rgba(0,0,0,.8);
    transform-origin: center top;
  }
  .card-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
  .card-btn:hover img { transform: scale(1.04); }
  .card-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6,5,5,.92) 0%, rgba(6,5,5,.2) 50%, rgba(6,5,5,.45) 100%); }
  .card-hud {
    position: absolute; top: clamp(18px, 2.4vw, 30px); left: clamp(20px, 2.8vw, 40px); right: clamp(20px, 2.8vw, 40px);
    display: flex; justify-content: space-between; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; color: rgba(244,241,239,.8);
  }
  .card-hud span:first-child { display: inline-flex; align-items: center; gap: 8px; }
  .card-hud b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
  .card-corners { position: absolute; inset: clamp(12px, 1.6vw, 20px); pointer-events: none;
    background:
      linear-gradient(var(--red), var(--red)) top left / 22px 1.5px no-repeat, linear-gradient(var(--red), var(--red)) top left / 1.5px 22px no-repeat,
      linear-gradient(var(--red), var(--red)) top right / 22px 1.5px no-repeat, linear-gradient(var(--red), var(--red)) top right / 1.5px 22px no-repeat,
      linear-gradient(var(--red), var(--red)) bottom left / 22px 1.5px no-repeat, linear-gradient(var(--red), var(--red)) bottom left / 1.5px 22px no-repeat,
      linear-gradient(var(--red), var(--red)) bottom right / 22px 1.5px no-repeat, linear-gradient(var(--red), var(--red)) bottom right / 1.5px 22px no-repeat;
    opacity: .8; }
  .card-meta { position: absolute; left: clamp(20px, 2.8vw, 40px); right: 120px; bottom: clamp(22px, 3vw, 44px); }
  .card-idx { display: block; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: rgba(244,241,239,.55); margin-bottom: 14px; }
  .card-kind { display: block; color: var(--red-hot); font-weight: 600; margin-bottom: 6px; }
  .card-title { display: block; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; line-height: .9; font-size: clamp(2.6rem, 8vw, 8rem); }
  .card-client { display: block; margin-top: 10px; color: rgba(244,241,239,.7); font-size: 1.05rem; }
  .card-play {
    position: absolute; right: clamp(20px, 2.8vw, 40px); bottom: clamp(22px, 3vw, 44px);
    display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--red); color: var(--white);
    box-shadow: 0 0 40px rgba(227,23,10,.55); transition: transform .5s var(--ease);
  }
  .card-play svg { width: 22px; height: 22px; margin-left: 4px; }
  .card-btn:hover .card-play { transform: scale(1.12); }

  /* Rotierendes Showreel-Badge */
  .badge { position: relative; width: 124px; height: 124px; padding: 0; border: 0; background: none; color: var(--white); flex-shrink: 0; }
  .badge svg { width: 100%; height: 100%; animation: spin 14s linear infinite; }
  .badge text { font-family: var(--mono); font-size: 9.6px; letter-spacing: .18em; fill: rgba(244,241,239,.85); }
  .badge i { position: absolute; inset: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--red); transition: transform .5s var(--ease); }
  .badge i svg { width: 18px; height: 18px; margin-left: 3px; animation: none; }
  .badge:hover i { transform: scale(1.12); }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---------- Ablauf ---------- */
  .process { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); }
  .process-intro { position: sticky; top: 130px; align-self: start; }
  .rec-timer {
    display: grid; place-items: center; align-content: center; gap: 4px; width: 132px; height: 132px; margin-top: 40px; border-radius: 50%;
    box-shadow: 0 0 0 1.5px var(--red) inset, 0 0 40px rgba(227,23,10,.25);
    font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  }
  .rec-timer span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--red-hot); }
  .rec-timer b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
  .plist { position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(28px, 4vw, 48px); }
  .pline { position: absolute; left: 0; top: 8px; bottom: 8px; width: 1.5px; background: var(--line); }
  .pline i { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 12px var(--red); }
  .plist li { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 32px); padding: 0 0 clamp(40px, 6vw, 72px); }
  .pn { font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; color: var(--red); }
  .plist h3 { margin: 4px 0 8px; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; text-transform: uppercase; }
  .plist p { margin: 0; color: var(--grey); font-weight: 300; max-width: 30em; }

  /* ---------- Finale ---------- */
  .finale { height: 220svh; }
  .finale-inner { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; align-content: center; gap: 22px; overflow: hidden; }
  .finale-word { width: min(88vw, 1200px); height: auto; overflow: visible; }
  .finale-sub { margin: 0; font-family: var(--mono); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,241,239,.6); }

  /* ---------- Footer-Laufband ---------- */
  .foot-ticker { overflow: hidden; padding: 10px 0 26px; }
  .ft-track span { padding: 0 .35em; font-weight: 800; text-transform: uppercase; letter-spacing: -.04em; line-height: 1; font-size: clamp(4rem, 13vw, 12rem); color: transparent; -webkit-text-stroke: 1.5px rgba(244,241,239,.22); }
  .foot-ticker .ft-row { display: flex; width: max-content; }

  /* ---------- Arbeiten (alt) ---------- */
  .works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
  .work:first-child { grid-column: 1 / -1; }
  .work button {
    position: relative; display: block; width: 100%; padding: 0; border: 0; text-align: left;
    aspect-ratio: 16 / 10; border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; isolation: isolate;
    background: linear-gradient(160deg, var(--red-hot), var(--red-deep) 80%);
  }
  .work:first-child button { aspect-ratio: 21 / 9; }
  .work img {
    position: absolute; inset: -8% 0; width: 100%; height: 116%; max-width: none; object-fit: cover; z-index: -2;
    filter: grayscale(1) contrast(1.3); mix-blend-mode: multiply;
    transition: filter .7s var(--ease);
  }
  .work button:hover img, .work button:focus-visible img { filter: grayscale(0) contrast(1.05); mix-blend-mode: normal; }
  .work button::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(6,5,5,.88) 0%, rgba(6,5,5,.15) 55%, transparent 100%);
  }
  .work-meta { position: absolute; left: clamp(20px, 2.8vw, 40px); right: 90px; bottom: clamp(18px, 2.6vw, 36px); }
  .work-kind { display: block; color: var(--red-hot); font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
  .work-title { display: block; font-weight: 800; letter-spacing: -.035em; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: .95; }
  .work:first-child .work-title { font-size: clamp(2.2rem, 6vw, 6rem); }
  .work-client { display: block; margin-top: 8px; color: rgba(244,241,239,.7); }
  .work-play {
    position: absolute; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px);
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: rgba(244,241,239,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
    transition: background-color .3s, transform .5s var(--ease);
  }
  .work-play svg { width: 18px; height: 18px; margin-left: 3px; }
  .work button:hover .work-play { background: var(--red); transform: scale(1.12); }

  /* ---------- Leistungen ---------- */
  .services-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
  .services-intro { position: sticky; top: 120px; }
  .services-intro p { color: var(--grey); font-weight: 300; font-size: 1.12rem; max-width: 24em; margin: 24px 0 32px; }
  .services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .services li {
    position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px;
    padding: 26px 0; border-bottom: 1px solid var(--line);
  }
  .services li::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
    background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
  }
  .services li:hover::after { transform: scaleX(1); }
  .services h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.05; transition: color .3s; }
  .services li:hover h3 { color: var(--red-hot); }
  .services p { grid-column: 1 / -1; margin: 0; color: var(--grey); font-weight: 300; max-width: 34em; }
  .services > li > svg { display: none; }
  .services svg.x { width: 22px; height: 22px; color: var(--grey); align-self: center; transition: transform .5s var(--ease), color .3s; }
  .services li:hover svg { color: var(--red-hot); transform: rotate(45deg); }

  /* ---------- Über mich ---------- */
  .about-card {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 80px); align-items: center;
    padding: clamp(32px, 6vw, 88px); border-radius: clamp(16px, 2vw, 28px);
    background: linear-gradient(140deg, rgba(24,16,16,.85), rgba(10,8,8,.92));
    box-shadow: 0 0 0 1px var(--line) inset;
  }
  .about-card .years { margin: 0; font-weight: 900; letter-spacing: -.06em; line-height: .8; font-size: clamp(8rem, 22vw, 19rem); font-variant-numeric: tabular-nums; }
  .years span { background: linear-gradient(180deg, var(--red-hot), var(--red-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .about-card .years small { display: block; margin-top: 18px; font-size: 1.1rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--grey); }
  .about-card .statement { margin: 0 0 24px; font-weight: 700; letter-spacing: -.03em; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.08; color: var(--white); }
  .about-card p { margin: 0 0 16px; color: rgba(244,241,239,.75); font-weight: 300; font-size: 1.1rem; max-width: 34em; }
  .facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; }
  .facts li { padding: 8px 16px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line) inset; font-size: .95rem; color: rgba(244,241,239,.85); }

  /* ---------- Kontakt ---------- */
  .contact { min-height: 100svh; display: grid; align-content: center; text-align: center; padding: 140px 0 80px; }
  .contact h2 { font-size: clamp(3.2rem, 11vw, 10rem); }
  .contact p { max-width: 30em; margin: 28px auto 40px; color: rgba(244,241,239,.78); font-weight: 300; font-size: 1.18rem; }
  .contact .hero-actions { margin-bottom: 48px; }
  .socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
  .socials a {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; text-decoration: none;
    background: rgba(14,11,11,.6); box-shadow: 0 0 0 1px var(--line) inset;
    font-weight: 500; transition: box-shadow .3s;
  }
  .socials a:hover { box-shadow: 0 0 0 1px var(--red) inset; }
  .socials svg { width: 18px; height: 18px; }

  footer { padding: 26px 0 34px; border-top: 1px solid var(--line); color: var(--grey); font-size: .92rem; background: var(--black); }
  footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; }
  footer nav { display: flex; gap: 22px; }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--white); }

  /* ---------- Lightbox ---------- */
  .lightbox { padding: 0; border: 0; color: var(--white); width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: rgba(6,5,5,.95); }
  .lightbox[open] { position: fixed; inset: 0; display: grid; place-items: center; }
  .lightbox::backdrop { background: transparent; }
  .lb-inner { width: min(1200px, 94vw); }
  .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
  .lb-title { font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: -.02em; }
  .lb-actions { display: flex; gap: 10px; }
  .lb-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: rgba(244,241,239,.1); text-decoration: none; font-weight: 500; }
  .lb-btn:hover { background: var(--red); }
  .lb-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
  .lb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .services-grid, .about-card { grid-template-columns: 1fr; }
    .head .badge { order: 2; }
    .services-intro { position: static; }
    .process { grid-template-columns: 1fr; }
    .process-intro { position: static; }
  }
  @media (max-width: 760px) {
    .reel-frame { clip-path: inset(18% 6% round 16px); }
    .svc-dot { width: 52px; height: 52px; }
    .burger { display: block; }
    .nav-links {
      position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 26px;
      background: rgba(6,5,5,.97);
      opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
    }
    .nav-links a { font-size: 2.2rem; font-weight: 700; color: var(--white); }
    .menu-open .nav-links { opacity: 1; visibility: visible; }
    .works { grid-template-columns: 1fr; }
    .work:first-child button, .work button { aspect-ratio: 4 / 3; }
    .lb-open-yt { display: none; }
    .hud-meta, .hc.tl, .hc.tr { display: none; }
    .hud-rec { left: 40px; }
    .badge { width: 96px; height: 96px; }
    .badge i { inset: 24px; }
    .card { height: 64svh; top: calc(80px + var(--i) * 12px); }
    .card-meta { right: 96px; }
    .card-play { width: 58px; height: 58px; }
  }
  @media (max-width: 520px) {
    .tiles { gap: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }


/* =====================================================================
   VERSION 4: mehrseitig, High-End-Feinschliff
   ===================================================================== */

/* Schrift: breite Archivo für Headlines, wie ein Filmtitel */
h1, h2, .hero-title, .card-title, .ticker-track span, .ft-track span, .about-big, .yw, .reel-title,
.ph-title, .count-big, .svc-title, .foot-big, .stats b, .wr-title, .cform-done h2, .value-k, .plist h3, .pn {
  font-stretch: var(--wide);
}
body { font-stretch: 100%; }
.services h3, .clients li { font-stretch: 110%; }

/* Kopfzeile */
.nav-links a[aria-current="page"] { color: var(--white); }
.nav-links a[aria-current="page"]::after { content: ""; display: block; height: 2px; margin-top: 4px; background: var(--red); border-radius: 2px; }
.nav .nav-cta { padding: 10px 18px; border-radius: 999px; background: var(--red); color: var(--white) !important; font-weight: 600; }
.nav .nav-cta:hover { background: var(--white); color: var(--black) !important; }
.nav.is-hidden { transform: translateY(-110%); }
.nav { transition: transform .5s var(--ease), background-color .4s; }
@media (max-width: 760px) {
  .nav-links li { overflow: hidden; }
  .nav-links .nav-cta { font-size: 1.2rem !important; padding: 14px 26px; }
}

/* Eigener Cursor */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor .cursor {
    display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red);
    transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, box-shadow .3s;
  }
  .cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: transparent; box-shadow: 0 0 0 1.5px var(--white); }
  .cursor.is-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--red); box-shadow: 0 0 40px rgba(227,23,10,.6); }
  .cursor-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--white); opacity: 0; transition: opacity .2s; }
  .cursor.is-label .cursor-label { opacity: 1; }
}

/* Seitenübergang */
.pt { position: fixed; inset: 0; z-index: 250; display: none; pointer-events: none; overflow: hidden; }
.pt-in .pt { display: block; }
.pt-black { position: absolute; inset: 0; background: var(--black); opacity: 0; }
.pt-in .pt-black { opacity: 1; }
.pt-iris { position: absolute; overflow: visible; }
.pt-label { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 14px; opacity: 0; }
.pt-in .pt-label { opacity: 1; }
.pt-rec { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; color: var(--red-hot); }
.pt-rec b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
.pt-name { font-weight: 900; font-stretch: var(--wide); text-transform: uppercase; letter-spacing: -.03em; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1; color: var(--white); }

/* Kopfbereich der Unterseiten */
.page-hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; padding: 140px 0 clamp(90px, 14vh, 150px); overflow: hidden; }
.ph-title { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.045em; line-height: .84; font-size: clamp(3.2rem, 12vw, 12.5rem); perspective: 900px; }
.ph-title.small { font-size: clamp(2.6rem, 4.9vw, 5.2rem); }
.ph-title em { font-style: normal; color: var(--red); }
.ph-line { display: block; overflow: hidden; padding-bottom: .04em; }
.ph-line > span { display: inline-block; }
.ph-title .c { display: inline-block; transform-origin: 50% 100%; }
.ph-sub { max-width: 32em; margin: clamp(24px, 3vw, 36px) 0 0; font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 300; color: rgba(244,241,239,.82); }
.ph-hint { margin: 18px 0 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; color: var(--red-hot); }
.page-hero .scroll-cue { left: auto; right: var(--gutter); translate: 0 0; }

/* Zahlen */
.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(28px, 4vw, 56px); list-style: none; margin: 0 0 clamp(26px, 4vh, 40px); padding: 0; }
.stats li { display: grid; justify-items: center; gap: 2px; }
.stats b { font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; line-height: 1; color: var(--white); }
.stats span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,241,239,.6); max-width: 18em; text-align: center; }
.stats.big { justify-content: space-between; gap: 40px; }
.stats.big li { justify-items: start; }
.stats.big b { font-size: clamp(4rem, 9vw, 9rem); background: linear-gradient(180deg, #fff, #ffb3a8 35%, var(--red) 70%, var(--red-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats.big span { text-align: left; font-size: .8rem; }
.stats-sec { padding: clamp(60px, 9vw, 120px) 0; }

.more-row { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 72px); }
.link-arrow.big { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; gap: 14px; border-bottom: 1.5px solid var(--red); padding-bottom: 6px; }

/* CTA-Band */
.cta-band { position: relative; isolation: isolate; min-height: 90svh; display: grid; align-content: center; text-align: center; padding: 120px 0; overflow: hidden; }
.cta-band h2 { font-size: clamp(3.2rem, 10vw, 9.5rem); }
.cta-band p { max-width: 30em; margin: 26px auto 38px; font-weight: 300; font-size: 1.15rem; color: rgba(244,241,239,.82); }
.cta-band .hero-actions { justify-content: center; }
.cta-band .scene { text-align: left; }

/* Footer */
.foot { position: relative; background: #050404; border-top: 1px solid var(--line); padding: clamp(70px, 10vw, 130px) 0 64px; overflow: hidden; }
.foot.mini { padding: 22px 0 64px; }
.foot-kicker { margin: 0 0 18px; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); }
.foot-big { display: inline-block; text-decoration: none; font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; font-size: clamp(3.2rem, 11vw, 11rem); }
.foot-big em { font-style: normal; color: var(--red); transition: color .4s; }
.fb-line { display: block; overflow: hidden; }
.fb-line > span { display: inline-flex; align-items: center; gap: .15em; transition: padding .7s var(--ease); }
.foot-big:hover .fb-line:first-child > span { padding-left: .18em; }
.foot-big:hover em { color: var(--white); }
.fb-dot { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: var(--red); box-shadow: 0 0 30px var(--red); transition: transform .6s var(--ease); }
.foot-big:hover .fb-dot { transform: scale(1.4) translateX(.2em); }
.foot .foot-ticker { margin-top: clamp(50px, 7vw, 90px); }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-top: 40px; padding-bottom: 46px; border-top: 1px solid var(--line); }
.foot-brand p { color: var(--grey); font-weight: 300; max-width: 22em; margin: 18px 0 0; }
.foot-col { display: grid; align-content: start; gap: 10px; }
.foot-col a, .direct a { text-decoration: none; color: rgba(244,241,239,.82); width: fit-content; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.foot-col a:hover, .direct a:hover { color: var(--white); background-size: 100% 1.5px; }
.foot-h { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--grey); font-size: .88rem; font-family: var(--mono); letter-spacing: .06em; }
.foot-bottom a { text-decoration: none; }
@media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* Arbeiten: Werkliste */
.wlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wrow {
  position: relative; width: 100%; display: grid; grid-template-columns: 70px 1fr auto 56px; align-items: center; gap: 24px;
  padding: clamp(26px, 3.4vw, 46px) 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; text-decoration: none; color: inherit;
  isolation: isolate; overflow: hidden;
}
.wrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(227,23,10,.18), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.wrow:hover::before, .wrow:focus-visible::before { transform: scaleX(1); }
.wr-idx { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--red-hot); }
.wr-main { display: grid; gap: 6px; }
.wr-title { font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .9; font-size: clamp(2rem, 5.4vw, 5.2rem); transition: transform .7s var(--ease), color .3s; }
.wrow:hover .wr-title { transform: translateX(.12em); color: var(--white); }
.wr-client { color: var(--grey); font-weight: 400; }
.wr-kind { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,241,239,.6); }
.wr-go { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(244,241,239,.25); transition: background-color .4s, box-shadow .4s, transform .6s var(--ease); }
.wr-go svg { width: 18px; height: 18px; }
.wrow:hover .wr-go { background: var(--red); box-shadow: 0 0 30px rgba(227,23,10,.6); transform: rotate(-12deg) scale(1.08); }
.wr-thumb { display: none; }
.wrow.more .wr-title { color: transparent; -webkit-text-stroke: 1.5px rgba(244,241,239,.6); }
.wrow.more:hover .wr-title { color: var(--white); -webkit-text-stroke-color: transparent; }
.wfloat { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: clamp(300px, 30vw, 460px); aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  clip-path: inset(50% 50% 50% 50% round 10px); box-shadow: 0 40px 100px rgba(0,0,0,.6); filter: url(#m4m-distort); }
.wfloat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.wfloat-hud { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--white); }
.wfloat-hud b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
@media (hover: none), (max-width: 860px) {
  .wfloat { display: none; }
  .wrow { grid-template-columns: 1fr 52px; gap: 14px 18px; }
  .wr-idx, .wr-kind { grid-column: 1; }
  .wr-thumb { display: block; grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
  .wr-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .wr-main { grid-column: 1 / -1; }
  .wr-idx { grid-row: 2; }
  .wr-kind { grid-row: 4; align-self: center; }
  .wr-go { grid-column: 2; grid-row: 4; }
}

/* 300+ Kunden */
.count-sec { position: relative; isolation: isolate; padding: clamp(100px, 14vw, 180px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.count-big { line-height: .8; }
.count-big b { display: inline-block; font-weight: 900; letter-spacing: -.06em; font-size: clamp(9rem, 32vw, 30rem); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #ffb3a8 32%, var(--red) 64%, var(--red-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 60px rgba(227,23,10,.35)); transform-origin: left bottom; }
.count-text { max-width: 34em; margin: 26px 0 clamp(50px, 7vw, 90px); font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 300; color: rgba(244,241,239,.85); }

/* Leistungen: geteilter Bildschirm */
.svc-split { padding: clamp(80px, 10vw, 130px) 0 clamp(40px, 6vw, 80px); }
.svc-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.svc-media { position: sticky; top: 110px; }
.svc-screen { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - 150px); width: 100%; border-radius: 18px; overflow: hidden; background: #0b0707; box-shadow: 0 0 0 1px var(--line); }
.svc-vids { position: absolute; inset: 0; }
.svc-vids video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.svc-vids video.on { opacity: 1; }
.svc-vids::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,5,5,.75), transparent 45%, rgba(6,5,5,.35)); }
.svc-corners { position: absolute; inset: 16px; z-index: 2; pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) top left / 24px 1.5px no-repeat, linear-gradient(var(--white), var(--white)) top left / 1.5px 24px no-repeat,
    linear-gradient(var(--white), var(--white)) top right / 24px 1.5px no-repeat, linear-gradient(var(--white), var(--white)) top right / 1.5px 24px no-repeat,
    linear-gradient(var(--white), var(--white)) bottom left / 24px 1.5px no-repeat, linear-gradient(var(--white), var(--white)) bottom left / 1.5px 24px no-repeat,
    linear-gradient(var(--white), var(--white)) bottom right / 24px 1.5px no-repeat, linear-gradient(var(--white), var(--white)) bottom right / 1.5px 24px no-repeat; opacity: .7; }
.svc-hud { position: absolute; left: 30px; right: 30px; top: 28px; z-index: 3; display: flex; justify-content: space-between; gap: 12px; margin: 0;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,241,239,.9); }
.svc-hud > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.svc-hud b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
.svc-now { display: inline-block; color: var(--red-hot); }
.svc-bar { position: absolute; left: 30px; right: 30px; bottom: 26px; height: 2px; z-index: 3; background: rgba(244,241,239,.2); }
.svc-bar i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 12px var(--red); }
.svc-panel { min-height: 72svh; display: grid; align-content: center; padding: 40px 0; border-bottom: 1px solid var(--line); }
.svc-no { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; color: var(--red-hot); margin-bottom: 18px; }
.svc-title { margin: 0 0 18px; font-size: clamp(2.1rem, 3.9vw, 3.9rem); overflow-wrap: anywhere; hyphens: auto; }
.svc-panel p { margin: 0 0 24px; max-width: 30em; color: rgba(244,241,239,.78); font-weight: 300; font-size: 1.12rem; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.svc-tags li { padding: 7px 14px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); font-size: .9rem; color: rgba(244,241,239,.85); }
@media (max-width: 860px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-media { top: 74px; z-index: 5; }
  .svc-screen { aspect-ratio: 16 / 9; }
  .svc-panel { min-height: 60svh; }
}

/* Über mich */
.story-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.story-p { max-width: 34em; margin: 26px 0 0; color: rgba(244,241,239,.8); font-weight: 300; font-size: 1.15rem; }
.story-frame { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line); }
.story-frame .vbg { z-index: 0; }
.story-frame .svc-hud { top: auto; bottom: 26px; }
.values h2 { margin-bottom: clamp(30px, 5vw, 60px); }
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.value { padding: 30px 28px 34px; border-radius: 16px; background: rgba(18,13,13,.75); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .4s, transform .6s var(--ease); }
.value:hover { box-shadow: 0 0 0 1px var(--red), 0 20px 60px -20px rgba(227,23,10,.45); transform: translateY(-6px); }
.value-k { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.5rem; line-height: 1.05; margin-bottom: 14px; }
.value p { margin: 0; color: var(--grey); font-weight: 300; }
@media (max-width: 860px) { .story-grid, .value-grid { grid-template-columns: 1fr; } .story-frame { aspect-ratio: 4 / 5; max-height: 80svh; width: min(100%, 64svh); margin-inline: auto; } .stats.big { flex-direction: column; } }

/* Kontakt */
.contact-page { position: relative; isolation: isolate; min-height: 100svh; padding: 130px 0 70px; overflow: hidden; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.contact-intro { position: sticky; top: 120px; }
.direct { display: grid; gap: 10px; margin-top: 40px; }
.cform { position: relative; display: grid; gap: 26px; padding: clamp(26px, 3.6vw, 48px); border-radius: 22px; overflow: hidden;
  background: rgba(12,9,9,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--line), 0 40px 120px -40px rgba(0,0,0,.8); }
.cform-hud { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: rgba(244,241,239,.55); }
.cform-hud > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--red-hot); }
.cform-hud b { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(1) infinite; }
.cform fieldset { border: 0; margin: 0; padding: 0; }
.cform legend { margin-bottom: 12px; font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(244,241,239,.22); font-size: .95rem; transition: background-color .3s, box-shadow .3s, color .3s; }
.chip:hover span { box-shadow: 0 0 0 1px var(--white); }
.chip input:checked + span { background: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 24px rgba(227,23,10,.5); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--red-hot); outline-offset: 3px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; padding: 26px 0 10px; border: 0; border-bottom: 1.5px solid rgba(244,241,239,.25); background: transparent;
  color: var(--white); font: inherit; font-size: 1.08rem; outline: none; transition: border-color .3s; resize: vertical;
}
.field label { position: absolute; left: 0; top: 24px; color: var(--grey); pointer-events: none; transition: transform .35s var(--ease), color .3s, font-size .35s var(--ease); transform-origin: left top; }
.field input:focus, .field textarea:focus { border-color: var(--red); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-22px) scale(.8); color: var(--red-hot); }
.ferr { display: block; min-height: 0; margin-top: 6px; color: #ff7a6e; font-size: .88rem; }
.ferr:empty { display: none; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--grey); font-size: .92rem; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); }
.consent a { color: var(--white); }
.pill.send { justify-self: start; border: 0; cursor: pointer; }
.form-status { margin: 0; color: var(--grey); }
.form-status:empty { display: none; }
.cform-done { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: 40px;
  background: radial-gradient(circle at 50% 38%, #3a0b07, #070505 62%); }
.cform-done[hidden] { display: none; }
.done-iris { width: 120px; height: 120px; margin-bottom: 10px; filter: drop-shadow(0 0 30px rgba(227,23,10,.6)); }
.cform-done h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); }
.cform-done p { max-width: 24em; margin: 0; color: rgba(244,241,239,.85); }
@media (max-width: 860px) { .contact-grid, .frow { grid-template-columns: 1fr; } .contact-intro { position: static; } }

/* Hover-Verzerrung über Bildern */
[data-distort]:hover img { filter: url(#m4m-distort); }

/* Spam-Schutz: unsichtbares Feld */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* =====================================================================
   GLOW
   ===================================================================== */
/* Lichtschein folgt der Maus, Kante glüht mit */
[data-glow] { position: relative; isolation: isolate; --mx: 50%; --my: 50%; --glow: 0; }
[data-glow]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,74,61,.16), transparent 45%);
  opacity: var(--glow); transition: opacity .4s;
}
[data-glow]::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,90,70,.95), rgba(227,23,10,.35) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--glow); transition: opacity .4s;
}

/* Scroll-Fortschritt oben */
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--red-deep), var(--red), var(--red-hot)); transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 12px rgba(255,74,61,.9), 0 0 28px rgba(227,23,10,.6); }

/* Rote Buttons: Lichthof */
.pill, .nav .nav-cta { position: relative; }
.pill::after, .nav .nav-cta::after {
  content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,60,40,.55), transparent); filter: blur(10px); opacity: .55;
  animation: halo 3.2s ease-in-out infinite; transition: opacity .4s, inset .5s var(--ease);
}
.pill:hover::after, .nav .nav-cta:hover::after { opacity: 1; inset: -14px; }
@keyframes halo { 50% { opacity: .9; transform: scale(1.06); } }

/* Rote Wörter in Überschriften glühen leicht */
/* nur wo der Text nicht in einer Masken-Zeile steckt, sonst entsteht ein Kasten */
.about-big em { text-shadow: 0 0 18px rgba(227,23,10,.55), 0 0 60px rgba(227,23,10,.35); }
.count-big b, .stats.big b, .ys-count { filter: drop-shadow(0 0 40px rgba(227,23,10,.45)); }
.wr-go, .card-play, .reel-play i { box-shadow: 0 0 0 0 rgba(227,23,10,0); }
.card-play { animation: playglow 2.6s ease-in-out infinite; }
@keyframes playglow { 50% { box-shadow: 0 0 46px 6px rgba(227,23,10,.6); } }

@media (prefers-reduced-motion: reduce) {
  .pill::after, .nav .nav-cta::after, .card-play { animation: none; }
}

.card[data-glow] { border-radius: clamp(14px, 1.6vw, 22px); }
.card[data-glow]::before, .card[data-glow]::after { z-index: 4; }

/* Kopfzeile: Logo links, alles andere rechts (Menü-Symbol am Handy ganz rechts) */
.nav .logo { margin-right: auto; }
.nav .burger { margin-right: -8px; }
@media (max-width: 760px) {
  .nav-links { background: #060505 !important; gap: 22px !important; }
  .nav-links li.nav-cta-li { overflow: visible; margin-top: 14px; }
}

/* Ausgeglichene Zeilen: keine einzelnen Wörter in der letzten Zeile */
h1, h2, h3, .hero-title, .ph-title, .reel-title, .svc-title, .value-k, .foot-big { text-wrap: balance; }
p, li, .ph-sub, .hero-sub, .count-text, .story-p { text-wrap: pretty; }
.hero-sub, .ph-sub, .cta-band p, .contact p { text-wrap: balance; }

/* Zahlenreihe im Hero: drei gleich breite Spalten */
.hero .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(100%, 560px); }
.hero .stats li { padding: 4px 8px; }
.hero .stats li + li { border-left: 1px solid var(--line); }
.hero .stats span { max-width: none; }
@media (max-width: 520px) {
  .hero-sub { font-size: 1.02rem; max-width: 22em; }
  .hero .stats b { font-size: 1.7rem; }
  .hero .stats span { font-size: .6rem; letter-spacing: .08em; }
}

/* Handy: Kundenleiste mittig wie der Hero */
@media (max-width: 760px) {
  .clients .wrap { justify-content: center; text-align: center; }
  .clients ul { justify-content: center; }
}

.clients li.more { color: var(--red-hot); font-weight: 500; font-stretch: 100%; font-size: clamp(1rem, 1.6vw, 1.2rem); align-self: center; }
@media (max-width: 760px) {
  .clients ul { gap: 10px 22px; }
  .clients li { font-size: 1.15rem; }
  /* Kamera-HUD am Rand würde am Handy Text verdecken */
  .hud { display: none; }
}
/* Kundenleiste: mittig, alles in einer Reihe */
.clients .wrap { flex-direction: column; justify-content: center; text-align: center; gap: 18px; }
.clients ul { justify-content: center; align-items: baseline; gap: 12px clamp(20px, 3.2vw, 48px); }
.clients li { font-size: clamp(1.15rem, 2vw, 1.7rem); }

/* =====================================================================
   Handy-Menü: Agentur-Menü mit Nummern, Linien, Untertiteln
   ===================================================================== */
.nl-i, .nl-sub, .nl-arrow, .nav-extra, .nav-bg { display: none; }
@media (max-width: 760px) {
  /* Kopfzeile darf kein Bezugsrahmen für das feste Menü sein */
  .menu-open .nav { transform: none !important; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-links {
    justify-content: flex-start !important; align-items: stretch; gap: 0 !important;
    padding: calc(88px + env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom));
    overflow: hidden auto; overscroll-behavior: contain;
    background:
      radial-gradient(120% 60% at 100% 100%, rgba(227,23,10,.22), transparent 60%),
      radial-gradient(80% 40% at 0% 0%, rgba(227,23,10,.08), transparent 70%),
      #060505 !important;
  }
  .nav-links li.nl { position: relative; overflow: hidden; }
  .nav-links li.nl::before, .nav-links li.nl:nth-child(4)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, rgba(244,241,239,.22), rgba(244,241,239,.06));
    transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
    transition-delay: calc(.12s + var(--d) * .07s);
  }
  .nav-links li.nl:nth-child(4)::after { top: auto; bottom: 0; transition-delay: calc(.12s + 4 * .07s); }
  .menu-open .nav-links li.nl::before, .menu-open .nav-links li.nl:nth-child(4)::after { transform: scaleX(1); }

  .nav-links li.nl > a {
    display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto; align-items: center;
    column-gap: 4px; padding: 18px 0 16px; color: var(--white);
    font-size: inherit; font-weight: inherit;
  }
  .nav-links li.nl > a::after { display: none !important; }
  .nl-i { display: block; grid-row: 1 / 3; align-self: start; padding-top: .55em;
    font: 500 .68rem/1 "JetBrains Mono", monospace; letter-spacing: .08em; color: var(--red); }
  .nl-t { font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.02em;
    font-size: clamp(1.55rem, 8.1vw, 2.6rem); line-height: .95; transition: color .3s; }
  .nl-sub { display: block; grid-column: 2; margin-top: 7px;
    font: 400 .66rem/1.2 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,239,.45); }
  .nl-arrow { display: block; grid-column: 3; grid-row: 1 / 3; width: 22px; height: 22px;
    fill: none; stroke: rgba(244,241,239,.5); stroke-width: 1.6; transition: transform .4s var(--ease), stroke .3s; }
  .nav-links li.nl > a:active .nl-t, .nav-links a[aria-current="page"] .nl-t { color: var(--red); text-shadow: 0 0 28px rgba(227,23,10,.45); }
  .nav-links a[aria-current="page"] .nl-arrow, .nav-links li.nl > a:active .nl-arrow { stroke: var(--red); transform: rotate(45deg); }
  .nav-links a[aria-current="page"] .nl-sub { color: rgba(244,241,239,.7); }
  .nav-links a[aria-current="page"] .nl-sub::before { content: "● "; color: var(--red); }

  .nav-links li.nav-cta-li { margin-top: auto !important; padding-top: 28px; overflow: visible; }
  .nav-links .nav-cta { display: block; text-align: center; padding: 18px 26px !important; font-size: 1.05rem !important;
    letter-spacing: .02em; box-shadow: 0 10px 40px -10px rgba(227,23,10,.7); }
  .nav-extra { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px;
    border-top: 1px solid rgba(244,241,239,.08); }
  .nav-extra a { font: 400 .7rem/1 "JetBrains Mono", monospace !important; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(244,241,239,.55) !important; padding: 6px 0; }
  .nav-bg { display: block; position: absolute; z-index: -1; right: -34vw; bottom: 8vh; width: 96vw; aspect-ratio: 1;
    pointer-events: none; opacity: .3; filter: drop-shadow(0 0 40px rgba(227,23,10,.35)); }
  .nav-bg svg { width: 100%; height: 100%; animation: navspin 60s linear infinite; }
  @keyframes navspin { to { transform: rotate(360deg); } }
  .nav-links { isolation: isolate; }
}

/* =====================================================================
   Impressum und Datenschutz
   ===================================================================== */
.legal-hero { min-height: 0; padding: clamp(140px, 22vh, 220px) 0 clamp(30px, 5vw, 60px); }
.legal { padding-top: clamp(20px, 4vw, 50px); }
.legal a { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.legal a:hover { color: var(--red-hot); }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(30px, 5vw, 80px); }
.legal-block { padding: 26px 0 30px; border-top: 1px solid var(--line); }
.legal-block h2, .legal-text h2 { margin: 0 0 12px; line-height: 1.6; font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-hot); font-stretch: 100%; text-wrap: pretty; }
.legal-block p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: rgba(244,241,239,.86); }
.legal-text { max-width: 820px; }
.legal-text h2 { display: flex; gap: 14px; align-items: baseline; margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .8rem; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text h2 span { color: rgba(244,241,239,.4); }
.legal-text p, .legal-text li { font-size: 1.02rem; line-height: 1.7; color: rgba(244,241,239,.82); }
.legal-text p { margin: 0 0 14px; }
.legal-text ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal-text li::marker { color: var(--red); }
.legal-date { margin-top: 30px !important; font-family: var(--mono); font-size: .76rem !important; letter-spacing: .1em; color: rgba(244,241,239,.5) !important; }
.legal-hero .ph-title { font-size: clamp(2.1rem, 8.4vw, 5.2rem); }
.legal-hero .ph-line > span { white-space: nowrap; }
.legal { position: relative; background: linear-gradient(rgba(6,5,5,0), rgba(6,5,5,.94) 90px); }

/* =====================================================================
   Brand-Film: Alexanders eigene Hochformat-Clips
   ===================================================================== */
.brand-sec { position: relative; padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; }
.brand-sec::before { content: ""; position: absolute; inset: 10% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 72% 50%, rgba(227,23,10,.22), transparent 70%); }
.brand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.brand-title { margin: 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; line-height: .9;
  font-size: clamp(2.4rem, 4.4vw, 5.2rem); font-stretch: var(--wide); }
.bt-line { display: block; }
.brand-title em { font-style: normal; color: var(--red); text-shadow: 0 0 40px rgba(227,23,10,.45); }
.brand-p { max-width: 26em; margin: 26px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 300; color: rgba(244,241,239,.82); }
.brand-phones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 32px); }
.phone { position: relative; display: block; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: clamp(16px, 2vw, 26px); overflow: hidden;
  background: #0b0909; cursor: pointer; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(244,241,239,.12), 0 30px 80px -30px rgba(227,23,10,.55); }
.phone:nth-child(2) { margin-top: clamp(40px, 8vw, 110px); }
.phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent 60%, rgba(6,5,5,.6)); }
.phone-hud { position: absolute; z-index: 2; left: 14px; right: 14px; top: 12px; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: rgba(244,241,239,.85); }
.phone-hud b { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2) infinite; }
.phone-play { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--red); color: var(--white); box-shadow: 0 0 30px rgba(227,23,10,.6); transition: transform .4s var(--ease); }
.phone-play svg { width: 18px; height: 18px; margin-left: 2px; }
.phone:hover .phone-play { transform: scale(1.12); }
@media (max-width: 860px) {
  .brand-grid { grid-template-columns: 1fr; text-align: center; }
  .brand-copy .scene { justify-content: center; }
  .brand-p { margin-inline: auto; }
  .phone:nth-child(2) { margin-top: 48px; }
  .phone-play { width: 40px; height: 40px; }
}

/* Lightbox für eigene Hochformat-Videos */
.lightbox.is-video .lb-inner { width: min(94vw, calc((100dvh - 120px) * 9 / 16)); }
.lightbox.is-video .lb-frame { aspect-ratio: 9 / 16; }
.lightbox.is-video .lb-frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.lightbox.is-video .lb-open-yt { display: none; }
.lightbox.is-video .lb-title { font-size: 1rem; }
/* Nur ein Clip: ein Hochformat-Player, etwas schräg gestellt */
.brand-phones { grid-template-columns: minmax(0, 360px); justify-content: center; }
.brand-phones .phone { margin-top: 0; }
@media (max-width: 860px) { .brand-phones { grid-template-columns: minmax(0, 300px); margin-top: 8px; } }

/* Dezenter Login-Link zum Admin-Bereich */
.foot-login { color: inherit; opacity: .55; text-decoration: none; }
.foot-login:hover, .foot-login:focus-visible { opacity: 1; text-decoration: underline; }