/* Ark-Adapt-Markenschema ("Petrol"). Wird NACH styles.css geladen und ueberschreibt
   nur die Farb-Tokens, in allen vier Selektor-Varianten, die styles.css kennt.
   Papier/Tinte bleiben hell/dunkel-neutral, --accent (Bernstein) bleibt als
   Klammer aller Ark-Marken unveraendert.
   Climate = Waldgruen, Software = Tiefblau, Planning = Kastanie, Adapt = Petrol:
   kuehles Papier, Tiefpetrol als Flaeche, Petrol als Akzent. Die Marke sagt das Ziel
   (kuehlen), die Hitze selbst tragen die warmen Datenfarben der Karte -- deshalb ist
   Petrol auch die einzige Farbe, die weder mit einer Schwestermarke noch mit einer
   Zonenfarbe verwechselbar ist (Glut lag zwischen Kastanie, Sonnenfalle und Hitzekessel).
   Die vier Zonentypen tragen eigene Farben (--z-*), weil sie Daten sind, keine Marke.
   Namen und Farben kommen aus dem Prototyp (kuehlquote/src/hitze/typen.ts):
   Sonnenfalle = Tag heiss, Waermespeicher = Nacht warm, Hitzekessel = beides,
   Kuehlzone = keines von beidem. */
:root{
  --paper:#F3F7F7;
  --card:#FFFFFF;
  --ink:#17262A;
  --muted:#5E7074;
  --line:#DCE6E6;
  --hairline:#E7EEEE;
  --forest:#0F3A3F;
  --forest-deep:#0A2A2E;
  --forest-ink:#EAF4F4;
  --leaf:#0F7C82;
  --leaf-soft:#DCEEEF;
  --sketch:#CFDDDD;
  --sil-1:#E2ECEC;--sil-2:#C8D9D9;--sil-3:#A7C1C1;--sil-4:#88A9A9;--sil-line:#6F9494;
  --shadow:0 1px 1px rgba(23,38,42,.03),0 18px 44px -24px rgba(23,38,42,.20);
  --z-kuehl:#2E8B6B;--z-sonne:#E5823A;--z-speicher:#7B4A9E;--z-kessel:#8F2118;
  --lg-kita:#F0B32C;--lg-schule:#3E6E9E;--lg-pflege:#9E4E6E;--lg-klinik:#B3422F;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D1618;--card:#142022;--ink:#EAF2F2;--muted:#90A8AA;--line:#233436;--hairline:#1B292B;
    --forest:#0F3236;--forest-deep:#0A2427;--forest-ink:#EAF4F4;
    --leaf:#2FA5AB;--leaf-soft:#143235;--sketch:#22383A;
    --sil-1:#122022;--sil-2:#172A2C;--sil-3:#1F3739;--sil-4:#2A474A;--sil-line:#3B5F62;
    --shadow:0 1px 1px rgba(0,0,0,.25),0 18px 44px -24px rgba(0,0,0,.55);
    --z-kuehl:#4FB08A;--z-sonne:#F09A55;--z-speicher:#A07AC4;--z-kessel:#D24A38;
  }
}
:root[data-theme="light"]{
  --paper:#F3F7F7;--card:#FFFFFF;--ink:#17262A;--muted:#5E7074;--line:#DCE6E6;--hairline:#E7EEEE;
  --forest:#0F3A3F;--forest-deep:#0A2A2E;--forest-ink:#EAF4F4;
  --leaf:#0F7C82;--leaf-soft:#DCEEEF;--sketch:#CFDDDD;
  --sil-1:#E2ECEC;--sil-2:#C8D9D9;--sil-3:#A7C1C1;--sil-4:#88A9A9;--sil-line:#6F9494;
  --shadow:0 1px 1px rgba(23,38,42,.03),0 18px 44px -24px rgba(23,38,42,.20);
  --z-kuehl:#2E8B6B;--z-sonne:#E5823A;--z-speicher:#7B4A9E;--z-kessel:#8F2118;
  --lg-kita:#F0B32C;--lg-schule:#3E6E9E;--lg-pflege:#9E4E6E;--lg-klinik:#B3422F;
}
:root[data-theme="dark"]{
  --paper:#0D1618;--card:#142022;--ink:#EAF2F2;--muted:#90A8AA;--line:#233436;--hairline:#1B292B;
  --forest:#0F3236;--forest-deep:#0A2427;--forest-ink:#EAF4F4;
  --leaf:#2FA5AB;--leaf-soft:#143235;--sketch:#22383A;
  --sil-1:#122022;--sil-2:#172A2C;--sil-3:#1F3739;--sil-4:#2A474A;--sil-line:#3B5F62;
  --shadow:0 1px 1px rgba(0,0,0,.25),0 18px 44px -24px rgba(0,0,0,.55);
  --z-kuehl:#4FB08A;--z-sonne:#F09A55;--z-speicher:#A07AC4;--z-kessel:#D24A38;
}

