/* ===================================================================
   matthiasthomann.de — geteiltes Grundgerüst (Design-Tokens, Basis,
   Nav, Footer, Cursor/Trail, Buttons, Content-Layouts für Unterseiten)
   Wird von jeder Seite eingebunden: <link rel="stylesheet" href="/assets/style.css">
   Seiten-eigene Extras (Hero-Video, Kinetic-Strip, KI-Feld) bleiben
   inline auf der jeweiligen Seite, da sie nur dort gebraucht werden.
=================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-var-latin.woff2") format("woff2")}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22.4%;line-gap-override:0%}
:root{
  --bg:#0a0a0a;--ink:#0a0a0a;
  --txt:#f3f3ee;--txt-mid:#b4b4ac;--txt-dim:#8d8d86;--txt-faint:#75756d;
  --lime:#cdff00;
  --line:rgba(243,243,238,.13);--line-strong:rgba(243,243,238,.22);
  --hair:1px;--maxw:1480px;--maxw-prose:840px;--r-pill:999px;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:40px;--sp-7:64px;--sp-8:104px;--sp-9:168px;
  --gut:clamp(18px,4vw,52px);

  --fs-2xs:10px;--fs-xs:11px;--fs-sm:12px;
  --fs-base:clamp(14px,.5vw + 12px,16px);
  --fs-md:clamp(16px,.6vw + 14px,18px);
  --fs-lg:clamp(17px,1vw + 14px,21px);
  --fs-xl:clamp(20px,1.6vw + 15px,26px);
  --fs-d1:clamp(54px,15vw,248px);
  --fs-d2:clamp(48px,11.5vw,208px);
  --fs-d3:clamp(40px,9.5vw,148px);
  --fs-d4:clamp(32px,5.4vw,78px);
  --fs-d5:clamp(24px,2.8vw,46px);

  --lh-display:.9;--lh-tight:1.06;--lh-snug:1.3;--lh-body:1.55;
  --tr-d1:-.045em;--tr-d2:-.038em;--tr-d3:-.03em;--tr-d4:-.022em;
  --tr-mono:.16em;--tr-mono-wide:.22em;

  --ease:cubic-bezier(.19,1,.22,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --d-micro:160ms;--d-micro-out:110ms;--d-elem:500ms;--d-sect:800ms;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --serif:"Times New Roman",Georgia,serif;
  --sans:"Inter","Inter Fallback","Helvetica Neue",system-ui,-apple-system,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
@media(min-resolution:2dppx){:root{--hair:.5px}}
html{scroll-behavior:smooth;scrollbar-color:#3a3a36 #121211}
::-webkit-scrollbar{width:10px;background:#121211}
::-webkit-scrollbar-thumb{background:#3a3a36;border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:#4d4d47}
section[id]{scroll-margin-top:64px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:var(--fs-md);line-height:var(--lh-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;cursor:none}
body.touch{cursor:auto}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--lime);color:var(--ink)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(pointer:coarse){.grain{display:none}}

/* ===== LOGO / SYMBOLS ===== */
.tdl{height:32px;width:auto;overflow:visible;color:var(--txt);flex:none}
.tdl path{fill:currentColor;stroke:none}
.tdl .mouth{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.tdl .eye{fill:currentColor;stroke:none}
.tdl .g-tri,.tdl .g-hrt,.tdl .g-bny{transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.28)}50%{transform:scale(.92)}75%{transform:scale(1.12)}}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-24%)}60%{transform:translateY(0)}80%{transform:translateY(-10%)}}
.brand:hover .g-tri,.symdiv svg:hover .g-tri{animation:spin .9s var(--spring)}
.brand:hover .g-hrt,.symdiv svg:hover .g-hrt{animation:beat .8s var(--ease)}
.brand:hover .g-hrt path,.symdiv svg:hover .g-hrt path{fill:var(--lime)}
.brand:hover .g-bny,.symdiv svg:hover .g-bny{animation:hop .8s var(--ease)}
.symdiv{display:flex;justify-content:center;align-items:center;gap:18px;padding:clamp(46px,8vw,104px) 0}
.symdiv::before,.symdiv::after{content:"";height:1px;width:min(20vw,200px);background:var(--line)}
.symdiv svg{height:clamp(28px,4vw,40px);color:var(--lime);cursor:none}

/* ===== SCROLL PROGRESS ===== */
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:9400;pointer-events:none;background:var(--lime);transform-origin:left;transform:scaleX(0)}

