/* Bereich vermieter — seitenspezifische Regeln.
   Nur Tokens aus app.css verwenden (var(--…)), keine Hex-Farben; Vorgabe:
   docs/DESIGNSYSTEM.md. Gemeinsame Komponenten gehören nach app.css.
   Präfix .vm- = Vermieterbereich + Übergabeprotokoll. */

/* ---------- Seitenrahmen ---------- */
.vm-zurueck{margin:0 0 var(--sp-2)}
.vm-zurueck a{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--accent-ink);font-size:var(--fs-sm);font-weight:500}
.vm-zurueck a::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.vm-klein-titel{font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 var(--sp-3)}
.vm-pflicht{font-size:var(--fs-sm);margin-top:0}
.vm-unter-kpi{margin:calc(-1 * var(--sp-3)) 0 var(--sp-5)}
.vm-kennzahlen,.vm-eckdaten{margin-bottom:var(--sp-5)}
@media(min-width:641px){.grid3.vm-kennzahlen,.grid3.vm-eckdaten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vm-eckdaten .kpi .n{font-size:clamp(1.25rem,2vw,1.6rem)}
.vm-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.vm-lesetext{line-height:1.6;max-width:68ch}
.vm-vereinbarung{white-space:pre-line;padding:var(--sp-4);background:var(--surface-2);border-radius:var(--radius-input);
  margin:var(--sp-3) 0;font-size:var(--fs-sm)}

/* Nummerierte Schritte in Kartenüberschriften */
.vm-nr{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent-ink);font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;
  margin-right:.5rem;vertical-align:.15em}

/* Listen in Karten: keine doppelte Umrandung, Zeilen bündig zum Karteninhalt */
.card .liste{border:0;border-radius:0;background:transparent;margin:0}
.card .liste>li>a,.card .liste>li>.zeile{padding-left:0;padding-right:0}
.vm-liste-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.vm-liste-titel{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.vm-liste .badge{flex:none}

/* Erste Schritte */
.vm-schritte{margin:0 0 var(--sp-5);padding-left:1.25rem;display:grid;gap:var(--sp-3);line-height:1.5}
.vm-schritte li::marker{color:var(--accent-ink);font-weight:600}

/* Formularraster: Felder nebeneinander, auf dem Handy untereinander */
.vm-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 var(--sp-4)}
.vm-raster-zwei{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.vm-raster-klein{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.vm-raster-adresse{grid-template-columns:2fr 1fr}
@media(max-width:480px){.vm-raster,.vm-raster-zwei{grid-template-columns:1fr}.vm-raster-klein{grid-template-columns:1fr 1fr}}
.vm-gruppe{border:0;margin:0 0 var(--sp-6);padding:0;min-width:0}
.vm-gruppe:last-of-type{margin-bottom:var(--sp-4)}
.vm-gruppe>legend{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:500;color:var(--ink);padding:0;margin-bottom:var(--sp-3)}
.vm-absenden{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-6)}
@media(max-width:480px){.vm-absenden .btn{width:100%}}
.vm-bestaetigen{font-weight:500;margin-bottom:var(--sp-2)}
details.vm-mehr{margin:var(--sp-2) 0 var(--sp-4)}
details.vm-alternative>summary{font-size:var(--fs-body)}

/* Verdienst-Rechnung */
.vm-verdienst h2,.vm-verdienst h3{margin-top:0}
table.vm-rechnung{width:100%}
table.vm-rechnung th{font-weight:400;color:var(--text-2);text-align:left}
table.vm-rechnung td.zahl{text-align:right;white-space:nowrap}
table.vm-rechnung tr.vm-summe th,table.vm-rechnung tr.vm-summe td{font-weight:600;color:var(--ink)}

/* ---------- Börse ---------- */
.vm-filter-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--sp-4)}
@media(max-width:900px){.vm-filter-felder{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.vm-filter-felder{grid-template-columns:1fr}}
.vm-filter .formular-aktionen{margin-top:0}
.vm-anzahl{color:var(--text-2);font-size:var(--fs-sm);margin:0 0 var(--sp-3)}
.vm-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-4)}
@media(max-width:400px){.vm-karten{grid-template-columns:1fr}}
.vm-karten>.card{margin:0;display:flex;flex-direction:column}
.vm-wunsch-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.vm-wunsch-titel{font-family:var(--font-text);font-size:var(--fs-lg);font-weight:600;margin:0;color:var(--ink)}
.vm-wunsch-titel .muted{font-weight:400;font-size:var(--fs-sm)}
.vm-kv{grid-template-columns:max-content 1fr;gap:.35rem var(--sp-4)}
@media(max-width:480px){dl.kv.vm-kv{grid-template-columns:max-content 1fr;gap:.35rem var(--sp-4)}dl.kv.vm-kv dd{margin:0}}
.vm-zitat{margin:var(--sp-4) 0 0;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border-radius:var(--radius-input);
  color:var(--text);font-size:var(--fs-sm);line-height:1.5;border:0}
