/* ══════════════════════════════════════════════════════════════
   KG Management — Design-System (Weiß + Grün, dunkle Schrift · Kundenwunsch 13.10.2026)
   Single Source of Truth. Von allen Seiten geladen.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Marke */
  --green-900:#16311A; --green-800:#20401C; --green-700:#2C5222; --green-600:#3B6A2C;
  --lime:#9EB93E; --lime-600:#89A82F; --lime-300:#C4D98A;
  --orange:#3B6A2C; --orange-600:#2C5222;         /* Akzent 2 = Grün (Name historisch; Firmenfarben nur Weiß + Grün) */
  /* Flächen (Light = Default) */
  --bg:#FFFFFF; --surface:#FFFFFF; --sage-50:#F7FAF4; --sage-100:#EEF4E7; --sage-200:#E1EBD5;
  --fg:#1C2619; --muted:#46543F; --border:#E2E9DA;
  --primary:var(--green-800); --accent:var(--lime); --accent2:var(--green-600);
  --focus:var(--lime-600);
  /* Spacing (eigene Namen) */
  --space-xs:.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem; --space-2xl:6rem;
  --radius-sm:.5rem; --radius:1rem; --radius-lg:1.6rem; --radius-arch:1.6rem 1.6rem 8rem 8rem;
  --shadow-sm:0 1px 2px rgb(32 64 28/.06), 0 1px 3px rgb(32 64 28/.05);
  --shadow:0 12px 34px -12px rgb(32 64 28/.22);
  --shadow-lg:0 30px 60px -22px rgb(32 64 28/.30);
  /* Typo-Skala */
  --text-eyebrow:.8rem; --text-body:1.0625rem; --text-lead:clamp(1.15rem,1.4vw,1.35rem);
  --text-h4:clamp(1.15rem,1.4vw,1.35rem); --text-h3:clamp(1.3rem,2.2vw,1.7rem);
  --text-h2:clamp(1.7rem,3.6vw,2.5rem); --text-h1:clamp(2.1rem,5vw,3.6rem);
  --lh-tight:1.08; --lh-snug:1.25; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.16em;
  --dur:.5s; --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px; --maxw:1180px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#141C15; --surface:#1F2A1E; --sage-50:#1B241A; --sage-100:#24301F; --sage-200:#2C3927;
  --fg:#E9EFE1; --muted:#A6B497; --border:#31402C;
  --primary:#3B6A2C; --accent:#A9C64C; --accent2:#7FA63A; --focus:#A9C64C;
  --shadow:0 12px 34px -12px rgb(0 0 0/.5); --shadow-lg:0 30px 60px -22px rgb(0 0 0/.6);
  color-scheme:dark;
}

/* ── Base ───────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Mulish",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--text-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
/* „body h…“: tailwind.js lädt seinen Preflight NACH dieser Datei und setzt Überschriften sonst auf Fließtextgröße */
body h1,body h2,body h3,body h4,.font-head{font-family:"Lora",Georgia,serif; font-weight:600; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); color:var(--green-800)}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4{color:var(--fg)}
body h1{font-size:var(--text-h1); font-weight:700; text-wrap:balance}
body h2{font-size:var(--text-h2); text-wrap:balance}
body h3{font-size:var(--text-h3)}
body p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
strong{font-weight:700; color:var(--green-700)}
:root[data-theme="dark"] strong{color:var(--lime-300)}
::selection{background:var(--lime); color:var(--green-900)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}

/* ── Layout ─────────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem)}
.wrap-narrow{max-width:820px; margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem)}
section{position:relative; padding-block:clamp(3.5rem,8vw,7rem)}
.lede{font-size:var(--text-lead); font-weight:500; color:var(--muted); max-width:62ch; line-height:1.5}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-family:"Mulish",sans-serif;
  font-size:var(--text-eyebrow); font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--green-600); margin-bottom:.9rem}
.eyebrow::before{content:""; width:1.6rem; height:2px; background:linear-gradient(90deg,var(--lime),var(--orange)); border-radius:2px}
.sec-head{max-width:none; margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head p.lede{margin-top:.9rem}
.center{text-align:center} .center .lede{margin-inline:auto} .center .eyebrow::before{display:none}

/* ── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:999px; font-weight:700; font-size:1rem; cursor:pointer;
  border:1.5px solid transparent; transition:transform var(--dur) var(--ease-out),background .3s,color .3s,box-shadow .3s; will-change:transform}
.btn svg{width:1.15em; height:1.15em}
.btn-primary{background:var(--green-800); color:#fff; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--green-700); box-shadow:var(--shadow-lg); transform:translateY(-2px)}
.btn-lime{background:var(--lime); color:var(--green-900)}
.btn-lime:hover{background:var(--lime-600); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--green-800); border-color:var(--border)}
:root[data-theme="dark"] .btn-ghost{color:var(--fg)}
.btn-ghost:hover{border-color:var(--lime); background:var(--sage-50); transform:translateY(-2px)}
.btn-wa{background:#25D366; color:#0b3d20}
.btn-wa:hover{background:#1fbe5b; transform:translateY(-2px)}
.btn-lg{padding:1rem 1.8rem; font-size:1.05rem}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--green-600)}
.link-arrow svg{width:1.2em; height:1.2em; flex:none; transition:transform .3s}
.link-arrow:hover svg{transform:translateX(4px)}

/* ── Header / Nav ───────────────────────────────────────── */
.site-header{position:fixed; top:0; left:0; right:0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; color:var(--fg); background:transparent;
  transition:background .35s,color .35s,box-shadow .35s,backdrop-filter .35s}
.site-header:not(.scrolled)::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,0)); height:150%}
.site-header:not(.scrolled) .brand span{color:var(--green-800)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.site-header.scrolled{background:color-mix(in oklab,var(--bg) 88%,transparent); color:var(--fg);
  box-shadow:var(--shadow-sm); backdrop-filter:blur(12px) saturate(1.3)}
.brand{display:flex; align-items:center; gap:.65rem; font-family:"Lora",serif; font-weight:700; font-size:1.2rem; color:inherit}
.brand svg{width:38px; height:38px; flex:none}
.brand b{color:inherit}
.nav{display:flex; align-items:center; gap:.35rem}
.nav a{padding:.5rem .8rem; border-radius:999px; font-weight:600; font-size:.97rem; color:inherit; transition:background .25s,color .25s; position:relative}
.nav a:hover,.nav a[aria-current="page"]{background:color-mix(in oklab,var(--lime) 26%,transparent)}
.site-header:not(.scrolled) .nav a:hover{background:color-mix(in oklab,var(--lime) 26%,transparent)}
.nav .btn{padding:.6rem 1.15rem; margin-left:.4rem; font-size:.95rem}
.nav-tools{display:flex; align-items:center; gap:.5rem}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px;
  background:transparent; border:0; color:inherit; cursor:pointer; transition:background .25s}
.icon-btn:hover{background:color-mix(in oklab,var(--lime) 26%,transparent)}
.site-header:not(.scrolled) .icon-btn:hover{background:color-mix(in oklab,var(--lime) 26%,transparent)}
.icon-btn svg{width:22px; height:22px}
.burger{display:none}
/* Dropdown „Leistungen" */
.has-drop{position:relative}
.drop{position:absolute; top:calc(100% + .5rem); left:0; min-width:250px; background:var(--surface); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:.5rem;
  display:grid; gap:.1rem; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateY(0)}
