:root{--paper:#f1efec;--paper2:#e7e3de;--denim:#2b3646;--deep:#1c2431;--ink:#1b2029;--muted:#5d6470;--lilac:#8f7fc0;--lilac2:#b9abdc;--lsoft:#e3ddf1;--blush:#e3c2b3;--mint:#a8d5c2;--line:rgba(27,32,41,.12);--serif:"Instrument Serif",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;--r:22px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance}
p,li,dt,figcaption{text-wrap:pretty}
h2{font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:1}
h1 em,h2 em{font-style:italic;color:var(--lilac)}
h3{font-size:1.6rem;line-height:1.15}
.wrap{width:min(1240px,100% - 3rem);margin:0 auto}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac);margin:0 0 1.1rem}
.eyebrow-light{color:var(--lilac2)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200}.skip-link:focus{left:1rem;top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.7rem;border-radius:999px;font-weight:600;font-size:.96rem;text-decoration:none;border:1.5px solid transparent;transition:background-color .3s,color .3s,border-color .3s;will-change:transform;white-space:nowrap}
.btn-ink{background:var(--denim);color:#fff}.btn-ink:hover{background:var(--lilac)}
.btn-line{border-color:var(--denim);color:var(--denim)}.btn-line:hover{background:var(--denim);color:#fff}
.btn-light{background:#fff;color:var(--denim)}.btn-light:hover{background:var(--lsoft)}
.btn-line-light{border-color:rgba(255,255,255,.45);color:#fff}.btn-line-light:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:.6rem 1.1rem;font-size:.88rem}
a:focus-visible,button:focus-visible{outline:2px solid var(--lilac);outline-offset:3px}
/* Preloader: Farbmuster wie ein Lackfächer */
.preloader{position:fixed;inset:0;z-index:120;pointer-events:none;display:grid;place-items:center}
.pre-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.pre-cols i{background:var(--paper);margin-right:-1px}
.pre-swatches{position:relative;display:flex;gap:14px;align-items:flex-end;height:120px}
.pre-swatches span{width:34px;height:96px;border-radius:17px 17px 12px 12px;background:var(--c);box-shadow:inset 0 -14px 20px -12px rgba(0,0,0,.18)}
.js .pre-swatches span{transform:translateY(40px);opacity:0}
.pre-word{position:absolute;left:0;right:0;top:calc(50% + 86px);margin:0;text-align:center;font-family:var(--serif);font-size:1.7rem;color:var(--denim)}
.pre-word em{color:var(--lilac)}
.js .pre-word{opacity:0}
html:not(.js) .preloader,.force-visible .preloader{display:none}
/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background-color .35s,box-shadow .35s}
.nav.scrolled{background:rgba(241,239,236,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav-inner{width:min(1340px,100% - 3rem);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:76px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:.7rem}
.brand-mark{font-family:var(--serif);font-size:1.9rem;line-height:1;letter-spacing:.02em}
.brand-mark sup{font-size:.55em;color:var(--lilac);margin-left:1px}
.brand-sub{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:1.6rem}.nav-links a{text-decoration:none;font-weight:500;font-size:.93rem;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--lilac);transform:scaleX(0);transform-origin:left;transition:transform .3s}.nav-links a:hover::after{transform:scaleX(1)}
/* Hero */
.hero{padding:8.5rem 0 5rem;position:relative;overflow:hidden}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.hero-kicker{display:flex;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 1.6rem}
.hero-kicker .dot{width:10px;height:10px;border-radius:50%;background:var(--lilac)}
.hero h1{font-size:clamp(3.6rem,8.4vw,8rem);line-height:.92;letter-spacing:-.025em;margin-bottom:2rem}
.line-mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.08em}.line{display:block}
.js .line{opacity:0;transform:translateY(105%)}
.hero-lead{max-width:34rem;color:var(--muted);font-size:1.1rem;margin:0 0 2.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.8rem}
.hero-proof{list-style:none;margin:0;padding:1.4rem 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:2.6rem}
.hero-proof li{display:flex;flex-direction:column}
.hero-proof strong{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.05}
.hero-proof span{font-size:.85rem;color:var(--muted)}
.js .hero-kicker,.js .hero-lead,.js .hero-actions,.js .hero-proof,.js .hero-badge,.js .hero-mini{opacity:0;transform:translateY(20px)}
.hero-visual{position:relative;padding-left:2.5rem}
.hero-media{margin:0;border-radius:200px 200px var(--r) var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--paper2)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.js .hero-media{clip-path:inset(50% 0% 50% 0% round 200px 200px 22px 22px)}
.js .hero-media img{transform:scale(1.14)}
.hero-mini{position:absolute;left:-1rem;bottom:3.5rem;width:30%;margin:0;border-radius:999px 999px 18px 18px;overflow:hidden;border:6px solid var(--paper);box-shadow:0 24px 50px -24px rgba(28,36,49,.55)}
.hero-mini img{aspect-ratio:3/4;object-fit:cover;width:100%}
.hero-badge{position:absolute;right:-1rem;top:2.5rem;margin:0;background:var(--denim);color:#fff;border-radius:16px;padding:.9rem 1.15rem;font-size:.86rem;line-height:1.3}
.hero-badge span{display:block;font-family:var(--serif);font-size:1.4rem}
/* Marquee */
.marquee{background:var(--denim);color:#fff;overflow:hidden;padding:1.15rem 0}
.marquee-track{display:flex;align-items:center;gap:2.2rem;width:max-content;font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.3rem);white-space:nowrap}
.marquee-track i{width:16px;height:30px;border-radius:8px 8px 6px 6px;background:var(--lilac2);flex:none}
.marquee-track i:nth-of-type(3n+2){background:var(--mint)}.marquee-track i:nth-of-type(3n){background:var(--blush)}
/* Trust */
.trust{padding:7.5rem 0 6.5rem}
.trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:start}
@media (min-width:961px){.trust-head,.prices-side,.faq-side,.steps-head,.team-head{position:sticky;top:7rem}}
.trust-text{font-size:1.18rem;color:#333a46;margin:0 0 2.6rem;max-width:40rem}
.trust-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.trust-list li{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;padding:1.6rem 0;border-top:1px solid var(--line)}
.trust-list li:last-child{border-bottom:1px solid var(--line)}
.t-num{font-family:var(--serif);font-size:1.5rem;color:var(--lilac);line-height:1.2}
.trust-list h3{font-size:1.45rem;margin-bottom:.35rem}
.trust-list p{margin:0;color:var(--muted)}
/* Work */
.work{padding:2rem 0 6rem}
.work-head{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:end;margin-bottom:3rem}
.work-note{color:var(--muted);margin:0;max-width:30rem}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem}
.w{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--paper2)}
.w img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.w:hover img{transform:scale(1.045)}
.w figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(241,239,236,.92);backdrop-filter:blur(6px);border-radius:999px;padding:.35rem .85rem;font-size:.8rem;font-weight:600}
.work-grid{grid-auto-rows:clamp(260px,30vw,430px)}
.w1{grid-column:span 5}.w2{grid-column:span 3}.w3{grid-column:span 4}
.w4,.w5,.w6{grid-column:span 4}
.w7{grid-column:span 3}.w8{grid-column:span 5}.w9{grid-column:span 4}
/* Prozess Band */
.process-strip{overflow:hidden;padding:0 0 6.5rem}
.strip-track{display:flex;gap:1rem;width:max-content}
.strip-track img{height:clamp(220px,26vw,340px);width:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
/* Preise */
.prices{background:var(--deep);color:#fff;padding:7rem 0;border-radius:36px 36px 0 0}
.prices-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4.5rem;align-items:start}
.prices-side h2 em{color:var(--lilac2)}
.prices-side p{color:rgba(255,255,255,.75);margin:1.4rem 0 2rem;max-width:28rem}
.price-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.pcard{background:#252f3f;border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:1.8rem}
.pcard-wide{grid-column:1/-1}
.pcard header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem}
.pcard h3{font-size:1.9rem}
.swatch{width:18px;height:34px;border-radius:9px 9px 7px 7px;background:var(--c)}
.pcard dl{margin:0;display:grid}
.pcard dl div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.1)}
.pcard dt{color:rgba(255,255,255,.82);font-size:.95rem}
.pcard dd{margin:0;font-weight:700;white-space:nowrap}
.pnote{margin:1rem 0 0;font-size:.85rem;color:var(--lilac2);font-weight:600}
.ptags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.ptags li{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.45rem 1rem;font-size:.92rem}
/* Ablauf */
.steps{padding:7rem 0 6.5rem}
.steps .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:4.5rem;align-items:start}
.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.steps-list li{position:relative;background:#fff;border-radius:var(--r);padding:2rem 2rem 2rem 7rem;border:1px solid var(--line)}
.s-num{position:absolute;left:2rem;top:1.6rem;font-family:var(--serif);font-size:3rem;line-height:1;color:var(--lilac)}
.steps-list h3{margin-bottom:.4rem}
.steps-list p{margin:0;color:var(--muted)}
.s-link{display:inline-block;margin-top:.8rem;font-weight:700;color:var(--denim)}
/* Studios */
.studios{padding:2rem 0 6rem}
.studios-head{margin-bottom:3.5rem}
.studio-row{display:grid;grid-template-columns:1.25fr .75fr;gap:4rem;align-items:center;margin-bottom:5rem}
.studio-row-rev{grid-template-columns:.75fr 1.25fr}
.studio-row-rev .studio-img{order:2}
.studio-row-rev .studio-copy{order:1;justify-self:end}
.studio-img{margin:0;border-radius:var(--r);overflow:hidden}
.studio-img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.studio-img-tall img{aspect-ratio:16/10;object-position:50% 70%}
.studio-copy{max-width:30rem}
.studio-copy h3{font-size:2.6rem;margin-bottom:1rem}
.studio-copy p{color:var(--muted);margin:0 0 1rem}
.studio-copy .names{color:var(--ink);font-weight:600}
.studio-copy .addr{color:var(--ink)}
.studio-copy a{font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--lilac2)}
.team{display:grid;grid-template-columns:.3fr 1fr;gap:3rem;align-items:start}
.team-head h3{font-size:2.2rem;margin-bottom:.4rem}
.team-head p{color:var(--muted);margin:0}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.team-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.team-grid img:nth-child(even){margin-top:1.6rem}
/* FAQ */
.faq{padding:6rem 0;background:var(--paper2)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:4.5rem;align-items:start}
.faq-img{margin:2rem 0 0;border-radius:999px 999px var(--r) var(--r);overflow:hidden;max-width:300px}
.faq-img img{aspect-ratio:4/5;object-fit:cover;width:100%}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;background:none;border:0;padding:1.5rem 0;font:inherit;font-family:var(--serif);font-size:1.55rem;text-align:left;color:var(--ink);cursor:pointer}
.plus{position:relative;width:18px;height:18px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--denim);transition:transform .35s}
.plus::after{transform:rotate(90deg)}
.faq-item.open .plus::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.faq-a>p{overflow:hidden;margin:0;color:var(--muted);max-width:44rem}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a>p{padding-bottom:1.5rem}
/* Kontakt */
.contact{background:var(--denim);color:#fff;padding:7rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:start}
.contact h2 em{color:var(--lilac2)}
.contact-copy p{color:rgba(255,255,255,.78);margin:1.4rem 0 2rem;max-width:30rem}
.contact-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.socials{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.2rem!important}
.socials a{color:#fff;font-weight:600}
.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ccard{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:1.6rem}
.ccard h3{font-size:1.7rem;margin-bottom:.6rem}
.ccard p{margin:0 0 .8rem;font-size:.95rem}
.ccard a{font-weight:600}
.map-link{display:inline-block;color:var(--lilac);font-weight:700}
.ccard-hours{grid-column:1/-1}
.ccard dl{margin:0}
.ccard dl div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line)}
.ccard dd{margin:0;font-weight:600}
.ccard .small{font-size:.85rem;color:var(--muted);margin:.6rem 0 0}
/* Footer */
.footer{background:var(--deep);color:rgba(255,255,255,.7);padding:2.2rem 0;font-size:.85rem}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}
.footer p{margin:0}
.f-brand{font-family:var(--serif);font-size:1.3rem;color:#fff}.f-brand span{color:var(--lilac2)}
.credit{font-size:.78rem}
/* Reveal */
.js .reveal{opacity:0}
.force-visible .reveal,.force-visible .line,.force-visible .hero-kicker,.force-visible .hero-lead,.force-visible .hero-actions,.force-visible .hero-proof,.force-visible .hero-badge,.force-visible .hero-mini{opacity:1!important;transform:none!important}
.force-visible .hero-media{clip-path:none!important}.force-visible .hero-media img{transform:none!important}
@media (prefers-reduced-motion:reduce){.js .reveal,.js .line,.js .hero-kicker,.js .hero-lead,.js .hero-actions,.js .hero-proof,.js .hero-badge,.js .hero-mini{opacity:1;transform:none}.js .hero-media{clip-path:none}.js .hero-media img{transform:none}.preloader{display:none}.btn,.faq-a,.w img{transition:none}}
/* Responsive */
@media (max-width:1180px){.nav-links{gap:1.1rem}.nav-links a{font-size:.88rem}}
@media (max-width:1040px){.nav-links{display:none}}
@media (max-width:960px){
.hero-grid,.trust-grid,.work-head,.prices-grid,.steps .wrap,.faq-grid,.contact-grid,.team{grid-template-columns:1fr;gap:2.6rem}
.hero{padding-top:7rem}
.hero-visual{padding-left:0;max-width:520px}
.studio-row,.studio-row-rev{grid-template-columns:1fr;gap:2rem;margin-bottom:3.5rem}
.studio-row-rev .studio-img{order:1}.studio-row-rev .studio-copy{order:2;justify-self:start}
.work-grid{grid-template-columns:repeat(2,1fr)}
.work-grid{grid-auto-rows:auto}
.w1,.w2,.w3,.w4,.w5,.w6,.w7,.w8,.w9{grid-column:auto;grid-row:auto;aspect-ratio:4/5}
.w1{grid-column:1/-1;aspect-ratio:4/3}
.faq-img{display:none}
}
@media (max-width:600px){
body{font-size:16.5px}
.wrap,.nav-inner{width:calc(100% - 2.4rem)}
.brand-sub{display:none}
.hero h1{font-size:clamp(3.2rem,15vw,4.6rem)}
.hero-proof{gap:1.4rem}.hero-proof strong{font-size:1.6rem}
.hero-badge{right:.5rem;top:1rem}
.hero-mini{left:-.4rem;width:34%}
.price-cards,.contact-cards{grid-template-columns:1fr}
.pcard dl div{flex-direction:column;gap:.15rem}
.steps-list li{padding:5rem 1.5rem 1.6rem}
.s-num{left:1.5rem;top:1.4rem}
.team-grid{grid-template-columns:repeat(2,1fr)}
.work-grid{gap:.8rem}
.w figcaption{left:.6rem;bottom:.6rem;font-size:.72rem}
.faq-q{font-size:1.3rem}
.trust,.steps,.prices,.contact{padding:5rem 0}
}
#nl-badge-frame,[id*="netlify-badge"],iframe[src*=".netlify/scripts/hud"]{display:none!important}