/* Keystate - Testphase
 *
 * Der Wizard, den ein Interessent OHNE Zugang durchklickt
 * (web/seiten/testphase.py, vorlagen/testphase_*.html). Diese Datei liegt
 * AUF keystate.css und ergaenzt es nur dort, wo das Haus nichts hat: die
 * einspaltige Buehne, das Zeichen im Kartenkopf, die Ablageflaechen, die
 * Bildwahl, der warme Mailrahmen und der Versandknopf.
 *
 * Was hier NICHT steht, steht mit Absicht nicht hier: Karten, Knoepfe,
 * Felder, Kaestchen, Meldungen, Pillen, Fotokacheln und die Schrittleiste
 * kommen unveraendert aus keystate.css. Der Prototyp
 * (app/testphase/prototyp.py) brachte fuer jedes davon eine zweite Fassung
 * mit - neun Radien statt der drei aus docs/marke-und-design.md, eigene
 * farbige Blauschatten, ein zweites Grau (#eef1f4 statt --grund), --warn
 * statt --schlecht und eine eigene Knopfklasse `.cta` neben `.knopf`.
 * Genau das ist der Grund fuer diese Datei UND fuer ihre Kuerze: Ein
 * zweiter Hausstil neben dem Hausstil ist kein Stil mehr.
 *
 * Schriftgroessen liegen eine Stufe ueber dem Dashboard. Ein Wizard zeigt
 * einen Gedanken je Bild, ein Dashboard dreissig Zahlen auf einmal - das
 * sind zwei Gattungen. Label-Gewicht bleibt bei 600: Der Prototyp setzte
 * 700, und fett gesetzte Beschriftungen ueberstimmen die Eingabe, um die
 * es geht.
 */

/* ---------- Die Buehne ---------- */

/* Eine Spalte, mittig, keine Nebenspalte. 820px, weil die Mail-Vorschau in
   Schritt 3 rund 600px breit ist und in ihrer Karte noch Polster braucht -
   schmaler waere die Mail beschnitten, breiter faengt der Blick an zu
   wandern. Als Klasse und nicht als style="" im Rahmen: Der Umbruchpunkt
   unten muss das Polster zuruecknehmen koennen. */
.buehne { max-width: 820px; margin: 0 auto; }

/* Der Schriftzug neben dem Zeichen. Dieselben Werte wie `.gruss h1`, aber
   kein h1: Die Ueberschrift der Seite ist der Satz in der Karte ("Deine
   Objekte"), nicht der Produktname. */
.wortmarke { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }

/* ---------- Der Kartenkopf eines Schritts ---------- */

/* Ein Zeichen je Schritt, LINKS neben der Ueberschrift und nicht mittig
   darueber. Im Prototyp stand dort eine 78px-Kachel mit einem Emoji, 22px
   gerundet und mit blauem Schein - drei Abweichungen auf einmal: 22px ist
   im Haus der Radius von KARTEN (Kacheln sind 14px), einen farbigen Schein
   traegt hier nichts, und eine grosse mittige Kachel ueber jeder
   Ueberschrift ist die Form, die jede zweite Oberflaeche gerade hat.
   Links, 52px, Hausradius, ohne Schein - und mit einem Strichzeichen wie
   der Rest des Werkzeugs statt eines Emojis, das auf jedem Betriebssystem
   anders aussieht. */
.karte-kopf .sym {
  flex: none; width: 52px; height: 52px; border-radius: var(--r-klein);
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-tief) 100%);
  display: grid; place-items: center; color: #fff;
}
.karte-kopf .sym svg { width: 26px; height: 26px; }

/* Geschafft: dasselbe Zeichen, aber in der Signalfarbe eines Zustands -
   und ein Zustand ist es hier auch, der Lauf ist fertig. Flaeche und Ton
   sind die aus `.meldung.gut`, damit die Seite nicht zwei Gruens kennt. */
