/* Faszination Pool – Entwurf. Vokabular: Beckenkachel, Fuge, Technik-Skizze, Poolnudel. */
:root {
  --tief: #0b4655;       /* Petrol: Überschriften, Navigation, Footer */
  --kachel: #168aad;     /* Pool-Blau: Nummern, Links, Akzente */
  --tuerkis: #14a3a0;    /* Frisches Türkis: Häkchen, positive Elemente */
  --logo-akzent: #12948f; /* "freund" im Logo, etwas dunkler für Kontrast auf Weiß */
  --wasser: #8fd3df;     /* Wasser in der Skizze */
  --chlor: #f4fafa;      /* Hintergrund: helles, leicht warmes Aqua-Weiß */
  --weiss: #ffffff;
  --fuge: #cfe3e8;       /* Linien, Rahmen */
  --rahmen: #cbe6ec;     /* dezenter blau-türkiser Kartenrahmen */
  --tint-aqua: #eef8f9;  /* Karte Wasser-Check */
  --tint-warm: #fff8f2;  /* Karte Heizkosten */
  --tint-warm-rand: #f2e2d3;
  --schatten: 0 1px 2px rgba(11, 70, 85, .05), 0 8px 24px rgba(11, 70, 85, .06);
  --grau: #48646d;
  --nudel: #f25f3a;      /* Orange: nur wichtige Aktionen */
  --sonne: #ffc94a;
  --sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  --wrap: 1180px;
  /* Design-Tokens (Referenz: mein-pool.html). Radien: große Flächen 16, Eingaben/Knöpfe 12, Kleines 8. Pillen nur für Status. */
  --r-l: 16px; --r-m: 12px; --r-s: 8px;
  /* Textebenen: H1 · H2 · große Zahl · Text · Label/Meta */
  --fs-h2: 20px; --fs-num: clamp(26px, 7vw, 34px); --fs-body: 16px; --fs-meta: 14px;
  /* Abstände mobil: Sektion 32–48, Innenabstand 16–20, Datenzeilen 10–14 */
  --sp-sec: clamp(32px, 6vw, 48px); --sp-in: 18px; --sp-row: 12px;
  /* Aktion: einzige Akzentfarbe für Links und Auswahl (Kontrast ≥ 4,5 : 1) */
  --action: #0e7f93;
}
@media (prefers-color-scheme: dark) {
  :root { --tief: #e6f2f4; --chlor: #0b1e25; --weiss: #112a33; --fuge: #24434d; --grau: #9fb7bd; --kachel: #5bb7da; --wasser: #2a6f80;
    --tuerkis: #4cc9c4; --logo-akzent: #4cc9c4; --rahmen: #24434d; --tint-aqua: #123039; --tint-warm: #2a2a2c; --tint-warm-rand: #3b3530; --schatten: none;
    --action: #5fd3cf; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--chlor); color: var(--tief); font: 18px/1.6 var(--sans); font-optical-sizing: auto; }
h1, h2, h3 { font-family: var(--sans); line-height: 1.05; margin: 0; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(42px, 7vw, 84px); font-variation-settings: 'opsz' 96; }
h2 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 20px; font-variation-settings: 'opsz' 72; }
h3 { font-size: 23px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
a { color: var(--kachel); }
:focus-visible { outline: 3px solid var(--nudel); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.hand { font-family: var(--hand); font-weight: 700; }

/* Entwurfsleiste nicht mehr öffentlich zeigen (bleibt im HTML, falls eine Vorschau sie wieder braucht) */
.draft-note { display: none; }

/* Kopf: Kachelreihe als Beckenrand */
.top { background: var(--weiss); border-bottom: 1px solid var(--fuge); position: relative; }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px;
  background: repeating-linear-gradient(90deg, var(--kachel) 0 22px, var(--chlor) 22px 24px); opacity: .9; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.logo { font-weight: 800; font-size: 28px; text-decoration: none; color: var(--tief); letter-spacing: -0.03em; }
/* Logo Faszination Pool: Bildmarke + zweizeilige Wortmarke, „Faszination“ klein und gesperrt, „Pool“ kräftig */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-icon { display: block; flex: none; }
.logo-text { display: block; }
.logo-pre { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--kachel); line-height: 1.2; }
.logo b { display: block; font-weight: 800; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; color: var(--tief); line-height: 1; }
.foot .logo-pre { color: #5fd3cf; }
.foot .logo b { color: #fff; font-size: 22px; }
.menu { display: flex; gap: 22px; font-size: 16px; font-weight: 600; }
.menu a { text-decoration: none; color: var(--tief); }
.menu a[aria-current="page"] { color: var(--kachel); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-toggle { display: none; }
@media (max-width: 980px) { .menu { gap: 14px; font-size: 15px; } } /* fünf Menüpunkte passen auch auf Tablets */

main > section { padding: clamp(48px, 7vw, 96px) 0; }

.btn { display: inline-block; text-decoration: none; font: 700 17px var(--sans); padding: 13px 22px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.btn-main { background: var(--nudel); color: #fff; }
.btn-main:hover { filter: brightness(.94); }
.btn-line { border-color: var(--kachel); color: var(--kachel); background: transparent; }

/* Hero mit Skizze */
.hero .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 76px); text-wrap: balance; hyphens: manual; }
.sketch .salz-l { text-anchor: end; }
.lead { font-size: 21px; color: var(--grau); max-width: 30em; margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.sketch-box { background: var(--weiss); border: 1px solid var(--fuge); border-radius: 18px; padding: 14px;
  background-image: linear-gradient(var(--fuge) 1px, transparent 1px), linear-gradient(90deg, var(--fuge) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; }
.sketch { width: 100%; height: auto; display: block; }
.sketch .pipe { fill: none; stroke: var(--tief); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.sketch .flow { fill: none; stroke: var(--wasser); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 14; animation: flow 1.6s linear infinite; }
.sketch .flow.back { animation-duration: 1.6s; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.sketch .basin { fill: var(--wasser); stroke: var(--tief); stroke-width: 4; }
.sketch .wave { fill: none; stroke: var(--weiss); stroke-width: 3; stroke-linecap: round; opacity: .8; }
.sketch .body { fill: var(--weiss); stroke: var(--tief); stroke-width: 4; stroke-linejoin: round; }
.sketch .ink { fill: var(--tief); }
.sketch .lbl { font: 700 25px var(--hand); fill: var(--tief); }
.sketch .part { cursor: pointer; }
.sketch .part .hit { fill: transparent; pointer-events: all; } /* große unsichtbare Tippfläche fürs Handy */
.sketch .part .pin { fill: var(--nudel); stroke: var(--weiss); stroke-width: 3; }
.sketch .part .pin-t { font: 800 15px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sketch .part:hover .body, .sketch .part:focus .body, .sketch .part.active .body { fill: #ffe9e2; stroke: var(--nudel); }
.sketch .part:focus { outline: none; }
.sketch .part:focus-visible .pin { stroke: var(--sonne); stroke-width: 5; }
.sketch-hint { font: 700 24px var(--hand); color: var(--grau); margin: 6px 6px 0; }

.part-card { margin-top: 14px; background: var(--weiss); border: 2px solid var(--nudel); border-radius: 14px; padding: 18px 20px; }
.part-card h3 { margin-bottom: 6px; }
.part-card .tip { border-left: 4px solid var(--sonne); padding: 6px 12px; margin: 12px 0; background: var(--chlor); }
.part-card .tip b { font-family: var(--hand); font-size: 22px; }
.part-card .buy { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 15px; color: var(--grau); }

/* Kaufreise */
.journey { background: var(--weiss); }
.journey-list { list-style: none; counter-reset: j; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 6px solid var(--kachel); }
.journey-list li { counter-increment: j; padding: 18px 18px 0 0; }
.journey-list li::before { content: counter(j); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kachel); color: #fff; font-weight: 800; margin: -38px 0 14px; border: 4px solid var(--weiss); }
.journey-list h3 { font-size: 20px; margin-bottom: 6px; }
.journey-list p { font-size: 16px; color: var(--grau); }

/* Teaser-Raster: unterschiedliche Größen nach Gewicht */
.tiles { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.tile { background: var(--weiss); border: 1px solid var(--fuge); padding: 26px; text-decoration: none; color: var(--tief); display: flex; flex-direction: column; gap: 8px; border-radius: 4px; }
.tile:hover { border-color: var(--kachel); }
.tile.big { grid-row: span 2; background: var(--tief); color: var(--chlor); border: 0; justify-content: flex-end; min-height: 340px;
  background-image: radial-gradient(circle at 80% 20%, rgba(143,211,223,.35), transparent 50%); }
.tile.big p { color: #b9d4da; }
.tile p { margin: 0; color: var(--grau); font-size: 16px; }
.tile .more { margin-top: auto; font-weight: 700; color: var(--nudel); }
.tile.big .more { margin-top: 12px; }

.notice { font-size: 14px; color: var(--grau); border-top: 1px solid var(--fuge); padding-top: 14px; margin-top: 28px; }

/* Platzhalter für eigene Erfahrungen */
.yours { border: 2px dashed var(--kachel); border-radius: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--kachel) 6%, transparent); }
.yours .who { font: 700 22px var(--hand); color: var(--kachel); display: block; }
.yours p { margin: 4px 0 0; font-size: 16px; color: var(--grau); }

/* Inhaltsseiten */
.page-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: 12px; }
.page-head p { font-size: 20px; color: var(--grau); max-width: 36em; margin-top: 14px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; font-size: 16px; }
.facts b { display: block; font-size: 13px; color: var(--grau); font-weight: 600; }

.howto { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: 20px; font-size: 15px; }
.toc ol { padding-left: 22px; margin: 8px 0 0; display: grid; gap: 4px; }
.toc a { color: var(--tief); text-decoration: none; }
.toc a:hover { color: var(--kachel); }
.need { background: var(--weiss); border: 1px solid var(--fuge); padding: 18px 20px; border-radius: 12px; margin-top: 18px; }
.need h3 { font-size: 18px; margin-bottom: 6px; }
.need ul { margin: 0; padding-left: 20px; font-size: 15px; }
.need ul + h3 { margin-top: 14px; }
/* Material und Werkzeug aufgeklappt: Das Inhaltsverzeichnis darf nicht mehr kleben, sonst schiebt es sich über die Liste */
.howto aside:has(details[open]) .toc { position: static; }
@media (max-width: 980px) {
  /* Einspaltig und im normalen Fluss: geöffnete Bereiche schieben alles Folgende nach unten */
  .howto aside, .howto .need, .howto .step { position: static; height: auto; max-height: none; overflow: visible; }
  .howto .need[open] { margin-bottom: 32px; }
  .howto .need ul { display: block; columns: auto; }
}
.step { padding: 0 0 40px; border-bottom: 1px solid var(--fuge); margin-bottom: 40px; scroll-margin-top: 20px; }
.step h2 { font-size: clamp(26px, 3vw, 34px); display: flex; gap: 14px; align-items: baseline; }
.step h2 .n { color: var(--kachel); font-size: .8em; min-width: 1.6em; }
.step .meta { font-size: 14px; color: var(--grau); margin: -8px 0 14px; }
.step .warn { background: #fff4d6; color: #5a4200; border-radius: 8px; padding: 10px 14px; font-size: 16px; }

/* Rechner */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.calc form { background: var(--weiss); border: 1px solid var(--fuge); border-radius: 16px; padding: 24px; display: grid; gap: 18px; }
.calc fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.calc legend { font-weight: 800; font-size: 19px; margin-bottom: 4px; }
.shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shapes label { border: 2px solid var(--fuge); border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; font-weight: 600; font-size: 15px; }
.shapes input { position: absolute; opacity: 0; }
.shapes label:has(input:checked) { border-color: var(--kachel); background: color-mix(in srgb, var(--kachel) 10%, transparent); }
.shapes label:has(input:focus-visible) { outline: 3px solid var(--nudel); outline-offset: 2px; }
.shapes svg { width: 44px; height: 30px; display: block; margin: 0 auto 4px; fill: var(--wasser); stroke: var(--tief); stroke-width: 2; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.calc label.f { display: grid; gap: 4px; font-size: 14px; color: var(--grau); font-weight: 600; }
.calc input[type=number], .calc select { font: 17px var(--sans); padding: 10px 12px; border: 2px solid var(--fuge); border-radius: 8px; background: var(--chlor); color: var(--tief); width: 100%; }
.check { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.check input { width: 20px; height: 20px; accent-color: var(--kachel); }
.results { display: grid; gap: 12px; position: sticky; top: 20px; }
.res { background: var(--weiss); border: 1px solid var(--fuge); border-radius: 14px; padding: 16px 20px; }
.res.main { background: var(--tief); color: var(--chlor); border: 0; }
.res h3 { font-size: 15px; font-weight: 600; color: var(--grau); margin-bottom: 2px; }
.res.main h3 { color: #b9d4da; }
.res .v { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.res .s { font-size: 15px; color: var(--grau); }
.res.main .s { color: #b9d4da; }
.res .link { font-size: 15px; font-weight: 700; color: var(--nudel); }

/* Game-Changer */
.gc { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.gc article { background: var(--weiss); border: 1px solid var(--fuge); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.gc .cat { font-size: 14px; font-weight: 700; color: var(--kachel); }
.gc .why { font-size: 16px; color: var(--grau); margin: 0; }
.gc .buy { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--grau); }

.foot { background: var(--tief); color: #b9d4da; padding: 36px 0; font-size: 14px; margin-top: 40px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.foot p { margin: 0; }
.foot .logo { color: #fff; font-size: 24px; }
.foot a { color: #fff; }

@media (max-width: 980px) {
  .hero .wrap, .calc, .howto { grid-template-columns: minmax(0, 1fr); }
  .journey-list { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 6px solid var(--kachel); }
  .journey-list li { padding: 0 0 18px 26px; }
  .journey-list li::before { margin: 0 0 8px -46px; }
  .toc { position: static; }
  .results { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--weiss); flex-direction: column; padding: 16px; gap: 14px; border-bottom: 1px solid var(--fuge); z-index: 5; }
  .menu.open { display: flex; }
  .menu-toggle { display: inline-block; font: 700 16px var(--sans); background: none; border: 2px solid var(--fuge); border-radius: 999px; padding: 8px 14px; color: var(--tief); min-height: 44px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile.big { grid-row: auto; min-height: 260px; }
  .lead { font-size: 19px; }
  .hero h1 { font-size: 36px; }
  .sketch .lbl { font-size: 30px; }
}

/* Schlanke Detail-Elemente */
details summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
details[open] summary { margin-bottom: 6px; }
.part-card details p { font-size: 16px; color: var(--grau); }
.ours { font-size: 15px; color: var(--grau); margin: 10px 0 0; }
.ours span { font-family: var(--hand); font-size: 20px; color: var(--kachel); }
.res-list { margin: 0; background: var(--weiss); border: 1px solid var(--fuge); border-radius: 14px; padding: 6px 20px; }
.res-list div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fuge); }
.res-list div:last-child { border-bottom: 0; }
.res-list dt { color: var(--grau); }
.res-list dd { margin: 0; font-weight: 800; font-size: 20px; }
.fine { font-size: 14px; color: var(--grau); margin: 0; }
.calc details.more .row { margin-top: 12px; }

/* ---------- Grundlayout Version 1 ---------- */
.home-hero { padding: clamp(28px, 5vw, 56px) 0 clamp(28px, 4vw, 48px); }
.home-hero h1 { font-size: clamp(38px, 7vw, 64px); max-width: 11em; text-wrap: balance; }
.home-hero .lead { margin: 16px 0 24px; max-width: 28em; }
.top .logo { line-height: 1.1; }
.logo small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--grau); margin-top: -2px; }
@media (max-width: 720px) {
  .logo small { display: none; } /* Claim auf dem Handy weglassen, damit der Kopf schlank bleibt */
  .top .logo-icon { width: 34px; height: 34px; }
}
/* Startseite in klar getrennten Bereichen: Hero (Aqua) → Pool-Finder (Weiß) → Ratgeber (warm) → Helfer (Weiß) */
.home-hero { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); }
.how { background: var(--weiss); border-bottom: 1px solid var(--fuge); }
.how h2 { font-size: clamp(26px, 3.4vw, 38px); }
.how-cta { margin: 26px 0 0; }
.steps li { position: relative; }
/* Pfeile zwischen den Schritten: ein Prozess, keine losen Karten */
.steps li:not(:last-child)::after { content: '→'; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--weiss); border: 1px solid var(--rahmen); color: var(--kachel); font-weight: 800; }
@media (max-width: 720px) {
  .steps { gap: 20px; }
  .steps li:not(:last-child)::after { content: '↓'; right: auto; top: auto; left: 50%; bottom: -24px; transform: translateX(-50%); }
}
/* Startseite: Pool-Finder mit vier Stationen als Mittelpunkt */
.home-finder { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); }
.home-finder h2 { font-size: clamp(28px, 3.8vw, 44px); margin-bottom: 8px; }
.home-finder .intro { max-width: 40em; margin: 0 0 22px; }
.steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 721px) and (max-width: 980px) {
  .steps.steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
  .steps.steps-4 li:nth-child(2)::after { content: none; }
}
@media (max-width: 720px) { .steps.steps-4 { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Alle Rechner (rechner/) ---------- */
.tools-main .doc-head h1 { font-size: clamp(28px, 4.4vw, 48px); max-width: 20em; }
.tools-body { padding: clamp(24px, 4vw, 44px) 0 56px; }
/* Feste Petrol-Farben statt var(--tief): im Dunkelmodus wird --tief hell, dann stand weißer Text auf hellem Grund */
.tools-profile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; background: #0b4655; color: #cfe7ec; border-radius: 22px; padding: clamp(18px, 3vw, 28px); margin-bottom: 24px; }
.tools-profile h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; }
.tools-profile p { margin: 0; max-width: 40em; }
.tools-profile a:not(.btn) { color: #fff; }
.tools-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tools-profile .btn-line, .tools-profile .btn-cyan { background: #5fd3cf; border-color: #5fd3cf; color: #0b4655; }
.tools-profile .btn-line:hover, .tools-profile .btn-cyan:hover { filter: brightness(1.06); }
@media (max-width: 560px) {
  .tools-profile { padding: 16px 18px; gap: 12px; margin-bottom: 14px; border-radius: 18px; }
  .tools-profile h2 { font-size: 20px; margin-bottom: 4px; }
  .tools-profile p { font-size: 15px; line-height: 1.4; }
  .tools-profile .btn { min-height: 48px; padding: 11px 20px; font-size: 16px; }
}
.tools-find { display: grid; gap: 10px; margin-bottom: 8px; }
.tools-find[hidden] { display: none; }
.tools-search input { font: inherit; width: 100%; max-width: 520px; min-height: 48px; border: 2px solid var(--rahmen); border-radius: 999px; padding: 10px 18px; background: var(--weiss); color: var(--tief); }
.tools-search input:focus { outline: none; border-color: var(--kachel); }
.tools-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.tools-filter .chip[aria-pressed="true"] { background: var(--tief); color: #fff; border-color: var(--tief); }
.tools-find .small { margin: 0; min-height: 1.4em; }
.tools-cat { margin-top: 28px; scroll-margin-top: 12px; }
.tools-cat[hidden] { display: none; }
.tools-cat h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; }
.tool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-card { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 18px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.tool-card[hidden] { display: none; }
.tool-card:hover { border-color: var(--kachel); box-shadow: var(--schatten); }
.tool-icon { font-size: 28px; line-height: 1; }
.tool-card h3 { font-size: 19px; margin: 4px 0 0; }
.tool-card p { margin: 0; color: var(--grau); font-size: 15px; }
.tool-card .btn { justify-self: start; margin-top: 8px; }
.tool-card.is-soon { background: var(--chlor); border-style: dashed; }
.tool-card.is-soon h3 { color: var(--grau); }
.tool-soon { justify-self: start; margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); border: 1px solid var(--rahmen); border-radius: 999px; padding: 4px 12px; }
.tools-empty { margin: 24px 0 0; font-weight: 700; }
.tools-empty[hidden] { display: none; }
@media (max-width: 980px) { .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tool-cards { grid-template-columns: minmax(0, 1fr); } .tool-card .btn { justify-self: stretch; text-align: center; } }
/* ---------- Startseite kompakt ---------- */
.home-quick { padding: clamp(24px, 4vw, 40px) 0 0 !important; }
.quick-title { font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; }
.quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.quick-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 14px 10px; background: var(--weiss); border: 2px solid var(--rahmen); border-radius: 18px; color: var(--tief); font-weight: 800; font-size: 16px; text-align: center; text-decoration: none; box-shadow: var(--schatten); transition: border-color .15s, transform .15s; }
.quick-grid a span { font-size: 30px; line-height: 1; }
.quick-grid a:hover, .quick-grid a:focus-visible { border-color: var(--tuerkis); transform: translateY(-2px); }
@media (max-width: 860px) { .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid a { min-height: 80px; font-size: 15px; }
  .quick-grid a:last-child { grid-column: 1 / -1; flex-direction: row; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .quick-grid a:hover { transform: none; } }
.home-paths { padding-top: clamp(28px, 4vw, 48px) !important; }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.path-card { background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 24px; box-shadow: var(--schatten); padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; align-content: start; }
.path-own { border-color: var(--tief); }
.path-icon { margin: 0; font-size: 40px; line-height: 1; }
.path-card h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
.path-card > p { margin: 0; color: var(--grau); }
.path-card .btn { justify-self: start; margin-top: 6px; }
.home-more { margin: 16px 0 0; font-weight: 700; }
.road-line { list-style: none; counter-reset: rl; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.road-line li { counter-increment: rl; }
.road-line a, .road-line span { display: inline-flex; align-items: center; gap: 6px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 15px; color: var(--tief); text-decoration: none; }
.road-line a::before, .road-line span::before { content: counter(rl); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--kachel); color: #fff; font-size: 12px; }
.road-line span { color: var(--grau); border-style: dashed; }
.road-line span::before { background: var(--grau); }
.road-line a:hover { border-color: var(--kachel); }
.home-road { background: var(--tint-aqua); }
/* Startseite: Hero-Aktionen, Beispiel-Ergebnis, drei Wege */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 0; }
.hero-alt { font-weight: 700; color: var(--tief); text-decoration: none; padding: 10px 2px; }
.hero-alt:hover { text-decoration: underline; }
.home-example { padding-top: 0; }
.ex-card { max-width: 560px; background: #0b4655; color: #fff; border-radius: 22px; padding: 22px; display: grid; gap: 4px; }
.ex-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9d6df; }
.ex-pool { margin: 0; font-size: clamp(22px, 5.6vw, 28px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.ex-vol { margin: 0; color: #cfe7ec; }
.ex-cost { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ex-cost dt { font-size: 14px; color: #cfe7ec; }
.ex-cost dd { margin: 2px 0 0; font-size: clamp(24px, 6vw, 32px); font-weight: 800; color: #5fd3cf; letter-spacing: -0.01em; }
.ex-note { margin: 6px 0 0; font-size: 13px; color: #a9d6df; }
.ex-link { margin-top: 12px; justify-self: start; font-weight: 800; color: #fff; text-decoration: none; padding: 8px 0; }
.ex-link:hover { text-decoration: underline; }
.three-ways { display: grid; gap: 10px; }
.three-ways .in-card { padding: 18px; }
.three-ways .way-main { background: #0b4655; }
.three-ways .way-main b { color: #fff; }
.three-ways .way-main span { color: #cfe7ec; }
.three-ways .way-main em { color: #5fd3cf; }
@media (min-width: 760px) { .three-ways { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
/* Einstieg nach Absicht (Startseite): eine Petrol-Hauptkarte, zwei kleine Karten, dezente Direktlinks. Türkis nur für Eyebrow und Haupt-CTA. */
.in-kicker { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--kachel); }
.in-title { font-size: clamp(28px, 7vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 10px; max-width: 16em; }
.in-lead { margin: 0 0 22px; max-width: 34em; color: var(--grau); font-size: 17px; line-height: 1.45; }
.in-grid { display: grid; gap: 10px; }
/* Hauptkarte: feste Farben, auch im Dunkelmodus */
.in-main { display: grid; gap: 10px; align-content: start; background: #0b4655; color: #fff; border-radius: 22px; padding: 24px 22px; text-decoration: none; }
.in-label { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9d6df; }
.in-text { font-size: clamp(20px, 5.4vw, 26px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.in-cta { display: block; margin-top: 8px; text-align: center; background: #5fd3cf; color: #0b4655; border-radius: 14px; padding: 15px 20px; font-weight: 800; font-size: 17px; }
.in-main:hover .in-cta { filter: brightness(1.05); }
.in-main:focus-visible { outline: 3px solid var(--kachel); outline-offset: 3px; }
.in-side { display: grid; gap: 10px; }
.in-card { display: grid; gap: 4px; background: var(--weiss); border-radius: 18px; padding: 16px 18px; text-decoration: none; color: var(--tief); min-height: 60px; }
.in-card b { font-size: 17px; }
.in-card span { font-size: 15px; color: var(--grau); line-height: 1.4; }
.in-card em { font-style: normal; font-weight: 700; font-size: 15px; color: var(--kachel); margin-top: 4px; }
.in-card:hover em { text-decoration: underline; }
.in-card:focus-visible { outline: 3px solid var(--kachel); outline-offset: 3px; }
.in-direct { margin: 18px 0 0; font-size: 15px; color: var(--grau); line-height: 2; }
.in-direct a { color: var(--tief); font-weight: 600; text-decoration: none; padding: 6px 2px; }
.in-direct a:hover { text-decoration: underline; }
@media (min-width: 560px) { .in-side { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .in-grid { grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }
  .in-side { grid-template-columns: 1fr; }
  .in-main { padding: 32px; align-content: space-between; }
  .in-cta { justify-self: start; }
}
.trust-list { display: grid !important; gap: 4px; margin: 14px 0; }
@media (max-width: 720px) { .paths { grid-template-columns: minmax(0, 1fr); } .path-card .btn { justify-self: stretch; text-align: center; } }

/* ---------- Bereichsseiten (planen/, bauen/, betreiben/, zubehoer/, ratgeber/) ---------- */
.hub-title { font-size: clamp(22px, 3vw, 30px); margin: 36px 0 12px; }
.tool-card.tool-card-main { border: 2px solid var(--tuerkis); background: var(--tint-aqua); }
.hub-next { margin-top: 40px; }
.hub-start { margin-bottom: 8px; }
.hub-start a { font-weight: 700; }
.hub-topic { padding: 22px 0; border-bottom: 1px solid var(--fuge); scroll-margin-top: 12px; }
.hub-topic h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 6px; }
.hub-tool { margin: 12px 0 0; font-weight: 700; }
.road { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.road-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 18px; }
.road-step h2 { font-size: 20px; margin: 4px 0 4px; }
.road-step p { margin: 0 0 10px; color: var(--grau); font-size: 15px; }
.road-n { width: 44px; height: 44px; border-radius: 50%; background: var(--kachel); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
.road-step:first-child { border: 2px solid var(--tuerkis); background: var(--tint-aqua); }
.road-step.is-soon { background: var(--chlor); border-style: dashed; }
.road-step.is-soon .road-n { background: var(--grau); }
.road-link { font-weight: 700; font-size: 15px; margin-left: 10px; }
@media (max-width: 600px) { .road-step { grid-template-columns: minmax(0, 1fr); } .road-link { display: block; margin: 10px 0 0; } }
/* Einwilligung: Banner und Einstellungen. Beide Entscheidungen gleich groß und gleich sichtbar */
.foot-link { font: inherit; background: none; border: 0; padding: 0; color: #fff; text-decoration: underline; cursor: pointer; }
.consent-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 760px; margin: 0 auto; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; box-shadow: 0 14px 40px rgba(11, 70, 85, .22); padding: 16px 18px; display: grid; gap: 12px; }
.consent-bar p { margin: 0; font-size: 15px; color: var(--tief); }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-btns .btn-line { flex: 1 1 160px; text-align: center; }
.consent-btns .btn-quiet { background: none; border: 0; color: var(--kachel); font-weight: 700; text-decoration: underline; padding: 10px 8px; }
.consent-dialog { max-width: 560px; width: calc(100% - 24px); border: 0; border-radius: 20px; padding: 22px; box-shadow: 0 20px 60px rgba(11, 70, 85, .3); color: var(--tief); }
.consent-dialog::backdrop { background: rgba(11, 70, 85, .45); }
.consent-dialog h2 { margin: 0 0 8px; font-size: 24px; }
.consent-dialog p { font-size: 15px; }
.consent-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--fuge); }
.consent-row b { display: block; }
.consent-row small { color: var(--grau); font-size: 14px; }
.consent-row input { width: 22px; height: 22px; flex: none; accent-color: var(--tuerkis); }
.consent-dialog .consent-btns { margin-top: 12px; }
/* Footer: komplette Themenstruktur, aus NAV gebaut */
.foot-map { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin-top: 8px; }
.foot-col ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; font-size: 13px; }
.foot-col ul a { color: #b9d4da; text-decoration: none; }
.foot-col ul a:hover { color: #fff; text-decoration: underline; }
.foot-head { font-weight: 800; color: #fff; font-size: 14px; text-decoration: none; }
@media (max-width: 860px) { .foot-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hervorgehobener Menüpunkt „Rechner & Tools“ */
.nav-item.nav-cta > a { background: var(--tint-aqua); color: var(--tief); font-weight: 800; border: 1px solid var(--rahmen); }
/* Acht Hauptpunkte: zwischen 1101 und 1320 px etwas kompakter, damit eine Zeile reicht */
@media (min-width: 1101px) and (max-width: 1320px) {
  .menu { font-size: 15px; }
  .menu > a, .nav-item > a { padding: 8px 6px; }
  .top .logo small { display: none; }
}
.foot-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; font-size: 14px; }
.foot-tools li:first-child { font-weight: 800; color: #fff; }
/* Startseite: Werkzeuge und Einstieg für Poolbesitzer */
.tool-grid a.tool-main { border: 2px solid var(--tuerkis); background: var(--tint-aqua); }
.owner-strip { margin-top: 18px; background: var(--tief); color: #d9eef1; border-radius: 18px; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.owner-strip p { margin: 0; }
.owner-strip p b { display: block; color: #fff; font-size: 19px; }
.owner-strip ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.owner-strip a { display: inline-block; color: var(--tief); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 15px; text-decoration: none; }
.owner-strip a:hover { background: var(--tint-aqua); }
/* Themen im Footer, auf jeder Seite gleich (site.js) */
.dh-foot-topics { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; width: 100%; font-size: 14px; }
.dh-foot-topics a { color: #fff; font-weight: 700; }
.doors-title { grid-column: 1 / -1; font-size: clamp(24px, 3vw, 32px); margin: 0 0 4px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { counter-increment: s; background: var(--weiss); border: 1px solid var(--rahmen); box-shadow: var(--schatten); border-radius: 16px; padding: 18px 20px; font-size: 16px; color: var(--grau); }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kachel); color: #fff; font-weight: 800; margin-bottom: 8px; }
.steps b { display: block; color: var(--tief); font-size: 18px; margin-bottom: 4px; }
@media (max-width: 720px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.btn-big { font-size: 20px; padding: 18px 30px; display: inline-flex; gap: 12px; align-items: baseline; }
.btn-big small { font-weight: 600; font-size: 14px; opacity: .85; }
.promise { margin-top: 18px; font-weight: 700; color: var(--kachel); }
.btn-note { margin: 10px 0 0 6px; font-size: 14px; color: var(--grau); }
.trust { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; font-size: 16px; font-weight: 600; }
.trust li { display: flex; gap: 10px; align-items: baseline; }
.trust li::before { content: '✓'; color: var(--tuerkis); font-weight: 800; }
.hero-img { display: block; width: 100%; height: auto; border-radius: 18px; margin-top: 28px; }
@media (min-width: 980px) {
  .home-hero .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 40px; align-items: center; }
  .home-hero h1 { font-size: clamp(40px, 4.2vw, 58px); }
  .trust { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  .hero-img { margin-top: 0; }
}
.doors .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.door { background: var(--weiss); border: 1px solid var(--fuge); border-radius: 16px; padding: 26px; text-decoration: none; color: var(--tief); display: grid; gap: 8px; }
.door:hover { border-color: var(--kachel); }
.door h2 { font-size: 26px; margin: 0; }
.door p { margin: 0; color: var(--grau); font-size: 17px; }
.door .more { font-weight: 700; color: var(--kachel); margin-top: 6px; }
/* Farbwechsel der Bereiche: Hero und Schritte auf hellem Aqua, Einstiege auf Weiß, Karten leicht getönt */
.doors { background: var(--weiss); }
.door { box-shadow: var(--schatten); }
.door[href="rechner.html"] { background: var(--tint-warm); border-color: var(--tint-warm-rand); }
.door[href="wasser.html"] { background: var(--tint-aqua); border-color: var(--rahmen); }
.door[href]:hover { border-color: var(--kachel); }
/* Ratgeber-Teaser auf der Startseite: größer als die Tool-Karten, aber ohne orangen Button */
.teaser-card { background: var(--tint-warm); border: 1px solid var(--tint-warm-rand); border-radius: 22px; box-shadow: var(--schatten);
  padding: clamp(22px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.teaser-card h2 { margin-bottom: 12px; }
.teaser-text { color: var(--grau); max-width: 34em; }
.teaser-img { display: block; width: 100%; height: auto; max-width: 420px; justify-self: end; }
.btn-petrol { background: #0b4655; color: #fff; }
.btn-petrol:hover { background: #168aad; }
@media (max-width: 720px) {
  .teaser-card { grid-template-columns: minmax(0, 1fr); }
  .teaser-img { display: none; }
  .teaser-text { font-size: 16px; }
}

/* Logo-Vergleichsseite */
.logo-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0 0 32px; }
.logo-board figure { margin: 0; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 24px; display: grid; gap: 12px; justify-items: start; }
.logo-board figure.on-dark { background: #0b4655; border-color: #0b4655; color: #d6e9ed; }
.logo-board img { max-width: 100%; height: auto; }
.logo-board figcaption { font-size: 14px; color: var(--grau); }
.logo-board .on-dark figcaption { color: #d6e9ed; }
.logo-sizes { display: flex; flex-wrap: wrap; align-items: end; gap: 20px; margin-bottom: 16px; }

/* Ratgeber-Seiten */
.band { background: var(--weiss); }
.intro { max-width: 42em; color: var(--grau); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 8px 0 18px; }
.cards-small { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.card { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 20px; box-shadow: var(--schatten); }
.band .card { background: var(--chlor); box-shadow: none; }
.card h3 { font-size: 19px; margin-bottom: 6px; }
.card p { margin: 0; font-size: 16px; color: var(--grau); }
.section-cta { margin: 8px 0 0; }
.table-box { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; box-shadow: var(--schatten); overflow: hidden; margin-bottom: 14px; }
table.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
table.compare th { text-align: left; background: var(--tint-aqua); color: var(--tief); font-size: 14px; padding: 12px 18px; }
table.compare td { padding: 12px 18px; border-top: 1px solid var(--fuge); vertical-align: top; }
table.compare td:first-child { font-weight: 700; color: var(--tief); }
table.compare td:last-child { color: var(--grau); }
.chips { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 999px; padding: 6px 14px; font-size: 15px; font-weight: 600; }
.chips li:not(:first-child)::before { content: '+'; color: var(--kachel); font-weight: 800; margin-right: 8px; }
.highlight { border-left: 5px solid var(--tuerkis); background: var(--tint-aqua); border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; color: var(--tief); max-width: 36em; }
/* Ratgeber "Lohnt sich ein Pool?": jedes Kapitel mit eigener Darstellungsform */
.chapters { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; padding-bottom: 22px; font-size: 14px; font-weight: 600; }
.chapters a { text-decoration: none; color: var(--tief); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 999px; padding: 6px 12px; }
.chapters a:hover { border-color: var(--kachel); color: var(--kachel); }
.chapter { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kachel); }
.note { font-size: 15px; color: var(--grau); max-width: 46em; margin: 14px 0; }
.note b { color: var(--tief); }
.pcard-img[hidden] { display: none; }
/* Poolarten: Punkte ausgeblendet, bis die Bewertung nachvollziehbar begründet ist */
.arten-no-score .arten-legend, .arten-no-score .meters { display: none; }
/* Affiliate-Hinweis: einmal pro Produktempfehlung, dezent unter Karten bzw. Kaufknopf, kein Warnkasten */
.note.aff-note, p.aff-note { font-size: 13px; line-height: 1.45; color: var(--grau); background: none; border: 0; padding: 0; margin: 10px 0 0; }

/* Kapitel 1: Jahresleiste */
.year { background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 16px; padding: 10px 18px; }
.year-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--fuge); }
.year-head { border-top: 0; padding-bottom: 0; }
.year-name { font-weight: 700; color: var(--tief); font-size: 16px; line-height: 1.25; }
.year-name small { display: block; font-weight: 500; font-size: 13px; color: var(--grau); }
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.months i { height: 20px; border-radius: 5px; background: var(--fuge); opacity: .55; }
.months i.on { background: var(--tuerkis); opacity: 1; }
/* Halbton = mögliche Saisonverlängerung (nur bei der festen Überdachung) */
.months i.maybe { background: var(--tuerkis); opacity: .4; }
.year-extra { margin: -2px 0 6px; padding: 0 0 10px; font-size: 14px; color: var(--grau); }
.year-extra b { color: var(--tief); }
@media (min-width: 721px) { .year-extra { margin-left: 314px; } }
.year-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 4px; font-size: 13px; color: var(--grau); }
.key { display: inline-block; width: 18px; height: 12px; border-radius: 3px; }
.year-legend .key:not(:first-child) { margin-left: 8px; }
.key-on { background: var(--tuerkis); }
.key-maybe { background: var(--tuerkis); opacity: .4; }
.year-legend { border-top: 1px solid var(--fuge); padding-top: 10px; }
.season-note { margin: 18px 0 0; border-left: 5px solid var(--kachel); background: var(--tint-aqua); border-radius: 0 14px 14px 0; padding: 16px 20px; max-width: 860px; }
.season-note h3 { font-size: 19px; margin-bottom: 6px; }
.season-note p { margin: 0; font-size: 16px; color: var(--tief); }
.season-links { display: grid; gap: 10px; margin-top: 18px; font-weight: 700; font-size: 16px; max-width: 860px; }
.season-links a { text-decoration: none; }
.season-links a:hover { text-decoration: underline; }
.roof-info summary { list-style: none; }
.roof-info summary::-webkit-details-marker { display: none; }
.roof-info p { font-weight: 400; color: var(--grau); margin: 8px 0 0; }
.year-head .months i { height: auto; background: none; opacity: 1; font-style: normal; font-size: 12px; font-weight: 700; text-align: center; color: var(--grau); }
@media (max-width: 720px) {
  .year { padding: 8px 12px; }
  .year-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .year-head .year-name, .year-head > span:first-child { display: none; }}

/* Kapitel 2: Budgetwelten als eine durchgehende Skala statt vier Kästen */
.worlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; overflow: hidden; box-shadow: var(--schatten); }
.world { border-top: 6px solid var(--tuerkis); border-left: 1px solid var(--fuge); padding: 22px 22px 24px; display: grid; gap: 6px; align-content: start; }
.world:first-child { border-left: 0; }
.world:nth-child(2) { border-top-color: var(--kachel); }
.world:nth-child(3) { border-top-color: #0f6f8c; }
.world:nth-child(4) { border-top-color: #0b4655; }
.world b { font-size: clamp(22px, 2.4vw, 28px); color: var(--tief); letter-spacing: -0.02em; }
.world span { font-size: 16px; color: var(--grau); }
@media (max-width: 720px) {
  .worlds { grid-template-columns: minmax(0, 1fr); }
  .world { border-left: 0; border-top-width: 0; border-bottom: 1px solid var(--fuge); border-left: 6px solid var(--tuerkis); padding: 16px 18px; }
  .world:nth-child(2) { border-left-color: var(--kachel); }
  .world:nth-child(3) { border-left-color: #0f6f8c; }
  .world:nth-child(4) { border-left-color: #0b4655; border-bottom: 0; }
}

/* Ratgeber-Rhythmus: mehr Luft zwischen Kapiteln, große Überschriften, breiterer Inhalt auf Desktop */
.guide .wrap { max-width: 1300px; }
.guide > section:not(.home-hero) { padding: clamp(64px, 9vw, 128px) 0; }
.guide > section h2 { font-size: clamp(32px, 4.4vw, 54px); max-width: 16em; text-wrap: balance; }
.guide .intro { font-size: 19px; margin-bottom: 28px; }
.guide #fuer-wen, .guide #heizen { background: var(--tint-aqua); }
.guide #heizen .heat-box { background: var(--weiss); }
.guide #heizen .cost-card { background: var(--weiss); }
.guide #heizen .chip:not([aria-expanded="true"]) { background: var(--weiss); }
.guide #fuer-wen .check-result { background: var(--weiss); }
.guide #finden { padding-top: clamp(40px, 6vw, 80px); }

/* Kapitel 3: Kosten-Chips mit Detailkarte */
.chips[data-panels] { margin-bottom: 14px; }

/* Kapitel Heizen */
.heat-table { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; box-shadow: var(--schatten); overflow: hidden; }
.heat-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.heat-table thead th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); background: var(--tint-aqua); padding: 12px 16px; }
.heat-table tbody th { text-align: left; color: var(--tief); padding: 14px 16px; }
.heat-table td { padding: 14px 16px; color: var(--grau); border-top: 1px solid var(--fuge); }
.heat-table tbody th { border-top: 1px solid var(--fuge); }
@media (max-width: 720px) {
  /* Auf dem Handy jede Lösung als kleiner Block mit Beschriftung */
  .heat-table thead { display: none; }
  .heat-table table, .heat-table tbody, .heat-table tr, .heat-table th, .heat-table td { display: block; }
  .heat-table tr { padding: 12px 16px; border-top: 1px solid var(--fuge); }
  .heat-table tr:first-child { border-top: 0; }
  .heat-table tbody th { padding: 0 0 6px; border: 0; font-size: 18px; }
  .heat-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; font-size: 15px; }
  .heat-table td::before { content: attr(data-l); color: var(--tief); font-weight: 600; }
}
.heat-sub { font-size: clamp(22px, 2.6vw, 28px); margin: 48px 0 14px; }
.heat-box { margin: 48px 0 0; background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 22px; padding: clamp(24px, 4vw, 44px); }
.heat-box h3 { font-size: clamp(24px, 3.2vw, 36px); max-width: 20em; margin-bottom: 10px; }
.heat-box > p { color: var(--grau); max-width: 40em; }
.heat-trio { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.heat-trio li { border-top: 4px solid var(--tuerkis); padding-top: 12px; }
.heat-trio li:nth-child(2) { border-top-color: var(--kachel); }
.heat-trio li:nth-child(3) { border-top-color: #0b4655; }
.heat-trio b { display: block; color: var(--tief); font-size: 18px; }
.heat-trio span { color: var(--grau); }
.heat-trio span::before { content: '→ '; color: var(--kachel); }
.decider { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.decider li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--fuge); font-size: 17px; }
.decider span { color: var(--tief); font-weight: 600; }
.decider a { font-weight: 700; text-decoration: none; }
.decider a:hover { text-decoration: underline; }
.wp-reco { margin-top: 14px; background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; justify-items: start; }
.wp-reco p { margin: 0; font-size: 16px; color: var(--grau); }
.wp-reco .pick-label { color: var(--logo-akzent); font-size: 15px; }
.wp-start .wp-start-q { color: var(--tief); margin-top: 8px; }
.heat-box-short { margin-top: 28px; padding: clamp(18px, 3vw, 28px); }
.heat-box-short h3 { margin-bottom: 4px; }
.heat-box-short p { margin: 0; }
.heat-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; border-top: 1px solid var(--fuge); padding-top: 28px; }
.heat-cta h3 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 4px; }
.heat-cta p { margin: 0; color: var(--grau); }
@media (max-width: 720px) { .heat-trio { grid-template-columns: minmax(0, 1fr); } }
.chip { font: 600 15px var(--sans); background: var(--tint-aqua); color: var(--tief); border: 1px solid var(--rahmen); border-radius: 999px; padding: 8px 16px; cursor: pointer; min-height: 40px; }
.chip:hover { border-color: var(--kachel); }
.chip[aria-expanded="true"] { background: var(--kachel); border-color: var(--kachel); color: #fff; }
.cost-panels { display: grid; gap: 12px; }
.cost-card { background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 16px; padding: 20px 22px; max-width: 760px; }
.cost-card h3 { margin-bottom: 10px; }
.cost-card dl { margin: 0; }
.cost-card dt { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kachel); }
.cost-card dd { margin: 2px 0 12px; color: var(--grau); font-size: 16px; }
.pf-tip { margin: 0; border-left: 4px solid var(--tuerkis); background: var(--weiss); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 16px; }

/* Kapitel 4: Gefühl, große Flächen */
.feel { background: var(--tint-warm); }
.feel-title { font-size: clamp(30px, 4.6vw, 54px); max-width: 15em; }
.feel-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 32px; }
.feel-row-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.feel-row img { display: block; width: 100%; height: auto; border-radius: 20px; }
.feel-row h3 { font-size: clamp(22px, 2.6vw, 28px); margin: 18px 0 6px; }
.feel-row h3:first-child { margin-top: 0; }
.feel-row p { font-size: 18px; color: var(--grau); margin: 0; }
@media (max-width: 720px) { .feel-row, .feel-row-alt { grid-template-columns: minmax(0, 1fr); } }

/* Kapitel 5: drei Gruppen */
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 8px 0 20px; }
.group { border-top: 4px solid var(--kachel); padding-top: 14px; }
.group h3 { font-size: 21px; margin-bottom: 6px; }
.group p { margin: 0; font-size: 17px; font-weight: 600; color: var(--grau); }
@media (max-width: 720px) { .groups { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Kapitel 6: Entscheidungs-Check */
.check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.check fieldset { margin: 0; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 20px 10px; box-shadow: var(--schatten); }
.check legend { font-weight: 800; color: var(--tief); padding: 0 6px; }
.check label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 16px; cursor: pointer; border-top: 1px solid var(--fuge); }
.check label:first-of-type { border-top: 0; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--tuerkis); }
.check-no input { accent-color: var(--grau); }
/* Schnellcheck: jede Auswahl gibt sichtbares Feedback (dezent, ca. 200 ms) */
.check label { border-radius: 10px; padding-left: 8px; padding-right: 8px; margin: 0 -8px; transition: background-color .2s, color .2s; }
.check label.on, .check label:has(input:checked) { background: color-mix(in srgb, var(--tuerkis) 14%, transparent); color: var(--tief); font-weight: 600; }
.check-no label.on, .check-no label:has(input:checked) { background: color-mix(in srgb, var(--nudel) 10%, transparent); }
.check input { transition: transform .2s; }
.check input:checked { transform: scale(1.15); }
.quick { margin-top: 20px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: clamp(18px, 3vw, 28px); box-shadow: var(--schatten); }
.quick-state { border-left: 5px solid var(--fuge); padding: 4px 0 4px 16px; transition: border-color .2s; }
.quick-state h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 6px; }
.quick-state p { margin: 0; color: var(--grau); }
.quick-state.state-a { border-color: var(--tuerkis); }
.quick-state.state-b { border-color: var(--kachel); }
.quick-state.state-c { border-color: var(--sonne); }
.quick-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; animation: fadein .2s ease-out; }
.pick { border: 1px solid var(--rahmen); border-radius: 16px; padding: 16px 18px; background: var(--chlor); }
.pick-main { border-color: var(--tuerkis); background: color-mix(in srgb, var(--tuerkis) 10%, var(--weiss)); }
.pick-label { margin: 0 0 4px; font-size: 13px; font-weight: 800; color: var(--kachel); }
.pick h4 { margin: 0 0 4px; font-size: 19px; }
.pick p:last-child { margin: 0; font-size: 15px; color: var(--grau); }
.quick-types { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quick-types li { border: 1px solid var(--rahmen); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; background: var(--weiss); transition: opacity .2s, background-color .2s, border-color .2s; }
.quick-types li.top { background: var(--tuerkis); border-color: var(--tuerkis); color: #fff; }
.quick-types li.dim { opacity: .4; }
.quick-next { margin-top: 40px; background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 22px; padding: clamp(22px, 4vw, 40px); }
.quick-next h3 { font-size: clamp(22px, 3vw, 32px); max-width: 22em; margin-bottom: 10px; }
.quick-next > p:not(.btn-note) { color: var(--grau); max-width: 38em; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .quick-picks { grid-template-columns: minmax(0, 1fr); } }
.check-result { margin: 14px 0 0; background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 12px; padding: 14px 18px; color: var(--grau); }
.check-result.active { color: var(--tief); font-weight: 700; }
.types-title { margin: 34px 0 10px; font-size: 22px; }
.types { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.types li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--fuge); font-size: 16px; }
.types span { color: var(--grau); min-width: 12em; }
.types b { color: var(--tief); }
.types b::before { content: '→ '; color: var(--kachel); }
@media (max-width: 720px) { .check { grid-template-columns: minmax(0, 1fr); } }

/* Kapitel 7: kompakte Liste */
.de-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.de-list div { padding: 12px 0; border-bottom: 1px solid var(--fuge); }
.de-list dt { font-weight: 700; color: var(--tief); }
.de-list dd { margin: 2px 0 0; font-size: 16px; color: var(--grau); }
@media (max-width: 720px) { .de-list { grid-template-columns: minmax(0, 1fr); } }

/* Über uns: erzählend, große Foto-Platzhalter, wenig Kästen */
.photo-ph { aspect-ratio: 4 / 3; background: var(--weiss); border: 2px dashed var(--rahmen); border-radius: 20px; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--grau); font-weight: 700; }
.photo-ph span::before { content: '📷'; display: block; font-size: 34px; margin-bottom: 8px; }
.photo-ph-hero { aspect-ratio: 5 / 4; margin-top: 28px; }
@media (min-width: 980px) { .photo-ph-hero { margin-top: 0; } }
.about .home-hero .lead + .lead { margin-top: 0; }
.story { max-width: 820px; }
.story-lead { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; color: var(--tief); margin: 10px 0 24px; }
.story-text { font-size: 19px; color: var(--grau); max-width: 38em; }
.questions { list-style: none; padding: 0; margin: 0 0 32px; border-left: 4px solid var(--tuerkis); }
.questions li { font-size: clamp(19px, 2.2vw, 25px); font-weight: 700; color: var(--tief); padding: 6px 0 6px 20px; }
.story-img { display: block; width: 100%; height: auto; border-radius: 22px; margin: 8px 0 32px; }
.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: 12px; }
.profile h3 { font-size: clamp(24px, 2.8vw, 32px); margin: 20px 0 10px; }
.pool-facts { margin: 0 0 18px; }
.pool-facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--fuge); font-size: 16px; }
.pool-facts dt { font-weight: 700; color: var(--tief); }
.pool-facts dd { margin: 0; color: var(--grau); font-style: italic; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.btn-quiet { border-color: var(--fuge); color: var(--tief); background: transparent; }
.is-soon { opacity: .6; cursor: default; }
.is-soon small { font-weight: 600; font-size: 12px; margin-left: 4px; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.values div { border-top: 4px solid var(--tuerkis); padding-top: 18px; }
.values h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 10px; }
.values p { color: var(--grau); font-size: 18px; margin: 0; }
/* Über uns: Mario und Tobias nebeneinander */
.values.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.values.duo p + p { margin-top: 10px; }
.duo-close { max-width: 40em; margin-top: 32px; font-size: 19px; color: var(--tief); }
.duo-close p { margin: 0 0 6px; }
@media (max-width: 720px) { .values.duo { grid-template-columns: minmax(0, 1fr); } }
.transparency { background: var(--tint-aqua); }
.transparency-box { max-width: 860px; }
.transparency-box p { font-size: 19px; color: var(--tief); max-width: 40em; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 8px 0 0; }
.cta-link { color: #fff; font-weight: 700; text-underline-offset: 4px; }
.signature { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.signature b { display: block; color: #fff; font-family: var(--hand); font-size: 32px; font-weight: 700; }
@media (max-width: 720px) {
  .profiles, .values { grid-template-columns: minmax(0, 1fr); }
}

.cta-box { background: #0b4655; color: #fff; border-radius: 22px; padding: clamp(26px, 5vw, 56px); }
.cta-box h2 { color: #fff; }
.cta-box p { color: #d6e9ed; max-width: 38em; }
.cta-box .btn-note { color: #a9d6df; }
.cta-box .trust { color: #fff; }
.cta-box .trust li::before { color: #6fd6d0; }
@media (min-width: 980px) { .cta-box .trust { display: flex; flex-wrap: wrap; gap: 6px 20px; } }

.foot .wrap { flex-direction: column; align-items: flex-start; }
.foot { background: #0b4655; color: #d6e9ed; }
.foot a { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.foot a:hover { text-decoration-color: #fff; }
.foot .logo small { color: #a9d6df; }

/* Chat */
.chat-main { padding: 20px 0 0; }
.chat-wrap { max-width: 720px; }
.progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--grau); margin-bottom: 18px; }
.progress b { color: var(--tief); font-size: 15px; }
.step-dots { display: inline-flex; gap: 6px; }
.step-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--kachel); }
.step-dots i.done { background: var(--kachel); }
.step-dots i.now { background: var(--tuerkis); border-color: var(--tuerkis); }
.bubble .sub { display: block; margin-top: 6px; font-size: 15px; color: var(--grau); }
.ans small { display: block; font-weight: 500; font-size: 13px; opacity: .8; }
.ans.start { background: var(--nudel); border-color: var(--nudel); color: #fff; padding: 14px 26px; }
.ans.start:hover { filter: brightness(.94); background: var(--nudel); }
.hello { font-size: 19px; color: var(--tief); }
.checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 4px; }
.checks li { display: flex; gap: 10px; align-items: baseline; }
.checks li::before { content: '✓'; color: var(--tuerkis); font-weight: 800; }
.preview { background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 14px; padding: 16px 18px; margin: 0 0 14px; }
.preview h3 { margin: 2px 0 8px; font-size: 20px; }
.preview ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; font-size: 16px; }
.preview .small { margin: 0; }
.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.bubble { max-width: 85%; padding: 12px 16px; border-radius: 18px; font-size: 17px; line-height: 1.45; background: var(--weiss); border: 1px solid var(--fuge); border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.me { align-self: flex-end; background: var(--kachel); color: #fff; border: 0; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.bubble.wide { max-width: 100%; width: 100%; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--grau); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.answers { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--chlor) 16px); }
.ans { font: 700 16px var(--sans); padding: 12px 18px; border-radius: 999px; border: 2px solid var(--kachel); background: var(--weiss); color: var(--kachel); cursor: pointer; text-decoration: none; min-height: 48px; }
.ans:hover { background: var(--kachel); color: #fff; }
.ans.unsure { border-color: var(--fuge); color: var(--grau); }
.ans.back { border-color: transparent; background: transparent; color: var(--grau); }
.result h2 { font-size: clamp(26px, 5vw, 36px); margin: 2px 0 8px; }
.result h3 { font-size: 20px; margin: 22px 0 8px; }
.kicker { margin: 0; font-weight: 700; color: var(--kachel); font-size: 15px; }
.why { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.why li { background: color-mix(in srgb, var(--kachel) 12%, transparent); color: var(--tief); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.facts-row { display: flex; gap: 28px; flex-wrap: wrap; font-size: 16px; }
.facts-row b { display: block; font-size: 13px; color: var(--grau); }
table.cost { width: 100%; border-collapse: collapse; font-size: 15px; }
table.cost td { padding: 7px 0; border-bottom: 1px solid var(--fuge); vertical-align: top; }
table.cost td:last-child { text-align: right; white-space: nowrap; padding-left: 12px; font-weight: 700; }
details.forgot { margin-top: 10px; }
.small { font-size: 14px; color: var(--grau); }
.models { list-style: none; padding: 0; margin: 0; }
.models li { padding: 8px 0; border-bottom: 1px solid var(--fuge); font-size: 15px; overflow-wrap: anywhere; }
.models li span { display: block; color: var(--grau); font-size: 14px; }
.tip { background: #fff4d6; color: #4a3800; border-radius: 10px; padding: 10px 14px; font-size: 15px; }
@media (max-width: 720px) {
  .doors .wrap { grid-template-columns: minmax(0, 1fr); }
  .bubble { max-width: 92%; font-size: 16px; }
  .ans { flex: 1 1 calc(50% - 8px); text-align: center; }
}

/* ---------- Kaufberatung Poolheizung: Beratung → Filter → Angebote ---------- */
main.guide.buy > section { padding: clamp(36px, 5vw, 64px) 0; }
.buy-hero { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); }
.buy-hero h1 { font-size: clamp(34px, 5vw, 58px); max-width: 15em; text-wrap: balance; }
.buy-hero .lead { max-width: 40em; }
.crumbs { font-size: 14px; color: var(--grau); margin: 0 0 10px; }
.crumbs a { color: var(--kachel); text-decoration: none; }
.buy-also { font-size: 15px; font-weight: 600; color: var(--grau); margin: 18px 0 0; }
.buy-also a { text-decoration: none; }
.explain { margin-top: 22px; background: var(--weiss); border-left: 5px solid var(--sonne); border-radius: 0 16px 16px 0; padding: 16px 20px; max-width: 760px; }
.explain h2 { font-size: clamp(20px, 2.4vw, 26px) !important; margin-bottom: 6px; }
.explain p { margin: 0; color: var(--tief); }
.buy-filter { background: var(--weiss); }
.buy-filter h2 { font-size: clamp(26px, 3.4vw, 38px) !important; }
.vol-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.vol-chips button { font: 700 17px var(--sans); padding: 14px 20px; min-height: 52px; border-radius: 14px; border: 2px solid var(--rahmen); background: var(--chlor); color: var(--tief); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.vol-chips button:hover { border-color: var(--kachel); }
.vol-chips button[aria-pressed="true"] { background: var(--kachel); border-color: var(--kachel); color: #fff; }
.vol-calc { margin-top: 16px; }
.calc-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 10px; }
.calc-row label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--grau); }
.calc-row input { font: 600 17px var(--sans); width: 110px; padding: 10px 12px; border: 2px solid var(--rahmen); border-radius: 10px; background: var(--weiss); color: var(--tief); }
.calc-row span { padding-bottom: 12px; font-weight: 800; color: var(--grau); }
.vol-out { font-weight: 700; color: var(--tief); min-height: 1.6em; margin: 12px 0 0; }
.more-q { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 18px; }
.more-q fieldset { margin: 0; border: 1px solid var(--rahmen); border-radius: 16px; padding: 12px 18px 10px; }
.more-q legend { font-weight: 800; color: var(--tief); padding: 0 6px; }
.more-q label { display: flex; gap: 10px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; font-size: 16px; cursor: pointer; transition: background-color .2s; }
.more-q label:has(input:checked) { background: color-mix(in srgb, var(--tuerkis) 14%, transparent); font-weight: 600; }
.more-q input { accent-color: var(--tuerkis); width: 18px; height: 18px; }
.buy-results { background: var(--chlor); }
.buy-results .need { background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 20px; padding: 20px 24px; max-width: 760px; animation: fadein .2s ease-out; }
.need-kicker { margin: 0; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kachel); }
.need-value { margin: 4px 0 6px; font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; color: var(--tief); letter-spacing: -0.02em; }
.need-text { margin: 0; color: var(--grau); }
.pv-advice, .place-tip { margin: 18px 0 0; max-width: 760px; border-left: 5px solid var(--sonne); background: var(--weiss); border-radius: 0 16px 16px 0; padding: 16px 20px; }
.pv-advice h3 { font-size: 20px; margin-bottom: 8px; }
.pv-advice p { margin: 0 0 8px; }
.buy-results h2 { font-size: clamp(24px, 3vw, 34px) !important; margin-top: 32px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.pcard { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; overflow: hidden; box-shadow: var(--schatten); display: flex; flex-direction: column; animation: fadein .2s ease-out; }
.pcard-img { aspect-ratio: 16 / 9; background: var(--tint-aqua); display: grid; place-items: center; color: var(--grau); font-size: 14px; font-weight: 600; }
.pcard-img img { width: 100%; height: 100%; object-fit: contain; }
.pcard-body { padding: 18px 20px 20px; display: grid; gap: 12px; flex: 1; align-content: start; }
.pcard h3 { font-size: 20px; }
.pfacts { margin: 0; }
.pfacts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--fuge); font-size: 15px; }
.pfacts dt { font-weight: 700; color: var(--tief); }
.pfacts dd { margin: 0; color: var(--grau); }
.offers { display: grid; gap: 8px; }
.offers-title { margin: 0; font-weight: 800; font-size: 14px; color: var(--kachel); }
.offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.offer span { font-weight: 700; color: var(--tief); }
.offer small { font-weight: 500; color: var(--grau); }
.offer .btn { padding: 10px 16px; font-size: 15px; }
.empty { color: var(--grau); }
@media (max-width: 480px) { .pfacts div { grid-template-columns: minmax(0, 1fr); gap: 0; } .calc-row input { width: 92px; } }

/* ---------- Wasser-Check: Einstieg und Produkte zum Ergebnis ---------- */
.water-intro { padding: 12px 0 28px; margin-bottom: 18px; border-bottom: 1px solid var(--fuge); }
.water-intro h1 { font-size: clamp(32px, 5vw, 48px); }
.water-intro .lead { font-size: 18px; margin: 12px 0 22px; }
.water-intro h2 { font-size: 21px; margin-bottom: 10px; }
.water-trio { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.water-trio li { font-size: 16px; color: var(--grau); padding-left: 14px; border-left: 4px solid var(--tuerkis); }
.water-trio b { display: block; color: var(--tief); font-size: 17px; }
.water-start { margin: 18px 0 0; font-weight: 700; color: var(--kachel); }
.water-products { margin: 8px 0 16px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: clamp(18px, 3vw, 26px); animation: fadein .2s ease-out; }
.water-products h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 6px; }
.water-products-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: var(--tief); }
.water-products .intro { margin-bottom: 4px; }
.water-step { border-top: 1px solid var(--fuge); padding-top: 14px; margin-top: 16px; }
.water-step h3 { font-size: 19px; margin-bottom: 10px; }
.water-step .pcards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.water-step .pcard-img { aspect-ratio: 16 / 7; }
.pcard h4 { margin: 0; font-size: 18px; }
.pcard-why { margin: 0; font-size: 15px; color: var(--grau); }
.nothing { margin: 0; font-weight: 700; color: var(--tief); }
/* Wasserwerte verstehen */
.water-values { margin-top: 32px; }
.water-values .guide-blocks p + p { margin-top: 8px; }
.water-values .merke { background: var(--tint-aqua); border-radius: 10px; padding: 8px 12px; color: var(--tief); }
.water-motto { margin-top: 40px; }
.water-motto h3 { margin: 4px 0 8px; }
/* Plan in vier Phasen, Kontext-Helfer, Wissen und verwandte Tools */
.water-plan { list-style: none; counter-reset: ph; padding: 0; margin: 10px 0 8px; display: grid; gap: 12px; }
.water-plan > li { counter-increment: ph; border-left: 4px solid var(--tuerkis); padding: 2px 0 2px 16px; }
.water-plan h3 { font-size: 19px; margin-bottom: 4px; }
.water-plan h3::before { content: counter(ph) '. '; color: var(--kachel); }
.water-plan ul { margin: 0; padding-left: 18px; color: var(--grau); font-size: 16px; display: grid; gap: 4px; }
.plan-products-title { margin-top: 28px; }
.water-helper { margin: 6px 0 12px; background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 16px; padding: 16px 18px; animation: fadein .2s ease-out; }
.water-helper h3 { font-size: 18px; margin-bottom: 4px; }
.water-helper p { margin: 0 0 6px; font-size: 15px; color: var(--grau); }
.water-helper .calc-row input { width: 92px; }
.water-helper .vol-out { color: var(--tief); }
.water-more { margin-top: 32px; }
.knowledge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.knowledge-grid > * { display: grid; gap: 6px; align-content: start; background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 18px; padding: 20px; color: var(--tief); text-decoration: none; }
.knowledge-grid a:hover { border-color: var(--kachel); }
.knowledge-grid b { font-size: 19px; line-height: 1.25; }
.knowledge-grid span { color: var(--grau); font-size: 15px; }
.knowledge-grid em { font-style: normal; font-weight: 700; color: var(--kachel); }
.knowledge-grid .soon em { color: var(--grau); }
.related-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.related-tools a { flex: 1 1 220px; display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--rahmen); border-radius: 14px; color: var(--tief); text-decoration: none; background: var(--weiss); }
.related-tools a:hover { border-color: var(--kachel); }
.related-tools b::after { content: ' →'; color: var(--kachel); }
.related-tools span { font-size: 14px; color: var(--grau); }
@media (max-width: 980px) { .knowledge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .knowledge-grid { grid-template-columns: minmax(0, 1fr); } }
.nothing::before { content: '✓ '; color: var(--tuerkis); }

/* ---------- Ratgeber Poolroboter ---------- */
.rob-benefits { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rahmen); border: 1px solid var(--rahmen); border-radius: 20px; overflow: hidden; }
.rob-benefits li { background: var(--weiss); padding: 20px; font-size: 16px; color: var(--grau); }
.rob-benefits b { display: block; color: var(--tief); font-size: 18px; margin-bottom: 6px; }
.rob-note h3 { font-size: clamp(19px, 2.4vw, 24px); }
.rob-check-section, .rob-costs { background: var(--tint-aqua); }
.rob-check-section .more-q fieldset { background: var(--weiss); }
.rob-result { margin-top: 20px; background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 20px; padding: 20px 24px; max-width: 760px; animation: fadein .2s ease-out; }
.rob-result .checks { margin: 10px 0 16px; }
.rob-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rob-class { background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 20px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: border-color .2s, background-color .2s; }
.rob-class.active { border: 2px solid var(--kachel); background: var(--weiss); }
.rob-class:nth-child(2) { border-top: 5px solid var(--tuerkis); }
.rob-sign { margin: 0; font-size: 26px; font-weight: 800; color: var(--kachel); letter-spacing: .05em; }
.rob-class h3 { font-size: 21px; }
.rob-does { margin: 0; font-weight: 700; color: var(--tief); }
.rob-class p { margin: 0; }
.rob-class .btn { justify-self: start; margin-top: 6px; }
.rob-models { margin-top: 28px; scroll-margin-top: 16px; }
.rob-models h3 { font-size: clamp(21px, 2.6vw, 26px); }
.rob-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .rob-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rob-benefits, .rob-classes, .rob-worlds { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Startseite als Portal ----------
   Hintergründe im Wechsel: Hero Aqua → Themen Weiß → Pool-Finder Aqua-Weiß → Lifestyle Beige → Ratgeber Weiß
   → Pool-Typen Aqua → Wir Beige → Poolwissen Weiß → Helfer Aqua-Weiß → Abschluss Weiß */
.section-title { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 24px; }
.arrow-link { font-weight: 700; color: var(--kachel); text-decoration: none; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.topics, .teaser, .knowledge, .final { background: var(--weiss); }
.how, .doors { background: var(--chlor); }
.life, .owners { background: var(--tint-warm); }
.worlds-home { background: var(--tint-aqua); }

/* Themen-Leiste: eine zusammenhängende Fläche mit feinen Trennlinien */
.topic-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rahmen); border: 1px solid var(--rahmen); border-radius: 20px; overflow: hidden; }
.topic-strip a { display: grid; justify-items: start; align-content: start; gap: 6px; padding: 22px 18px; background: var(--weiss); color: var(--tief); text-decoration: none; }
.topic-strip a:hover { background: var(--tint-aqua); }
.topic-strip svg { width: 44px; height: 44px; fill: none; stroke: var(--kachel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.topic-strip b { font-size: 17px; }
.topic-strip span { font-size: 14px; font-weight: 700; color: var(--kachel); }
@media (max-width: 980px) { .topic-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .topic-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topic-strip a { padding: 16px 14px; } }

/* Lifestyle und "Wir": großes Bild bzw. Fotos neben wenig Text */
.life-grid, .owners-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.owners-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.life-grid img { display: block; width: 100%; height: auto; border-radius: 22px; }
.life h2, .owners h2 { font-size: clamp(30px, 4vw, 48px); margin: 6px 0 14px; }
.life-text { font-size: 19px; color: var(--grau); max-width: 32em; }
.owner-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.owner-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.owner-photos .photo-ph { aspect-ratio: 3 / 4; }

/* Pool-Typen: vier Bild-Einstiege */
.pooltypes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pooltypes a { display: grid; gap: 6px; align-content: start; background: var(--weiss); border-radius: 20px; padding: 16px 18px 20px; color: var(--tief); text-decoration: none; box-shadow: var(--schatten); }
.pooltypes a:hover { outline: 2px solid var(--kachel); }
.pooltypes svg { width: 100%; height: auto; background: var(--chlor); border-radius: 14px; margin-bottom: 8px; }
.pooltypes b { font-size: 19px; }
.pooltypes span { font-size: 15px; color: var(--grau); }
.pooltypes em { font-style: normal; font-weight: 700; color: var(--kachel); margin-top: 4px; }
.section-more { margin: 24px 0 0; }
@media (max-width: 980px) { .pooltypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Startseite: "Wobei können wir dir helfen?" und "So funktioniert dein Pool" */
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.help-grid a { display: grid; gap: 4px; align-content: start; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 16px 18px; color: var(--tief); text-decoration: none; box-shadow: var(--schatten); transition: border-color .2s, transform .2s; }
.help-grid a:hover { border-color: var(--kachel); transform: translateY(-1px); }
.help-grid b { font-size: 17px; line-height: 1.3; }
.help-grid span { font-size: 15px; color: var(--grau); }
.help-grid em { font-style: normal; font-weight: 700; color: var(--kachel); font-size: 15px; margin-top: 2px; }
@media (max-width: 900px) { .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .help-grid { grid-template-columns: minmax(0, 1fr); } }
.home-tech { background: var(--tint-aqua); }
.home-tech-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.home-tech .part-card { margin-top: 0; }
.part-link { margin: 10px 0 0; font-weight: 700; }
@media (max-width: 860px) { .home-tech-grid { grid-template-columns: minmax(0, 1fr); } }
.final { background: var(--chlor); }

/* Themen-Leiste: Eintrag mit Unterlink (Wasser & Pflege → Poolroboter) */
.topic-strip > .topic-dual { display: grid; align-content: start; background: var(--weiss); }
.topic-strip .topic-main { padding-bottom: 6px; }
.topic-strip .topic-sub { padding: 4px 18px 18px; font-size: 14px; font-weight: 700; color: var(--kachel); }
.topic-strip .topic-sub:hover { background: var(--tint-aqua); }

/* Großer Teaser über der Poolwissen-Liste */
.feature-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 40px); align-items: center; background: var(--tint-aqua); border-radius: 22px; padding: clamp(16px, 3vw, 28px); margin-bottom: 28px; color: var(--tief); text-decoration: none; }
.feature-teaser img { display: block; width: 100%; height: auto; border-radius: 16px; }
.feature-teaser small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kachel); }
.feature-teaser b { display: block; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 4px 0 8px; }
.feature-teaser p { color: var(--grau); margin: 0 0 12px; }
.feature-teaser span { font-weight: 700; color: var(--kachel); }
.feature-teaser:hover b { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 720px) { .feature-teaser { grid-template-columns: minmax(0, 1fr); } }

/* Poolwissen: redaktionelle Liste */
.knowledge-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.knowledge-list li { border-top: 1px solid var(--fuge); }
.knowledge-list a, .knowledge-list li > div { display: grid; gap: 4px; padding: 18px 0; color: var(--tief); text-decoration: none; }
.knowledge-list small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kachel); }
.knowledge-list b { font-size: 19px; line-height: 1.3; }
.knowledge-list span { font-size: 15px; font-weight: 700; color: var(--kachel); }
.knowledge-list a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.knowledge-list .soon span, .knowledge-list .soon small { color: var(--grau); }

@media (max-width: 720px) {
  .life-grid, .owners-grid, .knowledge-list { grid-template-columns: minmax(0, 1fr); }
  .pooltypes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Pool-Finder: Hero mit Infografik, Beispiel-Match, Pooltypen, Vertrauen ---------- */
.chat-main.finder { padding-top: 0; }
.finder > section { padding: clamp(32px, 5vw, 64px) 0; }
.finder-hero { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); }
/* Desktop: Text und Start links, Grafik rechts. Mobil: Text → Grafik → Start */
.finder-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); grid-template-areas: "text art" "cta art"; gap: 0 clamp(24px, 4vw, 56px); align-items: center; }
.finder-text { grid-area: text; align-self: end; }
.finder-cta { grid-area: cta; align-self: start; margin-top: 18px; }
.finder-art { grid-area: art; margin: 0; }
.finder-text .hello { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 10px; }
.finder-text .lead { margin: 0 0 16px; }
.finder-text .checks { font-size: 17px; font-weight: 600; color: var(--tief); }
.finder-art svg { display: block; width: 100%; height: auto; }
.finder-art figcaption { font-size: 14px; color: var(--grau); text-align: center; margin-top: 6px; }
.finder-art .hs rect { fill: #fff; stroke: var(--rahmen); stroke-width: 1.5; }
.finder-art .hs-t { font: 800 15px var(--sans); fill: #0b4655; }
.finder-art .hs-s { font: 500 12px var(--sans); fill: #48646d; }
@media (max-width: 860px) {
  .finder-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "art" "cta"; }
  .finder-art { margin-top: 18px; }
}
/* Kurzer Hero: nur Überschrift, ein Satz, drei Haken. Die Grafik erst ab Tablet-Breite, damit Frage 1 mobil gleich kommt */
.finder .finder-hero { padding: clamp(24px, 4vw, 48px) 0; }
.finder-grid { grid-template-areas: "text art"; }
.finder-text h1 { font-size: clamp(30px, 4vw, 50px); margin: 0 0 12px; }
.finder-art svg { max-height: 300px; }
.pf-checks { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
@media (max-width: 860px) { .finder-grid { grid-template-areas: "text"; } .finder-art { display: none; } }

/* Der Finder selbst: das Hauptelement der Seite */
.finder .pf-section { padding-top: clamp(28px, 4vw, 48px); scroll-margin-top: 12px; }
.pf-wrap { max-width: 860px; }
.pf-title { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 16px; }
.pf-box { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 24px; box-shadow: var(--schatten); padding: clamp(18px, 4vw, 40px); scroll-margin-top: 12px; }
.pf-kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kachel); }
.pf-step { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 4px 0 8px; color: var(--grau); font-size: 15px; }
.pf-step b { color: var(--tief); font-size: 18px; }
.pf-bar { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 3vw, 28px); }
.pf-bar progress { flex: 1; height: 10px; border: 0; border-radius: 999px; background: var(--chlor); overflow: hidden; appearance: none; }
.pf-bar progress::-webkit-progress-bar { background: var(--chlor); border-radius: 999px; }
.pf-bar progress::-webkit-progress-value { background: var(--tuerkis); border-radius: 999px; transition: width .3s; }
.pf-bar progress::-moz-progress-bar { background: var(--tuerkis); border-radius: 999px; }
.pf-pct { font-weight: 800; color: var(--tief); font-size: 15px; min-width: 3em; text-align: right; }
.pf-info { background: var(--tint-aqua); border-radius: 12px; padding: 10px 14px; font-size: 15px; color: var(--tief); margin: 0 0 16px; }
.pf-q { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; margin: 0 0 6px; outline: none; }
.pf-q.is-hint { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.35; }
.pf-sub { margin: 0; color: var(--grau); font-size: 16px; max-width: 40em; }
.pf-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.pf-opt { font: inherit; text-align: left; display: grid; gap: 2px; padding: 16px 18px; min-height: 64px; border: 2px solid var(--rahmen); border-radius: 16px; background: var(--weiss); color: var(--tief); cursor: pointer; transition: border-color .15s, background .15s; }
.pf-opt b { font-size: 17px; }
.pf-opt small { color: var(--grau); font-size: 14px; }
.pf-opt:hover { border-color: var(--kachel); }
.pf-opt:focus-visible { outline: 3px solid var(--kachel); outline-offset: 2px; }
.pf-opt[aria-pressed="true"] { border-color: var(--tuerkis); background: var(--tint-aqua); box-shadow: inset 0 0 0 1px var(--tuerkis); }
.pf-opt[aria-pressed="true"] b::before { content: '✓ '; color: var(--tuerkis); }
.pf-opt.unsure { border-style: dashed; }
/* Exakte Poolmaße: eigene Zeile für den Einstieg, Form als Chips, Felder nebeneinander (auch bei 320 px) */
.pf-opt-wide { grid-column: 1 / -1; border-color: var(--tuerkis); }
.pf-masse { grid-column: 1 / -1; display: grid; gap: 14px; }
.pf-masse-form { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip { font: 600 15px var(--sans); min-height: 44px; padding: 8px 16px; border: 2px solid var(--rahmen); border-radius: 999px; background: var(--weiss); color: var(--tief); cursor: pointer; }
.pf-chip[aria-pressed="true"] { border-color: var(--tuerkis); background: var(--tint-aqua); }
.pf-chip:focus-visible { outline: 3px solid var(--kachel); outline-offset: 2px; }
.pf-masse-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-masse-feld { display: grid; gap: 4px; font-size: 15px; font-weight: 600; }
.pf-masse-feld input { font: 17px var(--sans); min-height: 48px; padding: 10px 12px; border: 2px solid var(--rahmen); border-radius: var(--r-m); background: var(--weiss); color: var(--tief); width: 100%; }
.pf-masse-feld input:focus-visible { outline: 3px solid var(--kachel); outline-offset: 1px; }
.pf-masse-err { margin: 0; color: var(--kachel); font-weight: 600; font-size: 15px; }
.pf-masse-err:empty { display: none; }
.pf-masse-hint { margin: 0; font-size: 14px; color: var(--grau); }
.pf-note { min-height: 1.5em; margin: 14px 0 0; color: var(--kachel); font-weight: 600; font-size: 15px; }
.pf-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fuge); }
.pf-nav .pf-next { margin-left: auto; }
.pf-next:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.pf-back { font: 700 16px var(--sans); background: none; border: 0; color: var(--grau); cursor: pointer; padding: 10px 4px; min-height: 44px; }
.pf-back:hover { color: var(--tief); }
.pf-privacy { margin: 12px 0 0; font-size: 13px; color: var(--grau); }
.pf-loading { margin: 8px 0 0; color: var(--grau); font-size: 15px; }
/* Wasserlinie: drei große Bildkarten, ganze Karte klickbar; mobil untereinander, ab Tablet nebeneinander */
.pf-answers.is-visual { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .pf-answers.is-visual { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-opt-vis { align-content: start; gap: 6px; padding: 12px 14px 14px; }
.pf-rand-svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pf-badge { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--tief); background: var(--tint-aqua); border-radius: 999px; padding: 3px 9px; }
.pf-badge.is-tipp { background: var(--tuerkis); color: #fff; }
.pf-opt .pf-opt-note { font-style: italic; }
.pf-rand-why { margin: 8px 0 4px; font-weight: 600; color: var(--tief); }
/* Fortschritt: nur „Frage x von y“ und ein dünner Balken */
.pf-step { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--grau); }
.pf-bar progress { height: 4px; }
.pf-opt { transition: border-color .15s, background .15s, transform .1s; }
.pf-opt:active { transform: scale(.99); }
@media (max-width: 560px) {
  .pf-answers { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .pf-opt { min-height: 52px; padding: 12px 16px; border-radius: 14px; }
  .pf-opt b { font-size: 16px; }
  .pf-opt small { font-size: 13px; }
  /* Mobil ohne Rahmen um den Planer: die Frage steht direkt unter dem Intro */
  .pf-box { background: none; border: 0; box-shadow: none; padding: 0; }
  .finder .finder-hero { padding: 18px 0 16px; border-bottom: 0; }
  .finder-text h1 { font-size: 28px; margin-bottom: 8px; }
  .finder-text .lead { font-size: 16px; margin-bottom: 10px; }
  .finder-text .pf-checks { font-size: 14px; gap: 2px 14px; }
  .finder .pf-section { padding-top: 18px; }
  .pf-q { font-size: 22px; }
  .pf-nav { border-top: 0; padding-top: 0; margin-top: 10px; }
}
.pf-nav:empty { display: none; }

/* Ergebnis: Fertig → Angaben → 🥇 groß, 🥈 und 🥉 kompakter untereinander */
.pf-result { scroll-margin-top: 12px; }
.pf-done { text-align: center; margin-bottom: 22px; }
.pf-check { display: inline-block; margin: 0 0 6px; background: var(--tuerkis); color: #fff; font-weight: 800; border-radius: 999px; padding: 4px 14px; }
.pf-done h2 { font-size: clamp(30px, 4.4vw, 46px); margin: 0 0 8px; outline: none; }
.pf-done .lead { margin: 0 auto; max-width: 34em; }
.pf-summary { background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 18px; font-size: 14px; }
.pf-summary-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.pf-summary h3 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kachel); margin: 0; }
.pf-edit { font: 700 14px var(--sans); background: none; border: 0; color: var(--kachel); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.pf-summary dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; }
.pf-summary dt { color: var(--grau); font-size: 12px; }
.pf-summary dd { margin: 0; font-weight: 700; color: var(--tief); }
.pf-summary dd small { font-weight: 500; color: var(--grau); }
.pf-rank-title { font-size: clamp(22px, 3vw, 30px); margin: 36px 0 12px; }
.pf-card { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 22px; padding: clamp(16px, 3vw, 28px); }
.pf-main { border: 2px solid var(--tuerkis); box-shadow: var(--schatten); padding: clamp(18px, 4vw, 36px); }
.pf-card-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 220px); gap: 18px; align-items: center; }
.pf-alt .pf-card-head { grid-template-columns: minmax(0, 1fr) minmax(100px, 160px); }
.pf-card h3 { font-size: clamp(22px, 3vw, 28px); margin: 2px 0; }
.pf-main h3 { font-size: clamp(28px, 4vw, 40px); }
.pf-size { margin: 0; font-weight: 700; color: var(--kachel); font-size: 17px; }
.pf-art { display: block; width: 100%; height: auto; background: var(--chlor); border-radius: 14px; }
.pf-card h4 { font-size: 18px; margin: 22px 0 6px; }
.pf-why { margin: 0; font-size: 17px; color: var(--tief); max-width: 42em; }
.pf-alt .pf-why { font-size: 16px; }
.pf-facts { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-facts div { background: var(--chlor); border-radius: 12px; padding: 10px 12px; }
.pf-facts div:last-child { grid-column: 1 / -1; }
.pf-facts dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--grau); }
.pf-facts dd { margin: 2px 0 0; font-weight: 700; color: var(--tief); overflow-wrap: anywhere; }
.pf-facts dd small { display: block; font-weight: 500; font-size: 13px; color: var(--grau); }
.pf-costs { margin-top: 14px; }
.pf-costs summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
.pf-costs h5 { font-size: 16px; margin: 14px 0 4px; }
.pf-offers { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pf-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; border: 1px solid var(--fuge); border-radius: 14px; padding: 12px 14px; }
.pf-offer img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: var(--chlor); }
.pf-offer:has(img) { grid-template-columns: 72px minmax(0, 1fr) auto; }
.pf-offer-text { display: grid; gap: 2px; font-size: 14px; color: var(--grau); overflow-wrap: anywhere; }
.pf-offer-text b { font-size: 16px; color: var(--tief); }
.pf-price { font-weight: 700; color: var(--tief); }
.pf-buy { white-space: nowrap; font-weight: 700; }
.pf-compare { grid-column: 1 / -1; font-size: 14px; }
.pf-compare summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
.pf-compare ul { margin: 6px 0 0; padding-left: 18px; }
.pf-none { margin: 0; background: var(--chlor); border-radius: 10px; padding: 10px 14px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 720px) { .pf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pf-card-head, .pf-alt .pf-card-head { grid-template-columns: minmax(0, 1fr); }
  .pf-art { max-width: 200px; }
  .pf-offer, .pf-offer:has(img) { grid-template-columns: minmax(0, 1fr); }
  .pf-offer img { display: none; }
  .pf-buy .btn { width: calc(100% - 12px); text-align: center; }
}

/* ---------- Poolarten im Vergleich ---------- */
.arten-legend { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 700; color: var(--grau); }
.arten-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.art-card { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: 16px 18px 18px; display: grid; gap: 6px; align-content: start; box-shadow: var(--schatten); transition: border-color .2s; }
.art-card:hover { border-color: var(--kachel); }
.art-card svg { width: 100%; height: auto; background: var(--chlor); border-radius: 14px; margin-bottom: 4px; }
.art-card h3 { font-size: 20px; }
.art-card > p { margin: 0 0 4px; color: var(--grau); font-size: 15px; }
.meters { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 5px; font-size: 14px; }
.meters li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.meter { display: inline-flex; gap: 4px; color: var(--grau); }
.meter i { width: 12px; height: 12px; border-radius: 50%; background: var(--fuge); }
.meter i.on { background: var(--kachel); }
.art-detail { border-top: 1px solid var(--fuge); padding: 28px 0; scroll-margin-top: 16px; }
.art-detail h3 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 12px; }
.art-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin-bottom: 14px; }
.art-cols h4 { margin: 0 0 4px; font-size: 16px; color: var(--kachel); }
.art-cols ul { margin: 0; padding-left: 20px; color: var(--grau); }
.art-facts { margin: 0 0 16px; max-width: 880px; }
.art-facts div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--fuge); }
.art-facts dt { font-weight: 700; color: var(--tief); }
.art-facts dd { margin: 0; color: var(--grau); }
@media (max-width: 980px) { .arten-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .arten-grid, .art-cols { grid-template-columns: minmax(0, 1fr); }
  .art-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Wärmepumpenrechner ---------- */
.wp-head h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 4px 0 12px; }
.wp-head > p:not(.kicker):not(.wp-badge) { max-width: 44em; color: var(--grau); }
.wp-badge { display: inline-block; font-size: 14px; font-weight: 700; color: var(--tief); background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 999px; padding: 6px 14px; }
.wp-what { background: var(--weiss); border-left: 5px solid var(--tuerkis); border-radius: 0 14px 14px 0; padding: 14px 18px; }
.wp-what h4 { margin: 0 0 4px; font-size: 17px; }
.wp-what p { margin: 0; font-size: 15px; color: var(--grau); }
.calc-note { margin-top: 28px; background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 16px; padding: 16px 20px; max-width: 900px; }
.calc-note h3 { font-size: 17px; margin-bottom: 6px; }
.calc-note p { margin: 0; font-size: 15px; color: var(--tief); }
.offer-table { display: grid; gap: 10px; }
.offer-table .btn { justify-self: start; }
.offer-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.offer-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--grau); padding: 6px 6px 6px 0; }
.offer-table td { padding: 8px 6px 8px 0; border-top: 1px solid var(--fuge); vertical-align: top; }
.offer-table td a { font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) {
  .offer-table thead { display: none; }
  .offer-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--fuge); }
  .offer-table td { border: 0; padding: 0; }
}
.guide-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.guide-blocks article { border-top: 4px solid var(--tuerkis); padding-top: 14px; }
.guide-blocks h3 { font-size: clamp(20px, 2.2vw, 24px); margin-bottom: 8px; }
.guide-blocks p { color: var(--grau); margin: 0; }
@media (max-width: 720px) { .guide-blocks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Frühere Dachmarken-Leiste (dh-*), derzeit ungenutzt ---------- */
.dh-bar { background: #f3f6f6; border-bottom: 1px solid #e1e8ea; font-size: 13px; color: #123f4a; position: relative; z-index: 21; }
.dh-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.dh-brand { display: inline-flex; align-items: center; gap: 8px; }
.dh-icon { display: block; border-radius: 6px; }
.dh-name { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.dh-claim { color: #5b6f74; }
.dh-crumb { display: none; font-weight: 700; color: var(--logo-akzent); }
.dh-worlds { display: flex; flex-wrap: wrap; gap: 2px; }
.dh-world { position: relative; padding: 4px 10px; border-radius: 8px; color: #5b6f74; text-decoration: none; }
.dh-world.active { color: #123f4a; font-weight: 800; background: #e3ecee; }
.dh-world.soon { cursor: default; }
.dh-world small { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #123f4a; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 40; }
.dh-world.soon:hover small, .dh-world.soon:focus small { opacity: 1; visibility: visible; }
.dh-menu-worlds { display: none; }
@media (max-width: 980px) { .dh-claim { display: none; } }
@media (max-width: 720px) {
  /* Mobil nur kompakt; die Welten stehen unten im Menü */
  .dh-worlds { display: none; }
  .dh-crumb { display: inline; }
  .dh-wrap { min-height: 30px; }
  .menu .dh-menu-worlds { display: grid; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--fuge); font-size: 14px; color: var(--grau); }
  .dh-menu-worlds p { margin: 0; font-weight: 800; color: #123f4a; }
}
/* Footer: Dachmarke und Welten */
.dh-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; width: 100%; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.dh-foot-brand { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; margin: 0; }
.dh-foot-brand img { grid-row: span 2; }
.dh-foot-brand b { letter-spacing: .12em; color: #fff; }
.dh-foot-brand span { color: #a9d6df; font-size: 13px; }
.dh-foot-text { margin: 0; align-self: center; color: #d6e9ed; }
.hero-brand { letter-spacing: .2em; text-transform: uppercase; font-size: 13px; margin-bottom: 10px; }
.dh-foot-worlds { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: #a9d6df; }
.dh-foot-title { width: 100%; font-weight: 800; color: #fff; }
/* Vorschau-Seite (draussenhelden-vorschau.html) */
.dh-head { background: #fff; border-bottom: 1px solid #e1e8ea; }
.dh-head .wrap { padding-top: 14px; padding-bottom: 14px; }
.dh-head-brand { display: inline-flex; align-items: center; gap: 12px; color: #123f4a; }
.dh-head-brand b { display: block; letter-spacing: .14em; font-size: 20px; }
.dh-head-brand small { display: block; font-size: 13px; color: #5b6f74; }
.dh-worlds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.dh-card { display: grid; gap: 6px; align-content: start; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 14px 14px 18px; color: var(--tief); text-decoration: none; }
.dh-card img, .dh-card-art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.dh-card-art { display: grid; place-items: center; background: #f3f6f6; color: #5b6f74; font-size: 13px; }
.dh-card b { font-size: 18px; }
.dh-card span { color: var(--grau); font-size: 15px; }
.dh-card em { font-style: normal; font-weight: 700; color: var(--kachel); }
.dh-card.soon em { color: var(--grau); }
a.dh-card:hover { border-color: var(--kachel); }
/* Hinweis auf der Startseite */
.dh-note { font-size: 13px; color: var(--grau); margin: 14px 0 0; }
.dh-note b { color: #123f4a; }

/* ---------- Hauptmenü: ruhig im Ruhezustand, lebendig beim Hover, Dropdowns ---------- */
.top { z-index: 20; }
.menu { gap: 2px; align-items: center; }
.menu > a, .nav-item > a { padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background-color .2s, color .2s, transform .2s; }
.menu > a:hover, .nav-item > a:hover, .nav-item:hover > a, .menu > a:focus-visible, .nav-item > a:focus-visible {
  background: color-mix(in srgb, var(--tuerkis) 12%, transparent); color: var(--logo-akzent); transform: translateY(-1px); }
/* Aktuelle Seite: dauerhaft türkis unterstrichen */
.menu a[aria-current="page"] { color: var(--logo-akzent); text-decoration: underline; text-decoration-color: var(--tuerkis); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.nav-item { position: relative; display: flex; align-items: center; }
.sub-toggle { border: 0; background: none; color: var(--grau); width: 20px; height: 32px; margin-left: -6px; padding: 0; cursor: pointer; border-radius: 6px; font: 700 12px var(--sans); transition: color .2s, transform .2s; }
.sub-toggle::before { content: '▾'; }
.nav-item:hover .sub-toggle, .sub-toggle:focus-visible { color: var(--logo-akzent); }
.nav-item.open .sub-toggle { transform: rotate(180deg); }
.sub { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 270px; display: grid; gap: 2px; padding: 8px;
  background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; box-shadow: 0 14px 34px rgba(11, 70, 85, .14);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, transform .2s, visibility .2s; }
.sub::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* Brücke, damit das Menü beim Hinüberfahren offen bleibt */
.nav-item:last-child .sub, .nav-item:nth-last-child(2) .sub { left: auto; right: 0; }
@media (hover: hover) { .nav-item:hover .sub { opacity: 1; visibility: visible; transform: none; } }
/* Tastatur: offen, solange der Fokus sichtbar im Menüpunkt ist; Tap/Klick: über .open */
.nav-item:has(:focus-visible) .sub, .nav-item.open .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--tief); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3; transition: background-color .2s, color .2s; }
.sub a:hover, .sub a:focus-visible { background: var(--tint-aqua); color: var(--logo-akzent); }
.sub small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--grau); }
/* Untermenü mit Zwischenüberschriften (Wasser & Pflege): zwei Spalten, Gruppen bleiben zusammen */
.sub.groups { display: block; column-count: 2; column-gap: 8px; min-width: 500px; left: auto; right: 0; }
.sub-group { break-inside: avoid; padding-bottom: 6px; }
.sub-head { display: block; padding: 8px 12px 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--kachel); }
@media (max-width: 720px) {
  /* .sub.groups ist spezifischer als .sub: hier ausdrücklich zuklappen, sonst bleibt das Akkordeon offen */
  .sub.groups { display: none; column-count: 1; min-width: 0; }
  .nav-item.open .sub.groups { display: block; }
  .menu { gap: 2px; }
  .menu > a, .nav-item > a { flex: 1; padding: 12px 10px; }
  .nav-item { flex-wrap: wrap; }
  .sub-toggle { width: 44px; height: 44px; margin: 0; font-size: 16px; }
  /* Im mobilen Menü als Akkordeon per Tap, nicht per Hover */
  .sub { position: static; display: none; min-width: 0; width: 100%; padding: 0 0 8px 12px; border: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; transform: none; }
  .sub::before { display: none; }
  .nav-item.open .sub { display: grid; }
  .sub a { min-height: 44px; }
  /* Fünf Hauptpunkte, ruhig und schnell scanbar: Hauptpunkte mit Trennlinie, im Untermenü nur Titel ohne Erklärzeile */
  .menu > .nav-item:not(.nav-cta) { border-bottom: 1px solid var(--fuge); }
  .menu > .nav-item > a { font-size: 17px; font-weight: 700; }
  .sub small { display: none; }
  .sub a { display: flex; align-items: center; padding: 8px 12px; }
  .sub-head { padding-top: 12px; }
  /* Rechner & Tools als klarer direkter Einstieg */
  .nav-item.nav-cta { margin-top: 10px; }
  .nav-item.nav-cta > a { text-align: center; border-radius: 12px; padding: 13px 10px; }
}
/* Sechs Hauptpunkte: bei knapper Breite darf das Menü umbrechen statt überzulaufen */
.menu { flex-wrap: wrap; justify-content: flex-end; }
/* Tablets und kleine Laptops: kompakter und ohne Claim unter dem Logo */
@media (min-width: 721px) and (max-width: 1100px) {
  .top .logo small { display: none; }
  .menu { font-size: 14px; }
  .menu > a, .nav-item > a { padding: 8px 5px; }
  .sub-toggle { width: 16px; }
}
@media (prefers-reduced-motion: reduce) { .menu > a:hover, .nav-item > a:hover, .nav-item:hover > a { transform: none; } }

/* ---------- Wasser & Pflege (poolpflege/): testen → einstellen → Probleme lösen → sauber halten ---------- */
.care > section:not(.home-hero) { padding: clamp(36px, 5vw, 64px) 0; }
.care > section h2 { font-size: clamp(26px, 3.2vw, 38px); }
.care > section h3 { font-size: 20px; }
.care-head { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); }
.care-head h1 { font-size: clamp(30px, 4.4vw, 52px); max-width: 18em; margin: 6px 0 0; text-wrap: balance; }
.care-head .kicker { font-size: 15px; margin: 0; color: var(--kachel); }
.care-head .kicker a { color: inherit; }
.care-steps { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.care-step { position: relative; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: 22px 22px 22px 70px; display: grid; gap: 10px; align-content: start; }
.care-step .care-n { position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--kachel); color: #fff; display: grid; place-items: center; font-weight: 800; }
.care .care-step h2 { font-size: 24px; margin: 4px 0 0; }
.care-step p { margin: 0; color: var(--grau); }
.care-step .btn { justify-self: start; margin-top: 4px; }
.care-step-main { border: 2px solid var(--tuerkis); background: var(--tint-aqua); box-shadow: var(--schatten); }
.care-step-main .care-n { background: var(--tuerkis); }
.arrows { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-weight: 600; color: var(--tief); }
.arrows li::before { content: '→ '; color: var(--tuerkis); }
.method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.method { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 20px; }
.method h3 { margin: 0 0 8px; }
.method dl { margin: 0; }
.method dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kachel); margin-top: 10px; }
.method dd { margin: 2px 0 0; color: var(--tief); }
.care-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 12px; }
.care-pair > div { background: var(--chlor); border-radius: 16px; padding: 16px 18px; }
.care-pair h3 { margin: 0 0 4px; }
.care-pair p { margin: 0; color: var(--grau); }
.care-flow { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: flow; }
.care-flow li { counter-increment: flow; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 999px; padding: 6px 14px; font-weight: 800; color: var(--tief); }
.care-flow li::before { content: counter(flow) '. '; color: var(--tuerkis); }
.care-flow li + li::after { content: none; }
.care-checks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.care-checks li { background: var(--weiss); border-radius: 12px; padding: 12px 16px; color: var(--grau); }
.care-checks b { display: block; color: var(--tief); }
.care-checks li b::before { content: '✓ '; color: var(--tuerkis); }
.care-tools { display: grid; gap: 18px; }
.care-tools > article { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: clamp(18px, 3vw, 28px); scroll-margin-top: 16px; }
.care .care-tools h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 6px; }
.care-tools p { color: var(--grau); }
.care-tool-main { border: 2px solid var(--tuerkis) !important; background: var(--tint-aqua) !important; }
.care-products { margin: 12px 0 22px; }
.care-products:empty { display: none; }
@media (max-width: 860px) { .method-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .care-steps, .care-pair { grid-template-columns: minmax(0, 1fr); }
  .care-step { padding: 64px 18px 20px; }
  .care-step .btn { justify-self: stretch; text-align: center; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Frag uns: Beratungsfläche statt Chatfenster ---------- */
.ask-wrap { max-width: 820px; }
.ask-head { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); }
.ask-head h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 6px 0 10px; }
.ask-head .lead { margin: 0; max-width: 36em; }
.ask-badge { display: inline-block; margin: 0; background: var(--weiss); border: 1px solid var(--rahmen); color: var(--kachel); font-size: 13px; font-weight: 800; border-radius: 999px; padding: 3px 12px; }
.ask-body { padding: clamp(24px, 4vw, 44px) 0 64px; }
.ask-thread { display: grid; gap: 16px; margin-bottom: 16px; }
.ask-thread:empty { display: none; }
.ask-q { justify-self: end; max-width: 85%; margin: 0; background: var(--tief); color: #fff; border-radius: 18px 18px 6px 18px; padding: 10px 16px; overflow-wrap: anywhere; white-space: pre-line; }
.ask-wait { margin: 0; color: var(--grau); font-weight: 600; }
.ask-answer { background: var(--weiss); border: 1px solid var(--rahmen); border-left: 4px solid var(--tuerkis); border-radius: 18px; box-shadow: var(--schatten); padding: clamp(18px, 3.5vw, 30px); display: grid; gap: 12px; }
.ask-kicker { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kachel); }
.ask-text { margin: 0; font-size: 17px; color: var(--tief); white-space: pre-line; overflow-wrap: anywhere; }
.ask-answer h3 { font-size: 19px; margin: 8px 0 0; }
.ask-steps { margin: 0; padding-left: 22px; display: grid; gap: 4px; color: var(--tief); }
.ask-follow { margin: 0; background: var(--tint-aqua); border-radius: 12px; padding: 10px 14px; font-weight: 700; color: var(--tief); }
.ask-tool { justify-self: start; }
.ask-help { display: grid; gap: 10px; }
.ask-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ask-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 12px; border-top: 1px solid var(--fuge); font-size: 15px; color: var(--grau); }
.ask-fb { font: 700 15px var(--sans); background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 999px; padding: 6px 14px; min-height: 40px; cursor: pointer; color: var(--tief); }
.ask-fb:hover { border-color: var(--kachel); }
.ask-missing { display: grid; gap: 8px; width: 100%; }
.ask-missing textarea, .ask-form textarea { font: inherit; width: 100%; border: 2px solid var(--rahmen); border-radius: 14px; padding: 12px 14px; background: var(--weiss); color: var(--tief); resize: vertical; }
.ask-missing .btn { justify-self: start; }
.ask-form { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: clamp(14px, 3vw, 22px); box-shadow: var(--schatten); }
.ask-form textarea { font-size: 17px; min-height: 120px; }
.ask-form textarea:focus { outline: none; border-color: var(--kachel); }
.ask-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ask-count { font-size: 13px; color: var(--grau); }
.ask-privacy { margin: 10px 0 0; }
.ask-context { margin: 0 0 10px; font-size: 14px; color: var(--tief); background: var(--chlor); border-radius: 10px; padding: 8px 12px; }
.ask-link { font: inherit; background: none; border: 0; padding: 0; color: var(--kachel); text-decoration: underline; cursor: pointer; }
.ask-error { background: #fff4d6; color: #4a3800; border-radius: 12px; padding: 12px 16px; }
.ask-error p { margin: 0 0 4px; }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.ask-suggest[hidden], .ask-form[hidden] { display: none; }
.ask-label { display: block; font-weight: 700; color: var(--tief); margin: 0 0 6px; }
.ask-form .ask-suggest { margin: 4px 0 18px; }
.ask-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.ask-fields input { font: inherit; width: 100%; min-height: 48px; border: 2px solid var(--rahmen); border-radius: 12px; padding: 10px 14px; background: var(--weiss); color: var(--tief); }
.ask-fields input:focus { outline: none; border-color: var(--kachel); }
.ask-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--grau); }
.ask-consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; }
.ask-count { margin: 4px 0 0; text-align: right; }
.ask-answer h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.ask-answer .btn { justify-self: start; }
@media (max-width: 560px) { .ask-fields { grid-template-columns: minmax(0, 1fr); } }
.ask-suggest .small { width: 100%; margin: 0; }
.ask-chip { font: 600 15px var(--sans); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; color: var(--tief); text-align: left; }
.ask-chip:hover { border-color: var(--kachel); color: var(--kachel); }
@media (max-width: 560px) { .ask-row .btn { width: 100%; text-align: center; } .ask-q { max-width: 95%; } }

/* ---------- Pool selber bauen: Stufen des Selbstbaus, Vergleich, kritische Bauphase ---------- */
.diy-intro h2, .diy-steps-title { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 12px; }
.diy-intro .intro { max-width: 42em; }
.diy-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 44px; }
.diy-opt { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.diy-opt h3 { margin: 0; font-size: 21px; }
.diy-opt .small { margin: 0; }
.diy-opt .btn { justify-self: start; margin-top: 4px; }
.diy-opt-main { border: 2px solid var(--tuerkis); background: var(--tint-aqua); box-shadow: var(--schatten); }
.diy-pro, .diy-risk { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 15px; color: var(--tief); }
.diy-pro li::before { content: '✓ '; color: var(--tuerkis); font-weight: 800; }
.diy-risk li::before { content: '⚠ '; color: #b07a00; }
.diy-con { margin: 0; font-size: 15px; color: var(--grau); }
.diy-con::before { content: 'Nachteil: '; font-weight: 700; }
.diy-badge { margin: 0; font-weight: 800; color: var(--tief); background: var(--weiss); border-radius: 10px; padding: 8px 12px; }
.diy-table-wrap { overflow-x: auto; margin-bottom: 28px; }
.diy-table { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: 16px; overflow: hidden; font-size: 16px; }
.diy-table th, .diy-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--fuge); }
.diy-table thead th { background: var(--tief); color: #fff; font-size: 15px; }
.diy-table tbody th { color: var(--grau); font-weight: 600; }
.diy-table td { font-weight: 700; color: var(--tief); }
.diy-tip { max-width: 820px; }
.diy-tip p { margin: 8px 0 0; }
.diy-steps-title { margin-bottom: 28px; }
.diy-note { background: var(--chlor); border-left: 4px solid var(--kachel); border-radius: 0 12px 12px 0; padding: 12px 16px; margin-top: 14px; }
.diy-note p { margin: 6px 0 0; font-size: 16px; }
.diy-note-q { border-left-color: var(--tuerkis); background: var(--tint-aqua); }
.diy-critical { border: 2px solid #f0c75e; background: #fffaf0; border-radius: 20px; padding: clamp(16px, 3vw, 28px); margin-bottom: 40px; }
.diy-critical > p { max-width: 40em; }
.diy-critical-label { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; }
.diy-critical-title { font-size: clamp(24px, 3vw, 32px); margin: 4px 0 8px; }
.diy-critical .diy-risk { margin-bottom: 28px; }
.diy-critical .step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.diy-seal { margin-bottom: 40px; }
.diy-seal p { margin: 8px 0 0; }
.diy-flag { justify-self: start; margin: 0; background: var(--tuerkis); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 12px; }
.diy-lead { margin: 0; font-weight: 700; color: var(--tief); }
.diy-hint { font-size: 16px; color: var(--tief); background: var(--chlor); border-radius: 10px; padding: 10px 14px; }
.diy-sub { font-weight: 700; color: var(--tief); font-size: 18px; }
.diy-start { padding-left: 24px; margin: 0 0 16px; display: grid; gap: 12px; }
.diy-start li { padding-left: 4px; }
.diy-start b { display: block; color: var(--tief); }
.diy-start span { display: block; color: var(--grau); font-size: 16px; }
.diy-start a { font-weight: 700; font-size: 15px; }
.diy-start .diy-links { display: flex; }
.diy-need { background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 16px; padding: 16px 18px; margin-top: 18px; }
.diy-need h3 { margin: 0 0 8px; font-size: 19px; }
.diy-need .small { margin: 10px 0 0; }
.diy-statement { background: var(--tief); color: #fff; border-radius: 20px; padding: clamp(20px, 4vw, 34px); margin: 22px 0 0; max-width: 820px; }
.diy-statement h3 { color: #fff; font-size: clamp(22px, 3vw, 30px); margin: 0 0 10px; }
.diy-statement p { margin: 8px 0 0; color: #d9eef1; font-size: 17px; }
.diy-parts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-size: 15px; }
.diy-parts li > span, .diy-parts li > a { display: block; padding: 8px 10px; border-radius: 10px; background: var(--chlor); }
.diy-parts li > span { color: var(--grau); }
.diy-parts li > a { font-weight: 700; text-decoration: none; }
.diy-parts li:has(details) { grid-column: 1 / -1; }
.diy-more summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
.diy-products { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.diy-products li { background: var(--weiss); border: 1px solid var(--fuge); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; overflow-wrap: anywhere; }
.diy-products .small { margin: 0; }
.diy-tier { justify-self: start; font-size: 12px; font-weight: 800; color: var(--kachel); text-transform: uppercase; letter-spacing: .06em; }
.diy-buy-link { font-weight: 700; }
.diy-tiers:empty { display: none; }
@media (max-width: 400px) { .diy-parts { grid-template-columns: minmax(0, 1fr); } }
/* Weiche: ganze Karte klickbar, ein Weg aktiv */
.diy-choice .diy-opt { cursor: pointer; position: relative; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.diy-choice .diy-opt:hover { border-color: var(--kachel); transform: translateY(-2px); }
.diy-choice .diy-opt:focus-visible { outline: 3px solid var(--kachel); outline-offset: 3px; }
/* Ausgangszustand: alle drei hell; die Empfehlung ist nur das Badge, keine Hervorhebung */
.diy-choice .diy-opt, .diy-choice .diy-opt-main { background: var(--weiss); border: 2px solid var(--rahmen); box-shadow: none; }
.diy-choice .diy-opt:hover { box-shadow: var(--schatten); }
/* Auswahl: nur die eine Karte dunkel petrol, Texte hell */
.diy-choice .diy-opt.is-picked { background: var(--tief); border-color: var(--tief); box-shadow: 0 0 0 3px var(--tuerkis), var(--schatten); color: #fff; }
.diy-choice .is-picked h3 { color: #fff; }
.diy-choice .is-picked .kicker { color: #9fe3e0; }
.diy-choice .is-picked .small, .diy-choice .is-picked .diy-con, .diy-choice .is-picked .diy-lead { color: #d9eef1; }
.diy-choice .is-picked .diy-pro, .diy-choice .is-picked .diy-risk { color: #fff; }
.diy-choice .is-picked .diy-pro li::before { color: #5fe0d6; }
.diy-choice .is-picked .diy-risk li::before { color: #ffd166; }
.diy-choice .is-picked .diy-badge { background: rgba(255, 255, 255, .12); color: #fff; }
.diy-choice .diy-opt .btn { pointer-events: none; }
.diy-choice .is-picked .btn { background: #fff; color: var(--tief); border-color: #fff; }
.diy-paths-hint { margin: 0 auto; padding: 28px 0 40px; text-align: center; font-weight: 700; color: var(--grau); }
.diy-paths-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .diy-choice .diy-opt:hover { transform: none; } }
.diy-path { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--rahmen); scroll-margin-top: 8px; }
.diy-path[hidden] { display: none; }
.diy-path-wrap > .facts { margin: 0 0 28px; }
.diy-path-lead { font-size: 18px; color: var(--grau); max-width: 40em; margin: 0 0 24px; }
.diy-path .diy-flag { margin-bottom: 8px; display: inline-block; }
.diy-steplist { list-style: none; counter-reset: diy; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; max-width: 860px; }
.diy-steplist > li { counter-increment: diy; position: relative; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 18px 20px 18px 66px; }
.diy-steplist > li::before { content: counter(diy); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--kachel); color: #fff; display: grid; place-items: center; font-weight: 800; }
.diy-steplist h3 { margin: 4px 0 8px; font-size: 20px; }
.diy-steplist p, .diy-steplist ul { margin: 6px 0 0; color: var(--grau); }
.diy-steplist ul { padding-left: 20px; }
.diy-path .diy-statement { margin-bottom: 28px; }
.diy-path-sub { font-size: 21px; margin: 0 0 8px; }
.diy-path-links { font-size: 16px; }
.diy-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.diy-two .diy-need { margin-top: 0; }
@media (max-width: 720px) { .diy-two { grid-template-columns: minmax(0, 1fr); } .diy-steplist > li { padding: 58px 16px 16px; } }
.diy-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 700; }
.diy-outro { background: var(--chlor); border-top: 1px solid var(--rahmen); }
.diy-outro h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 12px; }
.diy-outro h2:not(:first-child) { margin-top: 44px; }
.diy-fazit { max-width: 42em; font-size: 18px; color: var(--tief); }
.diy-choose { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.diy-choose li { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 14px 18px; display: grid; gap: 2px; }
.diy-choose span { color: var(--kachel); font-weight: 700; }
.diy-choose-main { border: 2px solid var(--tuerkis) !important; }
.diy-outro .diy-options { margin-bottom: 0; }
.diy-opt .arrows { font-size: 15px; }
@media (max-width: 860px) { .diy-options { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .diy-table { font-size: 14px; } .diy-table th, .diy-table td { padding: 8px 6px; } }

/* ---------- Poolkosten: Kennzahlen, Beispiele, eigene Rechnung (kosten.js) ---------- */
.kz { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kz div { background: var(--tint-aqua); border-radius: 12px; padding: 10px 12px; }
.kz dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--kachel); }
.kz dd { margin: 2px 0 0; font-weight: 800; color: var(--tief); font-size: 16px; }
.kz-was { margin-top: 14px; }
.kz-was h4 { margin: 0 0 6px; font-size: 16px; }
.kz-was ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.kz-was li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--fuge); font-size: 15px; }
.kz-was li b { color: var(--tief); white-space: nowrap; }
.kz-was li small { flex-basis: 100%; color: var(--grau); font-size: 13px; }
.kz-was li span:empty { display: none; }
.kz-cta { margin: 10px 0 0; font-weight: 700; }
.km { margin-top: 44px; }
.km-title { font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; scroll-margin-top: 16px; }
.km-scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 40px; }
.km-card, .km-out { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 18px; }
.km-card:last-child { border: 2px solid var(--tuerkis); }
.km-card h4, .km-out h4 { margin: 0 0 4px; font-size: 19px; }
.km-card .small, .km-out .small { margin: 0; }
.km-parts { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; font-size: 15px; }
.km-parts li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--fuge); }
.km-parts b { white-space: nowrap; color: var(--tief); }
.km-sum { margin: 8px 0 0; font-size: 22px; font-weight: 800; color: var(--tief); }
.km-year { margin: 8px 0 0; font-weight: 700; color: var(--tief); }
.km-ass { margin: 10px 0 0; font-size: 13px; color: var(--grau); }
.km-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 18px; margin: 12px 0 16px; }
.km-calc label { display: grid; gap: 4px; font-weight: 700; color: var(--tief); font-size: 15px; }
.km-calc input[type="number"] { font: inherit; min-height: 44px; border: 2px solid var(--rahmen); border-radius: 10px; padding: 8px 12px; width: 100%; }
.km-calc fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.km-calc legend { font-weight: 700; color: var(--tief); font-size: 15px; margin-bottom: 4px; }
.km-calc .check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.km-out { border: 2px solid var(--tuerkis); }
@media (max-width: 860px) { .km-scen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pool-Doktor (doktor.js) ---------- */
.doc-wrap { max-width: 860px; }
.doc-head { background: var(--tint-aqua); border-bottom: 1px solid var(--rahmen); padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); }
.doc-head h1 { font-size: clamp(34px, 5vw, 56px); margin: 0 0 10px; }
.doc-head .lead { margin: 0; max-width: 32em; }
.doc-body { padding: clamp(24px, 4vw, 44px) 0 56px; }
.doc-form { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 24px; box-shadow: var(--schatten); padding: clamp(18px, 4vw, 36px); display: grid; gap: 20px; }
.doc-step { border: 0; padding: 0; margin: 0; }
.doc-step legend, .doc-field > span, .doc-field > label:first-child { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--tief); font-size: 18px; margin-bottom: 10px; }
.doc-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--kachel); color: #fff; font-size: 14px; flex: none; }
.doc-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.doc-chips label { position: relative; }
.doc-chips input { position: absolute; opacity: 0; inset: 0; }
.doc-chips span { display: block; height: 100%; padding: 12px 14px; border: 2px solid var(--rahmen); border-radius: 14px; font-weight: 700; color: var(--tief); cursor: pointer; font-size: 16px; }
.doc-chips input:checked + span { border-color: var(--tuerkis); background: var(--tint-aqua); box-shadow: inset 0 0 0 1px var(--tuerkis); }
.doc-chips input:focus-visible + span { outline: 3px solid var(--kachel); outline-offset: 2px; }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.doc-field { display: grid; gap: 6px; align-content: start; }
.doc-field > span, .doc-field > label:first-child { margin-bottom: 0; font-size: 16px; }
.doc-field input[type="number"], .doc-field select { font: inherit; min-height: 48px; border: 2px solid var(--rahmen); border-radius: 12px; padding: 10px 14px; background: var(--weiss); color: var(--tief); width: 100%; }
.doc-field input:disabled { background: var(--chlor); }
.doc-field small { color: var(--grau); font-size: 13px; }
.doc-unknown { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--grau); }
.doc-unknown input { width: 18px; height: 18px; }
.doc-more summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
.doc-more .doc-grid { margin-top: 14px; }
.doc-error { margin: 0; background: #fff4d6; color: #4a3800; border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.doc-go { justify-self: start; }
.doc-form > .small { margin: -8px 0 0; }
.doc-result { margin-top: 28px; background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 24px; box-shadow: var(--schatten); padding: clamp(18px, 4vw, 36px); scroll-margin-top: 12px; }
.doc-level { margin: 6px 0 8px; font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--tief); }
.doc-summary { margin: 0 0 6px; font-size: 18px; color: var(--tief); }
.doc-all { margin-top: 8px; }
.doc-all summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
.doc-h { font-size: clamp(22px, 3vw, 28px); margin: 28px 0 12px; }
.doc-steps { list-style: none; counter-reset: doc; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.doc-steps li { counter-increment: doc; position: relative; background: var(--chlor); border-radius: 14px; padding: 14px 16px 14px 62px; display: grid; gap: 3px; }
.doc-steps li::before { content: 'Schritt ' counter(doc); position: absolute; left: 12px; top: 14px; width: 42px; font-size: 11px; font-weight: 800; line-height: 1.2; text-transform: uppercase; color: var(--kachel); }
.doc-steps b { color: var(--tief); font-size: 17px; }
.doc-steps span { color: var(--grau); font-size: 15px; }
.doc-steps a { font-weight: 700; font-size: 15px; }
.doc-result .btn { margin-top: 18px; }
.doc-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-weight: 700; }
@media (max-width: 720px) { .doc-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doc-grid { grid-template-columns: minmax(0, 1fr); } .doc-go { justify-self: stretch; text-align: center; } }
@media (max-width: 380px) { .doc-chips { grid-template-columns: minmax(0, 1fr); } }

/* Technik-Skizze als Navigation: Links je Bauteil */
.part-links { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
/* ---------- Schritt-für-Schritt-Formulare (wizard.js) und Mein Pool ---------- */
.wiz-prog { display: grid; gap: 6px; }
.wiz-count { margin: 0; color: var(--grau); font-size: 15px; }
.wiz-count b { color: var(--tief); }
.wiz-prog progress { width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--chlor); overflow: hidden; appearance: none; }
.wiz-prog progress::-webkit-progress-bar { background: var(--chlor); }
.wiz-prog progress::-webkit-progress-value { background: var(--tuerkis); border-radius: 999px; }
.wiz-prog progress::-moz-progress-bar { background: var(--tuerkis); border-radius: 999px; }
.wiz-step { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.wiz-step[hidden], .doc-form[hidden], .doc-result[hidden] { display: none; }
.wiz-q { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--tief); padding: 0; margin-bottom: 6px; line-height: 1.2; }
.wiz-sub { margin: 8px 0 0; font-weight: 700; color: var(--tief); }
.wiz-cards span b { display: block; }
.wiz-cards span small { display: block; font-weight: 500; color: var(--grau); font-size: 13px; margin-top: 2px; }
.doc-chips.wiz-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doc-chips input[type="checkbox"] { position: absolute; opacity: 0; inset: 0; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--fuge); }
.wiz-nav .btn { margin-left: auto; }
.mp-dims { margin-top: 6px; }
.mp-dims [hidden] { display: none; }
.mp-vol { margin: 0; min-height: 1.6em; color: var(--tief); font-size: 18px; display: grid; gap: 4px; }
.mp-warn { font-size: 15px; color: #8a5a00; background: #fff4d6; border-radius: 8px; padding: 6px 10px; }
.mp-slider input[type="range"] { width: 100%; accent-color: var(--tuerkis); min-height: 32px; }
.mp-plz { max-width: 320px; }
.mp-plz input { font: inherit; min-height: 48px; border: 2px solid var(--rahmen); border-radius: 12px; padding: 10px 14px; }
.mp-card { background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 24px; box-shadow: var(--schatten); padding: clamp(18px, 4vw, 36px); display: grid; gap: 10px; scroll-margin-top: 12px; margin-bottom: 20px; }
.mp-card[hidden] { display: none; }
.mp-card .kicker { margin: 0; }
.mp-big { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--tief); }
.mp-vol-big { margin: 0; font-size: 20px; font-weight: 800; color: var(--kachel); }
.mp-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mp-lines li { background: var(--chlor); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; color: var(--tief); }
.mp-card h3 { margin: 14px 0 0; font-size: 20px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.mp-tools { margin-top: 4px; }
.mp-title { margin: 0; font-size: clamp(26px, 4vw, 38px); }
.mp-card .mp-big { font-size: clamp(20px, 3vw, 26px); color: var(--kachel); }
.mp-h { font-size: 20px; margin: 18px 0 2px; }
.mp-goals { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.mp-goals a { min-height: 88px; }
.mp-emp { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mp-emp li { background: var(--tint-aqua); border-radius: 14px; padding: 12px 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; color: var(--tief); }
.mp-emp a { font-weight: 700; white-space: nowrap; }
.pool-known { margin: 0 0 16px; background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 14px; padding: 12px 16px; font-size: 15px; color: var(--tief); }
.pool-known[hidden], .pp-choice[hidden] { display: none; }
/* Über jedem Ergebnis: mit welchen gespeicherten Pooldaten gerechnet wurde */
.calc-for { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: var(--chlor); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--grau); justify-self: start; }
.calc-for b { color: var(--tief); }
.calc-for a { font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .calc-for { border-radius: 14px; } }
/* Herleitung und nächste Schritte unter Ergebnissen */
.calc-how { margin-top: 14px; font-size: 14px; color: var(--grau); }
.calc-how summary { cursor: pointer; font-weight: 700; color: var(--kachel); }
.calc-how ul { margin: 8px 0 0; padding-left: 20px; }
.next-steps { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--fuge); }
.next-steps h3 { margin: 0 0 8px; font-size: 18px; }
.next-steps ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-weight: 700; }
.doc-h3 { font-size: 18px; margin: 20px 0 4px; }
.prod-label { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
/* Wahl in jedem Rechner: mit Profil weitermachen (primär) oder neu konfigurieren (sekundär) */
.pp-choice { background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 24px; box-shadow: var(--schatten); padding: clamp(18px, 4vw, 32px); display: grid; gap: 12px; margin-bottom: 20px; }
.pp-choice h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.pp-choice > p { margin: 0; color: var(--grau); }
.pp-option { display: grid; gap: 6px; justify-items: start; }
.pp-option .small { margin: 0; }
.pp-secondary { padding-top: 12px; border-top: 1px solid var(--fuge); }
@media (max-width: 600px) { .pp-option .btn { width: 100%; text-align: center; } }
@media (max-width: 720px) { .doc-chips.wiz-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wiz-nav .btn { flex: 1; text-align: center; } }

/* Wärmepumpen-Berater (wp-berater.js), baut auf den Pool-Doktor-Stilen auf */
.doc-chips.doc-chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpb-facts { margin: 14px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wpb-fact { background: var(--chlor); border-radius: 14px; padding: 14px 16px; }
.wpb-fact dt { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--kachel); }
.wpb-fact dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; color: var(--tief); }
.wpb-fact .small { margin: 6px 0 0; }
.wpb-offers { margin-top: 8px; scroll-margin-top: 12px; }
.kr-big { background: var(--tief); color: #fff; border-radius: 18px; padding: 18px 20px; display: grid; gap: 4px; }
.kr-big p { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.kr-big p:last-child { color: #9fe3e0; font-size: clamp(17px, 2.4vw, 20px); }
.kr-src { color: var(--grau); font-size: 12px; }
.kr-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Pool-Tools (rechner/): Hierarchie wichtigste Rechner → Pool-Doktor → Demnächst → kleine Tools. Ganze Karte klickbar. */
.tb-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-card { display: flex; flex-direction: column; gap: 10px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 18px; color: var(--tief); text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s; }
a.tb-card:hover, a.tb-card:focus-visible, .tb-doc:hover, .tb-mini:hover { border-color: var(--tuerkis); transform: translateY(-2px); }
.tb-feature { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; border: 2px solid var(--tuerkis); background: var(--tint-aqua); padding: 22px; }
.tb-icon { font-size: 30px; line-height: 1; }
.tb-feature .tb-icon { font-size: 40px; }
.tb-text { display: grid; gap: 4px; flex: 1; }
.tb-text b { font-size: 19px; }
.tb-feature .tb-text b { font-size: 23px; }
.tb-text > span { font-size: 15px; color: var(--grau); }
.tb-known { display: inline-block; justify-self: start; margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--tuerkis); background: var(--tint-aqua); border-radius: 999px; padding: 2px 10px; }
.tb-cta { font-weight: 800; color: var(--kachel); }
.tb-feature .tb-cta { background: var(--nudel); color: #fff; border-radius: 12px; padding: 12px 18px; white-space: nowrap; }
.tb-doc { display: flex; align-items: center; gap: 18px; margin: 22px 0 0; padding: 22px; border-radius: 20px; background: var(--tief); color: #fff; text-decoration: none; transition: transform .15s; }
.tb-doc .tb-text > span { color: #cfe7ec; }
.tb-doc .tb-cta { background: #fff; color: var(--tief); border-radius: 12px; padding: 12px 18px; white-space: nowrap; }
.tb-sub { color: var(--grau); margin: -4px 0 12px; }
.tb-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Coming soon klar anders als fertige Tools: gestrichelt, grauer Grund, keine Hover-Bewegung, Vote-Knopf statt „Tool öffnen“ */
.tb-vote { gap: 6px; border: 2px dashed var(--rahmen); background: var(--chlor); }
.tb-vote b { font-size: 18px; }
.tb-mini em { font-style: normal; font-weight: 800; color: var(--kachel); font-size: 14px; margin-top: 6px; }
.tb-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.tb-vote > span:not(.tb-badge) { font-size: 15px; color: var(--grau); }
.tb-badge { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4a3800; background: #fff4d6; border-radius: 6px; padding: 2px 8px; }
.tb-vote-btn { margin-top: 6px; min-height: 46px; border: 2px solid var(--kachel); border-radius: 12px; background: var(--weiss); color: var(--tief); font: 700 16px var(--sans); cursor: pointer; }
.tb-vote-btn:hover:not(:disabled) { background: var(--tint-aqua); }
.tb-vote-btn:disabled { border-color: var(--tuerkis); background: var(--tint-aqua); cursor: default; }
.tb-vote-msg { color: var(--tuerkis); font-weight: 700; min-height: 1em; }
.tb-until { font-size: 14px; font-weight: 700; }
.tb-small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* Rechner & Tools: vier wichtigste Rechner, kleine Helfer als kompakte Liste, „In Vorbereitung“ klein */
.tb-main.tb-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .tb-main.tb-four { grid-template-columns: minmax(0, 1fr); } }
.tb-helpers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 640px) { .tb-helpers { grid-template-columns: minmax(0, 1fr); } }
.tb-helpers a { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--fuge); color: var(--tief); text-decoration: none; }
.tb-helpers a > span { grid-row: span 2; font-size: 18px; text-align: center; }
.tb-helpers b { font-size: 16px; }
.tb-helpers small { color: var(--grau); font-size: 13px; }
.tb-helpers a:hover b { color: var(--kachel); }
.tb-soon-title { font-size: 16px; margin-top: 28px; color: var(--grau); }
.tb-soon-list[hidden] { display: none; }
.tb-soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tb-soon-list .tb-vote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border: 0; background: none; padding: 0; font-size: 15px; color: var(--grau); }
.tb-soon-list .tb-vote b { font-size: 15px; color: var(--tief); }
.tb-soon-list .tb-vote-btn { margin: 0; min-height: 36px; padding: 4px 12px; font-size: 14px; border-width: 1px; border-radius: 999px; }
.tb-soon-list .tb-vote-msg { font-size: 13px; min-height: 0; }
.tb-mini { display: grid; gap: 2px; align-content: start; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 14px; color: var(--tief); text-decoration: none; min-height: 56px; transition: border-color .15s, transform .15s; }
.tb-mini > span { font-size: 24px; line-height: 1.1; }
.tb-mini small { color: var(--grau); font-size: 13px; }
@media (max-width: 900px) { .tb-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-small { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-soon { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  /* Mobil: wichtige Rechner untereinander, Knopf über die volle Breite; kleine Tools zweispaltig */
  .tb-main { grid-template-columns: minmax(0, 1fr); }
  .tb-card .tb-cta { width: 100%; background: var(--weiss); border: 2px solid var(--kachel); border-radius: 12px; }
  .tb-feature .tb-cta, .tb-doc .tb-cta { border: 0; min-height: 52px; }
  .tb-vote-btn { min-height: 52px; }
  .tb-mini { padding: 12px; }
  .tb-feature, .tb-doc { flex-direction: column; align-items: stretch; gap: 10px; padding: 18px; }
  .tb-feature .tb-cta, .tb-doc .tb-cta { text-align: center; white-space: normal; }
  .tb-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { a.tb-card:hover, .tb-doc:hover, .tb-mini:hover { transform: none; } }
/* Kleine Tools (kleine-tools.html) */
.kt-head .lead { margin-bottom: 0; }
.kt-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 900px; }
@media (min-width: 760px) { .kt-list { grid-template-columns: 1fr 1fr; align-items: start; } .kt-item.is-open { grid-column: 1 / -1; } }
.kt-item { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; scroll-margin-top: 12px; min-width: 0; }
.kt-h { margin: 0; font-size: inherit; }
.kt-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; background: none; border: 0; border-radius: 14px; font: inherit; color: var(--tief); text-align: left; cursor: pointer; }
.kt-row:hover { background: var(--tint-aqua); }
.kt-row:focus-visible { outline: 3px solid var(--kachel); outline-offset: 2px; }
.kt-ic { flex: 0 0 auto; font-size: 22px; line-height: 1; width: 28px; text-align: center; }
.kt-tx { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.kt-tx b { font-size: 17px; line-height: 1.25; }
.kt-tx small { font-size: 14px; line-height: 1.3; color: var(--grau); font-weight: 400; }
.kt-chev { flex: 0 0 auto; font-size: 24px; line-height: 1; color: var(--kachel); transition: transform .15s; }
.kt-item.is-open .kt-chev { transform: rotate(90deg); }
.kt-item.is-open { border-color: var(--kachel); }
.kt-panel { padding: 0 14px 14px; }
.kt-panel[hidden], .km-calc label[hidden] { display: none; }
.kt-panel .km-calc { margin: 4px 0 0; padding: 14px; border-radius: 12px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.km-calc label small { font-weight: 400; font-size: 13px; color: var(--grau); }
.kt-known { margin: 4px 0 0; font-size: 15px; color: var(--tief); }
.kt-next { margin: 10px 0 0; font-weight: 700; }
.kt-disc { margin: 18px 0 0; max-width: 900px; }
.kt-more summary { cursor: pointer; font-weight: 700; color: var(--kachel); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .kt-chev { transition: none; } }
.kt-out { margin-top: 12px; background: var(--tint-aqua); border-radius: 14px; padding: 14px 16px; }
.kt-out .kt-label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.kt-out .kt-big { font-size: clamp(22px, 5vw, 28px); font-weight: 800; color: var(--tief); margin: 2px 0 4px; overflow-wrap: anywhere; }
.kt-out p { margin: 4px 0 0; }
.kt-out ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.kt-warn { background: #fff4d6; color: #4a3800; border-radius: 10px; padding: 8px 12px; font-size: 15px; margin: 10px 0 0; }
/* Mein Pool als Dashboard (mein-pool.html) */
.md-wrap { max-width: 820px; }
.md-head h1 { margin-bottom: 0; }
/* Referenz-Design: Blöcke statt Karten, Trennlinien statt Rahmen, große Zahlen, Türkis nur für Aktionen (--action) */
.md-top { padding: 4px 0 var(--sp-row); display: grid; gap: 2px; justify-items: start; }
.md-label { margin: 0 0 2px; font-size: var(--fs-meta); font-weight: 700; color: var(--grau); letter-spacing: .02em; }
.md-num { margin: 0; font-size: var(--fs-num); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; color: var(--tief); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.md-num-2 { font-size: calc(var(--fs-num) * .72); }
.md-meta-strong { color: var(--tief); font-weight: 600; font-size: var(--fs-body); }
/* Pool-Doktor: Zwischenschritt „Was weißt du bereits?“ */
.doc-step-h { display: flex; align-items: center; gap: 8px; margin: 4px 0 -6px; font-weight: 800; font-size: 18px; color: var(--tief); }
/* „Wie geht es weiter?“: eine Hauptaktion, darunter höchstens zwei leise Links */
.next-main { margin: 0 0 14px; }
.pf-saved { margin: 0 0 10px; color: var(--grau); }
.md-meta { margin: 2px 0 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--grau); }
.md-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 12px 0 0; }
.md-acts-list { margin-top: 4px; }
/* Link zum Pool (Online-Kopie) */
.md-online { padding: var(--sp-row) 0; border-top: 1px solid var(--fuge); }
.md-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.md-link-row input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 15px; border: 1.5px solid var(--fuge); border-radius: var(--r-m); background: var(--weiss); color: var(--tief); }
.md-link { font: inherit; font-size: var(--fs-body); font-weight: 700; color: var(--action); background: none; border: 0; padding: 6px 0; min-height: 40px; text-decoration: none; cursor: pointer; }
.md-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.md-link:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--r-s); }
.md-sec { margin-top: var(--sp-sec); }
.md-h { font-size: var(--fs-h2); margin: 0 0 var(--sp-row); color: var(--tief); }
.md-sec .md-meta:last-child { margin-top: var(--sp-row); }
/* Deine Planung: Datenliste mit dünnen Trennlinien, ganze Zeile klickbar */
.md-sel { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fuge); }
.md-sel li { border-bottom: 1px solid var(--fuge); }
.md-sel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px; width: 100%; min-height: 44px; padding: 10px 0;
  background: none; border: 0; font: inherit; color: var(--tief); text-align: left; cursor: pointer; }
.md-sel-row:hover .md-sel-v { text-decoration: underline; text-underline-offset: 3px; }
.md-sel-row:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: var(--r-s); }
.md-sel-k { font-size: 15px; color: var(--grau); }
.md-sel-v { font-size: 15px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.md-sel-row.is-open .md-sel-v { color: var(--action); }
@media (max-width: 360px) { .md-sel-row { grid-template-columns: minmax(0, 1fr); } .md-sel-v { text-align: left; } }
/* Deine Technik / Deine Kosten: Kennzahlen nebeneinander, ohne Rahmen; die Zahl zuerst */
.md-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-in) 28px; }
.md-kpi { display: grid; gap: 0; align-content: start; justify-items: start; padding-top: var(--sp-row); border-top: 2px solid var(--fuge); }
.md-kpi-k { margin: 2px 0 0; font-size: var(--fs-body); font-weight: 700; color: var(--tief); }
.md-kpi .md-link { padding-bottom: 0; }
.md-kpi.is-open .md-num { font-size: calc(var(--fs-num) * .72); color: var(--grau); }
.md-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 0; }
.md-foot { margin: 22px 0 0; }
.md-edit { display: grid; gap: 10px; }
.md-edit[hidden], .md-edit [hidden] { display: none; }
.md-edit .md-h { margin-top: 0; }
.md-group { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; }
.md-group summary { min-height: 52px; display: flex; align-items: center; padding: 0 16px; font-weight: 800; color: var(--tief); cursor: pointer; }
.md-fields { display: grid; gap: 14px; padding: 4px 16px 16px; }
.md-tech { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.md-tech legend { font-size: 16px; margin-bottom: 4px; }
.md-tech .check { display: flex; gap: 10px; align-items: center; min-height: 36px; }
.md-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-auto { margin: 12px 0; }
/* Poolrechner als Schritte: Formular und Ergebnis untereinander statt zweispaltig */
.calc.rc-wiz { display: block; max-width: 820px; }
.rc-wiz .pool-known, .rc-wiz .pp-choice { margin-bottom: 14px; }
.rc-result { display: grid; gap: 14px; }
.rc-result .results { position: static; }
.rc-head .kicker { margin: 0 0 6px; }
.rc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.rc-actions .pp-take { flex-basis: 100%; }
.pp-take p { margin: 6px 0 0; }
.pp-pool { font-size: 18px; font-weight: 800; color: var(--tief); margin: 0 0 10px; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
@media (max-width: 480px) { .pp-actions .btn, .rc-actions .btn { width: 100%; text-align: center; } }
.mp-einbau-status { margin: 10px 0 0; border-radius: 10px; padding: 8px 12px; font-size: 15px; }
.mp-einbau-status.is-empfohlen { background: var(--tint-aqua); color: var(--tief); box-shadow: inset 3px 0 0 var(--tuerkis); }
.mp-einbau-status.is-moeglich { background: #fff4d6; color: #4a3800; }
/* Schritt-Hinweis bei zurückgesetzter oder automatisch gewählter Antwort (wizard.js) */
.wiz-hint { margin: 10px 0 0; background: #fff4d6; color: #4a3800; border-radius: 10px; padding: 8px 12px; font-size: 15px; }
/* Kostenrechner, Schritt „Extras“: je Posten eine Reihe kompakter Auswahlkarten, „Eigener Betrag“ blendet das Feld ein */
.kr-extras { display: grid; gap: 14px; }
.kr-x-head { font-size: 18px; margin: 8px 0 0; }
.kr-x { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.kr-x legend { font-weight: 800; color: var(--tief); font-size: 16px; margin-bottom: 6px; padding: 0; }
.kr-x-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kr-x-chips span { padding: 10px 12px; font-size: 15px; }
.kr-x-chips small { display: block; font-weight: 500; font-size: 13px; color: var(--grau); margin-top: 2px; }
.kr-own { max-width: 260px; }
.kr-own input { font: inherit; min-height: 44px; border: 2px solid var(--rahmen); border-radius: 10px; padding: 8px 12px; width: 100%; }
@media (max-width: 720px) { .kr-x-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Ergebnis: Pool selbst, Technik, Extras, Außenbereich, Gesamtkosten */
.kr-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kr-sum div.kr-sum-total { grid-column: 1 / -1; background: var(--tint-aqua); box-shadow: inset 0 0 0 2px var(--tuerkis); }
.kr-sum .kr-sum-total dd { font-size: clamp(20px, 3vw, 26px); }
@media (max-width: 720px) { .kr-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rf-must { font-size: 17px; }
.wpb-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wpb-advice { background: var(--chlor); border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.wpb-two .wpb-advice { margin-top: 0; }
.wpb-advice h3 { margin: 0 0 8px; font-size: 17px; }
.doc-result > .btn, .doc-result > .wpb-offers + .btn { margin-right: 10px; }
@media (max-width: 720px) { .wpb-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .wpb-facts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Eure Pools: kuratierte Leser-Pools ---------- */
.ep-title { margin-top: 44px; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; margin-top: 16px; }
.ep-card { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; overflow: hidden; }
.ep-card img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.ep-body { padding: 16px 18px; }
.ep-body h3 { margin: 0 0 8px; }
.ep-body p { font-size: 15px; margin: 8px 0 0; }
.ep-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ep-facts dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--kachel); }
.ep-facts dd { margin: 0; font-weight: 700; color: var(--tief); font-size: 15px; }
.ep-empty { grid-column: 1 / -1; margin: 0; background: var(--weiss); border: 1px dashed var(--rahmen); border-radius: 14px; padding: 18px; text-align: center; color: var(--grau); font-weight: 700; }
.ep-form { display: grid; gap: 12px; justify-items: start; max-width: 720px; }
/* Impressum und Datenschutz */
.legal { padding: clamp(32px, 5vw, 64px) 0; }
.legal-wrap { max-width: 760px; }
.legal h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 16px; }
.legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal section { scroll-margin-top: 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal-lead { font-size: 19px !important; color: var(--tief); max-width: 40em; }
.legal-toc { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 18px; margin: 18px 0 8px; }
.legal-toc ol { margin: 6px 0 0; padding-left: 22px; columns: 2; column-gap: 24px; }
.legal-toc li { font-size: 15px; break-inside: avoid; }
.legal-list { padding-left: 20px; display: grid; gap: 6px; }
.legal code { font-size: 14px; background: var(--chlor); border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
.legal-table-wrap { overflow-x: auto; margin: 10px 0; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--weiss); min-width: 520px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--fuge); }
.legal-table th { background: var(--tief); color: #fff; }
.legal-todo-inline { background: #fff4d6; color: #4a3800; border-radius: 4px; padding: 1px 6px; }
@media (max-width: 600px) { .legal-toc ol { columns: 1; } .legal p, .legal li { font-size: 16px; } }
.legal-todo { background: #fff4d6; color: #4a3800; border-left: 4px solid #e0a800; border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 8px; }
.page-head .diy-legal, .doc-head .diy-legal { font-size: 15px; color: var(--tief); max-width: 860px; }
.diy-legal { background: var(--chlor); border: 1px solid var(--rahmen); border-radius: 14px; padding: 12px 16px; font-size: 15px; color: var(--tief); max-width: 860px; }
.ep-send { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.ep-send > div { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 18px; }
.ep-send h3 { margin: 0 0 8px; }
@media (max-width: 720px) { .ep-send { grid-template-columns: minmax(0, 1fr); } }

/* Wasser-Check: Weiterlesen nach dem Ergebnis */
.water-next { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.water-next li { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 12px; padding: 10px 14px; display: grid; gap: 2px; }
.water-next span { color: var(--grau); font-size: 15px; }
.water-next a { font-weight: 700; }

/* Pool-Finder-Ergebnis: Das brauchst du wirklich */
.pf-need { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.pf-need li { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.pf-need b::before { content: '✓ '; color: var(--tuerkis); }
.pf-need li.optional b::before { content: '+ '; color: var(--grau); }
.pf-need span { color: var(--grau); font-size: 15px; }
.pf-need a { font-weight: 700; }

/* Pool-Finder-Ergebnis: Match, Ausstattung, Begründung, Alternativen, nächste Schritte */
.pf-match { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 700; color: var(--tief); }
.pf-match b { background: var(--tuerkis); color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 18px; }
.pf-match small { flex-basis: 100%; font-weight: 500; font-size: 13px; color: var(--grau); }
.pf-facts.pf-facts-4, .pf-facts.pf-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-facts.pf-facts-4 div:last-child, .pf-facts.pf-facts-2 div:last-child { grid-column: auto; }
.pf-kit, .pf-whylist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pf-kit li, .pf-whylist li { padding-left: 26px; position: relative; }
.pf-kit li::before, .pf-whylist li::before { content: '✓'; position: absolute; left: 4px; color: var(--tuerkis); font-weight: 800; }
.pf-kit li.opt::before { content: '+'; color: var(--grau); }
.pf-kit span { color: var(--grau); font-size: 15px; }
.pf-whylist li.minus::before { content: '–'; color: var(--grau); }
.pf-whylist li.minus { color: var(--grau); }
.pf-alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pf-alts .pf-card-head { grid-template-columns: minmax(0, 1fr) minmax(80px, 120px); }
/* Poolgrößen-Berater (groesse.js) */
.gb-form button { grid-column: 1 / -1; justify-self: start; }
.gb-out { background: var(--weiss); border: 2px solid var(--tuerkis); border-radius: 18px; padding: clamp(16px, 3vw, 24px); }
.gb-out .kicker { margin: 0 0 6px; }
.gb-h { font-size: 19px; margin: 18px 0 4px; }
@media (max-width: 720px) { .gb-form button { justify-self: stretch; } }
.pf-verdict { margin: 14px 0 0; font-size: clamp(18px, 2.2vw, 21px); font-weight: 700; color: var(--tief); max-width: 38em; }
.pf-nope { border-style: dashed; }
.pf-scen { margin: 8px 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-scen div { background: var(--chlor); border-radius: 12px; padding: 10px 12px; }
.pf-scen div.is-typ { background: var(--tint-aqua); box-shadow: inset 0 0 0 2px var(--tuerkis); }
.pf-scen dt { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.pf-scen dd { margin: 2px 0 0; font-weight: 800; color: var(--tief); }
@media (max-width: 480px) { .pf-scen { grid-template-columns: minmax(0, 1fr); } }
/* Pool-Finder: Vergleich der drei Empfehlungen. Desktop: Kriterium + 3 Spalten; mobil: Kriterium, darunter die drei Pools untereinander */
.cmp-cta { margin: 18px 0 0; text-align: center; }
.cmp { margin-top: 28px; }
.cmp-grid { display: grid; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 20px; overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(0, 1.3fr)); border-top: 1px solid var(--fuge); }
.cmp-n2 .cmp-row { grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(0, 1.4fr)); }
.cmp-grid > .cmp-row:first-child { border-top: 0; }
.cmp-label, .cmp-cell { padding: 12px 14px; }
.cmp-label b { display: block; color: var(--tief); }
.cmp-label small, .cmp-cell small { display: block; color: var(--grau); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.cmp-cell { font-size: 15px; color: var(--tief); }
.cmp-cell.is-first { background: var(--tint-aqua); }
.cmp-name { display: none; }
.cmp-head h3 { font-size: 20px; margin: 2px 0; }
.cmp-place { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--kachel); }
.cmp-head .is-first .cmp-place { color: var(--tuerkis); }
.cmp-head .pf-match { margin-top: 6px; }
.cmp-row.is-mark .cmp-label { box-shadow: inset 4px 0 0 var(--sonne); }
.cmp-chip { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 800; background: #fff4d6; color: #4a3800; border-radius: 999px; padding: 1px 8px; }
.cmp-stars { color: var(--sonne); letter-spacing: 1px; font-size: 16px; }
.cmp-stars span { color: var(--fuge); }
.cmp-pro { color: var(--tief); }
.cmp-con { color: var(--grau); }
.cmp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.cmp-all { margin: 12px 0; }
.cmp-all > summary { font-size: 17px; padding: 10px 0; }
.cmp-ctas .cmp-cell { display: grid; gap: 8px; align-content: start; }
.cmp-ctas .btn { width: 100%; text-align: center; }
.cmp-more { font-weight: 700; font-size: 15px; }
.cmp-why { margin-top: 20px; background: var(--weiss); border: 1px solid var(--rahmen); border-left: 5px solid var(--tuerkis); border-radius: 0 16px 16px 0; padding: 16px 20px; }
.cmp-why h3 { margin: 0 0 8px; font-size: 20px; }
.cmp-why h4 { margin: 16px 0 4px; font-size: 16px; }
.cmp-why p { margin: 0; }
/* Empfehlungskarten unter dem Vergleich: Platz 1 hervorgehoben, Platz 2 und 3 sekundär, Knopf und Link immer untereinander */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 16px 0 0; }
.cmp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 18px; padding: 16px; }
.cmp-card.is-first { border: 2px solid var(--tuerkis); background: var(--tint-aqua); box-shadow: var(--schatten); }
.cmp-card .cmp-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.cmp-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--tuerkis); border-radius: 6px; padding: 2px 8px; }
.cmp-card-name { margin: 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.cmp-card-why { margin: 0 0 4px; font-size: 15px; color: var(--grau); flex: 1; }
.cmp-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px; font: 700 16px/1.25 var(--sans); text-align: center; white-space: normal; overflow-wrap: anywhere; cursor: pointer; transition: filter .15s, background-color .15s; }
.cmp-btn-main { background: var(--nudel); color: #fff; border: 2px solid var(--nudel); box-shadow: 0 6px 16px rgba(242, 95, 58, .25); }
.cmp-btn-main:hover { filter: brightness(.95); }
.cmp-btn-alt { background: var(--weiss); color: var(--tief); border: 2px solid var(--kachel); }
.cmp-btn-alt:hover { background: var(--tint-aqua); }
.cmp-card .cmp-more { display: block; padding: 6px 0 2px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.cmp-sticky { display: none; }
.cmp-same { grid-column: 2 / -1; }
.cmp-same-tag { display: inline-block; font-size: 12px; font-weight: 800; color: var(--grau); background: var(--chlor); border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.cmp-budget { font-weight: 700; }
.cmp-budget.is-A { color: var(--tuerkis); }
.cmp-budget.is-C { color: var(--nudel); }
.cmp-cta-name { display: block; font-size: 17px; color: var(--tief); margin: 0 0 4px; }
.cmp-know { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--fuge); font-size: 15px; color: var(--grau); }
.cmp-know b { color: var(--tief); }
@media (max-width: 760px) {
  /* Mobil: oben feste Kurzköpfe, je Kriterium eine schmale Zeile pro Pool mit kurzem Namen links */
  /* Sticky-Leiste flach (ca. 30 px), ohne Nummern; Zeilen darunter halten Abstand, damit nichts dauerhaft verdeckt ist */
  .cmp-sticky { display: flex; gap: 4px; position: sticky; top: 0; z-index: 5; background: var(--chlor); padding: 4px 0; margin-bottom: 4px; box-shadow: 0 1px 0 var(--fuge); }
  .cmp-sticky span { flex: 1; min-width: 0; text-align: center; font-size: 13px; line-height: 1.3; font-weight: 800; color: var(--tief); background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 999px; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmp .cmp-row, .cmp-all > summary { scroll-margin-top: 40px; }
  .cmp-cell small.cmp-detail { display: none; }
  .cmp-sticky span.is-first { border-color: var(--tuerkis); background: var(--tint-aqua); }
  .cmp-row, .cmp-n2 .cmp-row { grid-template-columns: minmax(0, 1fr); }
  .cmp-label { background: var(--chlor); padding: 8px 12px 6px; }
  .cmp-label small { display: none; }
  .cmp-row:first-child .cmp-label small, .cmp-ctas .cmp-label small { display: block; }
  .cmp-cell { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 0 10px; padding: 6px 12px; border-top: 1px dashed var(--fuge); align-items: baseline; }
  .cmp-name { display: block; font-weight: 800; font-size: 14px; color: var(--grau); overflow-wrap: anywhere; }
  .cmp-cell small { font-size: 14px; }
  .cmp-cell.is-first .cmp-name { color: var(--tuerkis); }
  .cmp-same { display: block; }
  .cmp-head .cmp-label, .cmp-ctas .cmp-label { display: none; }
  .cmp-head .cmp-cell { display: block; padding: 10px 12px; }
  .cmp-head h3 { font-size: 18px; }
  /* Kopfzeile ohne das zweispaltige Raster der Kriterienzeilen (sonst landen Inhalte in der schmalen Namensspalte) */
  .cmp-head .cmp-cell { grid-template-columns: minmax(0, 1fr); }
  .cmp-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cmp-card { padding: 14px; }
  .cmp-cta .btn { width: 100%; }
}
/* „Was passiert, wenn ich das ändere?“ und Budget-Optimierer im Pool-Finder */
.sim { margin-top: 24px; }
.sim-budget { background: #fff4d6; color: #4a3800; border-radius: 16px; padding: 14px 18px; margin: 0 0 12px; }
.sim-budget h3 { margin: 0 0 6px; font-size: 18px; color: #4a3800; }
.sim-budget p { margin: 0 0 6px; }
.sim-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sim-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 12px 14px; }
.sim-list li > div { display: grid; gap: 2px; min-width: 0; }
.sim-list span { color: var(--tief); font-size: 15px; }
.sim-list small { color: var(--grau); font-size: 13px; }
.sim-go { flex: none; min-height: 44px; padding: 8px 14px; border: 2px solid var(--kachel); border-radius: 12px; background: var(--weiss); color: var(--tief); font: 700 15px var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.sim-go:hover { background: var(--tint-aqua); }
@media (max-width: 600px) { .sim-list li { flex-direction: column; align-items: stretch; } .sim-go { justify-content: center; } }
.pf-worse { margin: 8px 0 0; font-size: 15px; color: var(--grau); }
.pf-worse b { color: var(--tief); }
.pf-tools { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.pf-tools a { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 12px; font-weight: 700; text-decoration: none; }
.pf-save { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pf-nope .pf-match b { background: var(--grau); }
.pf-funnel { list-style: none; counter-reset: fn; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.pf-funnel li { counter-increment: fn; }
.pf-funnel a { display: grid; gap: 2px; height: 100%; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 16px; text-decoration: none; }
.pf-funnel a::before { content: counter(fn); width: 26px; height: 26px; border-radius: 50%; background: var(--kachel); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-bottom: 4px; }
.pf-funnel span { color: var(--grau); font-size: 15px; }
.pf-guides { margin: 12px 0 0; font-size: 15px; }
.pf-guides a { font-weight: 700; }
.pf-edit-top { font-size: 15px; }
/* Planer-Ergebnis als Beratung: Gesamtkosten als große Zahl, Vor-/Nachteile nebeneinander, ein Abschluss mit Hauptknopf */
.pf-total { margin: 14px 0 4px; display: grid; gap: 2px; }
.pf-total b { font-size: var(--fs-num); font-weight: 800; line-height: 1.12; color: var(--tief); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-total span { font-size: var(--fs-meta); color: var(--grau); }
.pf-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
@media (max-width: 560px) { .pf-pc { grid-template-columns: minmax(0, 1fr); } }
.pf-main details.pf-costs h5 { margin: 14px 0 6px; }
.cmp-card .cmp-card-why b { color: var(--tief); }
.pf-next-step { margin-top: var(--sp-sec); }
.pf-next-step > h3 { margin: 22px 0 10px; font-size: 18px; }
/* Beste Annäherung statt Empfehlung: ein ruhiger Satz; passt nichts ganz, ein Hinweis mit zwei Wegen */
.pf-approx { margin: 4px 0 10px; font-weight: 700; color: var(--tief); }
.pf-main.is-naeherung .kicker { color: var(--grau); }
.pf-mismatch { margin: 0 0 14px; padding: 12px 14px; background: var(--tint-warm); border: 1px solid var(--tint-warm-rand); border-left: 4px solid var(--nudel); border-radius: 0 var(--r-m) var(--r-m) 0; }
.pf-mismatch p { margin: 0 0 10px; }
.pf-mismatch-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 !important; }
.pf-mismatch-act .btn { flex: 1 1 140px; white-space: normal; text-align: center; }
/* Poolplan als PDF: ruhige Akzentlinie, Knopf passt auch auf 320 px */
.pf-pdf { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--fuge); }
.pf-pdf p { margin: 0 0 10px; font-size: var(--fs-meta); }
.pf-pdf .btn { max-width: 100%; white-space: normal; }
.pf-pdf-note:empty { display: none; }
/* Kompakte Ergebnisseite (30.10.2026): Hauptkarte dominiert, alles Weitere eingeklappt. Mobil zuerst. */
.pf-hero { text-align: left; }
.pf-hero .kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tuerkis); }
.pf-hero.is-naeherung .kicker { color: var(--grau); }
.pf-main.pf-hero h3 { margin: 2px 0 2px; font-size: clamp(30px, 7vw, 44px); line-height: 1.1; }
.pf-hero-size { margin: 0; font-size: clamp(20px, 5vw, 26px); font-weight: 800; color: var(--tief); font-variant-numeric: tabular-nums; }
.pf-hero-size small { font-size: 14px; font-weight: 600; color: var(--grau); }
.pf-hero-why { margin: 8px 0 14px; color: var(--grau); }
.pf-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 16px; }
@media (min-width: 560px) { .pf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-tiles div { background: var(--tint-aqua); border-radius: var(--r-m); padding: 10px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
@media (min-width: 560px) { .pf-tiles div { display: block; } }
.pf-tiles dt { font-size: var(--fs-meta); color: var(--grau); font-weight: 700; }
.pf-tiles dd { margin: 0; font-size: clamp(17px, 4.6vw, 22px); font-weight: 800; color: var(--tief); font-variant-numeric: tabular-nums; text-align: right; }
@media (min-width: 560px) { .pf-tiles dd { text-align: left; } }
.pf-hero-cta .pf-pdf { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-hero-cta .pf-pdf .btn { flex: 1 1 200px; text-align: center; }
.pf-hero-cta .small { margin: 8px 0 0; }
.pf-need-short, .pf-why-short, .pf-andere { margin: 22px 0 0; }
.pf-need-short h3, .pf-why-short h3, .pf-andere h3 { margin: 0 0 8px; font-size: var(--fs-h2); }
.pf-checklist { list-style: none; margin: 0; padding: 0; }
.pf-checklist li { padding: 7px 0 7px 26px; border-bottom: 1px solid var(--fuge); position: relative; }
.pf-checklist li::before { content: '✓'; position: absolute; left: 4px; color: var(--tuerkis); font-weight: 800; }
.pf-checklist li span { color: var(--grau); }
.pf-wichtig { margin: 10px 0 0; }
.pf-alt-mini { border-bottom: 1px solid var(--fuge); }
.pf-alt-mini > summary { cursor: pointer; padding: 10px 0; display: grid; gap: 2px; list-style: none; }
.pf-alt-mini > summary::-webkit-details-marker { display: none; }
.pf-alt-mini > summary b { font-size: 16px; }
.pf-alt-mini > summary b::after { content: ' ›'; color: var(--action); }
.pf-alt-mini[open] > summary b::after { content: ' ⌄'; }
.pf-alt-tag { font-size: var(--fs-meta); color: var(--grau); }
.pf-alt-mini .cmp-btn { min-height: 44px; }
.pf-alldetails { margin: 28px 0 0; border-top: 2px solid var(--fuge); }
.pf-alldetails > summary { cursor: pointer; padding: 14px 0; font-weight: 800; font-size: 17px; color: var(--action); }
.pf-detail { margin-top: 8px; }
.pf-match-inline { display: inline-block; font-size: var(--fs-meta); color: var(--grau); }
@media (max-width: 720px) { .pf-alts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .pf-facts.pf-facts-4, .pf-facts.pf-facts-2 { grid-template-columns: minmax(0, 1fr); } }

/* Ratgeberseiten (pool-kosten/, pool-8x4-kosten/, pool-kosten-pro-jahr.html, pool-gruen.html usw.) */
.seo-crumbs ol { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--grau); }
.seo-crumbs li + li::before { content: '›'; margin-right: 4px; }
.seo-crumbs a { color: var(--kachel); text-decoration: none; }
.seo-body { padding: clamp(24px, 4vw, 44px) 0 56px; }
.seo-body .wrap { max-width: 860px; }
.seo-body h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 44px 0 12px; }
.seo-body h3 { font-size: 20px; margin: 22px 0 6px; }
.seo-body p, .seo-body li { max-width: 46em; }
.seo-answer { background: var(--weiss); border: 1px solid var(--rahmen); border-left: 5px solid var(--tuerkis); border-radius: 0 16px 16px 0; padding: 16px 20px; margin: 0 0 8px; }
.seo-answer h2 { font-size: 18px; margin: 0 0 6px; letter-spacing: 0; }
.seo-answer p:last-child, .seo-answer ul:last-child { margin-bottom: 0; }
.seo-table-wrap { overflow-x: auto; margin: 10px 0 6px; -webkit-overflow-scrolling: touch; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--weiss); min-width: 480px; }
.seo-table th, .seo-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--fuge); }
.seo-table thead th { background: var(--tint-aqua); color: var(--tief); font-size: 13px; letter-spacing: .03em; }
.seo-table td.num, .seo-table th.num { text-align: right; white-space: nowrap; }
.seo-table tfoot td { font-weight: 800; }
.seo-table small { display: block; color: var(--grau); font-size: 13px; }
.seo-source { font-size: 13px; color: var(--grau); margin: 4px 0 0; }
.seo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 12px 0; }
.seo-card { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 16px 18px; }
.seo-card h3 { margin: 0 0 4px; }
.seo-card .seo-sum { font-size: 22px; font-weight: 800; color: var(--tief); margin: 8px 0 2px; }
.seo-card ul { padding-left: 18px; margin: 6px 0 0; font-size: 15px; }
.seo-cta { background: var(--tint-aqua); border: 1px solid var(--rahmen); border-radius: 20px; padding: clamp(18px, 3vw, 28px); margin: 28px 0; }
.seo-cta h2 { margin: 0 0 8px; }
.seo-cta p { margin: 0 0 12px; }
.seo-cta .btn { margin: 0 8px 8px 0; }
.seo-faq details { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 12px; padding: 12px 16px; margin: 0 0 8px; }
.seo-faq summary { font-size: 17px; }
.seo-faq details p { margin: 6px 0 0; }
/* Startseite-Hero „Dein Pool. Aber richtig.“: ein dominanter Knopf zum Pool-Finder, Mein Pool dezent darunter */
.hero-planer { padding: clamp(32px, 6vw, 88px) 0 clamp(36px, 6vw, 80px); }
.hero-planer .hero-copy { max-width: 34rem; }
.hero-planer h1 { font-size: clamp(42px, 8.5vw, 80px); line-height: 1; max-width: 9em; margin: 0; text-wrap: balance; }
.hero-sub { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.3; color: var(--tief); margin: 18px 0 0; max-width: 24em; text-wrap: balance; }
.hero-text { font-size: 18px; color: var(--grau); margin: 12px 0 0; max-width: 30em; }
.btn-hero { margin-top: 26px; font-size: clamp(19px, 2vw, 22px); padding: 18px 34px; min-height: 60px; display: inline-flex; align-items: center;
  box-shadow: 0 8px 22px rgba(242, 95, 58, .28); transition: transform .15s, box-shadow .15s, filter .15s; }
.btn-hero:hover, .btn-hero:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(242, 95, 58, .36); filter: brightness(.96); }
.hero-checks { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 15px; font-weight: 600; color: var(--tief); }
.hero-checks li::before { content: '✓ '; color: var(--tuerkis); font-weight: 800; }
.hero-second { margin: 22px 0 0; font-size: 16px; color: var(--grau); }
.hero-second a { font-weight: 700; white-space: nowrap; }
@media (min-width: 980px) { .hero-planer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } .hero-planer h1 { font-size: clamp(56px, 5.6vw, 80px); } }
@media (max-width: 720px) {
  .hero-planer { padding-top: 24px; }
  .hero-text { font-size: 17px; }
  .btn-hero { display: flex; justify-content: center; width: 100%; margin-top: 20px; }
  .hero-planer .hero-img { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .btn-hero:hover, .btn-hero:focus-visible { transform: none; } }
/* Startseite: Vertrauenszeile im Hero, zwei dominante Einstiege, Comic statt Foto-Platzhalter */
.hero-trust { margin: 14px 0 0; font-weight: 700; color: var(--tief); }
.home-ways .path-card { padding: clamp(20px, 3vw, 32px); gap: 10px; border-width: 1px; border-color: var(--rahmen); }
.home-ways .path-card h2 { font-size: clamp(24px, 3vw, 32px); }
.home-ways .path-card > p:not(.path-icon) { font-size: 18px; color: var(--tief); }
.home-ways .path-icon { font-size: 40px; margin: 0; line-height: 1; }
.home-ways .arrows { margin: 6px 0 0; font-size: 15px; }
.owner-comic { width: 100%; height: auto; border-radius: 20px; }
/* Header: Haupt-CTA „Pool planen“ und, sobald vorhanden, „Deine Planung“; Desktop rechts neben dem Menü, mobil neben dem Menü-Knopf */
.nav-mypool, .nav-plan { order: 3; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; }
.nav-mypool { border: 2px solid var(--fuge); color: var(--tief); }
.nav-plan { order: 4; background: var(--nudel); color: #fff; }
.nav-mypool:hover, .nav-plan:hover { filter: brightness(1.05); }
@media (max-width: 1100px) and (min-width: 721px) { .nav-mypool, .nav-plan { padding: 8px 12px; font-size: 14px; } }
@media (max-width: 720px) { .nav-mypool, .nav-plan { order: 0; padding: 8px 12px; font-size: 14px; } .top .wrap > .nav-mypool, .top .wrap > .nav-plan { margin-left: auto; } .nav-mypool + .nav-plan { margin-left: 0; } .top .menu-toggle { order: 1; } .top .wrap { gap: 8px; } }
@media (max-width: 400px) { .nav-mypool, .nav-plan { padding: 6px 10px; font-size: 13px; } .top .menu-toggle { padding: 8px 10px; }
  .top .logo-pre { letter-spacing: .1em; } .top .logo b { font-size: 22px; } .top .logo-icon { width: 30px; height: 30px; } }
@media (max-width: 360px) { .nav-mypool, .top .menu-toggle { padding: 6px 8px; } .top .wrap { gap: 6px; } }
/* Footer: dezente Vertrauenszeile */
.trust-mini { list-style: none; padding: 0; margin: 14px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; opacity: .9; }
.trust-mini li::before { content: '✓ '; font-weight: 800; }
/* „Wie geht es weiter?“ am Seitenende (site.js) */
.next-auto { padding: clamp(28px, 4vw, 48px) 0; background: var(--tint-aqua); border-top: 1px solid var(--rahmen); }
.next-auto h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 14px; }
.next-auto-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.next-auto-list a { display: grid; gap: 2px; height: 100%; min-height: 56px; background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 16px; text-decoration: none; }
.next-auto-list span { color: var(--grau); font-size: 15px; }
/* Mario aus der Praxis / Tobias rechnet: nur mit echten Aussagen bzw. nachvollziehbarer Rechnung füllen */
.voice { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 16px; padding: 14px 18px; margin: 18px 0; }
.voice-head { margin: 0 0 6px; font-weight: 800; color: var(--tief); font-size: 17px; }
.voice-mario { border-left: 5px solid var(--kachel); }
.voice-tobias { border-left: 5px solid var(--sonne); }
.voice p:last-child, .voice ul:last-child { margin-bottom: 0; }
.voice ul { padding-left: 20px; margin: 0 0 8px; }
.seo-steps { padding-left: 22px; display: grid; gap: 8px; margin: 0 0 12px; }
.seo-steps li::marker { font-weight: 800; color: var(--kachel); }
.seo-todo { background: #fff4d6; color: #4a3800; border-radius: 6px; padding: 2px 8px; font-size: 15px; }
.seo-toc { background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 14px; padding: 12px 16px; margin: 16px 0; font-size: 15px; }
.seo-toc ol { margin: 4px 0 0; padding-left: 20px; columns: 2; column-gap: 24px; }
@media (max-width: 600px) { .seo-toc ol { columns: 1; } }
.seo-mini { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 8px 0 0; }
.seo-mini label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.seo-mini input { font: inherit; width: 9em; padding: 10px 12px; border: 1px solid var(--rahmen); border-radius: 10px; background: var(--weiss); color: var(--tief); }
.guide > section.seo-body { padding: clamp(24px, 4vw, 44px) 0 56px; }
.guide > section.seo-body h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: none; }
.seo-pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .seo-pros { grid-template-columns: minmax(0, 1fr); } }

/* ======================================================================================
   DESIGN-SYSTEM (10/2026), Referenz: mein-pool.html. Steht bewusst am Ende und vereinheitlicht die Seiten:
   - Buttons: Primary gefüllt in der Aktionsfarbe, Secondary Outline, Tertiary Textlink „… →“. Radius 12, kompakter.
   - Radien: große Flächen 16, Eingaben/Knöpfe 12, Kleines 8. Keine Schatten auf Karten.
   - Farben: Ergebnis in Textfarbe, Beschreibung grau, Türkis/Aktionsfarbe nur für Aktionen und Auswahl.
   - Emojis als Symbole ausgeblendet (kein einheitlicher Stil); Ergebniszahlen groß, Container zurückhaltend.
   - Mobil dichter: Sektionen 32–48 px, Innenabstand 16–20 px.
   ====================================================================================== */
:root { --on-action: #fff; }
@media (prefers-color-scheme: dark) { :root { --on-action: #0b1e25; } }

/* Buttons */
.btn { border-radius: var(--r-m); padding: 11px 18px; font-size: 16px; border-width: 1.5px; }
.btn-main, .nav-plan, .rm-cta, .in-cta { background: var(--action); color: var(--on-action); }
.btn-main:hover { filter: brightness(1.06); }
.btn-line { border-color: var(--action); color: var(--action); }
.btn-big, .btn-hero { font-size: 17px; padding: 13px 22px; }
.btn-hero:hover, .btn-hero:focus-visible { box-shadow: none; transform: none; filter: brightness(1.06); }
.nav-plan, .nav-mypool { border-radius: var(--r-m); }
.nav-mypool { border-width: 1.5px; }

/* Flächen: einheitliche Radien, keine Schatten, Hover nur über Rahmenfarbe */
.tool-card, .tb-card, .in-card, .pcard, .pf-card, .pf-box, .doc-form, .km-calc, .help-grid a, .tb-mini, .kt-item, .md-group,
.tools-profile, .ex-card, .cta-box, .path-card, .next-auto-list a, .voice, .seo-toc, .tb-doc { border-radius: var(--r-l); box-shadow: none; }
.tool-card:hover, .help-grid a:hover { box-shadow: none; transform: none; }
.wpb-fact, .pf-facts div, .kt-out, .pf-opt { border-radius: var(--r-m); }
.km-calc input[type="number"], .doc-field input[type="number"], .doc-field select, .seo-mini input { border-radius: var(--r-m); border-width: 1.5px; }
.tool-card.tool-card-main { border: 1px solid var(--rahmen); background: var(--weiss); }

/* Türkis nur für Aktionen: Labels und Überzeilen grau, Werte in Textfarbe */
.kicker, .knowledge-list small, .wpb-fact dt, .in-kicker, .rm-kicker, .ex-kicker, .sub-head, .pf-kicker { color: var(--grau); }
.knowledge-list span, .help-grid em, .in-card em, .tool-card em, .md-link, .tb-until { color: var(--action); }

/* Emojis als Symbole ausblenden: lieber weglassen als Stile mischen */
.tool-icon, .tb-icon, .kt-ic, .quick-grid a > span, .path-icon { display: none; }
.tb-helpers a { grid-template-columns: minmax(0, 1fr); }
.tb-helpers a > span { display: none; }

/* Ergebnisse: die Zahl zuerst und groß */
.doc-level, .kt-out .kt-big, .res .v { font-size: var(--fs-num); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; color: var(--tief); font-variant-numeric: tabular-nums; }
.res.main .v { color: inherit; }
.wpb-fact { background: none; border-top: 2px solid var(--fuge); border-radius: 0; padding: 10px 0 0; }
.wpb-fact dd { font-size: calc(var(--fs-num) * .72); font-variant-numeric: tabular-nums; }
.kt-out { background: none; padding: 12px 0 0; border-top: 2px solid var(--fuge); border-radius: 0; }
/* Pool-Planer-Ergebnis: Kostenübersicht als Datenliste statt kleiner Kästen */
.pf-facts { gap: 0 24px; }
.pf-facts div { background: none; border-radius: 0; border-top: 1px solid var(--fuge); padding: 10px 0; }
.pf-facts dt { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0; text-transform: none; }
.pf-facts dd { font-size: 18px; font-variant-numeric: tabular-nums; }

/* Typografie: wenige feste Ebenen */
.doc-head h1 { font-size: clamp(30px, 5vw, 48px); }
.hub-title { font-size: clamp(20px, 2.6vw, 26px); margin: var(--sp-sec) 0 var(--sp-row); }
.section-title { font-size: clamp(26px, 3.4vw, 38px); }
.lead { font-size: clamp(17px, 2vw, 20px); }

/* Startseite editorial: H2, Text, große Zahl, Aktion; Karten nur für die drei Hauptwege */
.hm-sec { padding: var(--sp-sec) 0 0; }
.hm-sec:last-child { padding-bottom: var(--sp-sec); }
.hm-h { font-size: clamp(22px, 3vw, 30px); margin: 0 0 var(--sp-row); color: var(--tief); }
.home-road .hm-h { margin-bottom: 16px; }
.hm-narrow { max-width: 760px; }
.hm-body { margin: 0; font-size: var(--fs-body); color: var(--grau); max-width: 38em; }
.hm-tags { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--tief); }
.hm-steps { list-style: none; counter-reset: hm; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.hm-steps li { counter-increment: hm; display: grid; gap: 2px; padding-top: var(--sp-row); border-top: 2px solid var(--fuge); }
.hm-steps li::before { content: counter(hm); font-size: var(--fs-num); font-weight: 800; line-height: 1.1; color: var(--tief); }
.hm-steps b { font-size: 17px; color: var(--tief); }
.hm-steps span { font-size: var(--fs-meta); color: var(--grau); }
@media (max-width: 640px) { .hm-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.hm-kpis { margin-bottom: 4px; }
/* Weniger Container: „Wie geht es weiter?“ und Hilfe-Links als Liste mit Trennlinien statt Kästen */
.next-auto { background: none; }
.next-auto-list a, .help-grid a { background: none; border: 0; border-top: 1px solid var(--fuge); border-radius: 0; padding: 12px 0; }
.next-auto-list a b { color: var(--action); }

/* Menü: drei Hauptwege kräftig, Nebenpunkte (Ratgeber, Rechner & Tools, Über uns) leiser */
.nav-item.nav-sec > a { font-weight: 500; color: var(--grau); }
.nav-item.nav-sec > a[aria-current="page"] { color: var(--tief); }
@media (min-width: 721px) {
  .nav-item:not(.nav-sec) + .nav-item.nav-sec { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--fuge); }
  .nav-mypool { display: none; } /* Mein Pool steht auf dem Desktop im Menü */
}
@media (max-width: 720px) {
  .menu > .nav-item.nav-sec > a { font-size: 15px; font-weight: 500; }
  .nav-item:not(.nav-sec) + .nav-item.nav-sec { margin-top: 10px; border-top: 1px solid var(--fuge); }
}

/* Mobil dichter */
@media (max-width: 560px) {
  .doc-head { padding: 22px 0 16px; }
  .lead { margin-top: 10px; }
  .tool-card, .tb-card, .pcard-body, .pf-card, .doc-form, .km-calc, .tools-profile, .ex-card { padding: 16px; }
  .cta-box { padding: 20px 18px; }
  .doc-form { gap: 14px; }
  .doc-body, .tools-body { padding-top: 20px; }
}

/* ---------- UI-System: genau vier Flächentypen ----------
   1. Karte (Link-/Auswahlkarte, Formular, Hauptergebnis): weiß, 1px Rahmen, Radius --r-l, kein Schatten
   2. Hervorhebung (ein dunkles Ergebnis bzw. CTA je Seite): .res.main, .cta-box, .tools-profile
   3. Akzentlinie (Tipp, Stimme von Mario/Tobias, Kurzantwort): keine Fläche, nur farbige Linie links
   4. Liste mit Trennlinien (Schritte, Rechner-Links, Varianten, FAQ, Angaben): keine Kästen
   Buttons: .btn-main (eine Hauptaktion), .btn-line bzw. gleich aussehende Nebenknöpfe, sonst Textlinks „… →“ */

/* 1. Karten vereinheitlicht */
.pf-card, .pf-box, .doc-form, .km-calc, .path-card, .tool-card, .tb-card, .seo-cta { border: 1px solid var(--rahmen); border-radius: var(--r-l); box-shadow: none; }
.pf-main { border: 2px solid var(--action); }
.pf-box, .doc-form { padding: clamp(16px, 3vw, 28px); }
.pf-offer { border-radius: var(--r-m); }

/* 3. Akzentlinie statt Kasten */
.voice, .seo-answer, .cmp-why, .tip { background: none; border: 0; border-left: 3px solid var(--action); border-radius: 0; box-shadow: none; padding: 2px 0 2px 16px; color: var(--tief); }
.voice-mario { border-left-color: var(--kachel); }
.voice-tobias, .tip { border-left-color: var(--sonne); }
.voice { margin: 20px 0; }
.voice-head, .seo-answer h2 { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .02em; color: var(--grau); margin: 0 0 4px; }
.tip { font-size: var(--fs-body); }
.tip b { color: var(--tief); }

/* 4. Listen mit Trennlinien statt Kartenstapel */
.pf-funnel, .pf-need, .sim-list, .cmp-cards { gap: 0 24px; }
.pf-funnel a, .pf-need li, .sim-list li, .cmp-card, .cmp-card.is-first { background: none; border: 0; border-top: 1px solid var(--fuge); border-radius: 0; box-shadow: none; padding: 12px 0; }
.pf-funnel a::before { display: none; }
.seo-faq details { background: none; border: 0; border-top: 1px solid var(--fuge); border-radius: 0; padding: 12px 0; margin: 0; }
.pf-summary { background: none; border: 0; border-top: 1px solid var(--fuge); border-radius: 0; padding: 14px 0 0; margin-top: var(--sp-sec); }
.pf-summary h3 { color: var(--grau); }
.res-list { background: none; border: 0; border-radius: 0; padding: 0; }
.res:not(.main) { background: none; border: 0; border-top: 2px solid var(--fuge); border-radius: 0; padding: 12px 0 0; }
.res.main { border-radius: var(--r-l); }
.pf-scen div, .pf-scen div.is-typ { background: none; box-shadow: none; border-radius: 0; border-top: 2px solid var(--fuge); padding: 8px 0 0; }
.pf-scen div.is-typ { border-top-color: var(--action); }
.pf-scen dd { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Ergebnisse groß: überall dieselbe Zahlengröße */
.res .v, .pf-total b, .md-num { font-size: var(--fs-num); }

/* Nebenknöpfe sehen aus wie .btn-line, die Hauptaktion bleibt .btn-main */
.cmp-btn, .sim-go { border-radius: var(--r-m); box-shadow: none; }
.cmp-btn-main { background: var(--action); border-color: var(--action); color: var(--on-action); }
.cmp-btn-alt, .sim-go { background: none; border: 1.5px solid var(--action); color: var(--action); }
.cmp-btn-alt:hover, .sim-go:hover { background: var(--tint-aqua); }
.cmp-badge { border-radius: var(--r-s); background: var(--action); color: var(--on-action); }

/* Abstände: Abschnitte im Ergebnis gleichmäßig */
.pf-rank-title { margin: var(--sp-sec) 0 var(--sp-row); }
.cmp, .sim { margin-top: 0; }

/* Mobil kompakter: weniger Innenabstand, Karten kürzer */
@media (max-width: 560px) {
  :root { --sp-sec: 28px; }
  .pf-box, .doc-form, .km-calc, .seo-cta, .tool-card, .tb-card { padding: 14px; }
  .cta-box, .tools-profile { padding: 18px 16px; }
  .home-hero { padding-top: 18px; padding-bottom: 18px; }
  .home-hero h1 { font-size: 32px; }
  .home-hero .lead, .home-hero .hero-sub { margin-bottom: 16px; }
  .hero-img, .hero-planer .hero-img { max-height: 180px; object-fit: cover; margin-top: 16px; border-radius: var(--r-l); }
  .guide > section:not(.home-hero) { padding: 36px 0; }
  .care > section:not(.home-hero) { padding: 28px 0; }
  .voice, .seo-answer, .cmp-why, .tip { padding-left: 12px; }
}

/* Planer-Ergebnis: Schwimm-Empfehlung und „Dazu brauchst du wahrscheinlich noch“ */
.pf-swim { margin: 18px 0; }
/* Poolplan-Zusammenfassung: drei Spalten (Pool, Technik, Kosten), mobil untereinander; persönliche Werte, keine Kästen im Kasten */
.pf-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: 16px 0 6px; }
.pf-plan-col h4 { margin: 0 0 6px; font-size: var(--fs-meta); letter-spacing: .02em; color: var(--grau); }
.pf-plan dl { margin: 0; }
.pf-plan dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--fuge); }
.pf-plan dt { color: var(--grau); font-size: var(--fs-meta); }
.pf-plan dd { margin: 0; font-weight: 700; color: var(--tief); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .pf-plan { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* Planer: Ausstattung in drei Stufen (notwendig, sinnvoll, optional) */
.pf-ausst h5 { margin: 12px 0 4px; font-size: var(--fs-meta); letter-spacing: .02em; color: var(--grau); }
.pf-ausst h5:first-child { margin-top: 0; }
/* Mein Pool: Projektstatus als Checkliste */
.md-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.md-status li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--fuge); }
.md-status li b::before { content: '○ '; color: var(--grau); }
.md-status li.is-done b::before { content: '✓ '; color: var(--action); }
.md-status li.is-done b { color: var(--grau); font-weight: 500; }
.pf-dazu { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--fuge); font-size: var(--fs-body); }
.pf-dazu a { font-weight: 700; color: var(--action); }

/* Autorenzeile auf Ratgeberseiten: wer schreibt, Stand der Zahlen */
.seo-byline { margin: 10px 0 0; font-size: var(--fs-meta); color: var(--grau); }
.seo-byline a { color: inherit; font-weight: 700; }

/* Planer-Ergebnis mobil: Zahl und Empfehlung zuerst, keine Kästen im Kasten, Listen statt Kartenstapel */
@media (max-width: 560px) {
  .pf-done { text-align: left; margin-bottom: 14px; }
  .pf-done h2 { font-size: 28px; margin-bottom: 4px; }
  .pf-done .lead { font-size: 16px; margin: 0; }
  .pf-main { border: 0; border-top: 3px solid var(--action); border-radius: 0; background: none; padding: 14px 0 0; }
  .pf-main h3 { font-size: 24px; }
  .pf-main .pf-art { display: none; }
  .pf-main h4 { margin: 18px 0 6px; }
  .pf-scen { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pf-scen div, .pf-scen div.is-typ { display: flex; justify-content: space-between; gap: 10px; background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--fuge); padding: 8px 0; }
  .pf-scen div.is-typ dd { color: var(--action); }
  .pf-funnel, .pf-need { gap: 0; }
  .pf-funnel a, .pf-need li { background: none; border: 0; border-top: 1px solid var(--fuge); border-radius: 0; padding: 10px 0; }
  .pf-funnel a::before { display: none; }
  .sim-list { gap: 0; }
  .sim-list li { background: none; border: 0; border-top: 1px solid var(--fuge); border-radius: 0; padding: 12px 0; }
  .cmp-card { border: 0; border-top: 1px solid var(--fuge); border-radius: 0; background: none; padding: 14px 0 0; }
  .voice { padding: 12px 14px; }
}

/* Kontakt und Feedback */
.ko-select { font: inherit; font-size: 17px; width: 100%; max-width: 360px; border: 2px solid var(--rahmen); border-radius: 12px; padding: 10px 12px; background: var(--weiss); color: var(--tief); margin-bottom: 14px; }
.ko-select:focus { outline: none; border-color: var(--kachel); }
.ko-opt { font-weight: 400; color: var(--grau); }
.ko-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ko-schutz { margin: 0; font-size: 14px; color: var(--grau); }
.ko-schutz.ok { color: var(--kachel); font-weight: 700; }
.ko-direkt { margin-top: 18px; }