/* Anfrage-Modul · Rahmen. Ruhig, hochwertig, im Erscheinungsbild des Büros (Variablen aus rahmen.js). */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("fonts/manrope-700.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Lexend ist die Schrift der Marke und die Vorgabe des Formulars. Manrope und Sora bleiben zur Wahl, damit ein
   Büro das Formular an die eigene Website angleichen kann. */
@font-face { font-family: "Lexend"; src: url("fonts/lexend.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --akzent: #1C7D57; --auf-akzent: #fff; --akzent-zart: #E7F3EC; --auf-akzent-zart: #15603F; --akzent-linie: #8FC7AE;
  /* Grundfarben der Marke (marke/LIESMICH.md §2) — dieselben wie Konto, Mails und Website.
     Die Akzentfarbe darüber gehört dem Büro und wird je Formular gesetzt. */
  --text: #0E2744; --text-2: #4A5A70; --linie: #E2E6EA; --flaeche: #FFFFFF; --flaeche-2: #F6F7F4;
  --fehler: #B42318; --fehler-zart: #FDECEA; --gut: #1C7D57; --gut-zart: #E7F5EE; --warn: #B7791F;
  --r: 12px; --r-klein: 8px; --r-gross: 20px;
  --schrift: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --titel: var(--schrift);
  --kurve: cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
/* Dunkle Variante in den Nachttönen der Marke (Nacht, Nacht-tief, Nacht-2) */
body.hg-dunkel { --text: #FFFFFF; --text-2: rgba(255,255,255,.74); --linie: rgba(255,255,255,.14); --flaeche: #0A1D33; --flaeche-2: #0E2744; --fehler: #FF8A80; --fehler-zart: rgba(255,138,128,.12); --gut: #2FBF86; --gut-zart: rgba(47,191,134,.12); color-scheme: dark; }
body.hg-transparent { --flaeche: transparent; }
body.schrift-manrope { --schrift: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --titel: var(--schrift); }
body.schrift-sora { --schrift: "Manrope", system-ui, -apple-system, sans-serif; --titel: "Sora", var(--schrift); }
body.schrift-system { --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --titel: var(--schrift); }
body.ecken-eckig { --r: 3px; --r-klein: 2px; }
body.ecken-rund { --r: 20px; --r-klein: 14px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--flaeche); color: var(--text); font: 400 16px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; }
body.modus-seite { background: var(--flaeche-2); }
@media (max-width: 480px) { html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } }
@media (max-width: 760px) { body.modus-seite { background: var(--flaeche); } body.modus-seite .app { margin-top: 0; box-shadow: none; border-radius: 0; } }
body.modus-seite .app, body.modus-seite .fuss { max-width: 760px; margin-inline: auto; }
body.modus-seite .app { background: var(--flaeche); margin-top: clamp(0px, 4vw, 40px); border-radius: var(--r); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px -18px rgba(20,26,42,.18); }
body.modus-fenster .app { padding-top: 56px; }
.app { padding: clamp(18px, 4vw, 32px); }
a { color: var(--akzent); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.kopf { margin-bottom: 22px; }
.kopf-buero { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.kopf-titel { margin: 0; font: 600 clamp(1.5rem, 4.2vw, 2rem)/1.15 var(--titel); letter-spacing: -.02em; text-wrap: balance; }
.kopf-text { margin: 8px 0 0; color: var(--text-2); max-width: 56ch; font-size: 1.02rem; }
.laedt { display: flex; align-items: center; gap: 10px; color: var(--text-2); padding: 24px 0; }
.kringel, .wartet { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linie); border-top-color: var(--akzent); animation: dreh .8s linear infinite; vertical-align: -3px; }
@keyframes dreh { to { transform: rotate(360deg); } }

.fortschritt { margin-bottom: 6px; }
.fortschritt-spur { height: 3px; background: var(--linie); border-radius: 3px; overflow: hidden; }
.fortschritt-balken { display: block; height: 100%; background: var(--akzent); border-radius: 3px; transition: width .45s var(--kurve); }
.fortschritt-kopf { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.schritt-label { font-size: .78rem; font-weight: 600; color: var(--text-2); }
.schritt-namen { display: none; list-style: none; margin: 0; padding: 0; gap: 18px; font-size: .78rem; color: var(--text-2); }
.schritt-namen li.an { color: var(--text); font-weight: 700; }
.schritt-namen li.fertig { color: var(--akzent); }
@media (min-width: 620px) { .schritt-label { position: absolute; left: -10000px; } .schritt-namen { display: flex; } .fortschritt-kopf { justify-content: flex-start; } }
/* FB344: Solange die Zahl der Schritte noch von einer Wahl abhängt, steht auch am Rechner nur »Schritt 1« da, keine Leiste. */
@media (min-width: 620px) { .fortschritt-kopf.offen .schritt-label { position: static; } .fortschritt-kopf.offen .schritt-namen { display: none; } }
.schritt-titel { margin: 22px 0 16px; font: 600 clamp(1.3rem, 3.4vw, 1.6rem)/1.2 var(--titel); letter-spacing: -.015em; outline: none; }
.lead { margin: 0 0 14px; color: var(--text-2); }
.klein { font-size: .85rem; color: var(--text-2); margin: 6px 0 0; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; align-items: stretch; }
.kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 112px; padding: 18px; text-align: left; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,26,42,.04); transition: border-color .2s var(--kurve), box-shadow .25s var(--kurve), transform .2s var(--kurve), background .2s var(--kurve); }
.kachel:hover { border-color: var(--akzent-linie); box-shadow: 0 10px 28px -14px rgba(20,26,42,.22); transform: translateY(-1px); }
.kachel:active { transform: scale(.98); }
.kachel.an { border-color: var(--akzent); background: var(--akzent-zart); box-shadow: 0 0 0 1px var(--akzent) inset; }
.kachel-symbol { width: 28px; height: 28px; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kachel-name { font-weight: 600; font-size: 1rem; line-height: 1.3; margin-top: auto; 
  /* **Lange Fachwörter müssen umbrechen dürfen.** »Brandschutzkonzept« ist ein Wort und passt in
     keine halbe Kachelbreite; ohne Trennung wurde es abgeschnitten (»Brandschutzkonze…«), während
     zweiwortige Namen wie »Flucht- und Rettungspläne« von selbst umbrachen. Die Silbentrennung
     braucht `lang="de"` am Dokument — das steht dort. `overflow-wrap` ist der Rückfall für
     Browser ohne deutsche Trennmuster: lieber hart umgebrochen als abgeschnitten. */
  hyphens: auto; overflow-wrap: break-word; }
.kachel-euro { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent-zart); color: var(--auf-akzent-zart); font-size: .72rem; font-weight: 700; }
@media (max-width: 480px) {
  .kacheln { grid-template-columns: 1fr; gap: 8px; }
  .kachel { flex-direction: row; align-items: center; min-height: 60px; padding: 12px 44px 12px 14px; gap: 12px; }
  .kachel-name { margin-top: 0; }
  .kachel-symbol { width: 24px; height: 24px; flex: none; }
  .kachel-euro { top: 50%; margin-top: -11px; }
}
.ablauf { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 10px 24px; }
.ablauf li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-2); }
.ablauf svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feld { position: relative; display: flex; flex-direction: column; gap: 5px; margin-top: 14px; min-width: 0; }
.feld-label { font-size: .9rem; font-weight: 600; }
.feld-hilfe { font-size: .8rem; color: var(--text-2); }
.eingabe { width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 16px; color: var(--text); background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--r-klein); transition: border-color .2s var(--kurve), box-shadow .2s var(--kurve); }
body.hg-transparent .eingabe { background: rgba(255,255,255,.9); }
textarea.eingabe { min-height: 90px; resize: vertical; }
.eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-zart); }
.feld.ungueltig .eingabe { border-color: var(--fehler); }
.feld-fehler { font-size: .82rem; color: var(--fehler); min-height: 0; }
.feld-fehler:empty { display: none; }
/* »align-items: end« richtet die Felder aneinander aus, nicht die Beschriftungen. Hat eines einen
   Hilfetext und das andere nicht, stand das Feld daneben sonst 25 px tiefer — und zwei Eingabefelder auf
   verschiedener Höhe sehen aus wie ein Fehler, obwohl beide richtig sitzen. */
.zeile-2 { display: grid; grid-template-columns: 1fr; gap: 0 12px; align-items: end; }
.zeile-plz { display: grid; grid-template-columns: 120px 1fr; gap: 0 12px; align-items: end; }
.zeile-knopf { display: flex; align-items: flex-end; gap: 10px; }
.zeile-knopf .feld { flex: 1; }
@media (min-width: 520px) { .zeile-2 { grid-template-columns: 1fr 1fr; } }

/* Die Hülle ist genau so hoch wie das Eingabefeld — daran richten sich Knopf und Kreuz aus, nicht am
   Feldblock mit Label und Fehlerzeile darüber und darunter. */
.eingabe-huelle { position: relative; display: block; }
/* Steht der Suchen-Knopf im Feld, wird das Feld höher: Ein Knopf muss 44 px Tippfläche behalten, und in
   ein 45 px hohes Feld passt er nur, wenn er es ganz ausfüllt. Dazu Platz rechts, damit eine lange
   Adresse nicht unter dem Knopf verschwindet. */
.eingabe-huelle:has(.suche-knopf:not([hidden])) .eingabe { min-height: 52px; padding-right: 108px; }
.suche-leeren { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 20px; background: transparent; color: var(--text-2); font-size: 22px; cursor: pointer; }
/* Sichtbar nur, wenn der Dienst keine Vorschläge beim Tippen erlaubt (Nominatim). Dann muss ein Knopf
   dastehen: Dass Enter sucht, weiß nur, wem es jemand sagt. Rückt neben das Feld, nicht darunter — die
   Suche bleibt eine Handlung, keine zweite Zeile. */
/* **Ein Knopf, der im Feld sitzt, muss auch im Feld sitzen.** Vorher stand er auf `top: 28px` — das ist
   genau die Oberkante des Feldes. Oben klebte er am Rahmen, unten blieben vier Pixel Luft, und über der
   Rundung des Feldes stand seine eigene Ecke. Das Feld ist 48 px hoch, der Knopf 44: zwei Pixel oben,
   zwei unten.

   Und der innere Radius ist kleiner als der äußere, um genau den Abstand dazwischen (6 px). Zwei gleiche
   Radien ineinander sehen immer falsch aus, weil die Kurven nicht parallel laufen — bei »runden Ecken«
   fällt es sofort auf, bei »eckig« gar nicht, deshalb rechnet die Zeile statt zu raten. */
