/* ============================================================
   ISSA HOLDING · assets/energie/energie.css – nur energie-spezifische Teile der Phase 7 (P0; Spezifikation 14, 2/8; Vertrag
   _phase7_vertrag_welle0.md, Abschnitt 8). Eingebunden NACH /assets/style.css (?v=IH_ASSET_V) auf den Seiten unter
   /energie/rechenzentren/ und /energie/kreislaufwirtschaft/ (optional /energie/).
   Regeln: ausschließlich Phase-6-Tokens (body.ih-marmor, Spez. 13, 4.2) – keine eigenen Farbwerte; vorhandene Komponenten
   (.ih-quellen, sup.ih-fn, .ih-badge, .ev-line/.ev, .ih-hinweis, .card, .btn) werden nicht umbenannt, nur ergänzt.
   Neue Klassen mit Präfix rz- (Rechenzentren) bzw. kl- (Kreislauf); Animationen nur über .is-playing, reduzierte Bewegung → statisch.
   ============================================================ */

/* ---- Status-Badges der Rechtslage (neue data-status-Werte; Text immer sichtbar) */
.ih-badge[data-status="geltend"]{color:var(--status-frei)}
.ih-badge[data-status="entwurf"]{color:var(--status-info);border-style:dashed}
.ih-badge[data-status="entwurf"]::before{background:none;border:1px dashed currentColor}

/* ---- Unternavigation Rechenzentren / Kreislaufwirtschaft */
/* margin-top = Höhe der festen Hauptnavigation (Logo 46 px + Polster 2 × .8rem, style.css .nav) */
.rz-subnav{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .9rem;margin:calc(46px + 1.6rem) auto 0;padding:.7rem 1.2rem;max-width:var(--maxw,1200px);
  border-bottom:1px solid var(--line-soft);font-size:.86rem}
.rz-subnav a{color:var(--ink-dim);text-decoration:none;padding:.25rem 0;border-bottom:2px solid transparent}
.rz-subnav a:hover,.rz-subnav a:focus-visible{color:var(--ink);border-bottom-color:var(--gold)}
.rz-subnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold);font-weight:600}
.rz-subnav .rz-subnav-titel{color:var(--ink-faint);font-weight:600;letter-spacing:.06em}
.rz-subnav .rz-subnav-trenner{inline-size:1px;block-size:1.1rem;background:var(--line)}

/* ---- Brotkrume */
.rz-krume{font-size:.8rem;color:var(--ink-faint);margin-bottom:1rem}
.rz-krume ol{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;padding:0;margin:0}
.rz-krume li+li::before{content:"/";margin-inline-end:.3rem;color:var(--line)}
.rz-krume a{color:var(--ink-dim)}

/* ---- Hervorgehobener Disclaimer (Rechtslage, Rechner) */
.ih-hinweis.rz-betont{border-inline-start-width:5px;background:var(--panel);color:var(--ink);font-size:.92rem}

/* ---- Zweispuriger Zeitstrahl auf der Phase-6-Komponente .ev-line (8.4) */
.ev-line.rz-spuren .ev[data-status="entwurf"]{border-inline-start:2px dashed var(--line);padding-inline-start:1rem}
.ev-line.rz-spuren .ev[data-status="entwurf"] .y{color:var(--status-info)}
.ev-line.rz-spuren .ev[data-status="geltend"] .y{color:var(--status-frei)}
@media (min-width:900px){
  .ev-line.rz-spuren{display:grid;grid-template-columns:1fr 1fr;column-gap:2.4rem}
  .ev-line.rz-spuren .ev[data-status="geltend"]{grid-column:1}
  .ev-line.rz-spuren .ev[data-status="entwurf"]{grid-column:2}
}

