@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --cream:#FDF6F0;--rose:#E7D8D1;--white:#fff;--ink:#1E2322;--muted:#5A534E;--accent:#8A4A35;
  --line:rgba(30,35,34,.16);
  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --text:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --out:cubic-bezier(.23,1,.32,1);--inout:cubic-bezier(.77,0,.175,1);
  --pad:clamp(20px,5vw,72px);--max:1240px;--r:22px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 clamp(17px,1.1vw + 12px,19px)/1.65 var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.04;letter-spacing:-.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.4vw,5.6rem)}
h2{font-size:clamp(2rem,3.8vw,3.3rem)}
h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(64px,10vw,140px)}
.sec.tint{background:var(--rose)}
.lead{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.25;max-width:34ch;margin-bottom:1em}
.sub{font-size:clamp(1.1rem,1.4vw,1.3rem);color:var(--muted);max-width:44ch}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.82rem;letter-spacing:.04em}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:8px;z-index:100}
.skip:focus{top:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--ink);color:var(--cream);font:600 1rem/1 var(--text);text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;transition:transform 160ms var(--out),background-color 200ms ease,color 200ms ease}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size 200ms var(--out),color 200ms ease}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--accent)}}

/* Header */
.hd{position:sticky;top:0;z-index:50;background:rgba(253,246,240,.94);border-bottom:1px solid var(--line)}
@supports (backdrop-filter:blur(8px)){.hd{background:rgba(253,246,240,.86);backdrop-filter:blur(10px)}}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.logo{display:block;flex:none}
.logo img{height:60px;width:60px;object-fit:contain}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.nav a,.nav .sbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;border-radius:999px;background:none;border:0;cursor:pointer;font-family:var(--text);transition:background-color 160ms ease}
@media (hover:hover) and (pointer:fine){.nav a:hover,.nav .sbtn:hover{background:var(--rose)}}
.nav [aria-current="page"]{background:var(--rose)}
.has-sub{position:relative;display:flex;align-items:center}
.has-sub .sbtn{padding:0 10px 0 2px;margin-left:-6px}
.sbtn svg{width:12px;height:12px;transition:transform 200ms var(--out)}
.sbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub-menu{position:absolute;top:100%;left:0;min-width:260px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:8px;flex-direction:column;align-items:stretch!important;gap:0!important;box-shadow:0 12px 30px rgba(30,35,34,.08);opacity:0;transform:scale(.96);transform-origin:top left;visibility:hidden;transition:opacity 160ms ease-out,transform 160ms var(--out),visibility 0s linear 160ms}
.sub-menu a{border-radius:10px}
.has-sub.open .sub-menu{opacity:1;transform:none;visibility:visible;transition-delay:0s}
@media (hover:hover) and (pointer:fine) and (min-width:921px){.has-sub:hover .sub-menu{opacity:1;transform:none;visibility:visible;transition-delay:0s}}
.burger{display:none;width:48px;height:48px;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background-color 120ms ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform 200ms var(--out)}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:920px){
  .burger{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1px solid var(--line);padding:8px var(--pad) 24px;display:none}
  .nav.open{display:block;animation:in 200ms var(--out)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a,.nav .sbtn{padding:0 4px;border-radius:0;border-bottom:1px solid var(--line);min-height:52px}
  .nav [aria-current="page"]{background:none;color:var(--accent)}
  .has-sub{flex-wrap:wrap}.has-sub>a{flex:1}.has-sub .sbtn{display:none}
  .sub-menu{position:static;opacity:1;transform:none;visibility:visible;box-shadow:none;border:0;background:none;padding:0 0 0 16px;width:100%;min-width:0}
}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Reveal */
.js .rv{opacity:0;transform:translateY(10px) scale(.985);transition:opacity 400ms var(--out),transform 400ms var(--out)}
.js .rv.in{opacity:1;transform:none}

/* Arch frames (Spiegel-Bogen) */
.arch{border-radius:999px 999px var(--r) var(--r);overflow:hidden;background:var(--rose);aspect-ratio:4/5;position:relative}
.arch img{width:100%;height:100%;object-fit:cover}
.arch.cut img{mix-blend-mode:multiply}
.frame{border-radius:var(--r);overflow:hidden;position:relative;background:var(--rose)}
.frame img{width:100%;height:100%;object-fit:cover}
.ph{display:grid;place-items:center;text-align:center;padding:16px;background:repeating-linear-gradient(135deg,var(--rose) 0 10px,#efe3dd 10px 20px);color:var(--muted);border:1px dashed var(--accent)}

/* Hero */
.hero{padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,120px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center}
.hero .arch{max-width:480px;justify-self:end;width:100%}
.hero.page .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
@media (max-width:820px){.hero .wrap,.hero.page .wrap{grid-template-columns:minmax(0,1fr)}.hero .arch{justify-self:start;max-width:360px;aspect-ratio:1/1;border-radius:999px 999px var(--r) var(--r)}}
.eyebrow{font:600 .8rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 1.4rem}

/* Intro */
.intro .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--pad)}
.intro p.big{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.28;max-width:30ch;margin:0}
@media (max-width:820px){.intro .wrap{grid-template-columns:minmax(0,1fr)}}

/* Services alternating */
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center;margin-top:clamp(48px,8vw,110px)}
.svc:nth-of-type(even) .frame,.svc.flip .frame{order:2}
.svc .frame{aspect-ratio:5/4}
.svc h3{margin-bottom:.4em}
@media (max-width:760px){.svc{grid-template-columns:minmax(0,1fr)}.svc:nth-of-type(even) .frame,.svc.flip .frame{order:0}}
.head2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad);align-items:end}
@media (max-width:760px){.head2{grid-template-columns:minmax(0,1fr)}}