/* ===== CURSOR — yellow arrow ===== */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity var(--d-micro) var(--ease)}
.cursor.act{will-change:transform;opacity:1}
.cursor .arrow{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;display:flex;align-items:center;justify-content:center;transform-origin:center}
.cursor .arrow svg{width:30px;height:30px;color:var(--lime);filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));transition:scale .25s var(--spring)}
.cursor.lit .arrow svg{scale:1.3}
.cursor .ring{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border:1.5px solid var(--lime);border-radius:50%;opacity:0}
.cursor.lit .ring{animation:cring .9s var(--ease) infinite}
@keyframes cring{0%{opacity:.65;transform:scale(.42)}100%{opacity:0;transform:scale(1.3)}}
body.touch .cursor{display:none}
.trail{position:fixed;inset:0;pointer-events:none;z-index:9998}
.tparticle{position:fixed;left:0;top:0;will-change:transform,opacity;pointer-events:none}
.tparticle svg{width:33px;height:33px;display:block;filter:drop-shadow(0 0 6px rgba(205,255,0,.5))}
.tparticle svg path{fill:var(--lime);stroke:none}
.tparticle svg .eye{fill:var(--lime);stroke:none}

/* ===== MAGNETIC LETTERS + reveal (nur Startseite nutzt Magnet, reveal überall) ===== */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block}
.ch.rv{opacity:0}
.ch.rv:not(.m){transform:translateY(110%) rotate(7deg)}
.splitc.in .ch.rv,.masthead.in .ch.rv{opacity:1;transition:opacity var(--d-elem) var(--ease);transition-delay:calc(min(var(--i,0),14)*28ms)}
.splitc.in .ch.rv:not(.m),.masthead.in .ch.rv:not(.m){transform:none;transition:transform var(--d-sect) var(--ease),opacity var(--d-elem) var(--ease);transition-delay:calc(min(var(--i,0),14)*28ms)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.lbl{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--tr-mono-wide);text-transform:uppercase;color:var(--txt-dim);line-height:var(--lh-snug)}
.lbl.lime{color:var(--lime)}
.lbl-box{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:var(--sp-2) var(--sp-3);display:inline-block}
.brk::before{content:"[ "}.brk::after{content:" ]"}

/* ===== NAV ===== */
header.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:flex-start;justify-content:space-between;
  padding:var(--sp-4) var(--gut);transition:background var(--d-sect) var(--ease),padding var(--d-sect) var(--ease),border-color var(--d-sect) var(--ease);border-bottom:var(--hair) solid transparent}
header.nav.scrolled{background:rgba(10,10,10,.82);backdrop-filter:blur(12px);border-color:var(--line);padding-top:12px;padding-bottom:12px}
.brand-col{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brandsub{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);
  position:relative;width:105.6px;height:13px;overflow:hidden;max-height:20px;opacity:1;transition:max-height .4s,opacity .35s}
.brandsub span{position:absolute;top:0;transform:translateX(-50%)}
.brandsub span:nth-child(1){left:15.15%}
.brandsub span:nth-child(2){left:50%}
.brandsub span:nth-child(3){left:84.85%}
.nav.scrolled .brandsub{max-height:0;opacity:0}
.nav-col{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.nav-links{display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav-links a{position:relative;color:var(--txt);cursor:none;transform-origin:center bottom;transition:color var(--d-micro-out) var(--ease),transform var(--d-micro-out) var(--ease),opacity var(--d-micro-out) var(--ease)}
.nav-links a.act{color:var(--lime)}
.nav-links a .n{color:var(--txt-faint);margin-right:var(--sp-2);transition:color var(--d-micro) var(--ease)}
.nav-links a:hover .n{color:var(--lime)}
.nav-links:hover a{opacity:.45}
.nav-links a:hover{color:var(--lime);opacity:1;transform:translateY(-2px) scale(1.06);transition-duration:var(--d-micro)}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin:-10px -10px -10px 0;cursor:none;background:none;border:0;z-index:101}
.burger span{width:26px;height:2px;background:var(--txt);display:block;transition:transform .3s var(--ease),opacity .25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1040px){
  .navsub{display:none}
  .nav-links{position:fixed;inset:0;height:100dvh;background:var(--bg);flex-direction:column;justify-content:center;gap:var(--sp-4);font-size:26px;letter-spacing:0;transform:translateY(-101%);transition:transform var(--d-sect) var(--ease)}
  .nav-links a{display:inline-flex;align-items:center;min-height:52px;padding:0 var(--sp-4)}
  .nav-links.open{transform:translateY(0)}
  .burger{display:flex}
}

/* ===== sections / headings (geteilt) ===== */
.sec{padding-block:clamp(var(--sp-8),13vh,var(--sp-9));position:relative}
.sec-tight{padding-block:clamp(var(--sp-7),8vh,var(--sp-8));position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-7);border-bottom:var(--hair) solid var(--line);padding-bottom:var(--sp-5)}
.sec-head .htext .lbl,.sec-head .htext .lbl-box{margin-bottom:var(--sp-4);display:inline-block}
.sec-head h2{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d2);line-height:var(--lh-display);font-size:var(--fs-d2)}
.sec-head .meta{text-align:right;max-width:320px}
.sec-head .meta p{font-family:var(--serif);font-style:italic;color:var(--txt-dim);font-size:15px;margin-top:8px}
h2.h-md{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);line-height:var(--lh-tight);font-size:var(--fs-d4)}
h3.h-sm{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(24px,3vw,40px);line-height:var(--lh-tight)}
.em{color:var(--lime)}

