/* ==========================================================================
   Protokolle: Liste, Checkliste, Fotos, Unterschriften, Druckansicht.
   Ruhig wie der Rest: graue Felder (--inset), Akzent nur als dünne Umrandung
   (im Akzent). Mangel = Orange (--warn), Defekt = Rot (--neg).
   ========================================================================== */

/* ---------- Liste ---------- */
.prot-liste { display: flex; flex-direction: column; margin-top: 6px; }
.prot-zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px 150px 170px; align-items: center; gap: 12px; padding: 12px 8px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; border-radius: var(--r-mittel); }
.prot-zeile:first-child { border-top: 0; }
.prot-zeile:hover { background: var(--hover); }
.prot-zeile:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.prot-z-haupt { display: flex; flex-direction: column; min-width: 0; }
.prot-z-haupt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prot-z-haupt .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prot-m, .cl-m { color: var(--warn); font-weight: 600; }
.prot-status { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.prot-status.entwurf { background: var(--inset); color: var(--ink-2); }
.prot-status.abgeschlossen { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.prot-status.unterschrieben { background: transparent; color: var(--pos); box-shadow: inset 0 0 0 1px var(--pos); }
@media (max-width: 760px) {
  .prot-zeile { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "i h s" "i z d"; row-gap: 2px; }
  .prot-zeile > .icon-tile { grid-area: i; }
  .prot-z-haupt { grid-area: h; }
  .prot-z-status { grid-area: s; justify-self: end; }
  .prot-z-zahlen { grid-area: z; }
  .prot-z-datum { grid-area: d; justify-self: end; }
}

/* ---------- Neues Protokoll / Vorlagen ---------- */
.prot-vorlagen { display: flex; flex-direction: column; gap: 6px; }
.prot-vorlage { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--r-mittel); background: var(--inset); }
.prot-vorlage-los { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: var(--r-mittel); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.prot-vorlage-los:hover { background: var(--hover); }
.prot-vorlage-los:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
.prot-vorlage-los .grow { display: flex; flex-direction: column; min-width: 0; }
.vl-editor .form-grid { margin-bottom: 14px; }
.vl-liste { display: flex; flex-direction: column; gap: 12px; }
.vl-bereich { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-mittel); background: var(--inset); }
.vl-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 190px repeat(3, 32px); gap: 6px; align-items: center; }
.vl-zeile.vl-kopf { grid-template-columns: minmax(0, 1fr) repeat(3, 32px); }
.vl-btitel { font-weight: 600; }
@media (max-width: 640px) { .vl-zeile { grid-template-columns: minmax(0, 1fr) repeat(3, 32px); } .vl-zeile .select { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Seite eines Protokolls ---------- */
.prot-zurueck { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--ink-3); text-decoration: none; }
.prot-zurueck:hover { color: var(--ink); }
.prot-aktionen { gap: 8px; }
.prot-karte { margin-bottom: var(--gap, 16px); }

/* ---------- Checkliste ---------- */
.cl-kopf { margin-bottom: 14px; }
.cl-zahl { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.cl-zahl b { color: var(--ink); font-weight: 650; }
.cl-balken { height: 6px; border-radius: var(--r-rund); background: var(--track); overflow: hidden; }
.cl-balken i { display: block; height: 100%; border-radius: var(--r-rund); background: var(--ink); transition: width var(--dauer-3) var(--ease); }
.cl-sperre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); color: var(--ink-2); }
.cl-liste { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-liste[disabled] .cl-knopf, .cl-liste[disabled] .input, .cl-liste[disabled] .textarea { opacity: .75; cursor: default; }
.cl-bereich { border-radius: var(--r-mittel); }
.cl-bereich > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 4px; cursor: pointer; list-style: none; border-radius: var(--r-mittel); }
.cl-bereich > summary::-webkit-details-marker { display: none; }
.cl-bereich > summary:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
.cl-btitel { font-weight: 650; font-size: 15px; }
.cl-stand { margin-left: auto; }
.cl-pfeil { flex: none; color: var(--ink-3); transition: transform var(--dauer-2) var(--ease); }
.cl-bereich:not([open]) .cl-pfeil { transform: rotate(-90deg); }
.cl-punkte { display: flex; flex-direction: column; gap: 8px; }
.cl-punkt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border-radius: var(--r-mittel); background: var(--inset); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--dauer-2); }
.cl-punkt.mangel { box-shadow: inset 0 0 0 1.5px var(--warn); }
.cl-punkt.defekt { box-shadow: inset 0 0 0 1.5px var(--neg); }
.cl-titel { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-weight: 560; }
.cl-nr { flex: none; min-width: 20px; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.cl-wahl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cl-wahl.cl-typ-zahl, .cl-wahl.cl-typ-text { justify-content: stretch; }
.cl-wahl.cl-typ-text { grid-column: 1 / -1; }
.cl-wahl .cl-eingabe { min-height: 44px; }
.cl-wahl.cl-typ-zahl .cl-eingabe { width: 160px; text-align: right; }
.cl-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-mittel); background: var(--card); color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.cl-knopf:hover { color: var(--ink); }
.cl-knopf:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent), var(--ring); }
.cl-knopf.an { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.cl-knopf.an.ton-gut { color: var(--pos); box-shadow: inset 0 0 0 1.5px var(--pos); }
.cl-knopf.an.ton-mangel { color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
.cl-knopf.an.ton-defekt { color: var(--neg); box-shadow: inset 0 0 0 1.5px var(--neg); }
.cl-ampel { width: 12px; height: 12px; border-radius: var(--r-rund); }
.cl-ampel.gruen { background: var(--pos); }
.cl-ampel.gelb { background: var(--warn); }
.cl-ampel.rot { background: var(--neg); }
.cl-extra { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.cl-extra:empty { display: none; }
.cl-notiz.zu { display: none; }
.cl-notiz .textarea { width: 100%; min-height: 44px; background: var(--card); }
.cl-bitte { font-size: 12.5px; color: var(--warn); }
.cl-kosten { max-width: 260px; }
.cl-kosten .input { background: var(--card); }
.cl-leiste { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-leiste .btn { min-height: 40px; }
.cl-add { align-self: flex-start; margin-top: 6px; }
.cl-neu { display: grid; grid-template-columns: minmax(0, 1fr) 210px auto; gap: 6px; margin-top: 6px; }
@media (max-width: 640px) {
  .cl-punkt { grid-template-columns: minmax(0, 1fr); }
  .cl-wahl { justify-content: stretch; }
  .cl-wahl .cl-knopf { flex: 1 1 0; padding: 0 8px; }
  .cl-wahl.cl-typ-zahl .cl-eingabe { width: 100%; }
  .cl-neu { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fotos ---------- */
.foto-knopf { cursor: pointer; }
.foto-knopf.aus { opacity: .5; pointer-events: none; }
.foto-knopf:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--accent); }
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-top: 10px; }
.foto-raster.klein { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); margin-top: 0; }
.foto-kachel { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-mittel); overflow: hidden; background: var(--track); cursor: zoom-in; }
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-kachel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--accent); }
.foto-kachel.fehlt::after { content: "Foto fehlt in diesem Browser"; position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; font-size: 11px; color: var(--ink-3); text-align: center; }
.foto-nr { position: absolute; left: 6px; top: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-mittel); background: var(--card); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.foto-vollbild { display: grid; place-items: center; }
.foto-gross { max-width: 100%; max-height: calc(100vh - 220px); border-radius: var(--r-mittel); }