.karte-kopf .sym.geschafft { background: #e6f7ef; color: var(--gut); }

/* Die einzige Ueberschrift der Seite. 23px statt der 21px aus
   docs/marke-und-design.md: eine Stufe, nicht zwei. */
.buehne .karte-kopf h1 {
  font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.5px;
  line-height: 1.25;
}
.buehne .karte-kopf p {
  margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-leise);
}
/* Der Kopf traegt zwei Zeilen und ist damit hoeher als die Kopfzeile im
   Werkzeug - das Zeichen soll oben mitgehen und nicht in der Mitte
   schweben. */
.buehne .karte-kopf { align-items: flex-start; margin-bottom: 16px; }

/* Fliesstext im Wizard, eine Stufe ueber den 13.5px des Hauses. */
.buehne .absatz { font-size: 14px; line-height: 1.6; margin: 0 0 16px; }

/* ---------- Formulare ---------- */

/* Ein Formular mit fuenf Feldern darf groesser sein als eine
   Einstellungsseite mit dreissig. Farben, Rahmen und Radien bleiben die
   des Hauses (`.feld` in keystate.css) - hier stehen nur die Maße. */
.buehne .feld label, .buehne .feld .beschriftung { font-size: 13px; }
.buehne .feld input[type=text], .buehne .feld input[type=email],
.buehne .feld input[type=password], .buehne .feld textarea {
  font-size: 14.5px; padding: 12px 14px;
}
.buehne .feld .hilfe { font-size: 12.5px; }

/* Der Hinweis, dass es gerade laeuft, steht jetzt in `keystate.css` neben
   `.balken` - zusammen mit dem Laufbalken und der Knopfsperre. Dieser Rahmen
   laedt beide Dateien (Zeile 33 und 38), es fehlt hier also nichts.

   Umgezogen am 14.09.2026, weil die Regeln nur hier standen: Der
   Einrichtungs-Assistent brauchte dasselbe, und `fehler_melden.html` im
   Werkzeug trug `class="dauert"` schon, ohne dass es je etwas tat. Zwei
   Fassungen derselben Regel waeren zwei Stellen, an denen jemand die eine
   aendert. */

/* ---------- Ablageflaechen ---------- */

/* Gestrichelte Huelle wie `.datei-huelle` im Werkzeug, nur ohne datei.js:
   In der Testphase gibt es keinen Dateikorb und keine Warteschlange, es
   gibt eine Handlung. Die beiden Toene sind deshalb die des Hauses
   (#d8dee4 aus `.datei-huelle`, #fbfcfd aus `.expose-ablage`) und keine
   neuen. */
