/* Ergänzt styles.css um die Bausteine des Fragebogens. Nutzt dieselben CSS-Variablen. */

.fortschritt-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.fortschritt {
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
}

.notice--fehler {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-surface);
}

.notice--hinweis {
  border-color: var(--color-accent-text);
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1rem;
}

legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

/* ----- Thesen: eine Karte pro These, groß und klickbar statt Formularliste. ----- */
.these-fortschritt {
  margin-bottom: 1.5rem;
}

/* Thesen-Uebersicht: ein Punkt je These, zugleich Navigation. Die Spaltenzahl ist so
   gewaehlt, dass 24 Punkte immer volle Reihen ergeben (3 x 8, 2 x 12, 1 x 24) und jeder
   Punkt auf jeder Breite mindestens 24 px misst - die Untergrenze fuer Tipp-Ziele
   (WCAG 2.5.8). Bei 320 px Breite reichen dafuer nur 8 je Reihe, ab 368 px passen 12,
   eine einzelne Reihe erst ab 720 px. justify-content: center laesst die Reihe bei
   erreichter Maximalgroesse mittig stehen statt die Punkte zu strecken. */
.thesen-uebersicht {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 32px));
  justify-content: center;
  gap: 4px;
  margin-top: 0.75rem;
}

@media (min-width: 368px) {
  .thesen-uebersicht {
    grid-template-columns: repeat(12, minmax(0, 32px));
  }
}

@media (min-width: 720px) {
  .thesen-uebersicht {
    grid-template-columns: repeat(24, minmax(0, 32px));
  }
}

.thesen-punkt {
  aspect-ratio: 1;
  width: 100%;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1;
}

.thesen-punkt svg {
  width: 60%;
  height: 60%;
}

.thesen-punkt:not(:disabled):hover {
  border-color: var(--color-accent-text);
}

/* Noch nicht erreichte Thesen: blass und nicht anklickbar, aber sichtbar - der Fortschritt
   soll ablesbar bleiben. */
.thesen-punkt:disabled {
  cursor: default;
  border-color: var(--color-border);
  background: transparent;
  opacity: 0.55;
}

.thesen-punkt:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Die aktuelle These traegt einen Ring in der Akzentfarbe. box-shadow statt outline, damit
   der Fokusring (outline) unabhaengig davon sichtbar bleibt. */
.thesen-punkt[aria-current="step"] {
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-text);
}

.thesen-punkt[data-zustand="zu"] {
  background: var(--color-erfolg);
  border-color: var(--color-erfolg);
}