/* Benefits */
.why .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.why .arch{position:sticky;top:110px;max-width:420px}
.rows{list-style:none;margin:0;padding:0}
.rows li{padding:28px 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows h3{margin-bottom:.3em}
.rows p{margin:0}
.rows.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,56px)}
.rows.two li:nth-last-child(2){border-bottom:1px solid var(--line)}
@media (max-width:820px){.why .wrap{grid-template-columns:minmax(0,1fr)}.why .arch{position:static;aspect-ratio:1/1}.rows.two{grid-template-columns:minmax(0,1fr)}.rows.two li:nth-last-child(2){border-bottom:0}}
.val{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:24px;align-items:baseline}
.val h3{margin:0}.val p{margin:0}
@media (max-width:640px){.val{grid-template-columns:minmax(0,1fr);gap:6px}}

/* Quotes */
.quotes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,6vw,72px) 24px;margin-top:clamp(40px,6vw,72px)}
.q{grid-column:span 7;display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:start}
.q:nth-child(2){grid-column:7/13}
.q:nth-child(3){grid-column:2/9}
.q .ph,.q .av{width:88px;height:88px;border-radius:50%;overflow:hidden;font-size:.7rem;line-height:1.2}
.q .av img{width:100%;height:100%;object-fit:cover}
.q blockquote{margin:0}
.q blockquote p{font-family:var(--display);font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.25;margin:0 0 .6em}
.q .full{margin:0 0 .8em}
.q cite{font-style:normal;font-weight:600;display:block}
.q .stars{width:96px;margin:6px 0 10px}
.q .tg{background:none;border:0;padding:0;min-height:44px;font:600 .95rem var(--text);color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.mark{display:inline-block;background:#fff;border:1px dashed var(--accent);color:var(--accent);padding:2px 10px;border-radius:6px;font:600 .85rem var(--text)}
@media (max-width:820px){.q,.q:nth-child(2),.q:nth-child(3){grid-column:1/-1}.q{grid-template-columns:64px minmax(0,1fr);gap:14px}.q .ph,.q .av{width:64px;height:64px}}

/* Ablauf */
.steps{list-style:none;margin:2rem 0 0;padding:0;max-width:68ch}
.steps li{padding:18px 0 18px 28px;border-top:1px solid var(--line);position:relative}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:"";position:absolute;left:0;top:30px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:820px){.split{grid-template-columns:minmax(0,1fr)}}
.draw{mix-blend-mode:multiply;width:100%;object-fit:cover;object-position:bottom}

/* Farbfaecher */
.fan{position:relative;width:min(100%,560px);aspect-ratio:1/.72;margin:0 auto}
.fan button{position:absolute;left:50%;bottom:4%;width:15%;height:78%;margin-left:-7.5%;transform-origin:50% 100%;border:6px solid #fff;border-radius:4px;cursor:pointer;padding:0;transform:rotate(var(--a));transition:transform 260ms var(--out),box-shadow 200ms ease;background:var(--c)}
.fan button[aria-checked="true"]{transform:rotate(var(--a)) translateY(-9%);box-shadow:0 10px 24px rgba(30,35,34,.18);z-index:5}
@media (hover:hover) and (pointer:fine){.fan button:hover:not([aria-checked="true"]){transform:rotate(var(--a)) translateY(-4%)}}
.fan button:focus-visible{outline-offset:2px;z-index:6}
.swatch{border-radius:var(--r);padding:clamp(24px,4vw,40px);min-height:200px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;background:var(--c,#C99B68);color:var(--t,#1E2322);transition:background-color 260ms ease,color 260ms ease}
.swatch .mono{margin:0}
.fanbox{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,64px);align-items:center}
@media (max-width:820px){.fanbox{grid-template-columns:minmax(0,1fr)}}

/* Preise */
.pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:2.5rem}
.card{background:var(--white);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:6px}
.card h3{margin:0}.card .dur{color:var(--muted);margin:0}
.card .price{font-family:var(--display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;margin:.3em 0 .1em}
.card p{margin:0 0 1em}.card .btn{margin-top:auto;align-self:flex-start}
.card.main{background:var(--ink);color:var(--cream);padding:clamp(28px,4vw,56px)}
.card.main .dur{color:#cfc5bd}
.card.main .price{font-size:clamp(4rem,8vw,6.5rem)}
.card.main .btn{background:var(--cream);color:var(--ink);border-color:var(--cream)}
@media (hover:hover) and (pointer:fine){.card.main .btn:hover{background:var(--rose);border-color:var(--rose);color:var(--ink)}}
.card.o1{order:1}.card.o2{order:2}.card.o3{order:3}.card.o4{order:4}
@media (max-width:820px){.pk{grid-template-columns:minmax(0,1fr)}.card.o1,.card.o2,.card.o3,.card.o4{order:0}.card.main{order:5!important}}

/* Form */
.formwrap{background:var(--rose)}
.fcard{background:var(--white);border-radius:28px;padding:clamp(24px,4vw,56px);max-width:760px}
.fcard h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.fg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.fg .full{grid-column:1/-1}
@media (max-width:560px){.fg{grid-template-columns:minmax(0,1fr)}}
.fld label,.fld legend{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px;padding:0}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid #bdaea6;border-radius:12px;background:var(--cream);font:inherit;color:var(--ink);transition:border-color 160ms ease,background-color 160ms ease}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);background:#fff}
.fld [aria-invalid="true"]{border-color:#A3261C}
.err{color:#A3261C;font-size:.9rem;margin:6px 0 0;min-height:0;max-width:none}
.err:empty{display:none}
.fld fieldset{border:0;padding:0;margin:0;min-width:0}
.chk{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;cursor:pointer}
.chk input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.chk span{line-height:1.4}
.tel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
.cc{position:relative}
.cc>button{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 12px;border:1.5px solid #bdaea6;border-radius:12px;background:var(--cream);font:inherit;cursor:pointer;color:var(--ink)}
.cc svg.fl{width:24px;height:16px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.cc ul{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:240px;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(30,35,34,.12);opacity:0;transform:scale(.96);transform-origin:top left;visibility:hidden;transition:opacity 160ms ease-out,transform 160ms var(--out),visibility 0s linear 160ms}
.cc.open ul{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.cc li{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:8px;cursor:pointer}
.cc li[aria-selected="true"],.cc li:hover{background:var(--rose)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fstat{margin-top:18px;padding:16px 18px;border-radius:12px;font-size:.98rem}
.fstat:empty{display:none}
.fstat.bad{background:#fbe9e7;color:#7d1d15}
.fstat.ok{background:#e8f1ea;color:#1f4d2b}
.fstat p{margin:0;max-width:none}
.fcard .btn[disabled]{opacity:.6;cursor:progress}
.spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:10px;animation:rot 700ms linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.fok{animation:in 300ms var(--out)}

/* Kontakt */
.kontakt .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,80px);align-items:start}
.kontakt .arch{position:sticky;top:110px;max-width:440px;justify-self:end;width:100%}
@media (max-width:900px){.kontakt .wrap{grid-template-columns:minmax(0,1fr)}.kontakt .arch{position:static;justify-self:start;max-width:320px;order:-1}}

/* Footer */
.ft{background:var(--ink);color:var(--cream);padding-block:clamp(48px,7vw,88px) 32px}
.ft a{color:var(--cream);text-decoration-color:rgba(253,246,240,.4)}
.ft a:hover{color:var(--rose)}
.ft .grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:36px}
.ft .logo-b{background:var(--cream);border-radius:16px;padding:8px;display:inline-block}
.ft .logo-b img{width:84px;height:84px}
.ft h2{font:600 .8rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#d9cbc3;margin:0 0 14px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:inline-flex;align-items:center;min-height:44px}
.ft .me{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--rose);margin-top:18px}
.ft p{max-width:32ch}
.ft .legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(253,246,240,.2);color:#d9cbc3;font-size:.9rem}
.ft .legal p{margin:0 0 .4em;max-width:none}
.ki-hinweis{min-height:0}
@media (max-width:860px){.ft .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:520px){.ft .grid{grid-template-columns:minmax(0,1fr)}}

.todo{background:#fff;border:1.5px dashed var(--accent);border-radius:var(--r);padding:24px;max-width:62ch}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:opacity 150ms ease}
  .nav.open,.fok{animation:none}
  .btn,.fan button,.sub-menu,.cc ul,.sbtn svg,.burger span::before,.burger span::after{transition-duration:.01ms!important}
  .btn:active{transform:none}
  .spin{animation-duration:2s}
}

/* ===== Erlebnis-Ebene ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms;animation-timing-function:ease-out}
.hd{view-transition-name:hd;transition:box-shadow 200ms ease-out}
.hd .wrap{transition:min-height 220ms var(--out)}
.logo img{transition:transform 220ms var(--out);transform-origin:left center}
.hd.sc{box-shadow:0 8px 28px -12px rgba(30,35,34,.18)}
.hd.sc .wrap{min-height:62px}
.hd.sc .logo img{transform:scale(.8)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Buttons: Fläche fährt von unten ein */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform 260ms var(--out)}
.btn.ghost::before{background:var(--ink)}
.card.main .btn::before{background:var(--rose)}
@media (hover:hover) and (pointer:fine){
 .btn:hover{background:var(--ink);border-color:var(--accent)}
 .btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--cream)}
 .btn:hover::before{transform:none}
}
.more::after{content:"\2192";margin-left:10px;transition:transform 200ms var(--out)}
@media (hover:hover) and (pointer:fine){.more:hover::after{transform:translateX(5px)}}

/* Bilder: Parallax, Maske, Zoom */
.arch img,.frame img{scale:var(--s,1.1);will-change:scale,translate;transition:scale 900ms var(--out)}
@media (hover:hover) and (pointer:fine){.frame:hover img{--s:1.17}}
.js .mk{clip-path:inset(12% 0 0 0);transition:clip-path 1000ms var(--out)}
.js .mk.in{clip-path:inset(0)}
.js .mk:not(.in) img{--s:1.32}
.js .wp{opacity:1;clip-path:inset(0 100% 0 0);transition:clip-path 1500ms var(--inout)}
.js .wp.in{clip-path:inset(0)}

/* Überschriften: Wort für Wort aus der Maske */
.js .sp .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .sp .w>span{display:inline-block;transform:translateY(112%);transition:transform 800ms var(--out);transition-delay:calc(var(--i)*55ms)}
.js .sp.in .w>span{transform:none}

/* Hero-Einlauf und Staffelung */
.js .hi{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--out),transform 700ms var(--out);transition-delay:calc(var(--d,0)*1ms)}
.js.ready .hi{opacity:1;transform:none}
.js .rv{transition-delay:calc(var(--d,0)*70ms)}
.steps li,.rows li{transition:background-color 200ms ease}

/* Karten */
.js .rv{transition:opacity 500ms var(--out),transform 500ms var(--out),translate 240ms var(--out),box-shadow 240ms ease-out}
@media (hover:hover) and (pointer:fine){
 .card:hover{translate:0 -6px;box-shadow:0 22px 40px -22px rgba(30,35,34,.35)}
 .rows li:hover h3{color:var(--accent)}
}
.rows h3{transition:color 200ms ease}
.price{font-variant-numeric:tabular-nums}

/* Farbfächer fächert sich auf */
.fan:not(.open) button{transform:rotate(0deg)!important}
.fan.spread button{transition:transform 800ms var(--out) calc(var(--k)*55ms),box-shadow 200ms ease}

@media (prefers-reduced-motion:reduce){
 .js .mk,.js .wp{clip-path:none;transition:none}
 .js .mk:not(.in) img{--s:1.1}
 .js .sp .w>span{transform:none;transition:none}
 .js .hi{opacity:1;transform:none;transition:none}
 .arch img,.frame img,.btn::before,.hd .wrap,.logo img{transition:none}
 .fan:not(.open) button{transform:rotate(var(--a))!important}
}

/* ===== Hover-Ebene (nur Maus) ===== */
.arch::after,.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);transform:translateX(-130%)}
.arch,.frame{cursor:default}
@media (hover:hover) and (pointer:fine){
 .arch:hover img{--s:1.17}
 .arch:hover::after,.frame:hover::after{transform:translateX(130%);transition:transform 900ms var(--out)}
 .svc:hover .frame img{--s:1.17}
 .svc:hover .frame::after{transform:translateX(130%);transition:transform 900ms var(--out)}
 .svc h3{transition:color 200ms ease}
 .svc:hover h3{color:var(--accent)}
 .svc:hover .more::after{transform:translateX(5px)}
 .svc:hover .more{color:var(--accent)}
 .q .av img{transition:scale 400ms var(--out)}
 .q:hover .av img{scale:1.12}
 .q .av{transition:box-shadow 240ms ease-out}
 .q:hover .av{box-shadow:0 0 0 4px var(--cream),0 0 0 5px var(--accent)}
 .draw{transition:clip-path 1500ms var(--inout),translate 400ms var(--out),rotate 400ms var(--out)}
 .draw:hover{translate:0 -6px;rotate:-.8deg}
 .ft li a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 240ms var(--out),color 200ms ease;text-decoration:none}
 .ft li a:hover{background-size:100% 1px}
 .ft .logo-b,.ft .me{transition:transform 300ms var(--out)}
 .ft .logo-b:hover{transform:rotate(-4deg) scale(1.05)}
 .ft .me:hover{transform:scale(1.08)}
 .logo:hover img{transform:scale(1.06) rotate(-3deg)}
 .hd.sc .logo:hover img{transform:scale(.86) rotate(-3deg)}
 .fan button{transition:transform 260ms var(--out),box-shadow 200ms ease}
 .fan button:hover:not([aria-checked="true"]){box-shadow:0 8px 18px rgba(30,35,34,.16)}
 .swatch:hover{transform:scale(1.015)}
 .chk:hover span{color:var(--accent)}
 .fld input:hover,.fld textarea:hover{border-color:var(--ink)}
}
.swatch{transition:background-color 260ms ease,color 260ms ease,transform 300ms var(--out)}
.logo:hover img{transition:transform 260ms var(--out)}
@media (prefers-reduced-motion:reduce){.arch::after,.frame::after{display:none}.draw:hover{translate:none;rotate:none}}

/* ===== Ergänzungen für die Unterseiten (nicht Teil des Startseiten-Entwurfs) ===== */
/* Korrektur: Die Kopfzeile änderte beim Scrollen ihre Höhe (76px auf 62px). Der Inhalt darunter sprang dadurch
   um 14px, und zwischen 20 und 35px Scrollweite flackerte die Seite (Schwelle wurde ständig neu über- und unterschritten).
   Die Höhe bleibt jetzt konstant, verkleinert werden nur Logo und Schatten wie im Entwurf. */
.hd.sc .wrap{min-height:76px}
/* Zeichnungen auf Rosé stehen frei, ohne Rahmen */
.draw{max-height:520px;object-fit:contain;object-position:center}
/* Bogenbild der Unterseiten */
.hero.page .arch{max-width:460px;justify-self:end;width:100%}
/* Kundin ohne Foto: Initiale in der Display-Schrift */
.q .ini{display:grid;place-items:center;background:var(--white);color:var(--accent);font-family:var(--display);font-size:2.2rem;line-height:1}
/* Rechtsseiten: lesbare Zeilenlänge, kleinere Zwischenüberschriften */
.legal .wrap>*{max-width:70ch}
.legal h1{font-size:clamp(1.7rem,8.4vw,4rem)}
.legal h2{font-size:clamp(1.35rem,2vw,1.7rem);margin-top:2em}
.legal ul{margin:0 0 1em;padding-left:1.2em}
.legal li{margin-bottom:.3em}
.legal .todo{margin-bottom:2rem}
.todo p{margin:0;max-width:none}
/* Noscript-Fallback ohne Layout-Sprung */
#site-header:not(.hd) nav ul{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:16px}

/* Vorschau-Hinweis (nur im Vorschau-Build, im Live-Build nicht vorhanden) */
.vorschau-band{position:fixed;left:12px;bottom:12px;z-index:60;background:var(--ink);color:var(--cream);font:600 .75rem/1.3 var(--text);letter-spacing:.04em;padding:8px 14px;border-radius:999px;opacity:.88;pointer-events:none;max-width:calc(100vw - 24px)}
@media print{.vorschau-band{display:none}}
/* Barrierefreiheit */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.h3s{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12;margin-bottom:.4em}


/* Formular: Auswahlkästchen. Die Regel ".fld label" aus dem Entwurf (display:block) hat ".chk" überstimmt, Kasten und Text standen untereinander. */
.fld .chk{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:8px 0;margin:0;font-weight:400;font-size:1rem;line-height:1.4;cursor:pointer}
.chk input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-content:center;width:24px;height:24px;margin:1px 0 0;border:1.5px solid #8f7f77;border-radius:7px;background:var(--cream);cursor:pointer;transition:background-color 160ms ease,border-color 160ms ease}
.chk input::after{content:"";width:12px;height:7px;margin-top:-2px;border-left:2.5px solid var(--cream);border-bottom:2.5px solid var(--cream);opacity:0;transform:rotate(-45deg) scale(.6);transition:transform 140ms var(--out),opacity 140ms ease}
.chk input:checked{background:var(--accent);border-color:var(--accent)}
.chk input:checked::after{opacity:1;transform:rotate(-45deg) scale(1)}
.chk input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.chk input[aria-invalid="true"]{border-color:#A3261C}
.fld fieldset{margin-bottom:.25rem}
.fld legend{margin-bottom:4px}

/* Schnellkontakt unten (nur Handy und Tablet): WhatsApp und E-Mail auf jeder Seite */
.kbar{display:none}
@media (max-width:920px){
  .kbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:rgba(253,246,240,.99);border-top:1px solid var(--line)}
  .kbar a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;font:600 1rem/1 var(--text);text-decoration:none;border:1.5px solid var(--ink);transition:transform 160ms var(--out),background-color 200ms ease}
  .kbar a:active{transform:scale(.97)}
  .kbar__wa{background:var(--ink);color:var(--cream)}
  .kbar__mail{background:var(--cream);color:var(--ink)}
  /* Platz für die feste Leiste liegt im dunklen Fuß, kein heller Streifen unter dem Footer */
  .ft{padding-bottom:calc(32px + 84px + env(safe-area-inset-bottom))}
}
@media print{.kbar{display:none}}
/* Zwei rosa Flächen hintereinander (Sektion mit Fläche, dann Formular): Abstand nicht doppelt */
.sec.tint+.sec.formwrap{padding-top:0}

/* ===== Feinschliff nach Sichtprüfung 08.10.2026 ===== */

/* Buttons: Mehrzeilige Texte sauber setzen, Pille bleibt gleich hoch */
.btn{line-height:1.25;padding:14px 28px;text-align:center;text-wrap:balance}

/* Preise: Ziffern als Versalziffern (die 1 wirkte als großes I), Komplett-Paket oben quer über alle drei */
.price{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
@media (min-width:821px){
  .pk{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
  .card.main{grid-column:1/-1;grid-row:auto;order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(32px,4vw,56px)}
  .card.main h3,.card.main .dur,.card.main p:not(.price):not(.dur){grid-column:1}
  .card.main .price{grid-column:2;grid-row:1/3;justify-self:end;margin:0}
  .card.main .btn{grid-column:2;grid-row:3;justify-self:end;align-self:end;margin-top:12px}
  .card.o1,.card.o2,.card.o3{grid-column:auto}
}
@media (max-width:820px){.card.main{order:-1!important}}

/* Kundenstimmen: statt Zickzack ein ruhiges Raster (drei Spalten ab 1100 px, darunter eine Spalte) */
.q .stars{filter:saturate(.55) brightness(.94)}
@media (min-width:821px) and (max-width:1099px){
  .quotes{grid-template-columns:minmax(0,1fr);gap:40px}
  .q,.q:nth-child(2),.q:nth-child(3){grid-column:1/-1;max-width:720px}
}
@media (min-width:1100px){
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px}
  .q,.q:nth-child(2),.q:nth-child(3){grid-column:auto;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start}
  .q blockquote p{font-size:clamp(1.3rem,1.5vw,1.55rem)}
}

/* Abstände: Einstieg direkt unter dem Hero enger, Button unter der Leistungsliste zentriert */
.sec.intro{padding-top:clamp(8px,2vw,32px)}
.svc~.btns{justify-content:center;margin-top:clamp(40px,6vw,80px)}
.hero .sub,.kontakt .sub{text-wrap:balance}
.split:has(.draw){align-items:center}

/* Footer: E-Mail bricht nicht mehr mitten im Namen, Porträt steht neben dem Namen */
@media (min-width:1180px){.ft .grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.9fr)}}
@media (max-width:1179px) and (min-width:700px){.ft .grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:699px){.ft .grid{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px){.ft a[href^="mailto:"]{white-space:nowrap}}
.ft .brandrow{display:flex;align-items:center;gap:16px;margin-top:20px}
.ft .brandrow .me{margin:0;flex:none}
.ft .brandrow p{margin:0;max-width:none;line-height:1.5;font-size:.95rem}

/* Formular mit Kontaktspalte (keine leere Fläche rechts neben der Karte) */
.formgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.direkt{position:sticky;top:110px;max-width:340px}
.direkt .arch{max-width:300px;aspect-ratio:4/5}
.direkt h3{margin:1.5rem 0 .4rem}
.direkt ul{list-style:none;margin:0;padding:0}
.direkt li a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){.direkt li a:hover{color:var(--accent)}}
@media (max-width:980px){
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .direkt{position:static;max-width:none;display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:20px;align-items:center;padding:4px 4px 0}
  .direkt .arch{grid-row:1/3;aspect-ratio:1/1;max-width:none;border-radius:999px}
  .direkt h3{margin:0 0 .2rem;align-self:end}
  .direkt ul{align-self:start}
}

