@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(montserrat-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url(montserrat-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}
:root{--p:#4f46e5;--p2:#8d87ee;--dk:#0e1222;--deep:#0a0e1a;--soft:#f3f3ff;--ink:#152030;--muted:#5b6676;--line:rgba(20,32,48,.09);--r:20px}
*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:#f6f8fa;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:800}a{color:inherit}img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 1.4rem}
.akzent{background:linear-gradient(90deg,var(--p),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.demo{position:relative;z-index:60;background:#0b0f14;color:#e9eef4;text-align:center;font-size:.78rem;padding:.4rem 1rem;letter-spacing:.02em}
/* Kopfzeile */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--deep) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:1rem}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:1.08rem;letter-spacing:.06em;text-transform:uppercase}.logo span{color:var(--p2)}
.menu{display:flex;gap:1.7rem;align-items:center}.menu a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:.88rem;transition:color .2s}.menu a:hover{color:#fff}
.knopf{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:700;font-size:.95rem;border:0;cursor:pointer;font-family:inherit;border-radius:999px;padding:.9rem 1.5rem;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s}
.knopf.voll{background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;box-shadow:0 10px 30px -8px color-mix(in srgb,var(--p) 70%,transparent)}
.knopf.voll:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px color-mix(in srgb,var(--p) 80%,transparent)}
.knopf.glas{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}.knopf.glas:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.knopf.klein{padding:.55rem 1.05rem;font-size:.85rem}
/* Start */
.hero{position:sticky;top:66px;min-height:calc(100vh - 66px);display:flex;align-items:center;overflow:hidden;color:#fff;
 background:radial-gradient(900px 600px at 78% 30%,color-mix(in srgb,var(--p) 55%,transparent),transparent 65%),radial-gradient(700px 500px at 10% 90%,color-mix(in srgb,var(--p2) 25%,transparent),transparent 60%),linear-gradient(160deg,var(--dk),var(--deep));z-index:1;transform-origin:50% 0}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000 30%,transparent 90%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 90%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:3.5rem;align-items:center;padding-top:4rem;padding-bottom:9rem;width:100%}
