/* ============================================================
   thereelthing.studio — site.css
   Baut auf design_tokens.css (F1/F2-Fixes). Fonts lokal.
   Hell/Dunkel-Rhythmus = „Licht an/aus"-Mechanik über die Seite.
   ============================================================ */

@font-face{
  font-family:'Schibsted Grotesk';
  src:url('../../fonts/schibsted-grotesk-var.woff2') format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../../fonts/space-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--trt-bg);color:var(--trt-text);
  font-family:var(--trt-font-body);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--trt-charcoal);outline-offset:3px}
.dark :focus-visible,section.invert :focus-visible,
.reels :focus-visible,.works :focus-visible,.einteller :focus-visible,.foot-sec :focus-visible{outline-color:var(--trt-creme)}
:is(#leistungen,#fuer-wen,#ablauf,#einteller,#ueber,#anfrage,#arbeiten){scroll-margin-top:84px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--trt-charcoal);color:var(--trt-creme);padding:12px 18px;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta)}
.skip:focus{left:12px;top:12px}

/* ---------- Header ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:20px var(--trt-space-10);transition:transform .4s var(--trt-ease)}
.bar.bar--hidden{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:var(--trt-w-sub);font-size:15px;letter-spacing:-.01em;color:var(--trt-text);transition:color .6s var(--trt-ease)}
.brand .ring{stroke:currentColor}
.bar-right{display:flex;align-items:center;gap:22px}
.nav{display:flex;align-items:center;gap:24px;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta)}
.nav a{color:var(--trt-text-dim);text-decoration:none;transition:color .3s var(--trt-ease)}
.nav a:hover,.nav a:focus-visible{color:var(--trt-text)}
.wa{display:inline-flex;align-items:center;color:var(--trt-text);transition:color .3s var(--trt-ease)}
.wa:hover,.wa:focus-visible{color:#25D366}
.bar .cta{color:var(--trt-ink-on-coral);background:var(--trt-signal);padding:9px 17px;border-radius:var(--trt-radius-pill);font-weight:400;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);text-decoration:none;display:inline-flex;align-items:center;gap:0;transition:gap .25s var(--trt-ease),filter .2s var(--trt-ease),transform .2s var(--trt-ease)}
.bar .cta::after{content:"→";max-width:0;overflow:hidden;opacity:0;transition:max-width .25s var(--trt-ease),opacity .2s var(--trt-ease)}
.bar .cta:hover,.bar .cta:focus-visible{filter:brightness(1.06);color:var(--trt-ink-on-coral);gap:7px;transform:translateY(-1px)}
.bar .cta:hover::after,.bar .cta:focus-visible::after{max-width:1.2em;opacity:1}
body.dark .brand{color:var(--trt-text-invert)}
body.dark .nav a{color:var(--trt-text-invert-dim)}
body.dark .nav a:hover{color:var(--trt-text-invert)}
body.dark .wa{color:var(--trt-text-invert)}
body.dark .wa:hover{color:#25D366}
.cutbar{position:fixed;left:0;top:0;width:3px;height:0;background:var(--trt-signal);z-index:90;will-change:height}

/* Mobile-Navigation (Hamburger + Overlay) */
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;padding:10px}
.navtoggle span{display:block;height:2px;width:100%;background:var(--trt-text);transition:transform .3s var(--trt-ease),opacity .2s var(--trt-ease)}
body.dark .navtoggle span{background:var(--trt-text-invert)}
body.navopen .navtoggle span{background:var(--trt-text-invert)}
body.navopen .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.navopen .navtoggle span:nth-child(2){opacity:0}
body.navopen .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilenav{position:fixed;inset:0;z-index:90;background:var(--trt-charcoal);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--trt-space-16) var(--trt-space-6)}
.mobilenav[hidden]{display:none}
.mobilenav a{color:var(--trt-text-invert);text-decoration:none;font-weight:var(--trt-w-head);font-size:clamp(30px,9vw,44px);letter-spacing:-.02em;padding:10px 0}
.mobilenav a.cta{color:var(--trt-signal)}
.navclose{position:absolute;top:14px;right:var(--trt-space-6);width:48px;height:48px;background:none;border:none;cursor:pointer;padding:0}
.navclose span{position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--trt-text-invert);border-radius:2px}
.navclose span:nth-child(1){transform:rotate(45deg)}
.navclose span:nth-child(2){transform:rotate(-45deg)}
.navclose:focus-visible{outline:2px solid var(--trt-signal);outline-offset:2px;border-radius:4px}
body.navopen{overflow:hidden}

