/* =====================================================================
   Aufmaß V4 — Vollseiten-Tabs (Kundendaten / Örtlichkeiten / …)
   ===================================================================== */
.tp-body { padding: 12px 26px 12px; }   /* knapp gehalten: Rundgang-Seiten passen ohne Scrollen (User 22.10.2026) */
/* Tastatur offen: Platz unter dem letzten Feld, damit auch das unterste Feld in die Mitte
   des sichtbaren Bereichs gescrollt werden kann (js/viewport.js scrollFocused). */
.kbd-open .tp-body { padding-bottom: 45vh; }
.kbd-open .editor-fields { padding-bottom: 45vh; }
.tab-page { max-width: 1040px; margin: 0 auto; }
.tab-page.wide { max-width: 1040px; }                     /* Seiteneinzug wie früher — mehr Luft links/rechts (User 19.10.2026) */
.tabs .tp-saved { margin-left: auto; align-self: center; }
/* Speicher-Anzeige der Tabs — MUSS den echten Zustand zeigen (war früher fest „Automatisch gespeichert") */
.tp-saved { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 6px 12px; border-radius: 999px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.tp-saved.ok   { color: var(--done-text); background: var(--done-bg); }
.tp-saved.err  { color: var(--danger); background: var(--danger-bg); }

/* ECHTES 2-Spalten-Grid statt column-Masonry: Karten-Oberkanten fluchten, Karten
   können NIE zerrissen werden (iPad-Safari zerteilte Masonry-Karten mitten durch
   und versetzte die Boxen — „Boxen um Kunde/Montage falsch"). */
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tp-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.tp-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }   /* Karten einer Spalte untereinander */
.tp-grid > .tp-card, .tp-grid > .tp-vorbel, .tp-grid > details { box-sizing: border-box; min-width: 0; }
.tp-grid > .full { grid-column: 1 / -1; }
/* Karten/Grids AUSSERHALB eines .tp-grid (z.B. volle Kopf-Karte vor dem Grid) brauchen
   eigenen Abstand — das Grid-gap wirkt nur innen. Parent-Ausschluss verhindert Doppelabstand. */
.tab-page :not(.tp-grid) > * + .tp-card,
.tab-page :not(.tp-grid) > * + .tp-grid,
.tab-page :not(.tp-grid) > * + .tp-vorbel,
.tab-page :not(.tp-grid) > * + details { margin-top: 18px; }
.tp-card { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 18px; padding: 14px 24px 16px; box-shadow: var(--sh-tile); }
.tp-card.full { grid-column: 1 / -1; }
.tp-sh { display: flex; align-items: center; gap: 9px; }
.tp-sh > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--brand); white-space: nowrap; }
.tp-sh > .line { flex: 1; height: 1px; background: var(--line-light); }