/* ===== PAGE HERO (Unterseiten ohne Video) ===== */
.page-hero{padding-top:clamp(150px,22vh,220px);padding-bottom:clamp(60px,8vh,90px)}
.page-hero .lbl-box{margin-bottom:var(--sp-5)}
.page-hero h1{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d3);line-height:var(--lh-tight);font-size:clamp(34px,6.6vw,108px);max-width:19ch}
.page-hero .lead{font-family:var(--serif);font-style:italic;color:var(--txt-dim);font-size:clamp(17px,1.6vw,23px);line-height:var(--lh-snug);max-width:52ch;margin-top:var(--sp-5)}
.crumbs{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:var(--sp-5)}
.crumbs a{color:var(--txt-dim);transition:color var(--d-micro) var(--ease)}
.crumbs a:hover{color:var(--lime)}

/* ===== PROSE (Fließtext auf Leistungs-/Ratgeber-/Rechtsseiten) ===== */
.prose{max-width:var(--maxw-prose)}
.prose p{color:var(--txt-dim);font-size:var(--fs-md);line-height:var(--lh-body);margin-bottom:var(--sp-4);max-width:64ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--txt);font-weight:700}
.prose a:not(.btn-lime){color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{color:var(--txt-dim);font-size:var(--fs-md);line-height:var(--lh-body);margin:0 0 var(--sp-4) var(--sp-5);max-width:60ch}
.prose li{margin-bottom:var(--sp-2)}
.prose li b,.prose li strong{color:var(--txt)}

/* ===== LEISTUNGS-KACHELN (Startseite "Was ich mache") ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.svc-grid.four{grid-template-columns:repeat(4,1fr)}
.svc-grid.four .svc-card{padding:var(--sp-5)}
.svc-grid.four .svc-card h3{font-size:clamp(18px,1.55vw,24px)}
@media(max-width:1280px){.svc-grid.four{grid-template-columns:repeat(2,1fr)}.svc-grid.four .svc-card{padding:var(--sp-6)}.svc-grid.four .svc-card h3{font-size:clamp(24px,2.6vw,36px)}}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr}.svc-grid.four{grid-template-columns:1fr}}
.svc-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-6);min-height:280px;border:var(--hair) solid var(--line);background:#0f0f0e;cursor:none;transition:border-color var(--d-micro-out) var(--ease),background var(--d-micro-out) var(--ease)}
.svc-card:hover,.svc-card:focus-visible{border-color:var(--lime);background:#141410}
.svc-card .sn{font-family:var(--mono);font-size:12px;color:var(--txt-faint)}
.svc-card h3{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(24px,2.6vw,36px);line-height:var(--lh-tight)}
.svc-card p{color:var(--txt-dim);font-size:var(--fs-base);line-height:var(--lh-body)}
.svc-card .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);display:inline-flex;align-items:center;gap:8px}
.svc-card:hover .go{gap:12px;transition:gap .25s var(--ease)}

.sec-head.md h2{font-size:var(--fs-d4);line-height:var(--lh-tight);letter-spacing:var(--tr-d4)}

/* ===== WORK grid / CARDS (auch für Beispiele auf Unterseiten) ===== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-5)}
.card{position:relative;overflow:hidden;cursor:none;background:#141414;border:var(--hair) solid var(--line);grid-column:span 6;aspect-ratio:16/10}
.card.feature{grid-column:span 12;aspect-ratio:24/9}
.card.full{grid-column:span 12;aspect-ratio:21/9}
.card.wide{grid-column:span 8;aspect-ratio:16/9}
.card.half{grid-column:span 6;aspect-ratio:16/10}
.card.third{grid-column:span 4;aspect-ratio:4/5}
@media(max-width:900px){.card,.card.wide,.card.half,.card.third{grid-column:span 12;aspect-ratio:16/10}.card.feature,.card.full{grid-column:span 12;aspect-ratio:16/9}}
.card .media{position:absolute;inset:-8%;overflow:hidden}
.card .media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.74);transition:transform 420ms var(--ease),filter 300ms var(--ease)}
.card:hover .media img,.card:focus-visible .media img{transform:scale(1.045);filter:grayscale(0) brightness(.98);transition-duration:600ms,440ms}
.card-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none;z-index:1;background:transparent;filter:none!important;opacity:0;transition:opacity .35s var(--ease)}
.card-vid.ready{opacity:1}
.card .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,10,10,.9),rgba(10,10,10,0) 60%)}
.card .num{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--txt)}
.card .meta2{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--sp-4) var(--sp-4) var(--sp-4)}
.card .meta2 .ttl{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:var(--fs-d5);line-height:var(--lh-display);transition:color var(--d-micro) var(--ease)}
.card.feature .meta2 .ttl,.card.full .meta2 .ttl{font-size:clamp(36px,6vw,96px)}
.card:hover .meta2 .ttl,.card:focus-visible .meta2 .ttl{color:var(--lime)}
.card .meta2 .cl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim);margin-top:9px}
.cardlogo{display:inline-block;height:clamp(30px,4vw,50px);color:var(--txt);transition:color .3s}
.cardlogo svg{height:100%;width:auto;display:block}
.card:hover .cardlogo,.card:focus-visible .cardlogo{color:var(--lime)}

/* ===== ABOUT / PORTRAIT ===== */
.about{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(34px,5vw,80px);align-items:start}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.about .portrait{position:relative;overflow:hidden;border:var(--hair) solid var(--line);aspect-ratio:4/5;background:#141414}
.about .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) contrast(1.04);transition:transform 480ms var(--ease),filter 320ms var(--ease)}
.about .portrait:hover img{filter:grayscale(0);transform:scale(1.03);transition-duration:640ms,460ms}
.about .portrait .cap{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:5px 10px}
.stockists{margin-top:var(--sp-7);border-top:var(--hair) solid var(--line);padding-top:var(--sp-5)}
.clients{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3.5vw,52px)}
.clogo{display:inline-flex;align-items:center;min-height:44px;height:clamp(22px,3vw,38px);color:var(--txt-dim);cursor:none;transition:color var(--d-micro-out) var(--ease),transform var(--d-micro-out) var(--ease)}
.clogo svg{height:100%;width:auto;display:block}
.clogo:hover{color:var(--lime);transform:translateY(-3px);transition-duration:var(--d-micro)}
.ctext{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,3.2vw,42px);color:var(--txt-dim);cursor:none}