.drop a{color:var(--fg); font-size:.93rem; padding:.55rem .7rem}
.drop a:hover{background:var(--sage-50)}

/* Mobile menu */
.mobile-menu{position:fixed; inset:0; z-index:200; background:var(--green-900); color:#fff;
  display:flex; flex-direction:column; padding:2rem 1.5rem; transform:translateY(-100%); transition:transform .45s var(--ease-out);
  overflow-y:auto}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{padding:.85rem .5rem; font-size:1.25rem; font-family:"Lora",serif; border-bottom:1px solid rgb(255 255 255/.1)}
.mobile-menu .btn{margin-top:1.2rem}
.mm-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem}

/* ── Hero ───────────────────────────────────────────────── */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 36%,rgba(255,255,255,.35) 66%,rgba(255,255,255,0) 88%)}
.klarzug{position:absolute; inset:0; z-index:-1; pointer-events:none}
.hero .wrap{padding-top:var(--header-h); position:relative; z-index:2}
.hero-inner{max-width:720px; color:var(--fg)}
.hero h1{color:var(--green-900); margin:.4rem 0 1.2rem}
.hero .lede{color:var(--fg)}
.hero-badges{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin:1.6rem 0 2rem}
.hero-badge{display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; color:var(--fg)}
.hero-badge svg{width:20px; height:20px; color:var(--green-600)}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem}
.hero-scroll{position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:2; color:var(--green-700); opacity:.8}
.hero-scroll svg{width:26px; height:26px; animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* Dunkelmodus (nur per Umschalter): Kopfbereiche bleiben dunkel, damit helle Schrift lesbar ist */
:root[data-theme="dark"] .hero-media::after,:root[data-theme="dark"] .subhero-media::after{background:linear-gradient(105deg,rgba(14,34,18,.9) 0%,rgba(20,46,24,.7) 45%,rgba(22,49,26,.35) 100%)}
:root[data-theme="dark"] .site-header:not(.scrolled)::before{background:linear-gradient(to bottom, rgba(14,32,16,.55), rgba(14,32,16,0))}
:root[data-theme="dark"] .site-header:not(.scrolled) .brand span,:root[data-theme="dark"] .subhero .crumb{color:var(--fg)}
:root[data-theme="dark"] .eyebrow,:root[data-theme="dark"] .cstory-step .n,:root[data-theme="dark"] .subhero .eyebrow,:root[data-theme="dark"] .link-arrow,:root[data-theme="dark"] .stat-num,:root[data-theme="dark"] .hero-badge svg,:root[data-theme="dark"] .subhero .crumb a{color:var(--lime)}

/* ── Background scene (scroll-coupled mesh) + drops canvas ─ */
.bg-scene{position:fixed; inset:0; z-index:-10; pointer-events:none;
  background:
    radial-gradient(58% 58% at var(--bgShift,22%) 26%, hsl(84 46% 66% / .10), transparent 68%),
    radial-gradient(52% 52% at var(--bgShift2,82%) 74%, hsl(96 40% 58% / .07), transparent 64%),
    var(--bg);
  transition:none}
.bg-drift{position:fixed; inset:-10%; z-index:-9; pointer-events:none; opacity:.5;
  background:radial-gradient(40% 30% at 30% 20%, rgb(158 185 62/.10), transparent 70%);
  animation:drift 22s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.05)}}
canvas.drops{position:fixed; inset:0; width:100%; height:100%; z-index:-8; pointer-events:none}

/* ── Cards / grid ───────────────────────────────────────── */
.grid{display:grid; gap:1.6rem}
.grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-out),box-shadow .5s; display:flex; flex-direction:column; will-change:transform}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.card-media{aspect-ratio:16/11; overflow:hidden; position:relative}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.card:hover .card-media img{transform:scale(1.07)}
.card-media .tag{position:absolute; top:.8rem; left:.8rem; background:color-mix(in oklab,var(--green-900) 78%,transparent);
  color:#fff; font-size:.78rem; font-weight:700; padding:.3rem .7rem; border-radius:999px; backdrop-filter:blur(4px)}
.card-body{padding:1.5rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.55rem; flex:1}
.card-body h3{margin:0; font-size:clamp(1.15rem,1.5vw,1.35rem)}
.card-body p{color:var(--muted); margin:0; font-size:.98rem}
.card-body .link-arrow{margin-top:auto; padding-top:.7rem}
.svc-ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--sage-100); color:var(--green-700); flex:none}
.svc-ico svg{width:24px; height:24px}

/* Feature (icon) list */
.feature{display:flex; gap:1rem; align-items:flex-start}
.feature .svc-ico{background:linear-gradient(135deg,var(--sage-100),var(--sage-50))}
.feature h3{font-size:1.15rem; margin:.1rem 0 .35rem}
.feature p{color:var(--muted); margin:0; font-size:.98rem}

/* Arc image */
.arc{border-radius:var(--radius-arch); overflow:hidden; box-shadow:var(--shadow-lg)}
.arc img{width:100%; height:100%; object-fit:cover}

/* Split section */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split.reverse .split-media{order:2}

/* Section tones */
.tone-sage{background:var(--sage-50)}
.tone-green{background:var(--green-800); color:#fff}
.tone-green h1,.tone-green h2,.tone-green h3{color:#fff}
.tone-green .lede{color:rgba(255,255,255,.85)}
.tone-green .eyebrow{color:var(--lime-300)}

/* ── Prozess / Steps ────────────────────────────────────── */
.steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.step{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1.4rem; box-shadow:var(--shadow-sm)}
.step-n{font-family:"Lora",serif; font-size:1.5rem; font-weight:700; color:var(--lime); width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--sage-100); margin-bottom:1rem}
.step h3{font-size:1.1rem; margin:0 0 .4rem}
.step p{color:var(--muted); font-size:.95rem; margin:0}
.steps-line{position:absolute; top:26px; left:8%; right:8%; height:2px; z-index:0}
.steps-line path{fill:none; stroke:var(--lime); stroke-width:2; stroke-dasharray:6 7; opacity:.55}

/* ── Before/After slider ────────────────────────────────── */
.ba{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); user-select:none; aspect-ratio:4/3; background:#0a1a0c}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba-before{clip-path:inset(0 var(--ba,50%) 0 0)}
.ba-tag{position:absolute; top:.9rem; font-size:.78rem; font-weight:700; color:#fff; background:rgb(16 40 20/.72);
  padding:.28rem .7rem; border-radius:999px; pointer-events:none; backdrop-filter:blur(3px); z-index:3}
.ba-tag-l{left:.9rem} .ba-tag-r{right:.9rem; background:var(--lime-600); color:var(--green-900)}
.ba-handle{position:absolute; top:0; bottom:0; left:var(--ba,50%); width:3px; background:#fff; transform:translateX(-50%); z-index:2; box-shadow:0 0 14px rgb(0 0 0/.4)}
.ba-handle::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2320401C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}
.ba-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4}