/* ---- Tabellen der Rechtslage / Annahmen */
.rz-tabelle{inline-size:100%;border-collapse:collapse;font-size:.88rem;margin:1rem 0}
.rz-tabelle th,.rz-tabelle td{text-align:start;padding:.5rem .6rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.rz-tabelle th{color:var(--ink-dim);font-weight:600}
.rz-tabelle-wrap{overflow-x:auto}

/* ---- Rechner (7.4, 9) */
.rz-rechner{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:1.4rem}
.rz-feld label{display:block;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.rz-feld input{inline-size:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}
.rz-feld input:focus-visible{outline:none;box-shadow:var(--focus)}
.rz-feld input[aria-invalid="true"]{border-color:var(--status-reserviert)}
.rz-feld .rz-hilfe{font-size:.8rem;color:var(--ink-faint);margin-top:.3rem}
.rz-fehler{font-size:.82rem;color:var(--status-reserviert);margin-top:.3rem}
.rz-ergebnis{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));margin-top:1.6rem}
.rz-kachel{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius,12px);padding:1rem 1.1rem}
.rz-kachel .rz-wert{font-family:var(--font-display);font-size:1.6rem;color:var(--ink);line-height:1.2}
.rz-kachel .rz-label{font-size:.82rem;color:var(--ink-dim);margin-top:.3rem}
.rz-annahmen{margin-top:2rem}
.rz-annahmen dt{font-weight:600;color:var(--ink)}
.rz-annahmen dd{margin:0 0 .8rem;color:var(--ink-dim);font-size:.88rem}
.rz-rechenweg{margin-top:1rem;font-size:.86rem;color:var(--ink-dim)}
.rz-rechenweg code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:var(--ink)}
.rz-nojs{border:1px dashed var(--line);border-radius:8px;padding:.8rem 1rem;color:var(--ink-dim)}
.rz-nojs[hidden]{display:none}   /* ih-energie.js setzt hidden, sobald JS läuft */