/* ===== STEPS (Ablauf in N Schritten) ===== */
.steps{list-style:none;display:flex;flex-direction:column}
.steps li{display:flex;gap:var(--sp-4);align-items:baseline;color:var(--txt-dim);font-size:var(--fs-md);line-height:var(--lh-body);border-top:var(--hair) solid var(--line);padding:var(--sp-4) 0;max-width:60ch}
.steps li:last-child{border-bottom:var(--hair) solid var(--line)}
.steps .sn{font-family:var(--mono);font-size:13px;color:var(--lime);flex:none}
.steps b{color:var(--txt);font-weight:700}

/* ===== FAQ (native <details>, auch GEO/Schema-Quelle) ===== */
.faq{display:flex;flex-direction:column;max-width:var(--maxw-prose)}
.faq details{border-top:var(--hair) solid var(--line);padding:var(--sp-5) 0}
.faq details:last-child{border-bottom:var(--hair) solid var(--line)}
.faq summary{cursor:none;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);font-weight:700;font-size:var(--fs-lg);color:var(--txt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{font-family:var(--mono);color:var(--lime);flex:none;transition:transform .3s var(--ease)}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{color:var(--txt-dim);font-size:var(--fs-base);line-height:var(--lh-body);margin-top:var(--sp-4);max-width:62ch}

/* ===== CTA BLOCK ===== */
.cta-block{margin-top:clamp(var(--sp-6),6vw,var(--sp-8));border-top:var(--hair) solid var(--line);padding-top:var(--sp-6);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap}
.cta-block .q{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,2.6vw,36px)}
.btn-lime{display:inline-flex;align-items:center;min-height:48px;background:var(--lime);color:var(--ink);font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;padding:var(--sp-4) var(--sp-6);border-radius:var(--r-pill);cursor:none;transform-origin:center;transition:transform var(--d-micro-out) var(--ease),background var(--d-micro-out) var(--ease)}
.btn-lime:hover{background:#dcff33;transform:translateY(-2px) scale(1.02);transition-duration:var(--d-micro)}
.btn-lime:active{transform:translateY(0) scale(.99)}
.btn-ghost{display:inline-flex;align-items:center;min-height:48px;border:var(--hair) solid var(--line-strong);color:var(--txt);font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;padding:var(--sp-4) var(--sp-6);border-radius:var(--r-pill);cursor:none;transition:border-color var(--d-micro-out) var(--ease),color var(--d-micro-out) var(--ease)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}

/* ===== REFERENZEN / CASE-GRID ===== */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
@media(max-width:820px){.case-grid{grid-template-columns:1fr}}
.case-card{position:relative;overflow:hidden;border:var(--hair) solid var(--line);background:#141414;aspect-ratio:4/3;cursor:none}
.case-card .media{position:absolute;inset:0}
.case-card .media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.74);transition:transform 420ms var(--ease),filter 300ms var(--ease)}
.case-card:hover .media img{transform:scale(1.045);filter:grayscale(0) brightness(.98)}
.case-card .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92),rgba(10,10,10,.05) 55%)}
.case-card .meta2{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-5)}
.case-card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:8px;display:inline-block}
.case-card h3{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(24px,2.8vw,38px);line-height:var(--lh-tight);color:var(--txt)}
.case-card .cl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);margin-top:8px}
.case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line);padding:var(--sp-6) 0;margin:var(--sp-7) 0}
@media(max-width:820px){.case-meta{grid-template-columns:1fr;gap:var(--sp-4)}}
.case-meta .lbl{display:block;margin-bottom:8px}
.case-meta p{color:var(--txt);font-size:var(--fs-md);line-height:var(--lh-body)}
.placeholder-note{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--txt-faint);border:var(--hair) dashed var(--line-strong);padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-6);max-width:64ch}

