/* ============================================================
   TRUECOAT PAINTING — "The Studio Coat" design system
   Editorial paint-atelier: warm paper, ink, one LIVING accent.
   The accent is the visitor's chosen paint color (fan deck) —
   picking a swatch repaints the whole site. Fonts: Instrument
   Serif (display) · Archivo (grotesque) · Space Mono (spec).
   ============================================================ */
:root{
  /* living paint color (JS swaps these from the fan deck) */
  --paint:#31513f;            /* No.02 Cascade Pine (default) */
  --paint-deep:#243d2f;
  --paint-soft:#e3e9e2;       /* pale tint of paint for washes */
  --on-paint:#f6f3ec;         /* text on paint */
  /* fixed system */
  --paper:#f5f1e8;            /* warm gallery paper */
  --paper-2:#ede8db;          /* deeper paper */
  --card:#fbf9f3;
  --ink:#191512;              /* warm near-black */
  --ink-2:#4c453c;            /* muted body */
  --ink-3:#7c7466;            /* captions */
  --line:#dcd5c6;
  --line-2:#c9c1af;
  --gold:#b98a2f;             /* review stars only */
  --ff-d:"Instrument Serif",Georgia,serif;
  --ff-g:"Archivo",system-ui,sans-serif;
  --ff-m:"Space Mono",monospace;
  --sh-1:0 1px 2px rgba(25,21,18,.06),0 6px 24px -12px rgba(25,21,18,.22);
  --sh-2:0 2px 6px rgba(25,21,18,.08),0 24px 48px -20px rgba(25,21,18,.3);
  --r:14px;
  --ease:cubic-bezier(.19,1,.22,1);
  --wrap:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:var(--paint);color:var(--on-paint)}
body{font-family:var(--ff-g);color:var(--ink);background:var(--paper);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
/* paper grain over everything, very quiet */
body::before{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,.dsp{font-family:var(--ff-d);font-weight:400;line-height:1.04;letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--paint)}
h4{font-family:var(--ff-g);font-weight:700;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{padding:clamp(64px,9vw,120px) 0;position:relative}

/* ---- spec chips (masking-tape mono labels) ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);padding:7px 14px 6px;border-radius:3px;position:relative;transform:rotate(-.6deg)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--paint);flex:none}
.eyebrow.c-center{transform:rotate(.4deg)}
.sec-head{max-width:820px;margin-bottom:clamp(34px,5vw,56px)}
.sec-head h2{font-size:clamp(2.4rem,5.4vw,4.2rem);margin:18px 0 14px}
.sec-head p{color:var(--ink-2);font-size:1.1rem;max-width:58ch}
.sec-head.c-center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.c-center p{margin-left:auto;margin-right:auto}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--paper);font-weight:600;font-size:1rem;letter-spacing:.01em;padding:15px 26px;border-radius:9px;border:1.5px solid var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.btn::before{content:"";width:13px;height:13px;border-radius:3px 3px 3px 8px;background:var(--paint);flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .35s var(--ease),background .5s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:hover::before{transform:rotate(90deg)}
.btn-cool,.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-cool:hover,.btn-ghost:hover{border-color:var(--ink);background:var(--card)}
.btn-dark{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.btn-dark::before{background:var(--paper)}
.btn-dark:hover{background:var(--paint-deep)}
.btn-lg{padding:18px 32px;font-size:1.06rem}
.btn.full{width:100%;justify-content:center}

/* ---- preview + top bars ---- */
.preview-bar{background:var(--ink);color:#cfc8bb;text-align:center;font-size:.83rem;padding:9px 14px;position:relative;z-index:60}
.preview-bar b{color:var(--paper)}
.preview-bar a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.topbar{background:var(--paint);color:var(--on-paint);text-align:center;font-size:.82rem;letter-spacing:.02em;padding:7px 14px;transition:background .5s}
.topbar b{font-weight:700}
.topbar .dot{opacity:.55;margin:0 9px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--ff-g);font-weight:800;font-size:1.22rem;letter-spacing:0}
.logo .mark{width:38px;height:38px;border-radius:8px 8px 8px 16px;background:var(--ink);display:grid;place-items:center;box-shadow:inset 0 -10px 0 rgba(0,0,0,.14);flex:none}
.logo .mark svg{width:20px;height:20px;fill:none;stroke:#f6f3ec;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo small{display:block;font-family:var(--ff-m);font-weight:400;font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-top:1px}
.mnav{display:flex;align-items:center;gap:4px}
.mnav>a,.drop>span{display:inline-block;padding:10px 14px;font-weight:500;font-size:.98rem;color:var(--ink-2);border-radius:8px;cursor:pointer;transition:color .2s,background .2s}
.mnav>a:hover,.drop:hover>span,.mnav>a.on,.drop>span.on{color:var(--ink);background:var(--paper-2)}
.drop{position:relative}
.drop>span::after{content:"";display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:8px;transition:transform .25s}
.drop:hover>span::after{transform:rotate(225deg) translateY(-1px)}
.drop-menu{position:absolute;top:calc(100% + 10px);left:-12px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-2);padding:10px;display:grid;grid-template-columns:repeat(2,270px);gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease)}
.drop:hover .drop-menu{opacity:1;visibility:visible;transform:none}
.drop-menu a{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:10px;transition:background .2s}
.drop-menu a:hover{background:var(--paper-2)}
.drop-menu .di{width:34px;height:34px;flex:none;border-radius:8px 8px 8px 14px;background:var(--paint-soft);display:grid;place-items:center;transition:background .5s}
.drop-menu .di svg{width:18px;height:18px;fill:none;stroke:var(--paint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop-menu a.warm .di{background:var(--paper-2)}
.drop-menu .dt{display:block;font-weight:600;font-size:.95rem}
.drop-menu .dd{display:block;font-size:.8rem;color:var(--ink-3)}
.drop-menu .dm-all{grid-column:1/-1;justify-content:center;font-family:var(--ff-m);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paint);border-top:1px dashed var(--line);border-radius:0;margin-top:6px;padding-top:14px}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.98rem;letter-spacing:.01em}
.nav-phone svg{width:17px;height:17px;fill:none;stroke:var(--paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ============ HERO — editorial split + Color Studio ============ */
.hero{padding:clamp(48px,6vw,84px) 0 0;overflow:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(28px,3.4vw,58px);align-items:center;position:relative}
.hero-copy{padding-bottom:clamp(40px,6vw,80px)}
.hero .badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--paper-2);border:1px solid var(--line-2);padding:9px 16px;border-radius:3px;transform:rotate(-.8deg);box-shadow:var(--sh-1)}
.hero .badge i{width:8px;height:8px;border-radius:50%;background:var(--paint);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--paint) 45%,transparent)}55%{box-shadow:0 0 0 8px transparent}}
.hero h1{font-size:clamp(3.6rem,8.4vw,7.4rem);line-height:1.0;letter-spacing:-.018em;margin:26px 0 22px;max-width:13ch}
.hero h1 .swash{position:relative;white-space:nowrap}
.hero h1 .swash svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.34em;overflow:visible}
.hero h1 .swash svg path{fill:none;stroke:var(--paint);stroke-width:10;stroke-linecap:round;opacity:.9;stroke-dasharray:620;stroke-dashoffset:620;animation:swash 1.1s .5s var(--ease) forwards;transition:stroke .5s}
@keyframes swash{to{stroke-dashoffset:0}}
.hero .sub{font-size:1.2rem;color:var(--ink-2);max-width:50ch;line-height:1.6}
.hero .acts{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.hero .or{font-size:.98rem;color:var(--ink-3)}
.hero .or b{color:var(--ink);font-weight:700}
.hero .trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero .trust .ti{position:relative;padding-left:16px}
.hero .trust .ti::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--paint);opacity:.85;transition:background .5s}
.hero .trust .tn{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.hero .trust .tn .stars{color:var(--gold);letter-spacing:.05em}
.hero .trust .tl{display:block;font-size:.8rem;color:var(--ink-3);margin-top:2px}
.hero{overflow:hidden}

/* ---- Color Studio card (signature tool) ---- */
.studio{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-2);overflow:hidden;position:relative}
.studio .room{position:relative;aspect-ratio:16/10.6;overflow:hidden;background:var(--paper-2)}
.studio .room img{width:100%;height:100%;object-fit:cover}
.studio .wallpaint,.studio .room .tag-live{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--ink) 82%,transparent);color:var(--paper);backdrop-filter:blur(6px);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:4px}
.studio .room .tag-live i{width:7px;height:7px;border-radius:50%;background:#7fd77f;animation:pulse 2s infinite}
.studio .room .readout{position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--sh-1)}
.studio .readout .swn{font-family:var(--ff-d);font-size:1.3rem;line-height:1.1}
.studio .readout .swno{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.studio .readout .hex{font-family:var(--ff-m);font-size:.72rem;color:var(--ink-3);letter-spacing:.08em}
.studio .deckbar{padding:18px 20px 20px}
.studio .deckbar .lbl{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.studio .deckbar .lbl a{color:var(--paint);text-decoration:underline;text-underline-offset:3px;text-transform:none;letter-spacing:.04em}
.deck{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.deck button{aspect-ratio:1/1.28;border-radius:6px 6px 6px 12px;background:var(--c);position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),inset 0 -8px 14px -8px rgba(0,0,0,.28);transition:transform .3s var(--ease),box-shadow .3s var(--ease);outline-offset:3px}
.deck button::after{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.deck button:hover{transform:translateY(-4px)}
.deck button[aria-pressed="true"]{transform:translateY(-4px);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink),inset 0 -8px 14px -8px rgba(0,0,0,.28)}
.studio .studio-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px dashed var(--line);padding:14px 20px;flex-wrap:wrap}
.studio .studio-foot .note{font-size:.8rem;color:var(--ink-3);max-width:30ch}
.studio .studio-foot .btn{padding:12px 20px;font-size:.92rem}
.hero-edge{height:clamp(34px,5vw,64px);background:var(--paint);transition:background .5s;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C60 20 140 58 240 44 C340 30 420 12 540 26 C660 40 740 60 860 48 C980 36 1060 10 1180 22 C1300 34 1380 52 1440 38 L1440 64 L0 64 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C60 20 140 58 240 44 C340 30 420 12 540 26 C660 40 740 60 860 48 C980 36 1060 10 1180 22 C1300 34 1380 52 1440 38 L1440 64 L0 64 Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* ============ GIANT TYPE MARQUEE ============ */
.bigband{background:var(--paint);color:var(--on-paint);padding:clamp(20px,3vw,34px) 0;overflow:clip;contain:layout paint;transition:background .5s}
.bigband .track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:slide 34s linear infinite}
.bigband:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.bigband .cell{font-family:var(--ff-g);font-weight:900;font-size:clamp(2.6rem,6vw,5rem);letter-spacing:0;text-transform:uppercase;padding:0 .45em;display:inline-flex;align-items:center;gap:.5em}
.bigband .cell.ghost{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--on-paint) 65%,transparent)}
.bigband .cell::after{content:"";width:.55em;height:.55em;border-radius:35% 35% 35% 60%;background:var(--on-paint);opacity:.35;margin-left:.45em}
@media(prefers-reduced-motion:reduce){.bigband .track{animation:none}}

/* ============ STATS AS FAN-DECK CHIPS ============ */
.stats{padding:clamp(56px,8vw,96px) 0 0}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px 10px 10px 22px;box-shadow:var(--sh-1);padding:34px 30px 28px;position:relative;transition:transform .4s var(--ease)}
.stat::before{content:"";position:absolute;top:12px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 0 0 3px var(--paper-2)}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:0 0 9px 21px;background:var(--paint);opacity:.9;transition:background .5s}
.stat:nth-child(1){transform:rotate(-1.1deg)}
.stat:nth-child(2){transform:rotate(.7deg) translateY(8px)}
.stat:nth-child(3){transform:rotate(-.5deg)}
.stat:nth-child(4){transform:rotate(1deg) translateY(6px)}
.stat:hover{transform:rotate(0) translateY(-4px)}
.stat .n{font-family:var(--ff-d);font-size:clamp(3.6rem,5.2vw,5.6rem);line-height:.9;display:flex;align-items:baseline;gap:2px;letter-spacing:-.02em}
.stat .n em{font-style:italic;color:var(--paint);font-size:.62em;transition:color .5s}
.stat .l{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:16px}

