/* ==========================================================================
   Animierte Erklärgrafiken — KWK-Prinzip, Brennstoffzelle, Energieaufteilung
   Wird zusätzlich zu guide.css geladen ($page_css als Array).

   Grundsatz: Die Bewegung ist reine Zugabe. Jede Grafik ist ohne JavaScript,
   ohne Animation und bei „Bewegung reduzieren“ vollständig lesbar — dann
   ruhen nur die wandernden Teilchen. Der Start ist an die vorhandene
   Aufdeck-Logik (.is-revealed) gekoppelt, damit nichts außerhalb des
   Sichtbereichs rechnet.
   ========================================================================== */

.dgm {
  container-type: inline-size;
  container-name: dgm;
  margin-block: 2.25rem;
  padding: 1.6rem 1.4rem 1.2rem;
  border: 1px solid var(--color-stone-200, #e7e5e4);
  border-radius: 1rem;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--color-primary-50) 0%, transparent 60%),
    #fff;
}

.dgm-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  line-height: 1.35;
  color: var(--color-primary-900);
  margin: 0 0 1.4rem;
}

.dgm > .figure-caption {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-stone-200, #e7e5e4);
}

/* ==========================================================================
   1 — KWK-Prinzip: ein Brennstoff, zwei Nutzen
   Aufbau in HTML statt SVG: Der Ablauf klappt auf schmalen Geräten von
   nebeneinander auf untereinander um, und alle Beschriftungen bleiben echter,
   frei skalierender Text.
   ========================================================================== */

.dgm-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}

.dgm-node {
  position: relative;
  text-align: center;
  padding: 1.1rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--color-stone-200, #e7e5e4);
  background: #fff;
}

.dgm-node-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto 0.6rem;
  color: var(--color-primary-600);
}
.dgm-node-icon svg { width: 100%; height: 100%; display: block; }

.dgm-node-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-primary-900);
  /* Lange Komposita brechen in der schmalen Kernspalte sauber um */
  hyphens: auto;
  overflow-wrap: break-word;
}

.dgm-node-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-stone-500, #78716c);
}

/* Kernbaustein — die Anlage selbst, farblich als Zentrum gesetzt */
.dgm-node-core {
  background: var(--color-primary-700);
  border-color: var(--color-primary-800);
}
.dgm-node-core .dgm-node-icon { color: var(--color-primary-100); }
.dgm-node-core .dgm-node-label { color: #fff; }
.dgm-node-core .dgm-node-note { color: var(--color-primary-100); }

/* Ruhiger Puls um den Kern. Ausgangszustand ist unsichtbar — ohne Animation
   bleibt die Karte einfach schlicht. */
.dgm-node-core::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 1.1rem;
  border: 2px solid var(--color-primary-400);
  opacity: 0;
  pointer-events: none;
}
.is-revealed .dgm-node-core::after {
  animation: dgm-pulse 3.2s ease-out infinite;
}
@keyframes dgm-pulse {
  0%   { opacity: 0.55; transform: scale(0.985); }
  70%  { opacity: 0;    transform: scale(1.035); }
  100% { opacity: 0;    transform: scale(1.035); }
}

.dgm-node-power .dgm-node-icon { color: var(--color-primary-600); }
.dgm-node-heat  .dgm-node-icon { color: var(--color-ember-700); }

.dgm-outputs {
  display: grid;
  gap: 0.75rem;
}

/* Verbindungsstrecken — gestrichelte Linien, deren Muster fließt.
   Senkrecht auf schmalen Geräten, waagerecht sobald Platz ist. */
.dgm-pipe {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  height: 3.25rem;
}

.dgm-stream {
  display: block;
  width: 3.5px;
  height: 100%;
  border-radius: 999px;
  background-image: repeating-linear-gradient(
    180deg,
    currentColor 0 7px,
    transparent 7px 14px
  );
  background-size: 100% 14px;
  background-repeat: repeat;
}
.is-revealed .dgm-stream { animation: dgm-stream-y 0.8s linear infinite; }
@keyframes dgm-stream-y { to { background-position: 0 14px; } }

