/* ═══════════════════════════════════════════════════════════════════════════
   Erklärgrafiken, die beim Scrollen einlaufen (Konzept: docs/ANIMATIONSKONZEPT.md)

   Regeln:
   - Der Endzustand ist der Normalzustand. Versteckt wird nur, wenn JavaScript läuft
     (html.grafik-js, gesetzt von grafik.js) UND keine reduzierte Bewegung gewünscht ist.
   - Bewegt werden nur transform, opacity und stroke-dashoffset.
   - Farben nur aus den Tokens von app.css; Kupfer (--accent) an wenigen Stellen.
   - Keine Inline-Stile: Verzögerungen kommen über data-d (0–24), Stationen über --b.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rahmen und gemeinsame Bausteine ────────────────────────────────────── */
.gr { container-type: inline-size; --gr-bg: var(--surface); --gr-in: var(--bg); margin: 0; padding: var(--s-5); border: 1px solid var(--line); background: var(--gr-bg); }
.section-tint .gr { --gr-bg: var(--bg); --gr-in: var(--surface); }
.gr + .gr { margin-top: var(--s-5); }
.gr-note { margin-top: var(--s-4); max-width: 72ch; font-size: var(--t-13); line-height: 1.5; color: var(--text-3); }
.gr-nr { font: 500 var(--t-12)/1 var(--f-mono); letter-spacing: .06em; color: var(--text-3); }
.gr-titel { font: 700 var(--t-18)/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--text); }
.gr p + p { margin-top: 0; }
.gr svg { overflow: visible; }

/* Zeichenstile für SVG */
.gr-linie { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.gr-strich { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: butt; }
.gr-strich-dick { stroke-width: 4; stroke: var(--text); }
.gr-spur { fill: none; stroke: var(--ring-track); stroke-width: 4; }
.gr-knoten { fill: var(--gr-bg); stroke: var(--text-2); stroke-width: 1.5; }
.gr-knoten-wurzel { fill: var(--text); stroke: var(--text); }
.gr-punkt { fill: var(--text); }
.gr-akzent { fill: var(--accent); stroke: none; }
.gr-gw-bg { fill: var(--ring-track); }
.gr-gw-fg { fill: var(--text); }
.gr-gw-gesamt .gr-gw-fg { fill: var(--accent); }

/* ── Bewegung ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .g-pop, .g-grow { transform-box: fill-box; }
  .g-pop { transform-origin: 50% 50%; }
  .g-grow { transform-origin: 0 50%; }
  .grafik-js .g-draw { stroke-dasharray: 100; }

  /* Startzustand: nur solange das Element noch nicht im Bild war */
  .grafik-js [data-grafik]:not(.is-sichtbar) .g-fade { opacity: 0; }
  .grafik-js [data-grafik]:not(.is-sichtbar) .g-rise { opacity: 0; transform: translateY(10px); }
  .grafik-js [data-grafik]:not(.is-sichtbar) .g-pop { opacity: 0; transform: scale(.4); }
  .grafik-js [data-grafik]:not(.is-sichtbar) .g-grow { transform: scaleX(0); }
  .grafik-js [data-grafik]:not(.is-sichtbar) .g-draw { stroke-dashoffset: 100; }

  /* Übergang nur ins Sichtbare (kein Ausblenden beim Setzen von grafik-js) */
  [data-grafik].is-sichtbar { --g-ease: cubic-bezier(.16, 1, .3, 1); }
  [data-grafik].is-sichtbar .g-fade { transition: opacity .45s linear calc((var(--b, 0) * 5 + var(--d, 0)) * 80ms); }
  [data-grafik].is-sichtbar .g-rise { transition: opacity .45s linear, transform .55s var(--g-ease); transition-delay: calc((var(--b, 0) * 5 + var(--d, 0)) * 80ms); }
  [data-grafik].is-sichtbar .g-pop { transition: opacity .3s linear, transform .45s var(--g-ease); transition-delay: calc((var(--b, 0) * 5 + var(--d, 0)) * 80ms); }
  [data-grafik].is-sichtbar .g-grow { transition: transform .7s var(--g-ease); transition-delay: calc((var(--b, 0) * 5 + var(--d, 0)) * 80ms); }
  [data-grafik].is-sichtbar .g-draw { transition: stroke-dashoffset .6s ease-out; transition-delay: calc((var(--b, 0) * 5 + var(--d, 0)) * 80ms); }
}