/* ---------- Sektions-Grundraster ---------- */
.section{padding:var(--trt-space-24) var(--trt-space-10)}
.section.invert{background:var(--trt-bg-invert);color:var(--trt-text-invert)}
.inner{max-width:var(--trt-maxw);margin:0 auto}
.eyebrow{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.invert .eyebrow{color:var(--trt-text-invert-dim)}
.h2{font-weight:var(--trt-w-display);font-size:clamp(38px,6vw,88px);line-height:.92;letter-spacing:var(--trt-ls-display)}
.dot{color:var(--trt-signal)}
.lead{font-weight:var(--trt-w-sub);font-size:var(--trt-fs-sub);letter-spacing:var(--trt-ls-sub);max-width:34ch}

/* ---------- HERO (F) ---------- */
.runway{height:170vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0a08}
.cinema{position:absolute;inset:0;z-index:2;clip-path:inset(24% 6vw 16% 64vw)}
.cinema video{width:100%;height:100%;object-fit:cover;background:#000}
.creme{position:absolute;inset:0;z-index:1;background:var(--trt-bg);will-change:opacity}
.hero{position:absolute;inset:0;z-index:3;display:flex;align-items:center;padding:0 var(--trt-space-10);pointer-events:none}
.hero .inner-hero{max-width:640px;will-change:transform,opacity}
.hero .eyebrow{overflow:hidden;margin-bottom:var(--trt-space-6);display:block}
.hero .eyebrow span{display:inline-block;transform:translateY(120%);animation:rise .8s var(--trt-ease) .1s forwards}
.title{font-weight:var(--trt-w-display);font-size:clamp(56px,10.5vw,150px);line-height:.86;letter-spacing:var(--trt-ls-display);color:var(--trt-text);transition:color .6s var(--trt-ease)}
.title .line{display:block;overflow:hidden}
.title .line>span{display:inline-block;transform:translateY(112%);will-change:transform}
.title .line:nth-child(1)>span{animation:rise .95s var(--trt-ease) .18s forwards}
.title .line:nth-child(2)>span{animation:rise .95s var(--trt-ease) .30s forwards}
.title .line:nth-child(3)>span{animation:rise .95s var(--trt-ease) .42s forwards}
@keyframes rise{to{transform:translateY(0)}}
.claim{font-weight:var(--trt-w-sub);font-size:var(--trt-fs-sub);letter-spacing:var(--trt-ls-sub);margin-top:var(--trt-space-6);color:var(--trt-text);opacity:0;animation:fade 1s var(--trt-ease) .7s forwards;transition:color .6s var(--trt-ease)}
@keyframes fade{to{opacity:1}}
body.dark .title,body.dark .claim{color:var(--trt-text-invert)}
.wlabel{position:absolute;z-index:4;right:6vw;top:70%;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text);display:flex;gap:10px;align-items:center;transition:color .6s var(--trt-ease)}
.wlabel .no{color:var(--trt-text);transition:color .6s var(--trt-ease)}
body.dark .wlabel{color:var(--trt-text-invert)}
body.dark .wlabel .no{color:var(--trt-signal)}
.foot{position:absolute;left:var(--trt-space-10);bottom:24px;z-index:4;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim);transition:color .6s var(--trt-ease)}
body.dark .foot{color:var(--trt-text-invert-dim)}
.grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
  animation:grainshift .5s steps(5) infinite}
@keyframes grainshift{0%{background-position:0 0}20%{background-position:-24px 8px}40%{background-position:14px -20px}60%{background-position:-8px 18px}80%{background-position:20px 6px}100%{background-position:0 0}}

