/* Der Nachbarschafts-Quiz — tool-eigene Optik.

   Ergänzt static/tools/gemeinsam/css/tools.css (Bildschirmwechsel, Balkengerüst,
   Fußnoten, reduzierte Bewegung). Hier steht nur, was dieses Tool allein braucht:
   Regler, Vergleichsbalken, Merksatz-Leiste, Ergebnis-Karten.

   Farben und Maße stammen aus dem Design-Mockup Schaetz-Check.dc.html; wo es einen
   Token in static/css/site.css gibt, wird der benutzt.

   Reihenfolge zählt: _shell.html lädt tools.css und danach diese Datei. Regeln mit
   gleicher Spezifität gewinnen deshalb hier — genutzt bei .vrz-balken (Höhe) und
   im Block für reduzierte Bewegung. */

.sc {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Die Bildschirme werden von tools.css über [data-nur-zustand] geblendet. Für
   alles, was das JavaScript per hidden-Attribut schaltet, braucht es diese Regel:
   ein author-seitiges display:flex würde sonst das UA-display:none überstimmen. */
.sc [hidden] { display: none; }

/* ------------------------------------------------------------------- Kopf */

.nq-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.nq-marke { display: flex; align-items: center; gap: 11px; }
.nq-marke-punkt {
  width: 34px; height: 34px; border-radius: 50%; background: var(--terracotta);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
}
.nq-marke-name { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 16px; }
.nq-fortschritt { display: flex; align-items: center; gap: 14px; }
.nq-fortschritt-text { font-size: 13.5px; color: var(--muted-2); font-weight: 600; }
.nq-punkte { display: flex; gap: 6px; }
.nq-punkt {
  width: 9px; height: 9px; border-radius: 999px; background: #e0d2be;
  transition: width .3s ease, background .3s ease;
}
.nq-punkt[data-aktiv="true"] { width: 22px; background: var(--terracotta); }
.nq-punkt[data-fertig="true"] { background: var(--petrol); }

/* ------------------------------------------------------------------ Intro */

.nq-intro {
  padding: 44px 0 20px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 22px; max-width: 34em;
}
.nq-pille {
  background: #eef4f0; color: var(--petrol); font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: 999px;
}
.nq-intro-titel { font-size: clamp(28px, 6vw, 40px); font-weight: 800; }
.nq-intro-text { font-size: 19px; color: var(--muted); }
.nq-intro-text--klein { font-size: 17px; }

/* ------------------------------------------------------- Knöpfe und Chips */

.nq-knopf {
  border: none; cursor: pointer; border-radius: 999px;
  padding: 15px 30px; font-weight: 700; font-size: 16.5px;
}
.nq-knopf--rot { background: var(--terracotta); color: #fff; box-shadow: 0 8px 22px rgba(199, 70, 42, .26); }
.nq-knopf--rot:hover { background: #af3b22; }
.nq-knopf--petrol { background: var(--petrol); color: #fff; }
.nq-knopf--petrol:hover { background: #23655a; }
.nq-knopf--umriss { background: none; border: 1.5px solid #d9c7ae; color: var(--muted); font-weight: 600; font-size: 15.5px; padding: 12px 20px; }
.nq-knopf--umriss:hover { border-color: var(--terracotta); color: var(--terracotta); }
.nq-knopf[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

.nq-textknopf {
  align-self: flex-start; background: none; border: none; padding: 0;
  color: var(--muted-2); font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.nq-textknopf:hover { color: var(--terracotta); }

.nq-chip {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--ink); min-height: 44px;
}
.nq-chip:hover { border-color: var(--terracotta); color: var(--terracotta); }

.nq-fussnotiz { font-size: 13.5px; color: var(--muted-2); }
.nq-fussnotiz--trennlinie { border-top: 1px solid var(--line); padding-top: 16px; align-self: stretch; }
.nq-methodik-link { color: var(--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.nq-kicker { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted-2); }
.nq-kicker--hell { color: #b9a896; }
.nq-kicker--zaehler { letter-spacing: .06em; }

/* ---------------------------------------------------- Frage und Auflösung */

/* Die Abstände sind gegenüber dem Mockup gestrafft. Auf einem 900 px hohen Fenster
   entscheidet jeder Zwischenraum darüber, ob Auflösung und Weiter-Knopf noch ins
   Bild passen — und ein Ablauf, bei dem man nach jeder Frage scrollen muss, ist
   kein Ablauf mehr. */
.nq-raster { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 18px; }
/* max-width, weil die Merksatz-Leiste abschaltbar ist: ohne sie zöge flex-grow die
   Spalte auf volle 1180 px, und ein Vergleichsbalken über die ganze Fensterbreite
   liest sich nicht mehr als Vergleich. */
.nq-haupt { flex: 3 1 400px; max-width: 780px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.nq-runde { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--terracotta); }
.nq-frage { font-size: clamp(21px, 3.6vw, 27px); font-weight: 700; max-width: 22em; text-wrap: pretty; }

.nq-regler-karte {
  align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 22px 24px 18px; display: flex; flex-direction: column; gap: 6px;
}
.nq-regler-kopf { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.nq-regler-label { font-size: 13.5px; color: var(--muted-2); font-weight: 600; }
.nq-regler-wert { display: flex; align-items: baseline; gap: 8px; }
.nq-zahl {
  width: 5.2em; text-align: right; border: 1px solid var(--line); border-radius: 12px;
  padding: 4px 10px; background: var(--cream); color: var(--terracotta);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 30px;
}
.nq-einheit { font-size: 15px; color: var(--muted); font-weight: 600; }
.nq-regler-skala { display: flex; justify-content: space-between; font-size: 13px; color: #9c8f82; }

/* Regler. Eigener Thumb heißt: eigener Fokusring — sonst ist Tastaturfokus
   unsichtbar. Der Mockup hat keinen; das ist die eine bewusste Zugabe. */
.nq-regler {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0;
}
.nq-regler::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: #e7dbc9; }
.nq-regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 38px; width: 38px; margin-top: -13px; border-radius: 50%;
  background: var(--terracotta); border: 5px solid #fff;
  box-shadow: 0 4px 14px rgba(199, 70, 42, .35);
}
.nq-regler::-moz-range-track { height: 12px; border-radius: 999px; background: #e7dbc9; }
.nq-regler::-moz-range-thumb {
  height: 28px; width: 28px; border-radius: 50%;
  background: var(--terracotta); border: 5px solid #fff;
}
.nq-regler:focus { outline: none; }
.nq-regler:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(43, 33, 28, .55); }
.nq-regler:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(43, 33, 28, .55); }

.nq-optionen { display: flex; flex-wrap: wrap; gap: 10px; }
.nq-option {
  cursor: pointer; padding: 15px 22px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-align: left; min-height: 44px;
  border: 1.5px solid #e2d4c0; background: #fff; color: #3f332b;
  display: inline-flex; align-items: center; gap: 8px;
}
.nq-option[data-aktiv="true"] { border-color: var(--terracotta); background: var(--terracotta); color: #fff; }
.nq-option[data-korrekt="true"] { border-color: var(--petrol); background: var(--petrol); color: #fff; }
.nq-option[disabled] { cursor: default; }
.nq-option-marke { font-size: 13px; font-weight: 600; opacity: .85; }
.nq-option-marke:empty { display: none; }

.nq-aufloesung { align-self: stretch; display: flex; flex-direction: column; gap: 16px; animation: nq-auf .45s ease both; }

/* Auf breiten Schirmen erscheint die Auflösung NEBEN der Frage, nicht darunter.
   Gestapelt steht der Weiter-Knopf bei 862 px — auf jedem Laptop unter der Kante,
   und nach jeder Frage scrollen zu müssen ist kein Ablauf mehr. Nebeneinander
   endet alles bei rund 550 px.

   Möglich wurde das erst durch die abgeschaltete Merksatz-Leiste: deren Spalte ist
   der Platz, in dem die Auflösung jetzt steht. Wird konfig.merksaetze wieder auf
   true gesetzt, greift diese Regel weiterhin — die Leiste rutscht dann unter das
   Raster, weil .nq-raster umbricht.

   Nur im Zustand aufloesung, damit der Fragebildschirm nicht mit einer leeren
   rechten Hälfte dasteht. */
@media (min-width: 1000px) {
  .vrz-tool[data-zustand="aufloesung"] .nq-haupt {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 32px;
    row-gap: 14px;
    align-content: start;
  }
  .vrz-tool[data-zustand="aufloesung"] .nq-haupt > * { grid-column: 1; }
  .vrz-tool[data-zustand="aufloesung"] .nq-haupt > [data-aufloesung-ziel] {
    grid-column: 2;
    grid-row: 1 / span 10;
    align-self: start;
  }
}

.nq-balken-karte {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 18px 22px; display: flex; flex-direction: column; gap: 14px;
}
.nq-balken-zeile { display: flex; flex-direction: column; gap: 6px; }
.nq-balken-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nq-balken-label { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.nq-balken-wert { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 21px; }
.nq-balken-wert--rot { color: var(--terracotta); }
.nq-balken-wert--petrol { color: var(--petrol); }
/* Höhe schlanker als das gemeinsame Gerüst — gleiche Spezifität, spätere Datei. */
.nq-balken { height: 16px; background: #f0e6d6; }
/* min-width: bei einer 100er-Schätzung neben einem 8er-Ist bliebe der zweite
   Balken sonst ein Strich. Der Zahlenwert steht ohnehin darüber. */
.nq-balken-fuellung { min-width: 6px; }
.nq-balken-fuellung--rot { background: var(--terracotta); }
.nq-balken-fuellung--petrol { background: var(--petrol); transition-delay: .15s; }
.nq-skala-hinweis { font-size: 13px; color: #9c8f82; border-top: 1px solid #f0e6d6; padding-top: 12px; }

.nq-antwort { display: flex; flex-direction: column; gap: 12px; }
.nq-antwort-titel { font-size: 22px; font-weight: 700; color: var(--petrol); }
.nq-antwort-titel:focus-visible { outline: 3px solid rgba(43, 33, 28, .35); outline-offset: 4px; border-radius: 6px; }
.nq-antwort-text { font-size: 17px; color: #3f332b; max-width: 38em; text-wrap: pretty; }
.nq-hinweis {
  font-size: 14px; color: #7a6c5e; background: #f5ede1;
  border-left: 3px solid #d9c7ae; border-radius: 0 10px 10px 0;
  padding: 10px 14px; max-width: 38em;
}
.nq-quelle { font-size: 13px; color: #9c8f82; }
.nq-quelle--hell { color: #9c8b79; }
.nq-zahl-im-satz { font-weight: 700; color: inherit; white-space: nowrap; }

/* Merksatz und Weiter nebeneinander. Gestapelt kosten sie 145 px und schieben den
   Knopf auf 900 px Fensterhöhe unter die Kante — der Bruch im Ablauf, über den man
   beim Durchklicken stolpert. Unter 620 px bricht die Zeile um (siehe unten). */
.nq-aufloesung-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.nq-aufloesung-fuss .nq-knopf { flex: 0 0 auto; }

.nq-merksatz-band {
  flex: 1 1 20em;
  background: var(--ink); color: #f7f0e6; border-radius: 18px;
  padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nq-merksatz-band-text { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 20px; flex: 1 1 14em; }

/* ------------------------------------------------------- Merksatz-Leiste */

.nq-merkleiste {
  flex: 1 1 250px; align-self: flex-start;
  background: #f7f0e4; border: 1px solid #eadcc7; border-radius: 20px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.nq-merkleiste-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nq-merkliste { display: flex; flex-direction: column; gap: 10px; }
.nq-merkliste:empty { display: none; }
.nq-merksatz {
  background: #fff; border: 1px solid #eadcc7; border-radius: 14px;
  padding: 12px 14px; font-size: 14.5px; font-weight: 600; color: #3f332b;
  animation: nq-auf .4s ease both;
}

/* ---------------------------------------------------------------- Ergebnis */

.nq-ergebnis { display: flex; flex-direction: column; gap: 30px; padding-top: 30px; }
.nq-abschluss { font-size: 19px; color: var(--muted); max-width: 36em; text-wrap: pretty; }
.nq-ergebnis-raster { display: flex; flex-wrap: wrap; gap: 26px; }
.nq-ergebnis-links { flex: 3 1 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.nq-ergebnis-rechts { flex: 1 1 270px; display: flex; flex-direction: column; gap: 20px; }
/* Dieselbe Leiste hängt einmal neben der Frage (waagerechtes Raster, dort soll sie
   wachsen) und einmal auf dem Ergebnis-Bildschirm (senkrechte Spalte, dort würde
   flex-grow sie bis zum Seitenende ziehen). */
.nq-ergebnis-rechts .nq-merkleiste { flex: 0 0 auto; align-self: stretch; }

.nq-irrtum {
  align-self: stretch; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.nq-irrtum-satz { font-size: clamp(24px, 5vw, 34px); font-weight: 800; text-wrap: pretty; }
.nq-irrtum-frage { font-size: 16px; color: var(--muted); }

.nq-einordnung {
  align-self: stretch; background: #eef4f0; border: 1px solid #d6e5de;
  border-radius: 22px; padding: 24px 28px;
}
.nq-einordnung p { font-size: 18px; color: #245f54; font-weight: 600; text-wrap: pretty; }

.nq-ctas { align-self: stretch; display: flex; flex-wrap: wrap; gap: 14px; }
.nq-cta { flex: 1 1 260px; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.nq-cta--rot { background: var(--terracotta); color: #fff; }
.nq-cta--rot .nq-cta-text { color: #fbe4dd; }
.nq-cta--sand { background: #f7f0e4; border: 1px solid #eadcc7; }
.nq-cta--sand .nq-cta-text { color: var(--muted); }
.nq-cta-titel { font-size: 21px; font-weight: 700; color: inherit; }
.nq-cta-text { font-size: 15.5px; }
.nq-cta-knopf {
  margin-top: auto; align-self: flex-start; text-decoration: none;
  font-weight: 700; padding: 12px 20px; border-radius: 999px; font-size: 15px;
}
.nq-cta-knopf--weiss { background: #fff; color: var(--terracotta); }
.nq-cta-knopf--petrol { background: var(--petrol); color: #fff; }

.nq-rueckblick {
  align-self: stretch; border-top: 1px solid var(--line); padding-top: 22px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.nq-rueckblick-inhalt {
  align-self: stretch; background: var(--ink); color: #f7f0e6; border-radius: 22px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
  animation: nq-auf .45s ease both;
}
.nq-rueckblick-zahlen { display: flex; flex-wrap: wrap; gap: 24px; }
.nq-rueckblick-zahl { flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; }
.nq-rueckblick-wert { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 34px; color: #f0a38c; }
.nq-rueckblick-label { font-size: 14px; color: #cdbca9; }
.nq-rueckblick-text { font-size: 17px; color: #e7dacb; max-width: 38em; text-wrap: pretty; }
/* Im dunklen Block braucht die Fußnotenziffer eine Farbe, die dort trägt. */
.nq-rueckblick-inhalt .vrz-fussnote-knopf { color: #f0a38c; }

.nq-share { display: flex; flex-direction: column; gap: 10px; }
.nq-share-bild { width: 100%; height: auto; border-radius: 18px; display: block; }
.nq-share-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

@keyframes nq-auf {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Schmale Geräte */

@media (max-width: 620px) {
  .sc { padding: 22px 18px 56px; }
  /* Die Merksatz-Leiste wandert unter die Frage, statt sie zu verdrängen. */
  .nq-raster { gap: 24px; }
  .nq-haupt, .nq-merkleiste { flex-basis: 100%; }
  .nq-regler-karte { padding: 18px 16px 14px; }
  .nq-zahl { font-size: 26px; }
  .nq-irrtum, .nq-einordnung, .nq-rueckblick-inhalt { padding: 20px; }
  .nq-option { width: 100%; }
}

/* Die Regel in tools.css deckt nur .vrz-balken-fuellung ab; die Verzögerung des
   zweiten Balkens und die eigenen Einblendungen brauchen ihre eigene Abschaltung.
   Beide Balken erscheinen sofort in voller Länge und im gleichen Kontrast — eine
   abgeschwächte Darstellung wäre eine schlechtere Auskunft, keine ruhigere. */
@media (prefers-reduced-motion: reduce) {
  .nq-balken-fuellung, .nq-balken-fuellung--petrol { transition: none; }
  .nq-punkt { transition: none; }
}