/* ==========================================================================
   ZRO STUDIOS — Design-System
   Konzept: „Die Seite ist ein Schnitt."  Alle strukturellen Elemente stammen
   aus dem Werkzeugkasten der Postproduktion: Timecode, Spuren, Clips, Marker,
   Schnittkanten. Kein Fotomaterial nötig — die Sprache der Arbeit trägt.
   ========================================================================== */

/* --- 1. Schriften (selbst gehostet, DSGVO-konform, CSP font-src 'self') --- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-var-400_900-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexsans-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexsans-500-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plexmono-400-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plexmono-500-latin.woff2) format('woff2')}

/* --- 2. Token --- */
:root{
  /* Grundfläche — Markenwerte der bestehenden Seite, um eine Stufe erweitert */
  --bg:#0a0a0b;
  --bg-1:#101013;
  --bg-2:#17171c;
  --bg-3:#1e1e25;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);
  --line-hard:rgba(255,255,255,.16);

  --fg:#f4f4f2;
  --fg-muted:#a8a8ad;
  --fg-dim:#8b8b96;   /* 5,7:1 auf --bg — vorher 4,34:1 und damit zu schwach */

  /* Markenspannung — unverändert aus dem Logo */
  --v-rgb:178,60,255;
  --m-rgb:255,47,168;
  --v:rgb(var(--v-rgb));
  --m:rgb(var(--m-rgb));
  --ink:#0a0a0b;
  --grad:linear-gradient(100deg,var(--v),var(--m));
  --grad-soft:linear-gradient(100deg,rgba(var(--v-rgb),.16),rgba(var(--m-rgb),.16));

  /* Schrift */
  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Displaygrößen sind an die längste Zeile gekoppelt, damit die
     Maskenzeilen nie umbrechen: ~10,2 Zeichenbreiten bei wdth 114. */
  --t-mega:max(1.8rem,min(7rem,11.6vh,calc((100vw - 2 * var(--pad)) / 10.2)));
  --t-h2:max(1.7rem,min(3.9rem,calc((100vw - 2 * var(--pad)) / 24)));
  --t-h3:clamp(1.3rem,2.1vw,1.9rem);
  --t-h4:clamp(1.05rem,1.35vw,1.22rem);
  --t-lead:clamp(1.04rem,1.5vw,1.3rem);
  --t-mono:clamp(10px,.76vw,12px);

  /* Raum — 8px-Leiter */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --s7:clamp(64px,8vw,112px); --s8:clamp(88px,12vw,168px);

  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);
  --r:4px;
  --rail-h:44px;

  /* Bewegung */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-snap:cubic-bezier(.22,1.15,.36,1);
  --d1:.16s; --d2:.36s; --d3:.7s; --d4:1.05s;

  --z-rail:70; --z-hdr:80; --z-nav:90; --z-grain:95; --z-leader:120;
}

/* --- 3. Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:dark;
  scroll-padding-top:96px;scroll-padding-bottom:calc(var(--rail-h) + 16px)}
:where(section,article)[id]{scroll-margin-top:96px}
html:focus-within{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:where(a,button,input,textarea,summary){touch-action:manipulation;-webkit-tap-highlight-color:rgba(var(--m-rgb),.2)}
ul,ol{list-style:none}
::selection{background:var(--m);color:#fff}
:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--m);outline-offset:3px;border-radius:2px;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{
  position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-200%);
  background:var(--fg);color:var(--ink);padding:10px 16px;border-radius:var(--r);
  font:500 13px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;
}
.skip:focus{transform:none}

/* Filmkorn — Signatur der bestehenden Seite, bleibt */
body::after{
  content:"";position:fixed;inset:-50%;z-index:var(--z-grain);pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}
}

/* --- 4. Layout --- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.band{position:relative;padding-block:var(--s8)}
.band--tight{padding-block:var(--s7)}
.band--alt{background:var(--bg-1)}
.band + .band{border-top:1px solid var(--line-soft)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3)}

/* Kamera-Hilfslinien: senkrechte Haarlinien wie im Sucher, sehr leise */
.guides{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.guides i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-soft)}

/* --- 5. Typografie --- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:1}
.mega{font-size:var(--t-mega);text-transform:uppercase;line-height:.85;letter-spacing:-.045em;font-variation-settings:"wdth" 112}
.h2{font-size:var(--t-h2);text-transform:uppercase;line-height:.9;letter-spacing:-.04em;font-variation-settings:"wdth" 108}
.h3{font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.1;font-weight:700;font-variation-settings:"wdth" 100}
.h4{font-size:var(--t-h4);letter-spacing:-.015em;line-height:1.2;font-weight:700;font-variation-settings:"wdth" 100}
.lead{font-size:var(--t-lead);color:var(--fg-muted);max-width:58ch;line-height:1.6;text-wrap:pretty}
p{text-wrap:pretty}
.muted{color:var(--fg-muted)}
.dim{color:var(--fg-dim)}
.hot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Mono-Marker: Kapitelnummer, Spurname, Timecode. Trägt Information, nicht Dekor. */
.tc{
  font:500 var(--t-mono)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;
  color:var(--fg-dim);font-variant-numeric:tabular-nums;
}
.tc--hot{color:var(--m)}
.slate{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.slate::after{content:"";flex:1;height:1px;background:var(--line)}
.slate .dot{width:6px;height:6px;background:var(--m);border-radius:50%;flex:none;
  box-shadow:0 0 0 0 rgba(var(--m-rgb),.5);animation:rec 2.4s var(--e-io) infinite}
@keyframes rec{0%,70%,100%{box-shadow:0 0 0 0 rgba(var(--m-rgb),.45)}35%{box-shadow:0 0 0 7px rgba(var(--m-rgb),0)}}

/* --- 6. Buttons --- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--fg);--btn-line:var(--line-hard);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border:1px solid var(--btn-line);border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font:500 13px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.11em;
  overflow:hidden;isolation:isolate;
  transition:color var(--d2) var(--e-out),border-color var(--d2) var(--e-out),transform var(--d1) var(--e-snap);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad);
  transform:translate3d(0,101%,0);transition:transform var(--d2) var(--e-out);
}
.btn:hover,.btn:focus-visible{color:#fff;border-color:transparent}
.btn:hover::before,.btn:focus-visible::before{transform:translate3d(0,0,0)}
.btn:active{transform:scale(.975)}
.btn .arw{transition:transform var(--d2) var(--e-out)}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn--fill{--btn-bg:var(--fg);--btn-fg:var(--ink);--btn-line:transparent}
.btn--fill:hover,.btn--fill:focus-visible{color:#fff}
.btn--ghost{--btn-line:var(--line)}
.btn--sm{padding:11px 18px;font-size:11px}

/* Textlink mit Unterstreichung, die von links einläuft */
.tlink{position:relative;color:var(--fg);white-space:nowrap}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform-origin:100% 50%;transform:scaleX(0);transition:transform var(--d2) var(--e-out)}
.tlink:hover::after,.tlink:focus-visible::after{transform-origin:0 50%;transform:scaleX(1)}

