/* IR-Diagramm — Form des Bausteins diagramm.js (Frontend). CI-Quelle seit 15.09.2026: lag zuerst als
   web/start/assets/diagramm.css; Formen entstehen nur in web/css/ (Formen-Wächter). Das JS bleibt beim Frontend.
   Farben AUSSCHLIESSLICH als Token aus web/css/tokens.css (Vorgabe IR-CI, 15.09.2026):
   Reihe 1 = --ir-red · Reihe 2 = --ink · Reihe 3 = --ext · Fläche = --ir-red-wash ·
   Gitter = --rule-2 (hell), Grundlinie = --rule · Achsentext/Quelle = --ink-3 · Karte = --card ·
   Plus = --st-done · Minus = --ink-2 (Vorzeichen steht als Text, Farbe ist Zugabe).
   Kein Hex, kein Fallback in var(). Dunkler Grund: der Container definiert die Token um. */

.diagramm{ margin:0; padding:22px 24px 18px; background:var(--card); border-radius:18px;
           font-family:var(--sans); color:var(--ink); }
.diagramm *{ box-sizing:border-box; }

/* Kopf: Tag → Titel → roter Strich (Erkennungszeichen, kein Rotblock) → Untertitel */
.diagramm-kopf{ margin:0 0 14px; }
.diagramm-tag{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
               text-transform:uppercase; color:var(--ir-red); margin-bottom:6px; }
.diagramm-titel{ margin:0; font-family:var(--display); font-weight:800; font-size:1.35rem;
                 line-height:1.15; letter-spacing:-.01em; color:var(--ink); }
.diagramm-titel::after{ content:""; display:block; width:56px; height:4px; margin-top:10px;
                        background:var(--ir-red); border-radius:2px; }
.diagramm-untertitel{ margin:10px 0 0; font-size:.92rem; color:var(--ink-3); }
.diagramm-achsetitel{ margin:0 0 4px; font-size:.78rem; color:var(--ink-3); }

/* Zeichenfläche — Breite bestimmt das JS in Pixeln */
.diagramm-feldrahmen{ width:100%; }
.diagramm-feld{ display:block; width:100%; height:auto; overflow:visible;
                font-variant-numeric:tabular-nums; }
.diagramm-feld text{ font-family:var(--sans); }
.diagramm-feld .gitter line{ stroke:var(--rule-2); stroke-width:1; }   /* --rule-2 ist die HELLERE Linie (CI) */
.diagramm-feld .grundlinie{ stroke:var(--rule); stroke-width:1.5; }
.diagramm-feld .achse{ font-size:12px; fill:var(--ink-3); }
.diagramm-feld .achse-x{ font-size:12.5px; }

/* Reihen */
.diagramm-feld .reihe .linie{ stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.diagramm-feld .reihe .punkt{ stroke:var(--card); stroke-width:2.5; }
.diagramm-feld .reihe .flaeche{ opacity:.9; }
.diagramm-feld .reihe-1 .linie, .diagramm-feld .reihe-1 .punkt, .diagramm-feld .reihe-1 .balken{ stroke:var(--ir-red); fill:var(--ir-red); }
.diagramm-feld .reihe-1 .linie{ fill:none; }
.diagramm-feld .reihe-1 .flaeche{ fill:var(--ir-red-wash); }
.diagramm-feld .reihe-2 .linie, .diagramm-feld .reihe-2 .punkt, .diagramm-feld .reihe-2 .balken{ stroke:var(--ink); fill:var(--ink); }
.diagramm-feld .reihe-2 .linie{ fill:none; }
.diagramm-feld .reihe-2 .flaeche{ fill:var(--rule); }
.diagramm-feld .reihe-3 .linie, .diagramm-feld .reihe-3 .punkt, .diagramm-feld .reihe-3 .balken{ stroke:var(--ext); fill:var(--ext); }
.diagramm-feld .reihe-3 .linie{ fill:none; }
.diagramm-feld .reihe-3 .flaeche{ fill:var(--rule); }
.diagramm-feld .punkt{ stroke:var(--card); }
.diagramm-feld .balken{ stroke:none; }

/* Marken: Veränderung je Punkt — Vorzeichen als Text, Farbe nur Zugabe */
.diagramm-feld .marke{ font-size:12px; font-weight:600; fill:var(--ink-2); paint-order:stroke;
                       stroke:var(--card); stroke-width:3px; stroke-linejoin:round; }
.diagramm-feld .marke-plus{ fill:var(--st-done); }
.diagramm-feld .marke-minus{ fill:var(--ink-2); }
.diagramm-feld .marke-gleich{ fill:var(--ink-3); }

/* Fuß: Legende links, Quelle rechts */
.diagramm-fuss{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
                justify-content:space-between; margin-top:12px; padding-top:12px;
                border-top:1px solid var(--rule); }
.diagramm-legende{ display:flex; flex-wrap:wrap; gap:6px 20px; margin:0; padding:0; list-style:none;
                   font-size:.85rem; color:var(--ink-2); }
.diagramm-legende li{ display:flex; align-items:center; gap:8px; }
.legende-marke{ width:22px; height:3px; border-radius:2px; position:relative; }
.legende-marke::after{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px;
                       border-radius:50%; transform:translate(-50%,-50%); background:inherit;
                       box-shadow:0 0 0 2px var(--card); }
.diagramm-legende .reihe-1 .legende-marke{ background:var(--ir-red); }
.diagramm-legende .reihe-2 .legende-marke{ background:var(--ink); }
.diagramm-legende .reihe-3 .legende-marke{ background:var(--ext); }
.diagramm-balken .legende-marke{ height:10px; border-radius:2px; }
.diagramm-balken .legende-marke::after{ display:none; }
.diagramm-quelle{ font-size:.78rem; color:var(--ink-3); margin-left:auto; }

/* Datentabelle nur für Screenreader */
.diagramm{ position:relative; }
.diagramm .visuell-versteckt{ position:absolute; left:0; top:0; display:block; width:1px; height:1px;
                              margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%);
                              white-space:nowrap; border:0; }