.lbl { font-size: 11px; font-weight: 500; letter-spacing: .07em; color: var(--muted); overflow-wrap: anywhere; }   /* Feldbeschriftung nicht fett — Abschnittstitel (.tp-sub) sind fett */
.tp-row { display: flex; gap: 10px; margin-top: 8px; }
.tp-card > .tp-row:first-of-type, .tp-card > .tp-cell:first-of-type, .tp-card > .form-fld:first-of-type { margin-top: 14px; }
.tp-cell { flex: 1; min-width: 0; }
.tp-cell.narrow { width: 150px; flex: none; }
.tp-card > .tp-cell { margin-top: 8px; }
.form-fld { height: 42px; border: 1px solid var(--line); border-radius: 11px; display: flex; align-items: center; padding: 0 14px; background: var(--surface-1); margin-top: 6px; }
.form-fld input { border: 0; outline: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; flex: 1; min-width: 0; color: var(--ink); }
.form-fld input::placeholder { color: var(--disabled); font-weight: 500; }
.form-fld.mono input { font-family: var(--font-mono); }
.form-fld.with-kbd { padding-right: 5px; }
/* Mehrzeiliges Textfeld: Rahmen wächst mit, Text und Platzhalter beginnen oben links */
.form-fld.area { height: auto; min-height: 42px; align-items: flex-start; padding: 9px 14px; }
.form-fld.area textarea { line-height: 1.35; min-height: 44px; }
/* Adress-Sheet (Straßenverzeichnis) — Zeilen im Dropdown-Sheet, Fuß mit Übernehmen */
.dd-opt .adr-ort { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dd-opt.adr-frei { color: var(--brand); font-weight: 600; }
.dd-opt.adr-hint { cursor: default; background: var(--surface-2); font-size: 13px; color: var(--txt2); }
.adr-foot { flex: none; padding: 10px 12px; border-top: 1px solid var(--line-light); display: flex; gap: 10px; }
.adr-ok { flex: 1; height: 46px; border-radius: 12px; border: 0; background: var(--brand); color: var(--on-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
/* (X) rechts in der Suchzeile: nur sichtbar, wenn etwas drinsteht; löscht die Zeile, Sheet bleibt offen */
.adr-search-row { border-bottom: 1px solid var(--line); gap: 0; }
.adr-search-row .dd-search { border-bottom: 0; }
.adr-clear { flex: none; width: 44px; height: 46px; border: 0; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; visibility: hidden; }
.adr-clear.on { visibility: visible; }
.adr-clear:active { color: var(--brand); }
/* Fester Sitz oben + feste Höhe: das Sheet wächst/schrumpft NICHT mit der Zahl der Vorschläge;
   nur die Tastatur (--vvh) begrenzt es. Die Liste scrollt innen. */
.dd-layer.adr-layer { align-items: flex-start; padding-top: 20px; }
.dd-pop.adr-pop { height: min(600px, calc(var(--vvh, 100vh) - 40px)); max-height: none; }
.adr-pop .dd-list { flex: 1; min-height: 0; }
.form-fld.with-kbd input { cursor: pointer; }

.tp-segs { display: flex; gap: 6px; margin-top: 6px; }
.tp-seg { flex: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.15; min-width: 0; cursor: pointer; background: var(--surface-1); border: 1px solid var(--line); color: var(--txt2); }
/* Mehrfachauswahl-Chips: gleiche Optik wie die Direktwahl-Buttons (EIN Bedienmuster) */
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tp-chip { min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; box-sizing: border-box; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--surface-1); color: var(--txt2); }
.tp-chip.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.tp-seg.active { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }

/* Binäre Ja/Nein-Zeile: Label links flexibel, schmales Segment-Paar rechts */
/* Fragezeile: Frage links in Lesetext, Antwort rechts. Zusatzfragen (.sub) eingerückt mit Führungslinie. */
.tp-toggle-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; min-height: 40px; }
.tp-toggle-row .lbl { flex: 1; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--txt2); text-transform: none; }
.tp-toggle-row .tp-segs { width: 150px; flex: none; margin-top: 0; }
.tp-toggle-row.wide .tp-segs { width: 300px; }                /* bei 1040 px Seitenbreite bleibt links Platz für den Fragetext */
.tp-toggle-row.wide .tp-seg { font-size: 12.5px; padding: 0 3px; }
.tp-toggle-row .tp-chips { width: 300px; flex: none; margin-top: 0; flex-wrap: nowrap; gap: 6px; }
.tp-toggle-row .tp-cells { width: 300px; flex: none; display: flex; gap: 6px; }
.tp-toggle-row.narrow .tp-cells { width: 270px; }
.tp-toggle-row .tp-cells .tp-cell { flex: 1; min-width: 0; }
.tp-toggle-row .tp-cells .form-fld { margin-top: 0; height: 40px; padding: 0 10px; }
.tp-toggle-row .tp-cells .form-fld.with-kbd { padding-right: 3px; }
.tp-toggle-row .tp-chip { flex: 1; justify-content: center; padding: 0 3px; font-size: 12.5px; min-height: 40px; }
.tp-toggle-row.sub, .tp-row.sub, .tp-cell.sub { margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.tp-toggle-row.sub .lbl { color: var(--muted); font-weight: 500; }
/* Abschnittstitel innerhalb einer Karte */
.tp-sub { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.tp-sub > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.tp-sub > .line { flex: 1; height: 1px; background: var(--line-light); }
.tp-sub + .tp-toggle-row, .tp-sub + .tp-row, .tp-sub + .tp-cell { margin-top: 6px; }
.tp-info { margin-top: 13px; background: var(--info-bg); border: 1px solid var(--info-line); border-radius: 11px; padding: 11px 14px; font-size: 13px; color: var(--info-text); display: flex; align-items: center; gap: 9px; }

.tp-savebar { margin-top: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 11px; }
.tp-btn-ghost { height: 46px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--line); color: var(--txt2); font-size: 15px; font-weight: 600; display: flex; align-items: center; }
.tp-btn-save { height: 46px; padding: 0 28px; border-radius: 12px; background: var(--brand); color: var(--on-accent); font-size: 15px; font-weight: 600; display: flex; align-items: center; box-shadow: 0 8px 18px rgba(161, 28, 28, .26); }

.tp-empty { max-width: 900px; margin: 60px auto; text-align: center; color: var(--muted); }
.tp-empty .h { font-size: 17px; font-weight: 600; color: var(--txt2); }

/* Ausklapp-Standards (fDetails): sauberer Kopf, rechtsbündiger Chevron + Kurz-Summary */
.fd { border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; background: var(--surface-1); overflow: hidden; }
.fd > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 18px; min-height: 46px; box-sizing: border-box; }
.fd > summary::-webkit-details-marker { display: none; }
.fd-title { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--brand); white-space: nowrap; }
.fd-sum { flex: 1; font-size: 12.5px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-chev { margin-left: auto; color: var(--disabled); font-size: 19px; line-height: 1; transition: transform .15s; flex: none; }
.fd[open] > summary .fd-chev { transform: rotate(90deg); }
.fd-body { padding: 2px 18px 16px; }

/* „Vorbelegungen für neue Positionen" — eigener, default zugeklappter Block */
.tp-vorbel { border: 1px solid var(--line-light); border-radius: 18px; background: var(--surface-1); box-shadow: var(--sh-tile); overflow: hidden; }
.tp-vorbel > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 16px 22px; min-height: 60px; box-sizing: border-box; }
.tp-vorbel > summary::-webkit-details-marker { display: none; }
.tp-vorbel-sum .tx { display: flex; flex-direction: column; gap: 2px; }
.tp-vorbel-sum .t { font-size: 14.5px; font-weight: 700; }
.tp-vorbel-sum .s { font-size: 12.5px; color: var(--muted); }
.tp-vorbel .chev { margin-left: auto; font-size: 22px; line-height: 1; color: var(--disabled); transition: transform .15s; flex: none; }
.tp-vorbel[open] > summary .chev { transform: rotate(90deg); }
.tp-vorbel-body { padding: 2px 22px 20px; }

