/* ---------- Banner ---------- */
.band{overflow:hidden;margin-inline:calc(var(--rand) * -1);padding-block:clamp(1.4rem,3.4vw,3rem);border-block:1px solid var(--linie)}
.band-zug{width:max-content;will-change:transform}
.band-in{display:flex;width:max-content;animation:laufen 70s linear infinite;font:800 clamp(3rem,2rem + 7vw,9.5rem)/1.05 var(--titel);white-space:nowrap;color:var(--navy);-webkit-text-stroke:2px var(--gold);paint-order:stroke fill;-webkit-text-fill-color:var(--navy)}
.band-in span{padding-inline:.45em;position:relative}
.band-in span::after{content:"";position:absolute;right:-.1em;top:50%;width:.2em;height:.2em;margin-top:-.1em;border-radius:50%;background:var(--gold)}
.stiller-link{text-decoration:none;display:inline-block;padding-block:.2rem}
.stiller-link span{display:inline-block;color:var(--gold);transition:transform .5s var(--sanft)}
.stiller-link:hover span{transform:translateX(.35em)}
.textlink{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--gold);display:inline-block;padding-block:.5rem}
.textlink:hover{text-decoration-thickness:2px}
.nav a[aria-current=page]{color:var(--gold-hell)}
.nav a[aria-current=page]::after{transform:scaleX(1)}