.ablage {
  border: 1.5px dashed #d8dee4; border-radius: var(--r-klein);
  background: #fbfcfd; padding: 24px 20px; text-align: center;
}
.ablage:focus-within { border-color: var(--ks); }
.ablage .ruf { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.ablage .dazu {
  font-size: 12.5px; color: var(--text-leise); line-height: 1.5;
  margin: 5px auto 0; max-width: 460px;
}
.ablage input[type=file] {
  display: block; width: 100%; max-width: 420px; margin: 14px auto 0;
  font-family: inherit; font-size: 13px; padding: 11px;
  border: 1.5px solid var(--linie); border-radius: var(--r-klein);
  background: var(--karte); color: var(--text);
}

/* Der Systemknopf sieht auf jedem Betriebssystem anders aus und faellt
   gegen alles andere auf der Seite ab ("Dateien auswaehlen | 5 Dateien").
   Ersetzt wird er NICHT - er bleibt der einzige Weg zur Dateiwahl und
   rueckt nur aus dem Bild. Die vier Zeilen sind die von `.nur-vorleser`
   (keystate.css): 1px und weggeschnitten statt `display:none`, denn
   display:none nimmt ihn auch aus dem Tabulator-Weg. Dass er den Fokus
   hat, zeigt danach `.ablage:focus-within` oben - dafuer gibt es die Regel
   schon.

   Beides haengt an `.ablage.js`, und die Klasse setzt das Skript in
   testphase_2.html. Ohne Javascript bleibt der Systemknopf sichtbar und
   der Ersatzknopf weg: Dann fuellt auch niemand die Auswahlzeile darunter,
   und ein Knopf ohne Rueckmeldung waere schlechter als der fremde. */
.ablage.js input[type=file] {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
  /* Polster, Rahmen und Rand muessen mit weg: Die Regel darueber gibt dem
     Feld 11px Polster und 1.5px Rahmen, und die halten es bei box-sizing
     auf 24px - sichtbar als grauer Fleck neben dem Knopf. */
  padding: 0; border: 0; margin: 0;
}
.ablage .datei-knopf { display: none; }
.ablage.js .datei-knopf {
  display: inline-flex; margin-top: 14px; cursor: pointer;
}

/* Was ausgewaehlt ist, in Klartext. Die Zahl in --ks-tief wie der
   Ladehinweis, die Dateinamen im Ton von `.dazu` darueber - sie sind der
   Beleg zur Zahl und nicht die Nachricht. `:empty` haelt den Abstand
   zurueck, solange nichts gewaehlt ist. */
.ablage .datei-wahl {
  margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--ks-tief);
}
.ablage .datei-wahl:empty { display: none; }
.ablage .datei-wahl .namen {
  display: block; margin-top: 4px; font-size: 12.5px; font-weight: 500;
  color: var(--text-leise); line-height: 1.5;
}
.ablage .datei-wahl .namen span { display: block; }

/* Ziehen und Fallenlassen: dieselbe Randfarbe wie `.ablage:focus-within`,
   damit die Flaeche fuer Maus und Tastatur dasselbe sagt. Der hellere
   Grund ist der von `.logo-buehne` weiter unten und kein neuer Ton. */