/* ===== CONTACT ===== */
.contact{text-align:center;padding-block:clamp(var(--sp-8),15vh,var(--sp-9))}
.contact .big{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d2);line-height:var(--lh-display);font-size:var(--fs-d2)}
.contact .mail{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--sp-6);font-family:var(--mono);font-size:clamp(14px,2vw,22px);letter-spacing:.04em;color:var(--lime);position:relative;cursor:none}
.contact .mail::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform var(--d-micro) var(--ease)}
.contact .mail:not(:hover)::after{transform-origin:right;transition-duration:var(--d-micro-out)}
.contact .mail:hover::after{transform:scaleX(1)}
.phones{margin-top:20px;display:flex;gap:clamp(16px,3vw,40px);justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);letter-spacing:.08em}
.phones a{display:inline-flex;align-items:center;min-height:44px;color:var(--txt-dim);cursor:none;transform-origin:center;transition:color var(--d-micro-out) var(--ease)}
.phones a:hover{color:var(--lime);transform:scale(1.08)}
.socials{margin-top:40px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
.socials a{display:inline-flex;align-items:center;min-height:44px;padding:var(--sp-3) var(--sp-5);border:var(--hair) solid var(--line);border-radius:var(--r-pill);cursor:none;transform-origin:center;transition:border-color var(--d-micro-out) var(--ease),color var(--d-micro-out) var(--ease)}
.socials a:hover{border-color:var(--lime);color:var(--lime);transition-duration:var(--d-micro)}
.localtime{margin-top:30px;display:flex;gap:10px;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim)}
.localtime .ldot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none;animation:lpulse 2.2s var(--ease) infinite}
.localtime #ltime{color:var(--lime)}
@keyframes lpulse{0%,100%{box-shadow:0 0 0 0 rgba(205,255,0,.55)}50%{box-shadow:0 0 0 7px rgba(205,255,0,0)}}

/* ===== FORM (Kontaktformular) ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);max-width:680px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:#111;border:var(--hair) solid var(--line-strong);color:var(--txt);font-family:var(--sans);font-size:var(--fs-base);padding:12px 14px;border-radius:4px;resize:vertical;cursor:auto}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--lime)}
.field textarea{min-height:130px}

footer{border-top:var(--hair) solid var(--line);padding:var(--sp-6) 0;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--txt-faint)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer .fnav{display:flex;gap:18px;flex-wrap:wrap}
footer .fnav a{transition:color var(--d-micro) var(--ease)}
footer .fnav a:hover{color:var(--lime)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--d-elem) var(--ease),transform var(--d-elem) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* lightbox (Beispiel-Videos) */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(6,6,6,.94);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--d-elem) var(--ease);padding:clamp(var(--sp-4),4vw,var(--sp-7))}
.lb.open{opacity:1;pointer-events:auto}
.lb .box{width:min(1100px,100%);aspect-ratio:16/9;position:relative;background:#000;transform:scale(.97);transition:transform var(--d-elem) var(--ease);border:var(--hair) solid var(--line)}
.lb.open .box{transform:scale(1)}
.lb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb .close{position:absolute;top:-52px;right:0;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);background:none;border:0;cursor:none;transition:color var(--d-micro-out) var(--ease)}
.lb .close:hover{color:var(--lime)}
.lb .cap{position:absolute;top:-52px;left:0;display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--txt)}
.lb .cap b{color:var(--lime)}