/* --- 7. Kopfzeile --- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-hdr);
  border-bottom:1px solid transparent;
  transition:background var(--d2) var(--e-out),border-color var(--d2) var(--e-out),backdrop-filter var(--d2);
}
.hdr.is-stuck{background:rgba(10,10,11,.93);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line-soft)}
/* In App-Browsern (WhatsApp, Instagram) sitzt die fixierte Kopfzeile unterhalb
   der Statusleiste, der Seiteninhalt scrollt aber durch den Streifen darüber.
   Dieser Block deckt ihn ab; auf normalen Browsern liegt er außerhalb des
   Sichtfelds und stört nicht. */
.hdr::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:220px;
  background:var(--bg);opacity:0;pointer-events:none;
  transition:opacity var(--d2) var(--e-out);
}
.hdr.is-stuck::before{opacity:1}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  height:72px;transition:height var(--d2) var(--e-out)}
.hdr.is-stuck .hdr__in{height:60px}
.brand{display:flex;align-items:center;gap:14px;flex:none}
/* Das Logo trägt den Namen bereits. Höhe steuern, Breite frei lassen —
   400:325 ist nicht quadratisch, feste Kantenlängen stauchen es. */
.brand img{height:42px;width:auto;display:block;transition:height var(--d2) var(--e-out)}
.hdr.is-stuck .brand img{height:36px}
.brand__sub{font:400 10px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.2em;
  color:var(--fg-dim);white-space:nowrap}
.ftr .brand img{height:52px}
@media (max-width:600px){.brand__sub{display:none}}

.nav{display:flex;align-items:center;gap:var(--s1)}
.nav a{
  position:relative;padding:9px 14px;border-radius:999px;
  font:500 12px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-muted);
  transition:color var(--d1) var(--e-out),background var(--d1) var(--e-out);
}
.nav a:hover,.nav a:focus-visible{color:var(--fg);background:rgba(255,255,255,.05)}
.nav a[aria-current]{color:var(--fg)}
.nav a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--grad)}
.hdr .btn{margin-left:var(--s2)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:999px}
/* Flex statt Grid: ein Raster mit drei automatischen Zeilen zieht die
   Striche über die volle Höhe auseinander, das margin-top greift dann nicht. */
@media (max-width:1000px){
  .burger{display:flex;flex-direction:column;align-items:center;justify-content:center}
}
.burger i{display:block;width:19px;height:2px;border-radius:2px;background:var(--fg);
  transition:transform var(--d2) var(--e-out),opacity var(--d1)}
.burger i + i{margin-top:3px}
body.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mnav{
  position:fixed;inset:0;z-index:var(--z-nav);background:var(--bg);overscroll-behavior:contain;
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path var(--d3) var(--e-io);
}
body.menu-open .mnav{clip-path:inset(0 0 0 0)}
.mnav ol{display:flex;flex-direction:column;gap:var(--s1)}
.mnav ol a{display:flex;align-items:baseline;gap:var(--s3);padding-block:8px;
  font-family:var(--f-display);font-size:clamp(1.7rem,7.6vw,2.7rem);font-weight:800;text-transform:uppercase;
  letter-spacing:-.04em;font-variation-settings:"wdth" 108;line-height:1}
.mnav a{opacity:0;transform:translateY(24px);
  transition:opacity var(--d2) var(--e-out),transform var(--d2) var(--e-out)}
body.menu-open .mnav a{opacity:1;transform:none}
body.menu-open .mnav li:nth-child(1) a{transition-delay:.14s}
body.menu-open .mnav li:nth-child(2) a{transition-delay:.19s}
body.menu-open .mnav li:nth-child(3) a{transition-delay:.24s}
body.menu-open .mnav li:nth-child(4) a{transition-delay:.29s}
body.menu-open .mnav li:nth-child(5) a{transition-delay:.34s}
.mnav a .tc{flex:none;width:2.4em}
.mnav__foot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);
  display:grid;gap:6px}
.mnav__foot a{font:400 clamp(.95rem,4vw,1.1rem)/1.4 var(--f-body);letter-spacing:0;
  text-transform:none;color:var(--fg);word-break:break-word}

/* --- 8. Playhead-Leiste: Signaturelement -------------------------------
   Sie zeigt die Position im Dokument als Timecode und markiert jedes Kapitel
   auf der Spur. Die Marker sind echte Sprungziele — Navigation, kein Ornament. */
