:root{--tinte:#0e1a2b;--tinte2:#1b2c44;--papier:#f7f4ef;--sand:#efe7da;--weiss:#fff;--wasser:#1f5fae;--wasser-hell:#7fb8ff;--waerme:#a8301a;--waerme-hell:#ff8a66;--grau:#4a5566;--linie:#d9d2c6;--r:18px;--kopf:64px;
font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--tinte);background:var(--papier);line-height:1.55;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-size:1.0625rem}
img,svg{max-width:100%;display:block}
a{color:var(--wasser);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #f2a900;outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,min(5.2vw,7vh),3.7rem);font-weight:800}
h1 span{display:block;color:var(--wasser)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem);font-weight:800;max-width:24ch}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.rahmen{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.schmal{width:min(780px,100% - 2.5rem)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--tinte);color:#fff;padding:.7rem 1rem;z-index:100;border-radius:8px}
.skip:focus{top:1rem}
.hinweis{background:#ffe9a8;color:#2b2200;font-size:.92rem;padding:.6rem 1.25rem;text-align:center;border-bottom:1px solid #e6c65a}
.hinweis p{margin:0}.hinweis a{color:#2b2200}
.kopf{position:sticky;top:0;z-index:40;background:rgba(247,244,239,.96);border-bottom:1px solid var(--linie);height:var(--kopf)}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1rem}
.marke{display:flex;align-items:center;gap:.6rem;color:var(--tinte);text-decoration:none;font-weight:800;font-size:1.05rem;min-height:44px}
.marke svg{width:30px;height:30px;color:var(--wasser);flex:none}
.marke small{display:block;font-weight:500;font-size:.72rem;color:var(--grau);letter-spacing:.02em}
.navi ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.navi a{display:block;padding:.6rem .75rem;border-radius:10px;color:var(--tinte);text-decoration:none;font-weight:600;font-size:.98rem}
.navi a:hover{background:var(--sand)}
.menue-knopf{display:none;font:inherit;font-weight:700;background:var(--tinte);color:#fff;border:0;border-radius:10px;padding:.6rem 1rem;min-height:44px;cursor:pointer}
@media (max-width:1023px){
 .menue-knopf{display:block}
 .navi{position:absolute;left:0;right:0;top:var(--kopf);background:var(--papier);border-bottom:1px solid var(--linie);box-shadow:0 12px 24px rgba(14,26,43,.12);display:none}
 .navi.offen{display:block}
 .navi ul{flex-direction:column;padding:.5rem 1.25rem 1rem}
 .navi a{padding:.85rem .5rem;border-bottom:1px solid var(--linie);border-radius:0}
}
.dachzeile{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--waerme);margin-bottom:.8rem}
.dunkel .dachzeile{color:var(--waerme-hell)}
.einleitung{font-size:1.15rem;color:var(--grau);max-width:60ch}
.dunkel .einleitung{color:#c8d3e2}
.held{padding:clamp(2.5rem,6vw,5rem) 0 2.5rem}
.held-raster{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (max-width:900px){.held-raster{grid-template-columns:1fr}.kreislauf{max-width:420px}}
.weiche{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:520px){.weiche{grid-template-columns:1fr}}
.weiche-karte{display:block;height:100%;padding:1rem 1.1rem;border-radius:var(--r);background:var(--weiss);border:1px solid var(--linie);color:var(--tinte);text-decoration:none;transition:transform .2s,box-shadow .2s;position:relative}
.weiche-karte:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,26,43,.1)}
.weiche-karte b{display:block;font-size:1.06rem}
.weiche-karte span{display:block;color:var(--grau);font-size:.93rem}
.weiche-karte::after{content:"→";position:absolute;right:1rem;top:1rem;color:var(--wasser);font-weight:800}
.weiche-karte.rot{background:var(--waerme);border-color:var(--waerme);color:#fff}
.weiche-karte.rot span{color:#ffe3da}.weiche-karte.rot::after{color:#fff}
.kreislauf{margin:0}
.kreislauf svg{width:100%;height:auto}
.kreislauf figcaption{font-size:.85rem;color:var(--grau);margin-top:.5rem}
.rohr-bett{fill:var(--weiss);stroke:var(--linie)}
.rohr{fill:none;stroke:#e3ddd2;stroke-width:16;stroke-linecap:round}
.fluss{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:14 22;animation:fliessen 2.4s linear infinite}
.fluss.warm{stroke:var(--waerme)}.fluss.kalt{stroke:var(--wasser)}
@keyframes fliessen{to{stroke-dashoffset:-72}}
.kessel rect{fill:var(--tinte)}.flamme{fill:var(--waerme-hell);transform-origin:74px 186px;animation:flackern 1.6s ease-in-out infinite}
@keyframes flackern{50%{transform:scaleY(.86)}}
.heizkoerper rect{fill:var(--weiss);stroke:var(--tinte);stroke-width:3}.heizkoerper path{stroke:var(--waerme);stroke-width:3}
.haus path{fill:none;stroke:var(--tinte);stroke-width:4;stroke-linejoin:round}.dusche path,.luft circle,.luft path{fill:none;stroke:var(--wasser);stroke-width:3;stroke-linecap:round}.rotor{transform-origin:226px 160px;animation:drehen 3s linear infinite}@keyframes drehen{to{transform:rotate(360deg)}}.t2{animation-delay:.9s}
.tropfen{fill:var(--wasser);animation:tropfen 2.2s ease-in infinite}
@keyframes tropfen{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(40px);opacity:0}}
.kreislauf text{font-size:15px;font-weight:700;fill:var(--grau)}
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin:2.5rem 0 .5rem}
@media (max-width:640px){.zahlen{grid-template-columns:1fr}}
.zahlen div{background:var(--tinte);color:#fff;border-radius:var(--r);padding:1.1rem 1.25rem;display:flex;flex-direction:column-reverse}
.zahlen dt{color:#c8d3e2;font-size:.95rem}
.zahlen dd{margin:0;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.4rem;flex-direction:row-reverse;justify-content:flex-end}
.zahlen small{font-size:.95rem;font-weight:600;color:#c8d3e2}
.quelle{font-size:.85rem;color:var(--grau)}
.dunkel .quelle{color:#c8d3e2}
.abschnitt{padding:clamp(3rem,7vw,5.5rem) 0}
.dunkel{background:var(--tinte);color:#fff}
.dunkel a:not(.knopf){color:var(--wasser-hell)}
.sand{background:var(--sand)}
.reiter{margin:2rem 0}
.reiter-leiste{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.reiter-leiste button{font:inherit;font-weight:700;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:2px solid #3b5274;background:transparent;color:#fff;cursor:pointer}
.reiter-leiste button[aria-selected=true]{background:#fff;color:var(--tinte);border-color:#fff}
.reiter-feld{background:var(--tinte2);border-radius:var(--r);padding:1.4rem 1.5rem}
.schritte{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:.9rem}
.schritte li{counter-increment:s;padding-left:2.9rem;position:relative}
.schritte li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--wasser-hell);color:var(--tinte);font-weight:800;display:grid;place-items:center}
.schritte.warnung li::before{background:var(--waerme-hell)}
.reiter-feld:not([hidden]) .schritte li{animation:rein .35s ease both}
.reiter-feld .schritte li:nth-child(2){animation-delay:.06s}.reiter-feld .schritte li:nth-child(3){animation-delay:.12s}.reiter-feld .schritte li:nth-child(4){animation-delay:.18s}
@keyframes rein{from{transform:translateY(8px)}}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
.breit-links{grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,5vw,4rem)}
@media (max-width:860px){.zwei-spalten,.breit-links{grid-template-columns:1fr}}
.karte{border-radius:var(--r);padding:1.5rem}
.karte.hell{background:#fff;color:var(--tinte)}
.karte.akzent{background:var(--waerme);color:#fff}
.haken{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.haken li{padding-left:1.8rem;position:relative}
.haken li::before{content:"✓";position:absolute;left:0;color:var(--wasser);font-weight:800}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.3rem;border-radius:12px;background:var(--tinte);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--tinte);font:inherit;font-weight:700;cursor:pointer}
.knopf:hover{background:var(--tinte2)}
.dunkel .knopf,.akzent .knopf{background:#fff;color:var(--tinte);border-color:#fff}
.knopf.rand{background:transparent;color:var(--tinte)}
.link-reihe{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 1rem}
.filter{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end;margin:2rem 0 1rem;background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:1.1rem}
@media (max-width:760px){.filter{grid-template-columns:1fr}}
.filter label{display:grid;gap:.35rem;font-weight:700;font-size:.95rem}
select,input,textarea{font:inherit;color:var(--tinte);background:#fff;border:2px solid #8a94a3;border-radius:10px;padding:.6rem .7rem;min-height:48px;width:100%}
textarea{min-height:120px}
.schalter{display:flex!important;grid-auto-flow:column;align-items:center;gap:.6rem;min-height:48px}
.schalter input{width:24px;height:24px;min-height:0;accent-color:var(--wasser)}
.demo-marke{background:#ffe9a8;color:#2b2200;border-radius:10px;padding:.6rem .85rem;font-size:.93rem}
.treffer{font-weight:700}
.liste{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem}
.eintrag{background:#fff;border:1px dashed #8a94a3;border-radius:14px;padding:1rem;animation:rein .3s ease both}
.eintrag h3{font-size:1rem;margin-bottom:.25rem}
.eintrag p{margin:0;color:var(--grau);font-size:.93rem}
.marken{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem;padding:0;list-style:none}
.marken li{font-size:.8rem;font-weight:700;background:var(--sand);border-radius:999px;padding:.15rem .6rem}
.marken li.nd{background:#ffd9cc;color:#7a1c06}
.leer{color:var(--grau)}
.kompass{border:0;padding:0;margin:1.5rem 0 .5rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:640px){.kompass{grid-template-columns:1fr}}
.kompass legend{font-weight:800;font-size:1.15rem;margin-bottom:.75rem;padding:0}
.kompass label{display:flex;gap:.7rem;align-items:center;background:#fff;border:2px solid var(--linie);border-radius:14px;padding:.75rem 1rem;cursor:pointer;min-height:56px}
.kompass label:has(input:checked){border-color:var(--wasser);background:#eaf2ff}
.kompass input{width:24px;height:24px;min-height:0;flex:none;accent-color:var(--wasser)}
.kompass-ergebnis{font-weight:700;min-height:1.6em}
.berufe{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
@media (max-width:1023px){.berufe{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.berufe{grid-template-columns:1fr}}
.beruf{background:#fff;border-radius:var(--r);padding:1.25rem;border:2px solid transparent;transition:border-color .25s,transform .25s,background-color .25s}
.beruf p{color:var(--grau);font-size:.95rem}
.beruf .dauer{display:inline-block;margin:0;font-weight:800;color:var(--tinte);background:var(--sand);border-radius:999px;padding:.2rem .7rem;font-size:.85rem}
.berufe.gewaehlt .beruf{background:var(--papier)}
.berufe.gewaehlt .beruf.treffer-beruf{background:#fff;border-color:var(--wasser);transform:translateY(-4px);box-shadow:0 12px 26px rgba(31,95,174,.18)}
.treffer-beruf h3::after{content:"Passt zu dir";display:block;width:max-content;margin-top:.4rem;font-size:.78rem;background:var(--wasser);color:#fff;border-radius:999px;padding:.15rem .6rem}
.leiter{list-style:none;padding:0;margin:2rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative}
@media (max-width:900px){.leiter{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.leiter{grid-template-columns:1fr}}
.leiter li{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:1.25rem}
.leiter span{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--wasser);color:#fff;font-weight:800;margin-bottom:.8rem}
.leiter p{color:var(--grau);margin:0}
.vorteile{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:520px){.vorteile{grid-template-columns:1fr}}
.vorteile li{background:var(--tinte2);border-radius:var(--r);padding:1.25rem;border-top:4px solid var(--waerme-hell)}
.vorteile p{color:#c8d3e2;margin:0}
.news{list-style:none;padding:0;margin:1.5rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:700px){.news{grid-template-columns:1fr}}
.news li{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:1.25rem}
.news time{font-weight:700;color:var(--waerme);font-size:.9rem}
details{background:#fff;border-radius:14px;margin-bottom:.6rem;border:1px solid var(--linie)}
summary{cursor:pointer;font-weight:700;padding:1rem 3rem 1rem 1.1rem;position:relative;list-style:none;min-height:48px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:1.1rem;top:.85rem;font-size:1.3rem;color:var(--wasser)}
details[open] summary::after{content:"–"}
details p{padding:0 1.1rem 1rem;margin:0;color:var(--grau)}
.formular{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:1.4rem;display:grid;gap:.4rem}
.formular label{font-weight:700;margin-top:.5rem}
.formular .knopf{margin-top:1rem;justify-self:start}
.meldung{margin:.5rem 0 0;font-weight:700;min-height:1.5em}
.meldung.fehler{color:#a3250a}.meldung.ok{color:#1d5b2c}
[aria-invalid=true]{border-color:#a3250a}
.fuss{background:var(--tinte);color:#c8d3e2;padding:2.5rem 0 2rem;font-size:.95rem}
.fuss a{color:#fff}
.fuss-hinweis{background:#ffe9a8;color:#2b2200;border-radius:12px;padding:1rem 1.2rem}
.fuss-hinweis a{color:#2b2200}
.fuss-links{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.fuss-links a{display:inline-block;padding:.5rem 0}
.schnell{display:none}
@media (max-width:767px){
 body{padding-bottom:76px}
 .schnell{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(247,244,239,.97);border-top:1px solid var(--linie)}
 .schnell a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:var(--tinte);color:#fff;font-weight:700;text-decoration:none}
 .schnell a.rot{background:var(--waerme)}
}
.unterseite{padding:3rem 0}