/* Tool-Seite und Druck-Layout */

/* Nur oben und unten setzen: `.tool` sitzt auf demselben Element wie `.wrap`,
   und eine Kurzschreibweise mit `0` an zweiter Stelle löscht deren seitlichen
   Rand. Auf dem Handy klebte der Text dadurch am Displayrand. */
.tool { padding-top: 48px; padding-bottom: 80px; }
/* Begrenzte Zeilenlänge, damit die Überschrift auf breiten Schirmen umbricht
   statt als eine sehr lange Zeile über der schmaleren Textspalte zu stehen.
   34ch statt 22ch: Bei 22ch stand "Fertige" allein auf einer Zeile, und die
   vom Fließtext geerbte Zeilenhöhe zog die drei Zeilen weit auseinander. */
.tool h1 { letter-spacing: -0.02em; margin-bottom: 8px; max-width: 34ch; line-height: 1.18; }
.tool .claim + .tool-intro { margin-top: 4px; }
.tool-intro { color: var(--muted); max-width: 70ch; margin-bottom: 32px; }

.beta-pill { background: rgba(16,201,143,0.18); color: #7ff0cf; border: 1px solid rgba(16,201,143,0.4); padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }

/* Stepper */
.stepper { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 36px; flex-wrap: wrap; }
.stepper li {
  font-size: 0.88rem; font-weight: 600; color: var(--muted);
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
}
.stepper li button {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  font: inherit; color: inherit; background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.stepper li button:disabled { cursor: default; opacity: 0.75; }
.stepper li.frei:not(.aktiv) button:hover { color: var(--text); }
.stepper li .nr {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #e5e9f2; color: var(--muted); font-size: 0.75rem; font-weight: 800;
  flex-shrink: 0;
}
.stepper li.aktiv { color: var(--text); border-color: var(--accent); }
.stepper li.aktiv .nr { background: var(--accent); color: #04281c; }
.stepper li.fertig .nr { background: #d9f7ec; color: var(--accent-ink); }

/* Fortschritt */
.fortschritt {
  display: flex; align-items: center; gap: 18px; margin-top: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid #e5e9f2; border-top-color: var(--accent);
  animation: drehen 0.9s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.fortschritt-text { flex: 1; }
.fortschritt-text small { color: var(--muted); display: block; margin-top: 2px; }
.balken { height: 6px; border-radius: 999px; background: #e5e9f2; overflow: hidden; margin-top: 10px; }
.balken-fuellung {
  height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  animation: laufen 1.4s ease-in-out infinite;
}
@keyframes laufen { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* Zeitbasierter Balken: die Endlos-Animation weicht einer echten Breite.
   Sie wächst gegen den Erwartungswert und bleibt kurz vor dem Ende stehen. */
.balken-fuellung.bestimmt { animation: none; margin-left: 0; width: 0; transition: width 0.25s linear; }

/* Wartekarten unter der Fortschrittskarte, im dunklen Design der
   Ergebniskarte. Der Kontrast zur hellen Fortschrittskarte darüber trennt
   beides sauber: oben der Stand der Arbeit, unten das Begleitende. */
.wartekarten { margin-top: 12px; }
.wk-buehne {
  /* Höhe der größten Karte (gemessen: Preiskarte, 161 px), damit der Wechsel
     die Seite nicht springen lässt. */
  min-height: 162px; display: flex; align-items: stretch;
}
/* flex: 1, sonst schrumpft die Karte im Flex-Container auf ihre Inhaltsbreite.
   Zwei Spalten: Überschrift links, Inhalt rechts. Einspaltig blieb auf breiten
   Schirmen die halbe Karte leer, während der Text schon nach 62 Zeichen
   umbrach; nebeneinander füllt beides die Fläche und die Karten werden
   gleich hoch. Das Grid setzt die beiden Kinder der Karte automatisch in die
   beiden Spalten. */
.wartekarte {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: 8px 32px; align-content: center;
  background: var(--ink); color: #fff;
  border-radius: var(--radius);
  padding: 24px 28px;
  animation: wk-ein 0.4s ease both;
}
/* Je Karte ein eigener Akzent in der Überschrift, damit der Wechsel auch ohne
   Lesen auffällt. Versand und Preise teilen sich einen: Sie gehören zusammen.
   Helle Töne, weil sie auf dunklem Grund stehen. */
.wartekarte[data-karte="kostenlos"] { --wk-ton: #7ff0cf; }
.wartekarte[data-karte="ablauf"]    { --wk-ton: #7dd3fc; }
.wartekarte[data-karte="versand"],
.wartekarte[data-karte="preise"]    { --wk-ton: #fcd34d; }
@keyframes wk-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wartekarte strong {
  color: var(--wk-ton);
  font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.35;
  text-wrap: balance;
}
/* 62ch: Ohne Begrenzung liefe der Fließtext auf breiten Schirmen über gut 130
   Zeichen je Zeile und wäre kaum noch zu lesen. */
.wartekarte p { margin: 0; max-width: 62ch; font-size: 0.9rem; color: #aeb9cf; line-height: 1.6; }
.wk-liste { margin: 0; padding-left: 20px; max-width: 62ch; font-size: 0.9rem; color: #aeb9cf; line-height: 1.6; }
.wk-liste li { margin-bottom: 4px; }
.wk-liste li::marker { color: var(--wk-ton); font-weight: 700; }

/* Begrenzt, damit Leistung und Betrag zusammen lesbar bleiben statt über die
   ganze Kartenbreite auseinanderzulaufen. */
.wk-preise { max-width: 460px; }
.wk-preis {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem;
}
.wk-preis:last-child { border-bottom: none; }
.wk-preis span { color: #aeb9cf; }
.wk-preis strong { font-variant-numeric: tabular-nums; margin: 0; font-size: 0.95rem; color: #fff; }

/* Fortschrittspunkte: zeigen, dass noch etwas kommt, ohne zu drängen. */
.wk-punkte { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.wk-punkte i { width: 5px; height: 5px; border-radius: 50%; background: #d5dbe8; transition: background 0.3s ease; }
.wk-punkte i.aktiv { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .wartekarte { animation: none; }
  .wk-punkte i { transition: none; }
  /* Der Puls der laufenden Station (Schritt 6) ist Zierde, kein Informations-
     träger - der Zustand steht ohnehin in Farbe und Text. */
  .pv-kette li[data-wartet] .pv-punkt { animation: none; }
}

/* Das Hochladefeld ist der einzige Zweck von Schritt 1 und darf nicht wie ein
   leerer Rahmen wirken: Akzentfarbe, Symbol und ein Knopf im Feld, weil auf dem
   Handy niemand etwas "hierher zieht" und ein Rahmen allein nicht nach
   Antippen aussieht. */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: linear-gradient(180deg, #f1fdf8, #ffffff 70%);
  padding: 36px 24px; cursor: pointer; text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 22px rgba(16, 201, 143, 0.12);
}
.dropzone:hover { border-color: #0d9d70; box-shadow: 0 10px 28px rgba(16, 201, 143, 0.2); }
.dropzone.drag { border-style: solid; background: #ecfdf6; }
.dropzone strong { font-size: 1.12rem; }
.dropzone .dz-sub { color: var(--muted); font-size: 0.88rem; max-width: 44ch; }
.dz-icon {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: #d9f7ec; color: #0d9d70; margin-bottom: 8px;
}
.dz-icon svg { width: 24px; height: 24px; }
.dz-knopf {
  margin-top: 14px; padding: 11px 22px; border-radius: 12px; font-weight: 700; font-size: 0.98rem;
  background: linear-gradient(90deg, var(--accent), #0ea5e9); color: #04281c;
}
.dropzone:hover .dz-knopf { filter: brightness(1.07); }

/* Turnstile-Widget: unsichtbar, bis Cloudflare eine Interaktion verlangt. */
.mensch-pruefung { margin-top: 14px; }
.mensch-pruefung:empty { display: none; }

/* Datenschutz-Erklärung zum Aufklappen statt als Absatz über dem Feld. */
.daten-details { margin-top: 16px; }
.daten-details summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: #0d9d70; }
.daten-details p { color: var(--muted); font-size: 0.87rem; max-width: 70ch; margin: 10px 0 0; }

.text-alternativ { margin-top: 20px; }
.text-alternativ summary { cursor: pointer; font-weight: 600; color: #0d9d70; }
.text-alternativ textarea {
  width: 100%; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; font: inherit; font-size: 0.9rem; background: var(--card);
}
.knopfzeile { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.btn-ghost-dunkel { color: var(--text); border: 1px solid #c3cbdd; background: var(--card); }
/* Mittlere Stufe zwischen dem Verlaufsknopf und dem umrandeten: die Leitfarbe
   als Vollton. Farbig und damit klar sichtbar, aber ruhiger als der Verlauf,
   der dem primären Knopf einer Ansicht vorbehalten bleibt. */
.btn-accent { background: var(--accent); color: #04281c; border: 1px solid var(--accent); }
.btn-accent:hover { filter: brightness(1.07); }
button.btn { cursor: pointer; font-family: inherit; }

#status { min-height: 1.4em; font-weight: 600; color: #0d9d70; }
#status.fehler { color: #be123c; }

/* Schritt 3: Formular-Karten und Ergebnis */
.finale { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.finale-formulare { display: grid; gap: 18px; }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.karte h2 { margin: 0 0 14px; font-size: 1.05rem; letter-spacing: -0.01em; }
.karte label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }
.karte label.radio { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.karte input:not([type="radio"]) {
  display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 0.95rem; background: #fbfcfe;
}
.karte input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.karte input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
.feldzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.erklaerbox {
  background: #f0fdf7; border: 1px solid #bbecd9; border-radius: 10px;
  padding: 12px 14px; font-size: 0.85rem; color: #14532d; margin: 0 0 14px;
}
.feld-hinweis { font-size: 0.78rem; color: var(--muted); }
.feld-hinweis.fehler { color: #be123c; font-weight: 600; }
.feld-hinweis.warnung { color: #92400e; font-weight: 600; }
.feld-hinweis.warnung:empty, .feld-hinweis.fehler:empty { display: none; }

.karte.wichtig { border: 2px solid var(--accent); }
.karte select {
  display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 12px; font: inherit; font-size: 0.95rem; background: #fbfcfe;
}
.karte select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.erg-hinweis { color: #8d99b2; font-size: 0.8rem; margin-top: 10px; }

.finale-ergebnis { position: sticky; top: 84px; display: grid; gap: 12px; }
.ergebnis-karte { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px; }
.ergebnis-karte h2 { margin: 0 0 16px; font-size: 1.05rem; }
.erg-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.erg-zeile span { color: #aeb9cf; font-size: 0.82rem; }
.erg-zeile strong { font-variant-numeric: tabular-nums; }
.erg-zeile.saldo { border-bottom: none; padding-top: 14px; }
.erg-zeile.saldo strong { font-size: 1.25rem; color: #fda4af; }
.erg-zeile.saldo strong.guthaben { color: #7ff0cf; }
.ergebnis-karte .btn { margin-top: 16px; }
.ergebnis-karte .feld-hinweis { color: #8d99b2; margin-top: 12px; }
.btn-breit { display: block; width: 100%; text-align: center; }

/* Schritt-2-Fußzeile */
.schritt-fuss { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.zwischensumme { font-size: 0.95rem; color: var(--muted); }
.zwischensumme strong { color: var(--text); font-size: 1.1rem; }
.zwischensumme small { display: block; }

/* Inline-Erklärungen */
.info-knopf {
  border: 1px solid var(--line); background: #fbfcfe; color: #0d9d70; border-radius: 50%;
  width: 24px; height: 24px; font-size: 0.85rem; cursor: pointer; vertical-align: middle; line-height: 1;
}
.info-knopf:hover, .info-knopf.offen { background: var(--accent); color: #04281c; border-color: var(--accent); }
.zeile-erklaerung td { background: #f4faf8; }
.erklaerung-inhalt { font-size: 0.87rem; color: #33415e; padding: 4px 8px; }
.erklaerung-inhalt p { margin: 6px 0; }
.erklaerung-inhalt a { color: #0d9d70; }
.erklaerung-fuss { color: var(--muted); font-size: 0.75rem; }

/* Bilanzleiste über der Prüftabelle. Läuft beim Scrollen mit, damit der
   Weiter-Knopf an jeder Stelle der Liste erreichbar ist; der Seitenkopf ist
   64 px hoch und selbst sticky, deshalb setzt sie darunter auf. */
.pruef-bilanz {
  position: sticky; top: 64px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px;
  background: #eefaf5; border: 1px solid #b9ead8; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pruef-bilanz.hat-offene { background: #fffbeb; border-color: #fcd996; }
.pruef-bilanz-text { display: grid; gap: 2px; }
.pruef-bilanz-text strong { font-size: 1.05rem; color: var(--text); }
.pruef-bilanz-text span { font-size: 0.87rem; color: var(--muted); }
.pruef-bilanz .btn { flex-shrink: 0; }

.pruef-tabelle { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-size: 0.92rem; }
.pruef-tabelle th { text-align: left; background: var(--ink); color: #dbe3f0; padding: 12px 14px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.pruef-tabelle td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pruef-tabelle td.betrag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pruef-tabelle tr.aus td { opacity: 0.45; }
/* Positionen, die das Tool nicht sicher einstufen konnte. Sie sind bewusst
   nicht vorbelegt und brauchen eine bewusste Entscheidung, sollen also auch
   dann auffallen, wenn die Zeile ausgegraut ist. */
.pruef-tabelle tr.klaerung td { opacity: 1; background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; }
.pruef-tabelle small { color: var(--muted); }
/* Vorschlag der Einstufungshilfe: sichtbar als Vorschlag gekennzeichnet,
   optisch klar getrennt von den geprüften Einstufungen der Referenzliste. */
.ki-vorschlag {
  margin-top: 8px; padding: 8px 10px; border-left: 3px solid #94a3b8;
  background: #f8fafc; border-radius: 0 8px 8px 0;
  font-size: 0.78rem; line-height: 1.45; color: #475069;
}
.ki-vorschlag strong { color: #334155; }
.pruef-tabelle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

.pill { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill-umlagefaehig { background: #d9f7ec; color: var(--accent-ink); }
.pill-nicht_umlagefaehig { background: #ffe4ea; color: #9f1239; }
.pill-bedingt { background: #fef3c7; color: #92400e; }
.pill-strittig { background: #e0e7ff; color: #3730a3; }
.pill-unbekannt { background: #e5e9f2; color: #475069; }
/* Vorschlagsplakette: trägt die Farbe der vorgeschlagenen Einstufung, aber
   gestrichelt umrandet und blasser. Sie sagt "so ordnen wir das ein", nicht
   "so ist es festgestellt" - der Unterschied muss ohne Lesen erkennbar sein. */
.pill-vorschlag { border: 1px dashed currentColor; opacity: 0.85; font-weight: 600; }

.entscheidung { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.entscheidung-knopf {
  border: 1px solid var(--accent); background: #fff; color: var(--accent-ink);
  border-radius: 999px; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer;
}
.entscheidung-knopf:hover { background: #d9f7ec; }
.entschieden { color: var(--accent-ink); font-weight: 700; }

.warnbanner {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: 0.9rem;
}

/* Abweisung eines Fremddokuments, oberhalb der Dropzone. Der Ton ist bewusst
   der Warnton der Seite und nicht das Fehlerrot: Der Nutzer hat nichts falsch
   gemacht, sein Dokument passt nur nicht zu diesem Werkzeug. */
.abweisung {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 20px;
}
.abweisung-text { color: #9a3412; font-weight: 600; font-size: 0.92rem; margin: 0; }
.abweisung-liste { margin-top: 16px; border-top: 1px solid #fdba74; padding-top: 14px; }
.abweisung-frage { font-size: 0.9rem; color: #7c2d12; margin: 0 0 12px; }
.abweisung-zeile { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.abweisung-zeile .feld { flex: 1 1 240px; margin: 0; }
.abweisung-zeile input[type="email"] {
  width: 100%; padding: 10px 12px; border: 1px solid #fdba74; border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; background: #fff;
}
.abweisung-zeile button {
  padding: 11px 18px; border: 0; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: 0.95rem;
  background: #9a3412; color: #fff;
}
.abweisung-zeile button:disabled { opacity: 0.6; cursor: default; }
.abweisung .einwilligung {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 12px;
  font-size: 0.78rem; color: #7c2d12; line-height: 1.45;
}
.abweisung .einwilligung input { margin-top: 2px; flex: 0 0 auto; }
.abweisung .einwilligung a { color: inherit; }
.abweisung #wl-status { margin-top: 10px; color: #7c2d12; }

.info-bloecke { margin-top: 22px; display: grid; gap: 10px; }
.info-block { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.info-block summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; color: var(--muted); }
.info-block p { font-size: 0.85rem; color: var(--muted); margin: 10px 0; }
.info-block table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.info-block td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.info-block td.betrag { text-align: right; font-variant-numeric: tabular-nums; }

.ergebnis { display: flex; gap: 18px; justify-content: flex-end; margin: 24px 0; flex-wrap: wrap; }
.ergebnis div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; min-width: 220px; }
.ergebnis span { display: block; font-size: 0.78rem; color: var(--muted); }
.ergebnis strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ergebnis .saldo { border-color: var(--accent); }
.ergebnis .saldo strong { color: #b91c1c; }
.ergebnis .saldo strong.guthaben { color: var(--accent-ink); }

/* Abschluss-Knopf am Ende der Formularspalte. Nötig, solange die Ergebnis-Spalte
   rechts danebensteht: Die Formularspalte endete sonst ohne sichtbaren nächsten
   Schritt, und man scrollt zurück nach oben. Sobald das Raster einspaltig
   umbricht, folgt die Ergebnis-Karte mit ihrem eigenen Knopf direkt darunter –
   dann stünden zwei gleiche Knöpfe kurz hintereinander (s. Ausblendung unten). */
.abschluss-knopf { margin-top: 24px; }

@media (max-width: 900px) {
  .finale { grid-template-columns: 1fr; }
  .finale-ergebnis { position: static; }
  .abschluss-knopf { display: none; }
  .pruef-tabelle { font-size: 0.82rem; }
  .feldzeile { grid-template-columns: 1fr; }
}

/* ---------- Schritt 4: Dokumente & Gate ---------- */
.fertig-raster { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.dokumente { display: grid; gap: 16px; }

.doc-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.doc-karte summary {
  cursor: pointer; font-weight: 700; padding: 16px 22px; font-size: 0.98rem;
  background: var(--ink); color: #dbe3f0; list-style-position: inside;
}
.doc-karte[open] summary { border-bottom: 1px solid var(--line); }
.papier { background: #fff; padding: 34px 38px; font-size: 0.92rem; line-height: 1.65; color: #1a2233; }
.papier p { margin: 0 0 14px; }
.d-meta { color: #55607a; font-size: 0.82rem; margin-bottom: 20px; }

/* Anschreiben im Briefstil */
.d-datum { text-align: right; color: #55607a; font-size: 0.85rem; margin-bottom: 4px; }
.d-absender { color: #55607a; font-size: 0.8rem; border-bottom: 1px solid #d6dbe6; padding-bottom: 6px; margin-bottom: 26px; }
.d-empfaenger { margin-bottom: 34px; }
.d-betreff { margin-bottom: 22px; }
.d-betreff strong { font-size: 1.05rem; }
.d-betreff small { color: #55607a; }
/* Ergebnisbox im Anschreiben. Die Farbe folgt dem Ergebnis, nicht dem Layout:
   Eine Nachzahlung ist für den Mieter keine gute Nachricht und darf nicht wie
   eine Erfolgsmeldung aussehen. Grün bleibt dem Guthaben vorbehalten. */
.d-ergebnisbox {
  background: #f4f6f9; border: 1px solid #d6dbe6; border-left: 4px solid #8a93a8;
  border-radius: 6px; padding: 16px 18px; margin: 0 0 16px;
}
.d-ergebnisbox.ist-guthaben { border-left-color: #10c98f; }
.d-ergebnisbox.ist-nachzahlung { border-left-color: #1a2233; }
.d-ergebnisbox div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.d-ergebnisbox span { color: #1a2233; font-size: 0.95rem; font-weight: 700; }
.d-ergebnisbox strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-ergebnisbox.ist-guthaben strong { color: #0f7a5a; }
.d-ergebnisbox small { display: block; color: #55607a; font-size: 0.78rem; margin-top: 6px; }
.d-gruss { margin-bottom: 48px; }
.d-unterschrift { border-top: 1px solid #8a93a8; display: inline-block; padding-top: 4px; color: #55607a; font-size: 0.8rem; min-width: 220px; margin-bottom: 18px; }
.tab-scroll { overflow-x: auto; }
.d-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.d-tabelle th { text-align: left; border-bottom: 2px solid #1a2233; padding: 8px 6px; white-space: nowrap; }
.d-tabelle td { border-bottom: 1px solid #d6dbe6; padding: 8px 6px; vertical-align: top; }
.d-tabelle td.betrag, .d-tabelle th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-tabelle tfoot td { font-weight: 700; border-bottom: none; padding-top: 12px; }
.d-saldo td { font-size: 1.02rem; border-top: 2px solid #1a2233; }
.d-fuss { font-size: 0.74rem; color: #55607a; margin-top: 20px; }
.d-raus td { color: #8a93a8; }
.d-raus td:first-child { text-decoration: line-through; }

.fertig-seite { position: sticky; top: 84px; display: grid; gap: 14px; }
.gate-karte {
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 24px;
  border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(16, 201, 143, 0.18);
}
.gate-karte h2 { margin: 0 0 8px; font-size: 1.05rem; }
.gate-karte > p { color: #aeb9cf; font-size: 0.88rem; margin: 0 0 16px; }
/* Das E-Mail-Feld ist der eine Eingabepunkt in einer dunklen Karte voller Text.
   Ein halbtransparentes Feld auf dunklem Grund verschwindet darin, deshalb hier
   weißes Papier mit Akzentrahmen: Es liest sich als das Feld, in das man
   schreiben soll. */
.gate-label { display: block; font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.gate-label input {
  display: block; width: 100%; margin-top: 8px; border: 2px solid var(--accent); border-radius: 10px;
  padding: 14px 14px; font: inherit; font-size: 1.02rem; font-weight: 600;
  background: #fff; color: var(--ink);
  box-shadow: 0 0 0 4px rgba(16, 201, 143, 0.16);
}
.gate-label input::placeholder { color: #97a1b5; font-weight: 400; }
.gate-label input:focus { outline: 3px solid #7ff0cf; outline-offset: 1px; border-color: var(--accent); }
/* Rot erst nach dem Verlassen des Feldes: Beim Tippen ist jede halbe Adresse
   ungültig, und ein mitwanderndes Rot liest sich als Vorwurf. */
.gate-label input:invalid:not(:placeholder-shown):not(:focus) { border-color: #fb7185; box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.18); }
.gate-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 0.78rem; color: #aeb9cf; line-height: 1.5; margin-bottom: 14px; cursor: pointer; }
.gate-checkbox input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.gate-checkbox a { color: #7ff0cf; }
.versand-status { min-height: 1.3em; font-size: 0.85rem; margin-top: 12px; color: #aeb9cf; }
.versand-status.ok { color: #7ff0cf; font-weight: 700; }
.versand-status.fehler { color: #fda4af; font-weight: 700; }

.ablage-hinweis { font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin: 0; }
.ablage-hinweis a { color: #0d9d70; }

.upsell-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.upsell-karte h3 { margin: 0 0 6px; font-size: 0.98rem; letter-spacing: -0.01em; }
.upsell-karte p { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; }
.upsell-karte.demnaechst { border-style: dashed; }
.upsell-karte.demnaechst p { margin-bottom: 0; }

@media (max-width: 900px) {
  .fertig-raster { grid-template-columns: 1fr; }
  .fertig-seite { position: static; }
  .papier { padding: 22px 18px; }
}

/* Auf breiten Schirmen passt die Aufteilungsübersicht ins Blatt: umbrechen
   statt horizontal scrollen. Scrollen bleibt nur die Notlösung für schmal. */
.d-tabelle th { white-space: normal; }
.d-tabelle-aufteilung td:nth-child(3) { overflow-wrap: anywhere; }
@media (min-width: 901px) {
  .tab-scroll { overflow-x: visible; }
}

/* Claim */
.claim {
  display: inline-block; background: #f0fdf7; border: 1px solid #bbecd9; color: #14532d;
  border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 700; margin: 0 0 18px;
}

/* Arbeits-Overlay (Rechnen, PDF-Versand) */
.arbeits-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(11,18,32,0.72); backdrop-filter: blur(3px);
}
.arbeits-overlay[hidden] { display: none; }
.arbeits-karte {
  background: var(--card); border-radius: var(--radius); padding: 32px 40px; text-align: center;
  display: grid; justify-items: center; gap: 6px; max-width: 420px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.arbeits-karte .spinner { margin-bottom: 8px; }
.arbeits-karte strong { font-size: 1.02rem; }
.arbeits-karte small { color: var(--muted); font-size: 0.85rem; }
.arbeits-karte .balken { width: 220px; }
body.arbeit-laeuft { overflow: hidden; }

/* Schritt 5: Bestätigung */
.bestaetigung-raster { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.bestaetigung-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 34px; box-shadow: var(--shadow); }
.bestaetigung-karte h2 { margin: 0 0 18px; font-size: 1.1rem; letter-spacing: -0.01em; }
.haken {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #d9f7ec; color: var(--accent-ink); font-size: 1.6rem; font-weight: 800; margin-bottom: 16px;
}
.bestaetigung-schritte { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 10px; font-size: 0.92rem; color: #33415e; }
@media (max-width: 900px) {
  .bestaetigung-raster { grid-template-columns: 1fr; }
}

/* Schritt 6: fertige Abrechnung + bezahlter Postversand */
.pv-kopf { display: flex; gap: 18px; align-items: flex-start; }
.pv-kopf .haken { flex-shrink: 0; margin: 4px 0 0; }
.pv-kontext { color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; margin: 6px 0 24px; }
.pv-quittung {
  background: #f0fdf7; border: 1px solid #bbecd9; color: #14532d;
  border-radius: 12px; padding: 12px 16px; font-size: 0.88rem; font-weight: 600; margin: 0 0 20px;
}

/* Dokument-Karte: das Erfolgserlebnis. Sie bleibt in jedem Zustand stehen,
   auch nach dem Kauf, damit das PDF jederzeit wieder erreichbar ist. */
.pv-dok-kopf { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 14px; }
.pv-dok-kopf h2 { margin-bottom: 4px; }
.pv-dok-sub { color: var(--muted); font-size: 0.85rem; margin: 0; max-width: 44ch; }
.pv-dok-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-vorschau { margin: 4px 0 12px; }
.pv-vorschau iframe {
  display: block; width: 100%; height: clamp(420px, 70vh, 820px);
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}

/* Ansicht A: einspaltiger Erzählfluss (Angebot -> Trenner -> Ergebnis). */
.pv-ansicht { display: grid; gap: 18px; }

/* Angebots-Karte: Leistungen links, Preisinfo rechts - Information, kein
   Bestellformular. Der Kauf passiert erst in Ansicht B. */
/* stretch statt start: Die linke Spalte wird auf die Höhe der Preisbox gezogen,
   sodass der Knopf unten mit ihr abschließt statt kurz unter der Liste zu
   kleben. `space-between` schiebt ihn dorthin, `justify-items: center` stellt
   ihn mittig unter den Text. */
.pv-angebot-raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: stretch; margin-top: 6px; }
.pv-angebot-links { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }

/* Preisbox als Blickfang: Seit die Angebots-Karte den Seitenanfang bildet, ist
   der Preis das Erste, wonach gesucht wird. Dunkler Grund wie die Bestellkarte
   im nächsten Schritt - in der hellen Karte ist das der stärkste verfügbare
   Kontrast, und die Beträge stehen im selben leuchtenden Grün wie dort der
   Gesamtpreis. Der Fußtext steht hell statt grau: "alles inklusive, kein Abo"
   ist die Aussage, die den Preis trägt, kein Kleingedrucktes. */
.pv-preisinfo {
  background: var(--ink); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(11, 18, 32, 0.16);
}
.pv-preisinfo-titel {
  margin: 0 0 8px; color: #7ff0cf; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pv-preisinfo-lead { margin: 0 0 6px; color: #dbe3f0; font-size: 0.85rem; line-height: 1.45; }
.pv-preiszeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.9rem;
}
.pv-preiszeile:last-of-type { border-bottom: none; }
.pv-preiszeile span { color: #eef2f9; font-weight: 600; }
/* nowrap: Der größere Betrag brach auf schmalen Schirmen sonst zwischen Zahl
   und Euro-Zeichen um. Lieber bricht die Bezeichnung links eine Zeile mehr. */
.pv-preiszeile strong {
  font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 800; color: #7ff0cf;
  white-space: nowrap;
}
.pv-preisinfo-fuss { margin: 12px 0 0; font-size: 0.79rem; line-height: 1.5; font-weight: 600; color: #dbe3f0; }
.pv-cta { display: grid; gap: 10px; justify-items: center; }
.pv-cta .btn { padding: 13px 26px; font-size: 1rem; }
.pv-zurueck { margin-bottom: 14px; }

/* Sichtbare Grenze zwischen kostenlosem Ergebnis und bezahlter Zusatzleistung. */
.pv-trenner {
  display: flex; align-items: center; gap: 14px; margin: 6px 0;
  color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
}
.pv-trenner::before, .pv-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.pv-kicker { color: var(--accent-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.pv-leistungen { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 11px; font-size: 1.02rem; font-weight: 600; }
.pv-leistungen li::before { content: "✓"; color: var(--accent-ink); font-weight: 800; margin-right: 10px; }

.pv-abschnitt { margin: 22px 0 10px; font-size: 0.9rem; letter-spacing: -0.01em; }

/* Vorbefüllte Anschrift in Briefoptik statt fünf leerer Felder. */
.pv-adresse { background: #f7faf9; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.pv-anschrift { white-space: pre-line; line-height: 1.5; margin: 0 0 8px; font-size: 0.95rem; }
.pv-textknopf { border: 0; background: none; padding: 0; font: inherit; font-size: 0.85rem; font-weight: 700; color: #0d9d70; cursor: pointer; }
.pv-textknopf:hover { text-decoration: underline; }
#pv-adresse-formular > .btn { margin-top: 4px; }

/* Versandarten als klickbare Optionskarten; .gewaehlt setzt das JS. */
.pv-option {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  cursor: pointer; color: var(--text); font-size: 0.95rem;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pv-option:hover { border-color: #bbecd9; }
.pv-option.gewaehlt { border-color: var(--accent); background: #f0fdf7; box-shadow: 0 0 0 3px rgba(16, 201, 143, 0.14); }
.pv-option input { margin-top: 3px; }
.pv-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.pv-option-text small { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 400; margin-top: 2px; }
.pv-badge {
  display: inline-block; background: #d9f7ec; color: var(--accent-ink); border-radius: 999px;
  font-size: 0.68rem; font-weight: 800; padding: 2px 8px; vertical-align: 2px; margin-left: 4px;
}
.pv-zusatz { border-style: dashed; }
.pv-preis { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }

/* Kaufbestätigung: hell, mit Akzentrahmen und grünem Verlauf am Kopf. Auf der
   Seite ist nur noch die Nova-Karte dunkel - sie soll den Blick führen. Diese
   Karte bleibt trotzdem klar sichtbar: 2px Akzentrahmen wie .karte.wichtig und
   der grüne Anlauf oben tragen das Erfolgssignal ohne dunkle Fläche. */
.pv-bestaetigung {
  background: linear-gradient(180deg, #f0fdf7 0%, var(--card) 140px);
  color: var(--text); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow);
}
.pv-bestaetigung[hidden] { display: none; }
.pv-best-kicker {
  margin: 0 0 6px; color: var(--accent-ink); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pv-bestaetigung h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text); }
.pv-best-text { margin: 8px 0 0; color: #33415e; font-size: 0.9rem; line-height: 1.55; max-width: 56ch; }
.pv-best-text:empty { display: none; }

/* Statuskette: bildet die echte Zustandsfolge ab (wartet_auf_zahlung ->
   abgelegt_zur_freigabe -> versendet). "Bei der Post" leuchtet erst, wenn der
   Brief tatsächlich abgegeben wurde, nicht schon in der Postbox. */
.pv-kette {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
/* Muss nach der display-Regel stehen, sonst gewinnt `display: grid`. */
.pv-kette[hidden] { display: none; }
.pv-kette li {
  position: relative; display: grid; justify-items: center; gap: 9px;
  text-align: center; font-size: 0.82rem; font-weight: 600;
}
.pv-punkt {
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #c3cbdd; background: var(--card);
}
/* Die Verbindung gehört zur Station links davon: Sie ist durchgezogen, sobald
   diese Station erledigt ist - so wächst die Linie mit dem Fortschritt. */
.pv-kette li::after {
  content: ""; position: absolute; top: 5px;
  left: calc(50% + 12px); right: calc(-50% + 12px);
  border-top: 2px dotted #c3cbdd;
}
.pv-kette li:last-child::after { content: none; }

.pv-kette li[data-stand="offen"] { color: var(--muted); font-weight: 500; }
.pv-kette li[data-stand="erledigt"] .pv-punkt { background: var(--accent); border-color: var(--accent); }
.pv-kette li[data-stand="erledigt"]::after { border-top-style: solid; border-top-color: var(--accent); }
.pv-kette li[data-stand="aktiv"] { color: var(--accent-ink); font-weight: 800; }
.pv-kette li[data-stand="aktiv"] .pv-punkt {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(16, 201, 143, 0.22);
}
/* Solange nachgefragt wird (verfolgeZustellung), pulsiert die laufende Station
   leise - sonst stünde die Seite stumm da, während der Webhook arbeitet. */
.pv-kette li[data-wartet] .pv-punkt { animation: pv-puls 1.8s ease-in-out infinite; }
@keyframes pv-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 201, 143, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(16, 201, 143, 0); }
}

/* Bestellzeilen: Aufbau wie in der Preisbox, nur auf hellem Grund. */
.pv-best-details { margin-top: 22px; border-top: 1px solid var(--line); }
.pv-best-details[hidden] { display: none; }
.pv-best-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem;
}
.pv-best-zeile[hidden] { display: none; }
/* Die Bezeichnungen sind kurz ("Versand als", "Brief an"): Umbricht dort etwas,
   dann der lange Wert rechts, nicht das zweiwortige Label links. */
.pv-best-zeile span { color: var(--muted); white-space: nowrap; }
.pv-best-zeile strong { color: var(--text); text-align: right; }
.pv-best-zeile.summe strong {
  color: var(--accent-ink); font-size: 1.1rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pv-best-fuss { margin: 14px 0 0; color: var(--muted); font-size: 0.76rem; }

/* Nova-Karte: übernimmt nach dem Kauf den Platz der Dokument-Karte und ist die
   einzige dunkle Fläche dieser Ansicht - genau deshalb führt sie den Blick.
   Sie trägt die Optik der Landingpage-Bühne (Lichtkegel in Akzentgrün und
   Himmelblau) und liest damit als Markenfläche, nicht als Systemmeldung. */
.pv-nova {
  background:
    radial-gradient(620px 320px at 12% -20%, rgba(16, 201, 143, 0.30), transparent 62%),
    radial-gradient(560px 340px at 88% 0%, rgba(56, 189, 248, 0.22), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-radius: var(--radius); padding: 34px 32px; color: #fff;
  box-shadow: 0 14px 40px rgba(11, 18, 32, 0.20);
}
.pv-nova[hidden] { display: none; }
.pv-nova-kicker {
  display: inline-block; margin: 0 0 14px;
  background: rgba(16, 201, 143, 0.14); color: #7ff0cf; border: 1px solid rgba(16, 201, 143, 0.35);
  border-radius: 999px; padding: 6px 14px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Text links, Knopf rechts auf Mittelhöhe: Sonst steht die rechte Hälfte der
   Karte leer, weil die Zeilen für die Lesbarkeit begrenzt bleiben müssen. */
.pv-nova-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.pv-nova-knopf { white-space: nowrap; }
.pv-nova h2 {
  margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.22;
  letter-spacing: -0.02em; font-weight: 800; max-width: 30ch;
}
/* Verlaufsschrift wie in der Hero-Überschrift der Startseite. */
.pv-nova-grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.pv-nova-text { margin: 14px 0 0; color: #dbe3f0; font-size: 0.95rem; line-height: 1.6; max-width: 54ch; }

/* Dokument-Karte nach dem Kauf: ohne Vorschau, aber nicht unscheinbar. Kräf-
   tigerer Rahmen als die übrigen Karten und ein dunkler Knopf halten sie gut
   sichtbar; die Führung behält trotzdem der Verlaufsknopf der Nova-Karte. */
.pv-dokument-kompakt { border-color: #c3cbdd; padding: 26px 28px; }
.pv-dokument-kompakt .pv-dok-kopf { margin-bottom: 0; align-items: center; }
.pv-dokument-kompakt h2 { font-size: 1.15rem; margin-bottom: 5px; }
.pv-dokument-kompakt .pv-dok-sub { font-size: 0.88rem; }

/* Erstattung und fehlgeschlagene Zahlung: kein grünes Erfolgskostüm. Rahmen und
   Kopf wechseln auf den Warnton der Seite (.warnbanner), die Kette entfällt -
   es gibt keinen Fortschritt mehr zu zeigen. */
.pv-bestaetigung.fehler {
  background: linear-gradient(180deg, #fff7ed 0%, var(--card) 140px);
  border-color: #fdba74;
}
.pv-bestaetigung.fehler .pv-best-kicker { color: #9a3412; }
.pv-bestaetigung.fehler .pv-kette { display: none; }
.pv-bestaetigung.fehler .pv-best-zeile.summe strong { color: #be123c; }

/* Bestellkarte: unmittelbar vor dem Bestellknopf stehen Positionen, Gesamtpreis
   und wesentliche Merkmale (§ 312j Abs. 2 BGB). */
.pv-bestellung h2 { margin-bottom: 10px; }
.pv-bestellung .gate-checkbox { margin-top: 16px; }
/* Steuerausweis unter dem Gesamtpreis: enger und leiser als die Positionen,
   damit der Bruttobetrag der Anker der Bestellung bleibt. */
.pv-steuer { margin-top: 2px; }
.pv-steuer .erg-zeile { border-bottom: none; padding: 3px 0; }
.pv-steuer .erg-zeile span { font-size: 0.78rem; }
.pv-steuer .erg-zeile strong { font-size: 0.82rem; font-weight: 600; color: #aeb9cf; }
.pv-ust, .pv-vergleich, .pv-vertrauen { color: #8d99b2; font-size: 0.76rem; }
.pv-ust { margin: 12px 0 0; }
.pv-vergleich { margin: 8px 0 0; }
.pv-vergleich:empty { display: none; }
.pv-vertrauen { margin: 12px 0 0; }
.pv-sicher { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 0.8rem; color: #aeb9cf; }
.pv-sicher li::before { content: "✓"; color: #7ff0cf; font-weight: 800; margin-right: 8px; }
/* ---------- Handy ----------
   Auf einem 390er-Schirm füllten Schrittkette, Überschrift, Claim und
   Einleitungstext das gesamte erste Bild; das Hochladefeld lag darunter. Hier
   schrumpft die Kette auf eine Zeile, die Überschrift auf zwei, und das
   Hochladefeld rutscht über die Erklärtexte. */
@media (max-width: 620px) {
  .tool { padding-top: 20px; padding-bottom: 56px; }
  .tool h1 { font-size: 1.5rem; max-width: none; line-height: 1.22; }

  /* Schrittkette: eine Zeile, nur der laufende Schritt trägt seinen Namen.
     Was nicht hineinpasst, bleibt seitlich erreichbar. */
  .stepper {
    flex-wrap: nowrap; overflow-x: auto; margin-bottom: 20px; gap: 6px;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .stepper li { flex: 0 0 auto; font-size: 0.82rem; }
  .stepper li button { padding: 7px 11px; gap: 7px; }
  .stepper li:not(.aktiv) .tit { display: none; }

  /* Bilanzleiste: der Seitenkopf ist hier nur 56 px hoch. Der Knopf nimmt die
     volle Breite, damit er auf dem Handy nicht neben dem Text zerquetscht
     wird - beide bisherigen Abbrüche in Schritt 2 kamen von Mobilgeräten. */
  .pruef-bilanz { top: 56px; padding: 12px 14px; gap: 10px; }
  .pruef-bilanz-text strong { font-size: 0.98rem; }
  .pruef-bilanz-text span { font-size: 0.82rem; }
  .pruef-bilanz .btn { width: 100%; }

  /* Prüftabelle auf dem Handy: Bis zum 25.08.2026 war sie hier breiter als
     der Schirm (557 px bei 390 px Viewport), die Seite scrollte seitlich und
     die Betragsspalte stand AUSSERHALB des Bildes - der Vermieter sah Haken
     und Einstufungen, aber nicht das Geld. Beide Abbrüche in Schritt 2 kamen
     von Mobilgeräten.
     Der Wegfall der Quellenspalte allein genügt nicht: Ohne festes Layout
     wächst die Tabelle mit dem längsten Namen und dem größten Betrag weiter
     über den Rand hinaus. "fixed" bindet sie an die Schirmbreite, der Rest
     bricht um. */
  .pruef-tabelle { table-layout: fixed; width: 100%; }
  .pruef-tabelle td, .pruef-tabelle th { padding: 10px 8px; }
  /* Nur Datenzellen dürfen mitten im Wort brechen. Die Kopfzeile nicht: Dort
     erzeugte es "U ML EG EN". Sie wird stattdessen enger gesetzt, damit
     "Einstufung" in eine und "Anteil Wohnung" in zwei saubere Zeilen passt. */
  /* Trennen statt hart brechen: "Hausrein./Hauswart" wird sonst mitten im
     Wort zerschnitten. Das Dokument ist lang="de", die Trennung greift. */
  .pruef-tabelle td { overflow-wrap: break-word; hyphens: auto; }
  .pruef-tabelle th { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
  .pruef-tabelle td:first-child, .pruef-tabelle th:first-child { width: 30px; padding-right: 0; }
  .pruef-tabelle td:nth-child(3), .pruef-tabelle th:nth-child(3) { width: 96px; }
  /* Breit genug für den größten realistischen Betrag ("11.374,46 €") in einer
     Zeile - ein umbrochenes Euro-Zeichen sieht nach Fehler aus. */
  .pruef-tabelle td.betrag, .pruef-tabelle th:nth-child(4) { width: 90px; padding-left: 4px; }
  /* Beträge und Plaketten dürfen hier umbrechen, sonst schieben sie die
     Tabelle trotz fester Spaltenbreiten wieder auf. */
  .pruef-tabelle td.betrag { white-space: normal; }
  .pruef-tabelle .pill { white-space: normal; }

  /* Reihenfolge in Schritt 1: Hochladefeld vor die Erklärtexte. */
  #schritt-1 { display: flex; flex-direction: column; }
  #schritt-1 h1 { order: 1; }
  #schritt-1 .claim { order: 2; align-self: flex-start; }
  /* Gleiche Ordnungszahl wie .claim: Die Abweisung steht im Quelltext danach
     und landet dadurch genau zwischen Claim und Hochladefeld - dort, wo sie
     auf dem Handy nicht zu übersehen ist. */
  #schritt-1 #abweisung { order: 2; }
  #schritt-1 .dropzone { order: 3; }
  #schritt-1 #fortschritt { order: 4; }
  #schritt-1 #wartekarten { order: 5; }
  #schritt-1 #status { order: 6; }
  #schritt-1 .tool-intro { order: 7; margin: 18px 0 0; font-size: 0.92rem; }
  #schritt-1 .daten-details { order: 8; margin-top: 12px; }

  /* Schmaler heißt mehr Zeilenumbrüche; die Bühne braucht entsprechend mehr
     Grundhöhe, sonst springt die Seite beim Kartenwechsel doch. Gemessen bei
     430 px Viewport: höchste Karte 198 px. */
  /* Einspaltig umbricht der Text stärker; gemessen bei 430 px Viewport ist die
     Ablaufkarte mit 218 px die höchste. */
  .wk-buehne { min-height: 220px; }
  /* Einspaltig: Für zwei Spalten ist kein Platz, die Überschrift stünde sonst
     als Wortsalat über einem handtuchschmalen Textblock. */
  .wartekarte { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }

  .claim { margin-bottom: 14px; font-size: 0.8rem; padding: 7px 14px; }
  .dropzone { padding: 26px 18px; }
  .dropzone strong { font-size: 1.05rem; }
  .dropzone .dz-sub { font-size: 0.82rem; }
  .dz-knopf { width: 100%; padding: 13px 18px; }

  .karte { padding: 18px; }
  .tool-intro { font-size: 0.95rem; margin-bottom: 22px; }

  /* Vollbreite Knöpfe tragen längere Beschriftungen ("Abrechnung kostenlos
     erstellen"). Bei 360 px Schirmbreite brauchten Karten- und Knopfpolsterung
     zusammen 132 px, der Text wäre zweizeilig umgebrochen. Mit 104 px bleibt er
     bis hinunter zu 350 px Schirmbreite in einer Zeile. */
  .ergebnis-karte { padding: 18px; }
  .btn-breit { padding-left: 16px; padding-right: 16px; }
}

/* Schritt 4 auf dem Handy: Die Seitenspalte landet im Umbruch hinter den drei
   Dokumenten, damit auch das E-Mail-Feld. `display: contents` löst die Spalte
   auf, sodass sich ihre Karten einzeln einsortieren lassen: erst das Feld für
   das PDF, dann die Dokumente, dann das Übrige. */
@media (max-width: 900px) {
  #schritt-4 .fertig-raster { display: flex; flex-direction: column; }
  #schritt-4 .fertig-seite { display: contents; }
  #schritt-4 .gate-karte { order: 1; }
  #schritt-4 #ablage-hinweis { order: 2; }
  #schritt-4 .dokumente { order: 3; }
  #schritt-4 .upsell-karte { order: 4; }
  #schritt-4 #btn-zurueck-3 { order: 5; }
}

/* Schritt 6 auf dem Handy: Ansicht A ist ohnehin einspaltig; in Ansicht B
   stapelt der generische .finale-Umbruch Formular über Bestellkarte. */
@media (max-width: 900px) {
  .pv-angebot-raster { grid-template-columns: 1fr; }
  /* Nebeneinander bliebe für den Text zu wenig übrig; der Knopf rückt unter
     den Absatz und über die volle Breite. */
  .pv-nova-raster { grid-template-columns: 1fr; gap: 22px; }
  .pv-nova-knopf { display: block; width: 100%; text-align: center; }
}
@media (max-width: 620px) {
  .pv-kopf { gap: 12px; }
  .pv-kopf .haken { width: 40px; height: 40px; font-size: 1.25rem; }
  .pv-dok-aktionen { display: grid; width: 100%; gap: 8px; }
  .pv-dok-aktionen .btn { width: 100%; text-align: center; }
  .pv-nova { padding: 24px 20px; }
  .pv-nova h2 { max-width: none; }
  .pv-option { grid-template-columns: auto 1fr; }
  .pv-option .pv-preis { grid-column: 2; justify-self: start; }

  /* Drei Stationen nebeneinander ergeben auf 390 px drei Wortsalat-Spalten.
     Untereinander bleiben die Beschriftungen einzeilig, die Verbindung kippt
     mit ihnen von waagerecht auf senkrecht. */
  .pv-bestaetigung { padding: 20px; }
  .pv-kette { grid-template-columns: 1fr; gap: 16px; }
  .pv-kette li {
    grid-template-columns: auto 1fr; justify-items: start; align-items: center;
    text-align: left; gap: 12px;
  }
  .pv-kette li::after {
    top: calc(50% + 11px); bottom: calc(-50% - 5px);
    left: 5px; right: auto;
    border-top: none; border-left: 2px dotted rgba(255, 255, 255, 0.22);
  }
  .pv-kette li[data-stand="erledigt"]::after {
    border-top: none;
    border-left-style: solid; border-left-color: rgba(255, 255, 255, 0.28);
  }
}