/* ---------- CASE-REELS (Signature-Cases) ---------- */
.reels{position:relative;z-index:1;background:#0b0a08}
.case{position:relative;height:100svh;overflow:hidden;background:#000}
.case video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,10,8,.82) 0%,rgba(11,10,8,.15) 34%,rgba(11,10,8,0) 60%)}
.case .grain2{position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:inherit}
.caseinfo{position:absolute;left:var(--trt-space-10);bottom:9vh;z-index:3;color:var(--trt-text-invert);opacity:0;transform:translateY(16px);transition:opacity .7s var(--trt-ease),transform .7s var(--trt-ease)}
.case.in .caseinfo{opacity:1;transform:none}
.caseinfo .seg{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.caseinfo .kunde{font-weight:var(--trt-w-head);font-size:clamp(30px,4.6vw,64px);line-height:1;letter-spacing:-.02em;margin-top:6px}
.caseinfo .zeile{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);margin-top:12px;max-width:46ch}
.caseno{position:absolute;right:var(--trt-space-10);top:14vh;z-index:3;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.caseno b{color:var(--trt-signal);font-weight:400}

/* ---------- ARBEITEN-AUSWAHL ---------- */
.works{background:var(--trt-bg-invert);color:var(--trt-text-invert)}
.works .head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--trt-space-8);margin-bottom:var(--trt-space-10)}
.works .head h2{font-weight:var(--trt-w-display);font-size:clamp(38px,6vw,86px);line-height:.9;letter-spacing:var(--trt-ls-display)}
.works .head .rgt{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim);max-width:30ch;text-align:right}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--trt-space-10);border-top:1px solid var(--trt-line-invert);padding-top:var(--trt-space-6)}
.filter button{background:none;border:1px solid var(--trt-line-invert);color:var(--trt-text-invert-dim);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);padding:8px 15px;border-radius:var(--trt-radius-pill);cursor:pointer;transition:color .25s var(--trt-ease),border-color .25s var(--trt-ease)}
.filter button:hover{color:var(--trt-text-invert);border-color:rgba(241,232,215,.45)}
.filter button[aria-pressed="true"]{color:var(--trt-ink-on-coral);background:var(--trt-signal);border-color:var(--trt-signal)}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--trt-space-4);grid-auto-flow:dense}
.tile{position:relative;grid-column:span 2;overflow:hidden;text-decoration:none;color:inherit;background:#000;aspect-ratio:4/5;display:block;transition:opacity .4s var(--trt-ease)}
.tile.feature{grid-column:span 3;aspect-ratio:16/10}
.tile img,.tile video.tilevid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--trt-ease)}
.tile video.tilevid{pointer-events:none;opacity:0;transition:opacity .5s var(--trt-ease),transform .8s var(--trt-ease)}
.tile video.tilevid.ready{opacity:1}
.tile:hover img,.tile:focus-visible img,.tile:hover video.tilevid,.tile:focus-visible video.tilevid{transform:scale(1.035)}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(11,10,8,.78) 0%,rgba(11,10,8,.1) 42%,rgba(11,10,8,0) 66%)}
.tile .meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.tile .seg{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.tile .kunde{font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em;line-height:1.02;margin-top:3px}
.tile .no{position:absolute;top:14px;right:16px;z-index:2;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-signal)}
.tile .go{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);opacity:0;transform:translateX(-6px);transition:opacity .3s var(--trt-ease),transform .3s var(--trt-ease)}
.tile:hover .go,.tile:focus-visible .go{opacity:1;transform:none}
.tile[hidden]{display:none}

/* ---------- Preis-Anker-Band (nach Case-Reels) ---------- */
.anchorbar{background:#0b0a08;color:var(--trt-text-invert);text-align:center;padding:18px var(--trt-space-6);
  font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);position:relative;z-index:1}
.anchorbar b{font-weight:400;color:var(--trt-signal)}
.anchorbar .sep{color:var(--trt-text-invert-dim);margin:0 12px}
.anchorbar a{color:var(--trt-text-invert);text-underline-offset:3px}
.anchorbar a:hover{color:var(--trt-signal)}
.etteaser{background:var(--trt-bg-invert);color:var(--trt-text-invert-dim);text-align:center;padding:14px var(--trt-space-6);
  font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);border-top:1px solid var(--trt-line-invert);position:relative;z-index:1}
.etteaser b{font-weight:400;color:var(--trt-signal)}
.etteaser a{color:var(--trt-text-invert);text-underline-offset:3px;margin-left:12px}
.etteaser a:hover{color:var(--trt-signal)}