.dgm-pipe-fuel { color: var(--color-stone-400, #a8a29e); }
.dgm-stream-power { color: var(--color-primary-500); }
.dgm-stream-heat  { color: var(--color-ember-500); }

@container dgm (min-width: 40rem) {
  .dgm-flow {
    grid-template-columns:
      minmax(0, 1fr) 4.25rem minmax(0, 1.3fr) 4.25rem minmax(0, 1fr);
    align-items: center;
  }
  .dgm-pipe {
    height: auto;
    flex-direction: column;
    gap: 0;
    justify-content: space-around;
    align-self: stretch;
    padding-block: 0.4rem;
  }
  .dgm-stream {
    width: 100%;
    height: 3.5px;
    background-image: repeating-linear-gradient(
      90deg,
      currentColor 0 7px,
      transparent 7px 14px
    );
    background-size: 14px 100%;
  }
  .is-revealed .dgm-stream { animation-name: dgm-stream-x; }
  .dgm-pipe-fuel { justify-content: center; }
}
@keyframes dgm-stream-x { to { background-position: 14px 0; } }

/* ==========================================================================
   2 — Aufbau und Ablauf in der Brennstoffzelle (SVG)
   ========================================================================== */

/* Auf sehr schmalen Geräten würden die Beschriftungen unlesbar klein — dort
   darf die Zeichnung seitlich laufen, wie die Datenblatt-Tabellen. */
.dgm-canvas {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Die Zeichnung skaliert mit — aber nur in einem Fenster, in dem die
   Beschriftungen weder winzig noch größer als der Fließtext werden.
   Bei 44rem entsprechen die Beschriftungen rund 15 px, bei 30rem rund 10 px. */
.dgm-canvas > svg {
  display: block;
  width: 100%;
  min-width: 30rem;
  max-width: 44rem;
  height: auto;
  margin-inline: auto;
}

/* Hinweis nur, solange die Zeichnung breiter ist als der Platz — die Schwelle
   entspricht der min-width der Zeichenfläche. */
.dgm-scroll-hint {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--color-stone-500, #78716c);
  text-align: center;
}
@container dgm (min-width: 30rem) {
  .dgm-scroll-hint { display: none; }
}

.dgm-cell-band { stroke-width: 1; }
.dgm-band-channel { fill: var(--color-stone-100, #f5f5f4); stroke: var(--color-stone-200, #e7e5e4); }
.dgm-band-anode   { fill: var(--color-primary-600); stroke: var(--color-primary-700); }
.dgm-band-lyte    { fill: var(--color-primary-50);  stroke: var(--color-primary-200); }
.dgm-band-cathode { fill: var(--color-ember-800);   stroke: var(--color-ember-900); }

.dgm-box {
  fill: #fff;
  stroke: var(--color-stone-300, #d6d3d1);
  stroke-width: 1.5;
}

.dgm-badge { fill: var(--color-primary-700); }
.dgm-badge-text { fill: #fff; font-weight: 600; }
.dgm-badge-icon { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }

.dgm-wire {
  fill: none;
  stroke: var(--color-stone-600, #57534e);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dgm-arrow {
  fill: none;
  stroke: var(--color-stone-500, #78716c);
  stroke-width: 2;
  stroke-linecap: round;
}

.dgm-label,
.dgm-badge-text,
.dgm-label-inverse {
  font-family: var(--font-heading);
  font-size: 15px;
}
.dgm-label { fill: var(--color-stone-700, #44403c); }
.dgm-label-inverse { fill: #fff; font-size: 12.5px; letter-spacing: 0.04em; }
.dgm-label-sm { font-size: 12.5px; fill: var(--color-stone-500, #78716c); }
.dgm-label-lyte { fill: var(--color-primary-900); }
.dgm-badge-text { font-size: 17px; }

.dgm-heat {
  fill: none;
  stroke: var(--color-ember-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 0 0;
}
.is-revealed .dgm-heat { animation: dgm-heat-rise 2.6s ease-in-out infinite; }
.dgm-heat:nth-of-type(2) { animation-delay: -0.85s; }
.dgm-heat:nth-of-type(3) { animation-delay: -1.7s; }
@keyframes dgm-heat-rise {
  0%, 100% { opacity: 0.45; transform: translateY(3px); }
  50%      { opacity: 1;    transform: translateY(-3px); }
}

/* Wandernde Teilchen. Ausgangszustand unsichtbar: Ohne Animation zeigt die
   Zeichnung nur den ruhenden Aufbau samt Pfeilen — inhaltlich vollständig. */
.dgm-particle {
  opacity: 0;
  /* Verschiebungen in Nutzereinheiten des viewBox rechnen, nicht in Pixeln
     der Zeichenfläche — sonst wandern die Teilchen je Bildschirmbreite anders. */
  transform-box: view-box;
  transform-origin: 0 0;
}
.dgm-p-h2   { fill: var(--color-primary-500); }
.dgm-p-o2   { fill: var(--color-ember-600); }
.dgm-p-h    { fill: var(--color-ember-600); }
.dgm-p-e    { fill: var(--color-primary-600); }
.dgm-p-h2o  { fill: var(--color-primary-400); }

/* Wasserstoff: aus dem Kanal in die Anode */
.is-revealed .dgm-p-h2 { animation: dgm-move-h2 2.4s linear infinite; }
@keyframes dgm-move-h2 {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(52px); }
}
.dgm-p-h2:nth-of-type(2) { animation-delay: -1.2s; }
.dgm-p-h2:nth-of-type(3) { animation-delay: -0.6s; }
.dgm-p-h2:nth-of-type(4) { animation-delay: -1.8s; }

/* Sauerstoff: aus der Luft in die Kathode */
.is-revealed .dgm-p-o2 { animation: dgm-move-o2 2.6s linear infinite; }
@keyframes dgm-move-o2 {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-150px); }
}
.dgm-p-o2:nth-of-type(2) { animation-delay: -0.9s; }
.dgm-p-o2:nth-of-type(3) { animation-delay: -1.8s; }

/* Protonen: durch den Elektrolyten von der Anode zur Kathode */
.is-revealed .dgm-p-h { animation: dgm-move-h 2.8s linear infinite; }
@keyframes dgm-move-h {
  0%   { opacity: 0; transform: translateX(0); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(150px); }
}
.dgm-p-h:nth-of-type(2) { animation-delay: -0.95s; }
.dgm-p-h:nth-of-type(3) { animation-delay: -1.9s; }
.dgm-p-h:nth-of-type(4) { animation-delay: -0.45s; }
.dgm-p-h:nth-of-type(5) { animation-delay: -1.4s; }
.dgm-p-h:nth-of-type(6) { animation-delay: -2.35s; }

/* Elektronen: über den äußeren Stromkreis — hoch, quer, hinunter */
.is-revealed .dgm-p-e { animation: dgm-move-e 3.4s linear infinite; }
@keyframes dgm-move-e {
  0%   { opacity: 0; transform: translate(0, 0); }
  8%   { opacity: 1; }
  18%  { transform: translate(0, -56px); }
  81%  { opacity: 1; transform: translate(188px, -56px); }
  100% { opacity: 0; transform: translate(188px, 0); }
}
.dgm-p-e:nth-of-type(2) { animation-delay: -1.13s; }
.dgm-p-e:nth-of-type(3) { animation-delay: -2.26s; }

/* Wasser: verlässt die Zelle mit der Abluft */
.is-revealed .dgm-p-h2o { animation: dgm-move-h2o 3s linear infinite; }
@keyframes dgm-move-h2o {
  0%   { opacity: 0; transform: translateX(0); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(128px); }
}
.dgm-p-h2o:nth-of-type(2) { animation-delay: -1.5s; }

/* Legende zur Zeichnung — echte Textzeile statt Beschriftung im Bild */
.dgm-legend {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}
.dgm-legend li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--color-stone-600, #57534e);
}
.dgm-legend li::before {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.25rem;
  background: var(--dgm-key, var(--color-stone-300, #d6d3d1));
  transform: translateY(0.1em);
}
.dgm-legend .dgm-key-anode    { --dgm-key: var(--color-primary-600); }
.dgm-legend .dgm-key-lyte     { --dgm-key: var(--color-primary-200); }
.dgm-legend .dgm-key-cathode  { --dgm-key: var(--color-ember-800); }
.dgm-legend .dgm-key-proton   { --dgm-key: var(--color-ember-600); }
.dgm-legend .dgm-key-electron { --dgm-key: var(--color-primary-600); }
.dgm-legend b {
  font-weight: 600;
  color: var(--color-stone-700, #44403c);
}
.dgm-legend .dgm-key-proton::before,
.dgm-legend .dgm-key-electron::before { border-radius: 999px; }

/* ==========================================================================
   3 — Energieaufteilung: was aus dem eingesetzten Gas wird
   ========================================================================== */

.dgm-bar {
  display: flex;
  height: 2.6rem;
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--color-stone-100, #f5f5f4);
}

.dgm-bar-seg {
  position: relative;
  overflow: hidden;
}
.dgm-bar-seg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform-origin: left center;
}
.is-revealed .dgm-bar-seg::before {
  animation: dgm-grow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes dgm-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.dgm-seg-power { flex: 0 0 38%; color: var(--color-primary-600); }
.dgm-seg-heat  { flex: 0 0 54%; color: var(--color-ember-600); }
.dgm-seg-loss  { flex: 0 0 8%;  color: var(--color-stone-300, #d6d3d1); }
.is-revealed .dgm-seg-heat::before { animation-delay: 0.18s; }
.is-revealed .dgm-seg-loss::before { animation-delay: 0.36s; }

.dgm-split-legend {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
@container dgm (min-width: 34rem) {
  .dgm-split-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.dgm-split-legend li {
  padding-left: 0.9rem;
  border-left: 4px solid var(--dgm-key, var(--color-stone-300, #d6d3d1));
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-stone-600, #57534e);
}
.dgm-split-legend .dgm-key-power { --dgm-key: var(--color-primary-600); }
.dgm-split-legend .dgm-key-heat  { --dgm-key: var(--color-ember-600); }
.dgm-split-legend .dgm-key-loss  { --dgm-key: var(--color-stone-400, #a8a29e); }
.dgm-split-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary-800);
}
.dgm-split-legend .dgm-key-heat .dgm-split-value { color: var(--color-ember-900); }
.dgm-split-legend .dgm-key-loss .dgm-split-value { color: var(--color-stone-600, #57534e); }
.dgm-split-name {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-stone-700, #44403c);
  font-weight: 600;
}

/* ==========================================================================
   Bewegung reduzieren — Teilchen und Pulse ruhen ganz, der Aufbau bleibt
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dgm-particle { display: none; }
  .dgm-node-core::after { display: none; }
  .dgm-heat { opacity: 1; transform: none; }
}