/* Verzögerungsstufen (data-d) */
[data-d="0"] { --d: 0; } [data-d="1"] { --d: 1; } [data-d="2"] { --d: 2; } [data-d="3"] { --d: 3; } [data-d="4"] { --d: 4; }
[data-d="5"] { --d: 5; } [data-d="6"] { --d: 6; } [data-d="7"] { --d: 7; } [data-d="8"] { --d: 8; }
[data-d="9"] { --d: 9; } [data-d="10"] { --d: 10; } [data-d="11"] { --d: 11; } [data-d="12"] { --d: 12; }
[data-d="13"] { --d: 13; } [data-d="14"] { --d: 14; } [data-d="15"] { --d: 15; } [data-d="16"] { --d: 16; }
[data-d="17"] { --d: 17; } [data-d="18"] { --d: 18; } [data-d="19"] { --d: 19; } [data-d="20"] { --d: 20; }
[data-d="21"] { --d: 21; } [data-d="22"] { --d: 22; } [data-d="23"] { --d: 23; } [data-d="24"] { --d: 24; }

/* Druck: immer der fertige Zustand */
@media print {
  .g-fade, .g-rise, .g-pop, .g-grow, .g-draw { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .gr { border-color: #999; }
}

/* ═══ Pfeile (Stufen, Spuren) ═══════════════════════════════════════════════ */
.gr-pfeil { flex: 0 0 32px; display: grid; place-items: center; align-self: center; }
.gr-pfeil svg { width: 32px; height: 16px; }
.gr-pfeil path { fill: none; stroke: var(--text-3); stroke-width: 1.5; }

/* ═══ Prüfgrafik: Stufenfolge ═══════════════════════════════════════════════ */
.gr-lauf { display: flex; flex-direction: column; align-items: stretch; }
.gr-start { display: flex; align-items: center; padding: var(--s-3) var(--s-4); background: var(--text); color: var(--bg); }
.gr-start-text { font: 600 var(--t-14)/1.3 var(--f-display); }
.gr-stufe { display: grid; align-content: start; gap: 6px; padding: var(--s-4); border: 1px solid var(--line-2); background: var(--gr-in); min-width: 0; }
.gr-stufe .gr-nr { margin-bottom: 2px; }
.gr-frage { font-size: var(--t-14); line-height: 1.4; color: var(--text-2); }
.gr-punkte { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--line); }
.gr-punkte li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); line-height: 1.35; }
.gr-punkte li:last-child { border-bottom: 0; padding-bottom: 0; }
.gr-ziele { display: grid; gap: var(--s-3); align-content: start; }
.gr-ziel { display: grid; gap: 4px; align-content: start; padding: var(--s-4); border: 1px solid var(--line-2); border-top: 3px solid var(--accent); background: var(--gr-in); }
.gr-ziel-text { font: 700 var(--t-16)/1.25 var(--f-display); }
.gr-ziel-hinweis { font-size: var(--t-13); line-height: 1.4; color: var(--text-2); }
.gr-ziel-offen { border: 1px dashed var(--line-2); border-top: 1px dashed var(--line-2); background: transparent; }
.gr-ziel-offen .gr-ziel-text { color: var(--text-2); }

/* Handy und Tablet: senkrecht, Pfeile zeigen nach unten */
.gr-lauf > .gr-pfeil { height: 36px; flex-basis: 36px; }
.gr-lauf > .gr-pfeil svg { transform: rotate(90deg); }
@container (min-width: 520px) and (max-width: 959px) {
  .gr-punkte { columns: 2; column-gap: var(--s-5); }
  .gr-punkte li { break-inside: avoid; }
}
/* Breit: von links nach rechts */
@container (min-width: 960px) {
  .gr-lauf { flex-direction: row; }
  .gr-lauf > .gr-pfeil { height: auto; flex: 0 0 32px; }
  .gr-lauf > .gr-pfeil svg { transform: none; }
  .gr-lauf > .gr-start { flex: 0 0 124px; align-self: center; padding-block: var(--s-5); }
  .gr-lauf > .gr-stufe { flex: 1 1 0; }
  .gr-lauf > .gr-ziele { flex: 0 0 200px; align-content: center; }
}