.rail{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-rail);height:var(--rail-h);
  display:flex;align-items:center;gap:var(--s3);padding-inline:clamp(14px,3vw,26px);
  background:rgba(10,10,11,.82);backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--line-soft);
  transform:translateY(100%);transition:transform var(--d3) var(--e-out);
}
.rail.is-on{transform:none}
.rail__tc{flex:none;display:flex;align-items:center;gap:9px}
.rail__tc b{font:500 12px/1 var(--f-mono);letter-spacing:.05em;font-variant-numeric:tabular-nums;color:var(--fg)}
.rail__track{position:relative;flex:1;height:var(--rail-h);display:flex;align-items:center;min-width:0}
.rail__track::before{content:"";position:absolute;left:0;right:0;height:2px;background:var(--line)}
.rail__fill{position:absolute;left:0;height:2px;background:var(--grad);width:var(--p,0%);
  transition:width .08s linear}
.rail__head{position:absolute;left:var(--p,0%);width:2px;height:16px;background:var(--fg);
  transform:translateX(-1px);transition:left .08s linear}
.rail__head::after{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:5px;
  background:var(--fg);clip-path:polygon(0 0,100% 0,50% 100%)}
.rail__mk{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  min-width:26px;height:26px;padding-inline:7px;display:grid;place-items:center;
  font:500 9px/1 var(--f-mono);letter-spacing:.1em;color:var(--fg-dim);
  transition:color var(--d1) var(--e-out);
}
.rail__mk::before{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:7px;height:7px;border:1px solid currentColor;rotate:45deg;background:var(--bg)}
.rail__mk span{position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 0;
  white-space:nowrap;padding:5px 9px;border:1px solid var(--line);background:var(--bg-2);
  border-radius:3px;opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--d1) var(--e-out),transform var(--d1) var(--e-out)}
.rail__mk:hover,.rail__mk:focus-visible,.rail__mk.is-on{color:var(--fg)}
.rail__mk:hover span,.rail__mk:focus-visible span{opacity:1;transform:none}
.rail__mk.is-on::before{background:var(--m);border-color:var(--m)}
.rail__end{flex:none;font:500 11px/1 var(--f-mono);letter-spacing:.12em;color:var(--fg-dim);
  font-variant-numeric:tabular-nums}

/* --- 9. Filmleader: einmaliger Aufblendmoment --- */
.leader{display:none}
.js .leader{
  position:fixed;inset:0;z-index:var(--z-leader);background:var(--bg);
  display:grid;place-items:center;
}
.leader__ring{position:relative;width:min(46vmin,300px);aspect-ratio:1}
.leader__ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.leader__ring circle{fill:none;stroke:var(--line);stroke-width:1}
.leader__ring .arc{stroke:url(#lg);stroke-width:2;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%}
.leader__ring i{position:absolute;background:var(--line-soft)}
.leader__ring i:nth-child(2){left:50%;top:-14%;bottom:-14%;width:1px}
.leader__ring i:nth-child(3){top:50%;left:-14%;right:-14%;height:1px}
.leader__n{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:clamp(4rem,16vmin,9rem);
  font-variation-settings:"wdth" 118;font-variant-numeric:tabular-nums;letter-spacing:-.05em;
}
.leader__tc{position:absolute;left:var(--pad);bottom:var(--pad)}
.leader__brand{position:absolute;right:var(--pad);bottom:var(--pad)}
.leader.is-out{animation:cut .5s var(--e-io) forwards}
@keyframes cut{
  0%{clip-path:inset(0 0 0 0)}
  40%{clip-path:inset(0 0 0 0);filter:brightness(2.2)}
  100%{clip-path:inset(50% 0 50% 0);filter:brightness(2.2);opacity:0}
}

/* --- 10. Scroll-Reveal: Maskenschnitt statt Einblenden ------------------
   Zeilen laufen hinter einer harten Kante hervor, wie ein Wischschnitt. */
.js [data-rv]{opacity:0;transform:translateY(22px);
  transition:opacity var(--d3) var(--e-out),transform var(--d3) var(--e-out)}
.js [data-rv].in{opacity:1;transform:none}

.kin{display:block;overflow:hidden;padding-block:.09em .02em;margin-block:-.09em 0}
.kin > span{display:block;font-variation-settings:"wdth" 114}
.js .kin > span{
  transform:translateY(105%);
  font-variation-settings:"wdth" 96;
  transition:transform var(--d4) var(--e-out),font-variation-settings var(--d4) var(--e-out);
}
.js .in .kin > span,.js .kin.in > span{transform:none;font-variation-settings:"wdth" 114}
.kin:nth-of-type(2) > span{transition-delay:.07s}
.kin:nth-of-type(3) > span{transition-delay:.14s}
.kin:nth-of-type(4) > span{transition-delay:.21s}

/* --- 11. Hero --- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:calc(72px + var(--s6));padding-bottom:var(--s5);overflow:hidden}
.hero__glow{
  position:absolute;top:-24vh;left:50%;translate:-50% 0;width:min(1500px,150vw);aspect-ratio:2/1;
  background:radial-gradient(closest-side,rgba(var(--v-rgb),.20),rgba(var(--m-rgb),.08) 55%,transparent 72%);
  filter:blur(24px);pointer-events:none;
  animation:drift 22s var(--e-io) infinite alternate;
}
@keyframes drift{0%{transform:translate(-52%,0) scale(1)}100%{transform:translate(-48%,4vh) scale(1.1)}}
.hero__top{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:flex-end;
  padding-bottom:var(--s4);border-bottom:1px solid var(--line-soft);margin-bottom:var(--s5)}
.hero h1{position:relative;z-index:1}
.hero__foot{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s5);align-items:end}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* Sucherrahmen: senkrechte Begrenzungslinien plus zwei Eckmarken wie im Kamerabild */
.frame{position:absolute;inset:auto 0 0;height:100%;pointer-events:none}
.frame i{position:absolute;background:var(--line-soft)}
.frame i:nth-child(1){left:var(--pad);top:0;bottom:0;width:1px}
.frame i:nth-child(2){right:var(--pad);top:0;bottom:0;width:1px}
.frame b{position:absolute;width:9px;height:9px;border:1px solid var(--line-hard)}
.frame b:nth-of-type(1){left:calc(var(--pad) - 4px);top:calc(72px + var(--s4));border-right:0;border-bottom:0}
.frame b:nth-of-type(2){right:calc(var(--pad) - 4px);top:calc(72px + var(--s4));border-left:0;border-bottom:0}

/* --- 12. Laufband als Spur V1 --- */
.track{position:relative;border-block:1px solid var(--line);background:var(--bg-1);overflow:hidden}
.track__label{position:absolute;left:0;top:0;bottom:0;z-index:2;display:grid;place-items:center;
  padding-inline:14px;background:var(--bg-2);border-right:1px solid var(--line)}
.marquee{display:flex;gap:0;padding-block:16px;padding-left:78px;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 92px,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 92px,#000 88%,transparent)}
.marquee ul{display:flex;gap:0;animation:slide 34s linear infinite;flex:none}
.marquee.is-paused ul{animation-play-state:paused}
.marquee li{display:flex;align-items:center;gap:var(--s3);padding-inline:var(--s3);
  font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,2rem);letter-spacing:-.03em;font-variation-settings:"wdth" 106;
  color:var(--fg-dim);transition:color var(--d2) var(--e-out)}
.marquee li::after{content:"";width:5px;height:5px;background:currentColor;rotate:45deg;flex:none;opacity:.7}
.marquee:hover li{color:var(--fg-muted)}
@keyframes slide{to{transform:translate3d(-100%,0,0)}}
.marquee-stop{position:absolute;right:10px;top:50%;translate:0 -50%;z-index:3;
  width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);font-size:10px;color:var(--fg-muted)}
.marquee-stop:hover{color:var(--fg);border-color:var(--line-hard)}

/* --- 13. Kapitelkopf --- */
.head{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-bottom:var(--s7)}
.head__t{grid-column:1}
.head__p{grid-column:1}

/* --- 14. Leistungen als Spurenliste ------------------------------------
   Fünf Ebenen wie im Schnittprogramm. Die Nummerierung ist hier legitim:
   sie benennt Spuren, nicht eine Reihenfolge. */
.svc{border-top:1px solid var(--line)}
.svc__row{
  position:relative;display:block;width:100%;text-align:left;
  border-bottom:1px solid var(--line);
  transition:background var(--d2) var(--e-out);
}
.svc__row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--d2) var(--e-out);
}
.svc__row:hover,.svc__row:focus-within{background:linear-gradient(90deg,rgba(var(--v-rgb),.055),transparent 62%)}
.svc__row:hover::before,.svc__row:focus-within::before{transform:scaleY(1);transform-origin:50% 0}
.svc__hd{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;
  width:100%;text-align:left;padding:clamp(22px,3.2vw,38px) 0 clamp(22px,3.2vw,38px) clamp(14px,2vw,28px)}
