/* ============================================================
   MTILES — Site components (Richtung C · Premium/Manufaktur)
   Shared across all pages. Depends on brand.css for tokens.
   ============================================================ */
.serif{font-family:var(--font-serif)}
.it{font-family:var(--font-serif);font-style:italic;font-weight:400}
body{background:var(--bone);color:var(--ink)}
main{display:block}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(max-width:760px){.hero-sub{grid-template-columns:1fr !important;gap:24px !important}}

/* ---------- HEADER ---------- */
.site-head{position:sticky;top:0;z-index:80;background:rgba(247,245,241,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:30px;height:84px}
.logo{display:flex;align-items:center;gap:13px;margin-right:auto}
.logo img{height:38px;width:auto}
.logo .wm{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:.04em;line-height:1}
.logo .wm small{display:block;font-family:var(--font-serif);font-style:italic;font-size:11.5px;font-weight:400;letter-spacing:.01em;color:var(--taupe);margin-top:4px}
.mainnav{display:flex;gap:28px;flex-wrap:nowrap}
.mainnav a{white-space:nowrap}
.head-in{flex-wrap:nowrap}
.mainnav a{font-size:15px;font-weight:600;color:var(--anthracite);position:relative;padding:6px 0}
.mainnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--yellow);transition:width .22s}
.mainnav a:hover::after,.mainnav a[aria-current="page"]::after{width:100%}
.mainnav a[aria-current="page"]{color:var(--ink)}

/* ---- mega trigger (Leistungen) ---- */
.nav-mega-trigger{display:inline-flex;align-items:center;gap:5px}
.nav-mega-trigger .chev{width:15px;height:15px;transition:transform .28s cubic-bezier(.2,.7,.2,1);margin-top:1px}
.site-head.mega-open .nav-mega-trigger .chev{transform:rotate(180deg)}
.site-head.mega-open .nav-mega-trigger{color:var(--ink)}
.site-head.mega-open .nav-mega-trigger::after{width:100%}