.thesen-punkt[data-zustand="nein"] {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

/* Gelb braucht ein dunkles Symbol - ein weisses erreicht darauf keinen Kontrast. */
.thesen-punkt[data-zustand="neutral"] {
  background: var(--color-punkt-neutral);
  border-color: var(--color-punkt-neutral);
  color: #2a2300;
}

.thesen-punkt[data-zustand="kannnicht"] {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
}

/* Die Karten-Optik (Rahmen, Radius, Abstand) liegt auf diesem äusseren <div>, nicht auf dem
   <fieldset>: Ein <fieldset> mit <legend> spart die Rahmenlinie dort aus, wo die <legend>
   sitzt ("Notch"). Bei einem langen, mehrzeiligen Legend-Inhalt (Leitlinie-Tag + Thesentext)
   schneidet die Linie dadurch mitten durch den Text, statt oben abzuschliessen. Das
   <fieldset> bleibt für Gruppierung und Barrierefreiheit erhalten, ist aber optisch
   unsichtbar. Dieselbe Ursache wie bei der Trennlinie der Kurzangaben-Abschnitte. */
.these-karte {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 1.5rem;
}

.these-karte__feld {
  border: none;
  padding: 0;
  margin: 0;
}

.these-karte legend {
  display: block;
  padding: 0;
  margin-bottom: 1rem;
}

.these-karte .leitlinie-tag {
  display: inline-flex;
  margin-bottom: 0.75rem;
}

.these-text {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  /* Ohne diese Regel sprengt ein einzelnes langes Wort (etwa "Mobilitätseinschränkungen",
     25 Zeichen, laengstes Wort ueber alle 24 Thesen) auf sehr schmalen Bildschirmen die
     Karte nach rechts, weil der Browser sonst nur an Leerzeichen umbricht.
     hyphens statt des haerteren break-word/break-all: <html lang="de"> ist gesetzt, damit
     trennt der Browser an deutschen Silbengrenzen statt mitten im Wort. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.antwort-karten {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

/* Jede Antwort ist eine Schaltflaeche, keine Auswahl: Das Anklicken loest den Sprung zur
   naechsten These aus. Bei einem Auswahlfeld (radio) waehlt die Tastatur schon per
   Pfeiltaste, ein Sprung dabei waere eine unerwartete Kontextaenderung (WCAG 3.2.2); bei
   einer Schaltflaeche ist der Sprung nach Enter das erwartete Verhalten. Die gewaehlte
   Antwort ist ueber aria-pressed markiert. */
.antwort-karte {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

/* Kreis links wie bei einem Auswahlfeld: haelt die gewohnte Optik, obwohl es technisch
   eine Schaltflaeche ist. Gefuellt, sobald die Antwort gewaehlt ist. */
.antwort-karte__marke {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
}

.antwort-karte:hover {
  border-color: var(--color-accent-text);
}

.antwort-karte[aria-pressed="true"] {
  border-color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg));
}

.antwort-karte[aria-pressed="true"] .antwort-karte__marke {
  border-color: var(--color-accent-text);
  background: radial-gradient(circle, var(--color-accent-text) 45%, transparent 50%);
}

.antwort-karte:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Waehrend der kurzen Pause vor dem Sprung gesperrt, ohne die Optik zu veraendern. */
.antwort-karte:disabled {
  cursor: default;
}

.absenden-hinweis {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 1.25rem 0 0.75rem;
}

.these-hinweis {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 1rem 0 0;
}

.these-navigation {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

#kurzangaben-formular {
  margin-top: 2.5rem;
}

.kurzangabe-gruppe {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}

/* Trennlinie als border-bottom statt border-top: Bei border-top spart der Browser die Linie
   um das <legend>-Element herum aus ("Notch"), sodass sie neben statt zwischen den
   Abschnitten erscheint.
   Gilt fuer alle Gruppen, auch die letzte ("Überwiegend genutzte Verkehrsmittel"): Darunter
   folgen Absende-Hinweis und Zurück/Absenden-Buttons, die sich ohne Linie nicht vom letzten
   Formularabschnitt abgrenzen. */
.kurzangabe-gruppe {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.75rem;
  margin-bottom: 2.75rem;
}

.kurzangabe-gruppe legend {
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.kurzangabe-gruppe__hinweis {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.auswahl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Wohnort-Umschalter (Stadtteil-Auswahl <-> Landkreis/Umland/außerhalb): die Pillen und die
   Dropdown-Liste sind je nach Bildschirmbreite unterschiedlich hoch (Pillen brechen auf
   schmalen Handys zweizeilig um), ein harter hidden-Sprung wirkte deshalb wie ein kleiner
   Layout-Bug. Grid-Trick statt max-height: grid-template-rows von 1fr auf 0fr ist im
   Gegensatz zu height:auto sauber animierbar, das innere overflow:hidden blendet den
   Inhalt waehrend der Animation ab statt ihn abzuschneiden. */
.wohnort-feld {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
  overflow: hidden;
}

.wohnort-feld[inert] {
  grid-template-rows: 0fr;
}

.wohnort-feld__inhalt {
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wohnort-feld {
    transition: none;
  }
}

/* Select und Pillen bekommen einen nach innen zeigenden Fokusring (box-shadow: inset) statt
   des sonst im Tool ueblichen aeusseren (outline): Das overflow:hidden weiter oben schneidet
   einen aeusseren Ring ab, je nach Animationszustand und Bildschirmbreite unterschiedlich
   stark; Polster und Gegen-Rand beheben das nicht zuverlaessig. Ein innerer Ring bleibt
   innerhalb der eigenen Boxgrenze und kann nicht abgeschnitten werden. */
.wohnort-feld #wohnort-stadtteil:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-focus);
}

.wohnort-feld .auswahl-chip:has(input:focus-visible) {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-focus);
}

/* Natives <select> statt Chips: bei 23 Stadtteilen wäre eine Chip-Wand unübersichtlich.
   Ein <select> nutzt auf dem Handy automatisch den nativen Auswahl-Picker des
   Betriebssystems - ohne zusätzlichen Code für responsives Verhalten. */
#wohnort-stadtteil {
  display: block;
  width: 100%;
  max-width: 24rem;
  min-height: 44px;
  padding: 0.6rem 2.25rem 0.6rem 0.8rem;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  /* Eigener Pfeil statt Browser-Standard - das Dropdown selbst (aufgeklappte Liste) bleibt
     nativ, siehe Kommentar oben. */
  appearance: none;
  /* Zusaetzlich zur unpraefixierten appearance: none noetig, damit Safari seinen eigenen,
     dicken nativen Fokus-Ring unterdrueckt: Der laeuft dort nicht ueber die
     outline-Eigenschaft, sondern haengt an der nativen Erscheinung des <select>. Ohne dieses
     Praefix bleibt er beim Tab-Fokus sichtbar, auch mit outline:none in der
     :focus-visible-Regel weiter unten. */
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.1rem;
}