/* ---------- Klick ---------- */
.schwebend{gap:.55rem}
.klick{position:relative;width:88px;height:88px;border-radius:50%;padding:7px 5px 3px 9px;background:var(--navy-tief);border:2px solid var(--gold);cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.42);transition:transform .5s var(--sanft);order:2;overflow:visible}
.klick:hover{transform:scale(1.07)}
.robo{width:100%;height:100%;overflow:visible}
.robo-ganz{animation:schweben 3.4s ease-in-out infinite}
.robo-antenne{transform-origin:50px 20px;animation:antenne 4.4s ease-in-out infinite}
.robo-augen{transform-origin:50px 40px;animation:blinzeln 5.2s infinite}
.robo-arm{transform-origin:34px 73px}
.robo-kamera{transform-origin:70px 76px;transition:transform .5s var(--sanft)}
.klick.winkt .robo-arm{animation:armwinken 1.7s var(--sanft) 2}
.klick.blitzt .robo-kamera{transform:translate(-6px,-20px) rotate(-5deg)}
.klick.blitzt .robo-augen{animation:none;transform:scaleY(.25)}
@keyframes schweben{50%{transform:translateY(-3px)}}
@keyframes antenne{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
@keyframes blinzeln{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes armwinken{0%,100%{transform:none}25%{transform:rotate(26deg)}55%{transform:rotate(-14deg)}80%{transform:rotate(18deg)}}
.klick-blitz{position:absolute;right:-70px;top:-92px;width:260px;height:260px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0,rgba(255,244,214,.92) 12%,rgba(240,215,168,.34) 36%,rgba(240,215,168,0) 68%)}
.blitz-raum{position:fixed;inset:0;z-index:69;background:#FFF8E7;opacity:0;pointer-events:none}
.blitz-raum.an{animation:raumblitz .55s ease-out}
.blitz-raum.an~.schwebend .klick-blitz{animation:punktblitz .55s ease-out}
@keyframes raumblitz{0%{opacity:.2}100%{opacity:0}}
@keyframes punktblitz{0%{opacity:1;transform:scale(.45)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}
.schnappschuss{position:absolute;right:62px;bottom:48px;width:62px;height:72px;background:#fff center/cover no-repeat;border:5px solid #fff;border-bottom-width:15px;box-shadow:0 6px 16px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform-origin:100% 100%}
.schnappschuss.an{animation:abzug 3s var(--sanft) both}
@keyframes abzug{0%{opacity:0;transform:scale(.2) translate(40px,20px) rotate(14deg)}16%{opacity:1;transform:scale(1) rotate(-9deg)}78%{opacity:1;transform:translate(-14px,-26px) rotate(-5deg)}100%{opacity:0;transform:translate(-22px,-52px) rotate(-3deg)}}
.klick-sprech{position:absolute;right:66px;top:-26px;background:var(--papier);color:var(--tinte);font:700 .82rem/1 var(--titel);padding:.45rem .65rem;border-radius:12px 12px 2px 12px;opacity:0;pointer-events:none;white-space:nowrap}
.klick-sprech.an{animation:sprech 1.8s var(--sanft) both}
@keyframes sprech{0%{opacity:0;transform:translateY(8px) scale(.8)}18%,75%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
.chat{order:0;outline:none}
.chat header{gap:.6rem;justify-content:flex-start}
.chat header>div{flex:1;min-width:0}
.chat-gesicht{flex:none;width:42px;height:42px;display:block}
.chat-gesicht .robo-arm,.chat-gesicht .robo-kamera{display:none}
.chat-verlauf{max-height:min(34vh,270px)}
.chat-wahl button.haupt{background:var(--navy);color:var(--papier);border-color:var(--navy);font-weight:600}
.chat-wahl button.haupt:hover{background:var(--gold-tief);border-color:var(--gold-tief)}
.chat-form{display:grid;gap:.3rem;width:100%}
.chat-form label{font:400 .72rem/1.4 var(--mono)}
.chat-form input:not([type=hidden]){min-height:44px;width:100%;border:1px solid rgba(20,30,46,.5);background:#FBF8F1;padding:.4rem .6rem;border-radius:6px;margin-bottom:.35rem}
.chat-hinweis{font-size:.78rem;line-height:1.35;color:var(--tinte-2);margin-bottom:.35rem}
.chat-form .haupt{justify-self:start}
.chat-fehler{font-size:.82rem;color:#8A1F1F;font-weight:600}
.chat-wahl{max-height:min(38vh,290px);overflow-y:auto}
.fuss{padding-bottom:9rem}

/* ---------- Unterseiten: Hero ---------- */
.hero--seite{min-height:92svh}
.deko{position:absolute;inset:0;pointer-events:none;display:none}
.deko-drittel .deko,.deko-hoch .deko,.deko-plan .deko,.deko-balken .deko{display:block}
.deko-drittel .deko i{position:absolute;background:rgba(240,215,168,.2)}
.deko-drittel .deko i:nth-child(1){left:66.6%;top:0;bottom:0;width:1px}
.deko-drittel .deko i:nth-child(2){left:83.3%;top:0;bottom:0;width:1px}
.deko-drittel .deko i:nth-child(3){top:33.3%;left:50%;right:0;height:1px}
.deko-drittel .deko i:nth-child(4){top:66.6%;left:50%;right:0;height:1px}
.deko-balken .deko i:nth-child(1),.deko-balken .deko i:nth-child(2){position:absolute;left:0;right:0;height:8.5vh;background:#050A12;z-index:1}
.deko-balken .deko i:nth-child(1){top:0}.deko-balken .deko i:nth-child(2){bottom:38px}
.deko-hoch .deko i{position:absolute;top:18%;bottom:14%;aspect-ratio:9/16;border:1px solid rgba(240,215,168,.55);border-radius:14px}
.deko-hoch .deko i:nth-child(1){right:7%}.deko-hoch .deko i:nth-child(2){right:27%;top:25%;bottom:21%;opacity:.55}.deko-hoch .deko i:nth-child(3){right:43%;top:31%;bottom:27%;opacity:.3}
.deko-hoch .deko i:nth-child(4){display:none}
.deko-plan .deko i{position:absolute;right:calc(var(--rand) + 1rem);width:150px;height:1px;background:rgba(240,215,168,.45)}
.deko-plan .deko i:nth-child(1){top:24%}.deko-plan .deko i:nth-child(2){top:32%;width:110px}.deko-plan .deko i:nth-child(3){top:40%;width:130px}.deko-plan .deko i:nth-child(4){top:48%;width:80px}

/* ---------- Bausteine ---------- */
.aussage{background:var(--papier);color:var(--tinte);padding:clamp(5rem,12vw,11rem) var(--rand)}
.aussage p{font:800 clamp(1.5rem,1rem + 2.7vw,3.7rem)/1.22 var(--titel);letter-spacing:-.015em;max-width:24em}
.kinetik span{display:inline;transition:opacity .25s linear}
.aussage-hell p{margin-left:auto}
.schlussband{padding:clamp(5rem,11vw,10rem) var(--rand);display:flex;flex-wrap:wrap;gap:2rem 4rem;align-items:center;justify-content:space-between}
.schlussband-hell{background:var(--papier);color:var(--tinte)}
.schlussband-dunkel{background:var(--navy-tief)}
.schluss-satz{font:italic 500 clamp(2rem,1.3rem + 3.6vw,4.9rem)/1.08 var(--akzent);font-optical-sizing:none;font-variation-settings:"opsz" 28;max-width:17em}
.schlussband-dunkel .schluss-satz{color:var(--gold-hell)}
.schlussband-hell .knopf-gold{background:var(--navy);color:var(--papier)}.schlussband-hell .knopf-gold::before{background:var(--gold-tief)}
.paket{background:var(--navy);padding:clamp(4.5rem,9vw,8rem) var(--rand)}
.paket-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);margin-top:clamp(2rem,4vw,3.5rem)}
.paket h3{font:400 .78rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.haken li{position:relative;padding:.85rem 0 .85rem 2.6rem;border-top:1px solid var(--linie);font-size:1.08em;opacity:.38;transition:opacity .7s}
.haken li:last-child{border-bottom:1px solid var(--linie)}
.haken li::before{content:"";position:absolute;left:0;top:.95rem;width:1.5rem;height:1.5rem;border:1.5px solid var(--gold);border-radius:50%}
.haken li::after{content:"";position:absolute;left:.52rem;top:1.22rem;width:.48rem;height:.8rem;border:solid var(--gold-hell);border-width:0 2px 2px 0;transform:rotate(42deg) scale(0);transition:transform .6s var(--sanft) .1s}
.haken li.an{opacity:1}
.haken li.an::after{transform:rotate(42deg) scale(1)}
.paket-nicht ul li{padding:.6rem 0;color:var(--nebel);text-decoration:line-through;text-decoration-color:rgba(240,215,168,.5)}
.paket .zugabe{margin-top:1.8rem;color:var(--gold-hell);font-size:clamp(1.15rem,1rem + .7vw,1.6rem)}

/* Leistungen */
.wege-teil{background:var(--papier);color:var(--tinte);padding:clamp(4rem,8vw,7rem) 0 0}
.wege-teil h2{padding-inline:var(--rand);margin-bottom:clamp(2rem,4vw,3.5rem)}
.wege{display:flex;height:min(76vh,720px)}
.weg{flex:1 1 0;min-width:0;position:relative;background-size:cover;background-position:50% 25%;color:var(--papier);text-decoration:none;display:flex;align-items:flex-end;transition:flex-grow .9s var(--sanft);overflow:hidden}
.js .weg.zeige{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--sanft) var(--w,0s),flex-grow .9s var(--sanft)}
.js .weg.zeige.sichtbar{clip-path:inset(0)}
.weg::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,18,30,.92) 0,rgba(10,18,30,.32) 62%,rgba(10,18,30,.18));transition:opacity .6s}
.weg:hover,.weg:focus-visible{flex-grow:2.1}
.weg-in{position:relative;padding:clamp(1rem,2vw,1.8rem);display:grid;gap:.45rem;min-width:min(19rem,100%)}
.weg strong{font:800 clamp(1.25rem,1rem + 1.2vw,2.1rem)/1.1 var(--titel)}
.weg em{font-style:normal;font-size:.98rem;color:#EDE6D8}
.weg-pfeil{color:var(--gold-hell);font-size:1.5rem;transition:transform .5s var(--sanft)}
.weg:hover .weg-pfeil{transform:translateX(.5em)}

/* Porträtfilm */
.fragenzug{background:var(--navy-tief);padding:clamp(5rem,10vw,9rem) var(--rand)}
.fragenzug ol{display:grid;gap:clamp(3.5rem,9vw,7.5rem)}
.fragenzug li:nth-child(2){margin-left:clamp(0rem,14vw,16rem)}.fragenzug li:nth-child(3){margin-left:clamp(0rem,7vw,8rem)}
.fragenzug q{display:block;font:italic 500 clamp(1.9rem,1.2rem + 3.6vw,5rem)/1.08 var(--akzent);font-optical-sizing:none;font-variation-settings:"opsz" 26;color:var(--gold-hell);quotes:"«" "»"}
.fragenzug p{margin-top:.9rem;max-width:30em;color:var(--nebel)}
.wer{background:var(--papier);color:var(--tinte);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,7vw,7rem);padding:clamp(5rem,10vw,9rem) var(--rand);align-items:center}
.wer figure{margin-left:calc(var(--rand) * -1)}
.wer dl{margin-top:2rem}
.wer dl div{padding:1.1rem 0;border-top:1px solid rgba(20,30,46,.24)}
.wer dt{font:700 1.2rem/1.2 var(--titel)}
.wer dd{color:var(--tinte-2);margin-top:.25rem}

/* Markenfilm */
.entscheide{background:var(--papier);color:var(--tinte);padding:clamp(5rem,10vw,9rem) var(--rand)}
.entscheide ol{margin-top:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:n;align-items:start}
.entscheide li{counter-increment:n;padding:0 clamp(1rem,2.4vw,2.4rem);border-left:1px solid rgba(20,30,46,.24)}
.entscheide li:nth-child(2){margin-top:3.5rem}.entscheide li:nth-child(3){margin-top:7rem}
.entscheide li::before{content:counter(n);display:block;font:italic 500 clamp(3rem,2rem + 3vw,5.5rem)/1 var(--akzent);color:var(--gold-tief);font-optical-sizing:none;font-variation-settings:"opsz" 28}
.entscheide b{display:block;font:700 clamp(1.15rem,1rem + .7vw,1.55rem)/1.2 var(--titel);margin:.5rem 0}
.entscheide span{color:var(--tinte-2)}
.tafeln{background:var(--navy-tief);padding:clamp(5rem,10vw,9rem) var(--rand)}
.tafeln h2 em{color:var(--gold)}
.tafel-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vw,4.5rem)}
.tafel:nth-child(even){transform:translateY(clamp(0rem,5vw,4.5rem))}
.js .tafel.zeige.sichtbar:nth-child(even){transform:translateY(clamp(0rem,5vw,4.5rem))}
.tafel{overflow:visible}
.tafel svg{width:100%;height:auto;color:var(--gold-hell);background:#060C15}
.tafel figcaption{position:static;background:none;padding:.8rem 0 0;font:400 .98rem/1.45 var(--text);max-width:none;color:var(--nebel)}
.tafel figcaption strong{color:var(--papier);font-weight:600}

/* Social */
.teil-sek{background:var(--navy-tief);padding:clamp(5rem,10vw,9rem) var(--rand)}
.teil-sek h2 em{color:var(--gold)}
.teil-hilfe{margin:1rem 0 clamp(2rem,4vw,3.5rem);color:var(--nebel)}
.teilen{--t:0;--hoehe:64px;display:flex;gap:calc(var(--t) * 1.4vw);align-items:center;min-height:calc(var(--hoehe) + 8px)}
.stueck{flex:1 1 0;min-width:0;height:var(--hoehe);position:relative;overflow:hidden;border-radius:calc(var(--t) * 16px);background:#1B2940;transform:translateY(calc(var(--t) * (var(--i) - 2) * (var(--i) - 2) * 9px)) rotate(calc(var(--t) * (var(--i) - 2) * 1.6deg))}
.stueck-bild{position:absolute;inset:0;background:url(bilder/h-kaugummi.webp) no-repeat;background-size:auto 150%;filter:saturate(calc(.4 + var(--t) * .7))}
.stueck-text{position:absolute;left:.7rem;right:.7rem;bottom:.8rem;font:700 clamp(.82rem,.7rem + .4vw,1.1rem)/1.15 var(--titel);color:#fff;opacity:var(--t);text-shadow:0 1px 8px rgba(0,0,0,.8);background:rgba(10,18,30,.76);padding:.4rem .5rem;border-radius:6px}
.teil-notiz{margin-top:clamp(2rem,4vw,3rem);font:400 .76rem/1.4 var(--mono);color:var(--gold)}
.aufwand{background:var(--papier);color:var(--tinte);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,7vw,7rem);padding:clamp(5rem,10vw,9rem) var(--rand);align-items:center}
.aufwand>div{order:-1}
.aufwand figure{margin-right:calc(var(--rand) * -1)}
.aufwand-liste{margin-top:2rem;counter-reset:n}
.aufwand-liste li{padding:1.1rem 0;border-top:1px solid rgba(20,30,46,.24);color:var(--tinte-2)}
.aufwand-liste b{color:var(--tinte);font-weight:700}

/* Produktion */
.liste-sek{background:var(--papier);color:var(--tinte);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,7rem);padding:clamp(5rem,10vw,9rem) var(--rand)}
.liste-sek h2 em{color:var(--gold-tief)}
.liste-sek>div p:last-child{margin-top:1.3rem;max-width:30em;color:var(--tinte-2)}
.haken-gross li{border-color:rgba(20,30,46,.24)!important;padding-block:1.15rem;font-size:clamp(1.05rem,1rem + .5vw,1.4rem)}
.haken-gross li::before{top:1.25rem;border-color:var(--gold-tief)}
.haken-gross li::after{top:1.52rem;border-color:var(--gold-tief)}
.zwei-seiten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.zwei-seiten>div{padding:clamp(3.5rem,8vw,7rem) var(--rand)}
.zwei-seiten>div:first-child{background:var(--gold);color:var(--navy-tief)}
.zwei-seiten>div:last-child{background:var(--navy-tief)}
.zwei-seiten p{margin-top:1rem;max-width:26em;font-size:1.1em}

/* Filme */
.iris-sek{background:var(--navy-tief)}
.kurzfilm{background:var(--papier);color:var(--tinte);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);padding:clamp(5rem,10vw,9rem) var(--rand);align-items:center}
.herz{width:100%;max-width:520px;height:auto;justify-self:center;background:var(--navy);padding:clamp(1.5rem,4vw,3.5rem);box-sizing:border-box}
.kurzfilm h2 em{color:var(--gold-tief)}
.kf-daten{margin-top:1.8rem}
.kf-daten div{display:grid;grid-template-columns:7rem minmax(0,1fr);padding:.7rem 0;border-top:1px solid rgba(20,30,46,.24)}
.kf-daten dt{font:400 .76rem/2 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--gold-tief)}
.kf-daten dd{font-weight:600}
.platz{margin-top:1.3rem;color:var(--tinte-2)}
.podcast{background:var(--navy);padding:clamp(5rem,10vw,9rem) var(--rand);text-align:left}
.podcast h2{font-size:clamp(2.2rem,1.3rem + 5.6vw,7.4rem)}
.podcast h2 em{color:var(--gold);display:inline-block}
.podcast>p{max-width:33em;margin-top:1.2rem}
.podcast .textlink{margin-top:.8rem;color:var(--gold-hell)}
.pegel{display:flex;gap:clamp(2px,.45vw,7px);align-items:center;height:clamp(70px,11vw,140px);margin-bottom:clamp(1.6rem,3vw,3rem);overflow:hidden}
.pegel i{flex:1 1 0;min-width:1px;background:var(--gold);height:calc(var(--h) * 100%);transform-origin:center;animation:pegel 2.4s ease-in-out infinite;animation-delay:calc(var(--h) * -5s)}
@keyframes pegel{50%{transform:scaleY(.42)}}
.slots{background:var(--navy-tief);padding:clamp(5rem,10vw,9rem) var(--rand)}
.slot-reihe{display:grid;grid-template-columns:5fr 3fr 4fr;gap:clamp(.8rem,2vw,1.6rem);margin-top:clamp(2rem,4vw,3.5rem);align-items:end}
.slot{border:1px dashed rgba(240,215,168,.45);min-height:clamp(220px,24vw,340px);padding:1.2rem;display:flex;flex-direction:column;justify-content:flex-end;transition:background .5s}
.slot:hover{background:var(--navy-hell)}
.slot-hoch{min-height:clamp(300px,34vw,480px)}
.slot span{font:400 .76rem/1 var(--mono);color:var(--gold);margin-bottom:auto}
.slot p{font-size:.92rem;color:var(--nebel);margin-top:.3rem}
.slot p b{color:var(--gold)}