/* ============ SERVICES — drawdown cards ============ */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,22px)}
.svc-c{grid-column:span 4;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.svc-c:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.svc-c.photo .ph{aspect-ratio:16/9.4;overflow:hidden;position:relative}
.svc-c.photo .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:saturate(.94)}
.svc-c.photo:hover .ph img{transform:scale(1.05)}
.svc-c.photo .ph::after{content:"";position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(to top,rgba(25,21,18,.34),transparent)}
.svc-c .num{position:absolute;top:12px;left:14px;z-index:2;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.22em;color:#fff;background:color-mix(in srgb,var(--ink) 72%,transparent);backdrop-filter:blur(4px);padding:6px 10px;border-radius:3px}
.svc-c .bd{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.svc-c h3{font-size:1.65rem}
.svc-c p{color:var(--ink-2);font-size:.95rem;line-height:1.6;flex:1}
.svc-c .more{font-weight:700;font-size:.9rem;color:var(--ink);display:inline-flex;align-items:center;gap:8px;margin-top:8px}
.svc-c .more::before{content:"";width:22px;height:2px;background:var(--paint);transition:width .35s var(--ease),background .5s}
.svc-c:hover .more::before{width:34px}
.svc-c:nth-child(1),.svc-c:nth-child(2){grid-column:span 6}
.svc-c:nth-child(1) .ph,.svc-c:nth-child(2) .ph{aspect-ratio:16/8.2}
.svc-c.svc-all{grid-column:span 12;background:var(--ink);color:var(--paper);flex-direction:row;align-items:center;justify-content:space-between;gap:26px;padding:34px 38px;min-height:0;border-color:var(--ink);flex-wrap:wrap}
.svc-c.svc-all::before{content:"";flex:none;order:2;width:min(300px,34vw);height:74px;border-radius:8px 8px 8px 18px;background:linear-gradient(115deg,#31513f 0 20%,#8a9b83 0 40%,#c2734a 0 60%,#8d9aa6 0 80%,#c8a24a 0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.svc-c.svc-all .sa-k{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:#b3aa99;margin-bottom:8px}.svc-c.svc-all .grp-txt{flex:1 1 320px}.svc-c.svc-all .more{order:3}
.svc-c.svc-all h3{color:var(--paper);font-size:1.8rem}
.svc-c.svc-all p{color:#b3aa99}
.svc-c.svc-all .more{color:var(--paper)}

/* ============ CRAFT — "why coats fail" editorial ============ */
.craft{background:var(--ink);color:var(--paper)}
.craft .eyebrow{background:#241f1a;border-color:#3a332b;color:#b3aa99}
.craft h2{color:var(--paper)}
.craft .sec-head p{color:#b3aa99}
.craft-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
.craft-steps{counter-reset:cs;display:flex;flex-direction:column}
.craft-step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 0;border-top:1px solid #2e2822;position:relative;transition:background .3s}
.craft-step:last-child{border-bottom:1px solid #2e2822}
.craft-step .cn{font-family:var(--ff-d);font-style:italic;font-size:clamp(2.7rem,3.5vw,3.6rem);color:var(--paint-soft);opacity:.5;min-width:82px;transition:color .5s,opacity .5s}
.craft-step:hover .cn{opacity:1;color:var(--paint-soft)}
.craft-step h4{color:var(--paper);font-size:1.18rem;margin-bottom:6px}
.craft-step h4 .tape{display:inline-block;font-family:var(--ff-m);font-weight:400;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--paint-soft);padding:4px 9px 3px;border-radius:2px;margin-left:10px;transform:rotate(-2deg) translateY(-3px);transition:background .5s}
.craft-step p{color:#b3aa99;font-size:.97rem;line-height:1.64;max-width:52ch}
.craft-fig{position:sticky;top:110px;border-radius:18px;overflow:hidden;box-shadow:var(--sh-2)}
.craft-fig img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.craft-fig .fig-cap{position:absolute;left:16px;bottom:16px;background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(6px);color:var(--paper);font-family:var(--ff-m);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:4px}

/* ============ ESTIMATOR — spec-sheet calculator ============ */
.est{background:var(--paper-2)}
.est-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,64px);align-items:start}
.est-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-2);overflow:hidden}
.est-card .ehead{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px dashed var(--line);font-family:var(--ff-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.est-card .ehead b{color:var(--ink)}
.est-body{padding:24px}
.est-row{margin-bottom:22px}
.est-row>.elbl{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem;margin-bottom:10px}
.est-row>.elbl small{font-weight:400;color:var(--ink-3)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts button{border:1.5px solid var(--line-2);background:var(--paper);padding:10px 16px;border-radius:8px;font-weight:600;font-size:.92rem;transition:all .25s var(--ease)}
.opts button:hover{border-color:var(--ink)}
.opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opts.multi button[aria-pressed="true"]{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.est-out{border-top:2px solid var(--ink);margin-top:6px;padding:20px 24px 24px;background:var(--paper)}
.est-out .eo-lbl{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.est-out .eo-val{font-family:var(--ff-d);font-size:clamp(2.2rem,3.4vw,3rem);line-height:1.1;margin:6px 0 4px}
.est-out .eo-val em{font-style:italic;color:var(--paint)}
.est-out .eo-note{font-size:.8rem;color:var(--ink-3);max-width:46ch}
.est-out .btn{margin-top:16px}
.est-copy .bullets{display:flex;flex-direction:column;gap:0;margin-top:28px}
.est-copy .bullets .bl{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.est-copy .bullets .bl:last-child{border-bottom:1px solid var(--line)}
.est-copy .bl .ic{width:38px;height:38px;border-radius:9px 9px 9px 16px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.est-copy .bl .ic svg{width:19px;height:19px;fill:none;stroke:var(--paint);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s}
.est-copy .bl b{display:block;font-size:1rem;margin-bottom:2px}
.est-copy .bl p{color:var(--ink-2);font-size:.92rem;line-height:1.6}

/* ============ GALLERY — editorial masonry ============ */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,20px)}
.gcell{position:relative;border-radius:var(--r);overflow:hidden;grid-column:span 4;aspect-ratio:4/3.1;box-shadow:var(--sh-1)}
.gcell img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.95)}
.gcell:hover img{transform:scale(1.06)}
.gcell::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(25,21,18,.55) 0%,transparent 42%)}
.gcell .cap{position:absolute;left:18px;bottom:16px;right:18px;color:#fff;z-index:2}
.gcell .cap .t{font-family:var(--ff-d);font-size:1.35rem;line-height:1.15}
.gcell .cap .s{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-top:4px}
.gcell.big{grid-column:span 8;grid-row:span 2;aspect-ratio:auto}
.gcell.wide{grid-column:span 8;aspect-ratio:16/6.4}

/* ============ WHY — ledger list ============ */
.why .wgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,5vw,80px);align-items:start}
.why .sec-head{position:sticky;top:110px;margin-bottom:0}
.why-list{display:flex;flex-direction:column}
.why-i{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line);transition:padding .3s var(--ease)}
.why-i:last-child{border-bottom:1px solid var(--line)}
.why-i:hover .wn{background:var(--paint);color:var(--on-paint);border-color:var(--paint)}
.why-i h4{font-size:1.34rem;margin-bottom:7px;letter-spacing:-.01em}
.why-i p{color:var(--ink-2);font-size:1.0rem;line-height:1.62;max-width:54ch}

/* ============ CARE PLAN band ============ */
.plan-hi{background:var(--paint);color:var(--on-paint);border-radius:24px;padding:clamp(30px,4.5vw,60px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:center;position:relative;overflow:hidden;transition:background .5s}
.plan-hi::after{content:"CARE";position:absolute;right:-.1em;bottom:-.32em;font-family:var(--ff-g);font-weight:900;font-size:clamp(6rem,13vw,11rem);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--on-paint) 30%,transparent);pointer-events:none}
.plan-hi .eyebrow{background:color-mix(in srgb,var(--paint-deep) 70%,transparent);border-color:color-mix(in srgb,var(--on-paint) 25%,transparent);color:var(--on-paint)}
.plan-hi .eyebrow::before{background:var(--on-paint)}
.plan-hi h2{color:var(--on-paint);font-size:clamp(2.2rem,4.4vw,3.6rem);margin:16px 0 12px}
.plan-hi h2 em{color:var(--on-paint);opacity:.85}
.plan-hi p{color:color-mix(in srgb,var(--on-paint) 82%,transparent);max-width:52ch}
.plan-hi .btn{background:var(--on-paint);border-color:var(--on-paint);color:var(--paint);margin-top:22px}
.plan-hi .pfeat{list-style:none;display:flex;flex-direction:column;gap:0;position:relative;z-index:2}
.plan-hi .pfeat li{display:flex;gap:14px;align-items:center;padding:15px 0;border-top:1px solid color-mix(in srgb,var(--on-paint) 22%,transparent);font-weight:600}
.plan-hi .pfeat li:last-child{border-bottom:1px solid color-mix(in srgb,var(--on-paint) 22%,transparent)}
.plan-hi .pfeat li svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--on-paint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============ REVIEWS — spotlight + strip ============ */
.rev-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.rev-spot{border-left:5px solid var(--paint);padding:6px 0 6px clamp(20px,3vw,36px);margin-bottom:clamp(30px,4vw,48px);transition:border-color .5s;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center}
.rev-spot .q,.rev-spot .who{grid-column:1}
.rev-src{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;gap:12px}
.rev-src .rs{background:var(--card);border:1px solid var(--line);border-radius:10px 10px 10px 18px;box-shadow:var(--sh-1);padding:12px 16px;min-width:0;flex:1 1 150px;max-width:240px}
.rev-src .rs b{font-size:1.25rem;display:flex;align-items:baseline;gap:8px}
.rev-src .rs b .stars{color:var(--gold);font-size:.85rem;letter-spacing:.1em}
.rev-src .rs span{display:block;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
@media(max-width:900px){.rev-spot{grid-template-columns:1fr}.rev-src{flex-direction:row;flex-wrap:wrap}}
.rev-spot .q{font-family:var(--ff-d);font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.16;max-width:24ch}
.rev-spot .q em{font-style:italic;color:var(--paint)}
.rev-spot .who{margin-top:16px;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.rev-wrap{contain:layout paint;overflow:hidden;position:relative;margin:0 calc(-1*clamp(20px,4vw,48px));padding:0 clamp(20px,4vw,48px)}
.rev-wrap::before,.rev-wrap::after{content:"";position:absolute;top:0;bottom:0;width:clamp(20px,4vw,48px);z-index:3;pointer-events:none}
.rev-wrap::before{left:0;background:linear-gradient(to right,var(--paper),transparent)}
.rev-wrap::after{right:0;background:linear-gradient(to left,var(--paper),transparent)}
.revs{display:flex;gap:18px;width:max-content;animation:slide 60s linear infinite}
.rev-wrap:hover .revs{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.revs{animation:none;width:auto;overflow-x:auto}}
.rev{width:360px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 26px;padding:24px 24px 20px;box-shadow:var(--sh-1);display:flex;flex-direction:column}
.rev .stars{color:var(--gold);letter-spacing:.12em;font-size:.92rem}
.rev p{margin:12px 0 16px;color:var(--ink-2);font-size:.95rem;line-height:1.62;flex:1}
.rev .by{font-weight:800;font-size:.94rem}
.rev .by span{display:block;font-family:var(--ff-m);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}

/* ============ AREA + MAP ============ */
.area{background:var(--paper-2)}
.area-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:start}
.area-right{display:flex;flex-direction:column}
.area h2{font-size:clamp(2.5rem,5vw,4.2rem);margin:18px 0 14px;letter-spacing:-.01em}
.area h2 em{color:var(--paint)}
.area p{color:var(--ink-2);font-size:1.06rem;max-width:52ch}
.cities{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.cities a{border:1.5px solid var(--line-2);background:var(--card);border-radius:7px 7px 7px 13px;padding:9px 15px;font-weight:600;font-size:.9rem;transition:all .25s var(--ease)}
.cities a:hover{border-color:var(--paint);color:var(--paint);transform:translateY(-2px)}
.area-map{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);position:relative}
.area-map iframe{display:block;width:100%;height:480px;border:0;filter:saturate(.86) sepia(.06) contrast(1.02)}


/* ============ FAQ ============ */
.faq{max-width:820px;margin:0 auto}
.faq details{border-top:1px solid var(--line);transition:background .3s}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .qi{width:34px;height:34px;flex:none;border:1.5px solid var(--line-2);border-radius:8px 8px 8px 14px;display:grid;place-items:center;font-weight:400;font-size:1.2rem;color:var(--ink-2);transition:all .3s var(--ease)}
.faq details[open] summary .qi{background:var(--paint);border-color:var(--paint);color:var(--on-paint);transform:rotate(45deg)}
.faq .fa{padding:0 4px 24px;color:var(--ink-2);line-height:1.66;max-width:64ch}

/* ============ FINAL CTA — painted panel ============ */
.cta{padding:0 0 clamp(64px,9vw,120px)}
.cta .wrap>div,.cta .inner{position:relative}
.cta-panel{background:var(--paint);color:var(--on-paint);border-radius:26px;padding:clamp(44px,7vw,90px) clamp(24px,5vw,80px);text-align:center;position:relative;overflow:hidden;transition:background .5s}
.cta-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 85% -10%,color-mix(in srgb,var(--on-paint) 14%,transparent),transparent 70%)}
.cta h2{color:var(--on-paint);font-size:clamp(2.6rem,6vw,4.8rem);max-width:18ch;margin:0 auto 16px;position:relative}
.cta h2 em{color:var(--on-paint);opacity:.85}
.cta p{color:color-mix(in srgb,var(--on-paint) 84%,transparent);max-width:54ch;margin:0 auto;position:relative}
.cta .acts{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap;position:relative}
.cta .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta .call{color:var(--on-paint);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ============ FOOTER ============ */
.mfoot{background:var(--ink);color:#b3aa99;padding:clamp(56px,7vw,90px) 0 0;overflow:clip}
.mfoot .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,4vw,56px)}
.mfoot h4{color:var(--paper);font-family:var(--ff-m);font-weight:400;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px}
.mfoot a{display:block;padding:5px 0;font-size:.96rem;transition:color .2s}
.mfoot a:hover{color:var(--paper)}
.mfoot .flogo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mfoot .flogo .mark{width:38px;height:38px;border-radius:8px 8px 8px 16px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.mfoot .flogo .mark svg{width:20px;height:20px;fill:none;stroke:var(--on-paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mfoot .flogo b{color:var(--paper);font-size:1.15rem;font-weight:800}
.mfoot .fp{font-size:.93rem;line-height:1.6;max-width:34ch}
.mfoot .fbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mfoot .fbadges span{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid #37312a;border-radius:4px;padding:6px 10px;color:#8f8677}
.mfoot .fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #2b2620;margin-top:clamp(36px,5vw,56px);padding:22px 0 26px;font-size:.8rem;color:#8f8677}
.mfoot .fbot a{display:inline}
.mfoot .fword{font-family:var(--ff-g);font-weight:900;font-size:clamp(4rem,14vw,12.5rem);letter-spacing:-.03em;text-transform:uppercase;line-height:.86;text-align:center;color:transparent;-webkit-text-stroke:1.2px #37312a;user-select:none;pointer-events:none;margin-top:clamp(20px,3vw,40px)}
.mfoot .fword em{font-family:var(--ff-d);font-style:italic;text-transform:none;color:var(--paint);-webkit-text-stroke:0;transition:color .5s}

/* ============ SUBPAGES — hero / prose / aside ============ */
.phero{background-color:var(--ink);background-size:cover;background-position:center;color:var(--paper);padding:clamp(72px,9vw,130px) 0;position:relative}
.phero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(20,16,12,.55),rgba(20,16,12,.15))}
.phero .wrap{position:relative;z-index:2}
.crumb{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#cfc8bb;margin-bottom:18px}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb span{color:#fff}
.phero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);max-width:20ch;color:#fff}
.phero h1 .cool,.phero h1 .warm{font-style:italic;color:var(--paint-soft)}
.phero .lead{margin-top:16px;font-size:1.13rem;color:#e9e4d8;max-width:62ch;line-height:1.66}
.phero .acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.phero .call,.cta .call{font-weight:700}
.phero .call{color:#fff;text-decoration:underline;text-underline-offset:4px}
.sphero{padding:clamp(60px,7vw,100px) 0}
.pbody{padding:clamp(48px,6vw,84px) 0}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,4vw,64px);align-items:start}
.prose{font-size:1.02rem;color:var(--ink-2)}
.prose h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--ink);margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px;line-height:1.7}
.prose .lead-p{font-family:var(--ff-d);font-size:1.45rem;line-height:1.42;color:var(--ink);margin-bottom:24px}
.prose ul{list-style:none;margin:0 0 20px}
.prose ul li{position:relative;padding:10px 0 10px 34px;border-bottom:1px dashed var(--line)}
.prose ul li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:14px;border-radius:4px 4px 4px 8px;background:var(--paint);opacity:.9;transition:background .5s}
.prose ul li::after{content:"";position:absolute;left:6px;top:20px;width:6px;height:3px;border-left:1.6px solid var(--on-paint);border-bottom:1.6px solid var(--on-paint);transform:rotate(-45deg)}
.prose ul li b{color:var(--ink)}
.psteps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 8px}
.pstep{background:var(--card);border:1px solid var(--line);border-radius:12px 12px 12px 22px;padding:20px;display:flex;gap:16px;align-items:flex-start}
.pstep .pn{font-family:var(--ff-m);font-size:.8rem;width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--paint);color:var(--on-paint);border-radius:8px 8px 8px 14px;transform:rotate(-2deg);transition:background .5s}
.pstep h4{font-size:1.05rem;margin-bottom:4px;color:var(--ink)}
.pstep p{font-size:.9rem;margin:0;line-height:1.6}
.brands{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 8px}
.brands span{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);background:var(--card);border-radius:5px;padding:8px 13px;color:var(--ink-2)}
.paside{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);padding:24px}
.pcard h3{font-size:1.5rem;margin-bottom:8px}
.pcard p{color:var(--ink-2);font-size:.93rem;line-height:1.6}
.pcard .res{display:flex;gap:18px;margin:14px 0}
.pcard .res .n{font-family:var(--ff-d);font-size:1.7rem}
.pcard .res .l{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.pcard .btn{width:100%;justify-content:center;margin-top:10px}
.pcard .call{display:block;text-align:center;margin-top:12px;font-size:.92rem;color:var(--ink-2)}
.pcard .call b{color:var(--ink)}
.aside-emg{background:var(--paint-soft);border:1px solid var(--line);border-radius:16px;padding:20px;transition:background .5s}
.aside-emg .t{font-weight:800;margin-bottom:4px}
.aside-emg p{font-size:.9rem;color:var(--ink-2);line-height:1.55}
.aside-emg a{font-weight:700;color:var(--paint);text-decoration:underline;text-underline-offset:3px}
.rel-svc{border-top:1px solid var(--line);margin-top:34px;padding-top:20px}
.rel-svc h4{font-family:var(--ff-m);font-weight:400;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.rel-svc a{display:inline-block;border:1.5px solid var(--line-2);border-radius:7px;padding:8px 14px;margin:0 8px 8px 0;font-weight:600;font-size:.88rem;transition:all .2s}
.rel-svc a:hover{border-color:var(--paint);color:var(--paint)}

/* ============ PLANS (maintenance) ============ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.plan.feat{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.feat h3,.plan.feat .price{color:var(--paper)}
.plan .tag{position:absolute;top:-13px;left:24px;background:var(--paint);color:var(--on-paint);font-family:var(--ff-m);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:4px;transform:rotate(-1.5deg);transition:background .5s}
.plan .pn{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.plan.feat .pn{color:#b3aa99}
.plan .pd{font-size:.92rem;color:var(--ink-2);margin:6px 0 14px}
.plan.feat .pd{color:#b3aa99}
.plan .price{font-family:var(--ff-d);font-size:2.6rem;line-height:1}
.plan .price span{font-family:var(--ff-g);font-size:1rem;color:var(--ink-3)}
.plan .pbill{font-size:.78rem;color:var(--ink-3);margin-top:4px}
.plan ul{list-style:none;margin:18px 0 22px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:.93rem}
.plan li svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke:var(--paint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan.feat li svg{stroke:var(--paint-soft)}
.plan .btn{justify-content:center}
.plan.feat .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.plan-note{font-size:.85rem;color:var(--ink-3);text-align:center;margin-top:22px}

/* ============ BOOKING / CONTACT ============ */
.bk-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,60px);align-items:start}
.emg-card{display:flex;gap:16px;background:var(--paint-soft);border:1px solid var(--line);border-radius:16px;padding:20px;transition:background .5s}
.emg-card .eic{width:42px;height:42px;flex:none;border-radius:10px 10px 10px 18px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.emg-card .eic svg{width:20px;height:20px;fill:none;stroke:var(--on-paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.emg-card .t{font-weight:800}
.emg-card .d{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.emg-card a{font-weight:700;color:var(--paint);text-decoration:underline;text-underline-offset:3px}
.bk-pts{list-style:none;margin:22px 0}
.bk-pts li{display:flex;gap:13px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:.97rem;color:var(--ink-2)}
.bk-pts .ck{width:24px;height:24px;flex:none;border-radius:6px 6px 6px 11px;background:var(--paint);display:grid;place-items:center;margin-top:1px;transition:background .5s}
.bk-pts .ck svg{width:13px;height:13px;fill:none;stroke:var(--on-paint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-pts b{color:var(--ink)}
.bk-hours{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.bk-hours h4{font-family:var(--ff-m);font-weight:400;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.bk-hours .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.bk-hours .row:last-child{border:0}
.bk-hours .row b{font-weight:700}
.bk-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-2);padding:clamp(22px,3vw,34px);position:relative}
.bk-card::before{content:"EST-04";position:absolute;top:18px;right:22px;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.22em;color:var(--ink-3)}
.bk-card .bh{font-family:var(--ff-d);font-size:2rem;line-height:1.1}
.bk-card .bs{color:var(--ink-2);font-size:.95rem;margin:8px 0 20px}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-f{margin-bottom:14px}
.bk-f label{display:block;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.bk-f label .req{color:#a4442c}
.bk-f input,.bk-f select,.bk-f textarea{width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line-2);border-radius:9px;padding:13px 14px;transition:border .2s,box-shadow .2s}
.bk-f input:focus,.bk-f select:focus,.bk-f textarea:focus{outline:none;border-color:var(--paint);box-shadow:0 0 0 3px color-mix(in srgb,var(--paint) 18%,transparent)}
.bk-f input.bad,.bk-f select.bad{border-color:#a4442c;box-shadow:0 0 0 3px rgba(164,68,44,.14)}
.urg{display:flex;gap:10px;flex-wrap:wrap}
.urg .uo{position:relative}
.urg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.urg label{display:inline-block;border:1.5px solid var(--line-2);border-radius:8px;padding:10px 16px;font-weight:600;font-size:.9rem;transition:all .2s;cursor:pointer}
.urg input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.urg .em input:checked+label{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.bk-card .btn{margin-top:8px}
.bk-fine{font-size:.8rem;color:var(--ink-3);margin-top:14px}
.bk-fine b{color:var(--ink-2)}
.bk-done{display:none;text-align:center;padding:40px 10px}
.bk-done.on{display:block}
.bk-done .ic{width:64px;height:64px;margin:0 auto 18px;border-radius:16px 16px 16px 28px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.bk-done .ic svg{width:30px;height:30px;fill:none;stroke:var(--on-paint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-done h3{font-size:1.9rem;margin-bottom:8px}
.bk-done p{color:var(--ink-2);max-width:44ch;margin:0 auto}
.warm-card{background:var(--paint-soft)}

/* ============ EMERGENCY / DEADLINE BAND ============ */
.emg .wrap{background:var(--ink);color:var(--paper);border-radius:20px;padding:clamp(24px,3.4vw,40px) clamp(24px,3.4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.emg .el{display:flex;align-items:center;gap:18px;flex:1 1 420px}
.emg .eic{width:52px;height:52px;flex:none;border-radius:12px 12px 12px 22px;background:var(--paint);display:grid;place-items:center;transition:background .5s}
.emg .eic svg{width:24px;height:24px;fill:none;stroke:var(--on-paint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.emg h3{color:var(--paper);font-size:1.6rem;margin-bottom:4px}
.emg p{color:#b3aa99;font-size:.95rem;max-width:56ch}
.emg .btn{background:var(--paper);border-color:var(--paper);color:var(--ink);flex:none}

/* ============ MOBILE MENU / BURGER / FAB ============ */
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;padding:10px;border-radius:9px;border:1px solid var(--line)}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-menu{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden;contain:layout paint size}
.m-menu .ov{position:absolute;inset:0;background:rgba(25,21,18,.5);opacity:0;transition:opacity .3s}
.m-menu .panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--paper);box-shadow:var(--sh-2);transform:translateX(102%);transition:transform .45s var(--ease);display:flex;flex-direction:column;overflow-y:auto;padding:18px 22px 28px}
body.menu-open .m-menu{pointer-events:auto}
body.menu-open .m-menu .ov{opacity:1}
body.menu-open .m-menu .panel{transform:none}
.m-menu .mm-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.m-menu .mm-head b{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.m-menu .mm-close{font-size:1.6rem;width:40px;height:40px;border:1px solid var(--line);border-radius:9px}
.m-menu .ml{display:block;padding:13px 6px;font-weight:600;font-size:1.05rem;border-bottom:1px dashed var(--line)}
.m-menu .ml.sub{padding-left:22px;font-weight:500;font-size:.98rem;color:var(--ink-2)}
.m-menu .ml.grp{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);border:0;padding-top:18px}
.m-menu .mm-cta{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:12px}
.m-menu .mm-cta .btn{justify-content:center}
.m-menu .mm-phone{text-align:center;font-weight:800;font-size:1.06rem}
.fab-call{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:70;background:var(--ink);color:var(--paper);border-radius:13px;padding:15px 20px;align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:var(--sh-2)}
.fab-call svg{width:18px;height:18px;fill:none;stroke:var(--paint-soft);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ============ MOTION / FOCUS ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.deck button,.stat,.btn{transition:none}}
:focus-visible{outline:2.5px solid var(--paint);outline-offset:3px;border-radius:4px}

/* ============ RESPONSIVE ============ */
@media(max-width:1120px){
  .mnav{display:none}
  .burger{display:flex}
  .nav-phone{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-copy{padding-bottom:0}
  .craft-grid{grid-template-columns:1fr}
  .craft-fig{position:static;max-width:640px}
  .est-grid{grid-template-columns:1fr}
  .why .wgrid{grid-template-columns:1fr}
  .why .sec-head{position:static}
  .area-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .paside{position:static}
  .bk-grid{grid-template-columns:1fr}
  .plan-hi{grid-template-columns:1fr}
  .mfoot .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:15.5px}
  .nav{height:64px;gap:10px}
  .nav-right{gap:8px}
  .nav-right .btn{padding:10px 13px;font-size:.84rem;white-space:nowrap}
  .logo{font-size:1.05rem;gap:9px}
  .logo .mark{width:32px;height:32px}
  .logo small{letter-spacing:.18em;white-space:nowrap}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:14px}
  .stat:nth-child(n){transform:none}
  .svc-grid{grid-template-columns:1fr}
  .svc-c,.svc-c:nth-child(1),.svc-c:nth-child(2),.svc-c.svc-all{grid-column:span 12}
  .gal{grid-template-columns:1fr}
  .gcell,.gcell.big,.gcell.wide{grid-column:span 1;aspect-ratio:4/2.9}
  .deck{grid-template-columns:repeat(5,1fr)}
  .deck button{aspect-ratio:1/1.1}
  .psteps{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .bk-row{grid-template-columns:1fr}
  .rev{width:300px}
  .fab-call{display:flex}
  body{padding-bottom:70px}
  .mfoot .fcols{grid-template-columns:1fr}
  .area-map iframe{height:320px}
  .cta .acts{flex-direction:column}
  .studio .room{aspect-ratio:16/11}
  .studio .studio-foot{flex-direction:column;align-items:stretch;text-align:center}
  .studio .studio-foot .btn{justify-content:center}
  .hero h1{font-size:clamp(2.7rem,12vw,3.6rem)}
  .rev-spot .q{font-size:1.5rem}
}

.preview-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.pv-claim{display:inline-block;background:#fff;color:#14100c!important;font-weight:800;padding:7px 16px;border-radius:999px;text-decoration:none;box-shadow:0 1px 6px rgba(0,0,0,.25)}
.pv-claim:hover{transform:translateY(-1px)}
/* ==== ELEVATION v1 ==== */
::selection{background:var(--paint);color:var(--on-paint)}
:focus-visible{outline:2px solid var(--paint);outline-offset:3px;border-radius:4px}

/* Papier-Textur, sehr subtil */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
 background-image:radial-gradient(rgba(35,29,22,.028) 1px,transparent 1.2px);background-size:26px 26px}
main,header,footer{position:relative;z-index:1}

/* HERO: groessere Buehne, Farb-Wash, engere Zeilen */
.hero h1{font-size:clamp(3.6rem,8.4vw,7.4rem);line-height:1.06;letter-spacing:-.005em}
@media(max-width:740px){.hero h1{font-size:clamp(2.7rem,11.5vw,3.7rem)}}
.hero h1 .swash svg path{stroke-dasharray:330;stroke-dashoffset:330;animation:swashDraw 1.05s var(--ease) .5s forwards}
@keyframes swashDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hero h1 .swash svg path{animation:none;stroke-dashoffset:0}}
.hero h1 em{letter-spacing:-.01em}
.hero{position:relative;overflow:hidden}
.hero .sub{font-size:1.08rem;max-width:54ch}
/* Underline-Stroke animiert einmalig */
@keyframes strokeIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .stroke, .hero h1 .u::after{transform-origin:left center;animation:strokeIn 1.1s var(--ease) .35s both}

/* Kreis-Stempel (rotierend, claim-sicher) */
.hero-stamp svg{width:100%;height:100%;animation:spin 80s linear infinite}
.hero-stamp text{font:600 9.8px/1 "Space Mono",monospace;letter-spacing:.1em;fill:var(--ink-2)}
.hero-stamp circle{fill:var(--paint);}
@keyframes spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){.hero-stamp svg{animation:none}}

/* Kunden-Logo: breite Logos duerfen atmen */
.mark img{width:auto!important;height:32px!important;max-width:128px;object-fit:contain}
.mark{width:auto!important;min-width:46px;height:auto!important;padding:7px 10px;border-radius:10px;display:inline-flex;align-items:center}

/* SERVICES: Rhythmus statt Raster — erste Karte gross, Ghost-Numerale, Hover-Leben */
.svc-c{position:relative}
.svc-c .num{position:absolute;z-index:2;top:14px;left:14px;background:var(--ink);color:var(--paper);
 font:700 .72rem/1 "Space Mono",monospace;letter-spacing:.14em;padding:7px 10px;border-radius:7px}
.svc-c .ph{overflow:hidden}
.svc-c .ph img{transition:transform .8s var(--ease)}
.svc-c:hover .ph img{transform:scale(1.055)}
.svc-c .more{position:relative}
.svc-c:hover{box-shadow:var(--sh-2)}

/* METHOD: Ghost-Numerale + Verbindungslinie */
.why-i{position:relative}

/* REVIEWS: Zitat-Glyphe, Sterne in Kundenfarbe, leichte Rotation im Wechsel */
.mysrev .rev{position:relative;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.mysrev .rev::before{content:"\201C";position:absolute;top:2px;right:16px;font:700 4.2rem/1 var(--ff-g);
 color:color-mix(in srgb,var(--paint) 26%,transparent)}

/* MARQUEE: Hover-Pause */
.tick:hover .tick-track,.marq:hover .marq-track{animation-play-state:paused}

/* ESTIMATOR-Auswahl-Chip */
#eOut{display:inline-block;background:var(--paint-soft);border:1px solid color-mix(in srgb,var(--paint) 30%,transparent);
 padding:10px 16px;border-radius:12px}

/* FAB: erst nach Scroll (JS setzt .on), sanft */
#mysfab{opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
#mysfab.on{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){#mysfab{opacity:1;transform:none;pointer-events:auto}}

/* Sektions-Rhythmus: Luft variieren */
section{scroll-margin-top:90px}


/* ==== ELEVATION v2 ==== */
/* Hero-Komposition */
.hero{padding-top:clamp(64px,7vw,110px)}
.hero .wrap{position:relative}
.hero-copy{position:relative;z-index:2}
.hero h1 .hl2{display:inline-block}
.hero h1 .swash{display:inline-block;margin-left:1.2ch}
/* Stempel als Sticker auf der Studio-Ecke */
.studio{position:relative;overflow:visible!important}
.studio .hero-stamp{position:absolute;right:-26px;left:auto;top:-30px;width:140px;height:140px;z-index:6;opacity:1!important;
 filter:drop-shadow(0 10px 22px rgba(25,20,14,.28))}
.studio .hero-stamp text{font:600 9px/1 "Space Mono",monospace;letter-spacing:.24em;fill:color-mix(in srgb,var(--paper) 92%,transparent)}
.studio .hero-stamp path#circ{fill:none}
@media(max-width:1100px){.studio .hero-stamp{right:-10px;top:-26px;width:112px;height:112px}}
/* Pinselstrich-Divider */
.brush-divider{line-height:0;margin-top:clamp(30px,4vw,54px)}
.brush-divider svg{display:block;width:100%;height:clamp(44px,6vw,90px)}
.brush-divider path{fill:var(--paint);transition:fill .5s}
/* Getoente Baender */
section.tint{background:color-mix(in srgb,var(--paint) 7%,var(--paper));
 border-radius:clamp(22px,3vw,40px);margin:clamp(18px,2.4vw,34px) clamp(10px,1.6vw,26px);
 padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
/* Editorial-Eyebrow mit Linie */
.sec-head .eyebrow{display:flex;align-items:center;gap:16px;width:100%;background:none;border:none;padding-left:0}
.sec-head .eyebrow::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,color-mix(in srgb,var(--paint) 55%,transparent),color-mix(in srgb,currentColor 22%,transparent))}
.sec-head h2{font-size:clamp(2.5rem,4.9vw,4rem)}
/* Mobile-Header: Logo kompakt, kein Umbruch */
@media(max-width:740px){
 .mark img{max-width:92px!important;height:26px!important}
 .logo{gap:8px}
}

/* ==== AUSRASTEN v3: FRISCH GESTRICHEN ==== */
/* --- PAINTWALL: die gestrichene Wand --- */
.hero{position:relative;overflow:visible}
.paintwall{position:absolute;top:0;right:0;bottom:-1px;width:min(46vw,660px);z-index:0;
 background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-paint) 5%,transparent) 0 2px,transparent 2px 34px),
  linear-gradient(180deg,color-mix(in srgb,var(--paint) 92%,#000) 0%,var(--paint) 18%,var(--paint) 82%,color-mix(in srgb,var(--paint) 90%,#000) 100%);
 clip-path:polygon(26px 0%,100% 0%,100% 100%,4px 100%,20px 96.5%,6px 93%,24px 89.5%,8px 86%,26px 82.5%,4px 79%,22px 75.5%,6px 72%,24px 68.5%,8px 65%,26px 61.5%,4px 58%,20px 54.5%,6px 51%,24px 47.5%,8px 44%,26px 40.5%,4px 37%,22px 33.5%,6px 30%,24px 26.5%,8px 23%,26px 19.5%,4px 16%,20px 12.5%,6px 9%,24px 5.5%,10px 2%);
 filter:drop-shadow(-8px 0 18px rgba(24,18,10,.10));transition:background .5s}
.hero .wrap{position:relative;z-index:2}
.hero .studio{z-index:3}
.hero h1{font-size:clamp(3.5rem,8vw,7rem);line-height:1.06;letter-spacing:-.005em}
@media(max-width:1100px){.paintwall{width:52vw}}
@media(max-width:740px){.paintwall{top:auto;height:46%;width:100%;clip-path:polygon(0 26px,7% 6px,14% 24px,22% 4px,30% 26px,38% 8px,46% 24px,54% 4px,62% 26px,70% 8px,78% 24px,86% 6px,94% 24px,100% 8px,100% 100%,0 100%)}}
/* Hero-CTA in Kundenfarbe (on-paint garantiert Kontrast) */
.btn.btn-paint{background:var(--paint);border-color:var(--paint);color:var(--on-paint)}
.btn.btn-paint::before{background:var(--on-paint)}
.btn.btn-paint:hover{box-shadow:0 14px 30px -12px color-mix(in srgb,var(--paint) 60%,transparent)}
/* Stempel: Papier-Plakette mit Farb-Ring (sitzt auf Wand UND Bild) */
.studio .hero-stamp text{fill:var(--paper)}
/* --- DUNKLES KAPITEL (Method) --- */
section.dark{background:var(--ink);color:var(--paper);
 border-radius:clamp(22px,3vw,40px);margin:clamp(18px,2.4vw,34px) clamp(10px,1.6vw,26px);
 padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px)}
section.dark .sec-head h2,section.dark h2{color:var(--paper)}
section.dark .sec-head h2 em{color:var(--paint-soft)}
section.dark .eyebrow{color:color-mix(in srgb,var(--paper) 78%,transparent)}
section.dark .eyebrow::after{background:linear-gradient(90deg,color-mix(in srgb,var(--paint) 70%,transparent),color-mix(in srgb,var(--paper) 14%,transparent))}
section.dark .sec-head p,section.dark p{color:color-mix(in srgb,var(--paper) 86%,transparent)}
section.dark h4{color:var(--paper)}
section.dark .why-i{border-color:color-mix(in srgb,var(--paper) 14%,transparent)}
/* Ziffern: solide Farb-Chips (kein Geister-Outline mehr) */
.why-i .wn{width:auto;height:auto;flex:none;display:block;font:italic 400 clamp(2.6rem,3.4vw,3.6rem)/1 var(--ff-d);color:var(--paint);opacity:.82;letter-spacing:-.02em;min-width:1.7em;transition:color .5s,opacity .3s}
.why-i:hover .wn{opacity:1}
section.dark .why-i .wn{color:#a9e3bd}
/* --- Estimator: deutliche Controls --- */
#estCard button{border:1.5px solid var(--line-2);background:var(--card);font-weight:600}
#estCard button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
section.tint #estCard button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* --- Kontrast-Anhebungen --- */

section.tint{background:color-mix(in srgb,var(--paint) 9%,var(--paper))}
section.tint p{color:var(--ink-2)}

/* Kontrast-Anhebung (Scan-Funde >=4.5 small / >=3 Sterne) */
:root{--ink-2:#494439;--ink-3:#6a6252}
.ti .tl,.trust .tl{color:var(--ink-2)}
.mono,[class*="mono"]{color:var(--ink-2)}

/* ==== v4 mobile ==== */
@media(max-width:740px){
 .studio .hero-stamp{right:6px;top:-30px;width:104px;height:104px}
 section.dark,section.tint{margin-left:8px;margin-right:8px;border-radius:20px}
 .why-i .wn{font-size:2.2rem}
 #estCard button{padding:12px 14px}
 .hero h1{overflow-wrap:anywhere}
}
/* ==== v4 daten-gestufte Fuelle ==== */
.hours-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--sh-1)}
.hours-card h3{font-family:var(--ff-d);font-size:1.5rem;margin:0 0 12px}
.hours-card ul{list-style:none;margin:0;padding:0}
.hours-card li{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-top:1px solid var(--line);font-size:.95rem}
.hours-card li:first-child{border-top:none}
.hours-card li b{font-weight:600}
.guides details{border:1px solid var(--line);border-radius:14px;background:var(--card);margin-bottom:12px;overflow:hidden;transition:border-color .3s}
.guides details[open]{border-color:var(--line-2)}
.guides summary{cursor:pointer;padding:21px 26px;font-weight:700;font-size:1.18rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.guides summary::after{content:"+";font:700 1.3rem/1 var(--ff-g);color:var(--paint)}
.guides details[open] summary::after{content:"\2212"}
.guides .g-body{padding:0 22px 20px;color:var(--ink-2);line-height:1.7}
.guides .g-body p{margin:0 0 10px}

.studio .hero-stamp svg{background:var(--ink);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--paint) 70%,transparent);animation:spin 26s linear infinite;display:block}

footer footer 
/* Kontrast-Restfixes v5 */
section.dark .stars,
/* Galerie-Captions: Scrim = immer lesbar, egal welches Foto */
.cap{background:linear-gradient(180deg,transparent 0%,rgba(16,13,9,.55) 34%,rgba(16,13,9,.86) 100%)!important;
 padding-top:34px!important}
.cap .t{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.cap .s{color:rgba(255,255,255,.88)!important}


/* ==== v6 marquee/gold/social/footer-logo ==== */
/* GOLD-Sterne ueberall (Glyph-Icons; Lesbarkeit via dezentem Schatten) */
.stars{color:#e6a63c!important;text-shadow:0 1px 1px rgba(80,45,0,.4)}
section.dark .stars{color:#f0b44e!important}
/* Marquee-Karten: Quote-Glyphe beibehalten */
.revs .rev{position:relative}
.revs .rev::before{content:"\201C";position:absolute;top:2px;right:14px;font:700 3.6rem/1 var(--ff-g);color:color-mix(in srgb,var(--paint) 24%,transparent)}
/* Social-Icon-Buttons */
footer footer /* Footer-Logo: nie aus der Box */
footer .mark{width:auto!important;height:auto!important;padding:5px 9px;display:inline-flex;align-items:center;border-radius:9px}
footer .mark img{height:24px!important;width:auto!important;max-width:110px;object-fit:contain}

/* ==== v7 brand social icons ==== */
.f-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.f-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 12px -6px rgba(0,0,0,.45);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.f-social a svg{width:21px;height:21px;display:block}
.f-social a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 18px -8px rgba(0,0,0,.5)}
.f-social a.sm-facebook{background:#1877F2}
.f-social a.sm-instagram{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.f-social a.sm-youtube{background:#FF0000}
.f-social a.sm-tiktok{background:#000}
.f-social a.sm-x{background:#000}
.f-social a.sm-linkedin{background:#0A66C2}
.f-social a.sm-pinterest{background:#E60023}

/* z-fix dropdown: Menue immer VOR Seiteninhalt */
header{position:sticky;top:0;z-index:200}
header .drop,header .dropdown,nav .drop{z-index:210}
.phero,.hero{z-index:1}

/* v8 Service-Tiefe */
.inc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px 48px}
.inc-grid li{display:flex;gap:16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);font-size:1.08rem;font-weight:500;position:relative;transition:padding .4s var(--ease)}
.inc-grid li svg{width:16px;height:16px;flex:none;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;background:var(--paint);border-radius:6px 6px 6px 10px;padding:6px;box-sizing:content-box;box-shadow:0 3px 8px -3px color-mix(in srgb,var(--paint) 55%,transparent)}
@media(hover:hover){.inc-grid li:hover{padding-left:14px}}
.inc-grid li::after{content:"";position:absolute;left:-2px;top:20%;bottom:20%;width:2px;background:var(--paint);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
@media(hover:hover){.inc-grid li:hover::after{transform:scaleY(1)}}
/* ============ UNTERSEITEN inc-grid reicher ============ */
/* Good-to-know Guide-Copy reicher (nicht nur Text-Block) */
.guide-copy{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(24px,3vw,44px);max-width:none}
.guide-copy p{position:relative;padding-left:26px;font-size:1.06rem;line-height:1.66;color:var(--ink-2);margin:0}
.guide-copy p::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:3px 3px 3px 6px;background:var(--paint);opacity:.85}
.rel-pill{transition:transform .3s var(--ease),border-color .3s,color .3s}
.rel-pill:hover{transform:translateY(-3px);border-color:var(--paint);color:var(--paint)}
.guide-copy{max-width:68ch;color:var(--ink-2);line-height:1.75}
.guide-copy p{margin:0 0 14px}
.rel-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.rel-lbl{font:600 .72rem/1 "Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-right:6px}
.rel-pill{text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;padding:9px 16px;border:1.5px solid var(--line-2);border-radius:999px}
.rel-pill:hover{border-color:var(--paint);color:var(--paint)}

/* sm-shape v9: native Formen */
.f-social a.sm-facebook,.f-social a.sm-pinterest{border-radius:50%}
.f-social a.sm-youtube{width:52px;border-radius:12px}
.f-social a svg{width:22px;height:22px}
.f-social a.sm-youtube svg{width:24px;height:24px}

/* SHARED v2 */

.svc-c{position:relative}
.svc-c .num{position:absolute;z-index:2;top:14px;left:14px;background:var(--ink);color:var(--paper);font:700 .72rem/1 "Space Mono",monospace;letter-spacing:.14em;padding:7px 10px;border-radius:7px}
.svc-c .ph{overflow:hidden}
.svc-c .ph img{transition:transform .8s var(--ease)}
.svc-c:hover .ph img{transform:scale(1.055)}
.svc-c:hover{box-shadow:var(--sh-2)}

/* dark-Kapitel: Ghost-Buttons + em hell (Kontrast) */
section.dark .btn-cool,section.dark .btn-ghost{color:var(--paper)!important;border-color:color-mix(in srgb,var(--paper) 48%,transparent)!important;background:transparent!important}
section.dark .btn-cool:hover,section.dark .btn-ghost:hover{border-color:var(--paper)!important;background:color-mix(in srgb,var(--paper) 10%,transparent)!important}
section.dark b,section.dark strong{color:var(--paper)}
section.dark em{color:var(--paint-soft)}
footer .fp{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.mfoot .fp,.mfoot p,.mfoot{color:color-mix(in srgb,var(--paper) 74%,transparent)}
/* em-Akzent in Headlines: helle Kundenfarben abdunkeln fuer Kontrast (dark-Kapitel bleibt paint-soft) */
/* em-kontrast-v2: heller Grund -> em abgedunkelt; dunkles Kapitel -> em aufgehellt */
h1 em,h2 em,h3 em,.sec-head h2 em{color:color-mix(in srgb,var(--paint) 60%,var(--ink))!important}
section.dark h1 em,section.dark h2 em,section.dark h3 em,section.dark .sec-head h2 em{color:color-mix(in srgb,var(--paint-soft) 55%,#fff)!important}
.mm-phone,.mm-phone b{color:color-mix(in srgb,var(--paint) 52%,var(--ink))!important}
/* Review-Karten feste Breite erzwingen (Marquee darf nicht strecken) + Rating-Sterne gold */
.rev-wrap .revs .rev{width:360px!important;flex:0 0 360px!important}
@media(max-width:640px){.rev-wrap .revs .rev{width:300px!important;flex-basis:300px!important}}
/* customer-logo: echtes Firmenlogo ohne aufgesetzten Kasten, konsistente Hoehe */
.mark.mark-logo{background:none!important;box-shadow:none!important;padding:0!important;width:auto!important;min-width:0!important;height:auto!important;border-radius:0}
.mark.mark-logo img{height:30px!important;width:auto!important;max-width:150px!important}
footer .mark.mark-logo img,.mfoot .mark.mark-logo img{height:26px!important}
/* Initialen-Monogramm fuer Firmen ohne echtes Logo (Demo final) */
.mark.mark-mono{font-family:var(--ff-d);font-weight:800;font-size:15px;letter-spacing:.01em;color:var(--on-paint)}
footer .mark.mark-mono,.mfoot .mark.mark-mono{font-size:13px}

/* ===== BEFORE / AFTER, the reveal (signature) ===== */
.compare{padding:clamp(60px,8vw,110px) 0}
.ba{position:relative;aspect-ratio:16/10;max-width:1000px;margin:46px auto 0;border-radius:14px;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 40px 82px -42px rgba(25,21,18,.45);border:1px solid var(--line)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba .before{filter:saturate(.4) brightness(.76) contrast(.9) sepia(.18);clip-path:inset(0 var(--clip,50%) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--paint);transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.4);transition:background .5s;pointer-events:none}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--paint);border:3px solid var(--paper);display:grid;place-items:center;box-shadow:0 6px 20px rgba(25,21,18,.42);transition:background .5s}
.ba-grip::before,.ba-grip::after{content:"";position:absolute;border-block:5px solid transparent}
.ba-grip::before{border-right:7px solid var(--on-paint);left:13px}
.ba-grip::after{border-left:7px solid var(--on-paint);right:13px}
.ba-tag{position:absolute;bottom:16px;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:4px;color:#fff;background:rgba(25,21,18,.72);backdrop-filter:blur(4px);pointer-events:none}
.ba-tag.b{left:16px}.ba-tag.a{right:16px;background:var(--paint);color:var(--on-paint)}
@media(max-width:640px){.ba{aspect-ratio:3/4}.ba-grip{width:56px;height:56px}}

/* ===== CRAFT scroll-progress timeline (signature #2) ===== */
.craft-steps{position:relative;padding-left:34px}
.craft-steps::before{content:"";position:absolute;left:6px;top:36px;bottom:36px;width:2px;background:#2e2822}
.craft-steps::after{content:"";position:absolute;left:6px;top:36px;width:2px;height:calc((100% - 72px) * var(--cprog,0));background:var(--paint);box-shadow:0 0 11px var(--paint);transition:height .18s ease-out}
.craft-step::before{content:"";position:absolute;left:-34px;top:38px;width:12px;height:12px;border-radius:50%;background:#2e2822;border:2px solid var(--ink);transition:background .4s,box-shadow .4s,transform .4s;z-index:1}
.craft-step.lit::before{background:var(--paint);box-shadow:0 0 0 5px color-mix(in srgb,var(--paint) 26%,transparent);transform:scale(1.15)}
.craft-step .cn{transition:color .5s,opacity .5s}
.craft-step.lit .cn{opacity:1;color:var(--paint-soft)}
@media(max-width:820px){.craft-steps{padding-left:30px}.craft-step::before{left:-30px}}

/* ===== Room-Visualizer: Wand faerbt sich live mit gewaehlter Farbe (#3) ===== */
.room{position:relative}
.room .wallpaint{position:absolute;inset:0 0 44% 0;background:var(--paint);mix-blend-mode:multiply;opacity:.5;pointer-events:none;z-index:1;transition:background .55s var(--ease),opacity .55s;mask:linear-gradient(#000 62%,transparent);-webkit-mask:linear-gradient(#000 62%,transparent)}
.room img{position:relative;z-index:0}
.room .tag-live,.room .readout{z-index:3}

/* Try-your-color: after = Wand in Studio-Farbe, before = heutige matte Wand */
.ba .ba-paint{position:absolute;inset:0;background:var(--paint);mix-blend-mode:multiply;opacity:.46;pointer-events:none;z-index:1;transition:background .55s var(--ease);mask:linear-gradient(#000 42%,#00000088 58%,transparent 74%);-webkit-mask:linear-gradient(#000 42%,#00000088 58%,transparent 74%)}
.ba .before{z-index:2}
.ba .ba-stains{position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(0 var(--clip,50%) 0 0);mix-blend-mode:multiply;opacity:.5;background:
 radial-gradient(220px 140px at 18% 30%,#8d846f55,transparent 70%),
 radial-gradient(300px 190px at 62% 18%,#7d745f44,transparent 70%),
 radial-gradient(180px 220px at 38% 62%,#8a806b4d,transparent 70%),
 radial-gradient(260px 160px at 82% 48%,#756c5844,transparent 72%)}
.ba-tag.a b{font-weight:700}

/* motion pass: rotierender Stamp, Parallax, Service-Hover-Boost */
.hero-stamp svg{animation:stampspin 14s linear infinite}
@keyframes stampspin{to{transform:rotate(360deg)}}
.svc-c.photo .ph::before{content:"View service →";position:absolute;left:14px;bottom:12px;z-index:3;background:var(--paint);color:var(--on-paint);font-weight:700;font-size:.8rem;padding:8px 14px;border-radius:100px;opacity:0;transform:translateY(8px);transition:all .35s var(--ease)}
.svc-c.photo:hover .ph::before{opacity:1;transform:none}
.svc-c .num{transition:background .3s,color .3s}
.svc-c:hover .num{background:var(--paint);color:var(--on-paint)}
.paintwall,.craft-fig img{will-change:transform}


/* ============================================================
   AWWWARDS LAYER v1 — interaction: paint cursor, scroll brush,
   magnetic CTAs. Progressive: no JS -> native cursor stays.
   ============================================================ */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;pointer-events:none;
  background:linear-gradient(90deg,var(--paint),var(--paint-deep));box-shadow:0 0 12px -2px var(--paint);
  transition:background .5s}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor [role=button],body.has-cursor summary,
body.has-cursor input,body.has-cursor label,body.has-cursor .ba{cursor:none}
.cur-ring,.cur-dot{position:fixed;top:0;left:0;z-index:2600;pointer-events:none;border-radius:50%;
  mix-blend-mode:multiply;will-change:transform}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--paint);opacity:.65;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .35s,border-color .5s}
.cur-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--paint);
  transition:opacity .35s,transform .1s,background .5s}
body.cur-hot .cur-ring{width:54px;height:54px;margin:-27px 0 0 -27px;opacity:.9;
  background:color-mix(in srgb,var(--paint) 15%,transparent)}
body.cur-hot .cur-dot{opacity:0}
body.cur-press .cur-ring{width:26px;height:26px;margin:-13px 0 0 -13px}
@media(hover:none),(pointer:coarse){.cur-ring,.cur-dot{display:none!important}body.has-cursor,body.has-cursor *{cursor:auto}}
@media(prefers-reduced-motion:reduce){.cur-ring,.cur-dot{display:none!important}}


/* ============================================================
   AWWWARDS LAYER v2 — kinetic split headlines (word rise).
   JS wraps each word; reduced-motion / no-JS -> full static text.
   ============================================================ */
.kin .wm{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.05;padding-bottom:.02em;margin-bottom:-.02em}
.kin .wm>i,.kin .wm>em>i{display:inline-block;font-style:inherit;transform:translateY(128%) skewY(7deg) scale(.94);transform-origin:left bottom;opacity:0;filter:blur(16px);transition:transform 1.05s var(--ease),opacity .7s var(--ease),filter .85s var(--ease)}
.kin .wm>em{font-style:italic;color:var(--paint);transition:color .5s}
.kin.in .wm>i,.kin.in .wm>em>i{transform:none;opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.kin .wm>i,.kin .wm>em>i{transform:none!important;opacity:1!important;filter:none!important;transition:none}}


/* ============================================================
   AWWWARDS LAYER v3 — tilt + spotlight on service & gallery cards.
   pointer:fine only; reduced-motion/touch -> flat.
   ============================================================ */
.svc-c,.gcell{transform-style:preserve-3d}
.svc-c::after,.gcell::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;z-index:4;
  transition:opacity .35s;mix-blend-mode:soft-light;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--paint) 30%,transparent),transparent 60%)}
.svc-c.tilting::after,.gcell.tilting::after{opacity:1}
@media(hover:none),(pointer:coarse){.svc-c::after,.gcell::after{content:none}}
@media(prefers-reduced-motion:reduce){.svc-c,.gcell{transform:none!important}}


/* ============================================================
   AWWWARDS LAYER v4 — image clip-reveal on scroll (wall unveiled).
   Photo wipes up from bottom as it enters. reduced-motion -> full.
   ============================================================ */
.reveal-img{clip-path:inset(0 0 100% 0)}
.reveal-img.shown{clip-path:inset(0 0 0% 0);transition:clip-path 1.05s var(--ease)}
@media(prefers-reduced-motion:reduce){.reveal-img{clip-path:none!important;transition:none}}


/* ============================================================
   AWWWARDS LAYER v5 — named-color deck marquee (Farrow&Ball feel).
   Reads live deck colors; duplicated track for seamless loop.
   ============================================================ */
.cmarq{overflow:hidden;contain:layout paint;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card);padding:17px 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cmarq-track{display:flex;width:max-content;animation:cmarq 46s linear infinite}
.cmarq:hover .cmarq-track{animation-play-state:paused}
.cmarq-chip{display:inline-flex;align-items:center;gap:11px;padding:0 30px;font-family:var(--ff-m);font-size:.82rem;letter-spacing:.03em;color:var(--ink-2);white-space:nowrap}
.cmarq-chip .sw{width:15px;height:15px;border-radius:4px 4px 4px 7px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.cmarq-chip .no{color:var(--ink-3);font-size:.72rem;letter-spacing:.06em}
@keyframes cmarq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cmarq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:6px 0}}


/* ============================================================
   AWWWARDS LAYER v7 — masking-tape peel-in (eyebrows) + living grain.
   Pure CSS. reduced-motion -> static.
   ============================================================ */
.reveal .eyebrow{opacity:0;transform:translateY(-7px) rotate(-6deg)}
.reveal.in .eyebrow{opacity:1;transform:rotate(-.6deg);transition:opacity .5s var(--ease) .12s,transform .62s var(--ease) .12s}
.reveal.in .eyebrow.c-center{transform:rotate(.4deg)}
body::before{inset:-6%;animation:grainshift 7.5s steps(5) infinite}
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.reveal .eyebrow{opacity:1!important;transform:rotate(-.6deg)!important}body::before{animation:none;inset:0}}


/* ============================================================
   AWWWARDS LAYER v9 — pull-a-swatch: deck chip lifts like a
   paint card drawn from the fan deck. CSS-only, overrides -4px.
   ============================================================ */
.deck button:hover{transform:translateY(-9px) rotate(-3deg) scale(1.05);z-index:3;
  box-shadow:0 15px 26px -10px rgba(25,21,18,.55),inset 0 0 0 1px rgba(0,0,0,.1),inset 0 -8px 14px -8px rgba(0,0,0,.28)}
@supports selector(:has(*)){.deck:has(button:hover) button:not(:hover){opacity:.8;transition:opacity .3s}}
@media(prefers-reduced-motion:reduce){.deck button:hover{transform:translateY(-4px);transition:none}}


/* ============ THE CREW — team section (halal: monogram avatars, no faces) ============ */
.crew-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:6px;align-items:stretch}
.crew-c{grid-column:span 4}
.crew-c.lead{grid-column:span 6;flex-direction:row;align-items:center;gap:22px}
.crew-c.lead .crew-av{width:74px;height:74px;font-size:1.65rem;flex:none;border-radius:16px 16px 16px 26px}
.crew-c.lead .crew-bd b{font-size:1.34rem}
.crew-c:not(.lead){grid-column:span 2;text-align:center;align-items:center}
.crew-c:not(.lead) .crew-av{margin-inline:auto}
.lead-note{font-size:.9rem;color:var(--ink-2);margin-top:11px;line-height:1.55;max-width:38ch}
.crew-c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;display:flex;flex-direction:column;gap:15px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.crew-c:hover{transform:translateY(-5px);box-shadow:var(--sh-1)}
.crew-av{width:54px;height:54px;border-radius:14px 14px 14px 22px;background:color-mix(in srgb,var(--sw,#31513f) 16%,var(--card));color:var(--sw,#31513f);display:grid;place-items:center;font-family:var(--ff-g);font-weight:800;font-size:1.24rem;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:background .5s,color .5s}
.crew-bd b{display:block;font-family:var(--ff-g);font-weight:700;font-size:1.04rem}
.crew-bd span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:3px}
.crew-note{display:flex;align-items:center;gap:9px;margin-top:24px;font-family:var(--ff-m);font-size:.75rem;letter-spacing:.02em;color:var(--ink-3);justify-content:center;text-align:center}
.crew-note svg{color:var(--paint);flex:none}
@media(max-width:900px){.crew-grid{grid-template-columns:repeat(2,1fr)}.crew-c,.crew-c.lead,.crew-c:not(.lead){grid-column:span 1}.crew-c.lead{grid-column:span 2;flex-direction:row}.crew-c:not(.lead){text-align:left;align-items:flex-start}.crew-c:not(.lead) .crew-av{margin-inline:0}}
@media(max-width:520px){.crew-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto}.crew-c.lead{grid-column:span 1;flex-direction:column;text-align:left}}


/* ============ SERVICES editorial: 2 Feature-Karten gross, Rest 3-col ============ */
.svc-c.lg{grid-column:span 6}
.svc-c.lg .ph{aspect-ratio:16/10.4}
.svc-c.lg .bd{padding:28px 30px 30px}
.svc-c.lg h3{font-size:1.72rem}
.svc-c.lg .bd p{font-size:1.02rem;max-width:44ch}
@media(max-width:760px){.svc-c.lg{grid-column:span 12}}


/* ============ KOHÄRENTE BILD-ÄSTHETIK (Kampagnen-Optik über alle Fotos) ============ */
.svc-c.photo .ph img,.gcell img,.craft-fig img,.studio .room img{filter:saturate(1.06) contrast(1.06) brightness(1.004)}
/* Feature-Bilder: subtiler Marken-Duotone-Wash, weicht bei Hover */
.svc-c.lg .ph::before,.gcell.big::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(158deg,color-mix(in srgb,var(--paint) 30%,transparent),transparent 58%);mix-blend-mode:multiply;opacity:.42;transition:opacity .55s var(--ease)}
.svc-c.lg:hover .ph::before,.gcell.big:hover::before{opacity:.16}


/* ============ IMMERSIVE STATEMENT (zweiter Wow-Moment) ============ */
.statement{position:relative;padding:clamp(130px,22vw,260px) 0;overflow:clip;color:var(--paper);margin:clamp(30px,5vw,60px) 0}
.statement .stmt-bg{position:absolute;inset:0;z-index:0}
.statement .stmt-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(1.08) contrast(1.04)}
.statement .stmt-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,color-mix(in srgb,var(--ink) 62%,transparent),color-mix(in srgb,var(--paint-deep) 34%,transparent))}
.statement .wrap{position:relative;z-index:2}
.stmt-q{max-width:22ch;margin:0}
.stmt-lead{display:block;font-family:var(--ff-m);font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 78%,transparent);margin-bottom:22px}
.stmt-big{display:block;font-family:var(--ff-d);font-size:clamp(2.9rem,7.4vw,6.4rem);line-height:1.02;letter-spacing:-.016em}
.stmt-big em{font-style:italic;color:#8fd6a8}
.stmt-sub{display:block;font-size:1.16rem;color:color-mix(in srgb,var(--paper) 82%,transparent);max-width:46ch;margin-top:26px;line-height:1.62}


/* ============ ASSURANCE: Garantie + Credentials + Finanzierung (asymmetrisch) ============ */
.assure-grid{display:grid;grid-template-columns:1.34fr .66fr;gap:clamp(16px,2vw,26px);align-items:stretch}
.assure-main{background:var(--paint);color:var(--on-paint);border-radius:var(--r);padding:clamp(32px,4vw,56px);transition:background .5s;position:relative;overflow:hidden}
.assure-main::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;background:color-mix(in srgb,var(--on-paint) 8%,transparent);pointer-events:none}
.a-eye{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--on-paint) 72%,transparent);margin-bottom:16px}
.assure-main h2{font-size:clamp(2.1rem,3.6vw,3.2rem);max-width:16ch}
.assure-main h2 em{font-style:italic;color:#a9e3bd}
.assure-main>p{color:color-mix(in srgb,var(--on-paint) 84%,transparent);max-width:52ch;margin-top:16px;font-size:1.05rem;position:relative}
.assure-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;position:relative}
.ab{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--on-paint) 12%,transparent);border:1px solid color-mix(in srgb,var(--on-paint) 24%,transparent);border-radius:100px;padding:9px 15px 9px 12px;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.04em}
.ab svg{width:15px;height:15px;fill:none;stroke:#a9e3bd;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.assure-fin{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.fin-k{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paint);margin-bottom:12px}
.assure-fin h3{font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.12}
.assure-fin h3 em{font-style:italic;color:var(--paint)}
.assure-fin>p{color:var(--ink-2);font-size:.98rem;margin-top:12px;line-height:1.6}
.fin-cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.fin-cards span{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.04em;color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:7px 11px}
.fin-cards .apr{color:var(--paint);border-color:var(--paint);font-weight:700}
@media(max-width:820px){.assure-grid{grid-template-columns:1fr}}


/* ============ REVIEWS-Sektion: getönter Wuchtmoment im hellen Mittelteil ============ */
.reviews-sec{background:var(--paper-2);padding:clamp(56px,8vw,104px) 0;margin:clamp(20px,4vw,50px) 0;position:relative}
.reviews-sec .rev-spot .q em{font-style:italic;color:var(--paint)}
.reviews-sec .rev-src .rs{background:var(--card)}


/* ============ SCROLL-DRIVEN: Statement-Bild atmet (animation-timeline, GPU) ============ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .statement .stmt-bg img{animation:stmtzoom linear both;animation-timeline:view();animation-range:cover}
  }
}
@keyframes stmtzoom{from{transform:scale(1.16)}to{transform:scale(1.0)}}


/* ============ SCHLUSS-CTA stärker (letzter Eindruck) ============ */
.cta-panel h2{font-size:clamp(2.7rem,5.6vw,4.8rem);max-width:15ch;margin-inline:auto;line-height:1.0;letter-spacing:-.015em}
.cta-panel h2 em,.cta-panel h2 .wm>em>i,.cta-panel h2 em>i{color:#a9e3bd!important;font-style:italic}
.cta-panel p{font-size:1.18rem;max-width:50ch;margin:20px auto 0;color:color-mix(in srgb,var(--on-paint) 88%,transparent)}
.cta-panel::after{content:"";position:absolute;left:-70px;bottom:-70px;width:280px;height:280px;border-radius:50%;background:color-mix(in srgb,var(--on-paint) 7%,transparent);pointer-events:none}


/* ============ KONTRAST-FIX: em auf grünen Flächen hell (Care Plan + Assurance) ============ */
.assure-main h2 em,.assure-main h2 .wm>em>i,.plan-hi h2 em,.plan-hi h2 .wm>em>i,.plan-hi .pc h2 em{color:#a9e3bd!important;font-style:italic}

/* Mobil-Menü über Header (z-index-Fix) */
body.menu-open header{z-index:40}


/* ============ ROBUSTHEIT: Services-Grid adaptiv (Layout hält bei JEDER Leistungs-Anzahl) ============ */
/* Feature-Karten (lg span6) nur ab 6 Leistungen — sonst wird lg zu normal (span4) */
.svc-grid:not(:has(.svc-c.photo:nth-of-type(6))) .svc-c.lg{grid-column:span 4}
/* genau 4 Leistungen: sauberes 2x2 (span6) statt 3+1 */
.svc-grid:has(.svc-c.photo:nth-of-type(4)):not(:has(.svc-c.photo:nth-of-type(5))) .svc-c.photo{grid-column:span 6}
/* genau 2 Leistungen: 2 breite Karten */
.svc-grid:has(.svc-c.photo:nth-of-type(2)):not(:has(.svc-c.photo:nth-of-type(3))) .svc-c.photo{grid-column:span 6}
@media(max-width:760px){.svc-grid .svc-c.photo,.svc-grid .svc-c.lg{grid-column:span 12}}

/* ROBUSTHEIT: wenige Reviews (<5) → statisch zentriert statt Marquee-Lücke */
.revs:not(:has(.rev:nth-of-type(5))){animation:none;width:100%;justify-content:center;flex-wrap:wrap}

/* ROBUSTHEIT: Gallery graceful (wenige Bilder → gleichmässig statt big+Leerraum) */
.gal:not(:has(.gcell:nth-of-type(3))) .gcell{grid-column:span 6;grid-row:auto;aspect-ratio:4/3.1}
.gal:has(.gcell:nth-of-type(1)):not(:has(.gcell:nth-of-type(2))) .gcell{grid-column:span 12;aspect-ratio:16/6.5}

/* FAQ editorial: 2-col, sticky Headline links */
.faq-sec .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,64px);align-items:start}
.faq-sec .sec-head{position:sticky;top:110px;margin-bottom:0;text-align:left}
@media(max-width:820px){.faq-sec .wrap{grid-template-columns:1fr;gap:24px}.faq-sec .sec-head{position:static}}

/* Guides editorial: 2-col sticky Headline (wie FAQ) */
.guides-sec .wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,64px);align-items:start}
.guides-sec .sec-head{position:sticky;top:110px;margin-bottom:0}
@media(max-width:820px){.guides-sec .wrap{grid-template-columns:1fr;gap:24px}.guides-sec .sec-head{position:static}}

/* ROBUSTHEIT: Stats adaptiv (bei <4 gleichmässig statt Leerspalte) */
.stats .wrap:not(:has(.stat:nth-of-type(4))){grid-template-columns:repeat(3,1fr)}
.stats .wrap:not(:has(.stat:nth-of-type(3))){grid-template-columns:repeat(2,1fr)}


/* ============ SNAPSHOT BENTO (masterclass, Award-2026-Muster) ============ */
.snapshot{padding:clamp(56px,8vw,96px) 0 0}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,1fr);gap:clamp(12px,1.4vw,18px)}
.b-img{grid-column:span 2;grid-row:span 2;position:relative;border-radius:var(--r);overflow:hidden;margin:0}
.b-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05)}
.b-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 22px 20px;color:#fff;font-family:var(--ff-d);font-size:1.25rem;line-height:1.2;background:linear-gradient(to top,rgba(25,21,18,.72),rgba(25,21,18,.1) 70%,transparent);z-index:2}
.b-img .bi-eye{display:block;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85;margin-bottom:7px}
.b-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 20px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.b-stat:hover{transform:translateY(-4px);box-shadow:var(--sh-1)}
.b-stat .n{font-family:var(--ff-d);font-size:clamp(2.2rem,3vw,3.1rem);line-height:.92;display:flex;align-items:baseline;gap:1px;letter-spacing:-.02em}
.b-stat .n em{font-style:italic;color:var(--paint);font-size:.58em;transition:color .5s}
.b-stat .l{font-family:var(--ff-m);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:11px}
.b-quote{grid-column:span 2;background:var(--paint);color:var(--on-paint);border-radius:var(--r);padding:clamp(24px,3vw,36px);margin:0;display:flex;flex-direction:column;justify-content:center;transition:background .5s}
.b-quote .bq-stars{color:var(--gold);letter-spacing:.12em;font-size:.95rem;margin-bottom:13px}
.b-quote p{font-family:var(--ff-d);font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.28}
.b-quote cite{display:block;font-style:normal;font-family:var(--ff-m);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--on-paint) 82%,transparent);margin-top:15px}
.b-deck{grid-column:span 2;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;justify-content:center}
.b-deck .bd-eye{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px}
.b-deck .bd-swatches{display:flex;gap:9px;height:46px}
.b-deck .bd-swatches span{flex:1;border-radius:6px 6px 6px 11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),inset 0 -6px 10px -6px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.b-deck .bd-swatches:hover span{transform:translateY(-3px)}
@media(max-width:820px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(120px,auto)}.b-img{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}.b-quote,.b-deck{grid-column:span 2}}
@media(max-width:520px){.bento{grid-template-columns:1fr}.b-img,.b-stat,.b-quote,.b-deck{grid-column:span 1}}

/* ============ CRAFT PAINT-SWEEP (masterclass: Farbe wischt beim Scrollen hoch) ============ */
.craft-fig{position:sticky;top:110px}
.craft-fig::after{content:"";position:absolute;left:-3%;right:-3%;z-index:2;pointer-events:none;
  bottom:calc(5% + var(--cprog,0) * 84%);height:5px;border-radius:3px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paint) 80%,white 35%) 25%,color-mix(in srgb,white 55%,var(--paint)) 55%,color-mix(in srgb,var(--paint) 80%,white 35%) 78%,transparent);
  filter:blur(.4px);box-shadow:0 3px 20px 2px color-mix(in srgb,var(--paint) 45%,transparent);
  opacity:calc(.35 + var(--cprog,0)*.55);transition:bottom .18s ease-out}