#wohnort-stadtteil:hover {
  border-color: var(--color-accent-text);
}

/* Der Pfeil ist als eingebettetes SVG fest eingefärbt (kann nicht per CSS-Variable
   reagieren) - deshalb hier fürs Dunkelmodus eine hellere Variante, sonst kaum sichtbar. */
:root[data-theme="dark"] #wohnort-stadtteil {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a0b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) #wohnort-stadtteil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a0b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}

.auswahl-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  border-radius: 999px;
  /* Rahmenbreite immer 2.5px, auch unmarkiert: Ein Dickerwerden beim Markieren würde die
     Chip-Größe und damit die Position der Nachbar-Chips verschieben. Beim Markieren ändert
     sich nur die Rahmenfarbe. */
  border: 2.5px solid var(--color-border);
  background: var(--color-bg);
  font-weight: 600;
  cursor: pointer;
}

/* Checkbox/Radio bleiben für Tastatur/Screenreader vollwertig bedienbar, nur visuell
   ausgeblendet - Auswahlzustand zeigt sich über Rahmen/Hintergrund UND Schriftstärke
   (nicht ausschließlich über Farbe). */
.auswahl-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auswahl-chip:hover {
  border-color: var(--color-accent-text);
}

.auswahl-chip:has(input:checked) {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  border-color: var(--color-accent-text);
  /* Kein font-weight-Wechsel: Unterschiedliche Schriftstärken haben unterschiedliche
     Zeichenbreiten und lassen die Chips beim Markieren verrutschen; ein Ausgleich über einen
     CSS-Grid-Platzhalter erzeugt stattdessen zu viel Leerraum über dem Text. text-stroke
     verdickt die Buchstaben rein optisch beim Zeichnen, ohne Textbreite und Layout zu
     verändern. */
  -webkit-text-stroke: 0.6px currentColor;
}

/* Rueckfallebene fuer Browser ohne :has() - gesetzt per JavaScript, siehe
   aktualisiereChipMarkierung() in ablauf.js.
   Muss eine eigene Regel bleiben und darf nicht per Komma an die :has()-Regel darueber
   angehaengt werden: Enthaelt eine Selektorliste einen Selektor, den der Browser nicht kennt,
   verwirft er die komplette Regel - die Rueckfallebene waere dann ausgerechnet in den
   Browsern wirkungslos, fuer die sie gedacht ist. Die Werte sind identisch zur :has()-Regel,
   in modernen Browsern aendert sich dadurch nichts. */
.auswahl-chip--gewaehlt {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  border-color: var(--color-accent-text);
  -webkit-text-stroke: 0.6px currentColor;
}

