/* ENERDOMO Orts-Microsite · gemeinsame Gestaltung für alle Orte. Stand 08.11.2026. Gestaltung nach der Sprint-Seite (kampagnen/05_landingpage-sanierungssprint/bau/: Referenz-CSS, eigene-regeln.css, moderne-schicht.css, disg-schicht.css) und ihrer Ortsseite /infotag/koblenz/. Tokens 1:1 aus dem Handoff-Paket, Kontraste nach 05_MARKETING-COCKPIT/design-system.md. Eine Abweichung von design-system.md (Fassung 7, 06.08.2026) ist datiert und gewollt: Überschriften ohne Kapitälchen und ohne Light-Wechsel, CI-Regel 2 vom 01.10.2026, umgesetzt auf der Sprint-Seite in Runde 14 (24.10.2026, disg-schicht.css). Schrift: Stapel ohne @font-face. Carnas lädt nur die lokale Vorschau (_vorschau/vorschau-schrift.css) und muss beim Livegang lizenzgerecht eingebunden werden. */ /* ------------------------------------------------------------ Tokens, hell */ :root{ --ink:#1C1C1A; --ink-90:#2E2E2B; --ink-fest:#1C1C1A; --gold:#997935; --gold-dark:#7E6329; --gold-deep:#6E551F; --gold-soft:#C9B488; --gold-tint:#F4EEE1; --energy-red:#E30514; --energy-orange:#ED660A; --energy-amber:#F6A201; --energy-yellow:#F1CA00; --energy-lime:#ABC814; --energy-green:#24A737; --energy-forest:#158C30; --rampe:linear-gradient(90deg,#E30514,#ED660A,#F6A201,#F1CA00,#ABC814,#24A737,#158C30); --primary:#158C30; --primary-hover:#0F7026; --primary-press:#0B5C1F; --on-primary:#FFFFFF; --bg:#FFFFFF; --flaeche:#FFFFFF; --flaeche-rgb:255,255,255; --surface:#FAFAF8; --surface-2:#F2F1EC; --line:#E4E2DB; --line-strong:#CFCCC3; --fg1:#1C1C1A; --fg2:#565651; --box-amber-bg:#FFF8E6; --box-amber-border:#F0DBA6; --font:"Carnas", Arial, Helvetica, sans-serif; --fs-h1:clamp(32px,4.6vw,56px); --fs-h2:clamp(28px,3.6vw,36px); --fs-h3:22px; --fs-lead:20px; --fs-body:17px; --fs-small:14px; --fs-caption:12.5px; --r:6px; --sec-y:clamp(64px,7vw,96px); --kopfhoehe:96px; --shadow-sm:0 1px 2px rgba(28,28,26,.06),0 1px 3px rgba(28,28,26,.08); --shadow-md:0 4px 12px rgba(28,28,26,.08),0 2px 4px rgba(28,28,26,.05); --schiene:#F2F1EC; } /* ------------------------------------------------------------ Tokens, dunkel Zwei Wege in die dunkle Ansicht: die Systemeinstellung (ohne Skript, ohne Flackern) und die Münze im Kopf (data-theme, im Browser gemerkt). Werte wie moderne-schicht.css. */ @media (prefers-color-scheme:dark){ html:not([data-theme="light"]){ --bg:#1C1C1A; --flaeche:#1C1C1A; --flaeche-rgb:28,28,26; --surface:#1C1C1A; --surface-2:rgba(255,255,255,.04); --fg1:#FAFAF8; --fg2:#CFCCC3; --ink:#FAFAF8; --ink-90:#CFCCC3; --gold:#C9B488; --gold-dark:#C9B488; --gold-tint:#2E2E2B; --gold-soft:#997935; --primary:#24A737; --primary-hover:#24A737; --primary-press:#ABC814; --on-primary:#1C1C1A; --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.28); --box-amber-bg:#3A3223; --box-amber-border:#7E6329; --schiene:#2E2E2B; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 4px 12px rgba(0,0,0,.55); color-scheme:dark; } } html[data-theme="dark"]{ --bg:#1C1C1A; --flaeche:#1C1C1A; --flaeche-rgb:28,28,26; --surface:#1C1C1A; --surface-2:rgba(255,255,255,.04); --fg1:#FAFAF8; --fg2:#CFCCC3; --ink:#FAFAF8; --ink-90:#CFCCC3; --gold:#C9B488; --gold-dark:#C9B488; --gold-tint:#2E2E2B; --gold-soft:#997935; --primary:#24A737; --primary-hover:#24A737; --primary-press:#ABC814; --on-primary:#1C1C1A; --line:rgba(255,255,255,.14); --line-strong:rgba(255,255,255,.28); --box-amber-bg:#3A3223; --box-amber-border:#7E6329; --schiene:#2E2E2B; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 4px 12px rgba(0,0,0,.55); color-scheme:dark; } /* ------------------------------------------------------------ Grund */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfhoehe) + 16px)} body{margin:0;background:var(--bg);color:var(--fg1);font-family:var(--font);font-weight:300; font-size:var(--fs-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} b,strong,h1,h2,h3,h4,th,.btn,legend,summary{font-weight:700} img{max-width:100%;height:auto;display:block} a{color:var(--primary-hover)} a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--primary-press);outline-offset:2px} .shell{width:100%;max-width:1200px;margin:0 auto;padding:0 24px} @media (max-width:640px){.shell{padding:0 16px}} .skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--flaeche);padding:8px;z-index:99} .visuell-versteckt{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} /* Vorschau-Hinweis */ .vorschau{background:var(--box-amber-bg);border-bottom:1px solid var(--box-amber-border);font-size:var(--fs-small)} .vorschau p{margin:0;padding:8px 0} /* ------------------------------------------------------------ Typografie (Sprint) */ h1,h2,h3,h4{color:var(--gold);margin:0 0 12px;text-wrap:balance;overflow-wrap:break-word;hyphens:auto} h1{font-size:var(--fs-h1);line-height:calc(1.08em - 3px);letter-spacing:-.01em;max-width:22ch;hyphens:manual} h2{hyphens:manual} h2{font-size:var(--fs-h2);line-height:1.12} h3{font-size:var(--fs-h3);line-height:1.25;color:var(--fg1)} h1 .lt,h2 .lt{font-weight:700} p,li{text-wrap:pretty} .eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:var(--fs-caption);font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--primary-hover)} .eyebrow::before{content:"";flex:none;width:32px;height:3px;background:var(--rampe)} html[data-theme="dark"] .eyebrow{color:var(--energy-lime)} @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .eyebrow{color:var(--energy-lime)}} .lead{font-size:var(--fs-lead);line-height:1.6;color:var(--fg2);max-width:60ch;margin:0 0 12px} .klein{font-size:var(--fs-small);color:var(--fg2)} .quelle{font-size:var(--fs-small);color:var(--fg2);margin-top:16px;max-width:90ch} .text{max-width:68ch} /* ------------------------------------------------------------ Kopfleiste (Sprint .kopfleiste: fest oben, Menüknopf, Wissen) */ .kopf{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--flaeche);border-bottom:2px solid var(--gold);transition:box-shadow var(--dur,.22s)} .kopf.gerollt{box-shadow:var(--shadow-md)} body{padding-top:var(--kopfhoehe)} .kopf .shell{display:flex;align-items:center;gap:24px;height:var(--kopfhoehe)} .logotile{display:inline-flex;align-items:center;justify-content:center;background:#fff;flex:none;width:80px;height:80px} .logotile img{width:80px;height:80px} html[data-theme="dark"] .logotile{box-shadow:0 0 0 1px rgba(255,255,255,.14)} .nav{display:flex;align-items:center;gap:4px 20px;margin-left:auto} .nav a,.mega>summary{color:var(--fg1);text-decoration:none;font-size:var(--fs-body);font-weight:700;padding:8px 0;position:relative;min-height:44px;display:inline-flex;align-items:center} .nav>a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s} .nav a:hover,.nav a[aria-current],.mega>summary:hover{color:var(--gold-dark)} .nav>a:hover::after,.nav>a[aria-current]::after{transform:scaleX(1)} .kopf .btn{flex:none} .fortschritt{display:none;position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--rampe);pointer-events:none} .js .fortschritt{display:block} .fortschritt i{display:block;height:100%;background:var(--schiene);transform-origin:right center;transform:scaleX(1)} /* Aufklappmenü Wissen (Sprint .mega) */ .mega{position:static} .mega>summary{list-style:none;cursor:pointer;gap:6px} .mega>summary::-webkit-details-marker{display:none} .mega>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s} .mega[open]>summary::after{transform:rotate(-135deg) translateY(-1px)} .megapanel{position:fixed;left:50%;top:var(--kopfhoehe);transform:translateX(-50%);width:min(1000px,96vw);z-index:90;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px; padding:24px 32px;background:var(--flaeche);border-top:3px solid #997935;box-shadow:var(--shadow-lg);max-height:calc(100vh - var(--kopfhoehe) - 16px);overflow-y:auto} .megaspalte{display:flex;flex-direction:column;gap:2px;min-width:0} .megakopf{margin:0 0 8px;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#7E6329} html[data-theme="dark"] .megakopf{color:#C9B488} @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .megakopf{color:#C9B488}} .nav .megapanel a{display:block;min-height:0;padding:6px 0;line-height:1.35;font-weight:300;white-space:normal} .nav .megapanel a:hover{color:var(--primary-hover);text-decoration:underline} .megapanel .megafuss{grid-column:1/-1;margin:0;font-size:var(--fs-small);color:var(--fg2)} /* Menüknopf (Sprint .menuknopf), ohne Skript unsichtbar */ .menuknopf{display:none;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;background:transparent;border:1px solid var(--line-strong); border-radius:var(--r);cursor:pointer;color:var(--fg1);font:inherit;font-size:var(--fs-small);font-weight:700} .menuknopf:hover{border-color:var(--gold);background:var(--gold-tint)} .menubalken,.menubalken::before,.menubalken::after{display:block;width:22px;height:2px;background:currentColor;transition:transform .22s,opacity .22s} .menubalken{position:relative} .menubalken::before,.menubalken::after{content:"";position:absolute;left:0} .menubalken::before{top:-7px}.menubalken::after{top:7px} .kopf.offen .menubalken{background:transparent} .kopf.offen .menubalken::before{transform:translateY(7px) rotate(45deg)} .kopf.offen .menubalken::after{transform:translateY(-7px) rotate(-45deg)} @media (max-width:1060px){ :root{--kopfhoehe:72px} .kopf .shell{gap:10px} .logotile,.logotile img{width:60px;height:60px} .nav{display:none} .kopf .btn{margin-left:auto} .js .menuknopf{display:inline-flex} .kopf.offen .nav{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:100%;z-index:79;background:var(--flaeche); border-bottom:2px solid var(--gold);box-shadow:var(--shadow-lg);padding:8px 24px 20px;max-height:calc(100vh - var(--kopfhoehe));overflow-y:auto} .kopf.offen .nav>a,.kopf.offen .mega>summary{display:flex;width:100%;padding:12px 4px;border-bottom:1px solid var(--line);font-size:var(--fs-lead)} .kopf.offen .nav>a::after{display:none} .megapanel{position:static;transform:none;width:auto;display:block;padding:0 0 12px 12px;box-shadow:none;border-top:0;background:transparent;max-height:none} .megaspalte{margin-top:12px} } @media (max-width:420px){.kopf .btn.s{padding:10px 12px}.menuwort{display:none}} /* Broschüren-Vorschau neben dem Formular (wie die Broschürenkachel der Sprint-Seite) */ .broschuerekopf{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start} .broschuerebild{width:96px;height:auto;border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow-md);transform:rotate(-2deg);background:#fff} /* Münze für Hell und Dunkel (wie Sprint, ohne Skript unsichtbar) */ .muenze{display:none;position:relative;width:44px;height:44px;padding:0;margin:0;background:none;border:0;cursor:pointer;color:inherit} .js .muenze{display:inline-grid;place-items:center} .muenze .scheibe{position:relative;width:34px;height:34px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,0,.2,1)} .muenze[aria-pressed="true"] .scheibe{transform:rotateY(180deg)} .muenze .seite{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden; border:1px solid var(--line-strong);background:var(--surface-2);box-shadow:var(--shadow-sm)} .muenze .seite svg{width:18px;height:18px} .muenze .sonne{color:var(--gold-dark)} .muenze .mond{color:var(--gold);transform:rotateY(180deg)} /* ------------------------------------------------------------ Knöpfe (Sprint) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:14px 28px; border-radius:var(--r);background:var(--primary-hover);color:var(--on-primary);text-decoration:none;border:0; font-family:var(--font);font-size:var(--fs-lead);line-height:1.2;cursor:pointer;transition:background .22s,transform .22s,box-shadow .22s} .btn:hover{background:var(--primary-press);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn .ic{width:20px;height:20px} .btn.s{font-size:var(--fs-small);padding:10px 16px;min-height:44px} .ghost{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;color:var(--primary-hover); font-size:var(--fs-body);font-weight:700;text-decoration:underline;text-underline-offset:4px} html[data-theme="dark"] .ghost{color:var(--energy-lime)} @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .ghost{color:var(--energy-lime)}} .knoepfe{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px} /* ------------------------------------------------------------ Abschnitte */ .abschnitt{padding:var(--sec-y) 0;position:relative} .abschnitt.ton{background:var(--surface)} .abschnitt.knapp{padding:40px 0} .abschnitt.tippreihe{padding-top:clamp(32px,3.5vw,48px)} .abschnitt.rampe::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rampe)} .abschnitt > .shell > h2{max-width:26ch} .abschnitt .lead + *{margin-top:24px} /* ------------------------------------------------------------ Kopfbereich (Sprint .seitenkopf) */ .hero{background:var(--gold-tint);padding:56px 0 var(--sec-y)} .hero .shell{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start} .hero h1{margin-bottom:20px} .hero .lead{color:var(--fg1)} .brotkrumen{font-size:var(--fs-small);margin:0 0 16px} .brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .brotkrumen li+li::before{content:"›";margin-right:6px;color:var(--fg2)} .brotkrumen a{color:var(--primary-hover)} /* Stimme des Partners unter der H1: Foto, Neutralitätssatz, Name. Im ersten Bildschirm, auch mobil. */ .stimme{display:flex;gap:16px;align-items:center;margin:4px 0 20px;max-width:60ch} .stimme img,.stimme .foto{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--flaeche);box-shadow:var(--shadow-sm)} .stimme blockquote{margin:0} .stimme blockquote p{margin:0;font-weight:700;font-size:var(--fs-body);line-height:1.45;color:var(--fg1)} .stimme figcaption{font-size:var(--fs-small);color:var(--gold-dark);font-weight:700;margin-top:4px} @media (min-width:901px){.stimme img,.stimme .foto{display:none}} /* Visitenkarte rechts (Sprint .ortfeld) */ .partner{background:var(--flaeche);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-md)} .partner .portraet{width:200px;height:200px;border-radius:50%;object-fit:cover;border:4px solid var(--gold-tint);margin:0 auto 20px} .partner .rolle{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)} .partner .rolle::before{content:"";width:32px;height:3px;background:var(--gold);flex:none} .partner .name{font-size:24px;font-weight:700;margin:0;line-height:1.2;color:var(--fg1)} .partner .firma{margin:4px 0 0;color:var(--gold-dark);font-weight:700;font-size:var(--fs-body)} .kontakt{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px} .kontakt li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body)} .kontakt .ic{margin-top:4px;color:var(--primary-hover)} .partner .btn{width:100%;margin-top:20px} @media (max-width:900px){ .hero .shell{grid-template-columns:1fr;gap:32px} .partner .portraet{display:none} .hero{padding-top:32px} } /* Platzhalter, sichtbar markiert */ .platzhalter{background:var(--box-amber-bg);outline:1px dashed var(--gold-dark);outline-offset:-1px;padding:1px 6px;border-radius:3px;color:var(--fg1)} div.platzhalter,p.platzhalter{padding:12px 16px;display:block} .foto.platzhalter{display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;border-radius:50%;outline:2px dashed var(--gold-dark);padding:6px} .partner .foto.platzhalter{width:200px;height:200px;margin:0 auto 20px;font-size:15px} @media (max-width:900px){.partner .foto.platzhalter{display:none}} /* ------------------------------------------------------------ Nutzen-Karten */ .karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:32px} .karte{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r);padding:28px;border-top:4px solid var(--gold);box-shadow:var(--shadow-sm)} .karte h3{margin-bottom:8px} .karte p{margin:0 0 12px} .karte .gross{display:block;font-size:36px;font-weight:700;line-height:1.1;color:var(--gold);margin-bottom:8px;font-variant-numeric:tabular-nums} .karte a.weiter{font-weight:700} .r1{border-top-color:var(--energy-red)}.r2{border-top-color:var(--energy-orange)}.r3{border-top-color:var(--energy-amber)} .r4{border-top-color:var(--energy-yellow)}.r5{border-top-color:var(--energy-lime)}.r6{border-top-color:var(--energy-green)}.r7{border-top-color:var(--energy-forest)} /* ------------------------------------------------------------ Der Tipp von (Sprint .ortzitat) */ .tipp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:start;background:var(--flaeche); border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:var(--r);padding:32px;box-shadow:var(--shadow-sm);max-width:980px} .tipp .tippbild{width:112px;height:112px;border-radius:50%;object-fit:cover;border:4px solid var(--gold-tint)} .tipp .foto{width:112px;height:112px} .tippmarke{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2)} .tippmarke::before{content:"“";font-size:44px;line-height:.6;color:var(--gold);font-weight:700;letter-spacing:0;margin-top:14px} .tipp h2{font-size:clamp(24px,2.8vw,30px);margin-bottom:12px} .tipp p{margin:0 0 12px;max-width:66ch} .tipp .handlung{font-weight:700;color:var(--fg1)} .tipp .wer{font-size:var(--fs-small);color:var(--gold-dark);font-weight:700;margin:0 0 14px} .tipp .quelle{margin-top:8px} @media (max-width:640px){.tipp{grid-template-columns:1fr;padding:22px;gap:12px}.tipp .tippbild,.tipp .foto{width:80px;height:80px}} /* ------------------------------------------------------------ Zahlenwand (Sprint: Rampe auf den Kacheln) */ .band{padding:var(--sec-y) 0;background:var(--surface);position:relative} .band::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rampe)} .zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:0;list-style:none} @media (max-width:900px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.zahlen{grid-template-columns:1fr}} .zahlen li{margin:0;padding:20px 22px;border-radius:var(--r);background:var(--kachel);color:var(--kachel-fg);box-shadow:var(--shadow-md)} .zahlen li:nth-child(1){--kachel:var(--energy-red);--kachel-fg:#fff} .zahlen li:nth-child(2){--kachel:var(--energy-orange);--kachel-fg:var(--ink-fest)} .zahlen li:nth-child(3){--kachel:var(--energy-amber);--kachel-fg:var(--ink-fest)} .zahlen li:nth-child(4){--kachel:var(--energy-yellow);--kachel-fg:var(--ink-fest)} .zahlen li:nth-child(5){--kachel:var(--energy-lime);--kachel-fg:var(--ink-fest)} .zahlen li:nth-child(6){--kachel:var(--energy-green);--kachel-fg:var(--ink-fest)} .zahlen .wert{display:block;font-size:clamp(30px,3.4vw,40px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums} .zahlen .was{display:block;font-size:15px;margin-top:6px;line-height:1.4} /* ------------------------------------------------------------ Ablauf in drei Schritten (Energie-Rampe) */ .schritte{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;counter-reset:s} .schritte li{background:var(--flaeche);border:1px solid var(--line);border-top:4px solid var(--c,var(--gold));border-radius:var(--r);padding:24px;position:relative;counter-increment:s} .schritte li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%; border:3px solid var(--c,var(--gold));color:var(--fg1);font-weight:700;font-size:18px;margin-bottom:12px;background:var(--flaeche)} .schritte li:nth-child(1){--c:var(--energy-red)}.schritte li:nth-child(2){--c:var(--energy-amber)} .schritte li:nth-child(3){--c:var(--energy-lime)}.schritte li:nth-child(4){--c:var(--energy-forest)} .schritte li:nth-child(5){--c:var(--energy-green)}.schritte li:nth-child(6){--c:var(--energy-forest)} .schritte h3{font-size:19px;margin-bottom:6px} .schritte p{margin:0;font-size:var(--fs-body)} /* ------------------------------------------------------------ Tabellen, Balken, Aufklapper */ .tabelle{overflow-x:auto;margin-top:16px} table{border-collapse:collapse;width:100%;font-size:15px;background:var(--flaeche)} caption{text-align:left;font-size:var(--fs-small);color:var(--fg2);padding-bottom:8px} th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)} th{background:var(--surface-2)} td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .balken{list-style:none;margin:24px 0 0;padding:0;max-width:640px} .balken li{display:grid;grid-template-columns:130px 1fr 64px;gap:12px;align-items:center;margin-bottom:10px;font-size:15px} .balken .spur{background:var(--surface-2);height:16px;border-radius:3px;overflow:hidden;border:1px solid var(--line)} .balken .fuell{display:block;height:100%;background:var(--gold)} .balken .p{text-align:right;font-weight:700;font-variant-numeric:tabular-nums} @media (max-width:480px){.balken li{grid-template-columns:96px 1fr 56px}} details.aufklapper{margin-top:24px;background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r)} details.aufklapper > summary{padding:16px 20px;cursor:pointer;color:var(--primary-hover)} details.aufklapper > div{padding:0 20px 20px} /* ------------------------------------------------------------ Kästen */ .kasten{border-radius:var(--r);padding:20px 24px;margin:24px 0;background:var(--flaeche);border:1px solid var(--line);border-left:6px solid var(--energy-lime);max-width:80ch} .kasten.hinweis{border-left-color:var(--gold)} .kasten p:last-child{margin-bottom:0} .zweispaltig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px} @media (max-width:820px){.zweispaltig{grid-template-columns:1fr}} /* ------------------------------------------------------------ Rückruf und Formular */ .anfrage{background:var(--gold-tint)} .anfrage .zweispaltig{align-items:start} .danach{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:d} .danach li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;counter-increment:d} .danach li::before{content:counter(d);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%; border:3px solid var(--energy-forest);font-weight:700;font-size:15px;background:var(--flaeche);color:var(--fg1)} .formular{background:var(--flaeche);border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-md);max-width:560px;width:100%} .formular h3{margin-bottom:12px} .feld{margin-bottom:16px} .feld label{display:block;font-weight:700;margin-bottom:6px;font-size:15px} .feld input[type=text],.feld input[type=tel]{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-weight:300;border:1px solid #8f8d85;border-radius:var(--r);background:var(--flaeche);color:var(--fg1)} .falle{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden} .empfaenger{font-size:var(--fs-small);background:var(--surface-2);border-radius:var(--r);padding:12px 14px;margin:0 0 16px} .formular .btn{width:100%} .unterknopf{font-size:var(--fs-small);color:var(--fg2);margin:12px 0 0} .checkmit{font-size:var(--fs-small);background:var(--box-amber-bg);border:1px solid var(--box-amber-border);border-radius:var(--r);padding:12px 14px;margin:0 0 16px} .checkmit[hidden]{display:none} .checkmit label{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .checkmit input{width:20px;height:20px;margin-top:2px;accent-color:var(--primary-hover);flex:none} .kurzform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:32px 48px;align-items:start} @media (max-width:900px){.kurzform{grid-template-columns:1fr}} /* Wärmepumpen-Check */ fieldset{border:0;padding:0;margin:0 0 20px} legend{font-size:var(--fs-body);margin-bottom:8px;padding:0} .wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px} .wahl label{display:flex;gap:10px;align-items:center;min-height:48px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--flaeche);cursor:pointer;font-size:15px} .wahl input{width:20px;height:20px;accent-color:var(--primary-hover);flex:none} #wpcheck{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r);padding:28px;max-width:900px} .ergebnis{margin-top:24px;border-radius:var(--r);padding:28px;background:var(--flaeche);border:1px solid var(--line);border-top:4px solid var(--gold);max-width:900px} .ergebnis[hidden]{display:none} .ergebnis.huelle{border-top-color:var(--energy-amber)} .ergebnis.bereit{border-top-color:var(--energy-forest)} .ergebnis h3{margin-top:0} .ergebnis .ich{display:flex;gap:14px;align-items:center;font-weight:700} .ergebnis .ich img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none} /* FAQ */ .faq details{background:var(--flaeche);border-radius:var(--r);margin-bottom:8px;border:1px solid var(--line)} .faq summary{cursor:pointer;padding:16px 20px;color:var(--fg1)} .faq details > div{padding:0 20px 16px} /* Brücke zum Sprint */ .bruecke{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r);padding:28px;margin-top:32px;position:relative;overflow:hidden;max-width:980px} .bruecke::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--rampe)} /* ------------------------------------------------------------ Fuß (Farben von enerdomo.de, wie Sprint) */ .fuss{--fuss-flaeche:#282121;--fuss-streifen:#0D0D0D;--fuss-gold:#C9B488;--fuss-text:#FFFFFF;--fuss-leise:#EAEAEA;--fuss-linie:rgba(255,255,255,.14); background:var(--fuss-flaeche);color:var(--fuss-text);padding:56px 0 0;position:relative} .fuss::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--rampe)} html[data-theme="dark"] .fuss{--fuss-flaeche:#3A312E;--fuss-streifen:#221D1B;--fuss-gold:#D8BE86} @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .fuss{--fuss-flaeche:#3A312E;--fuss-streifen:#221D1B;--fuss-gold:#D8BE86}} .fussgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:40px} @media (max-width:900px){.fussgrid{grid-template-columns:1fr}} .fuss h3{color:var(--fuss-text);font-size:24px;margin:0 0 14px} .fuss p{margin:4px 0 12px;font-size:var(--fs-small);line-height:1.7;color:var(--fuss-leise)} .fuss ul{list-style:none;margin:0;padding:0}.fuss li{margin-bottom:4px} .fuss a{color:var(--fuss-gold);text-decoration:none} .fuss a:hover{text-decoration:underline;text-underline-offset:3px} .fuss .kontakt li{font-size:var(--fs-small);color:var(--fuss-leise)} .fuss .kontakt .ic{color:var(--fuss-gold)} .fussleiste{background:var(--fuss-streifen);padding:10px 0} .fussleiste p{margin:0;font-size:12px;color:#CCCCCC} /* Sticky-Leiste auf dem Handy: Anrufen und Rückruf */ .sticky{display:none} @media (max-width:768px){ .sticky{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(var(--flaeche-rgb),.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:3px solid var(--gold)} .sticky .btn{flex:1;font-size:var(--fs-body);padding:12px} .sticky .btn.zwei{background:var(--flaeche);color:var(--primary-hover);box-shadow:inset 0 0 0 2px var(--primary-hover)} body{padding-bottom:84px} .knoepfe .btn{width:100%} } @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color,border-color!important;transition-duration:.15s!important}html{scroll-behavior:auto}} @media print{.kopf,.sticky,.muenze,.fortschritt{display:none!important}} .knoepfe>div{display:contents} /* ============================================================ REITER-KARTE IM KOPFBEREICH UND ZIELGRUPPEN-KACHELN Übernommen aus der Sprint-Seite (auslieferung/stil.css, Regeln zu .tabkarte, .tableiste, .tabknopf, .tabbalken, .tabfenster, .tabfeld, .tabhinweis, .zgkacheln, .zgkachel), Stand 08.11.2026. Zustand über vier Auswahlfelder, ohne Skript; Pfeiltasten wechseln von Haus aus. ============================================================ */ :root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px; --radius:6px;--fs-h4:22px;--tracking-caps:.12em;--dur:.22s;--ease:cubic-bezier(.2,.7,.2,1);--lh-snug:1.25; --shadow-lg:0 16px 40px rgba(28,28,26,.12),0 4px 12px rgba(28,28,26,.06)} html[data-theme="dark"]{--shadow-lg:0 16px 40px rgba(0,0,0,.6)} .zg-haus{--zg:var(--energy-red)}.zg-handwerk{--zg:var(--energy-amber)}.zg-gemeinde{--zg:var(--energy-lime)}.zg-presse{--zg:var(--energy-green)} @media (min-width:901px){.hero-reiter .shell{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}} @media (min-width:901px){.hero-reiter .stimme{display:none}} .tabkarte{position:relative;min-width:0} .tabradio{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;margin:0;font:inherit} .tableiste{position:relative;z-index:2;display:flex;background:var(--flaeche);border:1px solid var(--line);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 4px 10px rgba(28,28,26,.07)} .tabknopf{flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-height:60px;padding:var(--space-2) 2px;cursor:pointer;text-align:center; font-weight:700;font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)} .tabknopf:hover{background:var(--surface);color:var(--gold-dark)} .tabknopf .ic{width:18px;height:18px;margin:0;color:var(--zg)} .tableiste::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rampe);transform-origin:left center} .tabbalken{position:absolute;left:0;bottom:0;height:2px;width:25%;z-index:1;background:var(--gold-deep);transition:transform var(--dur) var(--ease)} .tabfenster{overflow:hidden;min-width:0;background:var(--flaeche);border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg)} .tabbahn{display:grid;min-width:0} .tabfeld{grid-area:1/1;min-width:0;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);opacity:0;visibility:hidden; transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)} #ht1:checked~.tabbuehne .tabfeld:nth-child(1),#ht2:checked~.tabbuehne .tabfeld:nth-child(2), #ht3:checked~.tabbuehne .tabfeld:nth-child(3),#ht4:checked~.tabbuehne .tabfeld:nth-child(4){opacity:1;visibility:visible;transition-delay:0s} #ht2:checked~.tabbuehne .tabbalken{transform:translateX(100%)} #ht3:checked~.tabbuehne .tabbalken{transform:translateX(200%)} #ht4:checked~.tabbuehne .tabbalken{transform:translateX(300%)} #ht1:checked~.tabbuehne .tableiste label[for=ht1],#ht2:checked~.tabbuehne .tableiste label[for=ht2], #ht3:checked~.tabbuehne .tableiste label[for=ht3],#ht4:checked~.tabbuehne .tableiste label[for=ht4]{color:var(--fg1);background:var(--surface-2);box-shadow:inset 0 -3px 0 var(--zg)} #ht1:focus-visible~.tabbuehne .tableiste label[for=ht1],#ht2:focus-visible~.tabbuehne .tableiste label[for=ht2], #ht3:focus-visible~.tabbuehne .tableiste label[for=ht3],#ht4:focus-visible~.tabbuehne .tableiste label[for=ht4]{outline:3px solid var(--primary-press);outline-offset:-3px} .zgmarke{display:flex;align-items:center;gap:var(--space-3);margin:0;font-weight:700;font-size:var(--fs-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--fg2)} .zgmarke::before{content:"";flex:none;width:var(--space-6);height:3px;background:var(--zg)} .tabfeld .kartetitel{margin:0;font-weight:700;font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--fg1)} .tabfeld .zitat{margin:0;color:var(--fg2)} .tabfeld .rolle{margin:0;font-size:var(--fs-small);color:var(--gold-dark);font-weight:700} .reiterperson{display:flex;gap:var(--space-4);align-items:center} .reiterperson img,.reiterperson .foto{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--gold-tint);flex:none} .ja{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);margin:0;padding:0;list-style:none} .ja li{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow-sm)} .ja .ic{color:var(--primary);margin-top:3px} .tabfeld .btn{align-self:flex-start} .tabhinweis{display:flex;align-items:center;gap:var(--space-2);min-height:44px;margin-top:auto;padding:var(--space-3) 0 0;border-top:1px solid var(--line);cursor:pointer;font-weight:700;font-size:var(--fs-small);color:var(--primary-hover)} .tabhinweis .ic{width:18px;height:18px} .formular.broschuere{padding:var(--space-5);box-shadow:none;border-top-width:3px;max-width:none} .feldreihe{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-3)} .feld input[type=email]{width:100%;min-height:48px;padding:10px 12px;font:inherit;font-weight:300;border:1px solid #8f8d85;border-radius:var(--r);background:var(--flaeche);color:var(--fg1)} .haekchen{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:0 0 16px;cursor:pointer} .haekchen input{width:20px;height:20px;margin-top:2px;accent-color:var(--primary-hover);flex:none} @media (max-width:640px){.tabfeld{padding:var(--space-5)}.tabknopf{font-size:10px;letter-spacing:.02em}.feldreihe{grid-template-columns:1fr}} .zgband{background:var(--surface);padding:var(--space-6) 0 var(--space-7)} .zgkacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)} .zgkacheln li{margin:0;display:flex;flex-direction:column;gap:var(--space-3)} .zgkacheln li p{margin:0;font-size:var(--fs-body);line-height:1.45;color:var(--fg1)} .zgkachel{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:148px;padding:var(--space-5);background:var(--zg);color:#fff;text-decoration:none; border-radius:var(--radius);box-shadow:var(--shadow-md);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .zgkachel>.ic:first-child{width:34px;height:34px;color:#fff} .zgkachel b{font-size:var(--fs-h4);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(28,28,26,.35)} .zgkachel>.ic:last-child{position:absolute;right:var(--space-5);top:var(--space-5);width:22px;height:22px;color:#fff;transform:rotate(90deg);transition:transform var(--dur) var(--ease)} .zgkachel:hover,.zgkachel:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .zgkachel:hover>.ic:last-child{transform:rotate(90deg) translateX(4px)} .zgkachel:focus-visible{outline:3px solid var(--fg1);outline-offset:3px} .zgkacheln .zg-handwerk .zgkachel,.zgkacheln .zg-gemeinde .zgkachel,.zgkacheln .zg-handwerk .zgkachel b,.zgkacheln .zg-gemeinde .zgkachel b, .zgkacheln .zg-handwerk .zgkachel>.ic,.zgkacheln .zg-gemeinde .zgkachel>.ic{color:#1C1C1A;text-shadow:none} .zgkacheln .zg-presse .zgkachel{background:#0F7026} @media (max-width:1024px){.zgkacheln{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.zgkachel{min-height:112px;padding:var(--space-4)}.zgkachel b{font-size:var(--fs-body)}.zgkachel>.ic:last-child{top:var(--space-4);right:var(--space-4)}} @media (max-width:479px){.zgkacheln{grid-template-columns:minmax(0,1fr);row-gap:var(--space-5)} .zgkachel{min-height:76px;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-3)}.zgkachel>.ic:last-child{top:50%;margin-top:-11px}} /* Einblenden beim Scrollen (Sprint: boxauf, nur wo der Browser scroll-gesteuerte Animationen kennt) */ @keyframes boxauf{from{opacity:.25;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes rampzieh{from{transform:scaleX(0)}to{transform:scaleX(1)}} @supports (animation-timeline: view()){ .karte,.tipp,.schritte li,.zahlen li,.formular,.bruecke,.zgkacheln li{animation:boxauf linear both;animation-timeline:view();animation-range:entry 0% entry 40%} .tableiste::after{transform:scaleX(0);animation:rampzieh linear both;animation-timeline:view();animation-range:entry 0% entry 90%} } /* Kreis-Übergang beim Hell/Dunkel-Wechsel (Skript in ort.js) */ ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} ::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:9999} @media (prefers-reduced-motion:reduce){.karte,.tipp,.schritte li,.zahlen li,.formular,.bruecke,.zgkacheln li,.tableiste::after{animation:none!important;opacity:1;transform:none}} /* ------------------------------------------------------------ Kopfbereich v2 (Rolf, 08.11.2026) Bild als Fläche mit flacher dunkler Abdeckung (keine Verläufe, CI), Text weiß darauf. Ziel: Überschrift, Nutzen, grüner Knopf und Formularkarte im ersten Bildschirm (16:9, ab 1366 x 768). */ .hero-bild{position:relative;isolation:isolate;background:#1C1C1A;padding:calc(var(--kopfhoehe,76px) * 0 + 40px) 0 40px;overflow:hidden} .hero-bild .herobild{position:absolute;inset:0;z-index:-1} .hero-bild .herobild img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;display:block} .hero-bild .herobild::after{content:"";position:absolute;inset:0;background:rgba(20,20,18,.62)} .hero-bild .bildnachweis{position:absolute;right:12px;bottom:8px;z-index:1;font-size:11px;color:rgba(255,255,255,.75)} .hero-bild .shell{align-items:center;gap:48px} .hero-bild .herotext{color:#fff} .hero-bild .herotext h1{color:#fff;font-size:clamp(30px,3.1vw,46px);line-height:1.12;margin-bottom:14px;max-width:20ch} .hero-bild .herotext .eyebrow{color:var(--energy-lime)} .hero-bild .herotext .lead{color:#fff;font-size:clamp(17px,1.25vw,19px);max-width:46ch;margin:0 0 14px} .vorteile{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;max-width:52ch} .vorteile li{display:flex;gap:10px;align-items:flex-start;font-weight:700;line-height:1.35;color:#fff} .vorteile svg{flex:none;width:22px;height:22px;color:var(--energy-lime);margin-top:1px} .hero-bild .knoepfe{margin:0;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center} .hero-bild .knoepfe > div{margin:0} .hero-bild .btn{font-size:18px;padding:16px 28px} .hero-bild .ghost,html[data-theme="dark"] .hero-bild .ghost{color:#fff;text-decoration:underline;text-underline-offset:3px} .vertrauen{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px} .vertrauen a{color:#fff;text-decoration:none;display:inline-flex;gap:6px;align-items:center} .vertrauen a:hover{text-decoration:underline} .sterne{color:#F6A201;letter-spacing:1px;font-size:1.05em} .simmarke{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:3px;background:#FFF4D6;color:#1C1C1A;border:1px dashed #7E6329} /* kompakte Karte */ .hero-bild .tabfeld{padding:20px 22px;gap:10px} .hero-bild .reiterperson img,.hero-bild .reiterperson .foto{width:56px;height:56px} .hero-bild .broschuerekopf{grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center} .hero-bild .broschuerekopf .kartetitel{font-size:17px;line-height:1.3} .hero-bild .broschuerekopf .klein{margin:4px 0 0} .hero-bild .formular .feld{margin:0} .hero-bild .formular{display:grid;gap:10px} .mehrfeld summary{cursor:pointer;font-size:15px;color:var(--primary-hover,#0F7026);font-weight:700} .mehrfeld[open] summary{margin-bottom:8px} .hero-bild .unterknopf{margin:0;font-size:13px} .hero-bild .btn[type=submit]{width:100%;justify-content:center} @media (min-width:901px) and (max-height:820px){.hero-bild{padding:28px 0}.hero-bild .herotext h1{font-size:clamp(28px,2.7vw,40px)}.vorteile{gap:6px;margin-bottom:16px}} @media (max-width:900px){.hero-bild{padding:28px 0 32px}.hero-bild .herotext h1{max-width:none}} /* Bewertungen */ .bewertungskopf{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:16px} .bewertungskopf li{background:var(--flaeche);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:var(--r);padding:16px 20px;display:grid;gap:4px;min-width:240px} .bewertungskopf .sterne{font-size:22px} .stimmkarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .stimmkarte{margin:0;background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)} .stimmkarte.sim{border-style:dashed} .stimmkarte blockquote{margin:8px 0} .stimmkarte blockquote p{margin:0;color:var(--fg1)} .stimmkarte figcaption{font-size:var(--fs-small);color:var(--fg2)} /* Zahlenkacheln: immer weiße Schrift (Rolf, 08.11.2026). Fläche dunkel, Energiefarbe als Kante oben. */ .zahlen li{background:var(--gold-deep,#6E551F) !important;color:#fff !important;border-top:6px solid var(--kante,var(--gold))} .zahlen li:nth-child(1){--kante:var(--energy-red)}.zahlen li:nth-child(2){--kante:var(--energy-orange)} .zahlen li:nth-child(3){--kante:var(--energy-amber)}.zahlen li:nth-child(4){--kante:var(--energy-yellow)} .zahlen li:nth-child(5){--kante:var(--energy-lime)}.zahlen li:nth-child(6){--kante:var(--energy-green)} .zahlen li .wert,.zahlen li .was{color:#fff} /* Niedrige Bildschirme (1366 x 768): Karte straffen, damit der Absende-Knopf sichtbar bleibt */ @media (min-width:901px) and (max-height:820px){ .hero-bild .tabfeld{padding:14px 18px;gap:8px} .hero-bild .zgmarke,.hero-bild .broschuerekopf .klein,.hero-bild .unterknopf{display:none} .hero-bild .reiterperson img,.hero-bild .reiterperson .foto{width:44px;height:44px} .hero-bild .broschuerekopf{grid-template-columns:48px minmax(0,1fr)} .hero-bild .broschuerebild{width:48px;height:auto} .hero-bild .formular{gap:6px} .hero-bild .lead{margin-bottom:10px} } /* Antwortblock für KI-Suche: Frage als H2, eigenständige Antwort, Tabelle */ .antwortblock .antwort{font-size:var(--fs-lead,19px);line-height:1.5;max-width:68ch;color:var(--fg1)} .tabellenrahmen{overflow-x:auto;margin:20px 0 8px} .schritttabelle{border-collapse:collapse;width:100%;max-width:900px;background:var(--flaeche)} .schritttabelle caption{text-align:left;font-weight:700;padding:0 0 8px;color:var(--fg1)} .schritttabelle th,.schritttabelle td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} .schritttabelle thead th{background:var(--gold-deep,#6E551F);color:#fff} .schritttabelle tbody th{color:var(--fg1)} .schritttabelle td:last-child{font-weight:700;white-space:nowrap} /* Prüfrunde 08.11.2026: Datenschutzzeile bleibt, Dachzeile im Kopf weiß, Lead normal, Fingerziele 44 px */ @media (min-width:901px) and (max-height:820px){.hero-bild .unterknopf{display:block;font-size:12px}} .hero-bild .herotext .eyebrow{color:#fff} .hero-bild .herotext .lead{font-weight:400} .weiter,.vertrauen a,.fuss a,.bewertungskopf a{display:inline-flex;align-items:center;min-height:44px} .vertrauen{gap:0 18px} .stimmkarte .kern{margin:8px 0;color:var(--fg1)} /* Problem, Lösung, Rechenbeispiel (08.11.2026) */ .presse{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px} .pressekarte{background:var(--surface-2);border-left:4px solid var(--energy-orange);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column} .pressekarte .medium{margin:0 0 6px;font-size:var(--fs-small);font-weight:700;color:var(--fg2);letter-spacing:.02em} .pressekarte h3{font-size:19px;margin-bottom:8px} .pressekarte p{margin:0 0 10px} .pressekarte .zitat{font-style:italic} .pressekarte .zitat span{font-style:normal;color:var(--fg2);font-size:var(--fs-small)} .pressekarte .weiter{margin-top:auto} .rechner{background:var(--surface-2);border-radius:var(--r);padding:24px;margin:24px 0 16px} .rechnerfelder{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;align-items:center;margin-bottom:24px} .rechnerfelder input[type=range]{width:100%;min-height:44px;accent-color:var(--primary)} .rechnerfelder select{min-height:44px;font:inherit;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--flaeche);color:var(--fg1);max-width:220px} .rechnerfelder output{font-weight:700;color:var(--fg1)} .balken{list-style:none;margin:0;padding:0;display:grid;gap:14px} .balken .zeile{display:grid;grid-template-columns:minmax(170px,260px) 1fr minmax(100px,auto);gap:14px;align-items:center} .balken .was{font-weight:700} .balken .was small{display:block;font-weight:300;color:var(--fg2);font-size:var(--fs-small)} .balken .spur{display:block;height:30px;background:var(--flaeche);border:1px solid var(--line);border-radius:4px;overflow:hidden} .balken .fuellung{display:block;height:100%;width:var(--w);transition:width 1.1s cubic-bezier(.2,.7,.2,1)} .balken .alt .fuellung{background:var(--energy-red)} .balken .wp .fuellung{background:var(--energy-amber)} .balken .sechs .fuellung{background:var(--energy-forest)} .balken .betrag{font-weight:700;font-size:20px;text-align:right;font-variant-numeric:tabular-nums} .rechner .ergebnis{margin:22px 0 0;font-size:var(--fs-lead)} .rechner .ergebnis strong{color:var(--primary);font-variant-numeric:tabular-nums} .rechner.wartet .fuellung{width:0} @media (max-width:640px){ .rechnerfelder{grid-template-columns:1fr} .balken .zeile{grid-template-columns:1fr auto} .balken .spur{grid-column:1 / -1;grid-row:2} } @media (prefers-reduced-motion:reduce){.balken .fuellung{transition:none}} .rechner .ergebnis .abzug{display:block;margin-top:8px;font-size:var(--fs-small);color:var(--fg2)} /* Pressespiegel in Zeitungsoptik (08.11.2026). Serifenschrift nur für die Zeitungsausschnitte, als Zitatoptik */ .problem{padding-bottom:var(--sec-y)} .pressekopf{position:relative;color:#fff;background:#1C1C1A;overflow:hidden;min-height:340px;display:flex;align-items:center} .pressekopf picture,.pressekopf .pressebild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pressekopf::before{content:"";position:absolute;inset:0;background:rgba(20,20,18,.68);z-index:1} .pressekopf-text{position:relative;z-index:2;padding-top:56px;padding-bottom:56px} .pressekopf-text h2{color:#fff} .pressekopf-text .eyebrow{color:#fff} .pressekopf-text .lead{color:#fff;font-weight:400;max-width:760px} .pressekopf .bildhinweis{position:absolute;right:12px;bottom:6px;z-index:2;margin:0;font-size:12px;color:rgba(255,255,255,.85)} .spiegel{padding-top:32px} .spiegelzeile{font-size:var(--fs-lead);max-width:900px} .spiegeltitel{margin:28px 0 4px;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.08em;color:var(--fg2)} .ausschnitte{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px 22px;margin:14px 0 8px} .ausschnitt{background:#F7F3EA;color:#1C1C1A;padding:16px 20px 18px;box-shadow:0 1px 2px rgba(0,0,0,.10),0 6px 16px rgba(0,0,0,.10); transform:rotate(-.5deg);display:flex;flex-direction:column;font-family:Georgia,"Times New Roman",serif;font-weight:400; } .ausschnitt:nth-child(even){transform:rotate(.45deg)} .ausschnitt header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:3px double #1C1C1A;padding-bottom:6px;margin-bottom:10px} .ausschnitt .blatt{font-weight:700;font-size:17px;letter-spacing:.02em;font-variant:small-caps} .ausschnitt time{font-size:13px;color:#565651;white-space:nowrap} .ausschnitt .region{align-self:flex-start;font-family:var(--font);font-size:12px;font-weight:700;background:#1C1C1A;color:#fff;padding:2px 8px;margin-bottom:8px} .ausschnitt h4{font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.2;font-weight:700;color:#1C1C1A;margin:0 0 8px} .ausschnitt p{margin:0 0 10px;font-size:16px;line-height:1.5;color:#1C1C1A} .ausschnitt .zitat{margin:2px 0 12px;padding-left:12px;border-left:3px solid #1C1C1A} .ausschnitt .zitat p{font-style:italic;margin:0} .ausschnitt .zitat footer{font-size:13px;color:#565651} .ausschnitt .weiter{margin-top:auto;font-family:var(--font);color:#0F7026;font-weight:700} @media (max-width:640px){.ausschnitt,.ausschnitt:nth-child(even){transform:none}.pressekopf{min-height:300px}} /* Lösungs-Box mit Partnerfotos (08.11.2026) */ .loesung-oben{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;margin-bottom:36px} .loesung-text .antwort{margin-top:0} .loesung-bilder{position:relative;margin:0 0 40px;padding-bottom:0} .loesung-bilder .lb img{display:block;width:100%;height:auto;border-radius:var(--r);object-fit:cover} .loesung-bilder .lb1 img{aspect-ratio:4/3;box-shadow:var(--shadow-md)} .loesung-bilder .lb2{position:absolute;left:-36px;bottom:-40px;width:44%;border:6px solid var(--flaeche);border-radius:calc(var(--r) + 4px);box-shadow:var(--shadow-md);background:var(--flaeche)} .loesung-bilder .lb2 img{aspect-ratio:4/3} .loesung-bilder figcaption{position:absolute;right:0;bottom:-34px;font-size:var(--fs-small);color:var(--fg2);max-width:52%;text-align:right} @media (max-width:900px){ .loesung-oben{grid-template-columns:1fr;gap:28px} .loesung-bilder{margin-bottom:56px} .loesung-bilder .lb2{left:12px;bottom:-44px;width:46%} .loesung-bilder figcaption{bottom:-40px;max-width:46%} } /* Reiterkopf mit Frage, Bild und Satz; Rückruf-Zeile in jedem Reiter (08.11.2026) */ .reiterkopf{align-items:center;margin-bottom:12px} .reiterkopf img,.reiterkopf .foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none} .reiterkopf .zgmarke{margin:0 0 2px} .reiterkopf .kartetitel{margin:0;line-height:1.2} .reiterkopf .rolle{margin:0;font-size:var(--fs-small);color:var(--fg2);line-height:1.3} .tabfeld .gespraech{margin:10px 0 0;font-size:var(--fs-small);text-align:center} .tabfeld .gespraech a{font-weight:700;color:var(--primary);display:inline-flex;align-items:center;min-height:44px} /* Frage im Reiterkopf bleibt auch bei niedriger Höhe sichtbar */ @media (min-width:901px) and (max-height:820px){.hero-bild .reiterkopf .zgmarke{display:flex}} /* Vier Reiter gleich aufgebaut (Referenz Hausbesitzer), 08.11.2026: alle Felder gleich hoch (gemeinsame Rasterzelle), Knopf und Rückruf-Zeile unten an derselben Stelle */ .tabfeld .formular.broschuere{display:flex;flex-direction:column;flex:1} .tabfeld .formular.broschuere .btn{margin-top:auto} .reiterfuss{margin-top:auto;display:flex;flex-direction:column;gap:10px} .reiterfuss .btn{width:100%;justify-content:center;align-self:stretch} .tabfeld .unterknopf{min-height:2.9em} .tabfeld .gespraech{margin:0;text-align:left} .hero-bild .tabfeld .formular.broschuere{gap:8px} /* Feinabgleich: Knopf, Zeile darunter und Rueckruf-Zeile exakt wie im Formular des Hausbesitzer-Reiters */ .reiterfuss{gap:8px;padding-bottom:25px} .tabfeld .unterknopf{min-height:3.2em;margin:0} /* Reiter Gemeinde/Handwerk/Presse kompakter, damit die gemeinsame Kartenhöhe die des Hausbesitzer-Reiters bleibt */ .hero-bild .tabfeld .ja{gap:6px} .hero-bild .tabfeld .ja li{padding:7px 10px;font-size:15px;line-height:1.35} .hero-bild .tabfeld .zitat{font-size:15px;line-height:1.45} /* Box 'Warum reicht eine Wärmepumpe allein nicht?' (08.11.2026) */ .wpvergleich{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0} .wpkarte{margin:0;background:var(--surface-2);border-radius:var(--r);padding:20px 22px 22px;border-top:6px solid var(--energy-red)} .wpkarte.gut{border-top-color:var(--energy-forest)} .hausbild{display:block;width:100%;max-width:320px;height:auto;margin:0 auto 12px} .h-dach{fill:var(--gold-soft)}.h-wand{fill:var(--flaeche);stroke:var(--line-strong);stroke-width:2} .h-fenster{fill:#9CC3D9}.h-tuer{fill:var(--gold-dark)} .h-verlust{fill:none;stroke:var(--energy-red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .h-verlust.klein{stroke-width:3;opacity:.55} .h-daemm{fill:none;stroke:var(--energy-forest);stroke-width:7;stroke-linejoin:round} .wpkarte figcaption{display:flex;flex-direction:column;gap:6px} .wpkarte figcaption b{font-size:var(--fs-h3);color:var(--fg1)} .wpkarte figcaption strong{color:var(--energy-red)} .wpkarte.gut figcaption strong{color:var(--primary)} .wpgruende{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:8px 0 24px} .wpgruende h3{font-size:19px;margin-bottom:6px} .wpgruende p{margin:0} .ausschnitte.einzeln{grid-template-columns:minmax(0,640px)} @media (max-width:760px){.wpvergleich,.wpgruende{grid-template-columns:1fr}} /* Kasten 'Kann ich nicht einfach abwarten?' im Wärmeplan-Abschnitt (08.11.2026) */ .kasten.abwarten{background:var(--flaeche);border:1px solid var(--line);border-left:6px solid var(--energy-orange);border-radius:var(--r);padding:20px 24px;margin:8px 0 28px;max-width:900px} .kasten.abwarten .frage{font-size:var(--fs-h3);font-weight:700;color:var(--fg1);margin:0 0 8px} .kasten.abwarten p{margin:0 0 8px} .kasten.abwarten .klein{margin:0} /* Zeitungsausschnitte wie Zeitungspapier statt Karteikarte (08.11.2026): graues Papier mit Körnung, ausgerissene Kanten oben und unten, Blocksatz, Schatten folgt der Rissform */ .ausschnitt{background:none !important;box-shadow:none !important;position:relative;isolation:isolate;padding:24px 22px 26px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.18)) drop-shadow(0 8px 12px rgba(0,0,0,.10));color:#2B2A27} .ausschnitt::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(0.0% calc(0% + 4px),2.94% calc(0% + 5px),5.88% calc(0% + 10px),8.82% calc(0% + 0px),11.76% calc(0% + 3px),14.71% calc(0% + 3px),17.65% calc(0% + 4px),20.59% calc(0% + 0px),23.53% calc(0% + 7px),26.47% calc(0% + 0px),29.41% calc(0% + 3px),32.35% calc(0% + 10px),35.29% calc(0% + 10px),38.24% calc(0% + 3px),41.18% calc(0% + 7px),44.12% calc(0% + 3px),47.06% calc(0% + 10px),50.0% calc(0% + 0px),52.94% calc(0% + 3px),55.88% calc(0% + 7px),58.82% calc(0% + 0px),61.76% calc(0% + 10px),64.71% calc(0% + 0px),67.65% calc(0% + 7px),70.59% calc(0% + 0px),73.53% calc(0% + 5px),76.47% calc(0% + 9px),79.41% calc(0% + 10px),82.35% calc(0% + 5px),85.29% calc(0% + 3px),88.24% calc(0% + 9px),91.18% calc(0% + 5px),94.12% calc(0% + 3px),97.06% calc(0% + 7px),100.0% calc(0% + 4px),100.0% calc(100% - 2px),97.06% calc(100% - 2px),94.12% calc(100% - 4px),91.18% calc(100% - 4px),88.24% calc(100% - 4px),85.29% calc(100% - 3px),82.35% calc(100% - 0px),79.41% calc(100% - 10px),76.47% calc(100% - 2px),73.53% calc(100% - 5px),70.59% calc(100% - 4px),67.65% calc(100% - 5px),64.71% calc(100% - 10px),61.76% calc(100% - 3px),58.82% calc(100% - 3px),55.88% calc(100% - 9px),52.94% calc(100% - 2px),50.0% calc(100% - 4px),47.06% calc(100% - 2px),44.12% calc(100% - 9px),41.18% calc(100% - 3px),38.24% calc(100% - 7px),35.29% calc(100% - 5px),32.35% calc(100% - 7px),29.41% calc(100% - 9px),26.47% calc(100% - 4px),23.53% calc(100% - 2px),20.59% calc(100% - 2px),17.65% calc(100% - 4px),14.71% calc(100% - 10px),11.76% calc(100% - 2px),8.82% calc(100% - 7px),5.88% calc(100% - 0px),2.94% calc(100% - 3px),0.0% calc(100% - 3px)); background-color:#ECE7DA;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");} .ausschnitt header{border-bottom:1px solid #2B2A27;box-shadow:0 3px 0 -2px #2B2A27;padding-bottom:5px} .ausschnitt time{font-family:Georgia,serif;font-size:12px;color:#4A4843;text-transform:uppercase;letter-spacing:.05em} .ausschnitt h4{font-family:Georgia,"Times New Roman",serif;font-size:23px;line-height:1.12;letter-spacing:-.01em;color:#1A1917;margin:4px 0 10px} .ausschnitt p{font-family:Georgia,"Times New Roman",serif;font-size:15.5px;line-height:1.48;color:#2B2A27;text-align:justify;hyphens:auto;-webkit-hyphens:auto} .ausschnitt > p:first-of-type::first-letter{float:left;font-size:3.1em;line-height:.85;padding:4px 6px 0 0;font-weight:700;color:#1A1917} .ausschnitt .region{background:#2B2A27;border-radius:0} .ausschnitt .zitat{border-left:2px solid #2B2A27} .ausschnitt .weiter{color:#0F7026} .ausschnitt .blatt{font-family:Georgia,"Times New Roman",serif;font-variant:small-caps;font-size:18px;letter-spacing:.04em;font-weight:700} /* Blocksatz riss in schmalen Spalten Lücken (Silbentrennung greift nicht überall): linksbündig */ .ausschnitt p{text-align:left} /* Schleife 1: Bildkopf der Unterseiten mit Partnerkarte (08.11.2026) */ .hero-unter .partner{align-self:center;max-width:380px;justify-self:end} .hero-unter .partner .portraet{width:140px;height:140px;margin-bottom:14px} .hero-unter .brotkrumen ol{display:flex;gap:8px;list-style:none;margin:0 0 12px;padding:0;font-size:var(--fs-small);color:rgba(255,255,255,.85)} .hero-unter .brotkrumen li+li::before{content:"/";margin-right:8px;opacity:.7} .hero-unter .brotkrumen a{color:#fff;display:inline-flex;align-items:center;min-height:44px} .schritte.gewerke{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} @media (max-width:900px){.hero-unter .partner{justify-self:stretch;max-width:none}} /* Förderrechner (08.11.2026) */ .foerderrechner .rechnerfelder input[type=number]{min-height:44px;font:inherit;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--flaeche);color:var(--fg1);max-width:220px} .foerderrechner .schalter{display:inline-flex;align-items:center;gap:8px;min-height:44px} .foerderergebnis{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;max-width:640px} .foerderergebnis li{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--flaeche);border:1px solid var(--line);border-radius:var(--r)} .foerderergebnis b{font-variant-numeric:tabular-nums;font-size:20px} .foerderergebnis .summe{border-color:var(--primary);border-width:2px} .foerderergebnis .summe b{color:var(--primary);font-size:24px} /* Schleife 2: Kostenschätzer, Fahrplan-Zeitleiste (08.11.2026) */ .schaetzer select,.schaetzer input[type=number]{min-height:44px;font:inherit;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--flaeche);color:var(--fg1);max-width:320px} .fahrplanzeit{list-style:none;margin:24px 0 8px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0} .fahrplanzeit li{position:relative;padding:18px 14px 16px;border-top:8px solid var(--kante,var(--gold));background:var(--surface-2)} .fahrplanzeit li+li{border-left:2px solid var(--flaeche)} .fahrplanzeit .r1{--kante:var(--energy-red)}.fahrplanzeit .r3{--kante:var(--energy-amber)}.fahrplanzeit .r4{--kante:var(--energy-yellow)} .fahrplanzeit .r6{--kante:var(--energy-green)}.fahrplanzeit .r7{--kante:var(--energy-forest)} .fahrplanzeit .jahr{display:block;font-size:var(--fs-small);font-weight:700;color:var(--fg2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} .fahrplanzeit b{font-size:17px;line-height:1.3;color:var(--fg1)} @media (max-width:760px){.fahrplanzeit{grid-template-columns:1fr}.fahrplanzeit li+li{border-left:0;border-top-width:8px}} /* Schleife 3: Inhaltsverzeichnis + Kurzfassung, Autorzeile, Bekannt aus (08.11.2026) */ .inhaltsband{padding-top:32px;padding-bottom:8px} .inhaltbox{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;background:var(--surface-2);border-left:6px solid var(--gold);border-radius:var(--r);padding:24px 28px} .inhaltskopf{margin:0 0 10px;font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--fg2)} .inhaltbox .ja li{background:var(--flaeche)} .toc ol{margin:0;padding:0 0 0 1.2em;display:grid;gap:2px} .toc li::marker{color:var(--gold-dark);font-weight:700} .toc a{display:inline-flex;align-items:center;min-height:36px;color:var(--fg1);text-decoration:none;border-bottom:1px solid transparent} .toc a:hover,.toc a:focus-visible{color:var(--primary);border-bottom-color:currentColor} html{scroll-padding-top:110px} .hero-unter .autor{margin:-4px 0 12px;font-size:var(--fs-small);color:rgba(255,255,255,.9)} .bekannt{padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .bekannt .shell{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px} .bekanntkopf{margin:0;font-size:var(--fs-small);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--fg2)} .bekannt ul{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0;padding:0;list-style:none} .bekannt li{font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:700;color:var(--fg1);display:flex;flex-direction:column;line-height:1.2} .bekannt li span{font-family:var(--font);font-size:13px;font-weight:300;color:var(--fg2)} @media (max-width:820px){.inhaltbox{grid-template-columns:1fr;padding:20px}} /* ===== Abschlussprüfung apple-design (08.11.2026) ===== */ /* 2: Rückmeldung beim Drücken, kein hängender Hover auf Touch */ .btn:active,.zgkachel:active{transform:translateY(0) scale(.97);box-shadow:var(--shadow-sm);transition-duration:80ms} .btn:active{background:var(--primary-press)} .tabknopf:active,.menuknopf:active,.wahl label:active{background:var(--surface-2);transition-duration:0s} @media (hover:none){.btn:hover,.zgkachel:hover{transform:none;box-shadow:none}} /* 4: auf dem Handy nur ein Anruf-Ziel (unten in der festen Leiste) */ @media (max-width:768px){.kopf .btn{display:none}} /* 5: Kopfleiste schrumpft beim Scrollen und liegt leicht durchscheinend über dem Inhalt */ .kopf .shell,.logotile,.logotile img{transition:height var(--dur,.25s) var(--ease,ease),width var(--dur,.25s) var(--ease,ease)} @media (min-width:1061px){.kopf.gerollt .shell{height:72px}.kopf.gerollt .logotile,.kopf.gerollt .logotile img{width:60px;height:60px}} @supports (backdrop-filter:blur(1px)){.kopf{background:rgba(var(--flaeche-rgb),.88);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}} .logotile{background:#fff} .sticky{background:rgba(var(--flaeche-rgb),.88)} /* 6: weniger Transparenz und mehr Kontrast, wenn eingestellt */ @media (prefers-reduced-transparency:reduce){.sticky,.kopf{background:var(--flaeche);-webkit-backdrop-filter:none;backdrop-filter:none}} @media (prefers-contrast:more){ .hero-bild .herobild::after,.pressekopf::before{background:rgba(20,20,18,.80)} .sticky,.kopf{background:var(--flaeche);backdrop-filter:none} .karte,.formular,.tabfenster,.ja li,.faq details{border-color:var(--line-strong)} .hero-bild .bildnachweis,.pressekopf .bildhinweis{color:#fff} .feld input{border-color:var(--fg1)} } /* 8: Fehler direkt am Feld, erst nach der ersten Eingabe */ .feld input:user-invalid{border-color:var(--energy-red);box-shadow:0 0 0 1px var(--energy-red)} .feld input:user-valid{border-color:var(--primary)} .feld .fehler{display:none;font-size:var(--fs-small);color:#B0040F;margin-top:4px} .feld input:user-invalid + .fehler{display:block} /* 9: gewählte Antwort im Wärmepumpen-Check deutlich */ .wahl label:has(input:checked){border-color:var(--primary-hover);box-shadow:inset 0 0 0 1px var(--primary-hover);background:var(--surface-2);font-weight:700} .wahl label:hover{border-color:var(--gold)} /* 10: einheitliche Kantenstärken und Radien */ :root{--akzent:4px} .karte,.formular,.partner,.ergebnis,.wpkarte,.zahlen li{border-top-width:var(--akzent)} .kasten,.tipp,.inhaltbox,.kasten.abwarten,.pressekarte{border-left-width:var(--akzent)} .fahrplanzeit li{border-top-width:6px} .broschuerebild,.balken .spur{border-radius:var(--r)} /* 11: Schrift der Leiste 'Bekannt aus' wie die Seite */ .bekannt li{font-family:var(--font)} /* 12: eine wandernde Markierung unter dem aktiven Reiter, lesbare Reiterschrift */ #ht1:checked~.tabbuehne .tableiste label[for=ht1],#ht2:checked~.tabbuehne .tableiste label[for=ht2], #ht3:checked~.tabbuehne .tableiste label[for=ht3],#ht4:checked~.tabbuehne .tableiste label[for=ht4]{box-shadow:none} .tabbalken{height:3px;background:var(--energy-red);transition:transform var(--dur,.25s) var(--ease,ease),background-color var(--dur,.25s) var(--ease,ease)} #ht2:checked~.tabbuehne .tabbalken{background:var(--energy-amber)} #ht3:checked~.tabbuehne .tabbalken{background:var(--energy-lime)} #ht4:checked~.tabbuehne .tabbalken{background:#0F7026} @media (max-width:640px){.tabknopf{font-size:11.5px;letter-spacing:.04em}} /* 13: kein Geisterbild beim Reiterwechsel */ .tabfeld{transition:opacity .12s ease-out,visibility 0s linear .12s} #ht1:checked~.tabbuehne .tabfeld:nth-child(1),#ht2:checked~.tabbuehne .tabfeld:nth-child(2), #ht3:checked~.tabbuehne .tabfeld:nth-child(3),#ht4:checked~.tabbuehne .tabfeld:nth-child(4){transition:opacity .2s var(--ease,ease) .06s,visibility 0s} /* 15: 'Mehr' zeigt an, wenn man auf einer seiner Seiten ist */ .mega:has(.megapanel a[aria-current])>summary{color:var(--gold-dark);box-shadow:inset 0 -3px 0 var(--gold)} /* Typografie: große Zahlen und H2 leicht enger (Skill §15) */ h2{letter-spacing:-.01em} .zahlen .wert,.karte .gross{letter-spacing:-.02em} /* ===== Sanierungsrechner (09.11.2026) ===== */ /* ===== Ratgeber (09.11.2026) ===== */ .artikelkopf{padding:20px 0 8px} .artikelbild{position:relative;border-radius:16px;overflow:hidden;background:#1C1C1A;min-height:380px;display:flex;align-items:flex-end} .artikelbild picture,.artikelbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .artikelbild::after{content:"";position:absolute;inset:0;background:rgba(20,20,18,.6)} .artikeltext{position:relative;z-index:1;padding:36px 40px;color:#fff;max-width:900px} .artikeltext h1{color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.02em} .artikeltext .eyebrow,.artikeltext .autor{color:#fff} .artikeltext .autor{margin:8px 0 0;font-size:var(--fs-small)} .artikeltext .brotkrumen ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 10px;padding:0;font-size:var(--fs-small)} .artikeltext .brotkrumen li+li::before{content:"/";margin-right:8px;opacity:.7} .artikeltext .brotkrumen a{color:#fff} .artikelraster{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;padding-top:28px;padding-bottom:40px;align-items:start} .artikeltoc{position:sticky;top:110px;max-height:calc(100vh - 130px);overflow:auto;border:1px solid var(--line);border-radius:12px;padding:18px 16px;background:var(--flaeche)} .artikeltoc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)} .artikeltoc a{display:flex;gap:10px;padding:8px 10px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--fg2);text-decoration:none} .artikeltoc .nr{font-size:12px;font-weight:700;color:var(--gold-dark);min-width:20px} .artikeltoc a:hover{color:var(--fg1)} .artikeltoc a.aktiv{background:var(--surface-2);border-left-color:var(--gold);color:var(--fg1);font-weight:700;border-radius:0 8px 8px 0} .artikelinhalt{max-width:780px;font-size:18px;line-height:1.65} .artikelinhalt h2{margin:40px 0 12px;font-size:clamp(24px,2.6vw,30px)} .artikelinhalt h3{margin:24px 0 8px} .artikelinhalt table{width:100%;border-collapse:collapse;font-size:16px} .artikelinhalt th,.artikelinhalt td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top} .artikelinhalt th{background:var(--surface-2)} .kurzbox{background:var(--surface-2);border-radius:12px;padding:22px 26px;border-left:4px solid var(--gold)} .kurzbox h2{margin-top:0} .kurzbox ul{margin:0;padding-left:1.1em} .kurzbox li{margin:6px 0} .ortsbox{margin:36px 0;background:var(--gold-deep);color:#fff;border-radius:12px;padding:22px 26px} .ortsbox .frage{font-size:22px;font-weight:700;margin:0 0 6px;color:#fff} .ortsbox p{color:#fff} .artikelquellen{margin-top:28px;font-size:14px;color:var(--fg2)} .autorbox{display:flex;gap:16px;align-items:center;margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:12px} .autorbox img,.autorbox .foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none} .autorbox p{margin:0} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .chip{min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:22px;background:var(--flaeche);color:var(--fg1);font:inherit;font-size:15px;cursor:pointer} .chip.aktiv{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff} .rkarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .rkarte a{display:flex;flex-direction:column;gap:6px;height:100%;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--flaeche);color:var(--fg1);text-decoration:none;padding-bottom:16px;transition:box-shadow var(--dur,.22s) var(--ease,ease),transform var(--dur,.22s) var(--ease,ease)} .rkarte a:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)} .rkarte a:active{transform:scale(.99)} .rkarte .rbild{display:block;aspect-ratio:16/7;overflow:hidden;background:var(--surface-2)} .rkarte .rbild img{width:100%;height:100%;object-fit:cover} .rkarte .rkat,.rkarte b,.rkarte .rtext{padding:0 16px} .rkarte .rkat{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-dark);margin-top:10px} .rkarte b{font-size:19px;line-height:1.3} .rkarte .rtext{font-size:15px;color:var(--fg2)} .rkarten.klein .rkarte a{padding:16px 0} .rkarte[hidden]{display:none} @media (max-width:980px){.artikelraster{grid-template-columns:1fr}.artikeltoc{position:static;max-height:none}} @media (max-width:640px){.artikeltext{padding:24px 20px}.artikelbild{min-height:320px}.artikelinhalt{font-size:17px}} /* Regionalbaustein im Ratgeber (09.11.2026) */ .regional{margin:36px 0;padding:22px 26px 14px;border:1px solid var(--line);border-left:4px solid var(--energy-forest);border-radius:12px;background:var(--flaeche)} .regional h2{margin-top:0} .regionaltabelle caption{text-align:left;font-weight:700;padding:8px 0;color:var(--fg1)} .regionaltabelle th{background:none;font-weight:400;color:var(--fg2);width:55%} .regionaltabelle td{font-weight:700;font-variant-numeric:tabular-nums} .regional .quelle{font-size:13px;color:var(--fg2)} /* Förderstand-Hinweis auf Ratgeberartikeln (09.11.2026) */ .foerderstand{margin:0 0 2rem;padding:.9rem 1.1rem;border-left:4px solid var(--gold,#997935);background:var(--flaeche-hell,#f7f4ee);font-size:.95rem;line-height:1.55} /* Artikelraster: Spalten dürfen schmaler als ihr breitester Inhalt werden (Tabellen scrollen im Rahmen), 09.11.2026 */ .artikelraster{grid-template-columns:minmax(0,1fr)} .artikelraster>*{min-width:0} @media (min-width:981px){.artikelraster{grid-template-columns:300px minmax(0,1fr)}} /* Ratgeber-Einstieg nach Gebäudebestand (09.11.2026) */ .reinstiegliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;padding:0;margin:20px 0 8px;list-style:none;counter-reset:re} .reinstiegliste li{counter-increment:re;padding:18px 18px 16px;border:1px solid var(--linie,#e3ddd0);border-radius:14px;background:var(--flaeche,#fff);display:flex;flex-direction:column;gap:8px} .reinstiegliste li::before{content:counter(re,decimal-leading-zero);color:var(--gold,#997935);font-weight:600;font-size:.85rem;letter-spacing:.06em} .reinstiegliste a{color:inherit;text-decoration:none}.reinstiegliste a:hover b,.reinstiegliste a:focus-visible b{text-decoration:underline} .reinstiegliste span{font-size:.95rem;line-height:1.5} /* Sanierungsrechner und Kostenschätzer bei 320–400 px ohne Querscrollen (09.11.2026) */ .schaetzer select,.schaetzer input[type=number]{max-width:min(320px,100%);width:100%;box-sizing:border-box} .schaetzer label{max-width:100%} .artikelinhalt table:not(.tabellenrahmen table),.regional table{display:block;overflow-x:auto;max-width:100%} .artikelkopf h1,.artikelinhalt h2,.artikelinhalt h3{overflow-wrap:break-word;hyphens:auto} .artikelbild>*,.artikeltext{min-width:0} .artikeltext h1{overflow-wrap:anywhere} .foerderergebnis li{min-width:0;overflow-wrap:anywhere} /* Sanierungsrechner (ENERDOMO-Methode, Stand 09.11.2026) */ .rsgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;margin-top:24px;align-items:start} .rsform{display:grid;gap:18px;min-width:0} .rsfeld{margin:0;border:0;border-left:3px solid var(--gold);padding:2px 0 2px 18px;min-width:0} .rsfeld legend{padding:0;font-weight:700;font-size:20px;color:var(--fg1);margin-bottom:6px} .rsvor{margin:0 0 12px;font-size:var(--fs-small);color:var(--fg2)} .rszeile{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:8px 16px;align-items:center;margin:0 0 10px} .rszeile label{font-weight:700;font-size:var(--fs-small);color:var(--fg1)} .rszeile select{width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;background:var(--flaeche);color:var(--fg1);font:inherit;font-size:15px} .rszahl{display:flex;gap:12px;align-items:center;min-width:0} .rszahl input[type=range]{flex:1;min-width:0;min-height:44px;accent-color:var(--gold-deep)} .rszahl output{min-width:64px;text-align:right;font-weight:700;color:var(--gold-dark);font-variant-numeric:tabular-nums} .rshinweis{margin:4px 0 0;font-size:13.5px;color:var(--fg2)} .rsschritte{list-style:none;margin:0;padding:0;display:grid;gap:6px} .rsschritt{display:grid;grid-template-columns:22px 30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--flaeche)} .rsschritt input{width:20px;height:20px;margin:0;accent-color:var(--primary)} .rsnr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--gold);color:var(--gold-dark);font-weight:700;font-size:14px} .rsname{font-weight:700;color:var(--fg1);min-width:0} .rsname small{display:block;font-weight:400;font-size:13px;color:var(--fg2);overflow-wrap:anywhere} .rsbetrag{font-size:14px;font-weight:700;color:var(--fg2);font-variant-numeric:tabular-nums;white-space:nowrap} .rsschritt:has(input:checked){border-color:var(--primary);background:var(--surface-2)} .rsschritt:has(input:checked) .rsnr{background:var(--gold);color:#fff} .rsschritt:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px} .rsja{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 10px;cursor:pointer;font-weight:700;color:var(--fg1)} .rsja input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--primary)} .rsja small{display:block;font-weight:400;font-size:13px;color:var(--fg2)} .rsergebnis{position:sticky;top:110px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:12px;padding:22px 22px 18px;min-width:0} .rsueber{margin:0 0 10px;font-weight:700;font-size:20px;color:var(--fg1)} .rstreppe{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px} .rstreppe li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:14px;color:var(--fg2)} .rstreppe b{color:var(--fg1);font-variant-numeric:tabular-nums;white-space:nowrap} .rsspur{display:block;height:12px;background:var(--surface-2);border-radius:3px;overflow:hidden} .rsspur i{display:block;height:100%;background:var(--primary);transition:width .35s var(--ease,ease)} .rstreppe li:first-child .rsspur i{background:var(--gold)} .rsspar{margin:0 0 14px;padding:10px 12px;background:var(--gold-tint);border-radius:8px;color:var(--fg1)} .rsspar b{font-size:22px;font-variant-numeric:tabular-nums} .rszahlen{margin:0 0 14px;display:grid;gap:0} .rszahlen>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)} .rszahlen dt{color:var(--fg2);font-size:15px} .rszahlen dd{margin:0;font-weight:700;color:var(--fg1);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .rszahlen .rsunter{padding:3px 0 3px 14px;border-bottom:0} .rszahlen .rsunter dt,.rszahlen .rsunter dd{font-size:13.5px;font-weight:400} .rszahlen .rseigen dt,.rszahlen .rseigen dd{font-size:18px;font-weight:700;color:var(--fg1)} .rszahlen [hidden]{display:none} .rsergebnis .rshinweis.warn{background:rgba(246,162,1,.16);border-radius:8px;padding:8px 12px;color:var(--fg1)} .rsergebnis .btn{width:100%;justify-content:center;margin-top:6px} .rsklein{margin:8px 0 0;text-align:center;font-size:13px;color:var(--fg2)} .rsrechenweg{margin-top:22px;font-size:14.5px;color:var(--fg2);border-top:1px solid var(--line);padding-top:6px} .rsrechenweg summary{cursor:pointer;font-weight:700;color:var(--fg1);min-height:44px;display:flex;align-items:center} .rsquellen{margin:0 0 10px;padding-left:20px;font-size:13.5px} @media (max-width:980px){.rsgrid{grid-template-columns:minmax(0,1fr)}.rsergebnis{position:static}} @media (max-width:520px){.rszeile{grid-template-columns:minmax(0,1fr)}.rsschritt{grid-template-columns:22px 28px minmax(0,1fr)}.rsbetrag{grid-column:3}.rstreppe li{grid-template-columns:minmax(0,110px) minmax(0,1fr) auto}}[data-sanrechner] [hidden],.sanrechner [hidden]{display:none!important} /* Brotkrumen im Bild-Hero: Einträge auf einer Linie, Trenner hell (09.11.2026) */ .hero-unter .brotkrumen ol{align-items:center;flex-wrap:wrap} .hero-unter .brotkrumen li{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.9)} .hero-unter .brotkrumen li+li::before{content:"/";color:rgba(255,255,255,.75);opacity:1;margin:0 8px 0 0} /* Fußzeile: rundes Partnerfoto unten in der dritten Spalte, bündig mit der letzten Zeile der Nachbarspalten */ .fussgrid>div{display:flex;flex-direction:column;min-width:0} .fusspartner{display:flex;gap:20px;align-items:flex-start} .fusspartner>div{min-width:0} .fussportraet{flex:none;width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #F4EEE1;display:block;margin-top:4px} .fuss .kontakt li{display:flex;align-items:center;gap:10px;min-height:32px} .fuss .kontakt .ic{flex:none} .fussbetreiber{margin-top:auto!important;margin-bottom:0!important} @media (max-width:520px){.fusspartner{flex-direction:column}.fussportraet{width:112px;height:112px}} /* ------------------------------------------------------------ Neutralitäts-Box mit Schwungrad (09.11.2026) Vor dem Pressespiegel. Foto groß links, Text rechts; darunter das Schwungrad rund ums Haus. Bewegung: ein Punkt läuft im Kreis, Station und Karte leuchten nacheinander (12 s je Runde). Bei "weniger Bewegung" greift die globale Regel oben, dann steht alles still und vollständig. */ .neutral-box{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;background:var(--flaeche);border-top:4px solid var(--gold);border-radius:var(--r);box-shadow:var(--shadow-md);padding:clamp(24px,4vw,48px)} .neutral-box.mit-bild{grid-template-columns:minmax(0,440px) minmax(0,1fr)} .neutral-bild{margin:0;position:relative} .neutral-seite{display:flex;flex-direction:column;gap:20px} .neutral-zusage{background:var(--gold-tint);border-left:4px solid var(--gold);border-radius:var(--r);padding:20px 22px} .neutral-zusage .nz-titel{margin:0 0 12px;font-weight:700;color:var(--gold-dark);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:var(--tracking-caps)} .neutral-zusage ul{list-style:none;margin:0;padding:0;display:grid;gap:12px} .neutral-zusage li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:var(--fs-small);line-height:1.5;color:var(--fg1)} .neutral-zusage li .ic{width:20px;height:20px;margin-top:1px;color:var(--primary)} .neutral-zusage li b{display:block;font-size:var(--fs-body);color:var(--fg1)} .nz-unterschrift{margin-top:18px;padding-top:14px;border-top:1px solid var(--gold-soft)} .nz-unterschrift p{margin:0 0 6px;font-size:var(--fs-small);color:var(--fg1)} .nz-unterschrift img{display:block;width:min(240px,70%);height:auto} .nz-sig{display:block;width:min(240px,75%);height:auto;color:var(--fg1)} .nz-unterschrift span{display:block;margin-top:4px;font-size:var(--fs-caption);color:var(--fg2)} .neutral-bild img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)} .neutral-bild figcaption{position:absolute;left:16px;bottom:16px;right:16px;display:flex;flex-direction:column;gap:2px;background:rgba(28,28,26,.82);color:#fff;padding:12px 16px;border-radius:var(--r);font-size:var(--fs-small)} .neutral-bild figcaption b{font-size:var(--fs-body)} .neutral-text h2{margin-top:0} .neutral-text .lead{margin-bottom:16px} .neutral-liste{margin-top:20px} .neutral-liste li{margin-bottom:12px} .nw{margin-top:clamp(40px,5vw,64px)} .nw-titel{text-align:center;margin:0 0 28px;font-size:var(--fs-h3)} .nw-rad{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px) minmax(0,1fr);grid-template-rows:auto auto;gap:24px 32px;align-items:center} .nw-svg{grid-column:2;grid-row:1/3;width:100%;height:auto;display:block} .nw-schritte{display:contents;list-style:none;margin:0;padding:0} .nw-s{position:relative;background:var(--flaeche);border:1px solid var(--line);border-left:4px solid var(--gold-soft);border-radius:var(--r);padding:18px 20px 18px 64px;box-shadow:var(--shadow-sm);animation:nw-karte 12s linear infinite} .nw-s1{grid-column:1;grid-row:1}.nw-s2{grid-column:3;grid-row:1}.nw-s3{grid-column:3;grid-row:2}.nw-s4{grid-column:1;grid-row:2} .nw-s2,.nw-k2{animation-delay:-9s}.nw-s3,.nw-k3{animation-delay:-6s}.nw-s4,.nw-k4{animation-delay:-3s} .nw-s h3{font-size:var(--fs-body);line-height:1.35;margin:0 0 6px} .nw-kurz{display:block;font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:2px} .nw-s p{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--fg2)} .nw-nr{position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-weight:700;font-size:15px} .nw-spur{fill:none;stroke:var(--line);stroke-width:14} .nw-bogen{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round} .nw-spitze{fill:var(--gold)} .nw-laeufer{transform-box:view-box;transform-origin:200px 200px;animation:nw-dreh 12s linear infinite} .nw-punkt{fill:var(--primary)} .nw-haus path,.nw-haus rect{fill:none;stroke:var(--fg1);stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .nw-haus .nw-dach{stroke:var(--gold);stroke-width:6} .nw-ort{font:700 15px var(--font);fill:var(--fg2);text-anchor:middle} .nw-k circle{fill:var(--flaeche);stroke:var(--gold);stroke-width:4} .nw-k text{font:700 24px var(--font);fill:var(--fg1);text-anchor:middle} @keyframes nw-dreh{to{transform:rotate(360deg)}} @keyframes nw-karte{0%,20%{border-left-color:var(--primary);box-shadow:var(--shadow-md)}22%,100%{border-left-color:var(--gold-soft);box-shadow:var(--shadow-sm)}} .nw-k circle{animation:nw-kreis 12s linear infinite;animation-delay:inherit} @keyframes nw-kreis{0%,20%{fill:var(--primary);stroke:var(--primary)}22%,100%{fill:var(--flaeche);stroke:var(--gold)}} .nw-k text{animation:nw-zahl 12s linear infinite;animation-delay:inherit} @keyframes nw-zahl{0%,20%{fill:#fff}22%,100%{fill:var(--fg1)}} .nw .knoepfe{justify-content:center} .nw .quelle{margin-top:24px} @media (max-width:980px){ .neutral-box.mit-bild{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px} .nw-rad{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto} .nw-svg{grid-column:1/-1;grid-row:1;max-width:340px;margin:0 auto} .nw-s1{grid-column:1;grid-row:2}.nw-s2{grid-column:2;grid-row:2}.nw-s3{grid-column:2;grid-row:3}.nw-s4{grid-column:1;grid-row:3} } @media (max-width:700px){ .neutral-box.mit-bild{grid-template-columns:1fr} .neutral-seite{max-width:420px} .nw-rad{grid-template-columns:1fr} .nw-svg{max-width:300px} .nw-s1,.nw-s2,.nw-s3,.nw-s4{grid-column:1;grid-row:auto} }