.craft-fig .fig-cap{z-index:2}
@media(prefers-reduced-motion:reduce){.craft-fig::after{height:100%;transition:none}}

/* ============ MICRO: Underline-Draw Links + Gallery Caption-Slide ============ */
.more{position:relative;display:inline-block;padding-bottom:3px}
.more::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.svc-c:hover .more::after,.svc-all:hover .more::after{transform:scaleX(1)}
.gcell .cap{transition:transform .5s var(--ease)}
.gcell:hover .cap{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){.more::after,.gcell .cap{transition:none}}

/* ============ REVIEWS als Farbmuster-Karten (thematisch: Maler-Farbfaecher) ============ */
.rev{position:relative}
.rev .rev-chip{display:flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.rev .rev-chip::before{content:"";width:28px;height:28px;flex:none;border-radius:7px 7px 7px 12px;background:var(--sw,#31513f);box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 3px 8px -3px color-mix(in srgb,var(--sw,#31513f) 65%,transparent)}
/* leichte Streuung wie hingelegte Musterkarten */
.revs .rev{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.revs .rev:nth-child(3n+1){transform:rotate(-1.3deg)}
.revs .rev:nth-child(3n+2){transform:rotate(.9deg)}
.revs .rev:nth-child(3n){transform:rotate(-.4deg)}
.rev-wrap:hover .revs .rev:hover{transform:rotate(0) translateY(-6px)!important;box-shadow:var(--sh-2);z-index:3}
@media(prefers-reduced-motion:reduce){.revs .rev{transform:none!important}}

/* ============ COLOR-DRENCH: gepinnte cinematische Szene (Scroll-Timeline) ============ */
.drench{position:relative;height:240vh;background:var(--ink)}
.drench-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.drench-fill{position:absolute;inset:0;z-index:1;background:var(--paint);
  clip-path:circle(calc(var(--dprog,0) * 152%) at 50% 100%);transition:background .5s}
.drench-copy{position:relative;z-index:2;text-align:center;max-width:min(92vw,860px);padding:0 24px;
  opacity:calc((var(--dprog,0) - .46) * 3.6);transform:translateY(calc((1 - var(--dprog,0)) * 22px))}
.dc-eye{display:block;font-family:var(--ff-m);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-paint);opacity:.82;margin-bottom:16px}
.dc-head{font-family:var(--ff-d);font-weight:400;font-size:clamp(2.7rem,6.4vw,5.7rem);line-height:1.02;letter-spacing:-.015em;color:var(--on-paint);margin:0 0 24px;max-width:18ch;margin-inline:auto}
.dc-head em{font-style:italic;color:var(--on-paint)!important}
.dc-sub{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.5;color:var(--on-paint);opacity:.86;max-width:36ch;margin:0 auto 32px}
.dc-cta{background:var(--on-paint);color:var(--paint);border:none}
.dc-cta:hover{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.drench{height:auto}.drench-stage{position:static;height:auto;min-height:66vh;padding:clamp(70px,11vw,130px) 0}.drench-fill{clip-path:none}.drench-copy{opacity:1;transform:none}}

/* ============ GALLERY Parallax-Tiefe (raeumliche Bewegung beim Scrollen) ============ */
.gal .gcell{overflow:hidden}
.gal .gcell img{height:124%;object-fit:cover;will-change:transform}
@media(prefers-reduced-motion:reduce){.gal .gcell img{height:100%;transform:none!important}}

/* ============ GALERIE = FARBFÄCHER (Maler-Farbfaecher, horizontal durchblaetterbar) ============ */
.gal-fan{display:flex;align-items:flex-end;justify-content:safe center;gap:0;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;
  padding:56px clamp(18px,24vw,34%) 40px;margin:0 calc(-1*clamp(20px,4vw,48px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-fan::-webkit-scrollbar{display:none}
.fan-card{flex:0 0 clamp(260px,30vw,376px);scroll-snap-align:center;position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  margin-left:clamp(-90px,-6vw,-56px);transform:rotate(var(--rot,0deg)) translateY(var(--ty,0));transform-origin:bottom center;
  box-shadow:0 18px 40px -22px rgba(25,21,18,.55);transition:transform .55s var(--ease),box-shadow .55s var(--ease);will-change:transform}
.fan-card:first-child{margin-left:0}
.fan-card:nth-child(6n+1){--rot:-5deg;--ty:10px}
.fan-card:nth-child(6n+2){--rot:3deg;--ty:2px}
.fan-card:nth-child(6n+3){--rot:-2.5deg;--ty:6px}
.fan-card:nth-child(6n+4){--rot:4deg;--ty:0px}
.fan-card:nth-child(6n+5){--rot:-3.5deg;--ty:8px}
.fan-card:nth-child(6n){--rot:2deg;--ty:4px}
.fan-card:hover,.fan-card:focus-visible{--rot:0deg;--ty:0;transform:rotate(0) translateY(-16px) scale(1.045);z-index:6;box-shadow:0 34px 66px -20px rgba(25,21,18,.55)}
.fan-card img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.06)}
.fan-card .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 18px 16px;color:#fff;background:linear-gradient(to top,rgba(25,21,18,.8),transparent);z-index:2}
.fan-card .cap .t{font-family:var(--ff-d);font-size:1.22rem;line-height:1.14}
.fan-card .cap .s{font-family:var(--ff-m);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;opacity:.82;margin-top:5px}
.gal-fan-hint{text-align:center;font-family:var(--ff-m);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
@media(prefers-reduced-motion:reduce){.fan-card{--rot:0deg!important;--ty:0!important;margin-left:10px}}

/* ============ SERVICES = HOVER-IMAGE-REVEAL-LISTE (Projektbild streicht sich rein) ============ */
.svc-reveal{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,64px);align-items:start}
.svc-list{border-bottom:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,30px);align-items:baseline;padding:clamp(18px,2.3vw,30px) 4px;border-top:1px solid var(--line);position:relative;text-decoration:none;transition:padding .4s var(--ease)}
.svc-no{font-family:var(--ff-m);font-size:.7rem;letter-spacing:.14em;color:var(--ink-3);padding-top:.5em}
.svc-name{display:block;font-family:var(--ff-d);font-weight:400;font-size:clamp(1.55rem,2.7vw,2.7rem);line-height:1.02;letter-spacing:-.01em;color:var(--ink);transition:color .4s var(--ease),transform .5s var(--ease)}
.svc-desc{display:block;font-size:.92rem;line-height:1.5;color:var(--ink-2);margin-top:8px;max-width:46ch;transition:opacity .4s}
.svc-arrow{align-self:center;font-size:1.4rem;color:var(--paint);opacity:0;transform:translateX(-12px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
@media(hover:hover){.svc-row:hover .svc-name{color:var(--paint);transform:translateX(12px)}.svc-row:hover .svc-arrow{opacity:1;transform:none}.svc-row:hover{padding-left:14px}}
.svc-row-all .svc-name{font-style:italic}
.svc-stage{position:sticky;top:104px;aspect-ratio:4/4.7;border-radius:18px;overflow:hidden;background:var(--paper-2);box-shadow:var(--sh-1);display:grid;place-items:center}
.svc-stage-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;clip-path:inset(0 0 100% 0);transition:opacity .45s var(--ease),clip-path .7s var(--ease);filter:saturate(1.06) contrast(1.05)}
.svc-stage-img.show{opacity:1;clip-path:inset(0)}
.svc-stage-hint{position:relative;z-index:1;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);transition:opacity .4s}
.svc-stage.active .svc-stage-hint{opacity:0}
@media(max-width:820px){.svc-reveal{grid-template-columns:1fr}.svc-stage{display:none}.svc-name{font-size:clamp(1.5rem,7vw,2rem)}}
@media(prefers-reduced-motion:reduce){.svc-stage-img{transition:opacity .3s;clip-path:none}.svc-name,.svc-arrow{transition:none}}

/* ============ SERVICEGEBIET: grosses laufendes Städte-Band ============ */
.city-band{grid-column:1/-1;overflow:hidden;width:100%;margin:clamp(34px,4.5vw,60px) 0 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.city-track{display:flex;align-items:center;width:max-content;gap:clamp(14px,1.6vw,26px);animation:cityscroll 34s linear infinite;font-family:var(--ff-d);font-size:clamp(1.7rem,3.1vw,3rem);line-height:1.1;white-space:nowrap}
.city-band:hover .city-track{animation-play-state:paused}
.city-track a{color:var(--ink);text-decoration:none;font-style:italic;transition:color .3s var(--ease)}
.city-track a:hover{color:var(--paint)}
.city-track .cb-dot{color:var(--paint);font-style:normal;font-size:.5em;opacity:.7}
@keyframes cityscroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.city-track{animation:none;flex-wrap:wrap;width:auto;white-space:normal;font-size:1.5rem}}

/* ============ HEADER MEGA-MENU aufgewertet (echte Bilder statt billiger Icons) ============ */
.drop-menu{grid-template-columns:repeat(2,290px);padding:14px;gap:4px;border-radius:20px}
.drop-menu a{padding:10px;align-items:center}
.drop-menu .di{width:56px;height:56px;border-radius:11px 11px 11px 18px;overflow:hidden;background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.drop-menu .di img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04);transition:transform .5s var(--ease)}
.drop-menu a:hover .di img{transform:scale(1.09)}
.drop-menu .dt{font-size:1rem;font-family:var(--ff-d);font-weight:400}
.drop-menu .dd{font-size:.8rem;margin-top:2px}
.drop-menu .dm-all{margin-top:8px;padding-top:15px}
/* Logo marken-stärker */
.logo .mark{background:var(--ink);border-radius:11px 11px 11px 17px;transition:transform .4s var(--ease),background .4s}
.logo:hover .mark{transform:rotate(-8deg) scale(1.05);background:var(--paint)}
.logo>span:not(.mark){font-family:var(--ff-d);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;line-height:.95}
.logo small{font-family:var(--ff-m);font-weight:400;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);display:block;margin-top:2px}

/* ============ Reviews: Rating-Badges schön (redundanter Spotlight raus) ============ */
.rev-head{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4vw,52px)}
.rev-src{display:flex;gap:16px}
.rs{display:flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 24px 15px 17px;box-shadow:var(--sh-1);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.rs:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.rs-logo{width:42px;height:42px;flex:none;display:grid;place-items:center}
.rs-logo svg{width:100%;height:100%}
.rs-body{display:grid;line-height:1}
.rs-body b{font-family:var(--ff-d);font-weight:400;font-size:2.1rem;line-height:.95}
.rs-stars{color:#e6a63c;font-size:.82rem;letter-spacing:.05em;margin-top:3px}
.rs-meta{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.05em;color:var(--ink-3);margin-top:4px}
@media(max-width:820px){.rev-head{grid-template-columns:1fr;align-items:start}.rev-src{flex-wrap:wrap}}

/* ============ FAQ Kategorien (konsolidiert, durchdacht) ============ */
.faq-group + .faq-group{margin-top:clamp(26px,3vw,40px)}
.faq-cat{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paint);padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.faq-cat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--paint)}

