/* ============================================================
   1. DESIGN-TOKENS  (aus Konzept v2)
   ============================================================ */
:root{
  --ink:        #10233B;   /* Text, Header */
  --ink-soft:   #45566C;   /* Sekundärtext */
  --surface:    #FFFFFF;
  --surface-2:  #F2F6F9;   /* Eisblau-Ton */
  --line:       #DCE5EC;
  --accent:     #0E7C86;   /* Petrol — CTAs, Links (Kälte-Pol) */
  --accent-ink: #0A5A61;
  --warm:       #C96F4A;   /* Gedämpftes Terrakotta — Wärme-Pol der Marke */
  --green:  #2E7D5B;
  --amber:  #9A7B18;
  --red:    #A94442;
  --grey:   #6B7A8C;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,35,59,.06), 0 8px 24px rgba(16,35,59,.07);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{font-family:var(--font);color:var(--ink);background:var(--surface);font-size:17px;line-height:1.6}

h1,h2,h3{line-height:1.15;font-weight:650;letter-spacing:-.015em}
h1{font-size:clamp(1.9rem,5.5vw,3rem)}
h2{font-size:clamp(1.4rem,4vw,1.9rem);margin-bottom:.5rem}
h3{font-size:1.1rem}
p{color:var(--ink-soft)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:.78rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";display:inline-block;width:28px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--warm),var(--accent));margin-right:9px;vertical-align:middle}
section{padding:56px 0}
.section-alt{background:var(--surface-2)}
/* Dezenter Warm→Kalt-Faden als Sektionstrenner (Identitätsmotiv, durchgezogen) */
.thread{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--accent) 20%,#7FA9AE 50%,var(--warm) 80%,transparent);opacity:.35}

/* ============================================================
   2. HEADER
   ============================================================ */
header{position:fixed;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) 42%,var(--warm) 58%,var(--warm) 100%);opacity:.5}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:800;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:22px;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--ink-soft)}
@media(max-width:640px){ .nav-links{display:none} }

/* ============================================================
   3. HERO + FINDER
   ============================================================ */
.hero{padding:52px 0 64px;background:linear-gradient(180deg,var(--surface-2) 0%,var(--surface) 100%)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:860px){ .hero-grid{grid-template-columns:1fr} }
.hero h1{margin:.6rem 0 1rem}
.hero .lead{font-size:1.1rem;max-width:44ch}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:1.6rem;font-size:.86rem;color:var(--ink-soft)}
.trust-row li{list-style:none;display:flex;align-items:center;gap:7px}
.trust-row li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* Finder-Karte */
.finder{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:22px;position:relative}

/* Modus-Umschalter: Geführt / Frei erkunden */
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:5px;margin-bottom:18px}

/* Start-Menü: klar beschriftete Wege (Türen) */
.start-intro{font-size:.92rem;color:var(--ink-soft);margin-bottom:14px}
.doors{display:grid;gap:10px}
.door{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;position:relative;padding-left:56px;text-decoration:none;color:inherit;font:inherit}
.door:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.door-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;line-height:1}
.door-title{font-size:1.05rem;font-weight:700;color:var(--ink)}
.door-sub{font-size:.86rem;color:var(--ink-soft)}
.door-primary{position:relative}
.door-primary .door-title{padding-right:104px}
.door-badge{position:absolute;top:12px;right:14px;font-size:.68rem;font-weight:700;letter-spacing:.02em;color:var(--accent-ink);background:var(--accent-tint);padding:3px 9px;border-radius:999px;white-space:nowrap}
.quick-jump{margin:12px 2px 0;font-size:.86rem;color:var(--ink-soft)}
.bridge{max-width:640px;margin:28px auto;padding:0 20px;text-align:center;font-size:.94rem;font-style:italic;color:var(--ink-soft);line-height:1.5}
.quick-jump a{font-weight:650}
.hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;flex:0 0 auto}
.hamburger span,.hamburger span::before,.hamburger span::after{content:"";display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .15s,opacity .15s}
.hamburger span::before{position:absolute;top:-6px}
.hamburger span::after{position:absolute;top:6px}
.hamburger[aria-expanded="true"] span{background:transparent}
.hamburger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:640px){
  .hamburger{display:flex}
  .map-toggle{display:none!important}
  .page-map{position:fixed;left:0;right:0;top:58px;bottom:auto;max-height:calc(100vh - 70px);border-radius:0 0 16px 16px;transform:translateY(-8px)}
  .page-map-list{grid-template-columns:1fr}
}
.mode-tab{min-height:46px;font:inherit;font-size:.95rem;font-weight:650;color:var(--ink-soft);background:transparent;border:none;border-radius:7px;cursor:pointer;transition:background .15s,color .15s}
.mode-tab small{display:block;font-size:.72rem;font-weight:500;letter-spacing:.02em}
.mode-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(16,35,59,.12)}

