/* ============================================================
   Klee Solarconcept — Theme-Override für das Resintoi-Template
   Wird NACH css/styles.css geladen und überschreibt nur Variablen
   + minimale Zusatzstyles (Hero-CTA, Badges, Rechner-Sektion).
   Layout, Breiten, Animationen bleiben 1:1 Template.
   ============================================================ */
/* Onest — self-hosted (SIL OFL), kein Google-Fonts-Request */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/onest-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:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/onest-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}

/* Typografie: Onest statt Aspekta/Fragment Mono. Auf :root UND body, weil styles.css
   die Font-Variablen in den Media-Queries (<=991px) nochmal auf body{} setzt und sonst
   Tablet/Mobile in Aspekta rendern (und die TTFs mitladen). */
:root,body{
  --typography-font-body:"Onest",Arial,sans-serif;
  --typography-font-button:"Onest",Arial,sans-serif;
  --typography-font-heading-sans:"Onest",Arial,sans-serif;
  --typography-font-label:"Onest",Arial,sans-serif;
}
:root{

  /* --- Klee-Farbwelt (Guidelines 2026) --- */
  --color-base-accent-primary:#EC632B;

  /* Ink #161616 mit Alpha-Stufen (Template: #222f30) */
  --color-base-base-dark-100:#161616;
  --color-base-base-dark-88:#161616e0;
  --color-base-base-dark-64:#161616a3;
  --color-base-base-dark-48:#1616167a;
  --color-base-base-dark-32:#16161652;
  --color-base-base-dark-16:#16161629;
  --color-base-base-dark-8:#16161614;
  --color-base-base-dark-4:#1616160a;
  --color-base-base-dark-0:#16161600;

  /* Warm Sand #FCFAF7 mit Alpha-Stufen (Template: #f7f7f5) */
  --color-base-base-light-100:#FCFAF7;
  --color-base-base-light-88:#FCFAF7e0;
  --color-base-base-light-64:#FCFAF7a3;
  --color-base-base-light-48:#FCFAF77a;
  --color-base-base-light-32:#FCFAF752;
  --color-base-base-light-16:#FCFAF729;
  --color-base-base-light-8:#FCFAF714;
  --color-base-base-light-4:#FCFAF70a;
  --color-base-base-light-0:#FCFAF700;

  /* Lift-Flächen → warme Neutralrampe */
  --color-base-lift-light:#F6F3EF;
  --color-base-lift-light-higher:#EDE9E4;
  --color-base-lift-dark:#262625;
  --color-base-lift-dark-higher:#3E3D3B;

  /* Akzent-Pastelle des Templates → warme Klee-Tints */
  --color-base-colors-nscachesand:#FEEBC4;
  --color-base-colors-nscorecoral:#F09364;
  --color-base-colors-nslatencypeach:#FADCCC;
  --color-base-colors-nspacketsky:#FDF1EA;
  --color-base-colors-nsqubitorchid:#FDD68C;
  --color-base-colors-nssyntaxmint:#FFF7E8;

  /* Status */
  --color-base-ui-error:#C0392B;
  --color-base-ui-success:#3F8F5B;
  --color-base-ui-warning:#FBB03B;

  /* Webflow-IX2-Swatches (main.js liest diese zur Laufzeit — fehlen im Export) */
  --_🎨-color--tokens---tone--subtle:rgba(22,22,22,.64);
  --_🎨-color--base---base--dark-100:#161616;
}

/* Buttons: einheitlich etwas kleinere Schrift (User-Wunsch — lange CTA-Texte).
   Auf :root UND body, weil das Template die Typo-Vars mobil auf body redefiniert. */
:root,body{--typography-size-button-1:1rem}

/* Sales-/Demo-Overlay des Templates sicher ausblenden */
.master_sales-cta{display:none !important}

/* Klee-SVG-Logos haben keine width/height-Attribute → feste Höhen geben (Marius: größer) */
.navbar_brand-image{height:3.4rem !important;width:auto !important}
/* Navbar: echte Höhe mit symmetrischem Padding — der Balken-Hintergrund deckt das Logo ab,
   auch wenn die Leiste beim Hochscrollen wieder einblendet. */
.padding-navbar{padding-top:1.75rem;padding-bottom:1.75rem}
.navbar{height:auto}
.navbar_brand{height:auto !important}
.section_hero-home-a{padding-top:4.8rem !important}
@media (min-width:992px){.section_hero-home-a{padding-top:3.85rem !important}}
/* Slider-Menü: beginnt unter der höheren Navbar, ohne Bottom-Block schlanker */
.navbar_slider{padding-top:8.5rem;padding-bottom:var(--spacing--40,2.5rem)}
.navbar_slider .navbar_slider_grid{margin-bottom:0}
@media (min-width:992px){.navbar_slider_grid{grid-template-columns:2fr 2fr 4fr}}

/* ---------- Hero: Subheadline unter der H1 ---------- */
.hero_sub{margin:1rem 0 0;max-width:38rem;font-size:var(--typography-size-b1,1.25rem);
  line-height:1.5;color:var(--color-base-base-light-88)}

/* ---------- Hero: 3 Conversion-Bullets unter der Headline ---------- */
.hero_bullets{display:flex;flex-direction:column;gap:.8rem;margin-top:var(--spacing--32)}
@media (min-width:992px){
  .hero_bullets{flex-direction:row;align-items:flex-start;gap:var(--spacing--32,2rem)}
  .hero_bullet{flex:1 1 0}
}
.hero_bullet{display:flex;align-items:flex-start;gap:.7rem;font-size:var(--typography-size-b2);
  line-height:1.5;color:var(--color-base-base-light-88);max-width:34rem}
.hero_bullet strong{color:var(--color-base-base-light-100);font-weight:700}
.hero_bullet svg{width:1.15rem;height:1.15rem;flex:0 0 auto;margin-top:.2rem;
  color:var(--color-base-accent-primary)}

/* ---------- Badge-Zeile (statisch, ersetzt Logo-Marquee) ---------- */
.section_badges-strip{padding:var(--spacing--64) 0}
.badges-strip_wrap{display:flex;justify-content:center;align-items:flex-start;gap:var(--spacing--80);flex-wrap:wrap}
.badges-strip_item{display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--typography-font-label);font-size:var(--typography-size-label-1);
  letter-spacing:var(--typography-letter-spacing-label-1);text-transform:uppercase;
  line-height:1.5;color:var(--color-tokens-tone-subtle)}
/* Höhen so gewählt, dass die TEXT-Größen beider Badges identisch wirken:
   Steuerberater hat 2 Textzeilen (fast volle Bildhöhe), Staatlich 3 Zeilen + Adler/Flagge */
.badges-strip_img{display:block;width:auto}
.badges-strip_img.is-staatlich{height:4rem}
.badges-strip_img.is-steuerberater{height:2.7rem}
/* Mobil: beide in einer Zeile, gleiches Text-Verhältnis */
@media (max-width:767px){
  .badges-strip_wrap{flex-wrap:nowrap;gap:2rem}
  .badges-strip_img.is-staatlich{height:2.1rem}
  .badges-strip_img.is-steuerberater{height:1.4rem}
}

/* ---------- Resultat/Anlagen: Fußnoten ---------- */
.resultat_disclaimer{margin-top:var(--spacing--32)}
.anlagen_hinweis{margin-top:var(--spacing--32)}

/* ---------- Standort: Anti-Scam-Hinweis ---------- */
.map_antiscam{max-width:44rem;margin:var(--spacing--24) auto 0;text-align:center}

/* ---------- PV-Paket-Tabs (Home-C-Variante) + Checkliste ---------- */
.section_combo-tabs.is-paket .paket_checklist{margin-top:var(--spacing--24)}
/* Problem-Kacheln: quadratische Grafiken mit einheitlichem Rand + Radius (wie die Loop-Videos) */
.problem_img-wrap{width:calc(100% - 3.5rem);margin:1.75rem auto 0;border-radius:var(--radius-general-large,1.5rem);
  overflow:hidden;aspect-ratio:1/1;transform:translateZ(0)}
.problem_img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.paket_check-label{margin-top:var(--spacing--64);margin-left:auto;margin-right:auto}
.paket_check-master{max-width:48rem;margin-left:auto;margin-right:auto}

/* ---------- Einheitliche Sektions-Labels: Pill immer content-breit, überall linksbündig ---------- */
.label-master{width:fit-content}
@media (max-width:767px){
  .features-home-b_headline{align-items:center;text-align:center}
  .combo-home-c_left{text-align:left;align-items:flex-start}
}

/* ---------- Resultat: Feature-Grid (Kopfzeile + 3 Bild-Karten mit Glas-Widgets) ---------- */
.section_resultat-grid{padding-top:var(--spacing--160,10rem);padding-bottom:var(--spacing--160,10rem)}
.resultat-grid_head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--spacing--32);
  margin-bottom:var(--spacing--64)}
.resultat-grid_headline{max-width:44rem;display:flex;flex-direction:column;gap:var(--spacing--24)}
.resultat-grid_cta{flex:0 0 auto}
.resultat-grid_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing--32,2rem)}
.resultat-grid_card{display:flex;flex-direction:column;gap:var(--spacing--16)}
.resultat-grid_media{position:relative;height:25rem;border-radius:var(--radius-general-large,1.5rem);
  overflow:hidden;transform:translateZ(0)}
