/* ────────────────────────────────────────────────────────────────────────────
   Immo Studio: „Kostenlosen Entwurf anfragen" (/auftrag)

   Neu am 11.10.2026 nach Phils Urteil „Das Formular wirkt zu unprofessionell".
   Vorbild ist ein Bestellvorgang bei Apple oder Airbnb: eine Spalte, ruhige
   Haarlinien, Beschriftungen immer sichtbar über dem Feld, Fortschritt und
   Preis in einer leisen Leiste oben. Keine Kartengitter, keine Symbole, keine
   roten Pflichtmarken: Freiwilliges steht als „freiwillig" dran.

   Diese Seite lädt auftrag.css NICHT mehr (die nutzen bestellen und
   erstgespraech weiter). Grundlage ist stil.css, alles Weitere steht hier und
   ist unter .af-seite eingegrenzt.
   ──────────────────────────────────────────────────────────────────────────── */

.af-seite { background: #fff; }
.af-seite [hidden] { display: none !important; }
/* Testkasten und Beispieldaten erscheinen NUR mit ?demo=1 in der Adresse (Prüfbericht
   12.10.2026, Verbesserung 3): Ein echter Kunde soll nichts von einer Vorführung lesen.
   Darum sind diese Teile grundsätzlich aus, und auftrag.js nimmt die Klasse bei ?demo=1 ab.
   So blitzt der Kasten auch nicht kurz auf, bevor das Skript läuft. */
.nur-entwurf { display: none !important; }
body:not([data-entwurf]) .nur-entwurf { display: none !important; }

.af-breite { width: min(42em, calc(100% - 32px)); margin-inline: auto; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.af-kopf { padding: calc(var(--kopf) + clamp(36px, 6vw, 88px)) 0 clamp(28px, 4vw, 48px); }
.af-kopf .ueberzeile { margin: 0 0 18px; }
.af-kopf__titel { margin: 0; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; color: var(--tinte); }
.af-kopf__satz { margin: 18px 0 0; max-width: 34em; font-size: 1.125rem; line-height: 1.55; color: var(--text); }
.af-hinweis { margin: 22px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--band-hell); font-size: .9375rem; color: var(--text); }

/* ── Anmeldepflicht (14.10.2026): ohne Konto nur der Hinweis, kein Formular ──
   html.konto-sperre setzt ein Skript am Seitenanfang (Merker-Cookie) und auftrag.js (echte Kontoprüfung). */
.af-sperre { display: none; padding: calc(var(--kopf) + clamp(36px, 6vw, 88px)) 0 clamp(48px, 8vw, 120px); }
.af-sperre .ueberzeile { margin: 0 0 18px; }
.af-sperre__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
html.konto-sperre .af-sperre { display: block; }
html.konto-sperre .af-kopf, html.konto-sperre #auftrag { display: none; }
/* Die Editor-Ansicht sperrt das Scrollen und blendet den Fuß aus; der Hinweis ist eine gewöhnliche Seite, und Impressum
   und Datenschutz im Fuß müssen erreichbar bleiben. */
@media (min-width: 1100px) {
  html.af-editor.konto-sperre, html.af-editor.konto-sperre body { height: auto; overflow: visible; }
  html.af-editor.konto-sperre .fuss { display: block; }
}

/* ── Leiste: Schritt und Preis, klebt unter der Kopfzeile ──────────────── */
.af-stand { position: sticky; top: 64px; z-index: 40; background: #fff; border-top: 1px solid var(--linie-fein); }
.af-stand__innen { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: nowrap; padding: 12px 0 11px; white-space: nowrap; }
/* Schriftgröße an den Teilen, nicht am Behälter: Dessen Breite steht in em und soll der Formularspalte gleichen. */
.af-stand__schritt, .af-stand__preis { margin: 0; display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: .8125rem; }
.af-stand__schritt span { overflow: hidden; text-overflow: ellipsis; }
.af-stand__schritt b { font-weight: 600; color: var(--tinte); }
.af-stand__schritt span { color: var(--leise); }
.af-stand__preis b { font-weight: 600; color: var(--akzent-dunkel); }
.af-stand__preis span { color: var(--text); font-variant-numeric: tabular-nums; }
.af-stand__balken { height: 2px; background: var(--linie-fein); }
.af-stand__balken i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .5s var(--weich); }

/* ── Schritte ──────────────────────────────────────────────────────────── */
.af { padding-bottom: clamp(64px, 8vw, 120px); }
.af-formular { margin-top: clamp(16px, 2vw, 28px); }
.af .stufen { list-style: none; margin: 0; padding: 0; }
.af .schritt { position: relative; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--linie); }
.af .schritt::before, .af .schritt::after { content: none; }
.af .schritt__kopf { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.af .schritt__nr {
  display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  border: 1px solid #85909f; font-size: .8125rem; font-weight: 600; color: var(--leise); background: #fff;
}
.af .schritt[data-offen] .schritt__nr { border-color: var(--akzent); color: var(--akzent); }
.af .schritt[data-fertig]:not([data-offen]) .schritt__nr { border-color: var(--akzent); background: var(--akzent); color: #fff; }
.af .schritt__titel h2 { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--leise); outline: none; }
.af .schritt[data-offen] .schritt__titel h2, .af .schritt[data-fertig] .schritt__titel h2 { color: var(--tinte); }
.af .schritt__fazit { margin: 4px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--leise); }
.af .schritt[data-offen] .schritt__fazit { display: none; }
.af .schritt__fazit:empty { display: none; }
.af-frei { margin-left: 6px; font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--leise); }

.af .textknopf, .af-hinweis .textknopf, .af .schritt__aendern {
  padding: 4px 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--akzent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s ease;
}
.af .textknopf:hover, .af .schritt__aendern:hover { text-decoration-color: currentColor; }
.af .textknopf:focus-visible, .af .schritt__aendern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.af .schritt__huelle { display: none; }
.af .schritt[data-offen] .schritt__huelle { display: block; }
.af .schritt__innen { padding: 8px 0 6px 42px; }

.af .seite { display: none; }
.af .seite[data-aktiv] { display: block; animation: af-rein .35s var(--weich); }
@keyframes af-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .af .seite[data-aktiv] { animation: none; } }

.af .seite__frage { display: block; margin: 14px 0 6px; padding: 0; font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: var(--tinte); outline: none; }
.af .seite__text { margin: 0 0 18px; max-width: 36em; font-size: .9375rem; line-height: 1.55; color: var(--text); }
.af-freisatz { margin: 10px 0 4px; font-size: .9375rem; line-height: 1.55; color: var(--leise); }
.af-unterfrage { display: block; margin: 22px 0 10px; padding: 0; font-size: .9375rem; font-weight: 600; color: var(--tinte); }
.af-unterfrage span { font-weight: 400; color: var(--leise); }
.af-randnotiz { margin: 16px 0 0; max-width: 38em; }
.af-feldhilfe { display: block; margin-top: 6px; font-size: .8125rem; color: var(--leise); }

/* ── Kauf: weitere Angaben (26.10.2026): Gruppe unter den Preisfeldern, Einheit steht im Feld ─────────── */
.af-kaufplus { margin: 30px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--linie); min-width: 0; }
.af-kaufplus > legend { float: left; width: 100%; margin: 0; }
.af-kaufplus > legend + * { clear: both; }
.af-kaufplus .af-unterfrage { margin-top: 0; }
.af-kaufplus .af-unterfrage:not(legend) { margin-top: 24px; }
.af-kaufplus__text { margin: 0 0 14px; max-width: 36em; font-size: .9375rem; line-height: 1.55; color: var(--text); }
.eingabe-einheit { position: relative; display: block; }
.af .eingabe-einheit input { padding-right: 44px; }
.eingabe-einheit__zeichen { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 1rem; color: var(--leise); pointer-events: none; }