/* Kalkulation — Kennzahl-Kacheln + Label/Wert-Zeilen */
.kalk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kalk-stat { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: 16px; padding: 18px 12px; text-align: center; box-shadow: var(--sh-tile); }
.kalk-stat .v { font-size: 30px; font-weight: 700; font-family: var(--font-mono); line-height: 1; }
.kalk-stat .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-top: 7px; }
.kalk-rows { margin-top: 4px; }
.kalk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-light); }
.kalk-row:last-child { border-bottom: 0; }
.kalk-label { font-size: 13.5px; color: var(--txt2); }
.kalk-value { font-size: 16px; font-weight: 700; font-family: var(--font-mono); }
.kalk-unit { font-size: 12px; color: var(--muted); font-weight: 600; }
.kalk-sub { font-size: 11.5px; color: var(--muted); margin-top: 9px; line-height: 1.45; }

/* =====================================================================
   Örtlichkeiten „Rundgang" (js/oertlichkeiten.js, 19.10.2026)
   Links Inhaltsverzeichnis, rechts ein Abschnitt. Fragen links in fester Spalte,
   Antworten beginnen immer an derselben Kante. Vorbelegung = blasses Rot,
   bewusst gewählt = volles Rot. Folgefragen ohne Kasten im Block ihrer Frage.
   ===================================================================== */