.resultat-grid_media img{position:absolute;left:0;top:0;width:100%;height:120%;object-fit:cover;will-change:transform}
.resultat-grid_overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;padding:1rem}
.resultat-grid_bottom{display:flex;flex-direction:column;gap:var(--spacing--12,.75rem)}
/* Frosted-Glass-Widgets */
.rg_widget{width:100%;max-width:16.5rem;padding:1rem 1.1rem;border-radius:.9rem;
  background:rgba(252,250,247,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 -1px 0 0 rgba(252,250,247,.4),0 12px 32px -8px rgba(22,22,22,.25);
  display:flex;flex-direction:column;gap:.5rem;color:#161616}
.rg_widget.is-center{text-align:center;align-items:center}
.rg_widget.is-wide{max-width:20rem}
.rg_widget-title{font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:rgba(22,22,22,.64)}
.rg_widget-sub{font-size:.78rem;line-height:1.45;color:rgba(22,22,22,.64)}
.rg_big{font-size:2.6rem;font-weight:700;line-height:1;color:#161616;margin:.2rem 0}
.rg_row{display:flex;justify-content:space-between;gap:.75rem;font-size:.85rem;
  padding:.45rem .6rem;border-radius:.5rem}
.rg_row b{font-weight:700}
.rg_row .is-plus,.rg_row b.is-plus{color:#EC632B}
.rg_row.is-sum{background:rgba(252,250,247,.85);box-shadow:0 1px 0 0 rgba(22,22,22,.06)}
.rg_bar-row{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;font-size:.78rem}
.rg_bar-row span{color:rgba(22,22,22,.72);white-space:nowrap}
.rg_bar-row b{font-weight:700;white-space:nowrap}
.rg_bar{height:.45rem;border-radius:99rem;background:rgba(22,22,22,.12);overflow:hidden;min-width:3rem}
.rg_bar>div{height:100%;border-radius:99rem;background:linear-gradient(90deg,#EC632B,#FBB03B)}
@media (max-width:991px){.resultat-grid_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .resultat-grid_head{flex-wrap:wrap;align-items:flex-start;margin-bottom:var(--spacing--48)}
  .resultat-grid_grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .resultat-grid_media{height:22rem}
}

/* ---------- Eigener Scroll-Reveal (Template-Optik: 50px hoch + Fade).
   Animation läuft über GSAP (klee-funnel.js) — CSS hält nur den Startzustand. ---------- */
[data-klee-reveal]{opacity:0;transform:translate3d(0,50px,0)}
@media (prefers-reduced-motion:reduce){[data-klee-reveal]{opacity:1;transform:none}}

/* ---------- Resultat: Nummern-Wechsel (eigene Logik statt IX2) ---------- */
.sticky-features_changing-numbers .label-large{display:none}
.sticky-features_changing-numbers .label-large.is-num-active{display:block}

/* Resultat-Kacheln: statisch stapeln — der Original-Sticky-Slider hängt an
   seitengebundenen IX2-Events der Home-C-Seite und funktioniert hier nicht */
.section_sticky-features .sticky-features_sticky{position:static;height:auto}
.section_sticky-features .sticky-features_tiles-wrap{display:flex;flex-direction:column;
  gap:var(--spacing--48);position:static;height:auto}
.section_sticky-features .sticky-features_tile{position:relative !important;inset:auto !important;
  opacity:1 !important;transform:none !important;width:100%}
.section_sticky-features .sticky-features_tile_grid{display:grid;
  grid-template-columns:minmax(6rem,9rem) minmax(0,1fr);gap:var(--spacing--32);align-items:center}
.section_sticky-features .stick-features_tile_image{width:100%;height:auto}
@media (max-width:600px){
  .section_sticky-features .sticky-features_tile_grid{grid-template-columns:minmax(0,1fr)}
  .section_sticky-features .stick-features_tile_image{width:5.5rem}
}

/* Footer-Marquee: großer Themen-Text statt Logos */
.footer_marquee-text{white-space:nowrap;color:var(--color-base-base-light-100);opacity:.92}

/* Slider-Menü: "other pages"-Block und Social-Icons ausblenden */
.navbar_slider_bottom_left-master{display:none !important}
.navbar_slider_socials{display:none !important}

/* ---------- Hero: Fullscreen-Hintergrundvideo + Lesbarkeits-Overlay ---------- */
.hero-home-a_wrap{position:relative;overflow:hidden;min-height:min(86vh,54rem)}
.hero_bg-video{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero_bg-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero_bg-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,11,8,.68) 0%,rgba(14,11,8,.42) 46%,rgba(14,11,8,.16) 100%),
             linear-gradient(180deg,rgba(14,11,8,.34) 0%,rgba(14,11,8,0) 26%),
             linear-gradient(0deg,rgba(14,11,8,.42) 0%,rgba(14,11,8,0) 35%)}
.hero-home-a_wrap>*:not(.hero_bg-video){position:relative;z-index:1}

/* ---------- Hero: Inhalt nach unten, CTA-Zeile + Trust-Siegel ---------- */
.hero-home-a_wrap{display:flex;flex-direction:column}
.hero-home-a_bottom{margin-top:auto}
.hero_cta-row{display:flex;align-items:stretch;gap:var(--spacing--16);flex-wrap:wrap}
.hero_cta-row>a{flex:0 0 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center}
.hero_badges{display:flex;gap:var(--spacing--24);flex-wrap:wrap;margin-top:var(--spacing--32)}
.hero_badge.is-seal{display:inline-flex;align-items:center;gap:.7rem;padding:0;border:none;background:none;
  font-family:var(--typography-font-label);font-size:var(--typography-size-label-1);
  line-height:1.45;letter-spacing:var(--typography-letter-spacing-label-1);
  text-transform:uppercase;color:var(--color-base-base-light-88)}
.hero_badge-seal{width:3.4rem;height:3.4rem;flex:0 0 auto;opacity:.95}
.cta_secondary-ghost{display:inline-flex;align-items:center;height:auto;box-sizing:border-box;
  padding:calc(var(--spacing--12) - 1px) var(--spacing--16); /* -1px gleicht den Border aus */
  font-size:var(--typography-size-button-1,1rem);line-height:var(--typography-line-height-button-1,1.2);
  border-radius:99rem;border:1px solid var(--color-base-base-light-32);
  font-family:var(--typography-font-button);font-weight:600;color:var(--color-base-base-light-100);
  text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
.cta_secondary-ghost:hover{background:var(--color-base-base-light-8);border-color:var(--color-base-base-light-48)}

/* CTA-Kachel (drei Kernbereiche): Button-Text passend zur Kachelbreite */
.features-gallery_tile.is-cta .text-button{font-size:1rem}

/* ---------- Ratgeber-Seite: Rich-Text-Typografie + CTA-Block ---------- */
.section_hero-blog .heading-style-h2{hyphens:auto}
@media (max-width:767px){
  .section_hero-blog .heading-style-h2{font-size:2.4rem;line-height:1.12}
  .blog_rich-text h2{font-size:1.75rem}
}
.blog_rich-text{font-size:var(--typography-size-b1,1.25rem);line-height:1.7;
  color:var(--color-tokens-tone-medium)}
.blog_rich-text h2{font-size:var(--typography-size-h4,2.45rem);line-height:1.15;
  font-weight:var(--typography-font-weight-h4,500);color:var(--color-tokens-tone-strong);
  margin:3rem 0 1rem}
.blog_rich-text h2:first-child{margin-top:0}
.blog_rich-text p{margin:0 0 1.1rem}
.blog_rich-text ul{margin:0 0 1.4rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.blog_rich-text li::marker{color:var(--color-base-accent-primary)}
.blog_rich-text strong{font-weight:700;color:var(--color-tokens-tone-strong)}
.blog_rich-text blockquote{margin:1.6rem 0;padding:1.2rem 1.5rem;border-left:3px solid var(--color-base-accent-primary);
  background:var(--color-tokens-background-lift-higher);border-radius:0 var(--radius-general-default,1rem) var(--radius-general-default,1rem) 0;
  font-weight:500;color:var(--color-tokens-tone-strong)}
.ratgeber_disclaimer{font-size:var(--typography-size-b3,.95rem);color:var(--color-tokens-tone-subtle);
  margin-top:2.4rem !important}
.ratgeber_cta{margin-top:var(--spacing--64,4rem);padding:var(--spacing--48,3rem);
  border-radius:var(--radius-general-large,1.5rem);background:#161616;color:#FCFAF7;
  display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.ratgeber_cta .heading-style-h4{color:#FCFAF7}
.ratgeber_cta p{margin:0;color:rgba(252,250,247,.72)}
.ratgeber_cta .btn-bg{background-color:#FCFAF7}
.ratgeber_cta .text-button{color:#161616}
@media (max-width:767px){.ratgeber_cta{padding:1.75rem}}

/* Funnel: Ratgeber-Block im Ergebnis — Überschrift + weißer Button (Typo clean, Weight 500 wie Template) */
.funnel_ratgeber-block{margin-top:1.25rem}
.funnel_ratgeber-title{font-size:.9rem;color:var(--color-base-base-light-48);margin-bottom:.6rem}
.funnel_ratgeber-btn{display:block;padding:.85rem 1.1rem;border-radius:.75rem;
  background:#FCFAF7;color:#161616;text-decoration:none;font-size:.95rem;font-weight:500;text-align:center;
  transition:opacity .2s ease}
.funnel_ratgeber-btn:hover{opacity:.85}

/* Funnel: Klee-Logo ersetzt den Ansprechpartner auf der Ergebnisseite */
.funnel_result-logo{display:block;margin:0 auto var(--spacing--16,1rem);height:2.6rem;width:auto}
/* hidden-Attribut muss auch Flex-Elemente (Person, Progress-Row) zuverlässig ausblenden */
.funnel_card [hidden]{display:none !important}

/* ---------- Ads-Landingpage (angebot.html): Topbar (nur Logo, kein Menü) ---------- */
.lp-topbar{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:center;padding:1.6rem 2.5rem}
.lp-topbar_logo{height:2.5rem;width:auto;display:block;filter:brightness(0) invert(1)}
/* Mobil: linksbündig + Logo-Variante mit orangen Strichen und weißem Text */
.lp-topbar_logo.is-white{display:none;filter:none}
@media (max-width:767px){
  .lp-topbar{padding:1.1rem 1.25rem;justify-content:flex-start}
  .lp-topbar_logo{height:2rem}
  .lp-topbar_logo.is-desktop{display:none}
  .lp-topbar_logo.is-white{display:block}
}

/* ---------- Ads-Landingpage (angebot.html): Bento-Hero ---------- */
.section_lp-hero{padding-top:9.5rem;padding-bottom:var(--spacing--80,5rem);
  background:var(--color-tokens-background-base)}
/* Label-Pill auf dem Video: heller Rahmen + helle Schrift */
.section_lp-hero.is-video .label-master{border-color:rgba(252,250,247,.3);
  background:rgba(22,22,22,.25)}
.section_lp-hero.is-video .label-small{color:#FCFAF7}
/* Ticks im Hero: orange Fläche, weißes Häkchen */
.lp-hero_bullet .pricing_card_list_item-tick-wrap{background:var(--color-base-accent-primary)}
.lp-hero_bullet .pricing_card_list_item-tick-icon{color:#FCFAF7}
/* stretch: beide Buttons exakt gleich hoch (btn2 zentriert seinen Text per Flex) */
.lp-hero_ctas{display:flex;align-items:stretch;justify-content:center;gap:.75rem;flex-wrap:wrap}
.lp-hero_btn2{display:flex;align-items:center;padding:0 1.5rem;
  border-radius:var(--radius-ui-button-base,99rem);
  border:1px solid rgba(22,22,22,.18);color:var(--color-tokens-tone-strong);
  text-decoration:none;font-size:.95rem;font-weight:500;transition:background .2s ease}
.lp-hero_btn2:hover{background:#EFEBE4}
.lp-hero_blur{filter:blur(7px);-webkit-filter:blur(7px);user-select:none;pointer-events:none}
.lp-hero_head{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.5rem;max-width:46rem;margin:0 auto 3.5rem}
.lp-hero_sub{font-size:var(--typography-size-b1,1.15rem);line-height:1.5;
  color:var(--color-tokens-tone-medium);margin:0;max-width:38rem}
/* Badge-SVGs (heller Text für den Video-Hintergrund), ohne Chip, mit viel Abstand,
   Oberkanten bündig */
.lp-hero_badges{display:flex;align-items:flex-start;gap:3.5rem;margin-top:.5rem}
.lp-hero_badges .badges-strip_img.is-staatlich{height:2.7rem}
.lp-hero_badges .badges-strip_img.is-steuerberater{height:1.5rem}
.lp-hero_bullets{display:flex;flex-direction:column;gap:.6rem;align-items:center;text-align:left}
.lp-hero_bullet{display:flex;align-items:flex-start;gap:.65rem;font-size:.98rem;
  color:var(--color-tokens-tone-medium)}
.lp-hero_bullet strong{color:var(--color-tokens-tone-strong);font-weight:600}
.lp-hero_bullet .pricing_card_list_item-tick-wrap{flex:0 0 auto;margin-top:.1rem}
.lp-hero_grid{display:grid;grid-template-columns:.7fr 1fr;gap:1rem}
.lp-hero_media{border-radius:var(--radius-general-large,1.5rem);overflow:hidden;min-height:36rem}
.lp-hero_media img{width:100%;height:100%;object-fit:cover}
.lp-hero_right{display:grid;grid-template-columns:1fr .8fr;grid-template-rows:1fr 1fr;gap:1rem}
.lp-hero_card{border-radius:var(--radius-general-large,1.5rem);overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:1.5rem}
.lp-hero_card.is-widget{background:#EFEBE4}
.lp-hero_card.is-icon{background:var(--color-base-accent-primary)}
.lp-hero_card.is-wide{grid-column:1/-1;background:#161616;padding:3rem}
.lp-hero_logomark{width:8rem;height:8rem;filter:brightness(0) invert(1)}
.lp-hero_rows{display:flex;flex-direction:column;gap:.65rem;width:100%;max-width:20rem}
.lp-hero_row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.8rem 1rem;border-radius:.75rem;background:#FCFAF7;
  border:1px solid var(--color-base-base-dark-8,#16161614);
  font-size:.9rem;color:var(--color-tokens-tone-medium)}
.lp-hero_row.is-dark{background:var(--color-base-accent-primary);color:rgba(252,250,247,.92);
  border-color:transparent}
.lp-hero_pill{padding:.25rem .6rem;border-radius:99rem;background:#EFEBE4;
  font-family:var(--typography-font-label);font-size:.75rem;letter-spacing:.03em;
  color:var(--color-tokens-tone-strong);white-space:nowrap}
.lp-hero_row.is-dark .lp-hero_pill{background:rgba(252,250,247,.16)}
.lp-hero_pill.is-accent{background:#161616;color:#FCFAF7}
.lp-hero_note{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:26rem}
.lp-hero_note-top{display:flex;flex-direction:column;gap:.9rem;padding:1.1rem;
  border-radius:.85rem;background:#FCFAF7;color:var(--color-tokens-tone-strong)}
.lp-hero_note-head{display:flex;align-items:center;gap:.65rem}
.lp-hero_note-icon{display:flex;width:1rem;height:1rem;color:var(--color-base-accent-primary)}
.lp-hero_note-label{font-family:var(--typography-font-label);font-size:.75rem;
  letter-spacing:var(--typography-letter-spacing-label-1);text-transform:uppercase;font-weight:500}
.lp-hero_note-divider{height:1px;background:var(--color-base-base-dark-8,#16161614)}
.lp-hero_note-text{margin:0;font-size:.9rem;line-height:1.5;color:var(--color-tokens-tone-medium)}
.lp-hero_note-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lp-hero_note-sender{display:flex;align-items:center;gap:.5rem;
  font-family:var(--typography-font-label);font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(252,250,247,.64)}
.lp-hero_note-btn{padding:.55rem 1rem;border-radius:.75rem;background:#FCFAF7;color:#161616;
  text-decoration:none;font-size:.85rem;font-weight:500;white-space:nowrap;transition:opacity .2s ease}
.lp-hero_note-btn:hover{opacity:.85}
@media (max-width:991px){
  .lp-hero_grid{grid-template-columns:1fr}
  .lp-hero_media{min-height:24rem}
}
@media (max-width:767px){
  .section_lp-hero{padding-top:6.5rem;padding-bottom:3rem}
  /* mobil ALLES linksbündig — auch Label, Headline und Subline */
  .lp-hero_head{gap:1.4rem;margin-bottom:2.25rem;align-items:flex-start;text-align:left}
  .lp-hero_sub{font-size:1rem;text-align:left}
  /* Bullets linksbündig an gemeinsamer Kante, Icon links in der Reihe */
  .lp-hero_bullets{gap:.8rem;align-items:flex-start;width:100%}
  .lp-hero_bullet{font-size:.9rem}
  /* beide Buttons in einer Zeile, linksbündig, mit Luft zu den Bullets */
  .lp-hero_ctas{flex-wrap:nowrap;width:100%;margin-top:.75rem;justify-content:flex-start}
  .lp-hero_ctas .button-inner{padding:.7rem .95rem}
  .lp-hero_ctas .text-button{font-size:.85rem}
  .lp-hero_btn2{padding:.68rem 1rem;font-size:.85rem;white-space:nowrap}
  .lp-hero_badges{gap:2rem}
  .lp-hero_badges .badges-strip_img.is-staatlich{height:1.9rem}
  .lp-hero_badges .badges-strip_img.is-steuerberater{height:1.05rem}
  .lp-hero_media{min-height:0;aspect-ratio:4/3}
  .lp-hero_card.is-wide{padding:1.5rem}
  /* Logomark-Karte spart mobil Scrollhöhe */
  .lp-hero_card.is-icon{display:none}
  /* alle Karten mobil auf volle Breite (sonst hält das Grid die .8fr-Spalte
     der ausgeblendeten Logomark-Karte frei) */
  .lp-hero_right{grid-template-columns:1fr;grid-template-rows:auto}
  .lp-hero_card.is-wide{grid-column:auto}
  .lp-hero_rows{max-width:none}
}
@media (max-width:479px){
  /* beide Buttons passen nebeneinander in 343px Content-Breite */
  .lp-hero_ctas{gap:.5rem}
  .lp-hero_ctas .button-inner{padding:.65rem .75rem}
  .lp-hero_ctas .text-button{font-size:.8rem}
  .lp-hero_btn2{padding:.62rem .8rem;font-size:.8rem}
}

/* ---------- LP-Hero Variante B: Hintergrund-Video (angebot-video.html) ---------- */
.section_lp-hero.is-video{position:relative;overflow:hidden}
.lp-herovid_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-herovid_shade{position:absolute;inset:0;
  /* Video v2 ist deutlich heller (Sonnen-Look) — flacher Verlauf statt 55 % Vollton,
     oben Kontrast für die weiße Headline, unten scheint die Sonne durch */
  background:linear-gradient(180deg,rgba(22,22,22,.62) 0%,rgba(22,22,22,.44) 55%,rgba(22,22,22,.28) 100%)}
.section_lp-hero.is-video .padding-global{position:relative;z-index:2}
.section_lp-hero.is-video h1,
.section_lp-hero.is-video .lp-hero_eyebrow{color:#FCFAF7}
.section_lp-hero.is-video h1 .tone-subtle{color:rgba(252,250,247,.6)}
.section_lp-hero.is-video .lp-hero_sub,
.section_lp-hero.is-video .lp-hero_bullet{color:rgba(252,250,247,.82)}
.section_lp-hero.is-video .lp-hero_bullet strong{color:#FCFAF7}
.section_lp-hero.is-video .lp-hero_btn2{border-color:rgba(252,250,247,.4);color:#FCFAF7}
.section_lp-hero.is-video .lp-hero_btn2:hover{background:rgba(252,250,247,.14)}
.section_lp-hero.is-video .lp-hero_eyebrow{color:rgba(252,250,247,.85)}

/* ---------- LP: Problem im "Ihre Vorteile"-Layout ---------- */
.section_lp-problem{padding-top:var(--spacing--112,7rem);padding-bottom:var(--spacing--112,7rem);
  background:var(--color-tokens-background-alternate,#EFEBE4)}
.lp-problem_head{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.5rem;max-width:52rem;margin:0 auto 3.5rem}
.lp-problem_intro{max-width:44rem;color:var(--color-tokens-tone-medium);
  font-size:1rem;line-height:1.6}
/* Problem-Kacheln (LP): Bild 2:1 mit gleichem Radius wie die Kachel (1rem)
   und gleichmäßigem Rand (1.25rem) rundum */
.services-horizontal_tile.is-lp-tile{padding:1.25rem 1.25rem 0}
.lp-problem_img{aspect-ratio:2/1;overflow:hidden;
  border-radius:var(--radius-general-default,1rem)}
.lp-problem_img img{width:100%;height:100%;object-fit:cover;display:block}
.services-horizontal_tile.is-lp-tile .services-horizontal_bottom{padding:1.75rem .75rem 2rem}
.services-horizontal_tile.is-lp-tile .services-horizontal_bottom>div{font-size:1rem;line-height:1.55}
.is-lp-problem .lp-problem_intro{margin-top:1.25rem}
.section_lp-problem .values-thirds_tile{background:var(--color-tokens-background-base)}
@media (max-width:767px){
  .section_lp-problem{padding-top:4rem;padding-bottom:4rem}
  .lp-problem_head{gap:1rem;margin-bottom:2rem}
}

/* ---------- LP: Lösung im "What we do"-Stil (home-a-intro), komplett zentriert ---------- */
.section_home-a-intro .home-a-intro_wrap{max-width:100%;text-align:center}
/* Mobil: Kachel 3 der Problem-Sektion braucht Luft nach unten,
   die Lösungs-Headline rückt näher an den Sektionswechsel */
@media (max-width:767px){
  body[data-klee-page="angebot"] .is-lp-problem{padding-bottom:2.5rem}
  /* das Tile-Grid bringt 5rem margin-bottom aus dem Template mit */
  body[data-klee-page="angebot"] .is-lp-problem .services-horizontal_grid{margin-bottom:3rem}
  body[data-klee-page="angebot"] .section_home-a-intro{padding-top:3.5rem;padding-bottom:3rem}
  body[data-klee-page="angebot"] .section_lp-why{padding-top:2.5rem}
}
.lp-loesung_body{max-width:44rem;margin:1.75rem auto 0;text-align:center}
.lp-loesung_checks .paket_check{justify-content:flex-start;text-align:left}
@media (max-width:767px){
  .section_home-a-intro .home-a-intro_wrap h2{font-size:2rem;line-height:1.2;
    overflow-wrap:break-word;hyphens:auto}
  /* LP-Abschluss-CTA: langer Text passt nicht in h0-Größe */
  body[data-klee-page="angebot"] .contact-center_headline .heading-style-h0{
    font-size:2.5rem;line-height:1.15;overflow-wrap:break-word}
}
.lp-loesung_body p{margin:0 0 1.25rem;font-size:1rem;
  line-height:1.6;color:var(--color-tokens-tone-medium)}
.lp-loesung_cta{margin-top:.5rem;display:flex;justify-content:center}
.lp-loesung_badge{display:flex;justify-content:center;margin-top:2.5rem}
.lp-loesung_badge img{height:3rem;width:auto}
@media (max-width:767px){
  /* "Ein Sachwert…" mobil komplett linksbündig
     (wrap ist Flex mit align-items:center aus dem Template) */
  .section_home-a-intro .home-a-intro_wrap{text-align:left;align-items:flex-start}
  .lp-loesung_body{text-align:left;margin-left:0}
  .lp-loesung_cta{justify-content:flex-start}
  .lp-loesung_badge{justify-content:flex-start;margin-top:2rem}
  .lp-loesung_badge img{height:2.1rem}
}
/* Desktop: Sektionen luftiger auseinanderziehen, Hero-Buttons mit mehr Abstand */
@media (min-width:768px){
  /* body-Scope nötig: die Basisregeln von lp-why/lp-bento stehen später in der Datei */
  body[data-klee-page="angebot"] .is-lp-problem,
  body[data-klee-page="angebot"] .section_home-a-intro,
  body[data-klee-page="angebot"] .section_lp-why,
  body[data-klee-page="angebot"] .section_lp-bento{
    padding-top:9rem;padding-bottom:9rem}
  /* Problem-Sektion: Template-Grid-Margin fraß unten zusätzlich Raum */
  body[data-klee-page="angebot"] .is-lp-problem{padding-bottom:5rem}
  .is-lp-problem .services-horizontal_grid{margin-bottom:0}
  .lp-hero_ctas{margin-top:1.25rem}
  .lp-hero_badges{margin-top:1.5rem}
}
.lp-loesung_checks{display:flex;flex-direction:column;gap:.75rem}
.home-a-intro_images-grid.is-lp{grid-template-columns:1fr 1fr;gap:1rem}
.home-a-intro_images-grid.is-lp .home-a-intro_image-left,
.home-a-intro_images-grid.is-lp .home-a-intro_image-right{
  border-radius:var(--radius-general-large,1.5rem);overflow:hidden;height:30rem}
.home-a-intro_images-grid.is-lp img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){
  .home-a-intro_images-grid.is-lp{grid-template-columns:1fr}
  .home-a-intro_images-grid.is-lp .home-a-intro_image-left,
  .home-a-intro_images-grid.is-lp .home-a-intro_image-right{height:16rem}
}

/* ---------- LP: "Warum gerade jetzt" — alternierende Split-Rows ---------- */
.section_lp-why{padding-top:var(--spacing--112,7rem);padding-bottom:var(--spacing--112,7rem);
  background:var(--color-tokens-background-base)}
.lp-why_head{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.5rem;max-width:48rem;margin:0 auto 4rem}
.lp-why_rows{display:flex;flex-direction:column;gap:6rem}
.lp-why_row{display:flex;align-items:center;gap:4rem}
.lp-why_row.is-reverse{flex-direction:row-reverse}
.lp-why_media{position:relative;flex:1 1 50%;border-radius:var(--radius-general-large,1.5rem);
  overflow:hidden;height:34rem}
.lp-why_media img{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;will-change:transform}
.lp-why_overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:.4rem;
  height:55%;padding:0 0 1.5rem 1.5rem;
  background:linear-gradient(0deg,rgba(22,22,22,.66),transparent)}
.lp-why_ol-item{display:flex;align-items:center;gap:.65rem;
  font-family:var(--typography-font-label);font-size:.75rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:#FCFAF7}
.lp-why_ol-icon{display:flex;width:.75rem;height:.75rem;color:var(--color-base-accent-primary)}
.lp-why_content{flex:1 1 50%;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;
  max-width:29rem}
.lp-why_content .text-size-large{color:var(--color-tokens-tone-medium);font-size:1rem;line-height:1.6}
@media (max-width:991px){
  .lp-why_row{gap:2.5rem}
  .lp-why_media{height:26rem}
}
@media (max-width:767px){
  .section_lp-why{padding-top:4rem;padding-bottom:4rem}
  .lp-why_rows{gap:3.5rem}
  .lp-why_row,.lp-why_row.is-reverse{flex-direction:column;align-items:stretch;gap:1.5rem}
  /* im Column-Flex gewinnt flex-basis über height -> explizit zurücksetzen */
  .lp-why_media{flex:0 0 auto;height:16rem}
  .lp-why_content{flex:0 0 auto;max-width:none}
}

/* ---------- LP: "Was Sie erhalten" — Bento-Grid ---------- */
.section_lp-bento{padding-top:var(--spacing--112,7rem);padding-bottom:var(--spacing--112,7rem);
  background:var(--color-tokens-background-base)}
.lp-bento_head{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1.5rem;max-width:48rem;margin:0 auto 3.5rem}
.lp-bento_intro{max-width:44rem;color:var(--color-tokens-tone-medium);font-size:1rem;line-height:1.6}
/* 3 Reihen à gleicher Höhe: 2-2-2 / 2-2-2 / 3-3 — Grid streckt Karten pro Reihe automatisch */
.lp-bento_grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-bottom:3rem}
.lp-bento_card{border-radius:var(--radius-general-large,1.5rem);overflow:hidden;position:relative;
  grid-column:span 2;min-height:17rem}
.lp-bento_card.is-feature{background:#EFEBE4;padding:2rem;display:flex;flex-direction:column;
  align-items:flex-start;gap:1rem;justify-content:space-between}
.lp-bento_copy{display:flex;flex-direction:column;gap:.5rem}
.lp-bento_icon{width:3.25rem;height:3.25rem;border-radius:.85rem;background:var(--color-base-accent-primary);
  color:#FCFAF7;display:flex;align-items:center;justify-content:center;padding:.85rem}
.lp-bento_icon .label_icon{width:100%;height:100%}
.lp-bento_icon svg{width:100%;height:100%;display:block}
/* Titel 39px, Weight 400 (Karim 14.08.) */
.lp-bento_title{font-family:var(--typography-font-heading-sans);font-size:2.44rem;line-height:1.15;
  font-weight:400;color:var(--color-tokens-tone-strong)}
.lp-bento_text{margin:0;font-size:1rem;line-height:1.55;color:var(--color-tokens-tone-medium)}
.lp-bento_card.is-image img,.lp-bento_card.is-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-bento_card.is-dark{background:#161616;padding:2rem;display:flex;flex-direction:column;
  justify-content:space-between;gap:2rem}
.lp-bento_card.is-dark .lp-bento_title{color:rgba(252,250,247,.92)}
.lp-bento_dark-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.lp-bento_avatar{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;object-position:50% 28%;flex:0 0 auto}
.lp-bento_pill{padding:.55rem 1.1rem;border-radius:99rem;border:1px solid rgba(252,250,247,.16);
  background:rgba(252,250,247,.08);color:rgba(252,250,247,.88);font-size:.85rem}
.lp-bento_card.is-stat{background:var(--color-base-accent-primary);color:#FCFAF7;
  padding:1.75rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem}
.lp-bento_stat{font-family:var(--typography-font-heading-sans);font-size:3.4rem;line-height:1;font-weight:500}
.lp-bento_stat-label{font-family:var(--typography-font-label);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(252,250,247,.8)}
.lp-bento_card.is-wide,.lp-bento_card.is-half{grid-column:span 3}
.lp-bento_card.is-overlay{grid-column:span 2}
.lp-bento_overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.25rem}
.lp-bento_overlay.is-bottom{align-items:flex-end;justify-content:flex-start;padding:1rem}
.lp-bento_overlay-pill{padding:.9rem 1.4rem;border-radius:99rem;background:rgba(22,22,22,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#FCFAF7;font-size:.85rem;
  text-align:center;max-width:18rem}
.lp-bento_overlay.is-bottom .lp-bento_overlay-pill{padding:.65rem 1.1rem;font-size:.8rem;
  text-align:left;max-width:none;border-radius:1rem}
/* Text prominent AUF dem Bild: Verlauf unten + Titel/Subzeile */
.lp-bento_imgoverlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;gap:.3rem;padding:1.5rem;
  /* z-index:2 nötig — .image_cover bringt z-index:1 mit und übermalt sonst den Text */
  background:linear-gradient(0deg,rgba(22,22,22,.78),rgba(22,22,22,.28) 55%,transparent)}
.lp-bento_imgtitle{font-family:var(--typography-font-heading-sans);font-size:2.44rem;
  line-height:1.15;font-weight:400;color:#FCFAF7}
.lp-bento_imgsub{font-size:1rem;line-height:1.45;color:rgba(252,250,247,.82)}
.lp-bento_bottom{display:flex;flex-direction:column;gap:1.5rem}
.lp-bento_divider{height:1px;background:var(--color-base-base-dark-8,#16161614)}
.lp-bento_bottom-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.lp-bento_bottom-left{display:flex;align-items:center;gap:1rem}
.lp-bento_bottom-title{font-weight:500;color:var(--color-tokens-tone-strong)}
.lp-bento_bottom-sub{font-size:.9rem;color:var(--color-tokens-tone-medium)}
@media (max-width:991px){
  .lp-bento_grid{grid-template-columns:repeat(2,1fr)}
  .lp-bento_card,.lp-bento_card.is-wide,.lp-bento_card.is-half{grid-column:span 2}
  .lp-bento_card.is-stat{grid-column:span 1;min-height:12rem}
  .lp-bento_card.is-overlay{grid-column:span 1;min-height:12rem}
}
@media (max-width:767px){
  .section_lp-bento{padding-top:4rem;padding-bottom:4rem}
  .lp-bento_head{gap:1rem;margin-bottom:2rem}
  /* Karten-Deck: Karten pinnen oben, jede etwas tiefer als die vorige —
     die oberen Kanten der vorherigen Karten bleiben als Stapel sichtbar.
     Kein sticky-Kopf mehr (ankerte die Sektion fest und riss Whitespace auf). */
  .lp-bento_grid{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
  .lp-bento_card,.lp-bento_card.is-stat,.lp-bento_card.is-overlay{
    position:sticky;top:4rem;width:100%;height:20rem;min-height:0}
  .lp-bento_card:nth-child(2){top:4.75rem}
  .lp-bento_card:nth-child(3){top:5.5rem}
  .lp-bento_card:nth-child(4){top:6.25rem}
  .lp-bento_card:nth-child(5){top:7rem}
  .lp-bento_card:nth-child(6){top:7.75rem}
  .lp-bento_card:nth-child(7){top:8.5rem}
  .lp-bento_card:nth-child(8){top:9.25rem}
  .lp-bento_card.is-feature,.lp-bento_card.is-dark{padding:1.4rem}
  /* feste 20rem-Kartenhöhe: Titel kleiner als die 39px vom Desktop */
  .lp-bento_title,.lp-bento_imgtitle{font-size:2rem}
  .lp-bento_stat{font-size:2.8rem}
  .lp-bento_overlay.is-bottom .lp-bento_overlay-pill{font-size:.75rem;padding:.6rem .9rem}
}

/* ---------- LP: Resultat-Intro ---------- */
.lp-resultat_intro{margin-top:1rem;color:var(--color-tokens-tone-medium)}
/* Loch zwischen Resultat und Rechenbeispielen schließen */
body[data-klee-page="angebot"] .section_resultat-grid{padding-bottom:4rem}
body[data-klee-page="angebot"] .section_combo-tabs{padding-top:3rem}
@media (max-width:767px){
  body[data-klee-page="angebot"] .section_resultat-grid{padding-bottom:2.5rem}
  body[data-klee-page="angebot"] .section_combo-tabs{padding-top:2rem}
}

/* ---------- LP: Video-CTA (Abschluss) ---------- */
.section_lp-videocta{position:relative;overflow:hidden;display:flex;min-height:44rem}
.lp-videocta_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-videocta_shade{position:absolute;inset:0;background:rgba(22,22,22,.45)}
.lp-videocta_pad{position:relative;z-index:2;width:100%;display:flex}
.lp-videocta_inner{display:flex;flex-direction:column;justify-content:space-between;gap:4rem;
  padding:6rem 0;min-height:44rem}
.lp-videocta_head{display:flex;flex-direction:column;gap:1.5rem;max-width:54rem}
.lp-videocta_label{font-family:var(--typography-font-label);font-size:var(--typography-size-label-1);
  letter-spacing:var(--typography-letter-spacing-label-1);text-transform:uppercase;font-weight:500;
  color:var(--color-base-accent-primary)}
.lp-videocta_h{color:#FCFAF7}
.lp-videocta_text{color:rgba(252,250,247,.8);max-width:36rem}
.lp-videocta_bottom{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.lp-videocta_btn{padding:1rem 1.75rem;border-radius:99rem;
  background:#FCFAF7;color:#161616;
  text-decoration:none;font-size:1rem;font-weight:500;transition:opacity .2s ease}
.lp-videocta_btn:hover{opacity:.85}
.lp-videocta_trust{font-family:var(--typography-font-label);font-size:.72rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(252,250,247,.64)}
@media (max-width:767px){
  .section_lp-videocta,.lp-videocta_inner{min-height:34rem}
  .lp-videocta_inner{padding:4rem 0;gap:3rem}
}
/* Vollflächiger Übergang Video-CTA -> Footer: die abgerundete helle Fläche entfällt */
body[data-klee-page="angebot"] .footer_top-flow{display:none}
/* Footer: statt Headline+CTA (Video-CTA steht direkt darüber) nur das Logo */
.lp-footer_logo{height:2.6rem;width:auto;display:block}
body[data-klee-page="angebot"] .footer_flex-top{margin-bottom:5rem}
@media (max-width:767px){
  .lp-footer_logo{height:2.2rem}
  /* alles linksbündig untereinander: Logo zuoberst, dann die Spalten in voller
     Breite mit Trennlinien */
  body[data-klee-page="angebot"] .footer_flex-top{display:flex;flex-direction:column;
    align-items:flex-start;gap:2.5rem;margin-bottom:3.5rem}
  body[data-klee-page="angebot"] .footer_links-grid{display:flex;flex-direction:column;
    width:100%;grid-row-gap:0;gap:0}
  body[data-klee-page="angebot"] .footer_links-column{width:100%;text-align:left;
    border-top:1px solid rgba(252,250,247,.18);padding-top:1.75rem;padding-bottom:1.75rem}
  body[data-klee-page="angebot"] .footer_links-column:last-child{padding-bottom:.5rem}
}

/* ---------- LP: Rechenbeispiele — Zahlen prominenter, Disclaimer-Kachel dezent ---------- */
body[data-klee-page="angebot"] .combo-tabs_stat-single .text-size-large{
  font-size:1.9rem;line-height:1.15;font-weight:500}
body[data-klee-page="angebot"] .combo-tabs_stat-single .tone-subtle{font-size:.85rem}
body[data-klee-page="angebot"] .combo-tabs_image-tile{width:auto;max-width:15rem;
  padding:.55rem .75rem;grid-column-gap:.5rem;grid-row-gap:.5rem}
body[data-klee-page="angebot"] .combo-tabs_image-tile .combo-tabs_brand-icon{display:none}
body[data-klee-page="angebot"] .combo-tabs_image-tile .text-size-small{font-size:.68rem;line-height:1.4}
@media (max-width:767px){
  body[data-klee-page="angebot"] .combo-tabs_stat-single .text-size-large{font-size:1.25rem}
}

/* ---------- LP: Standort/Map — weniger Weißraum, CTA unter dem Text ---------- */
body[data-klee-page="angebot"] .map_headline{margin-bottom:3rem}
body[data-klee-page="angebot"] .map_body-text{margin-top:3rem}
.lp-map_cta{margin-top:2rem;display:flex;justify-content:center}
@media (max-width:767px){
  body[data-klee-page="angebot"] .map_headline{margin-bottom:2rem}
  body[data-klee-page="angebot"] .map_body-text{margin-top:2rem}
  .lp-map_cta{margin-top:1.5rem}
}

/* ---------- Ads-Landingpage (angebot.html): neue Sektionen ---------- */
.section_lp-trust,.section_lp-calc,.section_lp-steps{
  padding-top:var(--spacing--112,7rem);padding-bottom:var(--spacing--112,7rem);
  background:var(--color-tokens-background-base)}
.lp-trust_head,.lp-steps_head{display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  text-align:center;margin-bottom:3rem}
.paket_checklist.is-lp-trust{max-width:34rem;margin:0 auto}
.section_lp-calc .container-medium{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:1.25rem}
.lp-calc_text{max-width:34rem}
.lp-steps_grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.lp-step_tile{display:flex;flex-direction:column;gap:.75rem;padding:2rem;
  background:var(--color-base-base-dark-4,#16161608);border-radius:var(--radius-general-large,1.5rem)}
.lp-step_num{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--color-base-accent-primary);color:#FCFAF7;font-weight:500;font-size:1.1rem}
@media (max-width:767px){
  .section_lp-trust,.section_lp-calc,.section_lp-steps{padding-top:4rem;padding-bottom:4rem}
  .lp-trust_head,.lp-steps_head{margin-bottom:2rem}
  .lp-steps_grid{grid-template-columns:1fr;gap:1rem}
}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.section_legal{padding-top:10rem;padding-bottom:6rem;background:var(--color-tokens-background-base)}
.section_legal .container-medium{max-width:46rem}
.section_legal .label-master{margin-bottom:1.5rem}
.legal_h1{margin:0 0 2.25rem}
.legal_content h3{font-family:var(--typography-font-heading-sans);font-size:1.3rem;line-height:1.3;
  font-weight:500;color:var(--color-tokens-tone-strong);margin:2rem 0 .75rem}
.legal_content h4{font-size:1.02rem;font-weight:500;color:var(--color-tokens-tone-strong);margin:1.5rem 0 .5rem}
.legal_content a{color:var(--color-base-accent-primary);text-decoration:underline;word-break:break-word}
@media (max-width:767px){.section_legal{padding-top:8rem;padding-bottom:4rem}
  .legal_h1{font-size:2.4rem}}

/* ---------- Rechner-Sektion (Template-Rhythmus & -Variablen) ---------- */
.section_rechner{padding-top:var(--spacing--160,10rem);padding-bottom:var(--spacing--160,10rem);
  background:var(--color-tokens-background-base)}
.rechner_grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--spacing--24);
  margin-top:var(--spacing--64);align-items:start}
.rechner_grid>*{min-width:0}
.rechner_card{background:var(--color-base-lift-light);border-radius:var(--radius-general-large,1.5rem);
  padding:var(--spacing--32);display:flex;flex-direction:column;gap:var(--spacing--32)}
.rechner_card.is-dark{background:var(--color-base-base-dark-100);color:var(--color-base-base-light-64);
  position:sticky;top:var(--spacing--24);
  /* Button-Tokens im Dark-Scope umsetzen (wie hero-home-a_wrap im Template) */
  --color-tokens-button-primary-default-background:var(--color-base-base-light-100);
  --color-tokens-button-primary-default-border:var(--color-base-base-dark-0);
  --color-tokens-button-primary-default-text:var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-background:var(--color-base-base-light-88);
  --color-tokens-button-primary-hover-text:var(--color-base-base-dark-100)}
.rechner_label{font-family:var(--typography-font-label);font-size:var(--typography-size-label-1);
  letter-spacing:var(--typography-letter-spacing-label-1);text-transform:uppercase;font-weight:600}
.rechner_field{display:flex;flex-direction:column;gap:.5rem}
.rechner_field-label{font-size:var(--typography-size-b3);font-weight:500;color:var(--color-tokens-tone-strong)}
.is-dark .rechner_field-label{color:var(--color-base-base-light-88)}
.rechner_slider-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.rechner_slider-value{font-family:var(--typography-font-heading-sans);font-size:1.75rem;font-weight:600;
  letter-spacing:-.02rem;color:var(--color-base-accent-primary)}
.section_rechner input[type=range]{width:100%;accent-color:var(--color-base-accent-primary);height:6px;cursor:pointer}
.rechner_radio{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;padding:.9rem 1rem;
  border:1px solid var(--color-base-base-dark-16);border-radius:var(--radius-ui-input,.5rem);
  background:var(--color-tokens-background-base);transition:border-color .2s ease,background-color .2s ease}
.rechner_radio:hover{border-color:var(--color-base-accent-primary)}
.rechner_radio.is-active{border-color:var(--color-base-accent-primary);background:#FDF1EA}
.rechner_radio input{accent-color:var(--color-base-accent-primary);margin-top:.2rem}
.rechner_radio-title{font-size:var(--typography-size-b3);font-weight:600;color:var(--color-tokens-tone-strong)}
.rechner_radio-desc{font-size:.8rem;color:var(--color-tokens-tone-subtle)}
.rechner_input,.rechner_select{width:100%;height:2.75rem;padding:0 1rem;
  font-family:var(--typography-font-body);font-size:var(--typography-size-b3);
  color:var(--color-tokens-tone-strong);background:var(--color-tokens-background-base);
  border:1px solid var(--color-base-base-dark-16);border-radius:var(--radius-ui-input,.5rem);
  outline:none;appearance:none;-webkit-appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease}
.is-dark .rechner_input{background:var(--color-base-base-light-8);border-color:var(--color-base-base-light-16);
  color:var(--color-base-base-light-100)}
.is-dark .rechner_input::placeholder{color:var(--color-base-base-light-48)}
.rechner_input:focus,.rechner_select:focus{border-color:var(--color-base-accent-primary);
  box-shadow:0 0 0 3px #EC632B47}
.rechner_hint{font-size:.8rem;color:var(--color-tokens-tone-subtle)}
.is-dark .rechner_hint{color:var(--color-base-base-light-48)}
.rechner_field.is-error .rechner_input{border-color:var(--color-base-ui-error)}
.rechner_field.is-error .rechner_hint{color:var(--color-base-ui-error)}
.rechner_result-value{font-family:var(--typography-font-heading-sans);font-size:var(--typography-size-h3);
  line-height:var(--typography-line-height-h3);letter-spacing:var(--typography-letter-spacing-h3);
  font-weight:600;color:var(--color-base-base-light-100);margin:.75rem 0 .25rem}
.rechner_rows{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.rechner_row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--color-base-base-light-16)}
.rechner_row span:first-child{font-size:.85rem;color:var(--color-base-base-light-48)}
.rechner_row span:last-child{font-size:.95rem;font-weight:500;color:var(--color-base-base-light-100)}
.rechner_form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.rechner_form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rechner_form-grid>*{min-width:0}
.rechner_note{font-size:.8rem;color:var(--color-base-base-light-48);text-align:center}
/* Submit als Template-Button (cta_primary) — volle Breite, Formular-tauglich */
button.rechner_submit-cta{width:100%;border:none;background:none;padding:0;cursor:pointer;
  display:inline-flex;justify-content:center;font-family:var(--typography-font-button)}
button.rechner_submit-cta .button-inner{width:100%;justify-content:center}
.rechner_disq{display:none;background:var(--color-base-lift-light);border-radius:var(--radius-general-large,1.5rem);
  padding:var(--spacing--32)}
.rechner_grid.is-disq .rechner_disq{display:block}
.rechner_grid.is-disq .rechner_qual{display:none}
.rechner_disclaimer{display:flex;gap:.75rem;align-items:flex-start;margin-top:var(--spacing--16);
  padding:1rem;background:var(--color-base-lift-light);border-radius:var(--radius-ui-input,.5rem);
  font-size:.8rem;line-height:1.5;color:var(--color-tokens-tone-subtle)}

@media (max-width:900px){
  .rechner_grid{grid-template-columns:minmax(0,1fr)}
  .rechner_card.is-dark{position:static}
  .rechner_form-grid{grid-template-columns:minmax(0,1fr)}
  .hero_cta-row a{width:100%;justify-content:center}
}

/* ---------- PV-Paket Kachel 1: Motion-Grafik-Loop (mit Rand, ≈ Überschriftbreite) ---------- */
.pvfeld_video-wrap{overflow:hidden;border-radius:var(--radius-general-large,1.5rem);
  width:calc(100% - 3.5rem) !important;height:auto !important;aspect-ratio:1/1;
  margin:1.75rem auto 0;transform:translateZ(0)}
.pvfeld_video-wrap video{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit}

/* ---------- PV-Paket: 8-Punkte-Checkliste ---------- */
.paket_checklist{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing--16) var(--spacing--32);
  margin-top:var(--spacing--64)}
.paket_check{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--typography-size-b2);
  color:var(--color-tokens-tone-strong)}
.paket_check .pricing_card_list_item-tick-wrap{flex:0 0 auto}
@media (max-width:767px){.paket_checklist{grid-template-columns:minmax(0,1fr)}}

/* ---------- Main-Areas: 4. Kachel = CTA auf Marken-Gradient ---------- */
.features-gallery_tile.is-cta{background:linear-gradient(90deg,#EC632B,#FBB03B);color:#161616;
  --color-tokens-button-primary-default-background:#161616;
  --color-tokens-button-primary-default-border:#16161600;
  --color-tokens-button-primary-default-text:#FCFAF7;
  --color-tokens-button-primary-hover-background:#2E2C29;
  --color-tokens-button-primary-hover-text:#FCFAF7}
.features-gallery_tile.is-cta .heading-style-h4{color:#161616}
.features-gallery_tile.is-cta .text-size-large{color:rgba(22,22,22,.78)}
.features-gallery_tile.is-cta .cta_primary{margin-top:2rem}

/* ---------- Rechenbeispiele: Avatare rund statt oval ---------- */
.section_pricing .pricing_client{width:52px;height:52px;border-radius:50%}

/* ---------- Standort-Sektion: Deutschland-Karte schmaler, Pins rund & südlich ---------- */
.section_map-services .map_wrap{max-width:40rem}
.section_map-services .map_person-wrap{width:auto}
.section_map-services .map_person_video{width:5.5rem !important;height:5.5rem !important;
  border-radius:50% !important;border:3px solid var(--color-tokens-background-base)}
/* 6 Standorte in Süddeutschland ≈ Freiburg/Stuttgart/München/Regensburg/Nürnberg/Allgäu */
.section_map-services .map_person-wrap.is-two{inset:72% auto auto 16%;top:72%}
.section_map-services .map_person-wrap.is-one{inset:62% auto auto 28%;top:62%}
.section_map-services .map_person-wrap.is-three{inset:80% auto auto 55%;top:80%}
.section_map-services .map_person-wrap.is-four{inset:60% auto auto 66%;top:60%}
.section_map-services .map_person-wrap.is-six{inset:auto 40% 28% auto}
.section_map-services .map_person-wrap.is-five{inset:auto auto 12% 36%;top:auto}
/* Rotation: JS blendet abwechselnd 3 von 6 Pins ein (klee-funnel.js).
   !important nötig — die IX2-Runtime setzt beim Einscrollen Inline-Opacity. */
.section_map-services .map_person-wrap{display:flex !important;
  transition:opacity .7s ease;pointer-events:none}
.section_map-services .map_person-wrap:not(.is-pin-on){opacity:0 !important}
.section_map-services .map_person-wrap.is-pin-on{opacity:1 !important}
@media (max-width:600px){
  .section_map-services .map_person_video{width:4rem !important;height:4rem !important}
}
/* Kanten-Fades des Welt-Templates passen nicht zur schmalen Deutschland-Karte */
.section_map-services .map_shadow{display:none}

/* ---------- FAQ: Spalten enger zusammenrücken; CTA mobil UNTER die Fragen ---------- */
.faq_cta-wrap{margin-top:var(--spacing--32)}
.faq_cta-wrap.is-mobile{display:none}
@media (min-width:768px){
  .faq-page_grid{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
    grid-column-gap:var(--spacing--48,3rem)}
}
@media (max-width:767px){
  .faq_cta-wrap.is-desktop{display:none}
  .faq_cta-wrap.is-mobile{display:block}
}

/* ---------- Footer mobil: Link-Spalten stapeln statt überlaufen ---------- */
@media (max-width:767px){
  .footer_links-grid{display:flex;flex-direction:column;grid-row-gap:var(--spacing--32);gap:var(--spacing--32)}
  .footer_links-column{padding-left:0;border-left:none}
}

/* ---------- Finaler CTA: Klee-Logomark braucht feste Höhe (SVG ohne width/height) ---------- */
.contact-center_logo{height:4rem !important;width:auto !important}

/* ---------- Popup-Funnel (Leadscape-Stil) ---------- */
.funnel_overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;background:rgba(12,10,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.funnel_overlay[hidden]{display:none}
.funnel_card{position:relative;width:100%;max-width:34rem;max-height:calc(100dvh - 2.5rem);overflow-y:auto;
  background:var(--color-base-base-dark-100);color:var(--color-base-base-light-64);
  border:1px solid var(--color-base-base-light-8);border-radius:var(--radius-general-large,1.5rem);
  padding:var(--spacing--32);display:flex;flex-direction:column;gap:var(--spacing--16);
  /* Button-Tokens im Dark-Scope (heller Template-CTA auf dunkler Karte) */
  --color-tokens-button-primary-default-background:var(--color-base-base-light-100);
  --color-tokens-button-primary-default-border:var(--color-base-base-dark-0);
  --color-tokens-button-primary-default-text:var(--color-base-base-dark-100);
  --color-tokens-button-primary-hover-background:var(--color-base-base-light-88);
  --color-tokens-button-primary-hover-text:var(--color-base-base-dark-100)}
.funnel_close{position:absolute;top:1rem;right:1rem;width:2.25rem;height:2.25rem;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--color-base-base-light-16);
  border-radius:99rem;background:none;color:var(--color-base-base-light-64);cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.funnel_close:hover{color:var(--color-base-base-light-100);border-color:var(--color-base-base-light-48)}
.funnel_person{display:flex;gap:.9rem;align-items:center;padding-bottom:var(--spacing--16);
  border-bottom:1px solid var(--color-base-base-light-8)}
.funnel_person-photo{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;object-position:50% 28%;flex:0 0 auto;
  border:2px solid var(--color-base-base-light-16)}
.funnel_person-name{font-size:var(--typography-size-b2);color:var(--color-base-base-light-100)}
.funnel_person-name strong{font-weight:600}
.funnel_person-status{display:flex;align-items:center;gap:.4rem;font-size:.8rem;
  color:var(--color-base-base-light-48);margin-top:.15rem}
.funnel_dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-base-ui-success);flex:0 0 auto}
.funnel_progress-row{display:flex;justify-content:space-between;align-items:center}
.funnel_step-chip{padding:.3rem .75rem;border-radius:99rem;background:var(--color-base-base-light-8);
  font-size:.8rem;font-weight:500;color:var(--color-base-base-light-88)}
.funnel_time{font-size:.85rem;color:var(--color-base-base-light-48)}
.funnel_bar{height:.35rem;border-radius:99rem;background:var(--color-base-base-light-8);overflow:hidden}
.funnel_bar-fill{height:100%;width:25%;border-radius:99rem;
  background:linear-gradient(90deg,#EC632B,#FBB03B);transition:width .35s ease}
.funnel_question{font-family:var(--typography-font-heading-sans);font-size:1.35rem;line-height:1.3;
  font-weight:500;color:var(--color-base-base-light-100);margin:0 0 var(--spacing--16)}
.funnel_options{display:flex;flex-direction:column;gap:.65rem}
.funnel_option{display:flex;flex-direction:column;gap:.15rem;text-align:left;width:100%;
  padding:1rem 1.15rem;border:1px solid var(--color-base-base-light-16);
  border-radius:var(--radius-general-large,1.5rem);background:var(--color-base-base-light-4);
  font-family:var(--typography-font-body);font-size:var(--typography-size-b2);font-weight:500;
  color:var(--color-base-base-light-100);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease,transform .15s ease}
.funnel_option span{font-size:.8rem;font-weight:400;color:var(--color-base-base-light-48)}
.funnel_option:hover{border-color:var(--color-base-accent-primary);background:var(--color-base-base-light-8);
  transform:translateY(-1px)}
.funnel_back{align-self:flex-start;border:none;background:none;padding:0;cursor:pointer;
  font-family:var(--typography-font-body);font-size:.85rem;color:var(--color-base-base-light-48)}
.funnel_back:hover{color:var(--color-base-base-light-88)}
.funnel_trust{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center;
  padding-top:var(--spacing--16);border-top:1px solid var(--color-base-base-light-8);
  font-size:.8rem;color:var(--color-base-base-light-48)}
.funnel_result-value{font-family:var(--typography-font-heading-sans);font-size:2.25rem;line-height:1.15;
  font-weight:500;color:var(--color-base-base-light-100);margin:.5rem 0}
.funnel_result-label{display:inline-block;font-family:var(--typography-font-label);font-size:var(--typography-size-label-1);
  letter-spacing:var(--typography-letter-spacing-label-1);text-transform:uppercase;font-weight:500;color:#FBB03B}
/* Mobil: schwebende Karte statt Fullscreen — die Seite bleibt ringsum sichtbar */
@media (max-width:600px){
  .funnel_overlay{padding:1rem}
  .funnel_card{max-width:100%;max-height:calc(100dvh - 2rem)}
}

/* 5-Sekunden-Auswertungssequenz */
.funnel_loading{display:flex;flex-direction:column;align-items:center;gap:1.2rem;
  padding:2.6rem 0 2.2rem;text-align:center}
.funnel_spinner{width:2.6rem;height:2.6rem;border-radius:50%;
  border:3px solid rgba(252,250,247,.18);border-top-color:#EC632B;
  animation:funnelspin .9s linear infinite}
@keyframes funnelspin{to{transform:rotate(360deg)}}
.funnel_loading-text{color:var(--color-base-base-light-88);font-size:var(--typography-size-b2)}

/* Mobile-Overflow-Fixes (Export lässt rem-Breiten ungedeckelt) */
@media (max-width:767px){
  .container-navbar{max-width:100%}
  .combo-tabs_grid{grid-template-columns:minmax(0,1fr) !important}
  .combo-tabs_grid>*{min-width:0}
  .combo-tabs_tile{width:100%;max-width:100%}
  .combo-tabs_menu{max-width:100%}
  .heading-center,.limit-6col{max-width:100%}
}

/* ---------- Mobile-Feinschliff (13.08.): kleinere Navbar, kompaktes Menü, Abstände ---------- */
@media (max-width:767px){
  /* Navbar: Logo kleiner, Padding schmaler; Hero-Abstand darauf abgestimmt (17.6px oben = unten) */
  .navbar_brand-image{height:2.6rem !important}
  .padding-navbar{padding-top:1.1rem;padding-bottom:1.1rem}
  .section_hero-home-a{padding-top:2.7rem !important}
  /* Slider-Menü kompakt: Spalten-Überschriften weg, engere Abstände — nichts wird mehr abgeschnitten */
  .navbar_slider{padding-top:5.5rem;padding-bottom:1.5rem;max-height:85vh;overflow:auto}
  .navbar_slider_links-master>.heading-style-h5{display:none}
  .navbar_slider_links-master{padding-bottom:1rem}
  .navbar_slider_grid{grid-row-gap:1rem}
  .navbar_slider_video-wrap{height:15rem}
  /* Resultat: mehr Luft zwischen Bild und Titel */
  .resultat-grid_card{gap:1.5rem}
  /* Vorteile → drei Kernbereiche: engerer Übergang */
  .section_features-home-a{padding-bottom:0}
  /* Lösung → Values-Kacheln: weniger Weißraum zwischen Bild-Collage und Blöcken */
  .section_combo-home-c{padding-bottom:0}
  .section_values-thirds{padding-top:1.5rem}
}

/* ============================================================
   Consent-Layer (js/klee-consent.js) — dunkle Karte wie der Funnel,
   unten links (Desktop) / Bottom-Sheet (Mobile). Ein-/Ausblenden über
   .is-in / .is-out, Toggle-Switches für die Einstellungen.
   ============================================================ */
.klee-consent{position:fixed;left:1rem;right:auto;bottom:1rem;z-index:10000;width:min(26rem,calc(100vw - 2rem));
  opacity:0;transform:translate3d(0,1.25rem,0);pointer-events:none;
  transition:opacity .45s cubic-bezier(.22,.61,.36,1),transform .45s cubic-bezier(.22,.61,.36,1)}
.klee-consent.is-in{opacity:1;transform:translate3d(0,0,0);pointer-events:auto}
.klee-consent.is-out{opacity:0;transform:translate3d(0,1.25rem,0);pointer-events:none}
.klee-consent_card{background:var(--color-base-base-dark-100,#161616);color:var(--color-base-base-light-64);
  border:1px solid var(--color-base-base-light-8);border-radius:var(--radius-general-large,1.5rem);
  box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.35);padding:1.5rem;display:flex;flex-direction:column;gap:.85rem;
  font-family:var(--typography-font-body);max-height:calc(100dvh - 2rem);overflow-y:auto}
.klee-consent_pill{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem .3rem .55rem;border-radius:99rem;background:rgba(252,250,247,.1);
  font-family:var(--typography-font-label);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-base-base-light-88)}
.klee-consent_plus{color:var(--color-base-accent-primary);font-size:1rem;line-height:1;font-weight:400}
.klee-consent_title{font-family:var(--typography-font-heading-sans);font-size:1.35rem;line-height:1.2;
  color:var(--color-base-base-light-100);font-weight:500}
.klee-consent_text{margin:0;font-size:.9rem;line-height:1.5}
.klee-consent_text a{color:var(--color-base-base-light-100);text-decoration:underline;text-underline-offset:.15em}
.klee-consent_options{display:flex;flex-direction:column;gap:.5rem;margin-top:.15rem}
.klee-consent_options[hidden]{display:none}
.klee-consent_opt{display:flex;align-items:center;gap:.9rem;padding:.8rem .95rem;cursor:pointer;margin:0;
  font-weight:400;color:var(--color-base-base-light-64);
  border:1px solid var(--color-base-base-light-16);border-radius:1rem;background:var(--color-base-base-light-4)}
.klee-consent_btn.is-full{width:100%;margin-top:.15rem}
.klee-consent_opt-text{display:flex;flex-direction:column;gap:.15rem;flex:1 1 auto;font-size:.8rem;line-height:1.4}
.klee-consent_opt-text strong{font-weight:500;color:var(--color-base-base-light-100);font-size:.9rem}
.klee-consent_opt input{position:absolute;opacity:0;width:0;height:0}
.klee-consent_switch{flex:0 0 auto;width:2.5rem;height:1.45rem;border-radius:99rem;position:relative;
  background:var(--color-base-base-light-16);transition:background .25s}
.klee-consent_switch::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--color-base-base-light-100);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.klee-consent_opt input:checked + .klee-consent_switch{background:var(--color-base-accent-primary)}
.klee-consent_opt input:checked + .klee-consent_switch::after{transform:translateX(1.05rem)}
.klee-consent_opt input:disabled + .klee-consent_switch{opacity:.55}
.klee-consent_opt input:focus-visible + .klee-consent_switch{outline:2px solid var(--color-base-accent-primary);outline-offset:2px}
.klee-consent_actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.25rem}
.klee-consent_btn{appearance:none;cursor:pointer;min-height:2.9rem;padding:.7rem 1rem;border-radius:99rem;
  font-family:var(--typography-font-button);font-size:.95rem;font-weight:500;line-height:1.2;
  transition:background .2s,color .2s,border-color .2s,transform .2s}
.klee-consent_btn.is-primary{background:var(--color-base-base-light-100);color:var(--color-base-base-dark-100,#161616);
  border:1px solid var(--color-base-base-light-100)}
.klee-consent_btn.is-primary:hover{background:var(--color-base-accent-primary);border-color:var(--color-base-accent-primary);color:#FCFAF7}
.klee-consent_btn.is-secondary{background:transparent;color:var(--color-base-base-light-100);
  border:1px solid var(--color-base-base-light-48)}
.klee-consent_btn.is-secondary:hover{border-color:var(--color-base-base-light-100);background:var(--color-base-base-light-8)}
.klee-consent_btn:focus-visible{outline:2px solid var(--color-base-accent-primary);outline-offset:2px}
.klee-consent_foot{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.klee-consent_link{appearance:none;background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--typography-font-body);font-size:.8rem;color:var(--color-base-base-light-48);
  text-decoration:underline;text-underline-offset:.15em}
.klee-consent_link:hover{color:var(--color-base-base-light-100)}
.klee-consent_link[hidden]{display:none}
@media (max-width:767px){
  .klee-consent{left:.6rem;right:.6rem;bottom:.6rem;width:auto}
  .klee-consent_card{padding:1.25rem;border-radius:1.25rem}
  .klee-consent_actions{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.klee-consent{transition:none}}