/* Freier Modus: Filter */
.filters{display:grid;gap:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:8px 15px;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:99px;cursor:pointer;transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{border-color:var(--accent);background:#E8F3F4;color:var(--accent-ink)}
.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:420px){ .filter-row{grid-template-columns:1fr} }
.f-label{display:flex;justify-content:space-between;font-size:.86rem;font-weight:600;margin-bottom:4px}
.f-label output{color:var(--accent-ink)}
.sort-select{width:100%;min-height:44px;padding:8px 12px;font:inherit;font-size:.9rem;border:1.5px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface)}
.free-count{font-size:.9rem;font-weight:650;color:var(--ink);margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.free-count span{color:var(--grey);font-weight:500}
.free-empty{border-left:4px solid var(--grey);background:#EFF3F6;color:#3d4a59;border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin-top:12px;font-size:.94rem}
.free-results .pcard{margin-top:12px}
.finder-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.finder-step-label{font-size:.78rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.finder-back{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);color:var(--accent-ink);font:inherit;font-size:.84rem;font-weight:650;cursor:pointer;padding:6px 12px;border-radius:99px;transition:background .15s}
.finder-back:hover{background:#E8F3F4}
.finder-back[hidden]{display:none}
.progress{height:4px;background:var(--line);border-radius:2px;margin:10px 0 18px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .3s ease}
.finder h3{font-size:1.25rem;margin-bottom:14px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 46px 12px 16px;font:inherit;font-size:1rem;font-weight:500;text-align:left;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;position:relative;transition:border-color .15s,background .15s,box-shadow .15s}
.opt:hover{border-color:var(--accent)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:#E8F3F4;box-shadow:inset 0 0 0 1px var(--accent);font-weight:650}
.opt[aria-pressed="true"]::after{content:"\2713";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:50%;font-size:.85rem;font-weight:800}
.opt small{display:block;font-weight:400;color:var(--ink-soft);font-size:.84rem}
.opts-2{grid-template-columns:1fr 1fr}
@media(max-width:420px){ .opts-2{grid-template-columns:1fr} }
.step-sub{font-size:.86rem;color:var(--ink-soft);margin:-4px 0 12px}

/* Fixer Führungs-Balken: Zurück + Weiter, immer an derselben Stelle */
.finder-nav{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:18px}
.fbtn{min-height:52px;font:inherit;font-size:1rem;font-weight:650;border-radius:var(--radius);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.fbtn-back{padding:0 18px;color:var(--accent-ink);background:var(--surface-2);border:1.5px solid var(--line)}
.fbtn-back:hover{background:#E8F3F4;border-color:var(--accent)}
.fbtn-next{color:#fff;background:var(--accent);border:1.5px solid var(--accent)}
.fbtn-next:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.fbtn-next:disabled{background:var(--line);border-color:var(--line);color:var(--grey);cursor:not-allowed}
.kanton-picker{margin:18px 0 4px}
.kanton-picker label{display:block;font-size:.9rem;font-weight:650;margin-bottom:6px;color:var(--ink)}
.kanton-picker select{width:100%;min-height:50px;padding:10px 14px;font:inherit;font-size:1rem;border:1.5px solid var(--accent);border-radius:var(--radius);background:var(--surface);cursor:pointer}

/* Stepper (m²) */
.stepper{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.stepper button{width:48px;height:48px;font-size:1.5rem;font-weight:650;color:var(--accent);background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer}
.stepper output{font-size:1.6rem;font-weight:650;min-width:110px;text-align:center}
.stepper output small{font-size:.9rem;font-weight:500;color:var(--ink-soft)}

.finder-next{width:100%;min-height:54px;margin-top:14px;font:inherit;font-size:1.02rem;font-weight:650;color:#fff;background:var(--accent);border:none;border-radius:var(--radius);cursor:pointer;transition:background .15s}
.finder-next:hover{background:var(--accent-ink)}
.finder-hint{font-size:.84rem;color:var(--grey);margin-top:12px}
.mode-switch-hint{font-size:.88rem;color:var(--ink-soft);margin-bottom:16px}
.linklike{font:inherit;font-size:inherit;font-weight:650;color:var(--accent);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linklike:hover{color:var(--accent-ink)}

/* Situationsprofil — das Signatur-Element: baut sich beim Beantworten auf */
.profil{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px;min-height:34px}
.profil span{font-size:.78rem;font-weight:600;color:var(--accent-ink);background:#E8F3F4;border:1px solid #CBE4E6;border-radius:99px;padding:3px 11px}
.profil .kw{color:#fff;background:var(--ink);border-color:var(--ink)}

/* ============================================================
   4. ERGEBNIS
   ============================================================ */
.result{display:none}
.result.show{display:block}
.result-band{display:flex;align-items:center;gap:10px;font-weight:650;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:var(--radius);margin-bottom:16px;color:#fff}
.band-gruen{background:var(--green)} .band-gelb{background:var(--amber)}
.band-rot{background:var(--red)}     .band-grau{background:var(--grey)}
.result h3{font-size:1.35rem;margin-bottom:8px}
.kw-box{display:flex;gap:18px;align-items:baseline;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:16px 0}
.kw-box strong{font-size:1.7rem;letter-spacing:-.02em}
.kw-box span{font-size:.88rem;color:var(--ink-soft)}
.result-hinweis{border-left:4px solid var(--amber);background:#FBF6E7;border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin:16px 0;font-size:.94rem;color:#5c4d13}
.result-hinweis.rot{border-color:var(--red);background:#F9EEEE;color:#6e2f2e}
.result-hinweis.grau{border-color:var(--grey);background:#EFF3F6;color:#3d4a59}
.restart{background:none;border:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;margin-top:14px;padding:4px}
.restart-inline{margin-top:0;font-size:.82rem}
.restart:hover,.restart:focus-visible{text-decoration:underline;color:var(--accent-ink)}

/* Produktkarten */
.cards{display:grid;gap:16px;margin-top:16px}
.pcard{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--surface)}
.pcard-top{display:flex;gap:14px;align-items:flex-start}
.picon{flex:none;width:52px;height:52px;color:var(--ink-soft);background:var(--surface-2);border-radius:10px;padding:9px}
.pcard-head{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;align-items:baseline}
.pcard-head h4{font-size:1.05rem;font-weight:650}
.pdetails{border:none;background:var(--surface-2);border-radius:8px;padding:10px 14px;margin-top:10px}
.pdetails summary{font-size:.86rem;font-weight:650;color:var(--accent-ink)}
.pdetails summary::after{font-size:1rem}
.pdetails div{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px;font-size:.86rem;color:var(--ink-soft);margin-top:8px}
.ptype{font-size:.76rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
.pfit{margin:10px 0 4px;font-size:.92rem;font-weight:600;color:var(--green)}
.pfit.warn{color:var(--amber)}
.pwarum{font-size:.88rem;color:var(--ink-soft);background:var(--surface-2);border-radius:8px;padding:8px 12px;margin:8px 0}
.pwarum::before{content:"Warum: ";font-weight:650;color:var(--accent-ink)}
.pspecs{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:.9rem;color:var(--ink-soft);margin:8px 0}
.pscore{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-soft)}
.dots{letter-spacing:2px;color:var(--accent);font-size:.8rem}
.pprice{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.pprice strong{font-size:1.15rem}
.plink{font-weight:650;font-size:.94rem;color:#fff;background:var(--accent);padding:10px 16px;border-radius:8px}
.plink:hover{background:var(--accent-ink);text-decoration:none}
.aff-note{font-size:.76rem;color:var(--grey);margin-top:8px}

/* Händlervergleich / Produktwege */
.product-disclosure{border:1px solid #E6D7C8;background:#FFF8F2;border-radius:var(--radius);padding:14px 16px;margin:18px 0;color:#5A3A1E;font-size:.92rem}
.product-disclosure strong{color:#3F2814}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.product-guide-card{display:flex;flex-direction:column;min-height:100%}
.product-guide-card .pcard-head{margin-bottom:6px}
.product-meta{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.product-meta span{font-size:.76rem;font-weight:650;color:var(--accent-ink);background:#E8F3F4;border:1px solid #CBE4E6;border-radius:999px;padding:4px 9px}
.price-range{font-size:.95rem;color:var(--ink);background:var(--surface-2);border-radius:8px;padding:9px 11px;margin:10px 0}
.price-range strong{font-size:1.05rem}
.offer-list{border-top:1px solid var(--line);margin-top:auto;padding-top:10px;display:grid;gap:8px}
.offer-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:.88rem}
.offer-row strong{color:var(--ink)}
.offer-row small{display:block;color:var(--grey);font-size:.76rem;line-height:1.3}
.offer-status{white-space:nowrap;font-size:.76rem;font-weight:650;border-radius:999px;padding:4px 9px;background:#EFF3F6;color:var(--grey);border:1px solid var(--line)}
.offer-status.ready{background:#EAF4EF;color:#1e5540;border-color:#C9E4D7}
.offer-status.soon{background:#FFF7D9;color:#6f570d;border-color:#EAD780}
.product-note{font-size:.84rem;color:var(--ink-soft);margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
@media(max-width:900px){.product-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.product-grid{grid-template-columns:1fr}}

/* ============================================================
   PRODUCT TAXONOMY v0.92 — aktive Kühlung getrennt von Zubehör
   ============================================================ */
.logic-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 20px}
.logic-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 16px;box-shadow:0 1px 2px rgba(16,35,59,.04)}
.logic-box strong{display:block;color:var(--ink);font-size:.94rem;margin-bottom:4px}
.logic-box p{font-size:.86rem;line-height:1.45;margin:0;color:var(--ink-soft)}
.logic-box.cool{border-top:3px solid var(--accent)}
.logic-box.warm{border-top:3px solid var(--warm)}
.logic-box.neutral{border-top:3px solid var(--grey)}
.product-section-label{display:inline-flex;align-items:center;gap:8px;margin:24px 0 10px;font-size:.78rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.product-section-label::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.product-guide-card[data-kind="comfort"] .ptype{color:var(--warm)}
.product-guide-card[data-kind="accessory"] .ptype{color:var(--accent-ink)}
.product-guide-card[data-kind="active"] .ptype{color:var(--ink)}
.product-guide-card[data-kind="control"] .ptype{color:var(--green)}
.fit-rule{font-size:.82rem;line-height:1.45;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:9px;margin-top:10px}
.fit-rule strong{color:var(--ink)}
@media(max-width:760px){.logic-strip{grid-template-columns:1fr}.product-section-label{margin-top:18px}}

/* UX-Politur */
.opt:active,.chip:active{transform:scale(.985)}
.result.show{animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pdetails summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pdetails summary::-webkit-details-marker{display:none}
.pdetails summary::after{content:"Anzeigen";font-size:.78rem;font-weight:600;color:var(--grey)}
.pdetails[open] summary::after{content:"Ausblenden"}
@media (prefers-reduced-motion:reduce){ .result.show{animation:none} .opt:active,.chip:active{transform:none} }

/* ============================================================
   5. INHALTS-SEKTIONEN
   ============================================================ */
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media(max-width:760px){ .wege{grid-template-columns:1fr} }
.weg{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--surface)}
.weg h3{margin:.4rem 0 .5rem}
.weg p{font-size:.95rem}
.weg .tag{font-size:.76rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* Rechner */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
@media(max-width:860px){ .tools{grid-template-columns:1fr} }
.tool{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--surface);box-shadow:var(--shadow)}
.tool h3{margin-bottom:16px}
.field{margin-bottom:16px}
.field label{display:flex;justify-content:space-between;font-size:.9rem;font-weight:600;margin-bottom:6px}
.field label output{color:var(--accent-ink)}
input[type=range]{width:100%;accent-color:var(--accent);height:32px}
.field input[type=number], .lead-form input, .lead-form select, .lead-form textarea{width:100%;min-height:48px;padding:10px 14px;font:inherit;border:1.5px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface)}
.tool-result{background:var(--surface-2);border-radius:var(--radius);padding:16px 18px;margin-top:8px}
.tool-result strong{font-size:1.5rem;letter-spacing:-.02em}
.tool-result div{font-size:.9rem;color:var(--ink-soft)}

/* Lead-Formular */
.lead-form{max-width:560px;margin-top:24px}
.lead-form .field label{justify-content:flex-start;gap:4px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);margin:16px 0}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;opacity:0}  /* Honeypot */
.form-ok{display:none;border-left:4px solid var(--green);background:#EAF4EF;color:#1e5540;border-radius:0 var(--radius) var(--radius) 0;padding:16px 18px;margin-top:16px}
.form-err{display:none;color:var(--red);font-size:.9rem;margin-top:10px;font-weight:600}

/* FAQ */
details{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;background:var(--surface)}
summary{font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::after{content:"+";color:var(--accent);font-size:1.3rem;font-weight:500;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:10px;font-size:.95rem}

/* Fachbetriebe-Verzeichnis */
.plz-search{display:flex;gap:10px;max-width:420px;margin:20px 0 6px}
.plz-search input{flex:1;min-height:52px;padding:10px 16px;font:inherit;font-size:1.05rem;border:1.5px solid var(--line);border-radius:var(--radius)}
.plz-search button{min-height:52px;padding:0 22px;font:inherit;font-weight:650;color:#fff;background:var(--accent);border:none;border-radius:var(--radius);cursor:pointer}
.plz-search button:hover{background:var(--accent-ink)}
.partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:18px}
.partner{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.partner.premium{border:1.5px solid var(--accent);box-shadow:var(--shadow)}
.pbadge{align-self:flex-start;font-size:.72rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:#E8F3F4;border-radius:99px;padding:3px 10px}
.partner h4{font-size:1.05rem}
.partner .pregion{font-size:.86rem;color:var(--grey);font-weight:600}
.partner .pleist{font-size:.92rem;color:var(--ink-soft);flex:1}
.partner a.pkontakt{font-weight:650;font-size:.92rem}
.partner.slot{border-style:dashed;border-color:#B7C6D2;background:var(--surface-2);align-items:flex-start;justify-content:center}
.partner.slot h4{color:var(--ink-soft)}
.partner.slot .plink{margin-top:6px}
.partner-empty{border-left:4px solid var(--grey);background:#EFF3F6;color:#3d4a59;border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;margin-top:18px;font-size:.94rem}

/* Dezente B2B-Werbefläche */
.adslot{display:flex;align-items:center;gap:14px;margin-top:22px;padding:14px 18px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);font-size:.9rem}
.adslot-tag{flex:none;font-size:.68rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line);border-radius:4px;padding:2px 7px}
.adslot p{margin:0;color:var(--ink-soft)}
@media(max-width:520px){ .adslot{flex-direction:column;align-items:flex-start;gap:8px} }

/* Kanton-Bewilligung */
.kanton-picker{margin:22px 0 6px;max-width:400px}
.kanton-picker label{display:block;font-size:.9rem;font-weight:650;margin-bottom:8px;color:var(--ink)}
.kanton-picker select{width:100%;min-height:54px;padding:12px 16px;font:inherit;font-size:1.05rem;font-weight:500;color:var(--ink);background:var(--surface);border:2px solid var(--accent);border-radius:var(--radius);cursor:pointer;box-shadow:var(--shadow);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230E7C86' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.kanton-info{margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.kanton-info-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.kanton-info-head h3{font-size:1.2rem}
.kanton-ampel{font-size:.74rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:4px 10px;border-radius:99px}
.ka-streng{background:var(--red)} .ka-mittel{background:var(--amber)} .ka-locker{background:var(--green)}
.kanton-info-body{padding:16px 18px;display:grid;gap:14px}
.ki-row{display:grid;grid-template-columns:130px 1fr;gap:12px;font-size:.94rem}
@media(max-width:520px){ .ki-row{grid-template-columns:1fr;gap:2px} }
.ki-row dt{font-weight:650;color:var(--ink)}
.ki-row dd{color:var(--ink-soft)}
.kanton-hinweis{margin-top:16px;border-left:4px solid var(--grey);background:#EFF3F6;color:#3d4a59;border-radius:0 var(--radius) var(--radius) 0;padding:14px 16px;font-size:.92rem}
.kanton-quelle{font-size:.8rem;color:var(--grey);margin-top:4px}

/* Kontakt / Feedback */
.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;max-width:640px}
@media(max-width:560px){ .feedback-grid{grid-template-columns:1fr} }
.feedback-card{display:flex;flex-direction:column;gap:4px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);text-decoration:none;transition:border-color .15s,transform .15s}
.feedback-card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.fb-icon{font-size:1.4rem;line-height:1;color:var(--accent)}
.feedback-card strong{color:var(--ink);font-size:1.02rem}
.feedback-card small{color:var(--ink-soft);font-size:.86rem}
.feedback-note{font-size:.86rem;color:var(--grey);margin-top:14px;max-width:60ch}

/* Toast (Hinweis für noch nicht aktive Händlerlinks) */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;font-size:.9rem;font-weight:500;padding:12px 20px;border-radius:99px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:99;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Rechtliches */
#rechtliches details{scroll-margin-top:80px}
#rechtliches p+p{margin-top:8px}

/* Hero-Signatur: Isothermen (Wetterkarten-Motiv) */
.hero{position:relative;overflow:hidden}
.hero .iso{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}

/* Footer */
footer{background:var(--ink);color:#B9C6D6;padding:44px 0;font-size:.88rem}
footer .wrap{display:grid;gap:20px}
footer a{color:#DCE7F2}
footer .foot-links{display:flex;flex-wrap:wrap;gap:18px}
.offenlegung{border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:14px 16px;font-size:.84rem;line-height:1.55}

/* ============================================================
   7. SEITENKARTE / MINI-MAP  (Orientierung ohne Scroll-Frust)
   ============================================================ */
section, footer, #finder{scroll-margin-top:82px}
.map-toggle{display:none!important}
.map-toggle svg{width:18px;height:18px;stroke:currentColor}
.map-backdrop{display:none;position:fixed;inset:0;z-index:55;background:rgba(16,35,59,.24);backdrop-filter:blur(2px)}
.map-backdrop.open{display:block}
.page-map{position:fixed;left:16px;right:16px;bottom:76px;z-index:60;max-height:min(72vh,540px);overflow:auto;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:var(--shadow);transform:translateY(14px);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.page-map.open{opacity:1;transform:translateY(0);pointer-events:auto}
.page-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.page-map-title{display:grid;gap:2px}
.page-map-title strong{font-size:.96rem;letter-spacing:-.01em;color:var(--ink)}
.page-map-title small{font-size:.78rem;color:var(--grey);line-height:1.35}
.page-map-close{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);width:34px;height:34px;border-radius:999px;font:inherit;font-weight:650;cursor:pointer;line-height:1}
.page-map-progress{height:4px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:12px}
.page-map-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--warm));border-radius:999px;transition:width .12s linear}
.page-map-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.page-map a{position:relative;display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;min-height:42px;padding:8px 10px;border:1px solid transparent;border-radius:10px;color:var(--ink-soft);font-size:.88rem;font-weight:650;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.page-map a::before{content:"";width:9px;height:9px;border-radius:50%;background:#C7D3DD;box-shadow:0 0 0 4px var(--surface-2)}
.page-map a:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.page-map a.active{background:#E8F3F4;border-color:#CBE4E6;color:var(--accent-ink)}
.page-map a.active::before{background:var(--accent);box-shadow:0 0 0 5px #D7ECEE}
.page-map a small{display:block;color:var(--grey);font-weight:500;font-size:.74rem;line-height:1.25;margin-top:1px}
@media(max-width:520px){
  .page-map{left:12px;right:12px;bottom:74px;padding:14px}
  .page-map-list{grid-template-columns:1fr}
}

/* ============================================================
   8. MOBILE OVERFLOW HOTFIX v0.91
   Verhindert seitliches Wegscrollen auf iOS/Android.
   Ursache: einzelne fixed/grid/card-Elemente koennen die Layoutbreite
   minimal ueber 100vw ziehen. Deshalb: harte X-Sperre + mobile Clamps.
   ============================================================ */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  position:relative;
}
img, svg, video, canvas{
  max-width:100%;
}
.wrap, .hero-grid, .finder, .mode-tabs, .opts, .opt, .pcard, .product-grid, .product-card, .tool, .partner-grid, .partner, .lead-form, .plz-search, .kanton-picker, .feedback-grid, .page-map{
  min-width:0;
  max-width:100%;
}
.opt, .mode-tab, .finder-next, .plz-search button, .lead-form button{
  overflow-wrap:anywhere;
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{width:100%;padding-left:16px;padding-right:16px}
  .hero{padding-top:34px;padding-bottom:46px}
  .hero-grid{gap:26px}
  .hero .lead{font-size:1.02rem;line-height:1.58}
  .trust-row{display:grid;gap:8px;margin-top:1.3rem}
  .finder{padding:16px;border-radius:14px}
  .mode-tabs{gap:4px;padding:4px}
  .mode-tab{font-size:.9rem;line-height:1.25;padding:8px 6px}
  .mode-tab small{font-size:.7rem}
  .stepper{flex-wrap:wrap}
  .stepper output{min-width:88px}
  .map-toggle{
    right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    max-width:calc(100vw - 24px);
    min-height:44px;
    padding:0 14px;
    white-space:nowrap;
  }
  .page-map{
    left:12px;
    right:12px;
    max-width:calc(100vw - 24px);
    width:auto;
  }
}

/* ============================================================
   BRAND ASSETS PREVIEW v0.94 — header logo test only
   ============================================================ */
.brand-logo-v094{display:block;width:min(274px,58vw);height:auto;max-height:48px}
.logo-v094-link{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none}
.logo-v094-link:hover{text-decoration:none}
@media(max-width:640px){.brand-logo-v094{width:min(238px,68vw);max-height:42px}.nav{gap:12px}}

/* ============================================================
   OVERVIEW BUTTON BRAND GLYPH v0.95
   Ersetzt das generische Hamburger-Icon durch ein kleines KlimaFinder-
   Airflow-Zeichen: Mini-Auslass + laminare Wellen. Nur Preview.
   ============================================================ */
.map-toggle{gap:10px}
.map-toggle .overview-glyph{width:32px;height:23px;flex:0 0 auto;display:block;overflow:visible}
.map-toggle .overview-glyph .vent-shell{fill:rgba(255,255,255,.10);stroke:rgba(255,255,255,.86);stroke-width:1.55}
.map-toggle .overview-glyph .vent-line{stroke:rgba(255,255,255,.88);stroke-width:1.45;stroke-linecap:round}
.map-toggle .overview-glyph .air-line{stroke:url(#overviewAirGradient);stroke-width:1.45;stroke-linecap:round;fill:none;opacity:.92}
.map-toggle:hover .overview-glyph .air-line{opacity:1}
@media(max-width:560px){
  .map-toggle{padding:0 13px 0 11px;gap:8px}
  .map-toggle .overview-glyph{width:30px;height:22px}
}
@media(prefers-reduced-motion:no-preference){
  .map-toggle .overview-glyph .air-line{animation:overviewAirPulse 4.8s ease-in-out infinite}
  .map-toggle .overview-glyph .air-line:nth-of-type(6){animation-delay:.18s}
  .map-toggle .overview-glyph .air-line:nth-of-type(7){animation-delay:.36s}
  @keyframes overviewAirPulse{
    0%,100%{transform:translateX(0);opacity:.78}
    50%{transform:translateX(1.4px);opacity:1}
  }
}

/* ============================================================
   MOBILE HEADER BALANCE v0.96
   Ziel: Das neue Logo oben auf Mobile groesser, ruhiger und voller
   wirken lassen, ohne die Live-Seite oder die Finder-Logik zu ändern.
   ============================================================ */
@media(max-width:640px){
  header{
    background:
      radial-gradient(circle at 22% 18%, rgba(14,124,134,.055), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.985), rgba(255,255,255,.94));
  }
  .nav{
    height:82px;
    justify-content:center;
    padding-top:4px;
    padding-bottom:4px;
  }
  .wrap.nav{
    max-width:none;
    width:100%;
    padding-left:16px;
    padding-right:16px;
  }
  .logo-v094-link{
    width:100%;
    justify-content:flex-start;
    position:relative;
    overflow:hidden;
  }
  .logo-v094-link::after{
    content:"";
    position:absolute;
    left:min(232px,62vw);
    right:-22px;
    top:22px;
    height:28px;
    pointer-events:none;
    opacity:.32;
    background:
      linear-gradient(90deg, rgba(14,124,134,.34), rgba(201,111,74,.26), transparent 88%);
    -webkit-mask:
      radial-gradient(24px 10px at 0 8px, #000 44%, transparent 48%),
      repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 9px);
            mask:
      radial-gradient(24px 10px at 0 8px, #000 44%, transparent 48%),
      repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 9px);
  }
  .brand-logo-v094{
    width:min(346px,90vw);
    max-width:100%;
    max-height:64px;
    filter:drop-shadow(0 8px 14px rgba(16,35,59,.075));
  }
  header::after{
    height:3px;
    opacity:.62;
  }
  .hero{
    padding:24px 0 32px;
  }
  .hero-grid{gap:20px}
}
@media(max-width:380px){
  .nav{height:78px}
  .wrap.nav{padding-left:14px;padding-right:14px}
  .brand-logo-v094{width:min(326px,91vw);max-height:60px}
  .logo-v094-link::after{left:min(214px,61vw);top:21px;height:26px}
}

/* ============================================================
   MOBILE/JARGON POLISH v0.97
   Kleine Qualitätskorrekturen:
   - PLZ-Button auf Mobile nicht mehr senkrecht gequetscht
   - Übersicht-Button etwas kompakter, damit er weniger Inhalt verdeckt
   - Rechtliches/FAQ verständlicher, weniger technischer Nutztext
   ============================================================ */
@media(max-width:640px){
  .plz-search{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    max-width:100%;
  }
  .plz-search button{
    width:100%;
    min-height:52px;
    padding:0 18px;
    white-space:nowrap;
  }
  .map-toggle{
    min-height:42px;
    padding:0 12px 0 10px;
    font-size:.86rem;
    gap:7px;
    box-shadow:0 10px 26px rgba(16,35,59,.22);
  }
  .map-toggle .overview-glyph{
    width:28px;
    height:20px;
  }
  footer{
    padding-bottom:calc(110px + env(safe-area-inset-bottom));
  }
  #rechtliches{
    padding-bottom:38px;
  }
}
@media(max-width:380px){
  .map-toggle{
    font-size:.82rem;
    padding:0 10px 0 9px;
  }
  .map-toggle .overview-glyph{
    width:25px;
    height:19px;
  }
}

/* ============================================================
   SLIM FIXED HEADER v0.99g
   Korrektur zu v0.99c:
   - voller Crop, das "r" in KlimaFinder bleibt sichtbar
   - kompaktere Header-Höhe
   - Header bleibt fixed/fixiert oben
   - Logo-Klick führt weiter zu #top
   - sauberer weisser Header ohne Screenshot-Randflächen
   ============================================================ */
header{
  position:fixed!important;
  top:0!important;
  z-index:1000!important;
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
header .wrap.nav{
  min-height:72px;
  height:auto;
  padding-top:7px;
  padding-bottom:7px;
  overflow:visible;
}
.logo-v094-link{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  overflow:visible;
  text-decoration:none;
}
.logo-v094-link::after{
  display:none!important;
  content:none!important;
}
.brand-logo-v094{
  display:block;
  width:min(350px,40vw);
  max-width:100%;
  height:auto!important;
  max-height:none!important;
  object-fit:contain;
}
@media(max-width:860px){
  header .wrap.nav{
    justify-content:center;
    min-height:78px;
    padding:8px 14px 9px;
  }
  .logo-v094-link{
    width:100%;
    margin:0 auto;
  }
  .brand-logo-v094{
    width:min(330px,calc(100vw - 34px));
  }
}
@media(max-width:380px){
  header .wrap.nav{
    min-height:74px;
    padding-left:12px;
    padding-right:12px;
  }
  .brand-logo-v094{
    width:min(310px,calc(100vw - 30px));
  }
}

/* ============================================================
   SLIM FIXED HEADER v0.99g
   Feinschliff nach Mobile-Test:
   - Header bleibt oben fixed/fixiert
   - Höhe leicht reduziert
   - Logo leicht kleiner
   - genug Lesbarkeit bleibt erhalten
   ============================================================ */
header{
  position:fixed!important;
  top:0!important;
  z-index:1000!important;
}
header .wrap.nav{
  min-height:64px!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
}
.brand-logo-v094{
  width:min(324px,38vw)!important;
}
@media(max-width:860px){
  header .wrap.nav{
    min-height:68px!important;
    padding:6px 14px 7px!important;
  }
  .brand-logo-v094{
    width:min(306px,calc(100vw - 38px))!important;
  }
}
@media(max-width:380px){
  header .wrap.nav{
    min-height:66px!important;
    padding-top:5px!important;
    padding-bottom:6px!important;
  }
  .brand-logo-v094{
    width:min(292px,calc(100vw - 34px))!important;
  }
}

/* ============================================================
   SLIM FIXED HEADER v0.99g
   Korrektur: position:sticky war auf Mobile/Browser nicht zuverlässig.
   Jetzt echter fixed Header:
   - bleibt beim Scrollen sichtbar an der oberen Viewport-Kante
   - nimmt etwas weniger Höhe ein
   - Body bekommt Ausgleichsabstand, damit der Hero nicht darunter rutscht
   ============================================================ */
html{
  scroll-padding-top:82px!important;
}
body{
  padding-top:74px!important;
}
header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:2147483000!important;
  transform:translateZ(0);
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
header .wrap.nav{
  min-height:64px!important;
  height:auto!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
}
.brand-logo-v094{
  width:min(324px,38vw)!important;
}
@media(max-width:860px){
  html{
    scroll-padding-top:80px!important;
  }
  body{
    padding-top:76px!important;
  }
  header .wrap.nav{
    min-height:68px!important;
    padding:6px 14px 7px!important;
  }
  .brand-logo-v094{
    width:min(306px,calc(100vw - 38px))!important;
  }
}
@media(max-width:380px){
  html{
    scroll-padding-top:76px!important;
  }
  body{
    padding-top:72px!important;
  }
  header .wrap.nav{
    min-height:66px!important;
    padding-top:5px!important;
    padding-bottom:6px!important;
  }
  .brand-logo-v094{
    width:min(292px,calc(100vw - 34px))!important;
  }
}
#top,
section[id],
.hero{
  scroll-margin-top:86px!important;
}

/* ============================================================
   SLIM FIXED HEADER v0.99g
   Feinschliff nach Screenshot:
   - Header bleibt position:fixed und sichtbar beim Scrollen
   - Header-Höhe reduziert
   - Logo wird NICHT gestaucht, sondern proportional kleiner und mit schlankerem Asset gerendert
   - Hero-Abstand angepasst, damit nichts unter den Header rutscht
   ============================================================ */
html{
  scroll-padding-top:70px!important;
}
body{
  padding-top:62px!important;
}
header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:2147483000!important;
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
header .wrap.nav{
  min-height:54px!important;
  height:auto!important;
  padding-top:3px!important;
  padding-bottom:3px!important;
}
.brand-logo-v094{
  width:min(304px,36vw)!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}
@media(max-width:860px){
  html{
    scroll-padding-top:70px!important;
  }
  body{
    padding-top:64px!important;
  }
  header .wrap.nav{
    min-height:58px!important;
    padding:4px 14px 4px!important;
  }
  .brand-logo-v094{
    width:min(286px,calc(100vw - 44px))!important;
  }
}
@media(max-width:380px){
  html{
    scroll-padding-top:68px!important;
  }
  body{
    padding-top:62px!important;
  }
  header .wrap.nav{
    min-height:56px!important;
    padding:3px 12px 4px!important;
  }
  .brand-logo-v094{
    width:min(274px,calc(100vw - 40px))!important;
  }
}
#top,
section[id],
.hero{
  scroll-margin-top:76px!important;
}

.btn-inline{display:inline-block;margin:.5rem 0 .3rem;padding:12px 20px;background:var(--accent);color:#fff;border-radius:9px;font-weight:650;font-size:.96rem;transition:background .15s,transform .15s}
.btn-inline:hover{background:var(--accent-ink);text-decoration:none;transform:translateY(-1px)}


/* ============================================================
   KLIMAFINDER v6.0 — UX, FINDER & ACCESSIBILITY HARDENING
   ============================================================ */
.skip-link{position:fixed;left:12px;top:10px;z-index:200;transform:translateY(-160%);padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-weight:700;box-shadow:var(--shadow)}
.skip-link:focus{transform:translateY(0);text-decoration:none}
main{display:block}
.step-fieldset{border:0;min-width:0}
.step-fieldset legend{font-size:1.25rem;font-weight:650;line-height:1.2;margin-bottom:14px;color:var(--ink)}
.finder-result-section{padding:28px 0 56px;background:linear-gradient(180deg,var(--surface),var(--surface-2))}
.finder-result-section[hidden]{display:none}
.finder-result-shell{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(20px,4vw,34px)}
.result-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.result-summary>div{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:14px 16px}
.result-summary strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:3px}
.result-summary span{display:block;color:var(--ink);font-weight:650}
.result-cards-title{margin:24px 0 8px;font-size:1.08rem}
.band-dual{background:#397D8D}
.rating-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rating-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.82rem;color:var(--ink-soft);background:var(--surface-2)}
.rating-chip strong{color:var(--ink);font-size:inherit}
.method-note{font-size:.84rem;color:var(--grey);margin-top:8px}
.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.decision-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:20px}
.decision-card h3{margin-bottom:8px}
.decision-card p{font-size:.94rem}
.decision-card .btn-inline{display:inline-flex;margin-top:12px}
.page-map[hidden]{display:none!important}
body.menu-open{overflow:hidden}
.page-map:focus{outline:none}
.form-help{font-size:.86rem;color:var(--grey);margin-top:8px}
.form-fallback{margin-top:10px;font-size:.9rem}
.form-ok[tabindex="-1"]:focus{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:700px){
  .result-summary,.decision-grid{grid-template-columns:1fr}
  .finder-result-section{padding-top:18px}
}


.hamburger[aria-expanded="true"] span{background:var(--ink)}
.hamburger[aria-expanded="true"] span::before{transform:none}
.hamburger[aria-expanded="true"] span::after{transform:none}


/* KlimaFinder v6.1: datensparsamer öffentlicher Besuchszähler */


/* KlimaFinder v6.1.2: kompakte, progressive Finder-Ergebnisse */
.band-plan{background:var(--accent-ink)}
.result-lead{font-size:1rem;color:var(--ink-soft);max-width:68ch;margin:0 0 14px}
.result-class-visual{margin:12px 0 10px}
.result-class-visual img{display:block;width:min(100%,440px);aspect-ratio:4/3;object-fit:cover;object-position:center 38%;margin-inline:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.result-class-visual figcaption{margin-top:4px;font-size:.72rem;color:var(--grey);text-align:center}
.result-recommendation-compact{display:grid;margin:12px 0 14px;border:1px solid #CBE4E6;background:#F2F9F9;border-radius:12px;overflow:hidden}
.result-recommendation-compact div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding:10px 14px}
.result-recommendation-compact div+div{border-top:1px solid #CBE4E6}
.result-recommendation-compact dt{font-size:.74rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.result-recommendation-compact dd{margin:0;font-weight:700;color:var(--ink)}
.result-facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.result-fact{display:inline-flex;align-items:baseline;gap:5px;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:7px 11px;font-size:.82rem;color:var(--ink-soft)}
.result-fact strong{font-size:.95rem;color:var(--ink)}
.result-recommendation{border:1px solid #CBE4E6;background:#F2F9F9;border-radius:12px;padding:14px 16px;margin:14px 0 18px}
.result-recommendation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.result-recommendation-grid .result-recommendation{margin:0}
.result-recommendation strong{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:4px}
.result-recommendation span{display:block;font-weight:700;color:var(--ink)}
.result-primary-title{margin:20px 0 10px;font-size:1.08rem}
.result-next-step{border-left:4px solid var(--amber);background:#FBF6E7;border-radius:0 12px 12px 0;padding:16px 18px;margin:18px 0}
.result-next-step.is-plan{border-color:var(--accent);background:#EFF7F7}
.result-next-step h3{font-size:1rem;margin:0 0 6px}
.result-next-step p{font-size:.91rem;color:var(--ink-soft);margin:0}
.result-next-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.result-next-actions .btn-inline{margin:0}
.result-secondary-link{display:inline-flex;align-items:center;padding:11px 3px;font-weight:650}
.result-disclosure{border:1px solid var(--line);background:var(--surface);border-radius:12px;margin:12px 0;overflow:hidden}
.result-disclosure>summary{padding:14px 16px;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.result-disclosure>summary::-webkit-details-marker{display:none}
.result-disclosure>summary::after{content:'+';float:right;color:var(--accent);font-size:1.25rem;line-height:1}
.result-disclosure[open]>summary::after{content:'−'}
.result-disclosure-body{border-top:1px solid var(--line);padding:14px 16px}
.result-disclosure-body>p:last-child{margin-bottom:0}
.pcard.primary{border-color:#B8DADC;box-shadow:0 8px 24px rgba(15,93,97,.08)}
.pquick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.pquick span{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:9px 10px;font-size:.78rem;color:var(--grey)}
.pquick strong{font-size:.92rem;color:var(--ink)}
.pcard .pdetails{margin-top:12px}
.pcard .pdetails-body{display:block;margin-top:10px}
.pcard .pdetails-body p{font-size:.88rem;color:var(--ink-soft);margin:0 0 9px}
.pcard .pdetails-body dl{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;font-size:.84rem;color:var(--ink-soft);margin:0}
.pcard .pdetails-body dl div{display:contents}
.pcard .pdetails-body dt{font-weight:650;color:var(--ink)}
.pcard .pdetails-body dd{margin:0;text-align:right}
.pcard-alternatives{display:grid;gap:14px}
.result-kanton .kanton-picker{margin:0}
.result-kanton .kanton-info{margin-bottom:0!important}
@media(max-width:700px){
  .result-recommendation-grid{grid-template-columns:1fr}
  .result-facts{gap:6px;margin:10px 0 12px}
  .result-fact{padding:6px 9px}
  .finder-result-shell{padding:18px 14px}
  .result-band{font-size:.78rem;padding:9px 12px;margin-bottom:12px}
  .result-lead{font-size:.93rem;margin:0 0 10px}
  .result h2{font-size:1.35rem;line-height:1.15}
  .result-class-visual img{width:min(100%,300px);height:210px;aspect-ratio:auto;object-position:center 60%}
  .result-class-visual figcaption{margin-top:3px;font-size:.68rem}
  .result-recommendation-compact div{grid-template-columns:1fr;gap:3px;padding:10px 12px}
  .result-recommendation-compact dt{font-size:.7rem;line-height:1.15;white-space:normal;text-align:left}
  .result-recommendation-compact dd{font-size:.96rem;line-height:1.35;text-align:left;min-width:0;overflow-wrap:anywhere}
  .result-recommendation-compact dt{font-size:.72rem}
  .result-primary-title{margin:14px 0 8px}
  .pcard{padding:14px}
  .pquick{grid-template-columns:1fr 1fr}
  .pprice{align-items:flex-start;gap:10px;flex-direction:column}
  .plink{width:100%;text-align:center}
  .result-next-actions{display:grid;grid-template-columns:1fr}
  .result-next-actions .btn-inline,.result-secondary-link{justify-content:center;text-align:center;width:100%}
}


/* AP2R-P5.0-R1 PRODUCT DECISION BRIDGE START */
.finder-concrete-product{margin:22px 0 18px;border:2px solid #16868a;border-radius:22px;background:linear-gradient(145deg,#fff 0%,#eef9f8 100%);padding:22px;box-shadow:0 14px 34px rgba(19,70,78,.10)}
.finder-concrete-kicker{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}.finder-concrete-kicker span{color:#075c61;font-size:.72rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.finder-concrete-kicker strong{font-size:.7rem;color:#50656d;background:#fff;border:1px solid #d2e1e3;border-radius:999px;padding:5px 9px}
.finder-concrete-main{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;align-items:center}.finder-concrete-visual{width:78px;height:78px;display:grid;place-items:center;border-radius:18px;background:#fff;border:1px solid #cce0e1;color:#087f83}.finder-concrete-visual .picon{width:52px;height:52px}.finder-concrete-type{display:block;color:#075c61;font-weight:900;font-size:.76rem}.finder-concrete-main h3{margin:3px 0 5px;font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.12}.finder-concrete-main p{margin:0;color:#526873;line-height:1.5}
.finder-concrete-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:17px 0}.finder-concrete-checks p{margin:0;padding:12px 13px;border-radius:13px;background:#fff;border:1px solid #d9e7e8;color:#526873;line-height:1.45}.finder-concrete-checks p span{display:inline-grid;place-items:center;width:21px;height:21px;margin-right:6px;border-radius:50%;background:#e4f5ef;color:#15725f;font-weight:950}.finder-concrete-checks p+ p span{background:#fff2dc;color:#8b5a13}.finder-concrete-checks strong{color:#173242}
.finder-concrete-actions{display:flex;gap:10px;flex-wrap:wrap}.finder-concrete-primary,.finder-concrete-secondary{min-height:46px;padding:11px 16px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:900}.finder-concrete-primary{background:#087f83;color:#fff}.finder-concrete-primary:hover{background:#075c61}.finder-concrete-secondary{background:#fff;color:#173242;border:1px solid #b9ced1}.finder-concrete-accessory{display:inline-block;margin-top:13px;color:#075c61;font-weight:850}.finder-concrete-note{display:block;margin-top:12px;color:#687b83;line-height:1.4}
@media(max-width:620px){.finder-concrete-product{padding:17px;margin-top:18px}.finder-concrete-kicker{display:grid;gap:7px}.finder-concrete-kicker strong{justify-self:start}.finder-concrete-main{grid-template-columns:58px minmax(0,1fr);gap:11px}.finder-concrete-visual{width:58px;height:58px;border-radius:14px}.finder-concrete-visual .picon{width:40px;height:40px}.finder-concrete-main h3{font-size:1.25rem}.finder-concrete-main p{font-size:.9rem}.finder-concrete-checks{grid-template-columns:1fr;margin:13px 0}.finder-concrete-checks p{padding:10px 11px;font-size:.86rem}.finder-concrete-actions{display:grid}.finder-concrete-primary,.finder-concrete-secondary{width:100%}}
/* AP2R-P5.0-R1 PRODUCT DECISION BRIDGE END */

/* P5.5E1 — calm, product-first Finder experience */
.finder-current{display:grid;gap:7px;margin:14px 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.finder-current-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.finder-current .profil{margin:0;padding:0;border:0;min-height:0}
.finder-step-context{max-width:62ch;margin:0 0 16px;color:var(--ink-soft);font-size:.94rem;line-height:1.55}
.step-fieldset{min-width:0;margin:0;padding:0;border:0}
.step-fieldset legend{display:block;width:100%;margin:0 0 14px;font-size:clamp(1.35rem,3vw,1.7rem);font-weight:800;line-height:1.2;color:var(--ink)}
.step-eyebrow{display:block;margin-bottom:5px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.opt{min-height:64px;padding:14px 50px 14px 17px;border-radius:13px;font-size:1.02rem;line-height:1.35}
.opt small{margin-top:3px;font-size:.84rem;line-height:1.4}
.opt:focus-visible,.fbtn:focus-visible,.result-primary-cta:focus-visible,.result-secondary-cta:focus-visible,.result-choice-card:focus-visible,.result-edit-button:focus-visible,.restart:focus-visible{outline:3px solid #10233B;outline-offset:3px}
.finder-nav{position:sticky;bottom:8px;z-index:4;padding:10px;margin:18px -10px 0;border:1px solid rgba(203,218,220,.9);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 10px 30px rgba(16,35,59,.12);backdrop-filter:blur(8px)}
.fbtn{min-height:56px}

.finder-result-shell{max-width:960px}
.result-hero{position:relative;padding:clamp(20px,4vw,34px);border:1px solid #CBE4E6;border-radius:18px;background:linear-gradient(145deg,#fff 0%,#f3f9f9 100%);box-shadow:0 18px 44px rgba(16,35,59,.08)}
.result-tone-premium{background:linear-gradient(145deg,#fff 0%,#eef6f6 55%,#f7f4ef 100%)}
.result-tone-calm{background:linear-gradient(145deg,#fff 0%,#f5f7f8 100%)}
.result-status{display:inline-flex;align-items:center;min-height:30px;margin-bottom:12px;padding:5px 10px;border:1px solid #B8DADC;border-radius:999px;background:#E8F3F4;color:var(--accent-ink);font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.result-hero h2{max-width:20ch;margin:0 0 10px;font-size:clamp(1.7rem,4vw,2.55rem);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.result-hero .result-lead{max-width:62ch;margin-bottom:16px;font-size:clamp(1rem,2vw,1.12rem);line-height:1.58;color:var(--ink-soft)}
.result-hero .result-facts{margin:0 0 20px}
.result-reasons-title{margin:0 0 9px;font-size:1rem}
.result-reasons{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.result-reasons li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start}
.result-reasons li>span{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#DFF2EC;color:#146C5A;font-size:.78rem;font-weight:900}
.result-reasons p{margin:0;color:var(--ink);line-height:1.5}
.result-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;margin-bottom:20px}
.result-primary-cta,.result-secondary-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;text-align:center}
.result-primary-cta{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(14,124,134,.18)}
.result-primary-cta:hover{background:var(--accent-ink);color:#fff}
.result-secondary-cta{border:1px solid #B8C9CC;background:#fff;color:var(--ink)}
.result-secondary-cta:hover{border-color:var(--accent);color:var(--accent-ink)}
.result-condition{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;margin:14px 0 18px;padding:13px 15px;border:1px solid #E5D3AB;border-radius:12px;background:#FFF9EC}
.result-condition>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#F4E4BE;color:#75500E;font-weight:900}
.result-condition strong{display:block;margin-bottom:2px;font-size:.9rem;color:var(--ink)}
.result-condition p{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.result-condition-info{border-color:#CEDDE0;background:#F3F7F8}
.result-condition-info>span{background:#DDECEF;color:#245A63}
.result-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.result-choice-grid h3{grid-column:1/-1;margin:0 0 2px;font-size:1.08rem}
.result-choice-card{display:flex;flex-direction:column;gap:4px;min-height:142px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.result-choice-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(16,35,59,.08)}
.result-choice-card-primary{border-color:#B8DADC;background:#F2F9F9}
.result-choice-card span{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.result-choice-card strong{font-size:1.08rem}
.result-choice-card small{color:var(--ink-soft);line-height:1.45}
.result-disclosure-intro{margin-top:0;color:var(--ink-soft)}
.result-edit-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.result-edit-button{min-height:46px;padding:10px 15px;border:1px solid #B8C9CC;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:750;cursor:pointer}
.result-edit-button:hover{border-color:var(--accent);color:var(--accent-ink)}
.result-edit-actions .restart{margin:0}

@media(max-width:700px){
  .finder-current{padding:10px 11px}
  .finder-step-context{font-size:.9rem}
  .finder-nav{grid-template-columns:1fr 1.35fr;margin-inline:-6px;padding:8px;bottom:6px}
  .fbtn{padding-inline:10px;font-size:.94rem}
  .result-hero{padding:20px 16px}
  .result-hero h2{max-width:none;font-size:1.65rem}
  .result-hero-actions{display:grid;grid-template-columns:1fr}
  .result-primary-cta,.result-secondary-cta{width:100%}
  .result-choice-grid{grid-template-columns:1fr}
  .result-choice-grid h3{grid-column:auto}
  .result-edit-actions{display:grid;grid-template-columns:1fr}
  .result-edit-button,.result-edit-actions .restart{width:100%;text-align:center;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .result-choice-card{transition:none}
  .result-choice-card:hover{transform:none}
}

/* P5.5E2B — full result coverage without warning-first presentation */
.result-route-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}
.result-route-grid h3{grid-column:1/-1;margin:0 0 2px;font-size:1.08rem}
.result-route-card{display:flex;flex-direction:column;gap:5px;min-height:154px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.result-route-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(16,35,59,.08)}
.result-route-card span{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.result-route-card strong{font-size:1.08rem}
.result-route-card small{color:var(--ink-soft);line-height:1.45}
.result-professional-note{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;margin:18px 0;padding:13px 15px;border:1px solid #CEDDE0;border-radius:12px;background:#F3F7F8}
.result-professional-note>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#DDECEF;color:#245A63;font-weight:900}
.result-professional-note strong{display:block;margin-bottom:2px;font-size:.9rem;color:var(--ink)}
.result-professional-note p{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.finder-verified-products{margin:22px 0 18px}
.finder-verified-products>h3{margin:0 0 10px;font-size:1.08rem}
.finder-verified-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.finder-verified-product{display:flex;flex-direction:column;min-width:0;padding:18px;border:1px solid #B8DADC;border-radius:16px;background:linear-gradient(145deg,#fff 0%,#f2f9f9 100%)}
.finder-verified-head{display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center}
.finder-verified-head .finder-concrete-visual{width:60px;height:60px;border-radius:14px}
.finder-verified-head .picon{width:40px;height:40px}
.finder-verified-head span{display:block;color:#075c61;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.finder-verified-head h4{margin:3px 0 1px;font-size:1.08rem;line-height:1.2}
.finder-verified-head small{color:var(--ink-soft)}
.finder-verified-product>p{margin:13px 0 10px;color:var(--ink-soft);line-height:1.5}
.finder-verified-product ul{display:grid;gap:6px;margin:0 0 14px;padding-left:19px;color:var(--ink-soft);font-size:.9rem;line-height:1.45}
.finder-verified-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.finder-verified-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 12px;border-radius:11px;text-decoration:none;font-weight:850;text-align:center}
.finder-verified-actions a:first-child{background:var(--accent);color:#fff}
.finder-verified-actions a:last-child{border:1px solid #B8C9CC;background:#fff;color:var(--ink)}
.result-route-card:focus-visible,.finder-verified-actions a:focus-visible{outline:3px solid #10233B;outline-offset:3px}
@media(max-width:700px){.result-route-grid,.finder-verified-grid{grid-template-columns:1fr}.result-route-grid h3{grid-column:auto}.finder-verified-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.result-route-card{transition:none}.result-route-card:hover{transform:none}}


/* P5.5E2C progressive questions: real heat routes and demanding room uses. */
.progressive-question{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.progressive-question h3,.usage-group h3{margin:0 0 8px;font-size:.92rem;font-weight:800;color:var(--ink)}
.usage-group{display:grid;gap:8px;margin-top:18px}
.usage-group:first-of-type{margin-top:0}
.route-options{margin-bottom:12px}
.route-exclusive{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.route-state-button{min-height:48px;padding:10px 14px;font:inherit;font-size:.9rem;font-weight:700;color:var(--accent-ink);background:var(--surface-2);border:1.5px dashed var(--line);border-radius:11px;cursor:pointer}
.route-state-button[aria-pressed="true"]{color:var(--ink);background:#E8F3F4;border-style:solid;border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,124,134,.08)}
.route-state-button:focus-visible{outline:3px solid rgba(14,124,134,.26);outline-offset:2px}
.route-followup{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px}
.opts-3{grid-template-columns:repeat(3,1fr)}
.opt.compact{min-height:48px;padding:10px 42px 10px 14px}
.usage-heating .opt{max-width:560px}
@media(max-width:620px){
  .route-exclusive,.opts-3{grid-template-columns:1fr}
  .usage-group{margin-top:16px}
}

/* P5.5E5 — finder mobile presentation only; desktop keeps the base layouts. */
@media(max-width:700px){
  #finderQuiz{min-width:0}
  #finderQuiz[data-finder-step="wohnen"] .finder-current{display:none}
  #finderQuiz:not([data-finder-step="wohnen"]) .finder-current{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-width:0;
    margin:10px 0 12px;
    padding:8px 10px;
  }
  #finderQuiz .finder-current-label{white-space:nowrap}
  #finderQuiz .finder-current .profil{
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  #finderQuiz .finder-current .profil span{flex:0 0 auto;white-space:nowrap}

  #finderQuiz[data-finder-step="wohnen"] .opts,
  #finderQuiz[data-finder-step="prio"] .opts,
  #finderQuiz[data-finder-step="raum"] .opts-2,
  #finderQuiz[data-finder-step="room_use"] .opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #finderQuiz[data-finder-step="wohnen"] .opt,
  #finderQuiz[data-finder-step="prio"] .opt,
  #finderQuiz[data-finder-step="raum"] .opt,
  #finderQuiz[data-finder-step="room_use"] .opt{min-width:0;min-height:48px;padding:11px 40px 11px 13px;font-size:.95rem}
  #finderQuiz[data-finder-step="wohnen"] .opt small,
  #finderQuiz[data-finder-step="prio"] .opt small,
  #finderQuiz[data-finder-step="raum"] .opt small,
  #finderQuiz[data-finder-step="room_use"] .opt small{font-size:.78rem;line-height:1.32}
  #finderQuiz .opt > span{min-width:0;word-break:normal;overflow-wrap:normal;hyphens:none}

  #finderQuiz[data-finder-step="raum"] .stepper{display:grid;grid-template-columns:48px minmax(88px,1fr) 48px;gap:10px;align-items:center;max-width:260px;margin:0 auto 14px}
  #finderQuiz[data-finder-step="raum"] .stepper output{min-width:0;font-size:1.35rem}
  #finderQuiz[data-finder-step="raum"] .progressive-question{margin-top:14px;padding-top:14px}

  #finderQuiz[data-finder-step="waermeweg"] .route-options{display:grid;gap:8px;margin-bottom:10px}
  #finderQuiz[data-finder-step="waermeweg"] .route-exclusive{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
  #finderQuiz[data-finder-step="waermeweg"] .route-state-button{min-width:0;min-height:48px;padding:10px;font-size:.84rem;line-height:1.3}
  #finderQuiz[data-finder-step="waermeweg"] .route-followup{margin-top:12px;padding:12px}
  #finderQuiz[data-finder-step="waermeweg"] .route-followup .opts-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}

  #finderQuiz[data-finder-housing="gewerbe"][data-finder-step="room_use"] .usage-group .opt{font-size:.9rem}
  #finderQuiz[data-finder-housing="gewerbe"][data-finder-step="room_use"] .usage-group .opt small{font-size:.75rem}

  #finderQuiz .finder-nav{bottom:calc(8px + env(safe-area-inset-bottom));padding:10px 10px calc(10px + env(safe-area-inset-bottom));margin-bottom:calc(18px + env(safe-area-inset-bottom))}
  #finderQuiz .step-fieldset{scroll-margin-top:calc(84px + env(safe-area-inset-top));scroll-margin-bottom:calc(132px + env(safe-area-inset-bottom))}
  #finderQuiz .opt,
  #finderQuiz .route-state-button,
  #finderQuiz .stepper button,
  #finderQuiz .fbtn{scroll-margin-top:calc(84px + env(safe-area-inset-top));scroll-margin-bottom:calc(132px + env(safe-area-inset-bottom))}

  @media(max-width:380px){
    #finderQuiz:not([data-finder-step="wohnen"]) .finder-current{grid-template-columns:1fr;gap:4px}
    #finderQuiz[data-finder-step="wohnen"] .opts,
    #finderQuiz[data-finder-step="prio"] .opts,
    #finderQuiz[data-finder-step="raum"] .opts-2,
    #finderQuiz[data-finder-step="room_use"] .opts-2,
    #finderQuiz[data-finder-step="waermeweg"] .route-exclusive,
    #finderQuiz[data-finder-step="waermeweg"] .route-followup .opts-3{grid-template-columns:1fr}
  }
}