/* ---------- Unterschriften ---------- */
.us-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; }
.us-karte { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-mittel); background: var(--inset); }
.us-karte.fertig { box-shadow: inset 0 0 0 1px var(--line); }
.us-kopf { display: flex; align-items: center; justify-content: space-between; }
.us-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.us-felder .input, .us-felder .select { background: var(--card); }
.us-bild { display: grid; place-items: center; min-height: 96px; border-radius: var(--r-mittel); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.us-bild img { max-width: 100%; max-height: 110px; }
/* PNG ist schwarz auf transparent: im Dunkelmodus hell zeigen */
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .us-bild img, :root:not([data-theme="light"]) .prot-doc-u img { filter: invert(1); } }
@media screen { :root[data-theme="dark"] .us-bild img, :root[data-theme="dark"] .prot-doc-u img { filter: invert(1); } }
.us-los { min-height: 44px; }
.us-feld { position: relative; height: min(48vh, 320px); border-radius: var(--r-mittel); background: var(--inset); touch-action: none; }
.us-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); touch-action: none; cursor: crosshair; }
.us-linie { position: absolute; left: 8%; right: 8%; bottom: 26%; border-bottom: 1.5px dashed var(--line-2); pointer-events: none; }
.us-hinweis { position: absolute; left: 8%; bottom: calc(26% - 22px); font-size: 12px; color: var(--ink-3); pointer-events: none; }
@media (max-width: 640px) {
  .us-felder { grid-template-columns: minmax(0, 1fr); }
  /* Unterschreiben am Handy: großes Feld über den ganzen Bildschirm */
  .modal.unterschrift-modal { position: fixed; inset: 0; width: 100% !important; max-width: none; max-height: none; height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  .modal.unterschrift-modal .modal-body { flex: 1; display: flex; }
  .modal.unterschrift-modal .us-feld { flex: 1; height: auto; min-height: 50vh; }
}

/* ---------- Dokumente → Protokolle ---------- */
/* Chip-Zeilen in Listen-Karten (.tx-liste hat keinen Innenabstand): seitlich eingerückt wie .tx-filter,
   am Desktop dürfen sie umbrechen, am Handy eine Zeile, nur seitlich wischbar */
.tx-liste > .chips, .dok-ordner { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dok-ordner[hidden] { display: none; }
@media (max-width: 1023.98px) {
  .tx-liste > .chips, .dok-ordner { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: none; padding: 10px 12px; }
  .tx-liste > .chips::-webkit-scrollbar, .dok-ordner::-webkit-scrollbar { display: none; }
  .tx-liste > .chips > .chip, .dok-ordner > .chip { flex: none; }
}

/* ---------- Druckansicht ---------- */
.prot-doc { color: var(--ink); }
.prot-doc-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.prot-doc-h { margin: 22px 0 8px; }
.prot-doc .t td, .prot-doc .t th { font-size: 13px; vertical-align: top; }
.prot-doc tr.mangel td:nth-child(2) { color: var(--warn); font-weight: 600; }
.prot-doc tr.defekt td:nth-child(2) { color: var(--neg); font-weight: 600; }
.prot-doc .foto-raster { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.prot-doc .foto-kachel { cursor: default; }
.prot-doc-us { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.prot-doc-u img { display: block; max-width: 100%; height: 70px; object-fit: contain; object-position: left bottom; border-bottom: 1px solid var(--line-2); }
.prot-doc-leer { height: 70px; border-bottom: 1px solid var(--line-2); }
@media print {
  .prot-doc { color: #000; }
  .prot-doc .foto-kachel { break-inside: avoid; }
  .prot-doc-us, .prot-doc .t tr { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .cl-balken i, .cl-pfeil, .cl-punkt { transition: none; } }

/* ---------- Übergabe starten ---------- */
.ub-info { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; }
.ub-info:empty { display: none; }
.ub-raeume { margin-top: 12px; }
.ub-raumliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-bottom: 6px; }
.ub-raum { display: flex; gap: 4px; align-items: center; }
.ub-extras .chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; color: var(--ink); }

/* ---------- Übergabe in der Checkliste ---------- */
.cl-bmenue { margin-left: 4px; }
.cl-raum-add { align-self: flex-start; }
.cl-vg-hin { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 12px; }
.cl-einzug { display: block; flex-basis: 100%; font-size: 12px; font-weight: 450; color: var(--ink-3); }
.cl-einzug.war-mangel { color: var(--warn); }
.cl-titel { flex-wrap: wrap; }
.cl-neu-chip { font-size: 11.5px; }
.cl-punkt.neu-mangel { box-shadow: inset 0 0 0 2px var(--warn); }
.cl-punkt.neu-mangel.defekt { box-shadow: inset 0 0 0 2px var(--neg); }
.cl-neu-seit { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-mittel); background: var(--inset); }
.cl-ns-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cl-neu-seit .t td { background: transparent; }
.cl-ns-summe td { border-top: 1px solid var(--line-2); }
.cl-kaution { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cl-zaehler { grid-template-columns: minmax(0, 1fr); }
.cl-zaehler.ohne-foto { box-shadow: inset 0 0 0 1.5px var(--warn); }
.cl-z-felder { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 6px; align-items: center; }
.cl-z-felder .input { background: var(--card); min-height: 44px; }
.cl-z-foto .foto-raster.klein { grid-template-columns: 64px; }
.cl-schluessel { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 6px 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-mittel); background: var(--inset); }
.cl-schluessel.mit-zurueck { grid-template-columns: minmax(0, 1fr) 110px 110px; }
.cl-schluessel .input { background: var(--card); min-height: 44px; text-align: right; }
.cl-arbeit { display: grid; grid-template-columns: minmax(0, 1fr) 170px 32px; gap: 6px; align-items: center; }
.cl-arbeit .input { min-height: 44px; }
@media (max-width: 640px) {
  .cl-z-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cl-z-felder .cl-z-foto { grid-column: 1 / -1; }
  .cl-arbeit { grid-template-columns: minmax(0, 1fr) 32px; }
  .cl-arbeit .input[type=date] { grid-column: 1; }
}

/* ---------- Mietvertrag: Assistent ---------- */
.vt-hinweis { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); color: var(--ink-2); font-size: 13px; }
.vt-hinweis-seite { margin-bottom: 14px; }
.vt-schritte { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.vt-schritte::-webkit-scrollbar { display: none; }
.vt-schritt { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: var(--r-mittel); background: transparent; color: var(--ink-3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vt-schritt:hover { color: var(--ink); background: var(--hover); }
.vt-schritt.an { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.vt-schritt:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent), var(--ring); }
.vt-nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-rund); background: var(--inset); font-size: 12px; }
.vt-karte .h3 { margin-bottom: 14px; }
.vt-inhalt { display: flex; flex-direction: column; gap: 12px; }
.vt-inhalt .form-grid { margin: 0; }
.vt-person-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.vt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.vt-haken { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.vt-mit { display: flex; flex-direction: column; gap: 8px; }
.vt-schluessel { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.vt-summe-zeile { padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); }
.vt-warn { margin: 0; color: var(--warn); font-size: 13px; }
.vt-warn[hidden] { display: none; }
.vt-konflikt { color: var(--warn); }
.vt-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .vt-zeile { grid-template-columns: minmax(0, 1fr); } .vt-name { display: none; } .vt-schritt.an .vt-name { display: inline; } }

/* ---------- Mietvertrag: Druckansicht ---------- */
.vertrag-doc { max-width: 760px; margin: 0 auto; color: var(--ink); font-size: 14px; line-height: 1.55; }
.vt-deckblatt { padding: 8px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.vt-titel { margin: 40px 0 6px; font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.vt-unter { margin: 0 0 20px; color: var(--ink-2); }
.vt-kurz { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; margin: 0 0 22px; }
.vt-kurz dt { color: var(--ink-3); }
.vt-kurz dd { margin: 0; font-weight: 600; }
.vt-par h2, .vt-anlage h2 { margin: 18px 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.vt-par p, .vt-anlage p { margin: 0 0 8px; }
.vt-tabelle { width: 100%; max-width: 460px; border-collapse: collapse; margin: 4px 0 8px; }
.vt-tabelle td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.vt-tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.vt-tabelle .vt-summe td { font-weight: 700; border-bottom: 0; }
.vt-anlagen { margin: 0; padding-left: 20px; }
.vt-us { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 18px; margin-top: 10px; }
.vt-u img { display: block; max-width: 100%; height: 70px; object-fit: contain; object-position: left bottom; border-bottom: 1px solid var(--ink-3); }
.vt-u-leer { height: 70px; border-bottom: 1px solid var(--ink-3); }
.vt-fuss { margin-top: 26px; font-size: 12px; color: var(--ink-3); }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vt-u img { filter: invert(1); } }
@media screen { :root[data-theme="dark"] .vt-u img { filter: invert(1); } }
/* Drucken: eigene Seiten mit Seitenzahl und Hinweis in der Fußzeile (Seitenränder-Felder; in Chrome und Edge) */
@page vertrag {
  margin: 18mm 18mm 20mm;
  @bottom-left { content: "Vorlage – vor Verwendung rechtlich prüfen lassen. Keine Rechtsberatung."; font-size: 8pt; color: #555; }
  @bottom-right { content: "Seite " counter(page) " von " counter(pages); font-size: 8pt; color: #555; }
}
@media print {
  body.drucke-vertrag .vertrag-doc { page: vertrag; max-width: none; color: #000; font-size: 10.5pt; }
  .vt-deckblatt { break-after: page; border: 0; }
  .vt-anlage { break-before: page; }
  .vt-par, .vt-u { break-inside: avoid; }
  .vt-hinweis { border: 1px solid #999; background: none; }
}

/* ---------- Besichtigung: Sterne ---------- */
.cl-wahl.cl-typ-sterne { gap: 2px; }
.cl-stern { min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--r-mittel); background: transparent; color: var(--ink-3); font-size: 24px; line-height: 1; cursor: pointer; }
.cl-stern.an { color: var(--warn); }
.cl-stern:hover { background: var(--hover); }
.cl-stern:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cl-wahl .input-wrap { width: 180px; }
@media (max-width: 640px) { .cl-wahl .input-wrap { width: 100%; } .cl-wahl.cl-typ-sterne { justify-content: space-between; } }

/* Listen-Karte der Protokolle: Zeilen eingerückt wie die Reiter darüber */
.tx-liste .prot-liste { padding: 0 8px 8px; }
.tx-liste > .empty { padding: 28px 16px; }

/* Dialoge: Seite dahinter gesperrt, Inhalt scrollt innen (keine doppelte Scrollleiste) */
.scrim, .modal-body { overscroll-behavior: contain; }
@media (max-width: 760px) {
  html.dialog-offen, html.dialog-offen body { overflow: hidden; }
  /* Vertragsvorschau am Handy in voller Höhe */
  .modal.vertrag-blatt { height: 100%; max-height: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal.unterschrift-modal .modal-body { overflow: hidden; touch-action: none; }
}