.svc__no{font:500 12px/1 var(--f-mono);color:var(--fg-dim);letter-spacing:.14em;font-variant-numeric:tabular-nums;
  transition:color var(--d2) var(--e-out)}
.svc__row:hover .svc__no,.svc__row:focus-within .svc__no{color:var(--m)}
.svc__ttl{font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,4.2vw,3.1rem);line-height:.95;letter-spacing:-.04em;
  font-variation-settings:"wdth" 104;
  transition:font-variation-settings var(--d3) var(--e-out),color var(--d2) var(--e-out);
  hyphens:auto}
.svc__row:hover .svc__ttl,.svc__row:focus-within .svc__ttl{font-variation-settings:"wdth" 118}
.svc__sign{width:36px;height:36px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;flex:none;position:relative;
  transition:border-color var(--d2) var(--e-out),background var(--d2) var(--e-out),rotate var(--d3) var(--e-out)}
.svc__sign::before,.svc__sign::after{content:"";position:absolute;background:currentColor}
.svc__sign::before{width:11px;height:1.5px}
.svc__sign::after{width:1.5px;height:11px;transition:opacity var(--d2) var(--e-out),transform var(--d2)}
.svc__hd[aria-expanded="true"] .svc__sign{background:var(--grad);border-color:transparent;color:#fff;rotate:180deg}
.svc__hd[aria-expanded="true"] .svc__sign::after{opacity:0}
.svc__hd[aria-expanded="true"] .svc__ttl{font-variation-settings:"wdth" 118}
.svc__hd[aria-expanded="true"] .svc__no{color:var(--m)}
.svc__body{display:grid;grid-template-rows:1fr}
.js .svc__body{grid-template-rows:0fr;transition:grid-template-rows var(--d3) var(--e-io)}
html:not(.js) .svc__sign{display:none}
html:not(.js) .svc__hd{cursor:default}
.svc__body.is-open{grid-template-rows:1fr}
.svc__body > div{overflow:hidden}
.svc__inner{display:grid;gap:var(--s3);padding:0 0 clamp(24px,3.2vw,40px) clamp(14px,2vw,28px);
  grid-template-columns:1fr}
.svc__inner p{color:var(--fg-muted);max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;font:400 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.11em;color:var(--fg-muted)}
.tag::before{content:"";width:4px;height:4px;background:var(--m);rotate:45deg;flex:none}

/* --- 15. Ablauf: gepinnte Schnittspur ---------------------------------- */
.flow{position:relative}
.flow__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden}
.flow__hd{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:flex-end;
  padding-bottom:var(--s4)}