/* ============ STATEMENT Prozess-Beleg (unsichtbare Arbeit sichtbar) ============ */
.statement .stmt-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,6vw,88px);align-items:center}
.stmt-q{max-width:19ch}
.stmt-proof{position:relative;z-index:1;border-left:1px solid color-mix(in srgb,var(--paper) 28%,transparent);padding-left:clamp(26px,3vw,44px)}
.sp-ratio{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.sp-num{font-family:var(--ff-d);font-weight:400;font-size:clamp(4rem,8vw,6.6rem);line-height:.82;color:#8fd6a8}
.sp-num i{font-style:normal;font-size:.42em;vertical-align:super;opacity:.85}
.sp-lbl{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:color-mix(in srgb,var(--paper) 80%,transparent)}
.sp-list{list-style:none;display:grid;gap:0}
.sp-list li{position:relative;padding:15px 0 15px 30px;font-size:1.02rem;line-height:1.5;color:color-mix(in srgb,var(--paper) 92%,transparent);border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent);opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in .sp-list li,.stmt-proof.in .sp-list li{opacity:1;transform:none}
.sp-list li:nth-child(1){transition-delay:.05s}.sp-list li:nth-child(2){transition-delay:.15s}.sp-list li:nth-child(3){transition-delay:.25s}.sp-list li:nth-child(4){transition-delay:.35s}
.sp-list li::before{content:"";position:absolute;left:0;top:22px;width:12px;height:12px;border-radius:3px 3px 3px 6px;background:#8fd6a8;box-shadow:0 0 0 4px color-mix(in srgb,#8fd6a8 20%,transparent)}
@media(prefers-reduced-motion:reduce){.sp-list li{opacity:1;transform:none}}
@media(max-width:860px){.statement .stmt-grid{grid-template-columns:1fr}.stmt-proof{border-left:none;border-top:1px solid color-mix(in srgb,var(--paper) 24%,transparent);padding-left:0;padding-top:34px}.stmt-q{max-width:100%}}

/* ============ DRENCH Farbmuster-Karte + Textur (Endansicht reicher) ============ */
.dc-swatch{display:inline-flex;flex-direction:column;gap:7px;margin:4px auto 26px;padding:15px 26px 16px;border:1px solid color-mix(in srgb,var(--on-paint) 34%,transparent);border-radius:4px 4px 4px 12px;background:color-mix(in srgb,var(--on-paint) 7%,transparent);backdrop-filter:blur(3px)}
.dc-sw-name{font-family:var(--ff-d);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1;color:var(--on-paint)}
.dc-sw-line{font-family:var(--ff-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-paint);opacity:.82}
.drench-fill::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){.drench-fill::after{opacity:.35}}

/* ============ SERVICEGEBIET verwurzelt-Element + Hours schöner ============ */
.area-roots{display:flex;gap:clamp(24px,3vw,44px);align-items:center;margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.ar-year{display:flex;flex-direction:column;gap:4px;flex:none}
.ar-lead{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.ar-2004{font-family:var(--ff-d);font-weight:400;font-size:clamp(3.2rem,5vw,4.4rem);line-height:.85;color:var(--paint)}
.ar-facts{list-style:none;margin:0;padding:0 0 0 clamp(24px,3vw,40px);border-left:1px solid var(--line);display:grid;gap:11px}
.ar-facts li{position:relative;padding-left:24px;font-size:.98rem;color:var(--ink-2);line-height:1.4}
.ar-facts li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:3px 3px 3px 6px;background:var(--paint)}
.hc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hc-top h3{margin:0}
.hc-status{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px 6px 24px;border-radius:100px;position:relative}
.hc-status::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%}
.hc-status.is-open{background:color-mix(in srgb,var(--paint) 12%,transparent);color:var(--paint-deep)}
.hc-status.is-open::before{background:#3fbf6a;box-shadow:0 0 0 3px color-mix(in srgb,#3fbf6a 25%,transparent);animation:hcpulse 2s ease-in-out infinite}
.hc-status.is-closed{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink-3)}
.hc-status.is-closed::before{background:var(--ink-3)}
@keyframes hcpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,#3fbf6a 0%,transparent)}}
#hoursList li.today{color:var(--ink);font-weight:600}
#hoursList li.today b{color:var(--paint)}
@media(max-width:560px){.area-roots{flex-direction:column;align-items:flex-start;gap:20px}.ar-facts{border-left:none;padding-left:0}}
@media(prefers-reduced-motion:reduce){.hc-status.is-open::before{animation:none}}

/* ============ WHY interaktives Register (mehr als Liste) ============ */
.why-i{padding-left:0;transition:padding .4s var(--ease)}
.why-i::after{content:"";position:absolute;left:-2px;top:24px;bottom:24px;width:3px;border-radius:2px;background:var(--paint);transform:scaleY(0);transform-origin:top center;transition:transform .55s var(--ease)}
@media(hover:hover){.why-i:hover{padding-left:22px}.why-i:hover::after{transform:scaleY(1)}.why-i:hover .wn{opacity:1}}
.why-i .wn{transition:opacity .35s var(--ease),transform .5s var(--ease)}
.why-i:hover .wn{transform:translateY(-2px)}
.wtag{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--ff-m);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paint);opacity:.92}
.wtag::before{content:"";width:14px;height:1px;background:var(--paint)}

