/* ==========================================================================
   fr0nt Website v2, Merge Alina-v3 (Chassis) + fr0nt-Build-Spec (Bogen)
   Richtung: hell, minimalistisch, technisch, teils brutalistisch.
   Erzähllinie: erst Vordenker (KI-nativ + AEO/GEO), dann Versteher, positiv.
   Tokens vorerst Alina-v3; design.md-Kanon nach Live-Sicht entscheiden.
   Sanktionierte Ausnahme: WebGL-Glas-Null im Hero (vorn), Pixel-Welle bleibt Grund.
   ========================================================================== */

:root{
  --bg:#F5F4EE;         /* off-white, warmes Paper statt reinem Weiss */
  --bg-2:#FBFAF6;       /* leicht angehobene Zellen/Panels */
  --surface:#EDECE5;
  --line:#DEDCD3;
  --ink:#0A0A0A;
  --muted:#6B6B72;

  --deep:#14121A;       /* off-black, nicht 100% schwarz, Hauch Marken-Lila */
  --panel:#221C33;
  --panel-line:rgb(255 255 255 / .16);

  --green:#C6FF3A;
  --green-deep:#B0E82A;
  --purple:#8B3DFF;

  --display:"Mona Sans",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;

  --r-img:16px;
  --r-btn:0;
  --maxw:1600px;
  --gut:clamp(22px,4vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.2,.9,.25,1.15);

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --z-grain:80; --z-nav:60; --z-progress:70; --z-skip:90;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--display);font-weight:300;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--green);color:#000}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.deep :focus-visible,.band :focus-visible{outline-color:currentColor}

.skip{
  position:fixed;left:12px;top:-100px;z-index:var(--z-skip);
  background:var(--green);color:#000;border:1px solid var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 18px;text-decoration:none;transition:top .25s var(--ease);
}
.skip:focus{top:12px}

/* ---------------- Typografie ---------------- */
h1,h2,h3{font-weight:500;line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(46px,8.2vw,116px)}
h2{font-size:clamp(34px,5.2vw,72px)}
h3{font-size:clamp(19px,2vw,26px);letter-spacing:-.02em}
p{max-width:62ch;text-wrap:pretty}
.lead{font-size:clamp(16px,1.35vw,18px);max-width:46ch;line-height:1.6}
.tnum{font-variant-numeric:tabular-nums}

.mark{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  border-top:1px solid var(--ink);padding-top:16px;margin-bottom:clamp(28px,4vw,48px);
}
.mark .no{color:var(--ink)}
.mark .dot{
  width:7px;height:7px;background:var(--green);flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.deep .mark{border-color:var(--panel-line);color:rgb(255 255 255 / .62)}
.deep .mark .no{color:var(--green)}

/* Durchgestrichene Null (Markenzeichen).
   Geist Mono liefert die Schraegnull als Standardglyphe, ein zusaetzlicher CSS-Balken
   legt einen zweiten Strich quer darueber und macht daraus ein X. Deshalb kein ::after.
   Die Klasse bleibt als Haken fuer Einfaerbung und Sondergroessen bestehen. */
.z{position:relative;display:inline-block}
/* Der verlaengerte Gegenstrich IST die Marke, kein Duplikat.
   Geist Mono bringt eine eigene Schraegnull mit, die von links unten nach rechts
   oben laeuft. Der Balken hier laeuft bei -24 Grad dagegen und ragt oben und unten
   aus der Ziffer heraus. Erst beide zusammen ergeben das Zeichen.
   Am 20.08.2026 frueh wurde der Balken als doppelte Schraegnull entfernt, das war
   eine Fehldeutung (Tim-Korrektur 20.08. mittags, Belegbild Bildschirmfoto
   2026-08-04 um 19.21.12). Nicht wieder wegoptimieren. */
.z::after{
  content:"";position:absolute;left:50%;top:50%;
  width:.08em;height:.98em;background:currentColor;
  transform:translate(-50%,-50%) rotate(-24deg);
}

/* ---------------- Layout ---------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
section{padding:clamp(88px,11vw,150px) 0;position:relative}
.rule-top{border-top:1px solid var(--ink)}
/* Sektions-Pixel-Icons: groß, oben rechts, hinter dem Text */
.has-icon{overflow:hidden}
.sec-icon{position:absolute;top:-6%;right:6%;width:min(52vw,620px);height:min(52vw,620px);z-index:0;pointer-events:none}
.sec-icon[data-icon="laptop-heart"]{width:min(26vw,300px);height:min(26vw,300px);top:13%;right:32%}
.sec-icon[data-icon="eye-blink"]{width:min(74vw,920px);height:min(74vw,920px);top:-6%;right:16%}
/* Ergebnis-Grid deckt den Hintergrund -> großes Auge verschwindet dahinter */
#belege .facts{position:relative;z-index:1;background:var(--bg)}
@media(max-width:900px){
  .sec-icon[data-icon="laptop-heart"]{width:52vw;height:52vw;top:4%;right:2%;opacity:.7}
  .sec-icon[data-icon="eye-blink"]{width:82vw;height:82vw;top:0;right:-6%;opacity:.6}
}
/* Hero mobil höher: Platz oben, damit die Null ganz ins Bild passt.
   Bis 900px (deckt iPad Mini 768 Portrait) — sonst Breakpoint-Lücke 761-900. */
@media (max-width:900px){.hero{min-height:120dvh}}
.tight-top{padding-top:clamp(40px,5vw,70px)}
.compact{padding:clamp(64px,7vw,96px) 0}
.mt{margin-top:18px}
.logo.small{font-size:17px}

.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.05;background-image:var(--noise)}
.grainy{position:relative;isolation:isolate}
.grainy::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.3;mix-blend-mode:overlay;background-image:var(--noise);
}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--green);
  transform-origin:0 50%;transform:scaleX(0);z-index:var(--z-progress)}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root block)}
}
@keyframes grow{to{transform:scaleX(1)}}