.flow__vp{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.flow__strip{display:flex;gap:var(--s3);padding-inline:var(--pad);will-change:transform}
.step{
  position:relative;flex:none;width:min(80vw,540px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);
  padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:var(--s2);
  min-height:clamp(300px,42vh,420px);
  transition:border-color var(--d2) var(--e-out),background var(--d2) var(--e-out);
}
.step::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);
  transform:scaleX(var(--on,0));transform-origin:0 50%;transition:transform var(--d3) var(--e-out);
}
.step.is-live{background:var(--bg-3);border-color:var(--line-hard)}
.step.is-live::before{--on:1}
.step__no{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.8;
  font-variation-settings:"wdth" 118;letter-spacing:-.05em;color:var(--fg-dim);
  transition:color var(--d3) var(--e-out)}
.step.is-live .step__no{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.step > p:not([class]){color:var(--fg-muted);font-size:.96rem}
.step__foot{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.flow__bar{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4)}
.flow__bar .line{position:relative;flex:1;height:3px;background:var(--line);border-radius:2px}
.flow__bar .line i{position:absolute;inset:0 auto 0 0;background:var(--grad);width:0;border-radius:2px}
.flow__bar .line b{position:absolute;top:50%;width:8px;height:8px;translate:-50% -50%;rotate:45deg;
  background:var(--bg-1);border:1px solid var(--line-hard)}
.flow__bar .line b.on{background:var(--m);border-color:var(--m)}

/* --- 16. Agentur --- */
.about{display:grid;gap:var(--s6);grid-template-columns:1fr}
.about__txt p + p{margin-top:var(--s3)}
.about__txt p{color:var(--fg-muted);max-width:62ch}
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{display:flex;gap:var(--s2);align-items:flex-start;padding-block:var(--s2);
  border-bottom:1px solid var(--line-soft);color:var(--fg-muted)}
.facts li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55em;rotate:45deg;background:var(--grad)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg-1);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:6px;
  transition:background var(--d2) var(--e-out)}
.stat:hover{background:var(--bg-2)}
.stat b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,5.2vw,3.6rem);line-height:.85;
  font-variation-settings:"wdth" 116;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.13em;color:var(--fg-dim)}

/* --- 17. Kontakt --- */
.contact{display:grid;gap:var(--s6);grid-template-columns:1fr}
.cinfo{display:grid;gap:0;border-top:1px solid var(--line)}
.cinfo a,.cinfo div{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--s2);align-items:baseline;
  padding-block:var(--s3);border-bottom:1px solid var(--line-soft)}
.cinfo a{transition:padding-left var(--d2) var(--e-out),color var(--d2) var(--e-out)}
.cinfo a:hover,.cinfo a:focus-visible{padding-left:10px;color:var(--fg)}
.cinfo .val{font-size:1.02rem}
.cinfo div .val{color:var(--fg-muted)}

.form{display:grid;gap:var(--s3);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,36px);background:var(--bg-1)}
.field{display:grid;gap:9px;position:relative}
.field label{font:500 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.13em;color:var(--fg-dim)}
.field input,.field textarea{
  width:100%;padding:14px 2px;background:transparent;color:var(--fg);
  border:0;border-bottom:1px solid var(--line-hard);border-radius:0;
  font:400 1.02rem/1.5 var(--f-body);
  transition:border-color var(--d2) var(--e-out);
}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--m)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.field::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--grad);
  transition:width var(--d2) var(--e-out)}
.field:focus-within::after{width:100%}
/* Spam-Falle. Sie liegt direkt im Formular, nicht in einem .field —
   der alte Selektor .field .hp hat deshalb nie gegriffen und das Feld war
   sichtbar. Bewusst kein display:none: viele Bots erkennen das und lassen
   das Feld dann leer, womit die Falle wirkungslos wäre. */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.feld-fehler{font:400 12px/1.4 var(--f-mono);color:#ff6b8a;letter-spacing:.04em}
[aria-invalid="true"]{border-bottom-color:#ff6b8a !important}
.form__foot{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:center;
  padding-top:var(--s1)}
.form__note{font-size:.84rem;color:var(--fg-dim);max-width:44ch}
.form-status{font:400 .9rem/1.5 var(--f-body);padding:12px 14px;border-radius:var(--r);display:none}
.form-status.ok{display:block;background:rgba(var(--v-rgb),.1);border:1px solid rgba(var(--v-rgb),.35);color:var(--fg)}
.form-status.fehler{display:block;background:rgba(255,47,90,.08);border:1px solid rgba(255,47,90,.32);color:#ffb3c2}
.nojs{display:block}
.js .nojs{display:none}

/* --- 18. Fußzeile --- */
.ftr{border-top:1px solid var(--line);background:var(--bg-1);padding-block:var(--s6) calc(var(--rail-h) + var(--s4))}
.ftr__top{display:grid;gap:var(--s5);grid-template-columns:1fr;padding-bottom:var(--s5);
  border-bottom:1px solid var(--line-soft)}
.ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ftr h3{font:500 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-dim);
  margin-bottom:var(--s2)}
.ftr li + li{margin-top:9px}
.ftr__cols a{display:inline-block;padding-block:4px;color:var(--fg-muted);transition:color var(--d1) var(--e-out)}
.ftr__cols a:hover{color:var(--fg)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;
  align-items:center;padding-top:var(--s3)}
.ftr__bot .tlink{display:inline-block;padding-block:7px}
.ftr__mark{font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:max(2rem,min(11rem,calc((100vw - 2 * var(--pad)) / 9.4)));line-height:.8;letter-spacing:-.055em;font-variation-settings:"wdth" 120;
  white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px var(--line-hard);margin-block:var(--s5) var(--s3);
  user-select:none;transition:-webkit-text-stroke-color var(--d3) var(--e-out)}
.ftr__mark:hover{-webkit-text-stroke-color:rgba(var(--m-rgb),.45)}

/* --- 19. Rechtstexte --- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.3rem,2.3vw,1.8rem);text-transform:none;letter-spacing:-.025em;
  font-variation-settings:"wdth" 100;margin-top:var(--s6);margin-bottom:var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.legal h3{font-size:1.02rem;margin-top:var(--s4);margin-bottom:var(--s1)}
.legal p,.legal li{color:var(--fg-muted)}
.legal p + p{margin-top:var(--s2)}
.legal ul{margin-top:var(--s2);display:grid;gap:8px}
/* Absatz nach einer Liste braucht denselben Abstand wie Absatz nach Absatz */
.legal ul + p{margin-top:var(--s2)}
.legal ul li{display:flex;gap:12px}
.legal ul li::before{content:"";flex:none;width:5px;height:5px;margin-top:.62em;rotate:45deg;background:var(--m)}
.legal address{font-style:normal;color:var(--fg-muted);margin-top:var(--s2);line-height:1.8}
.legal strong{color:var(--fg);font-weight:500}
.legal .hint{border:1px solid var(--line);border-left:2px solid var(--m);background:var(--bg-1);
  padding:var(--s3);border-radius:var(--r);margin-top:var(--s3)}
.legal .hint p{color:var(--fg-muted)}

/* --- 20. Arbeiten: Clips auf Spuren ------------------------------------
   Ohne Bildmaterial zeigt die Seite, woraus ein Projekt besteht. Der Balken
   ist die Kette der Bausteine aus der Leistungsbeschreibung — keine Laufzeit. */
.clips{display:grid;gap:0;border-top:1px solid var(--line)}
.clip{
  position:relative;display:grid;grid-template-columns:1fr;gap:var(--s3);
  padding-block:clamp(24px,3.4vw,40px);border-bottom:1px solid var(--line);
  transition:background var(--d2) var(--e-out);
}
.clip:hover{background:linear-gradient(90deg,rgba(var(--v-rgb),.05),transparent 60%)}
.clip__hd{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline}
.clip__ttl{font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,2.5rem);line-height:.95;letter-spacing:-.04em;
  font-variation-settings:"wdth" 106;transition:font-variation-settings var(--d3) var(--e-out)}
.clip:hover .clip__ttl{font-variation-settings:"wdth" 118}
.clip p:not([class]){color:var(--fg-muted);max-width:60ch}
.bar{display:grid;gap:9px}
.bar__scale{display:flex;justify-content:space-between}
.bar__line{position:relative;height:34px;border:1px solid var(--line);border-radius:2px;background:var(--bg-1);
  overflow:hidden;display:flex}
.bar__seg{position:relative;display:grid;place-items:center;min-width:0;
  border-right:1px solid var(--bg);
  font:400 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--fg);
  background:rgba(255,255,255,.045);transform-origin:0 50%;
  transition:transform var(--d4) var(--e-out),background var(--d2) var(--e-out)}