/* ── Vergrößern-Button + Lightbox-Modal ─────────────────── */
.ba-zoom,.spray-zoom{position:absolute; bottom:.9rem; right:.9rem; z-index:6; width:40px; height:40px; border:none; border-radius:50%; cursor:pointer;
  background:rgb(16 40 20/.72); color:#fff; display:grid; place-items:center; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgb(0 0 0/.3); transition:background .2s ease, transform .2s ease}
.ba-zoom:hover,.spray-zoom:hover,.ba-zoom:focus-visible,.spray-zoom:focus-visible{background:var(--green-800,#20401C); transform:scale(1.07); outline:2px solid var(--lime-400); outline-offset:2px}
.ba-zoom svg,.spray-zoom svg{width:20px; height:20px}
#ba-modal{position:fixed; inset:0; z-index:10000; display:none; place-items:center; padding:clamp(1rem,4vw,2.5rem);
  background:rgb(8 18 10/.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
#ba-modal.open{display:grid}
.ba-modal-inner{position:relative; width:min(96vw,1200px); max-height:92vh; animation:baModalIn .3s ease}
.ba-modal-inner .ba{width:100%; aspect-ratio:4/3; max-height:82vh; box-shadow:0 30px 80px rgb(0 0 0/.5)}
.ba-modal-cap{margin:.9rem 0 0; text-align:center; color:#fff; font-weight:600; font-size:1rem}
.ba-modal-close{position:fixed; top:clamp(.8rem,2vw,1.4rem); right:clamp(.8rem,2vw,1.4rem); z-index:10001; width:46px; height:46px; border:none; border-radius:50%;
  cursor:pointer; background:#fff; color:var(--green-900,#12280F); display:grid; place-items:center; box-shadow:0 6px 20px rgb(0 0 0/.35)}
.ba-modal-close svg{width:22px; height:22px}
body.ba-modal-open{overflow:hidden}
@keyframes baModalIn{from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .ba-modal-inner{animation:none} }

/* ── FAQ ────────────────────────────────────────────────── */
.faq{display:grid; gap:.8rem}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:1.2rem 1.3rem; font-size:1.08rem; font-weight:700; font-family:"Lora",serif;
  color:var(--green-800); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem}
:root[data-theme="dark"] .faq-q{color:var(--fg)}
.faq-q svg{width:22px; height:22px; flex:none; transition:transform .35s; color:var(--lime-600)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease-out)}
.faq-a p{padding:0 1.3rem 1.3rem; color:var(--muted); margin:0}

/* ── Statistik-Kacheln (Sauberkeit wirkt) ──────────────────── */
.stat-tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.8rem 1.5rem;
  text-align:center; box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.stat-tile::before{content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(60% 60% at 50% 0%, var(--sage-50), transparent)}
.stat-tile>*{position:relative; z-index:1}
.stat-num{font-family:"Lora",serif; font-size:clamp(2.3rem,4.2vw,3rem); font-weight:700; color:var(--green-600); line-height:1; display:block}
.stat-tile p{color:var(--muted); font-size:.95rem; margin:.6rem 0 0}

/* ── Pakete / Abo-Reinigung ─────────────────────────────── */
.pkg-card{background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.9rem 1.7rem;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1rem; transition:transform .5s var(--ease-out),box-shadow .5s,border-color .3s}
.pkg-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.pkg-card.featured{border-color:var(--lime); background:linear-gradient(165deg,var(--sage-50),var(--surface) 55%)}
.pkg-badge{align-self:flex-start; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--green-900); background:var(--lime); padding:.3rem .7rem; border-radius:999px}
.pkg-card h3{margin:0; font-size:1.3rem}
.pkg-card .pkg-for{color:var(--muted); font-size:.92rem; margin:-.5rem 0 0}
.pkg-list{display:grid; gap:.6rem; margin:0}
.pkg-list li{display:flex; gap:.6rem; align-items:flex-start; list-style:none; font-size:.95rem}
.pkg-list svg{width:19px; height:19px; flex:none; color:var(--lime-600); margin-top:2px}
.pkg-card .btn{margin-top:auto}

/* ── Forms ──────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem}
.field label{font-weight:600; font-size:.92rem; color:var(--green-700)}
:root[data-theme="dark"] .field label{color:var(--lime-300)}
.field input,.field select,.field textarea{font:inherit; padding:.8rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); transition:border-color .25s,box-shadow .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--lime); box-shadow:0 0 0 3px color-mix(in oklab,var(--lime) 30%,transparent)}
.field textarea{min-height:130px; resize:vertical}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form-note{font-size:.85rem; color:var(--muted)}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--muted)}
.consent input{flex:none; margin-top:.2rem; width:20px; height:20px; accent-color:var(--lime-600)}
.form-ok{display:none; padding:1rem 1.2rem; border-radius:var(--radius); background:var(--sage-100); color:var(--green-800); font-weight:600}
.form-ok.show{display:block}
.form-status{display:none; margin-top:.9rem; padding:.85rem 1.1rem; border-radius:var(--radius); font-weight:600; font-size:.92rem}
.form-status.show{display:block}
.form-status.is-error{background:#fdecea; color:#8a1c10}
.hp-field{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; overflow:hidden!important; opacity:0!important; pointer-events:none!important}

/* Calendar (Eigenlösung) */
.cal{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow-sm)}
.cal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.cal-head button{background:var(--sage-100); border:0; width:38px; height:38px; border-radius:50%; cursor:pointer; color:var(--green-700); font-size:1.1rem}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem}
.cal-grid .dow{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:center; padding:.3rem 0; font-weight:700}
.cal-day{aspect-ratio:1; border:1px solid transparent; border-radius:.6rem; background:var(--sage-50); color:var(--fg); cursor:pointer; font:inherit; font-size:.9rem; transition:all .2s}
.cal-day:hover:not(:disabled){background:var(--lime-300)}
.cal-day:disabled{opacity:.32; cursor:not-allowed; background:transparent}
.cal-day.sel{background:var(--green-800); color:#fff; font-weight:700}
.cal-slots{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem}
.slot{padding:.5rem .9rem; border:1.5px solid var(--border); border-radius:999px; background:var(--surface); cursor:pointer; font:inherit; font-size:.9rem; transition:all .2s}
.slot:hover{border-color:var(--lime)} .slot.sel{background:var(--lime); border-color:var(--lime); color:var(--green-900); font-weight:700}

/* ── Wisch-Wipe illustration ────────────────────────────── */
/* Sprüh-Reveal Set-Piece: beschlagene Scheibe über echtem Foto, Abzieher wischt sauber */
.spray-reveal{position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow-lg); isolation:isolate; margin:0}
.spray-reveal img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.spray-after{position:absolute; inset:0; z-index:2; clip-path:inset(0 var(--rvr,0%) 0 0); will-change:clip-path}
.spray-handle{position:absolute; top:0; bottom:0; left:var(--rv,0%); width:3px; background:#fff; transform:translateX(-50%); z-index:3; box-shadow:0 0 14px rgb(0 0 0/.4); opacity:0; transition:opacity .35s ease; pointer-events:none}
.spray-handle::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2320401C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}
.spray-reveal.is-ready .spray-handle{opacity:1}
.spray-range{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5; touch-action:none}
.spray-range:focus-visible + .spray-tag{outline:2px solid var(--lime-400); outline-offset:3px}
.spray-bar{position:absolute; top:-2%; height:104%; width:42px; z-index:3; left:0; transform:translateX(-70px); opacity:0; pointer-events:none; will-change:transform;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.92) 48%, rgba(255,255,255,.98) 56%, rgba(180,205,120,.5) 80%, transparent)}
.spray-bar::after{content:""; position:absolute; right:-7px; top:0; bottom:0; width:16px;
  background:
    radial-gradient(circle at 50% 16%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 30% 46%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 62% 72%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 40% 92%, #fff 0 2px, transparent 3px); opacity:.85}
.spray-tag{position:absolute; left:.9rem; bottom:.9rem; z-index:4; display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem; border-radius:999px; background:rgba(32,64,28,.72); color:#fff; font-size:.8rem; font-weight:600;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
.spray-tag svg{width:1em; height:1em; color:var(--lime-300)}
@media (prefers-reduced-motion:reduce){ .spray-reveal{--rvr:50%; --rv:50%} .spray-bar{display:none} }

/* ── Chips / list check ─────────────────────────────────── */
.checklist{display:grid; gap:.8rem; margin:1.4rem 0}
.checklist li{display:flex; gap:.7rem; align-items:flex-start; list-style:none}
.checklist svg{width:22px; height:22px; flex:none; color:var(--lime-600); margin-top:2px}
ul.reset{list-style:none; padding:0; margin:0}

/* ── Floating WhatsApp ──────────────────────────────────── */
.wa-float{position:fixed; right:1.1rem; bottom:1.1rem; z-index:90; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#0b3d20; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px; height:30px}

/* ── CTA band ───────────────────────────────────────────── */
.cta-band{background:linear-gradient(120deg,var(--green-800),var(--green-700)); color:#fff; border-radius:var(--radius-lg); padding:clamp(2.2rem,5vw,3.6rem); position:relative; overflow:hidden}
.cta-band h2{color:#fff}
.cta-band .eyebrow,.site-footer .eyebrow{color:var(--lime-300)}
.cta-band .lede{color:rgba(255,255,255,.85)}
.cta-band .deco{position:absolute; right:-40px; top:-40px; width:220px; height:220px; opacity:.16; color:var(--lime)}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--green-900); color:rgba(255,255,255,.82); padding-top:clamp(3rem,6vw,4.5rem)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem}
.footer-top h4{color:#fff; font-size:1rem; margin:0 0 1rem; font-family:"Mulish",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em}
.footer-top a{color:rgba(255,255,255,.8)} .footer-top a:hover{color:var(--lime)}
.footer-brand{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; color:#fff; font-family:"Lora",serif; font-size:1.25rem; font-weight:700}
.footer-brand svg{width:40px; height:40px}
.footer-col ul{list-style:none; padding:0; margin:0; display:grid; gap:.55rem; font-size:.95rem}
.footer-contact li{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.7rem; font-size:.95rem}
.footer-contact svg{width:19px; height:19px; color:var(--lime); flex:none; margin-top:2px}
.footer-bottom{border-top:1px solid rgb(255 255 255/.12); padding:1.4rem 0; display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; align-items:center; font-size:.9rem}
.footer-bottom .links{display:flex; flex-wrap:wrap; gap:1.2rem}
.footer-bottom a:hover{color:var(--lime)}
.demo-note{font-size:.78rem; color:rgba(255,255,255,.5); padding:0 0 1.5rem; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem)}

/* ── Preloader / Lade-Animation (Putzlappen wischt das Logo frei) ────────
   Heller Grün-Verlauf (helles Seiten-Grün), farbiges Logo, Lappen wischt 3×. */
#preloader{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(180deg, #F7FAF4 0%, #EEF4E7 100%)}
.pl-stage{position:relative; width:min(540px, 82vw)}
.pl-card{background:transparent; padding:clamp(1.3rem,4vw,2.3rem) clamp(1.5rem,5vw,2.9rem)}
.pl-logo{display:block; width:100%; height:auto}
.pl-cloth svg g[stroke]{stroke:var(--green-600)}
.pl-cloth{position:absolute; top:50%; left:0; width:clamp(84px,22%,132px); transform:translate(-50%,-50%);
  will-change:left,opacity; pointer-events:none; z-index:3}
.pl-cloth svg{width:100%; height:auto; display:block; filter:drop-shadow(0 8px 14px rgba(32,64,28,.22))}
@media (max-width:600px){ .pl-cloth{width:96px} }

/* ── Reveal fail-safe (CDN blocked) ─────────────────────── */
.no-anim [data-reveal]>*,.no-anim [data-split],.no-anim [data-depth],.no-anim [data-reveal-self]{opacity:1 !important; transform:none !important}

/* ── Page intro (view transition fallback) ──────────────── */
main{min-height:40vh}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(2,1fr)} .steps-line{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1200px){
  /* Tablet: nur Kern-Links sichtbar lassen (Leistungen, Über uns, Angebot),
     Rest wandert in die Burger-Menü. Theme-Schalter bleibt IMMER sichtbar. */
  .nav > a[href="vorher-nachher.html"],
  .nav > a[href="blog.html"],
  .nav > a[href="kontakt.html"]{display:none}
  .burger{display:inline-flex}
}
@media (max-width:768px){
  /* Handy: auch Leistungen & Über uns in die Burger; nur noch Angebot-Button bleibt */
  .nav > .has-drop,
  .nav > a[href="ueber-uns.html"]{display:none}
  .split{grid-template-columns:1fr} .split.reverse .split-media{order:0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero{min-height:auto; padding-block:clamp(6rem,18vw,8rem)}
  .hero-media::after,.subhero-media::after{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.86))}
  section{padding-block:clamp(3rem,10vw,4.5rem)}
}
@media (max-width:480px){
  /* Kleine Handys: auch der Angebot-Button wandert in die Burger */
  .nav > a.btn{display:none}
}

/* ── Subpage hero ───────────────────────────────────────── */
.subhero{position:relative; padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)); padding-bottom:clamp(2.5rem,6vw,4rem);
  overflow:hidden; isolation:isolate; color:#fff}
.subhero-media{position:absolute; inset:0; z-index:-2}
.subhero-media img{width:100%; height:100%; object-fit:cover}
.subhero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,.55) 75%,rgba(255,255,255,.3) 100%)}
.subhero h1{color:var(--green-900); margin:.5rem 0 .8rem}
.subhero .lede{color:var(--fg); max-width:60ch}
.subhero .crumb{font-size:.85rem; color:var(--muted); margin-bottom:.4rem}
.subhero .crumb a{color:var(--green-600)}
.subhero .eyebrow{color:var(--green-600)}