/* ── Felder: Beschriftung immer sichtbar über dem Feld ─────────────────── */
.af .reihe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.af .reihe + .reihe { margin-top: 16px; }
.af .s12 { grid-column: span 12; } .af .s8 { grid-column: span 8; } .af .s6 { grid-column: span 6; } .af .s4 { grid-column: span 4; }
.af .feld { margin: 0; min-width: 0; }
.af .seite > .feld, .af .fotowahl + .feld { margin-top: 18px; }
.af .feld label { display: block; margin: 0 0 6px; font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinte); }
.af .feld input, .af .feld select, .af .feld textarea {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 14px;
  background: #fff; color: var(--tinte); border: 1px solid #85909f; border-radius: 10px; box-shadow: none;
  font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .2s ease, box-shadow .2s ease;
}
.af .feld select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23586474' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.af .feld textarea { min-height: 6em; resize: vertical; }
/* Ränder der Bedienelemente #85909f und Platzhalter #687484: knapp über den Mindestkontrasten
   (3:1 bzw. 4,5:1 auf Weiß und auf #f6f9fe), so nah am alten Blaugrau wie möglich (Prüfung 13.10.2026). */
.af .feld input::placeholder, .af .feld textarea::placeholder { color: #687484; }
.af .feld input:hover, .af .feld select:hover, .af .feld textarea:hover { border-color: #8a9bb0; }
.af .feld input:focus, .af .feld select:focus, .af .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(16, 88, 192, .16); }
.af .feld input[aria-invalid="true"], .af .feld select[aria-invalid="true"] { border-color: #a3261b; box-shadow: 0 0 0 3px rgba(163, 38, 27, .1); }
.af .feld input:disabled { background: var(--band-hell); color: var(--leise); border-color: var(--linie); }
.af .feld input[data-vorbelegt] { border-color: var(--akzent); background: #f6f9fe; }
.af .feld__aus { display: block; margin-top: 5px; font-size: .8125rem; color: var(--akzent-dunkel); }
.af-warm { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; background: var(--band-hell); font-size: 1rem; color: var(--tinte); font-variant-numeric: tabular-nums; }
.af-warm[data-leer] { font-size: .875rem; color: var(--leise); }

/* ── Wahl als ruhige Zeilen (Radio) ────────────────────────────────────── */
.af-wahlliste { margin: 0; padding: 0; border: 0; min-width: 0; }
.af-wahlliste > legend { float: left; width: 100%; }
.af-wahlliste > legend + * { clear: both; }
.af-wahl {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start;
  margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.af-wahl:hover { border-color: #9fb0c4; }
.af-wahl input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akzent); cursor: pointer; }
.af-wahl > span { display: block; min-width: 0; }
.af-wahl b { display: block; font-size: 1rem; font-weight: 550; color: var(--tinte); }
.af-wahl small { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.45; color: var(--leise); }
.af-wahl:has(input:checked) { border-color: var(--akzent); background: #f7faff; box-shadow: inset 0 0 0 1px var(--akzent); }
.af-wahl:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.af-wahl:has(input:disabled) { opacity: .5; cursor: default; }
.af-wahlliste--zeile { display: flex; flex-wrap: wrap; gap: 8px; }
.af-wahlliste--zeile > legend { margin-bottom: 2px; }
.af-wahlliste--zeile .af-wahl { margin: 0; padding: 9px 14px; border-radius: 999px; }
.af-wahlliste--zeile .af-wahl b { font-size: .9375rem; font-weight: 500; }
.af-wahlliste--klein .af-wahl { padding: 11px 14px; }
.af-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.af-pillen .af-wahl { margin: 0; padding: 9px 16px; border-radius: 999px; }
.af-pillen .af-wahl b { font-size: .9375rem; font-weight: 500; }
.af-pillen .af-wahl small { display: none; }
.af-wahlliste > legend.af-unterfrage { margin-top: 6px; }
.af-wahlliste + .af-wahlliste { margin-top: 14px; }
.af-probe { display: block; margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--hell); background: var(--band-hell); font-size: .875rem; line-height: 1.55; color: var(--text); }
.af-wahl input:not(:checked) ~ span .af-probe { display: none; }

/* ── Häkchen ───────────────────────────────────────────────────────────── */
.af-haken { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin: 18px 0 0; cursor: pointer; }
.af-haken input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--akzent); cursor: pointer; }
.af-haken input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.af-haken b { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--tinte); }
.af-haken small { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--leise); }
.af-haken[data-gesperrt] { cursor: default; }
.af-haken[data-gesperrt] b { color: var(--leise); }
.af-haken input:disabled { cursor: default; }

