/* ============================================================
 *  Vermietertool – Design-System (vt-ui.css)          Stand 28.10.2026
 *  ------------------------------------------------------------
 *  EINE Quelle für Farben, Schrift, Abstände und die Bausteine, die auf
 *  jeder internen Seite vorkommen.
 *
 *  Apple-Optik (Leon 26./27.10.2026): Haptik und Optik wie eine Apple-App
 *  — Systemschrift, weiße Karten auf Creme, feine Schatten statt Rahmen,
 *  flache Knöpfe, Druck-Feedback, Segmented Control, iOS-Schalter,
 *  Inset-Grouped-Listen, Kennzahl-Kacheln. Das FARBKONZEPT bleibt:
 *  Creme-Grund, Weiß für Flächen, Gold als Akzent, Espresso-Leiste.
 *
 *  Einbinden in JEDER internen Seite direkt nach shell-frame.css:
 *    <link rel="stylesheet" href="./vt-ui.css?v=…">
 *
 *  Zwei Ebenen:
 *   1) vt-*-Klassen — für neue Seiten und beim Umbau alter Seiten.
 *   2) Sanfte Normalisierung häufiger Alt-Klassen (Abschnitt 11) — damit
 *      alle Seiten sofort gleicher wirken, ohne jede Seite anzufassen.
 *      Farben von Alt-Knöpfen werden BEWUSST nicht überschrieben.
 *
 *  Farbregel: Gold = Handlung · Grün = erledigt · Bernstein = wartet ·
 *  Rot = Problem · alles andere Grau. Nicht mehr Farben erfinden.
 *  Kontrast (WCAG AA, 4.5:1) ist für jedes Text/Fläche-Paar geprüft:
 *   - Fläche mit weißer Schrift:   --vt-tint (#8C6B2F) 4.9:1
 *   - Akzent-Text/Links:           --vt-gold-ink (#7A5C26) 5.4:1 auf Creme
 *     (#8C6B2F als Text hätte auf Creme nur 4.3:1)
 *   - Sekundärtext:                --vt-ink-soft (#6F6151) 5.2:1 auf Creme
 *   - --vt-gold (#AD8843) und --vt-ink-faint NUR für Deko ohne Text.
 *
 *  Bausteine (Kurzreferenz, Beispiele in der Komponenten-Galerie):
 *   .vt-head · .vt-card · .vt-btn(--sec|--tint|--ghost|--danger|--sm|--pill|--block)
 *   .vt-pill(--ok|--wait|--err|--gold|--tint) · .vt-note(--ok|--wait|--err)
 *   .vt-table/.vt-stack · .vt-empty · .vt-field/.vt-input · .vt-skel · #vt-toast
 *   NEU: .vt-seg (Segmented Control, gleitender Indikator per VT.ui.seg)
 *        .vt-switch / input[type=checkbox][role=switch] / button[role=switch]
 *        .vt-group/.vt-list/.vt-row (Inset-Grouped-Liste)
 *        .vt-widgets/.vt-widget (Kennzahl-Kachel) · .vt-bar (Glas-Leiste)
 * ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Farbkonzept (unverändert) */
  --vt-paper:#FCFAF5; --vt-cream:#F4EEE2; --vt-cream-deep:#EBE2D1; --vt-sand:#E2D6BF;
  --vt-ink:#2A2017; --vt-ink-soft:#6F6151; --vt-ink-faint:#9A8B77;
  --vt-gold:#AD8843; --vt-gold-deep:#8C6B2F; --vt-gold-soft:#CBA968; --vt-gold-glow:rgba(173,136,67,.14);
  --vt-gold-ink:#7A5C26;
  --vt-espresso:#241B12;
  --vt-line:#E7DFD0; --vt-line-soft:rgba(42,32,23,.07);
  --vt-green:#1d7a4f; --vt-green-bg:#EEF6F0; --vt-green-line:#BFE0CD;
  --vt-amber:#8a6a1f; --vt-amber-bg:#fdf6e8; --vt-amber-line:#f0e0bc;
  --vt-red:#9c3520;   --vt-red-bg:#fdefec;   --vt-red-line:#f2cfc7;

  /* Rollen (Apple: grouped background / Fläche / Akzent) */
  --vt-bg:var(--vt-cream);            /* Seitengrund = „grouped background“ */
  --vt-surface:#fff;                  /* Karten, Listen, Kacheln */
  --vt-tint:var(--vt-gold-deep);      /* Akzent-Fläche mit weißer Schrift */
  --vt-tint-press:#7A5C26;            /* gedrückt / Hover */
  --vt-sep:rgba(60,48,36,.13);        /* Haarlinie in Listen und Tabellen */
  --vt-fill:rgba(118,118,128,.12);    /* neutrale Fläche: Sekundärknopf */
  --vt-fill-2:rgba(118,118,128,.18);  /* … Hover/gedrückt */
  --vt-track:rgba(118,118,128,.14);   /* Spur des Segmented Control */
  --vt-switch-off:rgba(120,120,128,.24);

  /* Form */
  --vt-radius:16px; --vt-radius-lg:18px; --vt-radius-sm:12px; --vt-radius-xs:10px;
  --vt-shadow:0 1px 2px rgba(42,32,23,.06),0 2px 10px rgba(42,32,23,.04);
  --vt-shadow-pop:0 12px 32px rgba(42,32,23,.16),0 2px 6px rgba(42,32,23,.08);
  --vt-shadow-thumb:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
  --vt-shadow-btn:none;               /* früher Gold-Glanz – Apple: flach */
  /* Fokusring deckend in Gold-tief: mind. 3:1 gegen Creme (4.3), Weiß (4.9) und
     die Segment-Spur (3.7) – WCAG 1.4.11. Halbtransparent wäre er nur ~2:1. */
  --vt-focus:#8C6B2F;
  --vt-ease:cubic-bezier(.32,.72,0,1);

  /* Schrift: Systemschrift (SF auf Apple-Geräten, sonst Inter aus fonts.css) */
  --vt-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --vt-serif:var(--vt-sans);          /* keine Serife mehr – Überschriften fett */
}