/* ============ CREW Farbfächer-Monogramme (thematisch) ============ */
.crew-c:hover .crew-av{background:var(--sw,#31513f);color:#fff}
.crew-av{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sw,#31513f) 22%,transparent),0 3px 10px -4px color-mix(in srgb,var(--sw,#31513f) 50%,transparent)}
.crew-c{position:relative;overflow:hidden}
.crew-c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sw,#31513f);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.crew-c:hover::after{transform:scaleX(1)}

/* ============ CARE-PLAN Mitgliedskarte ============ */
.pcard{background:color-mix(in srgb,var(--on-paint) 9%,transparent);border:1px solid color-mix(in srgb,var(--on-paint) 26%,transparent);border-radius:18px;padding:22px 26px 20px;backdrop-filter:blur(5px);position:relative;z-index:2}
.pcard-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;margin-bottom:2px;border-bottom:1px solid color-mix(in srgb,var(--on-paint) 20%,transparent)}
.pcard-name{font-family:var(--ff-d);font-weight:400;font-size:1.32rem;color:var(--on-paint)}
.pcard-badge{font-family:var(--ff-m);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;border-radius:100px;background:var(--on-paint);color:var(--paint);font-weight:700}
.pcard .pfeat li{border-top-color:color-mix(in srgb,var(--on-paint) 16%,transparent)}
.pcard-foot{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--on-paint) 20%,transparent);font-family:var(--ff-m);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--on-paint) 78%,transparent)}
.pcard-note{color:var(--on-paint);opacity:.95}
@media(max-width:560px){.pcard-foot{flex-direction:column;gap:4px}}

