/* Knoll Haushaltsauflösungen – Aussehen (Version 10 „Himmel“).
   Farben, Schrift und Abstände stehen oben in :root. */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/geist-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0F1512; --ink-2:#2B342F; --mute:#8E9893; --mute-2:#B9C1BC; --text-2:#5B655F;
  --paper:#FFFFFF; --paper-2:#F4F5F2; --line:#DDE2DC;
  --dark:#0C1A2B; --dark-2:#10233A; --on-dark:#F3F6FA; --on-dark-2:#C9D4E0; --on-dark-mute:#8798AD;
  --green:#1D6B45; --green-2:#2E8A5C; --green-soft:#E3F0E8; --star:#E8A317;
  --sky-top:#6FA5E6; --sky-mid:#A3C8F1; --sky-bot:#EDE6E0;
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:clamp(20px,4vw,56px); --maxw:1360px;
  --sec:clamp(80px,9vw,150px);
  --t-small:0.9375rem; --t-body:clamp(1.0625rem,1rem + .25vw,1.1875rem); --t-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --t-h2:clamp(2.5rem,1.6rem + 3.6vw,4.75rem); --t-h1:clamp(2.75rem,1.4rem + 5.6vw,6.5rem);
  --ease:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --nav-h:76px; --r:22px; --r-lg:28px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--green-2);outline-offset:3px;border-radius:8px}
::selection{background:var(--green);color:#fff}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:500}
.skip:focus{top:16px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2*var(--m),var(--maxw));margin-inline:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,96px);align-items:start}
.center{text-align:center}
.right{text-align:right}
.num{font-variant-numeric:tabular-nums}
p{text-wrap:pretty}
.body{max-width:52ch}
.small{font-size:var(--t-small)}
.mute{color:var(--mute)}
.dark .mute{color:var(--on-dark-mute)}

