/* =====================================================================
   Rechenzentrum-Seite (2026-09-30, Yusuf): Kachel-Sektionen auf hellem Grund (site-navy.css), Navy-Sektionen tragen ihre Fläche selbst,
   Projektweg #kette, Ablauf mit Phasen, Energiefluss #energie.
   SVGs aus reference/rz-grafiken/rz_svgs.py. Bewegung nur transform/opacity/stroke-dash,
   startet erst im Bild ([data-mx-reveal] -> .is-in), prefers-reduced-motion = Standbild.
   ===================================================================== */

/* ---------- Gemeinsame SVG-Bausteine (Navy-Grund) ---------- */
.rzk, .rze { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.rzk--m, .rze--m { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 700px) { .rzk--d, .rze--d { display: none; } .rzk--m, .rze--m { display: block; } }
.rz-box { fill: #233250; stroke: rgba(255,255,255,.42); stroke-width: 1.4; }
.rz-box--p { fill: #16284a; stroke-dasharray: 5 4; }
.rz-on { fill: none; stroke: #9fd3ff; stroke-width: 2.4; opacity: 0; }
.rz-ico { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rz-cap { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: #9fd3ff; }
.rz-lbl { font-size: 14px; font-weight: 600; fill: #fff; }
.rz-sub { font-size: 12px; font-weight: 500; fill: rgba(232,234,238,.75); }
.rz-name { font-size: 15px; font-weight: 800; fill: #fff; letter-spacing: .02em; }
.rz-hsub { font-size: 12px; font-weight: 500; fill: rgba(232,234,238,.75); }
.rz-base { stroke: rgba(255,255,255,.22); stroke-width: 2; fill: none; }
.rz-prog { stroke: #5aa0ff; stroke-width: 3; fill: none; stroke-linecap: round; }
.rz-beams path { stroke: rgba(159,211,255,.4); stroke-width: 1.4; stroke-dasharray: 3 6; fill: none; }
/* GAD-Gruppe: Auftragnehmer + SOC gemeinsam umrandet, Logo im weißen Kreis wie Cybersecurity-Orbit */
.rz-group { fill: rgba(90,160,255,.07); stroke: rgba(159,211,255,.5); stroke-width: 1.4; }
.rz-link { fill: none; stroke: rgba(159,211,255,.7); stroke-width: 2; }
.rz-logo-bg { fill: #fff; }
.rz-halo { fill: rgba(90,160,255,.22); }
.rz-pill rect { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.35); }
.rz-pilltxt { font-size: 13px; font-weight: 700; fill: #fff; }
.rz-chip rect { fill: rgba(90,160,255,.14); stroke: rgba(159,211,255,.45); }
.rz-chip text { font-size: 12px; font-weight: 700; fill: #dbeeff; }
.rz-flow path { stroke: #5aa0ff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 2 10; }
.rz-flow--heat path { stroke: #9fd3ff; }
.rz-ret { fill: none; stroke: rgba(159,211,255,.55); stroke-width: 1.5; stroke-dasharray: 4 5; }
.rz-gad { fill: #1c3a6e; stroke: #5aa0ff; stroke-width: 1.6; }
.rz-arr { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rz-alb { font-size: 12.5px; font-weight: 700; fill: #dbeeff; }
.rz-item { font-size: 13px; font-weight: 600; fill: #fff; }
.rz-dot { fill: #5aa0ff; }
.rz-div { stroke: rgba(159,211,255,.3); stroke-width: 1; }
.rz-pill, .rz-on { transform-box: fill-box; transform-origin: center; }

/* Standbild (reduzierte Bewegung, kein JS): Weg komplett, alle Stationen aktiv */
.rz-prog { stroke-dasharray: 1; stroke-dashoffset: 0; }
.rzk .rz-on { opacity: 1; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rzk .rz-prog { stroke-dashoffset: 1; animation: rzkProg 12s linear infinite; }
  .rzk .rz-on { opacity: 0; animation: 12s ease-out infinite; }
  .rzk--d .rz-on[style*="--i:0"], .rzk--m .rz-on[style*="--i:0"] { animation-name: rzkOn0; }
  .rzk--d .rz-on[style*="--i:1"] { animation-name: rzkD1; } .rzk--d .rz-on[style*="--i:2"] { animation-name: rzkD2; }
  .rzk--m .rz-on[style*="--i:1"] { animation-name: rzkM1; } .rzk--m .rz-on[style*="--i:2"] { animation-name: rzkM2; }
  .rzk .rz-on[style*="--i:4"] { animation-name: rzkOn4; }
  .rz-flow path { animation: rzFlow 2.4s linear infinite; }
  .rz-flow--heat path { animation-duration: 3.2s; }
  .rz-ret { animation: rzFlow 4s linear infinite reverse; }
  /* erst laufen lassen, wenn die Grafik im Bild ist */
  [data-mx-reveal]:not(.is-in) :is(.rz-prog,.rz-on,.rz-flow path,.rz-ret) { animation-play-state: paused; }
}
@keyframes rzkProg { 0%, 5% { stroke-dashoffset: 1; opacity: 1; } 65% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rzkOn0 { 0%, 4% { opacity: 0; } 7%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* Desktop: GAD 20 %, Partner 52 % des Wegs; Mobil: 11 %, 55 %; SOC = Wegende (rzkOn4) */
@keyframes rzkD1 { 0%, 16% { opacity: 0; } 19%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rzkD2 { 0%, 35% { opacity: 0; } 38%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rzkM1 { 0%, 10% { opacity: 0; } 13%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rzkM2 { 0%, 36% { opacity: 0; } 39%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rzkOn4 { 0%, 64% { opacity: 0; } 67%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rzFlow { to { stroke-dashoffset: -24; } }

/* ---------- Navy-Kacheln (#kette, #energie): gleiche Form wie .gad-sheet, Fläche Navy mit Verlauf wie Startseiten-Hero ---------- */
body.sheet-page .gad-sheet.rz-navy-sheet {
  background: linear-gradient(180deg, #0c2149 0%, #0a1a38 55%, #081428 100%) !important;
  border-color: rgba(255,255,255,.06); box-shadow: 0 14px 40px rgba(8,20,40,.22); color: #fff; overflow: hidden;
}
/* ---------- #kette ---------- */
/* #kette seit 2026-09-30 weiße Kachel: SVG-Bausteine hell umgefärbt (#energie bleibt Navy) */
#energie .eyebrow { color: #9fd3ff; }
#energie h2 .accent-datacenter { color: #5aa0ff; }
#kette .lead { max-width: 780px; }
#kette .rz-box { fill: #f3f6fb; stroke: #c9d5e6; }
#kette .rz-box--p { fill: #fff; stroke: #9fb2cc; }
#kette .rz-on { stroke: #2b8aff; }
#kette .rz-ico { stroke: #0b1c3d; }
#kette .rz-cap { fill: #0066cc; }
#kette .rz-lbl, #kette .rz-name, #kette .rz-item, #kette .rz-pilltxt { fill: #0b1c3d; }
#kette .rz-sub, #kette .rz-hsub { fill: #4a5768; }
#kette .rz-alb { fill: #16336a; }
#kette .rz-base { stroke: #d6deea; }
#kette .rz-prog { stroke: #2b8aff; }
#kette .rz-group { fill: rgba(43,138,255,.05); stroke: rgba(43,138,255,.35); }
#kette .rz-link, #kette .rz-ret { stroke: #2b8aff; }
#kette .rz-halo { fill: rgba(43,138,255,.14); }
#kette .rz-logo-bg { stroke: #d6deea; stroke-width: 1; }
#kette .rz-gad { fill: #eaf2ff; stroke: #2b8aff; }
#kette .rz-arr { stroke: #8a97aa; }
#kette .rz-dot { fill: #2b8aff; }
#kette .rz-div { stroke: #d6deea; }
#kette .rz-pill rect { fill: #eef3f9; stroke: #c9d5e6; }
#kette .rz-chip rect { fill: #eaf2ff; stroke: rgba(43,138,255,.4); }
#kette .rz-chip text { fill: #16336a; }
#kette .rz-beams path { stroke: rgba(43,138,255,.45); }
.rzk-figure { margin: 48px auto 0; max-width: 1040px; }

/* ---------- Kachel-Sektionen: Überschriften und Akzent auf Weiß ---------- */
.rz-navy-page .gad-sheet .eyebrow.eyebrow-datacenter { color: #0066cc; }
.rz-navy-page .gad-sheet h2 .accent-datacenter { color: #2b8aff; }

/* ---------- #ablauf: Phasen mit Meilenstein und Federführung (Leiste aus gad-flow.css) ---------- */
.rzp-phases { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.rzp-phase { display: flex; flex-direction: column; }
.rzp-img { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #0b1c3d; }
.rzp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Prozesslinie auf Höhe von Nummer und Titel, läuft bis in die nächste Spalte */
.rzp-head { position: relative; padding-top: 30px; margin-top: 18px; }
.rzp-head::before { content: ""; position: absolute; top: 7px; left: 0; right: -20px; height: 2px; background: linear-gradient(90deg, #1f6feb, #5aa0ff); transform-origin: left; }
.rzp-phase:last-child .rzp-head::before { right: 0; background: linear-gradient(90deg, #5aa0ff, #16a34a); }
.rzp-head::after { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #1f6feb; box-sizing: border-box; }
.rzp-phase:last-child .rzp-head::after { border-color: #16a34a; background: #16a34a; }
.rzp-head small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0066cc; margin-bottom: 4px; }
.rzp-head h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: #0f1b2d; min-height: 2.5em; }
.rzp-phase > p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: #4a5768; flex: 1 1 auto; }
/* Meilenstein/Federführung: zwei kleine Zeilen, feine Linie darüber, feste Höhe = alle Spalten auf gleicher Höhe */
.rzp-meta { margin: 16px 0 0; display: grid; gap: 10px; }
.rzp-meta div { border-top: 1px solid #e3e9f2; padding-top: 8px; min-height: 64px; box-sizing: border-box; }
.rzp-meta dt { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7686; margin-bottom: 2px; }
.rzp-meta dd { margin: 0; font-size: 13px; line-height: 1.4; color: #4a5768; font-weight: 400; hyphens: auto; overflow-wrap: break-word; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rzp-phases:not(.is-in) .rzp-phase { opacity: .35; }
  .rzp-phases:not(.is-in) .rzp-head::before { transform: scaleX(0); }
  .rzp-phases.is-in .rzp-phase { transition: opacity .5s calc(.15s + var(--i) * .3s); }
  .rzp-phases.is-in .rzp-head::before { transition: transform .5s ease-out calc(.15s + var(--i) * .3s); }
}
.rzp-norms { margin: 32px 0 0; padding-top: 14px; border-top: 1px solid #e3e9f2; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; }
.rzp-norms b { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7686; }
.rzp-norms p { margin: 0; font-size: 13px; line-height: 1.5; color: #6b7686; }

/* ---------- #energie: Energiefluss + Bildkarten je Station ---------- */
.rze-figure { margin: 44px auto 0; max-width: 1040px; }
#energie .lead { max-width: none; }
#energie .rzn-ecards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
#energie .rzn-ecard { background: #132a52; border-color: rgba(255,255,255,.10); }
#energie .rzn-ecard-img { aspect-ratio: 4 / 3; }
#energie .rzn-ecard-num { left: 12px; top: 12px; bottom: auto; background: rgba(11,28,61,.82); font-size: 12px; }
#energie .rzn-ecard-tag { color: #9fd3ff; font-weight: 700; }
#energie .rzn-ecard-body { padding: 16px 18px 18px; }
#energie .rzn-ecard-body h3 { font-size: 16.5px; }
#energie .rzn-ecard-body p { font-size: 14px; }
#energie .rzn-ecard-for b { color: #9fd3ff; }
.rze-h2 { margin: 28px 0 0; padding: 18px 22px; border-radius: 14px; border: 1px dashed rgba(159,211,255,.4); color: rgba(232,234,238,.82); font-size: 14.5px; line-height: 1.55; }
.rze-h2 b { color: #fff; }
#energie .rzn-note { color: rgba(232,234,238,.66); }

@media (max-width: 1024px) {
  #energie .rzn-ecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phasen untereinander: Foto links, Titel und Text rechts, Meilenstein/Federführung nebeneinander */
@media (max-width: 1024px) {
  .rzp-phases { grid-template-columns: 1fr; gap: 0; max-width: 720px; }
  .rzp-phase { display: grid; grid-template-columns: 112px 1fr; column-gap: 18px; padding: 22px 0; border-top: 1px solid #e3e9f2; }
  .rzp-phase:first-child { border-top: 0; padding-top: 0; }
  .rzp-img { grid-row: 1 / span 2; aspect-ratio: 1; align-self: start; }
  .rzp-head { margin-top: 0; padding-top: 0; }
  .rzp-head::before, .rzp-head::after { display: none; }
  .rzp-head h3 { min-height: 0; }
  .rzp-phase > p { grid-column: 2; margin-top: 6px; }
  .rzp-meta { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .rzp-meta div { min-height: 0; }
}
@media (max-width: 480px) {
  .rzp-phase { grid-template-columns: 76px 1fr; column-gap: 14px; }
}
@media (max-width: 600px) {
  #energie .rzn-ecards { grid-template-columns: 1fr; }
  .rzk-figure, .rze-figure { margin-top: 32px; }
  .rzp-norms { grid-template-columns: 1fr; }
}

/* ---------- Handy (2026-10-01): Ablauf, Energie-Karten und Videos als Wischreihen (css/m-swipe.css + js/m-swipe.js) ---------- */
@media (max-width: 760px) {
  /* Einheitliches Muster (Runde 2): Karte 84 %, erste Karte bündig mit dem Textrand (20 px = Container-Innenabstand), Reihe bis zum Bildschirmrand */
  .rzp-phases, #energie .rzn-ecards, .rzn-vrows { --m-bleed: 20px; --m-gap: 14px; --m-card: 84%; max-width: none; }
  .rzp-phases { margin-top: 24px; }
  #energie { --m-dot: #fff; }
  #energie .rzn-ecards { margin-top: 24px; }
  /* Phase wieder als Spalte wie am Desktop: Foto oben, Leiste mit Punkt, Text, Meilenstein */
  .rzp-phase { display: flex; flex-direction: column; padding: 0; border-top: 0; }
  .rzp-img { aspect-ratio: 4 / 3; }
  .rzp-head { margin-top: 16px; padding-top: 28px; }
  .rzp-head::before, .rzp-head::after { display: block; }
  .rzp-head::before { right: calc(-1 * var(--m-gap)); }
  .rzp-phase:last-child .rzp-head::before { right: 0; }
  .rzp-head h3 { min-height: 2.5em; }
  .rzp-phase > p { margin-top: 8px; }
  .rzp-meta { grid-template-columns: 1fr; margin-top: 14px; }
  .rzp-meta div { min-height: 0; }
  .rzp-norms { margin-top: 20px; }
  /* Videos: je Karte Text + Handy-Video */
  .rzn-vrows { --m-card: 82%; margin-top: 28px; align-items: start; padding-block: 4px 28px !important; }
  .rzn-vrows + .m-swipe-dots { margin-top: -16px; }
  .rzn-vrow { gap: 16px; }
  .rzn-vrow-text h3 { font-size: 20px; }
  .rzn-vid-phone { max-width: 250px !important; }
  /* Lesbarkeit: keine Texte unter 12 px, Kartentext 15 px */
  .rzp-head small { font-size: 13px; }
  .rzp-head h3 { font-size: 18px; min-height: 0; }
  .rzp-phase > p { font-size: 15px; flex: none; }
  .rzp-meta dt, .rzp-norms b { font-size: 12px; }
  .rzp-meta dd { font-size: 14px; }
  .rzp-norms p { font-size: 14px; }
  #energie .rzn-ecard-tag { font-size: 12px; }
  #energie .rzn-ecard-num { font-size: 13px; }
  #energie .rzn-ecard-body p { font-size: 15px; }
  /* Energiefluss-Grafik: kein Überstand über den Textrand */
  .rze-figure { margin-top: 24px; }
  .rze-h2 { font-size: 15px; padding: 16px 18px; }
}

/* Hero .dc-scroll: Rack-Explosion (96 Frames, 2026-09-30). Standbild bei reduzierter Bewegung = letzter Frame
   (ueberstimmt den alten Pfad in style.css). Hintergrund bleibt #000 = Schwarz des Videos. */
@media (prefers-reduced-motion: reduce) {
  .dc-scroll-pin { background-image: url('../images/datacenter-scroll-desktop/d-096.webp?v=20260930s'); background-color: #000; }
}
/* Handy mit reduzierter Bewegung (2026-10-15, Komplettcheck G4): ganzes Rack oben, Kicker und Überschrift darunter frei auf Schwarz */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  main > section.dc-scroll { padding-bottom: 0; }
  .dc-scroll-pin { background-image: url('../images/datacenter-scroll-mobile/m-096.webp?v=20260930s'); background-size: contain; background-repeat: no-repeat; background-position: center 12%; height: auto; min-height: 0; padding-top: 58vw; }
  .dc-scroll-overlay { position: static; padding: 0 0 28px; background: none; }
}

/* Hero: Text links unten bleibt lesbar, wenn das Rack sich nach links öffnet (2026-10-01) */
@media (min-width: 761px) {
  .dc-scroll-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 56%),
                linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6) 100%);
  }
}
/* Prüfung 2026-10-02: Hero-Eyebrow auf Schwarz lesbar */
.dc-scroll-overlay .eyebrow.eyebrow-datacenter { color: #4d9bff; }