/* ── Ablage: ruhige Felder mit Liste darunter ──────────────────────────── */
.af-gruppe { margin-top: 22px; }
.af-gruppe__titel { margin: 0 0 8px; font-size: .9375rem; font-weight: 600; color: var(--tinte); }
.af-gruppe__titel span { margin-left: 6px; font-weight: 400; color: var(--leise); }
.af .ablage { position: relative; margin-top: 6px; }
.af .ablage__feld {
  position: relative; display: grid; gap: 4px; justify-items: center; padding: 22px 18px; text-align: center; cursor: pointer;
  border: 1.5px dashed #b4c3d6; border-radius: 12px; background: var(--band-hell); transition: border-color .2s ease, background .2s ease;
}
.af .ablage__feld:hover, .af .ablage[data-zieht] .ablage__feld { border-color: var(--akzent); background: #eef4fc; }
.af .ablage__feld:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.af .ablage__feld input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.af .ablage__kopf { display: grid; gap: 2px; }
.af .ablage__kopf b { font-size: 1rem; font-weight: 600; color: var(--akzent); }
.af .ablage__kopf span { font-size: .875rem; color: var(--leise); }
.af .ablage__satz { max-width: 30em; font-size: .8125rem; line-height: 1.45; color: var(--leise); }
.af .ablage__satz:empty { display: none; }
.af .ablage__satz[data-fehler] { color: #a3261b; font-weight: 500; }
.af .ablage[data-ok] .ablage__feld { padding-block: 14px; border-style: solid; border-color: var(--linie); background: #fff; }

.af .dateikarten { list-style: none; margin: 8px 0 0; padding: 0; }
.af .dateikarten:empty { display: none; }
.af .dateikarte { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie-fein); }
.af .dateikarte__bild { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 8px; background: var(--band); }
.af .dateikarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.af .dateikarte__bild i { font-style: normal; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: var(--leise); }
.af .dateikarte__text { min-width: 0; }
.af .dateikarte__text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 500; }
.af .dateikarte__text small { display: block; font-size: .8125rem; color: var(--leise); }
.af .dateikarte .textknopf { font-size: .875rem; }

.af .eignung { margin-top: 16px; }
.af .eignung__urteil { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--band-hell); border-left: 3px solid var(--akzent); font-size: .9375rem; line-height: 1.5; color: var(--tinte); }
.af .eignung__urteil[data-status="pruefen"] { border-left-color: #b7791f; }
.af .eignung__urteil[data-status="ungeeignet"] { border-left-color: #a3261b; }
.af .eignung__liste { list-style: none; margin: 8px 0 0; padding: 0; }
.af .eignung__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 6px 0; font-size: .875rem; }
.af .eignung__liste b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.af .eignung__liste span { color: var(--leise); }
.af .eignung__liste small { grid-column: 1 / -1; color: var(--leise); line-height: 1.45; }

.af .analyse { margin-top: 14px; font-size: .9375rem; }
.af .analyse p { margin: 0 0 8px; }
.af .analyse__balken { position: relative; height: 3px; overflow: hidden; border-radius: 2px; background: var(--linie-fein); }
.af .analyse__balken i { position: absolute; inset: 0; background: var(--akzent); transform-origin: left; animation: af-laden 1.4s ease-in-out infinite; }
@keyframes af-laden { 0% { transform: scaleX(.05); } 60% { transform: scaleX(.8); } 100% { transform: scaleX(.95); } }
.af .vorschlaege { margin-top: 18px; }
.af .vorschlaege__liste { list-style: none; margin: 0; padding: 0; }
.af .vorschlaege__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.af .vorschlaege__titel { font-size: .8125rem; color: var(--leise); }
.af .vorschlaege__wert { grid-column: 1; font-weight: 600; color: var(--tinte); }
.af .vorschlaege__liste small { grid-column: 1; font-size: .8125rem; color: var(--leise); }
.af .vorschlaege__knoepfe { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* ── Titelbild ─────────────────────────────────────────────────────────── */
.af .fotowahl { margin-top: 8px; }
.af .fotowahl .af-feldhilfe { margin: -4px 0 10px; }
.af .fotowahl__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.af .fotowahl__liste button { width: 84px; height: 60px; padding: 0; overflow: hidden; border: 1px solid var(--linie); border-radius: 8px; background: var(--band); cursor: pointer; }
.af .fotowahl__liste button img { width: 100%; height: 100%; object-fit: cover; }
.af .fotowahl__liste button[aria-checked="true"] { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Ergänzungen: Posten mit Preis rechts ──────────────────────────────── */
.af-posten { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.af-posten__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.af-posten__zeile .af-haken { margin: 0; }
.af-posten__text b { display: block; font-size: .9375rem; font-weight: 500; color: var(--tinte); }
.af-posten__text small { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--leise); }
.af-posten__zeile--fest .af-posten__text { padding-left: 32px; }
.af-posten__preis { padding-top: 1px; font-size: .9375rem; font-weight: 500; color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* „Angebot innerhalb von 24 Stunden" statt eines Betrags: umbrechen und schmal halten (Review 13.10.2026). */
.af-posten__preis--satz { max-width: 10.5em; white-space: normal; text-align: right; font-weight: 400; line-height: 1.35; color: var(--leise); }
.af-posten__unter { padding: 4px 0 14px 32px; border-bottom: 1px solid var(--linie); }
.af-posten__unter .af-unterfrage { margin-top: 12px; }
.af-zaehler { display: inline-flex; align-items: center; gap: 4px; }
.af-zaehler button { width: 36px; height: 36px; border: 1px solid #85909f; border-radius: 50%; background: #fff; font: inherit; font-size: 1.125rem; line-height: 1; color: var(--tinte); cursor: pointer; }
.af-zaehler button:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.af-zaehler button:disabled { opacity: .35; cursor: default; }
.af-zaehler button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.af-zaehler output { min-width: 2.2em; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.af-summe, .af-kosten { margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: var(--band-hell); }
.af-summe p, .af-kosten p { margin: 0; }
.af-summe__titel { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.af-summe ul, .af-kosten__liste { list-style: none; margin: 10px 0 0; padding: 0; }
.af-summe li, .af-kosten__liste li { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: .9375rem; color: var(--text); font-variant-numeric: tabular-nums; }
.af-summe__gesamt { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--linie); }
.af-summe__gesamt b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.af-summe .t-klein, .af-kosten .t-klein { margin-top: 8px; }
.af-kosten__jetzt { font-size: 1.0625rem; line-height: 1.45; color: var(--tinte); }
.af-kosten__spaeter { margin-top: 6px !important; font-size: 1rem; line-height: 1.45; color: var(--text); }
.af-kosten__liste { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--linie); }
.af-kosten__liste li { font-size: .875rem; color: var(--leise); }

/* ── Übersicht vor dem Absenden ────────────────────────────────────────── */
.af-uebersicht { margin: 4px 0 0; border-top: 1px solid var(--linie); }
.af-uebersicht > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); font-size: .9375rem; }
.af-uebersicht dt { color: var(--leise); }
.af-uebersicht dd { margin: 0; color: var(--tinte); }
.af-uebersicht .textknopf { font-size: .875rem; padding: 0; }

/* ── Dachschrägen ──────────────────────────────────────────────────────── */
.af .dachfotos__liste { margin: 0 0 16px; padding-left: 1.2em; font-size: .9375rem; line-height: 1.6; }

/* ── Dachschrägen: Wand markieren, Form wählen, Übersicht (12.10.2026) ───
   Drei Seiten nach Phils Entwürfen v3 und v4. Ruhig wie der Rest der Strecke:
   Haarlinien, ein Akzent, keine Farbflächen. Die Griffe im Grundriss sind
   absichtlich groß (44 px), damit sie am Handy mit dem Daumen zu fassen sind. */
.nur-vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.af .dach-feld { position: relative; }
.af .dach-feld__kopf { display: flex; align-items: center; gap: 8px; }
.af .dach-feld__kopf label, .af .dach-feld__kopf .af-unterfrage { margin: 0 0 6px; }
.af .dach-feld + .dach-feld, .af .dach-feld + .feld { margin-top: 20px; }
.af .dach-frage {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0 0 6px; padding: 0;
  border: 1px solid #85909f; border-radius: 50%; background: #fff; font: inherit; font-size: .8125rem;
  font-weight: 600; color: var(--leise); cursor: pointer;
}
.af .dach-frage:hover { border-color: var(--akzent); color: var(--akzent); }
.af .dach-frage[aria-expanded="true"] { border-color: var(--akzent); background: var(--akzent); color: #fff; }

/* Hilfefenster am Feld: auftrag.js hängt es in die Frage, die angetippt wurde. */
.af .dach-hilfe {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-width: 24em;
  padding: 14px 16px 12px; border: 1px solid var(--linie); border-radius: 12px; background: #fff;
  box-shadow: 0 14px 34px rgba(16, 24, 32, .16);
}
.af .dach-hilfe__titel { margin: 0 0 8px; font-size: .9375rem; font-weight: 600; color: var(--tinte); }
.af .dach-hilfe__satz { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--text); }
.af .dach-hilfe svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 10px; }
.af .dach-hilfe .knopf { margin-top: 12px; }

/* Grundriss des Kunden mit markierter Wand */
.af .dachplan { position: relative; margin-top: 20px; }
.af .dachplan__wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.af .dachplan__wahl button {
  min-height: 34px; padding: 4px 12px; border: 1px solid #85909f; border-radius: 999px; background: #fff;
  font: inherit; font-size: .8125rem; color: var(--text); cursor: pointer; max-width: 16em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.af .dachplan__wahl button[aria-pressed="true"] { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--band-hell); font-weight: 600; }
/* Der Kasten ist genau so groß wie das Bild, sonst liegen die Linien daneben. Breite und
   Seitenverhältnis setzt auftrag.js aus der echten Bildgröße: Ein SVG ohne feste Maße wurde
   in einem mitwachsenden Kasten sonst 0 Pixel groß und war gar nicht zu sehen (12.10.2026
   im eigenen Bildschirmfoto aufgefallen). Hohe Pläne bleiben auf Bildschirmhöhe begrenzt,
   damit man zum Markieren nicht scrollen muss. */
.af .dachplan__bild { position: relative; display: block; width: 100%; max-width: 100%; margin-inline: auto; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: #fbfcfe; touch-action: pan-y; cursor: crosshair; }
.af .dachplan__bild img { display: block; width: 100%; height: 100%; }
.af .dachplan__linien { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.af .dachplan__griff {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0;
  background: none; cursor: grab; touch-action: none; z-index: 2;
}
.af .dachplan__griff::before {
  content: ""; display: block; width: 18px; height: 18px; margin: 13px; border-radius: 50%;
  background: #fff; border: 3px solid var(--akzent); box-shadow: 0 1px 4px rgba(16, 24, 32, .3);
}
.af .dachplan__griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: -8px; border-radius: 50%; }
.af .dachplan__satz { margin: 10px 0 0; font-size: .875rem; line-height: 1.5; color: var(--leise); }
.af .dachplan__satz b { color: var(--tinte); font-weight: 600; }
.af .dachplan--still .dachplan__bild { cursor: default; }

/* Weg ohne Zeiger: vier echte Knöpfe, auch neben dem Bild des Grundrisses. Antippen im
   Plan geht mit der Tastatur nicht, hier geht es (12.10.2026 gemeldet). */
.af .dachwahl { margin-top: 18px; }
.af .dachwahl .af-unterfrage { margin: 0 0 8px; }
.af .dachwahl__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.af .dachwahl__knoepfe button {
  min-height: 44px; padding: 8px 16px; border: 1px solid #85909f; border-radius: 10px; background: #fff;
  font: inherit; font-size: .9375rem; color: var(--text); cursor: pointer;
}
.af .dachwahl__knoepfe button:hover { border-color: #8a9bb0; }
.af .dachwahl__knoepfe button[aria-checked="true"] { border-color: var(--akzent); background: #f3f8fe; box-shadow: inset 0 0 0 1px var(--akzent); color: var(--tinte); font-weight: 600; }

/* Rückfall ohne Bild: schematische Draufsicht, Wand antippen */
.af .dachschema { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
/* Die Wände sind sichtbare helle Bänder: Man sieht, was antippbar ist, und ein gemaltes
   Rechteck nimmt den Klick zuverlässig an (eine durchsichtige Linie tut das nicht). */
.af .dachschema__wand { fill: #e3eaf3; stroke: none; cursor: pointer; }
.af .dachschema__wand:hover { fill: #cfe0f7; }
.af .dachschema__wand[data-aktiv] { fill: var(--akzent); }
.af .dachschema text { font-family: inherit; font-size: 13px; fill: var(--leise); }
.af .dachschema text.dachschema__aktiv { fill: var(--akzent-dunkel); font-weight: 600; }

/* Form wählen: Vorschau links, Fragen rechts */
.af .dachform { display: grid; gap: 22px; margin-top: 18px; }
.af .dachform__vorschau { padding: 14px; border: 1px solid var(--linie); border-radius: 12px; background: #f7f9fc; }
.af .dachform__vorschau svg { display: block; width: 100%; height: auto; }
.af .dachform__decke { margin: 0 0 6px; font-size: .8125rem; color: var(--leise); text-align: center; }
.af .dachform__bez { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--leise); text-align: center; }
.af .dachform__weite { margin: 8px 0 0; font-size: .9375rem; font-weight: 600; color: var(--tinte); text-align: center; }
.af .dachform__hinweis { margin: 10px 0 0; padding: 9px 12px; border: 1px solid #f0dcb4; border-radius: 8px; background: #fdf3e2; font-size: .8125rem; line-height: 1.5; color: #6b4a10; }
.af .dachkacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.af .dachkachel {
  padding: 10px 8px 11px; border: 1px solid var(--linie); border-radius: 10px; background: #fff;
  font: inherit; color: var(--text); cursor: pointer; text-align: center;
}
.af .dachkachel svg { display: block; width: 100%; max-width: 62px; height: auto; margin: 0 auto 7px; color: #8995a6; }
.af .dachkachel span { display: block; font-size: .8125rem; line-height: 1.3; }
.af .dachkachel:hover { border-color: #8a9bb0; }
.af .dachkachel[aria-checked="true"] { border-color: var(--akzent); background: #f3f8fe; box-shadow: inset 0 0 0 1px var(--akzent); }
.af .dachkachel[aria-checked="true"] svg { color: var(--akzent); }
.af .dachkachel[aria-checked="true"] span { color: var(--tinte); font-weight: 600; }
.af .dach-messen { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.af .dach-messung { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--band-hell); font-size: .875rem; line-height: 1.5; color: var(--tinte); }
.af .dach-messung__grad { display: block; font-size: 1.75rem; font-weight: 600; color: var(--akzent-dunkel); }
.af .dach-messung .knopf { margin-top: 10px; }
.af #dach-umschalten { margin-top: 18px; }

/* Übersicht der Schrägen */
.af .dachliste { margin-top: 18px; border-top: 1px solid var(--linie); }
.af .dachliste__zeile { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie-fein); }
.af .dachliste__zeile p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--tinte); }
.af .dachliste__zeile small { display: block; font-size: .875rem; color: var(--leise); }
.af .dachliste__leer { padding: 12px 0; border-bottom: 1px solid var(--linie-fein); font-size: .9375rem; color: var(--leise); }
.af .dachliste__knoepfe { display: flex; gap: 10px; flex: none; }
@media (min-width: 720px) {
  .af .dachform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* ── Logo ──────────────────────────────────────────────────────────────── */
.af .logo__vorschau { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.af .logo__vorschau img { max-width: 200px; max-height: 64px; object-fit: contain; }

/* ── Knöpfe, Meldungen ─────────────────────────────────────────────────── */
.af .seite__fuss { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.af .seite__fuss [data-seite-weiter], .af .seite__fuss #anfragen { margin-left: auto; }
.af .knopf { border-radius: 8px; }
.af .knopf--klein { min-height: 38px; padding: 6px 14px; font-size: .875rem; }
.af .knopf--gross { min-height: 54px; padding-inline: 28px; font-size: 1rem; }
.af .knopf:disabled { opacity: .45; cursor: default; pointer-events: none; }
.af .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.af .schritt__meldung, .af-fehlerzeile { margin: 16px 0 0; font-size: .9375rem; line-height: 1.5; font-weight: 500; color: #a3261b; }
.af .schritt__meldung:empty, .af-fehlerzeile:empty { display: none; }
.af-zusage { margin: 12px 0 0; text-align: right; font-size: .875rem; color: var(--leise); }
.af .versand { margin-top: 20px; padding: 16px 18px; border-radius: 12px; background: var(--band-hell); font-size: .9375rem; line-height: 1.55; }
.af .versand p { margin: 0 0 8px; }
.af .versand p:last-child { margin-bottom: 0; }
.af .versand__fehler b { color: #a3261b; }

/* ── Leiste der Vorführung ─────────────────────────────────────────────── */
.af .entwurfsleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 40px; padding: 12px 0 0; border-top: 1px dashed var(--linie); font-size: .8125rem; color: var(--leise); }
.af .entwurfsleiste .textknopf { font-size: .8125rem; }

/* ── Unterlagen lesen (Schritt 1) ──────────────────────────────────────── */
.af .ablage--start .ablage__feld { padding-block: 34px; }
.af .dateikarte__wahl { display: block; width: auto; max-width: 100%; min-height: 34px; margin-top: 6px; padding: 4px 30px 4px 10px; border: 1px solid #85909f; border-radius: 8px; font: inherit; font-size: .8125rem; color: var(--tinte); appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23586474' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 8px center / 14px; }
.af .dateikarte__wahl:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.af .lesen { margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--band-hell); font-size: .9375rem; line-height: 1.55; }
.af .lesen p { margin: 0 0 8px; }
.af .lesen p:last-child { margin-bottom: 0; }
.af .lesen .analyse__balken { margin: 10px 0 12px; }
.af .lesen[data-stand="fehler"] { border-left: 3px solid #b7791f; }
.af .lesen__vorfuehrung { padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #6b4a10; font-size: .875rem; }
.af .lesen__liste { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 10px 0 12px; padding: 0; border-top: 1px solid var(--linie); }
.af .lesen__liste li { display: grid; gap: 1px; padding: 7px 0; border-bottom: 1px solid var(--linie-fein); font-size: .875rem; }
.af .lesen__liste span { font-size: .75rem; color: var(--leise); }
.af .lesen__liste b { font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.af .lesen__liste small { font-size: .75rem; color: var(--akzent-dunkel); overflow-wrap: anywhere; }
.af .lesen__grundriss { padding-left: 12px; border-left: 3px solid var(--akzent); color: var(--tinte); }
.af .lesen__grundriss[data-urteil="eingeschraenkt"], .af .lesen__grundriss[data-urteil="nein"] { border-left-color: #b7791f; }
.af .lesen__fehlt { color: #6b4a10; }
.af .lesen__nochmal { margin: 12px 0 0; }

/* ── Vermerke: aus den Unterlagen, bitte ergänzen ──────────────────────── */
.af .feld[data-aus="unterlagen"] input, .af .feld[data-aus="unterlagen"] select, .af .feld[data-aus="unterlagen"] textarea { border-color: var(--akzent); background-color: #f6f9fe; }
.af .feld__aus { display: block; margin-top: 5px; font-size: .8125rem; color: var(--akzent-dunkel); overflow-wrap: anywhere; }
.af .feld__aus[data-herkunft="geaendert"] { color: var(--leise); }
.af fieldset[data-aus] > .feld__aus { margin: -2px 0 6px; }
.af .feld[data-ergaenzen] input, .af .feld[data-ergaenzen] select, .af .feld[data-ergaenzen] textarea { border-color: #b7791f; box-shadow: 0 0 0 3px rgba(183, 121, 31, .12); }
.af fieldset[data-ergaenzen] .af-wahl { border-color: #d9b27a; }
.af .feld__fehlt { display: block; margin-top: 5px; font-size: .8125rem; font-weight: 500; color: #8a5a12; }

/* ── Nachrichten wie in einem Chat ─────────────────────────────────────── */
.af .notizen { list-style: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0 0 14px; padding: 0; }
.af .notizen:empty { display: none; }
.af .notiz { max-width: 85%; padding: 10px 14px 8px; border-radius: 16px 16px 4px 16px; background: #eaf2fd; color: var(--tinte); }
.af .notiz p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.5; }
.af .notiz .textknopf { display: block; margin-left: auto; padding: 2px 0 0; font-size: .75rem; }
.af .notiz-eingabe label { display: block; margin: 0 0 6px; font-size: .875rem; font-weight: 500; color: var(--tinte); }
.af .notiz-eingabe__zeile { display: flex; gap: 10px; align-items: flex-end; }
.af .notiz-eingabe textarea { flex: 1; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid #85909f; border-radius: 12px; font: inherit; font-size: 1rem; line-height: 1.4; resize: vertical; color: var(--tinte); background: #fff; }
.af .notiz-eingabe textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(16, 88, 192, .16); }
.af .notiz-eingabe .knopf { min-height: 48px; }

/* ── Zusammenfassung: dieselbe Liste wie die Seitenleiste ──────────────── */
.af-herkunft { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--band-hell); font-size: .9375rem; color: var(--tinte); }
.af-uebersicht__liste { margin: 0; }
.af-uebersicht__liste > div { display: grid; grid-template-columns: minmax(7em, 40%) minmax(0, 1fr); gap: 0 12px; padding: 2px 0; }
.af-uebersicht__liste dt { color: var(--leise); }
.af-uebersicht__liste dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.af-uebersicht__liste small, .af-bisher__liste small { display: block; font-size: .75rem; color: var(--akzent-dunkel); }
.af-uebersicht__liste small[data-herkunft="geaendert"], .af-bisher__liste small[data-herkunft="geaendert"] { color: var(--leise); }

/* ── Rechte Spalte: Vorschau und „Das haben Sie bisher angegeben" ──────── */
.af-bisher, .af-vorschau { font-size: .875rem; }
.af-bisher__kopf, .af-vorschau__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: 12px; background: #fff; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--tinte); cursor: pointer; text-align: left;
}
.af-bisher__kopf b { min-width: 1.8em; padding: 1px 8px; border-radius: 999px; background: var(--band-hell); font-size: .8125rem; text-align: center; color: var(--akzent-dunkel); font-variant-numeric: tabular-nums; }
.af-bisher__kopf:focus-visible, .af-vorschau__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.af-vorschau__kopf svg { width: 16px; height: 16px; transition: transform .25s var(--weich); }
.af-vorschau[data-offen] .af-vorschau__kopf svg { transform: rotate(180deg); }
.af-bisher__inhalt { display: none; padding: 6px 14px 10px; }
.af-bisher[data-offen] .af-bisher__inhalt { display: block; }
.af-bisher__liste { margin: 0; }
.af-bisher__liste > div { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--linie-fein); }
.af-bisher__liste dt { color: var(--leise); }
.af-bisher__liste dd { margin: 0; color: var(--tinte); overflow-wrap: anywhere; }
.af-vorschau__hinweis { margin: 10px 2px 0; font-size: .8125rem; line-height: 1.45; color: var(--leise); }

/* Die Karte im Stil unserer Muster: Bild oben, Titel, Kennzahlen, Probetext, Bausteine. */
/* min-width: 0, sonst zwingt die Reiterzeile die Karte breiter als ihre Spalte und der
   rechte Rand wird abgeschnitten (Prüfbericht 12.10.2026, bei 1440 und 1600 px gesehen).
   Die Reiter stehen deshalb in einer eigenen Zeile unter Logo und Marke: So ist bei jeder
   Breite alles vollständig zu sehen, statt rechts abzureißen. */
.vk { min-width: 0; overflow: hidden; border: 1px solid var(--linie); border-radius: 10px; background: #fff; box-shadow: 0 8px 28px rgba(16, 24, 32, .06); font-size: .8125rem; }
.vk__leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 12px; border-bottom: 1px solid var(--linie-fein); background: #fff; }
.vk__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.vk__logo img { display: block; max-height: 18px; max-width: 110px; object-fit: contain; }
.vk__wort { font-weight: 700; letter-spacing: -.03em; font-size: .9375rem; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk__wort::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; background: linear-gradient(180deg, #101820 0 34%, #1058c0 34% 67%, #88b8f0 67%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.vk__reiter { order: 2; display: flex; flex: 1 1 100%; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.vk__reiter i { font-style: normal; font-size: .625rem; color: var(--leise); white-space: nowrap; }
.vk__reiter--aktiv { color: var(--akzent) !important; border-bottom: 1px solid var(--akzent); }
.vk__marke { order: 1; flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--band); font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte); }
.vk__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 12px; padding: 14px 12px 12px; background: var(--band); }
.vk__text p { margin: 0; }
.vk__ueber { font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.vk__titel { margin-top: 4px !important; font-size: 1.125rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--tinte); text-wrap: balance; }
.vk__einleitung { margin-top: 8px !important; font-size: .75rem; line-height: 1.45; color: var(--text); }
.vk__einleitung--leer { color: var(--leise); font-style: italic; }
.vk__zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 10px 0 0; }
.vk__zahlen dt { font-size: .5625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.vk__zahlen dd { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk__knoepfe { display: flex; gap: 6px; margin-top: 12px !important; }
.vk__knopf { display: inline-block; padding: 6px 10px; border-radius: 3px; background: var(--akzent); color: #fff; font-size: .6875rem; font-weight: 600; }
.vk__knopf--leer { background: #fff; color: var(--tinte); border: 1px solid var(--linie); }
.vk__bild { position: relative; align-self: center; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid var(--linie-fein); }
.vk__bild > img { width: 100%; height: 100%; object-fit: cover; }
.vk__bild > span { padding: 0 10px; text-align: center; font-size: .6875rem; color: var(--leise); }
.vk__fuss { padding: 10px 12px 12px; }
.vk__teile { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.vk__teile li { position: relative; padding-left: 10px; font-size: .6875rem; color: var(--tinte); }
.vk__teile li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); }
.vk__adresse, .vk__kontakt { margin: 8px 0 0 !important; font-size: .6875rem; color: var(--leise); }

/* Wachsende Vorschau (13.10.2026): das Mini-Exposé, Teil für Teil. Die alte Karte bleibt mit ?vorschau=alt. */
.vk[data-wachsend] { display: flex; flex-direction: column; }
.vk__stand { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; gap: 6px 10px; padding: 10px 12px 9px; border-bottom: 1px solid var(--linie-fein); font-size: .6875rem; color: var(--leise); }
.vk__stand b { font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums; }
.vk__balken { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: var(--band); overflow: hidden; }
.vk__balken > i { display: block; height: 100%; background: var(--akzent); transition: width .5s var(--weich); }
/* Im Mini-Exposé steht das Titelbild über dem Text wie im Auftakt eines Exposés; nebeneinander war die Spalte zu eng. */
.vk[data-wachsend] .vk__kopf { grid-template-columns: minmax(0, 1fr); }
.vk[data-wachsend] .vk__bild { order: -1; aspect-ratio: 16 / 9; border: 0; }
.vk__teil { padding: 12px; border-top: 1px solid var(--linie-fein); }
.vk__kopf + .vk__teil-zahlen { border-top: 0; }
.vk__rubrik { margin: 0 0 8px; font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.vk__satz { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text); }
.vk__satz + .vk__satz { margin-top: 4px; }
.vk__satz--fest { font-weight: 600; color: var(--tinte); }
.vk__satz--leise { font-size: .6875rem; color: var(--leise); }
.vk__zahlen--leiste { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.vk__zahlen--leiste > div { padding-top: 6px; border-top: 1px solid var(--linie); }
.vk__zahlen--leiste dd { font-size: .875rem; }
.vk__galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.vk__galerie > span { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--band); }
.vk__galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk__mehr { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(16, 24, 32, .45); font-size: .8125rem; font-weight: 600; color: #fff; }
.vk__plan { margin-bottom: 8px; padding: 6px; border: 1px solid var(--linie-fein); border-radius: 4px; background: #fff; }
.vk__plan img { display: block; width: 100%; max-height: 130px; object-fit: contain; }
.vk__liste { margin: 0; }
.vk__liste > div { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 0 8px; padding: 4px 0; border-bottom: 1px solid var(--linie-fein); font-size: .6875rem; }
.vk__liste > div:last-child { border-bottom: 0; }
.vk__liste dt { color: var(--leise); }
.vk__liste dd { margin: 0; color: var(--tinte); }
.vk__lage { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: start; }
.vk__ringe { display: block; width: 88px; height: auto; padding: 4px; border-radius: 4px; background: var(--band); color: var(--akzent); }
.vk__skala { list-style: none; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 2px; margin: 0 0 6px; padding: 0; }
.vk__skala li { padding: 3px 0; border-radius: 2px; background: var(--band); font-size: .5625rem; font-weight: 600; text-align: center; color: var(--leise); }
.vk__skala li[data-aktiv] { background: var(--akzent); color: #fff; }
.vk__kontaktblock { display: flex; gap: 10px; align-items: center; }
.vk__kontaktlogo { display: block; max-width: 64px; max-height: 32px; object-fit: contain; }
.vk__teil .vk__knoepfe { margin-top: 10px !important; }
.vk__noch { margin: 0 0 8px !important; font-size: .6875rem; line-height: 1.45; color: var(--leise); }
.vk[data-wachsend] .vk__fuss { border-top: 1px solid var(--linie-fein); }
/* Neu dazugekommener Teil: weich einblenden, kurz hellblau hinterlegt. */
.vk__teil--neu { animation: vk-neu 1.8s var(--weich) both; }
@keyframes vk-neu {
  0% { opacity: 0; transform: translateY(6px); background: var(--band); }
  25% { opacity: 1; transform: none; background: var(--band); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .vk__teil--neu { animation: none; } .vk__balken > i { transition: none; } }
/* Der Teil, an dem der Kunde gerade arbeitet (vorschauFolgen in auftrag.js): eine blaue Linie links, kein Kasten. */
.vk [data-vk].vk__teil--hier { box-shadow: inset 3px 0 0 var(--akzent); transition: box-shadow .25s var(--weich); }
/* „Ihre Texte" (14.10.2026): die echten Texte des Entwurfs in der Vorschau. Ruhig gesetzt wie im Exposé, Rubriken klein,
   Stichpunkte mit Haarlinie, ein Knopf als Linkzeile. Veraltete Texte bleiben lesbar, aber blass. */
.vk__tvtext > * + * { margin-top: 6px !important; }
.vk__tvtitel { margin: 12px 0 4px !important; font-size: .5625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.vk__tvaufmacher { margin: 0; font-size: .875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--tinte); }
.vk__tvpunkte { list-style: none; margin: 8px 0 0; padding: 0; }
.vk__tvpunkte li { padding: 4px 0 4px 12px; position: relative; border-bottom: 1px solid var(--linie-fein); font-size: .6875rem; line-height: 1.4; color: var(--tinte); }
.vk__tvpunkte li:last-child { border-bottom: 0; }
.vk__tvpunkte li::before { content: ""; position: absolute; left: 0; top: .85em; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); }
.vk__tvtext--alt { opacity: .5; }
.vk__tvhinweis { margin: 0 0 8px; padding: 8px 10px; border-radius: 4px; background: var(--band); font-size: .6875rem; line-height: 1.45; color: var(--tinte); }
.vk__tvknopf { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: .6875rem; font-weight: 600; color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vk__tvhinweis .vk__tvknopf { margin-top: 0; }
.vk__tvknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px; }
.vk__teil-texte > .vk__satz--leise { margin-top: 12px !important; }
.vk__tvbalken { margin-top: 10px; }

/* Schmal steht der Stand schon im Kopf des Streifens. */
@media (max-width: 1099.98px) { .vk__stand { display: none; } }

/* Breit: zwei Spalten, die rechte läuft mit. Kopf, Leiste und Strecke teilen sich dieselbe Breite. */
@media (min-width: 1100px) {
  .af-seite .af-breite { width: min(calc(42em + 21em + 56px), calc(100% - 32px)); }
  .af-kopf__titel, .af-kopf__satz, .af-hinweis { max-width: 42em; }
  .af-raster { display: grid; grid-template-columns: minmax(0, 42em) 21em; justify-content: space-between; gap: 56px; align-items: start; }
  .af-haupt { grid-column: 1; grid-row: 1; min-width: 0; }
  .af-rechts { grid-column: 2; grid-row: 1; align-self: stretch; margin-top: clamp(16px, 2vw, 28px); }
  .af-rechts__haft { position: sticky; top: calc(64px + 56px); display: grid; gap: 14px; max-height: calc(100vh - 136px); overflow: auto; padding: 2px; }
  .af-vorschau__kopf { display: none; }
  .af-bisher__kopf { cursor: default; pointer-events: none; border-radius: 12px 12px 0 0; border-bottom-color: var(--linie-fein); }
  .af-bisher__inhalt { display: block; border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 12px 12px; }
}
/* Schmal: Übersicht eingeklappt über der Strecke, Vorschau als Streifen am unteren Rand. */
@media (max-width: 1099.98px) {
  .af-rechts { margin-top: 16px; }
  .af-vorschau { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--linie); box-shadow: 0 -6px 24px rgba(16, 24, 32, .08); }
  .af-vorschau__kopf { border: 0; border-radius: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .af-vorschau__inhalt { display: none; max-height: 70vh; overflow: auto; padding: 0 16px 16px; }
  .af-vorschau[data-offen] .af-vorschau__inhalt { display: block; }
  .af-vorschau .vk { max-width: 26em; margin-inline: auto; }
  .af-vorschau__hinweis { max-width: 26em; margin-inline: auto; }
  .af { padding-bottom: calc(clamp(64px, 8vw, 120px) + 56px); }
}

/* ── Handy ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .af .lesen__liste li { grid-template-columns: minmax(0, 1fr); }
  .af .lesen__liste small { grid-column: 1; }
  .af .notiz-eingabe__zeile { flex-direction: column; align-items: stretch; }
  /* white-space: Bei 320 px schnitt „Bei Bestellung 148,75 € inkl. USt." ab und schob die Seite 19 px breit. */
  .af-stand__innen { flex-wrap: wrap; padding: 8px 0 7px; gap: 2px 12px; white-space: normal; }
  .af .schritt__innen { padding-left: 0; }
  .af .schritt__kopf { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; }
  .af .s6 { grid-column: span 12; }
  /* Über dem Vorschau-Streifen (48 px) kleben, nicht dahinter. */
  .af .seite__fuss { position: sticky; bottom: 48px; z-index: 5; margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linie-fein); }
  .af .seite__fuss .knopf { flex: 1; min-height: 48px; }
  .af .seite__fuss .knopf--leer { flex: 0 0 auto; }
  /* Am Ende nicht kleben: Der Satz „Mit Ihrer Anfrage bestellen Sie noch kein …" gehört direkt unter den Knopf. */
  .af .seite__fuss--ende { position: static; margin-inline: 0; padding: 0; border-top: 0; background: none; }
  .af-zusage { text-align: left; }
  .af-uebersicht > div { grid-template-columns: minmax(0, 1fr) auto; }
  .af-uebersicht dt { grid-column: 1 / -1; font-size: .8125rem; }
  .af-posten__zeile--fest .af-posten__text, .af-posten__unter { padding-left: 0; }
  /* Auf dem Handy steht der Satz unter dem Posten, eingerückt wie dessen Text. */
  .af-posten__zeile:has(.af-posten__preis--satz) { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .af-posten__preis--satz { max-width: none; text-align: left; padding-left: 32px; }
}

/* ── Handy, 11.10.2026 (Phil: „Das Handy-Design ist noch schlecht", PC bleibt) ─────────
   Die Fortschrittszeile klebt direkt unter der Kopfleiste (die ist am Handy 56 px hoch,
   vorher blieb ein Spalt, durch den der Inhalt schien). Nur ein Fortschrittsbalken: der der
   Strecke, nicht zusätzlich der Lesefortschritt der Seite. Titel in Handygröße. */
@media (max-width: 1040px) {
  .af-stand { top: var(--kopf); }
  body:has(.af-stand) .kopf .fortschritt { display: none; }
  /* Bei offenem Menü liegt der Vorschau-Streifen nicht darüber. */
  body:has(.kopf[data-offen]) .af-vorschau { display: none; }
}
@media (max-width: 600px) {
  .af-kopf { padding: calc(var(--kopf) + 28px) 0 24px; }
  .af-kopf__titel { font-size: 2rem; line-height: 1.1; text-wrap: balance; }
  .af-kopf__satz { font-size: 1rem; line-height: 1.5; }
  .af .seite__fuss { gap: 12px; }
  .af .seite__fuss .knopf { min-height: 50px; }
  .af .seite__fuss .knopf--leer { min-width: 104px; }
  .af-vorschau__kopf { min-height: 52px; }
  /* Letzter Schritt: der lange Absendeknopf in einer Zeile über die volle Breite, Zurück darunter. */
  .af .seite__fuss--ende { flex-wrap: wrap; }
  .af .seite__fuss--ende .knopf--gross { order: -1; flex: 1 1 100%; min-height: 54px; }
  .af .seite__fuss--ende .knopf--leer { flex: 1 1 100%; }
}

/* ── Aufmaß vor Ort: Kasten in Schritt 3 und Anfragefenster (Phil, 11.10.2026) ─────────
   Ruhig wie der Rest: Haarlinie, helles Band, ein leerer Knopf. Keine Preise, die rechnet
   Phil je Anfrage. Das Fenster ist ein <dialog>; am Handy steht es als Blatt von unten. */
.vorort { margin: 22px 0 0; padding: 18px 20px 16px; border-radius: 12px; background: var(--band-hell); border: 1px solid var(--linie-fein); }
.vorort__titel { margin: 0; font-size: 1rem; font-weight: 600; color: var(--tinte); }
.vorort__text { margin: 4px 0 14px; max-width: 36em; font-size: .9375rem; line-height: 1.55; color: var(--text); }
.vorort__zusage { margin: 10px 0 0; font-size: .8125rem; color: var(--leise); }

.vorort-dialog { width: min(36em, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--text); box-shadow: 0 24px 64px rgba(16, 24, 32, .22); overflow: auto; overscroll-behavior: contain; }
.vorort-dialog::backdrop { background: rgba(16, 24, 32, .42); }
.vorort-form { padding: 22px 24px 24px; }
.vorort-dialog__kopf { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.vorort-dialog__titel { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--tinte); }
.vorort-dialog__zu { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin: -8px -10px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--leise); cursor: pointer; }
.vorort-dialog__zu:hover { background: var(--band-hell); color: var(--tinte); }
.vorort-dialog__zu svg { width: 18px; height: 18px; }
.vorort-dialog__satz { margin: 10px 0 0; font-size: .9375rem; line-height: 1.55; }
.vorort-dialog__objekt { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--band-hell); font-size: .9375rem; color: var(--tinte); }
.vorort-dialog .feld { margin-top: 16px; }
.vorort-dialog .reihe .feld { margin-top: 0; }
.vorort-dialog .reihe { margin-top: 18px; }
.vorort-wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.vorort-wahl > legend { margin-top: 22px; }
.vorort-wahl .af-wahl { margin-bottom: 8px; padding: 12px 14px; }
.vorort-dialog__meldung { margin: 14px 0 0; font-size: .9375rem; color: #a3261b; }
.vorort-dialog__meldung:empty { display: none; }
.vorort-dialog__meldung[data-art="ok"] { color: var(--leise); }
.vorort-dialog__fuss { margin-top: 20px; }
.vorort-dialog__fuss .knopf { width: 100%; justify-content: center; min-height: 50px; }
.vorort-dialog__fuss .t-klein { margin: 10px 0 0; }
.vorort-dialog__dank { outline: none; }
.vorort-dialog__dank-titel { margin: 16px 0 6px; font-size: 1.125rem; font-weight: 600; color: var(--tinte); }
.vorort-dialog__dank p { font-size: .9375rem; line-height: 1.55; }
.vorort-form[data-laeuft] #vorort-senden { opacity: .6; pointer-events: none; }
@media (max-width: 600px) {
  .vorort { padding: 16px; }
  .vorort .knopf { width: 100%; justify-content: center; }
  .vorort-dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .vorort-form { padding: 18px 16px 22px; }
  .vorort-dialog .reihe .s6 { grid-column: span 12; }
}

/* ── Editor-Ansicht (Phil, 13.10.2026) ──────────────────────────────────────
   „Nicht wie eine Webseite, eher wie eine kleine Software", die Breite nutzen. Ab 1100 px und mit html.af-editor
   (setzt ein Skript im Kopf der Seite, aus mit ?ansicht=seite): oben eine Werkzeugleiste, darunter drei Spalten,
   links die Schritte, in der Mitte nur der offene Schritt, rechts groß das wachsende Exposé auf einer Arbeitsfläche.
   Jede Spalte rollt für sich, die Seite selbst nicht. Schmaler bleibt alles wie oben. */
.ed-leiste, .ed-nav { display: none; }
@media (min-width: 1100px) {
  html.af-editor, html.af-editor body { height: 100%; overflow: hidden; }
  html.af-editor .fuss, html.af-editor .af-kopf, html.af-editor .af-stand, html.af-editor .af .entwurfsleiste, html.af-editor .kopf .fortschritt { display: none; }
  /* Das Menü der Webseite bleibt oben (Phil, 13.10.2026: man soll sehen, dass man auf der Webseite ist), schlank und weiß. */
  html.af-editor .kopf { height: 64px; background: #fff; }
  html.af-editor .kopf::after { opacity: 1; }
  html.af-editor .kopf .kopf__logo img { height: 34px; }
  html.af-editor .af-seite { padding: 0; }
  html.af-editor .af { display: grid; grid-template-rows: 56px minmax(0, 1fr); height: 100vh; height: 100dvh; padding: 64px 0 0; box-sizing: border-box; }

  /* Werkzeugleiste */
  html.af-editor .ed-leiste { display: flex; align-items: center; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--linie); background: #f7f9fc; }
  .ed-leiste__zurueck { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 10px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; font-size: .875rem; font-weight: 600; color: var(--tinte); text-decoration: none; }
  .ed-leiste__zurueck svg { width: 16px; height: 16px; }
  .ed-leiste__zurueck:hover { border-color: var(--akzent); color: var(--akzent); }
  .ed-leiste__zurueck:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
  .ed-leiste__titel { padding-left: 20px; border-left: 1px solid var(--linie-fein); }
  .ed-leiste__titel { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .ed-leiste__titel b { font-size: .9375rem; font-weight: 600; color: var(--tinte); }
  .ed-leiste__titel span { font-size: .75rem; color: var(--leise); }
  .ed-leiste__stand { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .8125rem; font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ed-leiste__balken { display: block; width: clamp(120px, 14vw, 260px); height: 4px; border-radius: 2px; background: var(--band); overflow: hidden; }
  .ed-leiste__balken > i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .4s var(--weich); }
  .ed-leiste__beispiel { flex: none; padding: 6px 12px; border: 1px dashed var(--linie); border-radius: 6px; background: #fff; font: inherit; font-size: .8125rem; color: var(--akzent-dunkel); cursor: pointer; }
  .ed-leiste__beispiel:hover { border-color: var(--akzent); }
  .ed-leiste__beispiel:disabled { opacity: .5; cursor: default; }
  .ed-leiste__preis { flex: none; margin: 0; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-size: .75rem; color: var(--leise); }
  .ed-leiste__preis b { font-size: .875rem; font-weight: 600; color: var(--akzent-dunkel); }

  /* Drei Spalten */
  html.af-editor .af-seite .af-raster { width: auto; margin: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(420px, 42%); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 0; min-height: 0; }
  html.af-editor .ed-nav { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 20px 12px; border-right: 1px solid var(--linie); background: #f7f9fc; }
  html.af-editor .af-haupt { grid-column: 2; grid-row: 1; min-height: 0; overflow: auto; padding: clamp(28px, 3vw, 48px) clamp(24px, 4vw, 72px) 96px; }
  html.af-editor .af-haupt > * { max-width: 44em; margin-inline: auto; }
  html.af-editor .af-rechts { grid-column: 3; grid-row: 1; min-height: 0; margin: 0; overflow: auto; padding: 24px clamp(20px, 2.5vw, 48px) 48px; border-left: 1px solid var(--linie); background: #eef2f7; }
  html.af-editor .af-rechts__haft { position: static; max-height: none; overflow: visible; padding: 0; }
  html.af-editor .af-vorschau { max-width: 620px; margin-inline: auto; }
  html.af-editor .af-vorschau .vk { zoom: 1.2; box-shadow: 0 12px 40px rgba(16, 24, 32, .08); }
  html.af-editor .af-vorschau__hinweis { text-align: center; }

  /* Schrittleiste links */
  .ed-nav__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .ed-schritt { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; text-align: left; color: var(--tinte); cursor: pointer; }
  .ed-schritt:hover:not(:disabled) { background: #fff; }
  .ed-schritt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
  .ed-schritt:disabled { cursor: default; color: var(--leise); }
  .ed-schritt[data-offen] { background: #fff; box-shadow: inset 3px 0 0 var(--akzent), 0 1px 3px rgba(16, 24, 32, .06); }
  .ed-schritt__nr { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--linie); border-radius: 50%; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--leise); background: #fff; }
  .ed-schritt[data-offen] .ed-schritt__nr { border-color: var(--akzent); color: var(--akzent); }
  .ed-schritt[data-fertig] .ed-schritt__nr { border-color: var(--akzent); background: var(--akzent); color: #fff; }
  .ed-schritt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
  .ed-schritt__text b { font-size: .875rem; font-weight: 600; color: inherit; }
  .ed-schritt:disabled .ed-schritt__text b { font-weight: 500; color: #8592a3; }
  .ed-schritt:disabled .ed-schritt__nr { color: #8592a3; border-color: var(--linie-fein); }
  .ed-schritt__text small { font-size: .75rem; line-height: 1.35; color: var(--leise); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ed-schritt__text small:empty { display: none; }
  .ed-nav__unten { margin-top: auto; padding-top: 20px; }
  /* Rechtstexte unter der Schrittleiste (der Fuß ist in der Editor-Ansicht ausgeblendet). */
  .ed-nav__recht { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 16px 0 0; padding: 12px 10px 0; border-top: 1px solid var(--linie-fein); font-size: .75rem; }
  .ed-nav__recht a { color: var(--leise); text-decoration: underline; text-underline-offset: 2px; }
  .ed-nav__recht a:hover { color: var(--akzent); }
  .ed-nav__recht a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
  /* „Das haben Sie bisher angegeben": links zum Aufklappen. */
  html.af-editor .ed-nav .af-bisher__kopf { cursor: pointer; pointer-events: auto; border-radius: 10px; font-size: .8125rem; }
  html.af-editor .ed-nav .af-bisher[data-offen] .af-bisher__kopf { border-radius: 10px 10px 0 0; }
  html.af-editor .ed-nav .af-bisher__inhalt { display: none; background: #fff; font-size: .8125rem; }
  html.af-editor .ed-nav .af-bisher[data-offen] .af-bisher__inhalt { display: block; }

  /* Mitte: nur der offene Schritt, ohne Nummer und „Ändern" (das übernimmt die Leiste links). */
  html.af-editor .af-formular { margin-top: 0; }
  html.af-editor .af .schritt:not([data-offen]) { display: none; }
  html.af-editor .af .schritt { padding: 0; border: 0; }
  html.af-editor .af .schritt__kopf { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
  html.af-editor .af .schritt__nr, html.af-editor .af .schritt__aendern { display: none; }
  html.af-editor .af .schritt__titel h2 { font-size: 1.75rem; letter-spacing: -.02em; }
  html.af-editor .af .schritt__innen { padding-left: 0; }
  html.af-editor .af-haupt > .af-hinweis { margin-bottom: 20px; }
}
/* Breitengrenze (Phil, 13.10.2026, am ultraweiten Bildschirm: „es soll schon ein Limit geben"): der Editor läuft so breit
   wie das Menü der Webseite (--raster, höchstens 1760 px) und steht mittig, daneben eine ruhige Fläche. */
@media (min-width: 1100px) {
  html.af-editor .af { background: #f2f5f9; }
  html.af-editor .ed-leiste { padding-inline: max(20px, calc((100% - 1760px) / 2 + 20px)); }
  html.af-editor .af-seite .af-raster { width: 100%; max-width: 1760px; margin-inline: auto; background: #fff; }
}
@media (min-width: 1800px) {
  html.af-editor .af-seite .af-raster { border-inline: 1px solid var(--linie); }
}

/* E-Mail aus dem Kundenkonto: fest, mit Hinweis darunter (14.10.2026) */
.feld input[readonly] { background: var(--band-hell); color: var(--text); cursor: default; }
.feld__konto { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--leise); }

/* Probeansicht im Vollbild (19.10.2026): dieselbe Vorschau (#vk) groß, hell, ohne Rahmen um den Rahmen. Die Vorschau ist
   in kleinen festen Größen gesetzt (rem); im Dialog wird sie als Ganzes vergrößert, damit das Verhältnis bleibt. */
.probe { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--band); color: var(--text); }
.probe::backdrop { background: rgba(16, 24, 32, .42); }
.probe[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.probe__kopf, .probe__fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(16px, calc((100% - 1100px) / 2)); background: #fff; border-bottom: 1px solid var(--linie); }
.probe__fuss { justify-content: flex-end; border-top: 1px solid var(--linie); border-bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.probe__titel { margin: 0; display: grid; gap: 2px; }
.probe__titel b { font-size: 1.0625rem; color: var(--tinte); }
.probe__titel span { font-size: .875rem; color: var(--leise); }
.probe__flaeche { overflow: auto; padding: clamp(16px, 4vw, 48px) 16px; overscroll-behavior: contain; }
.probe__flaeche .vk { max-width: 26em; margin: 0 auto; zoom: 1.15; }
@media (min-width: 900px) { .probe__flaeche .vk { zoom: 1.6; } }
@media (min-width: 1800px) { .probe__flaeche .vk { zoom: 1.9; } }
@media (max-width: 599.98px) { .probe__titel span { display: none; } .probe__zu { display: none; } }

/* Ohne Festpreis (19.10.2026): ein Satz, was zu tun ist, und der Weg zu Exposé Individuell. */
.af-kosten__hindernis { margin: 10px 0 0 !important; padding: 10px 12px; border-left: 3px solid var(--akzent); background: var(--band); font-size: .9375rem; line-height: 1.45; color: var(--tinte); }
.af-kosten__hindernis a { color: var(--akzent); font-weight: 600; }