/* ---------- 1b. Grundlagen (Spezifität 0 – jede Seitenregel gewinnt) ---------- */
:where(body){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:where(button,input,select,textarea){font-family:inherit}
:where(button,a,[role=button],[role=tab],[role=switch],label,summary){-webkit-tap-highlight-color:transparent}
:where(main) :where(h1,h2){letter-spacing:-.02em}
:where(a,button,input,select,textarea,summary,[tabindex],[role=button],[role=tab],[role=switch]):focus-visible{outline:3px solid var(--vt-focus);outline-offset:2px}
:where(.vt-num,.vt-widget__value,.vt-row__value){font-variant-numeric:tabular-nums}

/* Druck-Feedback (Apple): Knöpfe geben beim Drücken kurz nach.
   :where() = Spezifität 0, damit Seiten mit eigener transform-Regel gewinnen. */
:where(button,.btn,.vt-btn,[role=button],input[type=button],input[type=submit],input[type=reset],a.vt-widget,button.vt-widget):where(:not([role=switch],.vt-row,.vt-seg>*,:disabled,[aria-disabled=true])){transition:transform .14s var(--vt-ease),background-color .18s,border-color .18s,box-shadow .18s,color .18s,opacity .18s}
:where(button,.btn,.vt-btn,[role=button],input[type=button],input[type=submit],input[type=reset],a.vt-widget,button.vt-widget):where(:not([role=switch],.vt-row,.vt-seg>*,:disabled,[aria-disabled=true])):where(:active){transform:scale(.97)}

/* ---------- 2. Seitenkopf ---------- */
.vt-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.vt-head>div:first-child{flex:1 1 320px;min-width:0}
.vt-head h1{font-size:32px;font-weight:700;letter-spacing:-.022em;line-height:1.12;margin:0 0 4px;color:var(--vt-ink)}
.vt-head .vt-sub{font-size:15px;color:var(--vt-ink-soft);max-width:66ch;line-height:1.45;margin:0}
.vt-head .vt-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
@media(max-width:600px){.vt-head h1{font-size:28px}}

/* ---------- 3. Karte ---------- */
.vt-card{background:var(--vt-surface);border:0;border-radius:var(--vt-radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--vt-shadow)}
.vt-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.vt-card-h h2,.vt-card-h h3{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0;color:var(--vt-ink)}
.vt-card-h .vt-sub{font-size:13px;color:var(--vt-ink-soft);margin:2px 0 0}
@media(max-width:600px){.vt-card{padding:16px}}

/* ---------- 4. Knöpfe ----------
   Primär: flache Gold-Fläche (#8C6B2F) mit weißer Schrift, Radius 12.
   Sekundär: getönte neutrale Fläche. Tint: Gold-getönt. Ghost: nur Text. */
.vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:44px;padding:0 20px;border-radius:12px;border:0;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:var(--vt-tint);color:#fff;box-shadow:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--vt-ease),background-color .18s,color .18s,opacity .18s}
.vt-btn:hover{background:var(--vt-tint-press);color:#fff;filter:none;transform:none}
.vt-btn:active{transform:scale(.97)}
.vt-btn:disabled,.vt-btn[aria-disabled=true]{opacity:.45;cursor:wait;transform:none}
.vt-btn--sec{background:var(--vt-fill);color:var(--vt-ink)}
.vt-btn--sec:hover{background:var(--vt-fill-2);color:var(--vt-ink)}
.vt-btn--tint{background:var(--vt-gold-glow);color:var(--vt-gold-ink)}
.vt-btn--tint:hover{background:rgba(173,136,67,.22);color:var(--vt-gold-ink)}
.vt-btn--ghost{background:none;color:var(--vt-gold-ink);padding-left:10px;padding-right:10px}
.vt-btn--ghost:hover{background:var(--vt-gold-glow);color:var(--vt-gold-ink)}
.vt-btn--danger{background:rgba(156,53,32,.10);color:var(--vt-red)}
.vt-btn--danger:hover{background:rgba(156,53,32,.16);color:var(--vt-red)}
.vt-btn--sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:10px}
.vt-btn--pill{border-radius:999px}
.vt-btn--block{display:flex;width:100%}
.vt-btn svg{width:18px;height:18px;flex:none}

/* ---------- 5. Status-Pillen ---------- */
.vt-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;min-height:22px;box-sizing:border-box;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0;line-height:1.4;white-space:nowrap;background:var(--vt-fill);color:var(--vt-ink-soft)}
.vt-pill--ok{background:var(--vt-green-bg);color:var(--vt-green)}
.vt-pill--wait{background:var(--vt-amber-bg);color:var(--vt-amber)}
.vt-pill--err{background:var(--vt-red-bg);color:var(--vt-red)}
.vt-pill--gold{background:var(--vt-gold-glow);color:var(--vt-gold-ink)}
.vt-pill--tint{background:var(--vt-tint);color:#fff}

/* ---------- 6. Hinweis-Kästen ---------- */
.vt-note{border-radius:var(--vt-radius-sm);padding:12px 14px;font-size:14px;line-height:1.5;border:1px solid transparent;background:rgba(118,118,128,.08);color:var(--vt-ink-soft)}
.vt-note--ok{background:var(--vt-green-bg);color:var(--vt-green)}
.vt-note--wait{background:var(--vt-amber-bg);color:var(--vt-amber)}
.vt-note--err{background:var(--vt-red-bg);color:var(--vt-red)}

/* ---------- 7. Tabelle ---------- */
.vt-table{width:100%;border-collapse:collapse;font-size:14px}
.vt-table th{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--vt-ink-soft);text-align:left;padding:8px 12px;border-bottom:1px solid var(--vt-sep)}
.vt-table td{padding:12px;border-bottom:1px solid var(--vt-sep);vertical-align:middle}
.vt-table tr:last-child td{border-bottom:none}
.vt-table tbody tr{transition:background-color .15s}
.vt-table tbody tr:hover{background:rgba(118,118,128,.05)}
.vt-table td.num,.vt-table th.num{text-align:right;font-variant-numeric:tabular-nums}
/* Handy: jede Zeile wird eine Karte, Spaltenname kommt aus data-label */
@media(max-width:640px){
  table.vt-stack{min-width:0}
  table.vt-stack thead{display:none}
  table.vt-stack,table.vt-stack tbody,table.vt-stack tr,table.vt-stack td{display:block;width:100%}
  table.vt-stack tr{border:0;border-radius:var(--vt-radius-sm);padding:6px 14px;margin-bottom:10px;background:#fff;box-shadow:var(--vt-shadow)}
  table.vt-stack td{border:none;padding:7px 0;display:flex;gap:10px;justify-content:space-between;text-align:right}
  table.vt-stack td+td{border-top:1px solid var(--vt-sep)}
  table.vt-stack td::before{content:attr(data-label);color:var(--vt-ink-soft);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;text-align:left}
  table.vt-stack td.num{text-align:right}
}

/* ---------- 8. Leerer Zustand (Wegweiser statt „nichts da") ---------- */
.vt-empty{text-align:center;padding:40px 24px;background:var(--vt-surface);border:0;border-radius:var(--vt-radius);box-shadow:var(--vt-shadow);color:var(--vt-ink-soft)}
.vt-empty .vt-ic{font-size:40px;line-height:1;margin-bottom:12px}
.vt-empty h3{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--vt-ink);margin:0 0 6px}
.vt-empty p{font-size:15px;line-height:1.5;max-width:46ch;margin:0 auto}
.vt-empty .vt-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------- 9. Formularfelder ---------- */
.vt-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--vt-ink-soft)}
.vt-field input,.vt-field select,.vt-field textarea,.vt-input{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid rgba(42,32,23,.18);border-radius:var(--vt-radius-xs);
  font:inherit;font-size:15px;font-weight:400;letter-spacing:-.005em;background:#fff;color:var(--vt-ink);box-shadow:inset 0 1px 1px rgba(42,32,23,.03);transition:border-color .15s,box-shadow .15s,background-color .15s}
.vt-field textarea,textarea.vt-input{min-height:88px;line-height:1.45}
.vt-field select,select.vt-input{-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='m2 6 3-3 3 3M2 10l3 3 3-3' fill='none' stroke='%236F6151' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/10px 16px}
.vt-field input:focus,.vt-field select:focus,.vt-field textarea:focus,.vt-input:focus{outline:none;border-color:var(--vt-gold-deep);box-shadow:0 0 0 4px rgba(140,107,47,.18)}
.vt-input--filled{background-color:var(--vt-fill);border-color:transparent;box-shadow:none}
.vt-grid{display:grid;gap:12px}
.vt-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.vt-grid--2,.vt-grid--3{grid-template-columns:1fr}}