/* ---------- Wortmarke (Platzhalter, bis es ein echtes Ark-Adapt-Zeichen gibt) ----------
   Icon: drei Hitzewellen in der Bernstein-Kachel, nach unten verblassend. */
.wordmark{color:var(--ink);font-size:20px;gap:10px}
svg.logo-mark{width:26px;height:26px;flex:none;display:block;border-radius:8px}

/* =====================================================================
   Hero: Text links, Musterstadt-Karte rechts
   ===================================================================== */
.adapt-hero{position:relative;padding:clamp(40px,4.5vw,64px) 0 clamp(44px,5vw,76px)}
.adapt-hero-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.adapt-hero-grid>*{min-width:0}
.adapt-hero h1{font-size:clamp(34px,4.5vw,54px);margin-bottom:20px;overflow-wrap:break-word;hyphens:auto}
.adapt-hero h1 em{font-style:normal;color:var(--leaf)}
.adapt-hero .lead{margin-bottom:28px}
.adapt-hero .hero-note{font-size:13.5px;color:var(--muted);margin:18px 0 0}
@media(max-width:920px){
  .adapt-hero-grid{grid-template-columns:1fr;gap:34px}
  .adapt-hero h1{font-size:clamp(32px,8vw,44px)}
}

/* ---------- Die Karte ---------- */
.stadtkarte{
  --boden:#F1E9DA;--fluss:#B8D3E3;--park:#BFD6AA;--strasse:rgba(255,255,255,.78);
  --label-bg:rgba(255,255,255,.9);--label-ink:#26201C;
  position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:20px;
  box-shadow:0 2px 4px rgba(23,38,42,.04),0 34px 70px -32px rgba(23,38,42,.38);overflow:hidden;
}
/* Kopf: links Ort und Typ, rechts die Zahl */
.sk-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px 6px}
.sk-ort{display:grid;grid-template-columns:auto auto;gap:4px 8px;align-items:center;min-width:0;justify-content:start}
.sk-ort b{font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-size:17px;font-weight:800;letter-spacing:-.01em}
.sk-ort small{grid-column:1 / -1;font-size:12.5px;color:var(--muted)}
.sk-zahl{
  text-align:right;font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-weight:800;font-size:clamp(30px,3vw,38px);
  line-height:1;letter-spacing:-.03em;color:#D9552B;font-variant-numeric:tabular-nums;transition:color .5s ease;flex:none;
}
.stadtkarte.gekuehlt .sk-zahl{color:var(--z-kuehl)}
.sk-delta{
  display:block;margin-top:6px;font-family:'InstrumentSans',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em;
  color:var(--z-kuehl);background:color-mix(in srgb,var(--z-kuehl) 12%,transparent);border-radius:999px;padding:3px 9px;
}
.sk-delta[hidden],#skPlan[hidden]{display:none}
/* Palette: die eigentliche Bedienung */
/* Zwei mal zwei, gleich breit — ruhiger als ein Umbruch 3+1 */
.sk-palette{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 12px 10px}
.sk-palette button{
  display:inline-flex;align-items:center;gap:8px;font:inherit;text-align:left;
  padding:7px 12px 7px 9px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.sk-palette button svg{width:18px;height:18px;flex:none;color:var(--leaf)}
.sk-palette button span{display:flex;flex-direction:column;line-height:1.15;font-size:13px;font-weight:700}
.sk-palette button small{font-size:10.5px;font-weight:600;color:var(--muted);margin-top:2px;white-space:nowrap}
.sk-palette button:hover{border-color:color-mix(in srgb,var(--leaf) 50%,var(--line));transform:translateY(-1px)}
.sk-palette button[aria-pressed="true"]{background:var(--leaf);border-color:var(--leaf);color:#fff;box-shadow:var(--shadow)}
.sk-palette button[aria-pressed="true"] svg,.sk-palette button[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
/* Erste Palette-Taste pulst leicht, bis jemand etwas gesetzt hat */
.stadtkarte:not(.benutzt) .sk-palette button:first-child{animation:paletteWink 1.6s ease-in-out infinite}
@keyframes paletteWink{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--leaf) 45%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--leaf) 0%,transparent)}}
.sk-karte{position:relative;padding:0 12px}
.sk-flaeche{position:relative}
.sk-svg{display:block;width:100%;height:auto;border-radius:12px;background:var(--boden)}
.stadtkarte.setzt .sk-svg,.stadtkarte.setzt .sk-svg .zl,.stadtkarte.setzt .sk-svg .lg{cursor:crosshair}
.sk-svg rect.zelle{transition:fill .5s ease,opacity .5s ease}
.sk-svg .fluss{fill:var(--fluss)}
.sk-svg .park{fill:var(--park)}
.sk-svg .strasse{stroke:var(--strasse);fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk-svg .zl{cursor:pointer;outline:none}
.sk-svg .zl rect{fill:var(--label-bg);stroke:transparent;stroke-width:1.5;transition:stroke .15s ease}
.sk-svg .zl:hover rect,.sk-svg .zl.an rect{stroke:var(--leaf)}
.sk-svg .zl:focus-visible rect{stroke:var(--accent);stroke-width:2}
.sk-svg .zl text{fill:var(--label-ink);font-family:'InstrumentSans',system-ui,sans-serif;font-size:10.5px;font-weight:700}
.sk-svg .zl .typ{font-size:8px;letter-spacing:.12em;font-weight:800}
.sk-svg .lg{cursor:pointer;outline:none}
.sk-svg .lg .lg-kachel{stroke:#fff;stroke-width:1.3;transition:stroke-width .15s ease,stroke .15s ease}
.sk-svg .lg:hover .lg-kachel,.sk-svg .lg.an .lg-kachel{stroke:var(--leaf);stroke-width:2.4}
.sk-svg .lg:focus-visible .lg-kachel{stroke:var(--accent);stroke-width:2.4}
/* gesetzte Maßnahmen */
.sk-svg .mk{cursor:pointer;outline:none}
.sk-svg .mk .mk-ring{fill:none;stroke-width:1.2;stroke-dasharray:3 3;opacity:.55;transform-box:fill-box;transform-origin:center}
.sk-svg .mk .mk-kern{stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.sk-svg .mk:hover .mk-kern,.sk-svg .mk:focus-visible .mk-kern{stroke:var(--accent)}
.sk-svg .mk.neu .mk-ring{animation:mkPuls .7s ease-out}
@keyframes mkPuls{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1);opacity:.55}}
.sk-legende,.sk-hinweis{
  position:absolute;bottom:12px;display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;color:var(--label-ink);background:var(--label-bg);
  border-radius:999px;padding:5px 10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;
}
.sk-legende{left:12px;padding-left:8px}
.sk-legende i{display:block;width:64px;height:7px;border-radius:4px;background:linear-gradient(90deg,#F8E3C4,#F0A15A,#D9552B,#741B14)}
.sk-legende em{display:inline-flex;gap:2px;margin-left:4px}
.sk-legende em b{width:8px;height:8px;border-radius:2px;border:1px solid #fff;display:block}
/* Hinweis oben rechts, damit er der Legende unten nicht ins Gehege kommt */
.sk-hinweis{right:12px;bottom:auto;top:12px;transition:opacity .3s ease,background .3s ease}
.stadtkarte.benutzt:not(.setzt) .sk-hinweis{opacity:0}
.stadtkarte.setzt .sk-hinweis{background:var(--leaf);color:#fff}
/* Fusszeile: Dein Plan */
.sk-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px 12px;min-height:40px;font-size:12.5px;color:var(--muted)}
.sk-fuss p{margin:0}
.sk-fuss b{color:var(--ink)}
.sk-fuss b.gruen{color:var(--z-kuehl)}
.sk-reset{font:inherit;font-size:12px;font-weight:700;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;margin-left:auto;visibility:hidden}
.stadtkarte.hatPlan .sk-reset{visibility:visible}
.sk-reset:hover{color:var(--ink);border-color:var(--ink)}
/* ---------- Popup: Verlauf statt Schalter ---------- */
.hs-karte{
  position:absolute;width:262px;z-index:3;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:12px 14px 12px;font-size:11.5px;line-height:1.4;
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;
}
.hs-karte.an{opacity:1;transform:none;pointer-events:auto}
.hs-zu{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);font:inherit;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
.hs-zu:hover{color:var(--ink);border-color:var(--ink)}
.hs-karte::before{
  content:"";position:absolute;top:18px;width:10px;height:10px;background:var(--card);
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
}
.hs-karte.rechts::before{left:-6px;transform:rotate(45deg)}
.hs-karte.links::before{right:-6px;transform:rotate(-135deg)}
.hs-kopf{display:flex;align-items:center;gap:8px;margin-bottom:2px;padding-right:28px;flex-wrap:wrap}
.hs-kopf b{font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.hs-zone{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-radius:999px;padding:2px 7px;white-space:nowrap}
.hs-sub{margin:0 0 8px;font-size:11px;color:var(--muted)}
.hs-sub b{color:var(--ink)}
.hs-verlauf{display:block;width:100%;height:auto;margin:0 0 6px}
.hs-verlauf .hv-flaeche{fill:#D9552B;opacity:.12}
.hs-verlauf .hv-heute{fill:none;stroke:#D9552B;stroke-width:1.8;stroke-linejoin:round}
.hs-verlauf .hv-plan{fill:none;stroke:var(--z-kuehl);stroke-width:1.8;stroke-dasharray:4 3;stroke-linejoin:round}
.hs-verlauf .hv-achse{stroke:var(--line);stroke-width:1}
.hs-verlauf text{font-family:'InstrumentSans',system-ui,sans-serif;font-size:8.5px;font-weight:700;fill:var(--muted)}
.hs-verlauf circle.hv-t,.hs-verlauf circle.hv-n{fill:#D9552B;stroke:#fff;stroke-width:1.2}
.hs-verlauf text.hv-t,.hs-verlauf text.hv-n{fill:var(--ink)}
.hs-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}
.hs-zahlen div{background:var(--paper);border-radius:9px;padding:7px 9px;font-variant-numeric:tabular-nums}
.hs-zahlen small{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:2px}
.hs-zahlen b{font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.02em;color:#D9552B}
.hs-zahlen b.gruen{color:var(--z-kuehl)}
.hs-zahlen .pfeil{color:var(--muted);margin:0 4px}
.hs-liegen{display:flex;flex-wrap:wrap;gap:3px}
.hs-liegen:empty{display:none}
.hs-chip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:10px;font-weight:700;color:var(--ink);background:var(--paper);border:1px solid var(--hairline);border-radius:999px;padding:2px 7px 2px 5px;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.hs-chip:hover{border-color:var(--leaf);color:var(--leaf)}
.hs-chip i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
/* "eng": Kartenflaeche zu schmal fuer ein schwebendes Fenster -> Popup darunter */
.stadtkarte.eng .hs-karte{position:static;width:auto;margin:10px 0 0;opacity:1;transform:none;pointer-events:auto}
.stadtkarte.eng .hs-karte::before{display:none}
@media(max-width:640px){
  .sk-kopf{flex-wrap:wrap}
  .sk-zahl{text-align:left}
  .sk-palette button small{display:none}
  .sk-legende{bottom:8px;left:8px} .sk-hinweis{top:8px;right:8px}
  .sk-legende em,.sk-legende em+span{display:none}
  .sk-fuss{flex-wrap:wrap}
}

/* =====================================================================
   Buehne ohne Hero-Block: Nutzen links, Browser rechts (wie #versprechen-stage)
   ===================================================================== */
.adapt-stage .benefits{grid-row:1}
.adapt-stage .stage-right{grid-row:1;margin-top:clamp(36px,6vw,84px)}
/* Die Adapt-Screens sind dichter als die von Climate: mehr Hoehe im Fenster */
.adapt-stage .browser-body{min-height:540px}
.adapt-stage .tile{padding:11px}

/* ---------- Screen 0: Bilanz-Panel ---------- */
.hs-panel{
  background:linear-gradient(135deg,var(--forest),var(--forest-deep));color:var(--forest-ink);
  border-radius:12px;padding:11px 12px;margin-bottom:9px;
}
.hs-panel-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;margin-bottom:6px}
.hs-panel-kopf b{font-weight:700}
.hs-panel .gross{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hs-panel .gross b{font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;color:#FFB48A;font-variant-numeric:tabular-nums}
.hs-panel .gross span{font-size:11.5px;opacity:.85}
.thermo{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;margin-top:13px;font-size:10.5px}
.thermo:last-of-type{margin-bottom:2px}
.thermo .lbl{font-weight:700;opacity:.85}
.thermo .achse{position:relative;height:13px;border-radius:7px;background:rgba(255,255,255,.10)}
.thermo .natur{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:rgba(255,255,255,.34)}
.thermo .stadt{position:absolute;top:0;bottom:0;border-radius:0 7px 7px 0;background:linear-gradient(90deg,#F0A15A,#D9552B)}
.thermo .delta{position:absolute;top:-15px;transform:translateX(-50%);font-size:10px;font-weight:800;color:#FFB48A;white-space:nowrap}
.thermo .ende{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding-left:6px;font-size:10px;font-weight:700;white-space:nowrap;opacity:.85}
.thermo.nacht .stadt{background:linear-gradient(90deg,#9B7CC9,#7C5CB8)}
.thermo.nacht .delta{color:#CDB8F0}
.thermo-fuss{display:flex;justify-content:space-between;font-size:9.5px;opacity:.6;margin-top:5px;padding-left:42px}
.zbar{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:8px 0 7px;gap:2px}
.zbar i{display:block;border-radius:2px}
.zleg{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:10.5px;color:var(--muted)}
.zleg span{display:flex;align-items:center;gap:6px}
.zleg i{width:8px;height:8px;border-radius:50%;flex:none}
.zleg b{color:var(--ink);margin-left:auto;font-variant-numeric:tabular-nums}
.lgr{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.lgr li{display:grid;grid-template-columns:9px 1fr auto;gap:7px;align-items:center;font-size:10.5px;color:var(--ink)}
.lgr li i{width:9px;height:9px;border-radius:2px;display:block}
.lgr li small{color:var(--muted);font-size:9.5px;white-space:nowrap}
.lgr-fuss{margin:8px 0 0;font-size:9.5px;color:var(--muted)}
.lgr li b{font-variant-numeric:tabular-nums;color:var(--z-kessel);white-space:nowrap}
.lgr li.spk b{color:var(--z-speicher)}

/* ---------- Screen 1: Massnahmen mit Wirkung ---------- */
.mn-liste{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.mn-row{
  display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;
  background:var(--paper);border:1px solid var(--hairline);border-radius:10px;padding:6px 9px;font-size:11px;
}
.mn-row.aus{opacity:.55}
.schalter{width:30px;height:17px;border-radius:9px;background:var(--z-kuehl);position:relative;flex:none}
.schalter::after{content:"";position:absolute;top:2px;left:15px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.mn-row.aus .schalter{background:var(--sketch)}
.mn-row.aus .schalter::after{left:2px}
.mn-row b{display:block;font-weight:700;color:var(--ink)}
.mn-row small{color:var(--muted);font-size:10.5px}
.mn-row .w{text-align:right;font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap}
.mn-row .w b{color:var(--z-kuehl);display:inline}
.mn-row .w span{color:var(--muted)}
.mn-kopf{display:flex;justify-content:flex-end;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:4px}
.wirk{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.wirk .tile{padding:8px 11px}
.wirk h4{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 5px;font-weight:700}
.wirk .vorher{color:var(--muted);text-decoration:line-through;font-size:13px;margin-right:6px}
.wirk .nachher{font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--z-kuehl);font-variant-numeric:tabular-nums}
.wirk small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.vorlage{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:linear-gradient(135deg,var(--forest),var(--forest-deep));color:var(--forest-ink);border-radius:12px;padding:10px 12px;
}
.vorlage .vz{font-family:'Bricolage','InstrumentSans',system-ui,sans-serif;font-size:19px;font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--accent);max-width:9ch}
.vorlage p{margin:0;font-size:11px;line-height:1.45;opacity:.92}
.vorlage b{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.vorlage .pdf{display:inline-flex;margin-top:6px;font-size:10.5px;font-weight:700;color:var(--accent)}

/* =====================================================================
   Zonen-Quadrant: Tag x Nacht ergibt den Typ
   ===================================================================== */
.zq{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;max-width:980px;margin:0 auto;align-items:stretch}
.zq-y{
  writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.zq-x{grid-column:2;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.zq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zone{
  position:relative;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:24px 24px 22px 30px;box-shadow:var(--shadow);overflow:hidden;
}
.zone::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--z)}
.zone .zmini{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--z);margin-bottom:10px}
.zone .zfach{font-size:12.5px;color:var(--muted);margin:0 0 10px;font-weight:600}
.zone .zfach b{color:var(--ink);font-weight:700}
.zone .zrat{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink)}
.zone .zrat b{color:var(--z);text-transform:uppercase;font-size:11px;letter-spacing:.08em;margin-right:6px}
.zone .tn{display:inline-flex;gap:5px;align-items:center;color:var(--muted);letter-spacing:.04em}
.zone .tn i{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--sketch)}
.zone .tn i.heiss{background:var(--z-kessel)}
.zone .tn i.warm{background:var(--z-speicher)}
.zone h3{font-size:22px;margin:0 0 8px}
.zone p{color:var(--muted);font-size:14.5px;margin:0}
.zone p b{color:var(--ink)}
@media(max-width:640px){
  .zq{grid-template-columns:1fr}
  .zq-y{display:none}
  .zq-x{grid-column:1}
  .zq-grid{grid-template-columns:1fr}
}

/* ---------- Haeufige Fragen (wie bei Planning) ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
.faq-item{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:20px 24px;font-size:17px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--leaf);
  border-bottom:2px solid var(--leaf);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq-item p{padding:0 24px 22px;color:var(--muted);font-size:15.5px;max-width:64ch}

@media (prefers-reduced-motion: reduce){
  .sk-svg rect.zelle,.hs-karte,.sk-zahl{transition:none}
  .sk-palette button,.sk-svg .mk .mk-ring{animation:none}
}

/* ---------- Warteliste-Modal ---------- */
.modal-liste{max-width:560px}
.liste-mark{width:46px;height:46px;border-radius:14px;background:var(--leaf-soft);color:var(--leaf);display:grid;place-items:center;flex:none}
.liste-mark svg{width:24px;height:24px}
.modal-liste .hs-form-frame{min-height:280px;position:relative}
.modal-liste .hs-form-frame:empty::before{content:"Formular wird geladen …";position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px}
.final .alt button{font:inherit;background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}