/* mvn.energy v4 — abgenommenes Design (11.09.2026). Farben, Schrift, Radien aus design/ENTSCHEIDUNGEN.md */
@font-face{font-family:"pjs";font-weight:400;font-display:swap;src:url(/schrift/pjs-regular.woff2) format("woff2")}
/* 09.10.2026: 600 und 700 zeigten auf die Regular-Datei — Knöpfe, Kicker und <strong> liefen auf allen Seiten in 400.
   Wix hat nur 400/600/800 (SemiBold als .woff im Klon); 700 bekommt deshalb SemiBold, nicht ExtraBold. */
@font-face{font-family:"pjs";font-weight:600;font-display:swap;src:url(/schrift/pjs-semibold.woff) format("woff")}
@font-face{font-family:"pjs";font-weight:700;font-display:swap;src:url(/schrift/pjs-semibold.woff) format("woff")}
@font-face{font-family:"pjs";font-weight:800;font-display:swap;src:url(/schrift/pjs-extrabold.woff2) format("woff2")}
:root{--petrol:#0f292e;--petrol-tief:#0b1f23;--gruen:#459979;--gruen-text:#2f7a5c;--gruen-hell:#8fd1b3;--gelb:#f5c745;--weiss:#fff;--grau:#f7faf8;--rand:#e6ebe9;--rand-dunkel:rgba(255,255,255,.12);--text:#0f292e;--text-2:#3f5457;--text-3:#7a8c8f;--text-hell:#d7e3df;--text-hell-2:#a9bcb7;--radius:24px;--radius-k:20px;--bahn:1280px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"pjs","Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--gruen-text);text-decoration:none}a:hover{color:var(--text)}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1.wie-h2,h2.wie-h3,h1.wie-h3,h3.wie-h4,h2.wie-h4,h1.wie-h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
h1{font-size:56px;line-height:1.04}h2{font-size:44px}h1.wie-h2{font-size:44px}h3{font-size:24px;line-height:1.25}h2.wie-h3,h1.wie-h3{font-size:24px;line-height:1.25}h4{font-size:20px;line-height:1.3}h3.wie-h4,h2.wie-h4,h1.wie-h4{font-size:20px;line-height:1.3}
p{margin:0}
strong{font-weight:700}
.bahn{width:min(var(--bahn),100% - 40px);margin:0 auto}
.bahn.schmal{max-width:820px}
.ueber{display:block;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gruen-text)}
.dunkel .ueber,.hero.dunkel .ueber{color:var(--gruen-hell)}
.mkopf{display:flex;flex-direction:column;gap:12px;max-width:760px}.mkopf.mitte{align-items:center;text-align:center;margin:0 auto}
.lead{font-size:20px;line-height:1.5;color:var(--text-2)}.dunkel .lead,.hero.dunkel .lead{color:var(--text-hell)}
.sek{padding:84px 0}.sek.text{padding:72px 0}
.sek.dunkel{background:var(--petrol);color:var(--weiss)}.sek.dunkel p{color:var(--text-hell)}.sek.dunkel h2,.sek.dunkel h3{color:var(--weiss)}.sek.dunkel h1.wie-h2,.sek.dunkel h2.wie-h3,.sek.dunkel h1.wie-h3{color:var(--weiss)}
.sek.grau{background:var(--grau)}
.sek p{color:var(--text-2)}
.kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
.kopfzeile .neben{max-width:380px;font-size:16px;line-height:1.5}
.mkopf+.raster,.mkopf+.punkte,.mkopf+p,.mkopf+ul,.mkopf+iframe{margin-top:40px}
.sek.text .bahn{position:relative}.sek.text .sticker.eck{position:absolute;right:-40px;top:-20px}
.sek.text .bahn>p{margin-top:18px;font-size:17px;line-height:1.65}
.sek.text .bahn>p:first-of-type{margin-top:24px}
.sek.text .mkopf+ul.haken,.sek.text p+ul.haken{margin-top:28px}.sek.text ul.haken+p{margin-top:28px}.sek.text ul.haken{margin-top:28px}
/* Knoepfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:17px 30px;border-radius:999px;font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;transition:transform .12s,background .15s}
.knopf:hover{transform:translateY(-1px)}
.knopf.gelb{background:var(--gelb);color:var(--petrol)}.knopf.gelb:hover{background:#f7cf5f;color:var(--petrol)}
.knopf.gruen{background:#459978;color:var(--weiss)}.knopf.gruen:hover{color:var(--weiss);background:#3f8c6e}
.knopf.dunkel{background:var(--petrol);color:var(--weiss)}
.knopf.rand{border-color:var(--rand);color:var(--text)}.knopf.rand-hell{border-color:rgba(255,255,255,.4);color:var(--weiss)}.knopf.rand-hell:hover{color:var(--weiss);background:rgba(255,255,255,.08)}
.knopf.klein{padding:11px 20px;font-size:15px}
.knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.pfeillink{font-weight:700;font-size:15px;color:var(--gruen-text)}
/* Haken-Listen */
ul.haken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
ul.haken li{display:flex;gap:12px;align-items:flex-start;font-size:18px;line-height:1.45}
ul.haken .hk{flex:none;margin-top:3px;color:var(--gruen)}
.dunkel ul.haken .hk,.hero.dunkel ul.haken .hk,.preiskarte.dunkel .hk{color:var(--gelb)}
.hero ul.haken li{color:inherit}
/* Kopfzeile */
.kopf{position:relative;z-index:20;background:var(--weiss);border-bottom:1px solid var(--rand)}
.kopf.dunkel{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0;color:var(--weiss)}
.kb{display:flex;align-items:center;justify-content:space-between;height:88px;position:relative}
.kopf.partner .lockup{display:flex;align-items:center;gap:18px}.kopf.partner .logo svg{width:92px;height:50px;display:block}.kopf.partner .lockup img{height:38px;width:auto}.kopf.partner .mal{font-size:22px;color:var(--text-3)}.kopf.partner.dunkel .lockup img{filter:brightness(0) invert(1)}
.kopf.partner .kr{display:flex;align-items:center;gap:24px}
.kopf.partner .pn ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}.kopf.partner .pn a{font-size:15px;font-weight:600;color:var(--text)}.kopf.partner.dunkel .pn a{color:var(--weiss)}
.kopf .logo{display:block;width:104px;height:56px}.kopf .logo svg{width:100%;height:100%;display:block}
.nd>ul{list-style:none;margin:0;padding:0;display:flex;gap:36px}
.nd .ng{position:relative;display:flex;align-items:center;gap:6px;height:88px}
.nd .ng>a{font-size:15px;font-weight:600;color:inherit;white-space:nowrap}
.nd .ng .pfeil{color:inherit;opacity:.7}
.nd .ng:hover>a,.nd .ng.hier>a{color:var(--gruen-text)}.kopf.dunkel .nd .ng:hover>a,.kopf.dunkel .nd .ng.hier>a{color:var(--gruen-hell)}
.nd .feld{position:absolute;left:-14px;top:74px;margin:0;padding:8px 0;list-style:none;min-width:240px;background:var(--weiss);border-radius:16px;box-shadow:0 16px 40px rgba(15,41,46,.14);display:none;z-index:30}
.nd .ng:hover .feld,.nd .ng:focus-within .feld{display:block}
.nd .feld a{display:block;padding:10px 20px;font-size:15px;font-weight:600;color:var(--text);white-space:nowrap}.nd .feld a:hover,.nd .feld a[aria-current]{color:var(--gruen-text)}
.kr{display:flex;align-items:center;gap:12px}
.kopf .login{font-size:15px;font-weight:600;color:inherit;padding:10px 16px;border:1px solid transparent;border-radius:999px}.kopf.dunkel .login{border-color:rgba(255,255,255,.35)}
.kopf{position:sticky;top:0;transition:box-shadow .2s,background .2s}.kopf.fest{box-shadow:0 8px 30px rgba(15,41,46,.08)}
.kopf .logo .l-w,.kopf .logo .l-f{display:block;width:100%;height:100%}.kopf .logo .l-f{display:none}
.kopf.dunkel.fest{position:fixed;background:var(--weiss);color:var(--text);border-bottom:1px solid var(--rand)}
.kopf.dunkel.fest .logo .l-w{display:none}.kopf.dunkel.fest .logo .l-f{display:block}
.kopf.dunkel.fest .login{border-color:var(--rand)}.kopf.dunkel.fest .nd .ng:hover>a,.kopf.dunkel.fest .nd .ng.hier>a{color:var(--gruen-text)}
.kopf.partner.dunkel.fest .lockup img{filter:none}.kopf.partner.dunkel.fest .pn a{color:var(--text)}
.text-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:64px;align-items:start}
.text-raster.erk{grid-template-columns:460px minmax(0,1fr);gap:56px}.text-raster.erk.ohne-kopf{grid-template-columns:minmax(0,1fr)}.erk .text-links{position:sticky;top:104px}.erk .mkopf h2{font-size:36px;overflow-wrap:anywhere}.erk .mkopf h1.wie-h2{font-size:36px;overflow-wrap:anywhere}.erk .mkopf h1{font-size:44px;overflow-wrap:anywhere}
.erk .text-rechts{display:flex;flex-direction:column;gap:14px;min-width:0}.erk .text-rechts>p{font-size:17px;line-height:1.6;margin:0}.erk .text-rechts>ul.haken{margin:0}
.erk .lese.fliess{gap:12px;margin-top:0}.erk .lese.fliess>p,.erk .lese.fliess>p:first-of-type{font-size:17px;line-height:1.6;color:var(--text-2)}.erk .lese.fliess h2{font-size:24px;margin-top:14px}.erk .lese.fliess h1.wie-h2{font-size:24px;margin-top:14px}.erk .lese.fliess h3{font-size:19px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--text);margin-top:14px}.erk .lese.fliess h2.wie-h3,.erk .lese.fliess h1.wie-h3{font-size:19px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--text);margin-top:14px}/* Malina #878/#879: nicht in Grossbuchstaben, nur fett (vorher 14 px Versalien gruen) */.erk .lese.fliess h4{font-size:17px;margin-top:6px}nur fett (vorher 14 px Versalien gruen) */.erk .lese.fliess h3.wie-h4,nur fett (vorher 14 px Versalien gruen) */.erk .lese.fliess h2.wie-h4,nur fett (vorher 14 px Versalien gruen) */.erk .lese.fliess h1.wie-h4{font-size:17px;margin-top:6px}.erk .lese ul,.erk .lese ol{line-height:1.5;font-size:17px}.erk .lese li{margin:2px 0}.erk .lese img{max-width:520px!important}.erk .knoepfe{margin-top:12px}.erk .lese .chips{margin-bottom:0}
.dunkel .erk .lese.fliess h3{color:var(--weiss)}
.dunkel .erk .lese.fliess h2.wie-h3,.dunkel .erk .lese.fliess h1.wie-h3{color:var(--weiss)}.dunkel .erk .text-rechts>p,.dunkel .erk .lese.fliess>p,.dunkel .erk .lese.fliess>p:first-of-type{color:var(--text-hell)}
.text-links{display:flex;flex-direction:column;gap:22px}.text-links .lese.fliess{margin-top:0}.text-links .knoepfe{margin-top:4px}
.listenkarte{padding:0;border:0;background:transparent;display:flex;flex-direction:column;gap:6px;position:sticky;top:104px}.listenkarte ul.haken{gap:0}.listenkarte ul.haken li{padding:18px 0;border-top:1px solid var(--rand);font-size:17px}.listenkarte ul.haken li:last-child{border-bottom:1px solid var(--rand)}
.listenkarte h3{font-size:19px}
.listenkarte h2.wie-h3,.listenkarte h1.wie-h3{font-size:19px}.listenkarte ul.haken{margin:0}.listenkarte ul.haken li{font-size:16px;line-height:1.55}
.dunkel .listenkarte ul.haken li{border-color:var(--rand-dunkel)}.dunkel .listenkarte h3{color:var(--weiss)}.dunkel .listenkarte h2.wie-h3,.dunkel .listenkarte h1.wie-h3{color:var(--weiss)}.dunkel .listenkarte ul.haken li{color:var(--text-hell)}
.kontakt-raster.eins{grid-template-columns:minmax(0,1fr)}.kontakt-personen{display:flex;flex-direction:column;gap:14px}.kontakt-personen .person{padding:22px}.kontakt-personen .person img{width:96px;height:96px}
.formkarte.nackt{padding:0;background:transparent;border:0;box-shadow:none}.formkarte.nackt iframe{border-radius:0}
.kz-rechts{display:flex;align-items:center;gap:20px}
.kpfeile{display:flex;gap:10px}.kpfeil{width:44px;height:44px;border-radius:50%;border:1px solid var(--rand);background:var(--weiss);color:var(--text);font:inherit;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px}.kpfeil:hover{border-color:var(--gruen);color:var(--gruen-text)}.kpfeil:disabled{opacity:.35;cursor:default}
.beitraege.karussell{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}.beitraege.karussell::-webkit-scrollbar{display:none}
.beitraege.karussell .beitrag{flex:0 0 calc((100% - 56px)/3);scroll-snap-align:start}
.kpunkte{display:flex;gap:8px;justify-content:center;margin-top:28px}.kpunkte span{width:8px;height:8px;border-radius:999px;background:var(--rand);transition:width .2s}.kpunkte span.aktiv{background:var(--gruen);width:24px}
.dunkel a:hover,.bk-text a:hover,.hero a:hover,.stimmen a:hover{color:var(--weiss)}a.sticker{text-decoration:none;color:inherit}h1[id],h2[id],h3[id]{scroll-margin-top:110px}h1.wie-h2[id],h2.wie-h3[id],h1.wie-h3[id]{scroll-margin-top:110px}
.menue-schalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.burger,.nm{display:none}
/* Hero */
.hero{position:relative;overflow:hidden}
.hero.dunkel{background:var(--petrol-tief);color:var(--weiss);min-height:640px;display:flex;flex-direction:column;justify-content:center;padding-top:88px}
.hero .hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 35%}
.hero .schleier{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,31,35,.9) 0%,rgba(11,31,35,.55) 18%,rgba(11,31,35,0) 40%),linear-gradient(90deg,rgba(11,31,35,.96) 0%,rgba(11,31,35,.86) 42%,rgba(11,31,35,.35) 70%,rgba(11,31,35,.15) 100%)}
.hero.dunkel .hero-inhalt{position:relative;display:flex;flex-direction:column;gap:24px;padding:56px 0 48px;max-width:860px;margin-left:calc((100% - min(var(--bahn),100% - 40px))/2)}
.hero.dunkel h1{color:var(--weiss);font-size:64px}
.hero.dunkel .sticker{position:absolute;right:0;top:40px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:10px 16px;border-radius:999px;border:1px solid var(--rand);color:var(--text)}
.hero.dunkel .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--weiss)}.chip .hk{width:16px;height:16px;margin:0;color:var(--gelb)}
.chip.aktiv{background:var(--petrol);color:var(--weiss);border-color:var(--petrol)}.chip.aktiv .x{font-weight:400;opacity:.75;margin-left:2px}
.kennzahlen{position:relative;display:flex;margin-top:auto;border-top:1px solid rgba(255,255,255,.14)}
.kennzahlen>div{flex:1;display:flex;flex-direction:column;gap:4px;padding:22px 0}.kennzahlen>div+div{border-left:1px solid rgba(255,255,255,.14);padding-left:32px}
.kennzahlen .zahl{font-size:30px;font-weight:800;color:var(--weiss)}.kennzahlen .was{font-size:14px;color:var(--text-hell-2)}
.kennzahlen.klein{display:flex;gap:28px;margin-top:0;padding-top:22px;border-top:1px solid var(--rand);font-size:14px;color:var(--text-2)}.kennzahlen.klein strong{color:var(--text)}
.hero.hell{padding:80px 0 64px;background:var(--weiss)}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.hero.hell .hero-inhalt{display:flex;flex-direction:column;gap:26px}
.hero.hell h1{font-size:52px}
.hero-bild{position:relative}.hero-bild img{width:100%;height:600px;object-fit:cover;border-radius:28px}
.hero-bild .sticker{position:absolute;right:28px;top:28px}
.sticker{width:148px;height:148px;border-radius:50%;background:linear-gradient(135deg,var(--gelb) 0%,var(--gruen) 100%);color:var(--weiss);display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:700;line-height:1.25;padding:18px;transform:rotate(10deg);box-shadow:0 14px 34px rgba(15,41,46,.22)}
/* Presse */
.presse{padding:26px 0;border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.presse .bahn{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap}
.presse .ueber{color:var(--text-3)}.presse img{height:30px;width:auto;opacity:.9}.presse:not(.dunkel) img{height:44px;opacity:1}.presse:not(.dunkel) .plogo svg{height:40px}.presse img.weiss{filter:invert(.75);opacity:.85}.presse.dunkel img.weiss{filter:none}.presse.dunkel img:not(.weiss){filter:brightness(0) invert(1);opacity:.85}
.presse.dunkel{background:var(--petrol);border-color:rgba(255,255,255,.08)}.presse.dunkel .ueber{color:#8fa3a0}
/* Raster + Karten */
.raster{display:grid;gap:24px}.raster.s3{grid-template-columns:repeat(3,minmax(0,1fr))}.raster.s2{grid-template-columns:repeat(2,minmax(0,1fr))}.raster.s4{grid-template-columns:repeat(4,minmax(0,1fr))}.raster.s5{grid-template-columns:repeat(5,minmax(0,1fr))}
.karte{display:flex;flex-direction:column;gap:16px;padding:36px;border:1px solid var(--rand);border-radius:var(--radius);background:var(--weiss)}
.karte .kbild{width:52px;height:52px;object-fit:contain;border-radius:16px}
.karte .symbol{width:52px;height:52px;border-radius:14px;background:#e8f3ee;color:var(--gruen-text);display:grid;place-items:center}.karte .symbol svg{width:28px;height:28px;display:block}.karte .symbol svg *{fill:currentColor}.karte .symbol svg [fill="none"]{fill:none}.karte .symbol svg [stroke]{stroke:currentColor}.dunkel .karte .symbol{background:rgba(255,255,255,.08);color:var(--gruen-hell)}
.karte .ueber{font-size:13px;color:var(--text-3)}
.karte ul.haken li{font-size:16px;color:var(--text-2)}
.kfuss{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:18px;border-top:1px solid var(--rand)}
.kfuss .preis{font-size:20px;font-weight:800;color:var(--text)}
.dunkel .karte{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel)}.dunkel .karte .ueber{color:var(--gruen-hell)}.dunkel .karte ul.haken li{color:var(--text-hell)}.dunkel .kfuss{border-color:var(--rand-dunkel)}.dunkel .kfuss .preis{color:var(--weiss);font-size:26px}
/* Listen-Modul */
.liste-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.liste-kopf{display:flex;flex-direction:column;gap:16px;position:sticky;top:40px}.liste-kopf .knopf{align-self:flex-start;margin-top:8px}
ol.punkte{list-style:none;margin:0;padding:0}ol.punkte li{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--rand)}ol.punkte li:last-child{border-bottom:1px solid var(--rand)}
.zaehler{flex:none;width:40px;height:40px;border-radius:12px;background:#eaf5ef;color:var(--gruen-text);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.zaehler .hk{margin:0}
ol.punkte p,.liste-karten .karte p{font-size:17px;line-height:1.55;color:var(--text)}
.liste-karten .karte{padding:30px;gap:14px}.liste-karten .karte p{color:var(--text-hell)}
.karte.handlung{background:var(--gelb);color:var(--petrol);border-color:var(--gelb);justify-content:center}.karte.handlung .h3{font-size:20px;font-weight:800;line-height:1.25}.karte.handlung .h2.wie-h3,.karte.handlung .h1.wie-h3{font-size:20px;font-weight:800;line-height:1.25}.karte.handlung p{color:var(--petrol)}.karte.handlung .knopf{align-self:flex-start;background:var(--petrol);color:var(--weiss)}
.dunkel .karte.handlung{background:var(--petrol);color:var(--weiss);border:1px solid var(--rand-dunkel)}.dunkel .karte.handlung p{color:var(--text-hell)}.dunkel .karte.handlung .knopf{background:var(--gelb);color:var(--petrol)}
/* Bild neben Text */
.paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.paar>img{width:100%;height:460px;object-fit:cover;border-radius:28px}.paar.getauscht>img{order:2}
.paar .fluss{display:flex;flex-direction:column;gap:20px}.paar .fluss p{font-size:17px;line-height:1.65}
.bildkarte.dunkel{background:var(--petrol)}.bk{display:grid;grid-template-columns:1.05fr 1fr;border-radius:28px;overflow:hidden;background:var(--petrol);color:var(--weiss);min-height:440px}.bk-text{padding:56px 52px;display:flex;flex-direction:column;gap:18px;justify-content:center}.bk-text .mkopf h2{color:var(--weiss)}.bk-text .mkopf h1.wie-h2{color:var(--weiss)}.bk-text p{color:var(--text-hell);font-size:17px;line-height:1.65}.bk-text ul.haken li{color:var(--text-hell)}.bk-fuss{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}.bk-fuss .notiz{margin:0;color:#a9bab7}.bk img{width:100%;height:100%;object-fit:cover;min-height:320px}.bildkarte.dunkel .bk{background:var(--petrol-tief)}
.bildband{min-height:0;padding:0}.bildband .hero-inhalt{padding:96px 0}
/* Schritte */
.schritte .karte{padding:32px;gap:14px;border-radius:var(--radius-k)}
.schritte .nummer{font-size:56px;line-height:1;font-weight:800;color:var(--gruen);letter-spacing:-.03em}
.schritte .karte p{font-size:16px;line-height:1.55}
/* Preis */
.preiskarte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;border-radius:32px;border:1px solid var(--rand);background:var(--grau);padding:64px}
.preiskarte.dunkel{background:var(--petrol);color:var(--weiss);border-color:var(--petrol)}
.sek.dunkel .preiskarte:not(.dunkel){color:var(--text)}.sek.dunkel .preiskarte:not(.dunkel) h2,.sek.dunkel .preiskarte:not(.dunkel) .et{color:var(--text)}.sek.dunkel .preiskarte:not(.dunkel) h1.wie-h2{color:var(--text)}.sek.dunkel .preiskarte:not(.dunkel) p{color:var(--text-2)}.sek.dunkel .preiskarte:not(.dunkel) .ueber{color:var(--gruen-text)}.sek.dunkel .preiskarte:not(.dunkel) .hk{color:var(--gruen)}
.enthalten{align-self:start}
.preiskarte.dunkel p,.preiskarte.dunkel .lead{color:var(--text-hell)}.preiskarte.dunkel h2{color:var(--weiss)}.preiskarte.dunkel h1.wie-h2{color:var(--weiss)}.preiskarte.dunkel .ueber{color:var(--gruen-hell)}
.preis-links{display:flex;flex-direction:column;gap:18px}.preis-links .knopf{align-self:flex-start;margin-top:8px}
.preiszeile{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:8px}
.preiszeile .gross{font-size:72px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--gruen-text)}.preiskarte.dunkel .gross{color:var(--weiss)}
.preiszeile .vorher{font-size:26px;font-weight:700;color:#b9931f;text-decoration:line-through;text-decoration-thickness:2px}.preiskarte.dunkel .vorher{color:var(--gelb)}
.preiszeile .einheit{font-size:17px;color:var(--text-2);margin-left:10px}.preiskarte.dunkel .preiszeile .einheit{color:var(--text-hell)}
.bausteine{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:22px}.baustein{padding:10px 16px;border-radius:12px;border:1px solid var(--rand);font-weight:700;font-size:15px;background:var(--weiss)}.preiskarte.dunkel .baustein{border-color:var(--rand-dunkel);background:rgba(255,255,255,.06);color:var(--weiss)}.bausteine .plus{font-weight:800;font-size:20px;color:var(--gruen)}
.preis-links .fussnote{font-size:13px;line-height:1.5;color:var(--text-3)}.preiskarte.dunkel .fussnote{color:#8fa3a0}
.enthalten{display:flex;flex-direction:column;gap:14px;padding:36px;border-radius:var(--radius);background:var(--weiss);border:1px solid var(--rand)}
.preiskarte.dunkel .enthalten{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel)}
.enthalten .et{font-size:16px;font-weight:700}.enthalten ul.haken li{font-size:16px;color:var(--text-2)}.preiskarte.dunkel .enthalten ul.haken li{color:var(--text-hell)}
/* Kundenstimmen */
.stimmen .kopfzeile{align-items:center}.stimmen .siegel{height:56px;width:auto;background:var(--weiss);border-radius:999px;padding:8px 14px}
.stimmen .karte{padding:32px}.stimmen .sterne{color:var(--gelb);letter-spacing:2px;font-size:16px}
.stimmen .karte p{font-size:17px;line-height:1.6;color:var(--weiss)}
.stimmen .wer{display:flex;flex-direction:column;gap:2px;margin-top:auto}.stimmen .name{font-weight:700}.stimmen .quelle{font-size:13px;color:var(--text-hell-2)}
/* FAQ */
.faq-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.faq-kopf{position:sticky;top:40px}
.antwort ul.haken{margin:8px 0 12px}.antwort ul.haken li{font-size:15px}.antwort h4{margin:10px 0 4px;font-size:16px}.antwort h3.wie-h4,.antwort h2.wie-h4,.antwort h1.wie-h4{margin:10px 0 4px;font-size:16px}
.fragen details{border-top:1px solid var(--rand)}.fragen details:last-of-type{border-bottom:1px solid var(--rand)}
.fragen summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;cursor:pointer;list-style:none;font-size:19px;font-weight:800;color:var(--text)}
.fragen summary::-webkit-details-marker{display:none}.fragen summary svg{flex:none;color:var(--gruen)}.fragen details[open] summary svg{transform:rotate(180deg)}
.fragen .antwort{padding:0 0 24px;display:flex;flex-direction:column;gap:12px}.fragen .antwort p{font-size:16px;line-height:1.6}
.fragen .nach{margin-top:24px;font-size:16px}.fragen .nach+.nach{margin-top:8px}.fragen .nach a{font-weight:700}
/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.kontakt-text{display:flex;flex-direction:column;gap:22px}.kontakt-text p{font-size:17px;line-height:1.65}
.kontakt-bild{width:100%;max-height:360px;object-fit:cover;border-radius:var(--radius-k);margin-top:8px}
.dunkel .knopf.rand,.hero.dunkel .knopf.rand{color:var(--weiss);border-color:rgba(255,255,255,.55)}.dunkel .knopf.rand:hover{background:rgba(255,255,255,.1);color:var(--weiss)}
.person{display:flex;align-items:center;gap:18px;padding:20px;border-radius:var(--radius-k);background:var(--weiss);border:1px solid var(--rand)}
.person img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none}.person>div{display:flex;flex-direction:column;gap:4px}
.person .name{font-size:17px;font-weight:800}.person .rolle{font-size:14px;color:var(--text-2)}.person .tel{font-size:16px;font-weight:700}
.formkarte{padding:12px;border-radius:var(--radius);background:var(--weiss);border:1px solid var(--rand);box-shadow:0 14px 40px rgba(15,41,46,.06)}
.formkarte iframe,.einbettung iframe{width:100%;border:0;display:block;border-radius:16px}.eb-rahmen{background:#f3f6f5;border:1px solid var(--rand);border-radius:var(--radius);padding:48px}.eb-rahmen .mkopf.mitte{max-width:760px;margin:0 auto 32px;text-align:center}
/* Band */
.band{padding:40px 0}.band-zeile{display:flex;align-items:center;justify-content:space-between;gap:32px}
.band .h3{font-size:24px;font-weight:800;line-height:1.25;display:block}
.band .h2.wie-h3,.band .h1.wie-h3{font-size:24px;font-weight:800;line-height:1.25;display:block}.band .knoepfe{margin:0}.band-rechts{display:flex;align-items:center;gap:16px;flex:none}.band .sticker.pille{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;line-height:1.2;text-align:center}.band .notiz{margin-top:10px;font-size:13px;color:#8fa3a0}
/* Ratgeber + Artikel */
.ratgeber .chips{margin-top:36px}.ratgeber .beitraege{margin-top:36px;gap:28px}
.beitrag{display:flex;flex-direction:column;gap:14px}.beitrag img{width:100%;height:240px;object-fit:cover;border-radius:var(--radius-k)}
.beitrag .kat{font-size:13px;font-weight:600;color:var(--gruen-text)}.beitrag h3{font-size:22px}.beitrag h2.wie-h3,.beitrag h1.wie-h3{font-size:22px}.beitrag h3 a{color:var(--text)}.beitrag h2.wie-h3 a,.beitrag h1.wie-h3 a{color:var(--text)}.beitrag p{font-size:15px;line-height:1.55}.beitrag .meta{font-size:13px;color:var(--text-3)}
.artikel{padding:72px 0 96px}
.lese .cover{width:100%;max-height:460px;object-fit:cover;border-radius:var(--radius)}
.lese .chips{margin-bottom:6px}.lese .chips .chip{font-size:14px;padding:8px 14px}
.lese h4{font-size:19px}
.lese h3.wie-h4,.lese h2.wie-h4,.lese h1.wie-h4{font-size:19px}
.karten{position:relative}.karten .kopfzeile.lang{margin-bottom:20px}.karten .vorspann{max-width:1100px;margin-bottom:40px}.karten .vorspann p{font-size:17px;line-height:1.65;margin-top:12px}.karten.dunkel .vorspann p{color:var(--text-hell)}.karten .vorspann p.leicht strong{font-weight:inherit}.karten .sticker.eck{position:absolute;right:24px;top:-30px;z-index:1}
.karte .badge{display:inline-block;margin:-6px 0 12px;padding:6px 12px;border-radius:999px;background:var(--gelb);color:var(--petrol);font-size:13px;font-weight:700}
.kfuss .preis small{display:block;font-size:12px;font-weight:400;color:var(--text-3)}.dunkel .kfuss .preis small{color:#8fa3a0}
.karten-nach{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px;margin-top:36px}.karten-nach p{margin:0;font-size:16px}.karten-nach .logos{display:flex;gap:18px;align-items:center}.karten-nach .logos img{height:32px;width:auto;filter:brightness(0);opacity:.6}.karten.dunkel .karten-nach .logos img{filter:none;opacity:.9}.person+.person{margin-top:12px}
.schritte .nachtext{margin-top:28px;font-size:15px;line-height:1.6;color:var(--text-2);max-width:900px}
.bildtext figure{margin:0;position:relative;background:#f3f6f5;border:1px solid var(--rand);border-radius:24px;padding:18px;box-shadow:0 20px 50px rgba(15,41,46,.08)}.bildtext figure img{border-radius:16px}.dunkel .bildtext figure{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel);box-shadow:none}.bildtext figure .sticker{position:absolute;right:-20px;top:-30px;z-index:1}.bildtext figcaption{margin-top:12px;font-size:14px;color:var(--text-3);text-align:center}
.hero-inhalt .sticker.flach{position:static;transform:rotate(0);width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;align-self:flex-start;margin-top:14px}
.lead.zwei{margin-top:-8px;font-size:17px}.liste-nach{margin-top:28px;font-size:16px;color:var(--text-2);max-width:820px}.liste-karten .nachtext{margin-top:24px;color:var(--text-hell);font-size:16px}
.notiz{margin-top:14px;font-size:14px;color:var(--text-3)}.hero.dunkel .notiz,.stimmen .notiz{color:#a9bab7}
.lese.fliess{max-width:none;margin-top:24px}.lese.fliess>p{font-size:17px;line-height:1.65}.lese.fliess>p:first-of-type{font-size:17px;color:var(--text-2)}.lese.fliess h2{font-size:26px}.lese.fliess h1.wie-h2{font-size:26px}.lese.fliess h3{font-size:21px}.lese.fliess h2.wie-h3,.lese.fliess h1.wie-h3{font-size:21px}.lese.fliess ul,.lese.fliess ol{font-size:17px}.dunkel .lese.fliess>p,.dunkel .lese.fliess ul,.dunkel .lese.fliess ol{color:var(--text-hell)}
.preiskarte .badge{display:inline-block;margin-bottom:10px;padding:6px 12px;border-radius:999px;background:var(--gelb);color:var(--petrol);font-size:13px;font-weight:700}.preis-links .extra{margin-top:18px;font-size:15px}.preis-links .logos{display:flex;gap:16px;align-items:center;margin-top:14px}.preis-links .logos img{height:28px;width:auto;filter:brightness(0);opacity:.6}.preiskarte.dunkel .logos img{filter:none;opacity:.9}
.preistabelle table.preise{width:100%;border-collapse:collapse;margin-top:32px;font-size:17px}.preistabelle td,.preistabelle th{padding:14px 0;border-bottom:1px solid var(--rand);text-align:left}.preistabelle th{padding-top:28px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen-text)}.preistabelle td.p{text-align:right;font-weight:800;white-space:nowrap}.preistabelle .nach{margin-top:20px;font-size:15px;color:var(--text-2)}.preistabelle.dunkel td,.preistabelle.dunkel th{border-color:var(--rand-dunkel)}
.karten .fussnote{margin-top:22px;font-size:13px;line-height:1.5;color:var(--text-3)}.karten.dunkel .fussnote{color:#8fa3a0}
.preiskarte{position:relative}.preiskarte .sticker{position:absolute;right:48px;top:-28px}
.beitrag .autor-zeile{font-size:12px;color:var(--text-3)}
.beitrag p.abgeschnitten::after{content:"…"}
.lese h2.als-absatz,.lese h3.als-absatz{font-size:18px;line-height:1.7;font-weight:400;margin:0;color:var(--text-2)}
.lese h1.wie-h2.als-absatz,.lese h2.wie-h3.als-absatz,.lese h1.wie-h3.als-absatz{font-size:18px;line-height:1.7;font-weight:400;margin:0;color:var(--text-2)}.dunkel .lese h2.als-absatz,.dunkel .lese h3.als-absatz{color:var(--text-hell)}.dunkel .lese h1.wie-h2.als-absatz,.dunkel .lese h2.wie-h3.als-absatz,.dunkel .lese h1.wie-h3.als-absatz{color:var(--text-hell)}
.karten.logokarten .karte{padding:26px;gap:18px}.klogo{height:44px;display:flex;align-items:center;justify-content:flex-start}.klogo svg,img.klogo{height:44px;width:auto;max-width:100%;display:block}img.klogo{object-fit:contain;object-position:left center}.karten.logokarten .karte p{font-size:15px;line-height:1.55;color:var(--text-2)}
.karte.mit-foto{overflow:hidden}.karte .kfoto{width:calc(100% + 72px);max-width:none;margin:-36px -36px 6px;height:200px;object-fit:cover;display:block}
.karten-bilder{display:flex;gap:20px;flex:none}.karten-bilder img{max-height:200px;width:auto;max-width:100%;border-radius:var(--radius-k)}.kopfzeile.lang .karten-bilder{align-self:flex-end}
.nachliste{margin-top:40px}.nachliste h4{font-size:19px;margin:0 0 14px}.nachliste h3.wie-h4,.nachliste h2.wie-h4,.nachliste h1.wie-h4{font-size:19px;margin:0 0 14px}.nachliste ul.haken.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}.nachliste ul.haken li{font-size:16px}.dunkel .nachliste h4{color:var(--weiss)}.dunkel .nachliste h3.wie-h4,.dunkel .nachliste h2.wie-h4,.dunkel .nachliste h1.wie-h4{color:var(--weiss)}.dunkel .nachliste ul.haken li{color:var(--text-hell)}
.sek.foto{padding:0}.fotoband{width:100%;height:340px;object-fit:cover;object-position:50% 30%;border-radius:0;display:block}
.hero-siegel{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.hero .siegel{height:56px;width:auto;border-radius:10px}.hero .siegel.hoch{height:120px;border-radius:8px}
.presse .plogo{display:inline-flex;align-items:center;height:28px}.presse .plogo svg{height:28px;width:auto}.presse.dunkel .plogo svg *{fill:#fff}
.schritte-bild{height:180px;width:auto;max-width:40%;object-fit:contain;border-radius:var(--radius-k)}
.tab-huelle{overflow-x:auto;border:1px solid var(--rand);border-radius:var(--radius-k);background:var(--weiss)}.tab{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}.tab th,.tab td{padding:12px 16px;border-bottom:1px solid var(--rand);text-align:left;vertical-align:top;color:var(--text-2)}.tab th{font-weight:700;color:#fff;background:var(--petrol)}.tab tr:nth-child(even) td{background:#f3f6f5}.tab tr:last-child td{border-bottom:0}.dunkel .tab-huelle{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel)}.dunkel .tab th{background:rgba(255,255,255,.06);color:var(--weiss)}.dunkel .tab td{color:var(--text-hell);border-color:var(--rand-dunkel)}
.lese .logos{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:center;margin:6px 0}.lese .logos img{height:56px;width:auto;max-width:220px;object-fit:contain}
.lese .logos .logo-svg{display:inline-flex;height:40px;align-items:center}.lese .logos .logo-svg svg{height:100%;width:auto;max-width:220px}
.karte .bausteine{margin-top:6px}.karte .baustein{font-size:14px;padding:8px 12px}.dunkel .karte .baustein{border-color:var(--rand-dunkel);background:rgba(255,255,255,.06);color:var(--weiss)}
.karten-nach.zwei{justify-content:space-between;align-items:flex-start;gap:24px 40px}.karten-nach .kn-links,.karten-nach .kn-rechts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}.karten-nach .kn-rechts{max-width:460px}.karten-nach .kn-rechts .knoepfe{margin:0}
.linkliste .verweise{margin:40px 0 0;padding:0;list-style:none;columns:2;column-gap:48px}.linkliste .verweise li{break-inside:avoid;padding:12px 0;border-bottom:1px solid var(--rand);font-size:17px}.linkliste .verweise a{color:var(--text);font-weight:600}.linkliste .verweise a:hover{color:var(--gruen-text)}
.lese{max-width:780px;display:flex;flex-direction:column;gap:22px}
.lese h1{font-size:46px}.lese h2{font-size:30px;margin-top:20px}.lese h1.wie-h2{font-size:30px;margin-top:20px}.lese h3{font-size:22px;margin-top:8px}.lese h2.wie-h3,.lese h1.wie-h3{font-size:22px;margin-top:8px}
.lese>p{font-size:18px;line-height:1.7} /* Malina 03.11.2026 (#1041): erster Absatz nicht mehr groesser — Schrift im ganzen Ratgebertext gleich */
.lese ul,.lese ol{margin:0;padding-left:24px;font-size:18px;line-height:1.7;color:var(--text-2)}.lese li{margin:6px 0}
.lese img{border-radius:var(--radius-k)}.lese p,.lese li,.lese td,.lese th,.lese a{overflow-wrap:anywhere}.lese>.knopf{align-self:flex-start}
.brot{display:flex;gap:10px;font-size:13px;color:var(--text-3)}.brot a{color:var(--gruen-text);font-weight:600}
.autor{display:flex;align-items:center;gap:12px;font-size:14px}.autor img{width:40px;height:40px;border-radius:50%;object-fit:cover}.autor>div{display:flex;flex-direction:column}.autor .name{font-weight:700}.autor .meta{color:var(--text-3)}
.hinweis{display:flex;gap:16px;padding:22px 26px;border-radius:16px;background:var(--weiss);border:1px solid var(--rand)}.hinweis svg{flex:none;color:var(--gruen)}.hinweis p{font-size:16px;line-height:1.6;color:var(--text)}
.band-karte{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:28px 32px;border-radius:var(--radius);background:var(--petrol);color:var(--weiss)}.band-karte .h3{font-size:20px;font-weight:800;display:block}.band-karte .h2.wie-h3,.band-karte .h1.wie-h3{font-size:20px;font-weight:800;display:block}.band-karte p{color:var(--text-hell);font-size:15px}.band-karte .knopf{flex:none}
/* Fusszeile */
.fuss{background:var(--petrol);color:var(--weiss);padding:72px 0 40px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.fuss-marke{display:flex;flex-direction:column;gap:18px}.fuss-marke svg{width:104px;height:56px}.fuss-marke p{font-size:15px;line-height:1.6;color:var(--text-hell)}.fuss .tel{font-size:16px;font-weight:700;color:var(--weiss)}
.fuss-gruppe{display:flex;flex-direction:column;gap:12px;font-size:15px}.fuss-gruppe .ueber{color:var(--gruen-hell);font-size:13px;letter-spacing:.06em}.fuss-gruppe a{color:var(--text-hell)}.fuss-gruppe a:hover{color:var(--weiss)}
.fuss-unten{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--rand-dunkel);font-size:13px;color:#8fa3a0}.fuss-unten div{display:flex;gap:24px}.fuss-unten a{color:#8fa3a0}
/* Telefon / Tablet */
/* Runde 6 (09.10.2026): Fallbeispiel-Karten + Pillen-Hero — Masse aus design/runde6/bau.py, von Frederik freigegeben */
.fallbeispiele .kopfzeile{position:relative}.beispielchip{position:absolute;right:0;top:0;background:var(--gelb);color:var(--petrol);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.faelle .fall{display:flex;flex-direction:column;border:1px solid var(--rand);border-radius:var(--radius);background:var(--weiss);overflow:hidden}
.fall-bild{position:relative;background:#eef2f4;padding:44px 36px 28px;min-height:280px;display:flex;align-items:center;justify-content:center}
.fall-bild svg{width:100%;max-height:230px}
.fall-bild .pille{position:absolute;left:16px;top:16px;background:#fff;border:1px solid var(--rand);border-radius:999px;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--petrol)}
.fall-bild .nr{position:absolute;right:16px;top:16px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--rand);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--petrol)}
.fall-text{padding:24px 28px 28px;display:flex;flex-direction:column;gap:8px}
.fall-text h3{font-size:19px;line-height:1.3;margin:0}
.fall-text h2.wie-h3,.fall-text h1.wie-h3{font-size:19px;line-height:1.3;margin:0}.fall-text .meta{margin:0 0 8px;font-size:14px;color:var(--text-3)}
.fall-text .ueber{font-size:11px;letter-spacing:.12em}
.skala{display:flex;gap:4px;margin-top:4px}.skala .kl{flex:1;text-align:center;font-size:12px;font-weight:700;padding:5px 0;border-radius:6px;background:var(--kf);color:#fff;opacity:.28}.skala .kl.an{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--kf)}
.skala-text{margin:6px 0 10px;font-size:14px;color:var(--text-3)}.skala-text b{font-size:17px}
.kennz{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--rand);padding-top:16px}.kennz strong{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--petrol);margin-top:4px}
.fallbeispiele.dunkel .faelle .fall{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel)}.fallbeispiele.dunkel .fall-bild{background:rgba(255,255,255,.04)}
.fallbeispiele.dunkel .fall-bild .pille,.fallbeispiele.dunkel .fall-bild .nr{background:rgba(255,255,255,.1);border-color:var(--rand-dunkel);color:#fff}
.fallbeispiele.dunkel .fall-text h3,.fallbeispiele.dunkel .kennz strong{color:#fff}
.fallbeispiele.dunkel .fall-text h2.wie-h3,.fallbeispiele.dunkel .fall-text h1.wie-h3{color:#fff}.fallbeispiele.dunkel .fall-text .meta,.fallbeispiele.dunkel .skala-text{color:var(--text-hell)}.fallbeispiele.dunkel .kennz{border-color:var(--rand-dunkel)}.fallbeispiele.dunkel .skala .kl.an{box-shadow:0 0 0 2px var(--petrol),0 0 0 3.5px var(--kf)}
.hp-buehne{position:relative;width:620px;height:560px;margin:0 auto}
.hp-buehne>svg{position:absolute;left:90px;top:20px;width:440px;height:470px;z-index:1}
.hp-buehne .sockel{position:absolute;left:60px;top:400px;width:500px;height:120px;border-radius:50%;background:radial-gradient(ellipse at 50% 45%,rgba(15,41,46,.16),rgba(15,41,46,.06) 55%,transparent 72%)}
.hp{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--petrol);border-radius:999px;padding:8px 18px 8px 8px;font-size:15px;font-weight:700;box-shadow:0 10px 30px rgba(15,41,46,.16);border:1px solid var(--rand);white-space:nowrap}
.hp i{width:36px;height:36px;border-radius:50%;background:var(--gelb);display:grid;place-items:center;color:var(--petrol)}.hp i svg{width:20px;height:20px}
.hero.pillen .hp:nth-of-type(1){left:-60px;top:120px}.hero.pillen .hp:nth-of-type(2){left:470px;top:150px}.hero.pillen .hp:nth-of-type(3){left:-90px;top:300px}.hero.pillen .hp:nth-of-type(4){left:480px;top:320px}.hero.pillen .hp:nth-of-type(5){left:30px;top:470px}
.hero.hell.pillen{background:#f3f6f5;padding:120px 0 72px;text-align:center}
.hero.hell.pillen .hero-inhalt{display:flex;flex-direction:column;align-items:center;gap:22px}
.hero.hell.pillen h1{font-size:60px;line-height:1.05;max-width:1000px;letter-spacing:-.02em}.hero.pillen h1 em{font-style:normal;color:var(--gruen)}
.hero.hell.pillen ul.haken{display:flex;gap:36px;justify-content:center;flex-wrap:wrap}.hero.hell.pillen ul.haken li{font-size:17px}
.hero.hell.pillen .hp-buehne{margin-top:10px}
.hero.dunkel.pillen{display:block;padding:120px 0 64px}.hero.dunkel.pillen .hero-raster{display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:40px;align-items:center}
.hero.dunkel.pillen .hero-inhalt{margin-left:0;max-width:none;padding:0}.hero.dunkel.pillen h1{font-size:56px}.hero.dunkel.pillen .hp-buehne .sockel{background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.14),rgba(255,255,255,.05) 55%,transparent 72%)}
.hero.dunkel.pillen .hp{border-color:transparent}.hero.dunkel.pillen .hp:nth-of-type(1){left:-10px;top:110px}.hero.dunkel.pillen .hp:nth-of-type(3){left:-40px;top:300px}.hero.dunkel.pillen .hp:nth-of-type(5){left:40px;top:470px}
@media (max-width:750px){
  .hero.hell.pillen{padding:96px 0 40px}.hero.hell.pillen h1{font-size:34px;overflow-wrap:normal;hyphens:auto}.hero.hell.pillen ul.haken{flex-direction:column;gap:12px;text-align:left}
  .hp-buehne{width:100%;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.hp-buehne>svg{position:static;flex-basis:100%;width:78%;max-width:300px;height:auto;margin:0 auto}.hp-buehne .sockel{display:none}
  .hero.pillen .hp{position:static;white-space:normal;font-size:14px}
  .hero.dunkel.pillen .hero-raster{grid-template-columns:1fr}
  .fallbeispiele .kopfzeile{display:flex;flex-direction:column}.beispielchip{position:static;align-self:flex-start;margin-top:10px}
}

/* Notizen-Runde 09.10.2026 (Frederiks Notizbrett #1–#21) — Modulregeln, nicht Einzelfixe */
.hero.dunkel .hero-inhalt{padding:40px 0 40px}
.hero .notiz-link{align-self:flex-start;color:var(--gelb);font-weight:700;font-size:15px;text-decoration:none}.hero .notiz-link:hover{text-decoration:underline;color:var(--gelb)}
.hero.dunkel .hero-siegel.rechts{position:absolute;right:calc((100% - min(var(--bahn),100% - 40px))/2);bottom:48px;z-index:1}
.person img{width:112px;height:112px}.kontakt-personen .person img{width:120px;height:120px}
.kontakt-raster{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.kontakt-bild{width:auto;max-width:100%;height:auto;max-height:360px;object-fit:contain;margin:8px 0 0}
.karten>.bahn{position:relative}
.badge,.preiskarte .badge{align-self:flex-start;background:transparent;border:1.5px solid var(--gruen);color:var(--gruen-text)}
.preiskarte.dunkel .badge,.dunkel .karte .badge{border-color:var(--gelb);color:var(--gelb)}
.preiskarte{padding:48px;gap:48px}.preis-links{gap:14px}.preiszeile .gross{font-size:64px}
.preis-rechts{display:flex;flex-direction:column;gap:16px;align-self:start}
.zahlung{padding:18px 22px;border-radius:var(--radius-k);background:var(--weiss);border:1px solid var(--rand);display:flex;flex-direction:column;gap:10px}
.zahlung .zt{font-size:13px;color:var(--text-3)}
/* Malina 29.10.2026 (#468): "Bequem bezahlen per:" in der Preiskarte so gross wie der Titel des Kastens daruber ("Ihr Vor-Ort-Termin zum Festpreis") */
.preis-rechts .zahlung .zt{font-size:16px;font-weight:700}.preis-rechts .zahlung .zt strong{font-weight:700}.zahlung .wege{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.zahlung .weg{font-weight:700;color:var(--petrol);font-size:15px;padding:6px 12px;border-radius:999px;background:#eef2f4}
.zahlung .logos{display:flex;gap:16px;align-items:center;margin:0}.zahlung .logos img{height:26px;width:auto;filter:none;opacity:1}
.preiskarte.dunkel .extra a,.sek.dunkel .lese a:not(.knopf),.sek.dunkel .text-rechts a:not(.knopf),.sek.dunkel .fluss a:not(.knopf),.sek.dunkel .kontakt-text a:not(.knopf){color:var(--gruen-hell)}
.schritte .kopfzeile{justify-content:flex-start;gap:56px;align-items:center}.schritte-bild{height:150px}
.bildtext figure .zusatz{position:absolute;right:-28px;bottom:-30px;width:150px;height:auto;transform:rotate(8deg);filter:drop-shadow(0 12px 24px rgba(15,41,46,.25));border-radius:0}
@media (max-width:750px){
  .hero.dunkel .hero-siegel.rechts{position:static;margin:0 20px 24px}
  .zahlung .wege{gap:12px}.bildtext figure .zusatz{width:110px;right:-10px;bottom:-16px}
}
/* Notizen #22–#34 (09.10.2026) */
.hero.dunkel.ohne-bild{min-height:0;padding-top:88px}.hero.dunkel.ohne-bild .hero-inhalt{padding:48px 0 44px;gap:18px}.hero.dunkel.lang h1{font-size:48px}
.hero.pillen .hero-raster{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:40px;align-items:center}
.hero.hell.pillen{background:#f3f6f5;padding:84px 0 0;text-align:left}.hero.hell.pillen .hero-inhalt{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:0}
.hero.hell.pillen h1{font-size:52px;max-width:none}.hero.hell.pillen ul.haken{display:flex;flex-direction:column;gap:10px}.hero.hell.pillen ul.haken li{font-size:17px}
.hero.hell.pillen .kennzahlen{margin-top:28px;border-top:1px solid var(--rand);padding:18px 0 22px}.hero.hell.pillen .kennzahlen .zahl{color:var(--petrol)}.hero.hell.pillen .kennzahlen .was{color:var(--text-2)}
.hero.pillen .hp-buehne{width:600px;height:480px;margin:0}.hero.pillen .hp-buehne>svg{left:100px;top:10px;width:400px;height:420px}.hero.pillen .hp-buehne .sockel{top:350px;left:70px;width:460px;height:110px}
.hero.pillen .hp:nth-of-type(1){left:-30px;top:90px}.hero.pillen .hp:nth-of-type(2){left:430px;top:120px}.hero.pillen .hp:nth-of-type(3){left:-60px;top:260px}.hero.pillen .hp:nth-of-type(4){left:440px;top:280px}.hero.pillen .hp:nth-of-type(5){left:30px;top:415px}
.hero.dunkel.pillen .hp:nth-of-type(1){left:-10px;top:90px}.hero.dunkel.pillen .hp:nth-of-type(3){left:-30px;top:260px}.hero.dunkel.pillen .hp:nth-of-type(5){left:40px;top:415px}
a.hp{text-decoration:none}.hp .hp-pop{display:none;position:absolute;left:0;top:calc(100% + 10px);width:280px;background:#fff;color:var(--petrol);font-weight:400;font-size:14px;line-height:1.45;padding:12px 14px;border-radius:12px;box-shadow:0 14px 34px rgba(15,41,46,.22);border:1px solid var(--rand);white-space:normal;z-index:4}
.hp:hover .hp-pop,.hp:focus .hp-pop,.hp:focus-within .hp-pop{display:block}.hp:nth-of-type(2) .hp-pop,.hp:nth-of-type(4) .hp-pop{left:auto;right:0}
.presse:not(.dunkel) img{height:38px}
.karte .listentitel{font-weight:700;margin:2px 0 -6px}
.karten-nach .kn-rechts.angebot{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border:1px solid var(--rand);border-radius:var(--radius-k);background:var(--weiss)}.kn-rechts.angebot h3{font-size:18px;margin:0}.kn-rechts.angebot h2.wie-h3,.kn-rechts.angebot h1.wie-h3{font-size:18px;margin:0}.kn-rechts.angebot p{margin:0;font-size:15px;color:var(--text-2)}.kn-rechts.angebot .knoepfe{margin-top:10px}
.text.neben .sticker.flach{position:static;transform:rotate(0);width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;align-self:flex-start;margin-top:14px;display:inline-flex}
.sek.text:not(.dunkel):not(.grau)+.sek.karten:not(.dunkel):not(.grau){background:var(--grau)}
.einbettung.direkt .eb-rahmen{background:transparent;border:0;padding:0;box-shadow:none}
@media (max-width:750px){
  .hero.pillen .hero-raster{grid-template-columns:1fr;gap:24px}.hero.hell.pillen{padding:48px 0 0}.hero.hell.pillen h1{font-size:34px;overflow-wrap:normal;hyphens:auto}
  .hero.pillen .hp-buehne{width:100%;height:auto}.hero.pillen .hp-buehne>svg{position:static;width:78%;max-width:300px;height:auto}
  .hero.hell.pillen .kennzahlen{margin-top:16px}.hero.dunkel.lang h1{font-size:34px}
  .sek .paar.mit-ikon{grid-template-columns:minmax(0,1fr)}.bildtext figure.ikon img{max-width:200px}.bildtext figure.ikon{padding:0}  /* hoehere Spezifitaet: der Desktop-Wert steht spaeter in der Datei */
}
/* Notizen #35–#60 (09.10.2026) */
.erk .knoepfe{margin-top:24px}
.hero-bild img{height:520px}
.kopfzeile.mit-neben{flex-direction:column;align-items:flex-start;gap:12px}.kopfzeile.mit-neben .neben{max-width:760px;font-size:17px}
.fotos-ganz .karte.mit-foto .kfoto{object-fit:cover;object-position:50% 10%;background:#eef2f4;height:300px} /* #88 (12.10.): gleiche Bildgroesse fuer alle, Koepfe oben bleiben */ /* nur wo ergaenzungen.json kartenFotosGanz setzt (Teamkarten, Notiz #57); sonst randlos cover */
a.chip{text-decoration:none}a.chip:hover{border-color:var(--gruen)}
.formtitel{font-size:20px;margin:0 0 14px}.formkarte.nackt .formtitel{margin:0 0 12px}
/* FAQ nach Themen (Runde 7 A) */
.themen-raster{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px;align-items:start}
.themen-nav{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px}.themen-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.themen-nav li a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:12px;text-decoration:none;color:var(--petrol);font-weight:700;font-size:15px}.themen-nav li a:hover,.themen-nav li a.aktiv{background:var(--grau)}
.themen-nav li a small{font-size:12px;color:var(--text-3);background:#fff;border:1px solid var(--rand);border-radius:999px;padding:3px 9px}
.suche{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--rand);border-radius:999px;padding:12px 18px;color:var(--text-3)}.suche input{border:0;outline:0;font:16px "pjs","Plus Jakarta Sans",sans-serif;width:100%;background:transparent;color:var(--petrol)}
.nav-hinweis,.nav-leer{font-size:13px;color:var(--text-3);margin:0}
.themen-inhalt{display:flex;flex-direction:column;gap:44px}.thema .ueber{display:block;margin-bottom:6px}
.themen .antwort .lese{max-width:none}.themen .antwort p{margin:0}
@media (max-width:750px){.themen-raster{grid-template-columns:1fr;gap:28px}.themen-nav{position:static}.themen-nav ul{flex-direction:row;flex-wrap:wrap;gap:6px}.themen-nav li a{padding:8px 12px;border:1px solid var(--rand);font-size:14px}}
/* Notizen #151–#175 (27.10.2026, Malina) */
.hero.dunkel.mit-sticker .hero-inhalt{padding-right:230px}.hero.dunkel.mit-sticker .hero-inhalt .sticker{position:absolute;right:auto;left:min(600px,calc(100% - 170px));top:46%;transform:translateY(-50%) rotate(10deg);width:160px;height:160px} /* neben den Hakenpunkten, nicht auf dem Foto (#154/#156/#168) */
.hero.dunkel.mit-sticker .hero-inhalt .sticker.flach{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;align-self:flex-start}
.preiskarte .sticker.flach-p{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:8px 14px;font-size:14px;display:inline-flex;align-self:flex-start;margin-bottom:2px;line-height:1.3}
.mkopf .sticker.eck{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:8px 14px;font-size:14px;display:inline-flex;align-self:flex-start;margin:-2px 0 2px;line-height:1.3}
.karten .knoepfe{justify-content:center}
.karte.favorit{border:2px solid var(--gruen);box-shadow:0 16px 40px rgba(69,153,121,.16)}.dunkel .karte.favorit{border-color:var(--gelb)}
.karte .ergebnis{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rand);font-weight:800;font-size:17px;color:var(--petrol)}.dunkel .karte .ergebnis{color:var(--weiss);border-color:var(--rand-dunkel)}
.karten-nach.fazit{justify-content:center}.karten-nach.fazit p{font-size:22px;font-weight:800;color:var(--gruen-text);text-align:center;width:100%}
.presse img,.presse:not(.dunkel) img{height:34px;max-width:150px;object-fit:contain}.presse img.farbig,.presse.dunkel img.farbig{filter:none;opacity:1}
.nd .ng>.gt{font-size:15px;font-weight:600;color:inherit;white-space:nowrap;cursor:default}.nd .ng.hier>.gt{color:var(--gruen-text)}.kopf.dunkel:not(.fest) .nd .ng.hier>.gt{color:var(--gruen-hell)}
@media (max-width:750px){.hero.dunkel.mit-sticker .hero-inhalt{padding-right:0}.hero.dunkel.mit-sticker .hero-inhalt .sticker{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;align-self:flex-start}}
/* Runde 9 F2 (14.10.2026): Portraits im Kontaktabschnitt, Formular als eigener Abschnitt */
.kontakt-raster.mit-portraits{grid-template-columns:minmax(0,1fr) 560px;align-items:center;gap:56px}
.portraits2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.portraits2.n1{grid-template-columns:1fr;max-width:380px;margin-left:auto}.portraits2.n3{grid-template-columns:1fr 1fr 1fr}
.portraits2 figure.portrait{margin:0;position:relative}.portraits2 figure.portrait img{width:100%;height:440px;object-fit:cover;object-position:50% 0%;border-radius:24px;display:block;background:#eef2f4}.portraits2.n3 figure.portrait img{height:360px}
.portraits2 figcaption{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}.portraits2 figcaption .name{font-weight:800;font-size:17px;color:var(--petrol)}.portraits2 figcaption .rolle{font-size:13px;color:var(--text-3)}.portraits2 figcaption .tel{font-size:14px;font-weight:700}
.einbettung.formular .eb-rahmen{max-width:760px;margin:0 auto}.einbettung.formular .mkopf.mitte{text-align:center;max-width:none;margin-bottom:24px}
@media (max-width:750px){.kontakt-raster.mit-portraits{grid-template-columns:1fr;gap:28px}.portraits2,.portraits2.n3{grid-template-columns:1fr 1fr;gap:10px}.portraits2.n1{max-width:none;margin-left:0;width:100%}.portraits2 figure.portrait img,.portraits2.n3 figure.portrait img{height:260px;border-radius:16px}.portraits2.n1 figure.portrait img{height:360px}.portraits2 figcaption{left:8px;right:8px;bottom:8px;padding:8px 10px}.portraits2 figcaption .name{font-size:14px}.portraits2 figcaption .rolle{font-size:11px}}
/* Notizen #102–#110 (14.10.2026, Frederik + Malina) */
.hp:hover,.hp:focus-within{z-index:7} /* #101: Popup ueber den anderen Pillen */
.karte .badge,.karten .karte .badge{background:transparent;border:1.5px solid var(--gruen);color:var(--gruen-text)} /* #98: Express-Badge als Umriss-Chip, spaete Regel schlug die aus #5 */
.karten .sticker.eck{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;display:inline-flex;margin:0 0 18px;line-height:1.3} /* #98: Sticker lag auf dem Kartentitel */
.lese p.marke img{height:40px}
.karten-nach .zahlung.dunkel{background:var(--petrol);border-color:var(--petrol)} /* auf heller Flaeche braucht die dunkle Zahlungskarte echten Grund */
.lese p.marke{margin:6px 0 14px}.lese p.marke img{height:34px;width:auto;display:block}
.kopf.dunkel.fest a:hover,.kopf.dunkel.fest .login:hover{color:var(--gruen-text)}
.sek.foto{overflow:hidden;height:440px;position:relative}.sek.foto .fotoband{position:absolute;left:0;top:-15%;width:100%;height:130%;object-position:50% 18%;will-change:transform} /* Parallax (Malina #103/#107): 15 % Überstand oben/unten, Skript verschiebt bis ±8 % */
.bk img{object-position:70% 50%}
.hero.dunkel .hero-inhalt .sticker.flach{position:static;transform:rotate(0);width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;align-self:flex-start;margin-top:4px;text-decoration:none}
/* Notizen #61–#87 (12.10.2026) */
.als-absatz,.lese h3.als-absatz,.lese h2.als-absatz{font-size:17px;line-height:1.65}
.lese h2.wie-h3.als-absatz,.lese h1.wie-h3.als-absatz,.lese h1.wie-h2.als-absatz{font-size:17px;line-height:1.65}
.stimmen .knoepfe{justify-content:center}
.hero.dunkel .sticker{right:-200px}
.kontakt-text .mkopf+p{margin-top:0}
.ikonzeile{display:flex;gap:16px;align-items:flex-start;margin:14px 0}.ikonzeile img.ikon{width:44px;height:44px;object-fit:contain;flex:none;margin-top:1px;border-radius:0}.ikonzeile p{margin:0}
.paar.mit-ikon{grid-template-columns:340px minmax(0,1fr);align-items:start}.bildtext figure.ikon{background:transparent;border:0;box-shadow:none;padding:24px 0 0;display:flex;justify-content:center}.bildtext figure.ikon img{max-width:300px;width:100%;height:auto;border-radius:0}
.karte .preishinweis{font-size:13px;color:var(--text-3);margin:0}
.karten-nach .zahlung{margin:0 0 14px}
.preis-fuss{margin:-8px 0 0;font-size:14px;color:var(--text-3)}.preiskarte.dunkel .preis-fuss{color:#a9bab7}
.pille-flach{display:inline-flex;align-self:flex-start;border-radius:999px;padding:8px 14px;background:rgba(255,255,255,.1);border:1px solid var(--rand-dunkel);color:var(--weiss);font-size:14px;font-weight:700}.preiskarte:not(.dunkel) .pille-flach{background:var(--grau);border-color:var(--rand);color:var(--petrol)}
.zahlung.dunkel{background:rgba(255,255,255,.08);border-color:var(--rand-dunkel)}.zahlung.dunkel .zt{color:var(--text-hell)}.zahlung.dunkel .weg{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:1600px){.hero.dunkel h1{font-size:52px}.hero.dunkel .hero-inhalt{gap:14px;padding:20px 0 18px}.hero.dunkel .sticker{right:-120px}.hero.dunkel .kennzahlen{padding:12px 0 14px}.kennzahlen .zahl{font-size:28px}.hero.dunkel .lead{font-size:19px}}
@media (max-width:1100px){.hero.dunkel .sticker{right:0}}
@media (max-width:1100px){
  .hero.dunkel h1{font-size:48px}.hero.hell h1{font-size:42px}h2{font-size:36px}h1.wie-h2{font-size:36px}
  .raster.s3,.raster.s4{grid-template-columns:repeat(2,minmax(0,1fr))}.raster.s5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-raster,.liste-raster,.faq-raster,.kontakt-raster,.paar,.preiskarte,.text-raster,.text-raster.erk{grid-template-columns:minmax(0,1fr);gap:40px}.erk .text-links{position:static}.eb-rahmen{padding:24px}.listenkarte{position:static}.beitraege.karussell .beitrag{flex-basis:calc((100% - 28px)/2)}
  .preiskarte{padding:40px}.liste-kopf,.faq-kopf{position:static}
  .fuss-raster{grid-template-columns:1fr 1fr}
  .nd,.kopf .login{display:none}.kr .knopf{display:inline-flex;font-size:14px;padding:9px 14px;white-space:nowrap}/* Runde 36 Teil 1 A: gelber Knopf statt Login in der Telefon-Kopfzeile */
  .burger{display:block;position:relative;width:44px;height:44px;cursor:pointer;flex:none}
  .burger span{position:absolute;left:10px;width:24px;height:2px;background:currentColor;border-radius:2px}.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
  .nm{position:fixed;inset:0;background:var(--weiss);color:var(--text);z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #menue:checked~.nm{display:block}
  .nm .zu{position:absolute;right:20px;top:20px;width:44px;height:44px;cursor:pointer}.nm .nm-login{position:absolute;left:24px;top:26px;font-size:15px;font-weight:600;padding:8px 18px;border:1px solid var(--rand);border-radius:999px;color:var(--text)}
  .nm .zu::before,.nm .zu::after{content:"";position:absolute;left:10px;top:21px;width:24px;height:2px;background:var(--text);border-radius:2px}.nm .zu::before{transform:rotate(45deg)}.nm .zu::after{transform:rotate(-45deg)}
  .nm>ul{list-style:none;margin:84px 0 0;padding:0 24px 40px;text-align:right}.nm ul ul{list-style:none;margin:0;padding:0}
  .nm .gl,.nm summary{display:block;padding:12px 0;font-size:22px;font-weight:800;color:var(--text)}.nm summary{position:relative;cursor:pointer;list-style:none;padding-right:0}.nm summary::-webkit-details-marker{display:none}
  .nm summary>a.gl-link{display:inline-block;padding:0}.nm summary>a.gl-link[aria-current]{color:var(--gruen-text)} /* #1103–#1106 */
  .nm .chev{position:absolute;left:0;top:22px;width:8px;height:8px;border-right:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:rotate(45deg)}.nm details[open] .chev{transform:rotate(-135deg);top:26px}
  .nm ul ul a{display:block;padding:10px 0;font-size:19px;color:var(--text-2)}.nm a[aria-current]{color:var(--gruen-text)}
}
@media (max-width:750px){
  .linkliste .verweise{columns:1}
  .bk{grid-template-columns:1fr;border-radius:20px}.bk-text{padding:32px 24px}.bk img{min-height:220px;order:-1}
  .kopf.partner .kb{height:auto;flex-wrap:wrap;gap:10px 0;padding:12px 0}.kopf.partner .pn ul{gap:14px;flex-wrap:wrap}.kopf.partner .pn a{font-size:13px}.kopf.partner .lockup img{height:28px}.kopf.partner .logo svg{width:70px;height:38px}
  body{font-size:16px}
  .sek{padding:56px 0}.bahn{width:calc(100% - 40px)}
  h1,.hero.dunkel h1,.hero.hell h1{font-size:36px}h2{font-size:30px}h1.wie-h2{font-size:30px}h3{font-size:22px}h2.wie-h3,h1.wie-h3{font-size:22px}.lead{font-size:17px}
  .kb{height:64px}.kopf .logo{width:74px;height:40px}
  .hero.dunkel{min-height:0;padding-top:64px}.hero .hg{height:420px;object-position:70% 30%}.hero .schleier{height:420px;background:linear-gradient(180deg,rgba(11,31,35,.55) 0%,rgba(11,31,35,.25) 35%,rgba(11,31,35,.75) 75%,#0b1f23 100%)}
  .hero.dunkel .hero-inhalt{padding:230px 0 28px;margin:0 auto;width:calc(100% - 40px);gap:18px}
  .hero.dunkel .sticker,.hero-bild .sticker,.preiskarte .sticker,.karten .sticker.eck,.sek.text .sticker.eck,.bildtext figure .sticker{position:static;transform:rotate(0);width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;align-self:flex-start;margin-top:-6px}
  .knoepfe{flex-direction:column;gap:10px;margin-top:20px}.knopf{width:100%;padding:15px 20px}
  .kennzahlen{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;width:calc(100% - 40px);margin:14px auto 0;padding-top:22px}.kennzahlen>div{padding:0}.kennzahlen>div+div{border:0;padding:0}.kennzahlen .zahl{font-size:24px}
  .kennzahlen.klein{flex-wrap:wrap;gap:12px}
  .hero.hell{padding:40px 0}.hero-bild img{height:260px;border-radius:20px}
  .presse .bahn{justify-content:center;gap:18px 28px;flex-wrap:wrap}.presse .ueber{flex:0 0 100%;text-align:center}.presse img{height:22px}
  .raster.s3,.raster.s4,.raster.s5,.raster.s2{grid-template-columns:1fr;gap:16px}.nachliste ul.haken.zwei{grid-template-columns:1fr}.karten-bilder img{max-height:140px}
  .karte{padding:26px;border-radius:var(--radius-k)}
  .kfuss{flex-wrap:wrap;gap:12px 16px}
  h1,h2,h3,.h3{overflow-wrap:anywhere}
h1.wie-h2,h2.wie-h3,h1.wie-h3,.h2.wie-h3,.h1.wie-h3{overflow-wrap:anywhere}
  .karte .kfoto{width:calc(100% + 52px);margin:-26px -26px 4px;height:170px}.fotoband{height:220px}.sek.foto{height:220px}
  .beitraege.karussell .beitrag{flex-basis:86%}.text-raster{gap:28px}.listenkarte{padding:24px}
  .knopf{white-space:normal;text-align:center;max-width:100%;line-height:1.3}
  .kopfzeile{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:24px}
  .paar>img{height:220px;border-radius:20px}
  .preiskarte{padding:28px 24px;border-radius:24px}.preiszeile .gross{font-size:48px}.preiszeile .vorher{font-size:20px}.enthalten{padding:24px}
  .band-zeile{flex-direction:column;align-items:flex-start}.band .knoepfe{margin-top:16px;width:100%}
  .lese h1{font-size:32px}.lese h2{font-size:24px}.lese h1.wie-h2{font-size:24px}.lese>p,.lese>p:first-of-type,.lese ul,.lese ol{font-size:17px}
  .band-karte{flex-direction:column;align-items:flex-start}
  .fuss-raster{grid-template-columns:1fr;gap:32px}.fuss-unten{flex-direction:column;align-items:flex-start;gap:12px}
  .liste-raster,.faq-raster,.kontakt-raster{gap:32px}
  .beitrag img{height:200px}
}
/* Notizen #111–#150 (21.10.2026, Lisa) — Modulregeln; eigene Telefon-Regeln hier am Ende, sonst gewinnen die Desktop-Werte */
.kn-gruppe{display:flex;flex-direction:column;align-items:center;align-self:flex-start;max-width:100%}.kn-gruppe>.notiz{margin:10px 0 0;text-align:center} /* #115/#119 */
.stimmen .kn-gruppe{margin:0 auto;width:max-content}
.bk-text .mkopf+p{margin-top:0} /* #111: die 40-px-Regel nach Ueberschriften kam in der Bildkarte zum Abstand dazu */
.kontakt-text .kontakt-bild{align-self:flex-start;object-position:left center;margin-top:0} /* #114: Foto buendig links unter dem Text statt mittig in voller Breite */
main>.sek.band.dunkel:last-child{border-bottom:1px solid rgba(143,209,179,.45)} /* #136: Abschlussband setzt sich von der Fusszeile ab */
.sek.einbettung.direkt{padding-bottom:40px} /* #149 */
.sek[id]{scroll-margin-top:88px} /* Spruenge zum Formular (#117 ff.) landen unter der festen Kopfzeile */
.text-raster.erk.symbole{grid-template-columns:minmax(0,1fr);gap:36px}.erk.symbole .text-links{position:static} /* #126 */
.erk.symbole .lese.fliess{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px}
.erk.symbole .lese.fliess>p{grid-column:1/-1}.erk.symbole .ikonzeile{flex-direction:column;gap:14px;margin:0}.erk.symbole .ikonzeile img.ikon{width:52px;height:52px}
.bildtext .paar.mit-strich{display:block;position:relative;min-height:340px} /* #129–#131: nur Strichgrafik (Deckung < 0,3): Text buendig links, Symbol gross und halb hinter dem Text */
.bildtext .paar.mit-strich .fluss{position:relative;z-index:1;max-width:820px}
.bildtext .paar.mit-strich figure.ikon{position:absolute;left:600px;top:0;width:460px;padding:0;z-index:0;opacity:.55;pointer-events:none}
.bildtext .paar.mit-strich figure.ikon img{max-width:none;width:100%}
@media (max-width:1100px){
  .erk.symbole .lese.fliess{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bildtext .paar.mit-strich{min-height:0}.bildtext .paar.mit-strich figure.ikon{position:static;width:auto;opacity:1;justify-content:flex-start;margin-bottom:24px}.bildtext .paar.mit-strich figure.ikon img{max-width:200px}
}
@media (max-width:750px){
  .erk.symbole .lese.fliess{grid-template-columns:minmax(0,1fr);gap:24px}
  .kn-gruppe,.stimmen .kn-gruppe{width:100%;align-self:stretch}
}
/* Notizen #176–#193 (27.10.2026, Malina) */
h1 strong,h2 strong,h3 strong,.h3 strong{font-weight:inherit}
h1.wie-h2 strong,h2.wie-h3 strong,h1.wie-h3 strong,.h2.wie-h3 strong,.h1.wie-h3 strong{font-weight:inherit} /* #180: Wix-Fettung in Ueberschriften zog sie auf SemiBold herunter */
.karte .khinweise{display:flex;flex-direction:column;gap:4px}.karte .khinweise p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-3)}.dunkel .karte .khinweise p{color:#8fa3a0} /* #182–#184 */
.band .h3{font-size:36px;line-height:1.15;letter-spacing:-.02em}
/* #182–#184 */
.band .h2.wie-h3,/* #182–#184 */
.band .h1.wie-h3{font-size:36px;line-height:1.15;letter-spacing:-.02em}.band .sticker.pille{display:inline-block;margin-bottom:14px} /* #189/#190 */
.bk.breitbild{grid-template-columns:1fr;min-height:0}.bk.breitbild img{order:-1;height:auto;min-height:0;aspect-ratio:2.1/1;object-position:50% 35%}.bk.breitbild .bk-text{padding:40px 52px 44px} /* #187 */
@media (max-width:750px){
  .band .h3{font-size:28px}
.band .h2.wie-h3,.band .h1.wie-h3{font-size:28px}
  .bk.breitbild .bk-text{padding:28px 24px}
}
/* Notizen #194–#215 (28.10.2026, Malina) */
.hero.dunkel.mit-sticker.sticker-neben .hero-inhalt,.hero.dunkel.mit-sticker.sticker-oben .hero-inhalt{padding-right:0} /* #194/#202: Sticker nicht mehr ueber Text und Foto */
.hero.dunkel .titel-zeile{display:flex;align-items:center;gap:36px}.hero.dunkel .titel-zeile h1{flex:0 1 auto;max-width:12.5em}
.presse .bahn{gap:36px} /* #195: Logos ohne Leerrand sind groesser -> etwas engerer Abstand, damit die Leiste einzeilig bleibt */
@media (max-width:750px){.presse .bahn{gap:18px 28px}}
.hero.dunkel.mit-sticker.sticker-neben .hero-inhalt .sticker{position:static;left:auto;top:auto;right:auto;flex:none;transform:rotate(10deg);width:136px;height:136px;font-size:15px}
.hero.dunkel.mit-sticker.sticker-oben .hero-inhalt .sticker{position:static;left:auto;top:auto;right:auto;transform:none;width:auto;height:auto;border-radius:999px;padding:12px 30px;font-size:16px;align-self:flex-start;white-space:nowrap}
.hero.dunkel.sticker-oben h1{max-width:none}
.beispielchip,.fallbeispiele .beispielchip{background:transparent;color:var(--text-3);padding:0;border-radius:0;font-size:12px;font-weight:600;letter-spacing:.08em} /* #197: Gelb nur fuer Knoepfe */
.dunkel .beispielchip{color:#a9bab7}
.sek.karten.logokarten.dunkel .karte{background:var(--weiss);border-color:transparent;backdrop-filter:none}.sek.karten.logokarten.dunkel .karte p{color:var(--text-2)} /* #198: dunkler Grund, weisse Logo-Karten */
.karten .karten-nach:not(.zwei):has(+.knoepfe)>p{text-align:center;width:100%} /* #207: Satz ueber dem zentrierten Knopf mittig */
.fluss h3.frage{font-size:44px;line-height:1.1;margin:28px 0 4px}
/* #207: Satz ueber dem zentrierten Knopf mittig */
.fluss h2.wie-h3.frage,/* #207: Satz ueber dem zentrierten Knopf mittig */
.fluss h1.wie-h3.frage{font-size:44px;line-height:1.1;margin:28px 0 4px} /* #214 */
.bildtext .paar.mit-strich.punkte-neben .fluss{max-width:none} /* #213: Hakenpunkte rechts neben der Einleitung */
.punkte-neben .so-oben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}.punkte-neben .so-oben ul.haken{margin-top:0}.punkte-neben .so-text>p:first-child{margin-top:0}.punkte-neben .so-text>p+p{margin-top:14px}
.punkte-neben .fluss>p,.punkte-neben .fluss>h3.frage{max-width:820px}
.punkte-neben .fluss>h2.wie-h3.frage,.punkte-neben .fluss>h1.wie-h3.frage{max-width:820px}
.bildtext .paar.mit-strich.punkte-neben figure.ikon{left:auto;right:0;top:auto;bottom:0;width:400px}
@media (max-width:1100px){
  .fluss h3.frage{font-size:36px}
.fluss h2.wie-h3.frage,.fluss h1.wie-h3.frage{font-size:36px}
  .punkte-neben .so-oben{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:750px){
  .hero.dunkel .titel-zeile{flex-direction:column;align-items:flex-start;gap:14px}
  .hero.dunkel.mit-sticker.sticker-neben .hero-inhalt .sticker,.hero.dunkel.mit-sticker.sticker-oben .hero-inhalt .sticker{transform:none;width:auto;height:auto;border-radius:999px;padding:10px 16px;font-size:14px;white-space:normal}
  .fluss h3.frage{font-size:26px}
.fluss h2.wie-h3.frage,.fluss h1.wie-h3.frage{font-size:26px}
}
/* Notizen #216–#226 (28.10.2026 abends, Malina) */
.liste-karten .knoepfe{justify-content:center;margin-top:36px} /* #216: Knopf statt Handlungskarte, zentriert unter dem Raster */
.hero.dunkel.sticker-oben .hero-inhalt .sticker+.ueber{margin-top:6px} /* #219/#220: Pille ueber der Overline */
.preiskarte.paket{row-gap:36px}.preiskarte.paket .paket-kopf{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;max-width:820px}
.preiskarte.paket .paket-kopf p{font-size:18px;line-height:1.6;margin:0}
.preiskarte.paket .preis-links{border:2px solid var(--gruen);border-radius:var(--radius);padding:32px;align-self:start}.preiskarte.paket.dunkel .preis-links{border-color:var(--gruen-hell);background:rgba(255,255,255,.03)}
.preiskarte.paket .paket-titel{font-weight:700;margin:0}.preiskarte.paket .bausteine{margin-top:0;flex-direction:column;align-items:flex-start;gap:4px}.preiskarte.paket .bausteine .plus{padding-left:18px;line-height:1}.preiskarte.paket .preiszeile{margin-top:6px} /* #225: Einleitung unter der Ueberschrift, Paket umrandet, Vorteile daneben */
@media (max-width:750px){
  .preiskarte.paket .preis-links{padding:22px 18px}
}
/* Notizen #227–#233 (28.10.2026, Malina, /foerderservice/foerderrechner) */
ol.haken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}ol.haken li{display:flex;gap:12px;align-items:flex-start;font-size:18px;line-height:1.45}
.haken .nr{flex:none;width:26px;height:26px;border-radius:50%;background:#eaf5ef;color:var(--gruen-text);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;line-height:1}.dunkel .haken .nr{background:var(--gelb);color:var(--petrol)} /* #231: nummerierte Wix-Liste */
.listenkarte ol.haken{gap:0;margin:0}.listenkarte ol.haken li{padding:18px 0;border-top:1px solid var(--rand);font-size:16px;line-height:1.55}.listenkarte ol.haken li:last-child{border-bottom:1px solid var(--rand)}.dunkel .listenkarte ol.haken li{border-color:var(--rand-dunkel);color:var(--text-hell)}
.liste-links .text-links .listenkarte{position:static;margin-top:0;padding:0}.liste-links .text-links .lese.fliess>p:last-child{margin-bottom:0}.liste-links .listenkarte ul.haken,.liste-links .listenkarte ol.haken{margin-top:0}.liste-links .text-rechts{padding-top:6px}.liste-links .text-rechts .lese.fliess{margin-top:0} /* #230/#232/#233: Liste unter ihrem Einleitungssatz, Folgeabsaetze rechts */
.sek.text:not(.dunkel):not(.grau)+.sek.einbettung.direkt:not(.dunkel):not(.grau){padding-top:8px} /* #229: Widget direkt unter dem hellen Text ohne doppelten Abstand */
/* Notizen #234–#264 (29.10.2026, Malina: Foerderrechner, /foerderservice, /heizlastberechnung, Kompakt-Seiten) */
.liste-links .text-raster{row-gap:0}.liste-links .ll-kopf{grid-column:1;grid-row:1}.liste-links .text-links{grid-column:1;grid-row:2}.liste-links .text-rechts{grid-column:2;grid-row:2;padding-top:0}.liste-links .ll-kopf{margin-bottom:24px} /* #235/#238/#239: rechts beginnt auf Hoehe des Einleitungssatzes */
.liste-links .ll-nach{margin-top:24px}.liste-links .ll-nach>p:last-child{margin-bottom:0} /* #236/#237: einzelner Schlussabsatz unter der Liste */
.sek.einbettung.direkt:not(.dunkel):not(.grau)+.sek.text:not(.dunkel):not(.grau){padding-top:24px} /* #234: Text direkt unter dem Rechner ohne doppelten Abstand */
.sek.text.neben:not(.liste-links) .text-rechts>.listenkarte>ul.haken:first-child{margin-top:0} /* #241: Liste rechts beginnt auf Hoehe der Ueberschrift */
.preiskarte.paket .paket-name{font-size:26px;line-height:1.2;margin:0 0 4px}.preiskarte.paket.dunkel .paket-name{color:var(--weiss)} /* #242 */
.karte .unterzeile{margin:2px 0 4px;font-size:16px;line-height:1.55;color:var(--text-2)}.dunkel .karte .unterzeile{color:var(--text-hell)} /* #244–#246: Unterzeile ohne Haken */
.erk.symbole.vier .lese.fliess{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 40px} /* #247: 7 Symbole = 4 + 3 */
.sek.text .sticker.eck{top:-158px;left:auto;right:40px;z-index:3}.sek.text.nach-hero .sticker.eck{right:auto;left:360px} /* #658: Eck-Sticker rechts auf der Kante zum Abschnitt davor; direkt unter dem Hero links (#258/#262: rechts laege er auf den Hero-Siegeln) */
.kopf .usps{display:flex;gap:0;align-items:center;font-size:14px;color:var(--text-2);margin-left:auto;margin-right:28px}.kopf .usps strong{color:var(--text)}.kopf .usps span+span::before{content:"";display:inline-block;width:1px;height:16px;background:var(--rand);margin:0 22px;vertical-align:middle}.kopf.dunkel .usps{color:rgba(255,255,255,.8)}.kopf.dunkel .usps strong{color:#fff}.kopf.mit-usps .kb,.kopf.nur-logo .kb{display:flex;align-items:center}.kopf.nur-logo .kb{justify-content:flex-start}@media(max-width:1100px){.kopf .usps{display:none}} /* #656/#650 */
.fuss.kurz{padding:28px 0}.fuss.kurz .fuss-unten{border-top:0;padding-top:0;margin-top:0} /* #651 */
.hero.hell.zentriert .hero-raster{grid-template-columns:1fr;justify-items:center}.hero.hell.zentriert .hero-inhalt{text-align:center;max-width:960px;align-items:center;margin:0 auto}.hero.hell.zentriert .titel-zeile{display:flex;align-items:center;gap:32px;justify-content:center}.hero.hell.zentriert .titel-zeile .sticker{position:static;flex:none;transform:rotate(8deg)}.hero.hell.zentriert .haken{justify-content:center;display:flex;flex-wrap:wrap}.hero.hell.zentriert .knoepfe{justify-content:center}.hero.hell.zentriert .lead{margin-left:auto;margin-right:auto} /* #652–#655 */
.band{position:relative}.band .sticker.band-eck{position:absolute;right:80px;top:-74px;width:150px;height:150px;transform:rotate(8deg);z-index:3} /* #646/#663: Sticker als Kreis rechts auf dem Uebergang der Abschnitte */
.band-siegel{display:flex;gap:14px;align-items:center;margin-right:8px}.band-siegel img{height:46px;width:auto;border-radius:6px;background:#fff;padding:4px} /* #664 */
.karte .karten-nr{display:block;font-size:34px;font-weight:800;color:var(--gruen);line-height:1;margin-bottom:10px} /* #660 */
.karte.zitat{position:relative;overflow:hidden}.karte.zitat::before{content:"“";position:absolute;right:18px;top:-6px;font-size:150px;line-height:1;font-weight:800;color:var(--gruen);opacity:.12;pointer-events:none}.karte.zitat.mit-eckbild::before{top:96px}.karte.zitat .karten-eck{border-radius:50%;width:88px;height:88px;object-fit:cover;top:18px;right:18px}.karte.zitat.mit-eckbild>h3{padding-right:100px}.karte.zitat.mit-eckbild>h2.wie-h3,.karte.zitat.mit-eckbild>h1.wie-h3{padding-right:100px} /* #641–#644 */
.karte.zitat.mit-eckbild{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:14px;align-items:center;align-content:start}.karte.zitat.mit-eckbild>.karten-eck{position:static;grid-column:2;grid-row:1;margin:-6px -6px 0 0}.karte.zitat.mit-eckbild>h3{grid-column:1;grid-row:1;padding-right:0;margin:0}.karte.zitat.mit-eckbild>h2.wie-h3,.karte.zitat.mit-eckbild>h1.wie-h3{grid-column:1;grid-row:1;padding-right:0;margin:0}.karte.zitat.mit-eckbild>:not(.karten-eck):not(h3){grid-column:1 / -1;margin-top:0}.karte.zitat.mit-eckbild>:not(.karten-eck):not(h2.wie-h3),.karte.zitat.mit-eckbild>:not(.karten-eck):not(h1.wie-h3){grid-column:1 / -1;margin-top:0} /* Malina 05.11.2026 (#1454/#1455/#1484/#1529/#1530): Foto liegt nie mehr ueber dem Text – Name neben dem Foto, Zitat darunter */
@media(max-width:750px){.band .sticker.band-eck{position:static;transform:none;width:auto;height:auto;border-radius:999px;padding:8px 14px;font-size:14px;display:inline-flex;margin-bottom:12px}.hero.hell.zentriert .titel-zeile{flex-direction:column;gap:12px}}
.zaehler.symbolfeld{width:56px;height:56px;border-radius:16px;background:#eaf5ef;padding:0}.zaehler.symbolfeld img{width:36px;height:36px;object-fit:contain;display:block;mix-blend-mode:multiply}.zaehler.symbolfeld.petrol{background:var(--petrol)}.zaehler.symbolfeld.petrol img{width:40px;height:40px;mix-blend-mode:normal;border-radius:8px} /* #221/#259/#263 */
.nd .ng>a.gt{cursor:pointer;text-decoration:none} /* #268–#271: Gruppe selbst ist der Verweis */
.hero.hell.pillen ul.haken{max-width:560px} /* #273: Hakenzeile laeuft nicht mehr an die Pille "Förderberatung" heran */
.faq-raster.ohne-kopf{grid-template-columns:minmax(0,1fr)} /* #267: ohne Ueberschrift Fragen ueber die volle Breite */
.sek.text.neben.ab-text .text-raster{row-gap:0}.sek.text.neben.ab-text .nb-kopf{grid-column:1;grid-row:1;margin-bottom:24px}.sek.text.neben.ab-text .text-links{grid-column:1;grid-row:2}.sek.text.neben.ab-text .text-rechts{grid-column:2;grid-row:2}
.sek.text.neben.ab-text .nb-sticker{grid-column:2;grid-row:1;position:static;justify-self:end;align-self:start;width:168px;height:168px;font-size:14px;line-height:1.3;padding:20px;transform:rotate(10deg);margin:-12px 8px 16px 0} /* #274/#275/#303: Liste auf Hoehe des Textes, Sticker rund oben rechts */
.lese .kasten{border:2px solid var(--gruen);border-radius:18px;padding:22px 26px;margin:20px 0}.lese .kasten>:first-child{margin-top:0}.lese .kasten>:last-child{margin-bottom:0}.dunkel .lese .kasten{border-color:var(--gruen-hell)}.lese .kasten h3,.erk .lese.fliess .kasten h3{font-size:21px;line-height:1.3;text-transform:none;letter-spacing:0;font-weight:700;margin:0 0 12px;color:var(--text)}.lese .kasten h2.wie-h3,.lese .kasten h1.wie-h3,.erk .lese.fliess .kasten h2.wie-h3,.erk .lese.fliess .kasten h1.wie-h3{font-size:21px;line-height:1.3;text-transform:none;letter-spacing:0;font-weight:700;margin:0 0 12px;color:var(--text)}.dunkel .lese .kasten h3,.dunkel .erk .lese.fliess .kasten h3{color:var(--weiss)}.dunkel .lese .kasten h2.wie-h3,.dunkel .lese .kasten h1.wie-h3,.dunkel .erk .lese.fliess .kasten h2.wie-h3,.dunkel .erk .lese.fliess .kasten h1.wie-h3{color:var(--weiss)} /* #310: Wix-Kaestchen bleiben Kaesten, Titel als Ueberschrift */
.karte .ktitel-ikon{display:flex;align-items:center;gap:14px}.karte .ktitel-ikon h3{margin:0}.karte .ktitel-ikon h2.wie-h3,.karte .ktitel-ikon h1.wie-h3{margin:0}.karte .ktitel-ikon .symbol{flex:none;background:#e8f3ee}.karte .ktitel-ikon .symbol img{width:34px;height:34px;object-fit:contain;display:block;mix-blend-mode:multiply} /* #306 */
.erk-folge{padding-top:56px} /* #291/#292/#296: weitere Zwischenueberschrift = eigene Zeile */
.sek.foto.reveal{clip-path:inset(0)}.sek.foto.reveal .fotoband{position:fixed;top:0;left:0;width:100%;height:100vh;object-position:50% 50%;transform:none;will-change:auto} /* #278/#299/#122: Wix-Reveal */
.hinweis.betont{background:#fdf6dc;border:2px solid var(--gelb);margin:20px 0}.hinweis.betont svg{color:#b8860b}.hinweis.betont .hw-text p{margin:0 0 10px}.hinweis.betont .hw-text p:last-child{margin-bottom:0}.dunkel .hinweis.betont{background:rgba(245,199,69,.12)}.dunkel .hinweis.betont .hw-text p{color:var(--weiss)} /* #295/#312: Wix-Hinweiskaestchen hervorgehoben, Absaetze untereinander */
.liste-links .ll-vor{margin-top:20px}.liste-links .ll-vor>:last-child{margin-bottom:0} /* #300 */
.lese.fliess>p.label-zeile{margin:6px 0 -8px;color:var(--text)}.dunkel .lese.fliess>p.label-zeile{color:var(--weiss)} /* #320–#325, #348/#349: Zwischenzeile fett, dicht am Absatz */
.karte p.kzeile{margin:0 0 12px}.karte p.kzeile:last-child{margin-bottom:0} /* #356–#358, #390: "Merkmale:"/"Kosten:"-Zeilen ohne Haken, je eigene Zeile */
.karte p.kbeschreibung{margin:0 0 14px} /* #367–#370: Beschreibung vor "Eigenschaften:" ohne Haken */
.symbol img.einfaerben,.karte .symbol img.einfaerben{filter:grayscale(1) sepia(1) saturate(1.3) hue-rotate(98deg) brightness(1.08);mix-blend-mode:multiply} /* #318/#389: farbiges Wix-Symbol im Gruen der anderen */
.haken ul.unter{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.haken ul.unter li{display:block;padding:0;border:0;margin:0;font-weight:400;color:var(--text-2)}.dunkel .haken ul.unter li{color:var(--text-hell)} /* #328–#334: Unterpunkte der nummerierten Daemmstoffe */
.fluss>h4.gruppe{font-size:18px;font-weight:700;margin:10px 0 -10px;color:var(--text)}
/* #328–#334: Unterpunkte der nummerierten Daemmstoffe */
.fluss>h3.wie-h4.gruppe,/* #328–#334: Unterpunkte der nummerierten Daemmstoffe */
.fluss>h2.wie-h4.gruppe,/* #328–#334: Unterpunkte der nummerierten Daemmstoffe */
.fluss>h1.wie-h4.gruppe{font-size:18px;font-weight:700;margin:10px 0 -10px;color:var(--text)}.dunkel .fluss>h4.gruppe{color:var(--weiss)}.dunkel .fluss>h3.wie-h4.gruppe,.dunkel .fluss>h2.wie-h4.gruppe,.dunkel .fluss>h1.wie-h4.gruppe{color:var(--weiss)}.fluss>h4.gruppe+ul.haken{margin-top:0}.fluss>h3.wie-h4.gruppe+ul.haken,.fluss>h2.wie-h4.gruppe+ul.haken,.fluss>h1.wie-h4.gruppe+ul.haken{margin-top:0} /* #359: Stichwort mit seinen Haken darunter */
.sek.karten.fortsetzung{padding-top:0}.sek.text:not(.dunkel):not(.grau)+.sek.karten.fortsetzung:not(.dunkel):not(.grau){background:transparent}.sek.karten.fortsetzung .kopfzeile h2{font-size:28px}.sek.karten.fortsetzung .kopfzeile h1.wie-h2{font-size:28px} /* #352: "Die Vorteile:" gehoert zum Abschnitt davor */
.sek.text.neben.nach-liste .text-links{position:sticky;top:110px;align-self:start}.sek.text.neben.nach-liste .nl-nach{margin-top:24px} /* #392–#394 */
.sek.band.gruen{background:var(--gruen)}.sek.band.gruen p,.sek.band.gruen .notiz{color:var(--weiss)}main>.sek.band.gruen:last-child{border-bottom:0}.sek.band.gruen .knopf.rand-hell{border:1.5px solid rgba(255,255,255,.85);color:var(--weiss)}.sek.band.gruen .knopf.rand-hell:hover{background:rgba(255,255,255,.12)} /* #431 ff.: Wix-gruene Baender bleiben gruen */
.karte .symbol.kb,.dunkel .karte .symbol.kb{background:#e8f3ee;margin-bottom:18px}.karte .symbol.kb .kbild{width:40px;height:40px;border-radius:0;margin:0;mix-blend-mode:multiply}.dunkel .karte .symbol.kb .kbild{mix-blend-mode:normal;filter:brightness(0) invert(36%) sepia(40%) saturate(640%) hue-rotate(108deg) brightness(94%)} /* #440/#471/#490: Wix-Kartensymbole gruen auf hellgruenem Feld wie die anderen Seiten */
.schritte .bahn>.knoepfe{justify-content:center} /* #473/#498: Knopf unter den Schritten mittig */
.erk.symbole .kn-gruppe,.erk.symbole .text-rechts>.knoepfe{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:12px;width:100%;align-self:stretch}.erk.symbole .kn-gruppe .knoepfe{justify-content:center} /* #422: Knopf unter dem Symbolraster mittig */
@media (min-width:1101px){.kontakt-raster.mit-portraits:has(.portraits2.n2){grid-template-columns:minmax(0,1fr) 660px;gap:48px}} /* #442: zwei Ansprechpartner etwas breiter */
.knopf .tel-ikon{flex:none;margin-right:8px;vertical-align:-3px}.fuss-marke a.tel{display:inline-flex;align-items:center;gap:8px}.fuss-marke a.tel .tel-ikon{color:var(--gruen-hell)} /* #410/#464: Telefon-Symbol */
a.knopf.gelb:hover,.dunkel a.knopf.gelb:hover,.hero a.knopf.gelb:hover,.bk-text a.knopf.gelb:hover,.kopf.dunkel.fest a.knopf.gelb:hover,.kopf a.knopf.gelb:hover{color:var(--petrol)} /* #421: gelber Knopf behaelt beim Ueberfahren ueberall die Schriftfarbe */
.fotos-ganz .karte .unterzeile{margin:-6px 0 0;font-size:15px;font-weight:600;color:var(--gruen-text)}.kchips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}.kchip{font-size:13px;font-weight:600;line-height:1.2;padding:6px 11px;border-radius:999px;background:#e8f3ee;color:var(--gruen-text)} /* #399/#400: Titel unter dem Namen, Merkmale als Pillen */
.knoepfe.kn-frage{align-items:flex-start}.kn-mit-notiz{display:flex;flex-direction:column;align-items:center;gap:10px}.kn-mit-notiz .notiz{margin:0;text-align:center;font-size:14px} /* #426/#462/#481/#487: Fragen-Hinweis unter dem rechten Knopf */
.hero.dunkel.sticker-neben .titel-zeile h1{max-width:14em} /* #418/#425: Kreis-Sticker rechts neben der Ueberschrift */
@media (min-width:1101px){.sek.karten>.bahn,.sek.preisblock .preiskarte{position:relative}.sek.karten .bahn .sticker.eck,.sek.preisblock .preiskarte .pille-flach{position:absolute;top:-44px;right:-16px;left:auto;width:150px;height:150px;border-radius:50%;padding:18px;margin:0;transform:rotate(10deg);display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;font-weight:700;line-height:1.25;z-index:3;background:linear-gradient(135deg,var(--gelb) 0%,var(--gruen) 100%);color:var(--weiss);border:0;box-shadow:0 14px 34px rgba(15,41,46,.22)}} /* #432/#467/#489/#492: Hinweis-Sticker als Kreis an der oberen rechten Ecke */
@media (max-width:1100px){
  .liste-links .ll-kopf,.liste-links .text-links,.liste-links .text-rechts{grid-column:auto;grid-row:auto}.liste-links .text-raster{row-gap:28px}.liste-links .ll-kopf{margin-bottom:0}
  .sek.text.neben.ab-text .nb-kopf,.sek.text.neben.ab-text .text-links,.sek.text.neben.ab-text .text-rechts,.sek.text.neben.ab-text .nb-sticker{grid-column:auto;grid-row:auto}.sek.text.neben.ab-text .text-raster{row-gap:28px}.sek.text.neben.ab-text .nb-kopf{margin-bottom:0}
  .sek.text.neben.ab-text .nb-sticker{justify-self:start;width:auto;height:auto;border-radius:999px;padding:10px 16px;transform:none;margin:0}
  .erk.symbole.vier .lese.fliess{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sek.text.neben.nach-liste .text-links{position:static} /* #392–#394: untereinander kein Mitlaufen */
}
@media (max-width:750px){
  .knoepfe.kn-frage{flex-direction:column;align-items:stretch}.kn-mit-notiz{align-items:stretch;width:100%}
  .erk.symbole.vier .lese.fliess{grid-template-columns:minmax(0,1fr);gap:24px}
  .zaehler.symbolfeld{width:48px;height:48px;border-radius:14px}.zaehler.symbolfeld img{width:30px;height:30px}
}
/* Notizen #506–#567 (29.10.2026 abends, Malina: Energieausweis-Seiten, Kosten, Effizienzklasse, Blogbeitrag) */
.fuss-marke a.tel .tel-ikon{width:18px;height:18px} /* Fusszeile: die Logo-Regel .fuss-marke svg blies das Telefon-Symbol auf 104 px auf */
.sek.band.gruen a:not(.knopf){color:var(--weiss);text-decoration:underline;text-underline-offset:3px}.sek.band.gruen a:not(.knopf):hover{color:var(--weiss);text-decoration-thickness:2px} /* #566: Verweise auf Gruen weiss und unterstrichen */
a.knopf.rand:hover{color:var(--text)}.dunkel a.knopf.rand:hover,.hero.dunkel a.knopf.rand:hover,a.knopf.rand-hell:hover,a.knopf.gruen:hover{color:var(--weiss)} /* #541: Knoepfe behalten beim Ueberfahren ihre Schriftfarbe */
.erk .lese.fliess h2.als-absatz,.erk .lese.fliess h3.als-absatz,.lese.fliess h2.als-absatz{font-size:17px;line-height:1.6;font-weight:400;letter-spacing:0;text-transform:none;margin:0;color:var(--text-2)}
/* #541: Knoepfe behalten beim Ueberfahren ihre Schriftfarbe */
.erk .lese.fliess h1.wie-h2.als-absatz,.erk .lese.fliess h2.wie-h3.als-absatz,.erk .lese.fliess h1.wie-h3.als-absatz,.lese.fliess h1.wie-h2.als-absatz{font-size:17px;line-height:1.6;font-weight:400;letter-spacing:0;text-transform:none;margin:0;color:var(--text-2)}.dunkel .erk .lese.fliess h2.als-absatz,.dunkel .erk .lese.fliess h3.als-absatz,.dunkel .lese.fliess h2.als-absatz{color:var(--text-hell)}.dunkel .erk .lese.fliess h1.wie-h2.als-absatz,.dunkel .erk .lese.fliess h2.wie-h3.als-absatz,.dunkel .erk .lese.fliess h1.wie-h3.als-absatz,.dunkel .lese.fliess h1.wie-h2.als-absatz{color:var(--text-hell)} /* #520/#521/#524/#525: Wix-h2 als Absatz in Fliesstextgroesse */
.lese .tipp{background:#e8f3ee;border-radius:18px;padding:18px 22px;margin:8px 0}
/* #520/#521/#524/#525: Wix-h1.wie-h2 als Absatz in Fliesstextgroesse */
.lese .tipp{background:#e8f3ee;border-radius:18px;padding:18px 22px;margin:8px 0}.lese .tipp p{margin:0;font-size:16px;line-height:1.6;color:var(--text)}.dunkel .lese .tipp{background:rgba(143,209,179,.14)}.dunkel .lese .tipp p{color:var(--weiss)} /* #522: Tipp im hellgruenen Kasten */
.lese .tab th,.lese .tab td{overflow-wrap:normal;word-break:normal;hyphens:manual} /* #543/#551: Spalten so breit, dass Woerter nicht mitten im Wort umbrechen */
.band .band-zeile>div:first-child:empty{display:none}.band .band-zeile:has(>div:first-child:empty){justify-content:center} /* #556: Band nur mit Knopf -> Knopf mittig */
.hero.dunkel .titel-zeile{gap:28px} /* #567 */
.karte .symbol.kb{display:flex;align-items:center;justify-content:center} /* #565: Symbol mittig im Quadrat */
.hero.dunkel .hero-inhalt>.lead{max-width:700px} /* #563: Hero-Einleitung etwas schmaler */
.hero.hell .hero-raster:not(:has(.hero-bild)):not(:has(.hp-buehne)){grid-template-columns:minmax(0,1fr)}.hero.hell .hero-raster:not(:has(.hero-bild)):not(:has(.hp-buehne)) .hero-inhalt{max-width:1000px}.hero.hell .hero-raster:not(:has(.hero-bild)):not(:has(.hp-buehne)) h1{max-width:none} /* #509/#510: heller Hero ohne Foto nutzt die Breite */
.bildtext .fluss .knoepfe{flex-wrap:nowrap;gap:12px}.bildtext .fluss .knoepfe .knopf{padding-inline:20px;font-size:16px} /* #528: Knoepfe nebeneinander */
.schritte .karte.mit-eck{position:relative}.schritte .schritte-bild.eck{position:absolute;top:-34px;right:-18px;height:118px;width:auto;max-width:none;transform:rotate(8deg);filter:drop-shadow(0 10px 18px rgba(15,41,46,.18))} /* #564: Grafik in der Ecke des letzten Schritts */
.lese .chips .chip.zurueck{gap:8px}.lese .chips .chip.zurueck svg{flex:none} /* #560 */
.erk-folge.nur-knoepfe{padding-top:36px}.erk-folge.nur-knoepfe .knopf-titel{font-size:24px;line-height:1.3;font-weight:800;margin:0}.erk-folge.nur-knoepfe .knoepfe{margin-top:6px} /* #523 */
.sek.folge .erk-folge{padding-top:0} /* #552–#555: Zwischenueberschrift als eigener Abschnitt mit eigener Flaeche */
.bildtext .paar.kopf-links{align-items:start}.bildtext .paar.kopf-links .kopf-spalte{display:flex;flex-direction:column;gap:32px}.bildtext .paar.kopf-links .kopf-spalte .mkopf h2{font-size:36px}.bildtext .paar.kopf-links .kopf-spalte .mkopf h1.wie-h2{font-size:36px} /* #547: Ueberschrift links, Foto darunter, Text rechts */
@media (max-width:1100px){
  .bildtext .fluss .knoepfe{flex-wrap:wrap}
  .erk-folge.nur-knoepfe .text-links{display:none}
}
@media (max-width:750px){
  .hero.dunkel .titel-zeile{gap:14px}
  .schritte .schritte-bild.eck{height:84px;top:-22px;right:-6px}
}
/* Notizen #573–#601 (30.10.2026, Malina: /isfp, Kompakt-Seiten, /geschaeftskunden, /ueberuns, Karriere, Energieausweis) */
.karte.mit-eckbild{position:relative}.karte .karten-eck{position:absolute;top:-34px;right:-22px;width:132px;height:auto;max-width:none;z-index:2;pointer-events:none;border-radius:0}.karte.mit-eckbild>h3{padding-right:96px}.karte.mit-eckbild>h2.wie-h3,.karte.mit-eckbild>h1.wie-h3{padding-right:96px} /* #575: Kopfbild klein in der Ecke der Favoritenkarte */
.zaehler.symbolfeld.gruen img{mix-blend-mode:normal} /* #581: gruenes Symbol auf hellgruenem Feld */
.lese p.ein-1{margin-left:28px}.lese p.ein-2{margin-left:56px} /* #615–#629: nummerierte Absaetze eingerueckt statt mit Punkt */
.lese h3{font-size:24px}
/* #615–#629: nummerierte Absaetze eingerueckt statt mit Punkt */
.lese h2.wie-h3,/* #615–#629: nummerierte Absaetze eingerueckt statt mit Punkt */
.lese h1.wie-h3{font-size:24px}.lese h4{font-size:20px;margin-top:6px}.lese h3.wie-h4,.lese h2.wie-h4,.lese h1.wie-h4{font-size:20px;margin-top:6px} /* #606–#613: drei Ebenen I. (h2 30) > 1. (h3 24) > a. (h4 20) */
.cookie-erklaerung{margin-top:16px;font-size:15px}
/* #606–#613: drei Ebenen I. (h2 30) > 1. (h3 24) > a. (h3.wie-h4 20) */
.cookie-erklaerung,/* #606–#613: drei Ebenen I. (h2 30) > 1. (h3 24) > a. (h2.wie-h4 20) */
.cookie-erklaerung,/* #606–#613: drei Ebenen I. (h2 30) > 1. (h3 24) > a. (h1.wie-h4 20) */
.cookie-erklaerung,/* #606–#613: drei Ebenen I. (h2 30) > 1. (h2.wie-h3 24) > a. (h4 20) */
.cookie-erklaerung,/* #606–#613: drei Ebenen I. (h2 30) > 1. (h1.wie-h3 24) > a. (h4 20) */
.cookie-erklaerung,/* #606–#613: drei Ebenen I. (h1.wie-h2 30) > 1. (h3 24) > a. (h4 20) */
.cookie-erklaerung{margin-top:16px;font-size:15px}.cookie-erklaerung h3{font-size:22px;margin:32px 0 4px}.cookie-erklaerung h2.wie-h3,.cookie-erklaerung h1.wie-h3{font-size:22px;margin:32px 0 4px}.cookie-erklaerung h4{font-size:17px;margin:18px 0 2px}.cookie-erklaerung h3.wie-h4,.cookie-erklaerung h2.wie-h4,.cookie-erklaerung h1.wie-h4{font-size:17px;margin:18px 0 2px}.cookie-erklaerung p{font-size:15px;line-height:1.55;margin:4px 0}.cookie-erklaerung table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-size:14px}.cookie-erklaerung th,.cookie-erklaerung td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--rand)}.cookie-erklaerung th{font-weight:700}.cookie-erklaerung td,.cookie-erklaerung th{overflow-wrap:normal;word-break:normal}.cookie-erklaerung td:first-child{white-space:nowrap}.cookie-erklaerung .ccm-cookie-declaration--table-wrapper{overflow-x:auto}.cookie-erklaerung .ccm--visible-mobile{display:none}@media(max-width:750px){.cookie-erklaerung .ccm--visible-tablet-up{display:none}.cookie-erklaerung .ccm--visible-mobile{display:block}} /* #614 */
.lese .logos img{border-radius:0} /* #593: die Bildrundung (.lese img) schnitt die Ecken der Logos ab ("Deutsche Energie-Agentur") */
.eb-kopf{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}.eb-kopf .mkopf h2{margin:0}.eb-kopf .mkopf h1.wie-h2{margin:0}.eb-kopf p{margin:0;max-width:860px;font-size:18px;line-height:1.6;color:var(--text-2)}.dunkel .eb-kopf p{color:var(--text-hell)} /* #595: Text gehoert zur Einbettung darunter */
.bildtext figure .collage{position:relative;width:100%}.bildtext figure .collage img{position:absolute;height:auto;max-width:none;border-radius:0} /* #596/#600: Wix-Collage (Monitor + Bildschirm + Telefon) in Wix-Lage */
.sek.karten:not(.dunkel) .karten-nach .zahlung.dunkel{background:var(--weiss);border-color:var(--rand)}.sek.karten:not(.dunkel) .zahlung.dunkel .zt{color:var(--text-3)}.sek.karten:not(.dunkel) .zahlung.dunkel .weg{background:#eef2f4;color:var(--petrol)}.sek.karten:not(.dunkel) .zahlung.dunkel .logos img{filter:brightness(0);opacity:.75} /* #598: auf heller Flaeche weisser Kasten, Logos dunkel */
.preiskarte.dunkel .zahlung{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel)}.preiskarte.dunkel .zahlung .zt{color:var(--text-hell)}.preiskarte.dunkel .zahlung .weg{background:rgba(255,255,255,.12);color:#fff}.preiskarte.dunkel .zahlung .logos img{filter:brightness(0) invert(1);opacity:.9} /* #601: in der dunklen Preiskarte wie der Kasten "Das ist enthalten" */
.karten-nach.zwei:has(.kn-rechts.angebot){align-items:stretch}.karten-nach.zwei .kn-links:has(>.zahlung:only-child){align-items:stretch}.karten-nach.zwei .kn-links>.zahlung:only-child{margin:0;justify-content:center} /* #599: Zahlungskasten so hoch wie der Kasten daneben */
@media (min-width:1101px){
  .hero.dunkel.hero-lage{min-height:var(--hero-h,640px)}.hero.dunkel.hero-lage .hg{object-position:var(--hg-pos,75% 35%)} /* #587: nur Desktop, Telefon behaelt seinen Ausschnitt */
  .hero.dunkel.lang.sticker-neben .hero-inhalt{max-width:1000px}.hero.dunkel.lang.sticker-neben .titel-zeile h1{max-width:none} /* #573: lange Ueberschrift in zwei Zeilen, Kreis daneben */
  .sek.karten .bahn .mkopf .sticker.eck{top:-159px} /* #576: Kreis neben der Abschnittsueberschrift sitzt auf der Kante zum Abschnitt davor */
  .sek.text.neben.ab-text .text-raster{position:relative}.sek.text.neben.ab-text .nb-sticker{position:absolute;grid-column:auto;grid-row:auto;top:-168px;right:0;margin:0;z-index:3} /* #589 */
  .sek.text.neben.ab-text .text-rechts{grid-row:1/span 2}.sek.text.neben.ab-text:has(.nb-kopf .ueber) .text-rechts{padding-top:31px} /* #590: Liste beginnt auf Hoehe der Ueberschrift (ersetzt #275/#303) */
  .hero.pillen .hero-raster{grid-template-columns:minmax(0,1fr) 500px}.hero.pillen .hp-buehne{zoom:.83}.hero.hell.pillen h1{font-size:48px} /* #588: Gebaeude wieder rechts, etwas kleiner */
}
@media (min-width:751px){
  .hero.dunkel.mit-sticker.sticker-neben .hero-inhalt .sticker.lang{width:158px;height:158px;font-size:14px;line-height:1.25;padding:16px} /* #583/#586: laengerer Text im Kreis */
}
@media (max-width:750px){
  .karte .karten-eck{width:92px;top:-24px;right:-8px}.karte.mit-eckbild>h3{padding-right:66px}.karte.mit-eckbild>h2.wie-h3,.karte.mit-eckbild>h1.wie-h3{padding-right:66px}
}
/* Notizen #762–#835 (02.11.2026 abends, Malina) */
.erk .lese.fliess h3.listenkopf{font-size:18px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text);margin-top:0}
Malina) */
.erk .lese.fliess h2.wie-h3.listenkopf,Malina) */
.erk .lese.fliess h1.wie-h3.listenkopf{font-size:18px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text);margin-top:0}.dunkel .erk .lese.fliess h3.listenkopf{color:var(--weiss)}.dunkel .erk .lese.fliess h2.wie-h3.listenkopf,.dunkel .erk .lese.fliess h1.wie-h3.listenkopf{color:var(--weiss)} /* #806 */
.erk .lese.fliess ul.haken.h3liste{margin:0}.erk .lese.fliess .h3liste h3{font-size:18px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;color:inherit;margin:0}.erk .lese.fliess .h3liste h2.wie-h3,.erk .lese.fliess .h3liste h1.wie-h3{font-size:18px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;color:inherit;margin:0} /* #805: Ueberschriften-Reihe als Hakenliste */
.erk .lese.fliess .h3liste+.knopf,.erk .lese.fliess .h3liste+.knoepfe{margin-top:22px} /* #807 */
.erk .lese.fliess .h3liste h3{text-wrap:wrap}
/* #807 */
.erk .lese.fliess .h3liste h2.wie-h3,/* #807 */
.erk .lese.fliess .h3liste h1.wie-h3{text-wrap:wrap}
.erk.symbole .ikonzeile{padding:24px;border:1px solid var(--rand);border-radius:var(--radius-k);background:var(--weiss)}.dunkel .erk.symbole .ikonzeile{background:rgba(255,255,255,.05);border-color:var(--rand-dunkel)} /* #831: Symbolzeilen je in einem Kasten */
@media (min-width:1101px){.karten-nach.zwei .kn-rechts.angebot{flex:0 0 calc((100% - 48px) / 3);max-width:none}} /* #767: Nichtwohngebaeude-Kasten so breit wie eine Karte darueber */
/* Notizen-Nachlauf 02.11.2026 spät (#428–#438, Malina) */
.bildtext .fluss .mkopf+p{margin-top:0} /* #430: Einleitung naeher an der Ueberschrift */
.preis-rechts .extra-frage{margin-top:14px;padding:0 4px;font-size:15px;line-height:1.5;color:var(--text-2)}.preis-rechts .extra-frage p{margin:0}.preis-rechts .extra-frage a{font-weight:600}.dunkel .preis-rechts .extra-frage,.preiskarte.dunkel .preis-rechts .extra-frage{color:rgba(255,255,255,.7)} /* #451 */
@media (min-width:1101px){.preiskarte.titel-lang .preis-links h2{font-size:36px;line-height:1.15;text-wrap:balance}.preiskarte.titel-lang .preis-links h1.wie-h2{font-size:36px;line-height:1.15;text-wrap:balance}} /* #450 */
.listenkarte.mit-einleitung h3{margin:0 0 6px}
/* #450 */
.listenkarte.mit-einleitung h2.wie-h3,/* #450 */
.listenkarte.mit-einleitung h1.wie-h3{margin:0 0 6px}.listenkarte .lk-einleitung{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--text-2)}.dunkel .listenkarte .lk-einleitung{color:rgba(255,255,255,.78)} /* #456/#457 */
/* Runde 21 B (Malina #843 zu #827): Preiskarte ohne inneren Kasten — Liste „Das ist enthalten“ direkt auf der Karte, rechts neben feiner Linie, Haelften gleich breit */
.preiskarte:has(>.preis-rechts .enthalten){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}.preiskarte:has(>.preis-rechts .enthalten)>.preis-links{padding-right:56px}.preiskarte:has(>.preis-rechts .enthalten)>.preis-rechts{align-self:stretch;justify-content:center;border-left:1px solid var(--rand);padding-left:56px}.preiskarte.dunkel:has(>.preis-rechts .enthalten)>.preis-rechts{border-left-color:var(--rand-dunkel)}
.preiskarte .preis-rechts .enthalten,.preiskarte.dunkel .preis-rechts .enthalten{background:none;border:0;padding:0;border-radius:0}.preiskarte .preis-rechts .enthalten .et{font-size:18px}.preiskarte .preis-rechts .enthalten ul.haken li{font-size:18px}
/* #846–#848 (zu #517/#526/#527): Bild zwischen den Absaetzen in Original-Reihenfolge */
.zwischen .lese .zwischen-bild{display:block;width:100%;height:auto;max-width:none;border-radius:var(--radius-k);margin:8px 0 4px}
.zwischen.einspaltig .text-raster.erk{grid-template-columns:minmax(0,1fr);gap:20px;max-width:980px}.zwischen.einspaltig .text-links{position:static}
/* Runde 11 A (Malina #840 zu #638–#640): Woerter rechts vom Hausbild, Ellenbogen-Linie zum gelben Punkt auf dem Bauteil */
.lese .bauteil-grafik{position:relative;width:100%;aspect-ratio:1000/439;margin:24px 0}.lese .bauteil-grafik img{position:absolute;left:0;top:0;width:66.2%;height:100%;max-width:none;margin:0;object-fit:cover;border-radius:var(--radius-k)}
.bauteil-grafik svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bauteil-grafik .etik{position:absolute;left:72.5%;transform:translateY(-50%);font-weight:800;font-size:20px;color:var(--petrol);white-space:nowrap}.dunkel .bauteil-grafik .etik{color:var(--weiss)}
.bauteil-liste{display:none;list-style:none;padding:0;margin:16px 0 0;gap:12px 24px;flex-wrap:wrap}.bauteil-liste li{font-weight:700;color:var(--petrol);display:flex;align-items:center;gap:8px}.bauteil-liste b{width:24px;height:24px;border-radius:8px;background:var(--gruen);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
/* Runde 29 A (Malina #1303 zu #1222, #1219–#1221): Energieausweis-Karten — Favorit dunkel und etwas groesser, Raender dunkler, Knopf gelb */
.sek.karten.ausweis-karten .karte{border-color:#c9d6d2}
.sek.karten.ausweis-karten .karte.favorit{background:var(--petrol);border-color:var(--petrol);box-shadow:0 24px 48px rgba(15,41,46,.25)}
.sek.karten.ausweis-karten .karte.favorit h3,.sek.karten.ausweis-karten .karte.favorit .kfuss .preis,.sek.karten.ausweis-karten .karte.favorit p{color:#fff}
.sek.karten.ausweis-karten .karte.favorit h2.wie-h3,.sek.karten.ausweis-karten .karte.favorit h1.wie-h3{color:#fff}
.sek.karten.ausweis-karten .karte.favorit .ueber,.sek.karten.ausweis-karten .karte.favorit .kfuss .preis small,.sek.karten.ausweis-karten .karte.favorit .preishinweis{color:var(--gruen-hell)}
.sek.karten.ausweis-karten .karte.favorit .badge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.sek.karten.ausweis-karten .karte.favorit .kfuss{border-color:rgba(255,255,255,.18)}
@media (min-width:901px){.sek.karten.ausweis-karten .raster{align-items:center}.sek.karten.ausweis-karten .karte.favorit{transform:scale(1.06);z-index:1}}
.sek.preisblock ul.haken li strong{font-weight:inherit} /* #1363/#1401: alle Punkte der Preisblock-Liste gleich leicht, auch der erste (Wix-Fettung) */
main .lese .bilderreihe img{aspect-ratio:1/1} /* #1386: Pressebilder quadratisch (Regel #1152 griff wegen geringerer Spezifitaet nicht) */
main .cta-kasten p,main .cta-kasten em,main .cta-kasten i{font-style:normal} /* #1389: Ratgeber-Aufrufkasten nicht kursiv */
/* Malina 05.11.2026 (#1346/#1353/#1355/#1372/#1379): weisses Partnerlogo auf dem dunklen Partnerkopf (wie das mvn-Logo), farbiges nach dem Scrollen */
.kopf.partner.dunkel .lockup img.pl-w{filter:none;display:block}.kopf.partner.dunkel .lockup img.pl-f{display:none;filter:none}
.kopf.partner.dunkel.fest .lockup img.pl-w{display:none}.kopf.partner.dunkel.fest .lockup img.pl-f{display:block}
.hero[data-schleier="leicht"] .schleier{opacity:.72} /* #1335: Schleier weniger intensiv (je Seite) */
.sticker a.tel-auto{font-weight:800} /* #1334: Rufnummer im Kreis fett */
.autor img[src*="Profilbilder"]{object-fit:cover;object-position:50% 8%} /* #1256/#1392: Jonas-Foto als Autorenbild, Gesicht im Kreis */
.zahlung:not(.dunkel) .logos img[src*="Mastercard_wei_"]{filter:brightness(0);opacity:.75} /* #1362: weisses Mastercard-Zeichen auf hellem Zahlungskasten sichtbar */
.bauteil-grafik .m-pkt,.bauteil-grafik .m-pil{display:none}
@media (max-width:900px){.lese .bauteil-grafik{aspect-ratio:662/439}.lese .bauteil-grafik img{width:100%}.bauteil-grafik svg,.bauteil-grafik .etik{display:none}
/* Runde 27 B (Malina #1300 zu #1216): am Telefon weisse Wort-Pillen im Bild, kurzer Strich zum gelben Punkt am Bauteil; Liste entfaellt */
.bauteil-grafik .m-pkt{display:block;position:absolute;width:12px;height:12px;border-radius:50%;background:var(--gelb);border:3px solid var(--petrol);transform:translate(-50%,-50%);z-index:2}
.bauteil-grafik .m-pil{display:block;position:absolute;background:#fff;color:var(--petrol);font-weight:800;font-size:12px;line-height:1.3;border-radius:999px;padding:4px 10px;white-space:nowrap;box-shadow:0 4px 12px rgba(15,41,46,.25);transform:translate(-100%,-50%);z-index:1}
.bauteil-grafik .m-pil::after{content:"";position:absolute;left:100%;top:50%;width:20px;height:2px;background:var(--gruen)}}
/* Runde 20 A (Malina #856 zu #123/#125): einheitliches Symbolset — Linie 2,2 px Petrol auf mintfarbenem abgerundetem Feld */
.karte .symbol.satz,.dunkel .karte .symbol.satz{width:64px;height:64px;border-radius:18px;background:#e3f4ec;color:var(--petrol);display:flex;align-items:center;justify-content:center}.karte .symbol.satz svg{width:40px;height:40px}
.symbol.satz svg *,.ikon.satz svg *{fill:none!important;stroke:currentColor}
.ikon.satz{flex:none;width:52px;height:52px;border-radius:14px;background:#e3f4ec;color:var(--petrol);display:flex;align-items:center;justify-content:center}.ikon.satz svg{width:34px;height:34px}
/* Runde 19 B (Malina #855 zu #335): Ueberschrift volle Breite, Liste links, Bild schmal rechts mitlaufend; #860: Nummern im abgerundeten Quadrat wie die Symbole */
.paar.schmal-bild{grid-template-columns:minmax(0,1fr) 320px;gap:24px 48px;align-items:start}.paar.schmal-bild>.mkopf{grid-column:1/-1;grid-row:1;margin:0}.paar.schmal-bild>.fluss{grid-column:1;grid-row:2}
.paar.schmal-bild>figure{grid-column:2;grid-row:2;position:sticky;top:120px;margin:0}.paar.schmal-bild>figure img{height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;border-radius:var(--radius-k)}
@media (max-width:900px){.paar.schmal-bild{grid-template-columns:minmax(0,1fr)}.paar.schmal-bild>figure{grid-column:1;grid-row:3;position:static}}
.haken .nr{border-radius:8px}
/* Runde 12 A (Malina #842 zu #301): Teamfoto fuellt die ganze Bildkarte, Petrol-Verlauf von links, Text darueber */
.bk.voll{display:block;position:relative;min-height:620px}.bk.voll>img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 40%;transform:none!important}
.bk.voll::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,41,46,.92) 0%,rgba(15,41,46,.75) 45%,rgba(15,41,46,.25) 100%)}.bk.voll>.bk-text{position:relative;z-index:2;max-width:620px}
@media (max-width:900px){.bk.voll{min-height:0;display:flex;flex-direction:column}.bk.voll>img{position:static;height:260px;order:-1}.bk.voll::before{display:none}.bk.voll>.bk-text{max-width:none}}
/* Runde 10 D (Malina #838/#836/#837): Pfeilband 01–04, Texte darunter, Ergebnisbild oben in der fuenften Spalte */
.pband{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:6px;row-gap:22px;margin-top:40px;align-items:start}
.pband .chev{grid-row:1;position:relative;background:var(--petrol);color:#fff;height:72px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 50%,calc(100% - 28px) 100%,0 100%,28px 50%)}
.pband .chev:first-child{clip-path:polygon(0 0,calc(100% - 28px) 0,100% 50%,calc(100% - 28px) 100%,0 100%)}
.pband .chev:nth-child(2){background:#17464e}.pband .chev:nth-child(3){background:#2f7a5c}.pband .chev:nth-child(4){background:var(--gruen)}
.pband .ziel{grid-column:5;grid-row:1/span 2;display:flex;justify-content:center;align-items:flex-start;padding-left:16px}
.pband .ziel-bild{width:auto;max-width:100%;height:auto;max-height:240px;border-radius:12px;filter:drop-shadow(0 14px 24px rgba(15,41,46,.22))}
.sek.schritte .pband .karte{grid-row:2;background:transparent;border:0;padding:0 14px 0 0;border-radius:0;gap:10px;display:flex;flex-direction:column}
.pband .karte .nummer{display:none}.pband .karte h3{font-size:20px;margin:0}.pband .karte h2.wie-h3,.pband .karte h1.wie-h3{font-size:20px;margin:0}
@media (max-width:900px){.pband{grid-template-columns:minmax(0,1fr);row-gap:24px}.pband .chev{display:none}.pband .ziel{grid-column:1;grid-row:auto;order:9;padding:8px 0 0}.sek.schritte .pband .karte{grid-row:auto;padding:0}.pband .karte .nummer{display:block;font-size:44px}}
@media (max-width:750px){.preiskarte:has(>.preis-rechts .enthalten){grid-template-columns:minmax(0,1fr)}.preiskarte:has(>.preis-rechts .enthalten)>.preis-links{padding-right:0}.preiskarte:has(>.preis-rechts .enthalten)>.preis-rechts{border-left:0;border-top:1px solid var(--rand);padding:28px 0 0;margin-top:28px}.preiskarte.dunkel:has(>.preis-rechts .enthalten)>.preis-rechts{border-top-color:var(--rand-dunkel)}}
/* Runde 14 A (Malina #857 zu #308 ff.): Reiter als Pillen (aktiv Petrol), Inhalt des aktiven Reiters darunter; Bild wie im Entwurf unter der Reiter-Ueberschrift */
.lese .reiter{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 6px}.lese .reiter button{border:1px solid var(--rand);background:#fff;color:var(--petrol);font:700 15px "pjs","Plus Jakarta Sans",sans-serif;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.lese .reiter button:hover{border-color:var(--gruen)}.lese .reiter button.an{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.lese .reiter-panel{display:none}.lese .reiter-panel.an{display:flex;flex-direction:column;gap:12px}.lese .reiter-panel h3{font-size:22px;margin:4px 0 0}.lese .reiter-panel h2.wie-h3,.lese .reiter-panel h1.wie-h3{font-size:22px;margin:4px 0 0}.lese .reiter-panel h4{font-size:17px;margin:6px 0 0}.lese .reiter-panel h3.wie-h4,.lese .reiter-panel h2.wie-h4,.lese .reiter-panel h1.wie-h4{font-size:17px;margin:6px 0 0}
.lese .reiter-panel img{max-width:466px;width:100%;height:auto;border-radius:16px}.lese .reiter-panel p{margin:0}
.dunkel .lese .reiter button{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}.dunkel .lese .reiter button.an{background:var(--gelb);color:var(--petrol);border-color:var(--gelb)}
/* Runde 24 A (Malina #1062/#1064, 04.11.2026): zwei Marken in hellen Boxen nebeneinander; G (#1060): Logo links neben dem dena-Satz */
.sek.marken .einl{max-width:820px;font-size:18px;line-height:1.7;color:var(--text-2);margin:16px 0 36px}.sek.marken .schluss{margin:32px 0 0;font-weight:700;color:var(--text)}
.sek.marken .mboxen{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sek.marken .mbox{background:#f3f8f5;border:1px solid var(--rand);border-radius:var(--radius);padding:36px}
.sek.marken .mbox p{margin:0 0 14px;font-size:17px;line-height:1.65;color:var(--text-2)}.sek.marken .mbox p:last-child{margin-bottom:0}.sek.marken .mbox .mt{font-weight:700;font-size:19px;color:var(--text)}
.sek.marken .mlogo{height:64px;display:flex;align-items:center;margin-bottom:22px}.sek.marken .mlogo img{height:44px;width:auto;max-width:260px;border-radius:0}
.karten-nach.logo-satz{display:flex;flex-wrap:nowrap;align-items:center;gap:28px;max-width:960px}.karten-nach.logo-satz>p{flex:1 1 auto}.karten-nach.logo-satz .logos{margin:0;flex:0 0 auto}.karten-nach.logo-satz .logo-svg{height:52px;display:inline-flex}.karten-nach.logo-satz .logo-svg svg{height:100%;width:auto}.karten-nach.logo-satz p{margin:0}
@media (max-width:750px){.sek.marken .mboxen{grid-template-columns:1fr}.sek.marken .mbox{padding:24px}.karten-nach.logo-satz{flex-direction:column;align-items:flex-start;gap:14px}}
/* Runde 25 A (Malina #1065 zu #1056, 04.11.2026): Reiter im gerahmten Kasten, Leiste mit Unterstrich oben, Bild links | Text rechts, Vorteile | Nachteile nebeneinander */
.lese .reiter-box{border:1px solid var(--rand);border-radius:var(--radius);background:#fff;overflow:hidden;margin:12px 0 4px;color:var(--text)}
.lese .reiter-box .reiter{gap:0;margin:0;border-bottom:1px solid var(--rand);padding:0 28px;flex-wrap:wrap}
.lese .reiter-box .reiter button,.dunkel .lese .reiter-box .reiter button{border:0;border-radius:0;background:none;color:var(--text-2);padding:20px 18px 16px;border-bottom:3px solid transparent;margin-bottom:-1px}
.lese .reiter-box .reiter button:hover{color:var(--petrol)}.lese .reiter-box .reiter button.an,.dunkel .lese .reiter-box .reiter button.an{background:none;color:var(--petrol);border-bottom-color:var(--gruen)}
.lese .reiter-box .reiter-panel.an{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;padding:32px;align-items:start}
.lese .reiter-box .reiter-panel.an:not(:has(>.bild)){grid-template-columns:minmax(0,1fr)}
.lese .reiter-box .reiter-panel .bild img{max-width:none;width:100%;height:330px;object-fit:cover;border-radius:16px;display:block}
.lese .reiter-box .rtext{display:flex;flex-direction:column;gap:12px}.lese .reiter-box .rtext h3{margin:0;color:var(--text)}.lese .reiter-box .rtext h2.wie-h3,.lese .reiter-box .rtext h1.wie-h3{margin:0;color:var(--text)}.lese .reiter-box .rtext p,.lese .reiter-box .rtext li{color:var(--text-2)}
.lese .reiter-box .vn-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid var(--rand);padding-top:18px;margin-top:6px}.lese .reiter-box .vn-reihe.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lese .reiter-box .vn h4{margin:0 0 10px;color:var(--text)}
.lese .reiter-box .vn h3.wie-h4,.lese .reiter-box .vn h2.wie-h4,.lese .reiter-box .vn h1.wie-h4{margin:0 0 10px;color:var(--text)}.lese .reiter-box .rtext ul.haken{margin:0}.lese .reiter-box .rtext>h4{margin:4px 0 -2px;color:var(--text)}.lese .reiter-box .rtext>h3.wie-h4,.lese .reiter-box .rtext>h2.wie-h4,.lese .reiter-box .rtext>h1.wie-h4{margin:4px 0 -2px;color:var(--text)}
@media (max-width:750px){.lese .reiter-box .reiter{padding:0 8px;flex-wrap:nowrap;overflow-x:auto}.lese .reiter-box .reiter button{white-space:nowrap;padding:16px 12px}
.lese .reiter-box .reiter-panel.an{grid-template-columns:minmax(0,1fr);padding:20px;gap:18px}.lese .reiter-box .reiter-panel .bild img{height:200px}.lese .reiter-box .vn-reihe,.lese .reiter-box .vn-reihe.n3{grid-template-columns:minmax(0,1fr)}
/* Runde 30 D (Malina #1394 zu #1295, ohne Nummern #1393): Kategorien als Liste untereinander wie ein Menue, gewaehlte dunkel mit gelbem Pfeil; Inhalt im Rahmen darunter */
.lese .reiter-box,.dunkel .lese .reiter-box{border:0;border-radius:0;background:none;overflow:visible}
.lese .reiter-box .reiter{flex-direction:column;flex-wrap:nowrap;overflow:visible;gap:6px;padding:0;border-bottom:0;margin:0 0 14px}
.lese .reiter-box .reiter button,.dunkel .lese .reiter-box .reiter button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;white-space:normal;padding:12px 14px;border:0;border-radius:12px;margin:0;background:var(--grau);color:var(--petrol);font-size:15px}
.lese .reiter-box .reiter button::after{content:"";flex:0 0 auto;width:7px;height:7px;border-top:2.4px solid var(--gruen);border-right:2.4px solid var(--gruen);transform:rotate(45deg);margin-right:4px}
.lese .reiter-box .reiter button.an,.dunkel .lese .reiter-box .reiter button.an{background:var(--petrol);color:#fff;border:0}.lese .reiter-box .reiter button.an::after{border-color:var(--gelb)}
.lese .reiter-box .reiter-panel.an{border:1px solid var(--rand);border-radius:20px;background:#fff;color:var(--text)}}
/* Runde 16 C (Malina #853/#854 zu #427): Glas-Karte mit Beispiel-Ausweis unten rechts im Hero, ueber der Kennzahlen-Leiste */
.hero .beispiel{position:absolute;right:max(20px,calc((100% - var(--bahn))/2));bottom:40px;z-index:2;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:16px;padding:12px 16px;color:#fff;text-decoration:none}
.hero.mit-zahlen .beispiel{bottom:112px}.hero .beispiel img{width:64px;height:auto;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.35)}.hero .beispiel b{display:block;font-size:14px}.hero .beispiel small{color:var(--text-hell);font-size:13px}.hero .beispiel:hover{background:rgba(255,255,255,.18)}
@media (max-width:900px){.hero .beispiel,.hero.mit-zahlen .beispiel{position:static;align-self:flex-start;margin:0 20px 28px;display:inline-flex}}
/* Runde 15 B (Malina #844/#859 zu #562): Inhaltsverzeichnis im Beitrag mit Strich links */
.lese .inhalt{border-left:3px solid var(--gruen);padding:4px 0 4px 20px;margin:4px 0 8px}.lese .inhalt b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gruen-text);margin-bottom:8px}
.lese .inhalt a{display:block;color:var(--text-2);font-size:16px;font-weight:600;padding:4px 0;text-decoration:none}.lese .inhalt a:hover{color:var(--petrol);text-decoration:underline}
/* ---- Malinas Sammelnotizen 03.11.2026 ---- */
/* #871/#872: Zitatkarten ohne grosses Anfuehrungszeichen */
.karte.zitat::before{content:none}
/* #874 (/isfp) + #884 (/foerderservice): Text der vollflaechigen Bildkarte unten links, etwas breiter; je Seite auch unten rechts (bildkarteText: rechts) */
.bk.voll{display:flex;align-items:flex-end}.bk.voll>.bk-text{max-width:720px}
.bk.voll.text-rechts{justify-content:flex-end}.bk.voll.text-rechts::before{background:linear-gradient(270deg,rgba(15,41,46,.92) 0%,rgba(15,41,46,.75) 45%,rgba(15,41,46,.25) 100%)}
@media (max-width:900px){.bk.voll{display:flex}.bk.voll.text-rechts{justify-content:flex-start}}
/* #501: Ueberschrift des Heros ohne Bild in zwei Zeilen */
.hero.ohne-bild.lang h1{font-size:46px;max-width:1180px}
/* #863/#864: flache Sticker-Pille ueber der zentrierten Ueberschrift */
.hero.hell.zentriert .sticker.flach.oben{position:static;transform:none;align-self:center;margin:0 0 -4px}
/* #865/#886/#910/#772: weniger Luft zwischen Kopf und eingebettetem Formular (der Rest der Luft liegt im beg-portal-Widget selbst) */
.hero.hell:has(+ .sek.einbettung.direkt){padding-bottom:12px}.sek.einbettung.direkt:not(.dunkel):not(.grau){padding-top:0}
/* #882/#885: Hakenlisten im Preis-/Vorteilskasten in derselben Groesse wie der Fliesstext; #883: Luft unter dem Paket-Vorspann */
.enthalten ul.haken li,.nachliste ul.haken li{font-size:17px}.paket-kopf{margin-bottom:12px}
/* #876: Absatz im Erklaerabschnitt genau wie die Listenpunkte */
.erk .lese.fliess>p,.erk .lese.fliess>p:first-of-type,.erk .lese ul,.erk .lese ol{font-size:17px;line-height:1.6}
/* #869/#734/#735: Flaeche „gruen“ fuer Textabschnitte mit Handlungsaufforderung (flaecheJe: gruen) */
.sek.text.gruen{background:var(--gruen)}.sek.text.gruen h2,.sek.text.gruen h3,.sek.text.gruen p,.sek.text.gruen li,.sek.text.gruen .ueber,.sek.text.gruen .lese.fliess>p,.sek.text.gruen .lese.fliess h3{color:#fff}.sek.text.gruen h1.wie-h2,.sek.text.gruen h2.wie-h3,.sek.text.gruen h1.wie-h3,.sek.text.gruen .lese.fliess h2.wie-h3,.sek.text.gruen .lese.fliess h1.wie-h3{color:#fff}
.sek.text.gruen .hk{color:var(--gelb)}.sek.text.gruen a:not(.knopf){color:#fff;text-decoration:underline}.sek.text.gruen .knopf.rand{border-color:#fff;color:#fff}
/* #880: Leistungspunkte als Hakenliste statt Kaesten mit Nummern (listeAlsHaken) */
.liste-karten.haken ul.haken{margin-top:28px;max-width:900px}.liste-karten.haken ul.haken li{font-size:17px}.dunkel.liste-karten.haken ul.haken li{color:var(--text-hell)}.liste-karten.haken .knoepfe{margin-top:32px}
/* #907: Nachtext der Karten vor den Kaesten, linksbuendig (nachtextVor) */
.sek.karten .vortext{max-width:860px;margin:-8px 0 28px}.sek.karten .vortext p{text-align:left;font-size:17px;color:var(--text-2);margin:0}.dunkel.sek.karten .vortext p{color:var(--text-hell)}
/* #272: Pillen-Hero mit schmalerer Hausgrafik, damit die Ueberschrift zwei Zeilen behaelt */
@media (min-width:901px){.hero.pillen.schmal .hero-raster{grid-template-columns:minmax(0,1fr) 520px}.hero.pillen.schmal .hp:nth-of-type(2),.hero.pillen.schmal .hp:nth-of-type(4){left:400px}}
/* #866: beide Haken-Aussagen im zentrierten Hero in einer Zeile; #880: Knopf unter der Hakenliste links; #905: Absatz zum letzten Listenpunkt eingerueckt wie der Listentext;
   #501: Hero-Ueberschrift mit Wix-Umbruch in zwei Zeilen (heroZweizeilig) */
.hero.hell.zentriert ul.haken{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px}.liste-karten.haken .knoepfe{justify-content:flex-start}
.lese p.eingerueckt{padding-left:56px}@media (max-width:750px){.lese p.eingerueckt{padding-left:28px}}
.hero.zweizeilig .hero-inhalt{max-width:1180px}.hero.zweizeilig h1{font-size:46px}
/* Runde 16 A (#960): Beispiel-Ausweis gross, leicht gedreht, tiefer Schatten, rechts unten im Kopf (ueber der Kennzahlen-Leiste) */
@media (min-width:901px){.hero .beispiel.schraeg,.hero .beispiel.schraeg:hover{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;border-radius:0;bottom:56px;right:max(40px,calc((100% - var(--bahn))/2 + 40px));transform:rotate(6deg);transition:transform .25s}.hero.mit-zahlen .beispiel.schraeg{bottom:150px}
.hero .beispiel.schraeg img{width:230px;border-radius:8px;box-shadow:0 30px 50px rgba(0,0,0,.45)}.hero .beispiel.schraeg:hover{transform:rotate(3deg) scale(1.03)}}
@media (max-width:900px){.hero .beispiel.schraeg img{width:120px;transform:rotate(4deg)}.hero .beispiel.schraeg{background:none;border:0;padding:0}}
.hero.dunkel.zweizeilig{min-height:0}.hero.dunkel.zweizeilig .hero-inhalt{padding-bottom:56px} /* #956: Kopf ohne Knopf schmaler, die Kennzahlen ruecken unter den Text */
/* #900/#783: Eck-Sticker mit langem Text groesser und kleiner gesetzt */
@media (min-width:751px){.sticker.eck.lang{width:196px;height:196px;font-size:13px;top:-64px;right:-24px;padding:22px}}
/* #935/#958: Kontaktabschnitt auf gruener Flaeche (flaecheJe: gruen); #936: einspaltiger Kontakt ohne Personen — Knopf rechts neben dem Text */
.sek.kontakt.gruen{background:var(--gruen)}.sek.kontakt.gruen h2,.sek.kontakt.gruen p,.sek.kontakt.gruen .ueber,.sek.kontakt.gruen li{color:#fff}.sek.kontakt.gruen h1.wie-h2{color:#fff}.sek.kontakt.gruen a:not(.knopf){color:#fff;text-decoration:underline}.sek.kontakt.gruen .knopf.rand{border-color:#fff;color:#fff}
/* #921/#922/#930/#931: Zwischenueberschrift ueber den Haken, Satz darunter; #932: lange Notiz unter dem Knopf linksbuendig mit Abstand */
.listenkarte.mit-zt>h2{font-size:22px;line-height:1.3;margin:0 0 14px}
Satz darunter; #932: lange Notiz unter dem Knopf linksbuendig mit Abstand */
.listenkarte.mit-zt>h1.wie-h2{font-size:22px;line-height:1.3;margin:0 0 14px}.listenkarte+.nl-nach{margin-top:20px}.listenkarte+.nl-nach>*{font-size:17px;line-height:1.6;color:var(--text-2);font-weight:400}
.kn-gruppe.lang{align-items:flex-start}.kn-gruppe.lang>.notiz{text-align:left;margin-top:20px}
/* #937/#955: Nachtext „Label | Text“ unter Karten */
.karten-nach.label-text{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:start;max-width:1040px;margin-left:0;margin-right:auto;text-align:left}.karten .karten-nach.label-text:not(.zwei)>p{text-align:left;margin:0;width:auto}.karten-nach.label-text>.kn-label{white-space:nowrap;padding-top:1px}.karten-nach.label-text>p+p{border-left:2px solid var(--gruen);padding-left:28px}
@media (max-width:750px){.ueber.platzhalter{display:none}}
/* #916/#953: Kreis an einer bestimmten Karte (stickerAnKarte); #952: Zahlungskasten unter den drei Karten rechts; #951: Kreis direkt unter der
   Presseleiste ragt nicht in die Leiste */
.sek.karten .raster>.karte:has(>.sticker.an-karte){position:relative;overflow:visible}.sek.karten .bahn .karte>.sticker.eck.an-karte{top:-58px;right:-30px}
.karten-nach.zwei.zahlung-rechts{justify-content:flex-end}
/* #918: Foto der Bildkarte laeuft links weich in die Flaeche aus (wie das Startseiten-Foto „Sanierungsberatung Kompakt“) */
@media (min-width:901px){.bk:not(.voll)>img{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 42%)}}
@media (min-width:1101px){.presse+.sek.karten .bahn .mkopf .sticker.eck{top:-72px}}
@media (max-width:750px){.karten-nach.label-text{grid-template-columns:1fr}.karten-nach.label-text>p+p{padding-left:16px}}
@media (min-width:1101px){.kontakt-raster.eins .kontakt-text{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:center;max-width:none}.kontakt-raster.eins .kontakt-text>*{grid-column:1}.kontakt-raster.eins .kontakt-text>.knoepfe{grid-column:2;grid-row:1/span 6;margin-top:0}}
/* 03.11.2026 nachm. (Malina #961–#1034) */
.sek.text.neben.nach-liste .listenkarte{position:static} /* #1027: Text unter der Liste verschwindet beim Scrollen nicht mehr hinter den Haken */
.sek.text.neben:has(.erk-folge)>.bahn.text-raster:first-child .mkopf h2{font-size:36px}
/* #1027: Text unter der Liste verschwindet beim Scrollen nicht mehr hinter den Haken */
.sek.text.neben:has(.erk-folge)>.bahn.text-raster:first-child .mkopf h1.wie-h2{font-size:36px} /* #1026: so gross wie die Folgefragen */
.sek.text.erklaer.reiter>.bahn.text-raster.erk{grid-template-columns:minmax(0,1fr);gap:28px}.sek.text.erklaer.reiter .text-links{position:static}@media (min-width:1101px){.sek.text.erklaer.reiter .text-links .mkopf h2{overflow-wrap:normal;max-width:900px}.sek.text.erklaer.reiter .text-links .mkopf h1.wie-h2{overflow-wrap:normal;max-width:900px}} /* #997/#998/#1001: Reiter-Abschnitt der Foerderseiten — alles unter der Ueberschrift */
.sek.bildtext.kopf-oben .ko-kopf{max-width:900px;margin-bottom:36px}.sek.bildtext.kopf-oben .ko-kopf .mkopf{margin-bottom:20px}.sek.bildtext.kopf-oben .ko-kopf>p{margin:0;font-size:18px;line-height:1.7;color:var(--text-2)}.sek.bildtext.kopf-oben .fluss>p{margin-top:20px} /* #975–#981 */
.sek.text.einspaltig .ein-spalte{display:flex;flex-direction:column;gap:20px;max-width:900px}.sek.text.einspaltig .ein-spalte>.mkopf+.mkopf,.sek.text.einspaltig .ein-spalte>*+.mkopf{margin-top:28px}.sek.text.einspaltig .ein-spalte .listenkarte{position:static} /* #992 */
.hero.hell.zentriert ul.haken{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:0}.hero.hell.zentriert ul.haken li{padding:0 18px}.hero.hell.zentriert ul.haken li+li{border-left:1.5px solid var(--rand)} /* #990: Hakenpunkte in einer Zeile mit Strich dazwischen */
@media (max-width:750px){.hero.hell.zentriert ul.haken{flex-direction:column;align-items:center;gap:6px}.hero.hell.zentriert ul.haken li+li{border-left:0}}
.fotos-ganz .karte .unterzeile{color:var(--text)} /* #1012: Rolle in dunkler Farbe */
.lese .inhalt b{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--text);margin-bottom:10px}.lese .inhalt a{font-size:18px;font-weight:400;line-height:1.6} /* #1034: Inhaltsverzeichnis wie Fliesstext, „Inhalt“ wie die Zwischenueberschriften */
.bk.voll.heller::before{background:linear-gradient(90deg,rgba(15,41,46,.86) 0%,rgba(15,41,46,.6) 45%,rgba(15,41,46,.08) 100%)}.bk.voll.heller>img{filter:brightness(1.6) saturate(1.1)} /* #991: dunklere Bilddatei aufhellen */
.sek.bildtext.ohne-rahmen figure{background:transparent;border:0;box-shadow:none;padding:0} /* #1006 */
.lese ul.ein-liste-2,.lese ol.ein-liste-2{margin-left:56px}.lese p.ein-3{margin-left:84px} /* #1014–#1023: AGB-Unterpunkte */
.sek.band.lang .band-zeile{flex-direction:column;align-items:flex-start;gap:24px} /* #1007: langer Bandtext — Knopf darunter */
/* 03.11.2026 spaet (Malina #1037–#1042) */
.sek.bildtext.deko-hg{position:relative;overflow:hidden;background:var(--petrol)}.sek.bildtext.deko-hg>img.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}.sek.bildtext.deko-hg>.bahn{position:relative}
.sek.bildtext.deko-hg h2,.sek.bildtext.deko-hg .lt,.sek.bildtext.deko-hg ul.haken li{color:#fff}
.sek.bildtext.deko-hg h1.wie-h2{color:#fff}.sek.bildtext.deko-hg .dh-text p{margin:0 0 16px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.82)}.sek.bildtext.deko-hg a{color:#fff;text-decoration:underline}.sek.bildtext.deko-hg .hk{color:var(--gelb)}.sek.bildtext.deko-hg .mkopf{margin-bottom:36px}
.sek.bildtext.deko-hg .dh-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}.sek.bildtext.deko-hg .lt{display:block;font-weight:700;font-size:18px;margin:0 0 12px}.sek.bildtext.deko-hg ul.haken li{font-size:17px} /* #1037: Runde 22 B — Dekofoto blass hinter dunkler Flaeche */
@media (max-width:750px){.sek.bildtext.deko-hg .dh-zwei{grid-template-columns:1fr;gap:24px}}
@media (min-width:751px){.hero.dunkel.mit-sticker.sticker-neben.sticker-tiefer .hero-inhalt .sticker{transform:translateY(var(--sticker-y,70px)) rotate(10deg)}} /* #1040: Kreis ausnahmsweise tiefer, damit er kein Gesicht verdeckt */
/* 03.11.2026 abends (Malina #1043–#1057) */
.preiskarte.paket .preis-rechts ul.haken li,.preiskarte.paket .preis-rechts .et{font-size:17px;line-height:1.6}.preiskarte.paket .preis-rechts ul.haken li{padding:2px 0} /* #1052: rechte Liste im Vorteilspaket in Groesse/Zeilenhoehe wie der Text links */
@media (min-width:901px){.bk.voll{padding-top:220px}} /* #1053: vollflaechige Bildkarte — Text sitzt auch bei langem Text unten links, oben bleibt das Foto frei */
@media (min-width:1101px){.lese .logos:not(:has(>:nth-child(6))){flex-wrap:nowrap;gap:28px;justify-content:space-between}.lese .logos:not(:has(>:nth-child(6)))>img{height:44px;max-width:170px;min-width:0}.lese .logos:not(:has(>:nth-child(6))) .logo-svg{height:34px;flex:0 1 auto;min-width:0}.lese .logos:not(:has(>:nth-child(6))) .logo-svg svg{max-width:190px}} /* #1011: bis zu fuenf Logos im Fliesstext in einer Reihe */
.lese .bilderreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:16px;margin:0 0 24px}.lese .bilderreihe img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 0;border-radius:14px;margin:0;max-width:none}
@media (max-width:750px){.lese .bilderreihe{grid-template-columns:1fr 1fr}.lese .bilderreihe img{height:auto}} /* #698/#1049: Pressebilder nebeneinander, gleich gross, Text darunter */
.kn-beispiel{display:flex;align-items:center;gap:56px;flex-wrap:wrap}.kn-beispiel>.knoepfe{margin:0}
@media (min-width:901px){.hero .kn-beispiel .beispiel.schraeg,.hero.mit-zahlen .kn-beispiel .beispiel.schraeg{position:relative;right:auto;bottom:auto}.hero .kn-beispiel .beispiel.schraeg img{width:104px;box-shadow:0 18px 32px rgba(0,0,0,.45)}}
@media (max-width:900px){.hero .kn-beispiel .beispiel,.hero.mit-zahlen .kn-beispiel .beispiel{margin:0}} /* #1045: Beispiel-Ausweis klein direkt neben den Knoepfen */
@media (min-width:751px){.hero.dunkel.lang.voll-gross h1{font-size:52px}} /* #1044: breite Kopf-Ueberschrift so gross wie auf den uebrigen Energieausweis-Seiten */
.dunkel .haken .nr{background:#eaf5ef;color:var(--gruen-text)} /* #1054: Listennummern auch auf dunkler Flaeche im mintfarbenen Quadrat wie auf hellen Seiten */
.sek.bildtext.halb{padding:56px 0}.halb-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:600px}.halb-bild{position:relative}.halb-bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:0 var(--radius) var(--radius) 0}
.halb-text{display:flex;flex-direction:column;justify-content:center;padding:40px max(20px,calc((100vw - var(--bahn))/2)) 40px 72px}.halb-text>.mkopf{margin-bottom:24px}.halb-text>p{margin:0 0 20px}.halb-text .knoepfe{margin-top:8px}
.sek.bildtext.halb.rechts .halb-bild{order:2}.sek.bildtext.halb.rechts .halb-bild>img{border-radius:var(--radius) 0 0 var(--radius)}.sek.bildtext.halb.rechts .halb-text{padding:40px 72px 40px max(20px,calc((100vw - var(--bahn))/2))}
.halb-bild .sticker{position:absolute;right:-40px;top:-36px;z-index:1}.sek.bildtext.halb.rechts .halb-bild .sticker{right:auto;left:-40px} /* #1043: Runde 23 C — Bild randlos bis zur Mitte, Innenecken rund */
@media (max-width:750px){.halb-raster{grid-template-columns:1fr;min-height:0}.halb-bild{height:260px;order:0!important}.halb-bild>img,.sek.bildtext.halb.rechts .halb-bild>img{border-radius:0}.halb-text,.sek.bildtext.halb.rechts .halb-text{padding:32px 20px 0}.sek.bildtext.halb{padding:0 0 48px}.halb-bild .sticker,.sek.bildtext.halb.rechts .halb-bild .sticker{right:32px;left:auto;top:auto;bottom:-40px;width:116px;height:116px;font-size:14px}}
.karte .ueber.empfehlung,.raster:has(.ueber.empfehlung) .karte .ueber.platzhalter{display:inline-block;align-self:flex-start;padding:7px 14px;border-radius:999px;font-size:13px;line-height:1.3;letter-spacing:.06em}
.karte .ueber.empfehlung{background:var(--gelb);color:var(--petrol);font-weight:800} /* #494: „Unsere Empfehlung“ als gefuellte Pille */
@media (min-width:1101px){.raster.zeilengleich>.karte{display:grid;grid-row:span var(--kz);grid-template-rows:subgrid;row-gap:16px;align-content:start}.raster.zeilengleich>.karte>*{margin-top:0;margin-bottom:0}.raster.zeilengleich>.karte>.kfuss{align-self:end;margin-top:8px}.raster.zeilengleich>.karte>.ueber{justify-self:start}} /* #495: Zwischentitel nebeneinander auf gleicher Hoehe */
.sek.preisblock.titel-aussen .kopfzeile{margin-bottom:36px}.preiskarte .preis-links h3.pk-titel{font-size:36px;line-height:1.15;color:var(--weiss);margin-top:6px}.preiskarte .preis-links h2.wie-h3.pk-titel,.preiskarte .preis-links h1.wie-h3.pk-titel{font-size:36px;line-height:1.15;color:var(--weiss);margin-top:6px} /* #469: Ueberschrift ueber der Box, Produkt als Titel in der Box */
.erk .text-links .kopf-bild{display:block;width:100%;max-width:300px;height:auto;margin-top:32px;border-radius:8px} /* #542: Bild links unter der Ueberschrift */
@media (max-width:1100px){.erk .text-links .kopf-bild{max-width:260px;margin-top:20px}}
.gruen .erk .lese.fliess h2.als-absatz,.gruen .erk .lese.fliess h3.als-absatz,.gruen .lese.fliess h2.als-absatz,.gruen .lese h2.als-absatz{color:var(--weiss)}
.gruen .erk .lese.fliess h1.wie-h2.als-absatz,.gruen .erk .lese.fliess h2.wie-h3.als-absatz,.gruen .erk .lese.fliess h1.wie-h3.als-absatz,.gruen .lese.fliess h1.wie-h2.als-absatz,.gruen .lese h1.wie-h2.als-absatz{color:var(--weiss)} /* #482: Fliesstext-Absatz auf gruener Flaeche wie der uebrige Text (war dunkelgrau) */
/* Malina 04.11.2026 (#1066–#1094) */
.bahn.erk.nur-text>.lese{max-width:900px} /* #1067: Wix-Absatz im Ueberschrift-Markup = Fliesstext an der linken Kante */
.text-rechts:has(>.nl-nach)>.listenkarte{position:static} /* #1068: Liste mit Text darunter laeuft nicht mit (schob sich ueber den Text) */
.sek.zwischen.einspaltig .bahn.text-raster.erk{max-width:none;justify-items:start}.sek.zwischen.einspaltig .bahn.text-raster.erk>*{width:100%;max-width:980px} /* #1069: linksbuendig wie die uebrigen Textbloecke */
.hero.dunkel+.sek.einbettung.direkt:not(.dunkel):not(.grau){padding-top:40px} /* #1070: ueber dem Formular so viel Luft wie darunter */
.kontakt-raster.eins .kontakt-text>p{max-width:640px} /* #1072: Absatz schmaler */
.karten-nach.label-text>.kn-label{font-weight:800} /* #1073 */
.zahlung~.extra-frage,.preis-rechts .zahlung+.extra-frage{margin-top:18px}
.bk-text+img.nur-mobil,.bk>img.nur-mobil,img.nur-mobil{display:none}
@media (min-width:751px){.sek.text.erklaer.mittig .text-raster.erk.ohne-kopf{justify-items:center}.sek.text.erklaer.mittig .text-rechts{align-items:center;text-align:center;max-width:1040px;margin:0 auto}.sek.text.erklaer.mittig .knoepfe{justify-content:center}} /* #670/#671: Einleitung mittig */
@media (max-width:750px){
  .kr{margin-left:auto} /* #1081: Login direkt neben dem Menue */
  .sek.m-hell{background:#fff}.sek.m-grau{background:var(--grau)} /* #1091–#1094: Flaechen nur am Telefon */
  .bahn.erk-folge.m-grau{background:var(--grau);width:auto;margin:48px 0;padding:48px 20px}
  .bahn.erk-folge.m-grau:last-child{margin-bottom:-64px}
  .bk>img.nur-desktop{display:none}.bk>img.nur-mobil{display:block} /* #1077 */
  .hero.dunkel.mit-sticker .titel-zeile{position:relative}
  .hero.dunkel.mit-sticker.mit-sticker .hero-inhalt .titel-zeile .sticker.sticker{position:absolute;left:0;right:auto;top:auto;bottom:calc(100% + 16px);width:112px;height:112px;border-radius:50%;padding:12px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.2;font-weight:700;white-space:normal;transform:rotate(-8deg);z-index:3} /* #1076/#1083: Kreis ueber der Ueberschrift; #1294/#1157/#1191/#1215 (05.11.): links, Text nach links geneigt, waechst nach oben */
  .hero.dunkel.m-sticker-rechts.mit-sticker.mit-sticker .hero-inhalt .titel-zeile .sticker.sticker{left:auto;right:0;transform:rotate(8deg)} /* #1169: /isfp rechts (ergaenzungen heroStickerRechtsMobil) */
  .hero .haken li,.hero .haken li strong{font-weight:400} /* #1082 */
  .hero.mit-zahlen .kennzahlen:not(:has(>div:nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}.hero.mit-zahlen .kennzahlen:not(:has(>div:nth-child(4))) .zahl{font-size:19px}.hero.mit-zahlen .kennzahlen:not(:has(>div:nth-child(4))) .was{font-size:12px;line-height:1.35;display:block} /* #1084 */
  .hero .kn-beispiel{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:16px;align-items:start}.hero .kn-beispiel>.knoepfe{flex-direction:column;align-items:stretch}.hero .kn-beispiel>.knoepfe .knopf,.hero .kn-beispiel .kn-mit-notiz{width:100%;max-width:none}.hero .kn-beispiel .beispiel.schraeg img{width:84px} /* #1085 */
  .sek.karten .kopfzeile .mkopf:has(>.sticker.eck){position:relative}
  .sek.karten .mkopf>.sticker.eck,.sek.karten .karte>.sticker.eck.an-karte{position:absolute;right:0;left:auto;width:104px;height:104px;border-radius:50%;padding:10px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.2;font-weight:700;transform:rotate(8deg);z-index:3}
  .sek.karten .mkopf>.sticker.eck{top:auto;bottom:calc(100% + 4px)} /* #1078: Kreis auf dem Uebergang (#1171 ff.: waechst nach oben) */
  .sek.karten .karte:has(>.sticker.eck.an-karte){position:relative}.sek.karten .bahn .karte>.sticker.eck.an-karte{top:-44px;right:6px;width:112px;height:112px;padding:14px;font-size:11px} /* #1088: Kreis oben rechts an der Karte */
  .bildtext .paar:has(>figure>.sticker)>figure{order:2;position:relative;margin-top:56px} /* #1087: Bild unter den Text */
  .bildtext .paar:has(>figure>.sticker)>figure>.sticker{position:absolute;top:-52px;right:8px;left:auto;width:112px;height:112px;border-radius:50%;padding:10px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.2;font-weight:700;transform:rotate(8deg);z-index:3} /* #1086 */
  img.klogo{height:60px} /* #1079 */
  .presse .bahn:has(>img:nth-of-type(4)):not(:has(>img:nth-of-type(5))){display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:22px 24px}.presse .bahn:has(>img:nth-of-type(4)):not(:has(>img:nth-of-type(5)))>.ueber{grid-column:1/-1} /* #1080: 2 + 2 */
  .zahlung .wege{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:12px 20px}.zahlung .wege>.logos{display:contents} /* #1089: Zahlwege 2 + 2 */
  .sek.band .band-zeile p{max-width:300px} /* #1090 */
  .raster:has(.ueber.empfehlung) .karte .ueber.platzhalter{display:none} /* #1125: Platzhalter fuer die Empfehlungs-Pille nur nebeneinander noetig */
  .sek.text.neben.ab-text .text-links:has(>.knoepfe){display:contents}.sek.text.neben.ab-text:has(.text-links>.knoepfe) .text-rechts{order:2}.sek.text.neben.ab-text .text-links>.knoepfe{order:3;margin-top:0} /* #1101/#1116: Liste mit Haken vor den Knoepfen */
  .sek.preisblock .preiskarte:has(>.preis-links>.pille-flach){position:relative}.sek.preisblock .preiskarte>.preis-links>.pille-flach{position:absolute;top:-38px;right:6px;left:auto;width:104px;height:104px;border-radius:50%;padding:12px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.25;font-weight:700;transform:rotate(8deg);z-index:3;background:linear-gradient(135deg,var(--gelb) 0%,var(--gruen) 100%);color:var(--weiss);border:0;box-shadow:0 12px 28px rgba(15,41,46,.22)} /* #1108: Kreis oben rechts an der Preiskarte (wie #1088) */
  .sek.karten.m-sticker-oben>.bahn{position:relative}.sek.karten.m-sticker-oben .karte:has(>.sticker.eck.an-karte){position:static}.sek.karten.m-sticker-oben .bahn .karte>.sticker.eck.an-karte{top:-100px;right:0;width:112px;height:112px;padding:14px;font-size:11px} /* #1124: Kreis auf dem Uebergang ueber der Ueberschrift */
  img.zwischen-bild,.lese img.zwischen-bild{border-radius:0} /* #1130: Grafik zwischen den Absaetzen ohne runde Ecken (schnitt die Schrift an) */
  .sek.foto.reveal{height:auto;clip-path:none}.sek.foto.reveal .fotoband{position:static;width:100%;height:auto;object-fit:contain} /* #1141: Bildstreifen am Telefon ganz, nichts links/rechts abgeschnitten */
  .hero.dunkel.m-ganz .hg{height:auto;aspect-ratio:var(--hg-ratio,3/2);object-fit:cover;object-position:50% 50%}.hero.dunkel.m-ganz .schleier{height:auto;aspect-ratio:var(--hg-ratio,3/2);background:linear-gradient(180deg,rgba(11,31,35,.25) 0%,rgba(11,31,35,0) 30%,rgba(11,31,35,.55) 70%,#0b1f23 100%)}.hero.dunkel.m-ganz{padding-top:0}.hero.dunkel.m-ganz .hero-inhalt{padding-top:calc(100vw / var(--hg-ratio-n,1.5) - 40px)} /* #1142: Kopffoto am Telefon in voller Breite, Schimmer von unten */
  .hero.dunkel.hero-lage-m .hg{object-position:var(--hg-pos-m,70% 30%)} /* #1137: Bildausschnitt nur am Telefon */
  .themen-nav li a small{margin-left:8px} /* #1138: Zahl im Kreis mit Abstand zur Schrift */
  .ratgeber .chips{gap:6px}.ratgeber .chips .chip{font-size:13px;padding:6px 11px;min-height:0;line-height:1.3} /* #1143/#1144: Kategorien kleiner, mehr nebeneinander */
  .sek.band .band-rechts{align-self:stretch;justify-content:center}.sek.band .band-rechts>.knoepfe{width:100%;justify-content:center;align-items:center}.sek.band .band-rechts>.knoepfe>.knopf{flex:0 0 auto;width:auto} /* #1136: Knopf im Band mittig */
  .bildtext figure>img.zusatz{display:none} /* #1099: zweites Bild (schraeger Ausweis) am Telefon weg, es verdeckte die Bildunterschrift */
  .lese p.ein-1,.lese p.ein-2,.lese p.ein-3,.lese ul.ein-liste-2,.lese ol.ein-liste-2{margin-left:0}.lese p .nr{font-weight:700} /* #1211: AGB am Telefon ohne Einrueckung, Nummern fett */
  .sek.band:has(>.bahn>.sticker.band-eck){position:relative}.sek.band>.bahn.band-zeile:has(>.sticker.band-eck){position:static}
  .sek.band>.bahn>.sticker.band-eck.band-eck{position:absolute;top:-56px;right:20px;left:auto;width:112px;height:112px;border-radius:50%;padding:12px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.2;font-weight:700;transform:rotate(8deg);z-index:3} /* #1174/#1218: Band-Kreis auf dem Uebergang */
  .sek.text.neben.ab-text:has(>.bahn>.nb-sticker){position:relative}.sek.text.neben.ab-text>.bahn:has(>.nb-sticker){position:static}
  .sek.text.neben.ab-text>.bahn>.nb-sticker.nb-sticker{position:absolute;top:-56px;right:20px;left:auto;width:112px;height:112px;border-radius:50%;padding:12px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.2;font-weight:700;transform:rotate(8deg);z-index:3} /* #1207: Kreis auf dem Uebergang zum Abschnitt davor */
  section:has(>.sticker.m-kante){position:relative}section>.sticker.m-kante.m-only{position:absolute;top:-56px;right:20px;left:auto;width:112px;height:112px;border-radius:50%;padding:12px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.2;font-weight:700;transform:rotate(8deg);z-index:3} /* #1180: Kopf-Kreis am Telefon auf dem Abschnittsrand */
  section.sek.bildtext figure:not(.ikon){background:none;border:0;box-shadow:none;padding:0} /* #1296/#1299: Bild ohne Rahmen */
  section.sek.bildtext figure img[alt^="Deutschlandkarte"]{max-width:260px;margin:0 auto;display:block} /* #1297: Karte kleiner */
  .sek.bildtext.halb{padding-top:48px}.halb-bild,.sek.bildtext.halb.rechts .halb-bild{height:auto;margin:0 20px}.halb-bild>img,.sek.bildtext.halb.rechts .halb-bild>img{position:static;height:auto;aspect-ratio:3/2;border-radius:16px} /* #1298: Halb-Bild nicht ueber die volle Breite, wie freie Bilder */
  .sek.bildtext.m-bild-oben .paar:has(>figure)>figure{order:-1;margin-top:0;margin-bottom:32px} /* #1299: Bild an den Anfang (ergaenzungen mobilBildOben) */
  .pband{grid-template-columns:56px minmax(0,1fr);column-gap:16px;row-gap:0}
  .pband .chev{display:flex;grid-column:1;height:auto;align-self:stretch;align-items:flex-start;padding-top:14px;font-size:18px;margin-bottom:-10px;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),50% 100%,0 calc(100% - 16px))}
  .pband .chev:first-child{clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),50% 100%,0 calc(100% - 16px))}
  .pband .chev:nth-child(1),.pband .karte:nth-child(6){grid-row:1}.pband .chev:nth-child(2),.pband .karte:nth-child(7){grid-row:2}.pband .chev:nth-child(3),.pband .karte:nth-child(8){grid-row:3}.pband .chev:nth-child(4),.pband .karte:nth-child(9){grid-row:4}
  .sek.schritte .pband .karte{grid-column:2;padding:10px 0 26px}.pband .karte .nummer{display:none}
  .pband .ziel{grid-column:1/-1;grid-row:5;padding:24px 0 0} /* Runde 28 B (Malina #1301 zu #1172): Schritte am Telefon mit Pfeil-Spalte links, Farben wie das Desktop-Band */
}
@media (min-width:751px){.sticker.m-kante{display:none!important}}
.sticker:has(>a.tel-auto){flex-direction:column;gap:2px} /* #1193/#1198/#1199/#1270/#1271: Rufnummer im Kreis unter den Text, nicht daneben */
.foerder-hinweis{margin-top:24px;padding:14px 18px;border-left:3px solid var(--gruen);background:rgba(69,153,121,.07);border-radius:0 10px 10px 0;font-size:14px;line-height:1.55;color:var(--text-2)}.foerder-hinweis strong{color:var(--text)}.dunkel .foerder-hinweis{color:var(--text-hell);background:rgba(255,255,255,.06);border-left-color:var(--gruen-hell)}.dunkel .foerder-hinweis strong{color:var(--weiss)}.foerder-hinweis+.kn-gruppe,.foerder-hinweis+.knoepfe{margin-top:28px}.foerder-hinweis{grid-column:1/-1}
/* Slider (Malina #1500): Folien mit Foto, Text rechts auf dunklem Verlauf, Pfeile und Punkte wie im Wix-Original */
.sek.slider .bahn{position:relative}.sek.slider .folien{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/7;background:var(--petrol)}
.sek.slider .folie{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}.sek.slider .folie.aktiv{opacity:1;z-index:1}
.sek.slider .folie img{width:100%;height:100%;object-fit:cover}
.sek.slider .folie-text{position:absolute;right:48px;top:40px;width:min(380px,40%);color:var(--weiss);background:rgba(15,41,46,.55);backdrop-filter:blur(4px);border-radius:var(--radius-k);padding:22px 24px}
.sek.slider .folie-text h2,.sek.slider .folie-text h3{font-size:26px;color:var(--weiss);margin:0 0 8px}
.sek.slider .folie-text h1.wie-h2,.sek.slider .folie-text h2.wie-h3,.sek.slider .folie-text h1.wie-h3{font-size:26px;color:var(--weiss);margin:0 0 8px}.sek.slider .folie-text p{margin:0;font-size:16px;line-height:1.5;color:var(--text-hell)}
.sek.slider .sl-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--petrol);font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sek.slider .sl-pfeil.zurueck{left:16px}.sek.slider .sl-pfeil.vor{right:16px}.sek.slider .sl-pfeil:hover{background:var(--weiss)}
.sek.slider .sl-punkte{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:2}.sek.slider .sl-punkte button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}.sek.slider .sl-punkte button.aktiv{background:var(--weiss)}
@media(max-width:750px){.sek.slider .folien{aspect-ratio:auto;height:460px}.sek.slider .folie-text{left:16px;right:16px;top:auto;bottom:52px;width:auto}.sek.slider .folie-text h2,.sek.slider .folie-text h3{font-size:22px}.sek.slider .folie-text h1.wie-h2,.sek.slider .folie-text h2.wie-h3,.sek.slider .folie-text h1.wie-h3{font-size:22px}.sek.slider .sl-pfeil{width:40px;height:40px;top:auto;bottom:12px;transform:none}.sek.slider .sl-pfeil.zurueck{left:12px}.sek.slider .sl-pfeil.vor{right:12px}}
/* CI tink (Malina #825/#1499, Frederik #1554): schwarzer Text, tink-Gruen fuer Knoepfe/Band, helle Flaechen, Ueberschriften ohne enge Laufweite */
.ci-tink{--text:#161616;--text-2:#3a3a3a;--text-3:#6b6b6b;--gruen:#007f55;--gruen-text:#007f55;--gruen-hell:#35c18e;--gelb:#007f55;--grau:#f9f9fa;--rand:#e8e8ec}
.ci-tink h1,.ci-tink h2,.ci-tink h3,.ci-tink .h3{letter-spacing:0}
.ci-tink h1.wie-h2,.ci-tink h2.wie-h3,.ci-tink h1.wie-h3,.ci-tink .h2.wie-h3,.ci-tink .h1.wie-h3{letter-spacing:0}
.ci-tink .knopf.gelb,.ci-tink .kopf .knopf.gelb{background:#007f55;color:#fff;border-radius:200px}.ci-tink .knopf.gelb:hover{background:#00673f;color:#fff}
.ci-tink .knopf.rand-hell{border-color:#fff;color:#fff;border-radius:200px}
.ci-tink .sek.band.dunkel:not(.gruen),.ci-tink .sek.karten.dunkel,.ci-tink .sek.liste-karten.dunkel{background:#fff;color:var(--text)}
.ci-tink .sek.band.dunkel:not(.gruen) .h3,.ci-tink .sek.band.dunkel:not(.gruen) p,.ci-tink .sek.karten.dunkel h2,.ci-tink .sek.karten.dunkel p,.ci-tink .sek.karten.dunkel .ueber{color:var(--text)}
.ci-tink .sek.band.dunkel:not(.gruen) .h2.wie-h3,.ci-tink .sek.band.dunkel:not(.gruen) .h1.wie-h3,.ci-tink .sek.karten.dunkel h1.wie-h2{color:var(--text)}
.ci-tink .sek.karten.dunkel .karte{background:#f9f9fa;border:1px solid #e8e8ec;color:var(--text)}.ci-tink .sek.karten.dunkel .karte h3,.ci-tink .sek.karten.dunkel .karte p,.ci-tink .sek.karten.dunkel .karte li,.ci-tink .sek.karten.dunkel .karte strong{color:var(--text)}.ci-tink .sek.karten.dunkel .karte h2.wie-h3,.ci-tink .sek.karten.dunkel .karte h1.wie-h3{color:var(--text)}
.ci-tink .sek.band.dunkel.gruen{background:#007f55;color:#fff}.ci-tink .sek.band.dunkel.gruen .h3{color:#fff}.ci-tink .sek.band.dunkel.gruen .h2.wie-h3,.ci-tink .sek.band.dunkel.gruen .h1.wie-h3{color:#fff}
.ci-tink .sek.karten .karte,.ci-tink .sek.schritte .karte,.ci-tink .preiskarte{border-radius:16px}
.ci-tink .hero.dunkel .schleier{background:linear-gradient(90deg,rgba(0,127,85,.88) 0%,rgba(0,127,85,.55) 45%,rgba(0,60,40,.25) 100%)}
.ci-tink .sticker{background:#007f55;color:#fff} /* #1707/#1708 (Malina 06.11.2026): kein Farbverlauf, nur tink-Gruen (Desktop war schon einfarbig) */
.ci-tink .kopf.partner.dunkel{background:#fff}.ci-tink .kopf.partner.dunkel .l-w{display:none}.ci-tink .kopf.partner.dunkel .l-f{display:block}.ci-tink .kopf.partner.dunkel .lockup img{filter:none}.ci-tink .kopf.partner.dunkel .pn a{color:var(--text)}
body.ci-tink footer.fuss{background:#fff;color:var(--text);border-top:1px solid #e8e8ec}body.ci-tink .fuss a,body.ci-tink .fuss p,body.ci-tink .fuss .ueber,body.ci-tink .fuss .tel,body.ci-tink .fuss span,body.ci-tink .fuss li{color:var(--text)}body.ci-tink .fuss-marke>svg{filter:invert(1) hue-rotate(180deg)}
.ci-tink .hero.dunkel ul.haken .hk{color:#fff}.ci-tink .hero.dunkel .knopf.gelb{background:#fff;color:#007f55}.ci-tink .hero.dunkel .knopf.gelb:hover{background:#f1f1f1;color:#00673f}
.ci-tink .foerder-hinweis{border-left-color:#007f55;background:rgba(0,127,85,.06)}
.ci-tink .sek.dunkel .foerder-hinweis{color:var(--text-2);background:rgba(0,127,85,.06)}.ci-tink .sek.dunkel .foerder-hinweis strong{color:var(--text)}
/* 05.11.2026 abends, Notizen #870–#1568 (Malina) */
.sek.mit-eck{position:relative}.sek.mit-eck>.sticker.band-eck{position:absolute;right:80px;top:-74px;width:150px;height:150px;transform:rotate(8deg);z-index:3} /* #1563/#892: Kreis auf dem Uebergang zu diesem Abschnitt */
.sek.mit-eck>.sticker.band-eck.lang{width:196px;height:196px;font-size:13px;line-height:1.25;padding:18px;top:-96px} /* #892: langer Kreistext (Heizungsberatung) */
.sek.schritte.eng-alle .karte h3{font-size:19px;letter-spacing:-.01em}
/* #892: langer Kreistext (Heizungsberatung) */
.sek.schritte.eng-alle .karte h2.wie-h3,/* #892: langer Kreistext (Heizungsberatung) */
.sek.schritte.eng-alle .karte h1.wie-h3{font-size:19px;letter-spacing:-.01em} /* #1584: alle gleich gross, etwas groesser (17 -> 19 px) */
.sek.schritte.eng-alle .karte h3.eng{font-size:19px}
etwas groesser (17 -> 19 px) */
.sek.schritte.eng-alle .karte h2.wie-h3.eng,etwas groesser (17 -> 19 px) */
.sek.schritte.eng-alle .karte h1.wie-h3.eng{font-size:19px} /* #1584: auch Titel mit langem Wort (h3.eng) gleich gross */ /* #1564: alle Box-Titel gleich gross */
.karten .karten-nach.label-text{margin-top:52px}
/* #1584: auch Titel mit langem Wort (h2.wie-h3.eng) gleich gross */ /* #1564: alle Box-Titel gleich gross */
.karten .karten-nach.label-text,/* #1584: auch Titel mit langem Wort (h1.wie-h3.eng) gleich gross */ /* #1564: alle Box-Titel gleich gross */
.karten .karten-nach.label-text{margin-top:52px} /* #1565: mehr Abstand zu den Boxen */
.karte .khinweise{gap:10px;margin-top:-6px}.karte .khinweise p:not(:has(em)){font-size:13px} /* #873: "Zur Info" kleiner, dicht am Text, dann Abstand zum kursiven Satz */
.tab-leiste{height:6px;border-radius:3px;background:var(--grau);margin:10px 0 0;overflow:hidden}.tab-leiste i{display:block;height:100%;border-radius:3px;background:var(--gruen);width:40%} /* Runde 32 D (#1446–#1449, #1558–#1562): Fortschrittsleiste zeigt, dass die Tabelle weitergeht */
@media(min-width:751px){.sek.karten.ausweis-karten .karten-nach.zwei .kn-links{flex:0 0 calc((100% - 48px)/3);max-width:calc((100% - 48px)/3)}.sek.karten.ausweis-karten .zahlung .logos{gap:10px}.sek.karten.ausweis-karten .zahlung .logos img{height:20px}} /* #1568: Bezahl-Kasten nur so breit wie eine Karte, Logos gleichmaessig kleiner */
@media(max-width:750px){.sek.mit-eck>.sticker.band-eck,.sek.mit-eck>.sticker.band-eck.lang{top:-34px;right:20px;left:auto;width:112px;height:112px;border-radius:50%;padding:12px;font-size:12px;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;margin:0}.sek.mit-eck>.sticker.band-eck.lang{width:136px;height:136px;top:-52px;padding:14px;font-size:11.5px}.sek.mit-eck:has(>.sticker.band-eck){padding-top:96px}.sek.mit-eck:has(>.sticker.band-eck.lang){padding-top:104px} /* #1638/#1639: am Telefon Kreis rechts auf dem Uebergang statt Pille, Ueberschrift darunter */.tab-huelle{scrollbar-width:none}.tab-huelle::-webkit-scrollbar{display:none}}.sek.preisblock.dunkel .foerder-hinweis{color:var(--text-2);background:rgba(69,153,121,.07);border-left-color:var(--gruen)}.sek.preisblock.dunkel .foerder-hinweis strong{color:var(--text)}
.m-only{display:none}
@media (max-width:750px){.d-only,[data-mobil="weg"]{display:none!important}.m-only{display:block}.m-knopf-ende{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:4px}.m-knopf-ende .notiz{margin:0;text-align:center}.m-knopf-ende .kn-gruppe,.m-knopf-ende .knoepfe{width:100%;align-items:stretch}} /* #1155 ff.: Telefon-Knopf unter der Hakenliste */
a.tel-auto,a.tel-auto:hover{color:inherit!important;text-decoration:none;font:inherit;overflow-wrap:inherit} /* #1154/#1203: Rufnummer klickbar, am Desktop unveraendert */
@media (max-width:750px){a.tel-auto{text-decoration:underline;text-underline-offset:2px}}
.anker-ziel{display:block;height:0;scroll-margin-top:88px} /* #1257/#1258: Wix-Sprungziel /#kontakt landet am Kontaktformular der Startseite */
.hero span.beispiel{cursor:default} /* #1249 */ /* Frederik 04.11.2026 (#1278 ff.): Hinweis unter den Foerderaussagen */
/* ---- 05.11.2026 Partnerseiten (Malina 02.11.2026, #740–#804) ---- */
.karten-nach.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;margin-top:24px} /* #795/#796/#798: drei Kaesten in Kartenbreite */
.karten-nach.drei .zahlung,.karten-nach.drei .kn-rechts{margin:0;max-width:none}
.karten-nach.drei .zahlung .logos{flex-wrap:wrap;gap:14px}
.zahlung.auszeichnungen .logos img{height:64px;filter:none;opacity:1}
.zahlung.auszeichnungen .logos.mitglieder img{height:30px}
.karte .unter-knopf{display:inline-block;margin-top:12px;font-weight:700} /* #785: Verweis unter dem Knopf */
.sek.text.neben.liste-unter .text-links ul.haken{margin:18px 0 0;padding:0} /* #793: Liste links unter Ueberschrift und Unterzeile */
.sek.text.neben.liste-unter .text-links ul.haken li{font-size:17px}
.kopf.partner.dunkel .lockup img.platte{filter:none;background:#fff;padding:4px 8px;border-radius:8px;height:44px} /* JPG-Partnerlogo (weisser Grund, bauffy/Homeday-Makler) wuerde invertiert zum weissen Kasten */
.sek.unter-kopf{padding-top:150px} /* s.o. */
.karte.zitat>h3{font-size:18px;overflow-wrap:normal;hyphens:manual}
/* s.o. */
.karte.zitat>h2.wie-h3,/* s.o. */
.karte.zitat>h1.wie-h3{font-size:18px;overflow-wrap:normal;hyphens:manual}
.kennz strong small{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text-3);margin-bottom:-2px} /* Frederik 05.11.2026: „bis zu“ vor den Foerderbetraegen der Fallbeispiele */
.fallbeispiele.dunkel .kennz strong small{color:var(--text-hell)}
.kennz>div{display:flex;flex-direction:column}.kennz>div>strong{margin-top:auto} /* beide Kennzahlen auf einer Grundlinie, auch wenn nur eine „bis zu“ hat */ /* Malina #756 (/lp-isfp): Name und Ort etwas kleiner, „Hamburg-Bergedorf“ in einer Zeile — alle Zitatkarten */ /* erster Abschnitt direkt unter der Partner-Kopfzeile (kein Hero): Platz fuer den Kreis ueber der Ueberschrift (#778/#792) */
@media (max-width:750px){.karten-nach.drei{grid-template-columns:1fr}.sek.unter-kopf{padding-top:120px}}
/* ---- 05.11.2026 Standortseiten Hamburg / Baden-Wuerttemberg (Malina #691–#695, #737, #1008, #1010, #1149–#1152, #1232–#1236) ---- */
.bilderreihe img{aspect-ratio:1/1} /* #1152/#1232/#1235: Pressebilder bleiben Quadrate (Wix 239×239) */
.sek.band.zweispaltig{background:var(--weiss);color:var(--text)} /* #691/#737: Band auf Weiss, Ueberschrift links, Text + Knopf rechts */
.sek.band.zweispaltig .band-zeile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.sek.band.zweispaltig .h3{color:var(--petrol);display:block}
.sek.band.zweispaltig .h2.wie-h3,.sek.band.zweispaltig .h1.wie-h3{color:var(--petrol);display:block}
.sek.band.zweispaltig p{color:var(--text-2);margin:0}
.sek.band.zweispaltig .knoepfe{margin-top:22px}
.sek.bildtext.schmal>.bahn{max-width:1000px} /* #692/#1236: Abschnitt mit der Deutschlandkarte schmaler, Karte kleiner */
.sek.bildtext.schmal figure img[alt^="Deutschlandkarte"]{max-width:220px}
.sek.bildtext.buehne{position:relative;z-index:2;background:var(--petrol);color:var(--weiss);padding:104px 0}
.sek.bildtext.buehne>.sticker.band-eck{position:absolute;left:auto;right:80px;top:-74px;bottom:auto;width:150px;height:150px;transform:rotate(8deg);z-index:3} /* Kreis auf dem Uebergang (die bildtext-Stickerregel hat sonst Vorrang) */
.sek.bildtext.buehne .mkopf{margin-bottom:18px} /* #695/#1008/#1010: Foto als Buehne mit Schleier, Text links, Kreis auf dem Uebergang */
.sek.bildtext.buehne>.hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;border-radius:0}
.sek.bildtext.buehne>.schleier,.sek.bildtext.buehne>.hg{overflow:hidden}
.sek.bildtext.buehne>.schleier{z-index:1;background:linear-gradient(90deg,rgba(11,31,35,.94) 0%,rgba(11,31,35,.85) 38%,rgba(11,31,35,.45) 68%,rgba(11,31,35,.2) 100%)}
.sek.bildtext.buehne>.bahn{position:relative;z-index:2}
.sek.bildtext.buehne .fluss{max-width:620px}
.sek.bildtext.buehne .fluss h2,.sek.bildtext.buehne .fluss p{color:var(--weiss)}
.sek.bildtext.buehne .fluss h1.wie-h2{color:var(--weiss)}
@media (max-width:750px){
  .sek.band.zweispaltig .band-zeile{grid-template-columns:1fr;gap:16px}
  .sek.bildtext.schmal figure img[alt^="Deutschlandkarte"]{max-width:200px}
  .m-bild-unten .paar:has(>figure)>figure{order:2;margin:24px 0 0} /* #1149: Karte am Telefon unter den Text */
  .sek.bildtext.buehne{padding:0 0 48px}
  .sek.bildtext.buehne>.hg{position:relative;height:240px;display:block}
  .sek.bildtext.buehne>.schleier{display:none}
  .sek.bildtext.buehne>.bahn{padding-top:28px}
}
/* ---- 05.11.2026 Foerderseiten + Kleinteile (Malina #714, #1160, #1224, #1238/#1239, #1255, #1275, #1289) ---- */
@media (min-width:751px){.sek.text.neben.reiter .text-links{grid-column:1/-1} /* #1289: Reiter-Kasten ueber die volle Breite (rechte Hakenliste entfaellt, #1225/#1227) */} /* nur Desktop: am Telefon ist das Raster einspaltig */
@media (min-width:751px){.sek.text.neben.liste-links.unten .ll-kopf,.sek.text.neben.liste-links.unten .text-links{grid-column:1/-1} /* #1238/#1239: ohne rechte Spalte die volle Breite nutzen */} /* nur Desktop: am Telefon ist das Raster einspaltig */
.fluss ol.haken.nummern>li,.lese.fliess ol.haken.nummern>li{padding:14px 0;border-top:1px solid var(--rand)} /* #1224: duenne Striche zwischen nummerierten Punkten */
.fluss ol.haken.nummern>li:last-child,.lese.fliess ol.haken.nummern>li:last-child{border-bottom:1px solid var(--rand)}
.sek.bildtext.ohne-rahmen figure img{width:100%} /* #1226/#1230: Bild so gross wie der Rahmen vorher */
.kopf.mit-usps .usps{margin-left:auto;margin-right:auto} /* #714: die drei Zahlen mittig zwischen Logo und Knopf */
.cta-kasten{border:1.5px solid rgba(46,139,87,.45);background:#f1f8f4;border-radius:var(--radius-k);padding:22px 26px;margin:28px 0} /* #1160: Aufruf-Kasten im Ratgeber */
.cta-kasten p{margin:0 0 12px}.cta-kasten p:last-of-type{margin-bottom:0}.cta-kasten .knopf{margin-top:16px}
.sek.artikel .lese h2,.sek.artikel .lese h3{text-wrap:pretty}
.sek.artikel .lese h1.wie-h2,.sek.artikel .lese h2.wie-h3,.sek.artikel .lese h1.wie-h3{text-wrap:pretty} /* #1255: Zwischenueberschriften nicht ausbalanciert umbrechen */
.sek.schritte .karte h3.eng{font-size:17px;letter-spacing:-.01em}
/* #1255: Zwischenueberschriften nicht ausbalanciert umbrechen */
.sek.schritte .karte h2.wie-h3.eng,/* #1255: Zwischenueberschriften nicht ausbalanciert umbrechen */
.sek.schritte .karte h1.wie-h3.eng{font-size:17px;letter-spacing:-.01em} /* #1275: Titel mit einem sehr langen Wort (Massnahmenumsetzung) etwas kleiner statt an den Rand zu stossen; Chrome trennt sonst Foerdermit-telberatung */
@media (min-width:751px){.sek.text.neben.nach-liste .text-raster{grid-template-columns:460px minmax(0,1fr);gap:56px} /* #1213: rechte Spalte beginnt wie in den Erklaerabschnitten darunter (660 px statt 865 px bei 1568 px) */ /* #1275: lange Woerter („Massnahmenumsetzung“) trennen statt an den Rand stossen */} /* nur Desktop: am Telefon ist das Raster einspaltig */
/* ---- 05.11.2026 Telefon-Regeln (Malina „Mobile:“ #1147, #1148, #1153, #1156/#1178/#1186, #1162/#1163, #1170, #1173, #1183–#1185, #1192, #1204–#1206) — nur unter 751 px ---- */
@media (max-width:750px){
  .sek.band .band-zeile .h3{display:block;margin-bottom:10px}
.sek.band .band-zeile .h2.wie-h3,.sek.band .band-zeile .h1.wie-h3{display:block;margin-bottom:10px} /* #1147: Luft zwischen Ueberschrift und Text im Band */
  .erk .mkopf h2,.sek.text.neben:has(.erk-folge)>.bahn.text-raster:first-child .mkopf h2{font-size:30px}
/* #1147: Luft zwischen Ueberschrift und Text im Band */
  .erk .mkopf h1.wie-h2,.sek.text.neben:has(.erk-folge)>.bahn.text-raster:first-child .mkopf h1.wie-h2{font-size:30px} /* #1148: alle Abschnittsueberschriften am Telefon gleich gross (30 px wie die uebrigen Module) */
  .sek.artikel h1.eng{font-size:28px} /* #1153: Titel mit sehr langem Wort (ab 18 Zeichen) etwas kleiner statt im Wort umzubrechen; ab 24 Zeichen (Gebaeudemodernisierungsgesetz) 22 px */
  .sek.artikel h1.eng.eng2{font-size:22px}
  .stimmen .kopfzeile{display:flex;flex-direction:column;align-items:stretch;gap:0} /* #1156/#1178/#1186: Google-Siegel ueber der Ueberschrift, rechtsbuendig */
  .stimmen .kopfzeile .siegel{order:-1;align-self:flex-end;margin:0 0 14px}
  .sek.ratgeber .kz-rechts{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;width:100%} /* #1162/#1163: Pfeile links, „Alle ansehen“ rechts am Rand */
  .karten-nach.fazit p{font-size:18px} /* #1170 */
  .bk.voll>img{position:static;width:100%;height:auto;min-height:0;aspect-ratio:auto;object-fit:contain;object-position:50% 50%} /* #1173: Teamfoto ganz zeigen, niemand abgeschnitten */
  .preiskarte .enthalten .haken li{font-size:16px} /* #1183: Hakenliste so gross wie der Preistext */
  .preiskarte .preis-links>p{font-size:16px}
  .preiskarte.paket .preis-links{margin:0 -24px;padding:22px 20px;border-radius:var(--radius)} /* #1184: gruener Kasten so breit wie die Karte darueber; #1185: Knopf beruehrt den Rand nicht */
  .hero.m-siegel-mittig .hero-siegel{display:flex;justify-content:center;width:100%} /* #1192 */
  .hero.pillen{padding-top:20px} /* #1204: oben nur die Haelfte an Luft */
  .hero.pillen .hero-raster>.hp-buehne{display:block;width:620px;height:560px;zoom:.55;margin:0 auto;gap:0} /* #1205: Pillen am Gebaeude wie am Desktop, Ganzes verkleinert (hohe Spezifitaet gegen die Telefon-Flexregeln) */
  .hero.pillen .hero-raster>.hp-buehne>svg{position:absolute;left:90px;top:20px;width:440px;max-width:none;height:470px;margin:0;flex-basis:auto}
  .hero.pillen .hero-raster>.hp-buehne>.sockel{display:block}
  .hero.pillen .hero-raster>.hp-buehne>.hp{position:absolute;white-space:nowrap;font-size:15px}
  .hero.pillen .hero-raster>.hp-buehne>.hp:nth-of-type(1){left:0;top:120px}.hero.pillen .hero-raster>.hp-buehne>.hp:nth-of-type(2){left:400px;top:150px}.hero.pillen .hero-raster>.hp-buehne>.hp:nth-of-type(3){left:-10px;top:300px}.hero.pillen .hero-raster>.hp-buehne>.hp:nth-of-type(4){left:400px;top:320px}.hero.pillen .hero-raster>.hp-buehne>.hp:nth-of-type(5){left:60px;top:470px} /* etwas naeher am Gebaeude, damit nichts ueber den Telefonrand ragt */
  .hero.pillen .kennzahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px} /* #1206: Kennzahlen wie auf /isfp */
  .hero.pillen .kennzahlen .zahl{font-size:19px}
  .hero.pillen .kennzahlen .was{font-size:12px;line-height:1.35;display:block}
}
/* Malina 05.11.2026, Kreis-Lagen (Desktop ab 1101 px, Telefon unveraendert): Kreis leicht auf dem Uebergang zum Abschnitt davor bzw. danach, groesstenteils im Abschnitt, nichts verdecken */
@media (min-width:1101px){
  .sek.bildtext:not(.unter-kopf):not(.buehne):not(.halb):not(.sticker-im-bild):has(>.bahn.paar>figure>.sticker){position:relative;z-index:2}
  .sek.bildtext:not(.unter-kopf):not(.buehne):not(.halb):not(.sticker-im-bild)>.bahn.paar:has(>figure>.sticker),.sek.bildtext:not(.unter-kopf):not(.buehne):not(.halb):not(.sticker-im-bild)>.bahn.paar>figure:has(>.sticker):not(:has(.zusatz)){position:static}
  .sek.bildtext:not(.unter-kopf):not(.buehne):not(.halb):not(.sticker-im-bild)>.bahn.paar>figure:not(:has(.zusatz))>.sticker{top:-40px;right:max(20px,calc((100% - var(--bahn))/2));left:auto;z-index:3} /* #1309/#1311/#1312: oben rechts auf dem Uebergang, nicht mehr auf dem Bild */
  .sek.unter-kopf.bildtext>.bahn.paar>figure>.sticker{top:-80px;right:-58px} /* #1360/#1367: unter der Partner-Kopfzeile etwas hoeher, auf die Ecke des Bildschirms */
  .hero.dunkel.sticker-kante{overflow:visible;z-index:3}.hero.dunkel.sticker-kante .hero-inhalt{position:static}
  .hero.dunkel.mit-sticker.sticker-neben.sticker-kante .hero-inhalt .sticker{position:absolute;top:auto;bottom:-64px;left:calc(max(20px,(100% - var(--bahn))/2) + 640px);right:auto;transform:rotate(10deg)} /* #1308: auf dem unteren Rand des Kopfbilds, zwischen Knopf und Siegeln */
  .sek.unter-kopf.text.neben.ab-text:has(>.bahn>.nb-sticker){padding-top:84px;position:relative;z-index:2}.sek.unter-kopf.text.neben.ab-text>.bahn:has(>.nb-sticker){position:static}
  .sek.unter-kopf.text.neben.ab-text>.bahn>.nb-sticker{top:auto;bottom:-72px;right:max(20px,calc((100% - var(--bahn))/2))} /* #1344/#1345: Kreis auf den Uebergang zum naechsten Abschnitt, oben weniger Leerraum */
  .presse+.sek.karten .bahn .mkopf .sticker.eck{top:-104px} /* #1350: leicht auf dem Uebergang zur Presseleiste, ohne Logos zu verdecken */
}
@media (min-width:901px){.sek.bildkarte.randlos{padding:0}.sek.bildkarte.randlos>.bahn{width:100%;max-width:none}.sek.bildkarte.randlos .bk.voll{border-radius:0;min-height:680px;padding-left:max(20px,calc((100% - var(--bahn))/2))}.sek.bildkarte.randlos .bk.voll>.bk-text{padding-left:0}} /* #1316/#1351: Bildkarte randlos ueber die ganze Breite, Text an der Bahnkante */
@media (min-width:901px){.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;align-content:start}.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte>.badge{grid-row:1;justify-self:start;align-self:end;margin:0}.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte>h3{grid-row:2;margin:0}.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte>h2.wie-h3,.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte>h1.wie-h3{grid-row:2;margin:0}.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte>.unterzeile{grid-row:3;margin:0}.sek.karten .raster:has(>.karte>.badge):has(>.karte>.unterzeile)>.karte>ul.haken{grid-row:4;margin:6px 0 0}} /* #1331: Badge ueber dem Titel; Titel, Unterzeile und Haken in allen Karten auf gleicher Hoehe */
.hero .sticker.kz-d{display:none!important}
@media (min-width:751px){.hero.dunkel.sticker-neben.sticker-haken.sticker-haken .titel-zeile h1{max-width:19.2em}.hero .titel-zeile .sticker.kz-m{display:none!important}.hero.dunkel.sticker-haken .haken-zeile{display:flex;align-items:center;gap:56px}.hero.dunkel.mit-sticker.sticker-neben.sticker-haken .hero-inhalt .haken-zeile .sticker.kz-d{display:flex!important;position:static;flex:none;transform:rotate(10deg);width:150px;height:150px;font-size:15px;margin:0}} /* #1333: Kreis neben den Hakenpunkten, Ueberschrift mit Umbruch */
@media (min-width:901px){.sek.bildtext.schmal>.bahn.paar{max-width:1180px;grid-template-columns:320px minmax(0,1fr)}.sek.bildtext.schmal figure img[alt^="Deutschlandkarte"]{max-width:300px}} /* #1384: Karte etwas groesser (300 statt 220 px), Text rechts breiter — Zwischengroesse */
.sek.bildtext.deko-hg .dh-zwei.eins{grid-template-columns:minmax(0,820px)}.sek.bildtext.deko-hg .dh-text .knoepfe{margin-top:28px}.sek.bildtext.deko-hg:has(>.sticker){overflow:visible;z-index:2}.sek.bildtext.deko-hg a.knopf{color:var(--petrol);text-decoration:none}.sek.bildtext.deko-hg>.sticker.band-eck{position:absolute;left:auto;right:80px;top:-48px;bottom:auto;width:150px;height:150px;transform:rotate(8deg);z-index:3}
@media (max-width:750px){.sek.bildtext.deko-hg:has(>.sticker){padding-top:84px}.sek.bildtext.deko-hg>.sticker.band-eck{top:-56px;right:20px;width:112px;height:112px;padding:12px;font-size:13px;line-height:1.2}} /* #1385: Runde 22 B mit Kreis auf dem Uebergang und Knopf */
.kopf.partner .pn a.aktiv{color:var(--gruen);box-shadow:inset 0 -2px 0 var(--gruen);padding-bottom:4px}.kopf.partner.dunkel:not(.fest) .pn a.aktiv{color:var(--gelb);box-shadow:inset 0 -2px 0 var(--gelb)} /* #1361/#1364: aktuelle Seite in der Partner-Kopfzeile hervorgehoben */
@media (min-width:751px){.karten-nach.drei .zahlung .wege{gap:12px 16px}.karten-nach.drei .zahlung .wege>.logos{display:contents}.karten-nach.drei .zahlung .wege>.logos img[alt="Logo MasterCard"]{order:1}.karten-nach.drei .zahlung .wege>.logos img:not([alt="Logo MasterCard"]){order:2}} /* #1342: Mastercard in die Zeile neben „Rechnung“ */
.zahlung .logos img[src*="Mastercard"]{height:42px;margin:-8px 0} /* #1422/#1427 (Telefon), #1487–#1489/#1518 (Desktop): Mastercard im Verhaeltnis zu PayPal und Visa (das Zeichen ist fast quadratisch, wirkte bei gleicher Hoehe zu klein) */
.preiskarte.dunkel .zahlung .logos img[src*="Mastercard_wei_"],.sek.dunkel .zahlung:not(.dunkel) .logos img[src*="Mastercard_wei_"]{filter:brightness(0) invert(1);opacity:.9} /* #1422: auf dunkler Karte weiss wie PayPal und Visa (die Regel fuer helle Kaesten griff auch hier) */
.sek.bildtext.buehne.zwei-angebote{padding:80px 0}.sek.bildtext.buehne.zwei-angebote>.schleier{position:absolute;inset:0;background:rgba(15,41,46,.74)}.zwei-angebote .za-kopf{max-width:1000px;margin:0 auto 44px;text-align:center}.zwei-angebote .za-kopf .mkopf{display:block;margin:0 auto}.zwei-angebote .za-kopf h2{color:#fff;margin:0 auto;text-align:center}.zwei-angebote .za-kopf h1.wie-h2{color:#fff;margin:0 auto;text-align:center}.zwei-angebote .za-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;max-width:1000px;margin:0 auto}.zwei-angebote .za{display:flex;flex-direction:column;gap:24px}.zwei-angebote .za-text p{margin:0 0 10px;font-size:17px;line-height:1.65;color:rgba(255,255,255,.88)}.zwei-angebote .za-text p:first-child{font-weight:700;color:#fff}.zwei-angebote .za .knoepfe{margin-top:auto;justify-content:center}
@media (max-width:750px){.zwei-angebote .za-raster{grid-template-columns:1fr;gap:40px}.sek.bildtext.buehne.zwei-angebote{padding:56px 0}.sek.bildtext.buehne.zwei-angebote>.hg{position:absolute;height:100%}.sek.bildtext.buehne.zwei-angebote>.schleier{display:block!important;z-index:1}} /* #1348/#1351/#1352: zwei Angebote nebeneinander auf Foto mit dunklem Schimmer, Knoepfe darunter */
/* Malina 05.11.2026 mittags, nur Telefon (Desktop unveraendert): Kreise an Abschnittsueberschriften ragen nur noch ein Viertel in den Abschnitt davor,
   Overline/Ueberschrift ruecken darunter (#1405 /isfp, #1429/#1430 /gewerbe-energieausweise) */
@media (max-width:750px){
  .sek.karten .kopfzeile .mkopf:has(>.sticker.eck){padding-top:40px}.sek.karten .mkopf>.sticker.eck.eck{top:-86px;bottom:auto}
  .sek.karten.m-sticker-oben>.bahn{padding-top:40px}.sek.karten.m-sticker-oben .bahn .karte>.sticker.eck.an-karte.an-karte{top:-86px}
  .preiskarte.paket .preis-links{margin-left:0;margin-right:0}.preiskarte.paket .bausteine{display:grid;width:max-content;max-width:100%}.preiskarte.paket .bausteine .plus{justify-self:start}.preiskarte.paket .bausteine .baustein:last-child{width:0;min-width:100%;box-sizing:border-box} /* #1412: Rechteck im Rechteck (nicht bis zum dunklen Rand), Bausteine nur so breit wie ihr Text */
  .sek:has(>.sticker.m-kante){padding-top:108px}section>.sticker.m-kante.m-only.m-only{top:-30px} /* #1411: Kopf-Kreis weiter runter, darunter mehr Luft */
  .sek.karten .bahn .raster>.karte>.sticker.eck.an-karte{top:-24px} /* #1416: Kreis an der Karte etwas tiefer, Abstand zum Knopf darueber */
  .karten-nach.zwei>.kn-links{width:100%}.karten-nach.zwei>.kn-links>.zahlung{width:100%;box-sizing:border-box} /* #1418: Zahlungskasten so breit wie die Karten */
  .sek.band{padding:40px 0}.sek.band:has(>.bahn>.sticker.band-eck){padding-top:76px}.sek.band .band-rechts:not(:has(*)){display:none} /* #1419: Band schmaler, oben und unten gleich viel Luft */
  .sek.karten.dunkel .karte.favorit{border:2px solid var(--gruen-hell);background:rgba(255,255,255,.05)}.sek.karten .karte.favorit .ueber.empfehlung.empfehlung{color:var(--petrol)} /* #1433/#1434: Empfehlungs-Kasten sichtbar umrandet, „Unsere Empfehlung“ dunkel auf Gelb */
  .sek.karten:not(.dunkel) .zahlung:not(.dunkel) .logos img{filter:brightness(0);opacity:.75} /* #1432: Zahlungslogos einfarbig dunkel */
  .sek.text.erklaer:has(>.bahn.ohne-kopf):has(+.sek.faq){padding-bottom:12px} /* #1436: unter dem Einleitungstext vor den FAQ nur halb so viel Leerraum */
  img.klogo[src*="Design_ohne_Titel__2_"]{height:92px;margin:-10px 0 -8px -6px} /* #1404: GIH-Logo hat viel Weissraum in der Datei — groesser, damit es neben den anderen Logos nicht klein wirkt */
  .sek.preisblock.titel-aussen .preiskarte{margin-top:20px} /* #1426: etwas mehr Abstand Ueberschrift -> Kasten */
  .sek.preisblock.titel-aussen .preiskarte:has(.pille-flach){margin-top:44px} /* #1635: Ueberschrift etwas weiter weg vom Kreis auf der Kastenecke */
  .hero .kn-beispiel{align-items:center} /* #1425: Knopf mittig neben dem Beispiel-Ausweis */
  .hero.hero>.hero-siegel.hero-siegel{width:auto} /* #1413: Siegelzeile war 100 % breit plus 20 px Rand und damit 20 px nach rechts verschoben — jetzt mittig */
  .karte .khinweise{gap:14px;margin-top:-8px}.karte .khinweise p:not(:has(em)){font-size:13px;line-height:1.45} /* #1407: Info-Zeile kleiner, dicht am Text darueber, Abstand zum Schlusssatz */
  .sek.band .band-zeile{gap:20px}.sek.band .band-rechts .knoepfe{margin-top:0} /* #1408: Text und Knopf naeher zusammen */
  .sek.stimmen .kopfzeile{align-items:center;text-align:center}.sek.stimmen .kopfzeile h2{text-align:center}.sek.stimmen .kopfzeile h1.wie-h2{text-align:center}.sek.stimmen .kopfzeile img.siegel{align-self:center;box-sizing:border-box;width:244px;height:56px;padding:2px 4px;object-fit:contain} /* #1409/#1410: Ueberschrift mittig, Google-Siegel mittig und groesser in gleicher Form */
}
.sek.text ul.haken+.als-absatz{margin-top:28px} /* #1313/#1421: ueber und unter der Hakenliste gleich viel Abstand, auch wenn danach ein Absatz im Ueberschrift-Markup folgt */
/* Malina 05.11.2026 abends (#1486/#1533/#1531/#1532/#1502/#1503/#1506/#1511/#1513/#1439/#1475/#1460/#1464/#1466/#1469/#1525/#1497) */
.zwei-angebote .za-text{text-align:center} /* #1497/#1525: Texte der beiden Angebote mittig (alle Breiten) */
@media (min-width:1101px){.hero.dunkel.sticker-kante .hero-inhalt>:not(.titel-zeile),.hero.dunkel.sticker-kante .hero-inhalt>.titel-zeile>h1{position:relative;z-index:2}} /* #1552: Kreis-auf-der-Kante-Regel (#1308) machte den Kopfinhalt statisch -> Schleier lag ueber Ueberschrift, Text und Knopf */
.sek.bildtext.buehne>.schleier{position:absolute;inset:0} /* #1550: der Schimmer der Buehne hatte keine Hoehe (0 px) und war unsichtbar */
.sek:not(.dunkel) .lese a.tel-auto,.sek:not(.dunkel) p a.tel-auto{color:var(--gruen)!important} /* #1548/#1551: Rufnummer im Fliesstext auch am Desktop gruen, damit man den Link sieht (Telefon: #1467) */
.knoepfe+.foerder-hinweis,.knoepfe~p.foerder-hinweis{margin-top:24px} /* #1549: Abstand Knopf -> Foerder-Hinweis */
@media (max-width:750px){.sek:not(.dunkel) .lese a.tel-auto,.sek:not(.dunkel) p a.tel-auto{color:var(--gruen)!important;text-decoration:none}} /* #1467: Rufnummer im Fliesstext am Telefon gruen statt unterstrichen (auf dunkel und im Kreis unveraendert) */
.hero h1 .hervor{color:var(--gruen-hell)}.hero.hell h1 .hervor{color:var(--gruen)} /* #1443: Textstueck der Kopfueberschrift gruen (<seite>.heroHervor) */
br.m-br{display:none}@media (max-width:750px){br.m-br{display:inline}.lese .nr,p .nr{font-weight:700}} /* #1437: Umbruch nur am Telefon; #1457/#1458: Gliederungsnummern am Telefon fett */
.zahlung.auszeichnungen[hidden]{display:none}@media (min-width:751px){.karten-nach.drei:has(>.zahlung.auszeichnungen[hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}} /* #1517: Auszeichnungen-Kasten je Seite weg (<seite>.auszeichnungenWeg), zwei Kaesten bleiben */
@media (min-width:1101px){
  .presse+.sek.bildtext:not(.unter-kopf):not(.buehne):not(.halb):not(.sticker-im-bild)>.bahn.paar>figure:not(:has(.zusatz))>.sticker{top:-20px} /* #1535 (ersetzt #1444): Kreis unter der Presseleiste etwas tiefer, noch auf dem Uebergang */
  .sek.band:has(>.bahn>.sticker.band-eck){padding-top:100px} /* #1492/#1498: Band-Kreis auf dem Uebergang davor, ohne den Knopf im Band zu verdecken */
  .presse+.sek.bildtext:not(.unter-kopf)>.bahn.paar>figure:has(.zusatz)>.sticker{top:-54px} /* #1537: Kreis auf dem Laptop-Bild etwas hoeher (x bleibt) */
  .sek.karten.dunkel.ausweis-karten .karte.favorit{background:rgba(255,255,255,.05);border:2px solid var(--gruen-hell)} /* #1540: Empfehlungskarte auf dunkler Flaeche wieder umrandet */
  .sek.karten.dunkel.ausweis-karten .karte.favorit .ueber.empfehlung{background:var(--gruen);color:#fff;border-color:var(--gruen)} /* #1541: „Unsere Empfehlung“ gruen mit weisser Schrift */
}
@media (min-width:901px){.sek.karten.ausweis-karten .raster:has(>.karte:nth-child(3)){align-items:stretch}} /* #1491: bei drei Ausweis-Karten alle gleich hoch (die dritte hat einen zweizeiligen Titel) */
@media (min-width:1101px){.sek.karten.ausweis-karten>.bahn>.sticker.eck{top:-62px;right:calc(-1 * min(84px, (100vw - 100%) / 2 - 6px))}} /* #1486: Kreis auf die Ecke der Empfehlungskarte */
@media (max-width:750px){
  .sek.karten.ausweis-karten>.bahn:has(>.sticker.eck){position:relative}
  .sek.karten.ausweis-karten>.bahn>.sticker.eck.eck{position:absolute;top:-58px;right:0;left:auto;width:112px;height:112px;border-radius:50%;padding:12px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.2;font-weight:700;transform:rotate(8deg);z-index:3} /* #1533: Hinweis als Kreis auf dem Uebergang statt Balken */
  .sek.karten.ausweis-karten:has(>.bahn>.sticker.eck){padding-top:72px}
  .kopf.partner .pn ul:not(:has(>li:nth-child(4))){flex-wrap:nowrap;gap:10px;justify-content:space-between}.kopf.partner .pn ul:not(:has(>li:nth-child(4))) a{font-size:clamp(10px,2.9vw,12px);white-space:nowrap}.kopf.partner .pn:has(ul:not(:has(>li:nth-child(4)))){width:100%} /* #1531: drei Menuepunkte in einer Reihe */
  .hero>.hero-siegel.rechts{display:flex;justify-content:center;width:auto} /* #1532: Google-Siegel im Kopf mittig */
  .sek.unter-kopf{padding-top:56px} /* #1502/#1503/#1506/#1513: unter der Partner-Kopfzeile nur noch halb so viel Leerraum */
  .sek.unter-kopf.text.neben.ab-text:has(>.bahn>.nb-sticker){position:relative;z-index:2;padding-bottom:72px}.sek.unter-kopf.text.neben.ab-text>.bahn>.nb-sticker.nb-sticker.nb-sticker{top:auto;bottom:-52px;right:20px} /* #1511: Kreis rechts auf dem Uebergang unter der Hakenliste */
  .sek.text.neben.ab-text:not(.unter-kopf):has(>.bahn>.nb-sticker){padding-top:136px}.sek.text.neben.ab-text:not(.unter-kopf)>.bahn>.nb-sticker.nb-sticker{top:-4px} /* #1439/#1475, #1640: Kreis tiefer, ueberdeckt weder Kennzahlen davor noch die Ueberschrift */
  .sek.bildtext.deko-hg:has(>.sticker){padding-top:128px}.sek.bildtext.deko-hg>.sticker.band-eck{top:-24px} /* #1460: Kreis nicht ueber dem Knopf davor, Ueberschrift rueckt darunter */
  .sek.bildtext.buehne>.sticker.band-eck.band-eck{left:auto;right:20px;width:112px;height:112px;padding:12px;font-size:12px;line-height:1.2} /* #1466: Kreis kleiner und rechts, Gesichter frei */
  .sek.karten .mkopf>.sticker.eck.eck.eck{top:auto;bottom:calc(100% - 36px)} /* #1469: grosse Kreise wachsen nach oben, ueberdecken die Ueberschrift nicht */
  .sek.bildtext.m-bild-oben .paar:has(>figure){display:flex;flex-direction:column} /* #1481: Bild-oben-Regel griff im Raster mit fester Platzierung (schmal-bild) nicht */
  .reiter-panel .rtext p,.reiter-panel .rtext li,.sek .vn ul.haken li,.sek .fluss ol.haken li{font-size:17px} /* #1477–#1480: im Reiter-Modul und in den Listen daneben dieselbe Schriftgroesse wie der Fliesstext (17 px) */
  .hero.pillen .hero-raster>.hp-buehne>.hp:nth-of-type(5){left:130px;top:440px} /* #1474: unterste Pille („Manage to Green“) naeher ans Haus */
  .sek.band.zweispaltig.m-grau{background:var(--grau)} /* #1459/#1465: Band auf Weiss am Telefon hellgruen (Bandregel war spezifischer) */
  .hero[data-schleier="leicht"] .schleier{opacity:1;background:linear-gradient(rgba(11,31,35,.4) 0%,rgba(11,31,35,.18) 35%,rgba(11,31,35,.72) 75%,#0b1f23 100%)} /* #1464: weicher Uebergang Bild -> dunkel wie auf den anderen Seiten */
}
.hinweis.betont.unter-karten{margin:32px 0 0;align-items:center;background:#eaf4ef;border-color:var(--gruen)}.hinweis.betont.unter-karten svg{color:var(--gruen)} /* #1354: Kreis-Hinweis als Kasten unter den Karten; #1490: gruen mit Haken statt gelb mit Ausrufezeichen */
/* Malina 06.11.2026 (#1574/#1579/#1596/#1603/#1607/#1578): Bezahl-Kasten unter Ausweis-Karten genau so breit wie eine Karte, Logos optisch gleich gross
   (PayPal/Visa 22 px, das fast quadratische Mastercard-Zeichen 34 px — die 20-px-Regel von #1568 schlug die Mastercard-Regel), auf heller Flaeche alle Logos einfarbig dunkel */
@media (min-width:751px){
  .sek.karten.ausweis-karten .karten-nach.zwei .kn-links>.zahlung{width:100%;box-sizing:border-box}
  .sek.karten.ausweis-karten .zahlung .logos{gap:14px}.sek.karten.ausweis-karten .zahlung .logos img{height:22px}
  .sek.karten.ausweis-karten .zahlung .logos img[src*="Mastercard"]{height:34px;margin:-6px 0}
  .sek.karten.ausweis-karten .karten-nach.drei:has(>.zahlung.auszeichnungen[hidden]){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .sek.karten.ausweis-karten .karten-nach.drei:has(>.zahlung.auszeichnungen[hidden])>:last-child{grid-column:3} /* #1607/#1608: beide Kaesten nur so breit wie eine Karte, unter der ersten und dritten Karte */
}
.sek.karten.ausweis-karten:not(.dunkel) .zahlung:not(.dunkel) .logos img{filter:brightness(0);opacity:.75} /* #1578: Gewerbe-Kasten wie /energieausweis (einfarbige Logos) */
.fotos-ganz .karte.mit-foto .kfoto[src*="frieder-neubauer-portrait"]{object-position:50% 32%}.fotos-ganz .karte.mit-foto .kfoto[src*="ralf-simson-portrait"]{object-position:50% 34%} /* #1585/#1586: Ausschnitt tiefer, weniger leerer Raum ueber dem Kopf */
@media (min-width:901px){.sek.karten.ausweis-karten .raster.s2:not(:has(>.karte:nth-child(3))){column-gap:40px}.sek.karten.ausweis-karten .raster.s2:not(:has(>.karte:nth-child(3)))>.karte.favorit{transform:none}} /* #1580: zwei Ausweis-Karten nebeneinander ohne Vergroesserung — gleiche Schrift, Zeilen auf einer Hoehe, etwas mehr Abstand */
.sek.karten.ausweis-karten .karte.favorit .preishinweis.preishinweis{color:#fff;font-size:15px;line-height:1.5} /* #1577: Sternchen-Hinweis samt Satz in Weiss */
.symbol img.einfaerben:is([src*="658e3b_80d8bc5e"],[src*="/16.gross"],[src*="/13.5e23fb"],[src*="/14.fa3cd36"]){filter:brightness(0) invert(52%) sepia(45%) saturate(700%) hue-rotate(105deg) brightness(.85) contrast(1.1);mix-blend-mode:normal} /* #1576: dunkle Wix-Strichsymbole (/verbrauchsausweis) gruen wie die uebrigen Kartensymbole */
/* tink-Seite (Malina 06.11.2026, #1611–#1625/#1628–#1630) — nur unter .ci-tink */
.ci-tink .hero.dunkel .schleier{display:none} /* #1611 */
.ci-tink .hero .tk-kasten{background:rgba(0,127,85,.84);border-radius:20px;padding:36px 40px;width:fit-content;max-width:min(760px,100%);box-sizing:border-box}
.ci-tink .sticker.tk-angebot{background:#007f55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;border:2px solid rgba(255,255,255,.85)} /* #1612: ohne Verlauf, tink-Gruen */
.ci-tink .sticker.tk-angebot .ta-ueber{font-size:.82em;font-weight:600}.ci-tink .sticker.tk-angebot .ta-preis{color:#f4c542;font-weight:800;font-size:1.08em;line-height:1.15}.ci-tink .sticker.tk-angebot .ta-statt{font-size:.85em;opacity:.9}
.ci-tink .knopf:hover,.ci-tink .knopf.gelb:hover,.ci-tink .hero.dunkel .knopf.gelb:hover,.ci-tink .knopf.rand-hell:hover{background:#fff;color:#007f55;box-shadow:inset 0 0 0 2px #007f55} /* #1615: Hover weiss mit gruener Schrift und Umrandung */
.ci-tink .sek.band .band-zeile{display:flex;flex-direction:column;align-items:flex-start;gap:24px}.ci-tink .sek.band .band-zeile .h3+p{margin-top:16px}.ci-tink .sek.band .band-zeile .h2.wie-h3+p,.ci-tink .sek.band .band-zeile .h1.wie-h3+p{margin-top:16px} /* #1613/#1614: mehr Abstand Ueberschrift–Text, Knopf links unter dem Text */
.ci-tink .sek.band.tk-mitte .band-zeile{align-items:center;text-align:center}.ci-tink .sek.band.tk-mitte .band-zeile>div{max-width:820px}.ci-tink .sek.band.tk-mitte .band-rechts{justify-content:center} /* #1620–#1622/#1630: zentriert, Knopf darunter */
.ci-tink .sek.band .tk-zusatz{font-size:17px;margin-top:8px} /* #1629 */
.ci-tink .sek.bildtext.tk-bildtext{background:#f9f9fa} /* #1616 hellgruen -> #1686 (Malina 06.11.2026): „anstatt dem hellgrün NUR AUF DIESER SEITE f9f9fa“ */
.ci-tink .tk-bildtext>.tk-kopf{text-align:center;margin-bottom:36px}.ci-tink .tk-bildtext>.tk-kopf h2{margin:0 auto;max-width:900px}.ci-tink .tk-bildtext>.tk-kopf h1.wie-h2{margin:0 auto;max-width:900px} /* #1617: Ueberschrift mittig ganz oben */
.ci-tink .tk-bildtext figure,.ci-tink .tk-bildtext figure img{border:0;box-shadow:none;background:none;padding:0} /* #1619: Rahmen weg */
.ci-tink .tk-bildtext .fluss{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.ci-tink .tk-bildtext .tk-unter{font-size:24px;font-weight:700;color:var(--text);margin:0 0 10px}.ci-tink .tk-bildtext .tk-text{margin:0 0 24px}.ci-tink .tk-bildtext .knoepfe{flex-direction:column;align-items:center;justify-content:center} /* #1618 */
.ci-tink .hero .tk-kasten{width:min(860px,100%)}.ci-tink .hero .tk-kasten .titel-zeile{margin-bottom:18px}.ci-tink .hero .tk-kasten h1{flex:1 1 auto}
.ci-tink .tk-bildtext>.bahn.tk-kopf{display:block}.ci-tink .tk-bildtext>.tk-kopf .mkopf{max-width:none;width:100%;margin:0 auto;text-align:center;align-items:center}.ci-tink .hero .tk-kasten h1{max-width:none}.ci-tink .tk-bildtext figure img{width:100%;height:auto}
@media (min-width:751px){.ci-tink .sek.slider>.bahn{width:100%;max-width:none;padding-left:0;padding-right:0}.ci-tink .sek.slider>.bahn>.foerder-hinweis{width:min(var(--bahn),100% - 40px);margin-left:auto;margin-right:auto;box-sizing:border-box}.ci-tink .sek.slider .folien,.ci-tink .sek.slider .folie img{border-radius:0}.ci-tink .sek.slider .folie-text{right:auto;left:max(48px,calc((100vw - var(--bahn))/2))}} /* #1623–#1625: Slider volle Breite, Textkasten links */
.kontakt-text p a.tel-auto{font-weight:700} /* #217/#727/#1582: Rufnummer im Kontakttext fett */
.sek.text.einspaltig>.bahn.ein-spalte{max-width:var(--bahn)}.sek.text.einspaltig>.bahn.ein-spalte>*{max-width:900px} /* #1597: einspaltiger Abschnitt an der linken Bahnkante wie die anderen Abschnitte (Textbreite bleibt 900 px) */
@media (max-width:750px){.leerzeile{display:block;height:12px}.leerzeile br{display:none}} /* #1632: Wix-Leerzeile am Telefon = Absatzabstand */
@media (min-width:751px){.hero.dunkel.sticker-haken .hero-inhalt>.haken-zeile{align-items:flex-start;margin-top:26px}.hero.dunkel.mit-sticker.sticker-neben.sticker-haken .hero-inhalt .haken-zeile .sticker.kz-d{margin:-28px 0 -60px}.hero.dunkel.sticker-haken .hero-inhalt>.haken-zeile+.knoepfe{margin-top:26px}} /* #1642: Haken und Knopf mit gleichem Abstand (40 px) unter der Ueberschrift, Kreis haengt daneben */
@media (max-width:750px){.karten .karten-nach.label-text+.knoepfe{margin-top:52px}}
@media (min-width:751px){.ci-tink .hero .tk-kasten{position:relative}.ci-tink .hero .tk-kasten .titel-zeile>.sticker.tk-angebot{position:absolute;top:-80px;right:-110px;margin:0;z-index:3} /* #1657: Angebots-Kreis auf der oberen rechten Ecke des Kastens */
  .ci-tink .hero .tk-kasten h1{max-width:none} /* #1658: Ueberschrift nutzt die ganze Kastenbreite -> weniger Umbrueche, Kasten niedriger */
  .ci-tink .sek.tk-bildtext .bahn.paar>figure{width:50%;justify-self:center} /* #1659: Bild halb so gross */
  .ci-tink .sek.tk-bildtext .fluss .knoepfe{margin-top:0} /* #1660: Knopf naeher am Text */
  .ci-tink .sek.band.tk-links,.ci-tink .sek.band.tk-mitte{padding-top:72px;padding-bottom:72px}.ci-tink .sek.band.tk-mitte+.sek.slider{padding-top:0}
  .ci-tink .sek.slider .folie:nth-child(2) .folie-text,.ci-tink .sek.slider .folie:nth-child(4) .folie-text{left:auto;right:max(48px,calc((100vw - var(--bahn))/2))}} /* #1663/#1664: Folie 2 (Kosteneffizienz) und 4 (Beratung): Textkasten oben rechts /* #1661/#1662: Baender mit mehr Luft, oben und unten gleich (Slider klebt nicht mehr 84 px Weiss unter das Band) */
@media (min-width:751px){.karten-nach.drei>.zahlung{justify-content:center;align-items:center;text-align:center}.karten-nach.drei>.zahlung .wege{justify-content:center}} /* #1643: Text und Logos mittig im Bezahl-Kasten, wenn er so hoch wie der Nachbarkasten ist */ /* #1636: unter dem Ergebnis-Text so viel Luft zum Knopf wie oben zu den Karten */
@media (min-width:1101px){.sek.bildtext.sticker-im-bild>.bahn.paar>figure>.sticker{top:-54px}} /* #1641: Kreis im Bild so hoch wie auf /bedarfsausweis (dort #1537) */
/* Lauf 06.11.2026 11:18 (Malina #1665–#1681) */
@media (max-width:750px){.sek.karten .kopfzeile>.mkopf:has(>.sticker.eck){align-self:stretch}} /* #1666: Kreis an der Kartenueberschrift am rechten Rand der Bahn, nicht am Ende einer kurzen Ueberschrift */
@media (max-width:750px){.halb-text ul.haken li{font-size:16px;line-height:1.6}} /* #1667: Aufzaehlung im Bild-Text halb so gross wie der Fliesstext */
@media (max-width:750px){.kopf.partner.dunkel:not(.fest) .mal{color:#fff}} /* #1668: × zwischen den Logos weiss auf dunklem Kopf */
.pm-schalter{display:none}@media (min-width:751px){.kopf.partner .pm-burger{display:none!important}}
@media (max-width:750px){.kopf.partner:has(.pm-burger) .kb{position:relative;flex-wrap:nowrap;align-items:center}.kopf.partner .pm-burger{display:block;margin-left:auto;color:var(--text)}.kopf.partner.dunkel:not(.fest) .pm-burger{color:#fff}.kopf.partner:has(.pm-burger) .kr{display:none;position:absolute;top:100%;left:-20px;right:-20px;background:var(--weiss);padding:6px 20px 14px;box-shadow:0 14px 28px rgba(15,41,46,.14);z-index:40}.kopf.partner .pm-schalter:checked~.kr{display:block}.kopf.partner:has(.pm-burger) .pn ul.pn-u,.kopf.partner:has(.pm-burger) .pn ul{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;text-align:right}.kopf.partner:has(.pm-burger) .pn ul a{display:block;padding:12px 0;font-size:17px!important;white-space:normal;color:var(--text)!important;box-shadow:none}.kopf.partner:has(.pm-burger) .pn ul a.aktiv{color:var(--gruen)!important}} /* #1669: Partner-Menue am Telefon hinter dem Burger (<seite>.partnerBurgerMobil) */
@media (max-width:750px){.sek.karten>.bahn:has(>.hinweis.betont.unter-karten){display:flex;flex-direction:column}.sek.karten>.bahn>.hinweis.betont.unter-karten{order:-1;margin:0 0 32px}} /* #1670: Hinweis unter den Karten am Telefon ganz oben */
.hero .hg.hg-m{display:none}@media (max-width:750px){.hero .hg.hg-d{display:none}.hero .hg.hg-m{display:block}} /* #1671: eigenes Kopfbild am Telefon (<seite>.heroBildMobil) */
@media (max-width:750px){.zwei-angebote .za{gap:12px;border:1.5px solid rgba(255,255,255,.9);border-radius:20px;padding:24px 18px}.zwei-angebote .za-raster{gap:20px}} /* #1672–#1674: zwei Angebote am Telefon je in weissem Rahmen, Knopf naeher am Text */
@media (max-width:750px){.sek.bildtext.deko-hg.m-buehne.m-buehne{padding:0 0 48px;overflow:visible}.sek.bildtext.deko-hg.m-buehne>img.hg{position:relative;inset:auto;height:240px;display:block;opacity:1}.sek.bildtext.deko-hg.m-buehne>.bahn{padding-top:28px}.sek.bildtext.deko-hg.m-buehne.m-buehne>.sticker.band-eck{top:-56px}} /* #1675: Foto oben, Text darunter wie die Buehne auf /standorte/hamburg (<seite>.mobilBuehne) */
@media (min-width:1101px){.kontakt-raster.eins .kontakt-text{row-gap:0}.kontakt-raster.eins .kontakt-text>:not(.knoepfe)+:not(.knoepfe){margin-top:22px}} /* #1678: Knopf-Spalte ueber sechs Zeilen machte den Kontaktabschnitt 90 px zu hoch */
@media (min-width:751px){.karten-nach.drei>.zahlung{align-items:flex-start;text-align:left}.karten-nach.drei>.zahlung .wege{justify-content:flex-start}} /* #1680: „Bequem bezahlen per:“ und Logos linksbuendig (ersetzt die Waagerechte von #1643, senkrecht bleibt mittig) */
@media (min-width:751px){.ci-tink .hero .tk-kasten .titel-zeile>.sticker.tk-angebot{top:calc(40% - 80px)}} /* #1681: Angebots-Kreis tiefer, etwas ueber der Kastenmitte */
@media (min-width:751px){.ci-tink .sek.tk-bildtext .bahn.paar>figure{justify-self:end}.ci-tink .sek.tk-bildtext .bahn.paar>.fluss{justify-self:start}} /* #1682: Bild und Text rechts naeher zusammen (Bild an die Mitte, Text direkt daneben) */
.ci-tink .sek.karten:not(.grau):not(.dunkel){background:#f9f9fa} /* #1684 hellgruen -> #1695 (Malina 06.11.2026): „auch das Grau bitte, was hier schon auf der Seite ist“ (#f9f9fa wie #1686) */
@media (min-width:1601px){.ci-tink .hero .tk-kasten h1{font-size:54px}} /* #1694 (Malina 06.11.2026): Kopf-Ueberschrift etwas kleiner (64 -> 54 px), damit „Energieberatung mit Plan“ in die erste Zeile passt; bis 1600 px gilt schon 52 px */
@media (max-width:750px){.sek.text+.sek.karten .mkopf>.sticker.eck.eck.eck.lang{bottom:calc(100% - 12px)}} /* #1690 (Malina 06.11.2026, „Mobile:“): grosser Kreis an der Kartenueberschrift etwas hoeher (24 px), nur Telefon und nur nach einem Textabschnitt (nach Presseleiste, Foto oder Karten wuerde er sie anschneiden) */
/* #1691 (Malina 06.11.2026, „Mobile:“): Geschaeftskunden-Kopf oben 48 statt 96 px Leerraum — Regel .hero.hell.pillen im Telefon-Block oben */
/* Lauf 06.11.2026 12:48 (Malina #1698–#1708, tink, alles nur Telefon) */
@media (max-width:750px){
  .ci-tink .hero.dunkel>img.hg{-webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.6) 75%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.6) 75%,transparent 100%)} /* #1698: Foto laeuft weich in den dunklen Grund aus (Schimmer statt harter Kante) */
  .ci-tink .hero .tk-kasten{padding:32px 24px}.ci-tink .hero .tk-kasten h1{font-size:28px} /* #1699: Kopf-Ueberschrift etwas kleiner und Kasten mit schmalerem Innenrand, weniger Umbrueche */
  .ci-tink .hero.mit-sticker .tk-kasten .titel-zeile>.sticker.sticker.tk-angebot{left:-26px} /* #1700: Angebots-Kreis weiter links */
  .ci-tink .tk-bildtext .fluss .tk-text{font-size:19px;margin-bottom:0}.ci-tink .tk-bildtext .fluss .tk-text br{display:none}.ci-tink .tk-bildtext .fluss .knoepfe{margin-top:4px} /* #1701/#1702: Text groesser in drei Zeilen, Knopf naeher am Text */
  .ci-tink .sek.band.tk-mitte .band-zeile p{margin-left:auto;margin-right:auto} /* #1703: Text im Band mittig */
  .ci-tink .sek.slider .folie:nth-child(1) img{object-position:72% 50%}.ci-tink .sek.slider .folie:nth-child(2) img{object-position:9% 50%}.ci-tink .sek.slider .folie:nth-child(3) img{object-position:81% 50%} /* #1704–#1706: Bildausschnitt je Folie auf die Personen */
}
@media (min-width:751px){.hero .kn-gruppe:not(.lang):has(>.knoepfe>.knopf:nth-child(2):last-child){display:grid;grid-template-columns:auto auto;column-gap:14px;justify-content:start;margin-top:28px}.hero .kn-gruppe:not(.lang):has(>.knoepfe>.knopf:nth-child(2):last-child)>.knoepfe{display:contents}.hero .kn-gruppe:not(.lang):has(>.knoepfe>.knopf:nth-child(2):last-child)>.notiz{grid-column:1;justify-self:center;width:0;display:flex;justify-content:center;white-space:nowrap}} /* #1709 (Malina 06.11.2026): Hinweis unter zwei Kopf-Knoepfen mittig unter dem LINKEN Knopf (gilt fuer jeden Kopf mit genau zwei Knoepfen und Hinweis) */
.hero.dunkel>.hero-inhalt:last-child:has(.kn-gruppe:not(.lang)>.knoepfe>.knopf:nth-child(2):last-child){padding-bottom:40px}@media (min-width:751px){.hero.dunkel>.hero-inhalt:last-child:has(.kn-gruppe:not(.lang)>.knoepfe>.knopf:nth-child(2):last-child){padding-bottom:64px}} /* #1710: ohne Kennzahlen-Leiste braucht der Kopf unten Luft (sonst klebt der Hinweis an der Presseleiste) */
.pband.ohne-ziel>.ziel{display:none}@media (min-width:901px){.pband.ohne-ziel{grid-template-columns:repeat(4,minmax(0,1fr))}} /* #1717: Pfeilband ohne Ergebnisbild, vier Pfeile ueber die volle Breite */
.sek.bildtext.deko-hg .dh-zwei.alles-links{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px}.sek.bildtext.deko-hg .dh-zwei.alles-links>*{grid-column:1}@media (max-width:750px){.sek.bildtext.deko-hg .dh-zwei.alles-links{grid-template-columns:1fr}} /* #1725 (Malina 06.11.2026): Haken links unter der Einleitung, Foto rechts frei */
.sek.text.pfeil-kaesten .pk-lead{max-width:820px;margin:18px 0 32px}.sek.text.pfeil-kaesten .pk-lead p{margin:0}
.sek.text.pfeil-kaesten .pk-zwei{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:stretch}
.sek.text.pfeil-kaesten .pk-kasten{border:1.5px solid rgba(255,255,255,.25);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.sek.text.pfeil-kaesten .pk-partei{font-size:15px;font-weight:700;letter-spacing:.02em;color:#7fd3ae} /* ohne Grossbuchstaben: mvn immer klein */
.sek.text.pfeil-kaesten .pk-kasten h3{margin:0;font-size:22px;color:#fff}
/* ohne Grossbuchstaben: mvn immer klein */
.sek.text.pfeil-kaesten .pk-kasten h2.wie-h3,/* ohne Grossbuchstaben: mvn immer klein */
.sek.text.pfeil-kaesten .pk-kasten h1.wie-h3{margin:0;font-size:22px;color:#fff}.sek.text.pfeil-kaesten .pk-kasten p{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)}
.sek.text.pfeil-kaesten .pk-pfeil{display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:var(--gelb)}
.sek.text.pfeil-kaesten .pk-hinweis{margin-top:20px;border-radius:16px;padding:20px 24px;background:rgba(255,255,255,.07);font-size:16px;line-height:1.6;color:rgba(255,255,255,.82)}.sek.text.pfeil-kaesten .pk-hinweis strong{color:#fff}
.sek.text.pfeil-kaesten .knoepfe{margin-top:28px}
@media (max-width:900px){.sek.text.pfeil-kaesten .pk-zwei{grid-template-columns:minmax(0,1fr)}.sek.text.pfeil-kaesten .pk-pfeil{transform:rotate(90deg);font-size:28px}} /* #1714/#1716 (Malina 06.11.2026): Runde 34 Teil 1 A — zwei Kaesten mit Pfeil (Wir → Ihr Heizungsbauer), Hinweis volle Breite */
/* #1736–#1739 (Malina 06.11.2026): Runde 35 B angepasst — links Marktspanne + unser Festpreis-Kasten untereinander (gleich breit), rechts mittig „+“ und Ausfuehrung */
.sek.text.preis-wahl .pw-lead{max-width:820px;margin:18px 0 32px}.sek.text.preis-wahl .pw-lead p{margin:0}
.sek.text.preis-wahl .pw-raster{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:center}
.sek.text.preis-wahl .pw-links{display:flex;flex-direction:column;gap:30px}
.sek.text.preis-wahl .pw-karte{position:relative;border-radius:20px;background:#fff;border:1px solid var(--rand);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.sek.text.preis-wahl .pw-karte h3{margin:0;font-size:20px}
.sek.text.preis-wahl .pw-karte h2.wie-h3,.sek.text.preis-wahl .pw-karte h1.wie-h3{margin:0;font-size:20px}.sek.text.preis-wahl .pw-karte p{margin:0;font-size:16px;line-height:1.6;color:var(--text-2)}
.sek.text.preis-wahl .pw-betrag{font-size:30px;font-weight:800;color:var(--text)}
.sek.text.preis-wahl .pw-fest{border:2.5px solid var(--gruen);background:rgba(69,153,121,.06);padding-top:36px}.sek.text.preis-wahl .pw-fest .pw-betrag{color:var(--gruen)}
.sek.text.preis-wahl .pw-pille{position:absolute;top:-15px;left:24px;background:var(--gruen);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.sek.text.preis-wahl .pw-fest .knoepfe{margin-top:8px}
.sek.text.preis-wahl .pw-plus{display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--gruen)}
@media (max-width:900px){.sek.text.preis-wahl .pw-raster{grid-template-columns:minmax(0,1fr)}.sek.text.preis-wahl .pw-plus{font-size:32px}}