.auswahl-chip:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Klare Trennung der Abschnitte auf der Ergebnisseite. */
.ergebnis h3 {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.ergebnis h3:first-of-type {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: none;
}

/* Grenzt den Abschluss (Sammelergebnis-Hinweis + Aktionen) vom letzten Inhaltsabschnitt
   ab, analog zu den Trennlinien zwischen den h3-Abschnitten oben. */
.ergebnis-abschluss {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

/* Die "Deine Gewichtung..."-Überschrift steckt in #sammelergebnis-bereich und damit bereits
   innerhalb von .ergebnis-abschluss, dessen Trennlinie oben als Abschnittstrenner ausreicht.
   Ohne diesen Reset addiert die generische .ergebnis h3-Regel (siehe oben) ihre eigenen
   2.5rem samt Rahmen obendrauf: doppelter Abstand zum vorangehenden Abschnitt und zwei
   Linien statt einer.
   #sammelergebnis-bereich statt .ergebnis-abschluss als Selektor: Durch die Verschachtelung
   ist die Überschrift die erste ihrer Art in ihrem Elternelement, wodurch zusaetzlich
   .ergebnis h3:first-of-type (margin-top 1.5rem) greift. Dessen Pseudoklasse hebt die
   Spezifitaet ueber die einer reinen Klassen-Regel, sodass ein einfaches
   .ergebnis-abschluss h3 trotz spaeterer Position im Stylesheet unterliegt. Die ID gewinnt
   unabhaengig davon. */
#sammelergebnis-bereich h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Der "noch nicht verfügbar"-Hinweis (gelb) steht wie die "Deine Gewichtung"-Überschrift an
   erster Stelle in #sammelergebnis-bereich, bringt als .notice aber seinen eigenen
   Standard-Rand (1.5rem) mit. Das vergroessert den Abstand zur Trennlinie oben gegenueber
   der gruenen "Vielen Dank"-Box, die denselben Trennlinien-Abstand ohne diesen zusaetzlichen
   Rand nutzt; hier auf denselben Wert reduziert. */
#sammelergebnis-bereich > .notice {
  margin-top: 1.25rem;
}

/* Trennt den Sammelergebnis-Bereich (Vergleich mit dem Durchschnitt ODER den Hinweis,
   dass er noch nicht verfuegbar ist - beide stehen an derselben Stelle) von der
   "Vielen Dank"-Bestaetigung darunter, analog zu den Trennlinien weiter oben.
   Als border-bottom an #sammelergebnis-bereich (ein schlichtes div ohne eigenen Rahmen)
   statt als border-top an #einreichen-status-box: Die Bestaetigungsbox hat ueber
   .notice/.notice--erfolg bereits einen gruenen Rahmen ringsum. Ein border-top dort
   ueberschreibt nur dessen obere Kante grau, sichtbar als Farbbruch an der oberen Ecke. */
#sammelergebnis-bereich {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

/* Erscheint nur, wenn das Absenden fehlgeschlagen ist und ein zweiter Versuch sinnvoll
   sein kann - siehe sendeAb() in ablauf.js. */
.einreichen-erneut {
  margin-top: 0.7rem;
}

/* ----- Rueckmeldung zu den Thesen: Kontaktmoeglichkeit am Ende der Ergebnisseite. ----- */
/* Ohne eigene Trennlinie nach oben: Die Bestaetigungsbox darueber hat ueber .notice bereits
   einen eigenen Rahmen, eine Linie unmittelbar darunter waere die zweite Abgrenzung auf
   engem Raum. Der Abstand allein trennt hier ausreichend. */
.rueckmeldung {
  margin-top: 2.5rem;
}

.rueckmeldung__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}

/* Die geschriebene Adresse steht gleichrangig neben dem Knopf, nicht darunter: Wer kein
   Mailprogramm eingerichtet hat, soll sie ohne Suchen finden. */
.rueckmeldung__adresse {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  /* Die Adresse enthaelt keine Leerzeichen zum Umbrechen und wuerde auf schmalen
     Bildschirmen sonst ueber den Rand hinauslaufen. */
  overflow-wrap: break-word;
  min-width: 0;
}

.rueckmeldung__adresse strong {
  color: var(--color-text);
}

/* Trennlinie hier statt vor dem Rueckmeldungs-Abschnitt: Bestaetigung und
   Kontaktmoeglichkeit gehoeren inhaltlich zum Abschluss der Auswertung, der Weg zurueck zur
   Startseite ist dagegen Navigation. Die Linie trennt damit Inhalt von Bedienung, statt
   zwei zusammengehoerige Textblöcke voneinander. */
.ergebnis-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* ----- Ergebnis: Rangfolge der Leitlinien, abgeleitet aus der Zustimmung zu ihren
   Thesen. Eine Zeile je Leitlinie mit Platzziffer, Balken und aufklappbarem Nachweis. ----- */
.rang-liste {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 1.75rem 0;
}

/* Kein flex-wrap: Mit Umbruch weicht ein langer Leitlinien-Name in eine
   eigene Zeile aus, bevor er ueberhaupt schrumpfen muesste - Platzziffer, Name und Wert
   stehen dann auf drei Zeilen, waehrend kurze Namen einzeilig bleiben. Ohne Umbruch bleiben
   alle drei nebeneinander und der Name bricht stattdessen innerhalb seines Schildes um
   (siehe min-width unten). */
.rang-zeile__kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Platzziffer als Kreis, damit die Rangfolge auch ohne Lesen der Prozentwerte erfassbar
   ist. Feste Groesse statt mitwachsend, damit alle Zeilen buendig untereinander stehen. */
.rang-zeile__platz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
}

