/* Landingpage „Klempner & Sanitär in Köln“ · Art Direction 06.10.2026
   AIDA: Hero + Formularleiste (Attention) → Probleme mit Preisen (Interest) → Notfall, Preise,
   Bewertung, Ablauf (Desire) → Einsatzgebiet, FAQ, Abschlussformular (Action).
   Markenfarben der Startseite; Magenta nur für Handlungen. */
.ksl-page {
  --k-ink:#16344b; --k-muted:#536574; --k-paper:#f4f6f8; --k-line:#d8e0e7;
  --k-blue:#215d85; --k-magenta:#a61657; --k-magenta-dark:#891246; --k-hero:#102b40; --k-star:#f5b83d;
  color:var(--k-ink); background:#fff;
}
.ksl-page :is(h1,h2,h3) { font-family:Barlow,sans-serif; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
.ksl-page h2 { margin:12px 0 18px; color:var(--k-ink); font-size:clamp(2.2rem,4.2vw,3.8rem); line-height:1.02; }
.ksl-kicker { display:block; color:var(--k-blue); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.ksl-head { max-width:720px; margin-bottom:clamp(32px,5vw,56px); }
.ksl-head--center { margin-inline:auto; text-align:center; }
.ksl-head p { color:var(--k-muted); line-height:1.75; }
.ksl-stars { color:var(--k-star); letter-spacing:2px; }
.ksl-small { margin:14px 0 0; font-size:.8rem; line-height:1.6; }

/* Buttons */
.ksl-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:58px; padding:0 24px; border:0; border-radius:12px; font-weight:700; font-size:.98rem; text-decoration:none; cursor:pointer; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
.ksl-btn svg { width:20px; height:20px; }
.ksl-btn--call { padding:8px 26px 8px 12px; background:var(--k-magenta); color:#fff; box-shadow:0 18px 40px -18px rgba(166,22,87,.75); font-family:Barlow,sans-serif; font-size:1.5rem; font-weight:600; }
.ksl-btn--call svg { width:42px; height:42px; padding:11px; border-radius:50%; background:rgba(255,255,255,.18); }
.ksl-btn--call small { display:block; font-family:Inter,sans-serif; font-size:.72rem; font-weight:600; opacity:.85; line-height:1.2; }
.ksl-btn--call > span { display:block; line-height:1.1; text-align:left; }
.ksl-btn--call:hover { background:var(--k-magenta-dark); color:#fff; transform:translateY(-2px); }
.ksl-btn--ghost { border:1px solid rgba(255,255,255,.45); color:#fff; }
.ksl-btn--ghost:hover { background:rgba(255,255,255,.12); color:#fff; }
.ksl-btn--primary { background:var(--k-magenta); color:#fff; }
.ksl-btn--primary:hover { background:var(--k-magenta-dark); color:#fff; }
.ksl-btn--dark { background:var(--k-ink); color:#fff; }
.ksl-btn--dark:hover { background:#0c2133; color:#fff; transform:translateY(-2px); }
.ksl-page :is(.ksl-btn,.ksl-problem,.ksl-trust a):focus-visible { outline:3px solid var(--k-blue); outline-offset:3px; }

/* A · Hero */
.ksl-hero { position:relative; isolation:isolate; overflow:hidden; min-height:min(88vh,860px); display:flex; align-items:center; background:var(--k-hero); color:#fff; }
.ksl-hero__image { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:72% center; }
.ksl-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(16,43,64,.96) 0%,rgba(16,43,64,.88) 34%,rgba(16,43,64,.35) 62%,rgba(16,43,64,.05) 85%), linear-gradient(0deg,rgba(16,43,64,.55) 0%,rgba(16,43,64,0) 30%); }
.ksl-hero__grid { width:100%; padding-block:clamp(56px,8vw,96px) clamp(110px,12vw,150px); }
.ksl-hero__copy { max-width:640px; }
.ksl-rating-pill { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); color:#fff; font-size:.86rem; text-decoration:none; }
.ksl-rating-pill:hover { background:rgba(255,255,255,.2); color:#fff; }
.ksl-rating-pill .ksl-stars { font-size:.95rem; }
.ksl-rating-pill > span:last-child { color:#cfe0ec; }
.ksl-hero h1 { margin:22px 0 20px; color:#fff; font-size:clamp(2.6rem,5.4vw,5rem); line-height:1; }
.ksl-hero__kw { display:block; margin-bottom:14px; color:#9fc4de; font-family:Inter,sans-serif; font-size:clamp(.95rem,1.4vw,1.15rem); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ksl-hero__lead { max-width:54ch; margin:0; color:rgba(255,255,255,.86); font-size:1.08rem; line-height:1.7; }
.ksl-hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.ksl-hero__proof { display:flex; flex-wrap:wrap; gap:10px 26px; margin:28px 0 0; padding:0; list-style:none; }
.ksl-hero__proof li { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.9); font-size:.86rem; font-weight:600; }
.ksl-hero__proof svg { width:18px; height:18px; color:#9fc4de; }
.ksl-hero__label { position:absolute; right:16px; bottom:clamp(100px,11vw,140px); color:rgba(255,255,255,.6); font-size:.66rem; }

/* Formularleiste, ragt in den Hero */
.ksl-quickform { position:relative; z-index:3; margin-top:clamp(-96px,-8vw,-72px); }
.ksl-page .ksl-bar-form { display:grid; grid-template-columns:auto minmax(190px,1.3fr) minmax(96px,.55fr) minmax(150px,1fr) minmax(150px,1fr) auto; gap:14px; align-items:end; padding:22px 24px 16px; border-radius:18px; background:#fff; box-shadow:0 30px 70px -30px rgba(16,43,64,.55); }
.ksl-bar-form__intro { align-self:center; padding-right:8px; }
.ksl-bar-form__intro b { display:block; font-family:Barlow,sans-serif; font-size:1.35rem; font-weight:600; line-height:1.15; }
.ksl-bar-form__intro small { display:block; margin-top:3px; color:var(--k-muted); font-size:.76rem; }
.ksl-bar-form__field label { display:block; margin-bottom:6px; color:var(--k-ink); font-size:.74rem; font-weight:700; }
.ksl-page .ksl-bar-form :is(input,select) { width:100%; height:52px; padding:0 14px; border:1px solid var(--k-line); border-radius:10px; background:#fff; color:var(--k-ink); font:500 .95rem Inter,sans-serif; }
.ksl-page .ksl-bar-form :is(input,select):focus { outline:none; border-color:var(--k-blue); box-shadow:0 0 0 3px rgba(33,93,133,.18); }
.ksl-page .ksl-bar-form button { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 22px; border:0; border-radius:10px; background:var(--k-magenta); color:#fff; font-weight:700; white-space:nowrap; cursor:pointer; }
.ksl-page .ksl-bar-form button:hover { background:var(--k-magenta-dark); }
.ksl-page .ksl-bar-form button svg { width:18px; height:18px; }
.ksl-page .ksl-bar-form :is(.lead-form__legal,.lead-form__status) { grid-column:1/-1; margin:2px 0 0; font-size:.72rem; }
.ksl-page .ksl-bar-form .lead-form__status:not([hidden]) { display:block; padding:12px 14px; border-radius:10px; font-size:.9rem; }

/* Vertrauensleiste */
.ksl-trust { padding:clamp(36px,4vw,52px) 0 clamp(28px,4vw,44px); }
.ksl-trust__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.ksl-trust a { display:block; padding:6px 24px; border-left:1px solid var(--k-line); color:var(--k-ink); text-decoration:none; text-align:center; }
.ksl-trust a:first-child { border-left:0; }
.ksl-trust b { display:block; font-family:Barlow,sans-serif; font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:600; line-height:1.1; }
.ksl-trust small { color:var(--k-muted); font-size:.8rem; }
.ksl-trust a:hover b { color:var(--k-blue); }

/* I · Probleme */
.ksl-problems { padding:clamp(64px,8vw,112px) 0; background:var(--k-paper); }
.ksl-problems__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ksl-problem { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:28px 26px 24px; border:1px solid var(--k-line); border-radius:18px; background:#fff; color:var(--k-ink); font:inherit; text-align:left; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease; }
.ksl-problem:hover { transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(16,43,64,.5); }
.ksl-problem > svg { width:46px; height:46px; padding:11px; border-radius:14px; background:#e7f0f6; color:var(--k-blue); }
.ksl-problem__title { margin-top:6px; font-family:Barlow,sans-serif; font-size:1.55rem; font-weight:600; line-height:1.15; }
.ksl-problem__text { color:var(--k-muted); font-size:.9rem; line-height:1.6; }
.ksl-problem__price { display:block; margin-top:auto; padding-top:16px; font-family:Barlow,sans-serif; font-size:1.7rem; font-weight:600; line-height:1.1; }
.ksl-problem__price small { display:block; color:var(--k-muted); font-family:Inter,sans-serif; font-size:.72rem; font-weight:600; }
.ksl-problem__go { display:inline-flex; align-items:center; gap:6px; color:var(--k-magenta); font-size:.88rem; font-weight:700; }
.ksl-problem__go svg { width:16px; height:16px; transition:transform .2s ease; }
.ksl-problem:hover .ksl-problem__go svg { transform:translateX(4px); }

/* D · Notfall (Bild links, dunkle Fläche rechts) */
.ksl-emergency { display:grid; grid-template-columns:1.1fr 1fr; background:var(--k-hero); color:#fff; }
.ksl-emergency__media { position:relative; margin:0; min-height:520px; }
.ksl-emergency__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ksl-emergency__media figcaption { position:absolute; left:16px; bottom:12px; padding:4px 10px; border-radius:6px; background:rgba(16,43,64,.7); color:#dbe7f0; font-size:.68rem; }
.ksl-emergency__copy { padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px); }
.ksl-emergency .ksl-kicker { color:#f0a7c8; }
.ksl-emergency h2 { color:#fff; }
.ksl-steps { margin:24px 0 30px; padding:0; list-style:none; counter-reset:step; }
.ksl-steps li { position:relative; padding:16px 0 16px 56px; border-top:1px solid rgba(255,255,255,.14); color:#c9d9e5; line-height:1.55; counter-increment:step; }
.ksl-steps li::before { content:counter(step); position:absolute; left:0; top:14px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--k-hero); font-family:Barlow,sans-serif; font-weight:700; }
.ksl-steps b { display:block; color:#fff; font-size:1.05rem; }
.ksl-emergency .ksl-small { color:#a9c0d1; }

/* D · Preise (Tabelle links, Titel rechts) */
.ksl-prices { padding:clamp(72px,9vw,124px) 0; }
.ksl-prices__grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(36px,6vw,88px); align-items:center; }
.ksl-prices__table { padding:clamp(20px,3vw,34px); border-radius:22px; background:#fff; box-shadow:0 30px 70px -40px rgba(16,43,64,.55); border:1px solid var(--k-line); }
.ksl-prices table { width:100%; border-collapse:collapse; }
.ksl-prices caption { caption-side:top; padding:0 0 14px; color:var(--k-blue); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.ksl-prices thead th { padding:0 0 10px; border-bottom:1px solid var(--k-line); color:var(--k-muted); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ksl-prices thead th:last-child, .ksl-prices td { text-align:right; }
.ksl-prices tbody :is(th,td) { padding:15px 0; border-bottom:1px solid var(--k-line); vertical-align:middle; }
.ksl-prices tbody tr:last-child :is(th,td) { border-bottom:0; }
.ksl-prices tbody th { padding-right:16px; font-weight:600; text-align:left; }
.ksl-prices tbody th small { display:block; margin-top:3px; color:var(--k-muted); font-size:.78rem; font-weight:400; }
.ksl-prices td { font-family:Barlow,sans-serif; font-size:1.35rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ksl-prices__copy p { color:var(--k-ink); line-height:1.75; }
.ksl-checks { display:grid; gap:10px; margin:22px 0 28px; padding:0; list-style:none; }
.ksl-checks li { display:flex; gap:10px; color:var(--k-muted); font-size:.92rem; line-height:1.5; }
.ksl-checks svg { flex:0 0 auto; width:20px; height:20px; color:var(--k-blue); }
.ksl-inline-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; }
.ksl-textlink { color:var(--k-blue); font-weight:700; }

/* D · Bewertung */
.ksl-reviews { padding:clamp(72px,9vw,120px) 0; background:var(--k-paper); }
.ksl-reviews__grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.6fr); gap:clamp(36px,6vw,90px); align-items:center; }
.ksl-score { padding:clamp(28px,4vw,44px); border-radius:24px; background:var(--k-hero); color:#fff; text-align:center; box-shadow:0 30px 70px -36px rgba(16,43,64,.7); }
.ksl-score .ksl-kicker { color:#9fc4de; }
.ksl-score__value { display:block; margin:10px 0 4px; font-family:Barlow,sans-serif; font-size:clamp(5rem,10vw,8rem); font-weight:600; line-height:.95; }
.ksl-score__stars { position:relative; display:inline-block; color:rgba(255,255,255,.22); font-size:1.8rem; letter-spacing:4px; }
.ksl-score__stars > span { position:absolute; inset:0 auto 0 0; width:var(--fill); overflow:hidden; color:var(--k-star); white-space:nowrap; }
.ksl-score__of { display:block; margin-top:6px; color:#c9d9e5; font-size:.9rem; }
.ksl-score__extra { display:inline-flex; align-items:center; gap:6px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.16); color:#dbe7f0; font-size:.8rem; text-decoration:none; }
.ksl-score__extra:hover { color:#fff; }
.ksl-score__extra svg { width:14px; height:14px; }
.ksl-promises h3 { margin:0 0 26px; font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.1; }
.ksl-promises__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 36px; }
.ksl-promises__list svg { width:28px; height:28px; color:var(--k-blue); }
.ksl-promises__list b { display:block; margin:10px 0 6px; font-size:1.05rem; }
.ksl-promises__list p { margin:0; color:var(--k-muted); font-size:.9rem; line-height:1.6; }

/* Blickfang: Pümpel */
.ksl-plunger { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:420px; background:#62b3dc; }
.ksl-plunger > img { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; object-position:right center; }
.ksl-plunger__copy { max-width:560px; padding-block:64px; }
.ksl-plunger h2 { color:#0f2a3f; font-size:clamp(2.2rem,4.2vw,3.8rem); }
.ksl-plunger p { margin:0 0 26px; color:#0f2a3f; font-size:1.08rem; font-weight:500; line-height:1.6; }

/* D · Ablauf (Text links, Bild rechts) */
.ksl-process { padding:clamp(72px,9vw,124px) 0; }
.ksl-process__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(36px,6vw,90px); align-items:center; }
.ksl-process__media { order:2; position:relative; margin:0; }
.ksl-process__media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:24px; box-shadow:0 30px 70px -40px rgba(16,43,64,.6); }
.ksl-process__media figcaption { position:absolute; right:14px; bottom:12px; padding:4px 10px; border-radius:6px; background:rgba(16,43,64,.7); color:#dbe7f0; font-size:.68rem; }
.ksl-timeline { margin:26px 0 0; padding:0; list-style:none; }
.ksl-timeline li { display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--k-line); }
.ksl-timeline li:first-child { border-top:0; }
.ksl-timeline li > span { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--k-ink); color:#fff; font-family:Barlow,sans-serif; font-size:1.15rem; font-weight:700; }
.ksl-timeline b { display:block; margin-bottom:4px; font-size:1.08rem; }
.ksl-timeline p { margin:0; color:var(--k-muted); font-size:.92rem; line-height:1.6; }

/* FAQ: Themenlinks */
.ksl-topics { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.ksl-topics span { width:100%; color:var(--k-muted); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.ksl-topics a { padding:7px 13px; border:1px solid var(--k-line); border-radius:999px; color:var(--k-ink); font-size:.82rem; font-weight:600; text-decoration:none; }
.ksl-topics a:hover { background:#edf3f7; }

/* A · Abschlussformular */
.ksl-final { padding:clamp(72px,9vw,124px) 0; background:linear-gradient(140deg,#0f2a3f 0%,var(--k-hero) 55%,#1b4766 100%); color:#fff; }
.ksl-final__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,480px); gap:clamp(36px,6vw,90px); align-items:center; }
.ksl-final .ksl-kicker { color:#9fc4de; }
.ksl-final h2 { color:#fff; }
.ksl-final p { color:#c9d9e5; line-height:1.7; }
.ksl-final__phone { display:inline-flex; align-items:center; gap:12px; margin:8px 0 20px; color:#fff; font-family:Barlow,sans-serif; font-size:clamp(2rem,3.6vw,3rem); font-weight:600; text-decoration:none; }
.ksl-final__phone:hover { color:#f0a7c8; }
.ksl-final__phone svg { width:40px; height:40px; padding:9px; border-radius:50%; background:var(--k-magenta); }
.ksl-final__rating { font-size:.9rem; }
.ksl-final .lead-form { margin:0; }
.ksl-final .lead-form label small, .ksl-bar-form label small { font-weight:400; opacity:.7; }

/* Werbe-Modus */
.is-ad-landing .ksl-topics { display:none; }

/* Responsiv */
@media (max-width:1199.98px) {
  .ksl-page .ksl-bar-form { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .ksl-bar-form__intro { grid-column:1/-1; }
  .ksl-page .ksl-bar-form button { grid-column:1/-1; }
}
@media (max-width:991.98px) {
  .ksl-problems__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ksl-emergency { grid-template-columns:1fr; }
  .ksl-emergency__media { min-height:320px; }
  .ksl-prices__grid, .ksl-reviews__grid, .ksl-process__grid, .ksl-final__grid { grid-template-columns:1fr; }
  .ksl-prices__copy { order:-1; }
  .ksl-process__media { order:0; }
  .ksl-trust__grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:22px; }
  .ksl-trust a:nth-child(3) { border-left:0; }
}
@media (max-width:767.98px) {
  .ksl-hero { min-height:0; align-items:flex-end; }
  .ksl-hero__image { object-position:78% center; }
  .ksl-hero::before { background:linear-gradient(180deg,rgba(16,43,64,.55) 0%,rgba(16,43,64,.9) 45%,rgba(16,43,64,.97) 100%); }
  .ksl-hero__grid { padding-block:120px 96px; }
  .ksl-hero__actions { flex-direction:column; align-items:stretch; }
  .ksl-hero__label { top:12px; bottom:auto; }
  .ksl-quickform { margin-top:-64px; }
  .ksl-page .ksl-bar-form { grid-template-columns:1fr 1fr; padding:20px 18px 14px; }
  .ksl-bar-form__field:not(.ksl-bar-form__field--plz) { grid-column:1/-1; }
  .ksl-bar-form__field--plz { grid-column:1/-1; }
  .ksl-problems__grid { grid-template-columns:1fr; gap:12px; }
  .ksl-problem { padding:22px 20px 20px; }
  .ksl-promises__list { grid-template-columns:1fr; gap:22px; }
  .ksl-plunger { min-height:0; }
  .ksl-plunger > img { opacity:.35; }
  .ksl-final__grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .ksl-page :is(.ksl-btn,.ksl-problem,.ksl-problem__go svg) { transition:none; }
  .ksl-page :is(.ksl-btn,.ksl-problem):hover { transform:none; }
}

/* UI/UX-Korrekturen nach Browser-Messung (06.10.2026) */
/* Formular auf Desktop ohne Scrollen sichtbar */
.ksl-hero { min-height:clamp(540px, calc(100vh - 260px), 740px); }
.ksl-hero__grid { padding-block:clamp(44px,6vw,72px) clamp(104px,10vw,128px); }
.ksl-hero h1 { font-size:clamp(2.5rem,4.8vw,4.4rem); }
/* Lesbare Größen (Basis-Schrift dieser Seite ist klein) */
.ksl-page .ksl-bar-form__field label, .ksl-final .lead-form label { font-size:13px; }
.ksl-page .ksl-bar-form .lead-form__legal, .ksl-final .lead-form__legal { font-size:12px; color:#4a5b69; }
.ksl-page .ksl-bar-form .lead-form__legal a { display:inline-block; padding:6px 2px; }
.ksl-btn--call small, .ksl-problem__price small { font-size:12px; }
.ksl-kicker { font-size:12px; }
.ksl-hero__label, .ksl-emergency__media figcaption, .ksl-process__media figcaption { font-size:11px; }
/* Klickflächen */
.ksl-rating-pill { min-height:44px; }
.ksl-textlink { display:inline-flex; align-items:center; min-height:44px; }
.ksl-score__extra { min-height:44px; }
.ksl-topics a { display:inline-flex; align-items:center; min-height:42px; }
/* Laptop: Formular in zwei statt drei Zeilen */
@media (min-width:992px) and (max-width:1199.98px) {
  .ksl-page .ksl-bar-form { grid-template-columns:minmax(0,1.3fr) minmax(0,.6fr) minmax(0,1fr) minmax(0,1fr) auto; }
  .ksl-page .ksl-bar-form button { grid-column:auto; }
}
/* Handy: Hero kompakter, Formular näher */
@media (max-width:767.98px) {
  .ksl-hero { min-height:0; }
  .ksl-hero__grid { padding-block:56px 92px; }
  .ksl-hero h1 { font-size:clamp(2.1rem,9vw,2.8rem); }
  .ksl-hero__lead { font-size:1rem; }
  .ksl-hero__proof { display:grid; gap:10px; }
}
/* Rhein-Überschrift hell auf dunkel (ksl-h2-Regel hatte sie überschrieben) */
.ksl-page .koeln-veedel h2 { color:#fff; }
/* Rechtstext: legal.css erzwingt 11px/#6a7b8e mit !important */
.ksl-page .lead-form__legal { margin:4px 0 0 !important; color:#4a5b69 !important; font-size:12px !important; }
.ksl-final .lead-form__legal { color:#4a5b69 !important; }
/* Kein Auto-Zoom auf dem iPhone: Eingaben mindestens 16px */
@media (max-width:991.98px) {
  .ksl-page .lead-form :is(input,select,textarea) { font-size:16px !important; }
}
/* Zahlenleiste: „Ansprechpartner“ sprengte auf dem Handy die halbe Breite */
.ksl-trust a { min-width:0; }
.ksl-trust b { overflow-wrap:break-word; hyphens:auto; }
@media (max-width:575.98px) {
  .ksl-trust a { padding:6px 10px; }
  .ksl-trust b { font-size:1.3rem; }
}

/* Hero-Breite (06.10.2026): Text stand bei x=0, weil width:100% die Containerbreite überschrieb.
   Jetzt im selben 1320er-Raster wie Formular und Folgesektionen. */
.ksl-hero > .ksl-hero__grid { width:min(var(--eco-container,1320px), calc(100% - (var(--eco-gutter,24px) * 2))); margin-inline:auto; }
/* Desktop: Foto rechts, ruhige Fläche links – der Monteur bleibt frei vom Text */
@media (min-width:1200px) {
  .ksl-hero__image { inset:0 0 0 auto; width:64%; object-position:62% center; }
  .ksl-hero::before { background:linear-gradient(90deg, var(--k-hero) 0%, var(--k-hero) 36%, rgba(16,43,64,.72) 42%, rgba(16,43,64,.18) 56%, rgba(16,43,64,0) 66%), linear-gradient(0deg, rgba(16,43,64,.5) 0%, rgba(16,43,64,0) 26%); }
}
@media (min-width:992px) and (max-width:1199.98px) {
  .ksl-hero__image { inset:0 0 0 auto; width:60%; object-position:62% center; }
  .ksl-hero::before { background:linear-gradient(90deg, var(--k-hero) 0%, var(--k-hero) 40%, rgba(16,43,64,.7) 46%, rgba(16,43,64,.15) 60%, rgba(16,43,64,0) 70%), linear-gradient(0deg, rgba(16,43,64,.5) 0%, rgba(16,43,64,0) 26%); }
  .ksl-hero__copy { max-width:560px; }
}

/* Zwei-Wege-Umschalter: Notfall anrufen / planbar anfragen (06.10.2026) */
.ksl-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:640px; margin-top:30px; }
.ksl-path { position:relative; display:flex; align-items:center; gap:14px; min-height:84px; padding:14px 18px; border-radius:14px; text-decoration:none; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.ksl-path > svg:first-child { flex:0 0 auto; width:44px; height:44px; padding:11px; border-radius:50%; }
.ksl-path small { display:block; font-size:12.5px; font-weight:600; line-height:1.3; opacity:.9; }
.ksl-path b { display:block; margin-top:3px; font-family:Barlow,sans-serif; font-size:1.25rem; font-weight:600; line-height:1.15; }
.ksl-path--urgent { background:var(--k-magenta); color:#fff; box-shadow:0 18px 40px -18px rgba(166,22,87,.8); }
.ksl-path--urgent > svg:first-child { background:rgba(255,255,255,.2); }
.ksl-path--urgent:hover { background:var(--k-magenta-dark); color:#fff; transform:translateY(-2px); }
.ksl-path--plan { background:#fff; color:var(--k-ink); }
.ksl-path--plan > svg:first-child { background:#e7f0f6; color:var(--k-blue); }
.ksl-path--plan small { color:var(--k-muted); opacity:1; }
.ksl-path--plan:hover { color:var(--k-ink); transform:translateY(-2px); box-shadow:0 18px 40px -22px rgba(0,0,0,.5); }
.ksl-path__arrow { width:18px; height:18px; margin-left:auto; color:var(--k-blue); }
.ksl-path:focus-visible { outline:3px solid #fff; outline-offset:3px; }

/* Formular passt sich an */
.ksl-dyn { grid-column:1/-1; }
.ksl-dyn__urgent { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:#fbeef3; color:var(--k-ink); }
.ksl-dyn__urgent[hidden], .ksl-dyn__plan[hidden] { display:none; }
.ksl-dyn__urgent svg { flex:0 0 auto; width:24px; height:24px; color:var(--k-magenta); }
.ksl-dyn__urgent p { margin:0; font-size:14px; line-height:1.5; }
.ksl-dyn__urgent a { flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:10px; background:var(--k-magenta); color:#fff; font-weight:700; text-decoration:none; }
.ksl-dyn__plan { display:grid; grid-template-columns:repeat(2,minmax(0,220px)) minmax(0,1fr); gap:12px 14px; align-items:end; }
.ksl-dyn__plan label { display:block; margin-bottom:6px; color:var(--k-ink); font-size:13px; font-weight:700; }
.ksl-page .ksl-dyn__plan select { width:100%; height:48px; padding:0 12px; border:1px solid var(--k-line); border-radius:10px; background:#fff; color:var(--k-ink); font:500 .95rem Inter,sans-serif; }
.ksl-dyn__hint { display:flex; align-items:center; gap:8px; margin:0; color:var(--k-muted); font-size:13px; line-height:1.45; }
.ksl-dyn__hint svg { flex:0 0 auto; width:18px; height:18px; color:var(--k-blue); }
.ksl-final .ksl-dyn { margin:0 0 16px; }
.ksl-final .ksl-dyn__plan { grid-template-columns:1fr 1fr; }
.ksl-final .ksl-dyn__hint { grid-column:1/-1; }
.ksl-photo-link { display:inline-flex; align-items:center; min-height:40px; margin-top:6px; padding:0 14px; border-radius:10px; background:var(--k-ink); color:#fff !important; font-weight:700; text-decoration:none; }

/* Notdienst-Bedingungen offen */
.ksl-terms { margin-top:26px; padding:20px 22px; border-radius:16px; background:rgba(255,255,255,.07); }
.ksl-terms > b { display:block; margin-bottom:10px; color:#fff; font-size:.98rem; }
.ksl-terms dl { margin:0; }
.ksl-terms dl > div { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-top:1px solid rgba(255,255,255,.12); }
.ksl-terms dt { color:#c9d9e5; font-weight:500; font-size:.9rem; }
.ksl-terms dd { margin:0; color:#fff; font-weight:700; font-size:.9rem; white-space:nowrap; }
.ksl-terms p { margin:10px 0 0; color:#a9c0d1; font-size:12.5px; line-height:1.55; }

/* Stadtteil aus der Anzeige hervorheben */
.koeln-veedel__side li.is-match strong { color:#f0a7c8; }
.koeln-veedel__side li.is-match strong::after { content:" · Ihr Veedel"; color:#f0a7c8; font-family:Inter,sans-serif; font-size:.75rem; font-weight:700; }

@media (max-width:767.98px) {
  .ksl-paths { grid-template-columns:1fr; }
  .ksl-dyn__plan { grid-template-columns:1fr 1fr; }
  .ksl-dyn__hint { grid-column:1/-1; }
  .ksl-dyn__urgent { flex-wrap:wrap; }
}
/* Versicherung als Vertrauensbeleg */
.ksl-final__insured { display:inline-block; margin-top:6px; color:#dbe7f0; font-size:.86rem; }
#versicherung { scroll-margin-top:calc(var(--header-total,110px) + 30px); }
/* Desktop: Hero etwas kompakter, damit die Formularleiste sichtbar bleibt */
@media (min-width:992px) {
  .ksl-hero__grid { padding-block:clamp(32px,4vw,52px) clamp(96px,8vw,112px); }
  .ksl-hero h1 { margin:16px 0 14px; }
  .ksl-paths { margin-top:24px; }
  .ksl-hero__proof { margin-top:20px; gap:8px 24px; }
}

.ksl-page :is(h1,h2,h3,.ksl-hero__kw,.ksl-problem__title,.ksl-trust b) { overflow-wrap:break-word; hyphens:auto; }

/* Brotkrümel auf Landingpages: lange Pfade (z. B. Düsseldorf › Heizung › Heizungsoptimierung) umbrechen statt überlaufen */
.ksl-page .eco-breadcrumbs { flex-wrap:wrap; row-gap:4px; min-width:0; }

/* Preistabelle „Klempnerarbeiten“ (ersetzt die Preis-Kacheln) */
.ksl-pricetable-wrap { overflow:hidden; border:1px solid var(--k-line); border-radius:22px; background:#fff; box-shadow:0 30px 70px -44px rgba(16,43,64,.55); }
.ksl-pricetable { width:100%; border-collapse:collapse; }
.ksl-pricetable thead th { padding:16px 22px; background:var(--k-hero); color:#dbe7f0; font-size:12px; font-weight:700; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.ksl-pricetable thead th:nth-child(3) { text-align:right; }
.ksl-pricetable tbody tr { transition:background .15s ease; }
.ksl-pricetable tbody tr:hover { background:#f4f8fb; }
.ksl-pricetable tbody :is(th,td) { padding:18px 22px; border-top:1px solid var(--k-line); text-align:left; vertical-align:middle; }
.ksl-pricetable tbody tr:first-child :is(th,td) { border-top:0; }
.ksl-pricetable tbody th { display:flex; align-items:center; gap:14px; min-width:220px; font-weight:600; }
.ksl-pt__icon { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#e7f0f6; color:var(--k-blue); }
.ksl-pt__icon svg { width:22px; height:22px; }
.ksl-pt__title { font-family:Barlow,sans-serif; font-size:1.25rem; line-height:1.2; color:var(--k-ink); }
.ksl-pt__text { color:var(--k-muted); font-size:.92rem; line-height:1.55; }
.ksl-pt__price { text-align:right !important; white-space:nowrap; }
.ksl-pt__price small { display:block; color:var(--k-muted); font-size:12px; }
.ksl-pt__price b { display:block; font-family:Barlow,sans-serif; font-size:1.45rem; font-weight:600; color:var(--k-ink); font-variant-numeric:tabular-nums; }
.ksl-pt__action { width:1%; white-space:nowrap; }
.ksl-pt__btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--k-magenta); border-radius:10px; background:#fff; color:var(--k-magenta); font-weight:700; font-size:.9rem; cursor:pointer; transition:background .15s ease, color .15s ease; }
.ksl-pt__btn svg { width:16px; height:16px; }
.ksl-pt__btn:hover, .ksl-pt__btn:focus-visible { background:var(--k-magenta); color:#fff; }
.ksl-pricetable__note { margin:0; padding:14px 22px; border-top:1px solid var(--k-line); background:var(--k-paper); color:var(--k-muted); font-size:13px; }
.ksl-pricetable__note a { color:var(--k-blue); font-weight:600; }
@media (max-width:767.98px) {
  .ksl-pricetable thead { display:none; }
  .ksl-pricetable tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title price" "text text" "action action"; gap:6px 12px; padding:16px; border-top:1px solid var(--k-line); }
  .ksl-pricetable tbody tr:first-child { border-top:0; }
  .ksl-pricetable tbody :is(th,td) { padding:0; border:0; }
  .ksl-pricetable tbody th { grid-area:title; min-width:0; }
  .ksl-pt__text { grid-area:text; }
  .ksl-pt__price { grid-area:price; }
  .ksl-pt__action { grid-area:action; width:auto; }
  .ksl-pt__btn { width:100%; justify-content:center; }
  .ksl-pt__title { font-size:1.1rem; }
  .ksl-pt__price b { font-size:1.25rem; }
}

/* Variante B: ein Preisblock mit Karten + Leiste für Zeit, Anfahrt, Material (06.10.2026) */
.ksl-pricing { padding:clamp(72px,9vw,120px) 0; background:var(--k-paper); }
.ksl-pricing__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ksl-pcard { display:flex; flex-direction:column; gap:14px; padding:24px 24px 22px; border:1px solid var(--k-line); border-radius:20px; background:#fff; box-shadow:0 1px 2px rgba(16,43,64,.05); transition:transform .22s ease, box-shadow .22s ease; }
.ksl-pcard:hover { transform:translateY(-4px); box-shadow:0 26px 50px -32px rgba(16,43,64,.5); }
.ksl-pcard__top { display:flex; gap:14px; align-items:center; }
.ksl-pcard__icon { flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:#e7f0f6; color:var(--k-blue); }
.ksl-pcard__icon svg { width:22px; height:22px; }
.ksl-pcard h3 { margin:0; font-size:1.3rem; line-height:1.15; }
.ksl-pcard__top p { margin:2px 0 0; color:var(--k-muted); font-size:13px; }
.ksl-pcard__price { display:flex; align-items:baseline; gap:6px; margin:4px 0 0; padding:14px 0; border-top:1px solid var(--k-line); border-bottom:1px solid var(--k-line); font-family:Barlow,sans-serif; font-size:2.5rem; font-weight:600; line-height:1; color:var(--k-ink); font-variant-numeric:tabular-nums; }
.ksl-pcard__price small { font-family:Inter,sans-serif; font-size:14px; font-weight:600; color:var(--k-muted); }
.ksl-pcard__incl { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
.ksl-pcard__incl li { display:flex; gap:8px; align-items:flex-start; color:var(--k-ink); font-size:14px; line-height:1.45; }
.ksl-pcard__incl svg { flex:0 0 auto; width:16px; height:16px; margin-top:2px; color:#2f8a5b; }
.ksl-pcard__excl { margin:0; color:var(--k-muted); font-size:12.5px; line-height:1.5; }
.ksl-pcard__btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin-top:auto; border:1px solid var(--k-magenta); border-radius:12px; background:#fff; color:var(--k-magenta); font-weight:700; cursor:pointer; transition:background .15s ease, color .15s ease; }
.ksl-pcard__btn svg { width:16px; height:16px; }
.ksl-pcard__btn:hover, .ksl-pcard__btn:focus-visible { background:var(--k-magenta); color:#fff; }
.ksl-pricing__extra { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:22px; padding:22px 24px; border-radius:20px; background:var(--k-hero); color:#fff; }
.ksl-pricing__extra > div { display:flex; gap:12px; align-items:center; }
.ksl-pricing__extra svg { flex:0 0 auto; width:40px; height:40px; padding:9px; border-radius:12px; background:rgba(255,255,255,.1); color:#9fc4de; }
.ksl-pricing__extra b { display:block; font-family:Barlow,sans-serif; font-size:1.25rem; font-weight:600; }
.ksl-pricing__extra small { display:block; color:#c9d9e5; font-size:12.5px; line-height:1.4; }
.ksl-pricing__note { margin:16px 0 0; color:var(--k-muted); font-size:13px; text-align:center; }
.ksl-pricing__note a { color:var(--k-blue); font-weight:600; }
@media (max-width:1100px) {
  .ksl-pricing__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ksl-pricing__extra { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .ksl-pricing__grid { grid-template-columns:1fr; gap:12px; }
  .ksl-pcard { padding:20px; }
  .ksl-pcard__price { font-size:2.2rem; }
  .ksl-pricing__extra { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .ksl-pcard, .ksl-pcard:hover { transition:none; transform:none; } }
/* Handy: kompakte Preiskarten (Preis neben dem Titel, Leistungen als Kurzliste) */
@media (max-width:640px) {
  .ksl-pcard { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; padding:18px; }
  .ksl-pcard__top { grid-column:1; }
  .ksl-pcard__icon { width:40px; height:40px; }
  .ksl-pcard h3 { font-size:1.12rem; }
  .ksl-pcard__price { grid-column:2; grid-row:1; flex-direction:column; align-items:flex-end; gap:0; margin:0; padding:0; border:0; font-size:1.6rem; text-align:right; }
  .ksl-pcard__price small { font-size:12px; }
  .ksl-pcard__incl { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 12px; }
  .ksl-pcard__incl li { font-size:13px; }
  .ksl-pcard__excl { grid-column:1 / -1; }
  .ksl-pcard__btn { grid-column:1 / -1; min-height:44px; }
}

/* Variante B, Runde 2: Versicherung + Wärmepumpen-Band */
.ksl-problems--b .ksl-pricing__extra { margin-top:18px; }
.ksl-insured { padding:clamp(72px,9vw,120px) 0; background:#fff; }
.ksl-insured__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,88px); align-items:center; }
.ksl-insured__badge { margin:0; padding:clamp(16px,2.5vw,28px); border-radius:28px; background:#fff; box-shadow:0 34px 70px -40px rgba(16,43,64,.45); border:1px solid var(--k-line); }
.ksl-insured__badge img { display:block; width:100%; height:auto; }
.ksl-insured__copy p { color:var(--k-ink); line-height:1.75; }

.ksl-wp { padding:clamp(56px,7vw,96px) 0; background:#fff; }
.ksl-wp__box { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,64px); align-items:center; padding:clamp(28px,4.5vw,56px); border-radius:28px; background:linear-gradient(140deg,#0f2a3f 0%,#173f5c 60%,#1f5378 100%); color:#fff; box-shadow:0 34px 70px -40px rgba(16,43,64,.7); }
.ksl-wp .ksl-kicker { color:#9fc4de; }
.ksl-page .ksl-wp h2 { color:#fff; font-size:clamp(2rem,3.4vw,3rem); }
.ksl-wp__copy p { color:#d5e3ee; line-height:1.7; }
.ksl-wp__chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 26px; padding:0; list-style:none; }
.ksl-wp__chips li { padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:600; }
.ksl-wp__link { color:#fff; }
.ksl-wp__link:hover { color:#f0a7c8; }
.ksl-wp__media { margin:0; }
.ksl-wp__media img { display:block; width:100%; height:auto; border-radius:18px; }
.ksl-wp__media figcaption { margin-top:10px; color:#a9c0d1; font-size:12px; line-height:1.5; }

@media (max-width:991.98px) {
  .ksl-insured__grid, .ksl-wp__box { grid-template-columns:1fr; }
  .ksl-insured__badge { max-width:520px; }
  .ksl-wp__media { order:-1; }
}

/* Nur Variante B: Hero kompakter, Ablauf als 3-Schritte-Leiste */
.ksl-v2 .ksl-hero h1 { font-size:clamp(2.2rem,3.9vw,3.6rem); margin:16px 0 14px; }
@media (min-width:992px) {
  .ksl-v2 .ksl-hero__grid { padding-block:clamp(28px,3.5vw,44px) clamp(96px,8vw,112px); }
  .ksl-v2 .ksl-hero__lead { font-size:1rem; }
}
.ksl-v2 .ksl-process { padding:clamp(48px,6vw,80px) 0; }
.ksl-v2 .ksl-process__grid { grid-template-columns:1fr; gap:24px; }
.ksl-v2 .ksl-process__media { display:none; }
.ksl-v2 .ksl-process__copy { text-align:center; }
.ksl-v2 .ksl-process__copy h2 br { display:none; }
.ksl-v2 .ksl-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:26px; text-align:left; }
.ksl-v2 .ksl-timeline li { flex-direction:column; gap:12px; padding:22px; border:1px solid var(--k-line); border-radius:18px; background:#fff; }
.ksl-v2 .ksl-timeline li:first-child { border-top:1px solid var(--k-line); }
@media (max-width:767.98px) {
  .ksl-v2 .ksl-timeline { grid-template-columns:1fr; gap:10px; }
  .ksl-v2 .ksl-timeline li { flex-direction:row; padding:16px; }
}

/* ===== Sanitär v2 (Hauptseite Essen): durchgehend weiße Flächen, Siegel im Hero, ein Vertrauens-Abschnitt ===== */
.ksl-v2 :is(.ksl-trust, .ksl-problems, .ksl-process, .ksl-trustblock, .ksl-wp) { background:#fff; }
.ksl-v2 .ksl-problems { padding-top:clamp(48px,6vw,80px); }
.ksl-v2 .ksl-process { padding-top:0; }

/* Siegel-Karte im Hero (nur Desktop – auf dem Handy bleibt der Hero schlank) */
.ksl-hero__seal { position:absolute; z-index:2; right:max(24px, calc((100vw - 1320px) / 2)); bottom:clamp(128px,11vw,156px); display:grid; gap:6px; width:clamp(190px,15vw,230px); padding:10px 10px 12px; border-radius:18px; background:#fff; color:var(--k-ink); text-align:center; text-decoration:none; box-shadow:0 26px 50px -24px rgba(0,0,0,.55); transition:transform .2s ease; }
.ksl-hero__seal:hover { color:var(--k-ink); transform:translateY(-3px); }
.ksl-hero__seal img { display:block; width:100%; height:auto; border-radius:10px; }
.ksl-hero__seal span { font-size:12.5px; font-weight:700; }
@media (max-width:991.98px) { .ksl-hero__seal { display:none; } }

/* Vertrauen: Bewertung + Allianz nebeneinander, darunter vier Zusagen */
.ksl-trustblock { padding:clamp(72px,9vw,120px) 0; }
.ksl-trustblock__grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:20px; align-items:stretch; }
.ksl-trustblock .ksl-score { display:flex; flex-direction:column; justify-content:center; }
.ksl-trustblock__seal { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; align-items:center; margin:0; padding:clamp(18px,2.5vw,28px); border:1px solid var(--k-line); border-radius:24px; background:#fff; box-shadow:0 30px 60px -44px rgba(16,43,64,.5); }
.ksl-trustblock__seal img { display:block; width:100%; height:auto; }
.ksl-trustblock__seal figcaption { color:var(--k-muted); font-size:.95rem; line-height:1.6; }
.ksl-trustblock__seal figcaption b { display:block; margin-bottom:6px; color:var(--k-ink); font-family:Barlow,sans-serif; font-size:1.6rem; font-weight:600; line-height:1.15; }
.ksl-trustblock__promises { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; margin-top:20px; }
.ksl-trustblock__promises > div { padding:20px; border:1px solid var(--k-line); border-radius:18px; background:#fff; }
.ksl-trustblock__promises b { margin-top:10px; }
.ksl-trustblock__cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 24px; margin-top:30px; }
@media (max-width:1100px) {
  .ksl-trustblock__grid { grid-template-columns:1fr; }
  .ksl-trustblock__promises { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:640px) {
  .ksl-trustblock__seal { grid-template-columns:1fr; text-align:center; }
  .ksl-trustblock__promises { grid-template-columns:1fr !important; }
}

/* Preis-Kopf: Überschrift links, dunkle Preis-Box rechts */
.ksl-pricehead { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:end; margin-bottom:clamp(28px,4vw,44px); }
.ksl-pricehead .ksl-head { margin:0; }
.ksl-pricehead .ksl-head h2 { font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.05; }
.ksl-pricehead__box { display:grid; gap:4px; padding:clamp(22px,3vw,32px); border-radius:24px; background:var(--k-hero); color:#fff; box-shadow:0 30px 60px -36px rgba(16,43,64,.7); }
.ksl-pricehead__box span { color:#b9cddb; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.ksl-pricehead__box strong { font-family:Barlow,sans-serif; font-size:clamp(3rem,6vw,4.6rem); font-weight:600; line-height:1; }
.ksl-pricehead__box small { color:#c9d9e5; font-size:13px; }
@media (max-width:767.98px) { .ksl-pricehead { grid-template-columns:1fr; } }

/* Ablauf als Foto-Band (Kokerei Zollverein), läuft nahtlos in den dunklen Notfall-Block über */
.ksl-v2 .ksl-process.ksl-process--photo { position:relative; isolation:isolate; overflow:hidden; padding:clamp(96px,12vw,170px) 0 clamp(64px,8vw,104px); background:var(--k-hero); color:#fff; }
.ksl-process__bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.ksl-process--photo::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(16,43,64,.55) 0%, rgba(16,43,64,.78) 55%, var(--k-hero) 100%); }
.ksl-page .ksl-process--photo h2 { color:#fff; font-size:clamp(2.2rem,4.4vw,3.8rem); }
.ksl-process--photo .ksl-kicker { color:#9fd0f5; }
.ksl-process__lead { max-width:52ch; margin:10px auto 0; color:rgba(255,255,255,.86); font-size:1.05rem; }
.ksl-v2 .ksl-process--photo .ksl-timeline li { border:0; box-shadow:0 30px 60px -30px rgba(0,0,0,.55); }
.ksl-v2 .ksl-process--photo .ksl-timeline b { color:var(--k-ink); }

/* Preis-Box als Rechnung: Festpreis + Anfahrt = Gesamt */
.ksl-pricehead__box { gap:12px; }
.ksl-calc { display:grid; gap:0; margin:0; }
.ksl-calc > div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:10px 0; border-top:1px solid rgba(255,255,255,.16); }
.ksl-calc > div:first-child { border-top:0; padding-top:4px; }
.ksl-calc dt { color:#c9d9e5; font-size:.95rem; font-weight:500; }
.ksl-calc dd { margin:0; color:#fff; font-family:Barlow,sans-serif; font-size:1.35rem; font-weight:600; white-space:nowrap; }
.ksl-calc .ksl-calc__sum { margin-top:4px; padding-top:14px; border-top:2px solid rgba(255,255,255,.5); }
.ksl-calc .ksl-calc__sum dt { color:#fff; font-weight:700; }
.ksl-calc .ksl-calc__sum dd { font-size:clamp(2rem,3.4vw,2.8rem); line-height:1; }
.ksl-pricehead { align-items:center; }
.ksl-pricetable th small { display:block; font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; opacity:.8; }
.ksl-pricing__extra-title { margin:clamp(28px,4vw,40px) 0 12px; color:var(--k-ink); font-family:Barlow,sans-serif; font-size:1.25rem; font-weight:600; text-align:center; }
.ksl-pricing__extra-title + .ksl-pricing__extra { margin-top:0; }
/* FAQ ebenfalls weiß – kein Farbwechsel zwischen Wärmepumpe und Fragen */
.ksl-v2 .service-master-faq { background:#fff; }

/* Zeittarif-Leiste (3 Punkte) + Anfahrtszonen direkt darunter, als ein Block */
.ksl-pricing__extra.ksl-pricing__extra--3 { grid-template-columns:repeat(3,minmax(0,1fr)); border-radius:20px 20px 0 0; }
.ksl-zones { display:flex; align-items:center; gap:14px 28px; padding:16px 24px 18px; border:1px solid var(--k-line); border-top:0; border-radius:0 0 20px 20px; background:#fff; }
.ksl-zones > b { display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--k-ink); font-size:.95rem; }
.ksl-zones > b svg { width:20px; height:20px; color:var(--k-blue); }
.ksl-zones ul { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; flex:1; margin:0; padding:0; list-style:none; }
.ksl-zones li { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; padding:8px 12px; border-radius:12px; background:var(--k-paper, #f4f6f8); }
.ksl-zones li span { color:var(--k-ink); font-size:.9rem; font-weight:700; }
.ksl-zones li small { grid-column:1; color:var(--k-muted); font-size:12px; }
.ksl-zones li b { grid-column:2; grid-row:1 / span 2; align-self:center; justify-self:end; color:var(--k-ink); font-family:Barlow,sans-serif; font-size:1.15rem; font-weight:600; white-space:nowrap; }
@media (max-width:991.98px) {
  .ksl-zones { flex-direction:column; align-items:stretch; }
  .ksl-zones ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) { .ksl-pricing__extra.ksl-pricing__extra--3 { grid-template-columns:1fr; } }