/* =====================================================================
   Wasserstoff-Seite (wasserstoff.html, en/hydrogen.html), 2026-10-25
   Baut auf page-grc.css auf (gleiche Bausteine), Akzent Infrastruktur-Blau.
   ===================================================================== */

/* Hero: Navy ohne Foto, ruhiger Lichtschein statt Besprechungsraum */
body.h2-page #content-start.grc-hero::before {
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(10,132,255,.22) 0%, rgba(10,132,255,0) 70%),
    radial-gradient(50% 60% at 15% 85%, rgba(43,138,255,.12) 0%, rgba(43,138,255,0) 70%);
  filter: none;
}
body.h2-page #content-start.grc-hero::after {
  background: linear-gradient(180deg, rgba(6,16,36,0) 0%, rgba(6,16,36,.35) 70%, rgba(6,14,30,.9) 100%);
}
body.h2-page #content-start.grc-hero .accent-datacenter { color: #2b8aff; }
body.h2-page #content-start.grc-hero .page-brand-label { color: rgba(255,255,255,.9); letter-spacing: .02em; }

/* Kicker in Infrastruktur-Blau */
body.h2-page main .eyebrow.eyebrow-datacenter { color: #0071e3; }
body.h2-page main .sub-dark-section .eyebrow.eyebrow-datacenter,
body.h2-page main .sub-dark-section .eyebrow-datacenter .dot { color: #7cc6ff; }
body.h2-page main .sub-dark-section h2 .accent-datacenter { color: #fff; }

/* Markt-Kennzahlen: Zahl groß */
body.h2-page .grc-out.h2-stats h3 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #0b1c3d;
  margin: 6px 0 6px;
}
body.h2-page .grc-out.h2-stats small {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: #0066cc;
}

/* Abschluss mittig */
body.h2-page .h2-cta-inner { text-align: center; }
body.h2-page .h2-cta-inner :is(h2,.lead) { margin-left: auto; margin-right: auto; }
body.h2-page .h2-cta-inner .lead { max-width: 620px; }

/* =====================================================================
   Grafiken (Testseite /wasserstoff-test, 25.10.2026): Energiefluss + Kette aus page-rz.css,
   Zonen-Schaubild und Marktbalken hier. SVGs aus reference/rz-grafiken/h2_svgs.py.
   ===================================================================== */
body.h2-page #energie .rze-figure { margin: 44px auto 0; max-width: 1040px; }
body.h2-page #energie .rze--m { max-width: 400px; }
.h2z { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.h2z--m { display: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 700px) { .h2z--d { display: none; } .h2z--m { display: block; } }
.h2z-figure { margin: 44px auto 8px; max-width: 1040px; }
.h2z-zone { fill: rgba(255,255,255,.05); stroke: rgba(159,211,255,.35); stroke-width: 1.2; }
.h2z-zone--3 { fill: rgba(90,160,255,.12); }
.h2z-fw { stroke: rgba(255,255,255,.55); stroke-width: 1.6; stroke-dasharray: 6 5; fill: none; }
.h2z-fwt { font-size: 11px; font-weight: 600; fill: rgba(232,234,238,.6); }
.h2z-gate { stroke: #9fd3ff; stroke-width: 2; stroke-dasharray: 3 5; fill: none; }
.h2z-lock { fill: #1c3a6e; stroke: #5aa0ff; stroke-width: 1.4; }
.h2z-gatet { font-size: 12px; font-weight: 600; fill: #dbeeff; }
.h2z-alarmpath { fill: none; stroke: rgba(255,120,120,.35); stroke-width: 1.4; stroke-dasharray: 3 5; }
.h2z-alarm { fill: #ff6b6b; }
.h2z-hit { fill: none; stroke: #ff6b6b; stroke-width: 2; }
.h2z-alarmt { font-size: 12px; font-weight: 700; fill: #ffb3b3; }
@media (prefers-reduced-motion: reduce) { .h2z-alarm { display: none; } }

/* Marktbalken */
.h2-bars { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; max-width: 880px; }
.h2-bar { display: grid; grid-template-columns: minmax(0, 260px) 1fr 150px; gap: 18px; align-items: center; }
.h2-bar-lbl { font-size: 15px; font-weight: 600; color: #0b1c3d; line-height: 1.3; }
.h2-bar-lbl small { display: block; font-size: 13px; font-weight: 500; color: #4a5768; }
.h2-bar-track { height: 14px; border-radius: 7px; background: #eef3f9; overflow: hidden; }
.h2-bar-fill { display: block; height: 100%; width: var(--w); border-radius: 7px; background: linear-gradient(90deg, #0071e3, #2b8aff); transform-origin: left; }
.h2-bar--build .h2-bar-fill { background: repeating-linear-gradient(135deg, #2b8aff 0 8px, #6fb0ff 8px 16px); }
.h2-bar-val { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #0b1c3d; min-width: 110px; text-align: right; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-mx-reveal]:not(.is-in) .h2-bar-fill { transform: scaleX(0); }
  [data-mx-reveal] .h2-bar-fill { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
  [data-mx-reveal] .h2-bar:nth-child(2) .h2-bar-fill { transition-delay: .15s; }
  [data-mx-reveal] .h2-bar:nth-child(3) .h2-bar-fill { transition-delay: .3s; }
}
@media (max-width: 700px) {
  .h2-bar { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .h2-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .h2-bar-val { font-size: 18px; min-width: 0; }
}
.h2z-shackle { fill: none; stroke: #9fd3ff; stroke-width: 2; }

/* Hero-Scroll Wasserstoff (26.10.2026, Yusuf: schwarz wie RZ): Elektrolyse-Modul öffnet sich, Standbild bei reduzierter Bewegung = letzter Frame */
@media (prefers-reduced-motion: reduce) {
  body.h2-page .dc-scroll-pin { background-image: url('../images/h2-scroll-desktop/d-096.webp?v=20261026b'); background-color: #000; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  body.h2-page .dc-scroll-pin { background-image: url('../images/h2-scroll-mobile/m-096.webp?v=20261026b'); }
}
body.h2-page .dc-scroll-overlay h1 .accent-datacenter { color: #2b8aff !important; }