/* Schrift */
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.h2{font-size:var(--t-h2);letter-spacing:-.04em;line-height:1.02;font-weight:600}
h3{font-size:var(--t-lead);letter-spacing:-.02em;line-height:1.15}
.label{font-size:var(--t-small);font-weight:500;color:var(--text-2);margin-bottom:18px;letter-spacing:.01em}
.dark .label{color:var(--on-dark-mute)}
.lead{font-size:var(--t-lead);line-height:1.35;letter-spacing:-.01em}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px 0 28px;border-radius:999px;border:0;background:var(--green);color:#fff;font-weight:500;font-size:var(--t-body);text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1;transition:transform 160ms var(--ease),background-color 200ms ease,box-shadow 200ms ease}
.btn .arr{font-style:normal;display:inline-block;transition:transform 240ms var(--ease)}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{background:var(--green-2);transform:translateY(-2px);box-shadow:0 14px 30px rgba(29,107,69,.28)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#E9EEEA;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2A332E;box-shadow:0 14px 30px rgba(15,21,18,.22)}
.btn-ghost{background:rgba(255,255,255,.6);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(15,21,18,.14)}
.btn-ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(15,21,18,.3)}
.btn-sm{min-height:44px;padding:0 20px;font-size:var(--t-small)}
.btn-wide{width:100%;justify-content:center}
.tlink{font-weight:500;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em;transition:color 180ms ease}
.tlink:hover{color:var(--green)}
.dark .tlink:hover{color:#fff}
.stars{display:inline-flex;gap:2px;color:var(--star);vertical-align:-.15em}
.stars svg{width:1.05em;height:1.05em}

/* Kopfzeile */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding-inline:var(--m);color:var(--ink);transition:color 300ms ease,background-color 300ms ease}
.nav.scrolled{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}
.nav.scrolled.on-dark{background:rgba(12,26,43,.62)}
.nav.on-dark{color:var(--on-dark)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:15px;letter-spacing:-.005em;line-height:1.05}
.brand-mark{width:40px;height:30px;fill:currentColor;flex:none}
.brand span{display:flex;flex-direction:column;font-weight:400}
.brand b{font-weight:600}
.nav-links{display:flex;gap:28px;margin-left:12px}
.nav-links a{text-decoration:none;font-size:var(--t-small);font-weight:500;opacity:.85;transition:opacity 180ms ease;padding:10px 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--ease-expo)}
.nav-links a:hover,.nav-links a[aria-current]{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-home{display:inline-flex;align-items:center;gap:7px}
.nav-home svg{width:17px;height:17px;flex:none}
.menu .nav-home svg{width:22px;height:22px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav-tel{text-decoration:none;font-weight:500;font-size:var(--t-small);white-space:nowrap}
.nav .btn-sm{background:var(--ink);color:#fff}
.nav .btn-sm:hover{background:#2A332E;box-shadow:none}
.nav.on-dark .btn-sm{background:#fff;color:var(--ink)}
.nav-burger{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;position:relative;flex:none}
.nav-burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;border-radius:2px;transition:transform 300ms var(--ease),top 300ms var(--ease)}
.nav-burger span:first-child{top:17px}.nav-burger span:last-child{top:25px}
.nav-burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}
.menu{position:absolute;left:12px;right:12px;top:calc(var(--nav-h) - 8px);background:#fff;color:var(--ink);border-radius:22px;padding:14px 10px;display:grid;box-shadow:0 20px 60px rgba(10,14,12,.18)}
.menu[hidden]{display:none}
.menu a{text-decoration:none;font-size:1.25rem;font-weight:500;padding:12px 16px;border-radius:999px}
.menu a:hover{background:var(--paper-2)}
.menu .menu-tel{margin-top:8px;background:var(--green);color:#fff;text-align:center}
.nav.menu-open{color:var(--ink)}

/* ================= STARTBILD ================= */
/* Himmel bleibt stehen, während Text und Formular nach oben wandern; die Wolken ziehen beim Scrollen. */
.hero{position:relative;isolation:isolate;-webkit-clip-path:inset(0 0 1px 0);clip-path:inset(0 0 1px 0);margin-bottom:-1px;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-bot) 100%)}
.hero .sky{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;opacity:0;transition:opacity 1400ms ease}
.sky.on{opacity:1}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-2px;z-index:1;height:clamp(90px,15vh,160px);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 55%,#fff 97%);pointer-events:none}
.hero-grid{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr minmax(360px,470px);gap:clamp(32px,6vw,110px);align-items:center;padding-top:calc(var(--nav-h) + 20px);padding-bottom:clamp(120px,19vh,210px)}
.hero h1{font-size:clamp(2.3rem,1.1rem + 3.5vw,4.5rem);font-weight:600;letter-spacing:-.045em;line-height:1.02;max-width:13.5ch;text-wrap:balance}
.hero h1 .w{display:inline-block;animation:word-in 1100ms var(--ease-expo) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes word-in{from{opacity:0;filter:blur(14px);transform:translateY(18px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes soft-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-lead,.hero-checks,.hero-proof,.hero .skycard{animation:soft-in 1000ms var(--ease-expo) both}
.hero-lead{animation-delay:620ms}.hero-checks{animation-delay:740ms}.hero-proof{animation-delay:860ms}.hero .skycard{animation-delay:300ms}
.hero-lead{margin-top:clamp(18px,2vw,26px);font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);line-height:1.3;letter-spacing:-.015em;max-width:30ch;color:var(--ink-2)}
.hero-lead strong{font-weight:600;color:var(--ink)}
.hero-small{margin-top:14px;font-size:var(--t-body);line-height:1.5;max-width:44ch;color:var(--ink-2);animation:soft-in 1000ms var(--ease-expo) 700ms both}
.hero-checks{list-style:none;padding:0;margin-top:clamp(16px,1.8vw,22px);display:flex;flex-wrap:wrap;gap:8px}
.hero-checks li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:var(--t-small);font-weight:500;color:var(--ink)}
.hero-checks svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--green);color:#fff;flex:none}
.hero-proof{margin-top:clamp(20px,2.2vw,30px);display:grid;gap:16px;justify-items:start}
.rating{font-size:var(--t-body);color:var(--ink-2)}
.rating strong{font-weight:600;color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(24px,3vw,36px)}

/* Karte im Himmel: Kontaktformular */
.skycard{position:relative;scroll-margin-top:96px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border-radius:var(--r-lg);padding:clamp(22px,2.2vw,32px);box-shadow:0 34px 90px rgba(46,78,120,.24),inset 0 0 0 1px rgba(255,255,255,.75);will-change:transform}
.card-top h2{font-size:clamp(1.45rem,1.1rem + 1vw,1.95rem);letter-spacing:-.03em;line-height:1.08}
.card-top .sub{margin-top:8px;color:var(--text-2);font-size:var(--t-small)}
.free{display:inline-flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:500;color:var(--green);background:var(--green-soft);padding:6px 12px 6px 10px;border-radius:999px;margin-bottom:14px}
.free i{width:8px;height:8px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 0 rgba(46,138,92,.55);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,138,92,.55)}80%,100%{box-shadow:0 0 0 9px rgba(46,138,92,0)}}
.skycard .form{margin-top:18px}

/* Formulare */
.form{display:grid;gap:10px;margin-top:18px}
.fld{display:grid;gap:5px}
.fld label{font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.fld input,.fld textarea{width:100%;min-height:50px;border:0;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);padding:0 16px;font-size:1rem;transition:box-shadow 180ms ease,background-color 180ms ease}
.fld textarea{padding:12px 16px;min-height:84px;resize:vertical;line-height:1.4}
.fld input::placeholder,.fld textarea::placeholder{color:#9AA39E}
.fld input:hover,.fld textarea:hover{box-shadow:inset 0 0 0 1.5px #B9C1BC}
.fld input:focus-visible,.fld textarea:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--green)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .btn{justify-content:center;margin-top:6px}
.form-status{font-size:var(--t-small);font-weight:500;color:var(--green)}
.form-status:empty{display:none}
.form-note{font-size:.8125rem;color:var(--text-2);text-align:center}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Weißes Blatt, das sich über den Himmel schiebt */
.sheet{position:relative;z-index:2;border-radius:36px 36px 0 0;margin-top:-36px;background:var(--paper)}

/* ================= VORHER / NACHHER mit Regler ================= */
.ba-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,96px);align-items:center}
.ba-copy .lead{margin-top:24px;max-width:34ch;color:var(--ink-2)}
.ba{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);--pos:50%;box-shadow:0 30px 80px rgba(15,21,18,.12);transform:translateZ(0);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 24px rgba(0,0,0,.25);pointer-events:none}
.ba-handle::after{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1512' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform 300ms var(--ease-expo)}
.ba:hover .ba-handle::after{transform:scale(1.12)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba input[type=range]:focus-visible + .x{outline:0}
.ba:focus-within{outline:3px solid var(--green-2);outline-offset:4px}
.tag{position:absolute;top:18px;z-index:2;font-size:.8125rem;font-weight:500;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);pointer-events:none}
.tag-l{left:18px}.tag-r{right:18px}.tag-b{top:auto;bottom:18px;right:18px;background:rgba(10,14,12,.55);color:#fff}

/* Einblenden */
.js .rv-blur{opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity 900ms var(--ease-expo),filter 900ms var(--ease-expo),transform 900ms var(--ease-expo);transition-delay:var(--d,0ms)}
.js .rv-blur.in{opacity:1;filter:blur(0);transform:none}
.js .rv-up{opacity:0;transform:translateY(32px);transition:opacity 900ms var(--ease-expo),transform 1000ms var(--ease-expo);transition-delay:var(--d,0ms)}
.js .rv-up.in{opacity:1;transform:none}
.js .rv-words .w{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(8px);transition:opacity 700ms var(--ease-expo),filter 700ms var(--ease-expo),transform 700ms var(--ease-expo)}
.js .rv-words.in .w{opacity:1;filter:blur(0);transform:none}

/* ================= FESTPREIS, ABLAUF, PREISE ================= */
.light{background:var(--paper);color:var(--ink)}
.sec{padding-block:var(--sec)}
.sec.flat-top{padding-top:0}
.sec.soft{background:var(--paper-2)}
.steps-left .body{margin-top:28px;font-size:var(--t-lead);line-height:1.38;max-width:38ch;color:var(--ink-2)}
.steps-left .btn{margin-top:36px}
.steps-right{padding-top:clamp(8px,1.2vw,18px)}
.steps-list{list-style:none;padding:0;display:grid;gap:30px;max-width:46ch;counter-reset:s}
.steps-list li{font-size:var(--t-lead);line-height:1.32;letter-spacing:-.012em}
.steps-list b{font-weight:600;color:var(--ink)}
.steps-list span{color:#6B756F}
.steps-list.numbered li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:0 20px}
.steps-list.numbered li::before{content:counter(s);font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);margin-top:.1em}
.js .steps-list.numbered{position:relative}
.js .steps-list.numbered::before,.js .steps-list.numbered::after{content:"";position:absolute;left:16px;top:18px;bottom:40px;width:2px;border-radius:2px;background:var(--line)}
.js .steps-list.numbered::after{background:var(--green);transform-origin:top;transform:scaleY(var(--p,0))}
.js .steps-list.numbered li{position:relative;z-index:1}
.js .steps-list.numbered li::before{background:#fff;color:var(--text-2);box-shadow:inset 0 0 0 2px var(--line);transition:background-color 400ms ease,color 400ms ease,box-shadow 500ms var(--ease-expo),transform 500ms var(--ease-expo)}
.js .steps-list.numbered li.is-on::before{background:var(--green);color:#fff;box-shadow:0 0 0 7px var(--green-soft);transform:scale(1.1)}
.js .steps-list.numbered li > div{opacity:.4;transition:opacity 600ms ease}
.js .steps-list.numbered li.is-on > div{opacity:1}
.equal{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;max-width:540px}
.eq-slip{background:var(--paper-2);border-radius:var(--r);padding:18px 20px;display:grid;gap:6px;transition:transform 900ms var(--ease-expo),opacity 700ms ease,background-color 300ms ease}
.eq-slip > span{font-size:var(--t-small);color:var(--text-2)}
.eq-slip b{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.eq-sign{position:relative;z-index:1;align-self:center;width:52px;height:52px;margin:0 -12px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:1.6rem;font-weight:600;box-shadow:0 0 0 6px #fff;transition:transform 700ms var(--ease-expo) 600ms}
.eq-sign i{font-style:normal;animation:eq 2.6s ease-in-out infinite}
@keyframes eq{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
.js .equal .eq-slip:first-child{transform:translateX(-36px);opacity:0}
.js .equal .eq-slip:last-child{transform:scale(.86);opacity:0;transition-delay:250ms}
.js .equal .eq-sign{transform:scale(0)}
.js .equal.in .eq-slip{transform:none;opacity:1}
.js .equal.in .eq-sign{transform:scale(1)}
.equal:hover .eq-slip{background:var(--green-soft)}
.prices-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.prices-head p{max-width:40ch;color:var(--text-2)}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(32px,4vw,56px)}
.price{position:relative;background:var(--paper-2);border-radius:var(--r);padding:clamp(22px,2.2vw,32px);overflow:hidden;transition:transform 600ms var(--ease-expo),background-color 300ms ease,box-shadow 600ms var(--ease-expo)}
.price::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--green);opacity:0;transition:opacity 300ms ease;pointer-events:none}
.price:hover{transform:translateY(-10px);background:#fff;box-shadow:0 34px 80px rgba(15,21,18,.13)}
.price:hover::after{opacity:1}
.price-what{font-weight:500;font-size:var(--t-lead);letter-spacing:-.015em;color:var(--ink)}
.price-num{font-size:clamp(3rem,1.8rem + 3.8vw,5.4rem);font-weight:600;letter-spacing:-.055em;line-height:1;margin-top:clamp(28px,4vw,64px);font-variant-numeric:tabular-nums;transition:color 300ms ease}
.price:hover .price-num{color:var(--green)}
.price-num small{font-size:.38em;font-weight:500;letter-spacing:0;color:var(--mute);margin-left:.2em}
.price-num .ab{margin:0 .35em 0 0;color:var(--text-2)}
.factors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);margin-top:16px}
.factor{border-radius:var(--r);padding:clamp(22px,2.2vw,32px)}
.factors-intro{margin-top:clamp(28px,3.4vw,48px);font-size:var(--t-lead);font-weight:600;letter-spacing:-.02em}
.factor-less{background:var(--green-soft)}
.factor-more{background:#E4EEF9}
.factor h3{display:flex;align-items:center;gap:12px;font-size:var(--t-lead);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.factor h3 i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:#fff}
.factor h3 svg{width:18px;height:18px}
.factor-less h4 i{color:var(--green)}
.factor-more h4 i{color:#2C5F94}
.factor ul{list-style:none;padding:0;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.factor li{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.75);font-size:var(--t-small);font-weight:500;color:var(--ink)}
.prices-note{margin-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* ================= WAS BLEIBT + WERTANRECHNUNG ================= */
.keep{padding-block:0 var(--sec);background:var(--paper)}
.keep-head{display:grid;grid-template-columns:1fr 2fr;align-items:start;gap:24px}
.keep-head .label{margin:.5em 0 0}
.keep-head .h2{max-width:14ch;justify-self:end}
.keep-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,64px);align-items:stretch}
.panel{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.panel img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-expo)}
.panel:hover img{transform:scale(1.04)}
.keep-img{min-height:340px}
.keep-img img{position:absolute;inset:0}
.keep-points{list-style:none;padding:0;display:grid;gap:clamp(12px,1.4vw,18px)}
.keep-points li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);align-items:center;background:var(--paper-2);border-radius:var(--r);padding:clamp(20px,2.2vw,32px);transition:transform 500ms var(--ease-expo),background-color 300ms ease,box-shadow 500ms var(--ease-expo)}
.keep-points li:hover{transform:translateX(8px);background:#fff;box-shadow:0 24px 60px rgba(15,21,18,.1),inset 0 0 0 1.5px var(--green)}
.kp-num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green);font-weight:600;font-size:1.25rem;transition:background-color 300ms ease,color 300ms ease}
.keep-points li:hover .kp-num{background:var(--green);color:#fff}
.keep-points h3{font-size:clamp(1.2rem,1rem + .7vw,1.5rem)}
.keep-points p{margin-top:6px;color:var(--text-2)}
.wert{margin-top:clamp(16px,2vw,28px);display:grid;grid-template-columns:6fr 5fr;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(135deg,#F1F7F2 0%,#E3F0E8 100%);color:var(--ink);scroll-margin-top:96px}
.wert-text{padding:clamp(28px,4vw,64px);display:grid;gap:18px;justify-items:start;align-content:center}
.wert-tag{font-size:.8125rem;font-weight:500;padding:6px 14px;border-radius:999px;background:#fff;color:var(--green)}
.wert h3{font-size:clamp(1.7rem,1.1rem + 2.2vw,3rem);letter-spacing:-.035em;line-height:1.05;max-width:16ch}
.wert-steps{list-style:none;padding:0;display:grid;gap:14px;counter-reset:w;margin-top:6px}
.wert-steps li{counter-increment:w;position:relative;padding-left:46px;color:var(--ink-2);max-width:46ch}
.wert-steps li::before{content:counter(w);position:absolute;left:0;top:-.1em;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--green);font-weight:600;font-size:.9375rem}
.wert-steps b{color:var(--ink);font-weight:600}
.wert-note{font-size:var(--t-small);color:var(--text-2)}
.wert .btn{margin-top:8px}
.receipt-wrap{position:relative;display:grid;place-items:center;padding:clamp(28px,4vw,60px) clamp(20px,3vw,48px)}
.receipt{position:relative;width:min(100%,450px);background:#fff;color:var(--ink);padding:24px 24px 30px;border-radius:12px 12px 0 0;transform:rotate(-2.5deg);box-shadow:0 30px 60px rgba(29,107,69,.2),0 2px 0 rgba(15,21,18,.04);font-variant-numeric:tabular-nums;transition:transform 800ms var(--ease-expo)}
.receipt::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px;background:linear-gradient(135deg,#fff 5px,transparent 0) 0 0/10px 10px,linear-gradient(-135deg,#fff 5px,transparent 0) 0 0/10px 10px}
.wert:hover .receipt{transform:rotate(0deg) translateY(-6px)}
.rc-head{display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);padding-bottom:14px;border-bottom:1.5px dashed #C9D0CB}
.rc-line{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;font-size:1rem}
.rc-line b{font-weight:600;white-space:nowrap}
.rc-line small{display:block;font-size:.8125rem;color:var(--text-2)}
.rc-sub{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--green);font-weight:600;padding-top:14px;margin-top:2px}
.rc-plus b{color:var(--green)}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:8px;padding-top:16px;border-top:2px solid var(--ink);font-weight:600}
.rc-total b{font-size:2.3rem;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.rc-save{margin-top:12px;display:inline-block;background:var(--green-soft);color:var(--green);font-weight:600;font-size:.875rem;padding:6px 12px;border-radius:999px}
.js .receipt .rc-line,.js .receipt .rc-sub,.js .receipt .rc-total,.js .receipt .rc-save{opacity:0;transform:translateY(10px);transition:opacity 500ms ease,transform 600ms var(--ease-expo)}
.js .receipt.in .rc-line,.js .receipt.in .rc-sub,.js .receipt.in .rc-total{opacity:1;transform:none}
.js .receipt.in > :nth-child(2){transition-delay:150ms}.js .receipt.in > :nth-child(3){transition-delay:400ms}.js .receipt.in > :nth-child(4){transition-delay:650ms}
.js .receipt.in > :nth-child(5){transition-delay:900ms}.js .receipt.in > :nth-child(6){transition-delay:1150ms}
.js .receipt.done .rc-save{opacity:1;transform:none}

/* ================= LEISTUNGEN (hell, Bild beim Drüberfahren) ================= */
.dark{background:var(--dark);color:var(--on-dark)}
.index{padding-block:var(--sec);background:linear-gradient(180deg,#fff 0%,#EAF2FA 16%,#EAF2FA 84%,#fff 100%)}
.index-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(28px,4vw,56px)}
.index-head > p{max-width:34ch;color:var(--ink-2);font-size:var(--t-lead);line-height:1.35}
.index-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.row{position:relative}
.row-link{position:relative;isolation:isolate;display:grid;grid-template-columns:36px minmax(0,1.35fr) minmax(0,1.15fr) clamp(120px,13vw,190px) 44px;align-items:center;column-gap:clamp(16px,2.4vw,40px);padding:clamp(14px,1.4vw,20px) clamp(18px,2.2vw,32px);border-radius:var(--r);background:rgba(255,255,255,.78);text-decoration:none;overflow:hidden;transition:transform 600ms var(--ease-expo),box-shadow 600ms var(--ease-expo),color 300ms ease}
.row-scene{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity 500ms ease}
.row-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1600ms var(--ease-expo)}
.row-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,16,.82) 0%,rgba(10,20,16,.5) 55%,rgba(10,20,16,.25) 100%)}
.row-num{font-size:var(--t-small);font-weight:500;color:var(--mute);transition:color 300ms ease}
.row-word{font-size:clamp(1.6rem,.9rem + 1.8vw,2.7rem);overflow-wrap:anywhere;font-weight:600;letter-spacing:-.04em;line-height:1.05;color:var(--ink);transition:color 300ms ease}
.row-text{font-size:var(--t-body);line-height:1.45;color:var(--ink-2);max-width:36ch;transition:color 300ms ease}
.row-thumb{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--paper-2);transition:opacity 300ms ease,transform 600ms var(--ease-expo)}
.row-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.row-arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:1.25rem;transition:transform 600ms var(--ease-expo),background-color 300ms ease,color 300ms ease}
.row.is-active .row-link,.row-link:hover,.row-link:focus-visible{transform:scale(1.012);box-shadow:0 30px 70px rgba(30,60,100,.22)}
.row.is-active .row-scene,.row-link:hover .row-scene,.row-link:focus-visible .row-scene{opacity:1}
.row.is-active .row-scene img,.row-link:hover .row-scene img{transform:scale(1)}
.row.is-active .row-word,.row-link:hover .row-word,.row-link:focus-visible .row-word{color:#fff}
.row.is-active .row-text,.row-link:hover .row-text,.row-link:focus-visible .row-text{color:rgba(255,255,255,.86)}
.row.is-active .row-num,.row-link:hover .row-num{color:rgba(255,255,255,.7)}
.row.is-active .row-thumb,.row-link:hover .row-thumb,.row-link:focus-visible .row-thumb{opacity:0;transform:scale(.92)}
.row.is-active .row-arr,.row-link:hover .row-arr,.row-link:focus-visible .row-arr{background:#fff;color:var(--ink);transform:translateX(4px)}
.index-close{margin-top:clamp(28px,4vw,48px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.closing{font-size:clamp(1.3rem,1rem + 1.2vw,2.1rem);line-height:1.25;letter-spacing:-.015em;font-weight:500;max-width:30ch}
.closing .w{display:inline-block}

/* ================= ZUSATZLEISTUNGEN (dunkle Bildkarten) ================= */
.cards{padding-block:var(--sec);background:linear-gradient(180deg,#12263F 0%,#0C1A2B 100%)}
.cards-head{align-items:end}
.cards-head .body{color:var(--on-dark-2)}
.cards-head .tlink{display:inline-block;margin-top:20px}
.card-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);margin-top:clamp(40px,5vw,72px)}
.card{position:relative;transition:transform 700ms var(--ease-expo)}
.card:hover{transform:translateY(-10px)}
.card-art{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#0E1B2B}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-expo),filter 600ms ease;filter:saturate(.9) brightness(.86)}
.card:hover .card-art img{transform:scale(1.06);filter:saturate(1) brightness(1)}
.card-art::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(10,14,12,0) 50%,rgba(10,14,12,.55) 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0);transition:box-shadow 400ms ease;pointer-events:none}
.card:hover .card-art::after{box-shadow:inset 0 0 0 1.5px rgba(143,212,168,.7)}
.card h3{margin-top:20px;font-size:1.35rem;font-weight:600}
.card p{margin-top:10px;color:var(--on-dark-2);max-width:36ch;font-size:var(--t-small);line-height:1.5}
.cards-foot{margin-top:clamp(32px,4vw,56px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.chips-dark li{background:rgba(255,255,255,.08)!important;color:var(--on-dark)!important}

/* ================= BEWERTUNGEN + VIDEO ================= */
.proof-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,96px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.video{aspect-ratio:16/10;cursor:default}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,12,0) 40%,rgba(10,14,12,.5) 100%);pointer-events:none}
.video-play{position:absolute;left:50%;top:50%;z-index:2;width:clamp(72px,7vw,104px);height:clamp(72px,7vw,104px);margin:calc(clamp(72px,7vw,104px) / -2) 0 0 calc(clamp(72px,7vw,104px) / -2);border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform 500ms var(--ease-expo),background-color 300ms ease}
.video-play svg{width:34%;height:34%;margin-left:6%}
.video:hover .video-play{transform:scale(1.1);background:#fff}
.video-play::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}80%,100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}}
.video-cap{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font-weight:500;font-size:var(--t-lead);letter-spacing:-.01em}
.score{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.score-num{font-size:clamp(4.4rem,3rem + 5vw,8rem);font-weight:600;letter-spacing:-.06em;line-height:.9}
.score .stars{font-size:1.5rem}
.quote{margin:clamp(24px,3vw,40px) 0 0}
.quote blockquote{font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem);line-height:1.28;letter-spacing:-.015em;font-weight:500}
.quote figcaption{margin-top:14px;font-size:var(--t-small);color:var(--text-2)}
.partner{margin-top:clamp(24px,3vw,40px);padding-top:clamp(20px,2.4vw,32px);border-top:1.5px solid var(--line);color:var(--text-2);max-width:44ch}
.partner b{color:var(--ink);font-weight:600}