.suche-knopf { position: absolute; right: 4px; top: 4px; bottom: 4px; min-height: 44px; padding: 0 16px; border: 0;
  border-radius: max(2px, calc(var(--r-klein) - 4px));
  background: var(--akzent); color: var(--auf-akzent); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.suche-knopf:hover { filter: brightness(1.06); }
.suche-knopf:active { transform: translateY(1px); }
/* Das Kreuz rückt nach links, wenn der Knopf daneben steht — sonst liegen beide übereinander. */
.suche-knopf:not([hidden]) ~ .suche-leeren, .eingabe-huelle:has(.suche-knopf:not([hidden])) .suche-leeren { right: 104px; }
.vorschlaege { list-style: none; margin: 4px 0 0; padding: 6px; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-klein); box-shadow: 0 16px 40px -12px rgba(20,26,42,.28); }
body.hg-transparent .vorschlaege { background: #fff; }
.vorschlag { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 6px; cursor: pointer; min-height: 44px; justify-content: center; }
.vorschlag span { font-size: .82rem; color: var(--text-2); }
.vorschlag[aria-selected="true"], .vorschlag:hover { background: var(--akzent-zart); }
.vorschlag-info { padding: 10px 12px; color: var(--text-2); font-size: .9rem; }

.karten-bereich { margin-top: 14px; }
.karte { position: relative; height: 380px; overflow: hidden; border-radius: var(--r); background: #dfe4ec; touch-action: none; cursor: crosshair; user-select: none; }
.karte.zieht { cursor: grabbing; }
.karte-ebene { position: absolute; inset: 0; transform-origin: center; }
.karte-bild, .karte-over { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.karte-bild.laedt { opacity: .55; }
.karte-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl { fill: transparent; stroke: rgba(255,255,255,.75); stroke-width: 1.2; }
.fl.hover { fill: rgba(255,255,255,.22); stroke: #fff; stroke-width: 2.2; }
.fl.gewaehlt { fill: color-mix(in srgb, var(--akzent) 30%, transparent); stroke: #fff; stroke-width: 2.6; filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.fl-nr { fill: #fff; font: 700 11px/1 var(--schrift); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; pointer-events: none; }
/* Teilungsskizze (Plan P2): dieselbe Bildsprache wie die Karte; die neue Grenze in der Akzentfarbe mit weißem Rand, Punkte groß genug zum Treffen. */
/* FB288: eine Spalte minmax(0, 1fr). Ohne sie dehnt sich das Grid auf die vergrößerte Fläche aus (»+«), statt dass der Rahmen in sich scrollt:
   die Skizze wurde breiter als die Seite, Zoom-Pille und rechter Teil des Grundstücks lagen außerhalb. */
.skizze { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.skizze-flaeche { position: relative; overflow: hidden; border-radius: var(--r); background: #dfe4ec; cursor: crosshair; user-select: none; touch-action: manipulation; }
.skizze-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.skizze-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.skizze-flurstueck { fill: color-mix(in srgb, var(--akzent) 18%, transparent); stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 3px rgba(0,0,0,.45)); }
.skizze-linie { fill: none; stroke: var(--akzent); stroke-width: 3.2; stroke-linejoin: round; filter: drop-shadow(0 0 2px #fff); }
.skizze-punkt { fill: var(--akzent); stroke: #fff; stroke-width: 2; }
/* Größe je Teil (Jonathan 11.10.2026: »klein und dezent«): weiße Schrift mit feinem dunklem Rand, kein Kasten; Größe und Rand setzt skizze.js je Zoom. */
.skizze-etikett { fill: #fff; stroke: rgba(14, 39, 68, .7); paint-order: stroke; font-family: var(--schrift); font-weight: 400; pointer-events: none; }
.skizze-status { margin: 0; min-height: 2.6em; }
/* Werkzeuge wie in einer Karten-App (Jonathan 11.10.2026): Rückgängig und Größer/Kleiner schweben auf dem Luftbild, darunter drei gleich breite Knöpfe.
   Tippflächen mindestens 44 px. Was gerade nicht geht, fällt weg; die übrigen Knöpfe teilen sich die Breite gleich (kein Loch in der Reihe).
   Auf der Zoom-Pille wird nur das Symbol blass, die Pille bleibt ganz. */
.skizze-buehne { position: relative; min-width: 0; }
.skizze-symbol { display: grid; place-items: center; }
.skizze-symbol svg { width: 22px; height: 22px; }
.skizze-schwebend, .skizze-zoom { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; color: var(--text);
  background: rgba(255,255,255,.94); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.skizze-schwebend { position: absolute; top: 10px; left: 10px; border-radius: 50%; box-shadow: 0 2px 8px rgba(14,39,68,.22); }
.skizze-zoomleiste { position: absolute; right: 10px; bottom: 10px; display: grid; border-radius: 22px; overflow: hidden; box-shadow: 0 2px 8px rgba(14,39,68,.22); }
.skizze-zoomleiste .skizze-zoom + .skizze-zoom { border-top: 1px solid var(--linie); }
.skizze-zoom:disabled { cursor: default; }
.skizze-zoom:disabled .skizze-symbol { opacity: .3; }
.skizze-schwebend:disabled { visibility: hidden; }
/* FB281: Die Reihe behält ihre Höhe, auch wenn Knöpfe wegfallen oder dazukommen; sonst rutscht die (zentrierte) Seite und die Karte springt unter dem Finger. */
.skizze-knoepfe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; min-height: 80px; }
.skizze-werkzeug { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 68px; margin: 0; padding: 8px 4px; border: 1px solid var(--linie);
  border-radius: var(--r); background: var(--flaeche); color: var(--text); font: 600 14px/1.2 var(--schrift); text-align: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.skizze-werkzeug:first-child { color: var(--akzent); border-color: var(--akzent-linie); background: var(--akzent-zart); }
.skizze-werkzeug:disabled { display: none; }
.skizze-werkzeug:focus-visible, .skizze-schwebend:focus-visible, .skizze-zoom:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
@media (hover: hover) { .skizze-werkzeug:not(:disabled):hover { border-color: var(--akzent-linie); } .skizze-schwebend:hover, .skizze-zoom:not(:disabled):hover { background: #fff; } }
.skizze-rahmen { overflow: auto; border-radius: var(--r); -webkit-overflow-scrolling: touch; }
.skizze-rahmen .skizze-flaeche { border-radius: 0; }
.skizze-linie-offen { stroke-dasharray: 8 5; }
.skizze-punkt-gewaehlt { fill: #fff; stroke: var(--akzent); stroke-width: 4; }
.skizze-teil { stroke: none; }
.skizze-teil-0 { fill: color-mix(in srgb, var(--akzent) 10%, transparent); }
.skizze-teil-1 { fill: color-mix(in srgb, #ffffff 22%, transparent); }
.skizze-teil-2 { fill: color-mix(in srgb, var(--akzent) 26%, transparent); }
.skizze-teil-3 { fill: color-mix(in srgb, #000000 10%, transparent); }
.skizze-zuerst .karte { height: 520px; }
/* Skizze zuerst, abgespeckt (Jonathan 09.10.2026): nur Adressfeld, Karte, Linie, Ergebnissatz und »Weiter zur Anfrage«. */
.skizze-zuerst .fortschritt, .skizze-zuerst .navigation, .skizze-zuerst .g-optionen, .skizze-zuerst .gefunden, .skizze-zuerst .karte-liste,
.skizze-zuerst .anlass-kasten, .skizze-zuerst .handblock { display: none !important; }
.skizze-zuerst-zeichnen .karten-bereich { display: none !important; }
.skizze-zuerst .skizze-bild { object-fit: fill; }
.skizze-zuerst-weiter { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 520px) { .skizze-zuerst .karte { height: 440px; } }
.marke-halo { fill: color-mix(in srgb, var(--akzent) 25%, transparent); stroke: #fff; stroke-width: 2; }
.marke-nadel { fill: var(--akzent); stroke: #fff; stroke-width: 2; }
.karte-steuerung { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.karte-zoom { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.95); color: var(--text); font: 600 22px/1 var(--schrift); box-shadow: 0 2px 10px rgba(0,0,0,.2); cursor: pointer; }
.karte-hinweis { position: absolute; left: 10px; bottom: 10px; right: 64px; width: fit-content; padding: 8px 12px; border-radius: 999px; background: rgba(14,19,32,.82); color: #fff; font-size: .85rem; pointer-events: none; }
.karte-spinner { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 3px solid rgba(255,255,255,.5); border-top-color: #fff; animation: dreh .8s linear infinite; }
.karte-quelle { font-size: .72rem; color: var(--text-2); margin: 6px 0 0; }
.karte-liste { margin-top: 14px; }
.karte-liste-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 8px; }
.karte-liste-titel { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.karte-liste-tipp { font-size: .8rem; color: var(--text-2); }
/* Flurstücke als Kacheln mit echter Form: gleich groß, ruhig, gewählte Kachel mit Haken */
.fl-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .fl-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-kachel { gap: 10px; padding: 10px; } .fl-kachel-form { width: 38px; height: 38px; } }
.fl-kachel { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px; text-align: left; font: inherit; color: var(--text); background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--r); cursor: pointer; transition: border-color .2s var(--kurve), background .2s var(--kurve), box-shadow .2s var(--kurve), transform .12s var(--kurve); }
.fl-kachel:hover { border-color: var(--akzent-linie); box-shadow: 0 6px 18px -12px rgba(20,26,42,.35); }
.fl-kachel:active { transform: scale(.98); }
.fl-kachel.an { border-color: var(--akzent); background: var(--akzent-zart); box-shadow: inset 0 0 0 1px var(--akzent); }
.fl-kachel-form { width: 44px; height: 44px; flex: none; padding: 2px; border-radius: 10px; background: var(--flaeche-2); }
.fl-kachel-form path { fill: color-mix(in srgb, var(--akzent) 16%, transparent); stroke: var(--akzent); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fl-kachel.an .fl-kachel-form { background: var(--flaeche); }
.fl-kachel.an .fl-kachel-form path { fill: color-mix(in srgb, var(--akzent) 38%, transparent); }
.fl-kachel-text { display: flex; flex-direction: column; min-width: 0; }
.fl-kachel-etikett { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); line-height: 1.2; }
.fl-kachel-nr { font-weight: 700; font-size: 1.05rem; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fl-kachel-flaeche { font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fl-kachel-haken { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 2px var(--flaeche); }
.fl-kachel-haken::after { content: ""; position: absolute; left: 8px; top: 4.5px; width: 5px; height: 10px; border: solid var(--auf-akzent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.gefunden { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.g-kopf { display: flex; gap: 12px; align-items: flex-start; }
.g-kopf span { display: block; font-size: .82rem; color: var(--text-2); }
.haken { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--akzent); position: relative; margin-top: 1px; }
.haken::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid var(--auf-akzent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.g-liste { margin: 10px 0 0; }
/* Aufklappbar, weil sechs Zeilen den Schritt vollstellen, bevor jemand weiterklicken kann. Die Zeile
   selbst sagt, was drin ist — ein Dreieck allein sagt nur, dass es weitergeht. */
.g-mehr { margin-top: 10px; border-top: 1px solid var(--linie); }
.g-mehr > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
  color: var(--akzent); font-size: .92rem; font-weight: 600; list-style: none; }
.g-mehr > summary::-webkit-details-marker { display: none; }
.g-mehr > summary:hover { text-decoration: underline; }
/* **Ein Zeichen, dass sich hier etwas öffnet.** `display: flex` auf dem summary schluckt den Marker des
   Browsers — ohne Ersatz steht dort eine Überschrift, die aussieht, als gehöre sie zum Kasten, und
   niemand tippt darauf. Der Winkel dreht sich beim Öffnen, damit man sieht, dass er es war. */
.g-mehr > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px;
  border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px);
  transition: transform .18s var(--kurve); }
.g-mehr[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.g-mehr .g-liste { margin-top: 0; }
.g-mehr .g-zeile:first-child { border-top: 0; }
.g-zeile { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: .92rem; }
/* »minmax(0, 1fr)« und »overflow-wrap« gehören zusammen: Ein Rasterfeld ist von sich aus so breit wie sein
   längstes Wort. »Hochwassergefahr« ist breiter als die Spalte und lief deshalb in den Wert daneben. */
.g-zeile dt, .g-zeile dd { min-width: 0; overflow-wrap: anywhere; }
.g-zeile dt { color: var(--text-2); }
.g-zeile dd { margin: 0; }
.g-zeile small { display: block; color: var(--text-2); font-size: .8rem; }

.schalter-zeile { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; cursor: pointer; font-size: .95rem; }
.schalter-zeile input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); }
.textknopf { margin-top: 12px; padding: 10px 0; min-height: 44px; border: 0; background: none; color: var(--akzent); font: 600 .95rem var(--schrift); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.mehr { margin-top: 14px; border-top: 1px solid var(--linie); }
.mehr summary { padding: 12px 0; min-height: 44px; font-weight: 600; cursor: pointer; }
.mehr-inhalt { padding-bottom: 6px; }

.gebuehr { margin-top: 16px; padding: 16px; border-radius: var(--r); background: var(--flaeche-2); border: 1px solid var(--linie); }
/* Im eigenen Schritt steht die Box ganz oben — dann trägt der Schritttitel den Abstand, nicht sie. */
.schritt[data-schritt="gebuehr"] .gebuehr { margin-top: 0; }
.geb-kopf { display: flex; gap: 12px; align-items: flex-start; }
.geb-kopf span { display: block; font-size: .82rem; color: var(--text-2); }
.geb-symbol { flex: none; display: grid !important; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--akzent); color: var(--auf-akzent) !important; font-weight: 700; font-size: .95rem !important; }
/* Die Rechtsgrundlage: erste Zeile der Box, grau, ohne eigene Überschrift — der Schritt trägt den Titel. */
/* Rechtsgrundlage und Prüfstand: eine Zeile, klein gesetzt. Wichtig genug, dass sie dasteht —
   nicht wichtig genug, um über der Zahl zu thronen, für die jemand hergekommen ist. */
.geb-grundlage { margin: 0; font-size: .76rem; line-height: 1.4; color: var(--text-2); }
.geb-pruef { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--akzent-zart); color: var(--text); font-size: .74rem; white-space: nowrap; }
/* Ein Satz ist kein Etikett: eigene Zeile, bricht um, bleibt im Kasten (der Vorbehalt seit L200). */
.geb-pruef.geb-pruef-satz { display: block; margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; white-space: normal; line-height: 1.45; max-width: 100%; }
/* »Nachschlagen bei BORIS-BW« brach mitten im Namen um — der Name bleibt zusammen, der Satz davor bricht. */
.geb-hilfe a { white-space: nowrap; }
.eigentum-vorhaben { margin-top: 18px; }
.geb-eingaben { margin-top: 12px; }
.geb-feld { border-top: 1px solid var(--linie); }
.geb-feld .geb-zeile { border-top: 0; }
.geb-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
/* **Bodenrichtwert nachschlagen** (BORIS Weg A, L284): Knopf und Hilfe unter Feld und Einheit, über die ganze Breite. */
.brw-zeile { flex-wrap: wrap; }
.brw-nachschlagen { flex-basis: 100%; }
.brw-nachschlagen .knopf { width: 100%; min-height: 44px; }
.brw-nachschlagen .geb-hilfe { margin-top: 8px; }
/* **Der Vorbehalt an einer vorgesetzten Zahl.** Kein grauer Kleintext: Wer eine Zahl geschenkt bekommt,
   hält sie für geprüft. Das Ausrufezeichen steht als eigene Marke davor, damit man es sieht, bevor man
   liest. Sobald jemand den Regler anfasst, verschwindet der Kasten — das ist die Belohnung fürs Hinsehen. */
.geb-vorbehalt { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 8px;
  padding: 7px 10px; border-radius: var(--r-klein); background: var(--warn-zart);
  border-left: 3px solid var(--warn); font-size: .79rem; line-height: 1.4; color: var(--text); }
.geb-vorbehalt b { flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1px;
  border-radius: 50%; background: var(--warn); color: #fff; font-size: .66rem; line-height: 1; }
.geb-label { display: flex; flex-direction: column; font-size: .92rem; }
/* Der Weg zum Bodenrichtwert steht unter dem Feldnamen, nicht daneben: Er ist eine Auskunft, kein
   zweites Etikett — und am Telefon bricht eine dritte Spalte ohnehin um. */
.geb-hilfe { display: block; margin-top: 2px; font-size: .8rem; color: var(--text-2); }
.geb-hilfe a { color: var(--akzent); }
.geb-label span { font-size: .8rem; color: var(--text-2); }
.geb-block { padding: 10px 0; border-top: 1px solid var(--linie); }
/* Steht eine Frage ganz oben im Kasten (L281: Unterfragen ohne Zahl, etwa beim Lageplan), trennt die Linie nichts. */
.geb-rechnung > .geb-block:first-child { border-top: 0; padding-top: 0; }
.stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); font: 600 20px/1 var(--schrift); cursor: pointer; }
.stepper button:active { transform: scale(.94); }
.stepper output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.einheit { display: flex; align-items: center; gap: 6px; flex: none; }
.einheit .eingabe { width: 110px; text-align: right; }
/* **Auswahl mit Knöpfen** (L384, Jonathan 29.09.2026): bis drei Antworten immer in einer Zeile, gleich breit; ab vier umgebrochen ohne einzelnen
   Rest (2 + 2 statt 3 + 1). Die Spaltenzahl rechnet auswahlSpalten() in assistent.js aus der Zahl der Antworten, eng und breit. Welche gilt,
   entscheidet die Breite der Hülle (Container Query), nicht das Fenster: Im zweispaltigen Rechner ist die Eingabespalte schmaler als das
   Fenster, im Popup der Website rund 950 px breit (dort stand »Weiß nicht« allein in der zweiten Zeile). */
.auswahl-huelle { container-type: inline-size; }
.auswahl-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; align-items: stretch; }
.auswahl-raster[data-eng="1"] { grid-template-columns: minmax(0, 1fr); }
.auswahl-raster[data-eng="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auswahl-raster[data-eng="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* FB289: bleibt in der engen Spalte eine Antwort allein, nimmt sie die ganze Breite (breit gilt wieder die normale Zelle). */
.auswahl-raster[data-voll="1"] > :last-child { grid-column: 1 / -1; }
@container (min-width: 520px) {
  .auswahl-raster[data-voll="1"] > :last-child { grid-column: auto; }
  .auswahl-raster[data-breit="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auswahl-raster[data-breit="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auswahl-raster[data-breit="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Der Text darf im Knopf umbrechen, nie abgeschnitten werden (bei 375 px drei Antworten nebeneinander). */
.auswahl { min-height: 48px; padding: 8px; font: 500 .85rem var(--schrift); color: var(--text); background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--r-klein); cursor: pointer;
  overflow-wrap: anywhere; hyphens: auto; }
.auswahl.an { border-color: var(--akzent); background: var(--akzent-zart); font-weight: 700; }
.geb-ergebnis { margin-top: 12px; }
.kacheln-geb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.kacheln-geb.eins { grid-template-columns: 1fr; }
.geb-kachel { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie); height: 100%; }
.geb-kachel.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.k-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.k-betrag { font: 600 clamp(1.15rem, 4.5vw, 1.45rem)/1.2 var(--titel); font-variant-numeric: tabular-nums; }
.k-sub { font-size: .78rem; opacity: .85; margin-top: auto; }
.geb-notiz { margin: 10px 0 0; font-size: .88rem; color: var(--text-2); }
.geb-zusammen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 10px 0 0; padding: 12px 14px; border-radius: var(--r); background: var(--flaeche); border: 1px solid var(--linie); font-size: .9rem; }
.geb-zusammen b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.geb-zusammen small { flex-basis: 100%; font-size: .78rem; color: var(--text-2); }
/* Ergebnis zuerst und groß (06.10.2026): die Summe oben in der Akzentfarbe, die Teile darunter kleiner. */
.geb-zusammen.gross { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 10px; padding: 14px; background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.geb-zusammen.gross span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.geb-zusammen.gross > * { max-width: 100%; }
/* FB302: Die Summe mit Cent (FB298) ist am Handy breiter als die Karte; umbrechen darf sie nur zwischen den Zahlen, die Zahlen bleiben ganz (zahlZusammen). */
.geb-zusammen.gross b { font: 700 clamp(1.5rem, 6vw, 1.9rem)/1.15 var(--titel); white-space: normal; }
.geb-zusammen.gross small { color: inherit; opacity: .85; }
.kacheln-geb.teile .geb-kachel { padding: 10px 12px; }
.kacheln-geb.teile .k-betrag { font-size: clamp(.98rem, 3.5vw, 1.1rem); }
.geb-verbindlich { margin: 12px 0 0; font-size: .82rem; color: var(--text-2); }
.geb-aufstellung { margin: 0 0 8px; }
.geb-aufstellung > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: .88rem; }
.geb-aufstellung dt span { display: block; font-size: .78rem; color: var(--text-2); }
.geb-aufstellung dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.geb-aufstellung .summe { font-weight: 700; }

.segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--flaeche-2); border-radius: 999px; width: fit-content; }
.segment-teil { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: 500 .9rem var(--schrift); cursor: pointer; }
.segment-teil.an { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 700; }
/* Drei Antworten auf eine Pflichtfrage: Sie dürfen nicht aussehen wie ein Vorschlag, den man überliest.
   Auf breiten Flächen nebeneinander, am Telefon untereinander — dort ist »Ich handle im Auftrag« zu lang
   für ein Drittel der Zeile. */
.segment-breit { display: flex; width: 100%; }
.segment-breit .segment-teil { flex: 1 1 0; min-width: 0; text-align: center; }
/* **Untereinander ist die gemeinsame Pille eine Blase mit drei Zeilen darin** (Jonathan, 25.09.2026: »eine riesige
   Pille, und in der sind alle drei Optionen«). Am Telefon wird jede Antwort eine eigene Zeile mit eigenem Rand,
   wie eine Kachel; die gewählte trägt die Akzentfarbe. Die Rundung kommt aus dem Token, nicht aus 999px. */
@media (max-width: 480px) {
  .segment-breit { flex-direction: column; gap: 8px; padding: 0; background: transparent; border-radius: 0; }
  .segment-breit .segment-teil { min-height: 48px; padding: 12px 16px; border: 1.5px solid var(--linie); border-radius: var(--r); background: var(--flaeche); text-align: left; }
  .segment-breit .segment-teil.an { border-color: var(--akzent); background: var(--akzent-zart); box-shadow: 0 0 0 1px var(--akzent) inset; }
}

.rechnung { padding: 4px 0 0 32px; }
/* Der Eigentümer-Block steht nicht unter einem Häkchen, sondern für sich — ohne die Einrückung, die bei
   der Rechnung zeigt, dass sie zu dem Schalter darüber gehört. */
.rechnung.eigentuemer-block { padding-left: 0; }

.zusammen { padding: 14px 0; border-top: 1px solid var(--linie); }
.zusammen:first-child { border-top: 0; padding-top: 0; }
.zusammen-kopf { display: flex; justify-content: space-between; align-items: center; }
.zusammen-kopf .textknopf { margin: 0; }
.zusammen p { margin: 4px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.datenschutz-hinweis { margin-top: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--flaeche-2); font-size: .88rem; color: var(--text-2); }
.datenschutz-hinweis p { margin: 0; }
.datenschutz-hinweis p + p { margin-top: 6px; }
.datenschutz-mehr { margin-top: 2px; border-top: 0; }
.datenschutz-mehr > summary { padding: 0; display: flex; align-items: center; color: var(--akzent); }
.datenschutz-mehr[open] > p { margin-top: 4px; }

.fehler-box { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-klein); background: var(--fehler-zart); color: var(--fehler); font-weight: 600; font-size: .92rem; }
/* Dieselbe Box, andere Nachricht: »Ihre Angaben sind noch da« ist keine Fehlermeldung und darf nicht wie eine aussehen. */
.fehler-box.gut { background: var(--gut-zart); color: var(--gut); font-weight: 500; }
/* Markierter Text muss man sehen: Die Vorgabe des Browsers verliert auf hellen Flächen fast jeden Kontrast. */
::selection { background: var(--akzent); color: var(--auf-akzent); }
.navigation { display: flex; gap: 10px; margin-top: 22px; }
.navigation .knopf-haupt { margin-left: auto; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; font: 700 1rem var(--schrift); border-radius: 999px; cursor: pointer; border: 1.5px solid transparent; transition: transform .15s var(--kurve), background .2s var(--kurve), box-shadow .2s var(--kurve); }
.knopf:active { transform: scale(.97); }
.knopf:disabled { opacity: .6; cursor: progress; }
.knopf-haupt { background: var(--akzent); color: var(--auf-akzent); box-shadow: 0 8px 20px -10px var(--akzent); }
.knopf-zweit { background: var(--flaeche); color: var(--text); border-color: var(--linie); }
@media (max-width: 420px) { .navigation .knopf { flex: 1; padding: 0 14px; } }

.danke { outline: none; padding-top: 4px; }
.danke-symbol { width: 56px; height: 56px; border-radius: 50%; background: var(--akzent); position: relative; animation: auf .45s var(--kurve) both; }
.danke-symbol::after { content: ""; position: absolute; left: 20px; top: 13px; width: 13px; height: 24px; border: solid var(--auf-akzent); border-width: 0 4px 4px 0; transform: rotate(45deg); }
@keyframes auf { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.danke-zeit { margin: 16px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.danke-titel { margin: 4px 0 8px; font: 600 1.5rem/1.2 var(--titel); }
.danke-liste { margin: 16px 0 0; }
.danke-liste > div { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linie); font-size: .92rem; }
.danke-liste dt { color: var(--text-2); }
.danke-liste dd { margin: 0; overflow-wrap: anywhere; }
.danke-weiter { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: var(--flaeche-2); }
.danke-weiter ol { margin: 8px 0 0; padding-left: 20px; }
.danke-weiter li { margin: 4px 0; }
.danke-weiter li span { color: var(--text-2); }

.fuss { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; padding: 12px clamp(18px, 4vw, 32px) 18px; font-size: .75rem; color: var(--text-2); }
/* Die Pflichtlinks im Fuß sind Ziele, keine Fußnoten: 19 px trifft am Handy niemand mit dem Daumen.
   Der Text bleibt klein, die Fläche wird groß (44 px), und die Zeile wächst dadurch nicht auf. */
.fuss a { color: var(--text-2); display: inline-flex; align-items: center; min-height: 44px; }
/* Keine Trennpunkte (Uschi 02.10.2026): Sie saßen tief, wurden mit unterstrichen und standen bei 390 px allein am Zeilenanfang. Der Abstand
   (gap 20 px) trennt die Links; beim Umbruch beginnt jede Zeile mit einem Link. Gemessen in ablauf.mjs (fuss-regeln.mjs). */
/* **Etwas klappt nicht?** (L286): klein im Fuß, unter dem Formular, nie über einem Knopf; Tippfläche 44 px. Der Dialog ist ein
   natives <dialog>, auf dem Handy ein Blatt von unten. */
.feedback-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* L300: vierter Link der Fußzeile; die 44 px sind Treffbereich, die Zeile wächst nicht. */
.feedback-dialog { width: calc(100% - 32px); max-width: 460px; padding: 22px; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche-2); color: var(--text); font-family: var(--schrift); box-shadow: 0 24px 60px -24px rgba(14,39,68,.45); }
.feedback-dialog::backdrop { background: rgba(14,39,68,.38); }
.feedback-form h2 { margin: 0 0 6px; font-size: 1.15rem; }
.feedback-form label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: .92rem; }
.feedback-form textarea { min-height: 110px; resize: vertical; }
.feedback-hinweis { margin: 12px 0 0; font-size: .8rem; line-height: 1.5; color: var(--text-2); }
.feedback-hinweis a { color: var(--akzent); }
.feedback-antwort { min-height: 1.4em; margin: 10px 0 0; font-weight: 600; }
.feedback-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 600px) {
  .feedback-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .feedback-knoepfe .knopf { flex: 1; }
}
.fuss { padding-block: 0 6px; }
.fuss-produkt { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; gap: 6px; text-decoration: none; color: var(--text-2); opacity: .85; }
.fuss-produkt img { display: block; height: 14px; width: auto; }
body.hg-dunkel .fuss-produkt img { filter: brightness(0) invert(1); opacity: .8; }
.leer { padding: 32px; }
.hinweis-box { padding: 14px 16px; border-radius: var(--r); background: var(--flaeche-2); }

/* Schmale Bildschirme: Bezeichnung über dem Wert, Gebühr-Kacheln untereinander */
@media (max-width: 480px) {
  .g-zeile, .danke-liste > div { grid-template-columns: 1fr; gap: 2px; }
  .g-zeile dt, .danke-liste dt { font-size: .8rem; }
  .kacheln-geb { grid-template-columns: 1fr; }
  .rechnung { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Vorführung: »So käme diese Anfrage bei Ihnen an« (nur Büro anna-vorfuehrung) */
.vf-etikett { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; background: var(--akzent-zart); color: var(--akzent); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.vf .lead { color: var(--text-2); margin: 0 0 18px; }
/* Reiter als Segmente: immer alle sichtbar, bei schmaler Breite 3 × 2 statt abgeschnitten */
.vf-reiter { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 4px; border-radius: calc(var(--r) + 4px); background: var(--flaeche-2); }
@media (max-width: 640px) { .vf-reiter { grid-template-columns: repeat(3, 1fr); } }
.vf-reiter-knopf { min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--r); background: transparent; font: 600 .88rem/1.2 var(--schrift); color: var(--text-2); cursor: pointer; transition: background .2s var(--kurve), color .2s var(--kurve); }
.vf-reiter-knopf:hover { color: var(--text); }
.vf-reiter-knopf[aria-selected="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(20,26,42,.08), 0 2px 8px -4px rgba(20,26,42,.16); }
.vf-reiter-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.vf-flaeche { padding: 20px 0 4px; outline: none; }
.vf-absatz { margin: 0 0 12px; }
.vf-kopf { margin: 0 0 14px; font-size: .88rem; }
.vf-kopf > div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie); }
.vf-kopf dt { color: var(--text-2); }
.vf-kopf dd { margin: 0; overflow-wrap: anywhere; }
.vf-mail { display: block; width: 100%; height: 1200px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche-2); overflow: hidden; }
/* Knöpfe in der Ergebnisansicht: ruhig, ohne Unterstreichung, gleiche Höhe */
.vf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vf-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--text); font: 600 .9rem var(--schrift); text-decoration: none; transition: border-color .2s var(--kurve), background .2s var(--kurve); }
.vf-knopf:hover { border-color: var(--akzent-linie); }
.vf-knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.vf-knopf-haupt:hover { border-color: var(--akzent); filter: brightness(1.05); }
.vf-symbol { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* PDF-Karten: gleich hoch, Vorschau oben, Knöpfe unten bündig */
.vf-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr)); gap: 12px; }
.vf-karte { display: flex; flex-direction: column; padding: 12px 12px 16px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche); }
.vf-pdf-vorschau { aspect-ratio: 1 / 1.15; overflow: hidden; border-radius: var(--r-klein); background: #FFFFFF; border: 1px solid var(--linie); }
.vf-pdf-vorschau iframe { display: block; width: 100%; height: 150%; border: 0; pointer-events: none; } /* Seitenanfang zeigen, den Rest abschneiden: so erscheint nie der graue Hintergrund des PDF-Betrachters */
.vf-karte-text { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px 0; }
.vf-karte .vf-aktionen { margin-top: auto; padding: 14px 4px 0; }
.vf-karte .vf-aktionen .vf-knopf { flex: 1 1 120px; }
.vf-klein { font-size: .82rem; color: var(--text-2); }
.vf-marke { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 24px; border-radius: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--text-2); flex: none; }
.vf-marke-pdf { background: #C8372D; } .vf-marke-csv { background: #1E8E5A; } .vf-marke-json { background: #6B4FD8; } .vf-marke-vcf { background: #D9730D; } .vf-marke-geojson { background: #1F6FD1; }
.vf-tabelle-huelle { max-height: 420px; overflow: auto; border: 1px solid var(--linie); border-radius: var(--r); }
.vf-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; }
.vf-tabelle th, .vf-tabelle td { text-align: left; vertical-align: top; padding: 8px 12px; border-top: 1px solid var(--linie); }
.vf-tabelle tr:first-child th, .vf-tabelle tr:first-child td { border-top: 0; }
.vf-tabelle th { width: 40%; font-weight: 500; color: var(--text-2); background: var(--flaeche-2); }
.vf-code { max-height: 420px; overflow: auto; margin: 0; padding: 14px 16px; border-radius: var(--r); background: #0E1320; color: #E6EAF3; font: 400 .78rem/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre; }
/* Flurstück: Luftbild groß, Angaben als ruhiges Raster */
.vf-luftbild { margin: 0 0 16px; }
.vf-luftbild img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.vf-luftbild figcaption { margin-top: 6px; font-size: .74rem; color: var(--text-2); }
.vf-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.vf-fakten > div { padding: 12px 14px; border-radius: var(--r); background: var(--flaeche-2); }
.vf-fakten > div.breit { grid-column: 1 / -1; }
.vf-fakten dt { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.vf-fakten dd { margin: 4px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Alle Dateien: Zeilen mit fester Spalte für das Kürzel, Größe rechtsbündig */
.vf-dateien { margin-top: 20px; padding: 6px 0 0; border-top: 1px solid var(--linie); }
.vf-dateien h3 { margin: 12px 0 6px; font: 600 1rem var(--titel); }
.vf-dateien ul { list-style: none; margin: 0; padding: 0; }
.vf-dateien li + li { border-top: 1px solid var(--linie); }
.vf-dateien a { display: grid; grid-template-columns: 46px 1fr auto 18px; align-items: center; gap: 14px; min-height: 52px; padding: 0 8px; margin: 0 -8px; border-radius: var(--r-klein); color: var(--text); text-decoration: none; }
.vf-dateien a:hover { background: var(--flaeche-2); }
.vf-dateien a:hover .vf-datei-name { color: var(--akzent); }
.vf-datei-name { font-weight: 600; font-size: .94rem; }
.vf-datei-groesse { font-size: .82rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.vf-dateien .vf-symbol { color: var(--text-2); }
@media (max-width: 480px) { .vf-kopf > div { grid-template-columns: 1fr; gap: 2px; } .vf-dateien a { grid-template-columns: 46px 1fr 18px; } .vf-datei-groesse { display: none; } }

/* Vollmacht (Unterschrift online · Papier · Post). Groß und ruhig: auch für Menschen ohne Übung mit Technik. */
.us-huelle { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--linie); }
.vf .us-huelle { margin: 4px 0 22px; padding: 20px; border: 1px solid var(--linie); border-radius: calc(var(--r) + 4px); background: var(--flaeche); }
.us-vorspann { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.us { font-size: 1.05rem; }
.us-etikett { margin-bottom: 8px; }
.us-titel { margin: 6px 0 8px; font: 600 clamp(1.25rem, 3.4vw, 1.5rem)/1.25 var(--titel); letter-spacing: -.01em; outline: none; }
.us-text { margin: 0 0 16px; color: var(--text-2); line-height: 1.6; max-width: 60ch; }
.us-klein { font-size: .88rem; color: var(--text-2); }
.us-wege { display: grid; gap: 12px; margin: 6px 0 4px; }
.us-weg { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 14px 18px; text-align: left; border: 1.5px solid var(--linie); border-radius: var(--r); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s var(--kurve), background .2s var(--kurve), transform .15s var(--kurve); }
.us-weg:hover { border-color: var(--akzent-linie); background: var(--akzent-zart); }
.us-weg:active { transform: scale(.99); }
.us-weg-symbol { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--akzent-zart); color: var(--akzent); }
.us-weg-text { display: flex; flex-direction: column; gap: 2px; }
.us-weg-text b { font-size: 1.1rem; }
.us-weg-text span { color: var(--text-2); font-size: .95rem; line-height: 1.45; }
.us-symbol { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.us-zurueck { margin: 0 0 6px; padding: 8px 0; font-size: .95rem; }
.us-dokument { max-height: 360px; overflow: auto; padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche-2); line-height: 1.65; }
.us-dokument > b { display: block; font-size: 1.1rem; }
.us-dokument p { margin: 12px 0 0; }
.us-entwurf { padding: 8px 12px; border-radius: var(--r-klein); background: #FFF4DB; color: #7A4B00; font-size: .88rem; font-weight: 600; }
.us-haken { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 4px; min-height: 44px; font-size: 1.05rem; cursor: pointer; }
.us-haken input { width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--akzent); flex: none; }
.us-wahl { display: grid; gap: 10px; margin: 8px 0; }
.us-wahl-option { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border: 1.5px solid var(--linie); border-radius: var(--r); cursor: pointer; }
.us-wahl-option:has(input:checked) { border-color: var(--akzent); background: var(--akzent-zart); }
.us-wahl-option input { width: 22px; height: 22px; accent-color: var(--akzent); flex: none; }
.us-wahl-option span { display: flex; flex-direction: column; }
.us-wahl-option span span { color: var(--text-2); font-size: .95rem; }
.us-label { display: block; margin: 16px 0 6px; font-weight: 600; }
.us-label-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.us-code-eingabe { width: 100%; max-width: 260px; min-height: 60px; padding: 0 16px; border: 1.5px solid var(--linie); border-radius: var(--r); font: 600 1.7rem/1 var(--schrift); letter-spacing: .3em; text-align: center; color: var(--text); background: var(--flaeche); }
.us-name { width: 100%; min-height: 56px; padding: 0 16px; border: 1.5px solid var(--linie); border-radius: var(--r); font: 500 1.15rem var(--schrift); color: var(--text); background: var(--flaeche); }
.us-code-eingabe:focus, .us-name:focus { outline: 3px solid var(--akzent-linie); border-color: var(--akzent); }
.us-code-hinweis { margin: 8px 0 0; }
/* **Vorführung: Der Code kommt nicht per Mail, er steht hier** (Jonathan, 25.09.2026). Vorher ein Nebensatz im
   Hinweis; die Erklärung zur Mail sah so echt aus, dass Leute auf den Posteingang warteten. Jetzt ein eigener
   Kasten mit Marke, großem Code und Knopf, der ihn ins Feld setzt. */
.us-vorfuehrung { margin: 0 0 16px; padding: 16px 18px; border: 2px dashed var(--akzent); border-radius: var(--r); background: var(--akzent-zart); color: var(--text); }
.us-vorfuehrung-marke { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.us-vorfuehrung p { margin: 8px 0; }
.us-vorfuehrung-code { display: block; font: 700 2rem/1.2 var(--schrift); letter-spacing: .3em; margin: 4px 0 12px; user-select: all; }
.us-zeichnen { display: block; width: 100%; height: 150px; border: 1.5px dashed var(--linie); border-radius: var(--r); background: var(--flaeche-2); color: var(--text); touch-action: none; cursor: crosshair; }
.us-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.us-gross { min-height: 56px; font-size: 1.05rem; padding: 0 26px; text-decoration: none; }
.us-fehler { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--r-klein); background: var(--fehler-zart); color: var(--fehler); font-weight: 600; }
.us-schritte { list-style: none; counter-reset: s; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.us-schritte li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.us-schritte li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--akzent-zart); color: var(--akzent); font-weight: 700; font-size: 1.1rem; }
.us-schritte li span { color: var(--text-2); line-height: 1.55; }
.us-fertig-symbol { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--akzent); color: var(--auf-akzent); }
.us-fertig-symbol .us-symbol { width: 34px; height: 34px; stroke-width: 2.4; }
@media (min-width: 640px) { .us-wege { grid-template-columns: repeat(2, 1fr); } .us-weg { grid-template-columns: 1fr; align-content: start; min-height: 170px; padding: 20px; } }
@media (max-width: 480px) { .us-aktionen .knopf { flex: 1 1 100%; } }

/* Kompakter (16.09.2026): weniger Scrollen im eingebetteten Rahmen. Überschreibt die Grundwerte oben.
   **Die Grundschrift ist am 20.09.2026 zurück auf 16 px.** Sie stand auf 15, um Höhe zu sparen — das
   spart aber nur 6 % und kostet Lesbarkeit an genau der Stelle, an der jemand ein Formular ausfüllt,
   oft am Telefon und nicht selten mit Lesebrille. Das Vergleichsfeld (Tally, Typeform) liegt bei 16
   (`_gemeinsam/AUFTRAG-MOBIL-EINHEITLICH.md` Teil 2). Höhe sparen wir woanders. */
body { font-size: 16px; }
.app { padding: clamp(14px, 3vw, 24px); }
.kopf { margin-bottom: 12px; }
.kopf-titel { font-size: clamp(1.3rem, 3.6vw, 1.7rem); }
.kopf-text { margin-top: 4px; font-size: 1rem; }
.schritt-titel { margin: 12px 0 10px; font-size: clamp(1.15rem, 3vw, 1.4rem); }
.kacheln { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.kachel { flex-direction: row; align-items: center; min-height: 56px; padding: 10px 40px 10px 12px; gap: 10px; }
.kachel-name { margin-top: 0; font-size: .95rem; }
.kachel-symbol { width: 22px; height: 22px; flex: none; }
.kachel-euro { top: 50%; right: 10px; margin-top: -11px; }
.ablauf { margin-top: 12px; padding-top: 10px; gap: 4px 18px; }
.ablauf li { font-size: .82rem; }
.feld { margin-top: 10px; }
.eingabe { min-height: 44px; padding: 9px 12px; }
.klein { margin-top: 4px; font-size: .78rem; }
.karten-bereich { margin-top: 10px; }
/* **Die Kartenhöhe hängt nicht mehr stufenlos an der Breite.** `clamp(210px, 40vw, 280px)` koppelte sie
   an den Viewport — und daraus entsteht eine Schaukel: Taucht beim Einbetten ein Scrollbalken auf, wird
   es 15 px schmaler, die Karte 6 px niedriger, die gemeldete Seitenhöhe 8 px kleiner, der Rahmen kürzer,
   der Balken verschwindet, die Breite wächst … Jonathan sah das als Flackern auf frag-anna.de, wo das
   Formular in einem Browser-Bild mit eigenem Scrollbalken steckt; beim frei eingebetteten Formular eines
   Büros nicht. Gemessen am 23.09.2026: 700 px → 280, 685 px → 274. In Stufen löst dieselbe kleine
   Breitenänderung nichts mehr aus. Die zweite Bremse sitzt in rahmen.js (Totzone und Takt). */
.karte { height: 220px; }
@media (min-width: 520px) { .karte { height: 260px; } }
@media (min-width: 740px) { .karte { height: 280px; } }
.karte-quelle { margin-top: 4px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.karte-quelle.offen { white-space: normal; }
.karte-liste { margin-top: 8px; }
.karte-liste-kopf { margin-bottom: 6px; }
.fl-kachel { min-height: 54px; padding: 7px 10px; gap: 10px; }
.fl-kachel-form { width: 36px; height: 36px; }
.fl-kachel-nr { font-size: .98rem; }
.fl-mehr { margin-top: 2px; padding: 6px 0; font-size: .85rem; }
.gefunden { margin-top: 8px; padding: 10px 14px; }
.g-liste { margin-top: 6px; }
.g-zeile { padding: 5px 0; font-size: .86rem; }
@media (min-width: 560px) { .g-liste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; } .g-zeile { grid-template-columns: minmax(92px, 42%) minmax(0, 1fr); } }
/* Einordnung im Kosten-Schritt (L147): immer eine Spalte, das Etikett so breit wie »Nachweis und Prüfung«,
   gebrochen wird nur zwischen Wörtern, im Wert mit Silbentrennung. Zweispaltig wie die Hinweise der
   Vermessung zerfiel bei 560 px »Gebäudeklass|e« — gesehen von der Website-Werft, eingebettet. */
.geb-einordnung .g-liste { display: block; }
.geb-einordnung .g-zeile { grid-template-columns: 11em minmax(0, 1fr); column-gap: 16px; }
.geb-einordnung .g-zeile dt { overflow-wrap: normal; }
.geb-einordnung .g-zeile dd { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) { .geb-einordnung .g-zeile { grid-template-columns: 1fr; gap: 2px; } .geb-einordnung .g-zeile dt { font-size: .8rem; } }
.g-optionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; margin-top: 6px; }
.g-optionen .schalter-zeile { margin-top: 0; font-size: .88rem; align-items: center; min-height: 44px; }
.g-optionen .textknopf { margin-top: 0; font-size: .88rem; }
.gebuehr { margin-top: 8px; padding: 12px 14px; }
.geb-eingaben { margin-top: 6px; }
.geb-zeile { padding: 6px 0; }
.stepper button { width: 40px; height: 40px; }
/* Zweispaltig, aber ohne halbe Reihen: Was breit ist (Bodenrichtwert, einzelner Stepper), bleibt breit.
   Und ohne gestückelte Striche: Eine Trennlinie je Spalte ergibt zwei parallele Striche mit einer Lücke
   in der Mitte — das sieht nach Bruch aus, nicht nach Ordnung. Nebeneinander trennt der Abstand, über
   die ganze Breite trennt die Linie. */
@media (min-width: 560px) { .geb-eingaben { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; row-gap: 4px; }
  .geb-eingaben > .geb-block, .geb-eingaben > .geb-breit { grid-column: 1 / -1; }
  /* **Der Vorbehalt gehört unter die Regler, nicht in einen davon.** In einer halben Spalte
     brauchte derselbe Satz vier Zeilen und war höher als beide Regler zusammen (gemessen bei
     600 px: 94 px). Über die ganze Breite sind es zwei.
     Ausgeblendet kostet er keine Rasterzeile: `[hidden] { display: none !important }` steht schon
     ganz oben in dieser Datei und schlägt das `display: flex` der Regel. */
  .geb-eingaben > .geb-zeile, .geb-eingaben > .geb-feld { border-top: 0; }
  .geb-eingaben > .geb-breit:not(:first-child) { border-top: 1px solid var(--linie); } }
.geb-ergebnis { margin-top: 8px; }
.geb-kachel { padding: 10px 12px; }
.k-betrag { font-size: clamp(1.05rem, 4vw, 1.3rem); }
.geb-notiz { margin-top: 6px; font-size: .8rem; }
.geb-verbindlich { margin-top: 6px; font-size: .76rem; }
.mehr { margin-top: 8px; }
.mehr summary { padding: 8px 0; }
.navigation { margin-top: 14px; }
.knopf { min-height: 46px; }
.fuss { padding-top: 6px; padding-bottom: 12px; }
@media (max-width: 520px) {
  /* Handy: drei schmale Flurstücks-Kacheln nebeneinander statt 2 + 1 allein; die Umriss-Form weicht dem Text */
  .fl-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fl-kachel { min-height: 50px; padding: 7px 8px; }
  .fl-kachel-form { display: none; }
  .fl-kachel-etikett { font-size: .6rem; }
  .fl-kachel-nr { font-size: .92rem; }
  .fl-kachel-flaeche { font-size: .74rem; }
}
@media (max-width: 480px) {
  /* Grundstücksdaten: Bezeichnung und Wert nebeneinander, halbiert die Höhe */
  .gefunden .g-zeile { grid-template-columns: minmax(96px, 36%) 1fr; gap: 8px; align-items: baseline; }
  .gefunden { padding: 10px 12px; }
}
/* **Grundstück am Handy** (L337, Jonathan am Atlas 28.09.2026: 1.073 px bei 390): Karte 200 px, die Flurstücks-Kacheln als eine waagerecht
   wischbare Zeile, die Bestätigung in einer Zeile (Gemeinde und Fläche nebeneinander, ohne Unterzeile). Die Hinweise bleiben zum Aufklappen. */
@media (max-width: 519px) {
  .karte { height: 200px; }
  .fl-kacheln { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .fl-kacheln > .fl-kachel { flex: 0 0 min(44%, 170px); scroll-snap-align: start; }
  .gefunden .g-kopf > div > span { display: none; }
  .gefunden > .g-liste { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 4px; }
  .gefunden > .g-liste .g-zeile { display: flex; gap: 6px; padding: 2px 0; border: 0; }
  .gefunden > .g-liste .g-zeile dt { font-size: .78rem; }
}

/* Teiler privat / beruflich (BERUFLICHE-ANFRAGEN.md) */
.teiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.teil-karte { position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 18px; text-align: left; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); cursor: pointer; box-shadow: 0 1px 2px rgba(20,26,42,.04);
  transition: border-color .2s var(--kurve), box-shadow .25s var(--kurve), transform .2s var(--kurve), background .2s var(--kurve); }
.teil-karte:hover { border-color: var(--akzent-linie); box-shadow: 0 10px 28px -14px rgba(20,26,42,.22); transform: translateY(-1px); }
.teil-karte:active { transform: scale(.98); }
.teil-karte.an { border-color: var(--akzent); background: var(--akzent-zart); box-shadow: 0 0 0 1px var(--akzent) inset; }
.teil-symbol { width: 44px; height: 44px; flex: none; padding: 10px; border-radius: 50%; background: var(--akzent-zart); fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.teil-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.teil-text b { font-size: 1.05rem; }
.teil-text span { font-size: .85rem; color: var(--text-2); line-height: 1.35; }
/* Anlässe (Schritt 2, Übersetzer-Prinzip): Einstieg über das, was jemand vorhat; Stil der Teil-Karten ohne Symbol. */
.anlaesse { display: grid; gap: 10px; margin-bottom: 14px; }
.anlass-tuer { justify-self: start; margin: 10px 0 4px; text-align: left; }
.anlaesse-frage { margin: 4px 0 0; font-weight: 600; }
.anlaesse-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.anlass-karte { min-height: 72px; }
.anlaesse-zeile { margin: 0; font-size: .85rem; color: var(--text-2); }
.anlass-kasten { display: grid; gap: 4px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--akzent-zart); font-size: .9rem; line-height: 1.4; }
.anlass-kasten span { color: var(--text-2); }
.art-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 10px; padding: 0 2px 0 12px; border-radius: 999px; background: var(--flaeche-2); font-size: .85rem; color: var(--text-2); }
.art-zeile .textknopf { margin: 0; padding: 0 14px; min-height: 44px; font-size: .85rem; }
.art-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auftrag (nur beruflich) */
/* L382: kein negativer Rand mehr, der Satz lag sonst 4 px auf dem Aufklapper darüber (gemeinsame Überdeckungsprobe). */
.auftrag-vorspann { margin: 0 0 4px; }
.formate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.format { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; text-align: left; font: inherit; color: var(--text); background: var(--flaeche);
  border: 1.5px solid var(--linie); border-radius: var(--r-klein); cursor: pointer; transition: border-color .2s var(--kurve), background .2s var(--kurve); }
.format:hover { border-color: var(--akzent-linie); }
.format.an { border-color: var(--akzent); background: var(--akzent-zart); }
.format-haken { position: relative; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--akzent-linie); border-radius: 5px; background: var(--flaeche); }
.format.an .format-haken { border-color: var(--akzent); background: var(--akzent); }
.format.an .format-haken::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px; border: solid var(--auf-akzent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.format-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.format-text b { font-size: .88rem; }
/* L382: umbrechen statt abschneiden. Bei 375 px stand »für AutoC…« da (gemeinsame Textprobe); ein Wort mehr Höhe ist besser als ein halbes. */
.format-text span { font-size: .72rem; color: var(--text-2); overflow-wrap: anywhere; }
.auftrag-unterlagen { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--flaeche-2); }
.auftrag-unterlagen svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.auftrag-unterlagen p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; color: var(--text-2); }
.auftrag-unterlagen b { color: var(--text); font-size: .9rem; }
/* Der Upload (L191): der Dateiwahl-Knopf ist ein Label, das Feld selbst bleibt für Tastatur und Screenreader da. */
.unterlagen { flex-wrap: wrap; }
.unterlagen p { flex: 1 1 240px; }
/* Das native Feld bleibt 44 px groß (Tippflächen-Regel), aber unsichtbar und ohne Klick-Aufnahme; der Knopf daneben öffnet es. */
.unterlagen input[type="file"] { position: absolute; width: 44px; height: 44px; opacity: 0; pointer-events: none; }
.unterlagen-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; padding: 0 18px; border-radius: 999px; background: var(--flaeche); color: var(--text); border: 1.5px solid var(--linie); font: 600 .9375rem var(--schrift); cursor: pointer; width: fit-content; }
.unterlagen-knopf:hover { border-color: var(--akzent-linie); }
.unterlagen input[type="file"]:focus-visible + .unterlagen-knopf, .unterlagen-knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.unterlagen-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.unterlagen-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-klein); font-size: .875rem; color: var(--text); }
.unterlagen-liste .textknopf { min-height: 44px; }
/* Zwei Wege, gleich gebaut, der Link zuerst (L337, Lernbuch Nr. 15): je eine Überschrift, ein Hilfesatz, ein Feld bzw. Knopf. */
.unterlagen > div { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.unterlagen-weg { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--linie); }
.unterlagen-weg .feld-label { font: 600 .9rem var(--schrift); color: var(--text); }
.unterlagen-weg .feld-hilfe { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--text-2); }
.unterlagen-link .eingabe { width: 100%; max-width: 480px; min-height: 44px; margin-top: 4px; }
input[type="date"].eingabe { appearance: none; -webkit-appearance: none; min-width: 0; }
.kachel { padding-right: 12px; }
.kachel:has(.kachel-euro) { padding-right: 40px; }
.kachel-name { min-width: 0; }
.zeile-2.immer { grid-template-columns: 1fr 1fr; }
@media (max-width: 559px) {
  /* ungerade Zahl Kacheln: die letzte (meist »Etwas anderes«) geht über die volle Breite, statt allein halb zu stehen */
  .kacheln > .kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  /* Beruflich sind es neun Leistungen mit Fachbegriffen: am Handy als ruhige Liste, jeder Name in einer Zeile */
  .kacheln[data-fuer="beruflich"] { grid-template-columns: 1fr; gap: 6px; }
  .kacheln[data-fuer="beruflich"] .kachel { min-height: 50px; }
}
.feld-label .feld-hilfe { font-weight: 400; }

/* Vollmacht: online empfohlen, Papier als Alternative (überschreibt die frühere Zwei-Spalten-Ansicht) */
.us-wege { grid-template-columns: 1fr !important; }
.us-weg.us-empfohlen { grid-template-columns: 56px 1fr; align-items: start; align-content: start; min-height: 0; padding: 18px 20px; border-color: var(--akzent); background: var(--akzent-zart); box-shadow: 0 10px 28px -18px rgba(20,26,42,.35); }
.us-weg.us-empfohlen .us-weg-symbol { background: var(--akzent); color: var(--auf-akzent); }
.us-marke { align-self: flex-start; margin-bottom: 2px; padding: 2px 8px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent) !important; font-size: .7rem !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.us-weg-text .us-vorteile { display: grid; gap: 4px; margin-top: 6px; }
.us-weg-text .us-vorteil { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; color: var(--text); }
.us-vorteile svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: none; stroke: var(--akzent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.us-los { grid-column: 1 / -1; justify-self: stretch; display: grid; place-items: center; min-height: 48px; margin-top: 12px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); font-weight: 700; }
.us-weg.us-neben { grid-template-columns: 40px 1fr; min-height: 64px; padding: 10px 16px; border-width: 1px; }
.us-weg.us-neben .us-weg-symbol { width: 40px; height: 40px; border-radius: 12px; background: var(--flaeche-2); color: var(--text-2); }
.us-weg.us-neben .us-weg-text b { font-size: .98rem; }
.us-weg.us-neben .us-weg-text span { font-size: .85rem; }
@media (min-width: 640px) { .us-weg.us-empfohlen { grid-template-columns: 56px 1fr auto; align-items: center; } .us-los { grid-column: auto; margin-top: 0; padding: 0 22px; } .us-weg.us-neben { grid-template-columns: 40px 1fr; min-height: 64px; padding: 10px 16px; } }
.us-hinweis { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-klein); background: #FFF4DB; color: #7A4B00; font-size: .9rem; font-weight: 600; }
[data-schritt="vollmacht"] .us-titel:first-of-type { margin-top: 0; }

/* Vollmacht-Text kompakter, aber gut lesbar (mind. 15 px, ruhiger Zeilenabstand; LOGBUCH L43) */
.us-dokument { max-height: 320px; padding: 14px 16px; font-size: .94rem; line-height: 1.5; }
.us-dokument > b { font-size: 1rem; }
.us-dokument .us-klein { font-size: .82rem; }
.us-dokument p { margin: 8px 0 0; }
.us-dokument .us-entwurf { margin-top: 10px; padding: 6px 10px; font-size: .8rem; }

/* »So geht es weiter« als ruhiges Raster statt Fließzeile (LOGBUCH L44): Handy untereinander, sonst 2 × 2, bei drei Punkten nebeneinander */
/* Ein Band mit kurzen Schritten statt loser Zeilen: passt in jeder Breite und bricht sauber um (L45) */
.ablauf { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin-top: 16px; padding: 6px; border-top: 0; border-radius: var(--r); background: var(--flaeche-2); }
.ablauf li { align-items: center; gap: 7px; padding: 6px 10px; line-height: 1.3; white-space: nowrap; }
.ablauf svg { width: 18px; height: 18px; }
/* Schmal: lieber gleichmäßig zwei Spalten als eine einzelne Angabe in der zweiten Zeile */
@media (max-width: 660px) { .ablauf:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 14px; } }
@media (max-width: 460px) { .ablauf { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 8px; } }
/* Lesebreite im Vollmacht-Text begrenzen (lange Zeilen ermüden) */
.us-dokument > b, .us-dokument p { max-width: 72ch; }

/* Vorführung: Am Handy keine eingebettete PDF-Vorschau (Telefone zeigen PDFs im iFrame oft leer); Karte mit Knöpfen genügt */
@media (max-width: 520px) { .vf-pdf-vorschau { display: none; } }
/* Seite »Formular gibt es nicht«: gleiche Anmutung wie das Formular */
.leer.app { max-width: 760px; margin-inline: auto; }
.leer .kopf-titel { font-size: clamp(1.3rem, 4vw, 1.6rem); }
/* Häkchen-Zeilen: die ganze Zeile ist anklickbar, also mindestens 44 px hoch (auch für weniger treffsichere Finger) */
.schalter-zeile { min-height: 44px; align-items: flex-start; padding-block: 6px; }
.us-noch-nicht { margin: 14px 0 0; }

/* Ausfall: kein Sackgassen-Fehler, sondern der Weg zum Büro. */
.ausfall { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--r-12, 12px); background: var(--flaeche); }
.ausfall b { display: block; margin-bottom: 4px; }
.ausfall p { margin: 0 0 12px; color: var(--text-2); font-size: .9375rem; }
.ausfall-wege { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

/* Die Brücke zur Büro-Sicht am Ende der Vorführung: ein Angebot, keine Absperrung. */
.vf-holen { margin-top: 22px; padding: 20px 22px; border: 1px solid var(--linie); border-radius: var(--r-12, 12px); background: var(--flaeche); }
.vf-holen b { display: block; font-size: 1.0625rem; }
.vf-holen p { margin: 4px 0 14px; color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.vf-holen-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vf-holen-zeile .eingabe { flex: 1 1 220px; min-width: 0; }
.vf-holen-form .schalter-zeile { margin-top: 12px; }
.vf-holen-form .vf-klein:empty { display: none; }
.vf-holen-form .vf-klein { margin-top: 10px; }

/* Die Nachfrage: ein Fenster im Rahmen, kein Überfall. Sie kommt einmal, lässt sich mit einem Klick
   schließen, und danach steht das Formular wieder im Kasten weiter unten. */
.vf-nachfrage { position: relative; margin: 20px 0 4px; padding: 22px 24px 20px; border-radius: var(--r-12, 12px);
  background: var(--flaeche); border: 1px solid var(--akzent); box-shadow: 0 18px 40px -20px rgba(9, 24, 43, .35); }
.vf-nachfrage b { display: block; font-size: 1.0625rem; padding-right: 32px; }
.vf-nachfrage p { margin: 4px 0 14px; color: var(--text-2); font-size: .9375rem; line-height: 1.55; }
.vf-nachfrage-zu { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 22px; line-height: 1; cursor: pointer; }
.vf-nachfrage-zu:hover { background: var(--linie); color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .vf-nachfrage:not([hidden]) { animation: vf-auf .25s var(--kurve) both; }
  @keyframes vf-auf { from { opacity: 0; transform: translateY(10px); } }
}

/* Das »!« am Fachwort: klein, rund, in Warnfarbe — und ein Tippziel von 24 px, das im Lauftext nicht
   stört, aber am Telefon zu treffen ist. Jonathan am 24.09.2026: »im Notfall immer mit ! und einem
   Mouseover für Erklärung«. Der title trägt sie am Rechner, der Klick am Telefon. */
.erklaerung-knopf { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px;
  vertical-align: -3px; border: 0; border-radius: 50%; background: var(--warn); color: #fff;
  font: 700 12px/1 var(--schrift); cursor: help; padding: 0; }
.erklaerung-knopf:hover, .erklaerung-knopf:focus-visible { filter: brightness(1.1); }
.erklaerung-text { margin-top: 6px; padding: 8px 10px; border-radius: var(--r-klein);
  background: var(--warn-zart); border-left: 3px solid var(--warn); }

/* **Die Gebäudefragen stehen auf einer Linie.**
   Jonathan am 24.09.2026: »Symmetrie und Infotexte kompakter gestalten«. Vorher richtete sich jede
   Zeile nach ihrem eigenen Inhalt: Ein Feld mit aufgeklappter Erklärung schob sein Gegenüber nach
   unten, und die Fragen standen versetzt. Mit `align-items: start` auf dem Raster und einem Feld, das
   seine Höhe selbst trägt, bleibt jede Reihe auf einer Linie — auch wenn nur eine Erklärung offen ist. */
.gebaeude-block .zeile-2 { align-items: start; }
.gebaeude-block .feld { display: flex; flex-direction: column; }
/* Die Hilfe unter dem Feld schließt die Zeile ab; aufgeklappte Erklärungen wachsen nach unten,
   nicht in die Nachbarspalte. */
.gebaeude-block .feld > .klein { margin-top: 6px; }
.gebaeude-block .erklaerung-text { margin-top: 6px; font-size: .8rem; line-height: 1.45; }
/* Kompakter: Die Erklärung ist ein Beleg, kein Absatz. */
.erklaerung-text { padding: 6px 9px; }

/* **Durchreichen: ein Kasten, der kein Kasten ist.** Die branchenabhängige Schwellenfrage wird je nach
   Nutzung ein- und ausgeblendet. Läge sie in einem eigenen Raster, risse sie eine halbe Zeile auf —
   »Gästebetten« links, rechts nichts. So landen ihre Felder direkt im Raster darüber und rücken nach. */
.durchreichen { display: contents; }
.durchreichen[hidden] { display: none; }

/* **Beschriftungen auf einer Linie.** Stand die Hilfe zwischen Label und Eingabefeld, rutschte das
   Label des Nachbarn im Raster tiefer. Die Hilfe gehört unter das Feld; dann beginnen beide Spalten
   oben gleich. Gilt nur für direkte Kinder: »(mehrere möglich)« steht bewusst im Label selbst. */
.feld > * { order: 2; }
.feld > .feld-label { order: 1; }
.feld > .feld-hilfe { order: 3; }
.feld > .feld-fehler { order: 4; }

/* Testanfrage in den Vorführ-Büros (L148): Hinweis und Häkchen am Kontakt-Schritt, Stand nach dem Absenden */
.testanfrage { margin: 4px 0 6px; }
.testanfrage .hinweis-box { margin: 0 0 8px; }
.testanfrage-stand { margin: 0 0 14px; }
.testanfrage-bestaetigen { background: var(--akzent-zart, #E7F3EC); }

/* ── Gebäude als eigener Schritt, Antworten als Karten (L153) ─────────────────────────────── */
.gebaeude-lead { margin: 0 0 6px; color: var(--text-2); }
.gebaeude-gruppe { display: grid; gap: 18px; padding-top: 18px; }
.gebaeude-gruppe + .gebaeude-gruppe { margin-top: 22px; border-top: 1px solid var(--linie); }
/* Häkchen für besondere Brandrisiken (L214): eine Liste, kein Stapel aus Feldern. 44 px je Zeile bleiben die Tippfläche. */
.geb-besonders { display: grid; gap: 2px; margin-top: -8px; }
.geb-besonders .schalter-zeile { margin-top: 0; min-height: 44px; align-items: center; }
.gruppe-titel { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.nutzungsfelder:not([hidden]) { display: grid; gap: 18px; }
fieldset.wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.wahl > legend { padding: 0; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.wahl-karten { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .wahl-karten.wahl-zwei { grid-template-columns: 1fr 1fr; } }
.wahl-karte { position: relative; display: flex; align-items: center; min-height: 52px; padding: 11px 14px;
  background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: var(--r-klein); cursor: pointer;
  transition: border-color .18s var(--kurve), background-color .18s var(--kurve), box-shadow .18s var(--kurve); }
.wahl-karte:hover { border-color: var(--akzent-linie); }
.wahl-karte input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-text { display: grid; gap: 2px; }
.wahl-text b { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.wahl-text small { font-size: .8rem; line-height: 1.35; color: var(--text-2); }
.wahl-karte:has(input:checked) { border-color: var(--akzent); background: var(--akzent-zart); box-shadow: 0 0 0 1px var(--akzent) inset; }
.wahl-karte:has(input:checked) .wahl-text b { color: var(--auf-akzent-zart); }
.wahl-karte:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* »Weiß ich nicht« ist eine ehrliche Antwort, aber keine gleichrangige: leiser, über die ganze Breite. */
.wahl-karte.wahl-offen { min-height: 44px; grid-column: 1 / -1; background: transparent; border-style: dashed; }
.wahl-karte.wahl-offen .wahl-text b { font-weight: 500; color: var(--text-2); }
.feld.wahl.ungueltig .wahl-karte { border-color: var(--fehler, #B42318); }

/* ── Einordnung: drei Aussagen, Einzelheiten zum Aufklappen (L153) ───────────────────────── */
.einordnung-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
/* Schmal (eingebettet, Telefon): je Aussage eine Zeile, der Wert rechts. Drei Spalten trennten dort Wörter. */
@media (max-width: 640px) {
  .einordnung-kacheln { grid-template-columns: 1fr; gap: 6px; }
  .einordnung-kachel { grid-template-columns: 1fr auto; grid-template-areas: "titel wert" "unter wert"; column-gap: 12px; align-items: center; padding: 10px 14px; }
  .einordnung-titel { grid-area: titel; }
  .einordnung-unter { grid-area: unter; }
  .einordnung-wert { grid-area: wert; font-size: 1.35rem; }
}
.einordnung-kachel { display: grid; gap: 2px; align-content: start; padding: 12px 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-klein); }
.einordnung-titel { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.einordnung-wert { font-size: 1.6rem; line-height: 1.15; font-weight: 700; }
.einordnung-kachel.betont .einordnung-wert { color: var(--akzent); }
.einordnung-unter { font-size: .8rem; line-height: 1.35; color: var(--text-2); overflow-wrap: break-word; }
.einordnung-mehr { margin-top: 12px; border-top: 1px solid var(--linie); }
.einordnung-mehr > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9rem; cursor: pointer; list-style: none; }
.einordnung-mehr > summary::-webkit-details-marker { display: none; }
.einordnung-mehr > summary::after { content: "›"; margin-left: auto; font-size: 1.2rem; color: var(--text-2); transform: rotate(90deg); transition: transform .18s var(--kurve); }
.einordnung-mehr[open] > summary::after { transform: rotate(-90deg); }
.einordnung-hinweis { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .wahl-karte, .einordnung-mehr > summary::after { transition: none; } }
/* Die Meldung im Unterlagen-Block ist ein p im p: `.unterlagen p { flex: 1 1 240px }` (für die Spalte neben dem Symbol) machte
   sie 240 px hoch, ein Loch über dem Link-Feld (Foto 25.09.2026). Sie ist Text, kein Spaltenteil. */
.unterlagen p.feld-fehler { flex: 0 0 auto; display: block; margin: 6px 0 0; }

/* Einzelrechner (L308): Grundstück und Kosten als zwei Kästen mit Abstand; das Häkchen »Bauland« rechts wie die Felder darüber. */
.rechner .geb-grundstueck { margin-bottom: 12px; }
.rechner .geb-grundstueck .schalter-zeile { justify-content: space-between; align-items: center; }
/* Der Link zum Bodenrichtwert-Portal sieht aus wie der Knopf im Formular. */
.rechner a.brw-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }


/* ── L366 Kompakter Rechner für das Sheet der Website (`kompakt=1`, Jonathan 29.09.2026: »extrem viel Text und erschlägt«) ──
   Kopf nur für Vorleser, Beispiel und Grundlagen zum Aufklappen, Ergebnis vor den Eingaben, die Zahlen als Leiste unten.
   Die Leiste hat einen eigenen Hintergrund: Bei `hg-transparent` wäre `--flaeche` durchsichtig und der Text darunter schiene durch. */
.rechner-kompakt .rechner-beispiel { margin: 0 0 8px; }
.rechner-kompakt .rechner-beispiel summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text-2); }
.rechner-kompakt .rechner-beispiel p { margin: 0 0 8px; }
.rechner-kompakt .gebuehr.geb-rechnung .geb-ergebnis { margin-top: 0; }
.rechner-kompakt .geb-grundlagen .geb-grundlage { margin-bottom: 8px; }
.rechner-kompakt .auswahl-raster { gap: 6px; }
.rechner-kompakt .auswahl { min-height: 44px; padding: 6px 8px; font-size: .8rem; }
.rechner-kompakt .baukosten-auswahl { width: 100%; min-height: 48px; margin-top: 8px; }
.rechner-kompakt .kompakt-leiste { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
  margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--flaeche-2); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 16px rgba(14, 39, 68, .08); }
.rechner-kompakt .kompakt-leiste:empty { display: none; }
/* Nur, solange die Ergebniskarten nicht im Bild sind (leisteBeobachten); ausgeblendet ist sie weder sichtbar noch im Fokus. */
.rechner-kompakt .kompakt-leiste.kl-aus { display: none; }
.rechner-kompakt .kl-teil { display: flex; flex-direction: column; min-width: 0; }
.rechner-kompakt .kl-teil small { font-size: .72rem; color: var(--text-2); }
.rechner-kompakt .kl-teil b { font-size: 1rem; white-space: nowrap; }

/* L367 (Jonathan 29.09.2026: »kann auf Desktop breiter sein und nicht so lang nach unten«): ab 800 px zwei Spalten. Links Grundstück und
   Eingaben, rechts das Ergebnis, das beim Scrollen stehen bleibt; die Leiste unten braucht es dann nicht. Abschnitt und Kostenkasten werden
   durchlässig (`display: contents`), damit Ergebnis und Eingaben ohne Umbau des Aufbaus in verschiedene Spalten kommen. */
@media (min-width: 800px) {
  .rechner-kompakt .rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .rechner-kompakt .rechner > * { grid-column: 1; }
  .rechner-kompakt .rechner > .rechner-beispiel { grid-column: 1 / -1; }
  .rechner-kompakt .rechner > section.schritt, .rechner-kompakt .rechner .gebuehr.geb-rechnung { display: contents; }
  .rechner-kompakt .rechner .geb-rechnung > .geb-eingaben, .rechner-kompakt .rechner .geb-rechnung > .geb-grundlagen { grid-column: 1; }
  /* L388 (Jonathan, MV Grenze »Nur zeigen«): Eingaben fließen nie in die Ergebnisspalte. Alles im Rechenteil außer dem Ergebnis steht fest links;
     vorher setzte das Raster Frage und Hinweis automatisch in die freie rechte Spalte, sobald das Ergebnis fehlte. Ohne Ergebnis: einspaltig. */
  .rechner-kompakt .rechner .geb-rechnung > :not(.geb-ergebnis) { grid-column: 1; }
  .rechner-kompakt .rechner:not(:has(.geb-rechnung > .geb-ergebnis)) { grid-template-columns: minmax(0, 1fr); }
  .rechner-kompakt .rechner .geb-rechnung > .geb-ergebnis { grid-column: 2; grid-row: 2 / span 20; position: sticky; top: 12px; align-self: start;
    margin: 0; padding: 16px; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--r); }
  .rechner-kompakt .rechner .geb-rechnung > .geb-eingaben { margin-top: 0; }
  /* L374: In einer Spalte von rund 350 px laufen die Eingaben einspaltig und die Stufen zweispaltig. Die Media-Queries der Eingaben
     (ab 560 px zwei Spalten, Stufen ab 520 px drei) messen das Fenster, nicht die Spalte; bei 960 px lagen Felder unter dem Ergebnis. */
  .rechner-kompakt .rechner .geb-rechnung > .geb-eingaben { display: block; }
  /* L384: Die Spalten der Auswahl richten sich seit L384 nach der Hülle (Container Query), hier gilt keine eigene Regel mehr. */
  .rechner-kompakt .kompakt-leiste { display: none; }
}

/* L375 Bodenrichtwert holen (BORIS Stufe 1): Knopf über dem Link zum Portal, darunter Quelle, Stichtag und Pflicht-Vermerk; bei mehreren
   Zonen am Punkt eine Wahl. Nur sichtbar, wenn der Server das Land freigibt (Einstellung brw.automatisch). */
.brw-holen-block { display: grid; gap: 6px; margin-bottom: 8px; }
.brw-holen-block .brw-quelle:empty { display: none; }
.brw-holen-block .brw-wahl { margin: 6px 6px 0 0; min-height: 44px; }