/* strg bang — Website (Umsetzung der Claude-Design-Uebergabe, 09/2026)
   Tokens laut README: dunkel = Standard, hell ueber html[data-theme="light"]. */
@font-face{font-family:Manrope;font-weight:200;font-display:swap;src:url(../fonts/Manrope-normal-200.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:300;font-display:swap;src:url(../fonts/Manrope-normal-300.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(../fonts/Manrope-normal-400.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(../fonts/Manrope-normal-500.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(../fonts/Manrope-normal-600.woff2) format("woff2")}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(../fonts/Manrope-normal-700.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/InstrumentSerif-italic-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/JetBrainsMono-normal-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/JetBrainsMono-normal-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-display:swap;src:url(../fonts/JetBrainsMono-normal-600.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-display:swap;src:url(../fonts/JetBrainsMono-normal-700.woff2) format("woff2")}

:root{
  --bg:#0B0B0E;--bg-rgb:11,11,14;--ink:#F4F3F0;--ink-rgb:244,243,240;--fg-rgb:255,255,255;--surface:#121215;
  --mag:#FF00E6;--mag-hover:#FF4DF0;--mag2:#FF6CEF;
  --line:rgba(var(--fg-rgb),.12);--line-hov:rgba(var(--fg-rgb),.35);--line-chip:rgba(var(--fg-rgb),.2);
  --maxw:1280px;--gut:clamp(20px,4vw,48px);
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--serif:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);--snap:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
html[data-theme="light"]{--bg:#F4F3F0;--bg-rgb:244,243,240;--ink:#0B0B0E;--ink-rgb:11,11,14;--fg-rgb:11,11,14;--surface:#E6E4DF;--mag2:#C400B0;color-scheme:light}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5;
  transition:background-color 240ms var(--ease),color 240ms var(--ease)}
img,video{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--mag2)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.dot{color:var(--mag)}
.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.55);text-transform:uppercase}
.ph{color:var(--mag2)}   /* Platzhalter vor Livegang */
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--mag);color:#0B0B0E;padding:8px 12px}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;
  font:600 12px var(--mono);letter-spacing:.06em;padding:12px 18px;border-radius:4px;text-transform:uppercase;
  transition:background-color 80ms var(--ease),border-color 80ms var(--ease),color 80ms var(--ease),transform 80ms var(--ease)}
.btn:active{transform:scale(.96)}
.btn-mag{background:var(--mag);color:#0B0B0E;border:1px solid var(--mag)}
.btn-mag:hover{background:var(--mag-hover);border-color:var(--mag-hover);color:#0B0B0E}
.btn-sm{font-size:11px;letter-spacing:.08em;padding:9px 14px;border-radius:3px}
.btn-line{border:1px solid rgba(var(--fg-rgb),.25);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn .lbl{position:relative}
.ring{position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid var(--mag);pointer-events:none;opacity:0}

/* Eck-Marker */
.corners{position:relative}
.corners>.c{position:absolute;width:14px;height:14px;pointer-events:none;border-color:var(--ink);border-style:solid;border-width:0}
.c.tl{left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.c.tr{right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}
.c.bl{left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}
.c.br{right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.corners.in>.c{width:18px;height:18px}
.corners.in>.c.tl{left:0;top:0}.corners.in>.c.tr{right:0;top:0}.corners.in>.c.bl{left:0;bottom:0}.corners.in>.c.br{right:0;bottom:0}

/* Header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px}
.brand{display:flex;align-items:baseline;gap:12px;padding:16px 0}
.brand img{height:34px;width:auto}
.tagline{font:11px var(--mono);color:rgba(var(--ink-rgb),.5);letter-spacing:.08em;white-space:nowrap}
.nav{display:flex;gap:26px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.nav a{position:relative;padding:23px 0;color:rgba(var(--ink-rgb),.55);transition:color 160ms var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mag);transform:scaleX(0);transform-origin:right;transition:transform 160ms var(--snap)}
.nav a:hover,.nav a.act{color:var(--ink)}
.nav a:hover::after,.nav a.act::after{transform:scaleX(1);transform-origin:left;transition:transform 240ms var(--snap)}
.tools{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1px solid var(--line-chip);border-radius:3px;overflow:hidden;font:600 10.5px var(--mono);letter-spacing:.08em}
.lang a{padding:8px 9px;color:rgba(var(--ink-rgb),.6)}
.lang a.on{background:var(--ink);color:var(--bg)}
.theme{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-chip);border-radius:3px;font-size:14px;line-height:1;transition:border-color 160ms var(--ease),transform 80ms var(--ease)}
.theme:hover{border-color:var(--ink)}.theme:active{transform:scale(.94)}
.hdr .btn-mag{margin-left:6px}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line-chip);border-radius:3px}
.burger i{width:18px;height:1.5px;background:var(--ink);transition:transform 240ms var(--snap)}
.menu-open .burger i:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mmenu{display:none;border-top:1px solid var(--line);padding:12px var(--gut) 24px;flex-direction:column}
.mmenu a{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-weight:300;font-size:30px;letter-spacing:-.03em;color:rgba(var(--ink-rgb),.55)}
.mmenu a.act{color:var(--ink)}
.mmenu a span{font:12px var(--mono);color:var(--mag2)}
.mmenu .btn{align-self:flex-start;margin-top:20px;padding:14px 18px}
@media (max-width:1239px){.tagline{display:none}}
@media (max-width:999px){
  .nav,.hdr .btn-mag.hdr-cta{display:none}
  .burger{display:flex}
  .menu-open .mmenu{display:flex}
}

/* Start */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;align-items:stretch;padding-top:24px}
.hero-vid{position:relative;min-height:clamp(300px,62vw,520px);border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.hero-vid .clip{position:absolute;inset:0;overflow:hidden;border-radius:4px}
.hero-vid video,.hero-vid .clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-txt{position:relative;padding:clamp(22px,4vw,34px);background:rgba(var(--fg-rgb),.04);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;gap:22px;min-height:min(520px,100%)}
.hero h1{font-weight:200;font-size:clamp(52px,6.4vw,92px);line-height:.9;letter-spacing:-.055em}
.hero h1 .serif{letter-spacing:-.02em}
.hero p{font-size:16px;line-height:1.55;color:rgba(var(--ink-rgb),.72);max-width:440px;text-wrap:pretty}
.disc{display:flex;flex-direction:column;margin-top:auto}
.disc-head{display:flex;justify-content:space-between;font:500 10.5px var(--mono);letter-spacing:.12em;color:rgba(var(--ink-rgb),.45);padding-bottom:8px}
.disc a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:20px;font-weight:500;letter-spacing:-.01em}
.disc a:last-child{border-bottom:1px solid var(--line)}
.disc .l{display:flex;align-items:center;flex-wrap:wrap;min-width:0;color:rgba(var(--ink-rgb),.85);transition:color 160ms var(--ease)}
.disc .mk{height:16px;width:0;margin-right:0;background:var(--mag);opacity:0;transition:width 160ms var(--ease),margin 160ms var(--ease),opacity 160ms var(--ease)}
.disc .n{font:11px var(--mono);color:rgba(var(--ink-rgb),.5);transition:color 160ms var(--ease)}
.disc .neu{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--mag2);margin-left:8px}
.disc a:hover .mk{width:2px;margin-right:10px;opacity:1}
.disc a:hover .l{color:var(--ink)}
.disc a:hover .n{color:var(--mag2)}
.marquee{margin-top:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 95s linear infinite}
.marquee span{flex:0 0 auto;display:flex;align-items:center;height:56px;padding:0 36px;font-weight:500;font-size:22px;letter-spacing:-.01em;color:rgba(var(--ink-rgb),.7);white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cta-band{padding:72px 0 96px}
.cta-grid{border-top:1px solid var(--line);padding-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;align-items:end}
.cta-grid h2{font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.04em}
.cta-side{display:flex;flex-direction:column;gap:16px;font:13px/1.8 var(--mono);color:rgba(var(--ink-rgb),.7);align-items:flex-start}
.cta-side a:not(.btn){color:inherit}   /* 26.09.: Knopf behaelt seine dunkle Schrift */

/* Seitenkopf */
.page{padding-top:64px;padding-bottom:96px;display:flex;flex-direction:column;gap:32px}
.h1{margin-top:10px;font-weight:200;font-size:clamp(48px,7vw,96px);line-height:.9;letter-spacing:-.05em}

/* Player (Work + Case) */
.player{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.player .media{position:absolute;inset:0;transition:transform 400ms var(--ease)}
.player .media img,.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player video{object-fit:contain;background:#000}
.player:hover .media{transform:scale(1.03)}
.player .playbtn{position:absolute;left:24px;bottom:34px;width:80px;height:80px;border-radius:50%;background:rgba(var(--bg-rgb),.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(var(--fg-rgb),.3);display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:20px;color:var(--ink)}
.player .playbtn span{padding-left:4px}
.badge{position:absolute;font:11px var(--mono);color:#F4F3F0;background:rgba(0,0,0,.5);padding:4px 8px;pointer-events:none}
.badge.tl{left:14px;top:12px}.badge.tr{right:14px;top:12px}
.scrub{position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);opacity:0;pointer-events:none;transition:opacity 160ms var(--ease)}
.scrub::before{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:rgba(255,255,255,.25)}
.scrub i{position:absolute;bottom:3px;width:2px;height:12px;left:var(--x,0%);background:var(--mag);box-shadow:0 0 8px rgba(255,0,230,.9)}
.player:hover .scrub,.tile:hover .scrub{opacity:1}
.player.playing .media,.player.playing .playbtn,.player.playing .badge,.player.playing .scrub,.player.playing>.c{display:none}
.player.playing{cursor:default}
.nofile{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:11px var(--mono);letter-spacing:.1em;color:rgba(var(--ink-rgb),.35);text-align:center;padding:24px}

.sel-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:18px}
.sel-meta .k{font:11px var(--mono);letter-spacing:.1em;color:rgba(var(--ink-rgb),.55);text-transform:uppercase}
.sel-meta .t{font-weight:300;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin-top:6px}
.sel-meta .s{font-size:14px;color:rgba(var(--ink-rgb),.6);margin-top:4px}

/* Bibliothek */
.lib-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{position:relative;overflow:hidden;padding:8px 12px;border-radius:3px;border:1px solid rgba(255,0,230,.5);color:var(--mag2);
  background:transparent;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:border-color 160ms var(--ease),background-color 80ms var(--ease),color 160ms var(--ease),transform 80ms var(--ease)}
/* Schweif: schraeger Magenta-Lichtstreifen, 22 % breit, 3,2 s (Variante A) */
.chip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,0,230,.55),transparent);transform:translateX(-160%) skewX(-20deg)}
.chip:hover{border-color:var(--mag)}
.chip:hover::after,.chip.on::after{opacity:1;animation:scanx 3.2s cubic-bezier(.7,0,.2,1) infinite}
.chip:active{transform:scale(.96)}
.chip.on{border-color:var(--mag);background:rgba(255,0,230,.1)}
@keyframes scanx{0%{transform:translateX(-160%) skewX(-20deg)}45%,100%{transform:translateX(520%) skewX(-20deg)}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:18px 10px}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left}
.tile[hidden]{display:none}
.tile .thumb{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--surface);outline:0 solid transparent;outline-offset:2px;
  transition:outline-color 160ms var(--ease),box-shadow 240ms var(--ease)}
.tile .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease)}
.tile:hover .thumb img{transform:scale(1.03)}
/* Scrub-Vorschau (26.09.): Streifen mit N Einzelbildern, Mausposition waehlt das Bild */
.tile .thumb .spr{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;opacity:0;pointer-events:none;
  transition:opacity 120ms var(--ease)}