/* ═══ Prüfgrafik: zwei Spuren (Barrierefreiheit) ════════════════════════════ */
.gr-spuren .gr-start { justify-content: center; width: max-content; min-width: 200px; max-width: 100%; margin-inline: auto; }
.gr-spuren-liste { display: grid; gap: var(--s-4); }
.gr-spur { display: flex; flex-direction: column; align-items: stretch; }
.gr-spur .gr-pfeil { height: 36px; flex-basis: 36px; }
.gr-spur .gr-pfeil svg { transform: rotate(90deg); }
.gr-spur-hand .gr-stufe { border-style: dashed; }
@container (min-width: 700px) {
  .gr-spuren-liste { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .gr-spur .gr-stufe { flex: 1 1 auto; }
}
@container (max-width: 699px) {
  .gr-spur + .gr-spur { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
}

/* ═══ Ladezeit: Zonen und Messung ═══════════════════════════════════════════ */
.gr-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--s-5); margin: 0 0 var(--s-3); padding: 0; font-size: var(--t-13); color: var(--text-2); }
.gr-legende li { display: inline-flex; align-items: center; gap: 8px; }
.gr-legende li::before { content: ""; width: 12px; height: 12px; background: var(--text-3); }
.gr-leg-gut::before { background: var(--ok) !important; }
.gr-leg-mittel::before { background: var(--warn) !important; }
.gr-leg-schlecht::before { background: var(--crit) !important; }
.gr-zeilen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.gr-zeile { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.gr-zname { font-size: var(--t-14); font-weight: 600; }
.gr-zwerte { font-size: var(--t-13); color: var(--text-2); }
.gr-zbalken { width: 100%; height: 12px; overflow: hidden; }
.gr-z-gut { fill: var(--ok); } .gr-z-mittel { fill: var(--warn); } .gr-z-schlecht { fill: var(--crit); }
.gr-z-gut, .gr-z-mittel, .gr-z-schlecht { stroke: var(--gr-bg); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.gr-m-stark { fill: var(--text); } .gr-m-schwach { fill: var(--text-3); }
.gr-messung .gr-titel { margin-bottom: var(--s-3); font-size: var(--t-16); }
@container (min-width: 520px) {
  .gr-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px var(--s-4); }
  .gr-zeile .gr-zbalken { grid-column: 1 / -1; grid-row: 2; }
  .gr-zwerte { text-align: right; }
}
@container (min-width: 900px) {
  .gr-zeile { grid-template-columns: 250px minmax(0, 1fr) 250px; align-items: center; gap: var(--s-5); }
  .gr-zeile .gr-zbalken { grid-column: auto; grid-row: auto; }
  .gr-zwerte { white-space: nowrap; }
}

/* ═══ Gesamtwert: Gewichte als Staffel ══════════════════════════════════════ */
.gr-gw { width: 100%; height: 8px; overflow: hidden; }
.gr-gw-liste { list-style: none; margin: 0; padding: 0; }
.gr-gw-liste li { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s-4); align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.gr-gw-liste li .gr-gw { grid-column: 1 / -1; }
.gr-gw-name { font-size: var(--t-14); font-weight: 600; }
.gr-gw-zahl { font-size: var(--t-14); color: var(--text-2); }
.gr-gw-summe .gr-gw-name, .gr-gw-summe .gr-gw-zahl { color: var(--text); }
.gr-gw-liste li:last-child { border-bottom: 1px solid var(--text); border-top-color: var(--text); }
@container (min-width: 560px) {
  .gr-gw-liste li { grid-template-columns: 240px 56px minmax(0, 1fr); align-items: center; }
  .gr-gw-liste li .gr-gw { grid-column: auto; }
  .gr-gw-zahl { text-align: right; }
}

/* Startseite: die Liste der Prüfbereiche trägt die Balken selbst */
.gr-areas-kopf { display: none; }
.gr-areas .areas-weight { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-3); align-items: center; text-align: left; }
.gr-areas .areas-weight .gr-gw { height: 8px; }
.gr-areas .areas-weight-leer { display: block; }
.gr-areas-summe { display: grid; gap: 4px var(--s-3); grid-template-columns: 40px 1fr; align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--text); }
.gr-areas-summe .areas-weight { grid-column: 2; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--t-13); color: var(--text); }
.gr-areas-summe p { grid-column: 2; font-weight: 600; font-size: var(--t-14); }
@media (min-width: 900px) {
  .gr-areas-kopf { display: grid; grid-template-columns: 48px 280px 1fr 300px; gap: var(--s-3); padding: 0 0 8px; }
  .gr-areas-kopf span:last-child { grid-column: 4; padding-left: calc(52px + var(--s-3)); }
  .gr-areas li { grid-template-columns: 48px 280px 1fr 300px; }
  .gr-areas .areas-weight { grid-column: 4; text-align: left; }
  .gr-areas-summe { grid-template-columns: 48px 280px 1fr 300px; gap: var(--s-3); }
  .gr-areas-summe p { grid-column: 2 / 4; }
  .gr-areas-summe .areas-weight { grid-column: 4; }
}

