/* Atmoce Kit. Stilwelt von atmoce.com: Roboto, Schwarz/Weiß/Hellgrau, Akzent Grün, CTA-Verlauf Koralle → Beere.
   Radien: Karten 16px, Buttons 10px, CTA 12px. Ebenen: Kopf 50, Menü-Panel 51, Handy-Menü 49. */
@font-face{font-family:Roboto;font-weight:400;font-display:swap;src:url(/wp-content/atmoce-kit/static/fonts/roboto-400.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:500;font-display:swap;src:url(/wp-content/atmoce-kit/static/fonts/roboto-500.woff2) format("woff2")}
@font-face{font-family:Roboto;font-weight:700;font-display:swap;src:url(/wp-content/atmoce-kit/static/fonts/roboto-700.woff2) format("woff2")}
@font-face{font-family:"Roboto Ersatz";src:local("Arial");size-adjust:100.06%;ascent-override:92.67%;descent-override:24.39%;line-gap-override:0%}
:root{--ink:#000;--kohle:#111113;--kante:#242427;--graphit:#313234;--papier:#fff;--nebel:#f4f4f6;--linie:#e2e2e6;--text:#0f0f11;--text-2:#56575d;--hell-2:#a8a9ae;
  --gruen:#1bd145;--cta:linear-gradient(90deg,#ff897b,#bc3e60);--r:16px;--ease:cubic-bezier(.22,.61,.36,1);--rand:clamp(20px,4vw,48px);--kopf:76px;interpolate-size:allow-keywords}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 16px);overflow-x:clip}
body{margin:0;font:400 1.0625rem/1.6 Roboto,"Roboto Ersatz",system-ui,sans-serif;color:var(--text);background:var(--papier);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--gruen);color:#000}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
h1,h2,h3{font-weight:500;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.6vw,3.75rem);line-height:1.06;letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.1;letter-spacing:-.02em}
h3{font-size:1.375rem;line-height:1.25;letter-spacing:-.01em}
p{text-wrap:pretty}
.w{width:min(100% - 2*var(--rand),1240px);margin-inline:auto}
.ico{width:1.15em;height:1.15em;flex:none}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:#fff;color:#000;padding:10px 16px;border-radius:10px}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sek{padding-block:clamp(72px,9vw,140px)}
.sek--eng{padding-top:0}
.dunkel{background:var(--ink);color:#fff}
.nebel{background:var(--nebel)}
.kopfz{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.kopfz p,.vor{margin-top:16px;font-size:1.15rem;color:var(--text-2);max-width:62ch}
.dunkel .kopfz p,.dunkel .vor,.graphit .vor{color:var(--hell-2)}

/* Buttons und Links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:48px;padding:0 22px;border-radius:10px;font-weight:500;font-size:1rem;white-space:nowrap;
  transition:background-color .14s,color .14s,border-color .14s,filter .14s,transform .12s var(--ease)}
.btn:active{transform:scale(.97)}
.btn--cta{background:var(--cta);color:#000;border-radius:12px;padding-inline:22px 26px}
.btn--hell{background:#eee;color:#000}
.btn--dunkel{background:#000;color:#fff}
.btn--rand{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-pf{transition:translate .2s var(--ease)}
.kn{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mehr{display:inline-flex;align-items:center;gap:.45em;font-weight:500;text-decoration:underline transparent;text-underline-offset:5px;transition:text-decoration-color .14s}
.mehr .ico{transition:translate .2s var(--ease)}
.dunkel .mehr .ico,.graphit .mehr .ico,.schluss .mehr .ico{color:var(--gruen)}
@media (hover:hover) and (pointer:fine){
  .btn--cta:hover{filter:brightness(1.08) saturate(1.06)}
  .btn--hell:hover{background:#fff}
  .hell-grund .btn--hell:hover{background:#dedee2}
  .btn--dunkel:hover{background:#2c2c30}
  .btn--rand:hover{background:#fff;color:#000;border-color:#fff}
  .btn:hover .btn-pf,.mehr:hover .ico,a:hover>.mehr .ico,a:hover .pk-pf .ico{translate:4px 0}
  .mehr:hover{text-decoration-color:currentColor}
}

/* Kopf */
.kopf-w{position:absolute;top:0;left:0;width:1px;height:48px;pointer-events:none}
.kopf{position:fixed;inset:0 0 auto;z-index:50;height:var(--kopf);color:#fff;transition:background-color .2s,color .2s,box-shadow .2s}
.kopf.fest,.kopf.offen{background:#fff;color:#000;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.kopf-in{width:min(100% - 2*var(--rand),1360px);margin-inline:auto;height:100%;display:flex;align-items:center;gap:clamp(20px,3vw,44px)}
.kopf-logo{display:flex;align-items:center;height:44px}
.logo{width:132px;height:auto}
.nav{margin-right:auto}
.nav-ul{display:flex;gap:clamp(4px,1.2vw,18px)}
.nav-l{position:relative;display:inline-flex;align-items:center;gap:6px;height:var(--kopf);padding-inline:10px;font-size:.97rem;font-weight:500}
.nav-l::after{content:"";position:absolute;left:10px;right:10px;bottom:18px;height:2px;background:var(--gruen);scale:0 1;transform-origin:0 50%;transition:scale .2s var(--ease)}
.nav-l[aria-expanded=true]::after,.nav-l.ist::after{scale:1 1}
.nav-c{width:.8em;height:.8em;transition:rotate .2s var(--ease)}
.nav-l[aria-expanded=true] .nav-c{rotate:180deg}
.kopf-r{display:flex;align-items:center;gap:10px}
.kopf-r .btn{height:42px;padding-inline:18px;font-size:.95rem}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px}
.burger .ico{width:26px;height:26px}
.burger .b-zu,.kopf.offen .burger .b-auf{display:none}
.kopf.offen .burger .b-zu{display:block}
@media (hover:hover) and (pointer:fine){.nav-l:hover::after{scale:1 1}}

/* Menü-Panel: schwebendes weißes Feld, links Liste, rechts Vorschau. Beim Wechsel blendet nur um, nichts verschiebt sich. */
.mm,.dd{position:absolute;z-index:51;background:#fff;color:#000;border-radius:20px;border:1px solid rgba(0,0,0,.07);box-shadow:0 30px 70px -24px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.05);
  opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .2s var(--ease),translate .2s var(--ease),visibility 0s .2s}
.mm.auf,.dd.auf{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.mm::before,.dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mm{top:calc(var(--kopf) - 6px);left:50%;margin-left:calc(min(100vw - 2*var(--rand),1120px)/-2);width:min(100vw - 2*var(--rand),1120px)}
.mm-g{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:12px;padding:12px}
.mm-p{display:flex;align-items:center;gap:14px;padding:7px 14px 7px 7px;border-radius:12px;transition:background-color .14s}
.mm-p.ist{background:var(--nebel)}
.mm-th{flex:none;width:56px;height:48px;border-radius:9px;background:var(--nebel);display:grid;place-items:center;transition:background-color .14s}
.mm-p.ist .mm-th{background:#fff}
.mm-th img{max-width:40px;max-height:36px;width:auto;object-fit:contain}
.mm-tx{display:grid;line-height:1.3}
.mm-tx b{font-weight:500}
.mm-tx small,.dd small{font-size:.86rem;color:var(--text-2)}
.mm-v{position:relative;min-height:440px;border-radius:14px;background:var(--nebel);overflow:clip}
.mm-s{position:absolute;inset:0;display:grid;grid-template-rows:250px 1fr;opacity:0;transition:opacity .2s var(--ease)}
.mm-s.ist{opacity:1}
.mm-sb{display:grid;place-items:center;padding:26px 26px 6px}
.mm-sb img{max-height:214px;width:auto;max-width:86%;object-fit:contain;filter:drop-shadow(0 16px 26px rgba(0,0,0,.16))}
.mm-st{padding:14px 26px 22px;display:grid;align-content:start;gap:8px;font-size:.95rem;color:var(--text-2)}
.mm-sn{font-size:1.2rem;font-weight:500;color:#000;letter-spacing:-.01em}
.mm-st .mehr{color:#000;margin-top:4px}
.mm-f{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;padding:14px 26px;border-top:1px solid var(--linie);font-size:.93rem;font-weight:500}
.mm-f a{display:inline-flex;align-items:center;gap:8px;padding-block:4px;text-decoration:underline transparent;text-underline-offset:4px;transition:text-decoration-color .14s}
.mm-tel{margin-left:auto}
.nav-i:has(>.dd){position:relative}
.dd{top:calc(var(--kopf) - 6px);left:-14px;width:330px;padding:8px}
.dd a{display:grid;padding:10px 14px;border-radius:12px;line-height:1.35;transition:background-color .14s}
.dd b{font-weight:500}
@media (hover:hover) and (pointer:fine){.dd a:hover{background:var(--nebel)}.mm-f a:hover{text-decoration-color:currentColor}}

/* Handy-Menü */
.mo{position:fixed;inset:var(--kopf) 0 0;z-index:49;background:#fff;color:#000;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--rand) 32px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility 0s .2s}
.kopf.offen .mo{opacity:1;visibility:visible;transition-delay:0s}
.mo-d summary,.mo-l{display:flex;align-items:center;justify-content:space-between;min-height:58px;font-size:1.2rem;font-weight:500;border-bottom:1px solid var(--linie);cursor:pointer;list-style:none}
.mo-d summary::-webkit-details-marker{display:none}
.mo-d summary .ico{transition:rotate .2s var(--ease)}
.mo-d[open] summary .ico{rotate:180deg}
.mo-d ul{padding:8px 0 14px;border-bottom:1px solid var(--linie)}
.mo-d li a{display:flex;align-items:center;min-height:46px;color:var(--text-2)}
.mo-f{margin-top:auto;padding-top:28px;display:grid;gap:16px}
.mo-f .btn{height:52px}
.mo-tel{display:inline-flex;align-items:center;gap:8px;justify-content:center;font-weight:500}
html.mo-offen{overflow:hidden}
@media (max-width:1099px){.nav{display:none}.burger{display:inline-flex}.kopf-r{margin-left:auto}}
@media (min-width:1100px){.mo{display:none}}
@media (max-width:430px){.kopf-r .btn{padding-inline:12px;font-size:.86rem;height:38px}.logo{width:104px}}

/* Einblenden: ohne JS ist alles sichtbar */
.js .r{opacity:0;translate:0 18px;transition:opacity .6s var(--ease),translate .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js .r.ein{opacity:1;translate:none}

/* Hero */
.hero{position:relative;min-height:min(100svh,920px);display:grid;color:#fff;background:#000;overflow:clip}
.hero-b{position:absolute;inset:0}
.hero-b img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(22,10,26,.66) 0,rgba(22,10,26,.4) 30%,rgba(22,10,26,0) 58%)}
.hero-in{position:relative;z-index:1;align-self:start;text-align:center;padding-top:calc(var(--kopf) + clamp(28px,5vh,56px));padding-bottom:40px}
.hero h1{max-width:1040px;margin-inline:auto}
.hero p{margin:18px auto 0;max-width:900px;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5}
.hero .kn{justify-content:center}
.hero--prod{min-height:min(100svh,860px);background:#000}
.hero--prod .hero-b img{object-position:50% 78%}
.hero--prod::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 46%)}
.pfad{display:flex;justify-content:center;gap:8px;margin-bottom:18px;font-size:.9rem;color:rgba(255,255,255,.72)}
.pfad a{text-decoration:underline transparent;text-underline-offset:4px;transition:text-decoration-color .14s}
.pfad li+li::before{content:"/";margin-right:8px;opacity:.6}

/* Startseite: Einleitung mit Fakten */
.einl h2{max-width:20ch}
.einl-g{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.einl-g p{font-size:1.15rem;color:var(--text-2)}
.fakten{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,6vw,76px);border-top:1px solid var(--linie)}
.fakten div{padding:22px 20px 0 0}
.fakten div+div{padding-left:20px;border-left:1px solid var(--linie)}
.fakten dd{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.fakten dt{margin-top:8px;font-size:.95rem;color:var(--text-2)}
.fakten div{display:flex;flex-direction:column-reverse;justify-content:flex-end}

/* Film (Haus bei Nacht und Tag) */
.film-b{border-radius:var(--r);overflow:clip;background:#0b0f16}
.vid{width:100%;height:auto;object-fit:cover}
.vorteile{display:grid;grid-template-columns:repeat(5,1fr);gap:0 20px;margin-top:26px}
.vorteile li{padding-top:14px;border-top:2px solid var(--ink);font-weight:500;line-height:1.3}

/* Produktbühne */
.buehne{background:#000;color:#fff;text-align:center;padding-top:clamp(72px,9vw,130px);overflow:clip}
.buehne .vor{margin-inline:auto;color:var(--hell-2)}
.buehne .mehr{margin-top:22px}
.buehne-b{margin-top:clamp(-90px,-5vw,-30px)}
.buehne-b img{width:100%}
.buehne .w{position:relative;z-index:1}

/* Produktraster */
.pg{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(300px,auto);gap:16px}
.pk{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--nebel);overflow:clip;min-height:300px}
.pk-t{padding:26px 76px 0 26px;position:relative;z-index:1}
.pk-t p{margin-top:6px;color:var(--text-2);font-size:1rem}
.pk-b{flex:1;display:grid;place-items:center;padding:18px 26px 26px;min-height:0}
.pk-b img{max-height:240px;width:auto;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.16));transition:scale .45s var(--ease)}
img.mult{mix-blend-mode:multiply;filter:none}
.pk-pf{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:background-color .14s,color .14s}
.pk--a{grid-column:span 4}.pk--b{grid-column:span 2;grid-row:span 2}.pk--c,.pk--d{grid-column:span 2}.pk--e{grid-column:span 6;flex-direction:row;align-items:center;min-height:260px}
.pk--b .pk-b img{max-height:460px}
.pk--a .pk-b img{max-height:300px}
.pk--e .pk-t{flex:1;padding-bottom:26px}
.pk--e .pk-b{flex:1.2}
@media (hover:hover) and (pointer:fine){.pk:hover .pk-b img{scale:1.04}.pk:hover .pk-pf{background:#000;color:#fff}}

/* App */
.graphit{background:var(--graphit);color:#fff}
.app-g{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,90px);align-items:center}
.app-li{margin-top:28px;display:grid;gap:0}
.app-li li{padding:14px 0;border-top:1px solid rgba(255,255,255,.16);color:#e6e6e8}
.app-li li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.app .mehr,.zwei .mehr{margin-top:24px}
.app-b{display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:center;gap:clamp(8px,1.6vw,22px)}
.app-b img{width:100%;border-radius:clamp(14px,2vw,26px)}
.app-b img:nth-child(odd){opacity:.86}

/* Zielgruppen */
.gr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px)}
.gk{display:grid;gap:18px;align-content:start}
.gk-b{border-radius:var(--r);overflow:clip;background:var(--nebel)}
.gk-b img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:scale .45s var(--ease)}
.gk p{margin-top:6px;color:var(--text-2);max-width:52ch}
.gk .mehr{margin-top:12px}
.gk--breit{grid-column:1/-1;grid-template-columns:1fr 1.5fr;align-items:center;gap:clamp(20px,4vw,56px);padding-top:clamp(20px,3vw,40px);border-top:1px solid var(--linie)}
.gk--breit .gk-b{order:2}
.gk--breit .gk-b img{aspect-ratio:16/9}
@media (hover:hover) and (pointer:fine){.gk:hover .gk-b img{scale:1.03}}

/* Leitbild */
.band{position:relative;min-height:clamp(380px,62vh,640px);display:grid;place-items:center;color:#fff;text-align:center;background:#000;overflow:clip}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.1) 45%,#000 100%)}
.band h2{position:relative;z-index:1;max-width:24ch;font-size:clamp(2rem,4.4vw,3.6rem)}
.leit{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,5vw,80px);padding-bottom:clamp(72px,9vw,130px)}
.leit div{padding:28px 0 30px;border-top:1px solid var(--kante)}
.leit p{margin-top:10px;color:var(--hell-2)}

/* FAQ */
.faq-g{display:grid;grid-template-columns:1fr 2fr;gap:clamp(24px,5vw,80px);align-items:start}
.fq{border-top:1px solid var(--linie)}
.fq:last-child{border-bottom:1px solid var(--linie)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary h3{font-size:1.15rem}
.fq summary .ico{width:22px;height:22px;transition:rotate .2s var(--ease)}
.fq[open] summary .ico{rotate:45deg}
.fq-a{padding:0 0 24px;max-width:68ch;color:var(--text-2)}
.fq::details-content{block-size:0;overflow:clip;transition:block-size .28s var(--ease),content-visibility .28s allow-discrete}
.fq[open]::details-content{block-size:auto}

/* Abschluss und Fuß */
.schluss{background:#000;color:#fff;padding-block:clamp(72px,9vw,130px)}
.schluss-g{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.schluss h2{font-size:clamp(2rem,4.2vw,3.4rem);max-width:14ch}
.schluss p{margin-top:16px;color:var(--hell-2);max-width:48ch}
.nl{padding-top:24px;border-top:1px solid var(--kante)}
.nl .mehr{margin-top:16px}
.fuss{background:#000;color:#fff;border-top:1px solid var(--kante);font-size:.95rem}
.fu-g{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px 28px;padding-block:64px 48px}
.fu-logo{width:140px;margin-bottom:22px}
.fu-m,.fu-m a{color:var(--hell-2)}
.fu-m p{margin-top:12px}
.fu-so{display:flex;gap:8px;margin-top:20px}
.fu-so a{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--kante);color:#fff;transition:background-color .14s,color .14s}
.fu-so .ico{width:20px;height:20px}
.fu-sp h2{font-size:.95rem;font-weight:500;letter-spacing:0;margin-bottom:14px}
.fu-sp li a{display:inline-block;padding-block:5px;color:var(--hell-2);transition:color .14s}
.fu-u{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 28px;border-top:1px solid var(--kante);color:var(--hell-2);font-size:.88rem}
.fu-u ul{display:flex;gap:22px}
@media (hover:hover) and (pointer:fine){.fu-sp li a:hover,.fu-m a:hover,.fu-u a:hover{color:#fff}.fu-so a:hover{background:#fff;color:#000}.pfad a:hover{text-decoration-color:currentColor}}

/* Produktseite: Kennzahlen */
.kenn{background:#000;color:#fff;padding-block:clamp(56px,7vw,110px)}
.kenn-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kz{display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:168px;padding:22px;border-radius:var(--r);background:var(--kohle);border:1px solid var(--kante)}
.kz b{font-size:clamp(1.9rem,3.1vw,2.7rem);font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kz span{color:var(--hell-2);font-size:.98rem;line-height:1.4}
.kz--t b{font-size:1.2rem;letter-spacing:-.01em;line-height:1.25;hyphens:auto}
.kz--gross{grid-column:2/4;grid-row:1/3;position:relative;overflow:clip;justify-content:flex-start;gap:8px}
.kz--gross b{font-size:clamp(3rem,6vw,5rem);color:var(--gruen)}
.kz--gross img{position:absolute;right:-4%;bottom:-8%;width:62%}

/* Produktseite: Leistung, Zweispalter mit Film, Wetter, Daten */
.werte{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:end}
.werte dl{display:grid}
.werte dl div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--kante)}
.werte dl div:last-child{border-bottom:1px solid var(--kante)}
.werte dt{color:var(--hell-2)}
.werte dd{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.breitbild{margin-top:clamp(36px,5vw,70px)}
.breitbild img{width:100%}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center}
.zwei--um .zwei-m{order:-1}
.zwei-m{border-radius:var(--r);overflow:clip}
.zwei p+p{margin-top:14px}
.zwei .vor{margin-bottom:0}
.zahl{margin-top:26px;padding-top:20px;border-top:1px solid var(--kante);display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
.hell-grund .zahl{border-color:var(--linie)}
.zahl b{display:block;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zahl span{font-size:.95rem;color:var(--hell-2)}
.hell-grund .zahl span{color:var(--text-2)}
.detail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(36px,5vw,64px)}
.detail img{width:100%;border-radius:var(--r)}
.wetter{position:relative;color:#fff;background:#0d1622;overflow:clip;padding-block:clamp(90px,12vw,190px)}
.wetter .vid{position:absolute;inset:0;height:100%}
.wetter::after{content:"";position:absolute;inset:0;background:rgba(6,12,22,.42)}
.wetter .w{position:relative;z-index:1}
.wetter h2{max-width:16ch}
.wetter .vor{color:#dfe5ee}
.wl{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;font-weight:500}
.wl li{padding-top:10px;border-top:2px solid #fff}
.dt-w{overflow-x:auto;margin-top:clamp(28px,4vw,48px)}
.dt{width:100%;min-width:640px;border-collapse:collapse;font-variant-numeric:tabular-nums;text-align:left}
.dt caption{caption-side:bottom;text-align:left;padding-top:14px;font-size:.9rem;color:var(--text-2)}
.dt th,.dt td{padding:14px 16px 14px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.dt thead th{font-weight:500;border-bottom:2px solid var(--ink)}
.dt tbody th{font-weight:400;color:var(--text-2);width:38%}
.dt td{font-weight:500}
.dt .grp th{padding-top:30px;color:var(--text);font-weight:500;border-bottom-color:var(--ink)}
.daten-g{display:grid;grid-template-columns:1fr 300px;gap:clamp(24px,5vw,72px);align-items:start}
.daten-g img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.18))}

@media (max-width:900px){
  .einl-g,.app-g,.faq-g,.schluss-g,.werte,.zwei,.daten-g,.leit{grid-template-columns:1fr}
  .fakten{grid-template-columns:1fr 1fr}
  .fakten div:nth-child(odd){padding-left:0;border-left:0}
  .fakten div:nth-child(n+3){margin-top:22px;border-top:1px solid var(--linie)}
  .vorteile{grid-template-columns:1fr 1fr;gap:18px 20px}
  .pg{grid-template-columns:1fr 1fr}
  .pk--a,.pk--e{grid-column:span 2}.pk--b{grid-column:span 1;grid-row:span 1}.pk--c{grid-column:span 1}.pk--d{grid-column:span 2}
  .pk--b .pk-b img{max-height:240px}
  .pk--e{flex-direction:column;align-items:stretch}
  .gk--breit{grid-template-columns:1fr}
  .gk--breit .gk-b{order:0}
  .zwei--um .zwei-m,.zwei-m{order:0}
  .fu-g{grid-template-columns:1fr 1fr}
  .fu-m{grid-column:1/-1}
  .kenn-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kz--gross{grid-column:1/-1;grid-row:auto;min-height:300px}
  .daten-g img{display:none}
  .buehne-b{margin-top:0}
}
@media (max-width:560px){
  .gr,.detail{grid-template-columns:1fr}
  .pg{grid-template-columns:1fr}
  .pk--a,.pk--b,.pk--c,.pk--d,.pk--e{grid-column:auto}
  .pk-t{padding-right:70px}
  .hero-b img{object-position:60% 100%}
  .hero .btn--hell{display:none}
  .kz{min-height:140px;padding:18px}
  .kz--t b{font-size:1.05rem}
  .kz--gross img{width:74%}
  .app-b{grid-template-columns:1fr 1.2fr 1fr}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @supports (animation-timeline:scroll()){
    .hero-b img{animation:hero-zug linear both;animation-timeline:scroll(root);animation-range:0 100svh;transform-origin:50% 100%}
    @keyframes hero-zug{to{scale:1.12}}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js .r{opacity:1;translate:none}
}