/* ============ SERVICE-HERO 2-col integriert (Unterseiten) ============ */
.svc-hero{padding:clamp(40px,5vw,74px) 0 clamp(20px,3vw,40px)}
.svc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.svc-hero-grid .hero-copy{max-width:none;padding-bottom:0}
.svc-hero-grid h1{font-size:clamp(2.3rem,4.7vw,4rem);line-height:1.02;letter-spacing:-.018em;margin:16px 0 16px}
.svc-hero-fig{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:4/3.1;margin:0}
.svc-hero-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04)}
.shf-tag{position:absolute;left:16px;bottom:16px;font-family:var(--ff-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(6px);padding:8px 14px;border-radius:100px}
.svc-specs{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.svc-specs span{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);border-radius:100px;color:var(--ink-2);background:var(--card)}
@media(max-width:820px){.svc-hero-grid{grid-template-columns:1fr;gap:28px}.svc-hero-fig{aspect-ratio:16/10}}




/* ============ BENTO staggered gegenläufig (kinetische Spannung) ============ */
.snapshot .bento.reveal{opacity:1;transform:none}
.bento>*{opacity:0;transition:opacity .7s var(--ease),transform .95s var(--ease);will-change:transform,opacity}
.bento>*:nth-child(odd){transform:translateY(-50px)}
.bento>*:nth-child(even){transform:translateY(56px)}
.bento.in>*{opacity:1;transform:none}
.bento.in>*:nth-child(1){transition-delay:.04s}
.bento.in>*:nth-child(2){transition-delay:.10s}
.bento.in>*:nth-child(3){transition-delay:.15s}
.bento.in>*:nth-child(4){transition-delay:.20s}
.bento.in>*:nth-child(5){transition-delay:.25s}
.bento.in>*:nth-child(6){transition-delay:.19s}
.bento.in>*:nth-child(7){transition-delay:.27s}
@media(prefers-reduced-motion:reduce){.bento>*{opacity:1!important;transform:none!important;transition:none}}

/* ============ BENTO-Bild non-linear Zoom (cinematisch, scroll-driven) ============ */
@supports (animation-timeline: view()){
  .b-img img{animation:bimgzoom linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes bimgzoom{from{transform:scale(1.16) translateY(-1.5%)}to{transform:scale(1) translateY(0)}}
}
@media(prefers-reduced-motion:reduce){.b-img img{animation:none!important;transform:none!important}}


/* ============ HEADER clean+premium (Header ruhig, Kraft in den Rest) ============ */
.logo>span:not(.mark){font-size:1.58rem;letter-spacing:-.01em}
.mnav{gap:3px}
.mnav>a,.drop>span{font-family:var(--ff-g);font-size:.97rem;font-weight:500;letter-spacing:0;text-transform:none;padding:9px 14px;color:var(--ink-2);border:none;border-radius:9px;background:transparent;transition:color .22s var(--ease),background .22s var(--ease)}
.mnav>a:hover,.drop:hover>span,.mnav>a.on,.drop>span.on{color:var(--ink);background:var(--paper-2);border:none}
.drop>span{display:inline-flex;align-items:center;gap:6px}
.nav-right .btn{background:var(--paint);border-color:var(--paint);color:#fff;font-weight:600}
.nav-right .btn:hover{background:var(--paint-deep);border-color:var(--paint-deep)}
.nav-right .btn svg{stroke:#fff}

/* ============ Estimator trust Serif-Ziffern (billige Icons raus) ============ */
.est-copy .bl{align-items:flex-start;gap:16px}
.est-copy .bl .ic{width:auto!important;height:auto!important;min-width:1.4em;background:none!important;border:none!important;box-shadow:none!important;border-radius:0!important;font-family:var(--ff-d);font-weight:400;font-size:2.3rem;line-height:.85;color:var(--paint);opacity:.9;flex:none;padding:0;margin-top:2px}
.est-copy .bl .ic svg{display:none}
.est-copy .bl b{font-size:1.06rem}

/* ============ REVIEWS editorial Rating-Statement (award: grosse Zahl als Statement) ============ */
.rev-src{display:flex;flex-wrap:wrap;gap:13px 15px;align-items:center}
.rev-big{flex-basis:100%;display:flex;align-items:center;gap:18px;margin-bottom:3px}
.rev-big-num{font-family:var(--ff-d);font-weight:400;font-size:clamp(3.4rem,5.4vw,5rem);line-height:.76;color:var(--paint);letter-spacing:-.02em}
.rev-big-side{display:flex;flex-direction:column;gap:5px}
.rev-big-stars{color:#e6a63c;font-size:1.12rem;letter-spacing:.12em}
.rev-big-lbl{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.rev-src>.rs{padding:11px 16px}
.rev-src .rs-body b{font-size:1.42rem}
@media(max-width:560px){.rev-big-num{font-size:3.2rem}}

/* ============ STATEMENT ausrasten (riesig, wuchtig, dramatisch) ============ */
.statement{padding:clamp(120px,16vw,210px) 0}
.statement .stmt-grid{grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,90px)}
.statement .stmt-big{font-size:clamp(3.2rem,8.4vw,7.4rem);line-height:.94;letter-spacing:-.025em}
.statement .stmt-lead{font-size:.8rem;letter-spacing:.3em}
.stmt-proof{border-left:1px solid color-mix(in srgb,var(--paper) 26%,transparent);padding-left:clamp(28px,3vw,48px)}
.stmt-proof .sp-ratio{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:30px}
.stmt-proof .sp-num{font-size:clamp(5.5rem,12vw,9.5rem);line-height:.82;color:#8fd6a8}
.stmt-proof .sp-num i{font-size:.34em}
.stmt-proof .sp-lbl{font-size:.72rem;letter-spacing:.16em}
.stmt-proof .sp-list li{font-size:1.06rem;padding:16px 0 16px 32px}
.stmt-proof .sp-list li::before{width:14px;height:14px;top:20px}
@media(max-width:820px){.statement .stmt-grid{grid-template-columns:1fr}.stmt-proof{border-left:none;padding-left:0;border-top:1px solid color-mix(in srgb,var(--paper) 24%,transparent);padding-top:32px}}

/* ============ CARE-PLAN recommended-tier (Research: Membership-Card Distinktion) ============ */
.pcard{position:relative;margin-top:15px;box-shadow:0 26px 60px -30px rgba(0,0,0,.55),inset 0 0 0 1.5px color-mix(in srgb,var(--on-paint) 34%,transparent)}
.pcard::before{content:"Most homeowners choose this";position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#8fd6a8;color:#173a27;font-family:var(--ff-m);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:6px 16px;border-radius:100px;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.pcard-badge{background:#8fd6a8;color:#173a27}
.pcard-guar{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid color-mix(in srgb,var(--on-paint) 18%,transparent);font-family:var(--ff-m);font-size:.63rem;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--on-paint) 82%,transparent)}
.pcard-guar svg{color:#8fd6a8;flex:none}

/* ============ ESTIMATOR Live-Preis-Range (echtes neues Element) ============ */
.eo-price{margin:0 0 18px;padding:0 0 18px;border-bottom:1px dashed var(--line)}
.eo-price-lbl{display:block;font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.eo-price-val{display:block;font-family:var(--ff-d);font-weight:400;font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:1;color:var(--paint);letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ============ REVIEWS robuste Quellen (Facebook/BBB, je Firma per S:-Marker) ============ */
.rs-logo.fb{border-radius:50%;overflow:hidden}
.rs-logo.fb svg{width:100%;height:100%;display:block}
.rs-logo.bbb{background:#0d3c7c;color:#fff;font-family:var(--ff-g);font-weight:800;font-size:1.02rem;border-radius:50%;display:grid;place-items:center;letter-spacing:-.02em}

/* ESTIMATOR Ergebnis: Umfang + Zeit (robust, keine erfundene Zahl) */
.eo-price-val{display:flex;flex-direction:column;gap:3px}
.eo-scope{font-family:var(--ff-d);font-weight:400;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:var(--paint);letter-spacing:-.01em}
.eo-time{font-family:var(--ff-m);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ============ UNTERSEITEN Projekt-Galerie (Galerie-Niveau: Bild+Titel+Detail) ============ */
.subgal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.subgal-c{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.6;box-shadow:var(--sh-1)}
.subgal-c img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04);transition:transform .7s var(--ease)}
.subgal-c:hover img{transform:scale(1.05)}
.subgal-c figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 20px 18px;color:#fff;background:linear-gradient(to top,rgba(25,21,18,.82),rgba(25,21,18,.1) 72%,transparent);z-index:2}
.subgal-c figcaption b{display:block;font-family:var(--ff-d);font-weight:400;font-size:1.28rem;line-height:1.1;margin-bottom:5px}
.subgal-c figcaption span{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
@media(max-width:700px){.subgal{grid-template-columns:1fr}.subgal-c{aspect-ratio:16/10}}

/* ============ DRENCH Farbton-Streifen (live-Farbe tint/base/shade, robust) ============ */
.dc-strip{display:flex;margin:16px auto 2px;max-width:clamp(260px,80%,360px);border-radius:6px 6px 6px 12px;overflow:hidden;box-shadow:0 12px 30px -16px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--on-paint) 22%,transparent)}
.dc-strip span{flex:1;height:clamp(30px,4vw,40px);transition:flex .4s var(--ease)}
.dc-strip:hover span{flex:.7}
.dc-strip span:hover{flex:2}

/* ============ ESTIMATOR Design warm+krass (thematisch, nicht grau) ============ */
.est-card{background:linear-gradient(180deg,color-mix(in srgb,var(--paint) 5%,var(--card)),var(--card) 22%)}
.est-card .ehead{background:color-mix(in srgb,var(--paint) 10%,var(--card));border-bottom:1px solid color-mix(in srgb,var(--paint) 22%,transparent);border-radius:0}
.est-card .ehead b{color:var(--paint-deep)}
.est-card button{border:1px solid var(--line);transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.est-card button[aria-pressed="true"]{background:var(--paint);color:#fff;border-color:var(--paint);box-shadow:0 4px 12px -5px color-mix(in srgb,var(--paint) 60%,transparent)}
.est-card button:not([aria-pressed="true"]):hover{border-color:var(--paint);color:var(--paint-deep)}
.eo-price{background:color-mix(in srgb,var(--paint) 7%,var(--card));border:1px solid color-mix(in srgb,var(--paint) 20%,transparent);border-radius:16px 16px 16px 24px;padding:18px 22px;margin-bottom:16px}
.eo-price-lbl{color:var(--paint-deep)}
.eo-meter{display:flex;gap:6px;margin-bottom:12px}
.eo-seg{flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--paint) 16%,transparent);transition:background .5s var(--ease)}
.eo-seg.on{background:var(--paint)}

/* ESTIMATOR aktive Buttons Wandfarbe (überschreibt #estCard ink-Regel, warm) */
section.tint #estCard button[aria-pressed="true"]{background:var(--paint);border-color:var(--paint);color:#fff;box-shadow:0 4px 12px -5px color-mix(in srgb,var(--paint) 55%,transparent)}
#estCard button[aria-pressed="true"]{background:var(--paint);border-color:var(--paint);color:#fff}

/* ============ ESTIMATOR Ergebnis als Estimate-Ticket (thematisch, Abriss-Beleg + Stempel) ============ */
.est-out{position:relative;border-top:none !important;margin-top:18px;padding:28px 24px 24px;background:var(--paper);border-radius:0 0 16px 16px}
.est-out::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:10px;background:radial-gradient(circle at 7px -2px,transparent 5.5px,var(--paper) 6px) repeat-x;background-size:15px 10px}
.est-out::after{content:"Free estimate";position:absolute;top:20px;right:20px;transform:rotate(-6deg);font-family:var(--ff-m);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--paint);border:2px solid color-mix(in srgb,var(--paint) 68%,transparent);border-radius:8px;padding:5px 11px;opacity:.72;pointer-events:none}
.est-out .eo-lbl{color:var(--paint-deep)}

/* ESTIMATOR Progressive Breakdown (included kaskadiert, aus Quellcode-Research) */
.eo-inc{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0}
.eo-inc li{position:relative;padding:9px 0 9px 24px;font-size:.9rem;line-height:1.4;color:var(--ink-2);border-top:1px solid color-mix(in srgb,var(--paint) 13%,transparent);opacity:0;transform:translateY(9px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.eo-inc li.in{opacity:1;transform:none}
.eo-inc li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--paint)}
@media(prefers-reduced-motion:reduce){.eo-inc li{opacity:1;transform:none;transition:none}}

/* ============ ESTIMATOR cinematisch: Ticket rollt aus + Farb-Flut (die gewählte Wandfarbe) ============ */
.est-out{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.est-out.rolled{clip-path:inset(0 0 0 0)}
.est-out::after{transition:opacity .5s var(--ease) .8s;opacity:0}
.est-out.rolled::after{opacity:.72}
/* Farb-Flut: gewählte --paint deckt den Ergebnis-Bereich beim Erscheinen */
.est-out{--flood:color-mix(in srgb,var(--paint) 9%,var(--paper))}
.est-out.rolled{background:var(--flood)}
.est-out.rolled .eo-price{background:color-mix(in srgb,var(--paint) 13%,var(--card));box-shadow:0 12px 30px -16px color-mix(in srgb,var(--paint) 50%,transparent)}
@media(prefers-reduced-motion:reduce){.est-out{clip-path:none}.est-out::after{opacity:.72;transition:none}}

/* ============ PREP-SZENE (Statement ausgerastet: Scroll = Prep, Farbe = letzte 10%) ============ */
.prep-scene{position:relative;height:340vh;background:none;padding:0}
.prep-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.prep-wall{position:absolute;inset:0}
.pw{position:absolute;inset:0}
.pw-bare{background:linear-gradient(160deg,#e8e0cf,#efe8da 46%,#e4dbc8)}
.pw-bare::after{content:"";position:absolute;inset:0;background:radial-gradient(42% 30% at 22% 34%,rgba(151,132,101,.13),transparent 70%),radial-gradient(34% 26% at 76% 22%,rgba(151,132,101,.11),transparent 70%),radial-gradient(46% 34% at 62% 78%,rgba(151,132,101,.14),transparent 70%)}
.pw-patch{opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62' preserveAspectRatio='none'%3E<ellipse cx='24' cy='26' rx='9' ry='6.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='41' cy='55' rx='6' ry='4.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='70' cy='22' rx='11' ry='5.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='83' cy='60' rx='7' ry='6' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='55' cy='40' rx='5' ry='3.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='12' cy='68' rx='8' ry='4' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='90' cy='38' rx='5.5' ry='4.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='33' cy='10' rx='4.5' ry='3' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='60' cy='78' rx='6' ry='3.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='7' cy='34' rx='5' ry='4' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='47' cy='86' rx='7' ry='3.5' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='66' cy='7' rx='4' ry='3' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='94' cy='82' rx='5.5' ry='3' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/><ellipse cx='19' cy='48' rx='4.5' ry='3.2' fill='%23faf5e9' stroke='%23a8926b' stroke-opacity='.4' stroke-width='.28'/>%3C/svg%3E");background-size:100% 100%}
.pw-sand{opacity:0;background:linear-gradient(160deg,#ece5d4,#f0ead9)}
.pw-prime{opacity:0;background:linear-gradient(165deg,#f8f5ec,#f4f0e4)}
.pw-paint{background:var(--paint);transform:translateY(103%);will-change:transform}
.pw-paint::before{content:"";position:absolute;top:-15px;left:0;right:0;height:16px;background:radial-gradient(circle at 11px 16px,var(--paint) 11px,transparent 12px) repeat-x;background-size:23px 16px}
.pw-paint::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.prep-card{position:absolute;left:clamp(16px,6vw,110px);top:50%;transform:translateY(-50%);width:min(92%,540px);background:color-mix(in srgb,var(--paper) 96%,transparent);border:1px solid var(--line);border-radius:18px 18px 18px 30px;box-shadow:0 40px 90px -40px rgba(25,21,18,.45);padding:clamp(26px,3.4vw,46px);z-index:2}
.prep-head{font-family:var(--ff-d);font-weight:400;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.02;letter-spacing:-.015em;margin:10px 0 22px}
.prep-head em{font-style:italic;color:var(--paint-deep)}
.prep-steps{list-style:none;margin:0 0 24px;padding:0}
.prep-steps li{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);opacity:.38;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.prep-steps li.on{opacity:1;transform:none}
.prep-steps li i{font-style:normal;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);padding:3px 7px;border:1px solid var(--line);border-radius:6px;transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);flex:none;margin-top:2px}
.prep-steps li.on i{background:var(--paint);border-color:var(--paint);color:#fff}
.prep-steps li b{display:block;font-size:1.02rem;margin-bottom:1px}
.prep-steps li span{font-size:.86rem;color:var(--ink-2);line-height:1.45}
.prep-scale .ps-bar{position:relative;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin-bottom:9px}
.prep-scale .ps-bar i{position:absolute;inset:0;border-radius:3px;background:var(--paint);transform:scaleX(0);transform-origin:left}
.prep-scale .ps-bar u{position:absolute;top:-4px;bottom:-4px;left:90%;width:2px;background:var(--ink);opacity:.55}
.prep-scale .ps-lbl{font-family:var(--ff-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prep-scale .ps-lbl b{color:var(--paint-deep);font-weight:700}
.prep-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--ff-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);transition:opacity .5s;z-index:2;white-space:nowrap}
.prep-scene.done .prep-steps li{opacity:1;transform:none}
.prep-scene.done .pw-paint{transform:none}
@media(max-width:720px){.prep-card{left:50%;transform:translate(-50%,-50%);width:min(92%,540px)}.prep-steps li span{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.prep-scene{height:auto}.prep-pin{position:relative;height:auto;min-height:100vh}}

/* PREP-FIXES: eigene lead-Styles + Kinetik-Override + kraeftigere Flecken */
.prep-scene .stmt-lead{display:block;font-family:var(--ff-m);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.prep-scene .prep-head{color:var(--ink)}
.prep-scene .prep-head .wm{overflow:visible!important}
.prep-scene .prep-head .wm>i{transform:none!important;filter:none!important;opacity:1!important}
.prep-scene .prep-steps b{color:var(--ink)}


/* ============ DRENCH-RAUM: die Flut wird zum Zimmer (Endansicht reicher) ============ */
.drench-room{position:absolute;inset:0;z-index:1;pointer-events:none}
.drench-room i{position:absolute;display:block}
.dr-light{inset:0;background:radial-gradient(58% 44% at 70% -6%,rgba(255,252,238,.17),transparent 62%);opacity:clamp(0,calc((var(--dprog,0) - .5) * 4),1)}
.dr-base{left:0;right:0;bottom:0;height:clamp(38px,6.5vh,58px);background:linear-gradient(#faf7ee,#efeadb);border-top:2px solid #fffdf6;box-shadow:0 -16px 34px -14px rgba(25,21,18,.32);opacity:clamp(0,calc((var(--dprog,0) - .56) * 5),1);transform:translateY(calc((1 - clamp(0,calc((var(--dprog,0) - .56) * 5),1)) * 18px))}
.dr-frame{left:clamp(16px,7vw,120px);top:24%;width:clamp(120px,14vw,205px);aspect-ratio:4/5;background:linear-gradient(175deg,color-mix(in srgb,var(--paint) 16%,#f4efe2) 58%,color-mix(in srgb,var(--paint) 58%,#7d6f52) 58.5%);border:clamp(8px,.8vw,12px) solid #f6f3ea;border-radius:3px;box-shadow:0 22px 44px -18px rgba(25,21,18,.5),inset 0 0 0 1px rgba(25,21,18,.12);opacity:clamp(0,calc((var(--dprog,0) - .64) * 5),1);transform:translateY(calc((1 - clamp(0,calc((var(--dprog,0) - .64) * 5),1)) * -12px))}
.dr-switch{right:clamp(16px,8vw,130px);top:45%;width:32px;height:52px;background:#f6f3ea;border-radius:6px;box-shadow:0 10px 24px -10px rgba(25,21,18,.45),inset 0 0 0 1px rgba(25,21,18,.08);opacity:clamp(0,calc((var(--dprog,0) - .7) * 6),1)}
.dr-switch::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:24px;transform:translate(-50%,-50%);background:linear-gradient(#fffef9,#e9e4d4);border-radius:3px;box-shadow:0 2px 4px rgba(25,21,18,.22)}
.dr-tape{left:clamp(24px,12vw,190px);bottom:calc(clamp(38px,6.5vh,58px) - 12px);transform:rotate(-3deg);background:#f7f2df;color:#4d4636;font-family:var(--ff-m);font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:2px;box-shadow:0 8px 18px -8px rgba(25,21,18,.4);opacity:clamp(0,calc((var(--dprog,0) - .78) * 7),1)}
.dr-tape::before,.dr-tape::after{content:"";position:absolute;top:-6px;width:26px;height:13px;background:rgba(247,242,223,.75);transform:rotate(-14deg)}
.dr-tape::before{left:-10px}
.dr-tape::after{right:-10px;transform:rotate(12deg)}
@media(max-width:760px){.dr-frame,.dr-switch{display:none}.dr-tape{left:50%;transform:translateX(-50%) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.drench-room i{opacity:1!important;transform:none!important}.dr-tape{transform:rotate(-3deg)!important}}

/* ============ FAQ-MOMENT: Krepp-Kategorien + Pinselstrich-Open (smooth details) ============ */
:root{interpolate-size:allow-keywords}
.faq-cat{display:inline-block;position:relative;background:#f7f2df;color:#4d4636;font-family:var(--ff-m);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:8px 18px;border-radius:2px;box-shadow:0 8px 18px -10px rgba(25,21,18,.35);transform:rotate(-1.4deg);margin-bottom:14px}
.faq-cat::before,.faq-cat::after{content:"";position:absolute;top:-6px;width:24px;height:12px;background:rgba(247,242,223,.72);transform:rotate(-13deg)}
.faq-cat::before{left:-9px}
.faq-cat::after{right:-9px;transform:rotate(11deg)}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .fa{position:relative;padding-left:20px}
.faq .fa::before{content:"";position:absolute;left:3px;top:5px;bottom:14px;width:4px;border-radius:3px;background:var(--paint);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease) .12s}
.faq details[open] .fa::before{transform:scaleY(1)}
.faq summary{transition:color .25s var(--ease)}
.faq summary:hover{color:var(--paint-deep)}
.faq summary:hover .qi{border-color:var(--paint);color:var(--paint-deep)}
@media(prefers-reduced-motion:reduce){.faq details::details-content{transition:none}.faq .fa::before{transition:none;transform:scaleY(1)}}

/* ============ AREA Farbdosen-Regal (Servicegebiet-Moment, statt Baukasten-Bullets) ============ */
.ar-shelf-wrap{position:relative;padding-top:4px}
.ar-shelf-lbl{display:inline-block;font-family:var(--ff-m);font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#4d4636;background:#f7f2df;padding:6px 13px;border-radius:2px;transform:rotate(-1.2deg);box-shadow:0 6px 14px -8px rgba(25,21,18,.35);margin-bottom:16px}
.ar-shelf{display:flex;gap:clamp(12px,1.6vw,22px);padding:0 12px;align-items:flex-end}
.can{--c:var(--paint);position:relative;width:clamp(58px,5vw,72px);height:78px;background:linear-gradient(90deg,#c9c2af,#f0ebdd 30%,#c2bba6 95%);border-radius:4px 4px 6px 6px;box-shadow:0 10px 22px -10px rgba(25,21,18,.4);transition:transform .35s var(--ease)}
.can::before{content:"";position:absolute;top:-7px;left:1px;right:1px;height:15px;border-radius:50%;background:var(--c);box-shadow:inset 0 -3px 6px rgba(0,0,0,.3),inset 0 2px 3px rgba(255,255,255,.25)}
.can:nth-child(odd)::after{content:"";position:absolute;top:4px;right:9px;width:7px;height:17px;background:var(--c);border-radius:1px 1px 8px 8px;filter:brightness(.94)}
.can i{position:absolute;left:5px;right:5px;top:20px;height:34px;background:#faf7ee;border-radius:3px;border-bottom:5px solid var(--c);display:grid;place-items:center;font-style:normal;font-family:var(--ff-m);font-size:.5rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#3f3a2e;text-align:center;line-height:1.15;padding:0 3px;overflow:hidden}
.can:hover{transform:translateY(-6px) rotate(-1.2deg)}
.ar-board{height:9px;background:linear-gradient(#ece5d2,#d5ccb4);border-radius:2px;box-shadow:0 12px 20px -10px rgba(25,21,18,.35);margin:0 0 20px;width:calc(100% - 0px);max-width:340px}
.ar-facts-line{font-family:var(--ff-m);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 0}
@media(max-width:480px){.ar-shelf{gap:8px;padding:0 4px}.can{flex:1;min-width:0;width:auto;max-width:112px}.can i{font-size:.42rem;letter-spacing:.03em;left:4px;right:4px}}

/* ============ HOURS als gemalte Wochen-Balken (6-20-Skala + Jetzt-Nadel) ============ */
.hb-scale{display:flex;justify-content:space-between;padding-left:110px;margin-bottom:4px;font-family:var(--ff-m);font-size:.54rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
#hoursList li{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:14px;padding:9px 0}
#hoursList li b{font-weight:600;font-size:.9rem}
.hb{position:relative;height:28px;border-radius:6px;background:color-mix(in srgb,var(--ink) 5%,transparent);overflow:hidden}
.hb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/14*3 - 1px),color-mix(in srgb,var(--ink) 9%,transparent) calc(100%/14*3 - 1px),color-mix(in srgb,var(--ink) 9%,transparent) calc(100%/14*3))}
.hb i{position:absolute;top:4px;bottom:4px;left:calc((var(--o,7.5) - 6)/14*100%);width:calc((var(--c,18) - var(--o,7.5))/14*100%);background:var(--paint);border-radius:5px;display:flex;align-items:center;padding-left:10px}
.hb i::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:7px;border-radius:0 5px 5px 0;background:color-mix(in srgb,var(--paint) 72%,#fff)}
.hb i em{font-style:normal;font-family:var(--ff-m);font-size:.56rem;font-weight:700;letter-spacing:.08em;color:#fff;white-space:nowrap}
.hb u{text-decoration:none;position:absolute;inset:0;display:flex;align-items:center;padding-left:10px;font-family:var(--ff-m);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hb-closed .hb{background:color-mix(in srgb,var(--ink) 3%,transparent)}
#hoursList li.today b{color:var(--paint-deep)}
#hoursList li.today .hb i{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px color-mix(in srgb,var(--paint) 55%,transparent)}
#hoursList li.today .hb::after{content:"";position:absolute;top:-2px;bottom:-2px;left:calc((var(--now,12) - 6)/14*100%);width:2.5px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 1.5px var(--paper);z-index:2}
#hoursList li:not(.today) .hb::after{display:none}
@media(max-width:480px){#hoursList li{grid-template-columns:78px 1fr}.hb-scale{padding-left:92px}.hb i em{display:none}}

/* ============ ASSURANCE: Garantie-Siegel (Stempel-Moment) ============ */
.assure-main{position:relative}
.g-seal{position:absolute;top:clamp(14px,2vw,26px);right:clamp(14px,2.2vw,30px);width:clamp(88px,9vw,124px);height:auto;color:color-mix(in srgb,#fff 82%,var(--paint));transform:rotate(-12deg);opacity:.6;pointer-events:none;animation:sealspin 40s linear infinite;transform-origin:center}
@keyframes sealspin{from{transform:rotate(-12deg)}to{transform:rotate(348deg)}}
@media(prefers-reduced-motion:reduce){.g-seal{animation:none}}
@media(max-width:700px){.g-seal{width:74px;opacity:.4}}

/* ============ ESTIMATOR-KLEMMBRETT (das Walkthrough-Brett des Malers) ============ */
.est-card{position:relative;transform:rotate(.5deg);border-radius:8px 8px 14px 14px;box-shadow:0 34px 70px -30px rgba(25,21,18,.5),0 4px 12px -6px rgba(25,21,18,.22);background:linear-gradient(178deg,#fdfbf4,#f7f3e8)}
.est-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(25,21,18,.09);background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(25,21,18,.014) 30px 31px)}
.cb-clip{position:absolute;top:-23px;left:50%;transform:translateX(-50%);width:118px;height:36px;z-index:3;background:linear-gradient(180deg,#e2dccb,#b4ad9c 58%,#d2cbba);border-radius:10px 10px 6px 6px;box-shadow:0 8px 18px -6px rgba(25,21,18,.5),inset 0 1.5px 0 rgba(255,255,255,.65)}
.cb-clip::before{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:44px;height:11px;border-radius:6px;background:linear-gradient(180deg,#8f887a,#6e6858);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.cb-clip::after{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:30px;height:14px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#c4bdac,#a8a190);box-shadow:0 3px 7px -2px rgba(25,21,18,.4)}
.est-card .ehead{border-radius:8px 8px 0 0}
@media(max-width:720px){.est-card{transform:none}.cb-clip{width:92px}}
/* linke 01-03 Punkte: Krepp-Nummern (Designsprache) */
.est-copy .bl .ic{font-size:1.05rem!important;background:#f7f2df!important;border:none!important;border-radius:2px!important;padding:5px 10px!important;transform:rotate(-2deg);box-shadow:0 5px 12px -7px rgba(25,21,18,.4);color:#4d4636!important;font-family:var(--ff-m)!important;font-weight:700!important;letter-spacing:.06em;opacity:1;min-width:0!important;line-height:1!important;margin-top:0!important}

/* ============ CREW: Krepp-Rollen-Schilder + Farb-Swipe (Werkstatt-Feeling) ============ */
.crew-c{position:relative;overflow:visible}
.crew-bd b{position:relative;display:inline-block;background:#f7f2df;color:#4d4636;font-family:var(--ff-m);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:6px 13px;border-radius:2px;transform:rotate(-1.6deg);box-shadow:0 6px 13px -8px rgba(25,21,18,.4);margin-bottom:7px}
.crew-c.lead .crew-bd b{font-size:.72rem;transform:rotate(-1.2deg)}
.crew-av{position:relative;isolation:isolate}
.crew-av::before{content:"";position:absolute;inset:auto -9px 8px -9px;height:38%;z-index:-1;background:var(--sw,#31513f);opacity:.24;border-radius:3px 8px 4px 9px;transform:rotate(-3deg)}
.crew-c.lead .crew-av::before{inset:auto -11px 10px -11px}
.crew-note{font-family:var(--ff-m);font-size:.64rem;letter-spacing:.1em}

/* ============ SUBPAGE Krepp-Tags (Designsprache auf allen 8 Service-Seiten) ============ */
.svc-specs{display:flex;flex-wrap:wrap;gap:12px 14px}
.svc-specs span{background:#f7f2df;color:#4d4636;border:none;border-radius:2px;font-family:var(--ff-m);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;box-shadow:0 6px 13px -8px rgba(25,21,18,.4)}
.svc-specs span:nth-child(odd){transform:rotate(-1.6deg)}
.svc-specs span:nth-child(even){transform:rotate(1.1deg)}
.shf-tag{background:#f7f2df;color:#4d4636;backdrop-filter:none;border-radius:2px;font-weight:700;transform:rotate(-2deg);box-shadow:0 8px 16px -8px rgba(25,21,18,.55);left:14px;bottom:14px}

/* ============ REVIEWS-Seite: statisches Karten-Grid (nutzt .rev der Marquee) ============ */
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:26px}
.revgrid .rev{width:auto;max-width:none;flex:none}
@media(max-width:900px){.revgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.revgrid{grid-template-columns:1fr}}

/* Reviews-Seite: Quellen-Karten in einer Zeile (alte Spotlight-column-Regel neutralisieren) */
.tint .rev-src{flex-direction:row;flex-wrap:wrap;grid-column:auto;grid-row:auto;align-items:center;gap:13px 15px;margin-bottom:8px}

/* ============ SERVICES-Index: editorial Ledger (.svlist war ungestylt!) ============ */
.svlist{display:grid;border-top:1px solid var(--line)}
.svlist>a{display:grid;grid-template-columns:clamp(120px,14vw,190px) auto 1fr auto;gap:clamp(16px,2.4vw,36px);align-items:center;padding:clamp(16px,2vw,26px) 6px;border-bottom:1px solid var(--line);transition:background .3s var(--ease)}
.svlist .th{display:block;aspect-ratio:4/3;border-radius:12px 12px 12px 20px;overflow:hidden;box-shadow:var(--sh-1)}
.svlist .th img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04);transition:transform .6s var(--ease)}
.svlist>a:hover .th img{transform:scale(1.06)}
.svlist .no{font-family:var(--ff-m);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4d4636;background:#f7f2df;padding:6px 12px;border-radius:2px;transform:rotate(-1.6deg);box-shadow:0 5px 12px -7px rgba(25,21,18,.4);white-space:nowrap}
.svlist .ttl{display:block;font-family:var(--ff-d);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;letter-spacing:-.012em;color:var(--ink)}
.svlist .ttl small{display:block;font-family:var(--ff-g);font-size:.93rem;color:var(--ink-2);line-height:1.55;margin-top:8px;max-width:56ch}
.svlist .go{font-family:var(--ff-m);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paint-deep);white-space:nowrap;border:1.5px solid var(--line-2);border-radius:100px;padding:11px 18px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.svlist>a:hover{background:color-mix(in srgb,var(--paint) 4%,transparent)}
.svlist>a:hover .go{background:var(--paint);border-color:var(--paint);color:#fff}
@media(max-width:820px){
.svlist>a{grid-template-columns:1fr;gap:12px;padding:20px 2px}
.svlist .th{aspect-ratio:16/9}
.svlist .no{justify-self:start}
.svlist .go{justify-self:start}
}

/* ============ ONE NUMBER (Estimator-Ersatz: universell, cinematisch) ============ */
.onenum{padding:clamp(70px,9vw,130px) 0}
.onenum-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.on-copy h2{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:.98;letter-spacing:-.02em;margin:14px 0 20px}
.on-copy h2 em{font-style:italic;color:var(--paint-deep)}
.on-sub{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;color:var(--ink-2);max-width:46ch;margin:0 0 26px}
.on-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.on-cards{display:grid;gap:clamp(14px,1.6vw,20px)}
.on-card{position:relative;display:flex;gap:18px;align-items:flex-start;background:linear-gradient(178deg,#fdfbf4,#f7f3e8);border-radius:8px;padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);box-shadow:0 24px 50px -26px rgba(25,21,18,.4),inset 0 0 0 1px rgba(25,21,18,.07)}
.on-card:nth-child(1){transform:rotate(-.7deg)}
.on-card:nth-child(2){transform:rotate(.5deg) translateX(clamp(8px,1.4vw,22px))}
.on-card:nth-child(3){transform:rotate(-.4deg)}
.on-no{font-family:var(--ff-m);font-size:.72rem;font-weight:700;letter-spacing:.1em;color:#4d4636;background:#f7f2df;padding:7px 12px;border-radius:2px;transform:rotate(-2deg);box-shadow:0 5px 12px -7px rgba(25,21,18,.4);flex:none;margin-top:2px}
.on-card b{display:block;font-family:var(--ff-d);font-weight:400;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.01em;margin-bottom:6px}
.on-card p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2);max-width:44ch}
.on-ticket{background:linear-gradient(178deg,#fdfbf4,color-mix(in srgb,var(--paint) 7%,#f7f3e8))}
.on-ticket::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:10px;background:radial-gradient(circle at 7px -2px,transparent 5.5px,var(--paper-2) 6px) repeat-x;background-size:15px 10px;opacity:.9}
.on-stamp{position:absolute;top:14px;right:16px;transform:rotate(-7deg);font-family:var(--ff-m);font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--paint-deep);border:2px solid color-mix(in srgb,var(--paint) 55%,transparent);border-radius:8px;padding:5px 10px;opacity:.8}
@media(max-width:900px){.onenum-grid{grid-template-columns:1fr;gap:30px}.on-card:nth-child(2){transform:rotate(.5deg)}}

/* FIX: Rating-Quellen nebeneinander (kompakt, nicht gestapelt) */
.rev-head .rev-src{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px;grid-column:auto;grid-row:auto}
.rev-head .rev-big{flex-basis:100%;margin-bottom:2px}
.rev-head .rs{padding:9px 13px}
.rev-head .rs-body b{font-size:1.2rem}
.rev-head .rs-stars{font-size:.72rem}
.rev-head .rs-meta{font-size:.6rem}
/* FIX: Krepp-Labels lesbarer (groesser, dunkler, weniger Sperrung) */
.faq-cat{font-size:.7rem;letter-spacing:.13em;color:#3a352b}
.ar-shelf-lbl{font-size:.64rem;color:#3a352b}
.on-no{color:#3a352b}

/* ============ SERVICES mobil: Scroll-Motion (sticky Bild, aktive Zeile) ============ */
@media (pointer:coarse) and (max-width:900px){
.svc-reveal{display:flex;flex-direction:column}
.svc-stage{display:block;order:-1;position:sticky;top:56px;z-index:5;height:32vh;min-height:210px;margin-bottom:14px;width:100vw;margin-left:calc(50% - 50vw);background:var(--paper);padding:8px 5vw 10px;box-sizing:border-box}
.svc-stage-img{width:100%;height:100%;border-radius:14px;box-shadow:0 18px 40px -18px rgba(25,21,18,.45);background-size:cover;background-position:center}
.svc-row{opacity:.55;transition:opacity .35s var(--ease)}
.svc-row.m-act{opacity:1}
.svc-row.m-act .svc-name{color:var(--paint-deep)}
.svc-row.m-act .svc-no{background:var(--paint);border-color:var(--paint);color:#fff}
}

/* svc Crossfade: zweite Ebene blendet weich */
.svc-stage{position:relative}
.svc-stage-img.b{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);z-index:2}
.svc-stage-img.b.show{opacity:1}
@media (pointer:coarse) and (max-width:900px){.svc-stage-img.b{position:absolute;inset:8px 5vw 10px;border-radius:14px;background-size:cover;background-position:center}}

/* Galerie: Kopf zentriert + Faecher passt alle 5 in den Viewport (Desktop) */

@media (min-width:1000px){
.gal-fan{justify-content:center;overflow-x:visible;scroll-snap-type:none}
.fan-card{flex:0 0 clamp(200px,17.5vw,280px)}
}

/* subgal mit 5 Karten: Reihe zu 3 + Reihe zu 2 (letzte zwei zentriert breiter) */
.subgal{grid-template-columns:repeat(6,1fr)}
.subgal .subgal-c{grid-column:span 2}
.subgal .subgal-c:nth-child(4):nth-last-child(2){grid-column:2/span 2}
.subgal .subgal-c:nth-child(5):last-child{grid-column:4/span 2}
@media(max-width:700px){.subgal{grid-template-columns:1fr}.subgal .subgal-c{grid-column:auto!important}}

/* Galerie: Kopf wirklich zentriert (galsec) */
.galsec .sec-head{text-align:center;margin-inline:auto;max-width:900px}
.galsec .sec-head p{margin-inline:auto}
/* Grosse Screens: Faecher sanfter ueberlappt, Karten groesser, Captions geschuetzt */
@media (min-width:1000px){
.gal-fan{padding:56px 24px 44px}
.fan-card{flex:0 0 clamp(210px,19vw,340px);margin-left:-30px}
.fan-card:first-child{margin-left:0}
.fan-card .cap{right:40px}
}