/* ---------- FAQ ---------- */
.faqlist{margin-top:var(--trt-space-12);border-top:1px solid var(--trt-line)}
.faq details{border-bottom:1px solid var(--trt-line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--trt-space-6) 44px var(--trt-space-6) 0;position:relative;
  font-weight:var(--trt-w-sub);font-size:var(--trt-fs-h3);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--trt-font-mono);font-size:22px;color:var(--trt-signal);transition:transform .3s var(--trt-ease)}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--trt-text)}
.faq details p{padding:0 0 var(--trt-space-6);color:var(--trt-text-dim);font-size:var(--trt-fs-body);max-width:64ch}

/* ---------- Arbeiten-Auswahl leerer Filter ---------- */
.grid-empty{margin-top:var(--trt-space-8);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}

/* ---------- LEISTUNGEN (3+1) ---------- */
.lst{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--trt-space-12);border-top:1px solid var(--trt-line)}
.lrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) auto;gap:var(--trt-space-8);align-items:baseline;padding:var(--trt-space-8) 0;border-bottom:1px solid var(--trt-line)}
.lrow .name{font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em}
.lrow .name .tag{display:inline-block;font-family:var(--trt-font-mono);font-size:11px;letter-spacing:var(--trt-ls-meta);vertical-align:middle;margin-left:10px;color:var(--trt-text-dim)}
.lrow .desc{color:var(--trt-text-dim);font-size:var(--trt-fs-body)}
.lrow .price{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);white-space:nowrap;text-align:right}
.lrow .price b{font-family:var(--trt-font-body);font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);display:block;letter-spacing:-.02em}
.lrow.signature{align-items:start}
.lrow.signature .price{display:flex;flex-direction:column;align-items:flex-end}
.lrow.signature .book{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--trt-signal);color:var(--trt-ink-on-coral);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);padding:9px 16px;border-radius:var(--trt-radius-pill);text-decoration:none;white-space:nowrap}
.lrow.signature .book:hover{filter:brightness(1.05)}
.lnote{margin-top:var(--trt-space-8);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}

