/* Frageassistent - Gestaltung.
 *
 * Bewusst klein gehalten. Farben, Schrift und Knopfstile kommen aus
 * site.css; hier stehen nur die Bausteine, die es dort noch nicht gibt:
 * Fortschritt, Auswahlkarten, Uebersicht und Auswertung.
 *
 * Mobil zuerst: alle Grundregeln gelten fuer das Handy, die Media Query am
 * Ende schaltet auf groessere Schirme hoch. Umgekehrt herum entstehen die
 * typischen Handyfehler.
 *
 * Keine eigenen Farbwerte - ausschliesslich die Variablen aus site.css
 * (--blue, --blue-2, --ink, --muted, --card). Der Hauptknopf der Seite ist
 * orange (.btn-primary), das bleibt so.
 */

/* ⚠️ Das hidden-Attribut allein genuegt hier NICHT.
 *
 * Der Browser setzt [hidden] { display: none } nur in seinem eigenen
 * Standard-Stylesheet, und das verliert gegen jede Autorenregel. site.css
 * gibt .hero ein display: grid - der Einstieg blieb deshalb sichtbar,
 * obwohl der Assistent ihn ausgeblendet hatte. Am 22.09.2026 genau so
 * aufgetreten: Einstiegsbild und Assistent standen gleichzeitig auf der
 * Seite.
 *
 * Das !important ist hier die richtige Wahl und keine Faulheit: "versteckt"
 * soll jede andere Anzeigeregel schlagen.
 */
[hidden] { display: none !important; }

.check-huelle {
  max-width: 760px;
  margin: 0 auto;
  /* ⚠️ HIER KEINEN ABSTAND IN KOPFHOEHE EINRECHNEN.
   *
   * Der Seitenkopf ist "sticky", nicht "fixed" - site.css setzt in Zeile 49
   * zwar fixed, ueberschreibt das aber in Zeile 568 und 913 mit sticky, und
   * bei gleicher Spezifitaet gewinnt die spaetere Regel. Ein sticky Kopf
   * belegt seinen Platz im Fluss SELBST.
   *
   * Ein zusaetzlicher Abstand in Kopfhoehe legt sich deshalb oben drauf: am
   * 22.09.2026 standen so 128 px leeres Weiss zwischen Kopf und erster Frage.
   * Was der Kopf verdeckt, ist nicht ein fehlender Abstand, sondern das
   * Scrollziel - das setzt assistent.js in gehe().
   */
  padding: 24px 16px 56px;
}

/* Die runden Schaltflaechen unten rechts verdecken "Weiter" und die
   "Aendern"-Verweise - beide unteren Ecken sind im Assistenten belegt.
   Waehrend der Strecke werden sie ausgeblendet. */
body.check-laeuft .fab { display: none; }

/* ---------- Fortschritt ---------- */
.check-fortschritt { margin-bottom: 16px; }

.check-fortschritt-kopf {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}
.check-fortschritt-kopf b { color: var(--ink); }

/* Ein Punkt je Schritt - alle Fragen plus Uebersicht plus Kontakt.
   Nach der letzten Frage sind deshalb absichtlich noch nicht alle blau. */
.check-punkte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.check-punkt {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #cfdae8;
  flex: 0 0 auto;
  transition: background-color .2s ease;
}

/* Bearbeitet */
.check-punkt-fertig { background: var(--blue-2); }

/* Die aktuelle Stelle: groesser und mit Ring. Ohne diese Unterscheidung
   sieht man nicht, wo man gerade steht - nur, wie viel schon blau ist. */
.check-punkt-hier {
  width: 12px;
  height: 12px;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, .18);
}

.check-abschnitt {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Tafel ---------- */

.check-tafel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  padding: 20px 16px;
  margin-top: 16px;
}
.check-tafel h2 {
  margin: 4px 0 8px;
  font-size: 22px;
  line-height: 1.25;
}
.check-tafel h2:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 4px; }