/* ---- CTA NDA-Datenraum (12) */
.rz-cta{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius,12px);padding:1.4rem 1.5rem;margin-top:2rem}
.rz-cta ol{margin:.8rem 0 1rem;padding-inline-start:1.3rem;color:var(--ink-dim);display:grid;gap:.25rem}
.rz-cta .rz-cta-links{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---- Grafiken (Inline-SVG, 8) */
.rz-grafik{margin:1.6rem 0}
.rz-grafik svg{display:block;inline-size:100%;block-size:auto;max-inline-size:100%}
.rz-grafik svg text{fill:var(--ink);font-family:var(--font-body)}
.rz-grafik .rz-svg-dim{fill:var(--ink-dim)}
.rz-grafik .rz-linie{stroke:var(--ink-dim);fill:none}
.rz-grafik .rz-strom{stroke:var(--gold);fill:none}
.rz-grafik .rz-waerme{stroke:var(--status-reserviert);fill:none}
.rz-grafik .rz-kaelte{stroke:var(--status-info);fill:none}
.rz-grafik .rz-h2{stroke:var(--status-frei);fill:none}
.rz-grafik .rz-flaeche{fill:var(--panel);stroke:var(--line)}
.rz-grafik .rz-nda{fill:var(--anthrazit);stroke:var(--anthrazit2)}
.rz-grafik .rz-nda-text{fill:var(--bg)}
.rz-vergleich{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media (min-width:900px){.rz-vergleich{grid-template-columns:1fr 1fr}}
.rz-umschalter{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:1rem}
.rz-umschalter button{border:0;background:transparent;color:var(--ink-dim);padding:.4rem 1rem;font:inherit;cursor:pointer}
.rz-umschalter button[aria-pressed="true"]{background:var(--gold);color:var(--anthrazit)}
@media (min-width:900px){.rz-umschalter{display:none}}   /* Umschalten nur unter 900 px: rz-hub.js setzt hidden nur dort (style.css: [hidden] ist !important) */

/* Systemschema: Knoten mit sichtbarem Fokus (8.2) */
.rz-schema [data-node]{cursor:pointer}
.rz-schema [data-node]:focus{outline:none}
.rz-schema [data-node]:focus-visible .rz-flaeche,.rz-schema [data-node][aria-pressed="true"] .rz-flaeche{stroke:var(--gold);stroke-width:3}
.rz-schema-text{min-block-size:4.5rem;background:var(--panel);border:1px solid var(--line-soft);border-radius:8px;padding:.8rem 1rem;color:var(--ink-dim)}
.rz-schema-scroll{overflow-x:auto}
/* Systemschema (viewBox 800, Schrift 20): bis 1299 px über die volle Breite (höchstens 760 px), Beschreibungsfeld darunter;
   ab 1300 px Schema 2/3 + Feld 1/3 – Schrift damit nie unter 13 px (Spez. 14, 8; Nachprüfung P7V-03) */
#sa-grafik{grid-template-columns:minmax(0,1fr)}
#sa-grafik > .rz-schema{max-inline-size:760px}
/* Hub-Ablauf mit sechs Schritten (Spez. 14, 7.1 Nr. 5; Nachprüfung P7V-08): 3 + 3 ab 600 px, eine Reihe ab 1300 px */
@media (min-width:600px){.flow.rz-ablauf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1300px){.flow.rz-ablauf{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1300px){#sa-grafik{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}#sa-grafik > .rz-schema{max-inline-size:none}}

/* ---- Animationen: Flusslinien und Sequenzen (nur mit .is-playing) */
@keyframes rz-fluss{to{stroke-dashoffset:-48}}
@keyframes kl-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
[data-anim] .rz-fluss{stroke-dasharray:8 8}
[data-anim].is-playing .rz-fluss{animation:rz-fluss 1.6s linear infinite}
[data-anim] .kl-szene{opacity:0;transition:opacity .4s ease}
[data-anim][data-step="1"] .kl-szene[data-szene="1"],[data-anim][data-step="2"] .kl-szene[data-szene="2"],
[data-anim][data-step="3"] .kl-szene[data-szene="3"],[data-anim][data-step="4"] .kl-szene[data-szene="4"]{opacity:1}
[data-anim].is-playing[data-step="1"] .kl-szene[data-szene="1"],[data-anim].is-playing[data-step="2"] .kl-szene[data-szene="2"],
[data-anim].is-playing[data-step="3"] .kl-szene[data-szene="3"],[data-anim].is-playing[data-step="4"] .kl-szene[data-szene="4"]{animation:kl-ein .6s ease both}
[data-anim] ol[data-anim-schritte] li[aria-current="step"]{color:var(--ink);font-weight:600}
.rz-anim-steuerung{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.rz-anim-steuerung button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:.3rem .9rem;font:inherit;cursor:pointer}
.rz-anim-steuerung button[aria-pressed="true"]{border-color:var(--gold);background:var(--panel2)}
.rz-anim-steuerung button:focus-visible{outline:none;box-shadow:var(--focus)}

/* Statische Bildfolge (reduzierte Bewegung oder ohne JS-Steuerung): alle Szenen sichtbar */
[data-anim].is-static .kl-szene{opacity:1;animation:none}
[data-anim].is-static .rz-fluss{animation:none}
@media (prefers-reduced-motion:reduce){
  [data-anim] .rz-fluss,[data-anim].is-playing .rz-fluss,[data-anim].is-playing .kl-szene,[data-anim].is-playing[data-step] .kl-szene[data-szene]{animation:none}
  [data-anim] .kl-szene{opacity:1;transition:none}
}

/* ---- RTL: Grafiken werden nicht gespiegelt (10); nur Textausrichtung */
[dir="rtl"] .rz-grafik svg{direction:ltr}

/* ---- Absatzabstand auf den Energie-Seiten (style.css setzt * {margin:0}) */
.section > p + p,.grid > div > p + p,.rz-grafik + div p + p{margin-top:.8rem}