/* ---------- FÜR WEN ---------- */
.seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--trt-space-8);margin-top:var(--trt-space-12)}
.seg-item{border-top:1px solid var(--trt-line);padding-top:var(--trt-space-4)}
.seg-item .no{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.seg-item h3{font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em;margin:8px 0 6px}
.seg-item p{color:var(--trt-text-dim);font-size:var(--trt-fs-body)}

/* ---------- ABLAUF ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--trt-space-6);margin-top:var(--trt-space-12);counter-reset:step}
.step{border-top:2px solid var(--trt-line-invert);padding-top:var(--trt-space-4)}
.step .n{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);color:var(--trt-signal)}
.step h3{font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em;margin:8px 0 6px}
.step p{color:var(--trt-text-invert-dim);font-size:var(--trt-fs-meta);font-family:var(--trt-font-mono);letter-spacing:var(--trt-ls-meta)}

/* ---------- einteller-FUNNEL ---------- */
.einteller{background:var(--trt-bg-invert);color:var(--trt-text-invert)}
.einteller .credit{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.einteller h2{font-weight:var(--trt-w-display);font-size:clamp(40px,7vw,104px);line-height:.9;letter-spacing:var(--trt-ls-display);margin-top:var(--trt-space-4)}
.einteller .body{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:var(--trt-space-16);margin-top:var(--trt-space-10);align-items:center}
.einteller .media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000;border-radius:3px}
.einteller .media video{width:100%;height:100%;object-fit:cover;display:block}
.einteller p{color:var(--trt-text-invert-dim);max-width:48ch}
.einteller .apply{margin-top:var(--trt-space-8);display:inline-flex;gap:8px;align-items:center;background:var(--trt-signal);color:var(--trt-ink-on-coral);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);padding:13px 22px;border-radius:var(--trt-radius-pill);text-decoration:none}
.einteller .apply:hover{filter:brightness(1.05)}
.einteller .pts{margin-top:var(--trt-space-6);border-top:1px solid var(--trt-line-invert);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.einteller .pts li{list-style:none;padding:9px 0;border-bottom:1px solid var(--trt-line-invert)}
.einteller .socials{display:flex;align-items:center;gap:16px;margin-top:var(--trt-space-6)}
.einteller .socials .sl{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.einteller .socials a{color:var(--trt-text-invert);display:inline-flex;transition:color .3s var(--trt-ease)}
.einteller .socials a:hover,.einteller .socials a:focus-visible{color:var(--trt-signal)}

/* ---------- ÜBER ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--trt-space-16);align-items:end}
.about .big{font-weight:var(--trt-w-sub);font-size:clamp(24px,3.4vw,44px);line-height:1.12;letter-spacing:-.02em}
.about .vals{display:flex;gap:var(--trt-space-6);margin-top:var(--trt-space-8);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.about .side{font-size:var(--trt-fs-body);color:var(--trt-text-dim)}
.about .side p+p{margin-top:var(--trt-space-4)}

/* ---------- ANFRAGE ---------- */
.form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--trt-space-16);margin-top:var(--trt-space-12);align-items:start}
.form .pitch h2{font-weight:var(--trt-w-display);font-size:clamp(40px,6.5vw,96px);line-height:.9;letter-spacing:var(--trt-ls-display)}
.form .pitch p{color:var(--trt-text-invert-dim);margin-top:var(--trt-space-6);max-width:40ch}
.form form{display:grid;gap:var(--trt-space-5)}
.form form[hidden]{display:none}
.fld{display:grid;gap:7px}
.fld label{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.fld input,.fld select,.fld textarea{background:transparent;border:none;border-bottom:1px solid var(--trt-line-invert);color:var(--trt-text-invert);font-family:var(--trt-font-body);font-size:var(--trt-fs-body);padding:10px 2px}
.fld select option{color:#111}
.fld input::placeholder,.fld textarea::placeholder{color:var(--trt-text-invert-dim)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--trt-signal)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--trt-space-6)}
.submit{margin-top:var(--trt-space-4);justify-self:start;background:var(--trt-signal);color:var(--trt-ink-on-coral);border:none;font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);padding:14px 26px;border-radius:var(--trt-radius-pill);cursor:pointer}
.submit:hover{filter:brightness(1.05)}
.form .fine{font-family:var(--trt-font-mono);font-size:11px;letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim);margin-top:var(--trt-space-2)}
.form .fine a{color:var(--trt-text-invert);text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fld label .opt{color:var(--trt-text-invert-dim);text-transform:none;letter-spacing:0}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"]{border-bottom-color:var(--trt-signal)}
.fld .err{color:var(--trt-signal);font-family:var(--trt-font-mono);font-size:11px;letter-spacing:var(--trt-ls-meta);margin-top:2px}
.form .formmsg{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-signal);margin-top:var(--trt-space-2)}
.formdone{border-top:2px solid var(--trt-signal);padding-top:var(--trt-space-8)}
.formdone .done-eyebrow{font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.formdone .done-h{font-weight:var(--trt-w-head);font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1;margin-top:var(--trt-space-4)}
.formdone .done-p{color:var(--trt-text-invert-dim);margin-top:var(--trt-space-4);max-width:42ch}

/* ---------- FOOTER ---------- */
.foot-sec{background:#0b0a08;color:var(--trt-text-invert);padding:var(--trt-space-16) var(--trt-space-10) var(--trt-space-10)}
.foot-top{display:flex;justify-content:space-between;gap:var(--trt-space-10);flex-wrap:wrap;align-items:flex-start}
.foot-top .rev a{color:var(--trt-text-invert);text-decoration:none;font-weight:var(--trt-w-head);font-size:var(--trt-fs-h3);letter-spacing:-.02em;border-bottom:2px solid var(--trt-signal);padding-bottom:3px}
.foot-cols{display:flex;gap:var(--trt-space-16);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta)}
.foot-cols>div{min-width:130px}
.foot-cols a{color:var(--trt-text-invert-dim);text-decoration:none;display:block;padding:5px 0}
.foot-cols a:hover{color:var(--trt-text-invert)}
.foot-cols .foot-static{color:var(--trt-text-invert-dim);display:block;padding:5px 0}
.foot-cols .foot-ig{display:inline-flex;align-items:center;gap:6px}
.pitch-contact{margin-top:var(--trt-space-6);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}
.pitch-contact a{color:var(--trt-text-invert);text-underline-offset:3px;text-decoration:underline}
.pitch-contact a:hover{color:var(--trt-signal)}
.foot-bottom{display:flex;justify-content:space-between;gap:var(--trt-space-8);flex-wrap:wrap;margin-top:var(--trt-space-16);padding-top:var(--trt-space-6);border-top:1px solid var(--trt-line-invert);font-family:var(--trt-font-mono);font-size:11px;letter-spacing:var(--trt-ls-meta);color:var(--trt-text-invert-dim)}

/* ---------- Schwebende Buttons (WhatsApp + nach oben) ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s var(--trt-ease),transform .3s var(--trt-ease)}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab a,.fab button{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:filter .2s var(--trt-ease),transform .2s var(--trt-ease)}
.fab a:hover,.fab button:hover{transform:translateY(-2px)}
.fab-wa{background:#25D366;color:#fff}
.fab-wa:hover{filter:brightness(1.06)}
.fab-top{background:var(--trt-charcoal);color:var(--trt-creme)}
.fab-top:hover{filter:brightness(1.2)}
@media (max-width:680px){ .fab{right:14px;bottom:14px} }

/* ---------- Scroll-Reveal (dezent, wenige Momente; ohne JS sichtbar) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--trt-ease),transform .7s var(--trt-ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .runway{height:auto}.stage{position:relative;height:100svh}
  .hero .eyebrow span,.title .line>span{transform:none !important;animation:none !important}
  .claim{opacity:1 !important;animation:none !important}
  .grain{animation:none}.tile:hover img{transform:none}
  .caseinfo{opacity:1 !important;transform:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  .fab,.fab a,.fab button,.bar .cta,.bar .cta::after{transition:none !important}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .lrow{grid-template-columns:1fr;gap:6px}
  .lrow .price{text-align:left}
  .lrow.signature .price{align-items:flex-start}
  .einteller .body,.about,.form{grid-template-columns:1fr;gap:var(--trt-space-8)}
  .steps{grid-template-columns:1fr 1fr}
  .works .head{flex-direction:column;align-items:flex-start}
  .works .head .rgt{text-align:left}
  .grid{grid-template-columns:repeat(4,1fr)}
  .tile{grid-column:span 2}.tile.feature{grid-column:span 4;aspect-ratio:16/9}
}
@media (max-width:680px){
  .bar{padding:16px var(--trt-space-6)}
  .nav{display:none}
  .navtoggle{display:flex}
  .bar-right{gap:10px}
  .bar .wa{display:none}
  .bar .cta{padding:8px 14px}
  .section{padding:var(--trt-space-16) var(--trt-space-6)}
  .hero{padding:0 var(--trt-space-6) 12vh;align-items:flex-end}
  .title{font-size:clamp(44px,13.5vw,76px)}
  .foot,.caseinfo{left:var(--trt-space-6)}
  .caseno{right:var(--trt-space-6)}
  .frow{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .tile,.tile.feature{grid-column:span 2;aspect-ratio:4/5}
  .foot-sec{padding:var(--trt-space-12) var(--trt-space-6)}
  .foot-cols{flex-wrap:wrap;gap:var(--trt-space-8) var(--trt-space-10)}
  .foot-cols>div{min-width:0;flex:1 1 140px}
  .foot-cols a{overflow-wrap:anywhere}
}


/* Kundenstimme (Testimonial) */
.testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--trt-space-8);margin-top:var(--trt-space-6)}
.testi{margin:0}
.testi-q{font-weight:var(--trt-w-sub);font-size:clamp(18px,1.9vw,24px);line-height:1.3;letter-spacing:-.01em;color:var(--trt-text)}
.testi-by{margin-top:var(--trt-space-5);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text-dim)}
.testi-by .stars{color:var(--trt-text);margin-right:8px;letter-spacing:2px}
.testi-link{display:inline-block;margin-top:var(--trt-space-6);font-family:var(--trt-font-mono);font-size:var(--trt-fs-meta);letter-spacing:var(--trt-ls-meta);color:var(--trt-text);text-decoration:none;border-bottom:1px solid var(--trt-signal);padding-bottom:3px}
.testi-link:hover{border-bottom-width:2px}


/* Footer-Wortmarke (echtes Logo, §7) */
.foot-brand{margin-bottom:var(--trt-space-8)}
.foot-wordmark{width:clamp(120px,14vw,150px);height:auto;display:block}