/* Tabellen (z.B. Vergleich 3D vs. Fotoshooting) */
table.cmp{width:100%;border-collapse:collapse;max-width:var(--maxw-prose);margin:var(--sp-5) 0}
table.cmp th,table.cmp td{text-align:left;padding:var(--sp-3) var(--sp-4);border-bottom:var(--hair) solid var(--line);font-size:var(--fs-base);color:var(--txt-dim)}
table.cmp th{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--txt);border-bottom:var(--hair) solid var(--line-strong)}
table.cmp td:first-child,table.cmp th:first-child{color:var(--txt);font-weight:600}

/* ===================================================================
   HERO · KINETIC · STATEMENT/KI-FELD  (Start + Unterseiten teilen sich diese Bausteine)
=================================================================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000}
.hero-video{position:absolute;inset:0;z-index:0;cursor:none}
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.hero-video video.ready{opacity:1}
.hero-poster{position:absolute;inset:0;z-index:0;object-fit:cover;width:100%;height:100%}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.5),rgba(10,10,10,.05) 32%,rgba(10,10,10,.2) 62%,rgba(10,10,10,.94))}
.hero-grid{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:1fr auto;padding:120px clamp(18px,4vw,52px) 30px;pointer-events:none}
.hero-grid a,.hero-grid button{pointer-events:auto}
.hero-mid{display:flex;flex-direction:column;justify-content:center}
.masthead{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d1);line-height:var(--lh-display);font-size:var(--fs-d1)}
.masthead .ml{display:block}
.masthead .ml.l2{padding-left:.06em}
.masthead .l2 .mtx{color:var(--lime)}
.mark{position:relative;display:inline-block;width:.36em;height:.38em;vertical-align:.55em;margin-left:.06em;overflow:visible;pointer-events:auto;cursor:none}
.masthead .mark{opacity:0;transition:opacity .6s .5s}
.masthead.in .mark{opacity:1}
.mark svg{position:absolute;inset:0;width:100%;height:100%;color:var(--lime);overflow:visible}
.mark svg path,.mark svg circle{fill:currentColor;stroke:none}
.mark .eye{fill:currentColor;stroke:none}
.mark .mouth{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.mark .m-bny{z-index:2;transform-box:fill-box;transform-origin:50% 92%}
.mark .m-tri,.mark .m-hrt{z-index:1;opacity:0;transform:scale(.2);transition:transform .55s var(--spring),opacity .4s}
.mark:hover .m-bny{animation:bunHop .85s var(--ease) infinite}
.mark:hover .m-tri{opacity:1;transform:translate(-118%,-72%) scale(.82) rotate(-12deg)}
.mark:hover .m-hrt{opacity:1;transform:translate(118%,-72%) scale(.82);transition-delay:.07s}
@keyframes bunHop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(0) scale(1.14,.84)}45%{transform:translateY(-36%) scale(.88,1.16)}68%{transform:translateY(0) scale(1.12,.9)}100%{transform:translateY(0) scale(1,1)}}
.hero-tag{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,2.2vw,29px);max-width:32ch;margin-top:var(--sp-5);line-height:var(--lh-snug);overflow:hidden}
.hero-tag .htx{display:inline-block;transform:translateY(110%);transition:transform 700ms var(--ease) 240ms}
.hero-tag.in .htx{transform:none}
.hero-tag b{font-style:normal;font-weight:400;color:var(--lime)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.playhint{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt);cursor:none;transform-origin:left center;transition:transform var(--d-micro-out) var(--ease)}
.playhint:hover{transform:translateX(3px);transition-duration:var(--d-micro)}
.playhint .ic{width:44px;height:44px;border-radius:50%;border:var(--hair) solid var(--lime);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--d-micro-out) var(--ease)}
.playhint:hover .ic{background:var(--lime)}
.playhint .ic svg{margin-left:3px}
.scrollcue{display:flex;align-items:center;gap:12px;color:var(--txt-dim)}
.scrollcue .bar{width:46px;height:1px;background:var(--txt-faint);position:relative;overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;left:-40%;top:0;width:40%;height:100%;background:var(--txt-mid);opacity:.7;animation:slide 3.2s var(--ease) infinite}
@keyframes slide{to{left:100%}}

/* Unterseiten-Hero: gleiche Bühne wie die Startseite, nur kürzer + Display-Überschrift statt Namens-Masthead */
.hero.sub{height:auto;min-height:min(88svh,860px)}
.hero.sub .hero-grid{height:auto;min-height:inherit;padding-top:150px;padding-bottom:40px}
.hero.sub .hero-mid{justify-content:flex-end;padding-bottom:var(--sp-6)}
.hero-mid .crumbs{margin-bottom:var(--sp-4)}
.hero-mid .lbl-box{align-self:flex-start;margin-bottom:var(--sp-4)}
.hero-h1{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d3);line-height:var(--lh-tight);font-size:clamp(34px,6.6vw,108px);max-width:19ch}
.hero-lead{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.1vw,28px);max-width:44ch;margin-top:var(--sp-5);line-height:var(--lh-snug);color:var(--txt)}
.hero-lead b{font-style:normal;font-weight:400;color:var(--lime)}