.js .bar__seg{transform:scaleX(0)}
.js .in .bar__seg{transform:none}
.bar__seg:last-child{border-right:0}
.bar__seg span{padding-inline:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.bar__seg--hot{background:var(--grad-soft)}
.clip:hover .bar__seg--hot{background:var(--grad);color:#fff}
.bar__seg:nth-child(2){transition-delay:.08s}
.bar__seg:nth-child(3){transition-delay:.16s}
.bar__seg:nth-child(4){transition-delay:.24s}
.bar__seg:nth-child(5){transition-delay:.32s}
.meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);padding-top:var(--s1)}
.meta div{display:grid;gap:4px}
.meta dt{font:400 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.13em;color:var(--fg-dim)}
.meta dd{font-size:.94rem;color:var(--fg)}


/* --- 21. Leistungs-Kapitel (Unterseite) --- */
.chap{position:relative;padding-block:var(--s7);border-top:1px solid var(--line)}
.chap:first-of-type{border-top:0;padding-top:var(--s5)}
.chap__grid{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.chap__no{font-family:var(--f-display);font-weight:800;font-size:clamp(3.4rem,9vw,7rem);line-height:.8;
  font-variation-settings:"wdth" 120;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px var(--line-hard);transition:-webkit-text-stroke-color var(--d3) var(--e-out)}
.chap:hover .chap__no{-webkit-text-stroke-color:rgba(var(--m-rgb),.5)}
.chap h2{font-size:clamp(1.9rem,5vw,3.4rem);text-transform:uppercase;letter-spacing:-.04em;
  font-variation-settings:"wdth" 108;line-height:.94;hyphens:auto}
.chap p:not([class]){color:var(--fg-muted);max-width:60ch}
.chap p:not([class]) + p:not([class]){margin-top:var(--s2)}
.deliver{display:grid;gap:0;border-top:1px solid var(--line-soft);margin-top:var(--s3)}
.deliver li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:baseline;
  padding-block:13px;border-bottom:1px solid var(--line-soft);color:var(--fg-muted)}

/* Seiten-Kopf der Unterseiten */
.phead{position:relative;padding-top:calc(72px + var(--s7));padding-bottom:var(--s6);overflow:hidden}
.phead__glow{position:absolute;top:-30vh;left:12%;width:min(1100px,120vw);aspect-ratio:2/1;
  background:radial-gradient(closest-side,rgba(var(--v-rgb),.16),transparent 70%);filter:blur(20px);pointer-events:none}
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.crumb a{display:inline-block;padding-block:7px;color:var(--fg-dim);transition:color var(--d1)}
.crumb a:hover{color:var(--fg)}

/* --- 22. Kontaktband (Abbinder) --- */
.cta-band{position:relative;text-align:center;padding-block:var(--s8);overflow:hidden}
.cta-band__glow{position:absolute;inset:auto 50% -40%;translate:50% 0;width:min(1200px,130vw);aspect-ratio:2/1;
  background:radial-gradient(closest-side,rgba(var(--m-rgb),.16),transparent 70%);filter:blur(20px);pointer-events:none}
.cta-band .lead{margin-inline:auto}
.cta-band .btn{margin-top:var(--s4)}

/* ==========================================================================
   23. Breakpoints
   ========================================================================== */
