/* Volt-Vorlage 1: gemeinsame Grundwerte und Folienvorlage für KPIsVolt und Parteitag live.
   Diese Datei liegt byte-gleich in strategie-portal/public/volt-vorlage.css und
   parteitag-live/src/volt-vorlage.css. Änderungen immer in beiden Repos zugleich.
   Folien sind 16:9 und rechnen in em auf einer Basis von 10px bei 1920px Breite,
   damit Leinwand, Beamer, Handy-Vorschau und PDF dasselbe Bild zeigen.
   Dunkel greift über data-farbe (KPIsVolt), data-theme (Parteitag live) oder das Systemschema. */

:root{
  /* Grundwerte der Marke und der Grammatik */
  --volt-lila:#502379;--volt-auf-lila:#fff;
  --volt-himmel:#82d0f4;--volt-auf-himmel:#11101c;--volt-himmel-tief:#0a5a80;
  --volt-vorschlag:#7a4bae;--volt-vorschlag-text:#502379;
  --volt-fokus:#7844ab;
  --volt-r-gross:16px;--volt-r:12px;--volt-r-klein:8px;
  /* Folie */
  --pr-grund:#ffffff;--pr-violett:#f3ecf9;--pr-ink:#251238;--pr-sub:#5b4d69;--pr-akzent:#502379;--pr-linie:#e3d9ec;--pr-kontext:#5b4d69;--pr-balken:#5b4d69;--pr-feld:#efe8f5;--pr-feld-ink:#6b5f78}
:root[data-farbe=dark],:root[data-theme=dunkel]{
  --volt-himmel-tief:#82d0f4;--volt-vorschlag:#c3a3e8;--volt-vorschlag-text:#dccbf1;--volt-fokus:#c39be6;
  --pr-grund:#1d1029;--pr-violett:#502379;--pr-ink:#ffffff;--pr-sub:#d5c4e5;--pr-akzent:#dcbdf5;--pr-linie:rgba(255,255,255,.16);--pr-kontext:rgba(255,255,255,.5);--pr-balken:rgba(220,189,245,.6);--pr-feld:rgba(255,255,255,.08);--pr-feld-ink:#c9b8d9}
@media(prefers-color-scheme:dark){:root:not([data-farbe=light]):not([data-theme=hell]){
  --volt-himmel-tief:#82d0f4;--volt-vorschlag:#c3a3e8;--volt-vorschlag-text:#dccbf1;--volt-fokus:#c39be6;
  --pr-grund:#1d1029;--pr-violett:#502379;--pr-ink:#ffffff;--pr-sub:#d5c4e5;--pr-akzent:#dcbdf5;--pr-linie:rgba(255,255,255,.16);--pr-kontext:rgba(255,255,255,.5);--pr-balken:rgba(220,189,245,.6);--pr-feld:rgba(255,255,255,.08);--pr-feld-ink:#c9b8d9}}

/* Folienrahmen */
.pr-rahmen{container-type:inline-size}
.pr-folie{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;font-size:calc(10cqw / 19.2);background:var(--pr-grund);color:var(--pr-ink);display:grid;grid-template-rows:auto 1fr auto;padding:5.6em 11.2em 4.4em;font-family:Ubuntu,sans-serif;line-height:1.5;font-variant-numeric:tabular-nums}
.pr-folie.pr-violett{background:var(--pr-violett)}
:where(.pr-folie) :where(h2,p,ol,ul,li,figure){margin:0;padding:0}
:where(.pr-folie) :where(ol,ul){list-style:none}

/* Kopf und Fuß jeder Folie */
.pr-kopf{display:flex;align-items:center;gap:2.4em;font-size:2em;color:var(--pr-sub)}
.pr-marke{display:inline-flex;align-items:center;height:1.5em;font-weight:700;font-size:1.3em;color:var(--pr-ink);letter-spacing:-.02em}
.pr-marke svg{display:block;height:.9em;width:auto;fill:currentColor}
.pr-demo{border:1px solid currentColor;border-radius:99px;padding:.1em .7em;font-size:.8em}
.pr-nr{margin-left:auto;font-variant-numeric:tabular-nums}
.pr-fuss{font-size:1.9em;line-height:1.45;color:var(--pr-sub);max-width:120ch;padding-top:1.2em;border-top:1px solid var(--pr-linie)}
.pr-fuss a{color:inherit}
.pr-inhalt{display:flex;flex-direction:column;justify-content:center;gap:4.8em;min-height:0}
.pr-inhalt>h2{font-size:7.2em;font-weight:500;line-height:1.08;letter-spacing:-.025em;max-width:22ch;text-wrap:balance}

/* Titel, Held und Fragen */
.pr-titelfolie .pr-inhalt>h2{font-size:11.2em;max-width:16ch;letter-spacing:-.035em}
.pr-unter{font-size:4em;line-height:1.3;color:var(--pr-sub);max-width:34ch}
.pr-meta{font-size:2.6em;color:var(--pr-akzent)}
.pr-titelfolie .pr-inhalt,.pr-fragenfolie .pr-inhalt{gap:3.6em}
.pr-fragenfolie .pr-inhalt>h2{font-size:18em;letter-spacing:-.045em}
.pr-heldenfolie .pr-inhalt{gap:3.2em}
.pr-heldenfolie .pr-inhalt>h2{font-size:5.6em;color:var(--pr-sub);font-weight:400;max-width:40ch}
.pr-held{display:flex;flex-direction:column;gap:1.2em}
.pr-heldenzahl{font-size:24em;font-weight:500;line-height:.92;letter-spacing:-.05em;color:var(--pr-ink)}
.pr-heldentext{font-size:4em;line-height:1.3;max-width:36ch}
.pr-folgerung{font-size:3.6em;line-height:1.35;color:var(--pr-akzent);max-width:40ch}

/* Kennzeichen der Grammatik: Beschluss gefüllt himmelblau, Vorschlag gestrichelt violett */
.pr-btag{display:inline-block;background:var(--volt-himmel);color:var(--volt-auf-himmel);border-radius:99px;padding:.1em .8em;margin-right:.7em;font-weight:500;white-space:nowrap}

/* Balkenvergleich */
.pr-vergleich{display:grid;gap:1.4em;max-width:130em}
.pr-vergleich>div{display:grid;grid-template-columns:3em minmax(0,1fr) 6.5em;align-items:center;gap:2.4em;font-size:3.2em}
.pr-vergleich span{color:var(--pr-sub);font-size:1em}
.pr-vergleich i{display:block;height:.9em;width:var(--anteil);min-width:.3em;background:var(--pr-balken);border-radius:0 .2em .2em 0}
.pr-vergleich i.pr-neu{background:var(--pr-akzent)}
.pr-vergleich strong{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
/* Anteile von 100: lange Beschriftung, Spur zeigt das Ganze */
.pr-vergleich.pr-anteile>div{grid-template-columns:minmax(0,21em) minmax(0,1fr) 3.4em}
.pr-vergleich.pr-anteile span{color:var(--pr-ink)}
.pr-vergleich.pr-anteile span b{display:inline-block;min-width:1.4em;font-weight:500;color:var(--pr-akzent)}
.pr-spur{display:block;height:.9em;background:var(--pr-feld);border-radius:.2em}
.pr-spur i{height:100%;border-radius:.2em}

/* Zahlenblöcke */
.pr-zwei{display:grid;grid-template-columns:1fr 1fr;gap:8em}
.pr-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6em}
.pr-block{border-top:.4em solid var(--pr-akzent);padding-top:3em}
.pr-blockzahl{font-size:16em;font-weight:500;line-height:.95;letter-spacing:-.045em}
.pr-drei .pr-blockzahl{font-size:13em}
.pr-blocktext{font-size:3.8em;margin-top:.7em}
.pr-drei .pr-blocktext{line-height:1.25}
.pr-drei .pr-block>.pr-blocktext:first-child{margin-top:0;font-weight:500}
.pr-blockvergleich{font-size:3em;color:var(--pr-sub);margin-top:.6em}

/* Diagramm */
.pr-diagramm-zeile{display:grid;grid-template-columns:minmax(0,1fr) 38em;gap:6em;align-items:center}
.pr-diagramm .vs-legende{display:flex;gap:1em 2.6em;font-size:2.6em;color:var(--pr-sub);margin-bottom:.6em}
.pr-diagramm .vs-legende span{display:flex;align-items:center;gap:.5em}
.pr-diagramm .vs-legende i{display:inline-block;width:1.4em;height:.2em;border-radius:.1em}
.pr-diagramm .vs-legende-hervor{background:var(--pr-akzent)}
.pr-diagramm .vs-legende-kontext{background:var(--pr-kontext)}
.pr-diagramm svg{width:100%;height:auto;display:block;overflow:visible}
.pr-diagramm svg text{font-size:24px;fill:var(--pr-sub);font-family:Ubuntu,sans-serif}
.pr-diagramm .vs-raster{stroke:var(--pr-linie);stroke-width:1.5}
.pr-diagramm .vs-reihe{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pr-diagramm .vs-reihe-kontext .vs-reihe{stroke:var(--pr-kontext);stroke-width:3}
.pr-diagramm .vs-reihe-hervor .vs-reihe{stroke:var(--pr-akzent);stroke-width:6}
.pr-diagramm .vs-endpunkt{fill:var(--pr-akzent);stroke:var(--pr-grund);stroke-width:4;r:9}
.pr-diagramm .vs-endwert{display:none}
.pr-diagramm .vs-treffer{fill:transparent}
.pr-seitenzahl .pr-blockzahl{font-size:13em}

@media(forced-colors:active){.pr-vergleich i,.pr-spur i{background:CanvasText}.pr-block{border-top-color:CanvasText}}