.vm-zitat::before{content:"„"}.vm-zitat::after{content:"“"}
.vm-wunsch-fuss{margin-top:auto;padding-top:var(--sp-4)}
.vm-wunsch-fuss .btn{width:100%}

/* ---------- Angebot ---------- */
.vm-gesucht dl.kv{margin:0}
.vm-ampel .vm-ampel-satz{font-weight:500;margin:0 0 var(--sp-3)}
.vm-gruende .zeile{align-items:flex-start}
.vm-gruende .neben{display:block;margin-top:2px}
.vm-verlauf{list-style:none;margin:0 0 var(--sp-4);padding:0}
.vm-verlauf .msg{display:flex;flex-direction:column;gap:2px}

/* ---------- Inserat ---------- */
.vm-sprung{margin:0 0 var(--sp-5);overflow-x:auto;max-width:100%;scrollbar-width:none}
.vm-sprung::-webkit-scrollbar{display:none}
.vm-sprung a{white-space:nowrap}
.vm-bewerbungen{list-style:none;margin:0;padding:0}
.vm-bewerbung{padding:var(--sp-4) 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.vm-bewerbung:first-child{border-top:0;padding-top:var(--sp-2)}
.vm-bewerbung:target{background:var(--accent-tint);margin:0 calc(-1 * var(--sp-4));padding-left:var(--sp-4);padding-right:var(--sp-4);border-radius:var(--radius-button)}
.vm-bewerbung-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap}
.vm-bewerbung-kopf>div{flex:1 1 220px;min-width:0}
.vm-bewerbung-kopf>.badge{flex:none}
.vm-bewerbung-kopf h3{margin:0;font-size:var(--fs-lg)}
.vm-bewerbung-kopf .hilfe{margin:2px 0 0}
.vm-kontakt{margin:var(--sp-2) 0 0}
.vm-dokumente{margin:var(--sp-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.vm-bewerbung-aktionen{margin-top:var(--sp-4)}
.vm-bewerbung-aktionen form{display:contents}
@media(max-width:480px){.vm-bewerbung-aktionen .btn{flex:1 1 auto}}
.vm-status-aendern{margin-top:var(--sp-3)}
.vm-inline-form{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:var(--sp-2)}
.vm-inline-form select{width:auto;flex:1;min-width:200px}
.vm-leer-klein{padding:var(--sp-5) var(--sp-3)}

.vm-treffer{list-style:none;margin:0;padding:0}
.vm-treffer-zeile{display:grid;grid-template-columns:56px 1fr auto;gap:var(--sp-4);align-items:center;padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.vm-treffer-zeile:first-child{border-top:0}
.vm-treffer-wert{width:56px;height:56px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);
  display:flex;align-items:baseline;justify-content:center;padding-top:14px;font-variant-numeric:tabular-nums}
.vm-treffer-wert b{font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.vm-treffer-wert span{font-size:var(--fs-xs)}
.vm-treffer-titel{margin:0;font-weight:500;color:var(--ink)}
.vm-treffer-text .hilfe{margin:2px 0 0}
.vm-treffer-vorstellung{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:var(--text-2)}
@media(max-width:560px){
  .vm-treffer-zeile{grid-template-columns:48px 1fr}
  .vm-treffer-wert{width:48px;height:48px;padding-top:11px}
  .vm-treffer-zeile>.btn{grid-column:1 / -1}
}

.vm-medien-gruppe{padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.vm-medien-gruppe:first-of-type{border-top:0;padding-top:0}
.vm-medien-kopf h3{margin:0 0 var(--sp-1);font-size:var(--fs-body)}
.vm-medien-kopf .hilfe{margin:0 0 var(--sp-3)}
.vm-medien{list-style:none;margin:0 0 var(--sp-3);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-3)}
.vm-medien-video{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.vm-medium{display:flex;flex-direction:column;gap:var(--sp-1)}
.vm-bild{position:relative;display:block;border-radius:var(--radius-button);overflow:hidden;aspect-ratio:4/3;background:var(--fill)}
.vm-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease-out)}
.vm-bild:hover img{transform:scale(1.03)}
.vm-titelbild{position:absolute;left:8px;top:8px}
.vm-medium video{width:100%;border-radius:var(--radius-button);background:var(--fill)}
.vm-datei{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;padding:var(--sp-2) var(--sp-3);background:var(--surface-2);
  border-radius:var(--radius-button);color:var(--text);word-break:break-all}
.vm-datei span{font-size:var(--fs-xs);font-weight:700;color:var(--err)}
.vm-medium-aktionen{display:flex;justify-content:space-between;gap:var(--sp-1)}
.vm-medium-aktionen form{margin:0}
.vm-medium-aktionen .btn.text{padding-left:0;padding-right:0}
.btn.text.vm-loeschen{color:var(--danger)!important;margin-left:auto}
.vm-upload{margin:0}
.vm-upload .hilfe{margin:var(--sp-1) 0 var(--sp-2)}

/* ---------- Termine ---------- */
.vm-termine{list-style:none;margin:0;padding:0}
.vm-termin-tag h3{font-family:var(--font-text);font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
  text-transform:uppercase;letter-spacing:.04em;margin:var(--sp-5) 0 var(--sp-1)}
.vm-termin-tag:first-child h3{margin-top:0}
.vm-termin{display:grid;grid-template-columns:110px 1fr auto auto;gap:var(--sp-3);align-items:center;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.vm-termin form{margin:0}
.vm-termin-zeit{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.vm-termin-text{display:flex;flex-direction:column;min-width:0}
.vm-termin-text>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .vm-termin{grid-template-columns:1fr auto;row-gap:var(--sp-1)}
  .vm-termin-zeit{grid-column:1}
  .vm-termin>.badge{grid-column:2;grid-row:1;justify-self:end}
  .vm-termin-text{grid-column:1 / -1}
  .vm-termin form{grid-column:1 / -1;justify-self:end}
}

/* ---------- Aussteller ---------- */
.vm-nummer-zeile{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.vm-nummer-wert{font-family:var(--font-mono);font-size:clamp(1.5rem,4vw,2rem);font-weight:600;letter-spacing:.08em;margin:0;color:var(--ink)}
.vm-preis{margin:0 0 var(--sp-4)}
.vm-assets{list-style:none;margin:0;padding:0}
.vm-asset{display:grid;grid-template-columns:180px 1fr;gap:var(--sp-5);align-items:center;padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.vm-asset:first-child{border-top:0}
.vm-asset-vorschau{min-height:88px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);
  border-radius:var(--radius-button);padding:var(--sp-2);text-align:center}
.vm-asset-vorschau img{max-width:100%;max-height:80px;object-fit:contain}
.vm-asset-form{margin:0}
.vm-asset-form label{font-weight:600}
@media(max-width:560px){.vm-asset{grid-template-columns:1fr;gap:var(--sp-3)}}

/* ---------- Vertrag ---------- */
.vm-wahl{border:0;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.vm-wahl-option{padding:var(--sp-4);border:1px solid var(--line-strong);border-radius:var(--radius-button);
  cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.vm-wahl-option:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.vm-wahl-option:has(input:disabled){cursor:default;opacity:.75}
.vm-wahl-option>span{display:flex;flex-direction:column;gap:2px}
.vm-wahl-option .hilfe{margin:0}
.vm-wahl-vorlage{margin:0 0 0 var(--sp-6)}
@media(max-width:480px){.vm-wahl-vorlage{margin-left:0}}
.vm-links{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-4)}
.vm-link{display:block;padding:var(--sp-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-input);
  font-family:var(--font-mono);font-size:var(--fs-sm);word-break:break-all;color:var(--text);margin-bottom:var(--sp-2);user-select:all}
.vm-linkbox{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.vm-linkbox .vm-link{width:100%;margin:0}
.vm-code-block{white-space:normal}
textarea.vm-vertragstext{font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.55}
.vm-bausteine{margin:var(--sp-3) 0 0;padding-left:1.2rem;color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}

/* ---------- Übergabeprotokoll (vor Ort, oft am Handy) ---------- */
.vm-ablauf{list-style:none;counter-reset:ablauf;display:flex;gap:var(--sp-2);margin:0 0 var(--sp-5);padding:0;flex-wrap:wrap}
.vm-ablauf li{counter-increment:ablauf;display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--text-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);padding:.4rem .9rem .4rem .45rem}
.vm-ablauf li::before{content:counter(ablauf);width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--fill);color:var(--text);font-weight:600;font-size:var(--fs-xs)}
.vm-ablauf li.erledigt::before{content:"✓";background:var(--accent);color:var(--on-accent)}
.vm-termin-gross{font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin:0 0 var(--sp-3)}
.vm-raeume{display:grid;gap:var(--sp-3)}
.vm-raum{border:1px solid var(--line);border-radius:var(--radius-button);padding:var(--sp-3) var(--sp-4) var(--sp-4);margin:0;min-width:0;background:var(--surface)}
.vm-raum>legend{font-weight:600;color:var(--ink);padding:0 var(--sp-1);margin-left:calc(-1 * var(--sp-1))}
.vm-raum>input{margin-top:var(--sp-3)}
.vm-raum:has(.vm-segment-maengel input:checked){border-color:var(--warn-line);background:var(--warn-bg)}
.vm-raum:has(.vm-segment-in_ordnung input:checked){border-color:var(--ok-line)}

/* Segment-Umschalter (iOS-Anmutung) aus echten Radioknöpfen — ohne JS bedienbar */
.vm-segmente{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:2px;background:var(--fill);border-radius:var(--radius-input)}
label.vm-segment{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:.25rem .5rem;
  border-radius:calc(var(--radius-input) - 2px);font-size:var(--fs-sm);font-weight:500;color:var(--text);text-align:center;
  cursor:pointer;line-height:1.2;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
label.vm-segment>input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
label.vm-segment:hover{background:var(--fill-hover)}
label.vm-segment:has(input:checked){background:var(--surface);box-shadow:var(--shadow-card-hover);color:var(--ink);font-weight:600}
label.vm-segment-in_ordnung:has(input:checked){color:var(--ok)}
label.vm-segment-maengel:has(input:checked){color:var(--warn)}
label.vm-segment:has(input:focus-visible){outline:3px solid var(--focus-ring);outline-offset:1px}
fieldset:disabled label.vm-segment{cursor:default}
fieldset:disabled label.vm-segment:not(:has(input:checked)){opacity:.5}

.vm-speicherleiste{position:sticky;bottom:0;z-index:5;padding:var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
  margin:0 0 var(--sp-5);background:linear-gradient(to top,var(--bg) 70%,transparent)}
@media(min-width:641px){.vm-speicherleiste .btn.block{width:auto;min-width:280px}}

.vm-fertig h1{font-family:var(--font-text);font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin:0 0 .5rem;letter-spacing:0}
[data-hinweis][hidden]{display:none!important}

/* Formular als Karte: Überschrift nach dem versteckten CSRF-Feld ohne Kopfabstand */
.card>input[type=hidden]+h2,.card>input[type=hidden]+h3{margin-top:0}
.vm-raster+.hilfe{margin:0 0 var(--sp-5)}
.vm-kv dt,.vm-kv dd{align-self:baseline}