.check-augenbraue {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue);
}
.check-hilfe { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.check-klein { font-size: 13px; color: var(--muted); }

/* ---------- Auswahlkarten ----------
 * Zwei Spalten schon auf dem Handy: Skizzen und Symbole sind damit gross
 * genug und man sieht mehrere Moeglichkeiten auf einen Blick, ohne zu
 * scrollen.
 */
/* Der Startknopf im Einstieg.
 *
 * Am Handy ueber die volle Breite: ein nur textbreiter Knopf mitten in einer
 * Karte ist schwer zu treffen und wirkt wie ein Nebenweg, obwohl er die
 * Hauptsache der Seite ist. Am Rechner bleibt er in Textbreite - dort ist ein
 * randbreiter Knopf ueberdimensioniert. */
.btn.check-start {
  display: block;
  width: 100%;
  min-height: 56px;
  font-size: 17px;
  padding: 16px 24px;
}
@media (min-width: 641px) {
  .btn.check-start { display: inline-block; width: auto; }
}

.check-karten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  /* ⚠️ Alle Reihen gleich hoch.
   *
   * Ohne das richtet sich jede Reihe nach ihrer hoechsten Karte: bei den
   * Beratungsthemen brach "Das passende Heizsystem" auf drei Zeilen um und
   * machte die zweite Reihe sichtbar hoeher als die erste. Das sah nach
   * Fehler aus, nicht nach Gestaltung. */
  grid-auto-rows: 1fr;
}

.check-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 8px;
  min-height: 48px;          /* Bedienelement, nicht kleiner */
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease;
}
.check-karte:hover { border-color: #94a9cd; }
.check-karte:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; }

/* Ausgewaehlt wird ueber Rand UND Haekchen angezeigt - Farbe allein reicht
   nicht, sie ist fuer einen Teil der Besucher nicht unterscheidbar. */
.check-karte[aria-pressed="true"] {
  border-color: var(--blue);
  background: #f2f7fd;
}
.check-karte[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 8px;
  font-weight: 800;
  color: var(--blue);
}

/* Deutsche Komposita wie "Finanzierungsmoeglichkeiten" passen auf einer
   schmalen Karte sonst nicht und stossen an den Rand. Die Seite ist als
   lang="de" ausgezeichnet, der Browser trennt also korrekt. */
.check-karte-text strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
  hyphens: auto;
  overflow-wrap: break-word;
}
.check-karte-text small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.check-symbol { width: 48px; height: 48px; object-fit: contain; }
.check-skizze { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

/* Gebaeudeskizzen brauchen mehr Flaeche als Symbole. */
.check-karten-breit .check-karte { padding: 8px; }

/* ---------- Felder ---------- */

.check-felder { margin: 0; }

.check-feld {
  display: block;
  margin: 16px 0;
  font-size: 14px;
  font-weight: 700;
}
.check-feld small {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}
.check-feld input,
.check-feld select {
  font: inherit;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  min-height: 48px;          /* Fingerfreundlich, und iOS zoomt bei 16px nicht */
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #aebdd1;
  border-radius: 10px;
}
.check-feld input:focus-visible,
.check-feld select:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; }

.check-einwilligung {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.check-einwilligung input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
}

/* ---------- Hinweise, Fehler ---------- */

.check-hinweis {
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.check-hinweis a { color: var(--blue); }

.check-fehler {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 14px;
}

/* ---------- Uebersicht ---------- */

.check-uebersicht { margin: 18px 0 0; }

.check-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
}
.check-zeile dt { color: var(--muted); grid-column: 1; }
.check-zeile dd { margin: 0; font-weight: 700; grid-column: 1; }
.check-aendern {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  border: 0;
  background: none;
  padding: 8px;
  min-height: 44px;
  color: var(--blue);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}

/* ---------- Auswertung ----------
 * Ruhig gehalten. Eine Foerderschaetzung ist kein Gewinnspiel - kein
 * Konfetti, keine grosse Zahl in Signalfarbe.
 */