/* ── Prose (blog/legal) ─────────────────────────────────── */
.prose{max-width:70ch; margin-inline:auto}
.prose h2{margin:2.4rem 0 .8rem} .prose h3{margin:1.8rem 0 .6rem}
.prose p,.prose li{color:var(--fg); line-height:1.75}
.prose ul,.prose ol{padding-left:1.3rem; margin:0 0 1.2rem} .prose li{margin-bottom:.5rem}
.prose a{color:var(--lime-600); text-decoration:underline}
.prose blockquote{border-left:4px solid var(--lime); padding:.4rem 0 .4rem 1.3rem; margin:1.6rem 0; font-family:"Lora",serif; font-size:1.25rem; color:var(--green-700)}
.prose .figure{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); margin:2rem 0}
.legal{max-width:760px; margin-inline:auto} .legal h2{font-size:1.15rem; margin:2.2rem 0 .5rem} .legal address{font-style:normal}
.legal a{color:var(--lime-600)} .muted-sm{color:var(--muted); font-size:.9rem}

/* ── Contact grid / map ─────────────────────────────────── */
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start}
.contact-cards{display:grid; gap:1rem}
.contact-card{display:flex; gap:1rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm)}
.contact-card .svc-ico{background:var(--sage-100)}
.contact-card a{color:var(--green-700); font-weight:600}
:root[data-theme="dark"] .contact-card a{color:var(--lime-300)}
.map-embed{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; border:1px solid var(--border)}
.map-embed iframe{width:100%; height:100%; border:0; filter:saturate(.9)}

