/* kleinhersteller.de — Styles nur für den Selbstcheck */

.steps {
  display: flex;
  gap: 6px;
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.steps div {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  background: var(--surface);
  text-align: center;
}
.steps div.on {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-bg);
  font-weight: 500;
}
/* Bereits erledigte Schritte sind anklickbar — zurück geht immer, vorwärts
   nur über die Weiter-Knöpfe, weil die auf Vollständigkeit prüfen. */
.steps div.zurueck {
  cursor: pointer;
  color: var(--ink-soft);
  border-color: var(--rule);
}
.steps div.zurueck:hover {
  color: var(--teal);
  border-color: var(--teal);
}
.steps div.zurueck:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.stage { padding: 34px 0 0; }
.stage[hidden] { display: none !important; }

.q {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  margin-bottom: 10px;
}
.q .qt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.04rem;
  margin: 0 0 3px;
}
.q .qh { font-size: 0.87rem; color: var(--ink-faint); margin: 0 0 12px; }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; font-family: var(--f-mono); font-size: 0.76rem; }
.opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.opt span {
  display: block;
  padding: 8px 15px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.opt input:checked + span {
  border-color: var(--teal);
  background: var(--teal-bg);
  color: var(--teal);
  font-weight: 500;
}
.opt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
.opt span:hover { border-color: var(--ink-faint); }

.selfq .opts { flex-direction: column; align-items: stretch; }

.act { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.warnmsg { font-size: 0.85rem; color: var(--hit); font-family: var(--f-mono); }
.warnmsg[hidden] { display: none !important; }

/* Ergebnis */

.readout {
  border: 2px solid var(--hit);
  background: var(--hit-bg);
  padding: 22px 24px;
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
}
.readout.none { border-color: var(--clear); background: var(--clear-bg); }
.readout .num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 0.9;
  color: var(--hit);
  font-variant-numeric: tabular-nums;
}
.readout.none .num { color: var(--clear); }
.readout .txt { flex: 1 1 240px; }
.readout .txt b { font-family: var(--f-display); font-size: 1.1rem; display: block; margin-bottom: 3px; }
.readout .txt span { font-size: 0.93rem; color: var(--ink-soft); }

.rgroup { margin-top: 32px; }
.rgroup h3 {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}

.card h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.04rem;
  margin: 0 0 6px;
}
.card .said {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--hit);
  margin-bottom: 7px;
}
.card .meta {
  font-family: var(--f-mono);
  font-size: 0.71rem;
  color: var(--ink-faint);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--rule);
  display: flex;
  gap: 5px 18px;
  flex-wrap: wrap;
}
.v-yes { color: var(--clear); }
.v-no { color: var(--hit); }

@media (max-width: 600px) {
  .steps { font-size: 0.58rem; }
  .readout .num { font-size: 2.8rem; }
}

/* Gruppenabhängige Fragen und der Aktionsplan */

.qtag {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 10px;
}

.card.schloss { border-left-color: var(--teal); }
.card.schloss .claim { color: var(--teal); }
.card.plan { border-left-color: var(--clear); }

ol.schritte {
  margin: 4px 0 12px;
  padding-left: 20px;
}
ol.schritte li {
  font-size: 0.95rem;
  margin-bottom: 8px;
  padding-left: 4px;
}
ol.schritte li:last-child { margin-bottom: 0; }

/* Die Vorschau im Schloss: ein echter erster Schritt aus dem eigenen Plan.
   Abgesetzt, aber ohne eigene Farbe — sie soll den Inhalt zeigen, nicht
   um Aufmerksamkeit mit der Kaufschaltfläche konkurrieren. */
.vorschau {
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: var(--sunken);
  border-left: 2px solid var(--teal);
}
.vorschau[hidden] { display: none !important; }
.vorschau-kopf {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 9px;
}
.vorschau-titel {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 8px;
}
.vorschau ol.schritte { margin: 0; }
.vorschau ol.schritte li { margin-bottom: 0; }
.vorschau-rest {
  margin: 9px 0 0;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  color: var(--teal);
}

.kaufhinweis {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--hit);
}

/* Bekannt, aber noch nicht angefasst — kein Treffer, aber auch nicht erledigt.
   Hieß einmal .card.todo und traf damit auf die Marker-Klasse .todo aus style.css
   (AUSFÜLLEN-Schildchen): orange Flaeche, Schreibmaschinenschrift, inline-block.
   Deshalb der eigene Name — und keine Flaeche, sondern nur der Balken links wie
   bei allen anderen Ergebniskarten. */
.card.offen { border-left-color: var(--offen); }
.card.offen h4 { color: var(--offen); }
.gruppentext {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: -6px 0 12px;
}

/* Eingeklappte Ergebnisgruppen */

details.falt > summary {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  list-style: none;
}
details.falt > summary::-webkit-details-marker { display: none; }
details.falt > summary::after {
  content: " · aufklappen";
  color: var(--teal);
}
details.falt[open] > summary::after { content: " · zuklappen"; }
details.falt > summary:hover { color: var(--ink-soft); }
details.falt > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
details.falt[open] > summary { margin-bottom: 12px; }
details.falt > .card:first-of-type { margin-top: 12px; }

/* ---------- Zahlung ---------- */

/* Die Zustimmung zum sofortigen Beginn. Bewusst kein Kleingedrucktes: Sie ist
   die Bedingung dafuer, dass das Widerrufsrecht erlischt (§ 356 Abs. 6 BGB),
   und wer sie ueberliest, hat ihr nicht wirksam zugestimmt. Deshalb dieselbe
   Schriftgroesse wie der Fliesstext und ein eigener Rahmen. */
.zustimmung {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 16px 0 4px;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  background: var(--sunken);
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}
.zustimmung input {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--teal);
}
.zustimmung-mehr {
  margin: 7px 0 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
}
.zustimmung-mehr a { color: var(--teal); }

.kaufhinweis.laeuft { color: var(--ink-soft); }


/* Rueckmeldung nach der Rueckkehr von der Zahlung. Steht ganz oben, weil sie
   in dem Fall gilt, in dem der Zwischenstand weg ist und das Ergebnis noch
   gar nicht auf dem Schirm steht. */
.zahlungsbanner {
  margin: 26px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--teal);
  background: var(--teal-bg);
  font-size: 0.94rem;
  line-height: 1.5;
}
.zahlungsbanner.warn {
  border-left-color: var(--hit);
  background: var(--hit-bg);
}
.zahlungsbanner[hidden] { display: none !important; }