/* ---------------- Navigation ---------------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  height:58px;display:flex;align-items:stretch;
  background:rgb(245 244 238 / .82);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--ink);
}
@supports not (backdrop-filter:blur(1px)){nav{background:var(--bg)}}
@media (prefers-reduced-transparency:reduce){nav{background:var(--bg);backdrop-filter:none}}
.navin{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.status{
  display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  border-left:1px solid var(--line);padding-left:14px;white-space:nowrap;
}
.status .led{width:6px;height:6px;background:var(--green);animation:blink 1.6s steps(1,end) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.25}}
@media (max-width:820px){.status{display:none}}
.navlinks{display:flex;gap:2px;font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em}
.navlinks a{
  text-decoration:none;padding:9px 13px;border:1px solid transparent;
  position:relative;transition:color .2s var(--ease),border-color .2s var(--ease);
  isolation:isolate;
}
.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--green);
  z-index:-1;transition:height .25s var(--spring);
}
.navlinks a:hover::after,.navlinks a[aria-current="true"]::after{height:100%}
.navlinks a[aria-current="true"]{border-color:var(--ink)}
@media (max-width:980px){.navlinks{display:none}}
/* Burger + Mobile-Menü */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;border:1px solid var(--ink);background:transparent;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobmenu{position:absolute;top:58px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;padding:8px var(--gut) 18px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.mobmenu[hidden]{display:none}
.mobmenu a{text-decoration:none;color:var(--ink);padding:14px 4px;border-bottom:1px solid var(--line)}
.mobmenu a.btn{margin-top:14px;justify-content:center;border-bottom:none}
@media (max-width:980px){.burger{display:flex}.navin > .btn{display:none}}
@media (min-width:981px){.mobmenu{display:none}}
/* Zeiger-Pixel-Spur auf Touch/Mobile aus */
@media (hover:none),(pointer:coarse),(max-width:900px){.fx-cursor{display:none!important}}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  font-family:var(--mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  padding:15px 22px;border-radius:var(--r-btn);border:1px solid var(--ink);
  background:var(--green);color:#000;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .22s var(--spring),box-shadow .22s var(--ease),color .22s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .34s var(--spring);
}
.btn:hover{color:#FFF;box-shadow:5px 5px 0 var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn .arw{transition:transform .3s var(--spring)}
.btn:hover .arw{transform:translateX(5px)}
.btn.ghost{background:transparent}
.btn.ghost:hover{color:#000}
.btn.ghost::before{background:var(--green)}
.btn.on-deep{border-color:var(--green)}
.btn.on-deep::before{background:#FFF}
.btn.on-deep:hover{color:#000;box-shadow:5px 5px 0 var(--green)}
nav .btn{padding:11px 16px;font-size:11px}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  min-height:min(100dvh,1040px);display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:clamp(120px,10vw,168px);padding-bottom:0;overflow:hidden;
  border-bottom:1px solid var(--ink);
}
.pxfield{position:absolute;inset:0;z-index:0;overflow:hidden}
.pxfield canvas{
  width:100%;height:100%;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
}
.pxfield::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgb(245 244 238 / .5) 0%,rgb(245 244 238 / .24) 44%,rgb(245 244 238 / .62) 100%);
}
/* Glas-Null: liegt VOR der Pixelwelle (z1), aber hinter dem Text (Wrap z2).
   Rechte Bildhälfte, damit die linksbündige H1 frei bleibt. reduced-motion: statisch. */
#hero-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
/* Hero-Inhalt im 1320er-Container (wie Nav + Sektionen), damit auf breiten
   Monitoren/Ultrawide nicht bis zum Rand gezogen. H1 fluchtet mit Nav-Logo. */
.hero .wrap{z-index:2;width:100%;margin-bottom:clamp(36px,5vw,88px)}
.hero h1{max-width:13ch;margin-bottom:clamp(32px,5vw,56px)}
.hero h1 .ln{display:block;overflow:hidden;padding:.06em .14em .12em;margin:0 -.14em -.12em}
.hero h1 .ln > span{display:block;transform:translateY(105%);animation:riseIn .95s var(--ease) forwards}
.hero h1 .ln:nth-child(2) > span{animation-delay:.12s}
@keyframes riseIn{to{transform:translateY(0)}}
.hero .accent-block{
  background:var(--green);color:#000;padding:0 .12em;
  box-shadow:0 0 0 1px var(--ink);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero-foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:26px;
  max-width:600px;padding-bottom:clamp(36px,5vw,56px);
}
.hero-foot .cta-row{display:flex;gap:12px;flex-wrap:wrap}

.herobar{
  position:relative;z-index:2;border-top:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(4,1fr);
  width:100%;max-width:var(--maxw);margin-inline:auto;
}
/* durchgehender Balken-Hintergrund + Oberkante ueber die volle Breite,
   waehrend die Kennzahlen im 1320er-Raster zentriert bleiben (Ultrawide) */
.herobar::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:100vw;height:calc(100% + 1px);z-index:-1;
  background:var(--bg-2);border-top:1px solid var(--ink);
}
.herobar div{
  padding:20px var(--gut);border-right:1px solid var(--ink);
  display:flex;flex-direction:column;gap:5px;background:var(--bg-2);
  transition:background .3s var(--ease);
}
.herobar div:last-child{border-right:0}
.herobar div:hover{background:var(--green)}
.herobar b{font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.03em;line-height:1}
.herobar span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.herobar div:hover span{color:#000}
@media (max-width:860px){
  .herobar{grid-template-columns:repeat(2,1fr)}
  .herobar div:nth-child(2){border-right:0}
  .herobar div:nth-child(1),.herobar div:nth-child(2){border-bottom:1px solid var(--ink)}
}

/* ---------------- Grünes Laufband ---------------- */
.band{background:var(--green);color:#000;overflow:hidden;padding:16px 0;
  border-bottom:1px solid var(--ink);position:relative}
.band .track{display:flex;gap:56px;width:max-content;animation:run 42s linear infinite}
.band em{font-family:var(--mono);font-weight:500;font-size:12px;font-style:normal;
  text-transform:uppercase;letter-spacing:.2em;white-space:nowrap;
  display:flex;align-items:center;gap:56px}
.band em::after{content:"";width:7px;height:7px;background:#000;flex:none}
@keyframes run{to{transform:translateX(-50%)}}
.band:hover .track{animation-play-state:paused}

/* ---------------- Intro / Vordenker ---------------- */
.svc-intro{
  font-size:clamp(26px,3.6vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.1;
  max-width:20ch;margin-bottom:clamp(48px,6vw,84px);
}
.head-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);
  align-items:start;margin-bottom:clamp(48px,6vw,80px)}
.head-split h2{max-width:14ch}
.head-split .lead{color:var(--muted);border-top:1px solid var(--ink);padding-top:16px}
@media (max-width:820px){.head-split{grid-template-columns:1fr;align-items:start}}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.svc-grid.cols3{grid-template-columns:repeat(3,1fr)}
.svc-cell{
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:clamp(26px,3vw,40px);position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;min-height:260px;
}
.svc-cell::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
  transform:translateY(100%);transition:transform .45s var(--spring);
}
.svc-cell:hover::before,.svc-cell:focus-within::before{transform:translateY(0)}
.svc-cell .idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.svc-cell:hover .idx,.svc-cell:hover p{color:#000}
.svc-cell p{color:var(--muted);font-size:15px;transition:color .3s var(--ease)}
.svc-cell .go{
  margin-top:auto;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;
  display:flex;align-items:center;gap:8px;opacity:0;transform:translateX(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--spring);
}
.svc-cell:hover .go{opacity:1;transform:none}
@media (max-width:820px){.svc-grid,.svc-grid.cols3{grid-template-columns:1fr}}

.svc-media{margin-top:clamp(32px,4vw,56px);border-radius:var(--r-img);overflow:hidden;
  border:1px solid var(--ink);position:relative}
.svc-media img{width:100%;height:clamp(240px,38vw,460px);object-fit:cover;
  transform:scale(1.04);transition:transform 1.2s var(--ease)}
.svc-media:hover img{transform:scale(1)}
.cap{margin-top:12px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted)}

/* Fotos mit Pixel-Durchbruch */
.pxphoto{position:relative;margin:0}
.pxphoto .box{position:relative;width:100%}
.pxphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.pxphoto canvas{position:relative;display:block;width:100%;height:auto}
.pxphoto .cap{margin-top:14px}
/* im Verständnis-Kasten: kleiner, über dem Text */
.svc-cell .pxphoto{max-width:250px;margin-bottom:4px}

/* ---------------- Belege ---------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.fact{
  border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:16px;min-height:230px;
  position:relative;isolation:isolate;overflow:hidden;
}
.fact::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
  transform:scaleY(0);transform-origin:100% 100%;transition:transform .5s var(--spring);
}
.fact:hover::before{transform:scaleY(1)}
.fact .big{font-size:clamp(40px,5vw,68px);font-weight:500;letter-spacing:-.05em;line-height:.95;
  font-variant-numeric:tabular-nums}
.fact .cap2{margin-top:auto;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);transition:color .3s var(--ease)}
.fact:hover .cap2{color:#000}
.source{margin-top:22px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.source a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.source a:hover{color:var(--ink)}
@media (max-width:960px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}

/* ---------------- Haltung (dunkler Block) ---------------- */
.deep{position:relative;isolation:isolate;background:var(--deep);color:#FFF;overflow:hidden}
.deep p{color:rgb(255 255 255 / .74)}
.glowfield{position:absolute;inset:0;z-index:-1;overflow:hidden}
.glowfield i{position:absolute;display:block;border-radius:50%;
  mix-blend-mode:screen;filter:blur(90px);will-change:transform}
.glowfield .gp{width:48%;aspect-ratio:1;right:-16%;top:-30%;
  background:radial-gradient(circle,rgb(139 61 255 / .34),rgb(139 61 255 / 0) 64%);
  animation:gp 30s ease-in-out infinite alternate}
.glowfield .gg{width:40%;aspect-ratio:1;left:-12%;bottom:-24%;
  background:radial-gradient(circle,rgb(198 255 58 / .3),rgb(198 255 58 / 0) 66%);
  animation:gg 38s ease-in-out infinite alternate}
@keyframes gp{to{transform:translate3d(-14%,18%,0) scale(1.2)}}
@keyframes gg{to{transform:translate3d(18%,-16%,0) scale(1.24)}}
.philo .lines{font-size:clamp(34px,6vw,86px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.philo .lines span{display:block;overflow:hidden}
.philo .foot{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;
  margin-top:clamp(56px,8vw,120px);padding-top:28px;border-top:1px solid var(--panel-line)}
.philo .foot p{max-width:44ch}
@media (max-width:820px){.philo .foot{grid-template-columns:1fr;align-items:start}}
.on-green{background:var(--green);color:#000;padding:0 .1em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------------- Prozess ---------------- */
.stack{margin-top:clamp(40px,5vw,64px)}
.step{
  position:sticky;background:var(--bg);border:1px solid var(--ink);
  padding:clamp(26px,3vw,40px);display:grid;grid-template-columns:130px 1fr;gap:clamp(20px,3vw,40px);
  align-items:start;margin-bottom:14px;
}
.step:nth-child(1){top:92px}
.step:nth-child(2){top:106px}
.step:nth-child(3){top:120px}
.step .num{
  background:var(--green);color:#000;width:100%;aspect-ratio:1;max-width:110px;
  display:grid;place-items:center;font-size:clamp(34px,4vw,52px);font-weight:500;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;border:1px solid var(--ink);
  transition:transform .4s var(--spring);
}
.step:hover .num{transform:rotate(-4deg) scale(1.03)}
.step p{color:var(--muted);font-size:15px;margin-top:10px}
.step .meta{margin-top:16px;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink);border-top:1px solid var(--line);padding-top:12px}
@media (max-width:760px){
  .step{grid-template-columns:1fr;position:static}
  .step .num{max-width:74px;aspect-ratio:1}
}
@media (prefers-reduced-motion:reduce){.step{position:static}}

/* ---------------- FAQ ---------------- */
.faq{border-top:1px solid var(--ink);margin-top:clamp(36px,4vw,56px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:26px 0;display:flex;
  justify-content:space-between;align-items:center;gap:24px;
  font-size:clamp(17px,1.7vw,22px);font-weight:500;letter-spacing:-.018em;
  transition:padding-left .3s var(--spring),color .2s var(--ease);
}
.faq summary:hover{padding-left:10px}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{flex:none;width:20px;height:20px;position:relative}
.faq .plus::before,.faq .plus::after{content:"";position:absolute;background:currentColor;
  left:50%;top:50%;transition:transform .35s var(--spring)}
.faq .plus::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.faq .plus::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.faq details[open] .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary{background:var(--green);padding-left:14px;padding-right:14px}
.faq p{padding:0 0 28px;color:var(--muted);font-size:15px;max-width:70ch}

/* ---------------- Kontakt ---------------- */
.contact{border:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
.contact > div{padding:clamp(28px,4vw,56px)}
.contact .left{background:var(--green);color:#000;border-right:1px solid var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.contact .left .mark{border-color:#000;color:rgb(0 0 0 / .62)}
.contact .left .mark .no{color:#000}
.contact .left .mark .dot{background:#000}
.contact .left p{color:rgb(0 0 0 / .78)}
.contact .left .direct{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.contact .left .direct a{text-decoration:none;border-bottom:1px solid rgb(0 0 0 / .35)}
.contact .left .direct a:hover{border-bottom-color:#000}
@media (max-width:860px){
  .contact{grid-template-columns:1fr}
  .contact .left{border-right:0;border-bottom:1px solid var(--ink)}
}
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.field input{
  font-family:var(--display);font-weight:300;font-size:15px;color:var(--ink);
  padding:14px 15px;border:1px solid var(--ink);border-radius:var(--r-btn);background:var(--bg);
  transition:box-shadow .2s var(--ease),background .2s var(--ease);
}
.field input::placeholder{color:#9A9AA0}
.field input:focus{outline:none;background:var(--bg-2);box-shadow:4px 4px 0 var(--green)}
.field input[aria-invalid="true"]{background:#FFF3F3;border-color:#B3261E}
.err{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#B3261E;min-height:0}
.note{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sent{border:1px solid var(--ink);background:var(--green);padding:20px;font-size:15px}

/* ---------------- Footer ---------------- */
footer{border-top:1px solid var(--ink);background:var(--bg)}
.footband{overflow:hidden;border-bottom:1px solid var(--ink);padding:14px 0}
.footband .track{display:flex;gap:48px;width:max-content;animation:runback 38s linear infinite}
.footband em{font-family:var(--mono);font-weight:500;font-size:11px;font-style:normal;
  text-transform:uppercase;letter-spacing:.2em;white-space:nowrap;color:var(--muted)}
@keyframes runback{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.footgrid{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  /* var(--gut) statt 0: .footgrid liegt in einem .wrap, und ein kurzes
     padding:26px 0 loescht dessen seitliche Polsterung. Die Fusszeile stand
     dadurch beidseitig 40 px weiter aussen als jede Inhaltsbox darueber
     (gemessen bei 1920 px: Fusszeile 160/1760, Inhalt 200/1720). */
  padding:26px var(--gut);font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.footgrid nav{position:static;height:auto;background:none;border:0;backdrop-filter:none;display:flex;gap:18px}
.footgrid a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.footgrid a:hover{color:var(--ink);border-bottom-color:var(--green)}
/* Kollaborations-Hinweis auf jeder Seite (Tim-Entscheid 20.08.2026).
   fr0nt soll nirgends wie ein eigenstaendiges Unternehmen wirken. Die Zeile
   steht deshalb in jeder Fusszeile, nicht nur im Impressum. */
.fusskollab{border-top:1px solid var(--line);padding-top:16px;padding-bottom:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.fusskollab p{margin:0;max-width:104ch;line-height:1.6;text-wrap:pretty}
.fusskollab a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color .2s var(--ease)}
.fusskollab a:hover{border-bottom-color:var(--green)}

/* Wortmarke in der Fusszeile = Wortmarke im Menue.
   .footgrid setzt uppercase, weite Laufweite und --muted fuer die Linkliste.
   Die Wortmarke erbte das mit und stand deshalb als graues "FR0NT" da,
   waehrend das Menue "fr0nt" in Ink zeigt. (Tim-Ansage 20.08.) */
.footgrid .logo{text-transform:none;letter-spacing:-.02em;color:var(--ink);font-size:19px}
.footgrid .logo:hover{border-bottom-color:transparent;color:var(--ink)}
.footgrid .logo .z{color:inherit}

/* ---------------- Scroll-Reveal ---------------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .hero h1 .ln > span{transform:none}
  html{scroll-behavior:auto}
}

/* ---- Mehrseiten-Chrome (Footer-Links, aktive Nav, Unterseiten-Hero) ---- */
.footlinks{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.1em}
.footlinks a{text-decoration:none;color:var(--muted);padding:4px 0;transition:color .2s var(--ease)}
.footlinks a:hover{color:var(--ink)}
.footgrid{display:grid;grid-template-columns:auto 1fr auto;gap:22px 40px;align-items:center;
  padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px)}
@media(max-width:820px){.footgrid{grid-template-columns:1fr;align-items:start}}
.navlinks a.current{border-color:var(--ink)}
.navlinks a.current::after{height:100%}
/* Unterseiten-Kopf (schlanker Hero ohne WebGL) */
.subhero{position:relative;padding-top:clamp(150px,17vw,220px);padding-bottom:clamp(72px,9vw,120px);
  border-bottom:1px solid var(--ink);overflow:hidden}
.subhero .eyebrow{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin:0 0 18px}
.subhero h1{font-size:clamp(38px,6vw,74px);letter-spacing:-.03em;line-height:1.02;margin:0;max-width:15ch}
.subhero .sublead{max-width:60ch;color:#333;line-height:1.55;margin:22px 0 0;font-size:clamp(16px,1.5vw,19px)}
.subhero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4vw,40px)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{color:var(--ink)}

a.svc-cell{text-decoration:none;color:inherit}

/* ---- ASCII-Grafik im Unterseiten-Hero (dev-native Deko) ---- */
.subhero .wrap.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center}
@media(max-width:900px){.subhero .wrap.split{grid-template-columns:1fr}.subhero .wrap.split .wow-stage{order:-1;min-height:clamp(200px,52vw,300px)}}
.ascii{font-family:var(--mono);white-space:pre;line-height:1.04;letter-spacing:0;margin:0;
  font-size:clamp(6px,1.18vw,14px);color:var(--ink);justify-self:end;overflow:hidden;
  user-select:none;-webkit-user-select:none;pointer-events:none}
.ascii .scr{color:var(--green)}
@media(prefers-reduced-motion:no-preference){.ascii .scr{animation:asciiglow 2.4s steps(2,end) infinite}}
@keyframes asciiglow{0%,70%{opacity:1}71%,100%{opacity:.35}}
/* mobil: über die Überschrift, zentriert, kleiner skalieren */
@media(max-width:900px){.ascii{order:-1;justify-self:center;margin:0 0 clamp(22px,6vw,40px);font-size:clamp(6px,2vw,13px)}}

/* ---- Über uns: freigestellte Figuren auf dunklem Sockel (Overlap) ---- */
.team-stage{padding-top:clamp(20px,4vw,44px)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);align-items:end}
@media(max-width:680px){.team-grid{grid-template-columns:1fr;gap:52px}}
.person{display:flex;flex-direction:column;align-items:center;min-width:0}
.person .fig{position:relative;z-index:1;display:block;width:auto;height:auto;
  max-height:clamp(300px,38vw,480px);margin-bottom:clamp(-84px,-6vw,-56px);
  filter:grayscale(1) contrast(1.03)}
.person .plinth{position:relative;z-index:2;width:100%;background:var(--deep);color:#fff;
  border:1px solid var(--ink);isolation:isolate;
  padding:clamp(96px,10vw,120px) clamp(22px,2.6vw,34px) clamp(26px,3vw,36px)}
.person .plinth .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green)}
.person .plinth h3{margin:.45em 0 .5em;color:#fff;font-size:clamp(20px,2.2vw,27px)}
.person .plinth p{color:rgb(255 255 255 / .74);font-size:14.5px;line-height:1.58;margin:0 0 14px}
.person .plinth a.brand-link{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--green);text-decoration:none;border-bottom:1px solid transparent}
.person .plinth a.brand-link:hover{border-color:var(--green)}
/* dezentes Raster im Sockel (Marken-Textur) */
.person .plinth::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:linear-gradient(var(--panel-line) 1px,transparent 1px),linear-gradient(90deg,var(--panel-line) 1px,transparent 1px);
  background-size:22px 22px}

/* FAQ (native, ohne JS) */
.qa{border-top:1px solid var(--line);padding:0}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;display:flex;justify-content:space-between;gap:20px;
  font-weight:500;font-size:clamp(16px,1.6vw,19px)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
.qa[open] summary::after{content:"–"}
.qa p{color:var(--muted);max-width:70ch;margin:0 0 20px;line-height:1.6}

/* Grün-Marker auch außerhalb des Hero nutzbar */
.accent-block{background:var(--green);color:#000;padding:0 .12em;box-shadow:0 0 0 1px var(--ink);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Supernova aus grünen Pixeln hinter den freigestellten Figuren */
.person{position:relative}
.nova{position:absolute;left:50%;top:-2%;transform:translateX(-50%);
  width:clamp(260px,120%,460px);height:clamp(320px,44vw,520px);
  z-index:0;pointer-events:none}

/* Überschriften mit grüner Box brauchen mehr Zeilenluft, sonst überlappt die
   Box die Zeile darüber */
h2:has(.accent-block){line-height:1.2}

/* Diagonaler Lauf grüner Geist-Mono-Nullen im About-Hero (Hintergrund) */
.zero-rain{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;width:100%;height:100%}
.subhero .wrap{position:relative;z-index:1}

/* ---- Kontakt: Platzhalter-Formular + Ablauf ---- */
.contact-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:48px}}
.termline{font-family:var(--mono);color:var(--muted);font-size:13px;margin-bottom:22px}
#kform{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.field .opt{text-transform:none;letter-spacing:0;opacity:.7}
.field input,.field textarea{font-family:var(--display);font-size:16px;padding:13px 14px;border:1px solid var(--ink);
  background:var(--bg-2);color:var(--ink);border-radius:0;width:100%}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus{outline:2px solid var(--green);outline-offset:0}
.field input[aria-invalid="true"]{border-color:#c0392b}
.err{color:#c0392b;font-family:var(--mono);font-size:11px;min-height:1em}
.microcopy{font-size:13px;color:var(--muted);margin:2px 0 0;max-width:none}
.microcopy.note{font-style:italic;opacity:.85}
#kform .btn{align-self:flex-start;margin-top:8px}
.ksent{border:1px solid var(--ink);background:var(--deep);color:#fff;padding:clamp(24px,3vw,38px)}
.ksent .mono{font-family:var(--mono);color:var(--green);font-size:12px;letter-spacing:.1em;margin:0}
.ksent h3{color:#fff;margin:.5em 0 .5em}
.ksent p{color:rgb(255 255 255 / .8)}
.ksent a{color:var(--green)}
/* Direktkontakt statt Formular (Tim-Entscheid 20.08.2026).
   Die beiden Formulare auf Start- und Kontaktseite verschickten nichts und
   zeigten trotzdem eine Bestaetigung. Ersetzt durch einen dunklen Block mit
   grosser Mono-Adresse, Kanon Paragraf 9 (harte Ink-Kante, Lime als Akzent). */
/* Partnerblock im Impressum: zwei eigenstaendige Unternehmen nebeneinander,
   nicht als Liste untereinander, damit die Gleichrangigkeit sichtbar ist. */
.impressum-partner{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;
  margin:18px 0 22px;padding:20px 24px;border:1px solid var(--line);background:var(--bg-2)}
.impressum-partner p{margin:0}
.impressum-partner .rolle{display:block;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.impressum-partner a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.impressum-partner a:hover{color:var(--purple)}
@media(max-width:720px){.impressum-partner{grid-template-columns:1fr;gap:16px}}
.direktbox{border:1px solid var(--ink);background:var(--deep);color:#fff;
  padding:clamp(26px,3.4vw,40px)}
.direktbox .mono{font-family:var(--mono);color:var(--green);font-size:12px;
  letter-spacing:.1em;margin:0}
.direktbox h2,.direktbox h3{color:#fff;margin:.45em 0 .5em;
  font-size:clamp(21px,2.5vw,29px);letter-spacing:-.02em;line-height:1.15}
.direktbox p{color:rgb(255 255 255 / .8)}
.direktbox .mailgross{display:inline-block;margin:20px 0 4px;font-family:var(--mono);
  font-weight:600;font-size:clamp(19px,2.4vw,28px);letter-spacing:-.02em;
  color:var(--green);text-decoration:none;border-bottom:2px solid transparent;
  transition:border-color .2s var(--ease);word-break:break-word}
.direktbox .mailgross:hover{border-bottom-color:var(--green)}
.direktbox .direktzeile{margin:.35em 0 0;font-size:15px}
.direktbox .direktzeile a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.direktbox .direktzeile a:hover{color:var(--green)}
.ctabox .btn{margin:22px 0 0}
.ctabox .zweitweg{margin:16px 0 0;font-size:14px;color:rgb(255 255 255 / .72)}
.ctabox .zweitweg a{color:var(--green);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.ctabox .zweitweg a:hover{border-bottom-color:var(--green)}
.direktbox .note{margin-top:20px;font-size:13px;line-height:1.5;letter-spacing:0;
  text-transform:none;color:rgb(255 255 255 / .62)}
.contact-side{border-left:1px solid var(--line);padding-left:clamp(24px,3vw,40px)}
@media(max-width:860px){.contact-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:40px}}
.contact-side ol{list-style:none;counter-reset:c;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.contact-side li{counter-increment:c;display:grid;grid-template-columns:auto 1fr;gap:14px}
.contact-side li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);color:#000;background:var(--green);
  font-size:12px;padding:3px 7px;height:fit-content;border:1px solid var(--ink)}
.contact-side li b{display:block;margin-bottom:2px}
.contact-side li p{color:var(--muted);font-size:14px;margin:0}
.direct{font-family:var(--mono);font-size:13px;margin-top:28px;color:var(--muted)}
.direct a{color:var(--ink);border-bottom:1px solid var(--green);text-decoration:none}

/* Alinas Wellenfeld (winziges Canvas, pixelig hochskaliert) */
.wavefield{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}

/* ---- Showcases: Glas-WOW + Karten + Filter ---- */
.wow-stage{position:relative;min-height:clamp(240px,30vw,420px);justify-self:stretch}
#wow-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Jedes Haus ist eine eigene Tafel: eigener Rahmen, eigene Flaeche, Luft dazwischen. */
.sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.8vw,44px)}
@media(max-width:820px){.sc-grid{grid-template-columns:1fr}}
.sc-card{text-decoration:none;border:1px solid var(--ink);background:var(--bg-2);padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;gap:14px;position:relative;isolation:isolate;overflow:hidden}
.sc-card .go{margin-top:auto;padding-top:clamp(14px,1.6vw,20px);font-weight:700;color:#3f6b12}
.sc-card:hover .go{color:#000}
/* Fuenftes Haus laeuft ueber beide Spalten, damit unten kein Loch bleibt. */
.sc-card.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:0;padding:0}
.sc-card.wide .sc-shot{margin:0;aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--ink)}
.sc-card.wide .sc-body{padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.sc-card.wide .go{margin-top:0}
@media(max-width:820px){
  .sc-card.wide{grid-template-columns:1fr}
  .sc-card.wide .sc-shot{aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--ink)}
}

/* Ladeplatz der Vorschau: heller Grund statt schwarzem Block in beiger Seite */
.sc-shot{background:var(--bg-2,#EDEBE3)}
/* Die beiden Etiketten der Tagzeile trennen, sie lasen sich als eine Zeichenkette */
.sc-card .tags{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.sc-card .tags>span+span{opacity:.9}
/* Uhrzeit in der Leiste: fiel beim Scrollen ueber dunkle Karten auf 3,87 zu 1 */
.status{color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sc-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
  transform:translateY(100%);transition:transform .45s var(--spring)}
.sc-card:hover::before{transform:translateY(0)}
.sc-card:hover .why,.sc-card:hover .tags{color:#000}
.sc-card .tags{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.sc-card .tags .style{color:#3f6b12}
.sc-card:hover .tags .style{color:#000}
.sc-card h3{font-size:clamp(26px,3vw,42px)}
.sc-shot{display:block;margin:calc(-1*clamp(26px,3vw,40px)) calc(-1*clamp(26px,3vw,40px)) clamp(20px,2.4vw,28px);
  aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--ink)}
.sc-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  filter:grayscale(1) contrast(1.03);transition:filter .45s ease,transform .55s ease}
.sc-card:hover .sc-shot img{filter:grayscale(0) contrast(1);transform:scale(1.035)}
@media(hover:none){.sc-card .sc-shot img{filter:none}}
/* Tastatur bekommt denselben Beweis wie die Maus: Farbe, Sweep, Textfarben. */
.sc-card:focus-within::before{transform:translateY(0)}
.sc-card:focus-within .why,.sc-card:focus-within .tags{color:#000}
.sc-card:focus-within .tags .style{color:#000}
.sc-card:focus-within .go{color:#000}
.sc-card:focus-within .sc-shot img{filter:grayscale(0) contrast(1);transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.sc-card:focus-within .sc-shot img{transform:none}}

@media(prefers-reduced-motion:reduce){.sc-shot img{transition:filter .2s ease}.sc-card:hover .sc-shot img{transform:none}}
.sc-card .line{font-size:clamp(17px,1.6vw,21px);font-weight:500}
.sc-card .why{color:var(--muted);font-size:14.5px;transition:color .3s var(--ease)}
.sc-card.hidden{display:none}

/* Pixel-Supernova hinter dem Glas-WOW (Showcases) */
.wow-stage{overflow:visible}
.nova-sc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:150%;z-index:0;pointer-events:none;display:block}
#wow-gl{z-index:1}

/* ============================================================
   Rechtstexte (Impressum, Datenschutz) — Langtext-Layout
   Schmales Satzmaß, harte Kanten, Mono-Zaehler vor den H2.
   ============================================================ */
.legal{max-width:74ch}
.legal>*+*{margin-top:1.05em}
.legal h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.2vw,27px);line-height:1.22;letter-spacing:-.01em;
  margin-top:2.6em;padding-top:1.1em;border-top:1px solid var(--line);
  display:flex;gap:.7em;align-items:baseline}
.legal h2:first-of-type{margin-top:1.6em}
.legal h2 .num{
  font-family:var(--mono);font-size:.62em;font-weight:500;
  color:var(--muted);letter-spacing:.04em;flex:none}
.legal h3{
  font-family:var(--mono);font-size:14px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink);
  margin-top:2em}
.legal p,.legal li{color:var(--muted);line-height:1.62;max-width:70ch}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--green-deep)}
.legal a:hover{background:var(--green);text-decoration-color:transparent}
.legal ul{list-style:none;padding:0}
.legal ul li{position:relative;padding-left:1.35em;margin-top:.5em}
.legal ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--green-deep)}

/* Adressblock / Verantwortlicher: Mono-Karte mit harter Kante */
.legal .datablock{
  background:var(--bg-2);border:1px solid var(--ink);
  padding:clamp(20px,2.6vw,30px);margin-top:1.6em}
.legal .datablock p{color:var(--ink);margin:0;line-height:1.7}
.legal .datablock .k{
  font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);display:block;margin-bottom:.35em}
.legal .datablock p+.k{margin-top:1.25em}

/* Merksatz-Kasten: das, was fr0nt bewusst NICHT tut */
.legal .claimbox{
  border-left:3px solid var(--green-deep);background:var(--bg-2);
  padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px);margin-top:1.6em}
.legal .claimbox p{color:var(--ink)}
.legal .claimbox p:first-child{margin-top:0}

.legal .stand{
  font-family:var(--mono);font-size:13px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:1.2em;margin-top:3em}

@media(max-width:700px){
  .legal h2{flex-direction:column;gap:.15em}
}

/* Fiktions- und Bildhinweis auf der Showcase-Galerie */
.sc-disclaimer{
  max-width:78ch;margin:0 0 clamp(20px,2.4vw,30px);
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--muted);
  border-left:3px solid var(--green-deep);padding-left:14px}
.sc-disclaimer strong{color:var(--ink);font-weight:600}