.ablage.drueber { border-color: var(--ks); background: #f7f9fa; }

/* Der Laufbalken steht ebenfalls in `keystate.css` (bei `.balken`). Was hier
   stand, war wortgleich - bis auf den Satz, der ihn erklaerte: In Schritt 2
   ist die Schaetzung aus der Anzahl der gewaehlten Dateien gerechnet
   (`testphase_2.html`), in Schritt 1 der Einrichtung aus nichts. Die
   Schaetzung gehoert in die Vorlage, die Bewegung ins Stylesheet. */

/* ---------- Schritt 1b: das gefundene Branding ---------- */

/* Logo oder Wortmarke, auf einer ruhigen Flaeche statt auf Weiss: Viele
   Maklerlogos sind selbst weiss hinterlegt und verschwanden sonst in der
   Karte. */
.logo-buehne {
  display: grid; place-items: center; min-height: 96px; padding: 16px;
  border: 1px solid var(--linie); border-radius: var(--r-klein);
  background: #f7f9fa;
}
.logo-buehne img { max-height: 64px; max-width: 260px; display: block; }
/* Kein Logo gefunden: Der Bueroname steht dann als Wortmarke im Mail-Kopf,
   und genau so sieht er hier auch aus. --text und nicht reines Schwarz,
   weil das Haus kein reines Schwarz hat. */
.logo-buehne .wortlogo {
  background: var(--text); color: #fff; border-radius: var(--r-klein);
  padding: 13px 22px; font-size: 18px; font-weight: 700; letter-spacing: -.3px;
}

/* Zwei Farbwaehler nebeneinander. `.farbe-feld` kommt aus dem Haus. */
.farbpaar { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Schritt 2: Objekte ---------- */

/* Ein Objekt ist ein aufklappbares Fach (`.aufklapp` aus dem Haus): Die
   Zeile zeigt Titel, Lage und Preis, das Formular darunter kommt erst auf
   Klick. Der Prototyp sprang dafuer auf eine eigene Adresse
   (?bearbeiten=3) und lud die Seite neu - bei fuenf Objekten fuenf
   Ladungen, um einen Preis zu tippen. */
.objekt-fach { border-top: 1px solid var(--linie); padding: 12px 0 4px; }
.objekt-fach:first-of-type { border-top: 0; }
.objekt-fach[open] { padding-bottom: 16px; }

/* Fehlt die Adresse der eigenen Objektseite, steht die Notiz an der
   ZUGEKLAPPTEN Zeile: Im Formular darunter laese sie nur, wer ohnehin
   schon aufgeklappt hat, und dann braucht er sie nicht mehr.

   Zweite `.unter`-Zeile (keystate.css) und keine Meldung: Es ist eine
   Auskunft und kein Fehler - ohne eigene Adresse zeigt der Knopf in der
   Mail auf die Objektseite, die Keystate baut. --ks-tief und 600 heben sie
   aus dem Leisen der Zeile darueber, ohne ein Signal zu setzen; die
   Signalfarben bleiben den Zustaenden. */
.objekt-fach > summary .ohne-link {
  color: var(--ks-tief); font-weight: 600; margin-top: 3px;
}

.vorschaubild {
  flex: none; width: 92px; height: 66px; border-radius: 10px;
  object-fit: cover; background: #f2f5f8;
}
/* Ohne Foto: dieselbe Flaeche, damit die Zeilen untereinander nicht
   verrutschen, mit dem Grund statt eines Platzhalterbildes. */
.vorschaubild.leer {
  display: grid; place-items: center;
  font-size: 11px; color: var(--text-leise); text-align: center;
}

/* Die Bildwahl - der beste Teil des Prototyps: Ein Klick auf ein Foto
   macht es zum Titelbild der Objektkarte in der Mail, und der Rahmen
   springt sofort mit, ohne Seitenwechsel und ohne Weg zum Server.
   Kacheln, Bild und Streifen sind die des Hauses (`.fotostreifen`,
   `.foto-kachel`, `.foto-bild`, `.foto-band`).

   Getragen wird die Rueckmeldung vom Kaestchen SELBST und nicht von
   Javascript: Der Radioknopf steht sichtbar im Band unter dem Bild, ist
   also auch dort Rueckmeldung, wo `:has()` fehlt. Der farbige Rahmen
   kommt oben drauf. Im Prototyp stand dafuer ein onchange-Handler mit
   '#1E93D6' und '#dfe5ea' im Attribut - zwei Farben, die in keinem
   Stylesheet auftauchen und beim naechsten Farbwechsel stehenbleiben. */
label.foto-kachel { cursor: pointer; }
.foto-kachel:has(input:checked) {
  border-color: var(--ks); box-shadow: inset 0 0 0 1px var(--ks);
}
.foto-kachel .foto-wahl {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 4px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-leise);
}
.foto-kachel .foto-wahl input {
  flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ks);
}
.foto-kachel:has(input:checked) .foto-wahl {
  color: var(--ks-tief); font-weight: 700;
}

/* ---------- Schritt 3: die Mail ---------- */

/* Der Rahmen traegt die Farbe der MAIL und nicht die von Keystate: Der
   Makler soll hier sich sehen und nicht uns. #F7F4EF ist der Grund des
   Warm-Plus-Designs (app/testphase/mails) und steht deshalb hier und
   nicht in keystate.css - dort waere es eine sechste Grundflaeche, die
   keine Seite des Werkzeugs benutzt. */
