/* gasspeicher-live: Familie der Schuldenuhr. Ein Motiv: die Füllstands-Fläche mit gerader Oberkante. */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/public-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#162641; --paper:#fcfcfb; --night:#0f1c34; --accent:#315eaa; --accent-ink:#fcfcfb;
  --tone:#c9d6ea; --tone-deep:#22365d; --wash:#eef2f6; --surface:#fff; --muted:#44556b; --on-night:#dfe8f7; --warn:#d93a3f; --axis:#a9b9d6;
  --gutter:clamp(16px,4vw,56px); --gap:8px; --breit:1240px; --lese:900px;
  --t-display:clamp(52px,6.4vw,100px); --t-h2:clamp(32px,3.7vw,56px); --t-h3:clamp(28px,2.7vw,40px); --t-statement:clamp(22px,2.1vw,32px); --t-lead:clamp(20px,1.65vw,24px); --t-body:18px; --t-small:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Public Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:1.5;font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.kopf :focus-visible,.fuss :focus-visible{outline-color:var(--on-night)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.rand{padding-inline:max(var(--gutter),calc((100% - var(--breit)) / 2))}
.raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px)}
.abschnitt{padding-block:clamp(88px,11vw,176px) 0}
.h2{font-size:var(--t-h2);line-height:1.02;letter-spacing:-.03em;font-weight:700}
.aussage{font-size:var(--t-statement);line-height:1.3;letter-spacing:-.01em}
.leise{color:var(--muted)}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;background:var(--accent);color:var(--accent-ink);font-weight:650;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .25s var(--ease),background-color .25s}
.knopf:hover{background:#274c8c}
.knopf:active{transform:translateY(2px)}

/* Kopf: dunkles Feld mit der Zahl und dem Verlauf über die ganze Breite */
.kopf{position:relative;background:var(--night);color:var(--on-night);padding-bottom:clamp(28px,3vw,48px)}
.leiste{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px}
.marke{font-weight:750;font-size:var(--t-body);letter-spacing:-.01em;text-decoration:none;color:var(--paper);display:inline-flex;align-items:flex-end;gap:10px}
.marke i{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.marke i b{display:block;width:6px;background:var(--on-night)}
.marke i b:nth-child(1){height:100%} .marke i b:nth-child(2){height:75%;background:#7fa3e0} .marke i b:nth-child(3){height:58%;background:var(--accent)}
.leiste nav{display:flex;gap:clamp(14px,2.2vw,32px);font-size:var(--t-small)}
.leiste nav a{text-decoration:none;padding-block:8px;color:var(--on-night)}
.leiste nav a:hover{text-decoration:underline}
.menue{display:none;position:relative}
.menue summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--paper);color:var(--ink);font-weight:700}
.menue summary::-webkit-details-marker{display:none}
.menue summary::before{content:"";width:18px;height:12px;border-block:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
.menue nav{position:absolute;right:0;top:calc(100% + 8px);z-index:9;display:flex;flex-direction:column;gap:0;min-width:240px;background:var(--paper);font-size:var(--t-body)}
.menue nav a{padding:14px 20px;color:var(--ink);font-weight:650;border-top:1px solid var(--wash)}
.kopf-inhalt{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(24px,4vw,72px);align-items:end;padding-block:clamp(8px,1.6vw,24px) clamp(28px,3vw,44px)}
.kopf h1{font-size:var(--t-display);line-height:.96;letter-spacing:-.04em;font-weight:760;color:var(--paper)}
.kopf h1 span{display:block}
.kopf h1 .zahl{font-size:clamp(96px,13vw,208px);line-height:.9;letter-spacing:-.05em;margin-top:.06em}
.kopf .seite{display:flex;flex-direction:column;align-items:flex-start;gap:28px;padding-bottom:12px}
.kopf .aussage{color:var(--on-night);font-size:var(--t-lead);line-height:1.35}
.kopf .knopf{background:var(--paper);color:var(--ink)}
.kopf .knopf:hover{background:#e3eaf5}

/* Verlauf: Fläche dieses Jahr, rote Lücke zum Vorjahr, gestrichelt die Rechnung für den Winter */
.lauf{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;margin:0;color:var(--axis)}
.lauf .yachse{position:relative;width:3.4em;font-size:var(--t-small)}
.lauf .yachse span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap}
.lauf .feld{position:relative;height:clamp(260px,35svh,460px);touch-action:pan-y;cursor:crosshair}
.lauf .feld:focus-visible{outline-offset:6px}
.lauf svg{position:absolute;inset:0;width:100%;height:100%;animation:aufziehen 1.7s var(--ease) both}
.lauf .gl{position:absolute;left:0;right:0;height:1px;background:#2b3b5c}
.lauf .spanne{fill:#1e3157}
.lauf .voll{fill:var(--accent)} .lauf .luecke{fill:var(--warn)}
.lauf .vor{fill:none;stroke:var(--paper);stroke-width:3;stroke-linejoin:round}
.lauf .rechnung{fill:none;stroke:var(--tone);stroke-width:3;stroke-dasharray:9 7}
.lauf .punkt{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--paper);transform:translate(-50%,50%)}
.lauf .schild{position:absolute;line-height:1.15;white-space:nowrap;color:var(--paper);animation:blenden .6s 1.2s both}
.lauf .schild b{display:block;font-size:var(--t-statement);font-weight:740;letter-spacing:-.02em}
.lauf .schild span{font-size:var(--t-small)}
.lauf .schild.r{transform:translateX(-100%)}
.lauf .schild.ziel{border-bottom:3px solid var(--paper);padding-bottom:6px}
.lauf .schild.fehlt b{font-size:var(--t-body)}
.nadel{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:var(--t-small);font-weight:700;line-height:1;text-decoration:none}
.lauf .nadel{position:absolute;bottom:12px;transform:translateX(-50%);background:var(--paper);color:var(--ink);z-index:3}
.lauf figcaption .k-nadel{width:14px;border-radius:50%;background:var(--paper)}
.lauf .zeiger{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--paper);pointer-events:none;z-index:4}
.lauf .zeiger[hidden]{display:none}
.lauf .karte{position:absolute;top:10px;left:12px;background:var(--paper);color:var(--ink);padding:12px 16px;font-size:var(--t-small);line-height:1.45;white-space:nowrap}
.lauf .zeiger.links .karte{left:auto;right:12px}
.lauf .karte b,.lauf .karte span{display:block}
.lauf .xachse{grid-column:2;position:relative;height:2.4em;font-size:var(--t-small)}
.lauf .xachse>span{position:absolute;top:10px;white-space:nowrap}
.lauf figcaption{grid-column:1/-1;margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:var(--t-small);color:var(--on-night)}
.lauf figcaption span{display:inline-flex;align-items:center;gap:10px}
.lauf figcaption i{display:block;width:22px;height:14px}
.lauf figcaption .k-spanne{background:#2c447a}
.lauf figcaption .k-voll{background:var(--accent)} .lauf figcaption .k-luecke{background:var(--warn)}
.lauf figcaption .k-vor{height:3px;background:var(--paper)} .lauf figcaption .k-rechnung{height:0;border-top:3px dashed var(--tone)}
@keyframes aufziehen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes blenden{from{opacity:0}}

/* Kennzahlen: gestufte Flächen */
.stufen{align-items:start;row-gap:var(--gap);column-gap:var(--gap)}
.stufen .kachel{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:28px;min-height:0}
.stufen .kachel b{display:block;font-size:var(--t-display);line-height:.92;letter-spacing:-.04em;font-weight:760}
.stufen .kachel p{font-size:var(--t-body);max-width:26ch}
.stufen .k1{grid-column:1/7;height:min(70vh,640px);background:var(--accent);color:var(--accent-ink)}
.stufen .k2{grid-column:7/10;margin-top:14vh;height:min(44vh,420px);background:var(--ink);color:var(--paper)}
.stufen .k3{grid-column:10/13;margin-top:26vh;height:min(34vh,330px);background:var(--tone);color:var(--ink)}
.stufen .k2 b,.stufen .k3 b{font-size:var(--t-h2)}
.stufen .h2{grid-column:7/13;grid-row:1;align-self:start;max-width:14ch}
.stufen .k2,.stufen .k3,.stufen .k1{grid-row:1}

/* Grafiken zum Mitnehmen */
.mitnehmen{background:var(--wash);margin-top:clamp(88px,11vw,176px);padding-block:clamp(64px,7vw,112px)}
.mitnehmen .h2{grid-column:1/8;margin-bottom:48px}
.platte{grid-column:1/7;background:var(--surface);align-self:start}
.platte svg{width:100%;height:auto}
.platte figure[hidden]{display:none}
.wahl{grid-column:8/13;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:100%}
.wahl label{display:block;font-weight:650;margin-bottom:10px}
.wahl select,.r-regler select{width:100%;min-height:56px;padding:0 44px 0 16px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23162641' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 16px center;border:2px solid var(--ink);border-radius:0;appearance:none;font-weight:600;cursor:pointer}
.wahl h3{font-size:var(--t-h3);line-height:1.08;letter-spacing:-.03em;font-weight:720}
.wahl h3+p{margin-top:28px;max-width:36ch}
.zellen{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.zellen button{min-height:72px;border:0;border-radius:0;font-weight:650;cursor:pointer;transition:transform .25s var(--ease),background-color .25s}
.zellen button:active{transform:translateY(2px)}
.zellen .dunkel{background:var(--ink);color:var(--paper)} .zellen .dunkel:hover{background:#0c1830}
.zellen .hell{background:var(--tone);color:var(--ink)} .zellen .hell:hover{background:#b6c7e1}
.einbau{margin-top:var(--gap)}
.einbau[hidden]{display:none}
.einbau textarea{display:block;width:100%;min-height:132px;padding:14px 16px;background:var(--surface);border:2px solid var(--ink);border-radius:0;font-size:15px;line-height:1.45;resize:vertical}
.einbau p{margin-top:10px;font-size:var(--t-small)}
.einbau button{margin-top:10px}

/* Reichweite: liegende Ziehharmonika */
.reichweite .h2{grid-column:1/6}
.reichweite .einleitung{grid-column:7/12}
.faecher{grid-column:1/13;display:flex;height:520px;margin-top:64px}
.faecher button{position:relative;flex:1 1 0;min-width:72px;border:0;border-radius:0;padding:0;text-align:left;cursor:pointer;overflow:hidden;transition:flex-basis .45s var(--ease),flex-grow .45s var(--ease)}
.faecher button[aria-expanded="true"]{flex:8 1 0;cursor:default}
.faecher .f1{background:#17305f;color:var(--paper)} .faecher .f2{background:var(--accent);color:var(--paper)} .faecher .f3{background:#8fabd9;color:var(--ink)} .faecher .f4{background:var(--tone);color:var(--ink)}
.faecher .name{position:absolute;left:24px;bottom:24px;font-size:var(--t-body);font-weight:700;white-space:nowrap;transform-origin:left bottom;transform:rotate(-90deg) translateY(100%);transition:opacity .3s}
.faecher .innen{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transition:opacity .3s;pointer-events:none;min-width:420px}
.faecher .innen strong{font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em;font-weight:720}
.faecher .innen b{display:block;font-size:var(--t-display);line-height:.92;letter-spacing:-.04em;font-weight:760}
.faecher .innen .satz{max-width:38ch}
.faecher button[aria-expanded="true"] .name{opacity:0}
.faecher button[aria-expanded="true"] .innen{opacity:1;transition-delay:.2s}
.reichweite .zaehlung{grid-column:1/11;margin-top:48px}
.regler{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);margin-top:48px;align-items:center}
.regler label{grid-column:1/5;font-weight:650}
.regler input{grid-column:5/13;width:100%;accent-color:var(--accent);height:44px}
.regler output{grid-column:1/13;margin-top:20px;font-size:var(--t-statement);line-height:1.3;letter-spacing:-.01em;display:block;max-width:44ch}

/* Rechner: Winter wählen, Verbrauch und Käufe einstellen, Kurve bewegt sich */
.rechner2{grid-column:1/13;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);row-gap:var(--gap);margin-top:48px}
.r-regler{grid-column:1/6;display:flex;flex-direction:column;gap:22px;padding:28px;background:var(--wash)}
.r-regler label{display:flex;justify-content:space-between;gap:16px;font-weight:650;margin-bottom:8px}
.r-regler output{font-weight:400}
.r-regler input[type=range]{display:block;width:100%;height:44px;accent-color:var(--accent)}
.r-ergebnis{grid-column:1/6;display:flex;flex-direction:column;gap:12px;padding:28px;background:var(--accent);color:var(--accent-ink)}
.r-ergebnis.leer{background:var(--warn);color:#fff}
.r-ergebnis b{font-size:var(--t-display);line-height:.92;letter-spacing:-.04em;font-weight:760}
.r-ergebnis.leer b{font-size:var(--t-h2);line-height:1.02}
.r-bild{grid-column:6/13;grid-row:1/3}
.lauf.hell{color:var(--muted)}
.lauf.hell .gl{background:#cfd8e3}
.lauf.hell figcaption{color:var(--ink)}
.r-bild .feld{height:100%;min-height:380px;cursor:default}
.r-flaeche{fill:var(--tone)} .r-linie{fill:none;stroke:var(--accent);stroke-width:4;stroke-linejoin:round} .r-ohne{fill:none;stroke:var(--warn);stroke-width:3;stroke-dasharray:8 6}
.lauf.hell .k-mit{height:4px;background:var(--accent)} .lauf.hell .k-ohne{height:0;border-top:3px dashed var(--warn)}
.r-hinweis{grid-column:1/11;margin-top:20px;font-size:var(--t-small);color:var(--muted)}

/* Bilderreihe: vier Stände als Flächen auf einer Grundlinie */
.staende .h2{grid-column:1/8}
.staende .einleitung{grid-column:1/7;margin-top:28px}
.reihe{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);align-items:end;margin-top:64px;height:560px}
.reihe figure{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.reihe figcaption{padding-bottom:14px}
.reihe figcaption b{display:block;font-size:var(--t-h3);line-height:1;letter-spacing:-.03em;font-weight:720}
.reihe figcaption span{display:block;margin-top:6px;font-size:var(--t-small)}
.reihe .bild{overflow:hidden;background:var(--tone)}
.reihe img{width:100%;height:100%;object-fit:cover}
.unterzeilen{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:12px;font-size:var(--t-small);color:var(--muted)}

/* Tabelle */
.tage .h2{grid-column:1/7}
.tage .einleitung{grid-column:8/13;align-self:end}
.tabelle{grid-column:1/13;margin-top:48px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--t-body)}
th,td{text-align:right;padding:14px 16px;border-bottom:1px solid #cfd8e3}
th:first-child,td:first-child{text-align:left}
thead th{font-weight:650;border-bottom:2px solid var(--ink);vertical-align:bottom}
td.balken{width:34%;padding-right:0}
td.balken span{display:block;height:18px;background:var(--tone)}
td.balken i{display:block;height:100%;background:var(--accent)}
td.minus{font-weight:650}
.tage .mehr{grid-column:1/13;margin-top:28px}

/* Fragen */
.fragen .h2{grid-column:1/5;position:sticky;top:96px;align-self:start}
.fragen .liste{grid-column:5/13;display:flex;flex-direction:column;gap:var(--gap)}
details{background:var(--wash)}
summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:14px 24px;font-size:var(--t-body);font-weight:650;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary .plus{position:relative;flex:none;width:16px;height:16px}
summary .plus::before,summary .plus::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;background:currentColor;transition:transform .3s var(--ease)}
summary .plus::after{transform:rotate(90deg)}
details[open]{background:var(--accent);color:var(--accent-ink)}
details[open] summary .plus::after{transform:rotate(0)}
details p{padding:0 24px 24px;max-width:56ch}

/* Fuß: die Marke aus Füllständen gebaut */
.fuss{background:var(--night);color:var(--on-night);margin-top:clamp(72px,8vw,128px);padding-block:clamp(40px,4vw,64px) 40px}
.bau{display:flex;align-items:flex-end;gap:4px;height:30svh;min-height:200px}
.bau span{flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.12em;font-weight:780;font-size:var(--t-display);line-height:1;color:var(--night)}
.bau span:nth-child(3n+1){background:var(--accent);color:var(--paper)} .bau span:nth-child(3n+2){background:var(--on-night)} .bau span:nth-child(3n){background:#7fa3e0}
.fuss .bauzeile{margin-top:14px;font-size:var(--t-small)}
.fuss .spalten{margin-top:56px;row-gap:32px}
.fuss .spalten ul{grid-column:span 3;display:flex;flex-direction:column;gap:10px;font-size:var(--t-small)}
.fuss .spalten ul a{text-decoration:none} .fuss .spalten ul a:hover{text-decoration:underline}
.fuss .nachweis{grid-column:1/13;font-size:var(--t-small);max-width:110ch}
.fuss .schluss{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-size:var(--t-small)}
.fuss .knopf{min-height:48px;padding:0 20px}

/* Überblick: Antwort in Sätzen, daneben die Kennwerte als Tabelle */
.blick .h2{grid-column:1/7}
.blick .blicktext{grid-column:1/7;margin-top:28px}
.blick .blicktext p{max-width:56ch}
.blick .tabelle{grid-column:8/13;grid-row:1/3;margin-top:0;align-self:start}
.blick td:last-child{text-align:right;white-space:nowrap;font-weight:650}

/* Gaspreis, Aussagen der Regierung, Mehrkosten */
.preise .h2{grid-column:1/10}
.preise .einleitung{grid-column:1/8;margin-top:28px}
.saeulen{grid-column:1/13;display:flex;align-items:flex-end;gap:var(--gap);height:clamp(280px,40vh,420px);margin-top:88px}
.saeulen>div{position:relative;flex:1 1 0;background:var(--tone)}
.saeulen .tief{background:var(--ink)} .saeulen .hoch{background:var(--warn)}
.saeulen b{position:absolute;bottom:100%;right:0;padding-bottom:10px;font-size:var(--t-statement);line-height:1;font-weight:740;letter-spacing:-.02em;white-space:nowrap}
.nadelreihe{grid-column:1/13;display:flex;gap:var(--gap);margin-top:10px;min-height:64px}
.nadelreihe span{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.saeulenachse{grid-column:1/13;display:flex;gap:var(--gap);margin-top:6px;font-size:var(--t-small);color:var(--muted)}
.saeulenachse span{flex:1 1 0;min-width:0;white-space:nowrap}
.preise .h3{grid-column:1/9;margin-top:96px;font-size:var(--t-h3);line-height:1.08;letter-spacing:-.03em;font-weight:720}
.aussagen{grid-column:1/13;display:flex;flex-direction:column;gap:var(--gap);margin-top:36px}
.aussagen li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);padding:28px;background:var(--wash);scroll-margin-top:24px}
.aussagen li.wende{background:var(--ink);color:var(--paper)}
.aussagen .nr{grid-column:1/2;font-size:var(--t-h2);line-height:.9;font-weight:760;letter-spacing:-.04em}
.aussagen .wann{grid-column:2/5}
.aussagen .wann b{display:block;font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:720}
.aussagen .wann span{display:block;font-size:var(--t-small)}
.aussagen .wann b+span{margin-top:10px}
.aussagen .was{grid-column:5/13}
.aussagen blockquote{margin:0;font-size:var(--t-lead);line-height:1.35;max-width:34em}
.aussagen .zusatz{margin-top:12px}
.aussagen .wer{margin-top:14px;font-size:var(--t-small)}
.kosten{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:36px}
.kosten div{padding:28px;background:var(--warn);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:340px}
.kosten div+div{background:var(--accent)}
.kosten b{font-size:var(--t-display);line-height:.92;letter-spacing:-.04em;font-weight:760}
.kosten p{max-width:46ch}
.preise .quelle{grid-column:1/11;margin-top:20px;font-size:var(--t-small);color:var(--muted)}

.saeulen.viele,.saeulen.viele+.saeulenachse{gap:2px}
.saeulen .spitze{background:var(--ink)}
.preise .mehr{grid-column:1/13;margin-top:28px}
.themenzeile{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:var(--t-small)}
.themenzeile a{color:var(--on-night)}
.rechner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:62ch}
.rechner label{display:block;font-weight:650;font-size:var(--t-small);margin-bottom:8px}
.rechner input{width:100%;min-height:56px;padding:0 16px;background:var(--surface);border:2px solid var(--ink);border-radius:0;font-weight:600}
.rechner output{grid-column:1/-1;display:block;padding:24px;background:var(--accent);color:var(--accent-ink);font-size:var(--t-h3);line-height:1.1;letter-spacing:-.03em;font-weight:720}
.rechner output small{display:block;margin-top:12px;font-size:var(--t-small);line-height:1.45;letter-spacing:0;font-weight:400}

/* Kopf neu: Überschrift mit Soll und Ist, darunter der große Zähler */
.kopf-inhalt{display:block;padding-block:0 clamp(14px,1.6vw,24px)}
.kopf .leiste{padding-block:14px}
.kopf h1{font-size:clamp(38px,5.5vw,84px);line-height:.98}
.kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap);align-items:stretch;margin-top:clamp(12px,1.3vw,20px)}
.uhr{background:#081226;padding:clamp(12px,1.3vw,20px) clamp(12px,1.6vw,24px)}
.uhr-kopf{display:flex;align-items:center;gap:10px;font-size:var(--t-small);line-height:1.3;color:var(--on-night)}
.uhr-kopf i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--warn);animation:puls 1.6s ease-in-out infinite}
.uhr-kopf b{color:var(--paper);text-transform:uppercase;letter-spacing:.06em}
.uhr-zahl{display:flex;align-items:flex-end;gap:clamp(2px,.3vw,5px);margin-top:10px;font-weight:780;line-height:1}
.uhr-zahl span{flex:1 1 0;min-width:0;max-width:76px;display:flex;align-items:center;justify-content:center;aspect-ratio:5/7;background:var(--paper);color:var(--night);font-size:clamp(22px,4.3vw,70px)}
.uhr-zahl span.eilt{background:var(--warn);color:#fff}
.uhr-zahl i{flex:none;font-style:normal;color:var(--paper);font-size:clamp(18px,2.6vw,40px);padding-inline:1px}
.uhr-zahl small{flex:none;margin-left:10px;font-size:var(--t-statement);font-weight:700;color:var(--paper)}
.uhr-fuss{margin-top:10px;font-size:var(--t-small);line-height:1.3;color:var(--on-night)}
.uhr-fuss b{color:var(--paper)}
.kopfsatz{margin-top:clamp(12px,1.2vw,18px);font-size:var(--t-lead);line-height:1.3;color:var(--paper)}
.kopf .live-hinweis{margin-top:14px;max-width:none}

/* Balken: Beschriftung, Balken mit Soll-Strich, Wert */
.balken{grid-column:1/13;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) max-content;gap:10px 16px;align-items:center;margin-top:40px}
.balken .n{font-weight:650}
.balken .spur{position:relative;height:30px;background:var(--wash)}
.balken .spur i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.balken .spur i.rot{background:var(--warn)}
.balken .spur u{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1.5px;background:var(--ink)}
.balken .w{text-align:right;white-space:nowrap}
.einzeln .h2{grid-column:1/10}
.einzeln .einleitung{grid-column:1/8;margin-top:28px}
.einzeln .mehr{grid-column:1/13;margin-top:28px;display:flex;flex-wrap:wrap;gap:var(--gap)}
.block .balken{margin-top:0}

/* Kärtchen zu den Aussagen, direkt unter der Grafik */
.zeitbild .nadel{width:38px;height:38px;padding:0;border:3px solid #fff;background:var(--warn);color:#fff;font-size:var(--t-body);cursor:pointer;outline:0;transition:transform .2s var(--ease),background-color .2s}
.zeitbild .nadel.aktiv{background:var(--ink);transform:translate(-50%,50%) scale(1.25)}
.zeitbild .nadel:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.zitate{grid-column:1/-1;margin-top:20px;display:flex;flex-direction:column;gap:var(--gap)}
.zitat{background:var(--ink);color:var(--paper);padding:24px 28px}
.zitat[hidden]{display:none}
.z-kopf{display:flex;align-items:center;gap:12px;font-weight:700}
.z-kopf b{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--warn);color:#fff}
.zitat blockquote{margin:12px 0 0;font-size:var(--t-lead);line-height:1.35;max-width:46em}
.z-zahlen{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:14px}
.z-quelle{margin-top:8px;font-size:var(--t-small);color:var(--axis)}

/* Dunkles Band mit der Punkte-Grafik: Gaspreis, Füllstand, Aussagen */
.nachtband{background:var(--night);color:var(--on-night);margin-top:clamp(88px,11vw,176px);padding-block:clamp(56px,7vw,112px)}
.nachtband .h2{grid-column:1/12;color:var(--paper)}
.nachtband .einleitung{grid-column:1/9;margin-top:28px;font-size:var(--t-lead);line-height:1.4}
.nachtband .anleitung{grid-column:1/9;margin-top:16px;color:var(--paper);font-weight:650}
.punktebild{position:relative;grid-column:1/13;margin-top:48px;grid-template-columns:auto minmax(0,1fr) auto}
.punktebild .tipps{grid-column:1/-1}
.punktebild .feld{height:clamp(340px,52svh,560px);cursor:default}
.punktebild .yachse.rechts span{right:auto;left:0}
.punktebild .p-flaeche{fill:#1e3157}
.punktebild .p-kante{fill:none;stroke:#7fa3e0;stroke-width:2}
.punktebild .p-preis{fill:none;stroke:var(--paper);stroke-width:4;stroke-linejoin:round}
.punktebild .schild.name span{font-size:var(--t-small);font-weight:700;color:var(--paper)}
.punktebild .apunkt{position:absolute;z-index:3;transform:translate(-50%,50%);width:34px;height:34px;padding:0;border-radius:50%;border:3px solid #fff;background:var(--warn);color:#fff;font-weight:780;font-size:var(--t-small);line-height:1;cursor:pointer;transition:transform .2s var(--ease)}
.punktebild .apunkt:hover,.punktebild .apunkt.aktiv{transform:translate(-50%,50%) scale(1.3);z-index:4}
.punktebild .apunkt:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.punktebild .tipp{display:none;position:absolute;top:0;left:0;z-index:6;width:min(430px,100%);padding:16px 18px 18px;background:#081226;border:1px solid #4a5f8a;color:var(--on-night);font-size:var(--t-small);line-height:1.4;pointer-events:none}
.punktebild .tipp.auf{display:block}
.tipp .t-kopf{display:flex;justify-content:space-between;gap:16px}
.tipp .t-kopf b{color:var(--paper);white-space:nowrap}
.tipp .t-titel{margin-top:8px;font-size:var(--t-body);line-height:1.25;font-weight:740;color:var(--paper)}
.tipp .t-wo{margin-top:6px;font-style:italic}
.tipp .t-wer b{color:var(--paper)}
.tipp blockquote{margin:10px 0 0}
.tipp blockquote+p{margin-top:8px}
.tipp .t-stand{margin-top:10px;color:var(--paper)}
.punktebild .xachse{grid-column:2}
.punktebild figcaption .k-preis{height:4px;background:var(--paper)}
.punktebild figcaption .k-stand{background:#1e3157;border-top:2px solid #7fa3e0}
.punktebild figcaption .k-punkt{width:14px;border-radius:50%;background:var(--warn);outline:2px solid #fff}
.preise .voll{grid-column:1/13;margin-top:36px}

/* Prognose: Säulen je Monatserstem, drei Stufen des Notfallplans */
.prognose .h2{grid-column:1/11}
.prognose .einleitung{grid-column:1/8;margin-top:28px}
.treppe{grid-column:1/13;display:flex;align-items:flex-end;gap:var(--gap);height:clamp(300px,40svh,440px);margin-top:48px;padding-bottom:64px}
.treppe>div{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.treppe b{font-size:var(--t-h3);line-height:1;letter-spacing:-.03em;font-weight:760;margin-bottom:8px}
.treppe i{position:relative;display:block;background:var(--tone);font-style:normal}
.treppe .dk{display:none}
.treppe .ist i{background:var(--accent)}
.treppe .rot i{background:var(--warn)}
.treppe .rot b{color:var(--warn)}
.treppe u{position:absolute;left:0;right:0;border-top:3px solid var(--ink);text-decoration:none}
.treppe u span{position:absolute;right:0;bottom:6px;font-size:var(--t-small);font-weight:700;white-space:nowrap}
.treppe>div>span{position:absolute;top:calc(100% + 10px);left:0;font-weight:650;line-height:1.2}
.treppe em{position:absolute;top:calc(100% + 34px);left:0;font-style:normal;font-size:var(--t-small);color:var(--muted);line-height:1.2}
.prognose .p-text{grid-column:span 6;margin-top:56px;max-width:58ch}
.prognose .p-text h3{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:720;margin-bottom:12px}
.prognose .h3{grid-column:1/11;margin-top:72px;font-size:var(--t-h3);line-height:1.08;letter-spacing:-.03em;font-weight:720}
.stufenliste{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:28px}
.stufenliste li{padding:24px;background:var(--wash);display:flex;flex-direction:column;gap:6px}
.stufenliste li.jetzt{background:var(--ink);color:var(--paper)}
.stufenliste span{font-size:var(--t-small)}
.stufenliste b{font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em;font-weight:760}
.stufenliste em{font-style:normal;font-weight:700}
.stufenliste p{margin-top:10px}
.prognose .p-hinweis{grid-column:1/9;margin-top:28px}
.prognose .mehr{grid-column:1/13;margin-top:28px;display:flex;flex-wrap:wrap;gap:var(--gap)}

/* Unterseiten: Grafik zuerst, dann die Antwort */
.seitenkopf .titel{padding-block:clamp(20px,3vw,40px) clamp(24px,3vw,44px)}
.seitenkopf h1{font-size:clamp(34px,4.6vw,68px);max-width:20ch}
.seitenkopf .aussage{margin-top:16px}
.lang{padding-block:clamp(32px,4vw,56px) 0}
.block.oben h2{font-size:var(--t-h3);line-height:1.08;letter-spacing:-.03em;max-width:26ch}
.kurzgesagt .inhalt p:first-child{font-size:var(--t-lead);line-height:1.4}
.block .standzeile{font-size:var(--t-small);color:var(--muted)}
.quellenliste{display:flex;flex-direction:column;gap:10px}

/* Säulen mit vielen Spalten */
.treppe.eng{gap:4px}
.treppe.eng b{font-size:var(--t-body);letter-spacing:-.01em}
.treppe.eng>div>span{font-size:var(--t-small);font-weight:400}
.block .treppe{margin-top:28px}

/* Linien auf hellem Grund */
.linienbild{margin-top:56px}
.linienbild .feld{height:clamp(300px,46svh,520px);cursor:default}
.linienbild path{fill:none;stroke-linejoin:round}
.linienbild .l-alt{stroke:#bcc8da;stroke-width:1.5}
.linienbild .l-vor{stroke:var(--ink);stroke-width:3}
.linienbild .l-jetzt{stroke:var(--warn);stroke-width:5}
.linienbild .l-blau{stroke:var(--accent);stroke-width:4}
.linienbild .l-flaeche{fill:#dce6f4;stroke:none}
.linienbild.dicht .l-blau{stroke-width:2}
.linienbild .gl.grenze{background:var(--warn);height:2px}
.linienbild figcaption .grenze{background:var(--warn)}
.linienbild .feld .mk{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--ink);outline:2px solid #fff;transform:translate(-50%,50%)}
.linienbild .feld .mk.rot{width:18px;height:18px;background:var(--warn);z-index:2}
.linienbild figcaption .mk{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.linienbild figcaption .mk.rot{background:var(--warn)}
.linienbild figcaption .l-flaeche{display:none}
.lauf .schild.m{transform:translateX(-50%);text-align:center}
.lang-grafik .schild{background:rgba(255,255,255,.92);padding:4px 10px;z-index:3}
.lang-grafik .schild b{font-size:var(--t-body)}
.lang-grafik{margin-top:40px}
.lang-grafik .linienbild{margin-top:0}
.lang-grafik .linienbild .feld{height:clamp(260px,38svh,420px)}
.linienbild figcaption i{height:4px}
.linienbild figcaption .l-alt{background:#bcc8da} .linienbild figcaption .l-vor{background:var(--ink)}
.linienbild figcaption .l-jetzt{background:var(--warn)} .linienbild figcaption .l-blau{background:var(--accent)}

/* Hundert Felder */
.felder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,4vw,64px);align-items:end}
.felder .gitter{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;transform:scaleY(-1)}
.felder .gitter i{aspect-ratio:1/1;background:var(--wash)}
.felder i.voll{background:var(--accent)} .felder i.fehlt{background:var(--warn)}
.felder .gross{font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em;font-weight:720}
.felder .gross b{font-size:clamp(88px,12vw,180px);line-height:.85;letter-spacing:-.05em;display:block;color:var(--accent)}
.felder figcaption p+p{margin-top:16px;max-width:44ch}
.felder .leg,.schnitt .leg{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:var(--t-small)}
.felder .leg span,.schnitt .leg span{display:inline-flex;align-items:center;gap:8px}
.felder .leg i,.schnitt .leg i{display:block;width:16px;height:16px;background:var(--wash)}

/* Zeitleiste der Stufen */
.zeitleiste .zl-feld{position:relative;height:150px;container-type:inline-size}
.zeitleiste .zl-feld>div{position:absolute;bottom:0;height:96px;padding:12px 14px;background:var(--tone);overflow:visible}
.zeitleiste .zl-feld>.al{background:var(--warn);color:#fff}
.zeitleiste b{display:block;font-size:clamp(13px,2.9cqw,26px);line-height:1.1;letter-spacing:-.02em;font-weight:740;white-space:nowrap}
.zeitleiste span{font-size:var(--t-small);white-space:nowrap}
.zeitleiste .schmal b,.zeitleiste .schmal span{position:absolute;left:0;color:var(--ink)}
.zeitleiste .schmal b{bottom:calc(100% + 26px);font-size:var(--t-body)}
.zeitleiste .schmal span{bottom:calc(100% + 4px);white-space:nowrap}
.zeitleiste .zl-achse{position:relative;height:2.2em;margin-top:8px;font-size:var(--t-small);color:var(--muted);border-top:2px solid var(--ink)}
.zeitleiste .zl-achse span{position:absolute;top:6px;padding-left:6px;border-left:2px solid var(--ink);height:1.4em}

/* Die drei Stufen als Treppe */
.stufentreppe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:end}
.stufentreppe li{padding:22px;background:var(--wash);display:flex;flex-direction:column;gap:6px;min-height:230px}
.stufentreppe .s2{min-height:310px;background:var(--tone)}
.stufentreppe .s3{min-height:390px;background:var(--warn);color:#fff}
.stufentreppe li.jetzt{background:var(--ink);color:var(--paper)}
.stufentreppe span{font-size:var(--t-small);font-weight:700}
.stufentreppe b{font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em;font-weight:760}
.stufentreppe em{font-style:normal;font-size:var(--t-small)}
.stufentreppe p{margin-top:auto}

/* Schnitt durch Kaverne und Porenspeicher */
.schnitt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap) clamp(16px,3vw,48px)}
.schnitt figure{display:flex;flex-direction:column}
.schnitt .erde{position:relative;height:clamp(300px,42svh,460px);background:#d9c9a8;border-top:14px solid #5d7a3a;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.schnitt .oben{position:absolute;top:8px;left:12px;font-size:var(--t-small);font-weight:700}
.schnitt .salz{width:56%;height:84%;background:#f1efe9;border-radius:46% 46% 0 0;display:flex;align-items:center;justify-content:center}
.schnitt .kaverne{width:34%;height:76%;border-radius:999px;background:#fff;border:4px solid var(--ink);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.schnitt .deckel{position:absolute;left:8%;right:8%;bottom:46%;height:16%;background:#6f6455;border-radius:50% 50% 0 0/100% 100% 0 0}
.schnitt .pore{position:relative;width:76%;height:46%;border-radius:50% 50% 0 0/70% 70% 0 0;border:4px solid var(--ink);border-bottom:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  background:radial-gradient(circle,#b9a987 22%,transparent 24%) 0 0/14px 14px #fff}
.schnitt i.arbeit{display:block;background:var(--accent);opacity:.92}
.schnitt i.kissen{display:block;height:28%;background:var(--ink)}
.schnitt figcaption{margin-top:12px;max-width:44ch}
.schnitt figcaption b{display:block;font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:720;margin-bottom:6px}
.schnitt .leg{grid-column:1/-1;margin-top:8px}
.schnitt .leg i.arbeit{background:var(--accent)} .schnitt .leg i.kissen{background:var(--ink)}

/* Zähler zum Einbetten */
.einbett-uhr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap);align-items:stretch}
.einbett-uhr .e-titel{grid-column:1/-1;font-weight:750;font-size:var(--t-statement);letter-spacing:-.02em;margin:0 0 4px}
.einbett-uhr .e-titel a{color:var(--paper);text-decoration:none}
.einbett-uhr .stand-zahl{font-size:clamp(44px,6vw,88px)}
.einbett-uhr .uhr,.einbett-uhr .stand{min-width:0}
.einbett-breit.einbett-uhr{overflow:hidden}

/* Live-Zeile im Kopf */
.live{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:var(--t-lead);line-height:1.3;color:var(--paper)}
.live i{flex:none;align-self:center;width:12px;height:12px;border-radius:50%;background:var(--warn);animation:puls 1.6s ease-in-out infinite}
.live b{font-weight:740}
.live-hinweis{font-size:var(--t-small);color:var(--axis);max-width:46ch}
@keyframes puls{50%{opacity:.25}}

/* Lesetext auf der Startseite */
.lesetext .h2{grid-column:1/9}
.lesetext .spalten2{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(24px,4vw,72px);margin-top:48px}
.lesetext h3{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:720;margin-bottom:12px}
.lesetext p{max-width:58ch}
.lesetext p+p{margin-top:.8em}

/* Grafiken auf Unterseiten und für Redaktionen */
.bildzeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);padding-bottom:clamp(56px,7vw,104px)}
.bildzeile figure{background:var(--surface)}
.bildzeile svg{width:100%;height:auto}
.bildzeile img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.einbettliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--gap)}
.einbettliste h3{font-size:var(--t-body);font-weight:700;margin-bottom:10px}
.einbettliste figure{background:var(--surface)}
.einbettliste svg{width:100%;height:auto}
.einbettliste textarea,.einbett-breit+textarea{margin-top:var(--gap);max-width:none}
.einbett-breit{background:var(--night);color:var(--on-night);padding:clamp(16px,2vw,28px)}
.einbett-seite{margin:0;background:var(--night);color:var(--on-night);padding:16px}
.einbett-seite p{margin-top:12px;font-size:var(--t-small)}

/* Zeitbild: Füllstand, Aussagen und Gaspreis auf einer Zeitachse */
.zeitbild{grid-column:1/13;margin-top:72px}
.zeitbild .feld{height:clamp(260px,38svh,420px);cursor:default}
.zeitbild .z-flaeche{fill:var(--accent)}
.zeitbild .nadel{position:absolute;transform:translate(-50%,50%);z-index:3;outline:3px solid var(--paper)}
.lauf.hell .schild{color:var(--ink);animation:none}
.zeitbild .schild span{font-size:var(--t-small);font-weight:700;background:var(--paper);padding:2px 6px}
.zeitbild .bandname{grid-column:1;align-self:end;font-size:var(--t-small);text-align:right;line-height:1.2}
.zeitbild .preisband{grid-column:2;position:relative;height:120px;margin-top:28px}
.zeitbild .preisband i{position:absolute;bottom:0;background:var(--tone)}
.zeitbild .preisband i.hoch{background:var(--warn)}
.zeitbild .preisband b{position:absolute;bottom:100%;left:0;padding-bottom:4px;font-size:var(--t-small);font-style:normal;font-weight:700;white-space:nowrap}
.zeitbild .preisband i.hoch b{left:auto;right:0}
.block .zeitbild{margin-top:0}
.fuss .spalten li.kopfzeile{font-weight:700;color:var(--paper)}

.kleinbild .feld{height:clamp(220px,30svh,340px);cursor:default}
.k-flaeche{fill:var(--accent)} .k-linie{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.kartenbild{max-width:720px;background:var(--wash)}
.kartenbild svg{width:100%;height:auto}
.kartenbild text{font-size:15px;font-weight:650;fill:var(--ink)}
.kartenbild a:hover circle,.kartenbild a:focus circle{stroke:var(--ink);stroke-width:3}
.kartenbild figcaption{display:flex;flex-wrap:wrap;gap:8px 24px;padding:14px 16px;font-size:var(--t-small)}
.kartenbild figcaption i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px}

/* Kacheln zu den Unterseiten */
.weiter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:48px}
.weiter a{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:190px;padding:24px;background:var(--wash);text-decoration:none;font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:720;transition:background-color .25s,color .25s}
.weiter a:hover{background:var(--accent);color:var(--accent-ink)}
.weiter a span{font-size:var(--t-small);line-height:1.4;letter-spacing:0;font-weight:400}

/* Unterseiten: Frage links, Antwort rechts */
.seitenkopf{padding-bottom:0}
.seitenkopf .standzeile{margin-top:20px;font-size:var(--t-small);color:var(--axis)}
.block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.6vw,24px);padding-bottom:clamp(56px,7vw,104px)}
.block h2{grid-column:1/6;font-size:var(--t-statement);line-height:1.12;letter-spacing:-.02em;font-weight:720}
.block .inhalt{grid-column:6/13}
.block.breit h2{grid-column:1/13}
.block.breit .inhalt{grid-column:1/13;margin-top:28px}
.block .saeulen{margin-top:104px}
.block .aussagen{margin-top:0}
.block .inhalt p,.block .inhalt ul{max-width:62ch}
.block .inhalt>*+*{margin-top:1em}
.block .inhalt .tabelle{margin-top:24px;margin-bottom:24px}
.block .inhalt ul{display:flex;flex-direction:column;gap:8px}
.block textarea{display:block;width:100%;max-width:62ch;min-height:120px;padding:14px 16px;background:var(--surface);border:2px solid var(--ink);border-radius:0;font-size:var(--t-small);line-height:1.45;resize:vertical}
table.worte th,table.worte td{text-align:left;vertical-align:top}
.lang .weiter{margin-top:0}

/* Auftritt der Teile, nur wenn das Skript läuft */
.js .tritt{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .tritt.da{opacity:1;transform:none}
.js .blende .bild{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease)}
.js .blende.da .bild{clip-path:inset(0)}
.js .blende img{transform:scale(1.12);transition:transform 1.4s var(--ease)}
.js .blende.da img{transform:none}

/* Unterseiten */
.seitenkopf{background:var(--night);color:var(--on-night)}
.seitenkopf h1{line-height:1.02;letter-spacing:-.03em;font-weight:740;color:var(--paper)}
.seitenkopf .aussage{max-width:58ch;font-size:var(--t-lead);line-height:1.4;color:var(--on-night)}
.lang{padding-block:64px 0}
.lang .tabelle{margin-top:0}
.nur-grafik{background:var(--surface);margin:0}
.nur-grafik figure{max-width:900px;margin:0 auto}
.nur-grafik p{max-width:900px;margin:0 auto;padding:10px 16px 16px;font-size:var(--t-small)}

/* Eine Spalte: Überschrift, Grafik, Text, alles untereinander. Lesebreite höchstens 72 Zeichen. */
.abschnitt .h2,.abschnitt .einleitung,.nachtband .h2,.nachtband .einleitung,.nachtband .anleitung,.prognose .p-hinweis,.prognose .h3{grid-column:1/-1}
.abschnitt .h2,.nachtband .h2{max-width:24ch}
.abschnitt .einleitung,.nachtband .einleitung,.prognose .p-hinweis{margin-top:28px;max-width:72ch;align-self:auto;font-size:var(--t-body);line-height:1.55}
.nachtband .anleitung{margin-top:28px;max-width:72ch}
.nachtband .einleitung{margin-top:14px}
.punktebild,.treppe{margin-top:40px}
.blick .tabelle{grid-column:1/-1;grid-row:auto;margin-top:36px;max-width:920px}
.blick .blicktext,.einzeln .blicktext{grid-column:1/-1;margin-top:28px;max-width:72ch}
.blicktext p+p{margin-top:1em}
.reichweite .rechner2{margin-top:40px}
.mehr-dazu{grid-column:1/-1;margin-top:20px;max-width:72ch;font-weight:650}
.mehr-dazu a{font-weight:650}
.leerpaar{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:start;margin-top:40px}
.leerpaar .kartenbild{max-width:none}
.leerpaar>*{grid-column:auto}
.leerpaar .balken{margin-top:0;grid-template-columns:minmax(0,max-content) minmax(0,1fr) max-content}
.balken .n small{display:block;font-weight:400;font-size:var(--t-small);color:var(--muted)}
.fa .h2{max-width:20ch}
.fa-liste{grid-column:1/-1;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px);margin-top:48px}
.fa-liste article{max-width:72ch}
.fa-liste h3{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.03em;font-weight:720;margin-bottom:16px}
.fa-liste p{line-height:1.6}
.fa-liste p+p{margin-top:1em}
.fa .mehr{grid-column:1/-1;margin-top:48px}

/* Kopf: Luft unter der Navigation, zwei gleich gebaute Felder */
.kopf .leiste{padding-block:18px}
.kopf-inhalt{padding-top:clamp(8px,1.2vw,18px)}
.kopfzeile{margin-top:clamp(14px,1.5vw,22px)}
.kopfsatz{font-size:var(--t-body)}
.stand{display:flex;flex-direction:column;justify-content:space-between;background:#081226;color:var(--on-night);padding:clamp(12px,1.3vw,20px) clamp(16px,2vw,32px);min-width:min(34vw,460px)}
.stand .uhr-kopf{color:var(--on-night)}
.stand-zahl{font-size:clamp(60px,7.4vw,118px);line-height:.95;letter-spacing:-.05em;font-weight:780;color:var(--paper);white-space:nowrap;margin-top:clamp(6px,.9vw,14px)}
.sollist{position:relative;height:12px;background:#22365d;margin-top:10px}
.sollist i{position:absolute;inset:0 auto 0 0;background:var(--warn)}
.sollist u{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;background:var(--paper)}

/* Artikel: eine Spalte, Überschrift über dem Text */
.block{display:block;padding-bottom:clamp(48px,6vw,88px)}
.block h2{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.03em;font-weight:720;max-width:26ch}
.block .inhalt{margin-top:20px}
.block .inhalt p,.block .inhalt ul{max-width:72ch;line-height:1.6}
.block.breit .inhalt{margin-top:24px}
.block.oben h2{font-size:var(--t-h2);max-width:22ch}
.kurzgesagt .inhalt p:first-child{font-size:var(--t-lead);line-height:1.45;max-width:60ch}
.felder{grid-template-columns:minmax(0,1fr);align-items:start}
.felder .gitter{grid-template-columns:repeat(20,minmax(0,1fr));max-width:1100px}
.felder figcaption{margin-top:20px}
.zurueck{padding-bottom:clamp(56px,7vw,104px);font-weight:650}
.artikelliste{display:flex;flex-direction:column;gap:22px;max-width:72ch}
.artikelliste a{display:block;font-size:var(--t-statement);line-height:1.2;letter-spacing:-.02em;font-weight:720}
.artikelliste span{display:block;margin-top:4px}

/* ===== Nach den Vorbildern: mittiger Rahmen, Aufklappmenüs, Karten mit Infofeld ===== */
.mitte{text-align:center;margin-inline:auto}
.abschnitt .h2.mitte{max-width:26ch}
.lesespalte{max-width:var(--lese);margin:36px auto 0}
.lesespalte p{line-height:1.6}
.lesespalte .tabelle{margin:0 0 28px}
.lesespalte td:last-child{text-align:right;white-space:nowrap;font-weight:650}
.lesespalte p+p{margin-top:1em}
.mehr.mitte{display:flex;justify-content:center;margin-top:56px}
.knopf.hell{background:var(--accent);color:var(--accent-ink)}
.knopf.hell:hover{background:#3d6fc4}
.nachtband .mehr{grid-column:1/-1;margin-top:28px}

/* Navigation mit Aufklappmenüs */
.leiste>nav{align-items:center;gap:clamp(2px,.8vw,12px)}
.mp{position:relative}
.mp>button,.mp-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:none;border:0;color:var(--on-night);font-size:var(--t-small);font-weight:600;cursor:pointer;text-decoration:none}
.mp>button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.mp>button:hover,.mp-link:hover,.mp.offen>button{color:#fff;text-decoration:underline;text-underline-offset:.3em}
.mp>ul{display:none;position:absolute;left:0;top:100%;z-index:30;min-width:310px;padding:8px 0;background:var(--paper);box-shadow:0 22px 44px -14px rgba(8,18,38,.5)}
.mp:nth-of-type(n+3)>ul{left:auto;right:0}
.mp:hover>ul,.mp:focus-within>ul,.mp.offen>ul{display:block}
.mp>ul a{display:block;padding:11px 20px;color:var(--ink);text-decoration:none;font-size:var(--t-small);font-weight:600;white-space:nowrap}
.mp>ul a:hover,.mp>ul a:focus-visible{background:var(--wash);text-decoration:none}
.menue nav{max-height:78vh;overflow:auto;min-width:min(320px,86vw)}
.menue nav p{padding:14px 20px 4px;font-size:var(--t-small);font-weight:700;color:var(--muted)}
.menue nav a{padding:11px 20px;border-top:0}

/* Vier Kennzahlen unter dem Kopf */
.kennzahlen{padding-top:clamp(56px,6vw,96px)}
.kz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:40px}
.kz a{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--wash);text-decoration:none;transition:background-color .2s}
.kz a:hover{background:var(--tone)}
.kz b{font-size:var(--t-h2);line-height:1;letter-spacing:-.04em;font-weight:760;white-space:nowrap}
.kz span{line-height:1.35}
.kz em{margin-top:auto;padding-top:10px;font-style:normal;font-weight:700;text-decoration:underline;text-underline-offset:.2em}

/* Karte mit Infofeld */
.aktivkarte{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:stretch;margin-top:40px}
.aktivkarte .k-bild{background:var(--wash);display:flex;flex-direction:column}
.aktivkarte svg{width:100%;height:auto;max-height:78vh}
.aktivkarte text{font-size:15px;font-weight:650;fill:var(--ink);pointer-events:none}
.aktivkarte .kp{cursor:pointer;outline:0;transition:stroke-width .15s}
.aktivkarte circle.kp:hover,.aktivkarte circle.kp:focus-visible,.aktivkarte circle.kp.aktiv{stroke:var(--ink);stroke-width:4}
.aktivkarte path.kp{stroke:#fff;stroke-width:1}
.aktivkarte path.kp:hover,.aktivkarte path.kp:focus-visible,.aktivkarte path.kp.aktiv{stroke:var(--ink);stroke-width:2.5}
.aktivkarte figcaption{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 16px;font-size:var(--t-small)}
.aktivkarte figcaption i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px}
.k-feld{background:var(--night);color:var(--on-night);padding:clamp(20px,2.4vw,36px);display:flex;flex-direction:column}
.k-hinweis{font-size:var(--t-small);color:var(--axis)}
.k-info{margin-top:18px}
.k-info[hidden]{display:none}
.k-name{font-size:var(--t-h3);line-height:1.05;letter-spacing:-.03em;font-weight:740;color:var(--paper)}
.k-ort{margin-top:6px}
.k-zahl{margin-top:22px;font-size:clamp(56px,6vw,96px);line-height:.95;letter-spacing:-.05em;font-weight:780;color:var(--paper)}
.k-fuss{margin-top:10px;font-size:var(--t-small)}
.k-info dl{margin:22px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px}
.k-info dt{color:var(--axis)}
.k-info dd{color:var(--paper);font-weight:650}
.k-info .knopf{margin-top:24px;background:var(--paper);color:var(--ink)}
.block .aktivkarte{margin-top:0}

/* Fragen und Antworten in zwei Spalten */
.fa-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(32px,5vw,80px);margin-top:56px}
.fa-liste article{max-width:none}
.fa-liste h3{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em}

/* Artikel: Lesespalte mittig, Grafiken in voller Rahmenbreite */
.seitenkopf .titel>*{max-width:var(--lese);margin-inline:auto}
.seitenkopf h1{font-size:clamp(32px,4vw,56px);max-width:var(--lese)}
.lang>.block:not(.breit),.lang>.zurueck{max-width:var(--lese);margin-inline:auto}
.block.breit>h2,.block.breit>.inhalt>p,.block.breit>.inhalt>ul{max-width:var(--lese);margin-inline:auto}
.block.oben h2{font-size:var(--t-h3);max-width:var(--lese)}
.block h2{max-width:none}
.block .inhalt p,.block .inhalt ul{max-width:none}
.kurzgesagt .inhalt p:first-child{max-width:none}
.block.breit>.inhalt>.tabelle{max-width:1000px;margin-inline:auto}
.felder,.zeitleiste,.stufentreppe,.schnitt{max-width:1000px;margin-inline:auto}
.block .rechner{margin-inline:auto}

/* Fester Rahmen für jede Grafik: Überschrift, Unterzeile, Grafik, Fußzeile */
.grafik{margin:0;background:var(--surface);border:1px solid #d3dbe6;padding:clamp(18px,2.6vw,36px)}
.g-kopf{display:block;margin-bottom:clamp(18px,2vw,28px)}
.g-titel,.block.oben h2.g-titel{font-size:var(--t-h3);line-height:1.1;letter-spacing:-.03em;font-weight:740;max-width:28ch;margin:0}
.g-unter{margin-top:10px;max-width:72ch;color:var(--muted);line-height:1.45}
.g-fuss{margin-top:20px;font-size:14px;color:var(--muted)}
.grafik .aktivkarte,.grafik .linienbild,.grafik .treppe,.grafik .balken,.grafik .saeulen{margin-top:0}
.grafik .felder,.grafik .zeitleiste,.grafik .stufentreppe,.grafik .schnitt{max-width:none}
.grafik .tabelle{margin-top:24px}
.grafik textarea{margin-top:var(--gap)}
.block.oben>.inhalt{margin-top:28px}
.block.oben>.inhalt>p{max-width:var(--lese);margin-inline:auto}
/* im dunklen Kopf und im dunklen Band */
.lauf .g-kopf{grid-column:1/-1;margin-bottom:18px}
.lauf .g-titel{font-size:var(--t-statement);color:var(--paper);max-width:none}
.lauf .g-unter,.nachtband .g-unter{color:var(--on-night)}
.lauf .g-unter{max-width:none;margin-top:6px;font-size:var(--t-small)}
.nachtband .g-unter{grid-column:1/-1;margin-top:14px}
.einzeln .g-unter{margin-top:14px}

/* Nummeriertes Inhaltsverzeichnis im Artikel */
.inhaltsverzeichnis{max-width:var(--lese);margin:0 auto clamp(48px,6vw,88px);padding:clamp(18px,2.2vw,28px);background:var(--wash)}
.inhaltsverzeichnis h2{font-size:var(--t-body);font-weight:740}
.inhaltsverzeichnis ol{margin-top:12px;padding-left:1.6em;list-style:decimal;display:flex;flex-direction:column;gap:8px}
.inhaltsverzeichnis li::marker{font-weight:700}
.block{scroll-margin-top:24px}

/* Themenübersicht: je Gruppe ein Kasten, darin jede Seite als Zeile */
.themen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.t-kasten{background:var(--surface);border:1px solid #d3dbe6;padding:clamp(18px,2.2vw,30px)}
.t-kasten h2{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:740}
.t-kasten>p{margin-top:6px;color:var(--muted)}
.t-kasten ul{margin-top:14px}
.t-kasten li{border-top:1px solid #e3e8ef}
.t-kasten a{position:relative;display:block;padding:14px 36px 14px 0;text-decoration:none}
.t-kasten a::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:translateY(-50%) rotate(45deg)}
.t-kasten a:hover b{text-decoration:underline;text-underline-offset:.2em}
.t-kasten b{display:block;font-weight:700}
.t-kasten span{display:block;margin-top:2px;font-size:var(--t-small);color:var(--muted);line-height:1.4}

/* ===== Runde 25: eine Spaltenbreite, Zeiger in hellen Grafiken, Jahre zuschalten, Anzeige, Seitenende, Rechner ===== */
/* Titel, Grafikrahmen und Text stehen in derselben Spalte; nur Karten, der große Rechner und breite Tabellen dürfen weiter werden */
.block.oben .grafik{max-width:var(--lese);margin-inline:auto}
.block.oben .grafik:has(.aktivkarte,.rechner2,.einbettliste,.einbett-breit){max-width:none}
.block.breit>.inhalt>.aktivkarte,.block.breit>.inhalt>.einbettliste,.block.breit>.inhalt>.einbett-breit,.block.breit>.inhalt>.rechner2{max-width:none}
.block.breit>.inhalt>*{max-width:var(--lese);margin-inline:auto}
.block.breit>.inhalt>.tabelle{max-width:var(--lese)}
.grafik .rechner{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.grafik .rechner output{font-size:var(--t-h3)}

/* Kennzahl-Kacheln: Zahl bleibt im Kasten */
.kz b{font-size:clamp(28px,3.1vw,46px);white-space:normal;overflow-wrap:anywhere}

/* Zähler: Ziffern richten sich nach der Breite des Feldes */
.uhr{container-type:inline-size}
.uhr-zahl span{font-size:clamp(18px,6.6cqw,70px)}
.uhr-zahl i{font-size:clamp(14px,4cqw,40px)}
.einbett-uhr{gap:var(--gap);padding:clamp(12px,1.6vw,24px)}
.einbett-hell{margin:0;padding:16px;background:var(--paper)}
.einbett-hell .e-titel{font-weight:750;font-size:var(--t-statement);letter-spacing:-.02em;margin:0 0 12px}
.einbett-hell .e-titel a{text-decoration:none}

/* Zeiger und Wertekärtchen in hellen Grafiken */
.linienbild .feld{cursor:crosshair}
.lauf.hell .zeiger{background:var(--ink)}
.lauf.hell .karte{background:var(--ink);color:var(--paper)}
.lauf.hell .karte i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}

/* Jahre zuschalten */
.jahrwahl{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0}
.jahrwahl+.linienbild{margin-top:52px}
.jahr,.sortwahl button{min-height:40px;padding:0 14px;background:var(--wash);border:0;font-weight:650;cursor:pointer;color:var(--ink)}
.jahr.an,.sortwahl button.an{background:var(--ink);color:var(--paper)}
.jahr:focus-visible,.sortwahl button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Sortierknöpfe über einer Tabelle: Pfeil zeigt die Richtung, ohne Skript bleiben sie ausgeblendet */
.sortwahl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;max-width:none}
.sortwahl[hidden]{display:none}
.sortwahl span{margin-right:6px;color:var(--muted);font-size:var(--t-small)}
.sortwahl button.an::after{content:" \2193"}
.sortwahl button.an.auf::after{content:" \2191"}
.sortwahl+table th{white-space:nowrap}
.linienbild.jahre path.an{stroke-width:4}
.linienbild.jahre path.aus{opacity:0}

/* Anzeige: Balken von 0 bis 100 mit Marken */
.pegelbild{padding:74px 0 0}
.p-spur{position:relative;height:84px;background:var(--wash)}
.p-spur>i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.p-spur>b{position:absolute;top:50%;transform:translate(calc(-100% - 14px),-50%);color:#fff;font-size:var(--t-h3);font-weight:760;letter-spacing:-.03em;white-space:nowrap}
.p-spur>u{position:absolute;top:-14px;bottom:-14px;width:3px;margin-left:-1.5px;background:var(--ink);text-decoration:none}
.p-spur>u span{position:absolute;left:8px;white-space:nowrap;font-size:var(--t-small);font-weight:650}
.p-spur>u.oben span{bottom:calc(100% + 4px)}
.p-spur>u.unten span{top:calc(100% + 4px)}
.p-spur>u.l span{left:auto;right:8px;text-align:right}
.p-spur>u.unten.z2 span{top:calc(100% + 30px)}
.p-achse{position:relative;height:108px;font-size:var(--t-small);color:var(--muted)}
.p-achse span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap}
.p-achse span:first-child{transform:none} .p-achse span:last-child{transform:translateX(-100%)}

/* Säulen mit vielen Spalten: kurze Beschriftung, nichts klebt aneinander */
.treppe.eng .dl{display:none} .treppe.eng .dk{display:inline}
.treppe.eng>div>span{font-size:13px;left:50%;transform:translateX(-50%);white-space:nowrap}
.treppe.eng b{font-size:var(--t-small);text-align:center}
.treppe.eng{padding-bottom:36px}

/* Seitenende mit Ziel */
.schlussfeld{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);max-width:var(--lese);margin:clamp(24px,4vw,56px) auto clamp(56px,7vw,104px)}
.s-ziel{background:var(--night);color:var(--on-night);padding:clamp(20px,2.6vw,36px)}
.s-titel{font-size:var(--t-h3);line-height:1.08;letter-spacing:-.03em;font-weight:740;color:var(--paper)}
.s-ziel p+p{margin-top:12px}
.s-ziel .knopf{margin-top:8px;background:var(--accent);color:var(--accent-ink)}
.s-ziel .knopf:hover{background:#3d6fc4}
.s-weiter{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.6vw,36px);background:var(--wash);text-decoration:none}
.s-weiter:hover{background:var(--tone)}
.s-weiter span{font-size:var(--t-small);font-weight:700;color:var(--muted)}
.s-weiter b{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:740}
.s-weiter em{font-style:normal;font-size:var(--t-small);line-height:1.4}
ul.punkte{list-style:disc;padding-left:1.3em;display:flex;flex-direction:column;gap:8px}
.lesespalte ul.punkte{margin:14px 0 22px}
.aktivkarte.kueste .k-zahl{display:none}
.aktivkarte.kueste dl{grid-template-columns:minmax(0,1fr)}
.aktivkarte.kueste dt{margin-top:10px}

/* ===== Runde 27: Umrechner (Kubikmeter, Gaskosten), Zwischenüberschriften, Schrittlisten ===== */
.umrechner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);margin-top:28px}
.block.breit>.inhalt>.umrechner{max-width:var(--lese)}
.u-ein{display:flex;flex-direction:column;gap:18px;padding:clamp(20px,2.4vw,32px);background:var(--wash)}
.u-feld label{display:block;font-weight:700;font-size:var(--t-small);margin-bottom:8px}
.u-feld>div{display:flex;align-items:stretch;background:var(--surface);border:2px solid var(--ink)}
.u-feld>div:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.u-feld input{flex:1;min-width:0;min-height:56px;padding:0 16px;border:0;border-radius:0;background:transparent;font:inherit;font-weight:700;font-size:var(--t-statement);color:var(--ink);outline:0}
.u-feld span{display:flex;align-items:center;padding:0 14px;font-size:var(--t-small);font-weight:650;color:var(--muted);white-space:nowrap}
.u-ein p{font-size:var(--t-small);line-height:1.45;color:var(--muted);margin:0}
.u-aus{display:flex;flex-direction:column;padding:clamp(20px,2.6vw,36px);background:var(--night);color:var(--on-night)}
.u-aus>span{font-size:var(--t-small);font-weight:650}
.u-aus>b{font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.04em;font-weight:760;color:var(--paper);margin-top:6px;font-variant-numeric:tabular-nums}
.u-aus>em{font-style:normal;font-size:var(--t-small);line-height:1.4;margin-top:10px}
.u-aus dl{margin-top:auto;padding-top:28px;display:grid;gap:12px}
.u-aus dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.u-aus dt{font-size:var(--t-small);line-height:1.35}
.u-aus dd{font-weight:740;font-size:var(--t-statement);letter-spacing:-.02em;color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
.inhalt h3{font-size:var(--t-statement);line-height:1.2;letter-spacing:-.02em;font-weight:740;margin-top:36px}
.inhalt h3+p{margin-top:10px}
ol.schritte{padding-left:1.4em;display:flex;flex-direction:column;gap:10px}

@media (max-width:1180px){
  .leiste>nav{display:none}
  .menue{display:block}
}
@media (max-width:860px){
  :root{--t-display:clamp(52px,15vw,92px)}
  .leiste>nav{display:none}
  .menue{display:block}
  .kopf-inhalt{grid-template-columns:minmax(0,1fr);row-gap:20px;padding-block:8px 28px}
  .kopf h1{font-size:clamp(34px,10.4vw,72px)}
  .kopfzeile{grid-template-columns:minmax(0,1fr)}
  .uhr-zahl small{display:none}
  .uhr-zahl span{font-size:clamp(20px,6.4vw,48px)}
  .kopf .leiste{padding-block:10px}
  .kopf h1{line-height:.95}
  .uhr{padding:10px 12px}
  .uhr-zahl,.uhr-fuss{margin-top:8px}
  .kopfsatz{font-size:var(--t-body);margin-top:10px}
  .kopfsatz .lang{display:none}
  .kopf .lauf .feld{height:clamp(200px,27svh,420px)}
  .balken{grid-template-columns:minmax(0,8.5em) minmax(0,1fr) max-content;gap:8px 10px;font-size:var(--t-small);margin-top:28px}
  .einzeln .h2,.einzeln .einleitung{grid-column:1/13}
  .treppe.eng{gap:2px;padding-bottom:70px}
  .treppe.eng b{font-size:12px;writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;white-space:nowrap}
  .treppe.eng>div>span{writing-mode:vertical-rl;font-size:12px;left:50%;margin-left:-.6em}
  .felder{grid-template-columns:minmax(0,1fr)}
  .zeitleiste .zl-feld>div{padding:10px 8px}
  .zeitleiste .zl-feld>div:not(.schmal){overflow:hidden}
  .zeitleiste b{font-size:13px;white-space:normal}
  .zeitleiste .schmal b{white-space:nowrap}
  .zeitleiste .schmal b{font-size:13px}
  .zeitleiste span{font-size:12px;white-space:normal}
  .zeitleiste .zl-feld>div:not(.schmal) span{display:block;line-height:1.3;margin-top:4px}
  .zeitleiste .schmal span{white-space:nowrap}
  .stufentreppe{grid-template-columns:minmax(0,1fr)}
  .stufentreppe li,.stufentreppe .s2,.stufentreppe .s3{min-height:0}
  .schnitt{grid-template-columns:minmax(0,1fr)}
  .einbett-uhr{grid-template-columns:minmax(0,1fr)}
  .nachtband .h2,.nachtband .einleitung,.nachtband .anleitung{grid-column:1/13}
  .punktebild{margin-top:32px;column-gap:6px}
  .punktebild .feld{height:clamp(320px,46svh,460px)}
  .punktebild .apunkt{width:30px;height:30px}
  .punktebild .yachse.rechts{display:none}
  .punktebild{grid-template-columns:auto minmax(0,1fr)}
  .punktebild .tipp{position:static;width:auto;margin-top:14px}
  .prognose .h2,.prognose .einleitung,.prognose .h3,.prognose .p-hinweis{grid-column:1/13}
  .prognose .p-text{grid-column:1/13;margin-top:36px}
  .treppe{height:300px;gap:4px;padding-bottom:84px;margin-top:32px}
  .treppe b{font-size:var(--t-body)}
  .treppe>div>span{font-size:var(--t-small)}
  .treppe .dl{display:none}
  .treppe .dk{display:inline}
  .treppe{padding-bottom:64px}
  .treppe u span{font-size:13px}
  .stufenliste{grid-template-columns:minmax(0,1fr)}
  .zitat{padding:18px 20px}
  .kopf h1 .zahl{font-size:25vw}
  .kopf .seite{gap:20px;padding-bottom:0}
  .lauf{column-gap:8px}
  .lauf .yachse{width:3.4em}
  .lauf .xachse .lang{display:none}
  .lauf .feld{height:min(92vw,400px)}
  .lauf .schild b{font-size:20px}
  .lauf .schild .lang{display:none}
  .lauf .schild.heute{margin-top:48px}
  .lauf .nadel{width:24px;height:24px}
  .lauf .nadel.zwei{bottom:42px}
  .preise .h2,.preise .einleitung,.preise .h3,.preise .quelle{grid-column:1/13}
  .saeulen,.saeulenachse,.nadelreihe{gap:3px}
  .nadelreihe{min-height:88px}
  .nadelreihe .versetzt{padding-top:28px}
  .nadelreihe .nadel{width:24px;height:24px}
  .saeulen{height:300px;margin-top:72px}
  .saeulenachse .eng{visibility:hidden}
  .preise .h3{margin-top:64px}
  .aussagen li{padding:20px;row-gap:14px}
  .aussagen .nr{grid-column:1/3}
  .aussagen .wann{grid-column:3/13}
  .aussagen .was{grid-column:1/13}
  .kosten{grid-template-columns:minmax(0,1fr)}
  .kosten div{min-height:0;padding:20px;gap:28px}
  .weiter{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .weiter a{min-height:0;padding:20px;gap:14px;font-size:20px}
  .block h2,.block .inhalt{grid-column:1/13}
  .block h2{margin-bottom:16px}
  .lesetext .h2{grid-column:1/13}
  .lesetext .spalten2{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  .bildzeile,.einbettliste{grid-template-columns:minmax(0,1fr)}
  .zeitbild{margin-top:48px}
  .zeitbild .schild{display:none}
  .zeitbild .preisband{height:90px}
  .blick .h2,.blick .blicktext,.blick .tabelle{grid-column:1/13;grid-row:auto}
  .blick .tabelle{margin-top:28px}
  .blick table.worte tr{display:flex;justify-content:space-between;gap:16px}
  .r-regler,.r-ergebnis,.r-bild,.r-hinweis{grid-column:1/13;grid-row:auto}
  .r-regler,.r-ergebnis{padding:20px}
  .r-bild .feld{height:300px;min-height:0}
  .rechner2{margin-top:28px}
  .block.breit .inhalt{margin-top:0}
  .rechner{grid-template-columns:minmax(0,1fr)}
  .themenzeile{gap:6px 20px}
  table.worte thead{display:none}
  table.worte,table.worte tbody,table.worte tr,table.worte td{display:block}
  table.worte tr{padding:14px 0;border-bottom:1px solid #cfd8e3}
  table.worte td{border:0;padding:2px 0}
  table.worte td:first-child{font-weight:700}
  .lauf .schild.ziel .lang{display:none}
  .lauf .xachse .gerade{display:none}
  .stufen .k1{grid-column:1/13;height:auto;min-height:56vw;margin:0}
  .stufen .k2{grid-column:1/7;grid-row:3;margin-top:0;height:auto;min-height:52vw}
  .stufen .k3{grid-column:7/13;grid-row:3;margin-top:32px;height:auto;min-height:52vw}
  .stufen .kachel{padding:20px}
  .stufen .kachel p{font-size:var(--t-small)}
  .stufen .h2{grid-column:1/13;grid-row:1;margin-bottom:24px;max-width:none}
  .stufen .k1{grid-row:2}
  .mitnehmen .h2,.platte,.wahl{grid-column:1/13}
  .mitnehmen .h2{margin-bottom:28px}
  .wahl{margin-top:28px;gap:28px}
  .zellen button{min-height:60px}
  .reichweite .h2,.reichweite .einleitung{grid-column:1/13}
  .reichweite .einleitung{margin-top:20px}
  .faecher{flex-direction:column;height:auto;margin-top:40px}
  .faecher button{min-height:64px;flex:none}
  .faecher button[aria-expanded="true"]{flex:none}
  .faecher .name{position:static;transform:none;display:block;padding:20px}
  .faecher button[aria-expanded="true"] .name{display:none}
  .faecher .innen{position:static;min-width:0;display:none;padding:20px;gap:20px}
  .faecher button[aria-expanded="true"] .innen{display:flex}
  .regler label,.regler input{grid-column:1/13}
  .regler output{font-size:var(--t-body);line-height:1.5}
  .staende .h2,.staende .einleitung{grid-column:1/13}
  .reihe{grid-template-columns:repeat(2,minmax(0,1fr));height:auto;row-gap:28px;margin-top:40px}
  .reihe figure{height:300px}
  .unterzeilen{display:none}
  .reihe figcaption em{display:block;font-style:normal;margin-top:4px;font-size:var(--t-small);color:var(--muted)}
  .tage .h2,.tage .einleitung{grid-column:1/13}
  .tage .einleitung{margin-top:20px}
  th,td{padding:12px 5px;font-size:var(--t-small)}
  td.balken,th.balken{display:none}
  .fragen .h2{grid-column:1/13;position:static;margin-bottom:28px}
  .fragen .liste{grid-column:1/13;gap:6px}
  summary{min-height:64px;padding:12px 20px}
  details p{padding:0 20px 20px;font-size:16px}
  .bau{height:22svh;min-height:130px;gap:3px}
  .bau span{font-size:5.2vw}
  .fuss .spalten ul{grid-column:span 6}
}
@media (min-width:861px){ .reihe figcaption em{display:none} .lauf .schild .kurzform{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lauf svg,.lauf .schild,.live i,.uhr-kopf i{animation:none}
  .js .tritt{opacity:1;transform:none;transition:none}
  .js .blende .bild{clip-path:none;transition:none} .js .blende img{transform:none;transition:none}
  .faecher button,.faecher .innen,.faecher .name{transition:none}
}

@media (max-width:860px){
  .kopf .leiste{padding-block:12px}
  .kopf-inhalt{padding-top:6px}
  .kopfzeile{margin-top:12px}
  .stand{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;min-width:0;padding:8px 12px 10px}
  .stand .uhr-kopf{grid-column:1/-1}
  .stand-zahl{font-size:clamp(40px,10.5vw,64px);margin-top:2px}
  .stand-soll .uhr-fuss{margin-top:8px}
  .sollist{margin-top:0}
  .leerpaar{grid-template-columns:minmax(0,1fr)}
  .leerpaar .balken{grid-template-columns:minmax(0,8.5em) minmax(0,1fr) max-content}
  .felder .gitter{grid-template-columns:repeat(10,minmax(0,1fr))}
  .punktebild,.treppe{margin-top:28px}
}

@media (max-width:860px){
  .kz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kz a{padding:16px}
  .kz b{font-size:var(--t-h3)}
  .aktivkarte{grid-template-columns:minmax(0,1fr)}
  .aktivkarte svg{max-height:none}
  .fa-liste{grid-template-columns:minmax(0,1fr)}
  .abschnitt .h2.mitte{text-align:left;margin-inline:0}
}

@media (max-width:860px){
  .themen{grid-template-columns:minmax(0,1fr)}
  .grafik{padding:14px}
  .lauf .g-titel{font-size:var(--t-body);line-height:1.25}
  .lauf .g-unter{display:none}
  .lauf .g-kopf{margin-bottom:10px}
}

@media (max-width:860px){
  .schlussfeld{grid-template-columns:minmax(0,1fr)}
  .grafik .rechner{grid-template-columns:minmax(0,1fr)}
  .p-spur>u span{font-size:13px}
  .treppe.eng>div>span{writing-mode:vertical-rl;transform:none;left:50%;margin-left:-.6em}
  .treppe.eng{padding-bottom:64px}
}

@media (max-width:860px){
  .umrechner{grid-template-columns:minmax(0,1fr)}
  .u-aus dl>div{flex-direction:column;gap:2px}
}

@media (max-width:480px){
  .p-spur>u span{white-space:normal;width:9.5em;line-height:1.2}
  .p-spur>u.unten.z2 span{top:calc(100% + 62px)}
  .pegelbild{padding-top:86px}
  .p-achse{height:164px}
}

/* Runde 27, Nachträge: Abstand zwischen Kacheln und Langzeit-Grafik auch schmal; Einbett-Code in voller Breite lesbar */
main .kennzahlen .lang-grafik{margin-top:clamp(28px,4vw,48px)}
.grafik textarea{max-width:none;min-height:150px}

/* ===== Runde 29: Zähler in heller Fassung, Seite für Redaktionen ===== */
.einbett-uhr.hell{background:var(--wash);color:var(--ink)}
body.einbett-seite.hell{background:var(--wash);color:var(--ink)}
.einbett-uhr.hell .uhr,.einbett-uhr.hell .stand{background:var(--surface);color:var(--ink)}
.einbett-uhr.hell .uhr-kopf,.einbett-uhr.hell .uhr-fuss,.einbett-uhr.hell .stand .uhr-kopf{color:var(--muted)}
.einbett-uhr.hell .uhr-kopf b,.einbett-uhr.hell .uhr-fuss b,.einbett-uhr.hell .stand-zahl{color:var(--ink)}
.einbett-uhr.hell .uhr-zahl span{background:var(--night);color:var(--paper)}
.einbett-uhr.hell .uhr-zahl span.eilt{background:var(--warn);color:#fff}
.einbett-uhr.hell .uhr-zahl i,.einbett-uhr.hell .uhr-zahl small{color:var(--ink)}
.einbett-uhr.hell .sollist{background:var(--tone)}
.einbett-uhr.hell .sollist u{background:var(--ink)}
.einbett-uhr.hell .e-titel a{color:var(--ink)}
.variante{font-weight:700;font-size:var(--t-small);color:var(--muted);margin:28px 0 8px}
details.code{margin-top:var(--gap)}
details.code summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:var(--wash);font-weight:650;font-size:var(--t-small);cursor:pointer;list-style:none}
details.code summary::-webkit-details-marker{display:none}
details.code summary::after{content:'+';font-weight:700}
details.code[open] summary::after{content:'−'}
details.code summary:hover{background:var(--tone)}
details.code summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
details.code textarea{display:block;width:100%;max-width:none;margin-top:var(--gap)}
.einbettliste{gap:56px var(--gap);align-items:start}
.einbettliste figure{border:1px solid var(--tone)}
.einbettliste>div>p{margin-top:12px;font-size:var(--t-small);line-height:1.45;color:var(--muted)}

/* Runde 30: Beschriftungen bleiben in ihrer Fläche und stehen nicht ineinander */
.treppe{container-type:inline-size;padding-bottom:84px}
.treppe b{font-size:clamp(12px,calc(100cqw / var(--n,5) * .27),var(--t-h3));white-space:nowrap}
.treppe em{position:static;display:block;margin-top:3px;font-weight:400}
.stufentreppe{container-type:inline-size}
.stufentreppe b{font-size:clamp(22px,3.2cqw,34px)}
.stufentreppe .s2{min-height:340px}
.stufentreppe .s3{min-height:430px}
.zeitbild .preisband i:has(b){z-index:1}
@media (max-width:860px){
  .treppe{padding-bottom:64px}
  .treppe>div>span{font-size:clamp(11px,calc(100cqw / var(--n,5) * .27),var(--t-small))}
  .treppe em{font-size:12px}
  .treppe u span{font-size:12px;white-space:normal;left:0;text-align:right;line-height:1.15}
  .stufentreppe b{font-size:26px}
  .stufentreppe .s2,.stufentreppe .s3{min-height:0}
  .zeitbild .preisband b{left:auto;right:0;font-size:13px}
  .zeitbild .preisband i.nah b{display:none}
  .aktivkarte text{font-size:22px}
  .aktivkarte.kueste circle.kp{r:16px}
}
@media (max-width:600px){
  .balken,.leerpaar .balken{grid-template-columns:minmax(0,1fr) max-content;gap:4px 10px}
  .balken .n{grid-column:1/-1;margin-top:10px}
  .balken .n:first-child{margin-top:0}
}

/* Runde 31: Tabellen und Karten am Handy */
.k-info .knopf{background:var(--accent);color:var(--accent-ink)}
.k-info .knopf:hover{background:#3d6fc4}
.rechner2 output{white-space:nowrap;flex:none}
table.stapel thead{display:none}
table.stapel,table.stapel tbody,table.stapel tr{display:block}
table.stapel tr{padding:12px 0;border-bottom:1px solid #cfd8e3}
table.stapel td{display:flex;justify-content:space-between;gap:16px;border:0;padding:3px 0;text-align:right}
table.stapel td:first-child{display:block;font-weight:700;text-align:left;padding-bottom:4px}
table.stapel td[data-l]{white-space:nowrap}
table.stapel td[data-l]::before{content:attr(data-l);color:var(--muted);text-align:left;white-space:normal}
table.stapel td.balken{display:none}
@media (max-width:860px){
  table.worte td[data-l]::before{content:attr(data-l) ": ";color:var(--muted)}
  .lauf .schild.nurbreit{display:none}
  .lang-grafik .schild{padding:2px 6px}
  .lang-grafik .schild b{font-size:15px}
  .lang-grafik .schild span{font-size:12px}
}
@media (max-width:600px){
  th,td{padding:12px 8px}
  th:first-child,td:first-child{padding-left:4px}
  th:last-child,td:last-child{padding-right:4px}
  table.eng{font-size:15px}
  table.eng th,table.eng td{padding:11px 5px}
}

/* Runde 32: Seitenende als Aufforderung, Einwilligung */
.abschluss{max-width:1100px;margin:clamp(40px,6vw,88px) auto clamp(56px,7vw,104px)}
.ab-haupt{background:var(--night);color:var(--on-night);padding:clamp(24px,4vw,56px)}
.ab-titel{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;font-weight:760;color:#fff;max-width:20ch;text-wrap:balance}
.ab-unter{margin-top:16px;font-size:var(--t-lead);line-height:1.4;max-width:46ch}
.ab-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:32px}
.ab-karte{display:flex;flex-direction:column;padding:20px 20px 18px;background:var(--tone-deep);color:#fff;text-decoration:none;border-top:6px solid #8fb0ea;transition:transform .25s var(--ease),background-color .25s}
.ab-karte:hover,.ab-karte:focus-visible{transform:translateY(-6px);background:#2c477c}
.ab-karte.leer{border-top-color:var(--warn)}
.ab-karte span{font-size:var(--t-small);font-weight:700;color:var(--on-night)}
.ab-karte svg{width:100%;height:60px;margin:12px 0 10px;overflow:visible}
.ab-karte polyline{fill:none;stroke:#8fb0ea;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.ab-karte.leer polyline{stroke:#ff8286}
.ab-karte b{font-size:var(--t-h3);line-height:1;letter-spacing:-.03em;font-weight:760}
.ab-karte.leer b{color:#ff9b9e}
.ab-karte em{font-style:normal;font-size:var(--t-small);margin-top:6px;color:var(--on-night)}
.ab-karte i{font-style:normal;font-weight:700;margin-top:14px}
.ab-karte i::after,.ab-weiter i::after{content:" \2192"}
.ab-fuss{margin-top:28px}
.knopf.rot{background:var(--warn);color:#fff;min-height:64px;padding:0 32px;font-size:var(--t-lead)}
.knopf.rot:hover{background:#bf2f34}
.ab-weiter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 24px;margin-top:var(--gap);padding:clamp(20px,2.6vw,32px) clamp(24px,4vw,56px);background:var(--tone);color:var(--ink);text-decoration:none;transition:background-color .25s}
.ab-weiter:hover{background:#b6c8e6}
.ab-weiter span{grid-column:1/-1;font-size:var(--t-small);font-weight:700;color:var(--muted)}
.ab-weiter b{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:740;text-wrap:balance}
.ab-weiter i{font-style:normal;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:.18em}
.einw{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin-inline:auto;padding:24px;background:var(--night);color:var(--on-night);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.einw-t{font-size:var(--t-statement);line-height:1.15;letter-spacing:-.02em;font-weight:740;color:#fff;margin-bottom:10px}
.einw p{font-size:var(--t-small);line-height:1.5}
.einw a{color:#fff}
.einw-k{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:18px}
.einw-k .knopf{min-height:52px;padding:0 12px}
.einw-neu{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:860px){
  .ab-wahl{grid-template-columns:minmax(0,1fr)}
  .ab-karte{display:grid;grid-template-columns:minmax(0,1fr) 36%;column-gap:16px;align-items:center}
  .ab-karte span,.ab-karte b,.ab-karte em,.ab-karte i{grid-column:1}
  .ab-karte b{margin-top:8px}
  .ab-karte svg{grid-column:2;grid-row:1/5;height:76px;margin:0}
  .ab-weiter{grid-template-columns:minmax(0,1fr)}
  .ab-weiter i{white-space:normal}
  .knopf.rot{width:100%;font-size:var(--t-body);padding:0 16px}
}
.einzeln>.h2+.grafik{max-width:var(--lese);margin-inline:auto;margin-top:36px;width:100%}
@media (min-width:861px){ .ab-karte span{min-height:3em} .ab-karte b{min-height:2em;display:flex;align-items:flex-end} }