/* KINETIC */
.kinetic{position:relative;overflow:hidden;border-top:var(--hair) solid var(--line-strong);border-bottom:var(--hair) solid var(--line-strong);background:#080808;padding:clamp(var(--sp-6),6vw,var(--sp-7)) 0;text-align:center;cursor:none}
.kinetic .spotlight{position:absolute;width:380px;height:380px;border-radius:50%;left:0;top:0;margin:-190px 0 0 -190px;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(205,255,0,.22),transparent 65%);opacity:0;transition:opacity .4s}
.kinetic:hover .spotlight{opacity:1}
.ktrack{position:relative;z-index:1;font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d3);line-height:var(--lh-display);font-size:clamp(34px,8vw,116px);display:flex;flex-wrap:wrap;justify-content:center;gap:0 .25em;padding:0 var(--sp-4)}
.kinetic .ch{color:#5f5f58}
.kw{display:inline-flex;white-space:nowrap}
.ksep{display:inline-flex;color:var(--lime);margin:0 .1em}

/* STATEMENT / KI-Feld */
.statement{position:relative;padding:clamp(var(--sp-8),16vh,var(--sp-9)) 0;overflow:hidden;border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line)}
.ghost{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);z-index:0;pointer-events:auto;user-select:none;width:min(62vw,820px);height:auto;overflow:visible}
.ghost .gout path{fill:none;stroke:rgba(205,255,0,.5);stroke-width:2.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kis path{fill:var(--lime);stroke:none}
.kis .keye{fill:var(--lime);stroke:none}
.statement .lines{position:relative;z-index:1;pointer-events:none}
.statement .lines h2,.statement .lines h3,.statement .lines p,.statement .lines .sub{pointer-events:auto}
.statement h2,.statement h3{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d3);line-height:var(--lh-display);font-size:var(--fs-d3)}
.statement h2.md{font-size:var(--fs-d4);line-height:var(--lh-tight);letter-spacing:var(--tr-d4);max-width:14ch}
.statement .sub{font-family:var(--serif);font-style:italic;color:var(--txt-dim);font-size:var(--fs-xl);line-height:var(--lh-snug);margin-top:var(--sp-6);max-width:46ch}
.gravctl{position:absolute;z-index:2;right:calc(min(62vw,820px)/2 - 2vw);top:50%;transform:translate(50%,calc(min(62vw,820px)*.197 + 58px));display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(10,10,10,.6);border:var(--hair) solid var(--line);border-radius:40px;color:var(--txt-dim);padding:10px 18px;transition:border-color .25s}
.gravctl:hover{border-color:var(--lime)}
.gravctl .glab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.gravctl .glab svg{width:13px;height:13px}
.gravctl .gval{color:var(--lime);min-width:4ch;text-align:right}
.gravctl input{-webkit-appearance:none;appearance:none;width:clamp(110px,14vw,170px);height:2px;background:var(--line);border-radius:2px;outline:none;cursor:none}
.gravctl input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--lime);border:none;box-shadow:0 0 8px rgba(205,255,0,.45);cursor:none;transition:transform .2s var(--spring)}
.gravctl input:active::-webkit-slider-thumb{transform:scale(1.35)}
.gravctl input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--lime);border:none}
.gravctl input::-moz-range-track{height:2px;background:var(--line)}
@media(max-width:820px){
  .statement{display:flex;flex-direction:column;padding:clamp(70px,11vh,120px) 0}
  .statement .lines{order:1}
  .ghost{order:2;position:static;transform:none;right:auto;top:auto;width:min(90vw,520px);margin:38px auto 0;display:block}
  .gravctl{order:3;position:static;transform:none;margin:26px auto 0}
}
@media(pointer:coarse){.gravctl{display:none}}

/* untere Sections erst rendern, wenn sie gebraucht werden */
.defer{content-visibility:auto;contain-intrinsic-size:auto 700px}

/* ===================================================================
   BAUSTEINE FÜR TEXTSEITEN
=================================================================== */
/* Platzhalter-Marker (offene Angaben von Matthias) — bewusst sichtbar, damit nichts Erfundenes live geht */
.ph{font-family:var(--mono);font-style:normal;font-weight:400;font-size:.74em;letter-spacing:.04em;text-transform:none;color:var(--lime);border:1px dashed rgba(205,255,0,.55);background:rgba(205,255,0,.06);padding:2px 8px;border-radius:4px;display:inline;line-height:1.9;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.intro{grid-template-columns:1fr}}
.lead-serif{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.8vw,40px);line-height:var(--lh-snug);color:var(--txt)}
.lead-serif b{font-style:normal;font-weight:400;color:var(--lime)}
.big-p{color:var(--txt-dim);font-size:var(--fs-lg);line-height:var(--lh-body);max-width:60ch}
.big-p+.big-p{margin-top:var(--sp-4)}