/* ── Blog cards ─────────────────────────────────────────── */
.blog-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .5s var(--ease-out),box-shadow .5s}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.blog-card .card-media{aspect-ratio:16/10}
.blog-card .meta{font-size:.8rem; color:var(--lime-600); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.4rem}
.reading-bar{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--lime),var(--orange)); width:0; z-index:150}
.tldr{background:var(--sage-100); border-radius:var(--radius); padding:1.3rem 1.5rem; margin:1.5rem 0}
.tldr strong{color:var(--green-800)}

/* ── Interaktive Frage (Blog → Kontakt-Anreiz) ─────────────── */
.quiz{background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.7rem 1.8rem; margin:2rem 0; box-shadow:var(--shadow-sm)}
.quiz-q{font-family:"Lora",serif; font-weight:700; font-size:1.1rem; color:var(--green-800); margin:0 0 1rem}
:root[data-theme="dark"] .quiz-q{color:var(--fg)}
.quiz-opts{display:grid; gap:.6rem; margin:0}
.quiz-opt{display:block}
.quiz-opt input{position:absolute; opacity:0; pointer-events:none}
.quiz-opt span{display:block; padding:.8rem 1.1rem; border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer;
  font-weight:600; font-size:.95rem; transition:all .2s}
.quiz-opt span:hover{border-color:var(--lime)}
.quiz-opt input:checked+span{background:var(--lime); border-color:var(--lime); color:var(--green-900)}
.quiz-result{display:none; margin-top:1.2rem; padding-top:1.2rem; border-top:1px dashed var(--border)}
.quiz-result.show{display:block}
.quiz-result p{margin:0 0 .9rem}
.blog-toc{position:sticky; top:calc(var(--header-h) + 1rem); align-self:start; font-size:.9rem}
.blog-toc a{display:block; padding:.35rem 0; color:var(--muted); border-left:2px solid var(--border); padding-left:.9rem}
.blog-toc a.active,.blog-toc a:hover{color:var(--green-700); border-color:var(--lime)}
.blog-layout{display:grid; grid-template-columns:220px 1fr; gap:3rem; align-items:start}

/* ── Related / mini cards ───────────────────────────────── */
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.rel-card{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); transition:transform .4s,box-shadow .4s}
.rel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.rel-card h4{margin:.4rem 0 .3rem; font-size:1.05rem} .rel-card p{color:var(--muted); font-size:.9rem; margin:0}

/* ── Identity tabs (Modul 05) ───────────────────────────── */
.id-tabs{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem}
.id-tab{padding:.7rem 1.3rem; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; font:inherit; font-weight:700; color:var(--green-700); transition:all .25s; text-align:center}
.id-tab small{display:block; font-weight:500; font-size:.78rem; color:var(--muted)}
.id-tab.active{background:var(--green-800); color:#fff; border-color:var(--green-800)} .id-tab.active small{color:rgba(255,255,255,.75)}
.id-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.id-preview{height:250px; display:grid; place-items:center; background:var(--sage-50); overflow:hidden; padding:1rem}
.id-preview img,.id-preview svg{max-height:220px; max-width:100%; object-fit:contain}
.id-card-body{padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:.6rem}
.id-dl{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto}
.id-dl a{font-size:.85rem; padding:.4rem .8rem; border:1.5px solid var(--border); border-radius:999px; font-weight:700; color:var(--green-700)}
.id-dl a:hover{border-color:var(--lime); background:var(--sage-50)}
.swatch-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem}
.swatch{border-radius:var(--radius); overflow:hidden; border:1px solid var(--border)}
.swatch .chip{height:80px} .swatch .info{padding:.7rem .9rem; font-size:.8rem; background:var(--surface)} .swatch .info b{display:block; font-size:.9rem}
table.dom{width:100%; border-collapse:collapse; font-size:.92rem}
table.dom th,table.dom td{text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--border)}
table.dom th{color:var(--green-700); font-weight:700}

@media (max-width:768px){
  .contact-grid{grid-template-columns:1fr} .rel-grid{grid-template-columns:1fr}
  .blog-layout{grid-template-columns:1fr} .blog-toc{display:none}
}

/* Eigene Klarzug-Übergangsanimation (site.js) steuert den Seitenwechsel bewusst statt
   der nativen View-Transition-Überblendung — sonst liefen beide Effekte gleichzeitig. */
@view-transition{navigation:none}

/* ═══════════════════════════════════════════════════════════
   AUSBAU 2026-07-10 — Klarsicht-Hero · Vergleich · Karte · Rezensionen · Call
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: interaktives Sprühglas („Klarsicht-Spray") ───────── */
.hero-frost{position:absolute; inset:0; z-index:3; pointer-events:none;
  filter:blur(1px); transition:opacity .5s ease}
.hero-hint{position:absolute; z-index:4; left:50%; bottom:clamp(4.6rem,11vh,6.4rem); transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.82); border:1px solid var(--border); color:var(--green-800); font-size:.86rem; font-weight:600;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 8px 26px -14px rgba(32,64,28,.35);
  white-space:nowrap; transition:opacity .5s ease, transform .5s ease; animation:hintPulse 2.6s ease-in-out infinite}
.hero-hint svg{width:1.05em; height:1.05em; color:var(--green-600)}
.hero-hint.gone{opacity:0; transform:translate(-50%,10px); pointer-events:none}
@keyframes hintPulse{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
@media (max-width:600px){ .hero-hint{font-size:.78rem} }
@media (prefers-reduced-motion:reduce){ .hero-frost{display:none} .hero-hint{display:none} }

/* ── Vergleichs-Checkliste „Der KG-Unterschied" ─────────────── */
.compare-wrap{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; max-width:940px; margin-inline:auto}
.compare-col{border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.1rem); border:1px solid var(--border); background:var(--surface)}
.compare-col.kg{background:linear-gradient(155deg,var(--green-800),var(--green-700)); color:#fff; border:0; box-shadow:var(--shadow-lg)}
.compare-col.kg h3{color:#fff}
.compare-col.other{background:var(--sage-50)}
.compare-head{display:flex; align-items:center; gap:.6rem; margin:0 0 1.2rem}
.compare-head h3{margin:0; font-size:1.25rem}
.compare-badge{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px}
.compare-col.kg .compare-badge{background:var(--lime); color:var(--green-900)}
.compare-col.other .compare-badge{background:var(--sage-200); color:var(--muted)}
.compare-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem}
.compare-list li{display:flex; gap:.7rem; align-items:flex-start; font-size:1.0rem; line-height:1.42}
.compare-list .ic{flex:none; width:24px; height:24px; margin-top:1px}
.compare-col.kg .compare-list .ic{color:var(--lime-300)}
.compare-col.other{color:var(--muted)} .compare-col.other .compare-list .ic{color:#C56A45}
.compare-col.other li{text-decoration:none}
@media (max-width:720px){ .compare-wrap{grid-template-columns:1fr} }

/* ── Einzugsgebiet-Karte ────────────────────────────────────── */
.kmap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,4vw,3rem); align-items:center}
.kmap-figure{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,var(--sage-100),var(--sage-50));
  border:1px solid var(--border); box-shadow:var(--shadow)}