.mailrahmen.warm { background: #F7F4EF; }

/* KEINE feste Hoehe. Im Prototyp standen 1250px: Bei einem Objekt blieb
   darunter eine Handbreit leerer Rahmen, bei fuenf Objekten war die Mail
   nach der Haelfte abgeschnitten - also genau dort, wo die Objekte
   stehen, um die es geht. Jetzt ist der Rahmen so hoch, wie das Fenster
   hergibt, und scrollt in sich; der Deckel von 880px verhindert, dass er
   auf einem grossen Bildschirm alles andere aus dem Bild schiebt. Wer die
   Mail ganz sehen will, oeffnet sie ueber dem Rahmen in einem eigenen
   Fenster. */
.buehne .mailrahmen iframe { height: min(76vh, 880px); }

/* ---------- Schritt 4: was in der CSV stand ---------- */

/* Vier Zahlen aus dem Import. Als Kacheln und nicht als Satz, weil vier
   Zahlen in einem Satz niemand auseinanderhaelt - und weil eine davon
   (Dubletten) die Frage beantwortet, warum unten weniger stehen als oben.
   116px Mindestbreite: darunter bricht "Dubletten aussortiert" um. */
.werte {
  display: grid; gap: 10px; margin: 0 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 116px), 1fr));
}
.wert-kachel {
  background: #f7f9fa; border-radius: var(--r-klein); padding: 12px 14px;
}
.wert-kachel .zahl {
  font-size: 22px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1;
  color: var(--ks-tief); font-variant-numeric: tabular-nums;
}
.wert-kachel .label { font-size: 12px; color: var(--text-leise); margin-top: 3px; }

/* ---------- Schritt 5: der Versand ---------- */

/* Der eine Knopf des Wizards, der etwas Unwiderrufliches tut: Danach liegt
   die Mail in bis zu 200 Postfaechern. Gruen und nicht blau, weil die vier
   Schritte davor alle einen blauen Weiter-Knopf trugen und dieser keiner
   davon ist - er beendet den Lauf. Damit traegt die Signalfarbe auch hier
   einen Zustand und keine Dekoration, so wie es docs/marke-und-design.md
   verlangt. --gut und #0d7a51 sind dieselben beiden Toene wie in
   `.meldung.gut`, der Schatten ist der von `.knopf` in gruen - nicht
   staerker. */
.knopf.senden {
  background: linear-gradient(140deg, var(--gut) 0%, #0d7a51 100%);
  box-shadow: 0 4px 14px rgba(13,122,81,.28);
}

/* ---------- Enge Fenster ---------- */

@media (max-width: 900px) {
  /* 76vh sind auf einem Telefon rund 560px - genug fuer den Mailkopf und
     das erste Objekt, und mehr braucht die Entscheidung "sieht das nach
     mir aus" hier nicht. */
  .buehne .mailrahmen iframe { height: 60vh; }
}

@media (max-width: 560px) {
  /* Die Ueberschrift zurueck auf Hausmaß: 23px mit einem 52px-Zeichen
     daneben lassen auf 360px kein Wort mehr in einer Zeile. */
  .buehne .karte-kopf h1 { font-size: 20px; }
  .karte-kopf .sym { width: 44px; height: 44px; }
  .karte-kopf .sym svg { width: 22px; height: 22px; }
  .farbpaar { gap: 14px; }
  .ablage { padding: 18px 14px; }

  /* Die Objektzeile, gemessen auf 360px: Von 328px Breite nahmen Foto (92),
     zwei Luecken (26) und der Knopf "Bearbeiten" (120) so viel, dass dem
     Titel 74px blieben - er stand vierzeilig neben einem Foto. Der Knopf
     legt deshalb sein Wort ab und behaelt den Pfeil, genau wie die
     Schrittleiste des Hauses auf dem Telefon nur beim aktuellen Schritt ein
     Wort traegt. Dass die Zeile aufklappt, sagen danach immer noch der
     Pfeil, der Zeigefinger und der Hover. Mit dem kleineren Foto bleiben
     dem Titel 186px, also zwei Zeilen statt vier. */
  .aufklapp-knopf .wort { display: none; }
  .vorschaubild { width: 76px; height: 56px; }
}

/* ================= Jetzt holen =================
 *
 * Zwei Knoepfe, die nicht wie „Weiter" aussehen duerfen. Der Wizard hat auf
 * jeder Seite einen blauen Knopf, der den naechsten Schritt oeffnet - waere
 * der Kaufknopf derselbe, unterschiede ihn nichts von der Arbeit, die der
 * Makler gerade macht. Er ist aber die einzige Entscheidung auf dieser
 * Seite, die Geld kostet.
 *
 * Deshalb: eine eigene Flaeche, ein Preis in Grossschrift, der Streichpreis
 * daneben und die Folgerate darunter. Drei Zeilen, die zusammen die ganze
 * Aussage tragen - der Makler muss dafuer nicht in den Fliesstext.
 */

.holen-karte {
  margin-top: 18px;
  /* Enger als eine Arbeitskarte. Die Karte ist ein Angebot am Rand und
   * nicht der Schritt, an dem der Makler gerade arbeitet - sie darf ihn
   * nicht ueberragen. Gemessen am 26.08.2026: mit den Karten-Vorgaben war
   * sie 240px hoch, jetzt sind es 150px. */
  padding: 15px 18px 16px;
  /* Ein Hauch Farbe im Grund, damit die Karte nicht wie eine zweite
   * Arbeitskarte liest. Kein volles Blau: Der Kasten soll einladen und
   * nicht schreien. */
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(30,147,214,.07) 0%, transparent 58%),
    var(--karte);
  border: 1px solid rgba(30,147,214,.18);
}