/* ---------- 9b. Ladezustand: Skelett statt „Lädt …" (VT.ui.skeleton in vt-core.js) ---------- */
.vt-skel{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.vt-skel>i{display:block;height:58px;border-radius:var(--vt-radius-sm);background:linear-gradient(90deg,#EEE7DA 25%,#F7F2E8 37%,#EEE7DA 63%);background-size:400% 100%;animation:vtsk 1.3s infinite}
.vt-skel>i.s{height:16px;width:60%;border-radius:6px}
.vt-skel>i.m{height:16px;width:85%;border-radius:6px}
@keyframes vtsk{to{background-position:-135% 0}}

/* ---------- 10. Toast (VT.ui.toast in vt-core.js) – Glas-Hinweis wie iOS ---------- */
#vt-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px) scale(.98);background:rgba(36,27,18,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  color:#fff;font-size:15px;font-weight:500;letter-spacing:-.01em;padding:12px 18px;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);
  z-index:9800;max-width:min(92vw,520px);opacity:0;pointer-events:none;transition:opacity .2s,transform .35s var(--vt-ease);line-height:1.4}
#vt-toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#vt-toast.ok{background:rgba(29,122,79,.96)}
#vt-toast.err{background:rgba(156,53,32,.96)}
@media(max-width:880px){#vt-toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* ---------- 10b. Segmented Control (.vt-seg) ----------
   Markup:  <div class="vt-seg" role="tablist" aria-label="…">
              <button type="button" role="tab" aria-selected="true">Zimmer</button>
              <button type="button" role="tab" aria-selected="false">Anzeige &amp; Link</button>
            </div>
   Ausgewählt ist ein Segment mit aria-selected/aria-pressed/aria-checked="true",
   aria-current, Klasse .on/.active/.is-active/.sel oder einem :checked-Radio
   im <label>. Ohne JS: weißes Segment mit Schatten (fertig und korrekt).
   Mit vt-core.js (VT.ui.seg, startet automatisch): ein Indikator gleitet. */
.vt-seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;box-sizing:border-box;max-width:100%;
  padding:2px;border-radius:10px;background:var(--vt-track);isolation:isolate;vertical-align:middle;-webkit-user-select:none;user-select:none}
.vt-seg--block{display:grid;width:100%}
.vt-seg>:not(.vt-seg__ind){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-width:0;min-height:40px;padding:0 14px;margin:0;
  border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--vt-ink);font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.2;text-align:center;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,box-shadow .2s,color .2s}
.vt-seg>:not(.vt-seg__ind):not([aria-selected=true],[aria-pressed=true],[aria-checked=true],[aria-current=page],[aria-current=true],[aria-current=step],.on,.active,.is-active,.sel):active{background:rgba(118,118,128,.12)}
/* feine Trennstriche zwischen nicht gewählten Segmenten (wie iOS) */
.vt-seg>:not(.vt-seg__ind)+:not(.vt-seg__ind)::before{content:"";position:absolute;left:0;top:28%;bottom:28%;width:1px;background:rgba(60,60,67,.16);transition:opacity .2s}
.vt-seg>:is([aria-selected=true],[aria-pressed=true],[aria-checked=true],[aria-current=page],[aria-current=true],[aria-current=step],.on,.active,.is-active,.sel,:has(input:checked))::before,
.vt-seg>:is([aria-selected=true],[aria-pressed=true],[aria-checked=true],[aria-current=page],[aria-current=true],[aria-current=step],.on,.active,.is-active,.sel,:has(input:checked))+*::before{opacity:0}
.vt-seg>:is([aria-selected=true],[aria-pressed=true],[aria-checked=true],[aria-current=page],[aria-current=true],[aria-current=step],.on,.active,.is-active,.sel,:has(input:checked)){
  background:#fff;box-shadow:var(--vt-shadow-thumb);font-weight:600}
/* Mit Helfer: der Indikator trägt Weiß + Schatten und gleitet */
.vt-seg[data-vt-seg=an]>:is([aria-selected=true],[aria-pressed=true],[aria-checked=true],[aria-current=page],[aria-current=true],[aria-current=step],.on,.active,.is-active,.sel,:has(input:checked)){background:transparent;box-shadow:none}
.vt-seg__ind{position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:8px;background:#fff;box-shadow:var(--vt-shadow-thumb);pointer-events:none;
  transition:transform .32s var(--vt-ease),width .32s var(--vt-ease),height .32s var(--vt-ease),opacity .2s}
.vt-seg__ind--still{transition:none}
.vt-seg input[type=radio],.vt-seg input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.vt-seg>label:has(input:focus-visible){outline:3px solid var(--vt-focus);outline-offset:1px}
.vt-seg__badge{display:inline-block;min-width:18px;padding:0 6px;box-sizing:border-box;border-radius:999px;font-size:12px;font-weight:600;line-height:18px;text-align:center;background:rgba(118,118,128,.18);color:var(--vt-ink)}
.vt-seg__badge--alert{background:var(--vt-red);color:#fff}
.vt-seg--lg{border-radius:12px;padding:3px}
.vt-seg--lg>:not(.vt-seg__ind),.vt-seg--lg>.vt-seg__ind{border-radius:9px}
.vt-seg--lg>:not(.vt-seg__ind){min-height:40px;font-size:15px}
/* Touch: Segmente als Trefferfläche mind. 44px hoch (Kanon), mit Maus bleiben sie 40px */
@media(pointer:coarse){.vt-seg>:not(.vt-seg__ind){min-height:44px}}
/* Handy: Beschriftung wie iOS kleiner, damit drei Segmente nebeneinander passen */
@media(max-width:600px){.vt-seg>:not(.vt-seg__ind),.vt-seg--lg>:not(.vt-seg__ind){font-size:13px;padding:0 8px;gap:4px}.vt-seg__badge{min-width:16px;padding:0 5px;font-size:11px;line-height:16px}}

/* ---------- 10c. iOS-Schalter (51×31, an = Gold-tief) ----------
   <input type="checkbox" role="switch" aria-label="…">   oder
   <button type="button" role="switch" aria-checked="false" aria-label="…"></button>
   (Button leer lassen – der Knopf ist ::before; den Zustand setzt die Seite.) */
.vt-switch,input[type=checkbox][role=switch],button[role=switch]{-webkit-appearance:none;appearance:none;position:relative;display:inline-block;flex:none;box-sizing:border-box;
  width:51px;height:31px;min-height:31px;margin:0;padding:0;border:0;border-radius:999px;background:var(--vt-switch-off);box-shadow:inset 0 0 0 1px rgba(42,32,23,.05);
  color:transparent;font-size:0;vertical-align:middle;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s var(--vt-ease)}
.vt-switch::before,input[type=checkbox][role=switch]::before,button[role=switch]::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .3s var(--vt-ease),width .2s var(--vt-ease)}
/* größere Trefferfläche (44px), ohne das Layout zu verschieben */
.vt-switch::after,input[type=checkbox][role=switch]::after,button[role=switch]::after{content:"";position:absolute;inset:-7px -4px}
.vt-switch:checked,.vt-switch[aria-checked=true],input[type=checkbox][role=switch]:checked,button[role=switch][aria-checked=true]{background:var(--vt-tint)}
.vt-switch:checked::before,.vt-switch[aria-checked=true]::before,input[type=checkbox][role=switch]:checked::before,button[role=switch][aria-checked=true]::before{transform:translateX(20px)}
.vt-switch:active:not(:disabled)::before,input[type=checkbox][role=switch]:active:not(:disabled)::before,button[role=switch]:active:not(:disabled)::before{width:31px}
.vt-switch:checked:active:not(:disabled)::before,.vt-switch[aria-checked=true]:active:not(:disabled)::before,
input[type=checkbox][role=switch]:checked:active:not(:disabled)::before,button[role=switch][aria-checked=true]:active:not(:disabled)::before{transform:translateX(16px)}
.vt-switch:disabled,input[type=checkbox][role=switch]:disabled,button[role=switch]:disabled{opacity:.45;cursor:not-allowed}
.vt-switch:focus-visible,input[type=checkbox][role=switch]:focus-visible,button[role=switch]:focus-visible{outline:3px solid var(--vt-focus);outline-offset:2px}
@media(forced-colors:active){.vt-switch,input[type=checkbox][role=switch],button[role=switch]{border:1px solid CanvasText}}

/* ---------- 10d. Inset-Grouped-Liste (.vt-group / .vt-list / .vt-row) ----------
   <section class="vt-group">
     <h3 class="vt-group__head">Zimmer <button class="vt-btn vt-btn--ghost">Hinzufügen</button></h3>
     <div class="vt-list">
       <a class="vt-row vt-row--nav" href="…"><span class="vt-row__main"><span class="vt-row__title">Zimmer 1</span>
          <span class="vt-row__sub">frei</span></span><span class="vt-row__value">700 €</span></a>
       <label class="vt-row"><span class="vt-row__main">Bewirtschaftung</span><input type="checkbox" role="switch"></label>
     </div>
     <p class="vt-group__foot">Erklärtext unter der Gruppe.</p>
   </section>
   Haarlinien sind eingerückt (beginnen beim Text, nicht beim Symbol). */
.vt-group{margin:0 0 26px}
.vt-group__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 7px;padding:0 16px;font-size:13px;font-weight:400;line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:var(--vt-ink-soft)}
.vt-group__head>.vt-btn{text-transform:none;letter-spacing:-.01em;margin:-10px -10px -10px 0}
.vt-group__foot{margin:7px 0 0;padding:0 16px;font-size:13px;line-height:1.45;color:var(--vt-ink-soft)}
.vt-list{margin:0;padding:0;list-style:none;background:var(--vt-surface);border-radius:var(--vt-radius-sm);overflow:hidden;box-shadow:0 1px 2px rgba(42,32,23,.05)}
.vt-row{--vt-row-inset:16px;position:relative;display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;padding:8px 16px;margin:0;border:0;border-radius:0;
  background:transparent;color:var(--vt-ink);font:inherit;font-size:15px;font-weight:400;letter-spacing:-.01em;line-height:1.35;text-align:left;text-decoration:none}
.vt-row+.vt-row::before,.vt-list>li+li>.vt-row::before{content:"";position:absolute;top:0;right:0;left:var(--vt-row-inset);height:1px;background:var(--vt-sep);pointer-events:none}
.vt-row:has(>.vt-row__icon),.vt-list--icons>.vt-row{--vt-row-inset:58px}
.vt-row:has(>.vt-row__dot),.vt-list--dots>.vt-row{--vt-row-inset:38px}
.vt-row:has(>.vt-row__avatar){--vt-row-inset:68px;min-height:64px}
a.vt-row,button.vt-row,label.vt-row,.vt-row--nav{cursor:pointer;transition:background-color .15s;-webkit-tap-highlight-color:transparent}
a.vt-row:hover,button.vt-row:hover,label.vt-row:hover,.vt-row--nav:hover{background:rgba(118,118,128,.06);color:var(--vt-ink)}
a.vt-row:active,button.vt-row:active,label.vt-row:active,.vt-row--nav:active{background:rgba(118,118,128,.14)}
.vt-row[aria-current],.vt-row.is-active{background:var(--vt-gold-glow)}
.vt-row:focus-visible{outline:3px solid var(--vt-focus);outline-offset:-3px}
.vt-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.vt-row__title{color:var(--vt-ink);overflow:hidden;text-overflow:ellipsis}
.vt-row__sub{font-size:13px;color:var(--vt-ink-soft);line-height:1.35}
.vt-row__value{flex:none;max-width:55%;color:var(--vt-ink-soft);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-row__icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--vt-tint);color:#fff}
.vt-row__icon svg{width:18px;height:18px}
.vt-row__icon--grey{background:#8E8679}.vt-row__icon--green{background:var(--vt-green)}.vt-row__icon--red{background:var(--vt-red)}.vt-row__icon--amber{background:#B07D18}
.vt-row__dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--vt-ink-faint)}
.vt-row__dot--ok{background:#34A36B}.vt-row__dot--wait{background:#E39A2B}.vt-row__dot--err{background:#D0533A}
/* Monogramm wie in Kontakte: neutrales Grau (kein Gold – Gold heißt Handlung); weiße
   Initialen haben oben 4.9:1 und unten 6.9:1 (vorher #A39684 nur 2.9:1) */
.vt-row__avatar{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#7D6F5D,#655849);color:#fff;font-size:15px;font-weight:600}
.vt-row--nav::after,.vt-row__chev{content:"";flex:none;width:8px;height:13px;margin-left:2px;background:rgba(60,48,36,.32);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='m1.5 1.5 5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='m1.5 1.5 5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.vt-row--action{color:var(--vt-gold-ink)}
.vt-row--danger{color:var(--vt-red)}
.vt-row--action:hover,.vt-row--danger:hover{color:inherit}
.vt-row .vt-input{min-height:36px;border-color:transparent;box-shadow:none;text-align:right;padding:6px 0;background:transparent}
.vt-row .vt-input:focus{box-shadow:none;border-color:transparent}
@media(max-width:600px){.vt-row{font-size:16px;min-height:50px}.vt-group__head{font-size:12.5px}}

/* ---------- 10e. Kennzahl-Kacheln (Widgets) ----------
   <div class="vt-widgets">
     <div class="vt-widget vt-widget--gold"><div class="vt-widget__label">🏠 Zimmer frei</div>
       <div class="vt-widget__value">3<small> von 4</small></div></div>
   </div>  (als <a class="vt-widget" href> klickbar, dann mit Druck-Feedback) */
.vt-widgets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:0 0 22px}
.vt-widget{display:flex;flex-direction:column;gap:8px;box-sizing:border-box;min-width:0;padding:16px 18px;background:var(--vt-surface);border:0;border-radius:var(--vt-radius-lg);box-shadow:var(--vt-shadow);color:var(--vt-ink);text-decoration:none;text-align:left;font:inherit}
.vt-widget__label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--vt-ink-soft)}
.vt-widget__label svg{width:15px;height:15px;flex:none}
.vt-widget__value{font-size:32px;font-weight:700;line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--vt-ink)}
.vt-widget__value small,.vt-widget__unit{font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--vt-ink-soft)}
.vt-widget__value--text{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.vt-widget__foot{font-size:13px;line-height:1.4;color:var(--vt-ink-soft)}
.vt-widget--gold .vt-widget__label{color:var(--vt-gold-ink)}
.vt-widget--ok .vt-widget__label{color:var(--vt-green)}
.vt-widget--wait .vt-widget__label{color:var(--vt-amber)}
.vt-widget--err .vt-widget__label{color:var(--vt-red)}
a.vt-widget,button.vt-widget{cursor:pointer}
a.vt-widget:hover,button.vt-widget:hover{box-shadow:0 1px 2px rgba(42,32,23,.06),0 6px 18px rgba(42,32,23,.08);color:var(--vt-ink)}
@media(max-width:600px){.vt-widgets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.vt-widget{padding:14px}.vt-widget__value{font-size:30px}.vt-widget__value.vt-widget__value--text{font-size:19px}}

/* ---------- 10f. Glas-Leiste (.vt-bar) – halbtransparent wie Safari/Finder ----------
   Für Werkzeugleisten, die beim Scrollen oben kleben sollen. */
.vt-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:rgba(252,250,245,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--vt-sep)}
@media(max-width:880px){.vt-bar{top:56px}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.vt-bar{background:rgba(252,250,245,.97)}}