.tile:hover .thumb.spr-ready .spr{opacity:1}
/* Handy (26.09.): waagerecht wischen scrubbt, senkrecht scrollt die Seite weiter */
.tile .thumb,.player{touch-action:pan-y}
.tile .thumb.fing.spr-ready .spr{opacity:1}
.player.fing .scrub,.tile .thumb.fing .scrub{opacity:1}
.tile .badge{top:8px;right:8px;font-size:10px;padding:3px 6px}
.tile .scrub{height:22px}.tile .scrub::before{bottom:6px}.tile .scrub i{bottom:2px;height:10px}
.tile.sel .thumb{outline:2px solid var(--mag);box-shadow:0 0 24px rgba(255,0,230,.3)}
.tile .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tile .cl{font:10.5px var(--mono);letter-spacing:.1em;color:rgba(var(--ink-rgb),.5);text-transform:uppercase}
.tile .ti{font-weight:500;font-size:15px;letter-spacing:-.01em;margin-top:3px;color:rgba(var(--ink-rgb),.88);transition:color 160ms var(--ease)}
.tile:hover .ti{color:var(--ink)}
.tile .ca{font:10.5px var(--mono);color:rgba(var(--ink-rgb),.45);white-space:nowrap;text-transform:uppercase}

/* Case */
.case{padding-top:40px;padding-bottom:96px;display:flex;flex-direction:column;gap:48px}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font:500 11px var(--mono);letter-spacing:.1em;color:rgba(var(--ink-rgb),.55)}
.case-top a{color:inherit}.case-top a:hover{color:var(--ink)}
.case h1{font-weight:200;font-size:clamp(44px,6.4vw,92px);line-height:.92;letter-spacing:-.05em;max-width:14ch}
.meta-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.meta-bar div{padding:18px 20px 18px 0;display:flex;flex-direction:column;gap:6px}
.meta-bar .k{font:500 10.5px var(--mono);letter-spacing:.12em;color:rgba(var(--ink-rgb),.45)}
.meta-bar .v{font-size:15px;line-height:1.45}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px}
.steps .n{font:500 11px var(--mono);letter-spacing:.14em;color:var(--mag2)}
.steps h2{font-weight:400;font-size:26px;letter-spacing:-.02em;margin:10px 0}
.steps p{font-size:15px;line-height:1.6;color:rgba(var(--ink-rgb),.72);text-wrap:pretty}
.stills{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.stills .s{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;background:var(--surface)}
.stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:10px}
.cn{position:relative;padding:26px 24px;border-radius:4px;border:1px solid var(--line);background:rgba(var(--fg-rgb),.03);display:flex;flex-direction:column;gap:8px;
  transition:border-color 160ms var(--ease)}