.holen-kopf { display: flex; align-items: center; gap: 11px; }

/* Die Fahne traegt die Zahl, damit die Ueberschrift sie nicht tragen muss.
 *
 * `padding` statt `min-width`: Mit fester Breite und 17px Schrift stand
 * "-20 %" am 26.08.2026 ueber den Rand hinaus. Die Fahne richtet sich jetzt
 * nach ihrem Inhalt, und `white-space: nowrap` haelt sie einzeilig. */
.holen-fahne {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 11px; border-radius: 11px; white-space: nowrap;
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-nacht) 100%);
  color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.3px;
  box-shadow: 0 5px 14px rgba(11,111,168,.28);
}

.holen-karte h2 { margin: 0; font-size: 19px; }
.holen-satz {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--text-leise);
}

/* Zwei Spalten, und auf engen Fenstern eine. `1fr 1fr` und nicht `auto`:
 * Zwei Knoepfe unterschiedlicher Breite lesen sich wie zwei verschiedene
 * Angebote, obwohl sie dasselbe sind. */
.holen-gitter {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
/* KEIN `display: contents` am Formular. Es waere hier zwar bequem, aber
 * Chromium hat mit verschwundener Formularbox schon einmal das Absenden
 * verschluckt - und ein Kaufknopf, der nichts tut, ist der teuerste Fehler
 * dieser Seite. Das Formular ist das Gitterkind, der Knopf fuellt es. */
.holen-gitter form { margin: 0; display: flex; }

.holen-knopf {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left;
  padding: 11px 14px 12px;
  border: 1.5px solid var(--linie); border-radius: 13px;
  background: #fbfcfd; color: var(--text);
  font-family: inherit; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.holen-knopf:hover {
  transform: translateY(-2px);
  border-color: rgba(30,147,214,.45);
  box-shadow: 0 10px 26px rgba(20,24,29,.10);
}
.holen-knopf:focus-visible {
  outline: 3px solid rgba(30,147,214,.45); outline-offset: 2px;
}

/* Das empfohlene Paket traegt die Farbe. Nur EINES von beiden - zwei
 * hervorgehobene Knoepfe sind keine Empfehlung, sondern zwei Schreie. */
.holen-knopf.betont {
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-tief) 55%, var(--ks-nacht) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px rgba(11,111,168,.28);
}
.holen-knopf.betont:hover {
  box-shadow: 0 12px 28px rgba(11,111,168,.36);
}

/* Die Pille sitzt IM Knopf und nicht darueber. Ueber dem Rand ragte sie in
 * den Abstand zur Karte hinein, und bei schmalem Fenster in die Zeile
 * darueber. */
.holen-chip {
  position: absolute; top: 9px; right: 11px;
  background: var(--ruf, #f5c400); color: #14181d;
  border-radius: 999px; padding: 2px 8px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase;
}

.holen-name {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; opacity: .62;
}
.holen-knopf.betont .holen-name { opacity: .82; }

.holen-betrag {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 22px; font-weight: 800; letter-spacing: -.9px;
}
/* Der Streichpreis ist der Monatsbetrag ohne Nachlass - kein Anker. Klein
 * und leise: Er belegt den Nachlass, er verkauft ihn nicht. */
.holen-betrag s {
  font-size: 12.5px; font-weight: 600; letter-spacing: -.2px;
  opacity: .5; text-decoration-thickness: 1.5px;
}

.holen-danach { margin-top: 1px; font-size: 11.5px; opacity: .62; }
.holen-knopf.betont .holen-danach { opacity: .8; }

@media (max-width: 560px) {
  .holen-gitter { grid-template-columns: 1fr; }
  .holen-betrag { font-size: 20px; }
}

/* ---- Die Knoepfe in der Kopfzeile des Wizards ----
 *
 * Symbol plus Wort, als leise Pille. Sie tragen hier ein Wort, anders als
 * in der Oberflaeche: Dort stehen sie neben zwei anderen Symbolen und in
 * einer Kopfzeile, die der Makler jeden Tag sieht; hier ist es sein erster
 * Tag, und ein Symbol allein, das niemand kennt, klickt niemand.
 *
 * Leise gehalten: Der Wizard hat genau eine Handlung je Schritt, und das
 * ist nie eine von diesen. Sie sollen auffindbar sein, nicht auffallen.
 *
 * Hiess bis zum 01.09.2026 `.kaefer`, weil es nur einen gab. Befund Max am
 * 01.09.2026: "es gibt in der testphase keinen abmelde button." Jetzt sind
 * es zwei, und ein Abmelde-Link mit der Klasse `kaefer` waere eine Luege im
 * Markup. */
.kopf-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 10px; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--linie);
  background: var(--karte); color: var(--text-leise);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: color .12s ease, border-color .12s ease;
}
.kopf-knopf svg { width: 16px; height: 16px; }
.kopf-knopf:hover { color: var(--ks-tief); border-color: rgba(30,147,214,.45); }