/* ================= EINSATZGEBIET mit lebendiger Karte ================= */
.area-grid{display:grid;grid-template-columns:5fr 6fr;column-gap:clamp(32px,5vw,96px);align-items:center}
.area-copy .body{margin-top:28px}
.towns{list-style:none;padding:0;margin-top:36px;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:10px;max-width:600px}
.towns li{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:var(--t-body);padding:10px 16px;border-radius:999px;background:var(--paper-2);cursor:default;transition:background-color 250ms ease,transform 400ms var(--ease-expo),color 250ms ease,box-shadow 400ms var(--ease-expo)}
.towns li:hover,.towns li.is-on{background:var(--green);color:#fff;transform:translateX(6px);box-shadow:0 12px 28px rgba(29,107,69,.28)}
.towns .km{color:#6B756F;font-size:var(--t-small);transition:color 250ms ease}
.towns li:hover .km,.towns li.is-on .km{color:rgba(255,255,255,.8)}
.area-copy .small{margin-top:18px}
.map{position:relative;margin:0;width:100%;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(165deg,#B7D4EF 0%,#DDE9F3 50%,#F7E6D6 100%);box-shadow:0 30px 80px rgba(46,78,120,.18)}
.map svg{width:100%;height:auto;font-family:var(--font)}
.river{fill:none;stroke:#8DBBE3;stroke-width:9;stroke-linecap:round;opacity:.75}
.river-name{font-size:16px;font-style:italic;fill:#5C8DB8;letter-spacing:.04em}
.ring-25{fill:none;stroke:var(--green);stroke-width:2.2;stroke-dasharray:1 8;stroke-linecap:round;transform-origin:400px 400px;animation:spin 90s linear infinite}
.ring-label{font-size:18px;font-weight:600;fill:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}
.pulse{fill:none;stroke:var(--green);stroke-width:2;transform-origin:400px 400px;transform:scale(.04);opacity:0;animation:radar 4.4s cubic-bezier(.2,.6,.3,1) infinite}
.pulse-2{animation-delay:2.2s}
@keyframes radar{0%{transform:scale(.04);opacity:.55}100%{transform:scale(1);opacity:0}}
.pin{cursor:pointer}
.pin-hit{fill:transparent}
.pin-line{stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 700ms var(--ease-expo),opacity 300ms ease}
.pin-dot{fill:var(--ink);transform-box:fill-box;transform-origin:center;transition:fill 250ms ease,transform 500ms var(--ease-expo)}
.pin-ring{fill:#fff;transform-box:fill-box;transform-origin:center;transform:scale(1.35);transition:transform 500ms var(--ease-expo)}
.pin-name{font-size:22px;font-weight:500;fill:var(--ink);transition:fill 250ms ease;paint-order:stroke;stroke:rgba(255,255,255,.7);stroke-width:4px;stroke-linejoin:round}
.pin-km{font-size:16px;font-weight:500;fill:var(--green);opacity:0;transition:opacity 300ms ease}
.pin-s .pin-name{font-size:15px;font-weight:500;fill:#3F4A45}
.pin-s .pin-km{font-size:12.5px}
.pin-quiet .pin-name{opacity:0;transition:opacity 300ms ease,fill 250ms ease}
.pin-quiet.is-on .pin-name,.pin-quiet:hover .pin-name{opacity:1}
.pin-home{font-size:28px;font-weight:600;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:5px;stroke-linejoin:round}
.pin.is-on .pin-line,.pin:hover .pin-line{stroke-dashoffset:0;opacity:1}
.pin.is-on .pin-dot,.pin:hover .pin-dot{fill:var(--green);transform:scale(1.5)}
.pin.is-on .pin-ring,.pin:hover .pin-ring{transform:scale(2.3)}
.pin.is-on .pin-name,.pin:hover .pin-name{fill:var(--green);font-weight:600}
.pin.is-on .pin-km,.pin:hover .pin-km{opacity:1}
.js .map .pin{opacity:0;transition:opacity 600ms ease}
.js .map.is-seen .pin{opacity:1}

/* ================= FRAGEN ================= */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(32px,5vw,96px);align-items:start}
.faq-head{position:sticky;top:112px}
.faq-head .body{margin-top:24px}
.ask{margin-top:clamp(24px,2.6vw,36px);max-width:440px;border-radius:var(--r);padding:clamp(20px,2vw,28px);background:linear-gradient(160deg,#DDEBFA 0%,#F1F6FB 100%);display:grid;gap:12px;justify-items:start;transition:transform 600ms var(--ease-expo),box-shadow 600ms var(--ease-expo)}
.ask:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(46,78,120,.18)}
.ask-ico{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 15px;border-radius:20px 20px 20px 6px;background:#fff;box-shadow:0 8px 20px rgba(46,78,120,.14)}
.ask-ico i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:typing 1.4s ease-in-out infinite}
.ask-ico i:nth-child(2){animation-delay:.18s}.ask-ico i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
.ask h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);margin-top:4px}
.ask p{color:var(--ink-2)}
.ask-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ask-row .btn{min-height:50px;padding:0 20px;font-size:1rem}
.ask-alt{font-size:var(--t-small)}
.faq-list{display:grid;gap:26px}
.qa{font-size:var(--t-body);line-height:1.55;color:var(--text-2);max-width:62ch}
.qa b{font-weight:600;color:var(--ink);font-size:1.15em;letter-spacing:-.01em;display:block;margin-bottom:6px}

/* ================= KONTAKT im Himmel ================= */
.phead .sky,.contact .sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1400ms ease}
.phead .sky.on,.contact .sky.on{opacity:1}
.contact::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:clamp(140px,26vh,280px);background:linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 55%,#fff 100%);pointer-events:none}
.contact-top::before{display:none}
.contact{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-bot) 100%);padding-block:calc(var(--sec) + clamp(40px,8vh,90px)) calc(var(--sec) + 36px)}
.contact-top{border-radius:0;padding-top:calc(var(--nav-h) + clamp(40px,6vw,90px))}
.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(360px,470px);gap:clamp(32px,6vw,110px);align-items:center}
.contact-copy .h2 .mute{color:#3A5069}
.contact-copy .lead{margin-top:22px;max-width:34ch;color:var(--ink-2)}
.contact-copy .big-tel{margin-top:26px}
.contact-copy .hero-actions{margin-top:22px}
.contact-copy .rating{margin-top:28px}
.contact-addr{margin-top:10px;font-size:var(--t-small);color:var(--ink-2)}
.contact-hours{margin-top:8px;font-size:var(--t-small);font-weight:500;color:var(--ink-2)}
.btn-wa{background:#1FAF5A}
.btn-wa:hover{background:#17994D;box-shadow:0 14px 30px rgba(31,175,90,.3)}

/* ================= FUSS ================= */
.foot{position:relative;z-index:3;margin-top:-36px;border-radius:36px 36px 0 0;padding-block:clamp(64px,7vw,110px) 32px;background:linear-gradient(180deg,#12263F 0%,#0B1828 100%)}
.foot-top{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start}
.foot address{font-style:normal;display:grid;gap:8px;font-size:var(--t-lead);line-height:1.3;letter-spacing:-.01em}
.foot address a{text-decoration:none}
.foot address a:hover{text-decoration:underline;text-underline-offset:.2em}
.foot-links{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px}
.foot-links ul{list-style:none;padding:0;display:grid;gap:12px;align-content:start}
.foot-links a{text-decoration:none;color:var(--on-dark-2)}
.foot-links a:hover{color:#fff}
.foot-mark{width:100%;height:auto;margin-top:clamp(56px,7vw,110px);fill:var(--on-dark)}
.foot-bottom{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:var(--t-small);color:var(--on-dark-mute)}

/* Handy-Leiste, WhatsApp-Knopf, Cookie-Hinweis */
.mbar{display:none}
.float{position:fixed;right:20px;bottom:20px;z-index:30;width:56px;height:56px;border-radius:50%;background:#1FAF5A;color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px rgba(15,21,18,.25);transition:transform 300ms var(--ease-expo)}
.float:hover{transform:scale(1.1)}
.float svg{width:28px;height:28px}
.consent{position:fixed;left:16px;bottom:16px;z-index:50;max-width:420px;background:#fff;color:var(--ink);border-radius:var(--r);padding:20px;box-shadow:0 24px 70px rgba(15,21,18,.25);font-size:var(--t-small)}
.consent-row{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}

/* ================= UNTERSEITEN ================= */
.phead{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-bot) 100%);padding:calc(var(--nav-h) + clamp(36px,6vw,88px)) 0 clamp(72px,9vw,130px)}
.phead.has-media{padding-bottom:clamp(180px,22vw,340px)}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:clamp(120px,22vh,240px);background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 55%,#fff 100%);pointer-events:none}
.phead .wrap{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--t-small);color:var(--ink-2);margin-bottom:clamp(18px,2vw,28px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.phead h1{font-size:clamp(2.5rem,1.3rem + 4.8vw,5.6rem);letter-spacing:-.045em;line-height:1;max-width:15ch}
.phead .lead{margin-top:22px;max-width:44ch;color:var(--ink-2)}
.phead .hero-actions{justify-content:flex-start;animation:none}
.big-tel{display:inline-block;margin-top:28px;font-size:clamp(2.4rem,1.4rem + 4vw,5rem);font-weight:600;letter-spacing:-.045em;line-height:1;text-decoration:none}
.big-tel:hover{color:var(--green)}
.pmedia{position:relative;z-index:3;margin-top:calc(-1 * clamp(120px,16vw,250px))}
.pmedia .panel{aspect-ratio:21/9;border-radius:var(--r-lg);box-shadow:0 40px 100px rgba(46,78,120,.25)}
.sub-h{font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem);letter-spacing:-.04em;line-height:1.04;font-weight:600}
.rich{display:grid;gap:18px;max-width:58ch;font-size:var(--t-body);color:var(--ink-2)}
.rich.big{font-size:var(--t-lead);line-height:1.4}
.rich h3{margin-top:14px;color:var(--ink)}
.rich ul{padding:0;list-style:none;display:grid;gap:12px}
.rich ul li{position:relative;padding-left:22px}
.rich ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green-2)}
.rich strong{color:var(--ink);font-weight:600}
.rich ul.chips,.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rich ul.chips li,.chips li{padding:10px 18px;border-radius:999px;background:var(--green-soft);color:var(--green);font-weight:500}
.rich ul.chips li::before{display:none}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pill-link{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:var(--paper-2);text-decoration:none;font-weight:500;transition:background-color 250ms ease,transform 400ms var(--ease-expo),color 250ms ease}
.pill-link:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
.area-list{list-style:none;padding:0;display:grid;gap:26px}
.area-list h3{font-size:1.3rem;margin-bottom:6px}
.area-list p{color:var(--text-2)}
.prose{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;max-width:74ch;padding-top:calc(var(--nav-h) + clamp(32px,5vw,72px));padding-bottom:var(--sec)}
.prose h1{font-size:clamp(2.4rem,1.6rem + 3vw,4rem);letter-spacing:-.04em;margin-bottom:28px}
.prose h2{font-size:1.4rem;letter-spacing:-.02em;line-height:1.2;margin:36px 0 10px}
.prose p{color:var(--ink-2);margin-bottom:12px}
.hint{background:#FFF1B8;color:#4A3B00;padding:.1em .4em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ================= Bausteine der Leistungsseiten ================= */
.inc-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,3.4vw,48px)}
.inc{background:var(--paper-2);border-radius:var(--r);padding:clamp(20px,2vw,28px);display:grid;gap:10px;align-content:start;transition:transform 600ms var(--ease-expo),background-color 300ms ease,box-shadow 600ms var(--ease-expo)}
.inc:hover{transform:translateY(-8px);background:#fff;box-shadow:0 30px 70px rgba(15,21,18,.12),inset 0 0 0 1.5px var(--green)}
.inc i{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--green);display:grid;place-items:center;margin-bottom:6px;transition:background-color 300ms ease,color 300ms ease}
.inc i svg{width:20px;height:20px}
.inc:hover i{background:var(--green);color:#fff}
.inc:last-child:nth-child(3n+1){grid-column:1/-1}
.inc h3{font-size:clamp(1.2rem,1rem + .6vw,1.45rem)}
.inc p{color:var(--text-2)}
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,5vw,96px);align-items:center}
.split .panel{aspect-ratio:4/3;border-radius:var(--r-lg)}
.split .panel img{position:absolute;inset:0}
.trust{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,64px);align-items:center;background:linear-gradient(160deg,#DDEBFA 0%,#F1F6FB 100%);border-radius:var(--r-lg);padding:clamp(24px,3.2vw,52px)}
.trust-score{display:flex;align-items:baseline;gap:14px}
.trust-score .score-num{font-size:clamp(3.4rem,2.4rem + 3.4vw,6rem);font-weight:600;letter-spacing:-.06em;line-height:.9}
.trust-score .stars{font-size:1.3rem}
.trust-quote{margin:0}
.trust-quote blockquote{font-size:clamp(1.15rem,1rem + .7vw,1.55rem);line-height:1.3;letter-spacing:-.015em;font-weight:500;max-width:34ch}
.trust-quote figcaption{margin-top:10px;font-size:var(--t-small);color:var(--text-2)}
.trust-cta{display:grid;gap:10px;justify-items:stretch}
.trust-cta .btn{justify-content:center}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,3.4vw,48px)}
.svc{position:relative;display:block;aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;background:#0E1B2B;color:#fff;text-decoration:none;transition:transform 600ms var(--ease-expo),box-shadow 600ms var(--ease-expo)}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:transform 1200ms var(--ease-expo),filter 500ms ease}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,30,0) 35%,rgba(10,20,30,.78) 100%)}
.svc:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(15,30,50,.28)}
.svc:hover img{transform:scale(1.07);filter:brightness(.95)}
.svc-name{position:absolute;left:20px;right:70px;bottom:44px;z-index:2;font-size:clamp(1.25rem,1rem + .8vw,1.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;transition:transform 500ms var(--ease-expo)}
.svc-text{position:absolute;left:20px;right:20px;bottom:16px;z-index:2;font-size:.8125rem;line-height:1.35;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-arr{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);font-size:1.2rem;transition:transform 500ms var(--ease-expo)}
.svc:hover .svc-arr{transform:translateX(4px)}

/* ================= Kleinere Bildschirme ================= */
@media (max-width:1280px){
  .nav-links{display:none}
  .nav-burger{display:block}
}
@media (max-width:1180px){
  .card-row{grid-template-columns:repeat(2,1fr)}
  .card-art{aspect-ratio:4/3}
  .row-link{grid-template-columns:36px minmax(0,1fr) clamp(110px,16vw,180px) 44px}
  .row-text{grid-column:2;grid-row:2;margin-top:6px}
  .row-thumb{grid-column:3;grid-row:1/3}
  .row-arr{grid-column:4;grid-row:1/3}
  .row-num{grid-row:1/3;align-self:start;margin-top:.5em}
}
@media (max-width:900px){
  .nav-tel{display:none}
  .grid2{grid-template-columns:1fr;row-gap:48px}
  .hero-grid{grid-template-columns:1fr;gap:32px;align-items:start;padding-top:calc(var(--nav-h) + 28px)}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .inc-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
  .trust{grid-template-columns:1fr;gap:22px}
  .trust-cta{grid-template-columns:1fr 1fr}
  .svc-cards{grid-template-columns:1fr 1fr}
  .receipt-wrap{padding-top:8px}
  .ba-grid{grid-template-columns:1fr;gap:32px}
  .prices{grid-template-columns:1fr}
  .price-num{margin-top:14px;font-size:clamp(2.6rem,11vw,4rem)}
  .factors{grid-template-columns:1fr}
  .keep-head{grid-template-columns:1fr}
  .keep-head .h2{justify-self:start;text-align:left}
  .keep-grid{grid-template-columns:1fr}
  .keep-img{min-height:0;aspect-ratio:16/11}
  .keep-points li:hover{transform:none}
  .wert{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr;row-gap:36px}
  .map{width:min(100%,560px);margin-inline:auto}
  .faq-grid{grid-template-columns:1fr;row-gap:40px}
  .faq-head{position:static}
  .foot-top{grid-template-columns:1fr}
  .foot-links{grid-template-columns:1fr 1fr}
  .pmedia .panel{aspect-ratio:16/10}
  .float{display:none}
}
@media (max-width:640px){
  .brand span{display:none}
  .nav .btn-sm{padding:0 16px}
  .hero h1{font-size:clamp(1.9rem,8.5vw,2.7rem)}
  .foot{border-radius:26px 26px 0 0;margin-top:-26px}
  .equal{grid-template-columns:1fr;justify-items:stretch}
  .eq-slip{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 18px}
  .eq-sign{justify-self:center;margin:-10px 0}
  .eq-sign{width:44px;height:44px;font-size:1.3rem}
  .hero-lead{font-size:1.0625rem}
  .hero-actions .btn{min-height:52px;flex:1;justify-content:center}
  .hero-actions{width:100%}
  .skycard{border-radius:24px}
  .skycard .fld input{min-height:48px}
  .towns{grid-template-columns:1fr}
  .contact .fld-row{grid-template-columns:1fr}
  .steps-list li{font-size:1.2rem}
  .sheet{border-radius:26px 26px 0 0;margin-top:-26px}
  .card-row{grid-template-columns:1fr;gap:36px}
  .inc-grid{grid-template-columns:1fr}
  .svc-cards{grid-template-columns:1fr}
  .trust-cta{grid-template-columns:1fr}
  .row-link{grid-template-columns:minmax(0,1fr) 76px;column-gap:12px;padding:14px}
  .row-num{display:none}
  .row-word{grid-column:1;grid-row:1;font-size:clamp(1.15rem,5.3vw,1.6rem);letter-spacing:-.03em}
  .row-text{grid-column:1;grid-row:2}
  .row-thumb{grid-column:2;grid-row:1/3;aspect-ratio:1}
  .row-arr{display:none}
  .pin-name{font-size:25px}.pin-km{font-size:19px}.pin-home{font-size:31px}
  .pin-s .pin-name{font-size:22px;opacity:0;transition:opacity 300ms ease}.pin-s.is-on .pin-name{opacity:1}.pin-s .pin-km{font-size:17px}
  body{padding-bottom:84px}
  .mbar{position:fixed;inset:auto 0 0 0;z-index:30;display:grid;grid-template-columns:1fr 1.7fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,14,12,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform 300ms var(--ease)}
  .mbar .btn{min-height:50px;padding:0 12px;justify-content:center}
  .mbar.away{transform:translateY(110%)}
  .consent{right:16px;bottom:96px}
}
@media (max-height:760px) and (min-width:901px){
  .skycard .fld input{min-height:44px}
  .skycard .fld textarea{min-height:60px}
  .skycard .form{gap:8px}
  .hero h1{font-size:clamp(2.2rem,1rem + 2.8vw,3.4rem)}
  .hero-grid{padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv-blur,.js .rv-up,.js .rv-words .w{opacity:1;filter:none;transform:none;transition:none}
  .hero h1 .w,.hero-lead,.hero-checks,.hero-proof,.hero .skycard{animation:none}
  .eq-sign i{animation:none}
  .free i,.video-play::before,.pulse,.ring-25,.ask-ico i{animation:none}
  .js .map .pin{opacity:1}
}

/* Kleinigkeiten */
.skycard.flash{animation:flash 1200ms ease}
@keyframes flash{0%{box-shadow:0 34px 90px rgba(46,78,120,.24),0 0 0 0 rgba(29,107,69,.55)}60%{box-shadow:0 34px 90px rgba(46,78,120,.24),0 0 0 14px rgba(29,107,69,0)}100%{box-shadow:0 34px 90px rgba(46,78,120,.24),inset 0 0 0 1px rgba(255,255,255,.75)}}
.score-sub{font-size:var(--t-body);font-weight:500;color:var(--ink-2)}

/* ---------- Ratgeber (v13) ---------- */
.rg-meta{margin-top:20px;font-size:var(--t-small);font-weight:500;color:var(--ink-2)}
.art-wrap{padding-top:clamp(36px,4vw,64px)}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(32px,5vw,88px);align-items:start}
.article{grid-column:1;grid-row:1;max-width:68ch;font-size:var(--t-body);line-height:1.62;color:var(--ink-2)}
.glance{grid-column:2;grid-row:1;position:sticky;top:100px;display:grid;gap:16px}
.art-sec + .art-sec{margin-top:clamp(40px,4.4vw,64px)}
.article h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);letter-spacing:-.035em;line-height:1.1;color:var(--ink);font-weight:600;margin-bottom:18px;scroll-margin-top:110px}
.article p + p,.article p + ul,.article ul + p,.article .note + p,.article p + .note{margin-top:16px}
.article ul{list-style:none;padding:0;display:grid;gap:10px}
.article ul li{position:relative;padding-left:22px}
.article ul li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--green-2)}
.article strong,.article b{color:var(--ink);font-weight:600}
.article .small{font-size:var(--t-small);line-height:1.5}
.note{border-radius:var(--r);padding:clamp(18px,2vw,26px);background:linear-gradient(160deg,#DDEBFA 0%,#F1F6FB 100%)}
.note b{display:block;margin-bottom:6px}
.art-src{margin-top:clamp(48px,5vw,72px);padding-top:28px;border-top:1px solid var(--line);font-size:var(--t-small);line-height:1.5}
.art-src h2{font-size:1.15rem;letter-spacing:-.01em;margin-bottom:12px}
.art-src ul{gap:6px}
.art-src p{margin-top:16px;color:var(--text-2)}
.glance-box{border-radius:var(--r);padding:clamp(20px,2vw,28px);background:var(--green-soft)}
.glance-box .label{color:var(--green);margin-bottom:12px}
.glance-box ul{list-style:none;padding:0;display:grid;gap:10px;font-size:var(--t-small);line-height:1.45;color:var(--ink)}
.glance-box li{position:relative;padding-left:26px}
.glance-box li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.glance-toc{padding:4px 4px 0}
.glance-toc .label{margin-bottom:8px}
.glance-toc ol{list-style:none;padding:0;display:grid;gap:6px;font-size:var(--t-small)}
.glance-toc a{text-decoration:none;color:var(--ink-2)}
.glance-toc a:hover{color:var(--green);text-decoration:underline;text-underline-offset:.2em}
.glance-cta{border-radius:var(--r);padding:clamp(20px,2vw,26px);background:#fff;box-shadow:0 18px 50px rgba(46,78,120,.14);display:grid;gap:10px;justify-items:start}
.glance-cta p{font-size:var(--t-small);color:var(--ink-2)}
.glance-cta .tlink{font-size:var(--t-small)}
.rg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(28px,3.4vw,48px)}
.rg-card{position:relative;display:grid;align-content:start;gap:10px;min-height:220px;padding:clamp(22px,2.2vw,30px) clamp(22px,2.2vw,30px) 64px;border-radius:var(--r);background:linear-gradient(160deg,#DDEBFA 0%,#F1F6FB 100%);text-decoration:none;color:var(--ink);transition:transform 600ms var(--ease-expo),box-shadow 600ms var(--ease-expo)}
.rg-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(46,78,120,.18)}
.rg-kicker{font-size:var(--t-small);font-weight:500;color:var(--green)}
.rg-title{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.rg-text{font-size:var(--t-small);color:var(--ink-2);line-height:1.5}
.rg-arr{position:absolute;left:clamp(22px,2.2vw,30px);bottom:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:.95rem;transition:transform 400ms var(--ease-expo)}
.rg-card:hover .rg-arr{transform:translateX(6px)}
.faq-more{margin-top:28px;font-size:var(--t-body)}
@media (max-width:960px){
  .article-grid{grid-template-columns:1fr}
  .glance{grid-column:1;grid-row:1;position:static}
  .article{grid-column:1;grid-row:2}
  .glance-toc{display:none}
}

.skycard{scroll-margin-top:96px}

/* ---------- Video-Platz: animierter Ablauf (v14) ---------- */
.clip{background:#F3EFE8;overflow:hidden}
.clip::after{display:none}
.clip-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.clip-scene text{font-family:var(--font);letter-spacing:-.01em}
.cl-cloud{animation:cl-drift 14s linear infinite alternate}
.cl-cloud2{animation-duration:10s}
@keyframes cl-drift{to{transform:translateX(18px)}}
.cl-it{transform-box:fill-box;transition:transform 900ms var(--ease-io) var(--dl),opacity 700ms ease calc(var(--dl) + 300ms)}
.clip[data-step="4"] .cl-it,.clip[data-step="5"] .cl-it{transform:translate(var(--tx),var(--ty)) scale(.55);opacity:0}
.cl-door{transform-box:fill-box;transform-origin:right center;transition:transform 700ms var(--ease-expo)}
.clip[data-step="4"] .cl-door,.clip[data-step="5"] .cl-door{transform:scaleX(.18)}
.cl-ov{opacity:0;transition:opacity 500ms ease}
.clip[data-step="1"] .cl-ov1,.clip[data-step="2"] .cl-ov2,.clip[data-step="3"] .cl-ov3,.clip[data-step="5"] .cl-ov5{opacity:1}
.cl-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.clip[data-step="1"] .cl-ring{animation:cl-ring 1.6s ease-out infinite}
.clip[data-step="1"] .cl-ring2{animation-delay:.8s}
@keyframes cl-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.cl-mag{transform:translate(110px,230px)}
.clip[data-step="2"] .cl-mag{animation:cl-scan 3.4s var(--ease-io) both}
@keyframes cl-scan{0%{transform:translate(110px,230px)}35%{transform:translate(300px,250px)}70%{transform:translate(460px,240px)}100%{transform:translate(470px,200px)}}
.cl-tick{opacity:0}
.clip[data-step="2"] .cl-tick{animation:cl-pop 500ms var(--ease-expo) var(--dl) both}
@keyframes cl-pop{from{opacity:0}to{opacity:1}}
.cl-doc{transform-box:fill-box;transform:translateY(40px);transition:transform 800ms var(--ease-expo)}
.clip[data-step="3"] .cl-doc{transform:none}
.cl-stamp{opacity:0}
.clip[data-step="3"] .cl-stamp{animation:cl-pop 400ms var(--ease-expo) 1.6s both}
.cl-broom{transform:translate(-80px,300px)}
.clip[data-step="5"] .cl-broom{animation:cl-sweep 2.6s var(--ease-io) both}
@keyframes cl-sweep{0%{transform:translate(-80px,300px) rotate(-6deg)}50%{transform:translate(320px,300px) rotate(6deg)}100%{transform:translate(700px,300px) rotate(-6deg)}}
.cl-spark{opacity:0}
.clip[data-step="5"] .cl-spark{animation:cl-pop 500ms ease var(--dl) both}
.cl-badge{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.8);transition:opacity 500ms ease,transform 600ms var(--ease-expo)}
.clip[data-step="5"] .cl-badge{opacity:1;transform:none;transition-delay:1.6s}
.clip.reset *{transition:none!important;animation:none!important}
.cl-caps{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;list-style:none;padding:0;margin:0;display:grid}
.cl-cap{grid-area:1/1;align-self:end;max-width:30ch;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(46,78,120,.14);font-size:var(--t-small);line-height:1.35;color:var(--ink-2);opacity:0;transform:translateY(8px);transition:opacity 450ms ease,transform 600ms var(--ease-expo)}
.cl-cap b{display:block;font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);letter-spacing:-.02em;color:var(--ink);margin-bottom:2px}
.cl-n{display:block;font-size:.8rem;font-weight:500;color:var(--green);margin-bottom:4px}
.clip[data-step="1"] .cl-cap1,.clip[data-step="2"] .cl-cap2,.clip[data-step="3"] .cl-cap3,.clip[data-step="4"] .cl-cap4,.clip[data-step="5"] .cl-cap5{opacity:1;transform:none}
.cl-dots{position:absolute;right:18px;top:16px;z-index:2;display:flex;gap:6px}
.cl-dot{width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}
.cl-dot i{display:block;height:5px;border-radius:3px;background:rgba(15,21,18,.18);overflow:hidden;position:relative}
.cl-dot i::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left}
.clip[data-step="1"] .cl-dot:nth-child(1) i::after,.clip[data-step="2"] .cl-dot:nth-child(2) i::after,.clip[data-step="3"] .cl-dot:nth-child(3) i::after,.clip[data-step="4"] .cl-dot:nth-child(4) i::after,.clip[data-step="5"] .cl-dot:nth-child(5) i::after{animation:cl-bar var(--dur,4s) linear both}
.clip.paused .cl-dot i::after{animation-play-state:paused}
@keyframes cl-bar{to{transform:scaleX(1)}}
.video-ki .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:600px){.cl-cap{padding:10px 14px}.cl-dot{width:24px}}
@media (prefers-reduced-motion:reduce){.cl-cloud{animation:none}}
@media (max-width:700px){
  .clip{aspect-ratio:auto;display:flex;flex-direction:column}
  .clip-scene{position:relative;inset:auto;height:auto;aspect-ratio:16/10}
  .cl-caps{position:relative;left:auto;right:auto;bottom:auto;margin:0 12px 12px;margin-top:-18px}
  .cl-cap{max-width:none}
  .cl-dots{top:10px;right:12px}
}

/* ---------- Infovideo (v15) ---------- */
.video-film{cursor:pointer}
.video-film::after{background:linear-gradient(180deg,rgba(10,14,12,0) 62%,rgba(10,14,12,.35) 100%)}
.video-film.has-sound::after,.video-film.has-sound .video-cap{display:none}
.vid-sound{position:absolute;right:18px;top:18px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font:inherit;font-size:var(--t-small);font-weight:600;box-shadow:0 10px 26px rgba(46,78,120,.22);cursor:pointer;transition:transform 400ms var(--ease-expo),background-color 200ms ease}
.vid-sound svg{width:22px;height:22px;color:var(--green)}
.vid-sound:hover{transform:translateY(-2px);background:#fff}
.video-film.has-sound .vid-sound{display:none}
.video-film{aspect-ratio:16/9}
.video-film .video-cap{display:none}
.video-film::after{display:none}

/* Video-Knopf mit Erklärung (v15b) */
.vid-sound{left:18px;right:auto;top:18px;min-height:0;padding:12px 22px 12px 12px;gap:14px;border-radius:20px;text-align:left;line-height:1.25}
.vs-play{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;box-shadow:0 0 0 0 rgba(29,107,69,.45);animation:vs-ring 2.4s ease-out infinite}
.vs-play svg{width:22px;height:22px;margin-left:3px}
.vs-text{display:grid;gap:2px}
.vs-text b{font-size:clamp(1rem,.9rem + .4vw,1.2rem);letter-spacing:-.015em;color:var(--ink)}
.vs-text span{font-size:.875rem;font-weight:500;color:var(--text-2)}
@keyframes vs-ring{0%{box-shadow:0 0 0 0 rgba(29,107,69,.45)}70%{box-shadow:0 0 0 14px rgba(29,107,69,0)}100%{box-shadow:0 0 0 0 rgba(29,107,69,0)}}
@media (max-width:600px){.vid-sound{left:10px;top:10px;padding:8px 14px 8px 8px;gap:10px;border-radius:16px}.vs-play{width:40px;height:40px}.vs-play svg{width:18px;height:18px}.vs-text span{font-size:.75rem}}
@media (prefers-reduced-motion:reduce){.vs-play{animation:none}}
.vid-sound .vs-play svg{color:#fff;fill:#fff}