.cn.nx{align-items:flex-end;text-align:right}
.cn>.c{width:12px;height:12px;opacity:0;transition:left 160ms var(--snap),right 160ms var(--snap),top 160ms var(--snap),bottom 160ms var(--snap),opacity 160ms var(--snap)}
.cn>.c.tl{left:-8px;top:-8px}.cn>.c.tr{right:-8px;top:-8px}.cn>.c.bl{left:-8px;bottom:-8px}.cn>.c.br{right:-8px;bottom:-8px}
.cn:hover{border-color:var(--line-hov);color:var(--ink)}
.cn:hover>.c{opacity:1}
.cn:hover>.c.tl{left:-1px;top:-1px}.cn:hover>.c.tr{right:-1px;top:-1px}.cn:hover>.c.bl{left:-1px;bottom:-1px}.cn:hover>.c.br{right:-1px;bottom:-1px}
.cn .d{font:500 10.5px var(--mono);letter-spacing:.12em;color:rgba(var(--ink-rgb),.55);transition:color 160ms var(--ease)}
.cn:hover .d{color:var(--mag2)}
.cn .t{font-weight:300;font-size:26px;letter-spacing:-.03em}
.cn .s{font:11px var(--mono);color:rgba(var(--ink-rgb),.5)}
.end-cta{border-top:1px solid var(--line);padding-top:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.end-cta h2{font-weight:300;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em}

/* Leistungen */
.svc{gap:72px}
.svc-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px;align-items:end}
.svc-top p{font-size:17px;line-height:1.55;color:rgba(var(--ink-rgb),.72);max-width:480px}
.svc-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.svc-row{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px;padding:40px 0;border-bottom:1px solid var(--line);align-items:start}
.svc-row.hl{padding-left:22px;padding-right:22px;background:rgba(var(--fg-rgb),.03)}
.svc-row.hl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mag)}
.svc-l{display:flex;flex-direction:column;gap:24px}
.svc-h{display:flex;gap:22px}
.svc-h .num{font-weight:200;font-size:56px;line-height:.85;letter-spacing:-.05em;color:rgba(var(--ink-rgb),.5)}
.svc-row.hl .svc-h .num{color:var(--ink)}
.svc-h h2{font-weight:400;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;line-height:1.05}
.svc-h p{margin-top:14px;font-size:15px;line-height:1.55;color:rgba(var(--ink-rgb),.72);text-wrap:pretty}
.svc-h .btn{margin-top:22px}
.svc-ul{font:12px/1.9 var(--mono);color:rgba(var(--ink-rgb),.7);margin:0;padding:0;list-style:none}
.svc-ul .k{letter-spacing:.1em;color:rgba(var(--ink-rgb),.5);margin-bottom:6px}
.svc-img{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--surface)}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Ueber */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px;align-items:start}
.about-l{display:flex;flex-direction:column;gap:28px}
.about h1{font-size:clamp(44px,6vw,84px);line-height:.92}
.about p{font-size:17px;line-height:1.6;color:rgba(var(--ink-rgb),.78);max-width:520px}
.facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 20px;font:12px/1.6 var(--mono);color:rgba(var(--ink-rgb),.7);border-top:1px solid var(--line);padding-top:22px;max-width:520px}
.facts .k{color:rgba(var(--ink-rgb),.45)}
.portrait{position:relative;aspect-ratio:4/5;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.portrait img{position:absolute;left:-20%;top:-25%;width:140%;height:auto;max-width:none}

/* Kontakt */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:48px;align-items:start}
.contact-l{display:flex;flex-direction:column;gap:28px}
.contact h1{font-size:clamp(44px,6vw,84px);line-height:.92}
.contact p.lead{font-size:17px;line-height:1.6;color:rgba(var(--ink-rgb),.75);max-width:440px}
.cfacts{display:grid;grid-template-columns:90px minmax(0,1fr);gap:10px 20px;font:13px/1.6 var(--mono);color:rgba(var(--ink-rgb),.75);border-top:1px solid var(--line);padding-top:22px;max-width:440px}
.cfacts .k{color:rgba(var(--ink-rgb),.45)}
.cfacts a{color:inherit}
.form-box{position:relative;padding:clamp(24px,3vw,36px);background:rgba(var(--fg-rgb),.04);border:1px solid var(--line);border-radius:4px}
.form{display:flex;flex-direction:column;gap:18px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.form label,.form .lbl2{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(var(--ink-rgb),.75)}
.form input,.form textarea{padding:12px 14px;border-radius:4px;background:rgba(var(--fg-rgb),.04);border:1px solid rgba(var(--fg-rgb),.14);font:inherit;font-size:14px;color:var(--ink);outline:0;
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease)}
.form textarea{line-height:1.5;resize:vertical;min-height:120px}
.form input:focus,.form textarea:focus{border-color:var(--mag);box-shadow:0 0 0 3px rgba(255,0,230,.15)}
.form .bad{border-color:#FF5A4E}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.consent{font-size:12px;line-height:1.5;color:rgba(var(--ink-rgb),.5);max-width:360px}
.consent a{text-decoration:underline;color:inherit}
.ferr{display:none;font-size:13px;color:#FF5A4E}
.ferr.show{display:block}
.sent{display:none;flex-direction:column;gap:16px;min-height:320px;justify-content:center}
.form-box.done .form{display:none}.form-box.done .sent{display:flex}
.sent .k{font:500 11px var(--mono);letter-spacing:.14em;color:var(--mag2)}
.sent .h{font-weight:200;font-size:clamp(36px,4vw,56px);line-height:.95;letter-spacing:-.04em}
.sent p{font-size:16px;line-height:1.55;color:rgba(var(--ink-rgb),.72)}
.sent .btn{align-self:flex-start}

/* Rechtliches */
.legal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:48px;align-items:start}
.legal h1{font-size:clamp(40px,5vw,64px);line-height:.95;letter-spacing:-.045em}
.legal-body{font-size:15px;line-height:1.7;color:rgba(var(--ink-rgb),.8);display:flex;flex-direction:column;gap:18px;max-width:560px;margin-top:24px}
.legal-body .k{font:500 11px var(--mono);letter-spacing:.12em;color:rgba(var(--ink-rgb),.5);margin-bottom:6px}

/* Footer */
.ftr{border-top:1px solid var(--line)}
.ftr-in{padding-top:40px;padding-bottom:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:28px;align-items:start}
.ftr-in>div{display:flex;flex-direction:column;gap:8px;font:12px/1.6 var(--mono);color:rgba(var(--ink-rgb),.7)}
.ftr img{height:40px;width:auto;align-self:flex-start}
.ftr .about-s{font:13px/1.5 var(--sans);color:rgba(var(--ink-rgb),.6);max-width:260px;margin-top:2px}
.ftr .k{letter-spacing:.12em;color:rgba(var(--ink-rgb),.45)}
.ftr a{color:inherit}.ftr a:hover{color:var(--mag2)}
.ftr .muted{color:rgba(var(--ink-rgb),.5);margin-top:8px}
.ftr .copy{color:rgba(var(--ink-rgb),.45);text-align:right}
@media (max-width:560px){.ftr .copy{text-align:left}}

/* ── Film-Seite + Zurueck-Knopf (26.09.) ── */
.film-note{font-size:17px;line-height:1.6;color:rgba(var(--ink-rgb),.72);max-width:760px;text-wrap:pretty;margin:0}
.film-stills{grid-template-columns:repeat(3,minmax(0,1fr))}
.film-stills .s{aspect-ratio:16/10;border-radius:3px;background-color:var(--surface);background-repeat:no-repeat;overflow:hidden}
@media (max-width:640px){.film-stills{grid-template-columns:1fr}}
/* Zurueck-Knopf (26.09., Runde 3): steht LINKS NEBEN dem Inhalt (ueberlappt nichts) und klebt
   unter der Kopfzeile; ist links kein Platz (schmale Fenster), steht er ueber dem Inhalt im Fluss. */
.back-row{padding-top:18px}
.back-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--mag);color:var(--mag2);background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);text-decoration:none;
  font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  transition:background-color 80ms var(--ease),color 160ms var(--ease),transform 80ms var(--ease)}
.back-btn:hover{background:var(--mag);color:#0B0B0E}
.back-btn:active{transform:scale(.96)}
.back-row ~ .page{padding-top:36px}
.back-row ~ .case{padding-top:24px}
@media (min-width:1440px){
  .back-row{position:fixed;z-index:15;top:50%;left:calc((100vw - var(--maxw)) / 2 + var(--gut) - 20px);transform:translate(-100%,-50%);
    max-width:none;margin:0;padding:0}
  .back-row ~ .page{padding-top:64px}
  .back-row ~ .case{padding-top:40px}
}