.kmap-figure svg{display:block; width:100%; height:auto}
.kmap-figure .land{fill:var(--surface); stroke:var(--lime); stroke-width:1.4; opacity:.9}
.kmap-figure .river{fill:none; stroke:#8FB4D6; stroke-width:3.4; opacity:.55; stroke-linecap:round}
.kmap-figure .radius{fill:var(--lime); opacity:.12; transform-origin:center; animation:radiusPulse 3.4s ease-in-out infinite}
.kmap-figure .pin{fill:var(--green-700)} .kmap-figure .pin-hq{fill:var(--orange)}
.kmap-figure .pin-lbl{font:600 13px "Mulish",sans-serif; fill:var(--fg)}
.kmap-figure .pin-lbl.hq{font-weight:800; fill:var(--green-800)}
.kmap-dot{transform-origin:center; animation:dotPop .5s var(--ease-out) both}
@keyframes radiusPulse{0%,100%{transform:scale(.9); opacity:.10}50%{transform:scale(1.06); opacity:.20}}
@keyframes dotPop{from{transform:scale(0)}to{transform:scale(1)}}
.kmap-cities{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem}
.kmap-city{display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; border-radius:999px; background:var(--surface);
  border:1px solid var(--border); font-size:.92rem; font-weight:600; color:var(--fg); box-shadow:var(--shadow-sm)}
.kmap-city svg{width:14px; height:14px; color:var(--lime-600)}
.kmap-city.hq{background:var(--green-800); color:#fff; border-color:var(--green-800)} .kmap-city.hq svg{color:var(--lime-300)}
@media (max-width:800px){ .kmap{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .kmap-figure .radius{animation:none} .kmap-dot{animation:none} }

/* ── Rezensionen / Kundenstimmen ────────────────────────────── */
.testi-agg{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem 1.1rem; margin:0 auto 2rem; max-width:640px}
.testi-agg .score{font-family:"Lora",serif; font-size:2.2rem; font-weight:700; color:var(--green-800); line-height:1}
.testi-agg .gstars{color:#F5B301; font-size:1.15rem; letter-spacing:2px}
.testi-agg .sub{color:var(--muted); font-size:.95rem}
.testi-agg .glogo{font-weight:700; display:inline-flex; align-items:center; gap:.35rem}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.testi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem 1.55rem;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.75rem; position:relative}
.testi-card .quote-ic{position:absolute; top:1.1rem; right:1.2rem; width:30px; height:30px; color:var(--sage-200)}
.testi-stars{color:#F5B301; letter-spacing:2px; font-size:1.02rem}
.testi-text{color:var(--fg); line-height:1.62; margin:0}
.testi-meta{display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:.4rem}
.testi-ava{width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; color:#fff; font-size:1rem}
.testi-name{font-weight:700; line-height:1.2}
.testi-src{font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:.3rem}
.testi-src svg{width:13px; height:13px}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr} }

/* ── Plakative Telefonnummer (Floating Call-Button) ─────────── */
.call-float{position:fixed; right:calc(1.1rem + 58px + .55rem); bottom:1.1rem; z-index:90; height:58px; padding:0 1.15rem; border-radius:999px;
  background:var(--green-800); color:#fff; display:inline-flex; align-items:center; gap:.6rem; font-weight:800; font-size:1rem;
  box-shadow:var(--shadow-lg); transition:transform .3s}
.call-float:hover{transform:scale(1.05); color:#fff}
.call-float svg{width:24px; height:24px; flex:none; color:var(--lime-300)}
.call-float .num{white-space:nowrap}
.call-float::before{content:""; position:absolute; inset:-4px; border-radius:999px; border:2px solid var(--lime);
  opacity:.6; animation:callRing 2.4s ease-out infinite}
@keyframes callRing{0%{transform:scale(1); opacity:.6}70%{transform:scale(1.14); opacity:0}100%{opacity:0}}
@media (max-width:540px){ .call-float .num{display:none} .call-float{padding:0; width:56px; justify-content:center} }
@media (prefers-reduced-motion:reduce){ .call-float::before{animation:none} }

/* ══════════════════════════════════════════════════════════════════
   SCROLLYTELLING — „In vier Zügen zum Glanz" (Raum-Verwandlung)
   KEIN GSAP-Pin (kollidiert mit Lenis) — stattdessen CSS position:sticky.
   Zustände kommen aus JS über CSS-Variablen auf .cstory-stage:
   --clean --measure --fog --sqx --floor --done  (Default = sauberer Endzustand).
   ══════════════════════════════════════════════════════════════════ */
.clean-story{background:linear-gradient(180deg, var(--surface) 0%, var(--sage-50) 100%); color:var(--fg); padding:0}
.clean-story h2,.clean-story h3{color:var(--green-900)}
.clean-story .lede{color:var(--muted)}
.cstory-track{position:relative; height:300vh}                 /* liefert die Scroll-Länge */
.cstory-sticky{position:sticky; top:0; min-height:100vh; height:100svh; display:flex; align-items:center; padding-block:clamp(1rem,3vh,2.2rem)}
.cstory-sticky .wrap{width:100%}
.cstory-head{margin-bottom:clamp(1rem,2.4vh,1.6rem)}
.cstory-head h2{margin:.2rem 0 .3rem}
.cstory-head .lede{font-size:clamp(1rem,1.2vw,1.15rem)}
.cstory-inner{display:grid; grid-template-columns:minmax(240px,330px) 1fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:center}
.cstory-rail{display:flex; flex-direction:column; gap:.5rem; margin:0; padding:0; list-style:none}
.cstory-step{position:relative; display:flex; gap:1rem; align-items:flex-start; padding:.85rem 1.1rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface); transition:background .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out)}
.cstory-step .n{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:"Lora",serif; font-weight:700;
  font-size:1.05rem; color:var(--green-700); background:rgba(158,185,62,.14); border:1px solid rgba(158,185,62,.45); transition:all .4s var(--ease-out)}
.cstory-step h3{font-size:1.02rem; margin:.28rem 0 .2rem; color:var(--green-900); transition:color .3s}
.cstory-step p{margin:0; font-size:.88rem; color:var(--muted); line-height:1.45}
.cstory-step.is-active{background:rgba(158,185,62,.14); border-color:var(--lime); transform:translateX(4px)}
.cstory-step.is-active .n{background:var(--lime); color:var(--green-900); border-color:var(--lime); box-shadow:0 0 0 5px rgba(158,185,62,.16)}
.cstory-step.is-done .n{background:rgba(158,185,62,.28); color:var(--green-900)}

/* ── Bühne (SVG-Raum + Overlay-Ebenen, per Variablen gesteuert) ── */
.cstory-stage{--clean:1; --measure:0; --fog:100%; --sqx:94%; --floor:1; --done:1;
  position:relative; aspect-ratio:800/560; width:100%; max-height:min(60vh,520px); margin-inline:auto;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08); background:#0f2410}
.cstory-stage>*{position:absolute; inset:0}
.cstory-room{width:100%; height:100%; display:block}
.cstory-dust{opacity:calc((1 - var(--clean)) * .95); transition:opacity .1s linear}
.cstory-clutter{opacity:calc(clamp(0, (1 - var(--clean)) * 1.6, 1)); transition:opacity .12s linear}
/* Schmutz-/Dunkel-Schleier: dimmt & vergraut den Raum, aber Raum bleibt SICHTBAR (nicht schwarz) */
.cstory-grime{background:
    radial-gradient(110% 95% at 50% 42%, rgba(120,116,80,.0), rgba(40,42,26,.42) 100%),
    linear-gradient(180deg, rgba(86,78,48,.22), rgba(30,34,18,.34));
  mix-blend-mode:multiply; opacity:calc((1 - var(--clean)) * .72); transition:opacity .1s linear; pointer-events:none}
/* Tageslicht-Wäsche: hellt den Raum am Ende sichtbar auf (screen) */
.cstory-daylight{background:
    radial-gradient(70% 70% at 74% 26%, rgba(255,246,214,.6), rgba(255,246,214,.12) 55%, transparent 72%),
    linear-gradient(180deg, rgba(214,236,255,.22), rgba(255,255,255,.05));
  mix-blend-mode:screen; opacity:calc(var(--clean) * .95); transition:opacity .1s linear; pointer-events:none}
.cstory-shine{background:linear-gradient(0deg, transparent 60%, rgba(196,217,138,.12) 80%, rgba(255,255,255,.28) 100%);
  opacity:var(--clean); transition:opacity .1s linear; pointer-events:none}
.cstory-beam{background:linear-gradient(150deg, rgba(255,247,214,.55) 0%, rgba(255,247,214,.14) 26%, transparent 48%);
  opacity:calc(var(--clean) * .9); transition:opacity .1s linear; pointer-events:none; mix-blend-mode:screen}
/* Schritt 1 – Aufmaß: Scan-Linie mit Ticks wandert von oben nach unten */
.cstory-measure{position:absolute; inset:auto; left:6%; right:6%; height:2px; top:calc(12% + var(--measure) * 62%);
  background:repeating-linear-gradient(90deg, var(--lime) 0 12px, transparent 12px 22px);
  box-shadow:0 0 12px rgba(158,185,62,.8); opacity:calc(var(--measure) * (1 - var(--measure)) * 4); pointer-events:none}
.cstory-measure::before,.cstory-measure::after{content:""; position:absolute; top:-5px; width:2px; height:12px; background:var(--lime)}
.cstory-measure::before{left:0} .cstory-measure::after{right:0}
/* Schritt 2 – Fenster-Wisch: Beschlag wird weggezogen, Abzieher folgt */
.cstory-fog{position:absolute; inset:auto; left:53.5%; right:6%; top:14%; bottom:34%;
  background:linear-gradient(135deg, rgba(233,241,223,.86), rgba(205,223,195,.8)); border-radius:3px;
  clip-path:inset(0 0 0 var(--fog,100%)); pointer-events:none}
.cstory-squeegee{position:absolute; inset:auto; left:var(--sqx,94%); top:13%; bottom:33%; width:8px; margin-left:-4px;
  background:linear-gradient(90deg, rgba(255,255,255,.2), #eaf1de, rgba(255,255,255,.2));
  border-radius:4px; box-shadow:0 0 16px rgba(196,217,138,.85); opacity:0; transition:opacity .2s}
.cstory-stage.is-wiping .cstory-squeegee{opacity:1}
/* Schritt 3 – Boden-Glanz-Sweep: heller Streifen fährt über den Boden */
.cstory-floor{position:absolute; inset:auto; left:0; right:0; top:71%; bottom:0; overflow:hidden; pointer-events:none}
.cstory-floor::before{content:""; position:absolute; top:0; bottom:0; width:38%;
  left:calc(-40% + var(--floor) * 140%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:calc(var(--floor) * (1 - var(--floor)) * 4); transform:skewX(-16deg)}
/* Schritt 4 – Abnahme: geprüft-Haken poppt auf */
.cstory-check{position:absolute; inset:auto; left:auto; right:5%; top:auto; bottom:6%; width:64px; height:64px; border-radius:50%;
  background:var(--lime); color:var(--green-900); display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 6px rgba(158,185,62,.2);
  opacity:calc(clamp(0, (var(--done) - .15) * 1.4, 1)); transform:scale(calc(.5 + var(--done) * .5)); transition:opacity .15s, transform .25s var(--ease-out)}
.cstory-check svg{width:34px; height:34px}
.cstory-sparks{opacity:calc(clamp(0, (var(--clean) - .55) * 2.4, 1)); transition:opacity .12s linear; pointer-events:none}
.cstory-sparks .sp{transform-box:fill-box; transform-origin:50% 50%; animation:cstorySpark 3.2s ease-in-out infinite}
.cstory-sparks .sp:nth-child(2){animation-delay:.7s} .cstory-sparks .sp:nth-child(3){animation-delay:1.4s}
.cstory-sparks .sp:nth-child(4){animation-delay:2.1s} .cstory-sparks .sp:nth-child(5){animation-delay:.35s}
@keyframes cstorySpark{0%,100%{transform:scale(.5); opacity:.2}50%{transform:scale(1); opacity:1}}
.cstory-hint{position:absolute; z-index:3; inset:auto auto 1rem 50%; transform:translateX(-50%);
  font-family:"Mulish",sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6);
  display:inline-flex; align-items:center; gap:.5rem; opacity:calc(1 - var(--clean)); transition:opacity .3s}
.cstory-hint svg{width:15px; height:15px}
@media (max-width:860px){
  .cstory-track{height:260vh}
  .cstory-inner{grid-template-columns:1fr; gap:1.1rem}
  .cstory-inner>*{min-width:0}  /* sonst macht die waagerechte Schrittleiste die ganze Seite breiter */
  .cstory-rail{flex-direction:row; overflow-x:auto; gap:.6rem; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .cstory-rail::-webkit-scrollbar{display:none}
  .cstory-step{min-width:220px} .cstory-step p{display:none}
  .cstory-stage{max-height:44vh}
}
@media (prefers-reduced-motion:reduce){ .cstory-sparks .sp{animation-duration:16s} }

/* ══════════════════════════════════════════════════════════════════
   FINANZRECHNER — „Was kostet Ihre Reinigung?" (Live-Kostenschätzer)
   ══════════════════════════════════════════════════════════════════ */
.calc-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:start}
.calc-panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(1.4rem,3vw,2.1rem); box-shadow:var(--shadow-sm)}
.calc-field{margin-bottom:1.5rem}
.calc-field:last-child{margin-bottom:0}
.calc-label{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-weight:700; color:var(--fg); margin-bottom:.7rem; font-size:.98rem}
.calc-label .val{font-family:"Mulish",sans-serif; font-weight:800; color:var(--green-700); font-size:.95rem; white-space:nowrap}
.calc-chips{display:flex; flex-wrap:wrap; gap:.55rem}
.calc-chip{cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--fg); border-radius:999px; padding:.5rem .95rem;
  font-size:.9rem; font-family:inherit; display:inline-flex; align-items:center; gap:.4rem; transition:all .22s var(--ease-out)}
.calc-chip:hover{border-color:var(--lime); transform:translateY(-1px)}
.calc-chip.sel{background:var(--green-800); color:#fff; border-color:var(--green-800)}
.calc-chip.sel svg{color:var(--lime-300)}
.calc-chip svg{width:16px; height:16px; flex:none}
.calc-range{-webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; outline-offset:5px;
  background:linear-gradient(90deg, var(--lime) var(--fill,40%), var(--sage-200) var(--fill,40%))}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--green-800);
  border:4px solid var(--surface); box-shadow:var(--shadow); cursor:pointer; transition:transform .15s}