.oe-wrap { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: stretch; }   /* links und rechts immer gleich hoch */
.oe-nav { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: var(--r-card); box-shadow: var(--sh-tile); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.oe-phase { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 9px 12px 2px; }
.oe-phase:first-child { padding-top: 6px; }
.oe-item { border: 0; background: transparent; text-align: left; padding: 6px 12px;   /* kompakt: 10 Abschnitte (Fensterdetails) passen aufs iPad */ border-radius: 12px; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; font: inherit; color: var(--ink); }
.oe-item .t { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.oe-item .nr { font-family: var(--font-display); color: var(--muted); margin-right: 8px; }
.oe-item .s { grid-column: 1 / -1; font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oe-item.on { background: var(--surface-4); }
.oe-item.on .t, .oe-item.on .nr { color: var(--brand); }
.oe-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.oe-pill.open { color: var(--open-text); background: var(--open-bg); }
.oe-pill.done { color: var(--done-text); background: var(--done-bg); }
.oe-pill.std { color: var(--txt2); background: var(--surface-4); }
.oe-panel { background: var(--surface-1); border: 1px solid var(--line-light); border-radius: var(--r-card); box-shadow: var(--sh-tile); padding: 18px 26px 16px; display: flex; flex-direction: column; min-width: 0; }   /* Höhe = Inhaltsverzeichnis; Blättern-Knöpfe bleiben unten (margin-top: auto) */
.oe-ph { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 6px; }
.oe-ph h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin: 0; }
.oe-reset { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-1); color: var(--txt2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.oe-block { border-top: 1px solid var(--line-light); padding: 6px 0; }
.oe-ph + .oe-block { border-top: 0; }
.oe-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 58px; }
.oe-row.sub { min-height: 52px; }
.oe-row.sub .oe-lbl { color: var(--txt2); font-size: 14px; font-weight: 500; }
.oe-row.wide { align-items: start; padding-block: 8px; }
.oe-row.wide .oe-lbl { padding-top: 10px; }
.oe-lbl { font-size: 15px; font-weight: 600; color: var(--ink); }
.oe-row.req .oe-lbl::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--open-spine); margin-left: 7px; vertical-align: middle; }
.oe-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.oe-seg { display: flex; gap: 6px; flex-wrap: nowrap; }
.oe-b { height: 48px; min-width: 96px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-1); color: var(--txt2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; touch-action: manipulation; }
.oe-b.on { background: var(--brand); border-color: var(--brand); color: var(--on-accent); }
.oe-b.on.std { background: color-mix(in srgb, var(--brand) 22%, var(--surface-1)); border-color: color-mix(in srgb, var(--brand) 40%, var(--surface-1)); color: var(--brand); }
.oe-b.num { min-width: 52px; padding: 0 8px; font-family: var(--font-mono); }
.oe-b.long { font-size: 13px; padding: 0 10px; min-width: 0; }
.oe-seg[aria-label="Stockwerke"] .oe-b, .oe-seg[aria-label="Transportweg"] .oe-b, .oe-seg[aria-label^="Bauseitige"] .oe-b { min-width: 58px; padding: 0 12px; }
.oe-more { height: 48px; width: 96px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-1); color: var(--txt2); font: inherit; font-size: 14px; padding: 0 8px; }
.oe-more.on { background: var(--brand); border-color: var(--brand); color: var(--on-accent); font-weight: 600; }
.oe-num { display: inline-flex; align-items: center; gap: 5px; }
.oe-num i { font-style: normal; font-size: 12.5px; color: var(--muted); }
.oe-in { height: 48px; width: 80px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; font: inherit; font-size: 15px; text-align: right; background: var(--surface-1); color: var(--ink); cursor: pointer; }
.oe-in.mono { font-family: var(--font-mono); }
.oe-in::placeholder { color: var(--placeholder); }
.oe-pre { font-size: 12.5px; color: var(--muted); }
.oe-sum { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; }
.oe-area { width: 100%; min-height: 84px; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 14.5px; line-height: 1.4; background: var(--surface-1); color: var(--ink); resize: vertical; outline: none; }
.oe-area::placeholder { color: var(--placeholder); }
.oe-hint { margin: -4px 0 8px 216px; font-size: 12px; color: var(--muted); }
.oe-lead { margin: -2px 0 8px; font-size: 12.5px; color: var(--muted); }            /* Hinweis unter dem Abschnittstitel */
.oe-dd { width: 340px; max-width: 100%; }                                            /* Stammdaten-Auswahl in der Fragezeile */
.oe-dd .dd-trigger { min-height: 48px; }
.ed-cards-grid.fd-rl { margin-top: 6px; grid-template-columns: 1fr; }                             /* Rollladen-Karten im Fensterdetails-Rundgang: volle Breite wie die übrigen Abschnitte */
.fd-abw { margin: 10px 0 0; }
.oe-warns { margin: 2px 0 8px 216px; display: flex; flex-direction: column; gap: 6px; }
.oe-warn { padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--warn-text); background: var(--warn-bg); border: 1px solid var(--warn-line); }
.oe-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; gap: 10px; }
.oe-nav-btn { height: 46px; padding: 0 18px; border-radius: 12px; border: 0; background: var(--brand); color: var(--on-accent); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.oe-nav-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--txt2); }
@media (max-width: 900px) {
  .oe-wrap { grid-template-columns: 1fr; }
  .oe-nav { position: static; flex-direction: row; overflow-x: auto; }
  .oe-item { min-width: 180px; } .oe-phase { display: none; }
}
@media (max-width: 640px) {
  .oe-row { grid-template-columns: 1fr; gap: 6px; padding-block: 6px; }
  .oe-hint, .oe-warns { margin-left: 0; } .oe-seg { flex-wrap: wrap; }
}

/* Kalkulation in der Reihenfolge der Eingabe (User 22.10.2026) */
.kk { display: flex; flex-direction: column; gap: 14px; }
.kk-blk { padding: 14px 20px 16px; }
.kk-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.kk-h .kk-nr { font-family: var(--font-mono); font-weight: 700; color: var(--brand); }
.kk-h b { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.kk-h span:last-child:not(.kk-nr) { margin-left: auto; font-size: 12px; color: var(--muted); }
.kk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 28px; }
.kk-grp { display: flex; flex-direction: column; min-width: 0; }
.kk-gt { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--txt2); text-transform: uppercase; margin: 6px 0 2px; }
.kalk-row.kk-sub .kalk-label { padding-left: 14px; color: var(--txt2); }