/* ---- MEGA PANEL ---- */
.mega{
  position:absolute;top:100%;left:0;right:0;z-index:85;
  background:rgba(247,245,241,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px -24px rgba(32,31,28,.28);
  opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;
  transition:opacity .3s ease, transform .34s cubic-bezier(.2,.7,.2,1), visibility .3s;
}
.site-head.mega-open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-in{display:grid;grid-template-columns:1fr 320px;gap:36px;padding-block:30px;align-items:stretch}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.mega-item{
  display:flex;align-items:center;gap:15px;padding:13px 16px;border-radius:6px;
  text-decoration:none;color:var(--ink);position:relative;
  opacity:0;transform:translateY(10px);
  transition:background .2s ease, opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.site-head.mega-open .mega-item{opacity:1;transform:none;transition-delay:calc(var(--i) * 28ms)}
.mega-item:hover{background:#fff}
.mega-item .mi-ic{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--stone-2);display:flex;align-items:center;justify-content:center;background:#fff;transition:.22s}
.mega-item .mi-ic svg{width:21px;height:21px;color:var(--anthracite);transition:.22s}
.mega-item:hover .mi-ic{background:var(--yellow);border-color:var(--yellow);transform:rotate(-6deg)}
.mega-item .mi-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-item .mi-tx b{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.1}
.mega-item .mi-tx small{font-size:12.5px;color:var(--taupe)}
.mega-item .mi-go{margin-left:auto;width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(-6px);transition:.22s}
.mega-item .mi-go svg{width:17px;height:17px;color:var(--yellow-deep)}
.mega-item:hover .mi-go{opacity:1;transform:none}
/* feature card */
.mega-feature{
  position:relative;overflow:hidden;background:var(--anthracite);color:#fff;border-radius:8px;
  padding:30px 30px 26px;display:flex;flex-direction:column;text-decoration:none;
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.site-head.mega-open .mega-feature{opacity:1;transform:none;transition-delay:200ms}
.mega-feature:hover{box-shadow:0 16px 34px -16px rgba(0,0,0,.5)}
.mega-feature-corner{position:absolute;top:0;right:0;width:48px;height:48px;border-top:5px solid var(--yellow);border-right:5px solid var(--yellow)}
.mf-eyebrow{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.mf-quote{font-family:var(--font-serif);font-style:italic;font-size:21px;line-height:1.32;margin-top:14px;flex:1}
.mf-by{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:rgba(255,255,255,.75);margin-top:14px}
.mf-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13.5px;color:#fff;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-dark)}
.mf-cta svg{width:16px;height:16px;transition:transform .22s}
.mega-feature:hover .mf-cta svg{transform:translateX(4px)}
.mega-scrim{position:fixed;inset:0;top:84px;z-index:40;background:rgba(32,31,28,.18);opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;pointer-events:none}
.site-head.mega-open ~ .mega-scrim{opacity:1;visibility:visible}
@media (prefers-reduced-motion: reduce){
  .mega,.mega-item,.mega-feature{transition-duration:.001s !important;transform:none !important}
}
@media(max-width:1180px){.mega-in{grid-template-columns:1fr 280px;gap:24px}}
.head-right{display:flex;align-items:center;gap:18px}
.head-phone{font-family:var(--font-display);font-weight:700;font-size:15px;white-space:nowrap}
.head-phone small{display:block;font-size:11px;color:var(--taupe);font-weight:500;letter-spacing:.03em}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:20px;height:2px;background:var(--anthracite);transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ab hier wird's eng: Telefonblock ausblenden (Anruf geht über den Floating-Button), Nav etwas zusammenrücken */
@media(max-width:1180px){.head-phone{display:none}.mainnav{gap:24px}}
/* darunter komplett aufs Mobilmenü umschalten */
@media(max-width:980px){.mainnav{display:none}.burger{display:flex}}

/* mobile drawer */
.drawer{position:fixed;top:0;left:0;right:0;height:100dvh;z-index:90;background:var(--bone);transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.1,1);display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top)) var(--gutter) calc(16px + env(safe-area-inset-bottom));overflow:hidden}
.drawer.open{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;height:60px;flex:none}
.drawer-close{width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:4px;font-size:22px;cursor:pointer;line-height:1}
.drawer nav{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--line);flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.drawer nav a{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.01em;padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer nav a span{color:var(--taupe);font-size:18px}
.drawer .d-cta{display:flex;flex-direction:row;gap:10px;margin-top:18px;flex:none}
.drawer .d-cta .d-iconbtn{flex:1 1 0;min-width:0;padding:0;height:56px;justify-content:center}
.drawer .d-cta .d-iconbtn svg{width:23px;height:23px}
.drawer .d-cta .d-iconbtn--wa{background:#25D366;border-color:#25D366;color:#fff}
.drawer .d-cta .d-iconbtn--wa:hover{background:#1fb855;border-color:#1fb855}
/* drawer accordion */
.d-acc{border-bottom:1px solid var(--line)}
.d-acc-trigger{width:100%;background:none;border:0;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.01em;padding:20px 0;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.d-acc-trigger svg{width:22px;height:22px;transition:transform .28s}
.d-acc.open .d-acc-trigger svg{transform:rotate(180deg)}
.d-acc.open .d-acc-trigger{color:var(--yellow-deep)}
.d-acc-panel{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .34s cubic-bezier(.4,0,.1,1)}
.d-acc.open .d-acc-panel{grid-template-rows:1fr}
.d-acc-panel>*{min-height:0}
.d-acc-panel{padding:0}
.d-acc-panel a{font-size:17px !important;font-weight:600 !important;padding:13px 0 13px 16px !important;border-bottom:1px solid var(--line) !important;color:var(--muted) !important;border-left:2px solid var(--yellow);margin-left:2px}
.d-acc-panel a:last-child{border-bottom:0 !important}
.d-acc-panel .d-acc-all{color:var(--ink) !important;font-weight:700 !important}

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{padding:clamp(40px,5vw,76px) 0 clamp(30px,4vw,52px);border-bottom:1px solid var(--line)}
.crumbs{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--taupe);display:flex;gap:10px;align-items:center;margin-bottom:26px;flex-wrap:wrap}
.crumbs a:hover{color:var(--yellow-deep)}
.crumbs .sep{opacity:.5}
.page-hero h1{font-size:clamp(38px,6vw,82px);font-weight:700;letter-spacing:-.03em;line-height:.98}
.page-hero .lead{font-size:clamp(18px,1.6vw,21px);color:var(--muted);max-width:56ch;margin-top:24px;line-height:1.6}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(64px,8vw,120px) 0}
.section.tight{padding:clamp(48px,5vw,80px) 0}
.lead-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.lead-row h2{font-size:clamp(30px,3.6vw,50px);font-weight:700;letter-spacing:-.025em;max-width:20ch;line-height:1.08}
@media(max-width:760px){.lead-row{grid-template-columns:1fr;gap:16px}}
.bone{background:var(--bone)}
.white{background:#fff}
.dark{background:var(--anthracite);color:#fff}
.dark h2,.dark h3,.dark h4{color:#fff}
.ink{background:var(--ink);color:#fff}

/* ---------- PHOTO PLACEHOLDERS (extends brand .ph) ---------- */
.ph{border-radius:5px}
.frame-corner{position:absolute;top:22px;right:22px;width:40px;height:40px;border-top:4px solid var(--yellow);border-right:4px solid var(--yellow);z-index:2}

/* ---------- SERVICE GRID ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.svc-cell{background:var(--bone);padding:36px 32px;transition:background .25s;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.svc-cell:hover{background:#fff}
.svc-cell .ic{width:48px;height:48px;border-radius:50%;border:1px solid var(--stone-2);display:flex;align-items:center;justify-content:center;margin-bottom:22px;transition:.25s}
.svc-cell:hover .ic{background:var(--yellow);border-color:var(--yellow)}
.svc-cell .ic svg{width:22px;height:22px;color:var(--anthracite)}
.svc-cell h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
.svc-cell p{color:var(--muted);font-size:14.5px;margin-top:9px;flex:1}
.svc-cell .more{margin-top:18px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--yellow-deep);display:inline-flex;align-items:center;gap:7px;text-transform:uppercase}
@media(max-width:880px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ---------- FEATURE SPLIT ---------- */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border-radius:5px;overflow:hidden;border:1px solid var(--line)}
.feat-grid.rev .photo{order:2}
.feat-grid .photo{position:relative;min-height:440px}
.feat-grid .photo .ph{position:absolute;inset:0}
.feat-grid .txt{padding:clamp(36px,5vw,68px);background:#fff}
.feat-grid .txt h2{font-size:clamp(28px,3.4vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.08}
.feat-grid .txt p{color:var(--muted);margin-top:18px;font-size:17px}
.feat-list{margin-top:28px;display:flex;flex-direction:column}
.feat-list .li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line);font-family:var(--font-display);font-weight:600;font-size:16px}
.feat-list .li span{color:var(--taupe);font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:15px;text-align:right}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr}.feat-grid.rev .photo{order:0}.feat-grid .photo{min-height:300px}}

/* ---------- PROCESS STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{position:relative;padding-top:26px;border-top:2px solid var(--anthracite)}
.step .n{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--yellow-deep)}
.step h4{font-size:21px;font-weight:700;margin-top:12px}
.step p{color:var(--muted);font-size:15px;margin-top:9px}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- GALLERY ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal .g{position:relative;border-radius:5px;overflow:hidden;aspect-ratio:3/4;text-decoration:none;color:#fff;display:block}
.gal .g .ph{position:absolute;inset:0;transition:transform .5s}
.gal .g:hover .ph{transform:scale(1.05)}
.gal .g.tall{grid-row:span 2;aspect-ratio:auto}
.gal .g .lbl{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;background:linear-gradient(transparent,rgba(20,20,18,.78))}
.gal .g .lbl small{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.gal .g .lbl h4{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:19px;margin-top:5px}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal .g.tall{grid-row:auto;aspect-ratio:3/4}}

/* ---------- STATS BAND ---------- */
.stone-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;align-items:center}
.stone-in .intro .serif{font-size:clamp(23px,2.6vw,33px);font-style:italic;line-height:1.3}
.stat b{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4vw,56px);color:var(--yellow);line-height:1;display:block}
.stat span{color:rgba(255,255,255,.66);font-size:15px;margin-top:8px;display:block}
@media(max-width:820px){.stone-in{grid-template-columns:1fr 1fr}.stone-in .intro{grid-column:1/-1}}

/* ---------- BIG QUOTE ---------- */
.bigquote{text-align:center;max-width:980px;margin:0 auto}
.bigquote .stars{color:var(--yellow-deep);font-size:22px;letter-spacing:5px}
.bigquote blockquote{font-family:var(--font-serif);font-size:clamp(25px,3.4vw,44px);font-weight:400;line-height:1.32;margin:24px 0 0;letter-spacing:-.01em}
.bigquote blockquote .hl{font-style:italic;color:var(--yellow-deep)}
.bigquote .who{margin-top:28px;font-family:var(--font-display);font-weight:700;font-size:15px}
.bigquote .who span{color:var(--taupe);font-weight:500}

/* testimonial cards */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px}
.tcard .stars{color:var(--yellow-deep);letter-spacing:2px;font-size:15px}
.tcard blockquote{margin:14px 0 0;font-family:var(--font-serif);font-size:18px;line-height:1.45;font-style:italic}
.tcard .who{margin-top:18px;font-family:var(--font-display);font-weight:700;font-size:14px}
.tcard .who span{display:block;color:var(--taupe);font-weight:500;font-size:13px;margin-top:2px}
@media(max-width:820px){.tcards{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:26px;height:26px;flex:none;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--anthracite);transition:transform .25s}
.faq summary .pm::before{top:12px;left:3px;right:3px;height:2px}
.faq summary .pm::after{left:12px;top:3px;bottom:3px;width:2px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--yellow-deep)}
.faq .ans{padding:0 0 26px;color:var(--muted);font-size:16.5px;line-height:1.65;max-width:64ch}

/* ---------- MAP / EINZUGSGEBIET ---------- */
.map-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,4vw,56px);align-items:center}
.map-box{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#ECEAE4}
.map-box svg{width:100%;height:100%;display:block}
.places{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.places span{font-family:var(--font-display);font-weight:600;font-size:13.5px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px}
.places span.hub{background:var(--yellow);border-color:var(--yellow)}
@media(max-width:820px){.map-grid{grid-template-columns:1fr}}

/* ---------- CTA CARD ---------- */
.cta-card{background:var(--anthracite);color:#fff;border-radius:6px;padding:clamp(40px,5vw,72px);display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:center;position:relative;overflow:hidden}
.cta-card .frame-corner{top:0;right:0;width:62px;height:62px;border-width:6px}
.cta-card h2{font-size:clamp(28px,3.6vw,46px);font-weight:700;letter-spacing:-.025em;line-height:1.05}
.cta-card p{color:rgba(255,255,255,.66);margin-top:16px;font-size:17px}
.cta-acts{display:flex;flex-direction:column;gap:11px}
@media(max-width:820px){.cta-card{grid-template-columns:1fr;gap:28px}}

/* ---------- FORM ---------- */
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:880px){.form-grid{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.03em;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--stone-2);border-radius:4px;padding:14px 15px;transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--anthracite);box-shadow:0 0 0 3px rgba(252,236,11,.3)}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field.two>div{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:14px;border:1px solid var(--stone-2);background:#fff;border-radius:22px;padding:9px 15px;cursor:pointer;transition:.15s;margin:0}
.chips input:checked+label{background:var(--yellow);border-color:var(--yellow)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin:6px 0 22px}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--anthracite)}
.form-error{background:#FBECEC;border:1px solid #E1B4B4;color:#8A2B2B;border-radius:6px;padding:14px 18px;margin-bottom:22px;font-size:15px;font-weight:600;line-height:1.5}
.form-error a{color:#8A2B2B;text-decoration:underline}
.form-aside{background:#fff;border:1px solid var(--line);border-radius:6px;padding:32px}
.contact-line{display:flex;gap:15px;padding:18px 0;border-top:1px solid var(--line);align-items:flex-start}
.contact-line:first-of-type{border-top:0;padding-top:0}
.contact-line .ic{width:40px;height:40px;border-radius:50%;background:var(--bone);display:flex;align-items:center;justify-content:center;flex:none}
.contact-line .ic svg{width:19px;height:19px;color:var(--anthracite)}
.contact-line h4{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.02em}
.contact-line p{font-size:15.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.contact-line a{color:var(--ink);font-weight:600}
.form-sent{background:#fff;border:1px solid var(--line);border-radius:6px;padding:40px;text-align:center;display:none}
.form-sent.show{display:block}
.form-sent .ok{width:64px;height:64px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.form-sent .ok svg{width:30px;height:30px;color:var(--ink)}

/* ---------- SERVICE DETAIL ---------- */
.svc-detail{display:grid;grid-template-columns:1fr 320px;gap:clamp(36px,5vw,72px);align-items:start}
.svc-body h2{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;margin:8px 0 18px}
.svc-body h3{font-size:22px;font-weight:700;margin:36px 0 12px}
.svc-body p{color:var(--muted);font-size:17px;margin-bottom:16px;max-width:64ch}
.svc-body ul.ticks{list-style:none;padding:0;margin:18px 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-body ul.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:16px}
.svc-body ul.ticks li svg{width:21px;height:21px;color:var(--yellow-deep);flex:none;margin-top:2px}
.svc-aside{position:sticky;top:108px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px}
.svc-aside h4{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin-bottom:16px}
.svc-aside .other{display:flex;flex-direction:column}
.svc-aside .other a{padding:12px 0;border-top:1px solid var(--line);font-family:var(--font-display);font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;color:var(--anthracite)}
.svc-aside .other a:hover{color:var(--yellow-deep)}
.svc-aside .other a span{color:var(--taupe)}
@media(max-width:880px){.svc-detail{grid-template-columns:1fr}.svc-aside{position:static}.svc-body ul.ticks{grid-template-columns:1fr}}

/* ---------- PROJECT DETAIL ---------- */
.proj-hero{position:relative;aspect-ratio:16/8;border-radius:6px;overflow:hidden;margin-top:8px}
.proj-hero .ph{position:absolute;inset:0}
.proj-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:clamp(36px,4vw,56px) 0;padding:30px 0;border-block:1px solid var(--line)}
.proj-meta .m small{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);display:block}
.proj-meta .m b{font-family:var(--font-display);font-weight:700;font-size:19px;margin-top:6px;display:block}
@media(max-width:680px){.proj-meta{grid-template-columns:1fr 1fr;gap:18px}}
.proj-gal{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.proj-gal .ph{border-radius:5px;min-height:200px}
.proj-gal .col{display:grid;gap:14px}
@media(max-width:680px){.proj-gal{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.7);padding:74px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.foot-grid h5{font-family:var(--font-display);color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.foot-grid a{display:block;padding:5px 0;font-size:15px;color:rgba(255,255,255,.7)}
.foot-grid a:hover{color:var(--yellow)}
.foot-brand img{height:42px;margin-bottom:18px}
.foot-brand p{font-family:var(--font-serif);font-style:italic;font-size:16px;max-width:32ch;color:rgba(255,255,255,.62)}
.foot-brand .social{display:flex;gap:10px;margin-top:22px}
.foot-brand .foot-rating{display:inline-flex;align-items:center;gap:11px;margin-top:20px;padding:0}
.foot-brand .foot-rating .stars{display:inline-flex;gap:2px;color:var(--yellow)}
.foot-brand .foot-rating .stars svg{width:16px;height:16px}
.foot-brand .foot-rating .rt{font-size:14px;color:rgba(255,255,255,.72)}
.foot-brand .foot-rating .rt b{font-family:var(--font-display);color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.foot-brand .foot-rating:hover .rt{color:var(--yellow)}
.foot-brand .social a{width:40px;height:40px;border:1px solid var(--line-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.foot-brand .social a:hover{background:var(--yellow);border-color:var(--yellow)}
.foot-brand .social svg{width:18px;height:18px;color:#fff}
.foot-brand .social a:hover svg{color:var(--ink)}
.foot-bottom{margin-top:54px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted-2)}
.foot-bottom a:hover{color:var(--yellow)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ---------- FAB ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:transform .15s}
.fab a:hover{transform:scale(1.07)}
.fab .wa{background:#25D366}.fab .ph2{background:var(--anthracite)}
.fab svg{width:26px;height:26px;color:#fff}

/* utilities */
.center{text-align:center}
.mt-l{margin-top:40px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   ANIMATED PLACEHOLDERS  (replace photo placeholders)
   site.js injects a .ph-scene into every .ph and chooses a
   theme from its data-label / data-anim. Each scene is an
   on-brand, looping or one-shot CSS/SVG animation.
   Base styles = calm at-rest state (also reduced-motion / print).
   Motion only under .ph.play + prefers-reduced-motion:no-preference.
   ============================================================ */
.ph.has-anim::before{display:none}
.ph.has-anim::after{z-index:3}
.ph--ondark::after{color:rgba(255,255,255,.62)}
.ph-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.ph-scene *{box-sizing:border-box}
.ph-scene::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 70px rgba(56,56,54,.16),inset 0 -40px 60px rgba(56,56,54,.1)}
.ph--ondark .ph-scene::after{box-shadow:inset 0 0 90px rgba(0,0,0,.45)}
.ph-grain{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:radial-gradient(rgba(56,56,54,.18) .5px,transparent .6px);background-size:3px 3px}

/* shared light sweep */
.s-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 48%,rgba(252,236,11,.18) 52%,transparent 64%);
  background-size:260% 100%;background-position:130% 0}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-sweep{animation:phSweep 6.5s ease-in-out infinite}
}
@keyframes phSweep{0%{background-position:130% 0}55%,100%{background-position:-70% 0}}

/* ---- TILES : staggered grid lay-in ---- */
.s-tiles{position:absolute;inset:0;display:grid;gap:2px;padding:2px;background:#B7AB98}
.s-tiles i{background:linear-gradient(135deg,#E9E1D2,#CBBEA8);position:relative}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-tiles i{animation:phTileIn .55s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0s)}
}
@keyframes phTileIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ---- STONE : drifting marble + drawn veins ---- */
.s-stone{position:absolute;inset:0;background:linear-gradient(120deg,#E7DECE,#D2C5AF 42%,#E0D6C4 64%,#C3B49B);background-size:200% 200%}
.s-stone svg{position:absolute;inset:0;width:100%;height:100%}
.s-vein{fill:none;stroke:rgba(86,76,58,.5);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1600;stroke-dashoffset:0}
.s-vein.f{stroke:rgba(110,98,76,.32);stroke-width:4}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-stone{animation:phStone 20s ease-in-out infinite alternate}
  .ph.play .s-vein{animation:phDrawV 3.4s ease backwards;animation-delay:var(--d,0s)}
}
@keyframes phStone{to{background-position:100% 100%}}
@keyframes phDrawV{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}

/* ---- WATER : calm surface + expanding ripples ---- */
.s-water{position:absolute;inset:0;background:linear-gradient(165deg,#DCE4E4,#BFCDCE 56%,#A7B7B8)}
.s-water .ring{position:absolute;left:50%;top:56%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border:1.5px solid rgba(74,96,99,.45);border-radius:50%;opacity:0}
.s-water .glint{position:absolute;left:0;right:0;top:30%;height:40%;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);transform:skewY(-3deg)}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-water .ring{animation:phRipple 5s ease-out infinite;animation-delay:var(--d,0s)}
  .ph.play .s-water .glint{animation:phGlint 7s ease-in-out infinite}
}
@keyframes phRipple{0%{opacity:.6;width:24px;height:24px;margin:-12px 0 0 -12px}
  100%{opacity:0;width:420px;height:420px;margin:-210px 0 0 -210px}}
@keyframes phGlint{0%,100%{opacity:.4;transform:skewY(-3deg) translateY(0)}50%{opacity:.8;transform:skewY(-3deg) translateY(8px)}}

/* ---- SLAB : two XXL panels slide to a centre seam ---- */
.s-slab{position:absolute;inset:0;background:#B9AD9A;overflow:hidden}
.s-slab .pane{position:absolute;top:0;bottom:0;width:50.4%;background:linear-gradient(125deg,#EAE2D4,#CDC0AC)}
.s-slab .pane.l{left:0;border-right:1px solid rgba(120,110,95,.35)}
.s-slab .pane.r{right:0}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-slab .pane.l{animation:phSlabL 1s cubic-bezier(.2,.7,.2,1) .15s backwards}
  .ph.play .s-slab .pane.r{animation:phSlabR 1s cubic-bezier(.2,.7,.2,1) .3s backwards}
}
@keyframes phSlabL{from{transform:translateX(-101%)}to{transform:none}}
@keyframes phSlabR{from{transform:translateX(101%)}to{transform:none}}

/* ---- MOSAIC : fine grid that twinkles, yellow accents ---- */
.s-mosaic{position:absolute;inset:0;display:grid;gap:3px;padding:3px;background:#AC9F8C}
.s-mosaic i{border-radius:1px;background:#DFD7C9}
.s-mosaic i.y{background:var(--yellow)}
.s-mosaic i.d{background:var(--anthracite)}
.s-mosaic i.t{background:#C2B7A4}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-mosaic i{animation:phTwinkle 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes phTwinkle{0%,100%{opacity:.82}50%{opacity:1;filter:brightness(1.12)}}

/* ---- DRAIN : bodengleiche dusche, perspective floor + linear drain ---- */
.s-drain{position:absolute;inset:0;background:linear-gradient(180deg,#E2D9CB,#C9BFAE)}
.s-drain svg{position:absolute;inset:0;width:100%;height:100%}
.s-drain .fl{stroke:rgba(96,86,68,.4);stroke-width:1}
.s-drain .slot{fill:var(--anthracite)}
.s-drain .glow{fill:var(--yellow);opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-drain .glow{animation:phDrainGlow 3.2s ease-in-out infinite}
}
@keyframes phDrainGlow{0%,100%{opacity:.3}50%{opacity:1}}

/* ---- OUTDOOR : paving slabs + warm travelling sun ---- */
.s-out{position:absolute;inset:0;background:#A89B88;
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:5px;padding:7px}
.s-out i{background:linear-gradient(135deg,#E5DCCC,#CBBFAC);border-radius:2px}
.s-out .sun{position:absolute;width:55%;height:72%;top:-8%;left:-12%;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(252,236,11,.42),rgba(252,236,11,.1) 46%,transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-out .sun{animation:phSun 12s ease-in-out infinite alternate}
}
@keyframes phSun{0%{transform:translate(-15%,-8%)}100%{transform:translate(155%,92%)}}

/* ---- GROUT : 2x2 close-up, grout line is drawn in yellow ---- */
.s-grout{position:absolute;inset:0;background:#A99C89;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:9px}
.s-grout i{background:linear-gradient(135deg,#E9E1D3,#CFC3AF)}
.s-grout .bar{position:absolute;background:var(--yellow);z-index:2}
.s-grout .bar.v{left:calc(50% - 3.5px);top:0;bottom:0;width:7px;transform-origin:top}
.s-grout .bar.h{top:calc(50% - 3.5px);left:0;right:0;height:7px;transform-origin:left}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-grout .bar.v{animation:phGrowY 1.1s ease .2s backwards}
  .ph.play .s-grout .bar.h{animation:phGrowX 1.1s ease .55s backwards}
}
@keyframes phGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes phGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- MARK : anthracite field + drawn MTILES tile monogram ---- */
.s-mark{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 38%,#45443F,#2A2A27)}
.s-mark svg{position:absolute;left:50%;top:50%;width:46%;max-width:200px;transform:translate(-50%,-50%)}
.s-mark .o{fill:none;stroke:#fff;stroke-width:2.4;stroke-dasharray:340;stroke-dashoffset:0}
.s-mark .y{fill:none;stroke:var(--yellow);stroke-width:2.4;stroke-dasharray:340;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-mark .o{animation:phDrawM 1.4s ease .2s backwards}
  .ph.play .s-mark .y{animation:phDrawM 1.2s ease .9s backwards}
}
@keyframes phDrawM{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}

/* ---- PLAN : dark blueprint, coordinated trades, pulsing nodes ---- */
.s-plan{position:absolute;inset:0;background:#2D2D2A;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px}
.s-plan svg{position:absolute;inset:0;width:100%;height:100%}
.s-plan .link{fill:none;stroke:rgba(252,236,11,.55);stroke-width:1.4;stroke-dasharray:6 8}
.s-plan .node{fill:var(--yellow)}
.s-plan .hub{fill:#fff}
@media (prefers-reduced-motion:no-preference){
  .ph.play .s-plan .link{animation:phDash 2.4s linear infinite}
  .ph.play .s-plan .node{transform-box:fill-box;transform-origin:center;animation:phNode 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes phDash{to{stroke-dashoffset:-28}}
@keyframes phNode{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ============================================================
   THEME TOGGLE (Hell/Dunkel) — Standard ist Hell
   ============================================================ */
.theme-toggle{
  width:44px;height:44px;flex:none;border:1px solid var(--line);background:transparent;
  border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  color:var(--anthracite);transition:border-color .2s, color .2s, background .2s;
}
.theme-toggle:hover{border-color:var(--anthracite)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media(max-width:980px){.theme-toggle{display:none}}
.d-theme{justify-content:center}
.d-theme svg{width:19px;height:19px}
.d-theme .i-sun{display:none}
[data-theme="dark"] .d-theme .i-sun{display:inline-block}
[data-theme="dark"] .d-theme .i-moon{display:none}

/* ============================================================
   DARK MODE — gezielter Override (Tokens + Sonderfälle)
   ============================================================ */
[data-theme="dark"]{
  /* Flächen werden dunkel */
  --paper:#141417;
  --bone:#1C1C20;
  --stone:#26262B;
  --stone-2:#36363E;
  --line:#2C2C33;
  --line-dark:rgba(255,255,255,.12);
  /* Text wird hell (–-ink/–-anthracite waren dunkel: jetzt Textfarben) */
  --ink:#ECEAE4;
  --anthracite:#E7E4DE;
  --taupe:#948E83;
  --muted:#A8A39A;
  --muted-2:#7E7A72;
  color-scheme:dark;
}

/* sticky Header + Mega-Panel (hart kodierte Hell-Hintergründe) */
[data-theme="dark"] .site-head{background:rgba(20,20,23,.82)}
[data-theme="dark"] .mega{background:rgba(24,24,28,.97)}
[data-theme="dark"] .mega-item:hover{background:#26262B}
[data-theme="dark"] .mega-item .mi-ic{background:#26262B}

/* helle Karten/Flächen → dunkle Panels */
[data-theme="dark"] .white,
[data-theme="dark"] .feat-grid .txt,
[data-theme="dark"] .tcard,
[data-theme="dark"] .places span,
[data-theme="dark"] .chips label,
[data-theme="dark"] .form-aside,
[data-theme="dark"] .form-sent,
[data-theme="dark"] .svc-aside,
[data-theme="dark"] .burger,
[data-theme="dark"] .drawer-close{background:var(--bone)}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea{background:#101013}
[data-theme="dark"] .map-box{background:#1A1A1E}
[data-theme="dark"] .svc-cell:hover{background:var(--stone)}

/* Beim Umschalten kurz alle Übergänge aus: verhindert „stuck transitions" (z. B. svc-cell) und hässliche Mehrfach-Fades */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{transition:none !important}

/* Logo-Variante: helles (dunkles) Logo standardmäßig, weißes Logo im Dark Mode */
.logo .logo-img--dark{display:none}
[data-theme="dark"] .logo .logo-img--light{display:none}
[data-theme="dark"] .logo .logo-img--dark{display:block}

/* Auf gelben Flächen muss die Schrift/Icons im Dark Mode schwarz bleiben (–-ink ist hier hell) */
[data-theme="dark"] .btn--yellow,
[data-theme="dark"] .btn--yellow:hover,
[data-theme="dark"] .places span.hub,
[data-theme="dark"] .chips input:checked+label{color:#141312}
[data-theme="dark"] .svc-cell:hover .ic svg,
[data-theme="dark"] .mega-item:hover .mi-ic svg{color:#141312}
/* Hub-Pill bleibt gelb (die .places-span-Regel oben würde es sonst abdunkeln) */
[data-theme="dark"] .places span.hub{background:var(--yellow);border-color:var(--yellow)}

/* Flächen, die schon dunkel waren (nutzten --anthracite/--ink als BG) explizit halten */
[data-theme="dark"] .dark,
[data-theme="dark"] .ink,
[data-theme="dark"] .cta-card,
[data-theme="dark"] .mega-feature{background:#202024}
[data-theme="dark"] .site-foot{background:#0F0F12}

/* Buttons: solid wird Markengelb, ghost-hover ebenso (sonst weiße Schrift auf hell) */
[data-theme="dark"] .btn--solid{background:var(--yellow);color:#1B1B19}
[data-theme="dark"] .btn--solid:hover{background:var(--yellow-2)}
[data-theme="dark"] .btn--ghost{border-color:var(--anthracite);color:var(--anthracite)}
[data-theme="dark"] .btn--ghost:hover{background:var(--yellow);border-color:var(--yellow);color:#1B1B19}

/* Anruf-FAB bleibt eine feste Fläche (Icon ist weiß) */
[data-theme="dark"] .fab .ph2{background:#2A2A30}

/* Foto-Platzhalter: helle Kachel-Verläufe abdunkeln (analog .ph--dark) */
[data-theme="dark"] .ph{background-image:linear-gradient(135deg,#33332F,#24241F);--t:rgba(255,255,255,.06)}
[data-theme="dark"] .ph::after{color:rgba(255,255,255,.5)}

/* Formular-Fehlermeldung dezent abdunkeln */
[data-theme="dark"] .form-error{background:#3A1E1E;border-color:#6E3A3A;color:#F0C9C9}
[data-theme="dark"] .form-error a{color:#F0C9C9}

/* ============================================================
   ECHTE PROJEKTFOTOS in .ph-Slots
   Ein .ph mit einem <img>-Kind zeigt ein Foto statt der
   animierten Szene (site.js überspringt diese .ph). Muster &
   Label werden ausgeblendet, das Bild füllt den Slot.
   ============================================================ */
.ph.has-photo{background:var(--stone)}
.ph.has-photo::before,.ph.has-photo::after{content:none !important;display:none !important}
.ph.has-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
[data-theme="dark"] .ph.has-photo{background-image:none}

/* ============================================================
   VORHER / NACHHER — Vergleichs-Schieberegler
   Markup: .ba-block > .ba-stage (Bilder + Regler) + .ba-tabs
   Initialisiert in site.js. Tastatur- & Touch-fähig.
   ============================================================ */
.ba-block{max-width:940px;margin-inline:auto}
.ba-stage{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden;border:1px solid var(--line);
  --p:50%;background:#000;touch-action:none;box-shadow:0 26px 54px -30px rgba(32,31,28,.45)}
.ba-layer{position:absolute;inset:0}
.ba-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}
.ba-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-tag{position:absolute;top:16px;z-index:3;font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:3px;pointer-events:none;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ba-tag-b{left:16px;background:rgba(32,31,28,.78);color:#fff}
.ba-tag-a{right:16px;background:var(--yellow);color:var(--ink)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--yellow);
  transform:translateX(-1px);z-index:4;pointer-events:none;box-shadow:0 0 0 1px rgba(32,31,28,.18)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:var(--yellow);border:3px solid #fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(32,31,28,.38)}
.ba-knob svg{width:22px;height:22px;color:var(--ink)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:5}
.ba-range:focus-visible+.ba-line .ba-knob{outline:3px solid var(--ink);outline-offset:3px}
.ba-tabs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.ba-tab{flex:1 1 0;min-width:84px;aspect-ratio:4/3;border-radius:4px;overflow:hidden;border:2px solid var(--line);
  background:var(--stone) center/cover no-repeat;cursor:pointer;padding:0;position:relative;
  transition:border-color .2s,transform .15s}
.ba-tab::after{content:"";position:absolute;inset:0;background:rgba(32,31,28,.34);transition:opacity .2s}
.ba-tab:hover{transform:translateY(-2px)}
.ba-tab.is-active{border-color:var(--yellow)}
.ba-tab.is-active::after{opacity:0}
.ba-cap{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-family:var(--font-serif);
  font-style:italic;font-size:16px;line-height:1.5;color:var(--muted);max-width:62ch}
.ba-cap svg{width:19px;height:19px;color:var(--yellow-deep);flex:none;margin-top:3px}
[data-theme="dark"] .ba-tag-a{color:#141312}
[data-theme="dark"] .ba-knob{border-color:#141417}