.calc-range::-webkit-slider-thumb:active{transform:scale(1.12)}
.calc-range::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:var(--green-800); border:4px solid var(--surface); box-shadow:var(--shadow); cursor:pointer}
.calc-checks{display:grid; grid-template-columns:1fr; gap:.55rem}
.calc-check{cursor:pointer; display:flex; gap:.7rem; align-items:center; border:1px solid var(--border); background:var(--bg); border-radius:var(--radius-sm);
  padding:.7rem .9rem; font-size:.94rem; transition:all .2s var(--ease-out)}
.calc-check:hover{border-color:var(--lime)}
.calc-check input{position:absolute; opacity:0; width:0; height:0}
.calc-check .box{flex:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--sage-200); display:grid; place-items:center; transition:all .2s}
.calc-check .box svg{width:14px; height:14px; color:#fff; opacity:0; transform:scale(.5); transition:all .2s}
.calc-check input:checked~.box{background:var(--green-800); border-color:var(--green-800)}
.calc-check input:checked~.box svg{opacity:1; transform:scale(1)}
.calc-check input:focus-visible~.box{outline:2px solid var(--focus); outline-offset:2px}
.calc-check .ct-price{margin-left:auto; color:var(--muted); font-size:.85rem; font-family:"Mulish",sans-serif; white-space:nowrap}
.calc-result{position:sticky; top:calc(var(--header-h) + 1rem); background:linear-gradient(160deg, var(--green-800), var(--green-900)); color:#fff;
  border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.1rem); box-shadow:var(--shadow-lg); overflow:hidden}