@media (min-width:760px){
  .hero__foot{grid-template-columns:1.05fr .95fr;gap:var(--s5)}
  .svc__inner{grid-template-columns:1.4fr 1fr;gap:var(--s5);align-items:start}
  .stats{grid-template-columns:repeat(4,1fr)}
  .ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clip{grid-template-columns:1fr 1.15fr;gap:var(--s5);align-items:start}
  .chap__grid{grid-template-columns:auto 1fr;gap:var(--s5)}
  .chap__no{padding-top:.1em}
  .legal h2{margin-top:var(--s7)}
}
@media (min-width:1040px){
  .head{grid-template-columns:1.02fr 1fr;gap:var(--s6);align-items:end}
  .head__t{grid-column:1}
  .head__p{grid-column:2;padding-bottom:.5em}
  .about{grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:start}
  .contact{grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:start}
  .ftr__top{grid-template-columns:1fr 1.35fr;gap:var(--s7)}
}
@media (max-width:1000px){
  .nav{display:none}
  .hdr > .wrap > .hdr__in > .btn{display:none}
  .rail__end{display:none}
}
@media (min-width:1001px){
  .mnav{display:none}
}
@media (max-width:640px){
  :root{--rail-h:40px}
  .rail{gap:var(--s2);padding-inline:14px}
  .rail__mk span{display:none}
  .marquee{padding-left:66px}
  .track__label{padding-inline:11px}
  .meta{gap:var(--s2) var(--s3)}
}

/* Sehr kleine Höhen (Landscape-Handy): gepinnte Sektion darf scrollen */
@media (max-height:520px){
  .flow__pin{position:relative;height:auto;padding-block:var(--s6)}
  .flow__vp{-webkit-mask-image:none;mask-image:none;overflow-x:auto;scroll-snap-type:x mandatory}
  .flow__strip{transform:none !important}
  .step{scroll-snap-align:center}
}

/* ==========================================================================
   24. Bewegung reduzieren — vollständige Entschärfung
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html:focus-within{scroll-behavior:auto}
  body::after{animation:none}
  .js [data-rv]{opacity:1;transform:none}
  .js .kin > span{transform:none;font-variation-settings:"wdth" 114}
  .js .bar__seg{transform:none}
  .hero__glow{animation:none}
  .marquee ul{animation:none}
  .leader{display:none}
  .flow__pin{position:relative;height:auto;padding-block:var(--s6)}
  .flow__vp{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory}
  .flow__strip{transform:none !important}
  .step{scroll-snap-align:center}
  .slate .dot{animation:none}
}

/* ==========================================================================
   25. Seitenwechsel als Schnitt (progressive Erweiterung)
   ========================================================================== */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .26s var(--e-io) forwards}
  ::view-transition-new(root){animation:vt-in .42s var(--e-out) .04s backwards}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;clip-path:inset(46% 0 46% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

@media print{
  .rail,.hdr,.leader,.mnav,.track,body::after{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   26. Reel — der Scrollweg ist der Playhead
   Eine Bildsequenz aus dem eigenen Material wird auf ein Canvas gezeichnet.
   Der Scroll steuert das Bild, vier Einstellungen tragen die vier Schritte
   des Ablaufs. Ohne JavaScript bleibt das Standbild plus Textliste stehen.
   ========================================================================== */
.reel{position:relative}
.reel__pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;gap:var(--s3);padding-block:calc(72px + var(--s3)) var(--s4);overflow:hidden}
.reel__src{
  position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:8px;
  padding:6px 10px;border:1px solid rgba(255,255,255,.16);border-radius:3px;
  background:rgba(6,6,8,.74);backdrop-filter:blur(6px);
}
.reel__src .tc{color:rgba(255,255,255,.7)}
.reel__src b{font:500 12px/1 var(--f-mono);letter-spacing:.05em;color:var(--fg);
  font-variant-numeric:tabular-nums}

.reel__frame{position:relative}
.reel__stage{
  position:relative;aspect-ratio:1440/614;background:#000;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media (min-width:760px){
  /* Aus dem Satzspiegel ausbrechen — der Balken oben und unten ist dann
     erkennbar Letterbox und keine zu klein geratene Kiste. */
  .reel__frame{width:100vw;margin-inline:calc(50% - 50vw)}
  .reel__stage{border-radius:0;border-inline:0}
}
/* Eckmarken wie im Sucher — dieselbe Sprache wie in der Hero */
.reel__stage::before,.reel__stage::after{
  content:"";position:absolute;width:14px;height:14px;z-index:3;pointer-events:none;
  border:1px solid rgba(255,255,255,.34);
}
.reel__stage::before{top:10px;left:10px;border-right:0;border-bottom:0}
.reel__stage::after{bottom:10px;right:10px;border-left:0;border-top:0}
.reel__canvas,.reel__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__canvas{opacity:0;transition:opacity var(--d2) var(--e-out)}
.reel.is-ready .reel__canvas{opacity:1}
.reel.is-ready .reel__poster{opacity:0}
.reel__poster{transition:opacity var(--d2) var(--e-out)}

/* Ladeanzeige */
.reel__load{position:absolute;left:0;right:0;bottom:0;z-index:4;display:none;
  align-items:center;gap:var(--s2);padding:12px clamp(14px,2vw,22px);
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent)}
.js .reel:not(.is-ready) .reel__load{display:flex}
.reel__load .line{position:relative;flex:1;height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.reel__load .line i{position:absolute;inset:0 auto 0 0;width:0;background:var(--grad);border-radius:2px;
  transition:width var(--d2) linear}

/* Textebene über dem Bild */
.reel__steps{position:absolute;inset:0;z-index:2;pointer-events:none}
.js .reel__steps::before{
  /* Abdunkelung läuft nach rechts aus statt flächig über die untere Hälfte —
     so bleibt die Bildhälfte, in der das Motiv sitzt, unangetastet. */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,6,8,.93) 0%,rgba(6,6,8,.74) 30%,rgba(6,6,8,.18) 56%,rgba(6,6,8,0) 72%),
    linear-gradient(0deg,rgba(6,6,8,.78) 0%,rgba(6,6,8,.22) 34%,rgba(6,6,8,0) 52%);
}
.reel__step{position:relative}
.js .reel__step{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(16px,2.6vw,38px);max-width:min(46ch,62%);
  opacity:0;transform:translateY(16px);
  transition:opacity var(--d2) var(--e-out),transform var(--d3) var(--e-out);
}
.js .reel__step.is-on{opacity:1;transform:none;transition-duration:var(--d1)}

