@font-face{font-family:"Anton";src:url(/assets/fonts/anton.woff2?v=3b3637db) format("woff2");font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-400.woff2?v=3b3637db) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-600.woff2?v=3b3637db) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-800.woff2?v=3b3637db) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Caveat";src:url(/assets/fonts/caveat.woff2?v=3b3637db) format("woff2");font-display:swap}
@font-face{font-family:"Mono";src:url(/assets/fonts/mono.woff2?v=3b3637db) format("woff2");font-display:swap}

:root{
  --nacht:#070708;--schwarz:#0b0b0c;--kohle:#141418;--kobalt:#1546e0;--kobalt-tief:#0d2fa3;--kobalt-hell:#5b80ff;
  --gelb:#e9f502;--licht:#ffc85a;--papier:#ece6d9;--papier-dunkel:#d9d1c0;--grau:#a3a3ad;--text:#f3f1ec;
  --rand:clamp(16px,4vw,56px);--breit:1320px;
  --anton:"Anton",Impact,"Arial Narrow",sans-serif;--sans:"Archivo",system-ui,sans-serif;--hand:"Caveat",cursive;--mono:"Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--nacht);color:var(--text);font:400 18px/1.55 var(--sans);overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gelb);outline-offset:3px;border-radius:2px}
.sprung{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--gelb);color:#000;padding:12px 18px;font-weight:800}
.sprung:focus{left:12px}
.wrap{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
.kicker{font:400 14px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.hand{font-family:var(--hand);font-weight:600}
.laut{font-family:var(--anton);font-weight:400;text-transform:uppercase;line-height:.94;letter-spacing:.005em;margin:0}
h1.laut{font-size:clamp(54px,8vw,128px)}
h2.laut{font-size:clamp(38px,5.3vw,88px)}
h3.laut{font-size:clamp(28px,3.2vw,46px);line-height:1}
.lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5;max-width:40ch;color:#dcdad4}
p{margin:0 0 1em}
.gelb{color:var(--gelb)}.licht{color:var(--licht)}.blau{color:var(--kobalt-hell)}

/* ---------- Kopf ---------- */
.kopf{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:14px var(--rand);pointer-events:none;transition:background .4s,backdrop-filter .4s}
.kopf>*{pointer-events:auto}
.kopf.dunkel{background:linear-gradient(rgba(7,7,8,.92),rgba(7,7,8,.7));backdrop-filter:blur(8px)}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none}
.marke svg{width:40px;height:44px}
.marke b{font:400 26px/1 var(--anton);letter-spacing:.04em;text-transform:uppercase}
.kopf-rechts{display:flex;align-items:center;gap:10px}
.klingel-klein{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 8px;background:#1b1b20;border:1px solid #2c2c33;color:var(--text);text-decoration:none;font:600 15px var(--sans)}
.klingel-klein i{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffbd0,var(--gelb) 45%,#9aa300);box-shadow:0 0 0 3px #2a2a30,0 0 14px rgba(233,245,2,.5)}
.raeume-knopf{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 10px;background:var(--kobalt);color:#fff;border:0;cursor:pointer;font:600 15px var(--sans)}
.raeume-knopf svg{width:26px;height:30px}
.raeume-knopf .fe{fill:#0b0b0c;transition:fill .3s}
.raeume-knopf:hover .fe,.raeume-knopf[aria-expanded=true] .fe{fill:var(--licht)}
.raeume-knopf:hover .fe:nth-child(3){transition-delay:.06s}.raeume-knopf:hover .fe:nth-child(4){transition-delay:.12s}.raeume-knopf:hover .fe:nth-child(5){transition-delay:.18s}

/* ---------- Menü als Querschnitt ---------- */
.querschnitt{position:fixed;inset:0;z-index:80;background:rgba(7,7,8,.97);display:grid;place-items:center;padding:80px var(--rand) 30px;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;overflow:auto}
.querschnitt.offen{opacity:1;visibility:visible}
.qs-haus{width:min(720px,100%);position:relative}
.qs-dach{height:clamp(70px,12vw,120px);background:#151517;clip-path:polygon(50% 0,100% 100%,0 100%);margin:0 -14px;position:relative}
.qs-etage{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:16px;padding:14px 20px;border-left:10px solid var(--kobalt);border-right:10px solid var(--kobalt);border-bottom:6px solid var(--kobalt-tief);background:#0e0e12;text-decoration:none;position:relative;overflow:hidden;transition:background .35s}
.qs-etage::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 140% at 85% 50%,rgba(255,200,90,.32),transparent 70%);opacity:0;transition:opacity .35s}
.qs-etage:hover::before,.qs-etage:focus-visible::before,.qs-etage[aria-current=page]::before{opacity:1}
.qs-etage .stock{font:400 14px var(--mono);color:var(--grau)}
.qs-etage .raum{font:600 25px/1 var(--hand);color:var(--licht);display:block}
.qs-etage .sparte{font:400 clamp(24px,3.6vw,36px)/1 var(--anton);text-transform:uppercase;display:block;margin-top:4px}
.qs-etage .fensterchen{width:46px;height:38px;background:#1a1a20;border:4px solid #060608;transition:background .35s,box-shadow .35s}
.qs-etage:hover .fensterchen,.qs-etage[aria-current=page] .fensterchen{background:var(--licht);box-shadow:0 0 26px rgba(255,200,90,.65)}
.qs-tuer{display:flex;justify-content:center;gap:16px;padding:16px;background:#0e0e12;border:10px solid var(--kobalt);border-top:0}
.qs-tuer a{display:flex;align-items:center;gap:10px;padding:12px 18px;text-decoration:none;font:600 17px var(--sans);background:#1b1b20}
.qs-tuer a.tuer{background:var(--gelb);color:#000}
.qs-zu{position:fixed;top:14px;right:var(--rand);height:46px;padding:0 16px;background:#1b1b20;color:#fff;border:1px solid #2c2c33;font:600 15px var(--sans);cursor:pointer;z-index:81}
.qs-unten{margin-top:18px;text-align:center;color:var(--grau);font-size:15px}
.qs-unten a{color:var(--text)}

/* ---------- Türanhänger (Hauptknopf) ---------- */
.anhaenger{display:inline-flex;align-items:center;gap:14px;position:relative;padding:16px 26px 16px 46px;background:var(--gelb);color:#0b0b0c;text-decoration:none;font:800 18px/1.1 var(--sans);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-radius:4px 4px 4px 4px;transition:transform .25s}
.anhaenger::before{content:"";position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 3px rgba(0,0,0,.25)}
.anhaenger:hover{transform:rotate(-2.5deg) translateY(-2px)}
.anhaenger.blau{background:var(--kobalt);color:#fff}
.anhaenger.papier{background:var(--papier);color:#0b0b0c}
.anhaenger.schwarz{background:var(--schwarz);color:#fff}
.anhaenger.schwarz::before{background:var(--gelb)}
.anhaenger{flex-wrap:wrap;row-gap:2px}
.anhaenger small{flex-basis:100%;padding-left:0;display:block;font:600 15px var(--hand);font-size:20px;line-height:1;margin-top:2px;opacity:.75}
.zeile-knoepfe{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}
.klingel-gross{display:inline-flex;align-items:center;gap:14px;padding:12px 20px 12px 12px;background:#d8d2c4;color:#111;text-decoration:none;font:600 17px var(--sans);border:1px solid #b7af9d;box-shadow:inset 0 1px 0 #fff}
.klingel-gross i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fffbd0,var(--gelb) 45%,#98a100);box-shadow:0 0 0 4px #bdb6a5,0 0 0 5px #a39b88}
.klingel-gross:hover i{box-shadow:0 0 0 4px #bdb6a5,0 0 0 5px #a39b88,0 0 22px rgba(233,245,2,.85)}

/* ---------- Bühne mit Haus ---------- */
.buehne{position:relative;height:700vh}
.buehne-fix{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#haus3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.haus-ersatz{position:absolute;inset:0;background:#070708 url(/assets/img/haus_quer.webp?v=3b3637db) 72% 60%/cover no-repeat;display:none}
.kein3d .haus-ersatz{display:block}
.eingang{position:absolute;left:var(--rand);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:min(780px,58vw);padding-top:60px;transition:opacity .6s,transform .6s}
.eingang.weg{opacity:0;transform:translateY(-30px);pointer-events:none}
.eingang .kicker{margin-bottom:22px;color:#c9c9d1}
.eingang h1>span{display:block}.eingang h1 .licht{display:inline-block}
.eingang h1 .licht{text-shadow:0 0 40px rgba(255,200,90,.45)}
.eingang .hand{font-size:clamp(26px,2.4vw,34px);color:var(--licht);margin:18px 0 10px;transform:rotate(-2deg);transform-origin:left}
.scrollzeichen{position:absolute;right:var(--rand);bottom:22px;font:400 14px var(--mono);color:var(--grau);display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.scrollzeichen i{width:2px;height:42px;background:linear-gradient(var(--licht),transparent);animation:tropf 2s infinite}
@keyframes tropf{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Raumtafeln */
.raum-tafel{position:absolute;left:var(--rand);bottom:clamp(24px,7vh,80px);width:min(560px,44vw);opacity:0;transform:translateY(40px);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.raum-tafel.da{opacity:1;transform:none;pointer-events:auto}
.fensterrahmen{position:relative;background:#050506;padding:12px;border:3px solid #1d1d23;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px #000,0 0 70px rgba(255,200,90,.16)}
.fensterrahmen video,.fensterrahmen img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#111}
.fensterbank{height:14px;margin:0 -22px;background:linear-gradient(#2a2a31,#121216);box-shadow:0 8px 20px rgba(0,0,0,.6)}
.raum-text{background:rgba(7,7,8,.84);backdrop-filter:blur(6px);padding:18px 22px 22px;border-left:4px solid var(--licht)}
.raum-text .hand{font-size:26px;color:var(--licht);line-height:1}
.raum-text h2{font:400 clamp(30px,3.4vw,50px)/1 var(--anton);text-transform:uppercase;margin:6px 0 10px}
.raum-text p{font-size:17px;color:#d4d2cc;margin:0 0 16px}
.raum-text .marke-klein{font:400 14px var(--mono);letter-spacing:.1em;color:var(--grau);text-transform:uppercase}

/* Fahrstuhl-Anzeige */
.fahrstuhl{position:absolute;right:var(--rand);top:96px;width:150px;opacity:0;transition:opacity .5s}
.fahrstuhl.da{opacity:1}
.fahrstuhl svg{width:100%;height:auto}
.fahrstuhl .zeiger{transition:transform .9s cubic-bezier(.3,1.4,.4,1);transform-origin:75px 82px}
.fahrstuhl text{font:400 13px var(--mono);fill:#8c8c96}
.fahrstuhl text.an{fill:var(--licht)}
.fahrstuhl .unter{font:600 20px var(--hand);color:var(--licht);text-align:center;margin-top:2px}

/* ---------- Hausnummern ---------- */
.hausnummern{background:var(--kobalt);padding:clamp(64px,9vw,120px) 0;position:relative;overflow:hidden}
.hausnummern .reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,34px)}
.schild{background:linear-gradient(160deg,#1f55ff,#1041d4);border-radius:12px;padding:22px 18px 18px;text-align:center;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 7px #0d36b8,0 18px 40px rgba(0,0,0,.35);color:#fff;position:relative}
.schild::before,.schild::after{content:"";position:absolute;top:12px;width:9px;height:9px;border-radius:50%;background:#d9dde8;box-shadow:inset -1px -1px 0 #8a90a3}
.schild::before{left:14px}.schild::after{right:14px}
.schild b{display:block;font:400 clamp(52px,7vw,96px)/1 var(--anton)}
.schild span{display:block;font:600 16px/1.3 var(--sans);margin-top:6px}
.hausnummern .unter{margin-top:34px;font:600 clamp(24px,2.6vw,34px)/1.2 var(--hand);color:var(--gelb)}

/* ---------- Die Frage (Papier) ---------- */
.frage{background:var(--papier);color:#111;padding:clamp(80px,11vw,150px) 0;position:relative;overflow:hidden}
.frage .kicker{color:#6b665c}
.frage h2{color:#0b0b0c;max-width:15ch;margin:16px 0 28px}
.frage-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.frage-text p{font-size:clamp(18px,1.5vw,21px);max-width:48ch}
.frage-text .satz{font:400 clamp(30px,3.4vw,52px)/1.16 var(--anton);text-transform:uppercase;margin:30px 0;padding:22px 0;border-top:3px solid #111;border-bottom:3px solid #111}
.frage-text .satz em{font-style:normal;background:var(--gelb);padding:0 .12em}
.brei{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;transform:rotate(1.4deg)}
.brei img{width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(1.05);border-radius:14px}
.brei .riss{grid-column:2/-1;position:relative;margin-top:-26%;margin-right:-8%;z-index:2;transform:rotate(-3deg);opacity:0;transition:opacity .2s}
.brei.auf .riss{opacity:1;animation:reiss 1.1s cubic-bezier(.2,.9,.2,1) both}
.brei .riss img{border-radius:0;aspect-ratio:16/10;clip-path:polygon(0 4%,7% 0,15% 5%,24% 1%,33% 6%,41% 0,52% 4%,61% 1%,72% 5%,81% 0,91% 4%,100% 1%,98% 22%,100% 46%,97% 71%,100% 96%,90% 100%,79% 95%,68% 100%,57% 96%,46% 100%,35% 95%,24% 100%,13% 96%,3% 100%,0 77%,3% 52%,0 27%)}
.brei .riss span{position:absolute;right:6%;bottom:-6px;transform:translateY(100%) rotate(-2deg);font:600 clamp(24px,2.3vw,32px) var(--hand);color:#111}
@keyframes reiss{0%{opacity:0;transform:rotate(-3deg) scale(.6) translateY(40px)}60%{opacity:1;transform:rotate(-5deg) scale(1.04)}100%{transform:rotate(-3deg) scale(1)}}
.brei-etikett{position:absolute;left:-6px;top:-18px;z-index:3;background:#fff;color:#666;font:400 14px var(--mono);padding:6px 10px;transform:rotate(-4deg);box-shadow:0 4px 10px rgba(0,0,0,.12)}

/* ---------- Räume Übersicht ---------- */
.raeume{padding:clamp(80px,10vw,140px) 0;background:var(--nacht)}
.raeume-kopf{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.raeume-kopf p{max-width:40ch;color:#cfcdc6}
.flur{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,28px)}
.flur>*{grid-column:span 2}.flur>:nth-child(1),.flur>:nth-child(2){grid-column:span 3}
.flur>:nth-child(1) .bild,.flur>:nth-child(2) .bild{aspect-ratio:16/9}
.flur>:nth-child(6):last-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center}
.flur>:nth-child(6):last-child .bild{aspect-ratio:21/9}
.kontakt-flur>*{grid-column:span 2!important}
.tuerblatt{position:relative;display:block;text-decoration:none;background:#0f0f13;border:2px solid #1f1f26;overflow:hidden;transition:border-color .3s,transform .4s}
.tuerblatt .bild{aspect-ratio:4/3;overflow:hidden}
.tuerblatt img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .5s;filter:brightness(.8)}
.tuerblatt:hover img,.tuerblatt:focus-visible img{transform:scale(1.06);filter:brightness(1)}
.tuerblatt .schildchen{padding:18px 20px 22px;position:relative}
.tuerblatt .schildchen .hand{color:var(--licht);font-size:24px;line-height:1}
.tuerblatt h3{font:400 clamp(26px,2.6vw,36px)/1 var(--anton);text-transform:uppercase;margin:6px 0 8px}
.tuerblatt p{font-size:16px;color:#bdbbb4;margin:0}
.tuerblatt .klinke{position:absolute;right:18px;top:-24px;width:48px;height:48px;border-radius:50%;background:var(--gelb);display:grid;place-items:center;transform:scale(.8);transition:transform .3s}
.tuerblatt .klinke svg{width:24px}
.tuerblatt:hover .klinke{transform:scale(1) rotate(-20deg)}
.tuerblatt:hover{border-color:var(--licht)}

/* ---------- Familie ---------- */
.familie{background:var(--schwarz);padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.familie-kopf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end;margin-bottom:50px}
.familie-kopf p{color:#d2d0ca;font-size:clamp(18px,1.4vw,20px)}
.koepfe{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.kopfbild{position:relative}
.kopfbild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.kopfbild .tuerschild{position:relative;margin:-26px 10px 0;background:#d8d2c4;color:#111;padding:10px 12px;text-align:center;border:1px solid #b7af9d;box-shadow:0 10px 20px rgba(0,0,0,.4)}
.kopfbild .tuerschild b{display:block;font:400 22px/1 var(--anton);text-transform:uppercase;letter-spacing:.04em}
.kopfbild .tuerschild span{display:block;font:600 19px/1.1 var(--hand);color:#555}
.gruppe{margin-top:56px;position:relative}
.gruppe img{width:100%;aspect-ratio:1672/941;object-fit:cover}
.gruppe .hand{position:absolute;right:4%;bottom:-18px;background:var(--gelb);color:#000;font-size:clamp(24px,2.4vw,34px);padding:6px 16px;transform:rotate(-2deg)}

/* ---------- Welt ---------- */
.welt{position:relative;background:#000;padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.welt-raster{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.welt video{width:118%;margin-left:-9%;aspect-ratio:16/9;object-fit:cover;mask-image:radial-gradient(closest-side,#000 72%,transparent);-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.orte{list-style:none;padding:0;margin:26px 0 0}
.orte li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px dashed #2f2f37}
.orte b{font:400 clamp(26px,2.6vw,38px)/1 var(--anton);text-transform:uppercase;min-width:6.5em}
.orte span{color:#c3c1ba}
.uhrzeit{font:400 14px var(--mono);color:var(--licht);margin-left:auto;white-space:nowrap}

/* ---------- Klingel (gelb) ---------- */
.klingelbrett{background:var(--gelb);color:#0b0b0c;padding:clamp(80px,10vw,140px) 0;position:relative;overflow:hidden}
.klingelbrett h2{max-width:14ch;margin:12px 0 22px}
.klingel-raster{display:grid;grid-template-columns:1fr minmax(300px,460px);gap:clamp(30px,5vw,80px);align-items:center}
.klingel-raster .lead{color:#1b1b1b}
.tableau{background:linear-gradient(160deg,#cfc8b8,#b9b19f);padding:22px;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.25),inset 0 1px 0 #f3eee3;position:relative}
.tableau::before,.tableau::after{content:"";position:absolute;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#8f8878;box-shadow:inset 1px 1px 0 #6f695c}
.tableau::before{top:8px}.tableau::after{bottom:8px}
.knopfzeile{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.12);text-decoration:none;color:#111}
.knopfzeile:last-child{border-bottom:0}
.knopfzeile i{flex:0 0 34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f6f6f6,#cfcfcf 50%,#8d8d8d);box-shadow:0 0 0 4px #a8a090,0 2px 0 5px #8e8676;transition:background .2s,box-shadow .2s}
.knopfzeile:hover i,.knopfzeile:focus-visible i{background:radial-gradient(circle at 40% 35%,#fffbd0,var(--gelb) 45%,#98a100);box-shadow:0 0 0 4px #a8a090,0 2px 0 5px #8e8676,0 0 20px rgba(233,245,2,.9)}
.knopfzeile .namensschild{flex:1;background:#f5f1e6;border:1px solid #a39b88;padding:8px 12px;box-shadow:inset 0 2px 3px rgba(0,0,0,.1)}
.knopfzeile b{display:block;font:600 17px/1.2 var(--sans)}
.knopfzeile span{display:block;font:400 14px/1.3 var(--mono);color:#555}

/* ---------- Fuss ---------- */
.fuss{background:var(--nacht);padding:clamp(70px,8vw,110px) 0 0;border-top:1px solid #1d1d23}
.fuss-gross{font:400 clamp(44px,7vw,120px)/.92 var(--anton);text-transform:uppercase;margin:0 0 50px}
.fuss-raster{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px;padding-bottom:50px}
.fuss h4,.fuss h3.fuss-h{font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin:0 0 14px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0 0 9px}
.fuss a{text-decoration:none;color:#e6e4de;font-size:16px}
.fuss a:hover{color:var(--licht)}
.fuss .marken{display:flex;flex-wrap:wrap;gap:8px 18px;color:#c8c6c0;font-size:16px}
.fuss .klein{font-size:15px;color:#9a9aa3;padding:18px 0;border-top:1px solid #1d1d23;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}
.herzband{background:#0b0b0c;border-top:1px solid #1a1a1f;padding:22px var(--rand) calc(22px + env(safe-area-inset-bottom));display:flex;justify-content:center}
.herzband a{display:flex;align-items:center;gap:14px;text-decoration:none;color:#d9d6cf;font:400 15px var(--sans)}
.herzband img{width:180px;height:auto}

/* ---------- Unterseiten ---------- */
.seitenkopf{position:relative;padding:clamp(120px,15vh,170px) 0 clamp(60px,8vw,110px);overflow:hidden}
.raumkopf{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px 0 clamp(50px,8vh,90px);overflow:hidden;background:#000}
.raumkopf video,.raumkopf .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.raumkopf::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(7,7,8,.94) 0%,rgba(7,7,8,.78) 34%,rgba(7,7,8,.15) 70%,rgba(7,7,8,.35) 100%),linear-gradient(0deg,rgba(7,7,8,.9),transparent 45%)}
.raumkopf::after{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 clamp(10px,1.4vw,18px) #050506,inset 0 0 120px rgba(255,200,90,.12);pointer-events:none}
.raumkopf .wrap{position:relative;z-index:2;width:100%}
.raumkopf .text{max-width:760px}
.raumkopf .kicker{margin-bottom:18px;color:#d2d2da}.raumkopf .kicker b{color:var(--licht);font-weight:400}
.raumkopf h1{margin:0 0 22px;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.raumkopf .lead{color:#e8e6e0}
.raumkopf .schild-raum{position:absolute;right:var(--rand);top:110px;z-index:2;background:#d8d2c4;color:#111;padding:10px 16px;border:1px solid #b7af9d;box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center;transform:rotate(2deg)}
.raumkopf .schild-raum b{display:block;font:400 26px/1 var(--anton);text-transform:uppercase}
.raumkopf .schild-raum span{font:600 20px var(--hand);color:#555}
.seitenkopf-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);align-items:center}
.seitenkopf .kicker{margin-bottom:18px}
.seitenkopf .kicker b{color:var(--licht);font-weight:400}
.seitenkopf h1{margin:0 0 22px}
.seitenkopf .fensterrahmen{transform:rotate(1deg)}
.abschnitt{padding:clamp(70px,9vw,130px) 0}
.abschnitt.papier{background:var(--papier);color:#111}
.abschnitt.papier .kicker{color:#6b665c}
.abschnitt.blau{background:var(--kobalt);color:#fff}
.abschnitt.blau .kicker{color:#cfd9ff}
.abschnitt.kohle{background:var(--kohle)}
.abschnitt-kopf{max-width:900px;margin-bottom:46px}
.abschnitt-kopf h2{margin:14px 0 18px}
.abschnitt-kopf p{font-size:clamp(18px,1.5vw,21px);max-width:52ch}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.bild-weich{transform:rotate(-1.5deg)}
.bild-weich img{width:100%;clip-path:polygon(0 3%,8% 0,17% 4%,27% 1%,38% 5%,49% 0,60% 4%,71% 1%,82% 5%,92% 0,100% 3%,98% 30%,100% 58%,97% 84%,100% 97%,90% 100%,79% 96%,67% 100%,55% 96%,43% 100%,31% 95%,19% 100%,8% 96%,0 100%,2% 70%,0 42%,3% 18%);box-shadow:0 20px 40px rgba(0,0,0,.3)}

/* Filmklappen (Werbung) */
.klappen{display:block;border-top:0}
.drehplan-kopf{height:58px;background:repeating-linear-gradient(-45deg,#0b0b0c 0 26px,#f3f1ec 26px 52px);transform-origin:0 100%;transform:rotate(-4deg);margin-bottom:-6px}
.szene{display:grid;grid-template-columns:150px minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,50px);padding:34px 0;border-bottom:2px solid #26262d;align-items:start;position:relative}
.szene:first-of-type{border-top:6px solid #f3f1ec}
.szene .nr{font:400 clamp(70px,8vw,120px)/.8 var(--anton);color:transparent;-webkit-text-stroke:2px var(--gelb);transition:color .4s}
.szene:hover .nr{color:var(--gelb)}
.szene .art{font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grau);display:block;margin-bottom:8px}
.szene h3{font:400 clamp(28px,3vw,46px)/1 var(--anton);text-transform:uppercase;margin:0 0 12px}
.szene p{color:#cbc9c2;margin:0;font-size:18px}
.szene ul{margin:6px 0 0;padding:0;list-style:none}
.szene li{padding:8px 0 8px 28px;position:relative;font-size:17px;color:#e4e2dc;border-bottom:1px dashed #2a2a31}
.szene li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:3px;background:var(--gelb);transform:rotate(-8deg)}
.klappe{background:#111114;border:2px solid #222229;position:relative}
.klappe-kopf{height:46px;background:repeating-linear-gradient(-45deg,#0b0b0c 0 22px,#f3f1ec 22px 44px);position:relative;transform-origin:0 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.klappe:hover .klappe-kopf{transform:rotate(-7deg)}
.klappe-leiste{display:flex;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #2a2a31;font:400 14px var(--mono);color:var(--grau);text-transform:uppercase;letter-spacing:.1em}
.klappe-leiste b{color:var(--gelb);font-weight:400}
.klappe-inhalt{padding:22px 22px 26px}
.klappe-inhalt h3{font:400 clamp(28px,2.8vw,40px)/1 var(--anton);text-transform:uppercase;margin:0 0 12px}
.klappe-inhalt p{color:#cbc9c2;margin:0 0 12px;font-size:17px}
.klappe-inhalt ul{margin:0;padding:0;list-style:none}
.klappe-inhalt li{padding:6px 0 6px 26px;position:relative;font-size:16px;color:#e4e2dc}
.klappe-inhalt li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:3px;background:var(--gelb);transform:rotate(-8deg)}

/* Bauplan (Software) */
.bauplan{background:var(--kobalt-tief);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;padding:clamp(70px,9vw,130px) 0;color:#fff}
.bauteile{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid rgba(255,255,255,.55)}
.bauteil{padding:26px 24px 28px;border:1px dashed rgba(255,255,255,.35);position:relative}
.bauteil .pos{font:400 14px var(--mono);color:#cfd9ff;letter-spacing:.1em}
.bauteil h3{font:400 clamp(26px,2.4vw,34px)/1 var(--anton);text-transform:uppercase;margin:10px 0}
.bauteil p{color:#dfe6ff;font-size:16px;margin:0}
.bauteil svg{width:54px;height:54px;margin-bottom:12px}
.bauteil svg *{stroke:var(--gelb);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.stempel{display:inline-block;border:3px solid var(--gelb);color:var(--gelb);padding:10px 18px;font:400 clamp(20px,2vw,28px)/1.1 var(--anton);text-transform:uppercase;transform:rotate(-3deg);margin-top:40px}

/* Telefon (KI) */
.gespraech{background:#0f0f13;border:2px solid #23232a;padding:22px;font-size:17px}
.gespraech .zeile{display:flex;gap:12px;margin:0 0 12px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.gespraech.spielt .zeile{opacity:1;transform:none}
.gespraech .wer{flex:0 0 76px;font:400 14px/1.9 var(--mono);color:var(--grau)}
.gespraech .wer.ivi{color:var(--licht)}
.gespraech .ergebnis{font:400 14px var(--mono);color:var(--gelb);border-top:1px dashed #2f2f37;padding-top:12px}
.rufnummer{display:block;text-decoration:none;font:400 clamp(34px,4.4vw,70px)/1 var(--anton);letter-spacing:.02em;color:var(--gelb);white-space:nowrap}
.rufnummer small{display:block;font:400 14px var(--mono);letter-spacing:.12em;color:var(--grau);margin-bottom:6px}
.anzeigetafel{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#000;padding:4px}
.anzeigetafel div{background:#121216;padding:20px 16px}
.anzeigetafel b{display:block;font:400 clamp(36px,4vw,60px)/1 var(--anton);color:var(--licht)}
.anzeigetafel span{display:block;color:#c9c7c0;font-size:15px;margin-top:6px}
.waehlscheibe{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.scheibe{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#15151a 0 30%,#0b0b0e 31% 100%);border:6px solid #23232a}
.scheibe .loch{position:absolute;width:19%;aspect-ratio:1;border-radius:50%;background:var(--papier);color:#000;display:grid;place-items:center;font:400 clamp(22px,2.4vw,32px) var(--anton);transform:translate(-50%,-50%);transition:background .3s,box-shadow .3s;cursor:pointer;border:0}
.scheibe .loch.an{background:var(--gelb);box-shadow:0 0 24px rgba(233,245,2,.7)}
.scheibe .mitte{position:absolute;inset:34%;border-radius:50%;background:var(--kobalt);display:grid;place-items:center;text-align:center;font:600 22px/1 var(--hand);color:#fff;padding:10px}
.schritt-text h3{font:400 clamp(32px,3.4vw,52px)/1 var(--anton);text-transform:uppercase;margin:10px 0 14px}
.tarife{width:100%;border-collapse:collapse;font-size:16px}
.tarife th,.tarife td{text-align:left;padding:14px 12px;border-bottom:1px solid #2a2a31;vertical-align:top}
.tarife thead th{font:400 14px var(--mono);color:var(--grau);text-transform:uppercase;letter-spacing:.08em}
.tarife td b{font:400 30px/1 var(--anton);color:var(--licht);display:block}
.tarife .beliebt{background:rgba(255,200,90,.08)}

/* Protokollbuch (Vertrieb) */
.protokoll{background:#f4efe2;color:#1a1a1a;background-image:repeating-linear-gradient(transparent 0 35px,#c9d3ea 35px 36px);border-left:46px solid #f4efe2;box-shadow:inset 3px 0 0 #e19595,0 30px 60px rgba(0,0,0,.4);padding:34px clamp(18px,3vw,40px) 34px}
.eintrag{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid transparent}
.eintrag .zeit{font:400 14px/36px var(--mono);color:#6a6a6a}
.eintrag h3{font:400 clamp(24px,2.4vw,32px)/1.1 var(--anton);text-transform:uppercase;margin:4px 0 4px}
.eintrag p{margin:0;font-size:16px;color:#333}
.eintrag .haken{font:600 34px/1 var(--hand);color:var(--kobalt)}
.zwei-stunden{background:var(--kobalt);color:#fff;padding:clamp(30px,4vw,56px);position:relative}
.zwei-stunden .laut{font-size:clamp(34px,4vw,62px)}

/* Schaufenster (Designproben) */
.atelierwand{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px) clamp(18px,2.4vw,34px);padding-top:16px}
.probe{display:block;text-decoration:none;position:relative;background:#fff;padding:10px 10px 14px;box-shadow:0 20px 40px rgba(0,0,0,.35);transition:transform .4s}
.probe:nth-child(3n+1){transform:rotate(-1.4deg)}.probe:nth-child(3n+2){transform:rotate(.9deg)}.probe:nth-child(3n){transform:rotate(-.5deg)}
.probe:hover{transform:rotate(0) translateY(-6px)}
.probe::before{content:"";position:absolute;left:50%;top:-12px;width:84px;height:24px;margin-left:-42px;background:rgba(233,245,2,.75);transform:rotate(-3deg)}
.probe img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.probe b{display:block;color:#111;font:400 20px/1.1 var(--anton);text-transform:uppercase;margin-top:10px}
.probe span{display:block;color:#666;font:400 14px var(--mono)}
.angebot-herz{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.preisschild{background:var(--gelb);color:#000;padding:26px 30px;transform:rotate(-3deg);box-shadow:0 20px 40px rgba(0,0,0,.3);text-align:center}
.preisschild b{display:block;font:400 clamp(56px,6vw,96px)/1 var(--anton)}
.preisschild span{display:block;font:600 22px var(--hand)}

/* HoPro */
.schluesselkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.karte{background:linear-gradient(135deg,#f5f1e6,#ddd5c2);color:#111;border-radius:14px;padding:26px 24px;box-shadow:0 20px 40px rgba(0,0,0,.3);position:relative;overflow:hidden}
.karte::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--kobalt);opacity:.9}
.karte .nr{font:400 14px var(--mono);color:#6b665c;letter-spacing:.12em;text-transform:uppercase}
.karte h3{font:400 clamp(26px,2.4vw,34px)/1 var(--anton);text-transform:uppercase;margin:12px 0 10px;max-width:11ch}
.karte p{font-size:16px;color:#333;margin:0}
.karte .streifen{height:8px;background:#111;margin:18px -24px 0}

/* Recht */
.recht{max-width:860px}
.recht h2{font:400 clamp(30px,3vw,44px)/1 var(--anton);text-transform:uppercase;margin:50px 0 16px}
.recht h3{font:600 19px var(--sans);margin:28px 0 8px}
.recht p,.recht li{font-size:17px;color:#d6d4ce}
.schalter-liste{display:grid;gap:14px;max-width:640px}
.schalter{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#121216;border:1px solid #26262d;padding:18px 20px;font:600 18px var(--sans);color:var(--text);cursor:pointer;width:100%;text-align:left}
.schalter i{flex:0 0 58px;height:30px;border-radius:4px;background:#2a2a31;position:relative;transition:background .3s}
.schalter i::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;background:#bbb;transition:transform .3s,background .3s}
.schalter[aria-pressed=true] i{background:var(--kobalt)}
.schalter[aria-pressed=true] i::after{transform:translateX(28px);background:var(--gelb)}

/* Einblenden */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* Barrierefreiheit */
html.kontrast{--grau:#e4e4e8}
html.kontrast body{background:#000}
html.kontrast .lead,html.kontrast p{color:#fff!important}
html.kontrast .abschnitt.papier p,html.kontrast .frage p,html.kontrast .klingelbrett p{color:#000!important}
html.gross{font-size:112.5%}
html.gross body{font-size:21px}
html.ruhig *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.ruhig .rv{opacity:1;transform:none}

/* ---------- Handy ---------- */
@media (max-width:980px){
  .szene{grid-template-columns:110px 1fr}.szene ul{grid-column:2}
  .familie-kopf,.welt-raster,.klingel-raster,.frage-raster,.seitenkopf-raster,.zwei,.waehlscheibe,.angebot-herz{grid-template-columns:1fr}
  .atelierwand,.schluesselkarten,.bauteile{grid-template-columns:1fr 1fr}
  .flur>*,.flur>:nth-child(1),.flur>:nth-child(2){grid-column:span 3}.flur>:nth-child(6):last-child{display:block}
  .koepfe{grid-template-columns:repeat(3,1fr)}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .anzeigetafel{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  body{font-size:18px}
  .szene{grid-template-columns:1fr;gap:10px;padding:26px 0}.szene ul{grid-column:auto}.szene .nr{font-size:64px}
  .raumkopf{align-items:flex-end;padding-top:90px}.raumkopf::before{background:linear-gradient(0deg,rgba(7,7,8,.97) 0%,rgba(7,7,8,.88) 48%,rgba(7,7,8,.2) 78%,rgba(7,7,8,.4) 100%)}
  .raumkopf .schild-raum{top:84px;padding:8px 12px}.raumkopf .schild-raum b{font-size:20px}.raumkopf .schild-raum span{font-size:17px}
  .rufnummer{font-size:clamp(30px,9vw,44px)}
  .marke b{font-size:22px}.marke svg{width:34px;height:38px}
  .klingel-klein span{display:none}.klingel-klein{padding:0 11px}
  .eingang{max-width:none;right:var(--rand);justify-content:flex-start;padding-top:96px}
  .eingang .lead{font-size:18px}
  .eingang .anhaenger small,.scrollzeichen{display:none}
  .eingang::before{content:"";position:absolute;inset:-120px calc(var(--rand) * -1) -40px;z-index:-1;background:linear-gradient(180deg,rgba(7,7,8,.92) 0%,rgba(7,7,8,.82) 62%,rgba(7,7,8,0) 100%)}
  .eingang{bottom:auto;z-index:1}
  .raum-tafel{left:var(--rand);right:var(--rand);width:auto;bottom:16px}
  .raum-text{padding:14px 16px 16px}
  .raum-text p{font-size:16px;margin-bottom:12px}
  .raum-text h2{font-size:30px}
  .fensterrahmen{padding:8px}
  .raum-tafel .fensterrahmen video{aspect-ratio:2.3/1}
  .raum-tafel .raum-text h2{font-size:27px}
  .raumkopf .schild-raum{display:none}
  .fahrstuhl{width:104px;top:72px}
  .fahrstuhl .unter{font-size:17px}
  .hausnummern .reihe{grid-template-columns:1fr 1fr}
  .atelierwand,.schluesselkarten,.bauteile,.klappen{grid-template-columns:1fr}
  .flur{grid-template-columns:1fr}.flur>*,.flur>:nth-child(1),.flur>:nth-child(2){grid-column:1/-1!important}
  .koepfe{grid-template-columns:1fr 1fr}
  .koepfe .kopfbild:last-child{grid-column:1/-1;width:50%;justify-self:center}
  .orte li{flex-wrap:wrap;gap:4px 12px}.orte b{min-width:0;width:100%}.uhrzeit{margin-left:0}
  .fuss-raster{grid-template-columns:1fr}
  .qs-etage{grid-template-columns:44px 1fr auto;padding:12px 14px;gap:12px}
  .qs-etage .fensterchen{width:34px;height:30px}
  .qs-tuer{flex-direction:column}
  .eintrag{grid-template-columns:54px 1fr}
  .eintrag .haken{display:none}
  .orte b{min-width:5em}
  .tarife{font-size:15px}.tarife td b{font-size:24px}
  .tarife th,.tarife td{padding:12px 6px}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{animation:none!important}}

/* Logo: das eine Fenster */
.marke .lg-licht{animation:lichtan 2.4s steps(1) .3s both}
.marke .lg-glanz{animation:lichtan 2.4s steps(1) .3s both}
@keyframes lichtan{0%{opacity:0}12%{opacity:1}16%{opacity:.2}22%{opacity:1}26%{opacity:.4}34%,100%{opacity:1}}
.marke svg{filter:drop-shadow(0 0 0 rgba(255,200,90,0));transition:filter .4s}
.marke:hover svg{filter:drop-shadow(0 0 12px rgba(255,200,90,.55))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Ihr Fenster */
.ihr-fenster{display:flex;gap:0;margin:4px 0 0;max-width:440px}
.ihr-fenster input{flex:1;min-width:0;height:52px;padding:0 14px;border:0;background:#f5f1e6;color:#111;font:600 18px var(--sans);border-radius:0;box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.ihr-fenster button{height:52px;padding:0 18px;border:0;background:var(--gelb);color:#000;font:800 17px var(--sans);cursor:pointer;display:flex;align-items:center;gap:10px}
.ihr-fenster button::before{content:"";width:12px;height:22px;border:2px solid #000;border-radius:3px;background:linear-gradient(#000 0 50%,transparent 50%)}
.ihr-fenster.an button::before{background:linear-gradient(transparent 50%,#000 50%)}
.tuerschild-neu{display:inline-block;margin-top:14px;background:#f5f1e6;color:#111;padding:10px 16px;border:1px solid #a39b88;box-shadow:0 0 30px rgba(255,200,90,.45);transform:rotate(-1.5deg);animation:schild .7s cubic-bezier(.2,1.4,.4,1) both}
.tuerschild-neu .hand{display:block;font-size:20px;color:#555;line-height:1}
.tuerschild-neu b{display:block;font:400 28px/1.1 var(--anton);text-transform:uppercase}
@keyframes schild{from{opacity:0;transform:rotate(-8deg) translateY(16px)}to{opacity:1;transform:rotate(-1.5deg)}}
/* Spät-Zettel */
.eingang .spaet,.spaet{color:#111;display:inline-block;align-self:flex-start;background:var(--gelb);color:#111;font-size:26px;line-height:1;padding:8px 14px 10px;transform:rotate(-3deg);margin:0 0 18px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.spaet[hidden]{display:none}
@media (max-width:700px){.abspielen{left:12px;top:auto;bottom:12px;transform:none;padding:10px 14px;font-size:16px;gap:10px}.abspielen:hover{transform:none}.abspielen small{display:none}.abspielen .dreieck{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}.ihr-fenster input,.ihr-fenster button{height:48px;font-size:17px}.tuerschild-neu b{font-size:22px}.spaet{font-size:22px;margin-bottom:12px}}

/* Kino */
.kino{background:#000}
.leinwand{position:relative;border:clamp(8px,1.2vw,14px) solid #050506;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 80px rgba(255,200,90,.12)}
.leinwand video{width:100%;aspect-ratio:1280/716;background:#000}
.abspielen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 26px 16px 20px;background:var(--gelb);color:#000;border:0;font:800 20px var(--sans);cursor:pointer;transition:transform .25s;max-width:90%}
.abspielen small{flex-basis:100%;font:600 20px var(--hand);padding-left:40px;margin-top:-4px}
.abspielen .dreieck{width:0;height:0;border-left:22px solid #000;border-top:13px solid transparent;border-bottom:13px solid transparent}
.abspielen:hover{transform:translate(-50%,-50%) rotate(-2deg)}
.leinwand.laeuft .abspielen{display:none}

@media (max-width:700px){.abspielen{left:12px;top:auto;bottom:12px;transform:none;padding:10px 14px;font-size:16px;gap:10px}.abspielen:hover{transform:none}.abspielen small{display:none}.abspielen .dreieck{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}}

/* =================== Runde 3 =================== */
button.anhaenger{border:0;cursor:pointer;text-align:left}
button.klingel-gross{cursor:pointer}
.klingel-gross{flex-wrap:wrap;row-gap:0}
.klingel-gross small{font:600 19px/1 var(--hand);opacity:.7;margin-left:2px}
.blau-tief{color:var(--kobalt)}
.abschnitt.schwarz-tief{background:#000}
.gelb{color:var(--gelb)}

/* Die Frage, ganze Haltung */
.frage-kopf h2{max-width:20ch;font-size:clamp(44px,6.6vw,112px)}
.antwort-gross{font:400 clamp(30px,3vw,46px)/1.05 var(--anton)!important;text-transform:uppercase;color:var(--kobalt)}
.drei-saetze{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);margin-top:clamp(50px,6vw,90px);border-top:3px solid #111;padding-top:34px}
.drei-saetze .nr{font:400 64px/1 var(--anton);color:transparent;-webkit-text-stroke:2px var(--kobalt)}
.drei-saetze h3{font:400 clamp(28px,2.8vw,42px)/1 var(--anton);text-transform:uppercase;margin:10px 0 10px}
.drei-saetze p{font-size:18px;color:#2b2b2b;margin:0}
.frage .weiter{margin-top:40px}

/* Sechs Branchen, eine Vorlage */
.vorlage{background:#f1efe9;overflow:hidden}
.vorlage-kopf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:44px}
.vorlage-kopf p{font-size:clamp(18px,1.5vw,21px);max-width:46ch;margin:0}
.vorlage .durch{position:relative;display:inline-block;color:#7a58e8}
.vorlage .durch::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.1em;background:#111;transform:scaleX(0) rotate(-2deg);transform-origin:left;transition:transform .7s .2s}
.vorlage:has(.gewendet) .durch::after{transform:scaleX(1) rotate(-2deg)}
.wendewand{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.wende{perspective:1400px}
.wende .innen{position:relative;aspect-ratio:16/10;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.1,.2,1);transition-delay:calc(var(--i) * .14s)}
.wendewand.gewendet .wende .innen{transform:rotateY(180deg)}
.wende .vorne,.wende .hinten{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block;box-shadow:0 14px 34px rgba(0,0,0,.18);background:#fff}
.wende .hinten{transform:rotateY(180deg);text-decoration:none}
.wende img{width:100%;height:100%;object-fit:cover;object-position:top}
.wende .vorne img{filter:saturate(.85)}
.wende .etikett{position:absolute;left:10px;bottom:10px;background:#fff;color:#777;font:400 14px var(--mono);padding:5px 9px;letter-spacing:.06em}
.wende .hinten .etikett{background:var(--gelb);color:#000;font:400 17px/1 var(--anton);text-transform:uppercase;letter-spacing:.02em;padding:8px 10px}
.wende-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:38px}
.wende-satz{font-size:clamp(28px,2.6vw,38px);margin:0;color:#111}

/* Schaufenster Startseite */
.schaufenster{background:#0b0b0c;padding:clamp(80px,10vw,140px) 0 clamp(70px,8vw,110px);overflow:hidden}
.schaufenster-kopf{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.schaufenster-kopf p{max-width:42ch;color:#cfcdc6;margin:0}
.band{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--rand) 26px;scroll-padding:0 var(--rand);scrollbar-width:thin;scrollbar-color:#3a3a42 transparent}
.band:focus-visible{outline-offset:-3px}
.stueck{flex:0 0 clamp(270px,30vw,440px);scroll-snap-align:start;text-decoration:none;display:block}
.stueck .rahmen{display:block;position:relative;background:#050506;padding:8px;border:2px solid #1f1f26;transition:border-color .3s,transform .4s}
.stueck:hover .rahmen,.stueck:focus-visible .rahmen{border-color:var(--licht);transform:translateY(-4px)}
.stueck img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.stueck .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--gelb);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.stueck .play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #000;border-top:12px solid transparent;border-bottom:12px solid transparent}
.stueck .raumname{display:block;margin-top:14px;font:600 22px/1 var(--hand);color:var(--licht)}
.stueck b{display:block;font:400 clamp(24px,2.2vw,32px)/1 var(--anton);text-transform:uppercase;margin:4px 0 4px}
.stueck>span:last-child{color:#a9a7a0;font-size:15px}

/* Kinoprogramm */
.kino-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(18px,2.4vw,34px);align-items:start}
.kino .jetzt{grid-column:1;margin:4px 0 0;font:400 14px var(--mono);color:var(--grau);letter-spacing:.06em}
.kino .jetzt b{color:var(--licht);font-weight:400}
.leinwand video{aspect-ratio:16/9;object-fit:cover}
.programm{display:flex;flex-direction:column;gap:10px;max-height:min(620px,72vh);overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#3a3a42 transparent}
.kinokarte{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto auto auto;column-gap:14px;text-align:left;background:#111115;border:2px solid #222229;color:var(--text);padding:8px;cursor:pointer;font:inherit;position:relative;transition:border-color .25s,background .25s}
.kinokarte img{grid-row:1/4;width:112px;aspect-ratio:16/10;object-fit:cover}
.kinokarte .reihe{font:400 14px var(--mono);color:var(--grau);letter-spacing:.08em;text-transform:uppercase}
.kinokarte b{font:400 21px/1.02 var(--anton);text-transform:uppercase}
.kinokarte .art{font-size:14px;color:#a9a7a0}
.kinokarte:hover{border-color:#4a4a55}
.kinokarte.an{border-color:var(--gelb);background:#17170f}
.kinokarte::after{content:"";position:absolute;right:-2px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#000;border:2px solid #222229;border-right-color:transparent;border-bottom-color:transparent;transform:rotate(-45deg) translateX(7px)}
.kino{padding-bottom:clamp(90px,10vw,150px)}

/* Vorführung Immobilien */
.vorfuehrung{overflow:hidden}
.schritte-immo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(24px,3vw,50px);align-items:start}
.schritt-nr{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--kobalt);color:#fff;font:400 24px/1 var(--anton)}
.schritt-immo h3{font:400 clamp(26px,2.6vw,38px)/1 var(--anton);text-transform:uppercase;margin:12px 0 16px}
.chat{background:#e4ddd2;background-image:radial-gradient(#d6cdbf 1px,transparent 1px);background-size:14px 14px;padding:16px;border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.18)}
.chat-kopf{font:400 14px var(--mono);color:#6b665c;text-align:center;margin:0 0 12px}
.fotostapel{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#dcf8c6;padding:6px;border-radius:10px 10px 2px 10px;margin-left:12%}
.handyfoto{margin:0;position:relative}
.handyfoto:first-child{grid-column:1/-1}
.handyfoto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.handyfoto figcaption{position:absolute;right:6px;bottom:4px;font:400 14px var(--mono);color:#fff;text-shadow:0 1px 3px #000}
.chat-text{background:#dcf8c6;margin:8px 0 0 12%;padding:10px 12px;border-radius:10px 2px 10px 10px;font-size:16px;color:#111}
.hinweis{font-size:17px;color:#4a463e;max-width:52ch}
.reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.reiter-knopf{background:#fff;border:2px solid #111;color:#111;font:600 15px var(--sans);padding:8px 14px;cursor:pointer}
.reiter-knopf.an{background:#111;color:var(--gelb)}
.vergleich{position:relative;aspect-ratio:16/9;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.25);border:8px solid #fff;user-select:none;touch-action:pan-y}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vergleich .vor-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vergleich .griff{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:var(--gelb);box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.vergleich .griff::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--gelb);color:#000;display:grid;place-items:center;font:800 22px/1 var(--sans);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.vergleich input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.vergleich .marke-v,.vergleich .marke-n{position:absolute;top:12px;font:400 14px var(--mono);padding:5px 9px;letter-spacing:.06em;pointer-events:none}
.marke-v{left:12px;background:rgba(0,0,0,.65);color:#fff}.marke-n{right:12px;background:var(--gelb);color:#000}
.immo-film{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;margin-top:clamp(50px,6vw,90px)}
.immo-film .fensterrahmen{transform:rotate(-.8deg)}
.immo-film .fensterrahmen video{aspect-ratio:16/9}
.immo-film p{font-size:19px}
.haken-liste{list-style:none;padding:0;margin:0 0 18px}
.haken-liste li{padding:7px 0 7px 30px;position:relative;font-size:17px;border-bottom:1px dashed rgba(0,0,0,.2)}
.haken-liste li::before{content:"✓";position:absolute;left:0;top:5px;font:800 18px var(--sans);color:var(--kobalt)}
.klein-hinweis{font:400 14px/1.5 var(--mono)!important;color:#6b665c}

/* Anzeigen aus dem Automaten */
.anzeigen{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:clamp(60px,7vw,100px)}
.anzeige,.post{background:#fff;color:#1c1e21;border-radius:8px;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.anzeige{transform:rotate(var(--r,0deg))}.anzeige:nth-child(2n){--r:1deg}.anzeige:nth-child(3n){--r:-1.2deg}
.anz-kopf{display:flex;gap:8px;align-items:center;padding:10px 10px 6px}
.anz-kopf i{flex:0 0 30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#60a5fa)}
.anz-kopf i.echt{background:url(/assets/film/werk/hw_moment.webp?v=3b3637db) 40% 30%/260% no-repeat}
.anz-kopf b{display:block;font-size:14px;line-height:1.2}
.anz-kopf small{display:block;font-size:13px;color:#65676b}
.anzeige p,.post p{font-size:14px;line-height:1.35;margin:0;padding:0 10px 8px}
.anzeige img,.post img{width:100%;aspect-ratio:1;object-fit:cover}
.post img{aspect-ratio:4/3}
.anz-fuss{display:flex;justify-content:space-between;padding:8px 10px;font-size:14px;color:#65676b;background:#f0f2f5}
.anz-fuss span:first-child{font-weight:700;color:#1c1e21}
.gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);max-width:1040px;margin:0 auto}
.handy-post{position:relative}
.post-etikett{font:400 14px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:0 0 12px}
.handy-post .post{border:10px solid #000;border-radius:26px;max-width:400px}
.handy-post .post p{font-size:15px;padding:0 14px 12px}
.handy-post .anz-kopf{padding:14px 14px 8px}
.brei-post .post{filter:saturate(.9)}
.unser-post .post-etikett{color:var(--gelb)}
.notiz{list-style:none;padding:0;margin:18px 0 0;font:600 clamp(22px,2vw,28px)/1.15 var(--hand)}
.notiz li{padding:3px 0 3px 26px;position:relative}
.brei-post .notiz{color:#e08a8a}.brei-post .notiz li::before{content:"✗";position:absolute;left:0}
.unser-post .notiz{color:var(--licht)}.unser-post .notiz li::before{content:"✓";position:absolute;left:0}
.brei-schluss{font:400 clamp(30px,3.6vw,58px)/1.05 var(--anton);text-transform:uppercase;text-align:center;margin:clamp(60px,7vw,100px) auto 0;max-width:22ch}

/* KI: Testanruf zuerst */
.testanruf{background:#000;padding-top:clamp(70px,8vw,110px)}
.rufnummer.riesig{font-size:clamp(40px,5.4vw,86px)}
.vergleich-ki{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#000;padding:4px}
.spalte-ki{padding:26px clamp(18px,2.4vw,34px) 30px}
.spalte-ki h3{font:400 clamp(28px,3vw,44px)/1 var(--anton);text-transform:uppercase;margin:0 0 14px}
.spalte-ki ul{list-style:none;margin:0;padding:0}
.spalte-ki li{padding:10px 0 10px 30px;position:relative;font-size:18px;border-bottom:1px dashed #2f2f37}
.spalte-ki.alt{background:#121216;color:#9a9aa3}.spalte-ki.alt li::before{content:"✗";position:absolute;left:0;color:#e08a8a}
.spalte-ki.neu{background:var(--kobalt);color:#fff}.spalte-ki.neu li{border-color:rgba(255,255,255,.25)}.spalte-ki.neu li::before{content:"✓";position:absolute;left:0;color:var(--gelb)}

/* Büro: Tageslauf */
.tageslauf{background:#0e0e12;padding:clamp(80px,10vw,140px) 0}
.tageslauf-raster{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.tag-uhr{position:sticky;top:110px;text-align:center}
.wanduhr{width:min(260px,100%);margin:0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.wanduhr .zeiger-std,.wanduhr .zeiger-min{transform-origin:100px 100px;transition:transform .9s cubic-bezier(.3,1.3,.4,1)}
.tag-uhr .digital{font:400 clamp(44px,4.4vw,64px)/1 var(--mono);color:var(--licht);margin:20px 0 6px;letter-spacing:.04em}
.tag-uhr .hand{font-size:26px;color:#cfcdc6}
.tageslinie{list-style:none;margin:0;padding:0;border-left:3px solid #26262d}
.stunde{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:0 0 26px 22px;position:relative}
.stunde::before{content:"";position:absolute;left:-10px;top:10px;width:17px;height:17px;border-radius:50%;background:#26262d;border:3px solid #0e0e12;transition:background .4s,box-shadow .4s}
.stunde.fertig::before{background:var(--gelb);box-shadow:0 0 16px rgba(233,245,2,.6)}
.uhrzeit-gross{font:400 22px/1.6 var(--mono);color:#8d8d99;transition:color .4s}
.stunde.fertig .uhrzeit-gross{color:var(--licht)}
.blatt{background:#f4efe2;color:#1a1a1a;padding:18px 22px 20px;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.35);background-image:repeating-linear-gradient(transparent 0 31px,#d6dcec 31px 32px);opacity:.55;transform:translateX(18px);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1)}
.stunde.fertig .blatt{opacity:1;transform:none}
.blatt .bereich{font:400 14px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#6b665c}
.blatt h3{font:400 clamp(24px,2.4vw,34px)/1.05 var(--anton);text-transform:uppercase;margin:6px 0 6px}
.blatt p{margin:0;font-size:17px;color:#333;max-width:52ch}
.erledigt{position:absolute;right:14px;top:12px;border:3px solid #c0392b;color:#c0392b;font:400 18px/1 var(--anton);text-transform:uppercase;padding:6px 10px;letter-spacing:.06em;transform:rotate(-8deg) scale(2.2);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1) .35s,opacity .2s .35s}
.stunde.fertig .erledigt{opacity:.85;transform:rotate(-8deg) scale(1)}
.tag-schluss{font:400 clamp(30px,3.4vw,54px)/1.05 var(--anton);text-transform:uppercase;margin:40px 0 0 22px}

/* Büro: Karteikasten */
.karteikasten{max-width:1080px}
.kartei-reiterleiste{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end}
.kartei-reiter{background:#d9d1c0;border:2px solid #111;border-bottom:0;padding:10px 16px 8px;font:600 15px var(--sans);color:#111;cursor:pointer;border-radius:8px 8px 0 0;transform:translateY(4px);transition:transform .2s,background .2s}
.kartei-reiter:hover{transform:translateY(0)}
.kartei-reiter.an{background:#fffdf6;transform:translateY(2px);position:relative;z-index:2}
.kartei-karten{position:relative;z-index:1}
.karteikarte{background:#fffdf6;border:2px solid #111;padding:clamp(24px,3vw,44px) clamp(22px,3vw,50px) clamp(26px,3vw,44px) clamp(56px,6vw,90px);background-image:linear-gradient(90deg,transparent clamp(38px,4.5vw,66px),#e19595 clamp(38px,4.5vw,66px),#e19595 calc(clamp(38px,4.5vw,66px) + 2px),transparent calc(clamp(38px,4.5vw,66px) + 2px)),repeating-linear-gradient(transparent 0 35px,#c9d3ea 35px 36px);box-shadow:8px 8px 0 #111;min-height:330px;animation:karte .45s cubic-bezier(.2,.9,.3,1)}
@keyframes karte{from{transform:translateY(24px) rotate(-1deg);opacity:0}to{transform:none;opacity:1}}
.kk-nr{font:400 14px var(--mono);color:#6b665c;letter-spacing:.12em;text-transform:uppercase}
.karteikarte h3{font:400 clamp(32px,3.6vw,58px)/1 var(--anton);text-transform:uppercase;margin:10px 0 14px}
.karteikarte p{font-size:clamp(18px,1.6vw,21px);max-width:54ch}
.karteikarte ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.karteikarte li{font:600 clamp(22px,2vw,28px)/36px var(--hand);color:var(--kobalt)}
.karteikarte li::before{content:"→ "}

/* Büro: zwei Telefonate */
.zwei-telefonate{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px)}
.telefonat.alt .gespraech{background:#16161a;color:#8f8f99}
.telefonat.alt .ergebnis{color:#e08a8a}
.telefonat.neu .post-etikett{color:var(--gelb)}
.telefonat.neu .gespraech{border-color:var(--kobalt);box-shadow:0 0 0 1px var(--kobalt),0 20px 50px rgba(21,70,224,.25)}

/* Büro: Mona */
.mona-raster{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(30px,5vw,80px);align-items:center}
.mona{margin:0;position:relative;max-width:440px}
.mona img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mona .tuerschild{position:relative;margin:-30px 16px 0;background:#d8d2c4;color:#111;padding:12px 14px;text-align:center;border:1px solid #b7af9d;box-shadow:0 10px 20px rgba(0,0,0,.4)}
.mona .tuerschild b{display:block;font:400 26px/1 var(--anton);text-transform:uppercase;letter-spacing:.04em}
.mona .tuerschild span{display:block;font:600 22px/1.1 var(--hand);color:#555}

/* Büro: Gutschein */
.gutschein-sek{padding:clamp(70px,9vw,120px) 0}
.gutschein{display:grid;grid-template-columns:1fr minmax(220px,300px);background:#fffdf6;color:#111;max-width:1000px;margin:0 auto;box-shadow:0 30px 70px rgba(0,0,0,.4);transform:rotate(-1deg)}
.gs-haupt{padding:clamp(26px,4vw,50px)}
.gutschein .gs-haupt .kicker{color:#6b665c}
.gs-gross{font-size:clamp(46px,6vw,96px);margin:10px 0 18px;color:var(--kobalt)}
.gs-haupt p:last-child{font-size:19px;max-width:44ch;margin:0}
.gs-abriss{border-left:3px dashed #111;padding:clamp(24px,3vw,40px) 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;background:var(--gelb);position:relative;transform-origin:0 0;transition:transform .6s cubic-bezier(.5,0,.7,.4),opacity .6s}
.gs-abriss .schere{position:absolute;left:-15px;top:14px;font-size:24px;background:#fffdf6;line-height:1;transform:rotate(90deg)}
.gs-abriss .hand{font-size:26px;margin:0}
.gs-abriss small{font:400 14px var(--mono);color:#333}
.gutschein.ab .gs-abriss{transform:translate(40px,60px) rotate(14deg);opacity:0}

/* Häufige Fragen */
.faq{border-top:2px solid #2a2a31}
.frage-auf{border-bottom:2px solid #2a2a31}
.frage-auf summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font:400 clamp(22px,2vw,30px)/1.1 var(--anton);text-transform:uppercase;position:relative}
.frage-auf summary::-webkit-details-marker{display:none}
.frage-auf summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 36px/1 var(--anton);color:var(--gelb);transition:transform .3s}
.frage-auf[open] summary::after{transform:rotate(45deg)}
.frage-auf p{color:#d2d0ca;font-size:18px;margin:0 0 22px;max-width:60ch}

/* Wir: was KI darf */
.darf{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#111;padding:4px;margin-top:clamp(40px,5vw,70px)}
.darf>div{background:#fffdf6;padding:24px clamp(18px,2.6vw,36px) 28px}
.darf .darf-nein{background:#111;color:#f3f1ec}
.darf h3{font:400 clamp(26px,2.6vw,38px)/1 var(--anton);text-transform:uppercase;margin:0 0 12px}
.darf ul{list-style:none;padding:0;margin:0}
.darf li{padding:9px 0 9px 30px;position:relative;font-size:18px;border-bottom:1px dashed rgba(0,0,0,.2)}
.darf-ja li::before{content:"✓";position:absolute;left:0;color:var(--kobalt);font-weight:800}
.darf-nein li{border-color:#333}.darf-nein li::before{content:"✗";position:absolute;left:0;color:var(--gelb)}
.satz-gross{font:400 clamp(34px,4.4vw,72px)/1.1 var(--anton);text-transform:uppercase;margin:clamp(40px,5vw,70px) 0 0;color:#111}
.satz-gross em{font-style:normal;background:var(--gelb);padding:0 .12em}

/* Kontakt: Briefbogen */
.briefbogen{background:#fffdf6;padding:clamp(22px,3vw,40px);box-shadow:0 24px 50px rgba(0,0,0,.22);transform:rotate(.8deg);display:grid;gap:6px;transition:transform .7s cubic-bezier(.5,0,.6,1),opacity .7s;background-image:repeating-linear-gradient(transparent 0 35px,#e6e0d0 35px 36px)}
.brief-kopf{font:600 30px/1 var(--hand);color:var(--kobalt);margin:0 0 10px}
.briefbogen label{font:400 14px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6b665c;margin-top:10px}
.briefbogen input,.briefbogen select,.briefbogen textarea{font:400 18px var(--sans);padding:12px 14px;border:2px solid #111;background:#fff;color:#111;border-radius:0;width:100%}
.briefbogen textarea{resize:vertical;min-height:130px}
.briefbogen .anhaenger{justify-self:start;margin-top:16px}
.briefbogen.eingeworfen{transform:translateY(-40px) scale(.2) rotate(-6deg);opacity:0}

/* Webdesign: Atelierwand mit Bildschirm und Handy */
.abschnitt.atelier{background:#16130f;background-image:radial-gradient(rgba(255,200,90,.08),transparent 60%);}
.atelierwand2{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,4.4vw,70px) clamp(22px,2.6vw,40px)}
.probe2{display:block;position:relative;text-decoration:none;padding-right:16%;padding-bottom:6px}
.probe2 .bildschirm{display:block;background:#0b0b0c;border:3px solid #2b2b31;border-radius:10px;padding:8px 8px 16px;box-shadow:0 26px 50px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.probe2 .bildschirm img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:3px}
.probe2 .handy{position:absolute;right:0;top:22%;width:28%;background:#000;border:3px solid #2b2b31;border-radius:14px;padding:4px;box-shadow:0 20px 40px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.probe2 .handy img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:9px}
.probe2:hover .bildschirm,.probe2:focus-visible .bildschirm{transform:translateY(-6px)}
.probe2:hover .handy,.probe2:focus-visible .handy{transform:translate(6px,-12px) rotate(3deg)}
.probe2 b{display:block;font:400 clamp(24px,2.2vw,32px)/1 var(--anton);text-transform:uppercase;margin-top:16px}
.probe2 .was{display:block;color:#a9a7a0;font:400 14px var(--mono)}
.probe2 .live{display:inline-block;margin-top:8px;font:600 20px/1 var(--hand);color:var(--licht)}

/* Raumkopf am Handy: Film oben im Fenster, Text darunter */
@media (max-width:700px){
  .raumkopf{display:block;min-height:0;padding:78px 0 46px}
  .raumkopf::before,.raumkopf::after{display:none}
  .raumkopf video{position:relative;inset:auto;width:calc(100% - 2*var(--rand));height:auto;aspect-ratio:16/11;margin:0 auto 26px;border:8px solid #050506;outline:2px solid #1d1d23;box-shadow:0 24px 50px rgba(0,0,0,.7),0 0 50px rgba(255,200,90,.14)}
  .raumkopf h1{font-size:clamp(44px,12vw,64px)}
  .vorlage-kopf,.schritte-immo,.immo-film,.gegenueber,.kino-raster,.vergleich-ki,.tageslauf-raster,.zwei-telefonate,.mona-raster,.gutschein,.darf,.drei-saetze{grid-template-columns:1fr}
  .wendewand{grid-template-columns:1fr 1fr;gap:10px}
  .wende .etikett{font-size:14px;padding:4px 6px;left:6px;bottom:6px;right:6px;width:max-content;max-width:calc(100% - 12px)}.wende .hinten .etikett{font-size:14px;padding:5px 7px}
  .programm{flex-direction:row;overflow-x:auto;max-height:none;scroll-snap-type:x mandatory;padding-bottom:8px}
  .kinokarte{flex:0 0 78%;scroll-snap-align:start}
  .gs-abriss .schere{display:none}
  .anzeigen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;gap:12px}
  .anzeige{flex:0 0 62%;scroll-snap-align:start}
  .tag-uhr{position:sticky;top:74px;z-index:3;display:flex;align-items:center;gap:14px;background:rgba(14,14,18,.94);backdrop-filter:blur(6px);padding:10px 0;margin:0 calc(var(--rand) * -1);padding-left:var(--rand)}
  .wanduhr{width:58px;margin:0}
  .tag-uhr .digital{font-size:30px;margin:0}
  .tag-uhr .hand{display:none}
  .wende .ort{display:none}
  .stunde{grid-template-columns:1fr;gap:4px;padding-left:18px}
  .uhrzeit-gross{font-size:18px}
  .blatt{transform:none}
  .karteikarte ul{grid-template-columns:1fr}
  .kartei-reiter{padding:8px 10px 6px;font-size:14px}
  .karteikarte{min-height:0;padding-left:52px;box-shadow:5px 5px 0 #111}
  .gs-abriss{border-left:0;border-top:3px dashed #111}
  .gutschein{transform:none}
  .atelierwand2{grid-template-columns:1fr}
  .handy-post .post{max-width:none}
  .stueck{flex-basis:78%}
  .tag-schluss{margin-left:0}
}
@media (min-width:701px) and (max-width:980px){
  .vorlage-kopf,.schritte-immo,.immo-film,.kino-raster,.tageslauf-raster,.mona-raster{grid-template-columns:1fr}
  .tag-uhr{position:static}
  .anzeigen{grid-template-columns:repeat(3,1fr)}
  .atelierwand2{grid-template-columns:1fr 1fr}
  .programm{flex-direction:row;flex-wrap:wrap;max-height:none}.kinokarte{flex:1 1 300px}
}
html.ruhig .wende .innen{transition:none}

/* =================== Runde 4 =================== */
@font-face{font-family:"DMSerif";src:url(/assets/fonts/dmserif.woff2?v=3b3637db) format("woff2");font-display:swap}
.grau{color:#7d7b76}
/* Seitenübergang wie ein Fenster, das aufgeht */
@view-transition{navigation:auto}
.kopf{view-transition-name:kopf}
::view-transition-old(root){animation:vt-raus .42s ease both}
::view-transition-new(root){animation:vt-rein .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-raus{to{opacity:.25;transform:scale(1.03)}}
@keyframes vt-rein{from{clip-path:inset(36% 32% 36% 32%);filter:brightness(1.8) saturate(.6)}to{clip-path:inset(0);filter:none}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
html.ruhig ::view-transition-old(root),html.ruhig ::view-transition-new(root){animation:none}

/* Vorhang: das Licht geht an */
.vorhang{position:fixed;inset:0;z-index:300;background:#050506;display:grid;place-content:center;justify-items:center;gap:22px;transition:opacity .9s ease,transform 1s ease}
.vorhang.auf{opacity:0;transform:scale(1.06);pointer-events:none}
html.vorhang-an body{overflow:hidden}
.v-fenster{width:92px;height:104px;background:var(--kobalt);padding:16px;position:relative;box-shadow:0 0 0 1px #000}
.v-fenster i{display:block;width:100%;height:100%;background:#15151a;position:relative;animation:vflacker 1.1s steps(1) .25s forwards}
.v-fenster i::before,.v-fenster i::after{content:"";position:absolute;background:#0b0b0c}
.v-fenster i::before{left:50%;top:0;bottom:0;width:6px;margin-left:-3px}.v-fenster i::after{top:50%;left:0;right:0;height:6px;margin-top:-3px}
@keyframes vflacker{0%{background:#15151a}15%{background:#ffe7a3;box-shadow:0 0 60px rgba(255,200,90,.8)}22%{background:#2a2418;box-shadow:none}34%{background:#ffe7a3;box-shadow:0 0 80px rgba(255,200,90,.9)}42%{background:#3a3020}55%,100%{background:#ffe7a3;box-shadow:0 0 120px 20px rgba(255,200,90,.85)}}
.vorhang p{font:600 34px var(--hand);color:var(--licht);opacity:0;animation:vtext .5s .85s forwards}
@keyframes vtext{to{opacity:1}}

/* Lichtkegel */
.lichtkegel{position:fixed;left:0;top:0;width:800px;height:800px;border-radius:50%;pointer-events:none;z-index:55;background:radial-gradient(circle,rgba(255,206,110,.16) 0,rgba(255,200,90,.06) 32%,transparent 64%);mix-blend-mode:screen;opacity:0;transition:opacity .8s;will-change:transform}
.lichtkegel.an{opacity:1}
@media (hover:none){.lichtkegel{width:560px;height:560px}}

/* Schlagzeilen Wort für Wort */
.wort .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.14em .02em .06em;margin:-.14em -.02em -.06em}
.wort .wi{display:inline-block;transform:translateY(112%) rotate(3deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.75,.12,1);transition-delay:calc(var(--k) * 55ms)}
.wort.steht .wi{transform:none}
.eingang h1.wort .wi{transition-delay:calc(var(--k) * 90ms + .3s)}
html.vorhang-an .eingang h1 .wi{transition-delay:calc(var(--k) * 90ms + 1.5s)}

/* Fassade statt Fahrstuhl */
.fassade{position:absolute;right:var(--rand);top:50%;transform:translateY(-50%);opacity:0;transition:opacity .6s;z-index:2}
.fassade.da{opacity:1}
.fassade ol{list-style:none;margin:0;padding:14px 12px;display:flex;flex-direction:column;gap:9px;background:rgba(7,7,8,.88);border:1px solid #2a2a31;border-top:4px solid var(--kobalt);box-shadow:0 20px 50px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.fassade li{display:flex;align-items:center;justify-content:flex-end;gap:12px;position:relative}
.fassade i{width:34px;height:26px;background:#15151b;border:3px solid var(--kobalt);position:relative;transition:background .5s,box-shadow .5s}
.fassade i::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--kobalt)}
.fassade li.vorbei i{background:#4a3a18}
.fassade li.an i{background:var(--licht);box-shadow:0 0 22px rgba(255,200,90,.9)}
.fassade li.tuer i{width:34px;height:34px;border-radius:17px 17px 0 0}
.fassade span{position:absolute;right:calc(100% + 14px);background:rgba(7,7,8,.8);padding:6px 10px;white-space:nowrap;text-align:right;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.fassade span b{display:block;font:600 24px/1 var(--hand);color:var(--licht)}
.fassade span{font:400 14px var(--mono);color:#cfcfd8;letter-spacing:.1em}
.fassade li.an span{opacity:1;transform:none}

/* Film in der Schrift */
.filmschrift{position:relative;overflow:hidden;background:#000;height:clamp(280px,40vw,620px)}
.filmschrift video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmschrift .maske{position:absolute;inset:0;background:#070708;color:#fff;mix-blend-mode:multiply;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0 .22em;padding:0 var(--rand);font:400 clamp(70px,13.2vw,260px)/.86 var(--anton);text-transform:uppercase;letter-spacing:-.005em;text-align:center}
.filmschrift .maske span{display:block}

/* Kinosaal */
.kinosaal{background:radial-gradient(120% 80% at 50% 0,#17161c,#050506 70%);padding:clamp(80px,10vw,140px) 0 clamp(70px,8vw,110px);position:relative;overflow:hidden}
.saal-kopf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:end;margin-bottom:44px}
.saal-kopf p{color:#d6d4ce;font-size:clamp(18px,1.5vw,21px);margin:0;max-width:48ch}
.saal{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,20%);gap:0;align-items:center}
.saal-leinwand{position:relative;border:clamp(8px,1.1vw,14px) solid #050506;box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 120px rgba(255,200,90,.14)}
.saal-leinwand video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block}
.saal-handy{position:relative;margin-left:-14%;margin-bottom:-12%;z-index:2;transform:rotate(3deg)}
.saal-handy video{width:100%;aspect-ratio:9/16;object-fit:cover;border:8px solid #000;border-radius:26px;box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 2px #2a2a31;background:#000;display:block}
.handy-satz{display:block;text-align:center;margin-top:12px;font:600 20px var(--hand);color:var(--licht);transform:rotate(-3deg)}
.saal-start{position:absolute;left:41%;top:50%;z-index:3}
.saal.laeuft .saal-start{display:none}
.auftrag{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,44px);margin:clamp(40px,5vw,64px) 0 36px;padding-top:26px;border-top:2px solid #26262d}
.auftrag p{margin:8px 0 0;font-size:18px;color:#e4e2dc}
.auftrag .kicker{color:var(--licht)}
.auftrag.neu>div{animation:auftrag .6s cubic-bezier(.2,.8,.2,1) both}.auftrag.neu>div:nth-child(2){animation-delay:.08s}.auftrag.neu>div:nth-child(3){animation-delay:.16s}
@keyframes auftrag{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.programm-band{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin;scrollbar-color:#3a3a42 transparent}
.programm-band .kinokarte{display:block;flex:0 0 clamp(220px,19vw,270px);scroll-snap-align:start;padding:8px 8px 14px;text-align:left}
.programm-band .kinokarte img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px}
.programm-band .kinokarte .reihe{display:block;margin-bottom:4px}
.programm-band .kinokarte b{display:block;font:400 22px/1.02 var(--anton);text-transform:uppercase}
.programm-band .kinokarte::after{display:none}
.saal-hinweis{font:400 14px var(--mono);color:#8f8f99;margin:10px 0 0}

/* Normaler Standard gegen So machen wir das */
.vergleich-sek{background:#101013;padding:clamp(80px,10vw,140px) 0;position:relative;overflow:hidden}
.vergleich-sek::before{content:"";position:absolute;inset:0 50% 0 0;background:linear-gradient(90deg,#17171a,#121215);pointer-events:none}
.vg-kopf{position:relative;max-width:980px;margin-bottom:40px}
.vg-kopf h2{margin:14px 0 20px}
.vg-kopf p{color:#d6d4ce;font-size:clamp(18px,1.5vw,21px);max-width:56ch}
.vg-reiterleiste{position:relative;display:flex;flex-wrap:wrap;gap:6px 28px;margin-bottom:36px;border-bottom:2px solid #2a2a31}
.vg-reiter{background:none;border:0;color:#8f8f99;font:400 clamp(22px,2.2vw,32px)/1 var(--anton);text-transform:uppercase;padding:10px 0 14px;cursor:pointer;position:relative;transition:color .25s}
.vg-reiter::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:5px;background:var(--gelb);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.vg-reiter.an{color:#fff}.vg-reiter.an::after{transform:scaleX(1)}
.vg-reiter:hover{color:#fff}
.vg-panel{position:relative}
.vg-panel.neu .seite-std{animation:auftrag .5s both}.vg-panel.neu .seite-unser{animation:auftrag .6s .12s both}
.gegen{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);align-items:start}
.gegen figure{margin:0;position:relative}
.gegen-mitte{align-self:stretch;display:flex;justify-content:center;position:relative}
.gegen-mitte::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:repeating-linear-gradient(#3a3a42 0 8px,transparent 8px 16px)}
.gegen-mitte span{position:sticky;top:45%;margin-top:30%;background:#101013;padding:8px 0;font:600 26px var(--hand);color:#8f8f99;z-index:1}
.stempel-std,.stempel-unser{display:inline-block;margin-bottom:16px;font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px}
.stempel-std{color:#9a9aa3;border:2px solid #4a4a52}
.stempel-unser{color:#000;background:var(--gelb);transform:rotate(-2deg)}
.seite-std>img,.seite-std>.post,.seite-std>.browser{filter:saturate(.92)}
.foto{width:100%;display:block;box-shadow:0 26px 60px rgba(0,0,0,.6)}
.seite-unser .foto,.seite-unser .browser,.seite-unser .post{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 90px rgba(255,200,90,.16)}
.vergleich-sek .notiz{list-style:none;padding:0;margin:20px 0 0;font:600 clamp(22px,2vw,28px)/1.2 var(--hand)}
.vergleich-sek .notiz li{padding:3px 0 3px 28px;position:relative}
.seite-std .notiz{color:#e08a8a}.seite-std .notiz li::before{content:"✗";position:absolute;left:0}
.seite-unser .notiz{color:var(--licht)}.seite-unser .notiz li::before{content:"✓";position:absolute;left:0}
.post{max-width:460px;margin:0 auto}
.post.fb p,.post.ig p{font-size:15px;line-height:1.4;padding:0 14px 10px}
.post .anz-kopf{padding:12px 14px 8px}
.post-bild{position:relative}
.post-bild img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.post-ueber{position:absolute;left:0;right:0;top:0;padding:22px 22px 60px;font:400 clamp(28px,3vw,42px)/1.04 "DMSerif",Georgia,serif;color:#fff7ea;background:linear-gradient(rgba(0,0,0,.55),transparent);text-shadow:0 2px 16px rgba(0,0,0,.5)}
.post-ueber span{color:var(--gelb)}
.post.fb.unser .anz-kopf i{background:linear-gradient(135deg,#c08a4a,#5a3a1a)}
.post.ig .anz-kopf i{background:conic-gradient(#f58529,#dd2a7b,#8134af,#515bd4,#f58529);padding:2px}
.post.ig img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.ig-leiste{padding:10px 14px 4px;font-size:20px;color:#262626}
.post.ig p:first-of-type{padding-bottom:2px}
.browser{background:#1d1d22;border-radius:10px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.6)}
.browser-leiste{display:flex;align-items:center;gap:7px;padding:10px 12px;background:#2a2a31}
.browser-leiste i{width:11px;height:11px;border-radius:50%;background:#55555f}
.browser-leiste i:nth-child(1){background:#ff5f57}.browser-leiste i:nth-child(2){background:#febc2e}.browser-leiste i:nth-child(3){background:#28c840}
.browser-leiste span{margin-left:12px;flex:1;background:#1a1a1f;border-radius:6px;padding:4px 10px;font:400 13px var(--mono);color:#a3a3ad}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
.kibrei-band{margin-top:50px}
.kibrei-band .hand{font-size:28px;color:#e08a8a;margin:0 0 12px}
.kibrei-reihe{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.kibrei-reihe img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4px;opacity:.85}
.teaser .vt-paar{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);margin-bottom:clamp(40px,6vw,80px)}
.teaser .vt-name{grid-column:1/-1;margin:0;font:400 clamp(28px,3vw,46px)/1 var(--anton);text-transform:uppercase;color:#fff}
.teaser .vt-paar figure{margin:0}
.vt-mehr{position:relative;margin-top:10px}

/* KI-Brei-Wand (Webdesign) */
.kibrei-sek{background:#07070c;background-image:radial-gradient(60% 50% at 30% 0,rgba(124,58,237,.22),transparent 70%),radial-gradient(50% 40% at 80% 10%,rgba(59,130,246,.16),transparent 70%);color:#fff}
.kibrei-sek .vorlage-kopf p{color:#b9b9cc}
.kibrei-sek .durch{color:#a78bfa}
.kibrei-sek .durch::after{background:var(--gelb);transform:scaleX(1) rotate(-2deg)}
.kb-wand{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.kb-karte{margin:0;position:relative}
.kb-karte img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
.kb-karte figcaption{font:400 13.5px var(--mono);color:#8b8b9e;margin-top:8px;letter-spacing:.04em}
.kb-schluss{font:600 clamp(28px,2.6vw,40px) var(--hand);color:var(--licht);margin:44px 0 0;text-align:center}

@media (max-width:980px){
  .saal-kopf,.auftrag{grid-template-columns:1fr}
  .auftrag{gap:14px}
}
@media (max-width:700px){
  .fassade{top:74px;transform:none;right:10px}
  .fassade ol{padding:8px 7px;gap:5px}
  .fassade i{width:20px;height:15px;border-width:2px}.fassade li.tuer i{width:20px;height:20px}
  .fassade span{right:calc(100% + 8px)}.fassade span b{font-size:19px}.fassade span{font-size:14px}
  .filmschrift{height:auto;aspect-ratio:4/5}
  .filmschrift .maske{flex-direction:column;font-size:25vw;line-height:.84}
  .saal{display:block}
  .saal-leinwand{display:none}
  .saal-handy{margin:0 auto;width:min(78vw,340px);transform:none}
  .handy-satz{transform:none}
  .saal-start{left:50%;top:44%;bottom:auto;transform:translate(-50%,-50%)}
  .programm-band .kinokarte{flex-basis:72%}
  .vergleich-sek::before{display:none}
  .gegen{grid-template-columns:1fr}
  .gegen-mitte{height:60px}.gegen-mitte::before{top:auto;bottom:auto;left:0;right:0;width:auto;height:2px;top:50%;background:repeating-linear-gradient(90deg,#3a3a42 0 8px,transparent 8px 16px)}
  .gegen-mitte span{position:relative;top:auto;margin:auto;padding:0 12px}
  .vg-reiterleiste{flex-wrap:nowrap;overflow-x:auto;gap:22px;scrollbar-width:none}
  .vg-reiter{flex:0 0 auto;font-size:22px}
  .kibrei-reihe{grid-template-columns:repeat(3,1fr)}
  .teaser .vt-paar{grid-template-columns:1fr;gap:18px}
  .kb-wand{grid-template-columns:1fr 1fr;gap:10px}
  .kb-karte figcaption{font-size:14px}
  .post-ueber{font-size:30px}
}
.stueck .vorschau{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:cover;opacity:0;transition:opacity .35s}
.stueck.spielt .vorschau{opacity:1}.stueck.spielt .play{opacity:0}
.stueck .play{transition:opacity .3s}

/* ===== Runde 5: Fotostudio ===== */
.fotostudio{background:#f3efe6;color:#121214;padding:clamp(80px,10vw,150px) 0 clamp(70px,8vw,120px);position:relative;overflow:hidden}
.fotostudio::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 85% 0,rgba(255,200,90,.22),transparent 70%);pointer-events:none}
.fotostudio .wrap{position:relative}
.fotostudio .kicker{color:#5a564e}
.fs-kopf{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.fs-kopf h2 .fs-zwei{display:block;font-family:"DMSerif",Georgia,serif;text-transform:none;font-size:.86em;letter-spacing:-.01em;line-height:1;margin-top:.08em;color:#121214}
.fs-kopf>p{margin:0;font-size:clamp(18px,1.3vw,20px);color:#3b3832;max-width:52ch}
.fs-reiterleiste{border-bottom-color:#d8d1c2;gap:6px clamp(22px,3vw,48px)}
.fs-reiter{color:#8d877b;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-transform:none}
.fs-reiter b{font-weight:400;font-size:clamp(26px,2.6vw,38px);line-height:1}
.fs-reiter small{font:600 14px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#8d877b}
.fs-reiter.an,.fs-reiter:hover{color:#121214}.fs-reiter.an small{color:#121214}
.fs-reiter::after{background:#121214}
.fs-halde b{font-family:"DMSerif",Georgia,serif;letter-spacing:.06em}
.fs-sole b{font-family:var(--sans);font-weight:400;letter-spacing:.22em;font-size:clamp(20px,2vw,28px)}
.fs-firn b{font-family:var(--anton);letter-spacing:.04em}
.fs-hoch b{font-family:"DMSerif",Georgia,serif;color:inherit}
.fs-buehne{display:grid;grid-template-columns:minmax(250px,320px) 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.fs-label{display:flex;align-items:center;gap:12px;font:700 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#121214;margin:0 0 18px}
.fs-label span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#121214;color:#f3efe6;font-size:14px;letter-spacing:0}
.fs-handy{margin:0 0 30px;background:#fff;padding:10px 10px 0;box-shadow:0 18px 40px rgba(40,30,10,.18);transform:rotate(-2.5deg);max-width:300px}
.fs-handy img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.9)}
.fs-handy figcaption{display:flex;flex-direction:column;gap:2px;background:#dcf8c6;color:#111;margin:10px -10px 0;padding:10px 14px 12px;font-size:16px;line-height:1.35}
.fs-handy time{align-self:flex-end;font-size:14px;color:#4a7a52}
.fs-auftrag{margin:0;display:grid;gap:18px}
.fs-auftrag dt{font:700 14px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#7a7468;margin-bottom:4px}
.fs-auftrag dd{margin:0;font-size:17px;line-height:1.5;color:#2a2823}
.fs-film{border-color:#0b0b0c;box-shadow:0 30px 70px rgba(30,20,5,.28)}
.fs-film video{aspect-ratio:16/9;object-fit:cover}
.fs-strecke{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(18px,2vw,26px)}
.fs-strecke figure{margin:0}
.fs-bild{overflow:hidden;background:#ddd6c8}
.fs-bild img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fs-strecke figure:hover img{transform:scale(1.045)}
.fs-strecke figcaption{font:600 14px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#5a564e;margin-top:10px}
.fotostudio .saal-hinweis{color:#6d685d;margin-top:clamp(30px,4vw,48px)}
.fs-panel.neu .fs-film{animation:auftrag .55s both}.fs-panel.neu .fs-handy{animation:fs-rein .6s both}
@keyframes fs-rein{from{opacity:0;transform:rotate(-8deg) translateY(20px)}to{opacity:1;transform:rotate(-2.5deg)}}
@media (max-width:980px){.fs-kopf{grid-template-columns:1fr}.fs-buehne{grid-template-columns:1fr}
  .fs-rein{display:grid;grid-template-columns:minmax(150px,42%) 1fr;gap:20px 22px;align-items:start}.fs-rein .fs-label{grid-column:1/-1;margin-bottom:0}.fs-handy{margin:0}}
@media (max-width:700px){
  .fs-reiterleiste{flex-wrap:nowrap;overflow-x:auto;gap:26px;scrollbar-width:none;margin-left:calc(-1*var(--rand));margin-right:calc(-1*var(--rand));padding:0 var(--rand)}
  .fs-reiter{flex:0 0 auto}.fs-reiter b{font-size:26px}.fs-sole b{font-size:20px}
  .fs-rein{grid-template-columns:1fr}.fs-handy{width:72%;margin:0 auto 6px}
  .fs-auftrag dd{font-size:17px}
  .fs-strecke{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:calc(-1*var(--rand));margin-right:calc(-1*var(--rand));padding:0 var(--rand) 6px;scrollbar-width:none}
  .fs-strecke figure{flex:0 0 78%;scroll-snap-align:center}
  .fs-film .abspielen small{display:none}
}
.fs-kopf h2{font-size:clamp(44px,6.4vw,108px)}
.fs-film .abspielen{left:clamp(14px,2vw,28px);top:auto;bottom:clamp(14px,2vw,28px);transform:none}.fs-film .abspielen:hover{transform:translateY(-2px)}
.fs-film video{background:#0b0b0c}
@media (max-width:700px){.fs-handy{width:56%}.fs-kopf h2{font-size:48px}}

/* ===== Runde 5: Ton, Tageszeit, Einflug ===== */
.ton-schalter{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 10px;background:#141418;border:1px solid #2a2a31;color:#f3f1ec;font:600 16px var(--sans);cursor:pointer;margin-right:10px;transition:background .3s,border-color .3s}
.ton-schalter:hover{border-color:#4a4a55}
.ton-schalter .kipp{position:relative;width:20px;height:28px;border-radius:4px;background:#e9e4d8;box-shadow:inset 0 0 0 2px #c9c2b2;display:block}
.ton-schalter .kipp i{position:absolute;left:5px;right:5px;top:4px;height:10px;border-radius:2px;background:#fff;box-shadow:0 2px 0 #a49c8a;transition:top .18s,box-shadow .18s}
.ton-schalter.an .kipp i{top:14px;box-shadow:0 -2px 0 #a49c8a}
.ton-schalter.an{border-color:var(--licht);box-shadow:0 0 22px rgba(255,200,90,.25)}
.ton-schalter.an .ton-text::after{content:" an";color:var(--licht)}
@media (max-width:700px){.ton-schalter{height:44px;padding:0 10px;margin-right:6px}.ton-schalter .ton-text{display:none}}
/* Flug durchs Fenster */
html.fliegt body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff6d6 0,#ffd98a 35%,#f0a040 80%);opacity:0;animation:fliegt-licht .6s .55s forwards}
@keyframes fliegt-licht{to{opacity:1}}
html.einflug body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;background:radial-gradient(circle at 50% 50%,#fff6d6 0,#ffd98a 35%,#f0a040 80%);animation:einflug-licht 1.1s .1s both}
html.einflug body::before{content:"";position:fixed;left:50%;top:50%;width:100vmax;height:100vmax;z-index:401;pointer-events:none;transform:translate(-50%,-50%) scale(.3);
  background:linear-gradient(#0b0b0c,#0b0b0c) center/14px 100% no-repeat,linear-gradient(#0b0b0c,#0b0b0c) center/100% 14px no-repeat;box-shadow:inset 0 0 0 18px #0b0b0c;animation:einflug-kreuz 1.1s .05s both}
@keyframes einflug-licht{0%{opacity:1}55%{opacity:1}100%{opacity:0}}
@keyframes einflug-kreuz{0%{transform:translate(-50%,-50%) scale(.35);opacity:1}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
html.ruhig.einflug body::before,html.ruhig.einflug body::after{animation:none;display:none}
@media (prefers-reduced-motion:reduce){html.einflug body::before,html.einflug body::after{display:none}}
/* Tageszeit ohne 3D (Ersatzbild) */
html[data-zeit="tag"] .haus-ersatz{filter:brightness(1.08) saturate(1.05)}

/* ===== Runde 5: Brei-Maschine ===== */
.km-sek{background:#0b0b0c;color:#f3f1ec}
.km-kopf{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:36px}.km-kopf>p{margin:0;color:#cfcdc6}
.km-pult{display:grid;grid-template-columns:1.3fr 1.3fr 1fr auto;gap:16px;align-items:end;background:#141418;border:1px solid #2a2a31;padding:22px;margin-bottom:34px}
.km-pult label{display:flex;flex-direction:column;gap:8px}.km-pult label span{font:700 14px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a3a3ad}
.km-pult input,.km-pult select{height:54px;border:2px solid #34343d;background:#0b0b0c;color:#f3f1ec;font:500 18px var(--sans);padding:0 14px;border-radius:0;width:100%}
.km-pult input:focus,.km-pult select:focus{outline:none;border-color:var(--gelb)}
.km-pult.fehlt input[name=firma]{border-color:#ff6a5a}
.km-fenster{border:1px solid #2a2a31;background:#1b1b20;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.km-leiste{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#232329}.km-leiste i{width:11px;height:11px;border-radius:50%;background:#3d3d46}
.km-url{margin-left:14px;flex:1;max-width:420px;height:24px;border-radius:12px;background:#15151a;color:#9d9da8;font:400 14px var(--mono);display:flex;align-items:center;padding:0 12px;overflow:hidden;white-space:nowrap}
.km-flaeche{position:relative;overflow:hidden;aspect-ratio:1200/750;background:#07070c}
.km-brei{position:absolute;left:0;top:0;width:1200px;height:750px;transform-origin:0 0;overflow:hidden;background:#07070c;color:#e7e7f0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
.km-brei .au{position:absolute;inset:-200px;background:radial-gradient(40% 35% at 30% 20%,rgba(124,58,237,.55),transparent 70%),radial-gradient(35% 30% at 72% 25%,rgba(59,130,246,.45),transparent 70%),radial-gradient(30% 30% at 55% 70%,rgba(236,72,153,.18),transparent 70%);filter:blur(40px)}
.km-brei .gr{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent)}
.km-brei nav{position:relative;display:flex;align-items:center;justify-content:space-between;margin:20px auto 0;width:1000px;padding:10px 12px 10px 20px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04)}
.km-brei .lg{display:flex;gap:10px;align-items:center;font-weight:600;font-size:17px}.km-brei .lg i{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#8b5cf6,#3b82f6);box-shadow:0 0 20px rgba(139,92,246,.6)}
.km-brei ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14px;color:#a6a6b8}
.km-brei .bt{padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;background:linear-gradient(135deg,#8b5cf6,#3b82f6);color:#fff;box-shadow:0 8px 30px rgba(99,102,241,.45)}
.km-brei .hero{position:relative;margin-top:62px}
.km-brei .pill{display:inline-flex;padding:6px 13px;border-radius:999px;border:1px solid rgba(167,139,250,.35);background:rgba(139,92,246,.1);font-size:13px;color:#c4b5fd}
.km-brei h3{font-size:68px;font-weight:800;letter-spacing:-.045em;line-height:1.03;margin:22px 0 18px}.km-brei h3 em{font-style:normal;background:linear-gradient(90deg,#a78bfa,#60a5fa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.km-brei .sub{font-size:18px;color:#9b9bb0;max-width:600px;margin:0 auto;line-height:1.5}
.km-brei .cta{display:flex;gap:12px;justify-content:center;margin-top:30px}.km-brei .cta .bt{padding:14px 24px;font-size:15px}.km-brei .gh{padding:14px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-weight:600;font-size:15px}
.km-brei .tr{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:24px;color:#8b8b9e;font-size:13px}.km-brei .av{display:flex}.km-brei .av b{width:26px;height:26px;border-radius:50%;border:2px solid #07070c;margin-left:-7px;background:linear-gradient(135deg,#6b7280,#9ca3af)}.km-brei .st{color:#fbbf24}
.km-brei .bento{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:1000px;margin:40px auto 0;text-align:left}
.km-brei .k{padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.km-brei .k h4{margin:0 0 6px;font-size:17px}.km-brei .k p{margin:0;font-size:14px;color:#8b8b9e}
.km-unser{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s,transform 1s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.km-unser img{width:100%;height:100%;object-fit:cover;object-position:top}
.km-buehne.gewendet .km-unser{opacity:1;transform:none;pointer-events:auto}
.km-buehne.gewendet .km-brei{filter:blur(6px) brightness(.5);transition:filter .7s}
.km-laden{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:16px;background:#07070c;color:#c4b5fd;font:500 20px system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .25s}
.km-laden i{width:220px;height:4px;border-radius:2px;background:linear-gradient(90deg,#8b5cf6,#3b82f6) 0/0% 100% no-repeat,#22222b}
.km-buehne.laedt .km-laden{opacity:1}.km-buehne.laedt .km-laden i{animation:km-laden .8s linear forwards}
@keyframes km-laden{to{background-size:100% 100%,auto}}
.km-urteil{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.km-stempel{align-self:flex-start;font:600 clamp(26px,2.4vw,34px)/1.15 var(--hand);color:#ff8a7a;transform:rotate(-1.5deg);margin:0}
.km-unser-text{margin:0;font-size:19px;color:#f3f1ec}.km-unser-text b{color:var(--gelb)}
@media (max-width:980px){.km-kopf{grid-template-columns:1fr}.km-pult{grid-template-columns:1fr 1fr}.km-pult .anhaenger{grid-column:1/-1}}
@media (max-width:700px){.km-pult{grid-template-columns:1fr;padding:16px}.km-url{font-size:14px}}
.handyfoto:last-child{grid-column:1/-1}
.reiter-knopf.vis{border-style:dashed}
.vis-hinweis{margin:14px 0 0;font:600 22px/1.3 var(--hand);color:#1b1b1f;max-width:60ch}
[hidden]{display:none!important}
.raeume-knopf span{white-space:nowrap}
@media (max-width:700px){.kopf-rechts{gap:6px}.ton-schalter{padding:0 9px;margin-right:0}.ton-schalter .kipp{width:17px;height:24px}.ton-schalter .kipp i{left:4px;right:4px;height:8px}.ton-schalter.an .kipp i{top:12px}.raeume-knopf{padding:0 11px 0 9px;gap:8px}}
@media (max-width:400px){.raeume-knopf{font-size:14px;padding:0 9px 0 8px;gap:6px}.raeume-knopf svg{width:20px}.ton-schalter{padding:0 7px}.klingel-klein{padding:0 9px}.kopf-rechts{gap:5px}}@media (max-width:374px){.raeume-knopf span{display:none}.raeume-knopf{padding:0 11px}}
.fs-film .abspielen{flex-wrap:nowrap;max-width:none}.fs-film .abspielen small{margin-left:4px}
.leinwand{background:#050506}
@media (max-width:700px){
  .fs-rein{display:grid;grid-template-columns:46% 1fr;gap:16px 18px;align-items:center}
  .fs-rein .fs-label{grid-column:1/-1}
  .fs-handy{width:auto;margin:0 0 4px;grid-column:1;grid-row:2;transform:rotate(-2.5deg)}
  .fs-handy figcaption{font-size:14px;padding:8px 10px 10px}
  .fs-auftrag{display:contents}
  .fs-auftrag>div{grid-column:1/-1}
  .fs-auftrag>div:first-child{grid-column:2;grid-row:2}
}
main{overflow-x:clip}

/* ===== Runde 6: begehbare 3D-Räume ===== */
canvas.r3,.r3-marken,.r3-stationen,.r3-tipp{display:none}
.raumkopf.r3-an{display:block;height:330vh;min-height:0;padding:0;overflow:clip}
.raumkopf.r3-an::before,.raumkopf.r3-an::after{display:none}
.r3-an .r3-fix{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-end;padding:120px 0 clamp(50px,8vh,90px);overflow:hidden;background:#050506}
.r3-an .r3-fix::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(1 - var(--r3p,0) * 4);background:linear-gradient(90deg,rgba(7,7,8,.9) 0%,rgba(7,7,8,.6) 34%,rgba(7,7,8,0) 66%),linear-gradient(0deg,rgba(7,7,8,.85),transparent 45%)}
.r3-an .r3-fix::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 clamp(10px,1.4vw,18px) #050506,inset 0 0 140px rgba(255,200,90,.14);pointer-events:none}
.r3-an .r3-fix>video{display:none}
.r3-an canvas.r3{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0}
.r3-an .wrap{opacity:calc(1 - var(--r3p,0) * 7);transform:translateY(calc(var(--r3p,0) * -160px))}
.r3-an.unterwegs .wrap{pointer-events:none}
.r3-an .schild-raum{opacity:calc(1 - var(--r3p,0) * 6)}
.r3-an .r3-marken{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.r3-punkt{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .5s;will-change:transform}
.r3-punkt i{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--licht);box-shadow:0 0 0 6px rgba(255,200,90,.25),0 0 30px rgba(255,200,90,.8);animation:r3puls 1.8s ease-in-out infinite}
.r3-punkt b{font:400 22px var(--anton);text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.r3-punkt.sichtbar{opacity:.45}.r3-punkt.da{opacity:1}.r3-punkt.da b{opacity:1;transform:none}
@keyframes r3puls{50%{box-shadow:0 0 0 12px rgba(255,200,90,0),0 0 40px rgba(255,200,90,.9)}}
.r3-an .r3-stationen{display:flex;flex-direction:column;gap:8px;position:absolute;right:var(--rand);bottom:clamp(50px,8vh,90px);z-index:4;width:min(330px,40vw);opacity:clamp(0,calc((var(--r3p,0) - .06) * 10),1);transition:opacity .2s}
.r3-stationen a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:12px 16px;background:rgba(11,11,12,.72);border-left:4px solid transparent;color:#f3f1ec;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,border-color .3s,transform .3s}
.r3-stationen a span{grid-row:1/3;font:400 26px/1 var(--anton);color:#8f8f99}
.r3-stationen a b{font:700 17px var(--sans)}.r3-stationen a small{font:400 15px var(--sans);color:#c9c7c0}
.r3-stationen a.an{border-color:var(--licht);background:rgba(11,11,12,.92);transform:translateX(-8px)}.r3-stationen a.an span{color:var(--licht)}
.r3-stationen a:hover{background:rgba(11,11,12,.92)}
.r3-stationen .r3-weiter{grid-template-columns:1fr;background:var(--gelb);color:#000;margin-top:6px}.r3-stationen .r3-weiter small{color:#222;font-family:var(--hand);font-size:18px}
.r3-an .r3-tipp{display:block;position:absolute;left:50%;bottom:18px;z-index:4;transform:translateX(-50%);margin:0;font:600 20px var(--hand);color:var(--licht);opacity:calc(1 - var(--r3p,0) * 20);pointer-events:none;animation:r3tipp 2.4s ease-in-out infinite}
@keyframes r3tipp{50%{transform:translate(-50%,6px)}}
@media (max-width:700px){
  .raumkopf.r3-an{height:300vh}
  .r3-an .r3-fix{padding:84px 0 22px;align-items:flex-end}
  .r3-an .r3-fix::before{background:linear-gradient(0deg,rgba(7,7,8,.95) 0%,rgba(7,7,8,.75) 40%,rgba(7,7,8,0) 70%)}
  .r3-an .r3-stationen{left:var(--rand);right:var(--rand);width:auto;bottom:22px;flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .r3-stationen a{flex:0 0 78%;scroll-snap-align:start}
  .r3-stationen .r3-weiter{flex-basis:60%;margin-top:0}
  .r3-punkt b{font-size:18px}
  .r3-an .r3-tipp{bottom:auto;top:84px}
}
@media (prefers-reduced-motion:reduce){.r3-punkt i,.r3-an .r3-tipp{animation:none}}

/* Runde 7: Die Villa an der Ostsee */
.villa{position:absolute;inset:0;overflow:hidden;background:#0a1430;transition:transform 1.15s cubic-bezier(.55,0,.75,.2),filter 1.15s}
.villa img,.villa video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.v-bild{opacity:0;transition:opacity .8s}.v-bild.an{opacity:1}
.v-loop,.v-film{opacity:0;transition:opacity .55s;background:transparent}
.v-loop.an,.v-film.an{opacity:1}
.v-film.an{transition:none}
.villa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,16,.62) 0%,rgba(6,8,16,.3) 34%,rgba(6,8,16,0) 52%),linear-gradient(0deg,rgba(6,8,16,.45) 0%,rgba(6,8,16,0) 30%);transition:opacity .8s}
.villa.flug{transform:scale(3.4);filter:brightness(1.5)}
.v-schild{position:absolute;z-index:2;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.v-schild.an{opacity:1;transform:translate(-50%,-50%)}
.v-schild span{display:block;font:700 1em/1.15 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#3b2a0c;padding:.5em .7em;max-width:10.5em;text-align:center;overflow-wrap:anywhere;hyphens:auto;
  background:linear-gradient(160deg,#f6e3a8,#d9ad5b 45%,#a8792f 75%,#e8c77d);border-radius:3px;box-shadow:0 .3em .9em rgba(0,0,0,.55),0 0 1.6em rgba(255,200,90,.45),inset 0 0 0 1px rgba(255,255,255,.35)}
@media (max-width:700px){
  .villa{inset:0 0 auto 0;height:62svh;transform:translateY(52svh);transition:transform .9s cubic-bezier(.2,.8,.2,1),filter 1.15s}
  .buehne.drin .villa{transform:none}
  .buehne.drin .villa.flug{transform:scale(3.4);transition:transform 1.15s cubic-bezier(.55,0,.75,.2),filter 1.15s}
  .villa::after{background:linear-gradient(0deg,rgba(7,7,8,1) 0%,rgba(7,7,8,0) 30%),linear-gradient(180deg,rgba(7,7,8,.8) 0%,rgba(7,7,8,0) 24%)}
}
@media (prefers-reduced-motion:reduce){.villa,.villa.flug{transition:none;transform:none}}
html.ruhig .villa.flug{transform:none}

.raumkopf h1.lang{font-size:clamp(40px,5vw,74px)}
@media (max-width:700px){.raumkopf h1.lang{font-size:clamp(34px,9.6vw,48px)}}

/* Runde 8: Räume innen als Bildbühne (wie aussen) */
.r3-an .raumbuehne{position:absolute;inset:0;transform:none;background:#0a1430}
.raumbuehne::after{display:none}
.r3-an .raumbuehne .v-eintritt{z-index:6;opacity:0;pointer-events:none;transition:opacity .6s}
.r3-an .raumbuehne .v-eintritt.an{opacity:1}
.r3-an .raumbuehne .v-eintritt.weg{opacity:0}
@media (max-width:700px){
  .r3-an .raumbuehne,.buehne.drin .r3-an .raumbuehne{inset:0;height:auto;transform:none}
}

/* Logo C mit Herz: Wortmarke im Kopf, das Herz im Fenster schlägt leise */
.marke{gap:12px}.marke .zeichen{display:block;width:44px;height:44px;flex:none;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.marke .wortmarke{display:block;height:34px;width:auto;color:#f3f1ec;overflow:visible;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.kopf::before{content:"";position:absolute;inset:0 0 -30px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,8,16,.55),rgba(6,8,16,0))}
.marke .wortmarke .lg-herz,.marke .wortmarke .lg-glanz{transform-box:fill-box;transform-origin:50% 55%;animation:herzschlag 5.5s ease-in-out 1.2s infinite}
@keyframes herzschlag{0%,18%,100%{transform:scale(1);opacity:1}6%{transform:scale(1.22)}10%{transform:scale(1.02)}13%{transform:scale(1.16)}}
.marke:hover .wortmarke .lg-herz{animation-duration:1.2s}
@media (max-width:700px){.marke .wortmarke{height:24px}.marke .zeichen{width:36px;height:36px;border-radius:8px}.marke{gap:9px}}
@media (max-width:374px){.marke .wortmarke{height:19px}.marke .zeichen{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.marke .wortmarke .lg-herz,.marke .wortmarke .lg-glanz{animation:none}}
html.ruhig .marke .wortmarke .lg-herz,html.ruhig .marke .wortmarke .lg-glanz{animation:none}
html[data-zeit="tag"] .buehne:not(.drin) .villa::after,html[data-zeit="morgen"] .buehne:not(.drin) .villa::after{background:linear-gradient(90deg,rgba(6,10,22,.82) 0%,rgba(6,10,22,.6) 34%,rgba(6,10,22,.15) 55%,rgba(6,10,22,0) 66%),linear-gradient(180deg,rgba(6,10,22,.45) 0%,rgba(6,10,22,0) 18%)}
@media (max-width:700px){html[data-zeit="tag"] .buehne:not(.drin) .villa::after,html[data-zeit="morgen"] .buehne:not(.drin) .villa::after{background:linear-gradient(0deg,rgba(7,7,8,1) 0%,rgba(7,7,8,0) 30%),linear-gradient(180deg,rgba(7,7,8,.8) 0%,rgba(7,7,8,0) 24%)}}
.scrollzeichen{color:#e9e7e1;text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}

.klingelt{transform:translateY(2px) scale(.98)}.klingelt i{box-shadow:0 0 0 6px rgba(255,200,90,.35),0 0 26px rgba(255,200,90,.9)!important}

/* Wortmarke Herzhaus (Entwurf 4): der blaue Zug verbindet Herz und Haus */
.marke .zeichen{display:none}
.marke .wortmarke{height:54px}
.marke .wortmarke .lg-zug{transform-box:fill-box;transform-origin:50% 100%;animation:zugan 1.1s cubic-bezier(.2,.8,.2,1) .35s both}
@keyframes zugan{0%{opacity:0;transform:translateY(-22%)}60%{opacity:1}100%{opacity:1;transform:none}}
.marke:hover .wortmarke .lg-zug{filter:brightness(1.18)}
.marke svg{filter:none}.marke:hover svg{filter:none}
@media (max-width:700px){.marke .wortmarke{height:37px}}
@media (max-width:374px){.marke .wortmarke{height:30px}}
@media (prefers-reduced-motion:reduce){.marke .wortmarke .lg-zug{animation:none}}
html.ruhig .marke .wortmarke .lg-zug{animation:none}
.fuss-marke{margin:0 0 34px}.fuss-marke svg{display:block;height:78px;width:auto;max-width:100%}
@media (max-width:700px){.fuss-marke svg{height:58px}}
/* Brei-Maschine mit echter Webadresse */
.km-pult{grid-template-columns:1.7fr 1fr auto}
.km-ohne{grid-column:1/-1;margin:-4px 0 0;color:#a3a3ad;font-size:15px}
.km-pult.fehlt input[name=adresse]{border-color:#ff6a5a}
.km-marke{margin-left:auto;font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd;opacity:.8}
.km-echt{position:absolute;left:0;top:0;width:1200px;height:750px;border:0;transform-origin:0 0;background:#fff;pointer-events:none}
.km-buehne.wartet .km-laden{opacity:1}.km-buehne.wartet .km-laden i{animation:km-warte 1.6s ease-in-out infinite}
@keyframes km-warte{0%{background-size:0% 100%,auto}60%{background-size:100% 100%,auto}100%{background-size:100% 100%,auto;opacity:.4}}
.km-buehne.gewendet .km-echt{filter:blur(6px) brightness(.5);transition:filter .7s}
.km-antrag{margin-top:34px;background:#f3efe6;color:#141418;padding:clamp(20px,3vw,34px);border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.45);transform:rotate(-.4deg)}
.km-antrag-titel{font:400 clamp(30px,3.4vw,44px)/1 var(--anton);text-transform:uppercase;margin:0 0 10px;color:#141418}
.km-antrag-satz{margin:0 0 20px;font-size:18px;color:#3b3a36;max-width:60ch}
.km-antrag-raster{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.km-antrag label{display:flex;flex-direction:column;gap:7px}.km-antrag label span{font:700 14px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#141418}.km-antrag label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:#6a6862}
.km-antrag input,.km-antrag textarea{border:2px solid #c9c3b6;background:#fff;color:#141418;font:500 18px var(--sans);padding:12px 14px;border-radius:0;width:100%;box-sizing:border-box}
.km-antrag input{height:54px}.km-antrag textarea{resize:vertical;min-height:120px;line-height:1.45}
.km-antrag input:focus,.km-antrag textarea:focus{outline:none;border-color:var(--kobalt)}
.km-antrag .fehlt{border-color:#d9412f}
.km-ideen{grid-column:1/-1}
.km-falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.km-antrag .anhaenger{background:var(--kobalt);color:#fff}
.km-antrag-fehler{margin:12px 0 0;color:#b3261e;font-weight:600;font-size:16px}
.km-danke{margin-top:30px}.km-danke p{font-size:19px;color:#e9e7e1;margin:8px 0 0}
.km-weiter{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.5vw,34px);align-items:center;margin-top:48px;padding:22px clamp(18px,2.5vw,30px);border:1px solid #2f2f37;background:linear-gradient(120deg,#141418,#1a1712);color:#f3f1ec;text-decoration:none;transition:border-color .3s,transform .3s}
.km-weiter:hover{border-color:#b8975a;transform:translateY(-2px)}
.km-weiter img{width:clamp(150px,16vw,210px);height:auto;display:block}
.km-weiter-text{font-size:18px;line-height:1.5;color:#d6d4ce}.km-weiter-text b{color:#f3f1ec}
.km-weiter-knopf{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:700 16px var(--sans);padding:14px 18px;border:2px solid #b8975a;color:#e8d3a3}
.km-weiter-knopf i{font-style:normal}
@media (max-width:980px){.km-pult{grid-template-columns:1fr 1fr}.km-antrag-raster{grid-template-columns:1fr 1fr}.km-weiter{grid-template-columns:1fr;justify-items:start}}
@media (max-width:700px){.km-pult{grid-template-columns:1fr}.km-antrag-raster{grid-template-columns:1fr}.km-antrag{transform:none}.km-marke{display:none}}
.km-sek .klein-hinweis{font:400 15px/1.5 var(--sans)!important;letter-spacing:0;color:#a3a3ad;margin:18px 0 0}
.km-antrag,.km-danke,.km-buehne{scroll-margin-top:110px}

/* Haustür der Villa: nachtblaue Tür, Messingschild, warmes Licht */
.klingelbrett{background:radial-gradient(60% 70% at 78% 40%,rgba(255,190,105,.20),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 2px,transparent 2px 160px,rgba(0,0,0,.18) 160px 163px,transparent 163px 320px),linear-gradient(180deg,#14223f,#0c1630);color:#f3eee3}
.klingelbrett .kicker{color:#e6c47e}
.klingelbrett h2{color:#f7f2e8}
.klingel-raster .lead{color:#d3d9e6}
.klingelbrett .hand{color:#e6c47e}
.tableau{background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(135deg,#f4d996 0%,#c99a45 26%,#ebca80 50%,#a9792e 76%,#dcb465 100%);padding:52px 26px 34px;border-radius:12px;box-shadow:0 46px 90px rgba(0,0,0,.55),0 0 0 1px #6f511c,0 0 0 7px rgba(10,18,38,.6),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(0,0,0,.25)}
.tableau::before,.tableau::after{width:14px;height:14px;margin-left:-7px;background:radial-gradient(circle at 40% 35%,#f8e2a8,#a77a2f 60%,#6b4d1a);box-shadow:0 1px 1px rgba(255,255,255,.5),inset 0 0 0 1px rgba(80,55,15,.6)}
.tableau::before{top:12px}.tableau::after{bottom:12px}
.tableau-kopf{position:absolute;top:27px;left:0;right:0;margin:0;text-align:center;font:600 14px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:#5a4116;text-shadow:0 1px 0 rgba(255,240,200,.7)}
.knopfzeile{gap:16px;padding:12px 0;border-bottom:1px solid rgba(90,64,20,.35);box-shadow:0 1px 0 rgba(255,236,190,.35);color:#13203f}
.knopfzeile:last-child{box-shadow:none}
.knopfzeile i{flex:0 0 38px;height:38px;background:radial-gradient(circle at 38% 32%,#fff4d2,#e3bf6e 38%,#a17632 72%,#6f501c);box-shadow:0 0 0 3px #7a5a22,0 0 0 6px #e4c27a,0 4px 8px 6px rgba(60,40,10,.35)}
.knopfzeile:hover i,.knopfzeile:focus-visible i{background:radial-gradient(circle at 40% 35%,#fffbea,#ffd98a 42%,#d0912e 78%,#8a5d1a);box-shadow:0 0 0 3px #7a5a22,0 0 0 6px #f0d08a,0 4px 8px 6px rgba(60,40,10,.3),0 0 26px rgba(255,205,110,.95)}
.knopfzeile .namensschild{background:linear-gradient(180deg,#fbf6ea,#efe6d2);border:1px solid #8a6a2e;border-radius:3px;padding:9px 14px;box-shadow:inset 0 2px 4px rgba(60,40,10,.18),0 1px 0 rgba(255,240,200,.6)}
.knopfzeile b{color:#13203f}
.knopfzeile span{color:#4b4a46}
html.kontrast .klingelbrett p{color:#fff!important}html.kontrast .klingelbrett .tableau p{color:#2d1f05!important}

.km-brei{filter:hue-rotate(var(--hue,0deg))}.km-brei .st{filter:hue-rotate(calc(-1*var(--hue,0deg)))}.km-buehne.gewendet .km-brei{filter:hue-rotate(var(--hue,0deg)) blur(6px) brightness(.5)}

.villa{isolation:isolate}.villa::after{z-index:1}
.km-antrag .km-web{grid-column:1/-1}
.km-antrag label.km-keine{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px;margin:-4px 0 4px;cursor:pointer;font:500 17px/1.3 var(--sans);color:#141418}
.km-antrag .km-keine input{width:24px;height:24px;flex:none;accent-color:var(--kobalt);margin:0}
.km-antrag .km-keine span{font:500 17px/1.3 var(--sans)!important;letter-spacing:0!important;text-transform:none!important}
.km-antrag input:disabled{background:#eee9dd;color:#8a857a}
.km-antrag .km-keine input{-webkit-appearance:checkbox;appearance:auto;height:24px;min-height:0;padding:0;border:0;box-shadow:none}
.km-antrag .fehlt:focus{border-color:#d9412f}
/* Klingeln aus Messing, passend zur Haustür */
.klingel-gross{background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),linear-gradient(135deg,#f2d690 0%,#c99a45 34%,#e7c579 58%,#ad7d31 100%);color:#1d1507;border:1px solid #7a5a22;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px rgba(0,0,0,.28)}
.klingel-gross i{background:radial-gradient(circle at 38% 32%,#fff4d2,#e3bf6e 38%,#a17632 72%,#6f501c);box-shadow:0 0 0 3px #7a5a22,0 0 0 5px #ecd08e}
.klingel-gross:hover i,.klingel-gross:focus-visible i{background:radial-gradient(circle at 40% 35%,#fffbea,#ffd98a 42%,#d0912e 78%,#8a5d1a);box-shadow:0 0 0 3px #7a5a22,0 0 0 5px #f0d08a,0 0 24px rgba(255,205,110,.95)}
.klingel-gross small{color:#3b2a0c;opacity:.85}
.klingel-klein i{background:radial-gradient(circle at 38% 32%,#fff4d2,#e3bf6e 38%,#a17632 72%,#6f501c);box-shadow:0 0 0 2px #7a5a22,0 0 0 4px #3a2d14,0 0 14px rgba(255,200,110,.45)}
.klingel-klein:hover i{box-shadow:0 0 0 2px #7a5a22,0 0 0 4px #3a2d14,0 0 20px rgba(255,205,110,.9)}
/* Der Raum als Menü: Lichtpunkt am Gegenstand, Fenster im Raum */
.r3-licht{position:absolute;z-index:5;left:0;top:0;display:flex;align-items:center;gap:14px;padding:0;background:none;border:0;color:#fff;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none;text-align:left}
.r3-licht.an{opacity:1;transform:none;pointer-events:auto}
.r3-licht[hidden]{display:none}
.r3-licht i{flex:none;width:22px;height:22px;border-radius:50%;margin:-11px 0 0 -11px;background:radial-gradient(circle,#fff6dc 0 30%,#ffc85a 60%,rgba(255,200,90,0) 72%);box-shadow:0 0 0 8px rgba(255,200,90,.22),0 0 36px rgba(255,200,90,.9);animation:r3puls 1.8s ease-in-out infinite}
.r3-licht-text{display:flex;flex-direction:column;gap:2px;padding:12px 16px;background:rgba(10,14,28,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-left:3px solid var(--licht);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.r3-licht-text b{font:400 24px/1.05 var(--anton);text-transform:uppercase;letter-spacing:.01em}
.r3-licht-text small{font:400 16px/1.3 var(--sans);color:#e9e4d8}
.r3-licht-los{align-self:stretch;display:flex;align-items:center;padding:0 16px;background:var(--licht);color:#1b1305;font:700 15px var(--sans);box-shadow:0 14px 34px rgba(0,0,0,.45);transition:background .2s}
.r3-licht:hover .r3-licht-los,.r3-licht:focus-visible .r3-licht-los{background:#ffe1a0}
.r3-raus{grid-template-columns:1fr!important;margin-top:6px}
.r3-stationen .r3-raus small,.r3-stationen .r3-weiter small{grid-row:auto}
.r3-stationen .r3-weiter{margin-top:0;background:rgba(11,11,12,.72);color:#f3f1ec}.r3-stationen .r3-weiter small{color:#c9c7c0}
.r3-stationen .r3-raus{background:var(--gelb);color:#000}.r3-stationen .r3-raus small{color:#222;font-family:var(--hand);font-size:18px}
html.fenster-offen,html.fenster-offen body{overflow:hidden}
.r3-fenster{position:fixed;inset:0;z-index:300}
.r3-fenster[hidden]{display:none}
.r3-fenster-grund{position:absolute;inset:0;background:rgba(4,7,16,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .38s}
.r3-fenster-rahmen{position:absolute;left:50%;top:50%;width:min(1240px,94vw);height:min(90vh,980px);transform:translate(-50%,-46%) scale(.97);opacity:0;transition:opacity .38s,transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;background:#0b0b0e;border:1px solid rgba(255,200,90,.35);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 8px rgba(5,5,6,.6);overflow:hidden}
.r3-fenster.auf .r3-fenster-grund{opacity:1}.r3-fenster.auf .r3-fenster-rahmen{opacity:1;transform:translate(-50%,-50%)}
.r3-fenster-kopf{flex:none;display:flex;align-items:center;gap:14px;padding:12px 14px 12px 20px;background:#111116;border-bottom:1px solid #26262e}
.r3-fenster-nr{font:400 26px/1 var(--anton);color:var(--licht)}
.r3-fenster-titel{flex:1;min-width:0;font:600 17px/1.3 var(--sans);color:#f3f1ec;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r3-zu{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;background:var(--licht);color:#1b1305;border:0;font:700 15px var(--sans);cursor:pointer}
.r3-zu:hover{background:#ffe1a0}
.r3-fenster-inhalt{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.r3-fenster-inhalt>section{margin:0}
html.geht body{opacity:0;transition:opacity .42s}
@media (max-width:700px){
  .r3-licht{gap:10px;flex-wrap:wrap;max-width:calc(100vw - 2*var(--rand))}
  .r3-licht-text{padding:10px 13px}.r3-licht-text b{font-size:21px}.r3-licht-text small{font-size:15px}
  .r3-licht-los{padding:12px 14px;font-size:15px}
  .r3-an .r3-stationen{gap:6px;bottom:16px}
  .r3-stationen a{flex:0 0 auto!important;padding:9px 12px;gap:0 8px;align-items:center}
  .r3-stationen a span{grid-row:auto;font-size:20px}
  .r3-stationen a small{display:none}
  .r3-stationen a b{font-size:15px;white-space:nowrap}
  .r3-stationen .r3-raus,.r3-stationen .r3-weiter{display:flex;align-items:center}
  .r3-stationen .r3-raus small,.r3-stationen .r3-weiter small{display:none}
  .r3-stationen a.an{transform:none}
  .r3-fenster-rahmen{left:0;top:auto;bottom:0;width:100%;height:calc(100% - 10px);transform:translateY(40px);border:0;border-top:1px solid rgba(255,200,90,.4);border-radius:16px 16px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
  .r3-fenster.auf .r3-fenster-rahmen{transform:none}
  .r3-fenster-kopf{padding:10px 10px 10px 16px}
  .r3-fenster-titel{font-size:15px}
  .r3-zu{padding:0 12px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.r3-licht i{animation:none}.r3-fenster-rahmen,.r3-fenster-grund{transition:none}}
.r3-fenster-inhalt>section{padding-top:clamp(36px,5vw,70px)!important;padding-bottom:clamp(40px,5vw,80px)!important}
.r3-fenster-inhalt h2.laut{font-size:clamp(40px,4.6vw,72px)}
.r3-fenster-inhalt .km-kopf{grid-template-columns:1fr 1fr}
@media (max-width:980px){.r3-fenster-inhalt .km-kopf{grid-template-columns:1fr}}
.r3-fenster:not(.auf){pointer-events:none}
.r3-fenster-grund,.r3-fenster-kopf{touch-action:none}
html{scrollbar-gutter:stable}
.r3-fenster-inhalt .tag-uhr{top:0}
/* Direkt zu den Räumen: immer da, wenn man im Haus ist */
.ueberspringen{position:absolute;left:50%;bottom:22px;z-index:6;transform:translate(-50%,12px);display:inline-flex;align-items:center;gap:10px;padding:11px 18px;background:rgba(10,14,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,200,90,.45);color:#f3f1ec;font:600 15px var(--sans);text-decoration:none;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s,background .2s}
.ueberspringen i{width:9px;height:9px;border-right:2px solid var(--licht);border-bottom:2px solid var(--licht);transform:rotate(45deg) translate(-2px,-2px)}
.buehne.drin .ueberspringen{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.ueberspringen:hover,.ueberspringen:focus-visible{background:rgba(10,14,28,.92)}
@media (max-width:700px){.ueberspringen{bottom:auto;top:calc(62svh - 118px);left:var(--rand);transform:translateY(12px);white-space:nowrap;font-size:15px;padding:9px 13px}.buehne.drin .ueberspringen{transform:none}}
/* Jeder Raum hat sein eigenes Licht */
.raumkopf[data-raum="studio"]{--licht:#ff9a78}
.raumkopf[data-raum="maschinenraum"]{--licht:#82d9ff}
.raumkopf[data-raum="zentrale"]{--licht:#a6b9ff}
.raumkopf[data-raum="balkon"]{--licht:#ffb46e}
.raumkopf[data-raum="buero"]{--licht:#bfe8a4}
.r3-licht i{background:radial-gradient(circle,#fff 0 28%,var(--licht) 60%,transparent 72%);box-shadow:0 0 0 8px color-mix(in srgb,var(--licht) 25%,transparent),0 0 36px var(--licht)}
@keyframes r3licht{50%{box-shadow:0 0 0 14px transparent,0 0 46px var(--licht)}}
.r3-licht i{animation-name:r3licht}
.briefbogen .fehlt{border-color:#d9412f}
.briefbogen label em{font-style:normal;text-transform:none;letter-spacing:0;font-family:var(--sans);color:#8a857a}
.brief-fehler{margin:10px 0 0;color:#b3261e;font:600 16px var(--sans)}
.brief-danke{align-self:center;padding:clamp(22px,3vw,40px);background:#fffdf6;box-shadow:0 24px 50px rgba(0,0,0,.22)}
.brief-danke .hand{font-size:clamp(30px,3vw,42px);color:var(--kobalt);margin:0 0 8px}.brief-danke p{font-size:19px;color:#1b1b1b;margin:0}
video::cue{background:rgba(5,6,10,.72);color:#fff;font:500 18px/1.35 var(--sans)}

/* Von Hand animiert · Team Tumult */
.handkino{background:#08080a;border-top:1px solid #1b1b20}
.handkino .leinwand video{object-fit:contain;background:#000}
.handkino .kinokarte img{object-fit:cover}
@media (min-width:981px){.handkino .kino-raster{align-items:stretch}.handkino .programm{max-height:none;height:0;min-height:100%}}
.galerie .gal-wand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);margin-top:clamp(34px,4vw,56px);align-items:start}
.gal-bild{margin:0;background:#fffdf7;padding:clamp(8px,1vw,12px) clamp(8px,1vw,12px) 14px;box-shadow:0 1px 0 #cfc7b6,0 18px 40px rgba(40,30,10,.14);transform:rotate(var(--dreh,0deg));transition:transform .4s ease,box-shadow .4s ease}
.gal-bild:nth-child(3n+2){--dreh:.6deg}.gal-bild:nth-child(3n){--dreh:-.5deg}
.gal-bild:hover{transform:rotate(0) translateY(-4px);box-shadow:0 1px 0 #cfc7b6,0 26px 50px rgba(40,30,10,.2)}
.gal-bild img{display:block;width:100%;height:auto;background:#e8e1d2}
.gal-bild.gross{grid-column:span 2;grid-row:span 2;align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto}
.gal-bild.gross img{height:100%;object-fit:cover}
.gal-bild figcaption{font-size:15px;line-height:1.4;color:#3c3830;margin-top:10px}
.gal-bild figcaption b{display:block;font:400 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b665c;margin-bottom:2px}
.gal-kunden{margin-top:clamp(56px,7vw,96px);text-align:center}
.gal-kunden img{display:block;width:min(100%,1100px);height:auto;margin:18px auto 0}
html.kontrast .gal-bild figcaption{color:#000}
@media (max-width:980px){.galerie .gal-wand{grid-template-columns:repeat(2,minmax(0,1fr))}.gal-bild.gross{grid-row:auto;display:block}.gal-bild.gross img{height:auto}}
@media (max-width:700px){.gal-kunden img{width:100%}.galerie .gal-wand{grid-template-columns:1fr}.gal-bild.gross{grid-column:auto}.gal-bild{--dreh:0deg!important}.gal-bild figcaption{font-size:16px}}

/* Grafik, Marke, Raum · Partnerstudio */
.markenwand{background:#0b0b0c;padding-top:0}
.mw-film{position:relative;margin-bottom:clamp(50px,6vw,90px)}
.mw-film video{display:block;width:100%;aspect-ratio:1920/800;object-fit:cover;background:#111}
.mw-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);margin-top:clamp(30px,4vw,50px)}
.mw-bild{margin:0}
.mw-bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#1a1a1e}
.mw-bild figcaption{font-size:15px;line-height:1.4;color:#c9c6be;margin-top:12px}
.mw-bild figcaption b{display:block;font:400 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--licht);margin-bottom:2px}
@media (max-width:700px){.mw-film video{aspect-ratio:16/9}.mw-reihe{grid-template-columns:1fr}.mw-bild figcaption{font-size:16px}}

/* Kreativraum */
.kr-kopf{background:radial-gradient(60% 70% at 80% 20%,rgba(255,200,90,.16),transparent 70%),#08080a;padding:clamp(140px,17vw,220px) 0 clamp(60px,7vw,100px);border-bottom:1px solid #1b1b20}
.kr-kopf h1{margin:14px 0 22px}
.kr-kopf .lead{max-width:780px;font-size:clamp(19px,1.6vw,22px);color:#e4e1da;line-height:1.5}
.kr-haltung{max-width:700px;margin-top:18px;font-size:17px;line-height:1.55;color:#b9b6ae;border-left:3px solid var(--licht);padding-left:16px}
.kr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.kr-chips a{display:inline-block;padding:11px 18px;border:2px solid #2c2c33;background:#111115;color:var(--text);text-decoration:none;font:400 15px var(--mono);letter-spacing:.05em;text-transform:uppercase;transition:border-color .2s,background .2s}
.kr-chips a:hover,.kr-chips a:focus-visible{border-color:var(--gelb);background:#17170f}
.kr-einladung{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;margin-top:clamp(36px,4vw,56px);padding:clamp(20px,2.6vw,32px);border:2px solid #2c2c33;background:#0f0f12}
.kr-einladung .hand{margin:0;font-size:clamp(28px,2.6vw,40px);color:var(--licht)}
.bildstreifen .bs-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end}
.bildstreifen .bs-kopf p:last-child{font-size:19px;line-height:1.55;margin:0}
.bs-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);margin-top:clamp(30px,4vw,50px)}
.bs-bild{display:block;color:inherit;text-decoration:none}
.bs-rahmen{display:block;overflow:hidden;background:#e8e1d2;box-shadow:0 18px 40px rgba(40,30,10,.14)}
.bildstreifen.kohle .bs-rahmen{background:#1a1a1e;box-shadow:none}
.bs-rahmen img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.bs-bild:hover .bs-rahmen img,.bs-bild:focus-visible .bs-rahmen img{transform:scale(1.04)}
.bs-bild b{display:block;margin-top:12px;font:400 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b665c}
.bildstreifen.kohle .bs-bild b{color:var(--licht)}
.bs-bild span:last-child{display:block;font-size:16px;line-height:1.4;margin-top:2px}
.bs-weiter{margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:980px){.bildstreifen .bs-kopf{grid-template-columns:1fr}}
@media (max-width:700px){.bs-reihe{grid-template-columns:1fr}.kr-chips a{font-size:14px;padding:10px 14px}.kr-haltung{font-size:16px}}
.bildstreifen.bs-paar .bs-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.bildstreifen.bs-paar .bs-reihe{grid-template-columns:1fr}}

/* Videobesichtigung als Tür für Makler und Vermieter */
.immo-tuer>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(22px,3vw,40px);background:#fffdf7;border:2px solid #1b1b1f;box-shadow:8px 8px 0 #1b1b1f;transition:transform .25s ease,box-shadow .25s ease}
.immo-tuer>summary::-webkit-details-marker{display:none}
.immo-tuer>summary:hover,.immo-tuer>summary:focus-visible{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #1b1b1f}
.immo-tuer>summary:focus-visible{outline:3px solid var(--kobalt);outline-offset:4px}
.it-text{display:block}
.it-titel{display:block;font-size:clamp(34px,4.4vw,66px);line-height:.95;margin:12px 0 16px}
.it-satz{display:block;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:#2c2a25;max-width:46ch}
.it-auf{display:block;position:relative}
.it-auf img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#ddd}
.it-auf b{position:absolute;left:14px;bottom:14px;background:var(--gelb);color:#111;font-size:17px;padding:12px 18px;box-shadow:3px 3px 0 #111}
.immo-tuer[open] .it-auf b::after{content:" · offen"}
.immo-tuer[open]>summary{margin-bottom:clamp(36px,4vw,56px)}
@media (max-width:820px){.immo-tuer>summary{grid-template-columns:1fr}.it-auf b{font-size:16px}}

/* Printwand · Etiketten, Verpackung, Print */
.pw-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.pw-chip{font:400 15px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:11px 16px;border:2px solid #1b1b1f;background:#fffdf7;color:#1b1b1f;cursor:pointer}
.pw-chip.an,.pw-chip:hover{background:#1b1b1f;color:#fffdf7}
.pw-chip:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px}
.pw-wand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.pw-karte{all:unset;display:block;cursor:pointer;color:#1b1b1f}
.pw-karte[hidden]{display:none}
.pw-bild{display:block;position:relative;overflow:hidden;background:#e8e1d2;box-shadow:0 14px 30px rgba(40,30,10,.12)}
.pw-bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s ease}
.pw-bild small{position:absolute;right:10px;bottom:10px;background:rgba(15,15,18,.78);color:#fff;font:400 13px var(--mono);letter-spacing:.06em;padding:5px 8px}
.pw-karte:hover .pw-bild img,.pw-karte:focus-visible .pw-bild img{transform:scale(1.04)}
.pw-karte:focus-visible .pw-bild{outline:3px solid var(--kobalt);outline-offset:4px}
.pw-art{display:block;margin-top:12px;font:400 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b665c}
.pw-karte b{display:block;font-size:19px;margin-top:4px}
.pw-wer{display:block;font-size:15px;color:#4a463e;margin-top:2px}
.pw-text{display:block;font-size:15px;line-height:1.45;color:#2c2a25;margin-top:8px}
.pw-dialog{border:0;padding:0;max-width:min(1200px,94vw);width:100%;max-height:92vh;background:#fffdf7;color:#1b1b1f;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pw-dialog::backdrop{background:rgba(8,8,10,.82)}
.pw-d-innen{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);max-height:92vh}
.pw-d-bilder{overflow-y:auto;max-height:92vh;background:#e8e1d2;display:grid;gap:8px}
.pw-d-bilder img{display:block;width:100%;height:auto}
.pw-d-text{padding:clamp(22px,3vw,40px);overflow-y:auto}
.pw-d-text h3{font-size:clamp(28px,3vw,42px);margin:6px 0 4px;line-height:1.05}
.pw-d-text .pw-wer{font-size:17px}
.pw-d-satz{font-size:18px;line-height:1.55;margin-top:16px}
.pw-zu{position:absolute;top:10px;right:10px;z-index:2;width:48px;height:48px;border:0;background:#1b1b1f;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.pw-zu:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
html.kontrast .pw-text,html.kontrast .pw-wer{color:#000}
@media (max-width:1100px){.pw-wand{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.pw-wand{grid-template-columns:repeat(2,minmax(0,1fr))}.pw-d-innen{grid-template-columns:1fr;max-height:none}.pw-dialog{max-height:94vh;overflow-y:auto}.pw-d-bilder{max-height:none;order:2}.pw-d-text{order:1;padding-right:66px}}
@media (max-width:480px){.pw-wand{gap:14px}.pw-karte b{font-size:17px}.pw-text{font-size:14px}.pw-chip{font-size:14px;padding:10px 12px}}
@media (max-width:800px){.pw-art{font-size:14px}.pw-bild small{font-size:14px}}
.pw-mehr-zeile{display:none;margin-top:28px}
@media (max-width:800px){.printwand:not(.alle-offen) .pw-karte:nth-child(n+13){display:none}.printwand:not(.alle-offen) .pw-mehr-zeile{display:block}}

/* Marken und Erscheinungsbild */
.mr-wand{columns:3;column-gap:clamp(16px,2.2vw,30px);margin-top:clamp(30px,4vw,50px)}
.mr-karte{break-inside:avoid;margin:0 0 clamp(24px,3vw,40px)}
.mr-karte img{display:block;width:100%;height:auto;background:#e8e1d2;box-shadow:0 14px 30px rgba(40,30,10,.12)}
.mr-karte figcaption{color:#1b1b1f}
.mr-karte b{display:block;font-size:19px;margin-top:4px}
@media (max-width:980px){.mr-wand{columns:2}}
@media (max-width:560px){.mr-wand{columns:1}}
@media (max-width:800px){.mr-karte .pw-art{font-size:14px}}

/* So arbeiten wir mit KI */
.ka-kopf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:end}
.ka-kopf h2{font-size:clamp(34px,4.2vw,64px);line-height:.98}
.ka-text p{font-size:clamp(17px,1.4vw,20px);line-height:1.55;margin:0 0 12px}
.ki-ablauf.kohle .ka-text p{color:#d6d4ce}
.ka-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(34px,4vw,56px)}
.ka-drei>div{border-top:3px solid currentColor;padding-top:14px}
.ka-drei b{display:block;font-size:clamp(19px,1.6vw,23px);line-height:1.2;margin-bottom:8px}
.ka-drei span{display:block;font-size:16px;line-height:1.5;opacity:.85}
.ka-schritte{list-style:none;padding:0;margin:clamp(40px,5vw,70px) 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ka-schritte li{background:#fffdf7;color:#1b1b1f;border:2px solid #1b1b1f;padding:16px 14px 18px;position:relative}
.ki-ablauf.kohle .ka-schritte li{background:#16161b;color:#f2f0ea;border-color:#2c2c33}
.ka-nr{font:400 34px/1 var(--display,inherit);display:block}
.ka-wer{display:inline-block;margin:10px 0 8px;font:400 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;background:var(--kobalt);color:#fff}
.ka-wer.ki{background:var(--gelb);color:#111}
.ka-schritte h3{font-size:17px;line-height:1.2;margin:0 0 6px}
.ka-schritte p{font-size:15px;line-height:1.45;margin:0}
.ka-weiter{margin-top:clamp(28px,3vw,44px)}
@media (max-width:1100px){.ka-schritte{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.ka-kopf,.ka-drei{grid-template-columns:1fr}.ka-schritte{grid-template-columns:1fr 1fr}.ka-wer{font-size:14px}}
@media (max-width:480px){.ka-schritte{gap:10px}.ka-schritte li{padding:12px 11px 14px}.ka-nr{font-size:26px}.ka-schritte h3{font-size:16px}.ka-schritte p{font-size:14px}}
.kw-bild{break-inside:avoid;margin:0 0 clamp(24px,3vw,40px)}
.kw-bild img{display:block;width:100%;height:auto;background:#e8e1d2;box-shadow:0 14px 30px rgba(40,30,10,.12)}
@media (max-width:800px){.kw-bild .pw-art{font-size:14px}}

/* Systeme */
.sy-wand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(26px,3vw,40px)}
.sy-wann{background:#fffdf7;border:2px solid #1b1b1f;padding:18px 18px 20px}
.sy-wann b{display:block;font-size:19px;line-height:1.2;margin-bottom:8px}
.sy-wann span{display:block;font-size:16px;line-height:1.45;color:#2c2a25}
.sy-faelle{display:grid;gap:clamp(44px,6vw,90px);margin-top:clamp(56px,7vw,100px)}
.sy-fall{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,3.5vw,56px);align-items:start}
.sy-fall:nth-child(even) .sy-bilder{order:2}
.sy-bilder img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#ddd;box-shadow:0 18px 40px rgba(40,30,10,.16)}
.sy-klein{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sy-text h3{font-size:clamp(28px,2.8vw,42px);line-height:1.02;margin:6px 0 10px}
.sy-kunde{font-size:16px;color:#4a463e;margin:0 0 18px}
.sy-text dl{margin:0;display:grid;gap:14px}
.sy-text dt{font:400 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--kobalt)}
.sy-text dd{margin:4px 0 0;font-size:17px;line-height:1.5}
.sy-schluss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;margin-top:clamp(50px,6vw,80px);padding:clamp(20px,2.6vw,32px);border:2px solid #1b1b1f;background:#fffdf7}
.sy-schluss .hand{margin:0;font-size:clamp(26px,2.6vw,38px);color:var(--kobalt)}
html.kontrast .sy-wann span,html.kontrast .sy-kunde{color:#000}
@media (max-width:980px){.sy-wand{grid-template-columns:1fr 1fr}.sy-fall{grid-template-columns:1fr}.sy-fall:nth-child(even) .sy-bilder{order:0}}
@media (max-width:600px){.sy-wand{grid-template-columns:1fr}.sy-text dt{font-size:14px}}

.sy-mehr-kopf{margin-top:clamp(56px,7vw,96px)}
.sy-mehr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:14px}
.sy-m{border-top:4px solid var(--kobalt);padding:16px 2px 0}
.sy-m b{display:block;font-size:19px;line-height:1.2;margin-bottom:8px}
.sy-m span{display:block;font-size:16px;line-height:1.45;color:#2c2a25}
html.kontrast .sy-m span{color:#000}
@media (max-width:980px){.sy-mehr{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sy-mehr{grid-template-columns:1fr}}
.sy-kurz{font-size:clamp(19px,1.6vw,22px);line-height:1.35;margin:0 0 10px;font-weight:600}
.sy-auf{margin-top:14px;border-top:2px solid #1b1b1f}
.sy-auf summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font:600 17px/1.2 inherit;color:var(--kobalt);min-height:44px}
.sy-auf summary::-webkit-details-marker{display:none}
.sy-auf summary::after{content:"+";font-size:28px;line-height:1;transition:transform .25s}
.sy-auf[open] summary::after{transform:rotate(45deg)}
.sy-auf summary:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px}
.sy-auf dl{padding-bottom:6px}
.sy-angebot{background:var(--kobalt);color:#fff;padding:clamp(18px,2.4vw,28px);margin:4px 0 22px}
.sy-ang-kopf{margin:0 0 12px;font-size:clamp(24px,2.4vw,32px);font-weight:800;line-height:1.05}
.sy-angebot ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sy-angebot li{border:2px solid #fff;padding:7px 12px;font-size:16px;font-weight:600;line-height:1.2}
.sy-angebot .anhaenger{margin-top:2px}
.sy-wann span{font-size:16px}
/* Selbst gefilmt */
.selbst-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:center}
.selbst-handy{display:flex;justify-content:center}
.sh-rahmen{width:min(300px,72vw);aspect-ratio:9/18.5;background:#141418;border-radius:42px;padding:12px;box-shadow:0 30px 60px rgba(30,20,5,.28),inset 0 0 0 2px #2c2c33;transform:rotate(-4deg)}
.sh-schirm{position:relative;height:100%;border-radius:32px;overflow:hidden;background:radial-gradient(120% 80% at 30% 20%,#3a4a7a 0,#1a1f33 55%,#0c0d12 100%)}
.sh-gitter{position:absolute;inset:0;background:linear-gradient(90deg,transparent 33%,rgba(255,255,255,.18) 33%,rgba(255,255,255,.18) calc(33% + 1px),transparent 0,transparent 66%,rgba(255,255,255,.18) 66%,rgba(255,255,255,.18) calc(66% + 1px),transparent 0),linear-gradient(180deg,transparent 33%,rgba(255,255,255,.18) 33%,rgba(255,255,255,.18) calc(33% + 1px),transparent 0,transparent 66%,rgba(255,255,255,.18) 66%,rgba(255,255,255,.18) calc(66% + 1px),transparent 0)}
.sh-rec{position:absolute;top:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--mono);color:#fff;background:rgba(0,0,0,.45);padding:7px 12px;border-radius:20px;letter-spacing:.06em;white-space:nowrap}
.sh-rec i{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:sh-blink 1.2s steps(1) infinite}
.sh-knopf{position:absolute;bottom:26px;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:50%;border:4px solid #fff;box-shadow:inset 0 0 0 6px transparent}
.sh-knopf::after{content:"";position:absolute;inset:8px;border-radius:12px;background:#ff3b30}
.sh-tipp{position:absolute;left:10%;right:10%;top:42%;text-align:center;font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1.1;color:#fff;opacity:0;animation:sh-tipp 12s infinite}
.sh-tipp.t2{animation-delay:3s}.sh-tipp.t3{animation-delay:6s}.sh-tipp.t4{animation-delay:9s}
@keyframes sh-tipp{0%,2%{opacity:0;transform:translateY(8px)}6%,22%{opacity:1;transform:none}26%,100%{opacity:0}}
@keyframes sh-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sh-tipp{animation:none}.sh-tipp.t1{opacity:1}.sh-rec i{animation:none}}
.selbst-lead{font-size:clamp(19px,1.6vw,22px);line-height:1.45;margin:14px 0 26px;max-width:34em}
.selbst-schritte{list-style:none;counter-reset:s;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.selbst-schritte li{counter-increment:s;border-top:3px solid #1b1b1f;padding-top:10px}
.selbst-schritte li::before{content:"0" counter(s);display:block;font:400 14px var(--mono);color:var(--kobalt);letter-spacing:.08em;margin-bottom:4px}
.selbst-schritte b{display:block;font-size:20px;line-height:1.2}
.selbst-schritte span{display:block;font-size:16px;line-height:1.4;color:#2c2a25;margin-top:4px}
.selbst-chips{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.selbst-chips li{border:2px solid #1b1b1f;padding:6px 11px;font-size:15px;font-weight:600;background:#fffdf7}
.selbst-ehrlich{font-size:16px;line-height:1.45;color:#3a372f;margin:0 0 20px;max-width:36em}
html.kontrast .selbst-schritte span,html.kontrast .selbst-ehrlich{color:#000}
@media (max-width:860px){.selbst-raster{display:block}.selbst-handy{float:right;margin:4px 0 12px 16px;shape-outside:margin-box}.sh-rahmen{width:132px;border-radius:24px;padding:6px}.sh-schirm{border-radius:19px}.sh-rec{top:10px;font-size:14px;padding:4px 7px;gap:5px}.sh-rec i{width:8px;height:8px}.sh-knopf{width:36px;height:36px;margin-left:-18px;bottom:12px;border-width:3px}.sh-knopf::after{inset:5px;border-radius:7px}.sh-tipp{font-size:16px;left:6%;right:6%}.selbst-schritte{clear:both}}
@media (max-width:480px){.selbst-schritte{gap:12px 16px}.selbst-schritte b{font-size:18px}}
/* Weniger Text: Beschreibung nur beim Antippen (Print) bzw. nach "Alle zeigen" (Handy) */
.pw-karte .pw-text{display:none}
.wand-mehr-zeile{display:none;margin-top:24px}
@media (max-width:800px){
 .kurzwand:not(.alle-offen) .mr-karte:nth-child(n+9),.kurzwand:not(.alle-offen) .kw-bild:nth-child(n+9){display:none}
 .kurzwand:not(.alle-offen) .wand-mehr-zeile{display:block}
 .kurzwand:not(.alle-offen) .mr-karte .pw-text,.kurzwand:not(.alle-offen) .kw-bild .pw-text,.kurzwand:not(.alle-offen) .mr-karte .pw-wer{display:none}
}
@media (max-width:560px){.kurzwand:not(.alle-offen) .mr-wand{columns:2;column-gap:12px}.kurzwand:not(.alle-offen) .mr-karte{margin-bottom:18px}.kurzwand:not(.alle-offen) .mr-karte b{font-size:16px}}
/* Szenen auf dem Handy kompakter: Nummer neben Titel, Punkte als Marken */
@media (max-width:600px){
 .szene{grid-template-columns:54px 1fr;gap:6px 14px;padding:22px 0}
 .szene .nr{font-size:54px;grid-row:1}
 .szene ul{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
 .szene li{border:1px solid #3a3a44;padding:6px 10px;font-size:14px;line-height:1.25}
 .szene li::before{display:none}
 .szene h3{font-size:26px}
 .szene p{font-size:16px}
}
/* Software auf dem Handy: Bauteile und Gründe zweispaltig */
@media (max-width:600px){
 .bauteile{grid-template-columns:1fr 1fr}
 .bauteil{padding:16px 12px 18px}
 .bauteil svg{width:34px;height:34px}
 .bauteil h3{font-size:19px;line-height:1.05}
 .bauteil p{font-size:14px;line-height:1.4}
 .sy-wand{grid-template-columns:1fr 1fr;gap:10px}
 .sy-wann{padding:12px 12px 14px}
 .sy-wann b{font-size:16px}
 .sy-wann span{font-size:14px}
}
@media (max-width:600px){
 .kr-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:calc(-1 * var(--rand,16px));padding-right:16px;padding-bottom:4px}
 .kr-chips::-webkit-scrollbar{display:none}
 .kr-chips a{flex:0 0 auto}
 .kurzwand .pw-art{letter-spacing:.03em;overflow-wrap:anywhere;hyphens:auto}
}
/* Werbung: Film in eigener Sache */
.jb-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:center}
.jb-raster .abschnitt-kopf{margin:0}
.jb-preis{margin-top:18px;padding-left:14px;border-left:3px solid var(--gelb);font-size:16px;line-height:1.5;color:#e9e7e1}
@media (max-width:900px){.jb-raster{grid-template-columns:1fr}}
/* ================= Webdesign-Raum neu ================= */
/* Drei Wege */
.wd-drei-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);align-items:end;margin-top:clamp(30px,4vw,56px)}
.wd-weg{margin:0;position:relative}
.wd-weg .browser{box-shadow:0 20px 44px rgba(0,0,0,.55)}
.wd-weg:not(.wd-sieger) .browser{filter:saturate(.75) brightness(.86);transform:scale(.94);transform-origin:bottom center}
.wd-sieger .browser{outline:3px solid var(--gelb);outline-offset:6px}
.wd-nr{display:block;font:400 clamp(40px,4vw,64px)/.9 var(--anton);color:transparent;-webkit-text-stroke:1.5px #6c6c76;margin-bottom:10px}
.wd-sieger .wd-nr{-webkit-text-stroke-color:var(--gelb)}
.wd-weg figcaption{margin-top:16px}
.wd-weg figcaption b{display:block;font:400 clamp(24px,2.2vw,32px)/1 var(--anton);text-transform:uppercase}
.wd-weg figcaption span{display:block;color:#bdbbb4;font-size:16px;line-height:1.45;margin-top:6px}
.wd-sieger figcaption span{color:#f2f0ea}
.wd-stempel{position:absolute;top:-6px;right:6px;z-index:3;background:var(--gelb);color:#111;font:400 14px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;transform:rotate(3deg)}
.wd-live{display:inline-block;margin-top:10px;font:600 22px/1 var(--hand);color:var(--licht)}
.wd-drei-satz{margin:clamp(30px,4vw,50px) 0 0;font-size:clamp(26px,2.6vw,38px);color:var(--gelb);text-align:center}
@media (max-width:900px){.wd-drei-reihe{grid-template-columns:1fr;gap:34px}.wd-weg:not(.wd-sieger) .browser{transform:none}.wd-weg:not(.wd-sieger){display:grid;grid-template-columns:42% 1fr;gap:14px;align-items:center}.wd-weg:not(.wd-sieger) .wd-nr{grid-column:1/-1;margin:0}.wd-weg:not(.wd-sieger) figcaption{margin:0}.wd-weg:not(.wd-sieger) figcaption b{font-size:22px}.wd-weg:not(.wd-sieger) figcaption span{font-size:15px}}
/* Ideenbuch */
.wd-ideen{overflow:hidden}
.wd-band{overflow:hidden;margin-top:22px;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.wd-ideen .abschnitt-kopf+.wd-band{margin-top:clamp(30px,4vw,50px)}
.wd-spur{display:flex;gap:18px;width:max-content;animation:wd-lauf 90s linear infinite}
.wd-band[data-rueck] .wd-spur{animation-direction:reverse;animation-duration:110s}
.wd-band:hover .wd-spur,.wd-band:focus-within .wd-spur{animation-play-state:paused}
@keyframes wd-lauf{to{transform:translateX(-50%)}}
.wd-idee{margin:0;width:clamp(260px,26vw,420px);flex:0 0 auto}
.wd-idee img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;box-shadow:0 14px 30px rgba(40,30,10,.16);background:#e8e1d2}
.wd-idee figcaption{font-size:15px;line-height:1.4;margin-top:10px;color:#2c2a25;max-width:34ch}
.wd-ideen-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:clamp(30px,4vw,48px)}
.wd-ideen-fuss p{margin:0;font-size:17px;max-width:32em}
@media (prefers-reduced-motion:reduce){.wd-spur{animation:none}.wd-band{overflow-x:auto}}
@media (max-width:600px){.wd-idee{width:250px}.wd-idee figcaption{font-size:14px}.wd-spur{animation-duration:70s}}
html.kontrast .wd-idee figcaption{color:#000}
/* Wand */
.wd-wand-titel{font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--licht);margin:clamp(36px,4vw,56px) 0 22px;display:flex;align-items:center;gap:14px}
.wd-wand-titel::after{content:"";flex:1;height:1px;background:#3a3a42}
.wd-wand-titel.dunkel{color:var(--kobalt)}.wd-wand-titel.dunkel::after{background:#cfc6b4}
.wd-kunden{grid-template-columns:1fr 1fr}
.wd-k-satz{display:block;color:#d6d4ce;font-size:16px;line-height:1.45;margin-top:8px;max-width:36em}
.kurzwand:not(.alle-offen) .atelierwand2:not(.wd-kunden) .probe2:nth-child(n+7){display:none}
.kurzwand .wand-mehr-zeile{display:block}
.kurzwand.alle-offen .wand-mehr-zeile{display:none}
@media (min-width:801px){.wd-kunden .probe2 b{font-size:clamp(28px,2.6vw,40px)}}
@media (max-width:800px){.wd-kunden{grid-template-columns:1fr}
 .atelierwand2:not(.wd-kunden){grid-template-columns:1fr 1fr;gap:26px 14px}
 .atelierwand2:not(.wd-kunden) .probe2{padding-right:0}
 .atelierwand2:not(.wd-kunden) .probe2 .handy{display:none}
 .atelierwand2:not(.wd-kunden) .probe2 .bildschirm{padding:4px 4px 8px;border-width:2px;border-radius:7px}
 .atelierwand2:not(.wd-kunden) .probe2 b{font-size:18px;margin-top:10px}
 .atelierwand2:not(.wd-kunden) .probe2 .was{font-size:14px}
 .atelierwand2:not(.wd-kunden) .probe2 .live{font-size:17px}}
/* In Bewegung */
.wd-fall{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center;margin-top:clamp(40px,5vw,80px)}
.wd-fall:nth-of-type(even) .wd-fall-film{order:2}
.wd-fall-film{position:relative;padding-bottom:12%}
.wd-fall-film video{display:block;width:100%;aspect-ratio:16/9.7;object-fit:cover;background:#111}
.wd-fall-handy{position:absolute;right:-4%;bottom:0;width:38%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;box-shadow:0 24px 50px rgba(0,0,0,.6);border:3px solid #1b1b1f}
.wd-fall:nth-of-type(even) .wd-fall-handy{right:auto;left:-4%}
.wd-fall-text h3{font-size:clamp(30px,3vw,46px);line-height:1;margin:10px 0 14px}
.wd-fall-text p:not(.kicker){color:#d6d4ce;font-size:18px;line-height:1.55;margin:0 0 16px}
.wd-fall-text ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.wd-fall-text li{border:1px solid #3a3a44;padding:6px 11px;font:400 14px var(--mono);letter-spacing:.04em;color:#e9e7e1}
.wd-fall-text li:first-child{background:var(--gelb);color:#111;border-color:var(--gelb)}
@media (max-width:900px){.wd-fall{grid-template-columns:1fr}.wd-fall:nth-of-type(even) .wd-fall-film{order:0}.wd-fall-handy{right:-2%;width:40%}.wd-fall:nth-of-type(even) .wd-fall-handy{left:auto;right:-2%}.wd-fall-text p:not(.kicker){font-size:16px}}
/* Preis */
.wd-preis-raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,5vw,80px);align-items:center}
.wd-preis h2{font-size:clamp(34px,4vw,62px);line-height:1}
.wd-preis-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#eef2ff;margin:20px 0 22px;max-width:36em}
.wd-drin{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.wd-drin li{position:relative;padding-left:28px;font-size:16px;line-height:1.4}
.wd-drin li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:9px;border-left:3px solid var(--gelb);border-bottom:3px solid var(--gelb);transform:rotate(-45deg)}
.wd-bon{position:relative;background:#fbfaf6;color:#1b1b1f;padding:28px 26px 30px;font-family:var(--mono);box-shadow:0 30px 60px rgba(0,0,20,.35);transform:rotate(1.5deg);
 -webkit-mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) top/18px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) bottom/18px 51% repeat-x;mask:radial-gradient(circle 7px at 50% 0,transparent 98%,#000) top/18px 51% repeat-x,radial-gradient(circle 7px at 50% 100%,transparent 98%,#000) bottom/18px 51% repeat-x}
.wd-bon-kopf{text-align:center;font-size:18px;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 18px;padding-bottom:14px;border-bottom:2px dashed #b9b3a6}
.wd-bon-kopf small{font-size:14px;letter-spacing:.06em;text-transform:none;color:#555}
.wd-bon dl{margin:0}
.wd-bon dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:15px}
.wd-bon dl div.klein{padding-top:0;color:#555;font-size:14px}
.wd-bon dl div.strich{border-top:2px dashed #b9b3a6;margin-top:8px;padding-top:14px;font-weight:600}
.wd-bon dt{margin:0}.wd-bon dd{margin:0;text-align:right}
.wd-bon-fuss{text-align:center;font-family:var(--hand);font-weight:600;font-size:26px;color:var(--kobalt);margin:18px 0 6px}
.wd-bon-stempel{position:absolute;right:16px;top:44%;border:3px solid #d2263a;color:#d2263a;font:400 15px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;transform:rotate(-14deg);opacity:.85}
.wd-preis-satz{margin-top:clamp(30px,4vw,50px);font-size:16px;color:#dfe6ff;border-top:1px solid rgba(255,255,255,.25);padding-top:18px}
@media (max-width:900px){.wd-preis-raster{grid-template-columns:1fr}.wd-bon{max-width:420px;transform:rotate(1deg)}}
@media (max-width:480px){.wd-drin{grid-template-columns:1fr}.wd-bon{padding:24px 18px 26px}.wd-bon dl div{font-size:14px}}
/* Ablauf, Fragen */
.wd-schritte{list-style:none;counter-reset:w;padding:0;margin:clamp(30px,4vw,50px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px)}
.wd-schritte li{counter-increment:w;border-top:4px solid #1b1b1f;padding-top:14px}
.wd-schritte li::before{content:counter(w);display:block;font:400 clamp(56px,6vw,90px)/.85 var(--anton);color:transparent;-webkit-text-stroke:2px var(--kobalt);margin-bottom:12px}
.wd-schritte b{display:block;font:400 clamp(26px,2.4vw,36px)/1 var(--anton);text-transform:uppercase}
.wd-schritte span{display:block;font-size:17px;line-height:1.5;margin-top:8px;color:#2c2a25}
.wd-fragen{max-width:860px}
.wd-frage{border-bottom:2px solid #1b1b1f}
.wd-frage summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:700;font-size:clamp(18px,1.6vw,21px);min-height:44px}
.wd-frage summary::-webkit-details-marker{display:none}
.wd-frage summary::after{content:"+";font:400 32px/1 var(--anton);color:var(--kobalt);transition:transform .25s}
.wd-frage[open] summary::after{transform:rotate(45deg)}
.wd-frage summary:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px}
.wd-frage p{margin:0 0 20px;font-size:17px;line-height:1.55;color:#2c2a25;max-width:44em}
.wd-anfang{margin-top:clamp(50px,6vw,90px);padding:clamp(24px,3vw,40px);background:#141418;color:#f2f0ea}
.wd-anfang .hand{margin:0 0 16px;font-size:clamp(28px,2.8vw,40px);color:var(--gelb)}
.wd-anfang nav{display:flex;flex-wrap:wrap;gap:10px}
.wd-anfang nav a{display:inline-block;padding:10px 15px;border:2px solid #3a3a44;color:#f2f0ea;text-decoration:none;font:400 15px var(--mono);letter-spacing:.04em}
.wd-anfang nav a:hover,.wd-anfang nav a:focus-visible{border-color:var(--gelb)}
.wd-hw{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:26px;color:#d6d4ce;text-decoration:none;font-size:16px}
.wd-hw img{width:200px;height:auto}
.wd-hw:hover span,.wd-hw:focus-visible span{color:var(--gelb)}
html.kontrast .wd-schritte span,html.kontrast .wd-frage p{color:#000}
@media (max-width:800px){.wd-schritte{grid-template-columns:1fr;gap:22px}.wd-schritte li{display:grid;grid-template-columns:62px 1fr;gap:0 14px;align-items:start}.wd-schritte li::before{grid-row:1/3;font-size:58px;margin:0}.wd-schritte span{font-size:16px}.wd-anfang nav a{font-size:14px;padding:9px 12px}}
.wd-weg .browser-leiste span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:900px){.wd-weg:not(.wd-sieger) .browser-leiste span{display:none}}
.wd-bon-stempel{top:auto;bottom:70px;right:12px}
.wd-bon{display:flex;flex-direction:column}
.wd-bon-stempel{position:static;align-self:center;margin-top:10px;transform:rotate(-6deg)}
.wd-bon-stempel{border-color:#b0122a;color:#b0122a;opacity:1}
@media (max-width:800px){.browser-leiste span{font-size:14px}}
.wd-preis-warum{font-size:17px;line-height:1.55;margin:0;padding:14px 16px;background:rgba(0,0,0,.16);border-left:4px solid var(--gelb);max-width:36em}
.wd-preis-warum b{color:var(--gelb)}
.wd-bet-kopf{margin-top:clamp(50px,6vw,90px)}
.wd-bet-kopf h3{font-size:clamp(30px,3.4vw,52px);line-height:1;margin:10px 0 0}
.wd-bet-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,40px)}
.wd-bet{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.28);padding:20px 20px 22px}
.wd-bet b{display:block;font:400 clamp(22px,1.9vw,28px)/1.05 var(--anton);text-transform:uppercase;color:#fff;margin-bottom:8px}
.wd-bet span{display:block;font-size:16px;line-height:1.5;color:#e6ebff}
.wd-extra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);margin-top:clamp(12px,1.6vw,20px)}
.wd-extra div{background:var(--gelb);color:#111;padding:20px 22px 22px}
.wd-extra b{display:block;font:400 clamp(24px,2vw,30px)/1 var(--anton);text-transform:uppercase}
.wd-extra span{display:block;font-size:16px;line-height:1.45;margin:8px 0 10px}
.wd-extra em{font-style:normal;font:600 15px var(--mono);letter-spacing:.06em;text-transform:uppercase;border-top:2px solid #111;padding-top:8px;display:inline-block}
.wd-bon dl div{flex-wrap:wrap}
@media (max-width:900px){.wd-bet-raster{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.wd-bet-raster,.wd-extra{grid-template-columns:1fr}.wd-bet{padding:16px 16px 18px}.wd-bet span{font-size:15px}.wd-preis-warum{font-size:16px}}
/* ================= Ideenbuch ================= */
.ib-kopf{padding:clamp(110px,12vw,170px) 0 clamp(20px,3vw,36px);background:radial-gradient(80% 70% at 85% 10%,rgba(21,70,224,.28),transparent 60%),var(--schwarz,#0c0c0f)}
.ib-zurueck{display:inline-block;font:400 14px var(--mono);letter-spacing:.08em;color:var(--licht);text-decoration:none;margin-bottom:22px}
.ib-zurueck:hover,.ib-zurueck:focus-visible{color:var(--gelb)}
.ib-kopf-raster{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.ib-kopf h1{font-size:clamp(46px,7vw,110px);line-height:.92;margin:10px 0 18px}
.ib-kopf .lead{max-width:38em}
.ib-zeiger{width:clamp(110px,12vw,190px);height:auto;transform:rotate(-10deg);filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.ib-werkzeug{margin-top:clamp(26px,3vw,40px)}
.ib-suche input{width:100%;max-width:560px;font:400 18px var(--sans);padding:15px 18px;background:#141418;color:#f2f0ea;border:2px solid #3a3a44;border-radius:0}
.ib-suche input:focus{outline:3px solid var(--gelb);outline-offset:2px;border-color:var(--gelb)}
.ib-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ib-chip{font:400 14px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:10px 14px;background:#111115;color:#f2f0ea;border:2px solid #2c2c33;cursor:pointer;min-height:44px}
.ib-chip.an,.ib-chip[aria-pressed=true]{background:var(--gelb);color:#111;border-color:var(--gelb)}
.ib-chip:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
.ib-zahl{font:400 14px var(--mono);color:#a9a7a0;margin:14px 0 0;letter-spacing:.06em}
.ib-wand-sek{padding:clamp(20px,3vw,40px) 0 clamp(60px,7vw,100px);background:var(--schwarz,#0c0c0f)}
.ib-wand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ib-karte{margin:0;position:relative}
.ib-karte[hidden]{display:none}
.ib-auf{display:block;width:100%;padding:0;border:0;background:#1a1a1f;cursor:zoom-in;position:relative;overflow:hidden}
.ib-auf img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ib-auf:hover img,.ib-auf:focus-visible img{transform:scale(1.04)}
.ib-auf:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.ib-tag{position:absolute;left:8px;top:8px;background:rgba(12,12,15,.82);color:#fff;font:400 14px var(--mono);padding:4px 8px;letter-spacing:.04em}
.ib-tag.gelb{left:auto;right:8px;background:var(--gelb);color:#111}
.ib-tag+.ib-tag:not(.gelb){top:40px}
.ib-karte figcaption{color:#e9e7e1;font-size:15px;line-height:1.3;margin-top:8px;padding-right:46px}
.ib-nadel{position:absolute;right:0;bottom:-6px;width:40px;height:40px;border-radius:50%;border:2px solid #3a3a44;background:#141418;color:#f2f0ea;font:400 22px/1 var(--anton);cursor:pointer}
.ib-nadel[aria-pressed=true]{background:var(--gelb);border-color:var(--gelb);color:#111}
.ib-nadel[aria-pressed=true] span{display:inline-block;transform:rotate(45deg)}
.ib-nadel:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
.ib-leer{color:#e9e7e1;font-size:18px;margin:30px 0}
.ib-mehr-zeile{margin-top:34px;display:flex;justify-content:center}
.ib-mehr-zeile[hidden]{display:none}
/* Lichtkasten */
.ib-licht,.ib-zettel-dlg{border:0;padding:0;background:transparent;max-width:min(1180px,94vw);width:100%;max-height:94vh}
.ib-licht::backdrop,.ib-zettel-dlg::backdrop{background:rgba(5,5,8,.88)}
.ib-licht-innen{position:relative;background:#121216;color:#f2f0ea;padding:16px 16px 18px;max-height:94vh;display:flex;flex-direction:column}
.ib-zu{position:absolute;top:8px;right:8px;z-index:3;width:48px;height:48px;border:0;background:var(--gelb);color:#111;font:400 30px/1 var(--anton);cursor:pointer}
.ib-zu:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ib-reiter{display:flex;flex-wrap:wrap;gap:6px;padding-right:60px;min-height:8px}
.ib-reiter button{font:400 14px var(--mono);padding:8px 12px;background:#1d1d23;color:#f2f0ea;border:2px solid #33333b;cursor:pointer;min-height:40px}
.ib-reiter button[aria-selected=true]{background:var(--gelb);color:#111;border-color:var(--gelb)}
.ib-bild{overflow:auto;margin-top:12px;flex:1;min-height:0;background:#0b0b0d}
.ib-bild img{display:block;width:100%;height:auto}
.ib-licht-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px}
.ib-name{font:400 clamp(22px,2vw,30px)/1 var(--anton);text-transform:uppercase;margin-right:auto}
.ib-probe{color:var(--licht);font:600 20px/1 var(--hand)}
.ib-licht-nadel{font:600 15px var(--sans);padding:12px 16px;background:transparent;color:#f2f0ea;border:2px solid #3a3a44;cursor:pointer;min-height:44px}
.ib-licht-nadel[aria-pressed=true]{background:#f2f0ea;color:#111}
/* Merkzettel */
.ib-zettel{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60}
.ib-zettel-knopf{display:flex;align-items:center;gap:10px;background:var(--gelb);color:#111;border:0;padding:12px 18px;font:600 16px var(--sans);box-shadow:0 14px 30px rgba(0,0,0,.45);cursor:pointer;min-height:48px}
.ib-zettel-zahl{font:400 24px/1 var(--anton)}
.ib-zettel-innen{position:relative;background:#fbfaf6;color:#1b1b1f;padding:28px 24px 26px;max-width:620px;margin:auto}
.ib-zettel-innen h2{font-size:clamp(32px,3.4vw,48px);margin:0 0 6px}
.ib-zettel-liste{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.ib-zettel-liste li{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center}
.ib-zettel-liste img{width:110px;aspect-ratio:16/9;object-fit:cover;object-position:top}
.ib-zettel-liste button{border:2px solid #1b1b1f;background:#fff;font:600 14px var(--sans);padding:8px 10px;cursor:pointer;min-height:40px}
/* Jenseits + Ende */
.ib-jen-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:clamp(26px,3vw,44px)}
.ib-jen{margin:0}.ib-jen img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;box-shadow:0 14px 30px rgba(40,30,10,.16)}
.ib-jen figcaption{font-size:15px;margin-top:8px;color:#2c2a25}
.ib-ende-raster{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:clamp(24px,4vw,60px);align-items:center}
.ib-ende-raster img{width:100%;max-width:360px;height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))}
.ib-ende h2{font-size:clamp(36px,4.6vw,72px);line-height:.95;margin:0 0 16px}
.ib-ende p{font-size:19px;color:#d6d4ce;margin:0 0 20px}
html.kontrast .ib-jen figcaption{color:#000}
@media (max-width:1100px){.ib-wand{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.ib-wand{grid-template-columns:1fr 1fr;gap:16px 12px}.ib-jen-raster{grid-template-columns:1fr 1fr}.ib-kopf-raster{grid-template-columns:1fr}.ib-zeiger{display:none}
 .ib-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}.ib-chips::-webkit-scrollbar{display:none}.ib-chip{flex:0 0 auto}
 .ib-karte figcaption{font-size:14px;padding-right:40px}.ib-nadel{width:36px;height:36px;font-size:20px}.ib-ende-raster{grid-template-columns:1fr}.ib-ende-raster img{max-width:180px}
 .ib-licht-innen{padding:10px 10px 14px}.ib-licht-fuss .anhaenger{width:100%}.ib-zettel-liste li{grid-template-columns:84px 1fr auto}.ib-zettel-liste img{width:84px}}
/* Ideenbuch Etiketten */
.ib-tag.gelb{top:auto;bottom:8px;right:auto;left:8px}
/* ===== Webdesign-Raum: Herzstück-Grafiken ===== */
.wd-bewegt .abschnitt-kopf{position:relative}
.wd-pfeil{position:absolute;right:2%;bottom:-40px;width:clamp(120px,16vw,240px);height:auto;transform:rotate(18deg);pointer-events:none}
.wd-zahlen{background:#0c0c0f;padding:clamp(34px,4vw,60px) 0;border-top:1px solid #222;border-bottom:1px solid #222;overflow:hidden}
.wd-zahlen-strich{display:block;width:min(420px,60%);height:auto;margin:0 0 18px}
.wd-zahlen-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.wd-zahlen b{display:block;font:400 clamp(56px,6.6vw,104px)/.85 var(--anton);color:var(--gelb)}
.wd-zahlen span{display:block;color:#e9e7e1;font-size:16px;line-height:1.35;margin-top:10px;max-width:16em}
.wd-wand-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.wd-zeiger{width:clamp(90px,9vw,150px);height:auto;transform:rotate(-14deg);margin-right:4%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.wd-woche{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:18px 0 4px;border-top:2px dashed #b9b3a6;padding-top:14px}
.wd-woche span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:62px}
.wd-woche img{width:100%;max-width:58px;height:auto;margin-bottom:4px}
.wd-woche i{font:400 14px var(--mono);font-style:normal;color:#555}
.wd-wort-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,80px);align-items:center}
.wd-wort-herz img{width:100%;max-width:460px;height:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));animation:wd-puls 4.5s ease-in-out infinite}
@keyframes wd-puls{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.035) rotate(-1deg)}}
.wd-wort h2{font-size:clamp(40px,5vw,78px);line-height:.95;margin:10px 0 16px}
.wd-wort-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#d6d4ce;margin:0 0 26px;max-width:36em}
.wd-wort-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.wd-wort-drei div{border-top:4px solid var(--gelb);padding-top:12px}
.wd-wort-drei b{display:block;font:400 clamp(24px,2.2vw,32px)/1 var(--anton);text-transform:uppercase}
.wd-wort-drei span{display:block;font-size:16px;line-height:1.5;color:#d6d4ce;margin-top:8px}
.wd-pfeil-blau{width:clamp(110px,10vw,160px);height:auto}
.wd-riss{position:relative;min-height:clamp(360px,46vw,620px);display:flex;align-items:flex-end;overflow:hidden;background:#3a3a3e}
.wd-riss video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wd-riss::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,10,.75))}
.wd-riss .wrap{position:relative;z-index:2;padding-bottom:clamp(28px,4vw,60px)}
.wd-riss p{margin:0;font-size:clamp(38px,6vw,96px);line-height:.92;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.wd-ablauf-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,4vw,60px);align-items:end}
.wd-skizze{width:100%;height:auto;box-shadow:0 20px 44px rgba(40,30,10,.2);transform:rotate(1.5deg)}
.wd-haken{position:relative}
.wd-haken img{position:absolute;right:0;top:-6px;width:clamp(60px,6vw,90px);height:auto}
.wd-satz{font-size:clamp(34px,4.4vw,70px);line-height:.95;margin:clamp(50px,6vw,90px) 0;text-align:center}
.wd-kompliment{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:center;margin-top:clamp(40px,5vw,70px);padding:clamp(22px,3vw,36px);background:var(--kobalt);color:#fff}
.wd-kompliment img{width:clamp(110px,12vw,180px);height:auto}
.wd-kompliment .kicker{color:#cfd9ff;margin:0}
.wd-kompliment .laut{font-size:clamp(34px,4vw,60px);line-height:.95;margin:6px 0 12px}
.wd-kompliment p:last-child{margin:0;font-size:17px;line-height:1.55;color:#e6ebff;max-width:40em}
.wd-anfang{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:center}
.wd-anfang-text>p:not(.hand):not(.wd-signatur){color:#d6d4ce;font-size:17px;line-height:1.5;margin:0 0 16px}
.wd-anfang-bild{position:relative;min-height:220px}
.wd-anfang-bild .k{width:100%;max-width:300px;height:auto;position:relative;z-index:2}
.wd-anfang-bild .s{position:absolute;right:0;bottom:-10px;width:38%;height:auto}
.wd-signatur{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:24px 0 0;color:#a9a7a0;font-size:15px}
.wd-signatur img{width:180px;height:auto}
@media (prefers-reduced-motion:reduce){.wd-wort-herz img{animation:none}}
@media (max-width:900px){.wd-zahlen-reihe{grid-template-columns:1fr 1fr;gap:26px 16px}.wd-wort-raster,.wd-ablauf-kopf,.wd-anfang{grid-template-columns:1fr}.wd-wort-herz img{max-width:260px}.wd-wort-drei{grid-template-columns:1fr}.wd-pfeil{display:none}.wd-anfang-bild{min-height:180px}}
@media (max-width:600px){.wd-zahlen span{font-size:15px}.wd-zeiger{width:72px;margin-right:0}.wd-kompliment{grid-template-columns:1fr}.wd-kompliment img{width:110px}.wd-wort-drei span,.wd-kompliment p:last-child{font-size:16px}.wd-skizze{transform:none}.wd-haken img{width:54px}}
.wd-bon dl div{flex-wrap:nowrap}.wd-bon dd{white-space:nowrap}
@media (max-width:600px){.wd-anfang-bild .k{max-width:220px}.wd-anfang-bild{min-height:150px}}
.wd-ablauf .wd-kompliment .kicker{color:#dfe6ff}
/* Webdesign Auftakt 3 */
.ib-werkzeug{scroll-margin-top:118px}
.wd-ideen-gross .abschnitt-kopf h2{font-size:clamp(46px,7vw,112px);line-height:.9}
.wd-ib-suche{display:flex;max-width:620px;margin-top:clamp(22px,2.6vw,34px);box-shadow:0 14px 34px rgba(40,30,10,.14)}
.wd-ib-suche input{flex:1;min-width:0;font:400 18px var(--sans);padding:17px 18px;border:2px solid #1b1b22;border-right:0;background:#fffdf8;color:#16161b;border-radius:0}
.wd-ib-suche input::placeholder{color:#5f5a50}
.wd-ib-suche button{font:400 17px var(--sans);padding:0 22px;background:#1b1b22;color:#fff;border:2px solid #1b1b22;cursor:pointer;white-space:nowrap}
.wd-ib-suche button:hover,.wd-ib-suche button:focus-visible{background:var(--kobalt);border-color:var(--kobalt)}
.wd-ib-suche input:focus{outline:3px solid var(--kobalt);outline-offset:2px}
.wd-band[data-langsam] .wd-spur{animation-duration:130s}
.wd-wort+.wd-drei{border-top:1px solid #2a2a31}
@media (max-width:600px){.wd-ib-suche input{font-size:16px;padding:15px 14px}.wd-ib-suche button{padding:0 14px;font-size:16px}.wd-band[data-langsam] .wd-spur{animation-duration:90s}}
.wd-riss .wrap{width:100%}
/* Drei Wege und Staffel */
.wd-wege-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,40px)}
.wd-weg3{background:#fff;color:#14141a;padding:22px 22px 24px;position:relative}
.wd-weg3-nr{display:inline-block;font:600 14px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--kobalt);color:#fff;padding:4px 9px;margin-bottom:14px}
.wd-weg3 b{display:block;font:400 clamp(24px,2.1vw,32px)/1 var(--anton);text-transform:uppercase}
.wd-weg3 em{display:block;font-style:normal;font:600 15px var(--mono);letter-spacing:.04em;color:var(--kobalt-tief);margin:10px 0 10px;padding-bottom:10px;border-bottom:2px solid #14141a}
.wd-weg3 span:last-child{display:block;font-size:16px;line-height:1.5}
.wd-staffel{margin-top:clamp(14px,1.8vw,22px);background:#0d2fa3;border:2px solid rgba(255,255,255,.28);padding:clamp(20px,2.6vw,34px)}
.wd-staffel-titel{font:400 clamp(24px,2.4vw,36px)/1.05 var(--anton);text-transform:uppercase;color:#fff;margin:0 0 20px}
.wd-staffel ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wd-staffel li{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,14em);align-items:center;gap:14px}
.wd-staffel li i{display:block;height:18px;width:var(--w);background:var(--gelb);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.wd-staffel:not(.in) li i{transform:scaleX(.05)}
.wd-staffel li b{font:400 26px/1 var(--anton);color:#fff;text-align:right}
.wd-staffel li span{font-size:16px;color:#e6ebff}
.wd-staffel-satz{margin:22px 0 8px;font-size:18px;color:#fff}
.wd-staffel-satz b{color:var(--gelb)}
.wd-staffel-rechnung{margin:0;font-size:16px;line-height:1.5;color:#dfe6ff;max-width:46em}
@media (prefers-reduced-motion:reduce){.wd-staffel li i{transition:none}.wd-staffel:not(.in) li i{transform:none}}
@media (max-width:900px){.wd-wege-raster{grid-template-columns:1fr}}
@media (max-width:600px){.wd-staffel li{grid-template-columns:64px minmax(0,1fr);gap:4px 12px}.wd-staffel li i{grid-column:1/-1;order:3;height:12px}.wd-staffel li b{font-size:22px;text-align:left}.wd-staffel li span{font-size:15px}.wd-staffel-satz{font-size:17px}}
/* Handy: Raum ohne Scrollfahrt, der Raum fuehrt sich selbst vor */
@media (max-width:700px){
  .raumkopf.r3-an{height:auto}
  .r3-an .r3-fix{position:relative;min-height:100vh;min-height:100svh}
  .r3-an .r3-stationen,.r3-an .r3-tipp,.r3-an .r3-licht,.r3-an .r3-marken{display:none!important}
  .r3-an .wrap,.r3-an .schild-raum{opacity:1;transform:none}
  .r3-an .r3-fix::before{opacity:1}
  .r3-handy .raumbuehne .v-bild.an{animation:r3kb 6.5s cubic-bezier(.2,.6,.3,1) both}
  @keyframes r3kb{from{transform:scale(1.14)}to{transform:scale(1.02)}}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.r3-handy .raumbuehne .v-bild.an{animation:none}}
html.ruhig .r3-handy .raumbuehne .v-bild.an{animation:none}
@media (max-width:700px){.r3-an .r3-fix::before{background:linear-gradient(0deg,rgba(7,7,8,.96) 0%,rgba(7,7,8,.84) 48%,rgba(7,7,8,.25) 74%,rgba(7,7,8,0) 88%)}}
.wd-ib-bsp{margin:14px 0 0;font-size:16px;color:#4a463e;display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px}
.wd-ib-bsp button{font:400 15px var(--sans);padding:7px 12px;background:transparent;border:1.5px solid #1b1b22;color:#16161b;cursor:pointer}
.wd-ib-bsp button:hover,.wd-ib-bsp button:focus-visible{background:#1b1b22;color:#fff}
.wd-ib-treffer{margin-top:20px;max-width:900px;animation:wd-auf .35s ease-out}
@keyframes wd-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wd-ib-zahl{font-size:19px;margin:0 0 12px;color:#16161b}.wd-ib-zahl b{color:var(--kobalt-tief)}
.wd-ib-vorschau{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wd-ib-vorschau a{display:block;color:#16161b;text-decoration:none;font-size:15px}
.wd-ib-vorschau img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;box-shadow:0 10px 24px rgba(40,30,10,.16);transition:transform .25s}
.wd-ib-vorschau a:hover img{transform:translateY(-3px)}
.wd-ib-vorschau span{display:block;margin-top:6px}
.wd-ib-alle{display:inline-block;margin-top:14px;font-weight:600;color:var(--kobalt-tief);font-size:17px}
@media (max-width:600px){.wd-ib-vorschau{grid-template-columns:1fr 1fr}.wd-ib-zahl{font-size:17px}}
@media (prefers-reduced-motion:reduce){.wd-ib-treffer{animation:none}}
/* Klare Verhältnisse: Impressum, Datenschutz, AGB */
.kv-kopf{background:radial-gradient(120% 80% at 80% 0%,#1a2a6b 0%,#0b0b0e 55%);padding:clamp(130px,14vw,190px) 0 clamp(60px,7vw,100px);color:#f3f1ec}
.kv-kopf h1{font-size:clamp(48px,7vw,110px);line-height:.92;margin:14px 0 22px}
.kv-kopf .lead{max-width:40em;color:#d6d4ce}
.kv-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);margin-top:clamp(36px,5vw,64px);align-items:start}
.kv-schild{position:relative;padding:clamp(28px,3vw,44px) clamp(26px,3vw,46px);border-radius:8px;color:#2a1f08;background:linear-gradient(135deg,#f3dc95 0%,#d8b25a 22%,#f6e3a6 45%,#c79b3f 68%,#ecd08a 100%);box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(90,60,10,.35);transform:rotate(-1deg)}
.kv-schild::after{content:"";position:absolute;inset:10px;border:1px solid rgba(90,60,10,.35);border-radius:4px;pointer-events:none}
.kv-schraube{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6d6,#a67c2a 60%,#6b4b12);box-shadow:inset 0 0 0 1px rgba(60,40,5,.4)}
.kv-schraube:nth-child(1){top:16px;left:16px}.kv-schraube:nth-child(2){top:16px;right:16px}.kv-schraube:nth-child(3){bottom:16px;left:16px}.kv-schraube:nth-child(4){bottom:16px;right:16px}
.kv-schild p{margin:0 0 12px;font:400 17px/1.5 var(--mono);letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.kv-schild .kv-schild-marke{font:400 14px var(--mono);letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px}
.kv-schild .kv-schild-firma{font:400 clamp(28px,2.6vw,40px)/1 var(--anton);text-transform:uppercase;letter-spacing:.02em}
.kv-schild .kv-schild-sitz{border-top:1px solid rgba(90,60,10,.35);padding-top:12px}
.kv-schild .kv-schild-klein{font-size:15px;margin:0}
.kv-vier{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv-v{border:2px solid rgba(255,255,255,.22);padding:18px 18px 16px;background:rgba(255,255,255,.04)}
.kv-v b{display:block;font:400 clamp(54px,5vw,80px)/.9 var(--anton);color:#f3f1ec}
.kv-v span{display:block;font-size:16px;color:#d6d4ce;margin-top:6px}
.kv-v.kv-mensch{background:var(--gelb);border-color:var(--gelb)}.kv-v.kv-mensch b,.kv-v.kv-mensch span{color:#111}
.kv-kontakt{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0 0;font-size:16px}
.kv-kontakt a{color:#f3f1ec;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
.kv-register{background:var(--papier,#ece6d9);padding:clamp(60px,7vw,110px) 0 clamp(70px,8vw,120px);color:#16161b}
.kv-register-titel{font:400 14px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt-tief);margin:0 0 22px}
.kv-akte{max-width:980px;margin:0 0 14px;background:#fffdf8;box-shadow:0 12px 30px rgba(40,30,10,.10);border-top:4px solid #16161b}
.kv-akte:nth-of-type(2){border-top-color:var(--kobalt)}.kv-akte:nth-of-type(3){border-top-color:#d9c21a}.kv-akte:nth-of-type(4){border-top-color:#b0122a}
.kv-akte summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:2px 18px;align-items:center;padding:20px clamp(18px,2.4vw,30px)}
.kv-akte summary::-webkit-details-marker{display:none}
.kv-reiter{grid-row:1/3;font:600 14px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:#16161b;color:#fff;padding:6px 9px;white-space:nowrap}
.kv-akte summary .kv-titel{font:400 clamp(26px,2.6vw,38px)/1 var(--anton);text-transform:uppercase;margin:0}
.kv-zeile{grid-column:2;font-size:16px;color:#4a463e}
.kv-akte summary i{grid-row:1/3;grid-column:3;width:34px;height:34px;border:2px solid #16161b;border-radius:50%;position:relative;transition:transform .3s}
.kv-akte summary i::before,.kv-akte summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#16161b}
.kv-akte summary i::after{transform:rotate(90deg);transition:transform .3s}
.kv-akte[open] summary i::after{transform:rotate(0)}
.kv-akte summary:hover .kv-titel{color:var(--kobalt-tief)}
.kv-akte summary:focus-visible{outline:3px solid var(--kobalt);outline-offset:-3px}
.kv-blatt{padding:6px clamp(18px,2.4vw,30px) 30px;border-top:1px dashed #cfc6b4;max-width:none}
.kv-blatt h3{font:700 18px var(--sans);margin:26px 0 6px;color:#16161b}
.kv-blatt p{font-size:17px;line-height:1.6;color:#2c2a25;margin:0 0 10px;max-width:46em}
.kv-blatt .kv-klein{font:400 14px var(--mono);letter-spacing:.04em;color:#5a554b;margin-top:18px}
@media (max-width:860px){.kv-raster{grid-template-columns:1fr}.kv-schild{transform:none}}
@media (max-width:600px){.kv-akte summary{grid-template-columns:1fr auto;gap:6px 12px;padding:18px 16px}.kv-reiter{grid-row:auto;justify-self:start}.kv-akte summary .kv-titel{grid-column:1}.kv-zeile{grid-column:1;font-size:15px}.kv-akte summary i{grid-row:1/4;grid-column:2}.kv-blatt{padding:4px 16px 24px}.kv-blatt p{font-size:16px}.kv-schild p{font-size:15px}.kv-v b{font-size:48px}.kv-v span{font-size:15px}}
html.kontrast .kv-zeile,html.kontrast .kv-blatt p{color:#000}
.kv-akte{scroll-margin-top:100px}
/* Sprachwahl */
.sprachwahl{display:flex;gap:2px;align-items:center}
.sprachwahl a{font:600 13px var(--mono);letter-spacing:.08em;color:#cfcdc6;text-decoration:none;padding:8px 7px;border:1px solid transparent;min-width:34px;text-align:center}
.sprachwahl a:hover,.sprachwahl a:focus-visible{color:#fff;border-color:rgba(255,255,255,.35)}
.sprachwahl a[aria-current]{color:#111;background:var(--licht,#ffd76a)}
.sw-kopf{margin-right:6px}
.sw-menue{justify-content:center;margin:18px 0 6px}
.sw-menue a{font-size:15px;padding:10px 12px;color:#e9e7e1;border-color:rgba(255,255,255,.25)}
.sw-fuss{margin-bottom:10px}.sw-fuss a{font-size:14px}
@media (max-width:900px){.sw-kopf{display:none}}
.querschnitt .sw-menue{position:absolute;top:16px;left:var(--rand,16px);z-index:5;margin:0;gap:4px}
.querschnitt .sw-menue a{background:rgba(11,11,12,.85)}
.querschnitt .sw-menue a[aria-current]{background:var(--licht,#ffd76a);color:#111}
/* Andere Sprachen: lange Wörter sauber trennen */
html:not([lang=de]) h1,html:not([lang=de]) h2,html:not([lang=de]) h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.raeume-knopf svg{flex:none}.raeume-knopf span{white-space:nowrap}
@media (max-width:420px){html:not([lang=de]) .raeume-knopf{font-size:13.5px}}
/* ===== Galerie der zwanzig besten Ideen ===== */
.wd-galerie{position:relative;background:radial-gradient(90% 60% at 50% 38%,#24242c 0%,#111114 55%,#09090b 100%);color:#f3f1ec;padding:clamp(80px,9vw,140px) 0 clamp(60px,7vw,100px);overflow:hidden}
.wd-galerie::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,90vw);height:70%;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 0%,rgba(255,215,140,.16),transparent 70%);pointer-events:none}
.gl-kopf{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px 50px;align-items:end}
.wd-galerie h2{font-size:clamp(46px,7vw,112px);line-height:.9}
.wd-galerie .abschnitt-kopf p{color:#d6d4ce;max-width:34em}
.wd-galerie .wd-ib-suche{margin:0 0 6px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.wd-galerie .wd-ib-suche input{background:#f6f3ec;border-color:#f6f3ec}
.wd-galerie .wd-ib-suche button{background:var(--gelb);color:#111;border-color:var(--gelb)}
.wd-galerie .wd-ib-suche button:hover,.wd-galerie .wd-ib-suche button:focus-visible{background:#fff;border-color:#fff}
.gl-buehne{position:relative;perspective:1700px;perspective-origin:50% 45%;margin-top:clamp(36px,4vw,60px)}
.gl-spur{--kw:min(58vw,880px);display:flex;gap:clamp(10px,1.4vw,22px);overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;padding:40px calc((100% - var(--kw))/2) 30px;scrollbar-width:none;transform-style:preserve-3d;cursor:grab;outline:none}
.gl-spur::-webkit-scrollbar{display:none}
.gl-spur.zieht{cursor:grabbing;scroll-snap-type:none}
.gl-spur:focus-visible{box-shadow:inset 0 0 0 3px var(--gelb)}
.gl-karte{flex:0 0 var(--kw);margin:0;scroll-snap-align:center;transform-style:preserve-3d;transition:transform .12s linear;will-change:transform}
.gl-auf{display:block;width:100%;padding:0;border:0;background:none;cursor:inherit;color:inherit;perspective:900px}
.gl-bild{position:relative;display:block;border-radius:6px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;transform-style:preserve-3d;background:#1a1a1f}
.gl-bild::after{content:"";position:absolute;inset:0;background:#07070a;opacity:var(--dunkel,0);transition:opacity .25s;pointer-events:none}
.gl-bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gl-glanz{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(40% 55% at var(--gx,50%) var(--gy,30%),rgba(255,236,190,.38),transparent 70%);mix-blend-mode:soft-light}
.gl-karte.nah .gl-glanz{opacity:1}
.gl-karte.mitte .gl-bild{box-shadow:0 50px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1),0 0 80px rgba(255,200,110,.10)}
.gl-karte.mitte .gl-auf{cursor:zoom-in}
.gl-tag{position:absolute;top:12px;left:12px;font:600 14px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(10,10,12,.82);color:#fff;padding:6px 9px;backdrop-filter:blur(4px)}
.gl-tag.gelb{left:auto;right:12px;background:var(--gelb);color:#111}
.gl-karte figcaption{margin-top:18px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;text-align:center}
.gl-karte.mitte figcaption{opacity:1;transform:none}
.gl-name{display:block;font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--licht)}
.gl-satz{display:block;font-size:clamp(18px,1.6vw,22px);line-height:1.4;margin-top:6px;color:#f3f1ec}
.gl-steuer{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6px}
.gl-pfeil{width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:22px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.gl-pfeil:hover,.gl-pfeil:focus-visible{background:var(--gelb);border-color:var(--gelb);color:#111;transform:scale(1.06)}
.gl-zahl{margin:0;font:400 16px var(--mono);letter-spacing:.12em;color:#bdbbb4;min-width:5.5em;text-align:center}.gl-zahl b{color:#fff;font-weight:600}
.gl-temp{margin-top:clamp(60px,7vw,100px);perspective:1400px}
.gl-temp .hand{font-size:clamp(26px,2.6vw,38px);color:var(--licht);margin:0 auto 22px}
.gl-temp-reihe{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding:0 var(--rand);transform:translateX(var(--tx,0px)) rotateX(10deg) rotateZ(-1.5deg);transform-origin:0 50%;will-change:transform}
.gl-temp-bild{flex:0 0 clamp(260px,30vw,460px);padding:0;border:0;background:none;cursor:zoom-in;border-radius:5px;overflow:hidden;box-shadow:0 26px 50px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.gl-temp-bild:hover,.gl-temp-bild:focus-visible{transform:translateY(-10px) scale(1.03)}
.gl-temp-bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.gl-fuss{margin-top:clamp(46px,5vw,70px)}.gl-fuss p{color:#d6d4ce}
/* Lichtkasten */
.gl-licht{border:0;padding:0;background:transparent;max-width:min(1240px,96vw);width:100%;max-height:94vh;color:#f3f1ec}
.gl-licht::backdrop{background:rgba(5,5,7,.88);backdrop-filter:blur(8px)}
.gl-licht-innen{background:#121216;border:1px solid #2a2a31;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;max-height:94vh}
.gl-licht-kopf{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 20px;border-bottom:1px solid #25252b;flex-wrap:wrap}
.gl-licht-name{font:400 22px var(--anton);text-transform:uppercase;margin-right:auto}
.gl-reiter{display:flex;gap:6px;flex-wrap:wrap}
.gl-reiter button{font:600 14px var(--sans);padding:8px 12px;background:transparent;border:1px solid #3a3a42;color:#e9e7e1;cursor:pointer}
.gl-reiter button[aria-selected=true]{background:var(--gelb);border-color:var(--gelb);color:#111}
.gl-zu{width:44px;height:44px;border-radius:50%;border:1px solid #3a3a42;background:#1c1c22;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.gl-licht-bild{overflow:auto;background:#0a0a0c;flex:1;min-height:0}
.gl-licht-bild img{display:block;width:100%;height:auto}
.gl-licht.hoch .gl-licht-bild img{max-width:860px;margin:0 auto}
.gl-licht-fuss{padding:16px 20px 18px;border-top:1px solid #25252b}
.gl-licht-satz{margin:0 0 12px;font-size:18px;color:#e6e4de}
.gl-mehr-link,.gl-probe-link{color:#f3f1ec;font-weight:600;text-underline-offset:4px;align-self:center}
::view-transition-group(gl-bild){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@media (max-width:860px){.gl-kopf{grid-template-columns:1fr}}
@media (max-width:700px){
  .gl-spur{--kw:84vw;padding-top:26px}
  .gl-karte{transition:none}
  .gl-satz{font-size:17px}
  .gl-pfeil{width:48px;height:48px}
  .gl-temp-bild{flex-basis:72vw}
  .gl-licht{max-width:100vw;max-height:100vh;margin:0;height:100%}
  .gl-licht-innen{border-radius:0;max-height:100vh;height:100%}
  .gl-licht-name{font-size:19px;width:100%}
}
@media (prefers-reduced-motion:reduce){.gl-temp-reihe{transform:none;width:auto;overflow-x:auto}.gl-karte{transform:none!important}}
html.ruhig .gl-temp-reihe{transform:none;width:auto;overflow-x:auto}
/* ===== Atelierwand: ganze Seite im Fenster ===== */
.probe2{transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;will-change:transform}
.probe2 .bildschirm{position:relative}
.lang-fenster{position:absolute;left:8px;right:8px;top:8px;bottom:16px;overflow:hidden;border-radius:3px;opacity:0;transition:opacity .4s;pointer-events:none}
.lang-fenster .lang{display:block;width:100%;height:auto;transition:transform 6s cubic-bezier(.45,0,.35,1)}
.probe2.faehrt .lang-fenster{opacity:1}
.probe2.faehrt .bildschirm{box-shadow:0 40px 70px rgba(0,0,0,.7),0 0 50px rgba(255,200,110,.12)}
/* ===== Lichtzeiger ===== */
html.mit-lichtzeiger,html.mit-lichtzeiger *{cursor:none!important}
html.mit-lichtzeiger input,html.mit-lichtzeiger textarea,html.mit-lichtzeiger select,html.mit-lichtzeiger [contenteditable]{cursor:text!important}
html.mit-lichtzeiger select{cursor:pointer!important}
.lichtspur{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483646}
.lichtzeiger{position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;opacity:0;transition:opacity .25s}
.lichtzeiger.da{opacity:1}.lichtzeiger.weg{opacity:0}
.lichtzeiger::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fffaf0,#ffe1a0 55%,#e9b45a);box-shadow:0 0 0 1px rgba(20,14,0,.5),0 0 8px 2px rgba(255,205,110,.55),0 0 22px 6px rgba(255,190,80,.16);transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.lichtzeiger span{position:absolute;left:-42px;top:-42px;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#111;background:rgba(255,222,150,.92);box-shadow:0 0 30px rgba(255,200,90,.6);transform:scale(.2);opacity:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.lichtzeiger.bild span{transform:scale(1);opacity:1}.lichtzeiger.bild::before{opacity:0}
.lichtzeiger.knopf::before{transform:scale(2.6);background:rgba(255,227,161,.35);box-shadow:0 0 0 1.5px rgba(255,210,120,.9),0 0 20px 6px rgba(255,200,90,.5)}
.lichtzeiger.druck::before{transform:scale(1.8)}.lichtzeiger.druck span{transform:scale(.9)}
.lichttupf{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;z-index:2147483647;background:radial-gradient(circle,rgba(255,230,170,.95),rgba(255,200,90,.45) 45%,rgba(255,200,90,0) 70%);animation:tupf .65s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes tupf{from{transform:scale(.6);opacity:1}to{transform:scale(5.5);opacity:0}}
/* ===== Weiche Übergänge zwischen den Seiten ===== */
@view-transition{navigation:auto}
.kopf{view-transition-name:kopf}
::view-transition-old(root){animation:vt-aus .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-ein .5s cubic-bezier(0,0,.2,1) both}
@keyframes vt-aus{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes vt-ein{from{opacity:0;transform:scale(1.015);filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.gl-temp-reihe{margin-top:30px}
.gl-licht-kopf{position:relative;padding-right:70px}
.gl-zu{position:absolute;top:10px;right:12px}
@media (max-width:700px){
  .gl-spur{--kw:70vw;gap:6px}
  .gl-licht-kopf{padding:12px 64px 12px 16px}
  .gl-licht-bild{background:#0a0a0c}
}
.gl-karte{position:relative}
.probe2 .bildschirm .lang-fenster img.lang{aspect-ratio:auto;object-fit:fill;height:auto;border-radius:0}
.lichtzeiger span{font-size:14px}
/* Galerie: Beschriftung als Plakat */
.gl-karte figcaption{margin-top:22px}
.gl-name{display:inline-block;font:600 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--gelb);color:#111;padding:6px 11px;transform:rotate(-2deg);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.gl-satz{font:400 clamp(24px,2.3vw,34px)/1.15 "DMSerif",Georgia,serif;margin:14px auto 0;max-width:24ch;color:#f6f2e8;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.5)}
/* Lichtkasten als Bühne in 3D */
.gl-licht-bild{position:relative;perspective:1500px;padding:clamp(20px,3vw,44px);background:radial-gradient(70% 60% at var(--lx,50%) var(--ly,35%),rgba(255,214,140,.18),transparent 70%),#0a0a0c}
.gl-licht-bild img{border-radius:6px;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 50px 90px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08);will-change:transform}
.gl-licht.hoch .gl-licht-bild{padding:0;background:#0a0a0c;perspective:none}
.gl-licht.hoch .gl-licht-bild img{box-shadow:none;border-radius:0}
.gl-licht .gl-licht-innen{opacity:0;transform:perspective(1400px) rotateX(18deg) translateY(40px) scale(.92);transition:opacity .35s,transform .6s cubic-bezier(.2,.8,.2,1)}
.gl-licht.auf .gl-licht-innen{opacity:1;transform:none}
.gl-licht:not(.hoch).auf .gl-licht-bild img{animation:gl-ein .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes gl-ein{from{transform:rotateX(28deg) rotateY(-22deg) translateZ(-260px) scale(.8)}}
.gl-licht .gl-licht-satz{font:400 clamp(20px,1.8vw,26px)/1.25 "DMSerif",Georgia,serif;color:#f6f2e8}
@media (max-width:700px){
  .gl-buehne{perspective:900px}
  .gl-spur{--kw:66vw}
  .gl-satz{font-size:22px;max-width:20ch}
  .gl-licht-bild{padding:22px 16px;display:flex;align-items:center}
  .gl-licht:not(.hoch) .gl-licht-bild{min-height:46vh}
}
@media (prefers-reduced-motion:reduce){.gl-licht .gl-licht-innen,.gl-licht-bild img{transition:none;animation:none!important;transform:none!important}}
/* Handy filmt: echte Szene, laufende Zeit, Fokus */
.sh-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-schirm::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.sh-rec,.sh-gitter,.sh-knopf,.sh-tipp,.sh-fokus{z-index:2}
.sh-rec b{font-weight:600;font-variant-numeric:tabular-nums}
.sh-tipp{top:auto;bottom:24%;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.sh-fokus{position:absolute;left:58%;top:34%;width:62px;height:62px;margin:-31px 0 0 -31px;border:2px solid #ffd60a;opacity:0;animation:sh-fokus 5s infinite}
.sh-fokus::before,.sh-fokus::after{content:"";position:absolute;left:50%;width:2px;height:6px;margin-left:-1px;background:#ffd60a}.sh-fokus::before{top:-1px}.sh-fokus::after{bottom:-1px}
@keyframes sh-fokus{0%,58%{opacity:0;transform:scale(1.5)}62%{opacity:1;transform:scale(1)}70%{opacity:1}74%{opacity:.4}78%{opacity:1}86%,100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sh-fokus{animation:none}}
@media (max-width:860px){.sh-fokus{width:34px;height:34px;margin:-17px 0 0 -17px}.sh-tipp{bottom:22%}}
/* === Schritt 1 Anfang · Vorführung, Schlüsselbund, Räume (30.10.2026) === */
/* ---------- Vorführung: Bildschirm und Handy fahren durch die Seite ---------- */
.vf{display:none;flex-direction:column;align-items:center;gap:14px;width:100%}
.gl-licht.vorf .vf,.ib-licht.vorf .vf,.vf-raum .vf{display:flex}
.gl-licht.vorf .gl-licht-bild>img,.ib-licht.vorf .ib-bild>img{display:none}
.gl-licht.vorf .gl-licht-bild{overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,2.4vw,30px) clamp(14px,2.4vw,34px) 14px;--vf-h:max(280px,calc(94vh - 400px));background:radial-gradient(60% 55% at 50% 35%,rgba(255,206,120,.16),transparent 72%),#0a0a0c}
.ib-licht.vorf .ib-bild{overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:clamp(14px,2vw,26px) 10px 10px;--vf-h:max(300px,calc(94vh - 250px));background:radial-gradient(60% 55% at 50% 35%,rgba(255,206,120,.16),transparent 72%),#0b0b0d}
.vf-geraete{display:flex;align-items:flex-end;justify-content:center;gap:clamp(18px,2.6vw,38px);width:100%}
.vf-schirm{position:relative;flex:1 1 auto;min-width:0;max-width:940px;background:#101015;border-radius:12px;overflow:hidden;box-shadow:0 44px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.1),0 0 90px rgba(255,200,90,.1)}
.vf-leiste{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#18181e;border-bottom:1px solid #26262e}
.vf-leiste i{width:10px;height:10px;border-radius:50%;background:#3b3b45}
.vf-leiste i:first-child{background:var(--gelb)}.vf-leiste i:nth-child(2){background:var(--kobalt-hell)}
.vf-adr{margin-left:12px;flex:0 1 360px;min-width:0;height:22px;border-radius:11px;background:#0b0b0e;font:400 14px/22px var(--mono);color:#a8a8b2;padding:0 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vf-blick{height:var(--vf-h,60vh);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:#fff;overscroll-behavior:contain}
.vf-blick::-webkit-scrollbar{display:none}
.vf-blick:focus-visible{outline:3px solid var(--gelb);outline-offset:-3px}
.vf-blick img{display:block;width:100%;height:auto}
.vf-spur{position:absolute;right:5px;top:42px;bottom:8px;width:3px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;pointer-events:none}
.vf-spur i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:var(--gelb);box-shadow:0 0 10px var(--gelb)}
.vf-handy{position:relative;flex:0 0 auto;width:clamp(190px,17vw,250px);padding:12px 9px;background:#08080a;border-radius:34px;box-shadow:0 34px 70px rgba(0,0,0,.78),0 0 0 2px #2d2d35,0 0 60px rgba(255,200,90,.08)}
.vf-handy .vf-blick{border-radius:24px;height:calc(var(--vf-h,60vh) * .86)}
.vf-kerbe{position:absolute;top:18px;left:50%;width:42px;height:11px;margin-left:-21px;border-radius:8px;background:#000;z-index:2}
.vf-handy .vf-spur{right:-10px;top:44px;bottom:44px}
.vf.nur-handy .vf-handy{width:min(340px,80vw)}
.vf.nur-handy .vf-handy .vf-blick{height:var(--vf-h,60vh)}
.vf-schirm[hidden],.vf-handy[hidden],.vf-fahrt[hidden]{display:none}
.vf-fahrt{align-self:center;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;background:rgba(255,255,255,.04);color:#ece9e1;border:1px solid #3a3a44;border-radius:22px;font:400 14px var(--mono);letter-spacing:.06em;cursor:pointer;transition:border-color .3s,color .3s}
.vf-ico{width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.vf-fahrt.laeuft{border-color:rgba(233,245,2,.55);color:var(--gelb)}
.vf-fahrt.laeuft .vf-ico{clip-path:none;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.vf.neu .vf-geraete{animation:vf-ein .75s cubic-bezier(.2,.8,.2,1) both}
.vf.neu .vf-handy{animation:vf-handy .9s .12s cubic-bezier(.2,.8,.2,1) both}
@keyframes vf-ein{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes vf-handy{from{opacity:0;transform:translateY(40px) rotate(4deg)}to{opacity:1;transform:none}}
@media (max-width:899px){.vf.paar .vf-handy{display:none}}
@media (max-width:700px){.gl-licht.vorf .gl-licht-bild{--vf-h:max(280px,calc(100vh - 330px));padding:14px 12px 10px}.ib-licht.vorf .ib-bild{--vf-h:max(280px,calc(94vh - 300px))}.vf-leiste{height:28px}.vf-adr{font-size:14px;height:20px;line-height:20px}.vf-spur{top:34px}}

/* Vorführraum für Designproben */
.vf-raum{border:0;padding:0;background:transparent;width:100%;max-width:min(1320px,96vw);max-height:96vh;color:#f3f1ec;overflow:visible}
.vf-raum::backdrop{background:rgba(5,5,7,.9);backdrop-filter:blur(8px)}
.vf-raum-innen{background:radial-gradient(60% 50% at 50% 35%,rgba(255,200,90,.12),transparent 70%),#111115;border:1px solid #2a2a31;border-radius:10px;display:flex;flex-direction:column;max-height:96vh;opacity:0;transform:perspective(1400px) rotateX(10deg) translateY(30px) scale(.96);transition:opacity .35s,transform .65s cubic-bezier(.2,.8,.2,1)}
.vf-raum.auf .vf-raum-innen{opacity:1;transform:none}
.vf-raum-kopf{display:flex;align-items:center;gap:12px 18px;padding:12px 14px 12px 22px;border-bottom:1px solid #24242b;flex-wrap:wrap}
.vf-raum-titel{margin-right:auto;display:flex;flex-direction:column;min-width:0}
.vf-name{font:400 clamp(24px,2.2vw,32px)/1 var(--anton);text-transform:uppercase;letter-spacing:.01em}
.vf-was{font:400 14px/1.3 var(--mono);color:#ababb5;letter-spacing:.06em;margin-top:5px}
.vf-reiter{display:flex;gap:4px;background:#0b0b0e;padding:4px;border-radius:26px;border:1px solid #2a2a31}
.vf-reiter button{font:600 15px var(--sans);min-height:40px;padding:0 16px;background:transparent;color:#d8d6cf;border:0;border-radius:20px;cursor:pointer}
.vf-reiter button[aria-selected=true]{color:#111;background:var(--gelb)}
.vf-reiter button[hidden]{display:none}
.vf-zu{width:46px;height:46px;border-radius:50%;border:1px solid #3a3a44;background:#1c1c22;color:#f3f1ec;font-size:26px;line-height:1;cursor:pointer}
.vf-raum-buehne{padding:clamp(14px,2.4vw,30px) clamp(12px,2.4vw,30px) 12px;--vf-h:max(260px,calc(96vh - 330px));min-height:0;display:flex;justify-content:center;overflow:hidden}
.vf-raum-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:12px 22px 18px;border-top:1px solid #24242b}
.vf-live{font:600 17px var(--sans);color:#f3f1ec;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.vf-live::after{content:"";width:9px;height:9px;margin-left:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
@media (max-width:700px){.vf-raum{max-width:100vw;max-height:100vh;height:100%;margin:0}.vf-raum-innen{border-radius:0;height:100%;max-height:100vh;border:0}.vf-raum-buehne{--vf-h:max(260px,calc(100vh - 330px));flex:1}.vf-raum-kopf{padding:10px 10px 10px 16px}.vf-raum-titel{width:calc(100% - 60px)}.vf-reiter{order:3;width:100%;justify-content:center}.vf-reiter button{flex:1}.vf-raum-fuss{padding:12px 16px 16px}.vf-raum-fuss .anhaenger{flex:1 1 100%}}

/* ---------- Schlüsselbund ---------- */
.kopf-rechts{position:relative}
.bund-knopf{position:absolute;right:16px;top:calc(100% - 4px);width:52px;height:78px;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 8px;animation:bund-pendel 7s ease-in-out infinite;z-index:2}
.bund-knopf[hidden]{display:none}
.bund-svg{width:40px;height:64px;margin:0 auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(255,200,90,.25))}
.bund-knopf:hover,.bund-knopf:focus-visible{animation-play-state:paused}
.bund-zahl{position:absolute;right:-6px;top:30px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gelb);color:#111;font:800 14px/24px var(--sans);text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.bund-knopf.voll .bund-zahl{background:var(--licht)}
.bund-knopf:hover .bund-schluessel,.bund-knopf:focus-visible .bund-schluessel{filter:brightness(1.2)}
.bund-knopf.schwingt{animation:bund-schwing 1.6s cubic-bezier(.3,1.5,.4,1)}
@keyframes bund-pendel{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes bund-schwing{0%{transform:rotate(0)}14%{transform:rotate(30deg)}34%{transform:rotate(-22deg)}54%{transform:rotate(13deg)}74%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
.querschnitt-offen .bund-knopf,html.saal-dunkel .bund-knopf{opacity:0;pointer-events:none}
.bund-neu{position:fixed;left:clamp(14px,3vw,46px);bottom:clamp(16px,3vw,34px);z-index:70;display:flex;flex-direction:column;gap:2px;padding:12px 22px 12px 32px;color:#2a1f08;background:linear-gradient(135deg,#f6e2a2,#d1a44c 42%,#f2d68f 62%,#a9792e);border-radius:4px 18px 18px 4px;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6);transform-origin:0 100%;transform:translateY(20px) rotate(4deg);opacity:0;transition:opacity .45s,transform .7s cubic-bezier(.3,1.5,.4,1);pointer-events:none;max-width:min(320px,calc(100vw - 28px))}
.bund-neu::before{content:"";position:absolute;left:12px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#0b0b0c;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.5)}
.bund-neu b{font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bund-neu span{font:400 22px/1.05 var(--anton);text-transform:uppercase}
.bund-neu.da{opacity:1;transform:none}
.bund-tafel{border:0;padding:0;background:transparent;width:min(480px,94vw);color:#f3f1ec;overflow:visible}
.bund-tafel::backdrop{background:rgba(5,5,8,.84);backdrop-filter:blur(6px)}
.bund-innen{position:relative;background:radial-gradient(70% 50% at 20% 0,rgba(255,200,90,.12),transparent 70%),#121216;border:1px solid #2a2a31;border-top:4px solid var(--licht);padding:26px 26px 26px;border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.bund-ring svg{width:58px;height:92px;margin:-4px 0 6px;transform:rotate(-14deg);transform-origin:50% 8px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));animation:bund-schwing 1.8s cubic-bezier(.3,1.5,.4,1)}
.bund-titel{font:400 34px/1 var(--anton);text-transform:uppercase;margin:0 0 8px}
.bund-lead{color:#d2cfc7;font-size:17px;margin:0 0 12px}
.bund-stand{font:400 15px var(--mono);color:#ababb5;margin:0 0 14px}.bund-stand b{color:var(--licht);font:400 26px var(--anton);margin-right:6px}
.bund-liste{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:9px}
.bund-liste .anh{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 12px;font:600 16px var(--sans);text-decoration:none;border-radius:4px 22px 22px 4px}
.bund-liste .anh i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.bund-liste .da .anh{background:linear-gradient(135deg,#f6e2a2,#d1a44c 45%,#f2d68f 65%,#a9792e);color:#2a1f08;box-shadow:0 6px 14px rgba(0,0,0,.4);animation:anh-ein .55s calc(var(--i) * 70ms) cubic-bezier(.3,1.4,.4,1) both}
.bund-liste .da .anh i{background:#121216;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.bund-liste .zu .anh{border:1px dashed #555561;color:#c9c7c0}
.bund-liste .zu .anh i{border:1px solid #777782}
.bund-liste .zu .anh:hover,.bund-liste .zu .anh:focus-visible{border-color:var(--licht);color:#fff}
@keyframes anh-ein{from{opacity:0;transform:translateY(-10px) rotate(-8deg)}to{opacity:1;transform:none}}
.bund-alle{font:600 24px/1.1 var(--hand);color:var(--licht);margin:-6px 0 18px}
.bund-zu{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid #3a3a44;background:#1c1c22;color:#f3f1ec;font-size:24px;line-height:1;cursor:pointer}
.bund-innen .anhaenger{width:100%}
.qs-etage.war .fensterchen{background:#f5cf7a;box-shadow:0 0 18px rgba(255,200,90,.5)}
.tuerblatt.zuletzt{border-color:var(--licht);box-shadow:0 0 0 1px var(--licht),0 0 70px rgba(255,200,90,.22)}
.tuerblatt.zuletzt img{filter:brightness(1.02)}
.zuletzt-zettel{display:block;margin-top:12px;font:600 22px/1.12 var(--hand);color:var(--licht)}
.bund-brief{margin-top:28px;padding:18px 20px 16px;background:#fffdf6;border:1px solid #cfc6b2;box-shadow:0 12px 26px rgba(0,0,0,.08);max-width:460px;transform:rotate(-1deg)}
.bund-brief[hidden]{display:none}
.bund-brief-kopf{font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6d685d;margin:0 0 10px}
.bund-anh{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 10px}
.bund-anh li{position:relative;font:600 15px var(--sans);padding:7px 15px 7px 24px;border-radius:3px 16px 16px 3px;background:linear-gradient(135deg,#f6e2a2,#d1a44c 45%,#f2d68f 65%,#a9792e);color:#2a1f08}
.bund-anh li::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fffdf6}
.bund-mit{display:flex;align-items:center;gap:10px;font-size:17px;min-height:44px;cursor:pointer;color:#111}
.bund-mit input{width:22px;height:22px;accent-color:var(--kobalt);margin:0}
.bund-satz{font-size:15px;color:#5f5a50;margin:0}
@media (max-width:700px){.bund-knopf{right:10px;width:46px;height:66px}.bund-svg{width:34px;height:54px}.bund-zahl{top:24px}}
@media (prefers-reduced-motion:reduce){.bund-knopf,.bund-knopf.schwingt,.bund-ring svg,.bund-liste .da .anh{animation:none}}
html.ruhig .bund-knopf,html.ruhig .bund-knopf.schwingt,html.ruhig .bund-ring svg,html.ruhig .bund-liste .da .anh{animation:none}

/* ---------- Haustür: Wandlampe, Messing, Flurlicht, Schatten ---------- */
.haustuer{display:flex;align-items:stretch;justify-content:flex-end;gap:clamp(16px,2.6vw,34px)}
.tuerglas{position:relative;flex:0 0 clamp(92px,9vw,138px);border:clamp(9px,1vw,13px) solid #0a1631;border-radius:4px;background:linear-gradient(180deg,#0c1426,#111c35 60%,#0b1222);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 30px 60px rgba(0,0,0,.45);overflow:hidden}
.tuerglas::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),radial-gradient(120% 60% at 50% 20%,rgba(255,255,255,.06),transparent 70%);z-index:3;pointer-events:none}
.flurlicht{position:absolute;inset:0;background:radial-gradient(90% 55% at 50% 22%,#ffe2a6,#f0a64c 45%,#7a3e14 85%);opacity:0;transition:opacity .5s}
.schatten{position:absolute;left:50%;bottom:-4%;width:96%;margin-left:-48%;fill:#1b0d05;opacity:0;filter:blur(7px);transform-origin:50% 100%;transform:scale(.5);transition:opacity 1.3s .35s,transform 1.6s .3s cubic-bezier(.2,.8,.2,1);z-index:2}
.sprossen{position:absolute;inset:0;z-index:4;background:linear-gradient(90deg,transparent calc(50% - 3px),#0a1631 calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px)),linear-gradient(0deg,transparent calc(38% - 3px),#0a1631 calc(38% - 3px) calc(38% + 3px),transparent calc(38% + 3px))}
.haustuer.kommt .flurlicht{opacity:1}
.haustuer.kommt .schatten{opacity:.82;transform:scale(1)}
.haustuer.kommt .tuerglas{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 80px rgba(255,170,80,.35)}
.tableau-wand{position:relative;flex:0 1 460px;padding-top:58px}
.wandlampe{position:absolute;top:0;left:50%;width:100px;height:50px;margin-left:-50px}
.wandlampe::before{content:"";position:absolute;left:47px;top:0;width:6px;height:16px;background:linear-gradient(90deg,#7a5617,#e7c77c,#7a5617)}
.wandlampe i{position:absolute;left:22px;right:22px;top:14px;height:24px;border-radius:30px 30px 5px 5px;background:linear-gradient(180deg,#f6e2a2,#c69a44 60%,#7a5617);box-shadow:0 4px 10px rgba(0,0,0,.45)}
.wandlampe i::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;height:6px;border-radius:0 0 8px 8px;background:#fff6d9;opacity:.25;transition:opacity .6s,box-shadow .6s}
.wandlampe::after{content:"";position:absolute;left:50%;top:34px;width:560px;height:520px;margin-left:-280px;background:radial-gradient(46% 58% at 50% 0,rgba(255,214,140,.34),rgba(255,190,110,.12) 45%,transparent 72%);opacity:0;transition:opacity .9s;pointer-events:none;z-index:1}
.licht-an .wandlampe i::after{opacity:1;box-shadow:0 4px 18px 4px rgba(255,214,140,.85)}
.licht-an .wandlampe::after{opacity:1;animation:flackern 1.2s steps(1,end)}
@keyframes flackern{0%{opacity:0}12%{opacity:.8}18%{opacity:.1}30%{opacity:.9}36%{opacity:.4}48%,100%{opacity:1}}
.haustuer .tableau{position:relative;z-index:2;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter 1s .2s;filter:brightness(.62) saturate(.85)}
.licht-an .tableau{filter:none}
.tableau-glanz{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(38% 30% at var(--gx,32%) var(--gy,18%),rgba(255,252,236,.55),rgba(255,244,210,.12) 45%,transparent 70%);mix-blend-mode:soft-light;z-index:0}
.tableau>*:not(.tableau-glanz){position:relative;z-index:1}
.tableau>.tableau-kopf{position:absolute}
.knopfzeile .namensschild{position:relative}
.knopfzeile i{transition:background .2s,box-shadow .2s,transform .12s}
.knopfzeile:active i,.knopfzeile.gedrueckt i{transform:translateY(2px) scale(.96);box-shadow:0 0 0 3px #7a5a22,0 0 0 6px #e4c27a,inset 0 3px 6px rgba(60,40,10,.6),0 0 22px rgba(255,190,90,.8)}
.knopfzeile .namensschild::after{content:"";position:absolute;right:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#7b6a4a;box-shadow:inset 0 1px 2px rgba(0,0,0,.5);transition:background .3s,box-shadow .3s}
.knopfzeile.gedrueckt .namensschild::after{background:#ffb547;box-shadow:0 0 10px 2px rgba(255,181,71,.85)}
.knopfzeile .namensschild{padding-right:30px}
.fussmatte-zeile{display:flex;justify-content:flex-end;margin-top:22px;perspective:700px}
.fussmatte{margin:0;width:min(440px,100%);padding:20px 18px;text-align:center;font:400 clamp(20px,2vw,26px)/1 var(--anton);letter-spacing:.08em;text-transform:uppercase;color:#3a2410;background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(180deg,#b88a4e,#9a6c34);border:6px solid #3a2410;border-radius:6px;transform:rotateX(34deg);transform-origin:50% 0;box-shadow:0 22px 30px rgba(0,0,0,.45);text-shadow:0 1px 0 rgba(255,220,160,.35)}
@media (max-width:900px){.haustuer{justify-content:center}.tableau-wand{flex:1 1 auto;max-width:440px}}
@media (max-width:520px){.tuerglas{flex-basis:62px;border-width:8px}.haustuer{gap:12px}.fussmatte-zeile{justify-content:center}.wandlampe::after{width:420px;margin-left:-210px}}
@media (prefers-reduced-motion:reduce){.schatten,.flurlicht{transition:none}.licht-an .wandlampe::after{animation:none}.haustuer .tableau{transition:none}}

/* ---------- Klare Verhältnisse: Firmenschild unter der Lampe ---------- */
.kv-wand{position:relative;padding-top:60px}
.kv-lampe{position:absolute;top:0;left:50%;width:110px;height:52px;margin-left:-55px;z-index:2}
.kv-lampe::before{content:"";position:absolute;left:52px;top:0;width:6px;height:16px;background:linear-gradient(90deg,#7a5617,#e7c77c,#7a5617)}
.kv-lampe i{position:absolute;left:22px;right:22px;top:14px;height:26px;border-radius:32px 32px 5px 5px;background:linear-gradient(180deg,#f6e2a2,#c69a44 60%,#7a5617);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.kv-lampe i::after{content:"";position:absolute;left:9px;right:9px;bottom:-5px;height:6px;border-radius:0 0 8px 8px;background:#fff6d9;opacity:.2;transition:opacity .6s,box-shadow .6s}
.kv-lampe::after{content:"";position:absolute;left:50%;top:36px;width:640px;height:560px;margin-left:-320px;background:radial-gradient(46% 58% at 50% 0,rgba(255,214,140,.36),rgba(255,190,110,.12) 45%,transparent 72%);opacity:0;pointer-events:none}
.kv-wand.licht-an .kv-lampe i::after{opacity:1;box-shadow:0 4px 20px 5px rgba(255,214,140,.9)}
.kv-wand.licht-an .kv-lampe::after{opacity:1;animation:flackern 1.2s steps(1,end)}
.kv-wand .kv-schild{z-index:1;transform:perspective(1200px) rotate(-1deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),filter 1.1s .25s;filter:brightness(.5) saturate(.8)}
.kv-wand.licht-an .kv-schild{filter:none}
.kv-glanz{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(36% 34% at var(--gx,30%) var(--gy,20%),rgba(255,252,236,.6),rgba(255,244,210,.14) 45%,transparent 70%);mix-blend-mode:soft-light}
.kv-schild>p{position:relative}
.kv-wand.licht-an .kv-schild-firma{animation:gravur 2.4s 1s ease-out both}
@keyframes gravur{0%{text-shadow:0 1px 0 rgba(255,255,255,.45)}40%{text-shadow:0 1px 0 rgba(255,255,255,.45),0 0 18px rgba(255,236,170,.9)}100%{text-shadow:0 1px 0 rgba(255,255,255,.45)}}
.kv-v b{transition:color .3s}
.kv-v.steht b{animation:steht .5s cubic-bezier(.3,1.6,.4,1)}
@keyframes steht{0%{transform:translateY(-6px)}100%{transform:none}}
.kv-wach{display:flex;align-items:center;gap:8px;margin-top:10px;font:400 14px/1.3 var(--mono);font-style:normal;color:#111;letter-spacing:.03em}
.kv-wach::before{content:"";width:9px;height:9px;border-radius:50%;background:#1b8a3a;box-shadow:0 0 0 0 rgba(27,138,58,.6);animation:puls 2s infinite}
.kv-wach[hidden]{display:none}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(27,138,58,.55)}70%{box-shadow:0 0 0 9px rgba(27,138,58,0)}100%{box-shadow:0 0 0 0 rgba(27,138,58,0)}}
@media (max-width:860px){.kv-wand .kv-schild{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}.kv-lampe::after{width:440px;margin-left:-220px}}
@media (prefers-reduced-motion:reduce){.kv-wand.licht-an .kv-lampe::after,.kv-wand.licht-an .kv-schild-firma,.kv-wach::before{animation:none}.kv-wand .kv-schild{transition:none}}

/* ---------- Atelier: zwei Tassen dampfen ---------- */
.wd-woche span{position:relative}
.wd-woche .dampf{position:absolute;left:28%;bottom:66%;width:44%;height:70%;pointer-events:none;display:block;min-height:0}
.dampf u{position:absolute;bottom:0;width:7px;height:100%;border-radius:50%;background:linear-gradient(0deg,rgba(255,255,255,.75),rgba(255,255,255,0));filter:blur(3px);opacity:0;animation:dampf 3.6s ease-in infinite}
.dampf u:nth-child(1){left:12%}.dampf u:nth-child(2){left:46%;animation-delay:1.2s}.dampf u:nth-child(3){left:78%;animation-delay:2.3s}
@keyframes dampf{0%{opacity:0;transform:translateY(10px) scaleY(.4) skewX(0)}25%{opacity:.85}70%{opacity:.35;transform:translateY(-14px) scaleY(1) skewX(14deg)}100%{opacity:0;transform:translateY(-30px) scaleY(1.2) skewX(-10deg)}}
@media (prefers-reduced-motion:reduce){.dampf{display:none}}html.ruhig .dampf{display:none}

/* ---------- Studio: Vorhang, Saallicht, Klappe ---------- */
.saal-leinwand{overflow:hidden}
.vorhang-l,.vorhang-r{position:absolute;top:0;bottom:0;width:52%;z-index:4;pointer-events:none;background:repeating-linear-gradient(90deg,#0b1f6e 0,#1546e0 5%,#0d2fa3 9%,#06155a 13%,#0b1f6e 15%),#0d2fa3;box-shadow:inset 0 -30px 40px rgba(0,0,0,.45),0 0 40px rgba(0,0,0,.6);transition:transform 2.2s cubic-bezier(.65,0,.2,1)}
.vorhang-l{left:0;transform-origin:0 0}.vorhang-r{right:0;transform-origin:100% 0}
.saal.vorhang-auf .vorhang-l,.saal.vorhang-auf .vorhang-r{transform:scaleX(.13)}
.saal.vorhang-auf.laeuft .vorhang-l,.saal.vorhang-auf.laeuft .vorhang-r{transform:scaleX(.07)}
.vorhang-l::after,.vorhang-r::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,var(--gelb) 0 6px,#c9d300 6px 10px);opacity:.9}
.saalnacht{position:fixed;inset:0;z-index:55;background:rgba(2,2,4,.9);opacity:0;pointer-events:none;transition:opacity 1.4s ease}
html.saal-dunkel .saalnacht{opacity:1}
html.saal-dunkel .kinosaal{z-index:56}
html.saal-dunkel .kopf{opacity:.18;transition:opacity 1.2s}
.kinosaal .saal{position:relative}
.klappe{position:absolute;left:50%;top:50%;width:300px;margin:-100px 0 0 -150px;z-index:6;opacity:0;pointer-events:none;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.klappe-oben{display:block;height:36px;background:repeating-linear-gradient(-55deg,#0b0b0c 0 20px,#f3f1ec 20px 40px);border:4px solid #0b0b0c;border-radius:4px 4px 0 0;transform-origin:0 100%;transform:rotate(-24deg)}
.klappe-unten{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:14px 16px 14px;background:#0b0b0c;border:4px solid #0b0b0c;color:#f3f1ec;border-top:3px solid #f3f1ec}
.klappe-unten b{grid-column:1/-1;font:400 34px/1 var(--anton);text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid #3a3a44;padding-bottom:8px}
.klappe-unten i{font:400 15px var(--mono);font-style:normal;color:var(--gelb);white-space:nowrap;letter-spacing:.1em;text-transform:uppercase}
.klappe.schlaegt{animation:klappe-da 1.2s ease both}
.klappe.schlaegt .klappe-oben{animation:klappe-zu .32s .18s cubic-bezier(.6,0,.9,.5) both}
@keyframes klappe-da{0%{opacity:0;transform:scale(.8)}12%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes klappe-zu{from{transform:rotate(-24deg)}to{transform:rotate(0)}}
@media (max-width:700px){.vorhang-l,.vorhang-r{display:none}}
@media (prefers-reduced-motion:reduce){.vorhang-l,.vorhang-r,.klappe{display:none}.saalnacht{transition:none}}

/* ---------- Kreativraum: Galerie im Dunkeln, jede Arbeit ihr Licht ---------- */
.kr-schild{display:inline-flex;margin:0 0 20px;padding:12px 20px;background:#f3f1ec;color:#111;font:400 16px var(--mono);letter-spacing:.12em;text-transform:uppercase;border:2px solid #111;box-shadow:4px 4px 0 var(--gelb);transform:rotate(-2deg)}
.kr-schild s{position:relative;text-decoration:none;color:#55534d}
.kr-schild s::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:4px;margin-top:-2px;background:var(--kobalt);transform:rotate(-8deg);border-radius:2px}
.kr-schild span span{white-space:nowrap}
html.kr-galerie .spot{position:relative;transition:filter 1s ease}
html.kr-galerie .spot:not(.im-licht){filter:brightness(.58) saturate(.7)}
.kegel{position:absolute;left:-8%;right:-8%;top:-70px;height:calc(70px + 55%);pointer-events:none;z-index:3;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 45%,#000 70%,transparent);background:radial-gradient(42% 75% at 50% 0,rgba(255,214,140,.30),rgba(255,206,120,.08) 55%,transparent 75%);mix-blend-mode:screen;opacity:0;transition:opacity 1s}
.spot.im-licht>.kegel{opacity:1}
.abschnitt.papier .kegel,.atelier .kegel{mix-blend-mode:multiply;background:radial-gradient(42% 75% at 50% 0,rgba(255,196,96,.22),transparent 72%)}

/* ---------- Maschinenraum: Schaltpult ---------- */
.pult{display:flex;align-items:stretch;gap:clamp(16px,2.6vw,34px);margin-top:clamp(20px,3vw,34px);padding:clamp(16px,2vw,24px);background:linear-gradient(180deg,#1b1d24,#121318);border:1px solid #2c2f39;border-top:3px solid #3a3e4a;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 50px rgba(0,0,0,.45)}
.hebel{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px;background:none;border:0;color:#f3f1ec;cursor:pointer;min-width:96px}
.hebel-schacht{position:relative;width:34px;height:118px;border-radius:17px;background:linear-gradient(90deg,#08090c,#22242c 50%,#08090c);box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
.hebel-arm{position:absolute;left:50%;bottom:50%;width:10px;height:62px;margin-left:-5px;background:linear-gradient(90deg,#8a8d97,#e6e8ee 45%,#7d808a);border-radius:5px;transform-origin:50% 100%;transform:rotate(-34deg);transition:transform .55s cubic-bezier(.5,1.6,.4,1)}
.hebel-arm i{position:absolute;left:50%;top:-16px;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle at 36% 30%,#ff8a6a,#d6321c 55%,#7a1508);box-shadow:0 6px 12px rgba(0,0,0,.6)}
.hebel:hover .hebel-arm{transform:rotate(-26deg)}
.pult.an .hebel-arm{transform:rotate(34deg)}
.pult.an .hebel-arm i{background:radial-gradient(circle at 36% 30%,#f6ff9a,var(--gelb) 55%,#7c8300)}
.hebel-text{font:400 15px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb)}
.pult.an .hebel-text{color:#8fd19e}
.pult-feld{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.pult-kopf{display:flex;justify-content:space-between;gap:10px;margin:0 0 12px;font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a8acb8}
.pult-status{color:#f3f1ec}.pult.an .pult-status{color:#8fd19e}
.lampen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
.lampen li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:600 14px/1.15 var(--sans);color:#a8acb8;transition:color .4s}
.lampen i{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#4a4d57,#22242b 60%,#111216);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 3px #2a2d36;transition:background .35s,box-shadow .35s}
.lampen li.an{color:#f3f1ec}
.lampen li.an i{background:radial-gradient(circle at 38% 32%,#fffbd0,var(--gelb) 50%,#8d9400);box-shadow:0 0 0 3px #2a2d36,0 0 18px rgba(233,245,2,.75)}
.pult.fertig .lampen li.an i{background:radial-gradient(circle at 38% 32%,#e6ffe9,#55d27a 50%,#1e7a3a);box-shadow:0 0 0 3px #2a2d36,0 0 16px rgba(85,210,122,.7)}
.kontrolle{display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding:4px 10px;border:1px solid rgba(143,209,158,.45);border-radius:14px;color:#8fd19e;letter-spacing:.1em;white-space:nowrap}
.kontrolle i{width:9px;height:9px;border-radius:50%;background:#55d27a;box-shadow:0 0 8px #55d27a;animation:blink 1.8s infinite}
@keyframes blink{0%,60%,100%{opacity:1}75%{opacity:.25}}
@media (max-width:900px){.lampen{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:14px}}
@media (max-width:600px){.pult{flex-direction:column;align-items:stretch}.hebel{flex-direction:row;justify-content:center;gap:18px;min-height:96px}.hebel-schacht{height:96px}.hebel-arm{height:50px}.lampen{grid-template-columns:repeat(3,minmax(0,1fr))}.kontrolle{margin:8px 0 0}}
@media (prefers-reduced-motion:reduce){.kontrolle i{animation:none}.hebel-arm{transition:none}}

/* ---------- Zentrale: Wanduhr und Notiz für den Morgen ---------- */
.ivi-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.ivi-kopf>div:first-child{max-width:820px}
.ivi-uhr{display:flex;align-items:center;gap:16px;max-width:360px}
.ivi-uhr[hidden]{display:none}
.ivi-uhr svg{flex:0 0 74px;width:74px;height:74px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.ivi-uhr p{margin:0;display:flex;flex-direction:column;gap:2px}
.ivi-uhr-zeit{font:400 14px var(--mono);letter-spacing:.08em;color:#ababb5}
.ivi-uhr-satz{font:600 23px/1.1 var(--hand);color:var(--licht)}
.ivi-uhr.zu .ivi-uhr-satz{color:var(--gelb)}
.ivi-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(18px,2.6vw,34px);align-items:center}
.ivi-notiz{position:relative;background:#fdfbf3;color:#1b1b1f;padding:24px 22px 20px;border-radius:2px;box-shadow:0 26px 50px rgba(0,0,0,.55);transform:rotate(1.6deg);background-image:linear-gradient(transparent 0 31px,#d9e3f7 31px 32px);background-size:100% 32px;background-position:0 12px}
.ivi-notiz::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(233,245,2,.75);transform:rotate(-3deg);box-shadow:0 2px 4px rgba(0,0,0,.2)}
.notiz-kopf{margin:0;font:400 24px/1 var(--anton);text-transform:uppercase}
.notiz-von{margin:4px 0 12px;font:400 14px var(--mono);color:#5d5d68;letter-spacing:.06em}
.ivi-notiz ol{list-style:none;padding:0;margin:0}
.ivi-notiz li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:4px 0 6px;opacity:0;transform:translateX(-8px);transition:opacity .5s,transform .5s}
.ivi-notiz li time{grid-row:span 2;font:400 14px/1.9 var(--mono);color:var(--kobalt)}
.ivi-notiz li b{font:600 23px/1.15 var(--hand);color:#1b1b1f}
.ivi-notiz li span{font:600 21px/1.15 var(--hand);color:#3b3b45}
.ivi-notiz li.steht,.notiz-ende.steht{opacity:1;transform:none}
.notiz-ende{margin:10px 0 0;padding-top:10px;border-top:2px solid #1b1b1f;font:600 24px/1.15 var(--hand);color:var(--kobalt);opacity:0;transition:opacity .6s}
.notiz-ende time{display:block;font:400 14px var(--mono);color:#5d5d68}
@media (max-width:900px){.ivi-buehne{grid-template-columns:1fr}.ivi-notiz{max-width:440px;margin:6px auto 0;transform:rotate(1deg)}}

/* ---------- Büro: gerade jetzt ---------- */
.stunde.jetzt .blatt{box-shadow:0 0 0 3px var(--gelb),0 20px 40px rgba(0,0,0,.35)}
.stunde.jetzt .uhrzeit-gross{color:var(--gelb)}
.jetzt-etikett{display:block;margin-top:18px;padding:12px 16px;background:var(--gelb);color:#111;text-decoration:none;transform:rotate(-1.5deg);box-shadow:4px 4px 0 #000;max-width:300px}
.jetzt-etikett small{display:flex;align-items:center;gap:8px;font:400 14px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.jetzt-etikett small::before{content:"";width:9px;height:9px;border-radius:50%;background:#d6321c;animation:blink 1.6s infinite}
.jetzt-etikett b{display:block;font:400 22px/1.1 var(--anton);text-transform:uppercase;margin-top:4px}
.jetzt-etikett.zu{background:#1c1c22;color:#e9e6de;box-shadow:4px 4px 0 var(--kobalt);font:600 22px/1.15 var(--hand)}
.karteikarte:not([hidden]){animation:kk-ziehen .6s cubic-bezier(.2,.9,.25,1.15)}
@keyframes kk-ziehen{0%{transform:translateY(46px) rotate(-1.6deg);opacity:.2}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.karteikarte:not([hidden]){animation:none}.jetzt-etikett small::before{animation:none}}

/* ---------- Dachterrasse: Schlüsselkarten, Türhänger ---------- */
.karte.sk::after{display:none}
.karte.sk .streifen{margin:0}
.karte.sk{overflow:visible;position:relative;perspective:1200px;cursor:pointer;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;min-height:330px;outline-offset:6px}
.sk-vorn,.sk-hinten{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;padding:24px 24px 22px;transition:transform .8s cubic-bezier(.3,1.25,.4,1);box-shadow:0 26px 50px rgba(0,0,0,.28)}
.sk-vorn{background:linear-gradient(135deg,#1546e0,#0d2fa3 55%,#0a1f73);color:#fff;overflow:hidden;display:flex;flex-direction:column}
.sk-vorn::after{content:"";position:absolute;right:-74px;top:-74px;width:190px;height:190px;border-radius:50%;border:24px solid rgba(233,245,2,.85)}
.sk-vorn .nr{display:inline-block;font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb);position:relative;z-index:1}
.sk-chip{display:block;width:40px;height:30px;margin-top:16px;border-radius:5px;background:linear-gradient(135deg,#f6e2a2,#c69a44 50%,#f2d68f);box-shadow:inset 0 0 0 1px rgba(90,60,10,.45);position:relative;z-index:1}
.sk-vorn h3{position:relative;z-index:1;font:400 clamp(28px,2.4vw,36px)/1.02 var(--anton);text-transform:uppercase;margin:18px 0 0;max-width:12ch;color:#fff}
.sk-vorn .streifen{height:26px;background:#0b0b0c;margin:auto -24px 0!important;flex:0 0 auto;position:relative;top:4px}
.sk-tipp{display:block;margin-top:12px;font:600 22px/1 var(--hand);color:var(--gelb)}
.sk-hinten{background:#fdfbf3;color:#141418;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;border:2px solid #111}
.sk-hinten .nr{font:400 14px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--kobalt);margin-bottom:12px}
.sk-hinten p{font-size:clamp(18px,1.5vw,20px);margin:0}
.karte.sk.gedreht .sk-vorn{transform:rotateY(-180deg)}
.karte.sk.gedreht .sk-hinten{transform:rotateY(0)}
.karte.sk:hover .sk-vorn{transform:rotateY(-8deg)}
.karte.sk.gedreht:hover .sk-vorn{transform:rotateY(-180deg)}
@media (max-width:900px){.karte.sk{min-height:280px}}
.anhaenger.mit-schild{position:relative;overflow:visible;clip-path:none}
.dnd{position:absolute;right:16px;top:calc(100% - 4px);display:flex;flex-direction:column;align-items:center;width:132px;padding:22px 10px 12px;background:var(--gelb);color:#111;border-radius:8px 8px 14px 14px;text-align:center;transform-origin:50% 0;transform:rotate(6deg);box-shadow:0 12px 20px rgba(0,0,0,.35);animation:dnd 5s ease-in-out infinite;pointer-events:none;z-index:2}
.dnd::before{content:"";position:absolute;top:7px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--nacht);box-shadow:inset 0 0 0 2px rgba(0,0,0,.2)}
.dnd b{display:block;margin-top:14px;font:400 17px/1 var(--anton);text-transform:uppercase}
.dnd span{display:block;font:600 19px/1.05 var(--hand);margin-top:4px}
@keyframes dnd{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-2deg)}}
@media (max-width:600px){.dnd{right:8px;width:118px}}
@media (prefers-reduced-motion:reduce){.dnd{animation:none}.sk-vorn,.sk-hinten{transition:none}}

/* ---------- Wer hier wohnt: Fenster je Ort, Polaroid-Blitz ---------- */
.ort-fenster{flex:0 0 auto;width:30px;height:26px;margin-left:6px;background:linear-gradient(180deg,#bcd6f5,#7fa7dc);border:3px solid #2a2a31;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);position:relative;align-self:center}
.ort-fenster::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#2a2a31}
.ort-fenster.nacht{background:radial-gradient(circle at 50% 40%,#ffe6a8,var(--licht) 60%,#d98f2b);box-shadow:0 0 22px rgba(255,200,90,.85)}
.welt-licht{margin:20px 0 0;font-size:26px;color:var(--licht)}
.kopfbild{cursor:pointer}
.kopfbild::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.kopfbild.blitz::after{animation:blitz .7s ease-out}
.kopfbild.blitz img{animation:entwickeln 1.4s ease-out}
@keyframes blitz{0%{opacity:.95}100%{opacity:0}}
@keyframes entwickeln{0%{filter:brightness(1.6) saturate(.3)}100%{filter:none}}

/* ---------- Ideenbuch: Geschmackstest, Pin-Ruck ---------- */
.ib-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.ib-test-knopf{display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;text-align:left;padding:12px 20px 12px 14px;min-height:56px;background:#141418;color:#f2f0ea;border:2px solid var(--gelb);border-radius:6px;cursor:pointer;transition:background .25s,transform .25s}
.ib-test-knopf[hidden]{display:none}
.ib-test-knopf:hover,.ib-test-knopf:focus-visible{background:#1e1e24;transform:translateY(-2px)}
.ib-test-knopf b{font:400 22px/1 var(--anton);text-transform:uppercase;letter-spacing:.02em}
.ib-test-knopf small{grid-column:2;font:600 18px/1.1 var(--hand);color:var(--gelb)}
.ib-test-ico{grid-row:span 2;display:flex;gap:4px}
.ib-test-ico i{width:18px;height:26px;border-radius:3px;background:linear-gradient(135deg,var(--kobalt-hell),var(--kobalt))}
.ib-test-ico i+i{background:linear-gradient(135deg,#fff3c4,var(--licht));transform:rotate(8deg)}
.ib-test-knopf.fertig{border-color:var(--licht)}
.ib-test{border:0;padding:0;background:transparent;width:min(1100px,96vw);max-height:94vh;color:#f3f1ec;overflow:visible}
.ib-test::backdrop{background:rgba(5,5,8,.9);backdrop-filter:blur(8px)}
.ib-test-innen{position:relative;background:radial-gradient(60% 50% at 50% 20%,rgba(255,200,90,.12),transparent 70%),#121216;border:1px solid #2a2a31;border-radius:10px;padding:clamp(22px,3vw,40px);max-height:94vh;overflow:auto}
.ib-test .ib-zu{position:absolute;top:12px;right:12px;width:46px;height:46px;border-radius:50%;border:1px solid #3a3a44;background:#1c1c22;color:#f3f1ec;font-size:26px;cursor:pointer}
.ib-test h2{font-size:clamp(34px,4vw,60px);margin:10px 0 22px}
.ib-test-paar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,2vw,24px)}
.ib-test-paar.neu .ib-test-wahl{animation:wahl-ein .55s cubic-bezier(.2,.8,.2,1) both}.ib-test-paar.neu .ib-test-wahl+span+.ib-test-wahl{animation-delay:.08s}
@keyframes wahl-ein{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.ib-test-wahl{padding:0;border:0;background:none;cursor:pointer;border-radius:8px;overflow:hidden;box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 0 2px #2a2a31;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .35s}
.ib-test-wahl img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ib-test-wahl:hover,.ib-test-wahl:focus-visible{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 34px 60px rgba(0,0,0,.6),0 0 0 3px var(--gelb)}
.ib-test-wahl.gewaehlt{transform:scale(1.04);box-shadow:0 0 0 4px var(--gelb),0 0 60px rgba(233,245,2,.35)}
.ib-test-wahl.weg{opacity:.25;transform:scale(.95)}
.ib-test-oder{font:600 30px var(--hand);color:var(--licht)}
.ib-test-punkte{list-style:none;display:flex;gap:8px;padding:0;margin:24px 0 0;justify-content:center}
.ib-test-punkte li{width:30px;height:6px;border-radius:3px;background:#2e2e36;transition:background .3s}
.ib-test-punkte li.da{background:var(--gelb)}
.ib-test-ende{text-align:center;padding:20px 0 10px}
.ib-test-ende[hidden],.ib-test-frage[hidden]{display:none}
.ib-test-satz{font-size:20px;color:#d6d4ce;max-width:34ch;margin:0 auto 26px}
@media (max-width:700px){.ib-test{width:100vw;max-width:100vw;max-height:100vh;height:100%;margin:0}.ib-test-innen{border-radius:0;height:100%;max-height:100vh;padding:58px 16px 22px}.ib-test-paar{grid-template-columns:1fr}.ib-test-oder{text-align:center;font-size:26px}.ib-test h2{margin-bottom:16px}}
.ib-karte.gepinnt{animation:pin-ruck .55s cubic-bezier(.3,1.6,.4,1)}
@keyframes pin-ruck{0%{transform:none}25%{transform:translateY(-8px) rotate(-2.5deg)}55%{transform:translateY(2px) rotate(1.2deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.ib-karte.gepinnt,.ib-test-paar.neu .ib-test-wahl{animation:none}}

/* ---------- Briefkasten: falten, einwerfen ---------- */
.briefbogen.eingeworfen{animation:brief-falten 1.1s cubic-bezier(.55,0,.35,1) forwards;transform-origin:50% 100%;pointer-events:none}
@keyframes brief-falten{0%{transform:none;opacity:1}30%{transform:perspective(900px) rotateX(58deg) scaleY(.62);opacity:1}55%{transform:perspective(900px) rotateX(0) scale(.38,.22);opacity:1}100%{transform:translateY(240px) scale(.3,.18);opacity:0}}
.briefschlitz{display:none;position:relative;margin:-60px auto 0;width:min(320px,80%);height:64px;border-radius:8px;background:linear-gradient(180deg,#f6e2a2,#c69a44 55%,#8a6420);box-shadow:0 18px 30px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6);align-items:center;justify-content:center}
.briefschlitz.da{display:flex}
.briefschlitz::before{content:"";position:absolute;left:14%;right:14%;top:16px;height:12px;border-radius:6px;background:#1b1408;box-shadow:inset 0 3px 5px rgba(0,0,0,.8)}
.schlitz-klappe{position:absolute;left:12%;right:12%;top:12px;height:18px;border-radius:6px;background:linear-gradient(180deg,#f8e8b4,#b98a38);transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.6,.4,1);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.briefschlitz.klappt .schlitz-klappe{transform:perspective(200px) rotateX(-70deg)}
.briefschlitz b{position:absolute;bottom:8px;font:400 14px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#4a3410}
@media (prefers-reduced-motion:reduce){.briefbogen.eingeworfen{animation:none;opacity:0}}

/* Ansichts-Reiter als ruhiger Schieber statt Kastenknöpfe */
.gl-reiter:not([hidden]),.ib-reiter:not(:empty){display:inline-flex;flex-wrap:wrap;gap:4px;background:#0b0b0e;padding:4px;border-radius:24px;border:1px solid #2a2a31}
.gl-reiter button,.ib-reiter button{font:600 15px var(--sans);min-height:40px;padding:0 15px;background:transparent;border:0;border-radius:20px;color:#d8d6cf;cursor:pointer;transition:background .25s,color .25s}
.gl-reiter button:hover,.ib-reiter button:hover{color:#fff;background:rgba(255,255,255,.06)}
.gl-reiter button[aria-selected=true],.ib-reiter button[aria-selected=true]{background:var(--gelb);color:#111}
@media (max-width:700px){.gl-reiter:not([hidden]){display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;max-width:100%}.gl-reiter button{flex:0 0 auto}}

.qs-bund{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 14px;padding:10px 16px;background:linear-gradient(90deg,rgba(255,200,90,.14),transparent);border:1px solid #3a3122;border-left:4px solid var(--licht);color:#f3f1ec;text-align:left;cursor:pointer;min-height:56px}
.qs-bund svg{width:28px;height:46px;flex:0 0 auto;transform:rotate(-10deg)}
.qs-bund b{display:block;font:400 24px/1 var(--anton);text-transform:uppercase}
.qs-bund small{display:block;font:400 14px var(--mono);color:var(--licht);margin-top:4px;letter-spacing:.06em}
@media (max-width:700px){.bund-knopf{display:none!important}}
.ib-test-vorschau{display:flex;justify-content:center;gap:12px;margin:6px auto 22px;max-width:620px}
.ib-test-vorschau span{flex:1;border-radius:6px;overflow:hidden;box-shadow:0 18px 34px rgba(0,0,0,.5);transform:rotate(calc((var(--i) - 1) * 3deg));animation:anh-ein .6s calc(var(--i) * 120ms) cubic-bezier(.3,1.4,.4,1) both}
.ib-test-vorschau img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:700px){.vf-raum-kopf{padding-right:64px;position:relative}.vf-zu{position:absolute;top:8px;right:8px}.vf-raum-titel{width:100%}.vf-raum-buehne{--vf-h:max(240px,calc(100vh - 400px))}.gl-licht.vorf .gl-licht-bild{--vf-h:max(230px,calc(100vh - 480px))}}
@media (max-width:420px){html:not([lang=de]) .raeume-knopf{font-size:14px;padding:0 8px;gap:6px}html:not([lang=de]) .raeume-knopf svg{width:20px}}
@media (max-width:700px){.bund-neu{left:auto;right:10px;bottom:auto;top:72px;padding:8px 14px 8px 26px;transform-origin:100% 0;transform:translateY(-12px) rotate(-4deg)}.bund-neu::before{left:9px;width:8px;height:8px;margin-top:-4px}.bund-neu span{font-size:19px}.bund-neu b{font-size:14px;letter-spacing:.08em}}
.qs-bund{justify-content:flex-start}.qs-bund span{flex:1;text-align:left}.qs-bund .bund-svg{width:30px;height:48px;filter:drop-shadow(0 0 10px rgba(255,200,90,.45))}
.sk-vorn,.sk-hinten{transition:transform .8s cubic-bezier(.3,1.25,.4,1),visibility 0s .35s}
.sk-hinten{visibility:hidden}.karte.sk.gedreht .sk-hinten{visibility:visible}.karte.sk.gedreht .sk-vorn{visibility:hidden}
/* === Schritt 1 Ende === */
/* Webdesign: zwei Kurzfilme */
.wd-filme{padding:clamp(56px,7vw,110px) 0;background:radial-gradient(70% 60% at 50% 0,#14204a 0%,#0b0c12 70%)}
.wd-filme .abschnitt-kopf{max-width:760px}
.wd-filme-reihe{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,3vw,48px);align-items:start;margin-top:clamp(26px,3.4vw,48px)}
.wd-film{margin:0}
.wd-film:nth-child(2){margin-top:clamp(40px,7vw,120px)}
.wd-film .leinwand video{aspect-ratio:16/9;object-fit:cover}
.wd-film-schild{display:inline-flex;flex-direction:column;gap:4px;margin:18px 0 0 clamp(0px,2vw,26px);padding:12px 18px 13px;background:linear-gradient(135deg,#d9b56a,#a8823d 55%,#e6c983);color:#1d160a;border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.45);max-width:min(100%,460px);position:relative}
.wd-film-schild::before,.wd-film-schild::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c8,#7a5a22 70%)}
.wd-film-schild::before{left:7px}.wd-film-schild::after{right:7px}
.wd-film-schild b{font:400 clamp(20px,1.7vw,26px)/1.1 var(--anton);text-transform:uppercase;letter-spacing:.06em;padding:0 8px}
.wd-film-schild span{font:500 15px/1.35 var(--sans);padding:0 8px;color:#2a1f0c}
@media (max-width:760px){.wd-filme-reihe{grid-template-columns:1fr}.wd-film:nth-child(2){margin-top:8px}.wd-film-schild{margin-left:0}}
/* Webdesign: lauter Einstieg */
.wd-herz{background:#000;padding:clamp(18px,3vw,44px) var(--rand)}
.wd-herz-leinwand{max-width:1320px;margin:0 auto;border-color:#000;box-shadow:0 0 0 1px #1a1a1d,0 40px 90px rgba(0,0,0,.8),0 0 120px rgba(233,245,2,.07)}
.wd-herz-leinwand video{aspect-ratio:16/9;object-fit:cover}
.wd-herz-leinwand:not(.laeuft) .abspielen{left:auto;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);top:auto;transform:none}
/* Offene Fenster (dialog) liegen über allem, auch über dem Lichtzeiger: dort den echten Mauszeiger zeigen */
html.mit-lichtzeiger dialog[open],html.mit-lichtzeiger dialog[open] *{cursor:auto!important}
html.mit-lichtzeiger dialog[open] :is(a,button,summary,label,select,[role=button],[role=tab]){cursor:pointer!important}
html:has(dialog[open]) .lichtzeiger,html:has(:fullscreen) .lichtzeiger{opacity:0!important}
html.mit-lichtzeiger :fullscreen,html.mit-lichtzeiger :fullscreen *{cursor:auto!important}
/* Betreuung: keine sechs Kästen, sondern eine ruhige Liste mit gelben Haken */
.wd-bet-raster{gap:0 clamp(24px,3vw,48px)!important}
.wd-bet{background:none!important;border:0!important;border-top:1px solid rgba(255,255,255,.28)!important;border-radius:0!important;box-shadow:none!important;padding:18px 0 22px 40px!important;position:relative}
.wd-bet::before{content:"";position:absolute;left:2px;top:22px;width:20px;height:11px;border-left:3px solid var(--gelb);border-bottom:3px solid var(--gelb);transform:rotate(-45deg);border-radius:1px}
@media (max-width:600px){.wd-bet{padding:16px 0 18px 36px!important}.wd-bet::before{top:20px}}
/* Scheinwerfer: in dunklen Räumen folgt ein Lichtkreis der Maus */
.scheinwerfer{display:none}
html.sw-an .scheinwerfer{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .9s ease;--sx:50%;--sy:45%}
html.sw-an .scheinwerfer.an{opacity:1}
html.sw-an .wd-riss .scheinwerfer{z-index:1;background:radial-gradient(circle 560px at var(--sx) var(--sy),rgba(255,222,160,.12) 0,rgba(255,222,160,.04) 120px,rgba(8,8,10,0) 190px,rgba(8,8,10,.5) 380px,rgba(8,8,10,.8) 620px)}
html.sw-an .wd-galerie{isolation:isolate}
html.sw-an .wd-galerie .scheinwerfer{z-index:-1;background:radial-gradient(circle 680px at var(--sx) var(--sy),rgba(255,206,120,.28) 0,rgba(255,196,100,.11) 280px,transparent 680px);mix-blend-mode:screen}
html.sw-im .lichtkegel{opacity:0!important}
/* Social Ads: hochkant im Handy */
.hochkino{background:#08080a;border-top:1px solid #1b1b20;color:var(--text)}
.hk-reihe{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,21vw,270px);gap:clamp(18px,2.2vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(30px,4vw,50px);padding:6px 4px 22px;scrollbar-width:thin;scrollbar-color:#3a3a44 transparent}
.hk-reihe:focus-visible{outline:2px solid var(--gelb);outline-offset:4px}
.hk-karte{margin:0;scroll-snap-align:start}
.hk-handy{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;border:6px solid #1d1d24;background:#000;box-shadow:0 24px 50px rgba(0,0,0,.55),0 0 0 1px #2b2b33}
.hk-handy video{display:block;width:100%;height:100%;object-fit:cover}
.hk-start{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));cursor:pointer}
.hk-start::before{content:"";position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:var(--gelb);box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s ease,opacity .25s ease}
.hk-start .dreieck{position:absolute;left:50%;top:50%;width:0;height:0;margin:-11px 0 0 -6px;border-left:19px solid #111;border-top:11px solid transparent;border-bottom:11px solid transparent;transition:opacity .25s}
.hk-start:hover::before,.hk-start:focus-visible::before{transform:scale(1.08)}
.hk-start:focus-visible{outline:3px solid var(--gelb);outline-offset:-6px;border-radius:20px}
.hk-karte.laeuft .hk-start{background:none}
.hk-karte.laeuft .hk-start::before,.hk-karte.laeuft .hk-start .dreieck{opacity:0}
.hk-karte figcaption{display:flex;flex-direction:column;gap:4px;padding:14px 4px 0}
.hk-karte figcaption b{font-size:18px;line-height:1.25;font-weight:600;color:#f3f1ec}
.hk-karte figcaption .pw-art{font:400 14px/1.35 var(--mono);color:#bdbdc6;letter-spacing:.02em}
.hk-karte .hk-dauer{font:400 14px var(--mono);color:var(--licht)}
@media (max-width:640px){.hk-reihe{grid-auto-columns:64vw;margin-right:-16px;padding-right:16px}}
/* Vorher, nachher */
.vn-block{margin-top:clamp(36px,5vw,64px)}
.vn-vergleich{position:relative;aspect-ratio:16/9;max-width:1120px;overflow:hidden;border-radius:6px;box-shadow:0 22px 44px rgba(40,30,10,.18);background:#d9d1c0;touch-action:pan-y}
.vn-vergleich img{display:block;width:100%;height:100%;object-fit:cover}
.vn-vorher{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vn-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.vn-griff::after{content:"‹ ›";position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:#111;font:600 20px/52px var(--mono);text-align:center;letter-spacing:.1em;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.vn-vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.vn-vergleich input:focus-visible~.vn-griff::after,.vn-vergleich:has(input:focus-visible) .vn-griff::after{outline:3px solid var(--gelb)}
.vn-marke{position:absolute;top:14px;padding:7px 12px;background:rgba(10,10,12,.62);color:#fff;font:400 14px var(--mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.vn-l{left:14px}.vn-r{right:14px}
.vn-satz{max-width:40em;margin:20px 0 0;font-size:18px;line-height:1.5}
.vn-auto{display:grid;grid-template-columns:minmax(0,1.7fr) auto minmax(190px,260px);align-items:center;gap:clamp(18px,3vw,40px)}
.vn-auto .vn-satz{grid-column:1/-1}
.vn-foto{margin:0}.vn-foto img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 22px 44px rgba(40,30,10,.18)}
.vn-foto figcaption{margin-top:12px;font:400 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4a463e}
.vn-pfeil{font-size:52px;line-height:1;color:var(--kobalt)}
.vorher-nachher .hk-karte figcaption b{color:#141414;font-size:16px}
.vorher-nachher .hk-karte figcaption .pw-art{color:#4a463e}
.vorher-nachher .hk-karte .hk-dauer{color:#6b5a1e}
@media (max-width:760px){.vn-auto{grid-template-columns:1fr}.vn-pfeil{transform:rotate(90deg);justify-self:center}.vn-film{width:min(260px,72vw);justify-self:center}.vn-satz{font-size:17px}}
.hk-reihe{margin-right:calc((100% - 100vw)/2);padding-right:max(16px,calc((100vw - 100%)/2))}
.hk-steuer{display:flex;gap:14px;margin-top:8px}
.hk-steuer .gl-pfeil{width:52px;height:52px}
@media (hover:none){.hk-steuer{display:none}}
.vn-auto{max-width:1120px;grid-template-columns:minmax(0,1.25fr) auto minmax(220px,280px)}
/* Willkommens-Anhänger hängt am Schlüsselbund oben rechts, nie mehr über den Knöpfen im Bild */
@media (min-width:701px){.bund-neu{left:auto;right:clamp(14px,3vw,46px);bottom:auto;top:118px;transform-origin:100% 0;transform:translateY(-14px) rotate(-4deg)}}
@media (max-width:560px){.wd-satz{font-size:clamp(28px,8.4vw,38px);line-height:1.02;text-wrap:balance}}
/* Atelierwand auf dem Handy: Überschrift bekommt die volle Breite, der Zeiger sitzt neben dem Satz */
@media (max-width:560px){.wd-wand-kopf{position:relative;display:block}.wd-wand-kopf>div>p:last-child{padding-right:76px}.wd-wand-kopf .wd-zeiger{position:absolute;right:2px;bottom:-4px;width:64px}}
/* Klar: klare Ansicht ohne 3D und Bewegung, an der Stelle des alten Ton-Schalters */
.klar-schalter{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 10px;background:#141418;border:1px solid #2a2a31;color:#f3f1ec;font:600 16px var(--sans);cursor:pointer;margin-right:10px;transition:background .3s,border-color .3s}
.klar-schalter:hover{border-color:#4a4a55}
.klar-schalter:focus-visible{outline:2px solid var(--gelb);outline-offset:2px}
.klar-schalter .kipp{position:relative;width:20px;height:28px;border-radius:4px;background:#e9e4d8;box-shadow:inset 0 0 0 2px #c9c2b2;display:block}
.klar-schalter .kipp i{position:absolute;left:5px;right:5px;top:4px;height:10px;border-radius:2px;background:#fff;box-shadow:0 2px 0 #a49c8a;transition:top .18s,box-shadow .18s}
.klar-schalter[aria-pressed=true] .kipp i{top:14px;box-shadow:0 -2px 0 #a49c8a}
.klar-schalter[aria-pressed=true]{border-color:var(--licht);box-shadow:0 0 22px rgba(255,200,90,.25)}
@media (max-width:700px){.klar-schalter{display:none}}
/* Startseite: Fenster bleiben an, das Haus füllt sich beim Scrollen mit Licht */
.fassade li.vorbei i{background:#e9b552;box-shadow:0 0 12px rgba(255,200,90,.45)}
html:not(.ruhig) .fassade li.an i,html:not(.ruhig) .fassade li.vorbei i{animation:anknipsen .7s steps(1,end) 1}
@keyframes anknipsen{0%{background:#15151b;box-shadow:none}18%{background:#e9b552}30%{background:#15151b;box-shadow:none}46%{background:var(--licht)}100%{}}
/* Kino: läuft ein Film mit Ton, geht im Rest des Hauses das Licht aus */
.kino-saal{position:relative;z-index:50}
.kino-licht{z-index:5}
.kino-licht::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;box-shadow:0 0 0 220vmax rgba(3,3,5,.84);opacity:0;transition:opacity .9s ease}
.kino-licht.dunkel::after{opacity:1}
html.ruhig .kino-licht::after{transition:none}
/* Maschinenraum: die Bauteile zeichnen sich selbst wie auf dem Reissbrett */
.bp-zeichnen .bauteil svg *{transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1)}
/* Büro: der Stempel knallt aufs Blatt, das Blatt zuckt mit */
html:not(.ruhig) .stunde.fertig .blatt{animation:stempelruck .32s ease-out .66s 1 both}
@keyframes stempelruck{0%{translate:0 0}30%{translate:0 4px}60%{translate:0 -1px}100%{translate:0 0}}
/* Dachterrasse: die Rückseite ist eine Urlaubspostkarte mit Poststempel */
.sk-hinten{background-image:linear-gradient(90deg,transparent calc(100% - 1px),rgba(20,20,24,.08) 0);background-size:100% 100%}
.sk-hinten::before{content:"";position:absolute;right:16px;top:14px;width:64px;height:64px;border-radius:50%;border:2.5px solid rgba(21,70,224,.75);box-shadow:inset 0 0 0 5px #fdfbf3,inset 0 0 0 7px rgba(21,70,224,.55);transform:rotate(-14deg) scale(1.9);opacity:0;transition:transform .4s cubic-bezier(.3,1.6,.5,1) .55s,opacity .2s .55s}
.sk-hinten::after{content:"";position:absolute;right:-6px;top:26px;width:110px;height:38px;opacity:0;transition:opacity .3s .7s;background:repeating-linear-gradient(180deg,transparent 0 6px,rgba(21,70,224,.55) 6px 8px);-webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.karte.sk.gedreht .sk-hinten::before{opacity:1;transform:rotate(-14deg) scale(1)}
.karte.sk.gedreht .sk-hinten::after{opacity:1}
.sk-hinten p{padding-right:58px}
@media (max-width:560px){.sk-hinten::before{width:52px;height:52px;right:12px;top:12px}.sk-hinten::after{width:84px;top:20px}.sk-hinten p{padding-right:40px}}
/* Ideenbuch-Galerie: die Karten biegen sich wie eine Welle, wenn man blättert */
.gl-welle{display:none}
.mit-welle .gl-auf{position:relative;transform-style:preserve-3d}
.mit-welle .gl-welle{display:block;position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;transform-style:preserve-3d;pointer-events:none}
.mit-welle .gl-welle i{position:absolute;top:0;height:100%;width:calc(100% / var(--n) + 2px);left:calc(var(--i) * 100% / var(--n) - 1px);background-repeat:no-repeat;background-size:calc(var(--hw) * 2px) 100%;background-position:calc(1px - var(--i) * var(--hw) * 2px / var(--n)) 0;backface-visibility:hidden;
  --z:calc(var(--k) * 1px * var(--x) * var(--x) + var(--amp) * 1px * sin((var(--x) * 2.2 + var(--ph)) * 1rad));
  --dz:calc((2 * var(--k) * var(--x) + 2.2 * var(--amp) * cos((var(--x) * 2.2 + var(--ph)) * 1rad)) / var(--hw));
  transform:translateZ(var(--z)) rotateY(calc(var(--dz) * -1rad));filter:brightness(calc(1 - var(--dunkel, 0) - var(--x) * var(--x) * .06))}
.mit-welle .gl-welle i:first-child{border-radius:6px 0 0 6px}
.mit-welle .gl-welle i:last-child{border-radius:0 6px 6px 0}
.mit-welle .gl-bild{background:transparent;box-shadow:none!important;transform:translateZ(130px) scale(.85556)}
.mit-welle .gl-bild img{opacity:0}
.mit-welle .gl-bild::after{opacity:0!important}
/* Webdesign: Webseiten in Bewegung, am Computer füllen drei Handys die Breite */
@media (min-width:900px){.wd-hl .hk-reihe{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:1060px;margin-right:0;padding-right:4px;overflow:visible}}
/* Vorher/nachher am Handy: Foto oben in voller Breite, Pfeil, dann der Film */
@media (max-width:760px){.vn-auto{grid-template-columns:1fr;max-width:none}.vn-foto{width:100%}}
/* Handy: grosse Überschriften etwas mehr Zeilenluft, damit Umlaute und Kommas nicht in die nächste Zeile stossen */
@media (max-width:700px){h1.laut,h2.laut{line-height:1.08}.wort .w{padding-bottom:.18em;margin-bottom:-.18em}}
/* Handy: Kerbe der Filmkarte nicht über dem Titel, Print-Filter als ruhige Leiste zum Wischen */
@media (max-width:700px){.kinokarte::after{display:none}
 .pw-chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding:2px 16px 8px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .pw-chips::-webkit-scrollbar{display:none}.pw-chip{flex:0 0 auto;white-space:nowrap}}
/* Etikett steht jetzt über dem Tageslauf */
.tageslinie ~ .jetzt-etikett,.jetzt-etikett{margin-bottom:34px}
/* Datenschutz: eigene Seite mit Tresor, Weg der Daten und sechs Antworten */
.ds-kopf-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:clamp(30px,5vw,80px);align-items:center}
.ds-stempel{display:inline-flex;flex-wrap:wrap;gap:6px 14px;margin-top:26px;font:400 15px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#d8dbe6;border:2px solid #e9f502;padding:12px 18px;transform:rotate(-1.5deg)}
.ds-stempel span{font:400 26px var(--anton);color:#e9f502;letter-spacing:0;margin-right:-6px;vertical-align:-3px}
.ds-tresor{justify-self:center;text-align:center}
.ds-tuer{position:relative;width:clamp(230px,24vw,330px);aspect-ratio:1;border-radius:22px;background:linear-gradient(145deg,#3a3e48,#16181d 60%,#23262e);box-shadow:inset 0 0 0 8px #2b2e36,inset 0 0 0 10px #4a4e58,0 30px 60px rgba(0,0,0,.6),0 0 80px rgba(255,200,110,.08)}
.ds-rad{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(from 0deg,#c9ccd4 0 1.2deg,transparent 1.2deg 9deg),radial-gradient(circle,#5a5f6b 0 46%,#2a2d34 47% 60%,#8d919b 61% 63%,#1d1f25 64%);box-shadow:0 8px 20px rgba(0,0,0,.5);transition:transform 2.4s cubic-bezier(.3,.7,.2,1)}
.ds-rad i{position:absolute;left:50%;top:6%;width:4px;height:16%;margin-left:-2px;background:#e9f502;border-radius:2px;box-shadow:0 0 10px rgba(233,245,2,.6)}
.ds-tresor.in .ds-rad{transform:translate(-50%,-50%) rotate(270deg)}
html.ruhig .ds-rad{transition:none}
.ds-griff{position:absolute;right:9%;top:50%;width:12px;height:30%;margin-top:-15%;border-radius:6px;background:linear-gradient(90deg,#9aa0ab,#e2e5ea,#7d828c)}
.ds-bolzen{position:absolute;left:-9px;width:18px;height:9%;border-radius:4px;background:linear-gradient(180deg,#d9b25a,#8a6418)}
.ds-bolzen.b1{top:18%}.ds-bolzen.b2{top:45.5%}.ds-bolzen.b3{top:73%}
.ds-tresor-satz{margin-top:18px;font:400 22px var(--hand,cursive);color:#e9b552}
.ds-weg{background:#ede6d8;color:#141416}
.ds-schritte{list-style:none;margin:clamp(30px,4vw,50px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);counter-reset:s}
.ds-schritte li{position:relative;background:#fffdf7;border:2px solid #141416;padding:24px 22px 26px;box-shadow:6px 6px 0 #141416}
.ds-schritte li:not(:last-child)::after{content:"→";position:absolute;right:-22px;top:50%;transform:translateY(-50%);font:400 28px var(--anton);color:#1546e0;z-index:2}
.ds-nr{display:block;font:400 15px var(--mono);letter-spacing:.14em;color:#1546e0;margin-bottom:12px}
.ds-schritte b{display:block;font:400 26px/1.05 var(--anton);text-transform:uppercase;margin-bottom:10px}
.ds-schritte li>span:last-child{font-size:17px;line-height:1.5;color:#3b3a36}
.ds-fragen-sek{background:#0d0e12;color:#f2efe8}
.ds-fragen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(24px,3vw,40px)}
.ds-frage{border-top:3px solid #e9f502;padding:20px 4px 6px}
.ds-frage h3{font:400 24px/1.1 var(--anton);text-transform:uppercase;margin:0 0 10px}
.ds-frage p{margin:0;font-size:18px;line-height:1.55;color:#cfd0d6}
.ds-kontakt{margin-top:34px;font:400 16px var(--mono);letter-spacing:.06em;color:#bfc1c9}
.ds-kontakt a{color:#e9f502}
.ds-weitere{margin-top:44px}
@media (max-width:900px){.ds-kopf-raster{grid-template-columns:1fr}.ds-tresor{order:-1}.ds-schritte{grid-template-columns:1fr 1fr}.ds-schritte li:not(:last-child)::after{display:none}.ds-fragen{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ds-tuer{width:200px}.ds-schritte,.ds-fragen{grid-template-columns:1fr}.ds-schritte b{font-size:24px}.ds-frage h3{font-size:22px}.ds-stempel{font-size:14px}}
.ds-kopf h1.laut{font-size:clamp(46px,6.2vw,104px);line-height:1}
.ds-stempel{align-items:baseline}.ds-stempel span{vertical-align:baseline}
.ds-schritte li:not(:last-child)::after{font-size:34px;right:-24px}
/* Maskottchen im Logo: kleine 3D-Figur aus Bausteinen, lebt leise */
.marke{position:relative}
.maskott{position:absolute;left:calc(100% + 22px);top:52px;--mk-s:1.36;width:0;height:0;pointer-events:none;perspective:340px;perspective-origin:50% -40px;z-index:2}
.mk-skala{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:scale(var(--mk-s,1));transform-origin:0 0}
.mk-schatten{position:absolute;left:-12px;top:-3px;width:24px;height:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));transform:scaleX(var(--mk-sx,1));opacity:var(--mk-so,.8)}
.mk-fig{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:0 0;will-change:transform}
.mk-fig *{transform-style:preserve-3d}
.mk-teil{position:absolute;transform-style:preserve-3d}
.cb{position:absolute;transform-style:preserve-3d}
.cb>i{position:absolute;left:0;top:0;display:block;backface-visibility:hidden;border-radius:1.6px;box-shadow:inset 0 0 0 .35px rgba(255,255,255,.16),inset 0 -1.2px 1.6px rgba(0,0,40,.32)}
.cb>.fr{width:var(--w);height:var(--h);transform:translateZ(calc(var(--d) / 2))}
.cb>.tp{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d)) / 2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}
.cb>.lf{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.cb>.rt{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.cb>.bk{width:var(--w);height:var(--h);transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.cb.bl>.fr{background:linear-gradient(160deg,#5576ff 0%,#3d5bd9 48%,#3150c4 100%)}
.cb.bl>.tp{background:linear-gradient(180deg,#7d97ff,#5b78f2)}
.cb.bl>.lf{background:linear-gradient(180deg,#3352cf,#2944b0)}
.cb.bl>.rt{background:linear-gradient(180deg,#2b47b8,#203a99)}
.cb.bl>.bk{background:#26409f}
.cb>.bt{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}
.cb.bl>.bt{background:#22389a}.cb.gr>.bt{background:#a3ad00}
.cb.gr>.fr{background:linear-gradient(160deg,#f6ff4d,#e4f000 60%,#cbd600)}
.cb.gr>.tp{background:#fbff8a}
.cb.gr>.lf{background:#cdd800}
.cb.gr>.rt{background:#b4be00}
.cb.gr>.bk{background:#aeb800}
.mk-kopf>.cb>.fr{background:
  linear-gradient(rgba(10,20,80,.22),rgba(10,20,80,.22)) 0 47%/100% 1px no-repeat,
  linear-gradient(rgba(10,20,80,.22),rgba(10,20,80,.22)) 52% 0/1px 47% no-repeat,
  linear-gradient(rgba(10,20,80,.18),rgba(10,20,80,.18)) 30% 100%/1px 53% no-repeat,
  linear-gradient(160deg,#5a7bff 0%,#3d5bd9 50%,#3150c4 100%)}
.mk-rumpf>.cb>.fr{background:
  linear-gradient(rgba(10,20,80,.2),rgba(10,20,80,.2)) 0 55%/100% 1px no-repeat,
  linear-gradient(160deg,#5576ff,#3d5bd9 55%,#3150c4)}
.mk-aug{position:absolute;width:3.4px;height:3.8px;top:7.4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#1a1a22 24%,#050508 70%);transform:translateZ(8.2px) scaleY(var(--mk-blink,1));box-shadow:0 .4px .6px rgba(0,0,20,.4)}
.mk-aug.l{left:4.6px}.mk-aug.r{right:4.6px}
.mk-herz{position:absolute;left:50%;top:3.1px;width:5.2px;height:4.6px;margin-left:-2.6px;transform:translateZ(5.15px);filter:drop-shadow(0 0 var(--mk-glow,0px) rgba(255,246,214,.95))}
.mk-herz svg{display:block;width:100%;height:100%}
.maskott.still .mk-fig{transform:rotateX(-12deg) rotateY(-18deg)}
@media (max-width:700px){.maskott{top:36px;left:calc(100% + 16px);--mk-s:.93}}
@media (max-width:374px){.maskott{top:29px;left:calc(100% + 13px);--mk-s:.75}}
@media print{.maskott{display:none}}
/* Figur in der Ideenbuch-Galerie: sitzt auf der Karte in der Mitte, im Lichtkasten neben dem Titel */
.gl-figur{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;perspective:560px;perspective-origin:-30px -60px;z-index:5;opacity:0;transition:opacity .25s}
.gl-figur.da{opacity:1}
.gl-figur .mk-skala{--mk-s:2}
@media (max-width:700px){.gl-figur .mk-skala{--mk-s:1.5}}
@media (max-width:374px){.gl-figur .mk-skala{--mk-s:1.3}}
.gl-licht-innen{position:relative}
.gl-figur-licht{perspective:420px;transition:opacity .15s}
.gl-figur-licht .mk-skala{--mk-s:1.1}
@media (max-width:700px){.gl-figur-licht .mk-skala{--mk-s:.92}}
@media print{.gl-figur{display:none}}
/* Unschärfe im Kopf würde mit den 3D-Streifen der Welle Löcher reissen */
html:has([data-galerie].mit-welle) .kopf.dunkel{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(rgba(7,7,8,.96),rgba(7,7,8,.84))}
/* Klingelbrett: kompakter, Schweiz in einer Zeile, Figur auf der Lampe */
.tableau-wand{flex-basis:400px}
.haustuer .tableau{padding:48px 22px 28px}
.knopfzeile{gap:14px;padding:9px 0}
.knopfzeile i{flex:0 0 32px;height:32px}
.knopfzeile .namensschild{padding:7px 28px 7px 12px}
.knopfzeile b{font-size:16px}
.knopfzeile span{font-size:14px}
.knopf-doppel{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(90,64,20,.35);box-shadow:0 1px 0 rgba(255,236,190,.35)}
.knopf-doppel .knopfzeile{flex:1;border-bottom:0;box-shadow:none;min-width:0}
.kz-anruf{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:20px;background:linear-gradient(180deg,#2a3a63,#13203f);color:#f6e7bf;font:600 14px var(--sans);text-decoration:none;box-shadow:0 0 0 2px #7a5a22,0 3px 6px rgba(40,25,5,.35);transition:transform .12s,box-shadow .2s}
.kz-anruf:hover,.kz-anruf:focus-visible{box-shadow:0 0 0 2px #e4c27a,0 0 16px rgba(255,205,110,.8)}
.kz-anruf:active{transform:translateY(1px)}
@media (max-width:900px){.tableau-wand{max-width:380px}}
@media (max-width:420px){.knopfzeile{gap:11px}}
/* Figur am Klingelbrett */
.kl-figur{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;perspective:420px;perspective-origin:20px -40px;z-index:6}
.kl-figur .mk-skala{--mk-s:1.35}
@media (max-width:520px){.kl-figur .mk-skala{--mk-s:1.15}}
@media print{.kl-figur{display:none}}
.knopf-doppel .knopfzeile span{white-space:nowrap}
.kz-anruf{min-height:36px;padding:0 11px;font-size:14px}
.knopf-doppel .knopfzeile .namensschild{min-width:0}
.knopf-doppel .namensschild{padding-right:12px}
.knopf-doppel .namensschild::after{display:none}
@media (max-width:420px){.knopf-doppel .knopfzeile b{font-size:15px}}
.kz-anruf{gap:6px}
.kz-anruf svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:520px){.kz-anruf{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;border-radius:50%}.kz-anruf .kz-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.kz-anruf svg{width:18px;height:18px}}
/* Klingelknöpfe ruhiger: oben im Kopf und die grossen Klingeln */
.klingel-klein{height:40px;padding:0 12px 0 7px;gap:8px;font-size:14px}
.klingel-klein i{width:19px;height:19px}
@media (max-width:700px){.klingel-klein{padding:0 9px}}
.klingel-gross{padding:9px 16px 9px 9px;gap:11px;font-size:15.5px}
.klingel-gross i{width:27px;height:27px}
.klingel-gross small{font-size:17px}
.knopfzeile span{overflow-wrap:anywhere}
/* Filmeingang im Dachgeschoss: zweiter Weg neben dem Rundgang, Figur zeigt darauf */
.film-eingang{position:relative;display:inline-flex;align-items:center;gap:11px;padding:6px 16px 6px 6px;background:rgba(11,11,12,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fff;font:700 16px/1.1 var(--sans);text-align:left;cursor:pointer;transition:border-color .25s,transform .25s,background .25s}
.film-eingang:hover{border-color:var(--gelb);background:rgba(11,11,12,.8);transform:translateY(-1px)}
.film-eingang:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.fe-bild{position:relative;display:block;width:78px;height:44px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.fe-bild img{width:100%;height:100%;object-fit:cover;display:block}
.fe-bild i{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--gelb);animation:fe-puls 2.8s ease-out infinite}
.fe-bild i::after{content:"";position:absolute;left:9px;top:6.5px;border-left:9px solid #0b0b0c;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
@keyframes fe-puls{0%{box-shadow:0 0 0 0 rgba(233,245,2,.6)}70%,100%{box-shadow:0 0 0 11px rgba(233,245,2,0)}}
.fe-text{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.fe-text small{font:600 19px/1 var(--hand);color:var(--licht);opacity:.95}
.film-eingang .fe-figur{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;perspective:420px;perspective-origin:-20px -40px;z-index:3}
.fe-figur .mk-skala{--mk-s:1.25}
@media (max-width:700px){.film-eingang{padding:5px 12px 5px 5px;gap:9px;font-size:15px}.fe-bild{width:60px;height:34px}.fe-bild i{width:20px;height:20px;margin:-10px 0 0 -10px}.fe-bild i::after{left:7.5px;top:5.5px;border-left-width:7.5px;border-top-width:4.5px;border-bottom-width:4.5px}.fe-text small{font-size:17px}.fe-figur .mk-skala{--mk-s:1.05}}
html.ruhig .fe-bild i,.film-eingang.gesehen .fe-bild i{animation:none}
@media (prefers-reduced-motion:reduce){.fe-bild i{animation:none}}
@media print{.film-eingang{display:none}}
/* Kinosaal für den Film */
.hf-saal{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0;inset:0;overflow:hidden}
.hf-saal::backdrop{background:rgba(5,5,6,.94)}
.hf-saal-innen{position:relative;width:100%;height:100%;display:grid;place-items:center;padding:56px 16px 16px}
.hf-saal video{display:block;width:min(100%,calc((100dvh - 80px) * 16 / 9));max-height:calc(100dvh - 80px);aspect-ratio:16/9;background:#000;border-radius:6px}
.hf-zu{position:absolute;top:10px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(20,20,22,.8);color:#fff;font:400 30px/1 var(--sans);cursor:pointer;display:grid;place-items:center}
.hf-zu:hover,.hf-zu:focus-visible{border-color:var(--gelb);color:var(--gelb);outline:none}
html.saal-offen{overflow:hidden}
/* Dachgeschoss am Handy: alle drei Wege in der ersten Bildschirmhöhe */
@media (max-width:700px) and (max-height:820px){
 .eingang{padding-top:82px}
 .eingang .spaet{font-size:20px;margin-bottom:10px;padding:6px 12px 8px}
 .eingang .kicker{margin-bottom:12px}
 .eingang .hand{font-size:24px;margin:10px 0 6px}
 .eingang .lead{font-size:16.5px;line-height:1.45}
 .buehne .zeile-knoepfe{margin-top:16px;gap:10px}}
@media (max-width:700px) and (max-height:700px){
 .eingang h1.laut{font-size:clamp(40px,12.4vw,58px)}
 .eingang .lead{font-size:16px;line-height:1.4}}
@media (max-width:380px){.buehne .zeile-knoepfe{gap:10px}.buehne .klingel-gross{padding-right:12px;gap:9px}.film-eingang{padding-right:10px;gap:8px}.fe-bild{width:54px;height:31px}}
@media (min-width:701px){.eingang .zeile-knoepfe{width:max-content;max-width:calc(100vw - 2 * var(--rand))}}
@media (max-width:700px) and (max-height:600px){.eingang .kicker{display:none}.eingang{padding-top:76px}}
.knopf-doppel .knopfzeile .namensschild{white-space:normal}.knopf-doppel .namensschild>span{white-space:nowrap}
@media (max-width:980px){.klingel-raster{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.knopf-doppel{gap:7px}.kz-anruf{width:36px;height:36px;min-height:36px}.knopf-doppel .namensschild{padding-right:7px}}