/* Farbfächer: Farbfeld kompakter, Hexwert lesbar */
.swatch{min-height:140px}
.swatch .mono{font-size:.95rem}

/* Kontaktseite mobil: Foto kleiner, damit Überschrift und Formular früher erscheinen */
@media (max-width:900px){.kontakt .arch{max-width:260px;aspect-ratio:1/1}}

/* Vorschau-Schild: auf dem Handy ein schmaler Streifen am Seitenanfang statt einer Pille über dem Inhalt */
@media (max-width:920px){.vorschau-band{position:static;display:block;max-width:none;border-radius:0;text-align:center;opacity:1;padding:8px 14px}}

@media (max-width:420px){
  .direkt{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .direkt .arch{grid-row:auto;width:112px;margin-bottom:8px}
  .direkt h3{align-self:auto}
}

/* Sprunglink bleibt auch unterhalb des Vorschau-Streifens unsichtbar */
.skip{top:-140px}

/* Einwilligungs-Banner (Statistik): gleich große Buttons, unter 921 px als Leiste am unteren Rand über der Schnellkontakt-Leiste */
.cb{position:fixed;left:16px;bottom:16px;z-index:90;width:min(440px,calc(100vw - 32px));background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:22px 24px 20px;box-shadow:0 18px 40px -18px rgba(30,35,34,.35)}
.cb[hidden]{display:none}
.cb__t{font:500 1.5rem/1.1 var(--display);margin:0 0 .5rem;max-width:none}
.cb p.cb__d{margin:0 0 1rem;font-size:.95rem;line-height:1.55;max-width:none}
.cb__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cb .btn{min-height:48px;padding:12px 16px;font-size:.95rem}
@media (max-width:920px){.cb{left:0;right:0;bottom:0;width:auto;border-radius:22px 22px 0 0;border-left:0;border-right:0;border-bottom:0;padding:20px var(--pad) calc(18px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:no-preference){.cb{animation:in 260ms var(--out)}}
.linkbtn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.ft .linkbtn{color:var(--cream)}
@media (hover:hover) and (pointer:fine){.ft .linkbtn:hover{color:var(--rose)}}

/* Kennzeichnung KI-erzeugter Bilder (Art. 50 KI-VO, § 5 UWG): Textelement im DOM am unteren Bildrand, Kontrast über 4,5:1 */
:has(>.ki-bildhinweis){position:relative}
.ki-bildhinweis{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 14px;background:rgba(30,35,34,.84);color:#fff;font:500 .75rem/1.35 var(--text);text-align:center}

/* Schwebender Kontakt-Button: auf jeder Seite außer der Kontaktseite, führt direkt zum Formular */
.fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:44;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--accent);color:var(--cream);font:600 1rem/1 var(--text);letter-spacing:.01em;text-decoration:none;box-shadow:0 10px 28px rgba(30,35,34,.22);transition:box-shadow 200ms var(--out),background-color 200ms ease}
.fab svg{flex:none}
.fab:hover{background:var(--ink);box-shadow:0 14px 34px rgba(30,35,34,.28)}
.fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .fab{animation:fab-schweben 3.4s ease-in-out infinite}
  .fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0;pointer-events:none;animation:fab-ring 3.4s ease-out infinite}
  .fab:hover,.fab:focus-visible{animation-play-state:paused}
}
@keyframes fab-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fab-ring{0%,55%{opacity:0;transform:scale(1)}65%{opacity:.55}100%{opacity:0;transform:scale(1.22,1.45)}}
/* Auf Handy und Tablet über der festen Schnellkontakt-Leiste */
@media (max-width:920px){.fab{bottom:calc(84px + env(safe-area-inset-bottom));right:var(--pad)}}
@media print{.fab{display:none}}