.og-einheit { display: block; margin-top: .2rem; color: var(--text-3); font: 400 .875rem/1.4 var(--font-body); letter-spacing: 0; }
.og-verlauf { --k: .82%; }
.og-jahre { list-style: none; display: grid; gap: .6rem; margin: 0; padding: 0; }
.og-jahre li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.og-jahr { color: var(--text-3); font: 600 .875rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-spur { display: flex; align-items: center; min-width: 0; min-height: 1.6rem; }
.og-balken { flex: none; height: 12px; width: calc(var(--h) * var(--k)); border-radius: 3px 7px 7px 3px; background: linear-gradient(90deg, #3a3f46, #5b626c); transform-origin: left center; }
.og-wert { margin-left: .6rem; color: var(--text-2); font: 700 .95rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-jahre .is-jetzt .og-jahr, .og-jahre .is-beschluss .og-jahr, .og-jahre .is-markt .og-jahr { color: var(--text); }
.og-jahre .is-jetzt .og-balken { background: linear-gradient(90deg, #8f251d, var(--warm-cta)); box-shadow: 0 10px 22px -10px rgb(var(--glow-warm) / .9); }
.og-jahre .is-jetzt .og-wert, .og-jahre .is-beschluss .og-wert { color: var(--text); }
.og-jahre .is-beschluss .og-balken:first-child { border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #8f251d, #b3312a); }
.og-jahre .og-korridor { border-radius: 0 7px 7px 0; border: 1px solid rgb(var(--glow-warm) / .65); border-left: 0;
background: repeating-linear-gradient(135deg, rgb(var(--glow-warm) / .7) 0 2px, transparent 2px 6px); }
.og-offen { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; min-height: 1.7rem; padding: .3rem .75rem; border-radius: 10px; border: 1.5px dashed rgb(255 255 255 / .32);
background: linear-gradient(90deg, rgb(var(--glow-warm) / .2), rgb(var(--glow-warm) / 0) 85%); color: var(--text); font: 600 .8125rem/1.25 var(--font-display); }
.og-verlauf figcaption { max-width: none; }
@media (max-width: 399px) { .og-verlauf { --k: .66%; } .og-jahre li { grid-template-columns: 3.7rem minmax(0, 1fr); gap: .55rem; } .og-wert { margin-left: .45rem; font-size: .875rem; } }
@media (prefers-reduced-motion: no-preference) {
.js .og-verlauf .og-balken { animation: og-wachsen 1000ms var(--ease-expo) both; animation-delay: calc(480ms + var(--n, 0) * 70ms); }
.js .og-verlauf .og-korridor { animation-delay: calc(640ms + var(--n, 0) * 70ms); }
.js .og-verlauf :is(.og-wert, .og-offen) { animation: og-ein 700ms var(--ease-expo) both; animation-delay: calc(760ms + var(--n, 0) * 70ms); }
}
@keyframes og-wachsen { from { transform: scaleX(0); } }
@keyframes og-ein { from { opacity: 0; transform: translateX(-6px); } }
:is(.og-spanne, .og-netz, .og-bio) { container-type: inline-size; margin: 2rem 0 2.25rem; padding: clamp(1.1rem, .9rem + .8vw, 1.5rem); border-radius: var(--r-core); border: 1px solid var(--line); background: var(--bg-card); }
.og-spanne-titel { margin: 0 0 1.4rem; color: var(--text); font: 600 1rem/1.35 var(--font-display); letter-spacing: -.01em; }
.og-pflicht { margin: 1rem 0 0; max-width: 72ch; color: var(--text-3); font-size: .8125rem; line-height: 1.5; }
.rg-text :is(.og-saeulen, .og-legende, .pz-treppe) { padding-left: 0; margin-bottom: 0; }
.rg-text :is(.og-saeulen, .og-legende, .pz-treppe) li { margin-bottom: 0; }
.og-skala { position: relative; height: 2.75rem; margin: 1.6rem .4rem 0; }
.og-skala::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--line-strong); }
.og-band { position: absolute; top: 50%; height: 20px; margin-top: -10px; left: 12.75%; width: 83.25%; border-radius: 6px;
border: 1px solid rgb(255 255 255 / .26); background: repeating-linear-gradient(135deg, rgb(255 255 255 / .2) 0 2px, transparent 2px 7px), rgb(255 255 255 / .05); }
.og-marke { position: absolute; top: -2px; bottom: -2px; left: 16.25%; width: 0; }
.og-marke.is-uba { left: 31.25%; }
.og-marke::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; border-radius: 2px; background: var(--warm); }
.og-marke.is-uba::before { left: -1px; width: 0; border-left: 2px dashed var(--cool-soft); background: none; box-shadow: none; }
.og-marke b { position: absolute; bottom: calc(100% + .3rem); left: 0; transform: translateX(-50%); color: var(--text); font: 700 .875rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.og-marke.is-heute b { color: var(--warm-soft); }
.og-marke.is-uba b { color: var(--cool-soft); }
.og-ticks { position: relative; height: 1.1rem; margin: .45rem .4rem 0; color: var(--text-3); font: 500 .75rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.og-ticks span { position: absolute; transform: translateX(-50%); }
.og-ticks span:nth-child(1) { left: 0; } .og-ticks span:nth-child(2) { left: 25%; } .og-ticks span:nth-child(3) { left: 50%; } .og-ticks span:nth-child(4) { left: 75%; } .og-ticks span:nth-child(5) { left: 100%; }
.og-ticks span:first-child { transform: none; }
.og-ticks span:last-child { transform: translateX(-100%); }
.og-legende { list-style: none; display: grid; gap: .55rem; margin: 1.25rem 0 0; }
.og-legende li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .7rem; align-items: center; color: var(--text-2); font-size: .9rem; line-height: 1.4; }
.og-legende b { margin-right: .3rem; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.og-muster { justify-self: center; display: block; }
.og-legende .is-band .og-muster { width: 1.5rem; height: .85rem; border-radius: 4px; border: 1px solid rgb(255 255 255 / .26); background: repeating-linear-gradient(135deg, rgb(255 255 255 / .2) 0 2px, transparent 2px 6px), rgb(255 255 255 / .05); }
.og-legende .is-heute .og-muster { width: 3px; height: 1.05rem; border-radius: 2px; background: var(--warm); }
.og-legende .is-uba .og-muster { width: 0; height: 1.05rem; border-left: 2px dashed var(--cool-soft); }
.og-saeulen { --s: .085rem; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(.35rem, 4cqi, 1.75rem); align-items: end; margin: 0; padding: 0; }
.og-saeulen li { display: flex; flex-direction: column; min-width: 0; text-align: center; }
.og-s-wert { margin-bottom: .4rem; color: var(--text-2); font: 700 .875rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 200ms ease; }
.og-saeule { display: block; height: calc(var(--h) * var(--s)); min-height: 6px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--warm-cta), #8f251d); box-shadow: 0 14px 28px -16px rgb(var(--glow-warm) / .8); }
.og-saeulen .is-szenario .og-saeule { border: 1px solid rgb(255 255 255 / .24); box-shadow: none; background: repeating-linear-gradient(135deg, rgb(255 255 255 / .2) 0 2px, transparent 2px 7px), rgb(255 255 255 / .05); }
.og-x { display: grid; align-content: start; gap: .2rem; height: 2.35rem; margin-top: .6rem; }
.og-x b { color: var(--text-2); font: 600 .875rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-x small { color: var(--text-3); font: 500 .75rem/1.1 var(--font-display); white-space: nowrap; }
.og-saeulen .is-wahl .og-saeule { outline: 2px solid var(--cool); outline-offset: 3px; }
.og-saeulen .is-wahl .og-s-wert { color: var(--text); }
.og-saeulen .is-wahl .og-x b, .og-saeulen .is-wahl .og-x small { color: var(--cool-soft); }
.og-netz-saeulen { --s: .095rem; gap: clamp(.2rem, 1.1cqi, .55rem); }
.og-netz-saeulen .og-saeule { border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #5b626c, #3a3f46); box-shadow: none; }
.og-netz-saeulen .is-jetzt .og-saeule { background: linear-gradient(180deg, var(--warm-cta), #8f251d); box-shadow: 0 14px 28px -16px rgb(var(--glow-warm) / .8); }
.og-netz-saeulen .og-s-wert { font-size: .75rem; }
.og-netz-saeulen .is-jetzt .og-s-wert { color: var(--warm-soft); }
.og-netz-saeulen .og-x { height: auto; color: var(--text-3); font: 500 .75rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
@container (max-width: 520px) {
.og-netz-saeulen li:not(:first-child):not(:last-child) :is(.og-s-wert, .og-x) { visibility: hidden; }
.og-netz-saeulen li:first-child :is(.og-s-wert, .og-x) { text-align: left; }
.og-netz-saeulen li:last-child :is(.og-s-wert, .og-x) { text-align: right; }
}
.og-bio .pz-treppe { max-width: 26rem; height: auto; gap: clamp(.45rem, 2cqi, .9rem); }
.og-bio .pz-treppe li { display: flex; flex-direction: column; height: auto; }
.og-bio .pz-treppe b { margin-bottom: .4rem; font-size: .9375rem; }
.og-bio .pz-saeule { flex: none; align-self: stretch; height: calc(var(--h) * .08rem); }
.og-rechner { margin: 1.75rem 0 .75rem; padding: 6px; border-radius: var(--r-shell); background: var(--shell); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgb(0 0 0 / .9); }
.og-rechner-kern { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 1.6rem; padding: clamp(1.15rem, .8rem + 1.8vw, 2.2rem); border-radius: var(--r-core);
background: radial-gradient(70% 55% at 100% 0%, rgb(var(--glow-cool) / .1), transparent 70%), radial-gradient(60% 45% at 0% 100%, rgb(var(--glow-warm) / .1), transparent 70%), linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
.og-rechner-kern > * { min-width: 0; }
.rg-text .og-rechner h3, .rg-text .og-vaillant h3 { margin: 0; }
.og-rechner h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem); }
.og-felder { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .og-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.og-feld { min-width: 0; margin: 0; padding: 0; border: 0; }
.og-feld legend, .og-label { display: block; margin: 0 0 .6rem; padding: 0; color: var(--text); font: 600 .95rem/1.3 var(--font-display); }
.og-hilfe { margin: .55rem 0 0; color: var(--text-3); font-size: .875rem; line-height: 1.45; }
.og-eingabe { position: relative; }
.og-eingabe .input { padding-right: 4.2rem; font: 600 1.15rem/1.2 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.og-eingabe .input::-webkit-outer-spin-button, .og-eingabe .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.og-eingabe span { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-3); font: 500 .9rem/1 var(--font-display); pointer-events: none; }
.og-stufen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.og-stufen label { position: relative; min-width: 0; }
.og-stufen input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.og-stufen label > span { display: grid; place-items: center; align-content: center; gap: .25rem; min-height: 60px; padding: .5rem .2rem; border-radius: var(--r-md);
border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .03); text-align: center; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out); }
.og-stufen b { color: var(--text); font: 700 1.05rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.og-stufen small { color: var(--text-3); font: 500 .75rem/1.1 var(--font-display); }
.og-stufen input:checked + span { border-color: var(--cool); background: rgb(var(--glow-cool) / .1); }
.og-stufen input:checked + span small { color: var(--cool-soft); }
.og-stufen input:focus-visible + span { outline: 2px solid var(--cool); outline-offset: 2px; }
.og-stufen label:active > span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .og-stufen label:hover > span, .og-rechner .choice:hover span { border-color: rgb(255 255 255 / .3); } }
.og-ergebnis { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.og-betrag { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 .5rem; color: var(--text); font: 700 clamp(2.5rem, 1.9rem + 2.6vw, 3.9rem)/1 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.og-betrag small { color: var(--warm-soft); font-size: max(.34em, .95rem); font-weight: 600; letter-spacing: 0; }
.og-rechner.is-szenario .og-betrag small { color: var(--text-3); }
.og-satz { margin: 0; max-width: 54ch; color: var(--text-2); font-size: 1rem; line-height: 1.55; }
.og-diagramm { container-type: inline-size; margin: 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); }
.og-dia-kopf { display: grid; gap: .2rem; margin-bottom: 1.2rem; }
.og-dia-kopf span:first-child { color: var(--text); font: 600 .95rem/1.35 var(--font-display); }
.og-dia-kopf span:last-child { color: var(--text-3); font-size: .875rem; line-height: 1.4; }
.og-diagramm .og-pflicht { margin-top: .4rem; }
.og-rechenweg { margin: 0; color: var(--text-3); font-size: .8125rem; line-height: 1.5; }
.rg-text .og-tabelle { margin-top: .75rem; }
@container (max-width: 300px) { .og-diagramm .og-s-wert { font-size: .75rem; } .og-saeulen { --s: .075rem; } }
@container (max-width: 440px) { .og-x .og-bsp { visibility: hidden; } }
@media (max-width: 519px) { .og-stufen .og-bsp { display: none; } }
@media (max-width: 399px) {
.og-rechner-kern { gap: 1.35rem; }
.og-stufen { gap: .3rem; }
.og-stufen b { font-size: .95rem; }
}
.og-vaillant { container-type: inline-size; margin: 2rem 0 2.25rem; padding: 6px; border-radius: var(--r-shell); background: var(--shell); border: 1px solid var(--line); box-shadow: 0 40px 80px -50px rgb(0 0 0 / .9); }
.og-vaillant-kern { display: grid; gap: 1.25rem; overflow: hidden; padding: clamp(1.15rem, .9rem + 1.2vw, 1.9rem); border-radius: var(--r-core);
background: radial-gradient(60% 70% at 15% 30%, rgb(var(--glow-cool) / .14), transparent 70%), linear-gradient(180deg, var(--bg-card-2), var(--bg-card)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); }
.og-vaillant-kern > * { min-width: 0; }
.og-vaillant-bild { display: grid; align-content: center; gap: .4rem; margin: 0; }
.og-vaillant-bild img { width: 100%; max-width: 360px; margin-inline: auto; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .55)); }
.og-vaillant-bild figcaption { color: var(--text-3); font-size: .75rem; text-align: right; }
.og-vaillant-text { display: grid; gap: .8rem; align-content: center; }
.og-vaillant-text h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.og-vaillant-text h3 .light { display: block; margin-top: .15em; font-size: .72em; letter-spacing: -.015em; }
.og-vaillant-text > p:not(.og-pflicht) { margin: 0; color: var(--text-2); font-size: 1rem; line-height: 1.6; }
.og-vaillant .btn-row { gap: .6rem 1.4rem; margin-top: .3rem; }
.og-vaillant .og-pflicht { margin-top: .2rem; }
@container (min-width: 600px) { .og-vaillant-kern { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center; } }
.og-marke { display: grid; width: 100%; padding: 1.4rem 1.2rem; }