/* Robin Gühring — Prototyp „Dunkler Raum, warmes Licht, Glas"
   Bewusst einthemig dunkel: jede Farbe ist explizit gesetzt. */
:root{
  color-scheme:dark;
  /* Höhe der Kopfzeile, rein aus ihrem Innenabstand berechnet (oben clamp, Inhalt 44 px, unten 22 px) — früher per Skript gemessen */
  --kopf:calc(clamp(18px,3.2vw,46px) + 66px);
  --nacht:#0A0A09; --wand:#121110; --boden:#161412;
  --ink:#F4F0EA; --grau:#A7A099; --dunkel:#6F6A64;
  --licht:#F2E2C8; --glut:#E0C9A6;
  --kante:rgba(242,244,246,.72);
  --radius:18px;
  --rot:#FF2E2E;
  --linie:rgba(241,235,227,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --rand:clamp(20px,5.6vw,94px);
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Jost','Futura','Century Gothic','Avenir Next',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nacht);scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
/* Wechsel zu Impressum und Datenschutz: weich überblenden statt hart umzuschalten */
@view-transition{navigation:auto}
body{margin:0;background:var(--nacht);color:var(--ink);font:300 17px/1.65 var(--sans);letter-spacing:.012em;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:rgba(255,46,46,.35)}
:focus-visible{outline:1px solid var(--rot);outline-offset:4px}
a{color:inherit}
#staub{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* ---- Typografie ---------------------------------------------------- */
h1,h2,h3{font-family:var(--serif);font-weight:370;font-optical-sizing:auto;letter-spacing:-.012em;text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(2.6rem,4.5vw,4.5rem);line-height:1.02}
h2{font-size:clamp(2.1rem,3.9vw,3.7rem);line-height:1.04}
p{margin:0;text-wrap:pretty}
.label{font:400 12px/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.label.leise{color:var(--grau)}
.unter{font:300 clamp(1.02rem,1.35vw,1.2rem)/1.6 var(--sans);letter-spacing:.03em;color:rgba(241,235,227,.86);max-width:44ch}

/* ---- Kopfzeile ----------------------------------------------------- */
.kopf{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(18px,3.2vw,46px) var(--rand) 22px;background:linear-gradient(rgba(10,9,8,.88),rgba(10,9,8,0));transition:transform .7s var(--ease),opacity .5s var(--ease)}
/* Beim Runterscrollen gleitet die Kopfzeile weg, beim Hochscrollen kommt sie mit dunklem Grund zurück (main.js) —
   so liegt sie nie über Lesetext. Mit der Tastatur bleibt sie erreichbar. */
.kopf::before{content:"";position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(10,9,8,.97),rgba(10,9,8,.88) 58%,rgba(10,9,8,0));opacity:0;transition:opacity .5s var(--ease)}
.kopf.mitte::before{opacity:1}
.kopf.weg{transform:translateY(-100%);opacity:0;pointer-events:none}
.kopf:focus-within{transform:none;opacity:1;pointer-events:auto}
.marke{font:400 13px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:clamp(18px,3vw,46px)}
.nav a,.link{position:relative;font:400 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:14px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:currentColor;transition:right .5s var(--ease)}
.nav a:hover::after{right:0}

/* ---- Knöpfe -------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;gap:20px;min-height:56px;padding:0 28px;border:1px solid rgba(241,235,227,.72);background:transparent;color:var(--ink);text-decoration:none;font:400 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:background .5s var(--ease),color .5s var(--ease)}
.knopf:hover{background:var(--rot);border-color:var(--rot);color:#fff}
.knopf{transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .6s var(--ease)}
.knopf.magnet{transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .15s linear}

/* Weiches Scrollen (Lenis): die Bibliothek übernimmt, der Browser scrollt nicht selbst weich */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
html{scrollbar-gutter:stable}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* Eigener Cursor: nur bei Maus; in Eingabefeldern und Dialogen bleibt der normale Zeiger */
html.eigener-cursor,html.eigener-cursor *{cursor:none!important}
html.eigener-cursor input,html.eigener-cursor textarea{cursor:text!important}
html.eigener-cursor dialog,html.eigener-cursor dialog *{cursor:auto!important}
.cursor{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.an{opacity:1}
.cursor-punkt,.cursor-ring{position:absolute;left:0;top:0;translate:-50% -50%;border-radius:50%}
.cursor-punkt{width:6px;height:6px;background:var(--rot);box-shadow:0 0 10px rgba(255,46,46,.8)}
.cursor-ring{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(244,240,234,.55);transition:width .45s var(--ease),height .45s var(--ease),background .45s,border-color .45s}
.cursor.gross .cursor-ring{width:64px;height:64px;background:rgba(255,46,46,.12);border-color:rgba(255,46,46,.7)}
.cursor.ziehen .cursor-ring{width:84px;height:84px;background:rgba(10,10,9,.45);border-color:rgba(244,240,234,.7)}
.cursor.druck .cursor-ring{width:26px;height:26px}
.cursor-text{font:500 9px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s}
.cursor.ziehen .cursor-text{opacity:1}
.cursor.versteckt{opacity:0}

/* Ton-Schalter in der Kopfzeile */
.ton{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:var(--grau);font:400 12px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:color .4s var(--ease)}
.ton:hover{color:var(--ink)}
.ton[aria-pressed="true"]{color:var(--rot)}
/* Pegel-Balken: stehen still bei „Ton aus“, tanzen bei „Ton an“ */
.ton-balken{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.ton-balken i{width:2px;height:3px;border-radius:1px;background:currentColor;transition:height .4s var(--ease)}
.ton[aria-pressed="true"] .ton-balken i{animation:pegel 1.1s ease-in-out infinite}
.ton[aria-pressed="true"] .ton-balken i:nth-child(2){animation-delay:.22s}
.ton[aria-pressed="true"] .ton-balken i:nth-child(3){animation-delay:.47s}
.ton[aria-pressed="true"] .ton-balken i:nth-child(4){animation-delay:.1s}
@keyframes pegel{0%,100%{height:3px}50%{height:12px}}
@media (max-width:640px){.ton-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.link{border-bottom:1px solid rgba(241,235,227,.6);padding-bottom:10px}
.pfeil{position:relative;display:inline-block;width:22px;height:1px;background:currentColor;flex:none}
.pfeil::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.pfeil.zurueck{transform:scaleX(-1)}

/* ---- Raum: Lichtkegel und Boden ------------------------------------ */
.raum{position:relative;isolation:isolate;overflow:hidden}
/* Ein Licht für die ganze Seite: fest im Bild, main.js führt es weich von Abschnitt zu Abschnitt */
.raumlicht{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;opacity:var(--sa,1);will-change:opacity}
/* Roter Dunst: Stärke je Abschnitt aus main.js, gleitet beim Scrollen — so gibt es keine harten Farbwechsel */
.rotdunst{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:0;will-change:opacity;background:radial-gradient(90% 55% at 50% 100%,rgba(255,30,30,.18),transparent 70%),radial-gradient(60% 40% at 50% 0%,rgba(255,30,30,.06),transparent 70%)}
.strahl{position:absolute;z-index:-1;top:-14%;left:-650px;width:1300px;height:135%;pointer-events:none;
  background:radial-gradient(260px 120px at 50% 0%,rgba(240,238,236,.26),transparent 70%),conic-gradient(from 158deg at 50% 0%,transparent 0deg,rgba(236,234,232,.018) 4deg,rgba(236,234,232,.06) 9deg,rgba(236,234,232,.115) 14deg,rgba(236,234,232,.155) 19deg,rgba(236,234,232,.17) 22deg,rgba(236,234,232,.155) 25deg,rgba(236,234,232,.115) 30deg,rgba(236,234,232,.06) 35deg,rgba(236,234,232,.018) 40deg,transparent 44deg);
  -webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.55) 55%,transparent 92%);mask-image:linear-gradient(#000,rgba(0,0,0,.55) 55%,transparent 92%);
  transform:translateX(var(--sx,86vw)) rotate(var(--sr,17deg));transform-origin:50% 0;will-change:transform}
/* Der Strahl wandert per transform und ohne Weichzeichner-Filter: Die Fläche wird einmal gemalt und nur verschoben — kein Ruckeln */
.boden{position:absolute;z-index:-2;left:0;right:0;bottom:0;height:var(--bh,34%);pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 60%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 60%,transparent);
  background:radial-gradient(55% 80% at var(--bx,66%) 0%,rgba(242,228,206,.1),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%),linear-gradient(#131211,var(--nacht))}
.boden::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(242,206,155,.12) 50%,transparent)}

/* ---- Hero ---------------------------------------------------------- */
/* Hero: die Bühne klebt, solange die Kamera fliegt (.flug verlängert den Abschnitt) */
.hero{position:relative}
.hero.flug{height:260vh}   /* mehr Scrollweg für den Flug: Jeder Dreh am Mausrad bewegt die Kamera ruhiger */
@media (max-width:760px){.hero.flug{height:225vh}}
.hero-stage{position:sticky;top:0;min-height:min(100svh,980px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(120px,15vh,170px) var(--rand) clamp(110px,15vh,160px);overflow:hidden;isolation:isolate}
/* 100lvh: Auch wenn am Handy die Adressleiste einfährt, reicht die Bühne bis ganz unten — sonst bleibt dort ein schwarzer Streifen */
.hero.webgl .hero-stage{height:100vh;height:100lvh;min-height:0}
.hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:none}
.hero.webgl .hero-canvas{display:block;opacity:0}   /* hero3d.js blendet ein, sobald das erste Bild fertig ist */
.hero.webgl .hero-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,9,.88),rgba(10,10,9,.45) 42%,transparent 66%)}
.hero.webgl .hero-buehne{display:none}
.hero.webgl .hero-text,.hero.webgl .signatur{opacity:calc(1 - var(--hp,0) * 3);transform:translateY(calc(var(--hp,0) * -80px))}
.hero-hinweis{display:none}
.hero.flug .hero-hinweis{display:block;position:absolute;left:50%;bottom:clamp(20px,4vh,40px);margin:0;transform:translateX(-50%);opacity:calc(.85 - var(--hp,0) * 5)}
.hero.flug .hero-hinweis{bottom:calc(100lvh - 100svh + clamp(20px,4vh,40px))}   /* über der Adressleiste, solange sie da ist */
.hero-text{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(16px,3.2vh,28px);max-width:640px}
/* Niedrige Fenster: Die Überschrift richtet sich auch nach der Höhe, damit der Textblock nie an Kopfzeile oder Signatur stößt */
.hero-text h1{font-size:clamp(2.2rem,min(4.5vw,7.2vh),4.5rem)}
.aktionen{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;margin-top:10px}
.signatur{position:absolute;left:var(--rand);bottom:clamp(26px,5vh,64px);padding:4px 0 4px 22px;border-left:1px solid rgba(241,235,227,.7);font:400 11px/1.7 var(--sans);letter-spacing:.28em;text-transform:uppercase}
@media (max-height:820px){.signatur{display:none}}