@media (max-width: 560px) {
  /* Am Telefon nur die Symbole: Die Laufzeit-Pille und zwei Woerter passen
   * neben der Wortmarke nicht in eine Zeile. */
  .kopf-knopf span { display: none; }
  .kopf-knopf { padding: 7px 9px; margin-left: 6px; }
}

@media (max-width: 480px) {
  /* Und darunter faellt die Wortmarke, weil sie nichts sagt, was das Logo
   * daneben nicht schon sagt.
   *
   * Gemessen am 01.09.2026 bei 390 px, nachdem der Abmelde-Knopf dazukam:
   * Logo 40 + Abstand 16 + Wortmarke 83 + Pille 157 + zwei Symbolknoepfe
   * je 36 mit 6 Abstand = 390 px Inhalt in 370 px Kopfzeile. Die Seite
   * liess sich um 20 px seitwaerts schieben, und das auf JEDER Seite des
   * Wizards. Mit nur einem Knopf passte es vorher genau. */
  .wortmarke { display: none; }
}

/* ---- Die Gabelung in Schritt 2 (30.08.2026) -----------------------------

   Zwei gleich grosse Karten nebeneinander, keine hervorgehoben: Welches
   Geraet der Makler in der Hand hat, weiss nur er. Auf dem Telefon stapeln
   sie sich, und die fertige Mail steht dann oben - das ist der Weg, der
   dort funktioniert. */
.gabel-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px 20px;
}
.gabel-karte h2 {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.gabel-karte p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.gabel-karte .pille { align-self: flex-start; }
/* Der Knopf sitzt unten, damit die beiden Karten trotz unterschiedlich
   langer Texte auf einer Linie enden. */
.gabel-karte .knopf { margin-top: auto; align-self: flex-start; }