/* Flex-Elemente schrumpfen standardmaessig nicht unter ihre Inhaltsbreite (min-width:auto).
   Lange Leitlinien-Namen wie "Lebenswerter, klimaangepasster Stadtraum" beanspruchen dadurch
   die volle Zeilenbreite und draengen Platzziffer und Prozentwert auf eigene Zeilen - bei
   kurzen Namen bleibt dagegen alles einzeilig, was von Zeile zu Zeile unruhig wirkt. Mit
   min-width:0 darf der Name stattdessen innerhalb seines Schildes umbrechen, sodass alle
   drei Bestandteile auf einer Zeile stehen bleiben. */
.rang-zeile__kopf .leitlinie-tag {
  min-width: 0;
}

/* margin-left:auto schiebt den Wert an den rechten Rand, ohne dass die Zeile
   space-between braucht - so bleibt der Abstand zwischen Platzziffer und Leitlinie-Tag
   erhalten. */
.rang-zeile__wert {
  margin-left: auto;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

.rang-balken {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  height: 0.9rem;
}

.rang-balken__fuellung {
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

/* Markiert im Vergleichsteil den Durchschnitt aller Teilnahmen auf dem eigenen Balken. */
.rang-balken__marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-text);
  transform: translateX(-50%);
  transition: left 0.3s ease;
}

.rang-zeile__vergleich {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* Die Vergleichszeile traegt mehr als die Rangliste darueber: Name, Durchschnitt und
   eigenen Wert. Auf schmalen Bildschirmen bleibt fuer den Namen dadurch so wenig Platz,
   dass er ueber viele Zeilen bricht. Ab hier ruecken Durchschnitt und eigener Wert
   deshalb gemeinsam in eine eigene Zeile unter den Namen, der damit die volle Breite
   bekommt. Betrifft nur den Vergleichsteil - die Rangliste oben hat mit der Platzziffer
   ein Element weniger und bleibt einzeilig. */
@media (max-width: 480px) {
  #sammelergebnis-bereich .rang-zeile__kopf {
    flex-wrap: wrap;
  }

  #sammelergebnis-bereich .rang-zeile__vergleich {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

.rang-zeile__schnitt {
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: nowrap;
}

/* Der aufklappbare Nachweis beantwortet die Rueckfrage "wo fliesst meine Bewertung ein?".
   Zugeklappt bleibt die Liste ruhig, aufgeklappt ist jede einzelne Antwort nachvollziehbar. */
.rang-details {
  margin-top: 0.6rem;
}

.rang-details summary {
  cursor: pointer;
  color: var(--color-accent-text);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.rang-details__grundlage {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0.2rem 0 0.6rem;
}

.rang-thesen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.rang-these {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.rang-these__konflikt {
  font-weight: 600;
  /* Zielkonflikte enthalten lange Komposita - gleiche Absicherung wie beim Thesentext. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.rang-these__antwort {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Kennzeichnung gegenlaeufig formulierter Thesen im Nachweis: Dort steht die eigene Antwort
   ("stimme nicht zu") neben einem hohen Leitlinienwert - ohne Hinweis saehe das nach einem
   Rechenfehler aus. Bewusst zurueckhaltend (kursiv, gedaempft), es ist eine Fussnote, kein
   Warnhinweis. */
.rang-these__gegenlaeufig {
  font-style: italic;
  color: var(--color-text-muted);
}

.rang-these__gegenlaeufig::before {
  content: "· ";
  font-style: normal;
}

/* Teilnahmezahl beim Sammelergebnis als eigenstaendige Pille, damit sie in beiden
   Zustaenden (unterhalb und oberhalb der Schwelle) fuer sich allein funktioniert. Die
   hervorgehobene Darstellung macht auf einen Blick erkennbar, wie nah die Teilnahmezahl an
   der Schwelle liegt. */
.teilnahme-zaehler {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.teilnahme-zaehler__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-text-muted);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.05rem;
}

.teilnahme-zaehler__text {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Sobald die Schwelle erreicht ist, deutlich in Akzentfarbe statt neutral - macht den
   Wechsel von "noch nicht verfuegbar" zu "jetzt verfuegbar" auch farblich sichtbar. */
.teilnahme-zaehler--erreicht {
  margin-bottom: 1rem;
}

.teilnahme-zaehler--erreicht .teilnahme-zaehler__zahl {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
  font-size: 1.2rem;
}

.teilnahme-zaehler--erreicht .teilnahme-zaehler__text {
  color: var(--color-text);
  font-weight: 700;
}

@media (min-width: 600px) {
  .these-text {
    font-size: 1.6rem;
  }
}