/* Gestaffelter Einlauf: Marke von links, Überschrift hinter der Schnittkante
   hervor, Fließtext zuletzt. Dieselbe Bewegung wie in den Kapiteln der Seite. */
.js .reel__step .no{opacity:0;transform:translateX(-16px);
  transition:opacity var(--d2) var(--e-out),transform var(--d3) var(--e-out)}
.js .reel__step.is-on .no{opacity:1;transform:none;transition-delay:.06s}
.js .reel__step .no i{transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--d3) var(--e-out)}
.js .reel__step.is-on .no i{transform:none;transition-delay:.26s}
.js .reel__step.is-on .kin > span{transform:none;font-variation-settings:"wdth" 114;
  transition-delay:.15s}
.js .reel__step p:not([class]){opacity:0;transform:translateY(14px);
  transition:opacity var(--d2) var(--e-out),transform var(--d3) var(--e-out)}
.js .reel__step.is-on p:not([class]){opacity:1;transform:none;transition-delay:.36s}
.js .reel__cta{opacity:0;transform:translateY(14px);
  transition:opacity var(--d2) var(--e-out),transform var(--d3) var(--e-out)}
.js .reel__step.is-on .reel__cta{opacity:1;transform:none;transition-delay:.48s}
.reel__cta{margin-top:var(--s3);pointer-events:auto}
@media (min-width:760px){
  /* Der Text sitzt auf der Spalte des Satzspiegels. Versatz über left, nicht
     über padding — sonst frisst die Polsterung die Textbreite auf. */
  .js .reel__step{
    left:max(var(--pad),calc(50vw - var(--maxw)/2 + var(--pad)));
    right:var(--pad);padding-inline:0;max-width:min(52ch,48%);
  }
}
.reel__step .no{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.reel__step .no i{width:22px;height:1px;background:var(--m);display:block}
.reel__step :is(h2,h3){font-family:var(--f-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,3.1vw,2.4rem);line-height:.96;letter-spacing:-.04em;
  font-variation-settings:"wdth" 112;margin-bottom:8px}
.reel__step p:not([class]){color:var(--fg-muted);font-size:clamp(.9rem,1.15vw,1.02rem);
  text-wrap:pretty;max-width:52ch}

/* Fortschrittsspur mit den vier Einstellungen */
.reel__bar{display:flex;align-items:center;gap:var(--s2)}
.reel__bar .line{position:relative;flex:1;height:3px;background:var(--line);border-radius:2px}
.reel__bar .line i{position:absolute;inset:0 auto 0 0;width:0;background:var(--grad);border-radius:2px}
.reel__bar .line b{position:absolute;top:50%;width:8px;height:8px;translate:-50% -50%;rotate:45deg;
  background:var(--bg);border:1px solid var(--line-hard);transition:background var(--d1),border-color var(--d1)}
.reel__bar .line b.on{background:var(--m);border-color:var(--m)}

/* Handy: Text unter das Bild, nicht darüber — sonst ist er nicht zu lesen */
@media (max-width:759px){
  .js .reel__steps::before{display:none}
  /* Ohne feste Bildschirmhöhe entsteht oben keine tote Fläche mehr —
     der Hero ist auf dem Handy so hoch wie sein Inhalt. */
  .hero{min-height:auto;padding-top:calc(58px + var(--s5));padding-bottom:var(--s6)}
  .hero__top{padding-bottom:var(--s3);margin-bottom:var(--s4)}
  .hero__foot{margin-top:var(--s4)}
  .frame b{top:calc(58px + var(--s3))}
  .reel__src{top:7px;right:7px;gap:5px;padding:4px 7px}
  .reel__src b{font-size:10px}
  .reel__src .tc{font-size:9px}
  .reel__steps{position:relative;inset:auto;margin-top:var(--s3);min-height:15.5rem}
  .js .reel__step{position:absolute;inset:0;padding:0;max-width:none}
  .reel__step p:not([class]){font-size:.95rem}
}
@media (min-width:760px){
  .reel__steps .reel__step + .reel__step{margin-top:0}
}
/* Ohne JavaScript: alle vier Schritte als normale Liste unter dem Standbild */
html:not(.js) .reel__steps{position:relative;inset:auto;display:grid;gap:var(--s3);
  margin-top:var(--s3);grid-template-columns:1fr}
@media (min-width:760px){
  html:not(.js) .reel__steps{grid-template-columns:repeat(2,1fr);gap:var(--s4)}
}

@media (prefers-reduced-motion:reduce){
  .reel__pin{position:static;min-height:auto;padding-block:var(--s6)}
  .js .reel__steps{position:relative;inset:auto;display:grid;gap:var(--s3);margin-top:var(--s3)}
  .js .reel__steps::before{display:none}
  .js .reel__step{position:relative;opacity:1;transform:none;inset:auto;padding:0;max-width:none}
  .js .reel__step .no,.js .reel__step p:not([class]),.js .reel__cta{opacity:1;transform:none}
  .js .reel__step .no i{transform:none}
  .reel__src{position:static;background:none;border:0;padding:0;justify-content:flex-end}
}