/* Über mich */
.polas{background:var(--navy-tief);position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;padding:clamp(4rem,9vw,8rem) var(--rand) clamp(6rem,12vw,11rem)}
.pola{align-self:start;background:#FBF8F1;padding:.6rem .6rem 0;box-shadow:0 18px 44px rgba(0,0,0,.42);overflow:hidden}
.pola img{display:block;width:100%;height:auto;transform:none!important}
.pola figcaption{position:static;background:none;color:var(--tinte);font:italic 500 1.02rem/1.25 var(--akzent);padding:.55rem .1rem .8rem;max-width:none}
.pola.p1{grid-column:1/6}.pola.p2{grid-column:7/11;margin-top:5rem}.pola.p3{grid-column:2/5;margin-top:-3rem}.pola.p4{grid-column:6/12;margin-top:2rem}
.wissen{background:var(--papier);color:var(--tinte);padding:clamp(5rem,10vw,9rem) var(--rand)}
.wissen ol{margin-top:clamp(2rem,4vw,3.5rem);counter-reset:n}
.wissen li{counter-increment:n;display:block;position:relative;padding:1.4rem 0 1.4rem clamp(3.2rem,8vw,7rem);border-top:1px solid rgba(20,30,46,.24);max-width:62rem;color:var(--tinte-2);font-size:1.08em}
.wissen li::before{content:counter(n);position:absolute;left:0;top:.7rem;font:italic 500 clamp(2.4rem,2rem + 2vw,3.8rem)/1 var(--akzent);color:var(--gold-tief);font-optical-sizing:none;font-variation-settings:"opsz" 28}
.wissen b{color:var(--tinte);font-weight:700}
.zitat-sek{position:relative;min-height:78vh;display:flex;align-items:center;padding:clamp(4rem,9vw,8rem) var(--rand);isolation:isolate;overflow:hidden;background:var(--navy-tief)}
.zitat-bild{position:absolute;inset:0;z-index:-1}
.zitat-bild img{width:100%;height:100%;object-fit:cover;object-position:60% 22%;filter:brightness(.42)}
.zitat-sek blockquote{margin:0;font:italic 500 clamp(2.2rem,1.2rem + 5vw,6.6rem)/1.06 var(--akzent);font-optical-sizing:none;font-variation-settings:"opsz" 26;color:var(--gold-hell);max-width:13em}

/* Crew */
.netz-sek{background:var(--papier);color:var(--tinte);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);padding:clamp(5rem,10vw,9rem) var(--rand);align-items:center}
.rollen{margin-top:2rem}
.rollen li{padding:1rem 0;border-top:1px solid rgba(20,30,46,.24);color:var(--tinte-2)}
.rollen b{color:var(--tinte);display:inline-block;min-width:5rem;font:700 1.05rem/1.3 var(--titel)}
.netz{width:100%;height:auto;max-width:620px;justify-self:center;overflow:visible}
.netz text{font:700 16px var(--titel);fill:#F0D7A8}
.netz .mitte{fill:#0A121E;font-size:19px}
.knoten{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .6s,transform .8s var(--sanft)}
.knoten.an{opacity:1;transform:none}
.mitdrehen{background:var(--navy-tief);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,6rem);padding:clamp(5rem,10vw,9rem) var(--rand);align-items:start}
.mitdrehen h2 em{color:var(--gold)}
.md-text>p:not(.ausweis){margin-top:1.3rem;max-width:32em}
.md-text figure{margin:2.5rem 0 0 calc(var(--rand) * -1);max-width:70%}

/* Kontakt */
.kontakt-seite{background:var(--papier);color:var(--tinte);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,6rem);padding:clamp(5rem,10vw,9rem) var(--rand);align-items:start}
.ks-ablauf{margin-top:2rem;counter-reset:n}
.ks-ablauf li{counter-increment:n;position:relative;padding:1.2rem 0 1.2rem 3.3rem;border-top:1px solid rgba(20,30,46,.24);color:var(--tinte-2)}
.ks-ablauf li::before{content:counter(n);position:absolute;left:0;top:.75rem;font:italic 500 2.5rem/1 var(--akzent);color:var(--gold-tief);font-optical-sizing:none;font-variation-settings:"opsz" 28}
.ks-ablauf b{color:var(--tinte);font-weight:700}
.ks-direkt{margin-top:1.4rem}
.ks-direkt a{overflow-wrap:anywhere}
.kontakt-seite .formular{background:var(--navy);color:var(--papier)}
.kontakt-seite .feld label{color:var(--papier)}
.kontakt-seite .formular .knopf{background:var(--gold);color:var(--navy-tief)}
.kontakt-seite .form-hinweis{color:var(--nebel)}
.kontakt-seite .form-antwort[data-art=nein]{color:#FFC9C0}.kontakt-seite .form-antwort[data-art=ja]{color:#BFE7C9}
.mitdrehen .formular .knopf{background:var(--navy);color:var(--papier)}

/* ---------- Handy ---------- */
@media (max-width:860px){
  .klick{width:74px;height:74px;padding:6px 4px 2px 7px}
  .schwebe{width:48px;height:48px}
  .fuss{padding-bottom:11rem}
  .hero--seite{min-height:100svh}
  .band-in{-webkit-text-stroke-width:1.5px}
  .deko{display:none!important}
  .wege{flex-direction:column;height:auto}
  .weg{flex:none;min-height:230px}
  .weg:hover{flex-grow:0}
  .paket-raster,.wer,.aufwand,.liste-sek,.kurzfilm,.netz-sek,.mitdrehen,.kontakt-seite,.zwei-seiten{grid-template-columns:minmax(0,1fr)}
  .wer figure{margin-right:18%}
  .aufwand>div{order:0}
  .aufwand figure{margin-left:18%}
  .fragenzug li:nth-child(n){margin-left:0}
  .entscheide ol{grid-template-columns:minmax(0,1fr);gap:2rem}
  .entscheide li:nth-child(n){margin-top:0}
  .tafel-reihe{grid-template-columns:minmax(0,1fr)}
  .tafel:nth-child(even),.js .tafel.zeige.sichtbar:nth-child(even){transform:none}
  .stueck:nth-child(n+4){display:none}
  .slot-reihe{grid-template-columns:minmax(0,1fr)}
  .slot,.slot-hoch{min-height:170px}
  .polas{display:flex;flex-direction:column;align-items:center;gap:2rem}
  .pola.p1,.pola.p2,.pola.p3,.pola.p4{width:78%;margin:0}
  .pola.p2,.pola.p4{align-self:flex-end}.pola.p1,.pola.p3{align-self:flex-start}
  .md-text figure{max-width:88%}
  .netz{max-width:100%}
  .schlussband{padding-bottom:7rem}
  .pola{translate:none!important}
  .recht h1{font-size:8vw}
  .stueck-text{font-size:.72rem;left:.4rem;right:.4rem;bottom:.5rem}
}