.check-auswertung {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--blue-2);
  border-radius: 10px;
  background: #f8fbff;
  font-size: 14px;
}
.check-auswertung p { margin: 0 0 8px; }
.check-auswertung p:last-child { margin-bottom: 0; }
.check-auswertung-kern { font-size: 16px; line-height: 1.45; }
.check-auswertung-kern b { color: var(--blue); }
.check-vorbehalt { color: var(--muted); }

/* Der Einkommenshinweis. Bewusst hervorgehoben und NICHT grau wie der
   Vorbehalt darunter: die angezeigte Quote ist nach oben offen, und das ist
   fuer den Interessenten die guenstigere Nachricht - sie darf nicht wie eine
   Fussnote aussehen. Bis 23.09.2026 stand der Satz im zugeklappten Bereich.
   Kein Rahmen und keine Signalfarbe: der Block hat links bereits eine
   Akzentlinie, zwei Hervorhebungen nebeneinander heben sich gegenseitig auf. */
.check-einkommen {
  margin-top: 10px;
  font-weight: 600;
  color: var(--ink);
}
.check-offen-titel { font-weight: 700; margin-top: 10px; }
.check-offen { margin: 6px 0 0; padding-left: 20px; color: var(--ink-2); }
.check-offen li { margin: 3px 0; }
.check-quelle { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---------- Aufklappbereiche ----------
 * Native <details>: mit Tastatur bedienbar, von Vorlesewerkzeugen verstanden,
 * keine eigene Auf-/Zuklapp-Logik noetig.
 */
.check-aufklapp { margin-top: 12px; }

.check-aufklapp > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
  padding: 10px 0;
  min-height: 44px;            /* antippbar */
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.check-aufklapp > summary::-webkit-details-marker { display: none; }
.check-aufklapp > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.check-aufklapp[open] > summary::before { transform: rotate(45deg); }
.check-aufklapp > summary:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 2px; }

.check-aufklapp-inhalt { padding-bottom: 4px; }

/* Der Angabenblock ist ein eigener Kasten, nicht Teil der Auswertung. */
.check-aufklapp-angaben {
  margin-top: 18px;
  border-top: 1px solid #e2e8f0;
}
.check-aufklapp-angaben > summary { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .check-aufklapp > summary::before { transition: none; }
}

/* ---------- Knoepfe ---------- */

.check-knoepfe {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.check-knoepfe .btn { min-height: 48px; padding: 12px 20px; }
.check-knoepfe .btn:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; }
.check-knoepfe .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Abschluss ---------- */

.check-abschluss { text-align: center; padding: 24px 8px; }
.check-abschluss .check-symbol { width: 72px; height: 72px; }
.check-abschluss-fehler .check-symbol { display: none; }

/* ---------- Groessere Schirme ---------- */

@media (min-width: 641px) {
  .check-huelle { padding: 32px 24px 72px; }
  .check-tafel { padding: 30px; }
  .check-tafel h2 { font-size: 27px; }
  .check-karten { gap: 12px; }

  /* Ab hier passt Bild neben Text - auf dem Handy waere das zu schmal. */
  .check-karte { flex-direction: row; text-align: left; padding: 14px; }
  .check-karte-text { flex: 1; }
  .check-karten-breit .check-karte { flex-direction: column; text-align: center; }

  /* Drei Spalten: Frage | Antwort | Aendern. Am Handy stehen Frage und
     Antwort untereinander, "Aendern" rechts daneben ueber beide Zeilen -
     deshalb muss die Spalte hier ausdruecklich auf 3 wandern, sonst sitzt
     der Knopf auf der Antwort. */
  .check-zeile { grid-template-columns: 1fr 1.1fr auto; align-items: baseline; }
  .check-zeile dt { grid-column: 1; grid-row: 1; }
  .check-zeile dd { grid-column: 2; grid-row: 1; }
  .check-aendern { grid-column: 3; grid-row: 1; align-self: center; }
}

@media (min-width: 900px) {
  .check-karten-breit { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .check-balken > i, .check-karte { transition: none; }
}