.pille{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:.82rem;font-weight:600;margin-bottom:1.4rem}.pille i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.2);animation:puls 2s infinite}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(74,222,128,0)}}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem)}.hero h1 .z{display:block;overflow:hidden}.hero h1 .z>span{display:inline-block}
.hero p.unter{color:rgba(255,255,255,.78);font-size:1.12rem;margin:1.4rem 0 2.1rem;max-width:34rem}
.reihe{display:flex;gap:.8rem;flex-wrap:wrap}
.sterne{display:flex;align-items:center;gap:.6rem;margin-top:1.8rem;font-size:.9rem;color:rgba(255,255,255,.8)}.sterne b{color:#fbbf24;display:flex;gap:2px}
/* Bühne rechts */
.buehne{position:relative;aspect-ratio:1/1;max-width:460px;justify-self:center;width:100%}
.orbit{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(255,255,255,.18);animation:dreh 40s linear infinite}.orbit.o2{inset:20%;animation-duration:28s;animation-direction:reverse}
@keyframes dreh{to{transform:rotate(360deg)}}
.kern{position:absolute;inset:27%;border-radius:32%;background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3);animation:schwebe 6s ease-in-out infinite}
.kern svg{width:44%;height:44%;filter:drop-shadow(0 6px 20px color-mix(in srgb,var(--p2) 70%,transparent))}
@keyframes schwebe{50%{transform:translateY(-14px) rotate(2deg)}}
.karte{position:absolute;background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;padding:.8rem 1rem;box-shadow:0 20px 50px -15px rgba(0,0,0,.45);display:flex;gap:.7rem;align-items:center;font-size:.85rem;min-width:170px}
.karte .ki{width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--p) 14%,#fff);color:var(--p);display:flex;align-items:center;justify-content:center;flex:none}.karte b{display:block;font-size:.95rem}.karte small{color:var(--muted)}
.k1{top:6%;left:-4%;animation:schwebe 7s ease-in-out infinite}.k2{top:44%;right:-8%;animation:schwebe 8s ease-in-out -2s infinite}.k3{bottom:4%;left:4%;animation:schwebe 6.5s ease-in-out -4s infinite}
.funke{position:absolute;color:var(--p2);animation:blink 3.5s ease-in-out infinite}@keyframes blink{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
/* Welle */
.welle{position:absolute;left:0;right:0;bottom:-1px;height:9vh;min-height:70px;z-index:3;pointer-events:none;overflow:hidden}.welle svg{position:absolute;left:0;bottom:0;width:200%;height:100%}
.lage{animation:fluss 18s linear infinite}.l1{animation-duration:26s}.l2{animation-duration:15s}.l3{animation-duration:30s}.l4{animation-duration:21s;animation-direction:reverse}.l5{animation-duration:12s}
@keyframes fluss{to{transform:translateX(-1440px)}}
.welle.oben{top:-1px;bottom:auto;transform:scaleY(-1)}
/* Bereiche */
main>section,main>.blatt{position:relative;z-index:2}
section{padding:6.5rem 0;background:#f6f8fa}section.dunkel{background:var(--deep);color:#fff}section.hell{background:#fff}
.kopf{text-align:center;max-width:720px;margin:0 auto 3.2rem}.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--p);margin-bottom:.8rem}
.dunkel .eyebrow{color:var(--p2)}.kopf h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}.kopf p{color:var(--muted);font-size:1.06rem;margin-top:.9rem}.dunkel .kopf p{color:rgba(255,255,255,.7)}
/* Leistungen als Reiter */
.tabliste{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:1.6rem}
.tab{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:.88rem;color:var(--ink);cursor:pointer;transition:all .25s}
.tab:hover{border-color:color-mix(in srgb,var(--p) 40%,transparent);transform:translateY(-1px)}.tab[aria-selected=true]{background:var(--deep);color:#fff;border-color:var(--deep);box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}.tab[aria-selected=true] svg{color:var(--p2)}
.panel{background:#fff;border-radius:26px;border:1px solid var(--line);box-shadow:0 30px 80px -40px rgba(10,24,38,.35);padding:2.6rem;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.panel[hidden]{display:none}.panel.auf{animation:auf .5s cubic-bezier(.2,.8,.2,1)}@keyframes auf{from{opacity:0;transform:translateY(14px)}}
.panel h3{font-size:1.5rem;margin-bottom:.8rem}.panel p{color:var(--muted)}.panel ul{list-style:none;display:grid;gap:.7rem}
.panel li{display:flex;gap:.7rem;align-items:flex-start;background:var(--soft);border-radius:14px;padding:.85rem 1rem;font-weight:600;font-size:.93rem}.panel li svg{color:var(--p);flex:none;margin-top:2px}
.panel .preis{display:flex;justify-content:space-between;gap:1rem;width:100%}.panel .preis b{white-space:nowrap;color:var(--p)}
/* Karten */
.gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.wert{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;display:flex;gap:1rem;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.wert:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(10,24,38,.35)}.wert .ic{width:48px;height:48px;border-radius:15px;flex:none;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 16%,#fff),#fff);color:var(--p);display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--p) 18%,transparent)}
.wert h3{font-size:1.02rem;margin-bottom:.3rem}.wert p{color:var(--muted);font-size:.92rem}
.dunkel .wert{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}.dunkel .wert p{color:rgba(255,255,255,.65)}.dunkel .wert .ic{background:rgba(255,255,255,.06);color:var(--p2);border-color:rgba(255,255,255,.1)}
/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:3rem}.zahl{text-align:center;padding:1.5rem 1rem;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.zahl b{display:block;font-size:2.3rem;font-weight:800;background:linear-gradient(90deg,#fff,var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}.zahl span{color:rgba(255,255,255,.65);font-size:.88rem}
/* Ablauf */
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:s;position:relative}
.schritt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;position:relative}.schritt::before{counter-increment:s;content:"0" counter(s);display:block;font-size:2.4rem;font-weight:800;color:color-mix(in srgb,var(--p) 25%,#fff);margin-bottom:.4rem;line-height:1}
.schritt h3{font-size:1.1rem;margin-bottom:.3rem}.schritt p{color:var(--muted);font-size:.93rem}
/* Stimmen */
.stimmen{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}.stimme{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}.stimme .st{color:#f59e0b;display:flex;gap:2px;margin-bottom:.8rem}.stimme p{font-size:1.05rem}.stimme small{display:block;margin-top:.8rem;color:var(--muted)}
/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:.7rem}.faq details{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:0 1.3rem;transition:background .25s}
.faq details[open]{background:rgba(255,255,255,.08)}.faq summary{list-style:none;cursor:pointer;font-weight:700;padding:1.1rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--p2);border-bottom:2px solid var(--p2);transform:rotate(45deg);transition:transform .3s;flex:none}.faq details[open] summary::after{transform:rotate(-135deg)}.faq details p{color:rgba(255,255,255,.72);padding-bottom:1.1rem}
/* Kontakt */
.kontakt{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.2rem}.box{background:#fff;border:1px solid var(--line);border-radius:24px;padding:2rem}
.weg{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--line);text-decoration:none}.weg:last-of-type{border:0}.weg .ic{width:42px;height:42px;border-radius:13px;background:var(--soft);color:var(--p);display:flex;align-items:center;justify-content:center;flex:none}.weg b{display:block}.weg small{color:var(--muted)}
.zeiten{margin-top:1.3rem;background:var(--soft);border-radius:16px;padding:1rem 1.2rem}.zeiten div{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.92rem}
form{display:grid;gap:.8rem}label{font-size:.82rem;font-weight:700;color:var(--muted)}input,textarea{width:100%;padding:.9rem 1rem;border:1px solid rgba(20,32,48,.14);border-radius:14px;font:inherit;background:#fbfcfd;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 15%,transparent);background:#fff}.hp{position:absolute;left:-9999px}.klein{font-size:.8rem;color:var(--muted)}
.karte-knopf{margin-top:1rem;width:100%;min-height:150px;border-radius:16px;border:1px dashed rgba(20,32,48,.2);background:repeating-linear-gradient(45deg,#f2f4f7,#f2f4f7 12px,#eceff3 12px,#eceff3 24px);font:inherit;color:var(--muted);cursor:pointer}
footer{position:relative;z-index:2;background:#081018;color:rgba(255,255,255,.6);padding:2.6rem 0 6rem;font-size:.88rem}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}footer a{color:#fff;margin-left:1.2rem;text-decoration:none}
/* Handy-Leiste */
.leiste{position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:70;display:none;gap:.5rem;padding:.5rem;border-radius:20px;background:color-mix(in srgb,var(--deep) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 20px 40px -10px rgba(0,0,0,.5);transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.leiste.da{transform:none}.leiste a{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.8rem;border-radius:14px;color:#fff;text-decoration:none;font-weight:700;font-size:.88rem}.leiste a.wa{background:#22c55e}.leiste a.an{background:rgba(255,255,255,.1)}
.wa-rund{position:fixed;right:1.2rem;bottom:1.2rem;z-index:70;width:58px;height:58px;border-radius:50%;background:#22c55e;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -8px rgba(34,197,94,.7);transition:transform .25s}.wa-rund:hover{transform:scale(1.08)}
.legal{max-width:780px;margin:0 auto;padding:5rem 1.4rem;background:#fff;position:relative;z-index:2}.legal h1{font-size:2rem;margin-bottom:1.5rem}.legal h2{font-size:1.15rem;margin:1.6rem 0 .4rem}.legal p{margin-bottom:.6rem}.ph{background:#fff3c4;padding:0 .25rem;border-radius:4px}
@media(max-width:900px){.hero{position:relative;top:0;min-height:auto}.hero .wrap{grid-template-columns:1fr;padding-top:3rem;padding-bottom:7rem}.buehne{max-width:340px}.k2{right:-2%}
 .menu a:not(.knopf){display:none}.panel,.kontakt{grid-template-columns:1fr}.panel{padding:1.6rem}.gitter,.schritte,.stimmen{grid-template-columns:1fr}.zahlen{grid-template-columns:repeat(2,1fr)}section{padding:4.5rem 0}.leiste{display:flex}.wa-rund{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.illu{position:absolute;inset:8%;display:flex;align-items:center;justify-content:center;animation:schwebe 7s ease-in-out infinite}.illu-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
.dreh-langsam{transform-origin:200px 200px;animation:dreh 30s linear infinite}.dreh-pizza{transform-origin:200px 200px;animation:dreh 40s linear infinite}
.schwing{transform-origin:200px 200px;animation:schwing 5s ease-in-out infinite}@keyframes schwing{50%{transform:rotate(8deg)}}
.klinge-a{transform-origin:0 0;animation:ka 2.4s ease-in-out infinite}.klinge-b{transform-origin:0 0;animation:kb 2.4s ease-in-out infinite}@keyframes ka{50%{transform:rotate(12deg)}}@keyframes kb{50%{transform:rotate(-12deg)}}
.funkeln path{transform-box:fill-box;transform-origin:center;animation:blink 2.8s ease-in-out infinite}.funkeln path:nth-child(2){animation-delay:1.3s}
.farbbahn{transform-origin:0 0;animation:streich 4.5s cubic-bezier(.6,0,.2,1) infinite}@keyframes streich{0%{clip-path:inset(0 100% 0 0)}45%,80%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
.rolle{animation:rollen 4.5s cubic-bezier(.6,0,.2,1) infinite}@keyframes rollen{0%{transform:translateX(-120px)}45%,80%{transform:translateX(0)}100%{transform:translateX(60px)}}
.tropfen-fall path{animation:fall 3s ease-in infinite}.tropfen-fall path:nth-child(2){animation-delay:1.4s}@keyframes fall{0%{transform:translateY(-30px);opacity:0}20%{opacity:1}100%{transform:translateY(30px);opacity:0}}
.dampf path{animation:dampf 3s ease-in-out infinite}.dampf path:nth-child(2){animation-delay:.8s}.dampf path:nth-child(3){animation-delay:1.6s}@keyframes dampf{0%{transform:translateY(10px);opacity:0}40%{opacity:.8}100%{transform:translateY(-20px);opacity:0}}
.glanz-streif{animation:glanz 3.6s ease-in-out infinite}@keyframes glanz{0%{transform:translateX(-80px);opacity:0}30%{opacity:1}70%{transform:translateX(260px);opacity:0}100%{transform:translateX(260px);opacity:0}}
.abzieher{animation:zieh 3.6s ease-in-out infinite}@keyframes zieh{0%,100%{transform:translateY(-50px)}50%{transform:translateY(90px)}}
.blasen circle{transform-box:fill-box;transform-origin:center;animation:blase 4s ease-in-out infinite}.blasen circle:nth-child(2n){animation-delay:1.5s}@keyframes blase{50%{transform:translateY(-16px) scale(1.1)}}
.blob{transform-origin:200px 200px;animation:blob 9s ease-in-out infinite}@keyframes blob{50%{transform:scale(1.08) rotate(8deg)}}
.flasche{animation:schwebe 5s ease-in-out infinite}
/* Laufband */
.band{position:relative;z-index:2;background:var(--deep);color:#fff;padding:1.1rem 0;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.08)}
.band .lauf{display:inline-flex;gap:3rem;animation:laufband 32s linear infinite;padding-left:3rem}.band span{display:inline-flex;align-items:center;gap:.8rem;font-weight:800;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase}.band span svg{color:var(--p2)}
@keyframes laufband{to{transform:translateX(-50%)}}
/* Vorher / Nachher */
.vn{position:relative;aspect-ratio:16/9;border-radius:26px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(10,24,38,.5);user-select:none;touch-action:pan-y;max-width:980px;margin:0 auto;cursor:ew-resize}
.vn .bild{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.4rem}.vn .vor{background:repeating-linear-gradient(115deg,#8d8579 0 14px,#837b70 14px 28px),#8d8579;filter:saturate(.6)}
.vn .vor::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(60,50,40,.45),transparent 40%),radial-gradient(circle at 70% 70%,rgba(60,50,40,.35),transparent 35%)}
.vn .nach{background:linear-gradient(135deg,var(--soft),#fff 60%,color-mix(in srgb,var(--p) 18%,#fff));clip-path:inset(0 0 0 50%)}
.vn .etikett{position:relative;z-index:2;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:.8rem;padding:.35rem .8rem;border-radius:999px}.vn .nach .etikett{margin-left:auto;background:var(--p)}
.vn .griff{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);z-index:3}.vn .griff::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:#fff;color:var(--dk);display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.vn-hinweis{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1rem}
/* Lichtschein am Mauszeiger (nur Desktop) */
.schein{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,color-mix(in srgb,var(--p) 18%,transparent),transparent 65%);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
@media(hover:hover){.schein.an{opacity:1}}
/* Wörter-Einblendung */
.wort{display:inline-block;will-change:transform}.akzent .wort{background:linear-gradient(90deg,var(--p),var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.v-eleganz .menu a.knopf,.v-frisch .menu a.knopf,.v-sanft .menu a.knopf{color:#fff}
/* Karten-Neigung */
.wert,.stimme,.schritt{transform-style:preserve-3d}

/* ===== Designsystem ELEGANZ (Friseur) – hell, Serifen, ruhig ===== */
.v-eleganz h1,.v-eleganz h2,.v-eleganz .panel h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.01em}
.v-eleganz .hero{background:radial-gradient(800px 500px at 85% 20%,color-mix(in srgb,var(--p) 22%,transparent),transparent 60%),linear-gradient(180deg,var(--soft),#fff);color:var(--ink)}
.v-eleganz .hero::before{background-image:radial-gradient(color-mix(in srgb,var(--p) 25%,transparent) 1px,transparent 1px)}
.v-eleganz .hero p.unter{color:var(--muted)}.v-eleganz .pille{background:#fff;border-color:var(--line);color:var(--ink)}.v-eleganz .knopf.glas{color:var(--ink);border-color:rgba(0,0,0,.15);background:#fff}
.v-eleganz .sterne{color:var(--muted)}.v-eleganz .orbit{border-color:color-mix(in srgb,var(--p) 30%,transparent)}.v-eleganz header{background:rgba(255,255,255,.85);border-bottom-color:var(--line)}
.v-eleganz .logo{color:var(--ink);font-family:Georgia,serif;text-transform:none;letter-spacing:.02em;font-weight:400;font-size:1.35rem}.v-eleganz .menu a{color:var(--muted)}.v-eleganz .menu a:hover{color:var(--ink)}
.v-eleganz .hero h1 em{font-style:italic!important}.v-eleganz .knopf{border-radius:4px}.v-eleganz .tab,.v-eleganz .panel,.v-eleganz .wert,.v-eleganz .stimme,.v-eleganz .box{border-radius:6px}
/* ===== KRAFT (Handwerk) – dunkel, kantig, groß ===== */
.v-kraft .hero h1{text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.7rem);letter-spacing:-.01em}.v-kraft .knopf{border-radius:8px}.v-kraft .tab,.v-kraft .panel,.v-kraft .wert,.v-kraft .box,.v-kraft .stimme,.v-kraft .schritt{border-radius:10px}
.v-kraft .hero::after{content:"";position:absolute;right:-10%;top:-20%;width:60%;height:140%;background:linear-gradient(115deg,transparent 40%,color-mix(in srgb,var(--p) 14%,transparent) 40%,transparent 70%);pointer-events:none}
.v-kraft .eyebrow::before{content:"// ";color:var(--p)}
/* ===== WARM (Gastro) – creme, rund, appetitlich ===== */
.v-warm{background:#fbf6ee}.v-warm section:not(.dunkel){background:#fbf6ee}.v-warm section.hell{background:#fff}
.v-warm h1,.v-warm h2{font-family:Georgia,serif;font-weight:700}.v-warm .panel li{border-bottom:2px dotted color-mix(in srgb,var(--p) 30%,transparent);background:transparent;border-radius:0;padding:.7rem .2rem}
.v-warm .knopf{border-radius:14px}
/* ===== FRISCH (Reinigung) – hell, luftig, Glas ===== */
.v-frisch .hero{background:radial-gradient(800px 600px at 80% 20%,color-mix(in srgb,var(--p) 30%,transparent),transparent 60%),linear-gradient(180deg,#eefcff,#fff);color:var(--ink)}
.v-frisch .hero p.unter{color:var(--muted)}.v-frisch .pille{background:#fff;border-color:var(--line);color:var(--ink)}.v-frisch .knopf.glas{color:var(--ink);border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.7)}.v-frisch .sterne{color:var(--muted)}
.v-frisch .hero::before{background-image:radial-gradient(color-mix(in srgb,var(--p) 30%,transparent) 1.2px,transparent 1.2px)}.v-frisch .orbit{border-color:color-mix(in srgb,var(--p) 35%,transparent)}
/* ===== SANFT (Kosmetik) – rosé, weich, luxuriös ===== */
.v-sanft h1,.v-sanft h2{font-family:Georgia,serif;font-weight:400}.v-sanft .hero{background:radial-gradient(700px 500px at 80% 30%,color-mix(in srgb,var(--p) 30%,transparent),transparent 60%),linear-gradient(170deg,#fff5f9,var(--soft));color:var(--ink)}
.v-sanft .hero p.unter{color:var(--muted)}.v-sanft .pille{background:#fff;border-color:var(--line);color:var(--ink)}.v-sanft .knopf.glas{color:var(--ink);border-color:rgba(0,0,0,.12);background:#fff}.v-sanft .sterne{color:var(--muted)}
.v-sanft .hero h1 em{font-style:italic!important}.v-sanft .tab,.v-sanft .panel,.v-sanft .wert,.v-sanft .box,.v-sanft .stimme{border-radius:28px}.v-sanft .orbit{border-color:color-mix(in srgb,var(--p) 30%,transparent)}
.v-eleganz .hero .welle .l3 path,.v-frisch .hero .welle .l3 path,.v-sanft .hero .welle .l3 path{fill:#f6f8fa}
@media(max-width:900px){.vn{aspect-ratio:4/3}.schein{display:none}}

/* Fortschrittsbalken */
.fbalken{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:linear-gradient(90deg,var(--p2),var(--p));transform:scaleX(0);transform-origin:0 50%}
/* Umlaufender Farbrand */
@property --w{syntax:'<angle>';initial-value:0deg;inherits:false}
.panel{position:relative;isolation:isolate}.panel::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--w),transparent 0 60%,var(--p2) 75%,var(--p) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rand 6s linear infinite;z-index:-1;pointer-events:none}
@keyframes rand{to{--w:360deg}}
/* Riesen-Schriftzug, läuft beim Scrollen */
.riese{position:relative;z-index:2;overflow:hidden;white-space:nowrap;padding:2.2rem 0 .4rem;pointer-events:none;background:inherit}
.riese div{display:inline-block;font-size:clamp(4rem,11vw,9rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--p2) 45%,transparent);text-transform:uppercase}
.riese div span{color:color-mix(in srgb,var(--p) 85%,#fff);-webkit-text-stroke:0}
/* Bildergalerie (Bildflächen bis echte Fotos da sind) */
.galerie-g{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:1rem}
.kachel{position:relative;border-radius:22px;overflow:hidden;background:var(--deep);isolation:isolate}
.kachel.gross{grid-column:span 2;grid-row:span 2}.kachel.breit{grid-column:span 2}
.kachel .motiv{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}.kachel:hover .motiv{transform:scale(1.08)}
.kachel .motiv svg{position:absolute;right:-6%;bottom:-8%;width:62%;height:auto;color:#fff;opacity:.16}
.kachel .motiv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.kachel .txt{position:absolute;left:1.3rem;bottom:1.1rem;right:1.3rem;color:#fff;z-index:2}.kachel .txt b{display:block;font-size:1.1rem}.kachel .txt small{opacity:.75;font-size:.8rem}
.kachel .glanz{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);transform:translateX(-100%);transition:transform 1s;z-index:1}.kachel:hover .glanz{transform:translateX(100%)}
.galerie-hinweis{text-align:center;color:var(--muted);font-size:.85rem;margin-top:1rem}
/* Linie zwischen den Schritten */
.schritte{position:relative}.schritte .linie{position:absolute;left:8%;right:8%;top:3.2rem;height:2px;background:linear-gradient(90deg,var(--p2),var(--p));transform:scaleX(0);transform-origin:0 50%;z-index:0}
.schritt{z-index:1}
.nr-kurz{display:none}
@media(max-width:560px){.nr{display:none}.nr-kurz{display:inline}.tabliste{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:0 1.4rem 6px;margin:0 -1.4rem 1.2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.tabliste::-webkit-scrollbar{display:none}.tab{flex:none}.hero h1{font-size:2.1rem}}
@media(max-width:900px){.galerie-g{grid-template-columns:1fr 1fr;grid-auto-rows:160px}.kachel.gross{grid-column:span 2}.schritte .linie{display:none}}

/* Seitenübergänge (View Transitions, moderne Browser) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-raus .45s cubic-bezier(.7,0,.3,1) both}::view-transition-new(root){animation:vt-rein .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-raus{to{opacity:0;transform:scale(.96);filter:blur(6px)}}@keyframes vt-rein{from{opacity:0;transform:translateY(30px)}}
header{view-transition-name:kopf}
/* Vorhang als Fallback + beim Laden */
.vorhang{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;grid-template-rows:repeat(5,1fr)}
.vorhang i{background:var(--deep);transform-origin:50% 0;transform:scaleY(0)}
.vorhang i:nth-child(2n){background:color-mix(in srgb,var(--deep) 85%,var(--p))}
/* Dunkle Bereiche öffnen sich kreisförmig */
section.dunkel{clip-path:circle(150% at 50% 0)}
/* Glitzerlinie unter Überschriften */
.kopf h2{position:relative;padding-bottom:.4rem}.kopf h2::after{content:"";position:absolute;left:50%;bottom:-.3rem;width:64px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--p2),var(--p));transform:translateX(-50%) scaleX(var(--sx,1))}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Fotos */
.kachel .motiv img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;top:-9%}
.vn.mitfoto .vor{filter:none}.vn.mitfoto .vor::after{display:none}
.foto-hero{position:absolute;inset:4% 2% 4% 8%;border-radius:32px;overflow:hidden;box-shadow:0 50px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12);transform:perspective(1200px) rotateY(-8deg) rotateX(3deg);animation:schwebe 9s ease-in-out infinite}
.foto-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{to{transform:scale(1.22) translate(-3%,-2%)}}
.foto-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 40%,rgba(0,0,0,.35))}
.foto-hero .bsp{position:absolute;right:12px;top:12px;z-index:2;font-size:.68rem;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:.25rem .55rem;border-radius:999px}
.buehne.mitfoto{aspect-ratio:4/5;max-width:470px}.buehne.mitfoto .orbit{display:none}
.buehne.mitfoto .k1{top:8%;left:-10%}.buehne.mitfoto .k2{top:46%;right:-10%}.buehne.mitfoto .k3{bottom:6%;left:-4%}
.hero-mini{position:absolute;left:-9%;bottom:24%;width:120px;height:120px;z-index:3;animation:schwebe 6s ease-in-out -2s infinite;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
@media(max-width:900px){.buehne.mitfoto{max-width:360px}.hero-mini{width:80px;height:80px;left:-4%}}

/* Signatur-Bildstil: eigener Foto-Look pro Firma (Duoton in Markenfarbe + Filmkorn + organische Form) */
:root{--korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.foto-hero img,.kachel .motiv img,.sk-bild img,.teaser-karte img{filter:grayscale(1) contrast(1.12) brightness(1.05)}
.foto-hero::before,.kachel .motiv::before,.sk-bild::before,.teaser-karte .tk-ton{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,var(--p2),var(--p) 45%,var(--dk));mix-blend-mode:color;opacity:.9;transition:opacity .7s}
.foto-hero::after{content:"";position:absolute;inset:0;z-index:2;background-image:var(--korn),linear-gradient(200deg,transparent 40%,rgba(0,0,0,.4));background-size:160px,cover}
.kachel .motiv::after{background-image:var(--korn),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));background-size:160px,cover;z-index:2}
.sk-bild::after{content:"";position:absolute;inset:0;z-index:2;background-image:var(--korn);background-size:160px;opacity:.6}
.foto-hero{border-radius:46% 54% 40% 60%/55% 42% 58% 45%;animation:schwebe 9s ease-in-out infinite,blob 16s ease-in-out infinite alternate}
@keyframes blob{0%{border-radius:46% 54% 40% 60%/55% 42% 58% 45%}50%{border-radius:60% 40% 55% 45%/42% 58% 42% 58%}100%{border-radius:40% 60% 48% 52%/58% 45% 55% 42%}}
.kachel:hover .motiv img,.teaser-karte:hover img{filter:none;transition:filter .7s}
.kachel:hover .motiv::before,.teaser-karte:hover .tk-ton{opacity:0}
.teaser-karte .tk-ton{z-index:-1}
@media(prefers-reduced-motion:reduce){.foto-hero{animation:none}}
.foto-hero .bsp{z-index:3;top:auto;bottom:16%;right:auto;left:50%;transform:translateX(-50%)}

/* Typo: ruhige Grotesk + Akzentwörter in kursiver Serifenschrift statt Farbverlauf */
.akzent,.akzent .wort{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--p)!important;-webkit-text-fill-color:currentColor;font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.dunkel .akzent,.hero .akzent,.seitenkopf .akzent,.cta-band .akzent{color:var(--p2)!important}
.v-frisch .hero .akzent,.v-sanft .hero .akzent,.v-eleganz .hero .akzent{color:var(--p)!important}
h1,h2{letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04}
/* Abschnittsköpfe: links, nummeriert, mit Linie – wie in einem Magazin */
main{counter-reset:abschnitt}
.kopf{text-align:left!important;max-width:none!important;margin:0 0 3.2rem!important;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:.6rem 4rem;align-items:end;padding-top:1.3rem;border-top:1px solid var(--line)}
.dunkel .kopf{border-top-color:rgba(255,255,255,.14)}
.kopf .eyebrow{grid-column:1/-1;justify-self:start!important;max-width:none!important;display:flex;justify-content:flex-start!important;text-align:left!important;gap:.8rem;align-items:center;font-size:.72rem;letter-spacing:.2em;color:var(--muted)!important;margin:0 0 1.6rem}
.dunkel .kopf .eyebrow{color:rgba(255,255,255,.55)!important}
.kopf .eyebrow::before{counter-increment:abschnitt;content:counter(abschnitt,decimal-leading-zero);color:var(--p);font-weight:800;letter-spacing:.05em}
.dunkel .kopf .eyebrow::before{color:var(--p2)}
.kopf h2::after,.kopf h2:after{display:none!important}
.kopf h2{grid-column:1;margin:0}
.kopf p{grid-column:2;margin:0!important;max-width:30rem;font-size:1rem;justify-self:end;align-self:end}
@media(max-width:800px){.kopf{grid-template-columns:1fr}.kopf p{grid-column:1;justify-self:start}}
/* Formen: weniger rund, keine Glows */
:root{--r:6px}
.knopf{border-radius:4px!important;letter-spacing:.01em}
.knopf.voll{background:var(--p)!important;box-shadow:none!important}
.knopf.voll:hover{background:var(--dk)!important;transform:none!important}
.dunkel .knopf.voll:hover,.hero .knopf.voll:hover{background:#fff!important;color:var(--dk)!important}
.knopf.glas{backdrop-filter:none;background:transparent!important}
.wert,.stimme,.box,.panel,.preis-karte{border-radius:6px!important;box-shadow:none!important}
.wert:hover{transform:none!important}
.pille{border-radius:4px!important;background:transparent!important;border:0!important;padding:0!important;font-size:.78rem!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700!important;opacity:.8}
.pille i{display:none!important}
.pille::before{content:"";width:28px;height:1px;background:currentColor;display:inline-block;margin-right:.6rem}
.licht,.cursor-licht,.maus-licht{display:none!important}
/* Wellen raus – klare Kanten wirken hochwertiger */
.welle{display:none!important}
/* Startbereich: großes Foto bis an den Rand statt schwebender Karten */
.hero{background:var(--deep)!important;color:#fff!important;overflow:hidden}
.v-frisch .hero,.v-sanft .hero,.v-eleganz .hero{background:var(--soft)!important;color:var(--ink)!important}
.hero .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:4rem!important;padding-top:5rem!important;padding-bottom:5rem!important;align-items:center;min-height:min(86vh,820px)}
.hero h1{text-transform:none!important;font-size:clamp(2.4rem,4.6vw,4.3rem)!important;line-height:1.0;letter-spacing:-.045em}
.hero h1 em{font-style:normal!important}
.buehne .orbit,.buehne .funke,.buehne .karte,.buehne .hero-mini{display:none!important}
.buehne.mitfoto{position:absolute!important;top:0;right:0;bottom:0;width:44vw;max-width:none!important;aspect-ratio:auto!important;margin:0!important}
.hero .wrap{position:static!important}
.foto-hero{inset:0!important;border-radius:0!important;transform:none!important;animation:none!important;box-shadow:none!important}
.foto-hero::after{background-image:var(--korn),linear-gradient(90deg,var(--deep),transparent 30%)!important;background-size:160px,cover!important}
.v-frisch .foto-hero::after,.v-sanft .foto-hero::after,.v-eleganz .foto-hero::after{background-image:var(--korn),linear-gradient(90deg,var(--soft),transparent 30%)!important}
.foto-hero .bsp{left:auto!important;right:1.2rem!important;bottom:1.2rem!important;transform:none!important;border-radius:3px!important}
.hero .wrap>div:first-child{max-width:600px;position:relative;z-index:2}
.hero .sterne{margin-top:2rem}
@media(max-width:900px){.buehne.mitfoto{position:relative!important;width:calc(100% + 2.8rem)!important;height:58vw;margin:0 -1.4rem!important;order:-1}.hero .wrap{grid-template-columns:1fr!important;min-height:0;padding-top:0!important;gap:2rem!important}.foto-hero::after{background-image:var(--korn),linear-gradient(0deg,var(--deep),transparent 40%)!important}.v-frisch .foto-hero::after,.v-sanft .foto-hero::after,.v-eleganz .foto-hero::after{background-image:var(--korn),linear-gradient(0deg,var(--soft),transparent 40%)!important}}
/* Laufband: große Kontur-Schrift */
.band{background:#f6f8fa!important;color:var(--ink)!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line);padding:1.6rem 0!important}
.band span{font-size:clamp(1.6rem,3.4vw,2.8rem)!important;letter-spacing:-.02em!important;text-transform:none!important;font-weight:700!important;color:transparent;-webkit-text-stroke:1px var(--ink)}
.band span:nth-child(3n+1){color:var(--ink);-webkit-text-stroke:0}
.band span svg{color:var(--p)!important;-webkit-text-stroke:0}
/* */
.v-warm .band{background:#fbf6ee!important}
/* Galerie-Kacheln: eckiger, Text klein in der Ecke */
.kachel{border-radius:4px!important}
/* Seitenkopf / Teaser / Abschluss (Mehrseiten) */
.teaser-karte{border-radius:4px!important;box-shadow:none!important}
.tk-pfeil{border-radius:2px!important}
.sk-titel{font-weight:700;letter-spacing:-.05em}
.cta-band::before{display:none}
.cta-band{text-align:left!important;border-top:1px solid rgba(255,255,255,.1)}
.cta-band .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:end}
.cta-band h2{font-size:clamp(2.6rem,7vw,6rem)!important;grid-row:span 2;margin:0}
.cta-band p{margin:0!important}.cta-band .reihe{justify-content:flex-start!important}
@media(max-width:800px){.cta-band .wrap{grid-template-columns:1fr}}
.tabliste .tab{border-radius:4px!important}
details{border-radius:4px!important}
.demo{letter-spacing:.06em}

/* Leistung: Duoton ist jetzt fest im Bild (beim Bauen) – keine teuren Filter/Mischmodi mehr im Browser */
.foto-hero img,.kachel .motiv img,.sk-bild img,.teaser-karte img{filter:none!important}
.foto-hero::before,.kachel .motiv::before,.sk-bild::before,.teaser-karte .tk-ton{display:none!important}
.foto-hero::after{background-image:linear-gradient(90deg,var(--deep),transparent 30%)!important;background-size:cover!important}
.v-frisch .foto-hero::after,.v-sanft .foto-hero::after,.v-eleganz .foto-hero::after{background-image:linear-gradient(90deg,var(--soft),transparent 30%)!important}
@media(max-width:900px){.foto-hero::after{background-image:linear-gradient(0deg,var(--deep),transparent 40%)!important}.v-frisch .foto-hero::after,.v-sanft .foto-hero::after,.v-eleganz .foto-hero::after{background-image:linear-gradient(0deg,var(--soft),transparent 40%)!important}}
.kachel .motiv::after{background-image:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))!important;background-size:cover!important}
.sk-bild::after{display:none}
.foto-hero img{animation:kenburns 24s ease-in-out infinite alternate;will-change:transform}
header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--deep)!important}
.v-eleganz header{background:#fff!important}

/* ===== Portfolio Runde 4 ===== */
.lader{position:fixed;inset:0;z-index:300;background:#0b0f1d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.2rem;color:#fff}
.lader .lg{font-weight:900;font-size:2.4rem;letter-spacing:.08em}.lader .lg span{color:var(--p2)}.lader .zahl2{font-size:.9rem;opacity:.6;font-variant-numeric:tabular-nums}.lader .linie2{width:200px;height:2px;background:rgba(255,255,255,.12);overflow:hidden}.lader .linie2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--p2),var(--p))}
.quer{position:relative;z-index:2;background:#0b0f1d;color:#fff;overflow:hidden}.quer .spur{display:flex;gap:2rem;padding:0 6vw;width:max-content;align-items:center;height:100vh}
.quer .intro{width:34vw;min-width:320px;flex:none}.quer .intro h2{font-size:clamp(2.2rem,4.5vw,3.8rem)}.quer .intro p{color:rgba(255,255,255,.65);margin-top:1rem}
.qk{flex:none;width:44vw;min-width:380px;height:62vh;border-radius:28px;overflow:hidden;position:relative;background:#141a33;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.qk .vbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.qk-alt{position:absolute;top:0;left:0;width:1280px;height:1400px;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
.qk .lbl{position:absolute;left:1.2rem;bottom:1.2rem;z-index:2;background:rgba(10,14,28,.75);backdrop-filter:blur(8px);padding:.7rem 1.1rem;border-radius:14px;font-weight:800;display:flex;gap:.6rem;align-items:center}
.qk .lbl small{font-weight:600;opacity:.7}
.blob-m{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;background:radial-gradient(circle,var(--p),transparent 65%);top:0;left:0;transform:translate(-50%,-50%)}
@media(max-width:900px){.quer .spur{flex-direction:column;width:auto;height:auto;padding:4rem 1.4rem}.quer .intro,.qk{width:100%;min-width:0}.qk{height:420px}.qk .vbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.qk-alt{transform:scale(.3)}}

.hero h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.geraete{position:relative;height:520px}
.laptop{position:absolute;right:0;top:30px;width:560px;border-radius:16px;background:#1b1f2e;padding:12px 12px 26px;box-shadow:0 50px 100px -30px rgba(0,0,0,.7);transform:perspective(1400px) rotateY(-14deg) rotateX(6deg);animation:schwebe 8s ease-in-out infinite}
.laptop .schirm,.handy .schirm{position:relative;overflow:hidden;border-radius:8px;background:#fff}.laptop .schirm{height:330px}
.schirm .vbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.schirm iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none}
.laptop iframe{width:1280px;height:755px;transform:scale(.418)}
.handy{position:absolute;left:10px;bottom:0;width:200px;border-radius:30px;background:#11141f;padding:10px;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);transform:rotate(-6deg);animation:schwebe 7s ease-in-out -3s infinite}
.handy .schirm{height:390px;border-radius:22px}.handy iframe{width:390px;height:844px;transform:scale(.462)}
.galerie .tabliste{margin-bottom:1.4rem}.vorschau{display:grid;grid-template-columns:1.6fr 1fr;gap:1.2rem;align-items:stretch}
.fenster{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(10,24,38,.45)}
.fenster .leiste-o{display:flex;gap:6px;padding:10px 14px;background:#f1f3f7;border-bottom:1px solid var(--line)}.fenster .leiste-o i{width:10px;height:10px;border-radius:50%;background:#d5d9e2}
.fenster .schirm{position:relative;height:480px;overflow:hidden}.fenster iframe{position:absolute;top:0;left:0;width:1280px;height:1200px;border:0;transform:scale(.56);transform-origin:0 0}
.info{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.8rem;display:flex;flex-direction:column}.info h3{font-size:1.4rem;margin-bottom:.6rem}.info p{color:var(--muted)}.info ul{list-style:none;margin:1.2rem 0;display:grid;gap:.6rem;flex:1;align-content:start}.info li{display:flex;gap:.6rem}.info li svg{color:var(--p);flex:none;margin-top:3px}
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch}
.paket{background:#fff;border:1px solid var(--line);border-radius:24px;padding:2rem;display:flex;flex-direction:column;position:relative;transition:transform .35s,box-shadow .35s}
.paket:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,24,38,.4)}.paket.top{background:linear-gradient(160deg,#141a33,#0e1222);color:#fff;border:0;box-shadow:0 40px 80px -30px rgba(79,70,229,.6)}
.paket.top::before{content:"Am beliebtesten";position:absolute;top:-13px;left:2rem;background:linear-gradient(135deg,var(--p2),var(--p));color:#fff;font-size:.75rem;font-weight:800;padding:.3rem .8rem;border-radius:999px}
.paket .preis{font-size:3rem;font-weight:800;margin:.6rem 0 .2rem;letter-spacing:-.03em}.paket .preis small{font-size:1rem;font-weight:600;opacity:.6}.paket p.kurz{opacity:.7;font-size:.92rem}
.paket ul{list-style:none;margin:1.4rem 0 1.8rem;display:grid;gap:.6rem;flex:1}.paket li{display:flex;gap:.6rem;font-size:.93rem}.paket li svg{color:var(--p);flex:none;margin-top:3px}.paket.top li svg{color:var(--p2)}
.zusatz{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.1rem}.zusatz .box h3{font-size:1.1rem;margin-bottom:.4rem}.zusatz .box p{color:var(--muted);font-size:.93rem}
.vergleich{width:100%;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden}
.vergleich th,.vergleich td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);font-size:.95rem}.vergleich th{color:rgba(255,255,255,.6);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.vergleich td.wir{background:rgba(167,139,250,.08);font-weight:700}.vergleich tr:last-child td{border:0}.ja{color:#4ade80}.nein{color:#f87171}
@media(max-width:900px){.geraete{height:420px}.laptop{width:100%;right:0}.laptop .schirm{height:200px}.laptop iframe{transform:scale(.26)}.handy{width:150px}.handy .schirm{height:290px}.handy iframe{transform:scale(.34)}
 .vorschau,.pakete,.zusatz{grid-template-columns:1fr}.fenster .schirm{height:300px}.fenster iframe{transform:scale(.27)}.vergleich{font-size:.85rem}.vergleich th,.vergleich td{padding:.7rem}}

.artikel{max-width:760px;margin:0 auto;padding:4.5rem 1.4rem 5rem}
.artikel .brot{font-size:.8rem;color:var(--muted);margin-bottom:2rem}.artikel .brot a{color:var(--ink);text-decoration:none}
.artikel h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.03;letter-spacing:-.04em;margin-bottom:1.2rem}
.artikel .lead{font-size:1.15rem;color:var(--muted);padding-bottom:2rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem}
.artikel h2{font-size:1.5rem;margin:2.6rem 0 .8rem;display:flex;gap:.8rem;align-items:baseline}
.artikel h2 small{font-size:.75rem;color:var(--p);font-weight:800;letter-spacing:.1em}
.artikel p,.artikel li{font-size:1.04rem;line-height:1.75;color:#2a3442}
.artikel ul{padding-left:1.2rem;display:grid;gap:.5rem}
.artikel .cta{margin-top:3.5rem;padding:2rem;background:var(--deep);color:#fff;border-radius:6px;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.artikel .cta b{font-size:1.3rem}
.ratgeber-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ratgeber-karte{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .3s}
.ratgeber-karte:hover{border-color:var(--p)}.ratgeber-karte small{color:var(--p);font-weight:800;letter-spacing:.12em;font-size:.72rem}
.ratgeber-karte b{font-size:1.2rem;letter-spacing:-.02em}.ratgeber-karte span{color:var(--muted);font-size:.92rem}
@media(max-width:800px){.ratgeber-liste{grid-template-columns:1fr}}

.versprechen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.vs{padding:2rem 1.6rem 2rem 0;border-right:1px solid var(--line);margin-right:1.6rem}.vs:last-child{border-right:0;margin-right:0}
.vs-nr{font-size:.75rem;font-weight:800;color:var(--p);letter-spacing:.12em}.vs h3{font-size:1.25rem;margin:.8rem 0 .6rem;letter-spacing:-.02em}.vs p{color:var(--muted);font-size:.95rem;line-height:1.6}
@media(max-width:900px){.versprechen{grid-template-columns:1fr 1fr}.vs:nth-child(2){border-right:0}}
@media(max-width:560px){.versprechen{grid-template-columns:1fr}.vs{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}}