/* Landingpage „Heizung & Wärmepumpe in Köln“ · 06.10.2026
   Baut auf koeln-sanitaer-lp.css (ksl-*) auf; hier nur die heizungsspezifischen Sektionen. */

/* Gas-Hinweis in der Störungs-Sektion */
.khl-gas { display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding:12px 14px; border-radius:12px; background:rgba(240,167,200,.12); color:#f3d7e4; font-size:13.5px; line-height:1.5; }
.khl-gas svg { flex:0 0 auto; width:20px; height:20px; color:#f0a7c8; }
.khl-gas b { color:#fff; }

/* Wärmepumpe mit Stiftung-Warentest-Ergebnis (Text links, Bild rechts) */
.khl-heatpump { padding:clamp(72px,9vw,124px) 0 clamp(56px,7vw,88px); background:#fff; }
.khl-heatpump__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(36px,6vw,88px); align-items:center; }
.khl-heatpump__copy p { color:var(--k-ink); line-height:1.75; }
.khl-checks { display:grid; gap:16px; margin:24px 0 30px; padding:0; list-style:none; }
.khl-checks li { display:flex; gap:14px; align-items:flex-start; }
.khl-checks svg { flex:0 0 auto; width:40px; height:40px; padding:9px; border-radius:12px; background:#e7f0f6; color:var(--k-blue); }
.khl-checks b { display:block; margin-bottom:2px; color:var(--k-ink); font-size:1rem; }
.khl-checks span { color:var(--k-muted); font-size:.92rem; line-height:1.55; }
.khl-heatpump__media { margin:0; }
.khl-heatpump__media img { width:100%; height:auto; border-radius:24px; box-shadow:0 34px 70px -38px rgba(16,43,64,.6); }
.khl-heatpump__media figcaption { margin-top:16px; padding:0 4px; }
.khl-heatpump__media figcaption b { display:block; color:var(--k-ink); font-size:.98rem; }
.khl-heatpump__media figcaption span { display:block; margin:4px 0 8px; color:var(--k-muted); font-size:12.5px; line-height:1.55; }
.khl-heatpump__media figcaption a { display:inline-flex; align-items:center; gap:6px; min-height:40px; color:var(--k-blue); font-weight:700; font-size:.9rem; text-decoration:none; }
.khl-heatpump__media figcaption a svg { width:16px; height:16px; }
.khl-tested { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:clamp(32px,4vw,48px); padding-top:24px; border-top:1px solid var(--k-line); }
.khl-tested > span { color:var(--k-muted); font-size:.88rem; }
.khl-tested a { display:inline-flex; align-items:baseline; gap:10px; min-height:44px; padding:10px 16px; border:1px solid var(--k-line); border-radius:999px; color:var(--k-ink); text-decoration:none; }
.khl-tested a:hover { background:#edf3f7; }
.khl-tested a b { font-size:.9rem; }
.khl-tested a small { color:var(--k-blue); font-weight:700; font-size:.82rem; }

/* Förderung: Foto-Band mit blauer Box */
.khl-funding { position:relative; isolation:isolate; overflow:hidden; padding:clamp(72px,9vw,128px) 0; background:var(--k-hero); }
.khl-funding > img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% center; }
.khl-funding::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(16,43,64,.92) 0%,rgba(16,43,64,.7) 45%,rgba(16,43,64,.15) 75%); }
.khl-funding__box { max-width:600px; padding:clamp(28px,4vw,48px); border-radius:24px; background:linear-gradient(140deg,rgba(15,42,63,.94) 0%,rgba(27,71,102,.92) 100%); color:#fff; box-shadow:0 30px 70px -36px rgba(0,0,0,.7); backdrop-filter:blur(6px); }
.khl-funding .ksl-kicker { color:#9fc4de; }
.ksl-page .khl-funding h2 { color:#fff; }
.khl-funding p { color:#d5e3ee; line-height:1.7; }
.khl-funding__note { font-size:13px; color:#a9c0d1 !important; }
.khl-light { color:#fff; }
.khl-light:hover { color:#f0a7c8; }
.khl-funding__label { position:absolute; right:16px; bottom:12px; color:rgba(255,255,255,.6); font-size:11px; }

/* Buttons als <button> sehen aus wie Links-Buttons */
.ksl-inline-cta button.ksl-btn { font-family:inherit; }

@media (max-width:991.98px) {
  .khl-heatpump__grid { grid-template-columns:1fr; }
  .khl-heatpump__media { order:-1; }
}
@media (max-width:767.98px) {
  .khl-funding::before { background:rgba(16,43,64,.82); }
  .khl-tested a { width:100%; justify-content:space-between; }
}

/* Kacheln als Wegweiser zu den Heizungsseiten */
.ksl-problem--link { text-decoration:none; }
.ksl-problem--link:hover { color:var(--k-ink); }
.ksl-problem--link .ksl-problem__go { margin-top:auto; padding-top:14px; color:var(--k-blue); }
.khl-pricenote { color:#a9c0d1; }
.khl-pricenote a { color:#fff; font-weight:700; }

/* Köln-Heizungsthemen (06.10.2026): Kurz erklärt, Marken, Vergleich */
.khl-answer { padding:clamp(64px,8vw,104px) 0; background:#fff; }
.khl-answer__grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:center; }
.ksl-page .khl-answer h2 { font-size:clamp(2rem,3.4vw,3rem); }
.khl-answer__lead { margin:0; color:var(--k-ink); font-size:1.08rem; line-height:1.8; }
.khl-answer__facts { margin:0; padding:clamp(20px,3vw,32px); border-radius:22px; background:var(--k-paper); }
.khl-answer__facts > div { display:grid; grid-template-columns:140px minmax(0,1fr); gap:16px; padding:14px 0; border-top:1px solid var(--k-line); }
.khl-answer__facts > div:first-child { border-top:0; padding-top:0; }
.khl-answer__facts > div:last-child { padding-bottom:0; }
.khl-answer__facts dt { padding-top:2px; color:var(--k-blue); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.khl-answer__facts dd { margin:0; color:var(--k-ink); font-size:.95rem; line-height:1.55; }
.khl-deep { background:var(--k-paper); }
.khl-deep .khl-checks svg { background:#fff; }
.khl-deep .khl-heatpump__media figcaption span { font-size:11px; }

.khl-brands { padding:clamp(64px,8vw,112px) 0; background:#fff; }
.khl-brands__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.khl-brand { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--k-line); border-radius:18px; background:#fff; color:var(--k-ink); text-decoration:none; transition:transform .22s ease, box-shadow .22s ease; }
.khl-brand:hover { color:var(--k-ink); transform:translateY(-4px); box-shadow:0 24px 46px -30px rgba(16,43,64,.5); }
.khl-brand img { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--k-paper); }
.khl-brand > span { display:grid; gap:4px; padding:14px 16px 16px; }
.khl-brand b { font-size:1.05rem; }
.khl-brand small { color:var(--k-muted); font-size:12.5px; }
.khl-brand.is-tested small { color:var(--k-blue); font-weight:700; }
.khl-brands__source { margin:18px 0 0; color:var(--k-muted); font-size:12.5px; }
.khl-brands__source a { color:var(--k-blue); font-weight:600; }

.khl-compare { padding:clamp(56px,7vw,96px) 0; background:#fff; }
.khl-compare__table { overflow-x:auto; border:1px solid var(--k-line); border-radius:20px; }
.khl-compare table { width:100%; min-width:560px; border-collapse:collapse; }
.khl-compare caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.khl-compare thead th { padding:14px 20px; background:var(--k-paper); color:var(--k-muted); font-size:12px; font-weight:700; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.khl-compare tbody :is(th,td) { padding:16px 20px; border-top:1px solid var(--k-line); text-align:left; vertical-align:top; line-height:1.55; }
.khl-compare tbody th { color:var(--k-ink); font-family:Barlow,sans-serif; font-size:1.15rem; font-weight:600; white-space:nowrap; }
.khl-compare tbody td { color:var(--k-muted); font-size:.92rem; }
.khl-compare tbody td:last-child { color:var(--k-blue); font-weight:600; }

@media (max-width:991.98px) {
  .khl-answer__grid { grid-template-columns:1fr; }
  .khl-brands__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px) {
  .khl-answer__facts > div { grid-template-columns:1fr; gap:4px; }
  .khl-brands__grid { grid-template-columns:1fr 1fr; gap:10px; }
  .khl-brand > span { padding:10px 12px 12px; }
}

/* Lange deutsche Wörter (z. B. „Effizienzmaßnahmen“) dürfen auf dem Handy umbrechen */
.ksl-page :is(h1,h2,h3,.ksl-hero__kw,.ksl-problem__title,.ksl-trust b) { overflow-wrap:break-word; hyphens:auto; }
@media (max-width:575.98px) {
  .ksl-page .khl-funding h2 { font-size:clamp(1.7rem,7.4vw,2.1rem); }
  .khl-funding__box { padding:24px 20px; }
}