.calc-result::before{content:""; position:absolute; inset:auto -30% -40% auto; width:70%; height:80%;
  background:radial-gradient(circle, rgba(158,185,62,.28), transparent 70%); pointer-events:none}
.calc-result .cr-eyebrow{font-family:"Mulish",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--lime-300); display:flex; align-items:center; gap:.5rem}
.calc-result .cr-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--lime); flex:none}
.calc-price{font-family:"Lora",serif; font-weight:700; line-height:1.02; margin:.9rem 0 .2rem; font-size:clamp(2.2rem,6vw,3.1rem); position:relative}
.calc-price .cur{font-size:.55em; vertical-align:.32em; color:var(--lime-300); margin-left:.15rem}
.calc-per{color:rgba(255,255,255,.7); font-size:.95rem; position:relative}
.calc-note{margin:1.1rem 0 1.3rem; font-size:.86rem; color:rgba(255,255,255,.72); line-height:1.55; display:flex; gap:.55rem; position:relative}
.calc-note svg{width:17px; height:17px; flex:none; color:var(--lime-300); margin-top:1px}
.calc-result .btn{width:100%; justify-content:center; position:relative}
@media (max-width:820px){ .calc-grid{grid-template-columns:1fr} .calc-grid>*{min-width:0} .calc-result{position:relative; overflow:hidden} }

/* ══════════════════════════════════════════════════════════════════
   MIKRO-ANIMATIONEN „Leistungen" — Service-Icons (Unterseiten & Verwandtes)
   Shine-Sweep im Idle · Hover-Lift · Pop-in beim Reveal (JS)
   ══════════════════════════════════════════════════════════════════ */
.feature .svc-ico, .rel-card .svc-ico{position:relative; overflow:hidden; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .3s}
.feature .svc-ico::after, .rel-card .svc-ico::after{content:""; position:absolute; top:-70%; left:-130%; width:55%; height:240%;
  transform:rotate(20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:icoShine 8s ease-in-out infinite; pointer-events:none}
.feature .svc-ico svg, .rel-card .svc-ico svg{position:relative; z-index:1; transition:transform .35s var(--ease-out)}
.feature:hover .svc-ico, .rel-card:hover .svc-ico{transform:translateY(-3px) scale(1.07); box-shadow:0 10px 20px -10px rgba(32,64,28,.45); color:var(--green-800)}
.feature:hover .svc-ico svg, .rel-card:hover .svc-ico svg{transform:rotate(-6deg) scale(1.05)}
/* Sweeps zeitversetzt über die Kacheln — nie alle synchron */
.grid > *:nth-child(3n+2) .svc-ico::after{animation-delay:1.1s}
.grid > *:nth-child(3n+3) .svc-ico::after{animation-delay:2.3s}
.grid > *:nth-child(6n+4) .svc-ico::after{animation-delay:3.1s}
.grid > *:nth-child(6n+5) .svc-ico::after{animation-delay:1.7s}
@keyframes icoShine{0%{left:-130%}9%{left:190%}100%{left:190%}}
@media (prefers-reduced-motion:reduce){ .feature .svc-ico::after, .rel-card .svc-ico::after{animation-duration:34s} }

/* ── Original-Kundenlogo (nur Header/Footer/Mobile-Menü) — freigestellt, KEIN Kasten ──
   Zweifarbiges Lockup: in FARBE auf hellem (gescrolltem) Header, WEISS auf dunklem
   Grund (über Hero, Footer, Mobile-Menü) → überall lesbar; färbt sich beim Scrollen ein. */
.brand-logo{display:inline-flex; align-items:center; line-height:0}
.brand-logo img{height:38px; width:auto; display:block; transition:filter .35s ease;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.18))}
.site-footer .brand-logo img,
.mm-head .brand-logo img{ filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0,0,0,.3)) }
.site-footer .brand-logo img{height:40px}
.mm-head .brand-logo img{height:32px}
@media (max-width:600px){ .brand-logo img{height:32px} }

/* ── Startseite: Bereich Gebäudereinigung (Kundenwunsch 13.10.2026) ── */
ul.trust-row{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem; margin:1.4rem 0 0; padding:0; list-style:none}
.trust-row li{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.97rem; color:var(--green-800)}
.trust-row svg{width:19px; height:19px; flex:none; color:var(--green-600)}
.svc-more{margin-top:2.4rem; text-align:center}
.svc-more p{font-weight:700; color:var(--fg); margin:0 0 .8rem}
.svc-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem}
.svc-chip{display:inline-flex; padding:.5rem 1rem; border:1px solid var(--border); border-radius:999px; background:var(--surface);
  font-weight:600; font-size:.93rem; color:var(--green-800); transition:border-color .25s,background .25s}
.svc-chip:hover{border-color:var(--lime); background:var(--sage-50)}
:root[data-theme="dark"] .trust-row li,:root[data-theme="dark"] .svc-chip{color:var(--fg)}
:root[data-theme="dark"] .trust-row svg{color:var(--lime)}

/* ── Knöpfe oben (Kopfzeile, Startbild, Unterseiten-Kopf): dunkel statt Grün, Telefon als Glas ── */
.site-header .btn-lime,.hero .btn-lime,.subhero .btn-lime{background:var(--fg); color:#fff}
.site-header .btn-lime:hover,.hero .btn-lime:hover,.subhero .btn-lime:hover{background:var(--green-900)}
.hero .btn-ghost,.subhero .btn-ghost{background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.85); color:var(--fg);
  backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); box-shadow:0 8px 24px -14px rgba(32,64,28,.35)}
.hero .btn-ghost:hover,.subhero .btn-ghost:hover{background:rgba(255,255,255,.78); border-color:#fff}
:root[data-theme="dark"] .site-header .btn-lime,:root[data-theme="dark"] .hero .btn-lime,:root[data-theme="dark"] .subhero .btn-lime{background:#fff; color:var(--green-900)}
:root[data-theme="dark"] .hero .btn-ghost,:root[data-theme="dark"] .subhero .btn-ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff}
:root[data-theme="dark"] .site-header .btn-lime:hover,:root[data-theme="dark"] .hero .btn-lime:hover,:root[data-theme="dark"] .subhero .btn-lime:hover{background:#E9EFE1; color:var(--green-900)}