/* VRZ Tools — gemeinsame Optik.

   Die Farbtokens kommen aus static/css/site.css; hier stehen nur die Regeln, die
   sich beide Tools teilen. Der Vertrag: JS setzt data-zustand, data-var und
   data-aktiv, CSS entscheidet die Optik. Deshalb blendet [data-zustand] hier und
   nicht per style.display im JavaScript. */

.vrz-tool { display: block; }

/* Überschriften der Tools tragen lange Einzelwörter („VielRespektZentrum",
   „Bevölkerungsstatistik") bei großer Schrift. Auf 360 px schiebt ein einziges
   davon die ganze Seite seitwärts — und das fällt auf Screenshots nicht auf,
   sondern nur beim Messen. */
.vrz-tool h1, .vrz-tool h2, .vrz-tool h3 { overflow-wrap: break-word; }

/* Bildschirme des Tools. Wer keinen Zustand trägt, ist immer sichtbar. */
.vrz-tool [data-nur-zustand] { display: none; }
.vrz-tool[data-zustand="intro"]      [data-nur-zustand~="intro"],
.vrz-tool[data-zustand="frage"]      [data-nur-zustand~="frage"],
.vrz-tool[data-zustand="aufloesung"] [data-nur-zustand~="aufloesung"],
.vrz-tool[data-zustand="ergebnis"]   [data-nur-zustand~="ergebnis"],
.vrz-tool[data-zustand="szene"]      [data-nur-zustand~="szene"],
.vrz-tool[data-zustand="mythen"]     [data-nur-zustand~="mythen"],
.vrz-tool[data-zustand="ende"]       [data-nur-zustand~="ende"] { display: revert; }

/* Herkunfts- und Gruppenfarbe kommt als Custom Property vom Datensatz, nicht als
   Klasse: Zustand (angetippt/ausgewählt) mal acht Gruppenfarben wären sonst 16
   Klassen. */
.vrz-chip {
  --gruppe-farbe: var(--muted-2);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;               /* Touch-Ziel, auch auf 360 px sicher zu treffen */
  padding: 11px 16px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1.5px solid #e2d4c0; background: #fff; color: var(--muted);
}
.vrz-chip[data-aktiv="true"] {
  border-color: var(--gruppe-farbe);
  background: var(--gruppe-farbe);
  color: #fff;
}
/* Farbe ist nie der einzige Träger: der aktive Chip bekommt zusätzlich ein
   Häkchen, damit die Aussage auch ohne Farbwahrnehmung ankommt. */
.vrz-chip[data-aktiv="true"]::before { content: "✓"; font-size: 13px; }
.vrz-chip[data-gewaehlt="true"] { outline: 3px solid rgba(43, 33, 28, 0.16); outline-offset: 1px; }

/* Balken. Die Breite kommt als --wert (0..100) aus dom.setVar. */
.vrz-balken { position: relative; height: 26px; border-radius: 999px; background: #ece0d0; overflow: hidden; }
.vrz-balken-fuellung {
  --wert: 0;
  height: 100%; width: calc(var(--wert) * 1%); border-radius: 999px;
  transition: width .55s cubic-bezier(.2, .7, .3, 1);
}

/* Fußnoten */
.vrz-fussnote { position: relative; margin-left: 2px; }
.vrz-fussnote-knopf {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  font: inherit; font-size: 0.7em; font-weight: 700; line-height: 1;
  color: var(--petrol); text-decoration: underline; text-underline-offset: 2px;
}
.vrz-fussnote-knopf:hover, .vrz-fussnote-knopf:focus-visible { color: var(--terracotta); }
.vrz-quelle-popover {
  position: absolute; top: 1.8em; left: -12px; z-index: 40;
  display: flex; flex-direction: column; gap: 6px;
  width: max(260px, 22em); max-width: 88vw; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(110, 70, 54, 0.18);
  font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--muted);
  text-align: left; text-decoration: none;
}
.vrz-quelle-popover[hidden] { display: none; }
.vrz-quelle-titel { font-size: 14.5px; color: var(--ink); }
.vrz-quelle-meta { color: var(--muted-2); }
.vrz-quelle-hinweis { color: var(--muted); }
.vrz-quelle-link { color: var(--petrol); word-break: break-all; }
.vrz-quelle-offen { color: var(--muted-2); font-style: italic; }

/* Legende — Farbe plus Name, nie Farbe allein. */
.vrz-legende { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; margin: 0; padding: 0; }
.vrz-legende li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.vrz-legende span { --gruppe-farbe: var(--muted-2); width: 12px; height: 12px; border-radius: 4px; background: var(--gruppe-farbe); flex: none; }

/* Sprungziel vor und nach jeder Szene, damit man die Wortliste per Tastatur
   überspringen kann statt durch 25 Chips zu tabben. */
.vrz-sprunglink {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.vrz-sprunglink:focus { position: static; display: inline-block; margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  /* Der Ist-Balken erscheint sofort in voller Länge — und im gleichen Kontrast.
     Abgeschwächt darzustellen wäre eine schlechtere Auskunft, keine ruhigere. */
  .vrz-balken-fuellung { transition: none; }
  .vrz-tool * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}