/* ═══ Ablauf: fünf Stationen ═══════════════════════════════════════════════ */
.gr-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: none; }
.gr-schritt { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 2px; align-content: start; align-items: start; }
.gr-schritt:nth-child(2) { --b: 1; } .gr-schritt:nth-child(3) { --b: 2; } .gr-schritt:nth-child(4) { --b: 3; } .gr-schritt:nth-child(5) { --b: 4; }
.gr-bild { grid-row: 1 / span 4; grid-column: 1; width: 128px; height: auto; aspect-ratio: 160 / 100; background: var(--gr-in); border: 1px solid var(--line); }
.gr-schritt > :not(.gr-bild) { grid-column: 2; }
.gr-schritt h3 { font-size: var(--t-18); }
.gr-schritt p:not(.gr-nr) { font-size: var(--t-14); line-height: 1.45; color: var(--text-2); }
.gr-schritt .gr-nr { color: var(--text-3); margin-top: 2px; }
/* Verbindung nach unten (Handy) bzw. nach rechts (breit), mit kleiner Spitze */
.gr-schritt:not(:last-child)::after { content: ""; position: absolute; left: 64px; top: 82px; bottom: calc(var(--s-6) * -1 + 1px); width: 1px; background: var(--line-2); transform-origin: 50% 0; }
.gr-schritt:not(:first-child)::before { content: ""; position: absolute; left: 61px; top: -5px; width: 7px; height: 7px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); transform: rotate(135deg); }
@media (prefers-reduced-motion: no-preference) {
  .grafik-js .gr:not(.is-sichtbar) .gr-schritt::after { transform: scaleY(0); }
  .grafik-js .gr:not(.is-sichtbar) .gr-schritt::before { opacity: 0; }
  .gr.is-sichtbar .gr-schritt::after { transition: transform .5s ease-out; transition-delay: calc((var(--b, 0) * 5 + 5) * 80ms); }
  .gr.is-sichtbar .gr-schritt::before { transition: opacity .3s linear; transition-delay: calc((var(--b, 0) * 5 + 3) * 80ms); }
}
@container (min-width: 860px) {
  .gr-schritte { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
  .gr-schritt { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .gr-schritt > :not(.gr-bild) { grid-column: 1; }
  .gr-bild { grid-row: 1; grid-column: 1; width: 100%; margin: 0; }
  .gr-schritt .gr-nr { margin: 12px 0 4px; }
  .gr-schritt h3 { margin-bottom: 4px; }
  .gr-schritt:not(:last-child)::after { grid-row: 1 / 2; grid-column: 1 / 2; left: 100%; right: auto; top: 50%; bottom: auto; width: var(--s-5); height: 1px; transform-origin: 0 50%; }
  .gr-schritt:not(:first-child)::before { grid-row: 1 / 2; grid-column: 1 / 2; left: -5px; top: calc(50% - 4px); transform: rotate(45deg); }
  @media (prefers-reduced-motion: no-preference) {
    .grafik-js .gr:not(.is-sichtbar) .gr-schritt::after { transform: scaleX(0); }
  }
}

/* ═══ Referenzen: Messwerte als Balken ══════════════════════════════════════ */
.ref-wert { display: grid; gap: 6px; }
.ref-wert-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); font-size: var(--t-14); }
.ref-wert-kopf .num { font-weight: 600; }
.ref-wert .bar-svg { height: 8px; }
.ref-wert-datum { font-size: var(--t-13); color: var(--text-3); }
.gr-wert-leer .bg { fill: none; stroke: var(--line-2); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gr-scores li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: baseline; }
.gr-scores .bar-svg { grid-column: 1 / -1; height: 6px; }
.gr-scores-leer .num { color: var(--text-3); font-weight: 400; }

/* ═══ Hinweise ══════════════════════════════════════════════════════════════ */
.gr-agentur { margin-top: var(--s-6); max-width: 72ch; font-size: var(--t-14); color: var(--text-2); }
.person-links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.prose .gr { margin: var(--s-4) 0 var(--s-5); }
.prose .gr + .gr { margin-top: var(--s-5); }
.check-group + .gr, .gr + .check-group { margin-top: var(--s-7); }
.section-head + .gr { margin-bottom: var(--s-7); }

/* Listen in Fließtext-Bereichen (app.css .prose) nicht einrücken */
.prose .gr-punkte, .prose .gr-legende, .prose .gr-zeilen, .prose .gr-gw-liste { padding-left: 0; }
.prose .gr-punkte li + li, .prose .gr-zeilen li + li, .prose .gr-gw-liste li + li { margin-top: 0; }
.prose .gr-note, .prose .gr p { margin-top: 0; }
.prose .gr .gr-note { margin-top: var(--s-4); }