/* ---------- 11. Sanfte Normalisierung alter Seiten ----------
   Greift auf Klassen, die es historisch auf vielen Seiten gibt. Nur Form,
   Größe und Typografie — keine Farben von Knöpfen (die früheren Gold-Verläufe
   mit weißer Schrift sind auf den Seiten selbst flach Gold-tief, 27.10.2026). */
/* Large Title: die Seitenüberschrift (<main><h1> als erstes Kind) so groß wie auf
   den umgebauten Seiten (Objekte, Bewerber, Mieter): 32px fett, eng; am Handy 28px.
   Seiten mit eigenem Kopf (.vt-head, body>header, .topbar) regeln das selbst. */
main>h1:first-child{font-size:32px;font-weight:700;letter-spacing:-.022em;line-height:1.15;color:var(--vt-ink)}
main>h1:first-child+.sub{font-size:15px;line-height:1.45;color:var(--vt-ink-soft)}
@media(max-width:600px){main>h1:first-child{font-size:28px}}
main .card>h2:first-child,main .card>h3:first-child{font-size:17px;font-weight:600;text-transform:none;letter-spacing:-.015em;color:var(--vt-ink);margin:0 0 12px}
main .empty{background:#fff;border:0;border-radius:var(--vt-radius);box-shadow:var(--vt-shadow);color:var(--vt-ink-soft);padding:36px 22px;text-align:center;font-size:15px}
main .empty h3{font-size:19px;font-weight:600;letter-spacing:-.015em;color:var(--vt-ink);margin-bottom:6px}
main .empty .icon{font-size:40px;margin-bottom:12px}
main .btn,main button.btn,main a.btn{border-radius:12px;font-weight:600;font-family:inherit;letter-spacing:-.01em;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
main .btn.mini,main .btn.small,main .small{min-height:32px;border-radius:10px}
/* Apple hebt Knöpfe nicht an – stattdessen geben sie beim Drücken nach */
main .btn:hover{transform:none}
main .btn:active:not(:disabled){transform:scale(.97)}
main table th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--vt-ink-soft);font-weight:600}
main .pill,main .status-pill,main .bst{border-radius:999px;font-weight:600;font-size:12px;letter-spacing:0;text-transform:none}
/* Handy und Touch: alles Anklickbare fingertauglich. „main button.btn" steht mit
   drin, weil die Regel oben (0,1,2) sonst jedes <button class="btn"> auf 40px hält. */
@media(max-width:600px),(pointer:coarse){
  main button,main .btn,main button.btn,main a.btn,main select,main input[type=file]{min-height:44px}
  main .btn.mini,main .btn.small,main .small,main .row-actions button{min-height:40px}
  main .topbar,main .toolbar{gap:8px}
}

/* ---------- 12. Weniger Bewegung, wenn das Gerät es wünscht ---------- */
@media(prefers-reduced-motion:reduce){
  .vt-skel>i{animation:none}
  .vt-btn,.vt-seg>*,.vt-seg__ind,.vt-switch,.vt-switch::before,input[type=checkbox][role=switch],input[type=checkbox][role=switch]::before,
  button[role=switch],button[role=switch]::before,.vt-row,#vt-toast,.vt-widget{transition:none!important}
  :where(button,.btn,.vt-btn,[role=button],input[type=button],input[type=submit],a.vt-widget,button.vt-widget):active,
  main .btn:active:not(:disabled),.vt-btn:active{transform:none!important}
}