/* diagramm.css - gemeinsame Basis fuer die aus den Diagramm-Sammlungen
   (openshift-atlas, diagramme-hetzner-und-crc, openshift-liberty-bibliothek)
   in einzelne Anleitungen uebernommenen SVG-Zeichnungen.
   Eine Datei, per <link rel="stylesheet" href="diagramm.css"> eingebunden -
   analog nav-toggle.js. Deckt Farbtokens (hell + dunkel), Figure-Rahmen und
   die klickbaren copy-Text-Elemente ab. */

:root {
  --d-net: #2563b8;   --d-net-w: #e4edfa;
  --d-ok: #1d7a4f;    --d-ok-w: #e2f2e9;
  --d-store: #a86a12; --d-store-w: #fbeedb;
  --d-auth: #6d45ad;  --d-auth-w: #eee8fa;
  --d-evt: #0d7581;   --d-evt-w: #ddf1f3;
  --d-cfg: #0d7581;   --d-sec: #6d45ad;
  --d-bad: #cf3b3b;   --d-bad-w: #f8e9e8;  --d-bad-ink: #a62b2b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-net: #7fadeb;   --d-net-w: #1a2634;
    --d-ok: #5cc08e;    --d-ok-w: #14271e;
    --d-store: #dda75f; --d-store-w: #2b2114;
    --d-auth: #b294e6;  --d-auth-w: #221a31;
    --d-evt: #56b9c4;   --d-evt-w: #12262a;
    --d-cfg: #56b9c4;   --d-sec: #b294e6;
    --d-bad: #f08a84;   --d-bad-w: #331d1d;  --d-bad-ink: #f4a9a3;
  }
}
:root[data-theme="dark"] {
  --d-net: #7fadeb;   --d-net-w: #1a2634;
  --d-ok: #5cc08e;    --d-ok-w: #14271e;
  --d-store: #dda75f; --d-store-w: #2b2114;
  --d-auth: #b294e6;  --d-auth-w: #221a31;
  --d-evt: #56b9c4;   --d-evt-w: #12262a;
  --d-cfg: #56b9c4;   --d-sec: #b294e6;
  --d-bad: #f08a84;   --d-bad-w: #331d1d;  --d-bad-ink: #f4a9a3;
}

figure.dia { margin: 1.4rem 0 2rem; }
figure.dia svg {
  display: block; width: 100%; height: auto;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06));
}
figure.dia-scroll { overflow-x: auto; }
figure.dia-scroll svg { min-width: 700px; }
figure.dia figcaption { margin-top: .7rem; font-size: .92rem; line-height: 1.65; color: var(--ink-2); max-width: none; }
figure.dia figcaption b { color: var(--ink); font-weight: 600; }

/* klickbare Kopier-Texte in den SVGs (copy-markup.js) */
figure.dia text.copysrc { cursor: pointer; }
figure.dia text.copysrc:hover { text-decoration: underline; }
figure.dia text.copysrc.cp-done { fill: var(--url-ink, currentColor) !important; font-weight: 700; }
figure.dia a { cursor: pointer; }
figure.dia a:hover text { text-decoration: underline; }

/* Punkte-Liste, die mit einem uebernommenen Diagramm mitkommt - ruhiger Kasten.
   Volle Spaltenbreite wie das Diagramm darueber (die Anleitungen deckeln
   Fliesstext sonst bei ~64ch, was den Kasten unnoetig schmal macht). */
.dia-block ul.points, ul.points {
  max-width: none;
  margin: 1rem 0 0;
  padding: .9rem 1.15rem .9rem 2.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06));
}
ul.points li { margin: .38rem 0; }

/* kleiner Herkunftshinweis am uebernommenen Diagramm */
.dia-src {
  display: inline-block; margin: .1rem 0 .1rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em;
  color: var(--ink-3);
}
.dia-src a { color: inherit; }

/* ein in eine Anleitung uebernommenes Diagramm samt Text + Punkten */
.dia-block { margin: 1.4rem 0 1.8rem; }
.dia-block > .sub { margin-bottom: .2rem; }
.dia-block figure.dia { margin: .5rem 0 0; }

/* Die Zeichnung hat min-width 700px und scrollt horizontal, sobald die
   Inhaltsspalte schmaler wird (Handy, aber auch Laptop-Breiten knapp ueber
   dem Seitenleisten-Umbruch bei 960px). Beschreibung und Punkte-Kasten
   brechen dann auf die schmale Spaltenbreite um und wirken "nur halb so
   breit" wie die Zeichnung. Darum scrollt das ganze Diagramm-Paket
   (Beschreibung + Zeichnung + Schrittspur + Punkte) als eine Einheit:
   der .dia-block ist der Scroll-Container, alle Teile mindestens 700px breit.
   Ab ~1100px Viewport ist die Spalte breiter als 700px - dort greift die
   Regel nicht, .sub behaelt sein 64ch-Lesemass, kein Scroll-Container. */
@media (max-width: 1100px) {
  .dia-block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dia-block > * { min-width: 700px; }
  .dia-block > figure.dia-scroll { overflow-x: visible; }
  .dia-block > figure.dia-scroll svg { min-width: 100%; }
}

/* --- Schrittspur (Zurueck/Weiter + Dimmen/Hervorheben), von diagramm.js gebaut --- */
.anim-btn {
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2);
  color: var(--ink-2); font: 600 .74rem/1 var(--font-mono); padding: .38rem .65rem; cursor: pointer;
}
.anim-btn:hover { border-color: var(--accent); color: var(--ink); }
.anim-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.atlas-walk { display: flex; flex-direction: column; align-items: stretch; gap: .22rem; margin: .9rem 0 0; }
.atlas-walk + svg, .atlas-walk + figure { margin-top: .2rem; }
.atlas-walk-context { display: block; color: var(--ink-2); font: 400 .9rem/1.45 var(--font-sans); }
/* einzeilig, volle Breite, nicht fett, kleiner - sonst aendert sich die Hoehe
   beim Schrittwechsel und das Diagramm darunter springt. */
.atlas-walk-detail {
  display: block; width: 100%;
  color: var(--ink-2); font-size: .82rem; font-weight: 400; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atlas-walk-count { color: var(--ink); font: 400 .95rem/1.35 var(--font-mono); }
.atlas-static-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .35rem 0 0; }
.atlas-static-controls .anim-btn { flex: 0 0 auto; }
svg.atlas-static-svg text, svg.atlas-static-svg rect, svg.atlas-static-svg path,
svg.atlas-static-svg line, svg.atlas-static-svg circle, svg.atlas-static-svg polyline,
svg.atlas-static-svg polygon { transition: opacity .28s ease, fill .28s ease, stroke .28s ease, filter .28s ease; }
svg.atlas-static-svg.atlas-has-step .atlas-step-dim { opacity: .28; }
svg.atlas-static-svg .atlas-step-hit { opacity: 1; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 58%, transparent)); }
svg.atlas-static-svg text.atlas-step-hit { fill: var(--ink); font-weight: 700; }
svg.atlas-static-svg rect.atlas-step-hit { stroke: var(--accent); stroke-width: 2; }
@media (prefers-reduced-motion: reduce) {
  svg.atlas-static-svg text, svg.atlas-static-svg rect, svg.atlas-static-svg path,
  svg.atlas-static-svg line, svg.atlas-static-svg circle { transition: none; }
}