/* Vorteile als große Kennzahl-Zellen */
.adv{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--hair) solid var(--line);border-left:var(--hair) solid var(--line)}
.adv.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.adv,.adv.three{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.adv,.adv.three{grid-template-columns:1fr}}
.adv>div{padding:var(--sp-5) var(--sp-5) var(--sp-6);border-right:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line);min-height:170px}
.adv .k{display:block;font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(22px,2.4vw,34px);line-height:1.05;color:var(--lime);margin-bottom:var(--sp-3)}
.adv p{color:var(--txt-dim);font-size:var(--fs-base);line-height:var(--lh-body)}

/* "Kurz gesagt"-Block (Ratgeber) */
.kurz{border-left:3px solid var(--lime);background:#0f0f0e;padding:var(--sp-5) var(--sp-6);margin:var(--sp-6) 0 var(--sp-7);max-width:var(--maxw-prose)}
.kurz .lbl{display:block;margin-bottom:10px;color:var(--lime)}
.kurz p{color:var(--txt);font-size:var(--fs-lg);line-height:var(--lh-body);margin:0}

/* Fakten-Block (GEO-Anker auf "Über mich") */
.facts{display:grid;grid-template-columns:minmax(120px,210px) 1fr;border-top:var(--hair) solid var(--line);max-width:var(--maxw-prose)}
.facts dt,.facts dd{padding:14px 0;border-bottom:var(--hair) solid var(--line)}
.facts dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim);padding-right:var(--sp-4)}
.facts dd{color:var(--txt)}

/* Spezialgebiete: große Zeilen */
.spec{list-style:none;max-width:var(--maxw)}
.spec li{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(24px,4.2vw,62px);line-height:1.08;border-top:var(--hair) solid var(--line);padding:var(--sp-4) 0;color:var(--txt-mid)}
.spec li:last-child{border-bottom:var(--hair) solid var(--line)}

/* Ratgeber-Kacheln */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media(max-width:900px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-6);min-height:360px;border:var(--hair) solid var(--line);background:#0f0f0e;cursor:none;transition:border-color var(--d-micro-out) var(--ease),background var(--d-micro-out) var(--ease)}
.post-card:hover,.post-card:focus-visible{border-color:var(--lime);background:#141410}
.post-card .sn{font-family:var(--mono);font-size:12px;color:var(--txt-faint)}
.post-card h3{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(22px,2.2vw,32px);line-height:var(--lh-tight);margin:var(--sp-3) 0 var(--sp-4)}
.post-card p{color:var(--txt-dim);font-size:var(--fs-base);line-height:var(--lh-body)}
.post-card .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}

/* Artikel */
.art{max-width:var(--maxw-prose)}
.art h2{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(26px,3.4vw,46px);line-height:var(--lh-tight);margin:var(--sp-7) 0 var(--sp-4)}
.art .prose li::marker,.prose li::marker{color:var(--lime)}
.related{border-top:var(--hair) solid var(--line);margin-top:var(--sp-8);padding-top:var(--sp-6)}
.related .lbl{display:block;margin-bottom:var(--sp-4)}
.related a{display:block;padding:var(--sp-3) 0;border-bottom:var(--hair) solid var(--line);color:var(--txt);font-weight:700;font-size:var(--fs-lg);transition:color var(--d-micro) var(--ease)}
.related a:hover{color:var(--lime)}

.post-grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.post-grid.two{grid-template-columns:1fr}}

/* Credits-Tabelle (Work) */
.credits{border-top:var(--hair) solid var(--line);max-width:var(--maxw)}
.credits-h,.credits-r{display:grid;grid-template-columns:1fr 1.5fr 1.2fr;gap:var(--sp-5);padding:var(--sp-4) 0;border-bottom:var(--hair) solid var(--line);align-items:baseline}
.credits-h{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.credits-r span:first-child{font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-d4);font-size:clamp(18px,1.8vw,26px);line-height:1.1;color:var(--txt)}
.credits-r span:nth-child(2){color:var(--txt-mid)}
.credits-r span:nth-child(3){font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.04em;color:var(--lime)}
@media(max-width:820px){.credits-h{display:none}.credits-h,.credits-r{grid-template-columns:1fr;gap:6px}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal,.ch,.ch.rv,.hero-tag .htx,.masthead .mark{opacity:1!important;transform:none!important}
  .cursor,.trail{display:none!important}
  html{scroll-behavior:auto}
}