/* Glaspanel im Raum. Innenmaße über Container-Einheiten (cqi). */
.hero-buehne{position:relative;perspective:1700px;perspective-origin:20% 45%;display:grid;place-items:center}
.glas{position:relative;width:min(100%,800px);aspect-ratio:16/11;container-type:inline-size;transform-style:preserve-3d;border-radius:calc(var(--radius) + 4px);
  transform:rotateY(var(--gy,-17deg)) rotateX(var(--gx,1.5deg));
  background:linear-gradient(125deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 38%,rgba(255,255,255,.035) 70%,rgba(255,255,255,.012)),rgba(12,12,11,.5);
  box-shadow:0 0 24px rgba(236,240,244,.18),0 0 90px rgba(236,240,244,.05),inset 0 0 60px rgba(255,255,255,.03),0 90px 120px -50px rgba(0,0,0,.9);
  -webkit-box-reflect:below 18px linear-gradient(transparent 60%,rgba(255,255,255,.22))}
.glas::after{content:"";position:absolute;left:3%;right:3%;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,rgba(248,242,232,.95),transparent);box-shadow:0 0 26px 5px rgba(242,230,210,.26);pointer-events:none}
.mini{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5.2fr) 4cqi;gap:0 4.5cqi;align-items:center;padding:11cqi 5cqi 8cqi 6.5cqi}
.mini-kopf{position:absolute;top:5.2cqi;left:6.5cqi;font:400 max(7px,1.25cqi)/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:rgba(241,235,227,.9)}
.mini-text{display:flex;flex-direction:column;gap:2.6cqi}
.mini-text .klein{font:400 max(7px,1.2cqi)/1.7 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.mini-text .titel{font:370 max(18px,5.4cqi)/1.04 var(--serif);letter-spacing:-.015em}
.mini-text .text{font:300 max(9px,1.75cqi)/1.55 var(--sans);color:rgba(241,235,227,.82)}
.mini-text .strich{width:5cqi;height:1px;background:rgba(241,235,227,.6)}
.mini-bild{position:relative;aspect-ratio:1/1.02;border:1px solid rgba(255,255,255,.22);border-radius:calc(var(--radius) - 6px);overflow:hidden}
.mini-index{display:flex;flex-direction:column;align-items:center;gap:1.6cqi;font:400 max(7px,1.1cqi)/1 var(--sans);letter-spacing:.1em;color:rgba(241,235,227,.85)}
.mini-index i{width:1px;height:5cqi;background:rgba(241,235,227,.5)}

/* Materialbilder: reines CSS, bis echte Aufnahmen vorliegen */
.textur::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.b-architektur{background:linear-gradient(#a9bccb 0%,#dcd8cf 57%,#74838c 57.4%,#94a0a6 63%,#d5cab9 63.4%,#c2b39d 100%)}
.b-architektur i{position:absolute;display:block}
.b-architektur i:nth-child(1){left:36%;right:-4%;top:5%;bottom:0;background:linear-gradient(100deg,#d3c9ba,#b6ab9b 55%,#9a8f7e);clip-path:polygon(24% 9%,100% 0,100% 100%,0 100%,0 15%)}
.b-architektur i:nth-child(2){left:36%;right:-4%;top:5%;bottom:0;background:linear-gradient(121deg,transparent 47%,rgba(58,50,42,.62) 47.3%,rgba(38,32,26,.5));clip-path:polygon(24% 9%,100% 0,100% 100%,0 100%,0 15%)}
.b-architektur i:nth-child(3){left:17%;width:21%;top:27%;bottom:0;background:linear-gradient(90deg,#877e70,#a49a8b 70%,#8f8676)}
.b-architektur i:nth-child(4){left:-10%;top:16%;width:44%;height:64%;background:radial-gradient(closest-side at 42% 38%,rgba(34,42,30,.96),rgba(38,46,32,.75) 62%,transparent 74%),radial-gradient(closest-side at 72% 70%,rgba(46,54,36,.9),transparent 72%)}
.b-fliesen{background:radial-gradient(38% 34% at 40% 32%,rgba(255,214,160,.26),transparent 70%),repeating-linear-gradient(90deg,rgba(0,0,0,.4) 0 1px,transparent 1px 16.66%),repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 1px,transparent 1px 12.5%),linear-gradient(135deg,#4d4239,#2d2621 55%,#1d1916)}
.b-fliesen i,.b-holz i,.b-stein i{position:absolute;display:block}
.b-fliesen i:nth-child(1){left:27%;top:10%;width:27%;aspect-ratio:1/1.28;border-radius:50%;background:radial-gradient(closest-side,#221d19 78%,#ffe3bb 88%,rgba(255,210,160,0) 100%);box-shadow:0 0 26px 6px rgba(255,205,150,.3)}
.b-fliesen i:nth-child(2){left:12%;right:32%;bottom:18%;height:15%;background:linear-gradient(#c3b9ab,#8d8478);box-shadow:0 -1px 0 rgba(255,240,220,.6),0 22px 30px rgba(0,0,0,.55)}
.b-fliesen i:nth-child(3){right:0;top:0;bottom:0;width:25%;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.18));border-left:1px solid rgba(255,220,170,.4)}
.b-fliesen i:nth-child(4){left:0;right:0;bottom:0;height:18%;background:linear-gradient(#3b342e,#1f1a16)}
/* Erster Himmel: Nachtblau mit Goldschimmer und ein paar Sternen */
.b-nacht{background:radial-gradient(58% 42% at 50% 20%,rgba(217,180,90,.2),transparent 72%),linear-gradient(#0A1730,#0E1A35 55%,#1B2A4E)}
.b-nacht i{position:absolute;display:block;border-radius:50%;background:#F3F5FA;box-shadow:0 0 6px 1px rgba(243,245,250,.5)}
.b-nacht i:nth-child(1){left:28%;top:26%;width:3px;aspect-ratio:1}
.b-nacht i:nth-child(2){left:62%;top:18%;width:2px;aspect-ratio:1;opacity:.8}
.b-nacht i:nth-child(3){left:47%;top:44%;width:4px;aspect-ratio:1;background:#D9B45A;box-shadow:0 0 10px 2px rgba(217,180,90,.55)}
.b-mode{background:radial-gradient(48% 58% at 58% 42%,rgba(170,126,84,.28),transparent 70%),linear-gradient(90deg,#14100d,#2a2119 60%,#15110e)}
.b-mode svg{position:absolute;left:14%;right:14%;bottom:0;width:72%;height:92%}
.b-holz{background:radial-gradient(60% 50% at 28% 18%,rgba(255,226,180,.4),transparent 70%),linear-gradient(#cfc1ab,#a8957b 70%,#7b6a55)}
.b-holz i:nth-child(1){left:45%;width:7%;top:14%;bottom:12%;background:linear-gradient(90deg,#74553a,#b68c60 45%,#684b31)}
.b-holz i:nth-child(2),.b-holz i:nth-child(3){height:7%;border-radius:50%;background:linear-gradient(#cda57c,#8b6644);box-shadow:0 10px 16px rgba(60,40,20,.35)}
.b-holz i:nth-child(2){left:22%;width:46%;top:22%}
.b-holz i:nth-child(3){left:38%;width:46%;top:52%}
.b-holz i:nth-child(4){left:20%;width:60%;bottom:8%;height:6%;border-radius:3px;background:linear-gradient(#bb966d,#79593a)}
.b-stein{background:linear-gradient(90deg,transparent 71%,rgba(255,196,130,.45) 72.4%,#fff1d8 72.8%,rgba(255,196,130,.45) 73.2%,transparent 75%),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 31%,transparent 33%,transparent 58%,rgba(255,255,255,.04) 59%,transparent 61%),linear-gradient(160deg,#28241f,#141210 60%,#0e0c0b)}
.b-stein i:nth-child(1){left:0;top:0;bottom:0;width:40%;background:linear-gradient(100deg,#1c1916,#2c2722);clip-path:polygon(0 0,100% 16%,100% 100%,0 100%)}
.b-stein i:nth-child(2){left:72.8%;top:0;bottom:0;width:1px;box-shadow:0 0 20px 7px rgba(255,190,120,.32)}

/* ---- Leistungen: Liste links, rechts entsteht beim Scrollen eine Website ---- */
.leistungen{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);padding:clamp(100px,12vw,170px) var(--rand)}
.leistungen-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:760px}
.leistungen-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:start}
.dienste{list-style:none;margin:0;padding:0}
.dienst{position:relative;display:flex;flex-direction:column;gap:12px;min-height:min(62vh,560px);padding:34px 0 40px;border-top:1px solid var(--linie);transition:opacity .6s var(--ease)}
.dienste.gesteuert .dienst{opacity:.4}
.dienste.gesteuert .dienst.an{opacity:1}
.dienst::before{content:"";position:absolute;left:0;right:100%;top:-1px;height:1px;background:linear-gradient(90deg,var(--rot),rgba(255,46,46,0));transition:right 1s var(--ease)}
.dienst:hover::before,.dienst.an::before{right:0}
.dienst-nr{font:370 clamp(2.4rem,4vw,3.6rem)/1 var(--serif);color:var(--rot)}
.dienst h3{font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.1}
.dienst p{color:rgba(241,235,227,.8);max-width:46ch}
.dienst .umfang{font:400 11px/2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--grau)}

/* Generator: eine Website entsteht in vier Stufen (Klassen s1–s4 aus generator.js) */
.generator{position:sticky;top:clamp(90px,14vh,140px);display:flex;flex-direction:column;gap:14px}
.gen-fenster{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;container-type:inline-size;background:linear-gradient(#0e0e0d,#0a0a09);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 70px rgba(255,46,46,.06),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(0,0,0,.6)}
.gen-leiste{display:flex;align-items:center;gap:1.2cqi;height:6.5cqi;padding:0 2.4cqi;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.gen-leiste i{width:1.1cqi;height:1.1cqi;border-radius:50%;background:rgba(255,255,255,.14)}
.gen-url{flex:1;margin-left:2cqi;height:3.2cqi;padding-left:2cqi;border-radius:2cqi;background:rgba(255,255,255,.05);font:400 max(9px,1.5cqi)/3.2cqi var(--sans);letter-spacing:.08em;color:rgba(244,240,234,.5)}
.gen-status{display:flex;align-items:center;gap:1cqi;font:500 max(9px,1.4cqi)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,240,234,.25);transition:color .6s}
.gen-punkt{width:1.2cqi;height:1.2cqi;border-radius:50%;background:rgba(255,255,255,.2)}
.gen-seite{position:absolute;inset:6.5cqi 0 0;display:flex;flex-direction:column;gap:3cqi;padding:3cqi 4cqi;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:4cqi 4cqi}
.gen-cursor{position:absolute;left:50%;top:45%;width:.35cqi;height:4.5cqi;background:var(--rot);animation:blinken 1s steps(2) infinite}
@keyframes blinken{50%{opacity:0}}
.gen-nav,.gen-hero,.gen-karten,.gen-code{opacity:0;transform:translateY(2cqi);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gen-nav{display:flex;align-items:center;gap:2.4cqi;font:500 max(9px,1.6cqi)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.gen-marke{margin-right:auto}
.gen-link{width:6cqi;height:.9cqi;border-radius:1cqi;background:rgba(255,255,255,.25)}
.gen-korb{margin-left:2cqi;color:rgba(244,240,234,.6)}
.gen-korb span{display:inline-grid;place-items:center;min-width:2.6cqi;height:2.6cqi;margin-left:.6cqi;border-radius:2cqi;background:rgba(255,255,255,.12);color:#fff;transition:background .8s var(--ease)}
.gen-hero{display:grid;grid-template-columns:1fr 1fr;gap:3cqi;align-items:center;flex:1;min-height:0}
.gen-titel{margin:0;display:flex;flex-direction:column;font:370 max(16px,6cqi)/1 var(--serif);letter-spacing:-.02em}
.gen-titel span{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.gen-bild{position:relative;align-self:stretch;overflow:hidden;border-radius:1.6cqi;border:1px solid rgba(255,255,255,.14);background:linear-gradient(150deg,#171413,#0d0c0b);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color 1s var(--ease)}
.gen-bild canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.gen-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqi}
.gen-karte{display:flex;flex-direction:column;gap:1cqi;padding:1.6cqi;border-radius:1.4cqi;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font:400 max(8px,1.5cqi)/1.3 var(--sans);transition:border-color .6s,background .6s}
.gen-foto{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:1cqi;background:rgba(255,255,255,.05)}
/* Das rote Produktlicht liegt auf einer eigenen Ebene: Ein Farbverlauf lässt sich nicht überblenden,
   eine Ebene schon — sie steigt in Stufe 3 weich von unten auf */
.gen-foto::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,46,46,.35),transparent 60%),linear-gradient(135deg,#2a2220,#15110f);opacity:0;clip-path:inset(100% 0 0 0);transition:opacity .9s var(--ease),clip-path 1.2s var(--ease)}
.gen-name{color:#fff}
.gen-preis,.gen-kaufen{opacity:0;transform:translateY(.8cqi);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.gen-kaufen{align-self:flex-start;padding:.8cqi 1.4cqi;border-radius:4cqi;background:var(--rot);color:#fff;font-size:max(7px,1.2cqi);letter-spacing:.08em}
.gen-code{position:absolute;right:2.4cqi;bottom:2.4cqi;width:min(58%,420px);max-height:48%;margin:0;padding:2cqi 2.4cqi;overflow:hidden;border-radius:1.4cqi;
  background:rgba(9,9,8,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-left:2px solid rgba(255,46,46,.65);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9);font:400 max(8px,1.45cqi)/1.6 ui-monospace,Consolas,monospace;color:rgba(255,196,190,.9);white-space:pre-wrap}
/* Stufe 1: Gestaltung — Gerüst, Schrift und Farbe erscheinen */
.generator.s1 .gen-cursor{display:none}
.generator.s1 .gen-nav,.generator.s1 .gen-hero,.generator.s1 .gen-karten,.generator.s1 .gen-code{opacity:1;transform:none}
.generator.s1 .gen-karten{transition-delay:.3s}
.generator.s1 .gen-titel span{clip-path:inset(0 0 0 0)}
.generator.s1 .gen-titel span:nth-child(2){transition-delay:.25s;color:var(--rot)}
/* Stufe 2: Entwicklung — gestrichelte Linien werden fest */
.generator.s2 .gen-bild,.generator.s2 .gen-karte{border-style:solid;border-color:rgba(255,255,255,.12)}
.generator.s2 .gen-karte{background:rgba(255,255,255,.03)}
/* Stufe 3: Shop — Karte für Karte: rotes Licht steigt auf, dann Preis, dann Knopf, zuletzt der Warenkorb */
.generator.s3 .gen-foto::after{opacity:1;clip-path:inset(0)}
.generator.s3 .gen-preis,.generator.s3 .gen-kaufen{opacity:1;transform:none}
.generator.s3 .gen-preis{transition-delay:.15s}
.generator.s3 .gen-kaufen{transition-delay:.3s}
.generator.s3 .gen-karte:nth-child(2) .gen-foto::after{transition-delay:.15s}
.generator.s3 .gen-karte:nth-child(2) .gen-preis{transition-delay:.3s}
.generator.s3 .gen-karte:nth-child(2) .gen-kaufen{transition-delay:.45s}
.generator.s3 .gen-karte:nth-child(3) .gen-foto::after{transition-delay:.3s}
.generator.s3 .gen-karte:nth-child(3) .gen-preis{transition-delay:.45s}
.generator.s3 .gen-karte:nth-child(3) .gen-kaufen{transition-delay:.6s}
.generator.s3 .gen-korb span{background:var(--rot);transition-delay:.7s}
/* Stufe 4: Motion — Zeichenregen im Bild, Karten schweben, die Seite ist live */
.generator.s4 .gen-bild{border-color:rgba(255,46,46,.45)}
.generator.s4 .gen-bild canvas{opacity:1}
.generator.s4 .gen-karte{animation:schweben 3s ease-in-out infinite}
.generator.s4 .gen-karte:nth-child(2){animation-delay:.4s}
.generator.s4 .gen-karte:nth-child(3){animation-delay:.8s}
.generator.s4 .gen-status{color:#fff}
.generator.s4 .gen-punkt{background:var(--rot);box-shadow:0 0 1.4cqi var(--rot);animation:blinken 1.4s ease-in-out infinite}
@keyframes schweben{50%{transform:translateY(-1cqi)}}
.gen-legende{margin:0;color:rgba(244,240,234,.85)}
.leistungen-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding-top:8px}
.ablauf{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ablauf li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--linie)}
.ablauf .nr{font:400 11px/1 var(--sans);letter-spacing:.3em;color:var(--rot)}
.ablauf strong{font:400 1.25rem/1.2 var(--serif)}
.ablauf span:last-child{font-size:.92rem;line-height:1.55;color:var(--grau)}

/* ---- Arbeiten: Karussell aus Glasfenstern -------------------------- */
.arbeiten{padding:clamp(110px,13vw,180px) 0 clamp(70px,9vw,130px);--sx:52%;--sr:0deg;--bx:50%;--bh:48%}
/* Übergang Portal → Arbeiten: Die Überschrift steigt schon in der Tiefe der Zeichenwelt auf — kein schwarzes
   Loch zwischen dem Flug und dem ersten Projekt */
.hero.flug + .arbeiten{margin-top:-40vh;padding-top:clamp(40px,6vw,110px)}
.arbeiten-kopf{padding-inline:var(--rand);display:flex;flex-direction:column;gap:22px}
.karussell{--w:clamp(230px,23vw,400px);position:relative;height:calc(var(--w) * 1.4 + 150px);margin-top:clamp(40px,5vw,70px);perspective:1800px;perspective-origin:50% 35%;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.karussell.zieht{cursor:grabbing}
.fenster{position:absolute;left:50%;top:0;width:var(--w);margin-left:calc(var(--w) / -2);transform-style:preserve-3d}
.karussell.zieht .fenster{transition:none}
/* Bogenfenster wie Tempelportale: Halbkreis oben (35,7 % der Höhe = halbe Breite bei 5:7) */
.rahmen{position:relative;aspect-ratio:5/7;container-type:inline-size;transform-style:preserve-3d;border-radius:50% 50% 16px 16px / 35.7% 35.7% 16px 16px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.01) 45%),rgba(13,13,12,.82);box-shadow:0 0 22px rgba(236,240,244,.14),0 0 80px rgba(236,240,244,.04),0 70px 90px -45px rgba(0,0,0,.95);-webkit-box-reflect:below 14px linear-gradient(transparent 62%,rgba(255,255,255,.2));transition:transform 1s var(--ease),box-shadow 1s var(--ease)}
.fenster-inhalt{position:absolute;inset:2cqi;border-radius:50% 50% 12px 12px / 35.7% 35.7% 12px 12px;overflow:hidden;filter:brightness(.7) saturate(.85);transition:filter 1s var(--ease)}
.scheibe{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;pointer-events:none;
  background-image:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 42%,rgba(255,255,255,.03) 50%,transparent 58%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 42%);
  background-size:260% 100%,100% 100%;background-position:130% 0,0 0;background-repeat:no-repeat;background-color:rgba(18,16,12,.3);
  transition:opacity .7s var(--ease),background-position 1.6s var(--ease)}
/* Glaskante: Verlauf plus Lichtpunkt, der dem Zeiger folgt (--mx/--my aus main.js) */
.rahmen::before,.glas::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx,18%) var(--my,0%),rgba(255,255,255,1),rgba(255,255,255,0) 70%),linear-gradient(160deg,rgba(255,255,255,.9),rgba(236,240,244,.3) 30%,rgba(255,255,255,.08) 58%,rgba(240,244,248,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.rahmen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(255,236,212,.07),transparent 60%)}
.fenster.aktiv .fenster-inhalt,.fenster:hover .fenster-inhalt{filter:none}
.fenster:hover .rahmen{transform:translateZ(40px);box-shadow:0 0 30px rgba(240,244,248,.24),0 0 100px rgba(240,244,248,.07),0 80px 100px -45px rgba(0,0,0,.95)}
/* Hover: die Scheibe wird klar und gibt das Projekt frei */
.fenster:hover .scheibe,.fenster:focus-within .scheibe{opacity:0;background-position:-40% 0,0 0}
.fenster-text{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:3.5cqi;padding:15cqi 7cqi 7cqi;background:linear-gradient(rgba(8,8,8,.3),transparent 24%,transparent 44%,rgba(8,8,8,.9))}
.fenster-text>div{margin-top:auto}
.fenster-tags{align-self:center;text-align:center;font:400 max(8px,2.3cqi)/1.8 var(--sans);letter-spacing:.3em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.fenster-titel{font:370 max(18px,9.5cqi)/1.02 var(--serif);letter-spacing:-.015em}
.fenster-claim{font:300 max(10px,3.3cqi)/1.5 var(--sans);color:rgba(241,235,227,.85);margin-top:2.5cqi}
.fenster-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:3cqi;padding:3cqi 4.4cqi;border:1px solid rgba(241,235,227,.72);background:transparent;color:var(--ink);font:400 max(9px,2.4cqi)/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .6s,background .4s,color .4s}
.fenster-cta .pfeil{width:5cqi}
.fenster.aktiv .fenster-cta{opacity:1;visibility:visible}
.fenster-cta:hover{background:var(--ink);color:var(--nacht)}
.fenster-bild{position:absolute;inset:0;overflow:hidden;transition:transform 1.4s var(--ease)}
.fenster:hover .fenster-bild{transform:scale(1.05)}
.foto{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.fenster-unter{position:absolute;left:-10%;right:-10%;top:calc(100% + 30px);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fenster-unter .leise{font-size:10.5px;letter-spacing:.24em}
.bogen-nav{display:flex;flex-direction:column;align-items:center;gap:14px;margin:clamp(24px,3vw,44px) auto 0;width:min(64vw,900px)}
.bogen-nav svg{width:100%;height:auto;overflow:visible}
.bogen-nav path{fill:none;stroke:rgba(241,235,227,.28);stroke-width:1}
.bogen-nav circle{fill:rgba(241,235,227,.45);transition:fill .5s}
.bogen-nav circle.an{fill:#FF5A5A;filter:drop-shadow(0 0 8px rgba(255,46,46,.95))}
.pfeile{display:flex;gap:10px}
.pfeile button{width:52px;height:48px;display:grid;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;opacity:.8}
.pfeile button:hover{opacity:1}

/* ---- Galerie (WebGL): gebogene Bildflächen im roten Zeichenraum --- */
/* Die Leinwand füllt nur den Bildbereich; oben und unten läuft sie weich in das Schwarz aus */
.galerie-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:none;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.22) 7%,rgba(0,0,0,.72) 18%,#000 30%,#000 52%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.2) 84%,transparent 96%);mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.22) 7%,rgba(0,0,0,.72) 18%,#000 30%,#000 52%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.2) 84%,transparent 96%)}
.karussell.webgl .galerie-canvas{display:block}
.galerie-info{display:none}
.karussell.webgl{height:min(80vh,800px);margin-top:clamp(8px,2vw,24px)}
.karussell.webgl .fenster{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* Projektinfo ohne Kasten: zentriert unter der aktiven Fläche; dahinter dimmt der Shader den Regen */
.karussell.webgl .galerie-info{display:flex;flex-direction:column;align-items:center;gap:10px;position:absolute;z-index:3;left:50%;bottom:clamp(10px,3vh,32px);width:min(760px,calc(100% - 2 * var(--rand)));transform:translateX(-50%);text-align:center;pointer-events:none}
.galerie-info a,.galerie-info button{pointer-events:auto}
.galerie-kopf{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 14px;margin:0}
.galerie-nr{font:500 12px/1 var(--sans);letter-spacing:.3em;color:var(--rot)}
.galerie-kopf .label{color:rgba(244,240,234,.82)}
.galerie-titel{margin:0;font:370 clamp(1.8rem,3vw,2.6rem)/1.04 var(--serif);letter-spacing:-.015em;text-shadow:0 2px 24px rgba(0,0,0,.85);min-height:1.04em}
.galerie-claim{margin:0 0 4px;color:rgba(241,235,227,.82);text-shadow:0 1px 16px rgba(0,0,0,.9)}
.galerie-link{display:inline-flex;align-items:center;gap:14px;background:none;border:0;border-bottom:1px solid rgba(241,235,227,.6);color:var(--ink);cursor:pointer}

/* ---- Tempel -------------------------------------------------------- */
.tempel{position:relative;height:320vh}
.tempel-buehne{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;isolation:isolate}
.tempel canvas{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.tempel-text{position:absolute;z-index:2;left:var(--rand);top:clamp(100px,15vh,160px);width:min(470px,calc(100% - 2 * var(--rand)));display:flex;flex-direction:column;gap:20px}
.tempel-text p:last-child{color:rgba(241,235,227,.84);max-width:40ch}
/* Lesbarkeit: weicher Schatten hinter Text und Fakten, damit Tempel und Zeichen nicht durchscheinen */
.tempel-text::before,.tempel-fuss::before{content:"";position:absolute;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(10,10,9,.9),rgba(10,10,9,.6) 55%,transparent)}
.tempel-text::before{inset:-90px -140px -90px -120px}
.tempel-fuss::before{inset:-50px -60px -40px -80px}
.tempel-fuss{position:absolute;z-index:2;left:var(--rand);right:var(--rand);bottom:clamp(24px,5vh,56px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.tempel-fuss{bottom:calc(100lvh - 100svh + clamp(24px,5vh,56px))}
.fakten{display:flex;flex-wrap:wrap;gap:clamp(22px,3.4vw,52px);margin:0}
.fakten div{display:flex;flex-direction:column;gap:6px}
.fakten dt{order:2;font:400 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--grau)}
.fakten dd{margin:0;font:370 clamp(1.45rem,2.2vw,2rem)/1 var(--serif);font-variant-numeric:tabular-nums}
.fortschritt{display:flex;align-items:center;gap:16px;font:400 11px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.fortschritt .spur{position:relative;width:min(260px,40vw);height:1px;background:rgba(241,235,227,.2)}
/* Aufbau-Regler (tempel.js): ziehen oder mit den Pfeiltasten stellen — die Seite scrollt im Tempo des Scrollens mit */
.fortschritt{padding:14px 0;border-radius:4px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.fortschritt.zieht{cursor:grabbing}
.fortschritt:focus-visible{outline:1px solid var(--rot);outline-offset:6px}
.fortschritt .spur::before{content:"";position:absolute;inset:-18px -8px}
.fortschritt .spur::after{content:"";position:absolute;top:50%;left:calc(var(--p,0) * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--rot);box-shadow:0 0 0 4px rgba(255,46,46,.16),0 0 14px rgba(255,46,46,.85);transition:transform .35s var(--ease)}
.fortschritt:hover .spur::after,.fortschritt.zieht .spur::after,.fortschritt:focus-visible .spur::after{transform:scale(1.45)}
.fortschritt .spur i{position:absolute;inset:0;background:var(--rot);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.tempel-ohne{display:none;position:absolute;z-index:2;left:var(--rand);bottom:30%;max-width:40ch;color:var(--grau)}
.ohne-webgl .tempel-ohne{display:block}

/* ---- Über mich & Kontakt ------------------------------------------- */
.ueber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,7vw,120px);padding:clamp(110px,13vw,180px) var(--rand);--sx:26%;--sr:-12deg;--bx:28%;--bh:40%}
/* Porträt: frontal und symmetrisch — konzentrische Bögen, Kante oben hell, keine Spiegelung */
.portrait{--pw:min(360px,72vw);display:flex;flex-direction:column;align-items:center;gap:22px}
.portrait .rahmen{width:var(--pw);aspect-ratio:4/5;transform:none;border-radius:calc(var(--pw) / 2) calc(var(--pw) / 2) 20px 20px;-webkit-box-reflect:unset;background:rgba(13,13,12,.92)}
/* Wichtig: Chrome kennt „none“ bei -webkit-box-reflect nicht und verwirft die Angabe — „unset“ schaltet die Spiegelung ab */
.portrait .rahmen::before{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.14) 48%,rgba(255,255,255,.3))}
.portrait .rahmen::after{display:none}
.portrait-name{margin:0;text-align:center}
#portraitCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.b-portrait.mosaik .foto,.b-portrait.mosaik .label{display:none}
.b-portrait{position:absolute;inset:12px;border-radius:calc(var(--pw) / 2 - 12px) calc(var(--pw) / 2 - 12px) 10px 10px;overflow:hidden;background:radial-gradient(20% 16% at 50% 36%,#3b3129,transparent 72%),radial-gradient(46% 32% at 50% 90%,#30271f,transparent 72%),radial-gradient(70% 60% at 30% 8%,rgba(242,206,155,.2),transparent 70%),linear-gradient(#1c1814,#0f0d0b)}
.b-portrait .label{position:absolute;left:50%;bottom:16%;margin:0;transform:translateX(-50%);white-space:nowrap;font-size:11px}
.ueber-text{display:flex;flex-direction:column;gap:26px}
.ueber-text p:not(.label){color:rgba(241,235,227,.84);max-width:54ch}
.schwerpunkte{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:6px 0 0;padding:0}
.schwerpunkte li{padding:11px 16px;border:1px solid var(--linie);font:400 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(48px,6vw,110px);align-items:start;padding:clamp(130px,15vw,210px) var(--rand) clamp(100px,11vw,150px);--sx:72%;--sr:14deg;--bx:62%;--bh:42%}
.kontakt-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.kontakt h2{font-size:clamp(2.4rem,4.4vw,4.6rem);max-width:15ch}

/* Kontaktformular: Linien statt Kästen, Rot nur für Fokus und Auswahl */
.anfrage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 26px;padding-top:8px}
.anfrage .breit{grid-column:1/-1}
.feld{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0;border:0}
.feld>label,.feld>legend{padding:0;font:400 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--grau)}
.feld>legend{margin-bottom:14px}
.feld input,.feld textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid rgba(244,240,234,.28);border-radius:0;background:transparent;color:var(--ink);font:300 1.25rem/1.4 var(--serif);transition:border-color .4s var(--ease)}
.feld textarea{min-height:120px;resize:vertical}
.feld input:focus,.feld textarea:focus{outline:none;border-bottom-color:var(--rot)}
.feld ::placeholder{color:rgba(244,240,234,.32)}
.feld [aria-invalid="true"]{border-bottom-color:#FF6B6B}
.feld-fehler{margin:0;font-size:.84rem;color:#FF8A8A}
.feld-fehler:empty{display:none}
.wahl{display:flex;flex-wrap:wrap;gap:10px}
.wahl label{position:relative;display:inline-flex}
.wahl input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.wahl span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--linie);border-radius:999px;font:400 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--grau);transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.wahl input:checked+span{border-color:var(--rot);background:rgba(255,46,46,.12);color:var(--ink)}
.wahl input:focus-visible+span{outline:1px solid var(--rot);outline-offset:3px}
.zustimmung{display:flex;align-items:flex-start;gap:14px;font-size:.9rem;line-height:1.55;color:var(--grau)}
.zustimmung input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--rot)}
.anfrage-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.anfrage-fuss .knopf:disabled{opacity:.5;cursor:progress}
.anfrage-status{margin:0;max-width:46ch;font-size:.92rem;color:var(--grau)}
.anfrage-status.ok{color:var(--ink)}
.anfrage-status.fehler{color:#FF8A8A}
.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding:26px var(--rand) 34px;border-top:1px solid rgba(241,235,227,.08);font:400 11px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
.fuss nav{display:flex;gap:24px}
.fuss a{text-decoration:none}

/* ---- Fallstudie: Das Fenster öffnet sich zur ganzen Seite ---------- */
.fall{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--nacht);color:var(--ink);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.fall::backdrop{background:transparent}
.fall-buehne{position:relative;display:grid;align-content:end;min-height:100svh;padding:120px var(--rand) clamp(44px,8vh,90px)}
.fall-bild{position:absolute;inset:0;overflow:hidden;isolation:isolate}   /* eigene Ebene: Die Verlaufsschichten bleiben im Bild und legen sich nie über den Titel */
.fall-bild>img,.fall-bild>canvas,.fall-bild>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fall-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.35),rgba(10,10,9,0) 30%,rgba(10,10,9,.5) 62%,var(--nacht));opacity:calc(var(--deck,1) * (1 - var(--welt-an,0)))}
.fall.bewegt{--deck:0}   /* während das Bild aufgeht, liegt kein Verlauf darüber */
.fall-titel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:1100px}
.fall-titel h2{font-size:clamp(2.8rem,7.2vw,7.4rem);line-height:.95;letter-spacing:-.015em;text-wrap:balance}
.fall-claim{margin:0;font:italic 300 clamp(1.25rem,2.1vw,1.8rem)/1.3 var(--serif);color:rgba(244,240,234,.84)}
.fall-scroll{position:absolute;right:var(--rand);bottom:clamp(44px,8vh,90px);margin:0}
.fall-inhalt{display:grid;gap:clamp(64px,8vw,120px);padding:clamp(64px,9vw,130px) var(--rand) clamp(90px,10vw,150px)}
.fall-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:26px 32px;margin:0;padding-top:28px;border-top:1px solid var(--linie)}
.fall-fakten div{display:flex;flex-direction:column;gap:10px}
.fall-fakten dt{font:400 10.5px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--grau)}
.fall-fakten dd{margin:0;font-size:1.02rem;line-height:1.45}
.fall-kapitel{display:grid;gap:clamp(44px,6vw,80px)}
.fall-kapitel section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:18px 48px}
.fall-kapitel h3{margin:0;padding-top:.7em;font:400 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--rot)}
.fall-kapitel p{margin:0;max-width:36ch;font:300 clamp(1.35rem,2.3vw,2rem)/1.35 var(--serif);text-wrap:pretty}
.fall-ergebnis{display:grid;gap:18px;padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--rot)}
.fall-ergebnis p:last-child{margin:0;max-width:24ch;font:300 clamp(1.8rem,3.6vw,3.2rem)/1.15 var(--serif);text-wrap:balance}
.fall-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:34px;border-top:1px solid var(--linie)}
.fall-fuss .link{border:0;background:none;color:var(--ink);cursor:pointer;text-align:left}
.fall-zu{position:fixed;top:22px;right:var(--rand);z-index:2;display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid rgba(244,240,234,.45);border-radius:999px;background:rgba(10,10,9,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font:400 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:background .4s var(--ease),border-color .4s var(--ease)}
.fall-zu:hover,.fall-zu:focus-visible{border-color:var(--rot);background:var(--rot)}
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.38))}

/* ---- Bewegung ------------------------------------------------------ */
@keyframes hoch{from{opacity:0;transform:translateY(24px);filter:blur(6px)}}
@keyframes schwenk{from{opacity:0;transform:rotateY(-46deg) rotateX(4deg) translateX(70px)}}
@keyframes auf{from{opacity:0;transform:translateY(16px) scale(.97)}}
/* Beim Scrollen ohne Unschärfe: Weichzeichnen kostet bei jedem Bild Rechenzeit, Deckkraft und Lage nicht */
@keyframes auftauchen{from{opacity:0;transform:translateY(24px)}}
.hero-text>*{animation:hoch 1.1s var(--ease) backwards}
.hero-text>:nth-child(2){animation-delay:.08s}
.hero-text>:nth-child(3){animation-delay:.18s}
.hero-text>:nth-child(4){animation-delay:.28s}
.glas{animation:schwenk 1.7s var(--ease) .15s backwards}
@supports (animation-timeline:view()){
  .auftritt{animation:auftauchen linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
}
/* Ohne Scroll-Animationen (Safari, Firefox): dasselbe Auftauchen per Klasse — nur wenn main.js läuft (html.auftritt-js) */
html.auftritt-js .auftritt{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
html.auftritt-js .auftritt.da{opacity:1;transform:none}

/* ---- Schmale Bildschirme ------------------------------------------- */
@media (max-width:980px){
  .hero-stage{grid-template-columns:minmax(0,1fr);padding-top:130px;gap:64px}
  .hero.webgl .hero-stage::before{background:linear-gradient(180deg,rgba(10,10,9,.9),rgba(10,10,9,.5) 45%,transparent 72%)}
  .hero-buehne{perspective-origin:50% 45%}
  .hero.webgl .hero-stage{align-content:start}
  .signatur{display:none}
  .leistungen,.ueber{grid-template-columns:minmax(0,1fr)}
  .leistungen-kopf{position:static}
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karussell{--w:min(60vw,340px)}
  .bogen-nav{width:86vw}
  .portrait{--pw:min(300px,70vw)}
  .kontakt{grid-template-columns:minmax(0,1fr)}
  .fall-kapitel section{grid-template-columns:minmax(0,1fr);gap:14px}
}
/* Leistungen: Text links, Website rechts bis 760 px — auch im halben Bildschirm. Darunter (Handy) klebt die
   Website oben: ganz oben ohne Kopfzeile, sonst direkt darunter, höchstens knapp halb so hoch wie der Bildschirm.
   Ein dunkler Streifen über die volle Breite deckt den Text dahinter, nach unten läuft er weich aus. */
@media (max-width:760px){
  .leistungen-raster{grid-template-columns:minmax(0,1fr)}
  .generator{top:calc(var(--kopf,64px) + 4px);z-index:2;order:-1;width:min(100%,calc((46svh - 44px) * 16 / 11));margin-inline:auto;padding-block:10px;transition:top .7s var(--ease)}
  html:has(.kopf.weg) .generator{top:0}
  .generator::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:calc(-1 * (var(--kopf,64px) + 6px));bottom:0;background:var(--nacht);pointer-events:none}
  .generator::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:100%;height:48px;background:linear-gradient(var(--nacht),rgba(10,10,9,0));pointer-events:none}
  .dienst{min-height:52vh}
}
@media (max-width:640px){
  .nav a:not([href="#kontakt"]){display:none}
  .dienst{grid-template-columns:minmax(0,1fr)}
  .dienst .umfang{grid-column:1;grid-row:auto;text-align:left}
  /* Hero am Handy: Text oben und kompakt, darunter bleibt Platz für das ganze Portal */
  .hero-stage{padding-top:calc(var(--kopf,64px) + 20px)}
  .hero-text{gap:14px}
  .hero-text .nur-breit{display:none}
  .hero-text h1{font-size:clamp(2rem,9.4vw,2.6rem)}
  .hero-text .unter{font-size:.98rem}
  .aktionen{gap:10px 22px;margin-top:2px}
  .aktionen .knopf{min-height:50px;padding:0 20px;gap:14px}
  /* Tempel am Handy: Überschrift oben, der lange Text tritt zurück, sobald der Bau beginnt (--tp aus tempel.js) */
  .tempel-text{top:calc(var(--kopf,64px) + 14px);gap:14px}
  .tempel-text h2{font-size:clamp(1.75rem,7.8vw,2.2rem)}
  .tempel-text p:last-child{font-size:.94rem;line-height:1.55;opacity:calc(1 - (var(--tp,0) - .1) * 6)}
  .tempel-text::before{opacity:max(.35,calc(1 - (var(--tp,0) - .1) * 3))}
  .fakten{flex-wrap:nowrap;gap:22px}
  .fakten dd{font-size:1.25rem}
  .fakten dt{font-size:9px;letter-spacing:.18em}
  .tempel-fuss{gap:10px;bottom:calc(100lvh - 100svh + max(18px,env(safe-area-inset-bottom)))}
  .tempel-fuss{flex-direction:column;align-items:flex-start}
  .anfrage{grid-template-columns:minmax(0,1fr)}
  .fall-scroll{display:none}
  .fall-zu{top:14px}
}
/* Hinweise nur für das passende Gerät: Maus oder Finger */
@media (hover:none){.nur-maus{display:none}}
@media (hover:hover){.nur-touch{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .fenster .scheibe{opacity:0}
}

/* ---- Fallstudie in der Welt des Projekts: Farben aus dem Shop selbst, weich überblendet ---------- */
@property --fall-grund{syntax:'<color>';inherits:true;initial-value:#0A0A09}
@property --fall-text{syntax:'<color>';inherits:true;initial-value:#F4F0EA}
@property --fall-leise{syntax:'<color>';inherits:true;initial-value:#A7A099}
@property --fall-akzent{syntax:'<color>';inherits:true;initial-value:#FF2E2E}
/* Zwei Regler statt zweier eigener Blenden: --welt-an führt die Farbwelt herein, --deck den Verlauf über dem Bild.
   Beide laufen in derselben Übergangsliste wie die Farben — so können Verlauf und Schriftfarbe nie auseinanderlaufen. */
@property --welt-an{syntax:'<number>';inherits:true;initial-value:0}
@property --deck{syntax:'<number>';inherits:true;initial-value:1}
.fall{--rot:var(--fall-akzent,#FF2E2E);--ink:var(--fall-text,#F4F0EA);--grau:var(--fall-leise,#A7A099);--linie:color-mix(in srgb,var(--fall-text,#F4F0EA) 14%,transparent);background:var(--fall-grund,#0A0A09);color:var(--fall-text,#F4F0EA);transition:--fall-grund .7s var(--ease),--fall-text .7s var(--ease),--fall-leise .7s var(--ease),--fall-akzent .7s var(--ease),--welt-an .7s var(--ease),--deck .5s var(--ease);--welt-an:0;--deck:1}
.fall.in-welt{--fall-grund:var(--welt-grund,#0A0A09);--fall-text:var(--welt-text,#F4F0EA);--fall-leise:var(--welt-leise,#A7A099);--fall-akzent:var(--welt-akzent,#FF2E2E);--welt-an:1}
/* Der Verlauf über dem Bild wechselt die Farbwelt nicht mehr als Farbe — dafür müsste der Browser den ganzen Bildschirm
   Bild für Bild neu zeichnen, und genau das waren beim Öffnen die längsten Hänger. Stattdessen liegt die fertige Farbwelt
   als zweite Schicht darüber, und beide blenden nur noch ineinander: reine Deckkraft, das erledigt die Grafikkarte. */
.fall-bild::before{content:"";position:absolute;inset:0;z-index:1;opacity:calc(var(--deck,1) * var(--welt-an,0));background:linear-gradient(180deg,color-mix(in srgb,var(--welt-grund,#0A0A09) 35%,transparent),transparent 30%,color-mix(in srgb,var(--welt-grund,#0A0A09) 50%,transparent) 62%,var(--welt-grund,#0A0A09))}
.fall-claim{color:color-mix(in srgb,var(--fall-text) 84%,transparent)}
.fall-zu{border-color:color-mix(in srgb,var(--fall-text) 45%,transparent);background:color-mix(in srgb,var(--fall-grund) 45%,transparent);color:var(--fall-text)}
.fall-zu:hover,.fall-zu:focus-visible{border-color:var(--fall-akzent);background:var(--fall-akzent);color:var(--fall-grund)}

/* ---- Schaufenster: der echte Shop im Rahmen — derselbe Rahmen für jedes Projekt ----------------- */
.fall-schau{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:clamp(24px,4vw,64px);height:250vh;content-visibility:auto;contain-intrinsic-size:auto 250vh}
.fall-schau[hidden]{display:none}
.schau-browser{position:sticky;top:12vh;margin:0;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--fall-text) 7%,var(--fall-grund));box-shadow:0 0 0 1px color-mix(in srgb,var(--fall-text) 14%,transparent),0 40px 90px -30px rgba(0,0,0,.5)}
.schau-leiste{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-bottom:1px solid color-mix(in srgb,var(--fall-text) 12%,transparent)}
.schau-leiste i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--fall-text) 24%,transparent)}
.schau-leiste span{margin-left:12px;padding:4px 14px;border-radius:999px;background:color-mix(in srgb,var(--fall-text) 7%,transparent);font:400 11px/1.4 var(--sans);letter-spacing:.06em;color:var(--fall-leise)}
.schau-fenster{position:relative;overflow:hidden}
.schau-browser .schau-fenster{aspect-ratio:16/10;max-height:72vh}
.schau-fenster img{display:block;width:100%;height:auto;will-change:transform}
.schau-handy{position:sticky;top:calc(12vh + 48px);margin:0;width:clamp(170px,19vw,260px);padding:9px;border-radius:34px;background:#111;box-shadow:0 0 0 1px color-mix(in srgb,var(--fall-text) 18%,transparent),0 40px 80px -30px rgba(0,0,0,.55)}
.schau-handy .schau-fenster{aspect-ratio:9/19.5;border-radius:26px}
.schau-live{position:absolute;left:0;bottom:0}
@media (max-width:760px){
  .fall-schau{grid-template-columns:minmax(0,1fr);height:auto;gap:28px;content-visibility:visible}   /* am Handy wächst der Abschnitt mit dem Inhalt */
  .schau-browser,.schau-handy{position:relative;top:0}
  .schau-handy{justify-self:center}
  .schau-live{position:static}
}
@media (prefers-reduced-motion:reduce){.fall{transition:none}}
/* Titelbild aus dem Shop: Nach dem Aufgehen tritt es weich zurück, damit der Titel frei steht — scharf zeigt es das Schaufenster */
.fall-bild>img{transition:filter .9s var(--ease),transform .9s var(--ease)}
.fall.in-welt.mit-medien .fall-bild>img{filter:blur(8px) saturate(.85);transform:scale(1.04)}
.fall.mit-medien .fall-bild::after{background:linear-gradient(180deg,rgba(10,10,9,.55),rgba(10,10,9,.4) 35%,rgba(10,10,9,.8) 66%,var(--nacht))}
.fall.mit-medien .fall-bild::before{background:linear-gradient(180deg,color-mix(in srgb,var(--welt-grund,#0A0A09) 55%,transparent),color-mix(in srgb,var(--welt-grund,#0A0A09) 40%,transparent) 35%,color-mix(in srgb,var(--welt-grund,#0A0A09) 80%,transparent) 66%,var(--welt-grund,#0A0A09))}
.fall-schau.ohne-handy{grid-template-columns:minmax(0,1fr)}
.fall-schau.ohne-handy .schau-handy{display:none}

/* Eintauchen: Hinter dem Plakat aus der Galerie erscheint der echte Auftritt — zusammen mit der Farbwelt */
.fall-held{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(8px) saturate(.85);transform:scale(1.04);transition:opacity .7s var(--ease)}
.fall.in-welt .fall-held{opacity:1}

/* ---- Rechtliches: Impressum und Datenschutz — ruhige Leseseiten im Look der Seite ---------------- */
.recht-kopf{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px var(--rand)}
.recht{display:grid;gap:clamp(28px,4vw,44px);max-width:760px;margin:0 auto;padding:clamp(40px,8vw,100px) var(--rand) clamp(80px,10vw,140px)}
.recht h1{margin:0;font:370 clamp(2.6rem,6vw,4.6rem)/1 var(--serif);letter-spacing:-.015em;hyphens:manual}
.recht section{display:grid;gap:10px;padding-top:22px;border-top:1px solid var(--linie)}
.recht h2{margin:0;font:400 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--rot)}
.recht p,.recht li{margin:0;max-width:62ch;font-size:1.02rem;line-height:1.7;color:rgba(241,235,227,.86)}
.recht ul{display:grid;gap:6px;margin:0;padding-left:1.1em}
.recht a{color:var(--ink)}
.recht-kurz{font:300 clamp(1.2rem,2vw,1.5rem)/1.45 var(--serif)!important;color:var(--ink)!important}
.recht-stand{color:var(--grau)!important}
.platzhalter{padding:0 .3em;border-radius:4px;background:rgba(255,46,46,.14);color:#FFB3AD;box-shadow:inset 0 -1px 0 rgba(255,46,46,.6)}

/* ---- Schneller Seitenstart ----------------------------------------------------------------------------------
   Abschnitte weiter unten zeichnet der Browser erst, wenn sie in die Nähe kommen — bis zur ersten Bedienung.
   Dann setzt main.js html.voll: Ab da ist alles gezeichnet, und Sprünge zu #kontakt usw. landen genau. */
html:not(.voll) :is(.arbeiten,.leistungen,.ueber,.kontakt){content-visibility:auto;contain-intrinsic-size:auto 1200px}
html:not(.voll) .tempel{content-visibility:auto}
html:not(.voll) .fuss{content-visibility:auto;contain-intrinsic-size:auto 90px}
/* Ohne echte Grafikkarte (html.ohne-3d, siehe Skript im Hero): ruhige Ersatzbilder, sofort sichtbar — kein langer Auftritt,
   und der Tempel-Abschnitt wird nicht zur langen leeren Strecke */
html.ohne-3d .glas{animation:none}
html.ohne-3d .tempel{height:100svh}
html.ohne-3d .tempel-ohne{display:block}
html.ohne-3d .fortschritt{display:none}
/* Mit 3D nie das Karussell aus Glasfenstern zeigen — auch nicht, solange die 3D-Galerie noch lädt: Dort bleibt es dunkel,
   bis sie weich aufblendet. Scheitert die 3D-Galerie, setzt main.js .ersatz und die Glasfenster erscheinen doch */
html.mit-3d .karussell:not(.webgl):not(.ersatz) .fenster{visibility:hidden}
/* Am Handy kostet ein Weichzeichner über dem ganzen Bildschirm am meisten Zeit — dort reicht ein kleinerer Radius,
   sichtbar ist der Unterschied bei dieser Bildgröße nicht. */
@media (max-width:860px){.fall-held,.fall.in-welt.mit-medien .fall-bild>img{filter:blur(5px) saturate(.85)}}