/* ---------- Zeichnen beim Sichtbarwerden ----------
   Vor dem Sichtbarwerden: Linie unsichtbar (dashoffset = Länge), Punkte, Marken
   und Balken ausgeblendet. .zeichnet startet die Übergänge, .fertig hält das
   Endbild ohne Übergänge (auch nach einem Neuzeichnen bei Größenänderung). */
.diagramm .linie{ stroke-dasharray:var(--laenge); stroke-dashoffset:var(--laenge); }
.diagramm .punkt, .diagramm .marke{ opacity:0; }
.diagramm .balken{ transform:scaleY(0); }
.diagramm .flaeche{ opacity:0; }

.diagramm.zeichnet .linie{ stroke-dashoffset:0; transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1); }
.diagramm.zeichnet .reihe-2 .linie{ transition-delay:.25s; }
.diagramm.zeichnet .reihe-3 .linie{ transition-delay:.5s; }
.diagramm.zeichnet .flaeche{ opacity:.9; transition:opacity 1s ease .9s; }
.diagramm.zeichnet .punkt,
.diagramm.zeichnet .marke{ opacity:1;
  transition:opacity .35s ease;
  transition-delay:calc(.15s + var(--i, 0) * (1.7s / max(1, var(--punkte, 10) - 1))); }
.diagramm.zeichnet .reihe-2 .punkt, .diagramm.zeichnet .reihe-2 .marke{
  transition-delay:calc(.4s + var(--i, 0) * (1.7s / max(1, var(--punkte, 10) - 1))); }
.diagramm.zeichnet .balken{ transform:scaleY(1);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i, 0) * (1.2s / max(1, var(--punkte, 10)))); }

.diagramm.fertig .linie{ stroke-dasharray:none; stroke-dashoffset:0; transition:none; }
.diagramm.fertig .punkt, .diagramm.fertig .marke, .diagramm.fertig .flaeche{ opacity:1; transition:none; }
.diagramm.fertig .flaeche{ opacity:.9; }
.diagramm.fertig .balken{ transform:none; transition:none; }

@media (prefers-reduced-motion: reduce){
  .diagramm .linie{ stroke-dasharray:none; stroke-dashoffset:0; }
  .diagramm .punkt, .diagramm .marke{ opacity:1; }
  .diagramm .flaeche{ opacity:.9; }
  .diagramm .balken{ transform:none; }
  .diagramm.zeichnet *{ transition:none !important; }
}

@media (max-width:560px){
  .diagramm{ padding:16px 14px 14px; border-radius:14px; }
  .diagramm-titel{ font-size:1.15rem; }
  .diagramm-feld .achse{ font-size:11px; }
  .diagramm-quelle{ margin-left:0; }
}

/* Im CI-Dialog (.blatt-dialog) traegt der Dialog Karte und Abstand — das Diagramm liegt nackt darin */
.blatt-dialog-inhalt .diagramm{ padding:0; background:none; border-radius:0; }   /* im Dialog trägt die Karte der Dialog */