/* Grafiken im Fließtext: [[grafik:<slug>]] in inhalte/*.md, md_grafik() in app/lib/md.php, Bausteine in app/grafik/,
   erzeugt von werkzeuge/paradox-grafiken.pl (Sonntag, 18.10.2026, Signalanalyse auf der Paradox-Seite).
   Farben: Laubgrün für Pepl, gedecktes Blau zum Vergleich, Stufen der Lagen in einem Grün; geprüft mit dem Palettenprüfer
   (Kontrast, Farbsehschwächen) für Hell auf #f6f4ec und Dunkel auf #111712. Hell und Dunkel folgen den Seitenfarben. */
.gr {
  --gr-tinte: var(--tinte, #1c2119); --gr-grau: var(--grau, #55604e); --gr-linie: var(--linie, #d2d9c4); --gr-grund: var(--papier, #f6f4ec);
  --gr-pepl: #3a6b26; --gr-wash: rgb(58 107 38 / .10); --gr-vgl: #4b6aa8;
  --gr-dip: rgb(85 96 78 / .14); --gr-spur: #e9ece1; --gr-l1: #88b05e; --gr-l2: #567f30; --gr-l3: #284d19;
  --gr-fein: rgb(85 96 78 / .38); --gr-box: #eef1e7; --gr-box-pepl: #e2ecd2;
  margin: 2.8rem 0; padding: 0;
  width: min(calc(50rem - 2 * var(--rand, 16px)), calc(100vw - 2 * var(--rand, 16px)));
  max-width: none; color: var(--gr-tinte);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .gr {
    --gr-pepl: #6f9f3c; --gr-wash: rgb(111 159 60 / .14); --gr-vgl: #6f8fd0;
    --gr-dip: rgb(169 179 160 / .14); --gr-spur: #1b241c; --gr-l1: #456f30; --gr-l2: #70a13e; --gr-l3: #a9d07c;
    --gr-fein: rgb(169 179 160 / .34); --gr-box: #1b241c; --gr-box-pepl: #1d2b1f;
  }
}
:root[data-theme="dunkel"] .gr {
  --gr-pepl: #6f9f3c; --gr-wash: rgb(111 159 60 / .14); --gr-vgl: #6f8fd0;
  --gr-dip: rgb(169 179 160 / .14); --gr-spur: #1b241c; --gr-l1: #456f30; --gr-l2: #70a13e; --gr-l3: #a9d07c;
  --gr-fein: rgb(169 179 160 / .34); --gr-box: #1b241c; --gr-box-pepl: #1d2b1f;
}
.gr__kopf { display: block; margin: 0 0 1.1rem; max-width: 68ch; }
.gr__titel { display: block; font: 600 1.125rem/1.35 var(--text, Arial, sans-serif); color: var(--gr-tinte); margin-bottom: .35rem; }
.gr__text { display: block; font-size: .9375rem; line-height: 1.6; color: var(--gr-grau); }
.gr__hinweis { margin: 0 0 1rem; padding: .7rem .9rem; border-left: 3px solid var(--gr-vgl); background: var(--papier-2, rgb(0 0 0 / .03)); font-size: .875rem; line-height: 1.55; max-width: 68ch; }
.gr__legende { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; font-size: .8125rem; line-height: 1.45; color: var(--gr-grau); }
.gr__legende li { display: flex; gap: .55rem; align-items: flex-start; margin: 0; }
.gr__muster { flex: 0 0 auto; width: 28px; padding-top: .2rem; }
.gr__muster svg { display: block; width: 28px; height: 12px; overflow: visible; }
.gr__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem 1.6rem; }
@media (min-width: 720px) { .gr__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gr__feld { min-width: 0; margin: 0; }
.gr__feld--legende .gr__legende { margin-top: .4rem; }
.gr__feldtitel { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--gr-tinte); }
.gr__nr { display: inline-block; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--gr-grau); }
.gr__feldmeta { margin: .1rem 0 .35rem; font-size: .75rem; line-height: 1.4; color: var(--gr-grau); }
.gr__besetzung { color: var(--gr-tinte); }
.gr__besetzung--offen { color: var(--gr-grau); font-style: italic; }
.gr__fakten { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .8125rem; line-height: 1.5; color: var(--gr-tinte); }
.gr__fakten li { margin-bottom: .35rem; line-height: 1.5; }
.gr__quelle { margin: 1rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--gr-grau); max-width: 80ch; }
.gr__tabelle { margin-top: .8rem; font-size: .8125rem; }
.gr__tabelle summary { cursor: pointer; color: var(--akzent, #3a6b26); font-weight: 500; }
.gr__scroll { overflow-x: auto; margin-top: .6rem; }
.gr__tab { margin-bottom: 1rem; font-size: .8125rem; }
.gr__tab th, .gr__tab td { padding: .4rem .7rem .4rem 0; font-variant-numeric: tabular-nums; }
.gr-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.gr-t { font-size: 11px; fill: var(--gr-grau); }
.gr-t--achse { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.gr-t--klein { font-size: 9.5px; }
.gr-t--stark { fill: var(--gr-tinte); font-weight: 600; }
.gr-t--wert { fill: var(--gr-tinte); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gr-gitter, .gr-leitlinie { stroke: var(--gr-linie); stroke-width: 1; }
.gr-leitlinie { opacity: .6; }
.gr-null { stroke: var(--gr-grau); stroke-width: 1; opacity: .7; }
.gr-strich { stroke: var(--gr-grau); stroke-width: 1; }
.gr-trenner { stroke: var(--gr-linie); stroke-width: 1; }
.gr-schwelle { stroke: var(--gr-tinte); stroke-width: 1; opacity: .55; }
.gr-median { stroke: var(--gr-tinte); stroke-width: 1.5; }
.gr-dip { fill: var(--gr-dip); }
.gr-wash { fill: var(--gr-wash); }
.gr-linie { fill: none; stroke: var(--gr-pepl); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.gr-linie--stark { stroke-width: 2.4; }
.gr-linie--vgl { stroke: var(--gr-vgl); }
.gr-fein { fill: none; stroke: var(--gr-fein); stroke-width: 1; }
.gr-punkt { fill: var(--gr-pepl); stroke: var(--gr-grund); stroke-width: 2; }
.gr-ring { fill: var(--gr-grund); stroke: var(--gr-pepl); stroke-width: 2; }
.gr-quadrat { fill: var(--gr-vgl); stroke: var(--gr-grund); stroke-width: 2; }
.gr-spanne { stroke: var(--gr-vgl); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.gr-spur { fill: var(--gr-spur); }
.gr-l1 { fill: var(--gr-l1); } .gr-l2 { fill: var(--gr-l2); } .gr-l3 { fill: var(--gr-l3); }
.gr-einsatz { fill: var(--gr-tinte); stroke: var(--gr-grund); stroke-width: 1.5; }
.gr-box { fill: var(--gr-box); stroke: var(--gr-linie); stroke-width: 1; }
.gr-box--pepl { fill: var(--gr-box-pepl); stroke: var(--gr-pepl); }
.gr-pfeil { stroke: var(--gr-grau); stroke-width: 1.5; }
.gr-pfeilspitze { fill: var(--gr-grau); }
/* Höranalyse Daniel Pepl (18.10.2026): Einsätze nach Gehör, Bahnen „Wer spielt wann“, Klaviersoli */
.gr-hoer { stroke: var(--gr-tinte); stroke-width: 1; stroke-dasharray: 2 2; opacity: .55; }
.gr-t--hoer, .gr-t--marke { font-size: 9.5px; font-weight: 700; fill: var(--gr-tinte); }
.gr-linie--solo { stroke: var(--gr-grau); stroke-width: 1.8; stroke-dasharray: 5 3; }
.gr-balken { fill: var(--gr-pepl); }
.gr-raute { fill: var(--gr-tinte); stroke: var(--gr-grund); stroke-width: 1.5; }
.gr__zeitliste { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .75rem; line-height: 1.45; color: var(--gr-tinte); }
.gr__zeitliste li { margin: 0 0 .2rem; padding-left: 3em; text-indent: -3em; }
.gr__zeit { display: inline-block; min-width: 3em; text-indent: 0; font-variant-numeric: tabular-nums; color: var(--gr-grau); }
.gr__marke { display: inline-block; min-width: 1.4em; margin-right: .35em; border-radius: .7em; background: var(--gr-tinte); color: var(--gr-grund); font-size: .6875rem; font-weight: 700; line-height: 1.4em; text-align: center; text-indent: 0; }
.gr-dip:hover, .gr-punkt:hover, .gr-quadrat:hover, .gr-einsatz:hover, .gr-ring:hover, .gr-balken:hover, .gr-raute:hover { stroke: var(--gr-tinte); }
@media (forced-colors: active) {
  .gr-linie, .gr-fein, .gr-pfeil, .gr-spanne, .gr-median, .gr-hoer { stroke: CanvasText; }
  .gr-punkt, .gr-quadrat, .gr-einsatz, .gr-l2, .gr-l3, .gr-pfeilspitze, .gr-balken, .gr-raute { fill: CanvasText; }
  .gr__marke { background: CanvasText; color: Canvas; forced-color-adjust: none; }
  .gr-t { fill: CanvasText; }
}
@media print { .gr { width: 100%; break-inside: avoid-page; } .gr__tabelle { display: none; } }