/* =========================================================================
   Vergissmeinnicht – Komponenten (baut auf design-tokens.css auf)
   ========================================================================= */

/* ---------- Basis & Typografie ---------- */
body{
  background-color:var(--vm-bg);
  color:var(--vm-ink);
  font-family:var(--vm-sans);
  min-height:100vh;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* verhindert horizontalen Scroll durch das fixe Offcanvas-Panel */
}
h1,h2,h3,h4{ text-wrap:balance; color:var(--vm-ink); }
h1,.h1{ font-weight:700; letter-spacing:-.015em; }
h2,.h2,h3,.h3{ font-weight:700; letter-spacing:-.01em; }
.text-muted{ color:var(--vm-ink-muted) !important; }
a{ text-underline-offset:2px; }
:focus-visible{ outline:3px solid color-mix(in srgb,var(--vm-primary) 45%,white); outline-offset:2px; }
::selection{ background:var(--vm-primary-050); }
.tnum,.vm-num{ font-variant-numeric:tabular-nums; }
main.container,.container,.container-fluid{ max-width:var(--vm-wrap); }

/* ---------- Karten ---------- */
.card{
  background:var(--vm-surface);
  border:1px solid var(--vm-border);
  border-radius:var(--vm-r-lg);
  box-shadow:var(--vm-sh-sm);
}
.card .card-body{ padding:1.15rem 1.25rem; }

/* ---------- Formulare ---------- */
.form-control,.form-select{
  min-height:var(--vm-control-h);
  font-size:16px;                 /* verhindert iOS-Zoom */
  border-color:var(--vm-border-strong);
  border-radius:var(--vm-r);
  color:var(--vm-ink);
}
textarea.form-control{ min-height:auto; }
.form-control::placeholder{ color:var(--vm-ink-subtle); }
.form-label{ font-weight:600; font-size:.9rem; margin-bottom:.35rem; }
.form-text{ color:var(--vm-ink-muted); }
.form-control:focus,.form-select:focus{
  border-color:var(--vm-primary);
  box-shadow:0 0 0 .2rem color-mix(in srgb,var(--vm-primary) 22%,transparent);
}
.was-validated .form-control:invalid,.form-control.is-invalid{ border-color:var(--vm-danger); }
.vm-required{ color:var(--vm-danger); font-weight:700; }
.vm-formnote{
  font-size:.85rem; color:var(--vm-ink-muted);
  background:var(--vm-surface-2); border:1px solid var(--vm-border);
  border-radius:var(--vm-r); padding:.55rem .8rem; margin-bottom:1rem;
}

/* ---------- Buttons ---------- */
.btn{ border-radius:var(--vm-r); font-weight:600; }
.btn-lg{ min-height:var(--vm-control-h); }
.btn-vm{
  background-color:var(--vm-primary); border-color:var(--vm-primary); color:#fff;
}
.btn-vm:hover,.btn-vm:focus{ background-color:var(--vm-primary-strong); border-color:var(--vm-primary-strong); color:#fff; }
.btn-outline-secondary{
  color:var(--vm-primary-strong); border-color:var(--vm-border-strong); background:var(--vm-surface);
}
.btn-outline-secondary:hover{ background:var(--vm-primary-050); border-color:var(--vm-primary); color:var(--vm-primary-strong); }
.btn-outline-primary{ color:var(--vm-primary-strong); border-color:var(--vm-primary); }
.btn-outline-primary:hover{ background:var(--vm-primary); border-color:var(--vm-primary); color:#fff; }
.btn-success{ --bs-btn-bg:var(--vm-success); --bs-btn-border-color:var(--vm-success); --bs-btn-hover-bg:#276b2a; --bs-btn-hover-border-color:#276b2a; }
.btn-danger{ --bs-btn-bg:var(--vm-danger); --bs-btn-border-color:var(--vm-danger); --bs-btn-hover-bg:#a52626; --bs-btn-hover-border-color:#a52626; }
.text-vm{ color:var(--vm-primary-strong) !important; }
.bg-vm-soft{ background-color:var(--vm-primary-050); }

/* ---------- Kopfleiste / Navigation ---------- */
.navbar-vm{
  background-color:var(--vm-primary);
  box-shadow:var(--vm-sh-sm);
  padding-block:.4rem;
}
.navbar-logo-box{
  display:inline-flex; align-items:center; background:#fff;
  border-radius:8px; padding:5px 11px;
}
.navbar-logo{ height:28px; width:auto; display:block; }
.navbar-module{
  color:#fff; font-weight:600; opacity:.95; font-size:.95rem;
  padding-inline-start:.85rem; margin-inline-start:.6rem;
  border-inline-start:1px solid rgba(255,255,255,.28);
}
.navbar-vm .navbar-brand,.navbar-vm .nav-link{ color:#fff !important; }
.navbar-vm .nav-link{ border-radius:var(--vm-r); padding-inline:.7rem; font-weight:500; opacity:.9; }
.navbar-vm .nav-link:hover{ opacity:1; background:rgba(255,255,255,.12); text-decoration:none; }
.navbar-vm .nav-link.active{ opacity:1; background:rgba(255,255,255,.18); }
.navbar-vm .dropdown-toggle{ display:inline-flex; align-items:center; gap:.4rem; }
.navbar-vm .navbar-toggler{ border-color:rgba(255,255,255,.4); }
.navbar-icon{ width:18px; height:18px; vertical-align:-3px; }
/* Apps-Schaltfläche direkt neben dem Logo (nur Icon) */
.navbar-apps-link{ display:inline-flex; align-items:center; gap:.4rem; padding-inline:.6rem; }
.navbar-apps-text{ font-weight:600; }
.navbar-apps-ico{ width:23px; height:23px; vertical-align:middle; }
/* Flaggen im Sprachmenü */
.vm-flag{
  display:inline-block; vertical-align:middle; border-radius:2.5px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:0 0 auto;
}
.navbar-vm .dropdown-toggle .vm-flag{ box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.dropdown-menu{ border-color:var(--vm-border); border-radius:var(--vm-r); box-shadow:var(--vm-sh); }
.dropdown-item.active,.dropdown-item:active{ background:var(--vm-primary); }

/* ---------- Seitenkopf ---------- */
.vm-page-header{
  display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.vm-page-header .vm-ph-crumb{ font-size:.78rem; color:var(--vm-ink-subtle); margin-bottom:.15rem; }
.vm-page-header h1{ font-size:1.55rem; margin:0; }
.vm-page-header .vm-ph-desc{ margin:.25rem 0 0; color:var(--vm-ink-muted); font-size:.92rem; }
.vm-page-header .vm-ph-actions{ margin-inline-start:auto; display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---------- Kennzahlenkarten ---------- */
.vm-stat{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.15rem; }
.vm-stat .vm-stat-ico{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--vm-primary-050); color:var(--vm-primary-strong); margin-bottom:.15rem;
}
.vm-stat .vm-stat-ico svg{ width:19px; height:19px; }
.vm-stat .vm-stat-num{ font-size:2rem; font-weight:700; line-height:1; color:var(--vm-ink); font-variant-numeric:tabular-nums; }
.vm-stat .vm-stat-lbl{ font-size:.86rem; color:var(--vm-ink-muted); }
a.vm-stat{ text-decoration:none; color:inherit; transition:transform .12s, box-shadow .12s, border-color .12s; }
a.vm-stat:hover{ transform:translateY(-2px); box-shadow:var(--vm-sh); border-color:var(--vm-border-strong); }
.vm-stat.is-alert .vm-stat-ico{ background:var(--vm-danger-bg); color:var(--vm-danger-ink); }
/* Alt-Klassen weiter unterstützt */
.stat-card{ border-inline-start:4px solid var(--vm-primary); }
.stat-number{ font-size:2rem; font-weight:700; color:var(--vm-primary-strong); font-variant-numeric:tabular-nums; }

/* ---------- Statusanzeigen ---------- */
.vm-badge{
  display:inline-flex; align-items:center; gap:.4rem; height:26px; padding:0 .65rem;
  border-radius:var(--vm-pill); font-size:.78rem; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
}
.vm-badge svg{ width:13px; height:13px; }
.vm-badge .vm-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.vm-badge.is-neutral{ color:var(--vm-neutral-ink); background:var(--vm-neutral-bg); border-color:#dde2d8; }
.vm-badge.is-info{ color:var(--vm-info-ink); background:var(--vm-info-bg); border-color:#cfe2df; }
.vm-badge.is-progress{ color:var(--vm-warning-ink); background:var(--vm-warning-bg); border-color:#ecdcb4; }
.vm-badge.is-danger{ color:var(--vm-danger-ink); background:var(--vm-danger-bg); border-color:#eecccc; }
.vm-badge.is-success{ color:var(--vm-success-ink); background:var(--vm-success-bg); border-color:#cfe6d1; }
.vm-badge.is-warning{ color:var(--vm-warning-ink); background:#fbf1cf; border-color:#e6cf8a; }

/* ---------- App-Übersicht (Kacheln) ---------- */
.vm-app{
  display:flex; flex-direction:column; gap:.75rem; padding:1.4rem;
  text-decoration:none; color:inherit; height:100%;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.vm-app:hover{ transform:translateY(-3px); box-shadow:var(--vm-sh); border-color:var(--vm-border-strong); }
.vm-app .vm-app-top{ display:flex; align-items:center; gap:.75rem; }
.vm-app .vm-app-mark{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--vm-primary); color:#fff; flex:0 0 auto;
}
.vm-app .vm-app-mark svg{ width:24px; height:24px; }
/* Modul-Icons (PNG) bringen ihre eigene gruene Kachel samt Rundung mit –
   deshalb hier kein Hintergrund, sonst blitzt Gruen in den Ecken durch. */
.vm-app .vm-app-mark.is-image{ background:none; border-radius:0; }
.vm-app .vm-app-mark.is-image img{ width:46px; height:46px; display:block; }
.vm-app h2{ font-size:1.05rem; margin:0; }
.vm-app p{ margin:0; color:var(--vm-ink-muted); font-size:.9rem; flex:1; }
.vm-app .vm-app-go{ display:inline-flex; align-items:center; gap:.35rem; color:var(--vm-primary-strong); font-weight:600; font-size:.9rem; }
.vm-app .vm-app-go svg{ width:16px; height:16px; }
/* Alt-Klasse */
.app-tile{ transition:transform .12s, box-shadow .12s; }
.app-tile:hover{ transform:translateY(-3px); box-shadow:var(--vm-sh) !important; }

/* ---------- Leeransicht ---------- */
.vm-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:2.75rem 1.5rem; }
.vm-empty .vm-empty-ico{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--vm-surface-2); color:var(--vm-ink-subtle); }
.vm-empty .vm-empty-ico svg{ width:28px; height:28px; }
.vm-empty h3{ font-size:1.05rem; margin:0; }
.vm-empty p{ margin:0; color:var(--vm-ink-muted); max-width:42ch; font-size:.92rem; }

/* ---------- Upload-Dropzone ---------- */
.vm-dropzone{
  border:2px dashed var(--vm-border-strong); border-radius:var(--vm-r-lg);
  background:var(--vm-surface-2); padding:1.9rem 1.25rem; text-align:center;
}
.vm-dropzone .vm-dz-ico{
  width:56px; height:56px; border-radius:16px; display:inline-grid; place-items:center;
  background:var(--vm-primary-050); color:var(--vm-primary-strong); margin-bottom:.55rem;
}
.vm-dropzone .vm-dz-ico svg{ width:28px; height:28px; }
.vm-dropzone h2{ font-size:1.05rem; margin:0 0 .2rem; }
.vm-dropzone .vm-dz-hint{ color:var(--vm-ink-muted); font-size:.85rem; margin-bottom:1rem; }
.vm-dropzone .btn svg{ vertical-align:-3px; margin-inline-end:.35rem; }

/* ---------- Filter-Chips ---------- */
.vm-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.vm-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .3rem .25rem .65rem;
  border-radius:var(--vm-pill); background:var(--vm-primary-050); color:var(--vm-primary-strong);
  border:1px solid #d4e3d0; font-size:.82rem; font-weight:500;
}
.vm-chip button{
  border:0; background:transparent; color:inherit; cursor:pointer; line-height:1; padding:.1rem .25rem;
  display:inline-flex; opacity:.65; border-radius:var(--vm-pill);
}
.vm-chip button:hover{ opacity:1; background:rgba(0,0,0,.06); }

/* ---------- klickbare Tabellenzeile & mobile Belegkarte ---------- */
tr.vm-row-link{ cursor:pointer; }
tr.vm-row-link:hover{ background:var(--vm-surface-2); }
.vm-rcard{ display:grid; gap:.5rem; padding:.9rem 1rem; text-decoration:none; color:inherit; }
.vm-rcard + .vm-rcard{ border-top:1px solid var(--vm-border); }
.vm-rcard:hover{ background:var(--vm-surface-2); }
.vm-rcard .vm-rc-top{ display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; }
.vm-rcard .vm-rc-m{ font-weight:600; }
.vm-rcard .vm-rc-amt{ font-family:var(--vm-mono); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.vm-rcard .vm-rc-meta{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; color:var(--vm-ink-muted); font-size:.85rem; }
.vm-rcard .vm-rc-sub{ color:var(--vm-ink-subtle); font-size:.8rem; }

/* ---------- Tabellen ---------- */
.table{ --bs-table-border-color:var(--vm-border); }
.table > thead th{
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--vm-ink-subtle); font-weight:600; border-bottom:1px solid var(--vm-border);
}
.table td{ vertical-align:middle; }

/* ---------- Modul-Layout mit Seitenleiste ---------- */
.vm-layout{ display:flex; gap:1.5rem; align-items:flex-start; }
.vm-layout--full{ display:block; }
/* Module ohne Seitenleiste (Kalender): volle nutzbare Breite statt Bootstrap-Container.
   Deckel gegen absurd breite Monitore, Rand bleibt über die Bootstrap-Gutter erhalten. */
.container.vm-wide{ max-width:min(100%, 1760px); padding-inline:clamp(.75rem, 1.8vw, 2rem); }
.vm-sidebar{ flex:0 0 212px; position:sticky; top:76px; }
.vm-main{ flex:1 1 auto; min-width:0; }
.vm-nav{ display:flex; flex-direction:column; gap:2px; }
.vm-nav a{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem;
  border-radius:var(--vm-r); color:var(--vm-ink-muted); text-decoration:none;
  font-weight:500; font-size:.92rem;
}
.vm-nav a svg{ width:18px; height:18px; flex:0 0 auto; }
.vm-nav a:hover{ background:var(--vm-surface-2); color:var(--vm-ink); }
.vm-nav a.active{ background:var(--vm-primary-050); color:var(--vm-primary-strong); font-weight:600; }
.vm-nav .vm-nav-sep{ height:1px; background:var(--vm-border); margin:.4rem .2rem; }
@media (max-width:991.98px){
  /* Spalten-Layout: Inhalt auf Containerbreite strecken, sonst richtet sich
     .vm-main nach seiner Inhaltsbreite (align-items erbt sonst flex-start) und
     verursacht auf dem Smartphone horizontalen Überlauf. */
  .vm-layout{ flex-direction:column; gap:1rem; align-items:stretch; }
  /* min-width:0 ist hier wesentlich: Ohne das wächst der Flex-Container auf
     die Breite seiner Reiter, das ``overflow-x:auto`` läuft ins Leere und die
     ganze Seite scrollt seitwärts. Fällt erst auf, wenn ein Eintrag dazukommt. */
  .vm-sidebar{ position:static; flex:none; width:100%; min-width:0; }
  .vm-nav{ flex-direction:row; overflow-x:auto; min-width:0; gap:.4rem; padding-bottom:.25rem; -webkit-overflow-scrolling:touch; }
  .vm-nav a{ white-space:nowrap; border:1px solid var(--vm-border); }
  .vm-nav a.active{ border-color:var(--vm-primary); }
  .vm-nav .vm-nav-sep{ display:none; }
}

/* ---------- Meldungen ---------- */
.alert{ border-radius:var(--vm-r); border-width:1px; }
.alert-success{ --bs-alert-bg:var(--vm-success-bg); --bs-alert-border-color:#cfe6d1; --bs-alert-color:var(--vm-success-ink); }
.alert-info{ --bs-alert-bg:var(--vm-info-bg); --bs-alert-border-color:#cfe2df; --bs-alert-color:var(--vm-info-ink); }
.alert-warning{ --bs-alert-bg:var(--vm-warning-bg); --bs-alert-border-color:#ecdcb4; --bs-alert-color:var(--vm-warning-ink); }
.alert-danger{ --bs-alert-bg:var(--vm-danger-bg); --bs-alert-border-color:#eecccc; --bs-alert-color:var(--vm-danger-ink); }

/* ---------- Spendenbescheinigung ---------- */
.kind-card{
  cursor:pointer; border:2px solid var(--vm-border); border-radius:var(--vm-r);
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.kind-card:hover{ border-color:var(--vm-accent); }
.kind-card.selected{
  border-color:var(--vm-primary); background-color:var(--vm-primary-050);
  box-shadow:0 0 0 .2rem color-mix(in srgb,var(--vm-primary) 15%,transparent);
}
.kind-card input{ pointer-events:none; }
.kind-card .kind-ico{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--vm-primary-050); color:var(--vm-primary-strong); flex:0 0 auto; }
.kind-card .kind-ico svg{ width:22px; height:22px; }
.kind-card.selected .kind-ico{ background:var(--vm-primary); color:#fff; }
.donation-row{ background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r); padding:1rem; margin-bottom:.75rem; }

/* Zusammenfassung der Spendenbescheinigung */
.vm-summary{ background:var(--vm-primary-050); border:1px solid #d4e3d0; border-radius:var(--vm-r-lg); padding:1.15rem 1.25rem; }
.vm-summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; text-align:center; }
.vm-summary-num{ font-size:1.6rem; font-weight:700; color:var(--vm-primary-strong); font-variant-numeric:tabular-nums; line-height:1.1; }
.vm-summary-lbl{ font-size:.82rem; color:var(--vm-ink-muted); }

/* ---------- Login ---------- */
.login-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.login-card{ max-width:420px; width:100%; }
.login-logo{ max-width:230px; width:100%; height:auto; }

/* ---------- Status-Textfarben (Spenden, Alt) ---------- */
.status-draft{ color:var(--vm-ink-muted); }
.status-created{ color:var(--vm-info); }
.status-pdf_generated{ color:var(--vm-primary-strong); }
.status-cancelled{ color:var(--vm-danger); text-decoration:line-through; }

/* ---------- RTL: richtungsabhängige Feinheiten ---------- */
[dir="rtl"] .navbar-module{ border-inline-start:1px solid rgba(255,255,255,.28); }
[dir="rtl"] .vm-num,[dir="rtl"] .tnum{ direction:ltr; unicode-bidi:plaintext; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- Druck ---------- */
@media print{
  .navbar,.no-print{ display:none !important; }
  body{ background:#fff; }
}

/* ---------- Spender-Dankesrufe (thankyou_calls) ---------- */
.tc-callbox{ text-align:center; padding:1.25rem 1rem; border:1px solid var(--vm-border);
  border-radius:var(--vm-r-lg); background:var(--vm-surface-2); margin-bottom:1.25rem; }
.tc-phone{ font-family:var(--vm-mono); font-variant-numeric:tabular-nums; font-size:2rem;
  font-weight:700; color:var(--vm-ink); letter-spacing:.02em; display:block;
  margin-bottom:.85rem; word-break:break-word; text-decoration:none; }
.tc-phone:hover{ text-decoration:underline; }
.tc-callbtn{ font-size:1.25rem; padding:.85rem 1.25rem; min-height:56px; }
.tc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
.tc-bigbtn{ min-height:56px; font-size:1.1rem; display:flex; align-items:center;
  justify-content:center; gap:.5rem; }
@media (max-width:520px){ .tc-actions{ grid-template-columns:1fr; } }
/* Dauerauftrag + abweichende Kontaktangaben (Dankes-Anrufe).
   Der laufende Dauerauftrag ist der wichtigste Hinweis vor einem Anruf -
   deshalb farbig abgesetzt, aber ohne die Seite zu dominieren. */
.tc-abo-block,.tc-weitere{ margin-block:1rem; }
.tc-abo{ border-inline-start:4px solid var(--vm-border); border-radius:8px;
  background:var(--vm-surface-alt,#f3f5f1); padding:.6rem .8rem; margin-block-end:.5rem; }
.tc-abo.is-aktiv{ border-inline-start-color:var(--vm-success,#2e7d32); }
.tc-abo.is-beendet{ border-inline-start-color:var(--vm-warning,#a86a00); }
.tc-abo-kopf{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tc-weitere ul{ padding-inline-start:1.1rem; }

.tc-donation{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid var(--vm-border); }
.tc-donation:last-child{ border-bottom:0; }
.tc-donation .tc-d-amt{ font-family:var(--vm-mono); font-variant-numeric:tabular-nums;
  font-weight:600; white-space:nowrap; }
.tc-note-meta{ color:var(--vm-ink-subtle); font-size:.85rem; margin-top:.4rem; }
.tc-sum{ font-family:var(--vm-mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:1.35rem; color:var(--vm-ink); }

/* ---------- Datei-Manager (file_manager) ---------- */
.fm-ico{ width:22px; height:22px; }
.fm-ico-wrap{ display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:9px; background:var(--vm-surface-2); color:var(--vm-ink-muted);
  flex:0 0 auto; }
.fm-ico-wrap.fm-folder{ background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.fm-name{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--vm-ink); font-weight:500; }
.fm-name:hover{ color:var(--vm-primary-strong); }
.fm-breadcrumb .breadcrumb{ background:transparent; padding:0; font-size:.95rem; }
.fm-breadcrumb .breadcrumb-item a{ color:var(--vm-primary-strong); text-decoration:none; }
.fm-breadcrumb .breadcrumb-item.active{ color:var(--vm-ink-muted); }
.fm-toolbar{ display:flex; align-items:center; }
.fm-table td, .fm-table th{ vertical-align:middle; }
.vm-dropzone{ cursor:pointer; display:block; }
.vm-dropzone.is-drag{ border-color:var(--vm-primary); background:var(--vm-primary-050); }
.vm-dropzone svg{ color:var(--vm-primary-strong); }

/* Mobile Karten (Dateien/Ordner) */
.fm-cards{ display:flex; flex-direction:column; }
.fm-card{ display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; }
.fm-card + .fm-card{ border-top:1px solid var(--vm-border); }
.fm-card-main{ display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:inherit; flex:1 1 auto; min-width:0; }
.fm-card-body{ display:flex; flex-direction:column; min-width:0; }
.fm-card-name{ font-weight:600; color:var(--vm-ink); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.fm-card-meta{ color:var(--vm-ink-muted); font-size:.82rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

/* Speicheranzeige */
.fm-storage{ margin-top:1rem; padding:.85rem .9rem; border:1px solid var(--vm-border);
  border-radius:var(--vm-r); background:var(--vm-surface); }
.fm-storage-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.fm-storage-ico{ width:26px; height:26px; display:inline-grid; place-items:center;
  border-radius:7px; background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.fm-storage-ico svg{ width:16px; height:16px; }
.fm-storage-title{ font-weight:600; font-size:.9rem; }
.fm-storage-progress{ height:.5rem; margin-bottom:.4rem; }
.fm-storage-text{ font-size:.82rem; color:var(--vm-ink-muted); }
.fm-storage-warn{ font-size:.8rem; color:var(--vm-danger); margin-top:.25rem; }

/* Vorschau + Zielauswahl */
.fm-preview{ width:100%; height:70vh; border:1px solid var(--vm-border);
  border-radius:var(--vm-r); background:#fff; }
.fm-targets{ display:flex; flex-direction:column; gap:.25rem; max-height:50vh;
  overflow-y:auto; }
.fm-target{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
  border-radius:var(--vm-r); cursor:pointer; }
.fm-target:hover{ background:var(--vm-surface-2); }
.fm-target-path{ font-size:.92rem; }

/* Datei-Manager – UI-Überarbeitung */
.fm-hint{ display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .9rem;
  border:1px solid var(--vm-border); border-radius:var(--vm-r);
  background:var(--vm-surface-2); color:var(--vm-ink-muted); font-size:.9rem;
  margin-bottom:1rem; }
.fm-hint-ico{ color:var(--vm-info-ink); flex:0 0 auto; margin-top:1px; }
.fm-hint-ico svg{ width:20px; height:20px; }
.fm-storage-sub{ font-size:.8rem; color:var(--vm-ink-subtle); margin-top:.15rem; }
.fm-search .input-group-text{ background:var(--vm-surface);
  border-color:var(--vm-border-strong); color:var(--vm-ink-muted); }
/* Eigener Benutzerordner – ruhige Hervorhebung */
.fm-card.fm-own{ background:var(--vm-primary-050);
  box-shadow:inset 3px 0 0 var(--vm-primary); }
tr.fm-own td{ background:var(--vm-primary-050); }
tr.fm-own td:first-child{ box-shadow:inset 3px 0 0 var(--vm-primary); }
.fm-own .fm-ico-wrap.fm-folder{ background:var(--vm-primary); color:#fff; }

/* Gemeinsame Vereinsdaten – prominent und separat ganz oben (gelb) */
.fm-featured{ margin-bottom:1.1rem; }
.fm-feat{
  display:flex; align-items:center; gap:.6rem;
  padding:1rem 1.15rem;
  background:linear-gradient(180deg,#fdf8e9,#fbf2d8);
  border:1px solid #e6cf8a;
  border-inline-start:5px solid var(--vm-warning);
  border-radius:var(--vm-r-lg);
  box-shadow:var(--vm-sh-sm);
  transition:box-shadow .12s, transform .12s;
}
.fm-feat + .fm-feat{ margin-top:.6rem; }
.fm-feat:hover{ box-shadow:var(--vm-sh); transform:translateY(-1px); }
.fm-feat-main{
  display:flex; align-items:center; gap:.9rem;
  flex:1 1 auto; min-width:0; text-decoration:none; color:inherit;
}
.fm-feat-ico{
  width:50px; height:50px; border-radius:13px; display:grid; place-items:center;
  background:var(--vm-warning); color:#fff; flex:0 0 auto;
}
.fm-feat-ico .fm-ico{ width:27px; height:27px; }
.fm-feat-body{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.fm-feat-name{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  font-size:1.15rem; font-weight:700; color:var(--vm-warning-ink);
}
.fm-feat-meta{ font-size:.85rem; color:#7d6c40; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.fm-feat-go{ color:var(--vm-warning); flex:0 0 auto; margin-inline-start:auto; }
[dir="rtl"] .fm-feat-go svg{ transform:scaleX(-1); }
.fm-feat-main:hover .fm-feat-name{ text-decoration:underline; }
.fm-feat-actions .btn{ background:#fff; }
@media (max-width: 575.98px){
  .fm-feat{ padding:.85rem .9rem; gap:.4rem; }
  .fm-feat-main{ gap:.7rem; }
  .fm-feat-ico{ width:42px; height:42px; border-radius:11px; }
  .fm-feat-ico .fm-ico{ width:23px; height:23px; }
  .fm-feat-name{ font-size:1.02rem; }
  .fm-feat-go{ display:none; }
}

/* ---------- Einreise erstellen (einreise) ---------- */
.ein-form{ max-width:720px; }
.ein-steps{ display:flex; flex-wrap:wrap; gap:.4rem; }
.ein-step{ font-size:.78rem; color:var(--vm-ink-muted); background:var(--vm-surface-2);
  border:1px solid var(--vm-border); border-radius:var(--vm-pill); padding:.2rem .6rem; }
.ein-step.is-current{ background:var(--vm-primary-050); color:var(--vm-primary-strong);
  border-color:var(--vm-primary); font-weight:600; }
.ein-step.is-done{ color:var(--vm-success-ink); border-color:#cfe6d1; }
/* Festes Vorschaufenster: das GANZE freigestellte Bild passt immer hinein. */
.ein-sig-preview{ display:block; width:100%; height:220px; object-fit:contain;
  background:repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 16px 16px; }

/* ========== Mobiler Apps-FAB (schneller Zugriff auf die App-Übersicht) ========== */
.vm-fab{
  position:fixed;
  inset-block-end:calc(env(safe-area-inset-bottom, 0px) + 16px);
  inset-inline-end:16px;              /* RTL spiegelt automatisch nach unten links */
  z-index:1035;                        /* über Inhalt, unter Bootstrap-Modal (1055) */
  display:none;                        /* Standard: nur auf mobilen Breiten sichtbar */
  align-items:center; justify-content:center;
  width:56px; height:56px;             /* gut erreichbare Touchfläche */
  border-radius:var(--vm-pill);
  background:var(--vm-primary); color:#fff;
  box-shadow:0 4px 14px rgba(20,30,24,.28);
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:box-shadow .15s ease;
}
.vm-fab:hover,.vm-fab:focus{ background:var(--vm-primary-strong); color:#fff; }
.vm-fab:focus-visible{ outline:3px solid var(--vm-primary-050); outline-offset:2px; }
.vm-fab svg{ width:26px; height:26px; }
.vm-fab.is-boost{ box-shadow:0 6px 20px rgba(20,30,24,.36); }   /* dezent beim Weit-nach-unten-Scrollen */

/* Nur auf Smartphone- und kleinen Tabletbreiten (< lg) einblenden */
@media (max-width:991.98px){
  .vm-fab{ display:flex; }
  .vm-has-fab main{ padding-block-end:calc(env(safe-area-inset-bottom, 0px) + 92px); }
}

/* Ausblenden bei offenem Menü, offenem Modal/Dialog oder Tastatur-Fokus */
.vm-menu-open .vm-fab,
.modal-open .vm-fab,
.vm-typing .vm-fab{ display:none !important; }

/* ===== Dankes-Anrufe: gelber „Anrufe Abarbeiten“-Button (volle Breite, Schatten) ===== */
.btn.tc-cta{
  background:#f2c200; border-color:#e6b800; color:#1e2a23; font-weight:700;
  box-shadow:0 2px 8px rgba(20,30,24,.16);
}
.btn.tc-cta:hover,.btn.tc-cta:focus{
  background:#e6b800; border-color:#d4a900; color:#1e2a23;
  box-shadow:0 3px 10px rgba(20,30,24,.20);
}
.btn.tc-cta:focus-visible{ outline:3px solid #f7de7a; outline-offset:2px; }

/* ===== Mobile Kopfzeile: Logo links · „Apps“ gross zentriert · Menü rechts ===== */
.navbar-vm{ padding-top:calc(.4rem + env(safe-area-inset-top, 0px)); } /* Safe Area (Notch) */
.navbar-left{ display:flex; align-items:center; gap:.5rem; }
@media (max-width:991.98px){
  .navbar-vm .container-fluid{
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:.5rem;
  }
  .navbar-vm .navbar-left{ display:contents; }        /* Kinder wandern direkt ins Grid */
  .navbar-vm .navbar-left .navbar-brand{ grid-column:1; margin:0; min-width:0; }
  .navbar-vm .navbar-logo-box{ padding:4px 8px; }     /* kompakter, damit Platz bleibt */
  .navbar-vm .navbar-logo{ height:24px; }
  .navbar-vm .navbar-apps-link{                        /* „Apps“ gross und zentriert */
    grid-column:2; justify-self:center;
    font-size:1.15rem; padding:.4rem .6rem;
  }
  .navbar-vm .navbar-apps-ico{ width:27px; height:27px; }
  .navbar-vm .navbar-module{ display:none; }
  .navbar-vm .navbar-toggler{                          /* Menü-Button rechts, gut greifbar */
    grid-column:3; justify-self:end;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:48px; min-height:48px; border-color:rgba(255,255,255,.55);
  }
  .navbar-vm .navbar-collapse{ grid-column:1 / -1; }   /* Menü öffnet volle Breite darunter */
}

/* Spendenbescheinigung: keine Pflichtfeld-Sterne (alle Angaben werden ohnehin geführt) */
#cert-form .form-label .vm-required,
#cert-form .form-label .text-danger{ display:none; }

/* ---------- Einreise: CHAIR-Einreiseauswahl / Kontrolle ---------- */
.ein-entrylist{ display:flex; flex-direction:column; border:1px solid var(--vm-border);
  border-radius:var(--vm-r); overflow:hidden; }
.ein-entry{ display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem;
  cursor:pointer; margin:0; }
.ein-entry + .ein-entry{ border-top:1px solid var(--vm-border); }
.ein-entry:hover{ background:var(--vm-surface-2); }
.ein-entry input{ flex:0 0 auto; }
.ein-entry-main{ min-width:0; }
.ein-review-sec{ padding:.15rem 0; }

/* ==========================================================================
   Einreise-App Redesign (nur .ein-/.chair- Klassen; keine anderen Module)
   ========================================================================== */
/* Seitenkopf-Aktionen: primär + sekundär, mobil gestapelt */
.ein-head-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
@media (max-width:575.98px){
  .ein-head-actions{ width:100%; flex-direction:column; }
  .ein-head-actions .btn{ width:100%; }
}
/* Suche mit Symbol */
.ein-search{ max-width:560px; }
.ein-search .input-group-text{ background:var(--vm-surface); border-right:0; }
.ein-search .form-control{ border-left:0; }
@media (max-width:575.98px){ .ein-search{ max-width:none; } }

/* Freundliche Leerwerte */
.ein-empty-val{ color:var(--vm-ink-subtle); font-style:italic; }

/* Formularbreite Desktop */
.ein-form-wrap{ max-width:860px; }

/* --- Auswahlkarten (Grundlage-Wahl, Tierart, Beförderung) --- */
.ein-choicegrid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:575.98px){ .ein-choicegrid{ grid-template-columns:1fr; } }
.ein-optioncard{ position:relative; display:flex; gap:.8rem; align-items:flex-start;
  padding:1rem 1.1rem; border:1.5px solid var(--vm-border); border-radius:var(--vm-r-lg);
  background:var(--vm-surface); cursor:pointer; margin:0; transition:border-color .12s, background .12s; }
.ein-optioncard:hover{ border-color:var(--vm-primary); }
.ein-optioncard input{ position:absolute; opacity:0; pointer-events:none; }
.ein-optioncard:has(input:checked){ border-color:var(--vm-primary);
  background:var(--vm-primary-050); box-shadow:inset 0 0 0 1px var(--vm-primary); }
.ein-optioncard .ein-oc-ico{ flex:0 0 auto; width:34px; height:34px; color:var(--vm-primary); }
.ein-optioncard .ein-oc-ico svg{ width:34px; height:34px; }
.ein-oc-title{ font-weight:700; color:var(--vm-ink); display:flex; align-items:center; gap:.4rem; }
.ein-oc-price{ display:inline-block; margin-top:.3rem; font-size:.82rem; font-weight:600;
  color:var(--vm-primary-strong); background:var(--vm-primary-050);
  border-radius:6px; padding:.15rem .5rem; line-height:1.35; }
.ein-oc-desc{ color:var(--vm-ink-muted); font-size:.9rem; margin-top:.3rem; }
.ein-oc-check{ position:absolute; top:.6rem; inset-inline-end:.6rem; width:22px; height:22px;
  border-radius:50%; background:var(--vm-primary); color:#fff; display:none;
  align-items:center; justify-content:center; }
.ein-optioncard:has(input:checked) .ein-oc-check{ display:flex; }
.ein-oc-check svg{ width:14px; height:14px; }

/* --- Auswahl bestehende Einreise (Karten) --- */
.ein-pick{ display:flex; flex-direction:column; gap:.6rem; }
.ein-pickcard{ position:relative; display:block; padding:.8rem 1rem; border:1.5px solid var(--vm-border);
  border-radius:var(--vm-r); background:var(--vm-surface); cursor:pointer; margin:0; }
.ein-pickcard:hover{ border-color:var(--vm-primary); }
.ein-pickcard input{ position:absolute; opacity:0; }
.ein-pickcard:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050);
  box-shadow:inset 0 0 0 1px var(--vm-primary); }
.ein-pick-name{ font-weight:600; }
.ein-pick-meta{ color:var(--vm-ink-muted); font-size:.85rem; margin-top:.15rem; }
.ein-pick-sel{ display:none; color:var(--vm-primary); font-weight:600; font-size:.8rem;
  margin-top:.35rem; align-items:center; gap:.3rem; }
.ein-pickcard:has(input:checked) .ein-pick-sel{ display:inline-flex; }
.ein-pick-warn{ color:var(--vm-warning-ink); font-size:.8rem; margin-top:.2rem; }

/* --- „Aus Einreise übernommen"-Badge --- */
.ein-src-badge{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem;
  padding:.12rem .5rem; border-radius:999px; background:var(--vm-info-bg); color:var(--vm-info-ink);
  border:1px solid #cfe2df; font-weight:600; }
.ein-src-badge svg{ width:12px; height:12px; }

/* --- Mobiler Schritt-Indikator --- */
.ein-stepmob{ display:none; }
@media (max-width:767.98px){
  .ein-steps{ display:none; }
  .ein-stepmob{ display:block; margin-bottom:.75rem; }
  .ein-stepmob-top{ display:flex; justify-content:space-between; align-items:baseline; }
  .ein-stepmob-num{ color:var(--vm-ink-subtle); font-size:.85rem; }
  .ein-stepmob-title{ font-weight:600; font-size:1.05rem; }
  .ein-stepmob-next{ color:var(--vm-ink-subtle); font-size:.8rem; }
}

/* --- Mobil klebende Aktionsleiste --- */
@media (max-width:767.98px){
  .ein-actions-sticky{ position:sticky; bottom:0; z-index:5; background:var(--vm-surface);
    border-top:1px solid var(--vm-border); padding:.7rem; margin:.5rem -1rem -1rem;
    display:flex; gap:.6rem; }
  .ein-actions-sticky .btn{ flex:1; min-height:48px; }
}

/* --- Dokumentkarten (Detail) --- */
.ein-doc{ display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.8rem 0; }
.ein-doc + .ein-doc{ border-top:1px solid var(--vm-border); }
.ein-doc-ico{ flex:0 0 auto; width:36px; height:36px; border-radius:var(--vm-r);
  background:var(--vm-surface-2); display:flex; align-items:center; justify-content:center; color:var(--vm-primary); }
.ein-doc-ico svg{ width:20px; height:20px; }
.ein-doc-main{ min-width:0; flex:1; }
.ein-doc-title{ font-weight:600; }
.ein-doc-meta{ color:var(--vm-ink-muted); font-size:.82rem; }

/* --- Detail: Info-Kacheln --- */
.ein-facts{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; color:var(--vm-ink-muted);
  font-size:.9rem; }
.ein-facts b{ color:var(--vm-ink); font-weight:600; }

/* Download-Aktionen mind. 44px (mobil) */
@media (max-width:767.98px){
  .ein-touch{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}

/* Wizard-Formularkarten auf Desktop nicht über die ganze Breite ziehen */
.vm-main .card:has(> .card-body.ein-form){ max-width:860px; }

/* 3-spaltiges Auswahlraster (Tierart) */
.ein-choicegrid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
@media (max-width:575.98px){ .ein-choicegrid-3{ grid-template-columns:1fr; } }
/* Kompakte Optionskarte (nur Titel, z. B. Tierart) */
.ein-optioncard.is-compact{ align-items:center; padding:.85rem 1rem; }
/* Gruppen-Überschrift in Formularschritten */
.ein-group-title{ font-weight:600; color:var(--vm-ink); margin:1.1rem 0 .5rem; }
.ein-group-title:first-child{ margin-top:0; }
/* Hervorgehobenes Feld (Buchungsnummer) */
.ein-field-hi{ padding:.8rem; border:1px solid var(--vm-primary); border-radius:var(--vm-r);
  background:var(--vm-primary-050); }

/* Status-Filter-Chips der Einreiseübersicht (Farben je Kategorie) */
.ein-fchips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1rem; }
.ein-fchip{ display:inline-flex; align-items:center; padding:.4rem .95rem; border-radius:999px;
  font-size:.9rem; font-weight:600; text-decoration:none; border:2px solid transparent; line-height:1.15; }
.ein-fchip.is-all{ background:#e6f0fb; color:#1b4b7a; }      /* helles Blau */
.ein-fchip.is-draft{ background:#fbf1c9; color:#7a5a00; }    /* helles Gelb */
.ein-fchip.is-done{ background:#dcecdd; color:#245a29; }     /* helles Grün */
.ein-fchip:hover{ filter:brightness(.97); }
.ein-fchip.is-all.active{ border-color:#5a97dd; }
.ein-fchip.is-draft.active{ border-color:#d6b73f; }
.ein-fchip.is-done.active{ border-color:#5fb069; }

/* --- Flugpaten-Auswahl (Schritt 6): Optionen mit Erklärung --- */
.ein-choice-list{ display:flex; flex-direction:column; gap:.6rem; }
.ein-choice{ display:flex; gap:.7rem; align-items:flex-start; padding:.85rem 1rem;
  border:1px solid var(--vm-border); border-radius:var(--vm-r); cursor:pointer; margin:0; }
.ein-choice:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050); }
.ein-choice input{ margin-top:.2rem; flex:0 0 auto; }
.ein-choice-body{ display:flex; flex-direction:column; }
.ein-choice-title{ font-weight:600; }
.ein-choice-hint{ color:var(--vm-ink-muted); font-size:.85rem; margin-top:.15rem; }

/* --- Schritt „Dokumente": Gruppen, Seitenraster --- */
.ein-doc-group{ scroll-margin-top:84px; }  /* nach Upload auf die Gruppe scrollen, nicht unter die Navbar */
.ein-doc-group .ein-dg-head h2{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.ein-pagegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.8rem; margin:.4rem 0 1rem; }
.ein-pagetile{ border:1px solid var(--vm-border); border-radius:var(--vm-r);
  overflow:hidden; background:var(--vm-surface-2); display:flex; flex-direction:column; }
.ein-pagetile-prev{ position:relative; height:150px; display:flex; align-items:center;
  justify-content:center; overflow:hidden; background:#fff; }
.ein-pagetile-prev img{ max-width:100%; max-height:100%; object-fit:contain; }
.ein-pagetile-pdf{ display:flex; flex-direction:column; align-items:center; gap:.3rem;
  color:var(--vm-primary); font-size:.8rem; font-weight:600; }
.ein-pagetile-pdf svg{ width:34px; height:34px; }
.ein-pagetile-num{ position:absolute; top:.3rem; left:.3rem; background:rgba(0,0,0,.6);
  color:#fff; font-size:.72rem; font-weight:600; border-radius:999px; padding:.05rem .5rem; }
.ein-pagetile-actions{ display:flex; gap:.25rem; justify-content:center; padding:.4rem; flex-wrap:wrap; }
.ein-pagetile-actions .btn{ padding:.25rem .45rem; }
.ein-dg-upload{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ein-dg-upload .btn{ cursor:pointer; }

/* --- Zurück-Schaltfläche (Detailseite → Übersicht) --- */
.ein-back{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; }
.ein-back svg{ flex:0 0 auto; }

/* --- „Speichern" (Entwurf schliessen): hellgraue Schaltfläche --- */
.btn-ein-save{ background:#e9ecef; color:#3a3f45; border:1px solid #ced4da; }
.btn-ein-save:hover,.btn-ein-save:focus{ background:#dde1e6; color:#23272b; border-color:#b8bfc6; }

/* --- Detail: Vollständigkeits-Checkliste (Icon + Text, nicht nur Farbe) --- */
.ein-check li{ font-size:.92rem; }
.ein-check-ok{ color:#245a29; flex:0 0 auto; }
.ein-check-no{ color:#a3320b; flex:0 0 auto; }

/* ==========================================================================
   Tierverwaltung
   ========================================================================== */
.tv-newbtn{ white-space:nowrap; }

/* --- Toolbar (Suche / Filter / Ansicht) --- */
.tv-toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:0 0 1rem; }
.tv-search{ position:relative; flex:1 1 240px; min-width:0; }
.tv-search svg{ position:absolute; inset-inline-start:.7rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--vm-ink-subtle); pointer-events:none; }
.tv-search input{ width:100%; padding:.6rem .8rem .6rem 2.3rem; border:1px solid var(--vm-border);
  border-radius:var(--vm-r); background:var(--vm-surface); font-size:1rem; min-height:44px; }
html[dir="rtl"] .tv-search input{ padding:.6rem 2.3rem .6rem .8rem; }
.tv-filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tv-filters select{ padding:.5rem .7rem; border:1px solid var(--vm-border); border-radius:var(--vm-r);
  background:var(--vm-surface); min-height:44px; }
.tv-viewtoggle{ display:inline-flex; border:1px solid var(--vm-border); border-radius:var(--vm-r); overflow:hidden; }
.tv-viewtoggle button{ background:var(--vm-surface); border:0; padding:.5rem .7rem; cursor:pointer;
  color:var(--vm-ink-muted); min-height:44px; min-width:44px; }
.tv-viewtoggle button svg{ width:20px; height:20px; display:block; }
.tv-viewtoggle button.active{ background:var(--vm-primary); color:#fff; }

/* --- Kartenraster --- */
.tv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.tv-card{ position:relative; display:flex; flex-direction:column; background:var(--vm-surface); border:1px solid var(--vm-border);
  border-radius:var(--vm-r-lg,14px); overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(16,24,40,.04); transition:box-shadow .15s, transform .15s; }
.tv-card:hover{ box-shadow:0 6px 20px rgba(16,24,40,.10); transform:translateY(-2px); }
.tv-card-img{ aspect-ratio:4/3; background:var(--vm-surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tv-card-img img{ width:100%; height:100%; object-fit:cover; }
.tv-card-body{ padding:.7rem .85rem .85rem; display:flex; flex-direction:column; gap:.35rem; }
.tv-card-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.tv-card-name{ font-weight:700; font-size:1.02rem; }
.tv-card-nr{ color:var(--vm-ink-subtle); font-size:.78rem; white-space:nowrap; }
.tv-card-meta{ color:var(--vm-ink-muted); font-size:.85rem; display:flex; gap:.35rem; }
.tv-card-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin-top:.15rem; }
.tv-card-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
.tv-card-actions{ position:relative; z-index:2; display:flex; gap:.3rem; margin-inline-start:auto; }
.tv-qbtn{ width:32px; height:32px; padding:0; border:1px solid var(--vm-border); background:var(--vm-surface);
  border-radius:8px; color:var(--vm-ink-muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.tv-qbtn:hover{ color:var(--vm-primary-strong); border-color:var(--vm-primary); background:var(--vm-primary-050); }
.tv-qbtn svg{ width:18px; height:18px; }
.tv-chip{ background:var(--vm-surface-2); color:var(--vm-ink); border-radius:999px; padding:.15rem .6rem; font-size:.78rem; font-weight:600; }
.tv-health{ border-radius:999px; padding:.15rem .6rem; font-size:.78rem; font-weight:600;
  color:var(--c,#555); border:1px solid color-mix(in srgb, var(--c,#8a8f98) 45%, transparent);
  background:color-mix(in srgb, var(--c,#8a8f98) 12%, transparent); }

.tv-thumb-ph{ font-size:2rem; opacity:.5; }
.tv-thumb-ph.is-small{ font-size:1.1rem; }

/* --- Tabelle --- */
.tv-tablewrap{ overflow-x:auto; border:1px solid var(--vm-border); border-radius:var(--vm-r); }
.tv-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tv-table th{ text-align:start; padding:.6rem .7rem; color:var(--vm-ink-muted); font-weight:600;
  border-bottom:1px solid var(--vm-border); white-space:nowrap; background:var(--vm-surface-2); }
.tv-table td{ padding:.5rem .7rem; border-bottom:1px solid var(--vm-border); vertical-align:middle; }
.tv-table tbody tr{ cursor:pointer; }
.tv-table tbody tr:hover{ background:var(--vm-surface-2); }
.tv-table td .tv-thumb-ph{ font-size:1.1rem; }
.tv-table td img{ width:34px; height:34px; border-radius:8px; object-fit:cover; }

/* --- Profil --- */
.tv-profile-head{ display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap; margin:0 0 1rem; }
.tv-profile-img{ flex:0 0 auto; width:130px; height:130px; border-radius:var(--vm-r-lg,14px);
  background:var(--vm-surface-2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tv-profile-img img{ width:100%; height:100%; object-fit:cover; }
.tv-profile-info{ flex:1 1 240px; min-width:0; }
.tv-profile-info h1{ margin:0; }
.tv-profile-nr{ color:var(--vm-ink-subtle); font-size:.9rem; margin:.1rem 0 .5rem; }
.tv-profile-actions{ flex:0 0 auto; }

/* --- Tabs (mobil horizontal scrollbar) --- */
.tv-tabs{ display:flex; gap:.3rem; border-bottom:1px solid var(--vm-border); margin-bottom:1rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tv-tabs a{ padding:.6rem .9rem; text-decoration:none; color:var(--vm-ink-muted); font-weight:600;
  white-space:nowrap; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.tv-tabs a.active{ color:var(--vm-primary); border-bottom-color:var(--vm-primary); }

/* --- Verlauf --- */
.tv-timeline{ list-style:none; margin:0; padding:0; }
.tv-timeline li{ padding:.55rem 0; border-top:1px solid var(--vm-border); display:flex; flex-direction:column; gap:.1rem; }
.tv-timeline li:first-child{ border-top:0; }
.tv-timeline-when{ font-size:.78rem; color:var(--vm-ink-subtle); }
.tv-timeline-who{ font-size:.82rem; }

/* --- Bildergalerie --- */
.tv-imggrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
.tv-imgtile{ position:relative; aspect-ratio:1/1; border-radius:var(--vm-r); overflow:hidden; background:var(--vm-surface-2); }
.tv-imgtile img{ width:100%; height:100%; object-fit:cover; }
.tv-imgtile-main{ position:absolute; inset-block-start:.4rem; inset-inline-start:.4rem;
  background:var(--vm-primary); color:#fff; font-size:.72rem; font-weight:600; border-radius:999px; padding:.1rem .55rem; }
.tv-imgtile img.tv-zoomable{ cursor:zoom-in; }
.tv-imgtile-actions{ position:absolute; inset-block-end:.4rem; inset-inline-end:.4rem; display:flex; gap:.3rem; }
.tv-imgtile-actions .btn{ --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.45); color:#fff; width:34px; height:34px; padding:0; line-height:1; }
.tv-imgtile-actions .btn:hover{ background:rgba(0,0,0,.7); }
.tv-lightbox{ position:fixed; inset:0; z-index:1080; background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; }
.tv-lightbox[hidden]{ display:none; }
.tv-lightbox img{ max-width:96vw; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 6px 30px rgba(0,0,0,.5); }
.tv-lightbox-close{ position:absolute; inset-block-start:14px; inset-inline-end:18px; background:none;
  border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.tv-genderopt:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.tv-locopt:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); }

@media (max-width:575.98px){
  .tv-grid{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .tv-toolbar{ gap:.5rem; }
  .tv-filters{ width:100%; }
  .tv-filters select{ flex:1 1 45%; }
}

/* --- Tierverwaltung: Erfassungsassistent --- */
.tv-wiz{ max-width:720px; }
.tv-wizsteps{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1rem; padding:0; margin:0 0 1.25rem; }
.tv-wizsteps li{ display:flex; align-items:center; gap:.45rem; color:var(--vm-ink-subtle); font-size:.9rem; font-weight:600; }
.tv-wizsteps li span{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--vm-surface-2); color:var(--vm-ink-muted); font-size:.8rem; }
.tv-wizsteps li.is-cur{ color:var(--vm-ink); }
.tv-wizsteps li.is-cur span{ background:var(--vm-primary); color:#fff; }
.tv-wizsteps li.is-done span{ background:color-mix(in srgb,var(--vm-primary) 20%, transparent); color:var(--vm-primary-strong); }

.tv-wizimg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.7rem; margin-bottom:1rem; }
.tv-wizimg{ position:relative; border-radius:var(--vm-r); overflow:hidden; border:2px solid transparent; background:var(--vm-surface-2); }
.tv-wizimg.is-main{ border-color:var(--vm-primary); }
.tv-wizimg img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.tv-wizimg-badge{ position:absolute; inset-block-start:.3rem; inset-inline-start:.3rem; background:var(--vm-primary);
  color:#fff; font-size:.7rem; font-weight:600; border-radius:999px; padding:.05rem .5rem; }
.tv-wizimg-actions{ position:absolute; inset-block-end:0; inset-inline:0; display:flex; gap:.2rem; justify-content:center;
  padding:.3rem; background:linear-gradient(transparent, rgba(0,0,0,.45)); }
.tv-wizimg-actions .btn{ padding:.2rem .4rem; background:rgba(255,255,255,.92); }
.tv-wizupload{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tv-wizupload .btn{ cursor:pointer; min-height:48px; }

.tv-genderpick{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.5rem 0; }
.tv-genderopt{ display:flex; align-items:center; justify-content:center; min-height:60px; padding:.6rem;
  border:1.5px solid var(--vm-border); border-radius:var(--vm-r); cursor:pointer; font-weight:600; text-align:center; margin:0; }
.tv-genderopt input{ position:absolute; opacity:0; width:0; height:0; }
.tv-genderopt.is-sel{ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); }

.tv-namerow{ display:flex; gap:.5rem; align-items:stretch; }
.tv-namerow input{ flex:1; }
.tv-suggest{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
@media (max-width:480px){ .tv-suggest-txt{ display:none; } }

.tv-wiznav{ display:flex; gap:.6rem; margin-top:1.5rem; }
.tv-wiznav .btn{ flex:1; min-height:52px; }
.tv-wiznav--split{ justify-content:space-between; }
.tv-wiznav--split > .btn, .tv-wiznav--split > div{ flex:0 0 auto; }
@media (max-width:575.98px){
  .tv-genderpick{ grid-template-columns:1fr; }
  .tv-wiznav--split{ flex-direction:column; }
  .tv-wiznav--split > div{ display:flex; }
  .tv-wiznav--split .btn{ width:100%; }
}

/* ==========================================================================
   Kalender  (Monats- und Wochenansicht, gemeinsame Terminkarten)
   ========================================================================== */

/* --- Kopfzeile: Umschaltung + Navigation ------------------------------- */
.cal-bar{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.85rem; }
.cal-switch{ display:inline-flex; background:var(--vm-surface-2); border-radius:var(--vm-pill);
  padding:3px; gap:2px; }
.cal-switch a{ padding:.35rem .95rem; border-radius:var(--vm-pill); font-size:.88rem;
  font-weight:600; color:var(--vm-ink-muted); text-decoration:none; line-height:1.4; }
.cal-switch a.is-active{ background:var(--vm-surface); color:var(--vm-primary-strong);
  box-shadow:var(--vm-sh-sm); }
.cal-nav{ display:inline-flex; align-items:center; gap:.2rem; }
.cal-nav a{ width:34px; height:34px; display:grid; place-items:center; border-radius:8px;
  color:var(--vm-ink-muted); text-decoration:none; border:1px solid transparent; }
.cal-nav a:hover{ background:var(--vm-surface-2); color:var(--vm-ink); }
.cal-nav svg{ width:18px; height:18px; }
[dir="rtl"] .cal-nav svg{ transform:scaleX(-1); }
.cal-today{ padding:.35rem .8rem; border:1px solid var(--vm-border-strong); border-radius:var(--vm-pill);
  font-size:.85rem; font-weight:600; color:var(--vm-ink); text-decoration:none; background:var(--vm-surface); }
.cal-today:hover{ border-color:var(--vm-primary); color:var(--vm-primary-strong); }
.cal-title{ font-size:1.15rem; margin:0 .25rem; font-weight:700; }
.cal-legend{ margin-inline-start:auto; display:flex; align-items:center; gap:.9rem;
  font-size:.78rem; color:var(--vm-ink-muted); }
.cal-legend span{ display:inline-flex; align-items:center; gap:.35rem; }
.cal-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.cal-legend i.is-mine{ background:var(--vm-danger-bg); border-inline-start:3px solid var(--vm-danger); }
.cal-legend i.is-other{ background:var(--vm-neutral-bg); border-inline-start:3px solid var(--vm-border-strong); }

/* --- Terminkarte: eigene rot + Merkmal, fremde dezent grau ------------- */
.cal-ev, .cw-ev{
  --ev-bg:var(--vm-neutral-bg); --ev-ink:var(--vm-neutral-ink); --ev-bar:var(--vm-border-strong);
  display:block; text-decoration:none; border-radius:6px; overflow:hidden;
  background:var(--ev-bg); color:var(--ev-ink);
  border-inline-start:3px solid var(--ev-bar);
}
.cal-ev.is-mine, .cw-ev.is-mine{
  --ev-bg:var(--vm-danger-bg); --ev-ink:var(--vm-danger-ink); --ev-bar:var(--vm-danger);
  font-weight:700;
}
.cal-ev:hover, .cw-ev:hover{ filter:brightness(.97); }
.cal-ev.is-done, .cw-ev.is-done{ opacity:.5; text-decoration:line-through; }
/* Merkmal ohne Farbe: eigene Termine tragen ein Personensymbol */
.ev-mine-mark{ flex:0 0 auto; width:13px; height:13px; }
.cal-ev:not(.is-mine) .ev-mine-mark, .cw-ev:not(.is-mine) .ev-mine-mark{ display:none; }
.ev-cat{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--cat,#6b7280); }

/* --- Monatsansicht ----------------------------------------------------- */
.cal-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px;
  background:var(--vm-border);
  border:1px solid var(--vm-border); border-radius:var(--vm-r); overflow:hidden; }
.cal-wd{ background:var(--vm-surface-2); text-align:center; font-size:.72rem; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; color:var(--vm-ink-muted); padding:.45rem 0; }
.cal-cell{ background:var(--vm-surface); min-height:104px; padding:.3rem; display:flex;
  flex-direction:column; gap:3px; min-width:0; }
.cal-cell.is-out{ background:var(--vm-bg); }
/* Ohne Seitenleiste ist das Monatsraster deutlich breiter — sonst wirken die
   Zellen gedrungen und die Termine kleben oben. */
@media (min-width:1200px){ .cal-cell{ min-height:124px; } }
.cal-cell.is-out .cal-day{ color:var(--vm-ink-subtle); }
.cal-cell.is-out .cal-ev{ opacity:.6; }
.cal-day{ align-self:flex-end; font-size:.8rem; color:var(--vm-ink-muted); text-decoration:none;
  font-weight:600; width:1.7rem; height:1.7rem; display:grid; place-items:center; border-radius:50%; }
.cal-cell.is-today .cal-day{ background:var(--vm-primary); color:#fff; }
a.cal-day:hover{ background:var(--vm-primary-050); }
.cal-ev{ display:flex; align-items:center; gap:.28rem; font-size:.73rem; line-height:1.25;
  padding:.14rem .32rem; white-space:nowrap; }
.cal-ev .ev-head{ display:contents; }      /* Monat: alles in einer Zeile */
.cal-ev .ev-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; }

/* Kategorie-Farben (nur noch als Punkt, nicht mehr als Flaeche) */
.cat-medikament{ --cat:#6a5acd; } .cat-impfung{ --cat:#2e7d32; } .cat-nachkontrolle{ --cat:#0277bd; }
.cat-operation{ --cat:#c62828; } .cat-kastration{ --cat:#ad1457; } .cat-tierarzt{ --cat:#00838f; }
.cat-sonstiges{ --cat:#6b7280; }
.cal-dot{ width:9px; height:9px; border-radius:50%; background:var(--cat,#6b7280);
  display:inline-block; flex:0 0 auto; }

/* --- Wochenansicht ----------------------------------------------------- */
.cw{ --hour-h:52px; --gutter:66px; background:var(--vm-surface);
  border:1px solid var(--vm-border); border-radius:var(--vm-r); overflow:hidden; }
.cw-headrow, .cw-allday, .cw-grid{ display:grid;
  grid-template-columns:var(--gutter) repeat(7,minmax(0,1fr)); }
.cw-headrow{ border-block-end:1px solid var(--vm-border); background:var(--vm-surface); }
.cw-colhead{ text-align:center; padding:.5rem .2rem .45rem; border-inline-start:1px solid var(--vm-border); }
.cw-wd{ display:block; font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; color:var(--vm-ink-muted); }
.cw-num{ display:inline-grid; place-items:center; width:2rem; height:2rem; margin-top:.15rem;
  border-radius:50%; font-weight:700; font-size:.95rem; }
.cw-colhead.is-today .cw-num{ background:var(--vm-primary); color:#fff; }
.cw-colhead.is-past .cw-wd, .cw-colhead.is-past .cw-num{ color:var(--vm-ink-subtle); }
.cw-gutter{ border-inline-end:1px solid var(--vm-border); }

.cw-allday{ border-block-end:1px solid var(--vm-border); background:var(--vm-surface); }
.cw-allday .cw-gutter{ font-size:.62rem; line-height:1.15; color:var(--vm-ink-subtle);
  padding:.35rem .35rem; display:flex; align-items:flex-start; justify-content:flex-end;
  text-align:end; overflow-wrap:anywhere; }
.cw-adcell{ border-inline-start:1px solid var(--vm-border); padding:.25rem; display:flex;
  flex-direction:column; gap:3px; min-height:2rem; min-width:0; overflow:hidden; }
.cw-adcell .cw-ev{ position:static; flex-direction:row; align-items:center; gap:.28rem;
  font-size:.73rem; padding:.16rem .35rem; height:auto; width:auto; inset:auto;
  white-space:nowrap; }
.cw-adcell .cw-ev .ev-title{ display:block; min-width:0; overflow:hidden;
  text-overflow:ellipsis; }

.cw-scroll{ max-height:min(70vh,640px); overflow-y:auto; overscroll-behavior:contain; }
.cw-hours{ position:relative; }
.cw-hour{ height:var(--hour-h); position:relative; }
.cw-hour span{ position:absolute; inset-block-start:-.55rem; inset-inline-end:.4rem;
  font-size:.68rem; color:var(--vm-ink-subtle); font-variant-numeric:tabular-nums; }
.cw-hour:first-child span{ display:none; }
.cw-col{ position:relative; border-inline-start:1px solid var(--vm-border); }
.cw-col.is-today{ background:var(--vm-primary-050); }
.cw-line{ height:var(--hour-h); border-block-start:1px solid var(--vm-border); }
.cw-line:first-child{ border-block-start:0; }

.cw-ev{ position:absolute; z-index:2; padding:.2rem .35rem; font-size:.72rem; line-height:1.2;
  inset-block-start:calc(var(--top) * var(--hour-h) / 60);
  height:calc(var(--dur) * var(--hour-h) / 60 - 2px);
  inset-inline-start:calc(var(--col) / var(--cols) * 100% + 2px);
  width:calc(100% / var(--cols) - 4px); }
.ev-time{ font-variant-numeric:tabular-nums; opacity:.85; flex:0 0 auto; }
/* Woche: Uhrzeit oben, Titel darunter - so wird nichts abgeschnitten */
.cw-ev{ display:flex; flex-direction:column; gap:1px; }
.cw-ev .ev-head{ display:flex; align-items:center; gap:.25rem; font-size:.68rem; }
.cw-ev .ev-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere; font-size:.73rem; line-height:1.15; }

/* Jetzt-Linie */
.cw-now{ position:absolute; inset-inline:0; z-index:3; height:0;
  inset-block-start:calc(var(--now-min, 0) * var(--hour-h) / 60);
  border-block-start:2px solid var(--vm-danger); pointer-events:none; }
.cw-now::before{ content:""; position:absolute; inset-block-start:-5px; inset-inline-start:-4px;
  width:9px; height:9px; border-radius:50%; background:var(--vm-danger); }

/* Mobile Wochenleiste (nur unter md sichtbar) */
.cw-strip{ display:none; gap:.3rem; padding:.5rem; border-block-end:1px solid var(--vm-border);
  background:var(--vm-surface); }
.cw-stripday{ flex:1 1 0; min-width:0; padding:.4rem .1rem .3rem; border:0; border-radius:10px;
  background:transparent; display:flex; flex-direction:column; align-items:center; gap:.1rem;
  min-height:56px; color:var(--vm-ink-muted); }
.cw-stripday .cw-sd-wd{ font-size:.66rem; font-weight:600; text-transform:uppercase; }
.cw-stripday .cw-sd-num{ font-size:1rem; font-weight:700; color:var(--vm-ink);
  width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:50%; }
.cw-stripday .cw-sd-dot{ width:5px; height:5px; border-radius:50%; background:var(--vm-border-strong); }
.cw-stripday .cw-sd-dot.is-mine{ background:var(--vm-danger); }
.cw-stripday.is-today .cw-sd-num{ box-shadow:inset 0 0 0 2px var(--vm-primary); }
.cw-stripday.is-active .cw-sd-num{ background:var(--vm-primary); color:#fff; box-shadow:none; }
.cw-mobtitle{ display:none; }

@media (max-width:767.98px){
  .cw{ --gutter:54px; --hour-h:56px; }
  .cw-strip{ display:flex; }
  .cw-mobtitle{ display:block; padding:.5rem .75rem 0; font-weight:700; }
  .cw-headrow{ display:none; }
  /* nur der gewaehlte Tag ist sichtbar */
  .cw-allday, .cw-grid{ grid-template-columns:var(--gutter) minmax(0,1fr); }
  .cw-adcell:not(.is-active), .cw-col:not(.is-active){ display:none; }
  /* Eigener Scrollbereich statt Seitenscroll: die Wochenleiste bleibt
     stehen, und das Springen zur aktuellen Uhrzeit wirkt auch mobil. */
  .cw-scroll{ max-height:62vh; }
  .cw-allday .cw-gutter{ font-size:.58rem; }
  .cw-ev{ font-size:.8rem; }
  .cw-ev .ev-title{ -webkit-line-clamp:3; }
}

@media (max-width:575.98px){
  .cal-cell{ min-height:66px; padding:.15rem; }
  .cal-ev{ font-size:0; padding:0; height:8px; gap:0; border-radius:3px;
    border-inline-start-width:0; background:var(--ev-bar); }
  .cal-ev .ev-cat, .cal-ev .ev-mine-mark{ display:none; }
  .cal-legend{ width:100%; margin-inline-start:0; }
}

/* --- Kopfzeile der Kalenderseite ---------------------------------------- */
.cal-head-actions{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.cal-settings-link{ display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; color:var(--vm-ink-muted); text-decoration:none; }
.cal-settings-link:hover{ color:var(--vm-primary-strong); }
.cal-new-btn{ font-size:1.05rem; font-weight:700; padding:.75rem 1.5rem;
  min-height:52px; display:inline-flex; align-items:center; }
@media (max-width:575.98px){
  .cal-head-actions{ width:100%; }
  .cal-new-btn{ flex:1 1 100%; justify-content:center; }
  .cal-settings-link{ order:2; }
}

/* --- Automatisch erzeugte Termine -------------------------------------- */
.cal-auto-card{ border-style:dashed; }
.cal-auto-note{ display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; color:var(--vm-ink-muted); }
.cal-locked{ background:var(--vm-surface-2); color:var(--vm-ink-muted);
  border:1px dashed var(--vm-border-strong); border-radius:var(--vm-r);
  padding:.55rem .7rem; font-size:.9rem; }

/* --- Terminliste (naechste Termine) ------------------------------------ */
.cal-list{ list-style:none; margin:0; padding:0; }
.cal-list-item{ display:flex; gap:.7rem; padding:.6rem .2rem; border-top:1px solid var(--vm-border);
  text-decoration:none; color:inherit; }
.cal-list li:first-child .cal-list-item{ border-top:0; }
.cal-list-item:hover{ background:var(--vm-surface-2); }
.cal-list-item.is-done{ opacity:.6; }
.cal-list-item.is-mine{ background:var(--vm-danger-bg); border-radius:8px; }
.cal-list-item.is-mine .cal-list-title{ color:var(--vm-danger-ink); }
.cal-list-date{ flex:0 0 auto; text-align:center; min-width:3rem; display:flex; flex-direction:column; }
.cal-list-date small{ color:var(--vm-ink-subtle); }
.cal-list-title{ font-weight:600; display:flex; align-items:center; gap:.4rem; }
.cal-list-meta{ font-size:.8rem; color:var(--vm-ink-muted); }

/* --- Tierverwaltung: Medizin-Liste --- */
.med-item{ display:flex; gap:.75rem; justify-content:space-between; align-items:flex-start;
  padding:.7rem 0; border-top:1px solid var(--vm-border); }
.med-item:first-of-type{ border-top:0; }
.med-item-main{ min-width:0; flex:1; }
.med-item-actions{ display:flex; gap:.3rem; flex:0 0 auto; }
.med-files{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.med-file{ display:inline-flex; align-items:center; gap:.25rem; background:var(--vm-surface-2);
  border:1px solid var(--vm-border); border-radius:999px; padding:.1rem .3rem .1rem .6rem; font-size:.8rem; }
.med-file a{ text-decoration:none; }
.med-file-open{ max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.med-file form{ display:inline; }
.med-file button{ border:0; background:transparent; color:var(--vm-danger); cursor:pointer; line-height:1; padding:0 .2rem; }

/* --- Tierverwaltung: Duplikate/Merge --- */
.dup-group{ display:flex; flex-direction:column; gap:.4rem; }
.dup-t{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.dup-namen{ display:flex; flex-direction:column; gap:.2rem; }
/* Prüfdialog: die beiden Tiere nebeneinander, auf dem Smartphone untereinander.
   minmax(0,1fr) statt 1fr, sonst sprengt ein breites Bild die Spalte. */
.dup-vergleich{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
@media (min-width:576px){ .dup-vergleich{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
/* Deckel gegen sehr hohe Bilder: sonst wird aus einem quadratischen Foto in der
   breiten Spalte ein 600-px-Klotz und die Daten darunter fallen aus dem Blick. */
.dup-bild{ aspect-ratio:4/3; max-block-size:300px; background:var(--vm-surface-alt,#f3f5f1);
  border:1px solid var(--vm-border); border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; margin-block-end:.5rem; }
/* Auf dem Smartphone stehen die Tiere untereinander - kleinere Bilder halten
   beide mit ihren Daten in Reichweite eines kurzen Wischens. */
@media (max-width:575.98px){ .dup-bild{ max-block-size:190px; } }
.dup-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.dup-bild-ph{ font-size:2rem; color:var(--vm-text-muted,#6b7a70); text-align:center; }
.dup-seite-name{ font-size:1.05rem; }
.dup-daten{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .6rem; margin:0; font-size:.9rem; }
.dup-daten dt{ font-weight:600; color:var(--vm-text-muted,#6b7a70); }
.dup-daten dd{ margin:0; overflow-wrap:anywhere; }
/* Die beiden Entscheidungen sichtbar auseinanderziehen - sie sind nicht gleichwertig. */
.dup-aktionen{ justify-content:space-between; gap:.5rem; }
.merge-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; align-items:center;
  padding:.5rem 0; border-top:1px solid var(--vm-border); }
.merge-label{ font-weight:600; font-size:.9rem; }
.merge-opt{ display:flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border:1px solid var(--vm-border);
  border-radius:var(--vm-r); cursor:pointer; margin:0; font-size:.9rem; }
.merge-opt:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050); }
@media (max-width:575.98px){ .merge-row{ grid-template-columns:1fr; } }

/* --- Trello-Import: Check --- */
.tv-check-img{ aspect-ratio:4/3; background:var(--vm-surface-2); border-radius:var(--vm-r-lg,14px);
  overflow:hidden; display:flex; align-items:center; justify-content:center; }
.tv-check-img img{ width:100%; height:100%; object-fit:contain; }
.tv-check-thumbs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.tv-check-thumbs img{ width:56px; height:56px; object-fit:cover; border-radius:8px; cursor:pointer;
  border:2px solid transparent; }
.tv-check-thumbs img:hover{ border-color:var(--vm-primary); }
.tv-locpick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.5rem; }
.tv-locopt{ display:flex; align-items:center; justify-content:center; min-height:52px; padding:.5rem;
  border:1.5px solid var(--vm-border); border-radius:var(--vm-r); cursor:pointer; text-align:center;
  font-weight:600; margin:0; }
.tv-locopt input{ position:absolute; opacity:0; width:0; height:0; }
.tv-locopt.is-sel{ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); }

/* WhatsApp-Erinnerungen (Vereinsgrün, dezent) */
.wa-card{ border-color:var(--vm-primary); }
.wa-title{ color:var(--vm-primary-strong); }
.cal-wa{ display:inline-flex; vertical-align:middle; color:var(--vm-primary); }
.cal-wa.is-sent{ color:var(--vm-primary-strong); }
.cal-wa.is-error{ color:#b02a2a; }
.cal-wa-badge{ display:inline-flex; align-items:center; gap:.25rem; font-size:.72rem;
  color:var(--vm-primary-strong); background:var(--vm-primary-050); border-radius:6px;
  padding:.05rem .4rem; margin-top:.15rem; width:fit-content; }
.cal-wa-badge.is-error{ color:#b02a2a; background:#fdecec; }

/* ---------- Profilbilder ---------- */
.vm-avatar{ border-radius:50%; object-fit:cover; flex:0 0 auto; display:inline-block;
  background:var(--vm-surface-2); vertical-align:middle; }
.vm-avatar-leer{ display:inline-flex; align-items:center; justify-content:center;
  color:var(--vm-ink-subtle); overflow:hidden; }
.vm-avatar-leer svg{ width:100%; height:100%; display:block; }

/* ---------- Personenauswahl (Verantwortliche / WhatsApp-Empfaenger) ------- */
.pw-trigger{ display:flex; align-items:center; gap:.5rem; width:100%;
  min-height:var(--vm-control-h); padding:.4rem .75rem; text-align:start;
  background:var(--vm-surface); border:1px solid var(--vm-border-strong);
  border-radius:var(--vm-r); color:var(--vm-ink); }
.pw-trigger:hover{ border-color:var(--vm-primary); }
.pw-trigger:focus-visible{ outline:2px solid var(--vm-primary); outline-offset:2px; }
.pw-trigger.is-wa{ border-color:var(--vm-primary); background:var(--vm-primary-050); }
.pw-namen{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pw-icon{ margin-inline-start:auto; color:var(--vm-ink-subtle); }
.pw-icon svg{ width:18px; height:18px; display:block; }

.pw-head{ display:flex; align-items:center; gap:.5rem; padding:.8rem 1rem;
  border-bottom:1px solid var(--vm-border); }
.pw-modal.is-wa .pw-head{ background:var(--vm-primary-050); }
.pw-wa-logo{ border-radius:6px; flex:0 0 auto; }
.pw-body{ background:var(--vm-bg); }
.pw-liste{ display:flex; flex-direction:column; gap:.3rem; }
.pw-person{ display:flex; align-items:center; gap:.7rem; padding:.5rem .65rem;
  background:var(--vm-surface); border:1px solid var(--vm-border);
  border-radius:var(--vm-r); cursor:pointer; }
.pw-person:hover{ border-color:var(--vm-primary); }
.pw-person input{ flex:0 0 auto; width:18px; height:18px; accent-color:var(--vm-primary); }
.pw-avatar{ flex:0 0 auto; display:flex; }
.pw-text{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.pw-name{ font-weight:600; }
.pw-meta{ font-size:.78rem; color:var(--vm-ink-muted); }
.pw-warn{ color:var(--vm-warning-ink); }
.wa-immer{ flex:0 0 auto; align-self:center; font-size:.8rem; font-weight:600;
  color:var(--vm-primary-strong); background:var(--vm-primary-050);
  padding:.25rem .6rem; border-radius:var(--vm-pill); }

/* ==========================================================================
   Unterbringung (Modul „Unterbringung", Teil der Tierverwaltung)
   Mobile zuerst: Karten statt Tabellen, grosse Bedienziele, das Tierfoto im
   Vordergrund. Keine Funktion darf nur beim Ueberfahren mit der Maus
   erscheinen - am Telefon gibt es kein Hover.
   ========================================================================== */
.ub-villa{ margin-block:1.75rem; }
.ub-villa-head{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
  justify-content:space-between; margin-bottom:.75rem; }
.ub-villa-zahlen{ display:flex; flex-wrap:wrap; gap:.9rem; color:var(--vm-ink-muted); font-size:.9rem; }
.ub-villa-zahlen b{ color:var(--vm-ink); font-variant-numeric:tabular-nums; }

.ub-bereiche{ display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:576px){ .ub-bereiche{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } }

.ub-kachel{ display:flex; flex-direction:column; gap:.5rem; padding:1rem 1.05rem;
  background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r);
  text-decoration:none; color:inherit; min-height:104px; transition:box-shadow .15s, transform .15s; }
.ub-kachel:hover, .ub-kachel:focus-visible{ box-shadow:0 6px 20px rgba(16,24,40,.10); transform:translateY(-2px); }
.ub-kachel-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.ub-kachel-name{ font-weight:700; font-size:1.02rem; }
.ub-kachel-art{ color:var(--vm-ink-subtle); font-size:.8rem; white-space:nowrap; }
.ub-kachel-zahlen{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:auto; }
.ub-zahl{ color:var(--vm-ink-muted); font-size:.86rem; }
.ub-zahl b{ color:var(--vm-ink); font-variant-numeric:tabular-nums; }

.ub-summe{ display:flex; flex-wrap:wrap; gap:1.1rem; padding:.85rem 1rem; margin-bottom:1rem;
  background:var(--vm-surface-2); border-radius:var(--vm-r); }

/* Tierkarte: Foto gross, ganze Zeile anklickbar, Aktion daneben. */
.ub-tiere{ display:grid; gap:.6rem; grid-template-columns:1fr; }
@media (min-width:768px){ .ub-tiere{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } }

.ub-tier{ display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem;
  background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r); }
.ub-tier-link{ display:flex; align-items:center; gap:.7rem; flex:1 1 auto; min-width:0;
  text-decoration:none; color:inherit; }
.ub-tier-img{ flex:0 0 auto; width:56px; height:56px; border-radius:12px; overflow:hidden;
  background:var(--vm-surface-2); display:grid; place-items:center; }
.ub-tier-img.is-gross{ width:84px; height:84px; border-radius:16px; }
.ub-tier-img img{ width:100%; height:100%; object-fit:cover; }
.ub-tier-txt{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.ub-tier-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ub-tier-meta{ color:var(--vm-ink-muted); font-size:.82rem; }
/* 44px Mindesthoehe: am Telefon zuverlaessig mit dem Daumen treffbar. */
.ub-tier-move{ flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center; }

/* Kaefiggruppe: die gemeinsame Belegung muss auf einen Blick erkennbar sein. */
.ub-kaefig{ border:1px solid var(--vm-border); border-inline-start:4px solid var(--vm-info-ink);
  border-radius:var(--vm-r); padding:.8rem .9rem; margin-block:.75rem; background:var(--vm-surface); }
.ub-kaefig-kopf{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  justify-content:space-between; margin-bottom:.6rem; }
.ub-kaefig-titel{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; }
.ub-kaefig-titel svg{ color:var(--vm-info-ink); }

.ub-treffer{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; }
.ub-treffer + .ub-treffer{ border-top:1px solid var(--vm-border); }

.ub-kopf-tier{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.ub-form-card{ max-width:640px; }
.ub-form-card .form-select, .ub-form-card .form-control{ min-height:44px; }
.ub-radios{ display:flex; flex-wrap:wrap; gap:.6rem; }
.ub-radio{ display:inline-flex; align-items:center; gap:.5rem; padding:.65rem .9rem; min-height:44px;
  border:1px solid var(--vm-border); border-radius:var(--vm-r); background:var(--vm-surface); cursor:pointer; }
.ub-radio:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050);
  color:var(--vm-primary-strong); font-weight:600; }
.ub-radio input{ margin:0; }

.ub-details summary{ cursor:pointer; font-weight:600; padding:.6rem 0; min-height:44px; }
.ub-form{ max-width:520px; }
.ub-insassen{ margin:0; padding-inline-start:1.2rem; }
.ub-fehlt{ list-style:none; padding:0; margin:0; color:var(--vm-ink-muted); font-size:.9rem; }

/* -- Kaefigbestand (Phase 3) ------------------------------------------- */
.ub-kpi{ display:grid; gap:.6rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:576px){ .ub-kpi{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:992px){ .ub-kpi{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.ub-kpi-karte{ display:flex; flex-direction:column; gap:.15rem; padding:.85rem .9rem;
  background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r); }
.ub-kpi-num{ font-size:1.7rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.ub-kpi-lbl{ font-size:.82rem; color:var(--vm-ink-muted); }
/* Statusfarbe nur als Kante, nicht als einzige Information - die Beschriftung
   nennt den Zustand immer im Klartext. */
.ub-kpi-karte.is-einsatz{ border-inline-start:4px solid var(--vm-info-ink); }
.ub-kpi-karte.is-reinigung{ border-inline-start:4px solid var(--vm-warning-ink); }
.ub-kpi-karte.is-frei{ border-inline-start:4px solid var(--vm-success-ink); }
.ub-kpi-karte.is-problem{ border-inline-start:4px solid var(--vm-danger-ink); }

.ub-einsatz summary{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.ub-einsatz-name{ font-weight:600; }
.ub-aktion{ border:1px solid var(--vm-border); border-radius:var(--vm-r);
  background:var(--vm-surface); padding:.4rem .9rem; margin-block:.5rem; }
.ub-aktion summary{ padding-block:.6rem; }
.ub-aktion .ub-form{ padding-block-end:.8rem; }

.ub-bewegung{ display:grid; grid-template-columns:auto auto 1fr; gap:.4rem .75rem;
  align-items:baseline; padding:.7rem 1rem; }
.ub-bewegung + .ub-bewegung{ border-top:1px solid var(--vm-border); }
.ub-bew-datum{ color:var(--vm-ink-subtle); font-size:.82rem; white-space:nowrap; }
.ub-bew-menge{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ub-bew-menge.is-plus{ color:var(--vm-success-ink); }
.ub-bew-menge.is-minus{ color:var(--vm-danger-ink); }
.ub-bew-text{ display:flex; flex-direction:column; gap:.1rem; min-width:0; font-size:.9rem; }

.ub-blaettern{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  justify-content:space-between; margin-block:1rem; }
.ub-blaettern-info{ color:var(--vm-ink-muted); font-size:.88rem; }
.ub-blaettern-nav{ display:flex; align-items:center; gap:.6rem; }

/* -- Visuelle Raum- und Villaansicht (Phase 4) -------------------------- */
/* Grundsatz RTL: Texte, Knoepfe und Panels folgen der Leserichtung, die
   Raumgeometrie NICHT. Ein Raum bleibt derselbe Raum, egal in welcher Sprache
   man ihn ansieht - deshalb steht auf der Buehne bewusst `direction:ltr`. */
.ub-plan-huelle{ margin-block:1rem; }
.ub-plan-werkzeuge{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
.ub-plan-werkzeuge .btn{ min-height:40px; }

.ub-buehne{
  direction:ltr;                      /* Geometrie nie spiegeln */
  overflow:auto;                      /* Pan = natives Scrollen, auch auf Touch */
  -webkit-overflow-scrolling:touch;
  background:var(--vm-surface-2);
  border:1px solid var(--vm-border);
  border-radius:var(--vm-r);
  max-height:min(70vh,640px);
}
.ub-buehne--raum{ max-height:min(74vh,720px); }
.ub-buehne.is-zielwahl{ outline:3px dashed var(--vm-primary); outline-offset:-3px; }
.ub-plan, .ub-raum{ display:block; width:100%; height:auto; }

/* Gross anzeigen: App-interner Vollflaechenmodus, kein Browser-Vollbild. */
.ub-plan-huelle.is-gross{
  position:fixed; inset:0; z-index:1080; margin:0; padding:.6rem;
  background:var(--vm-surface); display:flex; flex-direction:column;
}
.ub-plan-huelle.is-gross .ub-buehne{ flex:1 1 auto; max-height:none; }
body.ub-grossmodus{ overflow:hidden; }

/* -- Villaplan --------------------------------------------------------- */
.ub-ebenen{ margin-block:.5rem 1rem; }
.ub-raumkachel{ cursor:pointer; }
.ub-raumkachel .ub-rk-sockel{ fill:#c9cfc4; opacity:.55; }
.ub-raumkachel .ub-rk-flaeche{ fill:#fff; stroke:#dfe3da; stroke-width:2; }
.ub-raumkachel:hover .ub-rk-flaeche,
.ub-raumkachel:focus-visible .ub-rk-flaeche{ stroke:var(--vm-primary); stroke-width:3; }
.ub-raumkachel:focus-visible{ outline:none; }
.ub-rk-name{ font:700 26px/1 system-ui,sans-serif; fill:var(--vm-ink); }
.ub-rk-art{ font:400 17px/1 system-ui,sans-serif; fill:var(--vm-ink-subtle); }
.ub-rk-zweck{ font:600 16px/1 system-ui,sans-serif; fill:var(--vm-info-ink); }
.ub-rk-zahl{ font:400 16px/1 system-ui,sans-serif; fill:var(--vm-ink-muted); }
.ub-rk-griff{ fill:var(--vm-primary); cursor:nwse-resize; }
.ub-raumkachel.is-zieht .ub-rk-flaeche{ stroke:var(--vm-primary); stroke-width:4; }
[data-modus="bearbeiten"] .ub-raumkachel{ cursor:grab; touch-action:none; }

/* -- Raum -------------------------------------------------------------- */
/* Leichte Aufsicht mit angedeuteter Wandhoehe. Das ist kein 3D: Der Boden
   liegt an seiner Stelle, darunter ein versetzter Sockel als Schattenwurf und
   darueber ein nach oben versetztes Band als Wandhoehe. Drei Polygone - mehr
   braucht es nicht, damit die Flaeche wie ein Raum wirkt und nicht wie ein
   Diagramm. */
.ub-raum-sockel{ fill:#b9b5a6; opacity:.45; }
.ub-wandhoehe{ fill:url(#ub-wandhoehe); }
.ub-boden{ fill:url(#ub-boden); }
.ub-fussleiste{ fill:none; stroke:#d8d2c0; stroke-width:10; stroke-linejoin:round; }
.ub-wand{ fill:none; stroke:#a9a294; stroke-width:16; stroke-linejoin:round; }
.ub-wand-innen{ fill:none; stroke:#efece1; stroke-width:5; stroke-linejoin:round; }
.ub-moebel{ filter:url(#ub-schatten); }
.ub-moebel-label{ font:500 15px/1 system-ui,sans-serif; fill:var(--vm-ink-subtle);
  text-anchor:middle; }

/* Kaefigstapel: jede Ebene versetzt, damit keine die andere verdeckt. */
.ub-kaefig-versatz{
  transform: translate(calc(var(--ebene,0) * 14px), calc(var(--ebene,0) * -58px));
}
.ub-kaefige{ filter:url(#ub-schatten-klein); }
.ub-k-kante{ fill:#9fada0; }
.ub-k-korpus{ fill:url(#ub-kaefig-front); }
.ub-k-rahmen{ fill:none; stroke:#7f8d7d; stroke-width:3.5; }
.ub-k-gitter line{ stroke:#8d9a8c; stroke-width:2.2; stroke-linecap:round; opacity:.55; }
.ub-k-ebene rect{ fill:var(--vm-info-ink); }
.ub-k-ebene text{ font:700 15px/1 system-ui,sans-serif; fill:#fff; text-anchor:middle; }
.ub-k-tierpos{ transform: translate(calc(12px + var(--i,0) * 38px), 12px); }
.ub-k-tierph{ fill:#e4e2d8; }
.ub-k-tierph-txt{ font-size:22px; text-anchor:middle; }
.ub-k-mehr circle{ fill:var(--vm-ink); opacity:.85; }
.ub-k-mehr text{ font:700 15px/1 system-ui,sans-serif; fill:#fff; text-anchor:middle; }
.ub-k-name{ font:600 15px/1 system-ui,sans-serif; fill:var(--vm-ink);
  text-anchor:middle; }
.ub-k-leer{ font:400 16px/1 system-ui,sans-serif; fill:var(--vm-ink-subtle);
  text-anchor:middle; }
.ub-kaefig-g{ cursor:pointer; }
.ub-kaefig-g:focus-visible .ub-k-rahmen{ stroke:var(--vm-primary); stroke-width:6; }
.ub-kaefig-g.is-beweglich{ cursor:grab; touch-action:none; }
.ub-kaefig-g.is-zieht{ opacity:.85; }
.ub-kaefig-g.is-zieht .ub-k-rahmen{ stroke:var(--vm-primary); stroke-width:6; }

/* -- Ablage unpositionierter Kaefige ----------------------------------- */
.ub-ablage{ margin-block:1rem; padding:.9rem 1rem; background:var(--vm-warning-bg);
  border:1px solid #e6cf8a; border-radius:var(--vm-r); }
.ub-ablage-liste{ display:flex; flex-wrap:wrap; gap:.6rem; }
.ub-ablage-kaefig{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start;
  min-height:44px; padding:.6rem .75rem; background:var(--vm-surface);
  border:2px solid var(--vm-border); border-radius:var(--vm-r); cursor:pointer; }
.ub-ablage-kaefig:disabled{ cursor:default; opacity:.85; }
.ub-ablage-kaefig.is-gewaehlt{ border-color:var(--vm-primary); background:var(--vm-primary-050); }
.ub-ak-titel{ font-weight:700; font-size:.85rem; }
.ub-ak-tiere{ display:flex; gap:.25rem; }
.ub-ak-tier{ width:34px; height:34px; border-radius:9px; overflow:hidden;
  background:var(--vm-surface-2); display:grid; place-items:center; }
.ub-ak-tier img{ width:100%; height:100%; object-fit:cover; }
.ub-ak-namen{ font-size:.8rem; color:var(--vm-ink-muted); max-width:16rem; }

/* -- Frei lebende Tiere ------------------------------------------------ */
.ub-freipanel{ margin-block:1rem; padding:.9rem 1rem; background:var(--vm-surface);
  border:1px solid var(--vm-border); border-radius:var(--vm-r); }
.ub-freitiere{ display:flex; flex-wrap:wrap; gap:.7rem; }
.ub-freitier{ display:flex; flex-direction:column; align-items:center; gap:.25rem;
  width:76px; text-decoration:none; color:inherit; }
.ub-ft-bild{ width:64px; height:64px; border-radius:16px; overflow:hidden;
  background:var(--vm-surface-2); display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(16,24,40,.12); }
.ub-ft-bild img{ width:100%; height:100%; object-fit:cover; }
.ub-ft-name{ font-size:.8rem; text-align:center; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:76px; }

/* -- Speicherzustand --------------------------------------------------- */
.ub-status{ margin-inline-start:.6rem; font-weight:600; font-size:.86rem; }
.ub-status.is-laeuft{ color:var(--vm-ink-muted); }
.ub-status.is-ok{ color:var(--vm-success-ink); }
.ub-status.is-fehler{ color:var(--vm-danger-ink); }

/* -- Käfigdialog ------------------------------------------------------- */
.ub-dialog{ position:fixed; inset:0; z-index:1090; background:rgba(16,24,40,.45);
  display:flex; align-items:flex-end; justify-content:center; padding:1rem; }
.ub-dialog[hidden]{ display:none; }
@media (min-width:576px){ .ub-dialog{ align-items:center; } }
.ub-dialog-karte{ background:var(--vm-surface); border-radius:var(--vm-r);
  width:min(100%,520px); max-height:80vh; overflow:auto; padding:1rem; }
.ub-dialog-kopf{ display:flex; justify-content:space-between; align-items:center;
  gap:1rem; margin-bottom:.75rem; }
.ub-dialog-zeile{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center;
  padding:.6rem 0; border-top:1px solid var(--vm-border); }
.ub-dialog-zeile.is-aktiv{ background:var(--vm-primary-050); border-radius:var(--vm-r);
  padding-inline:.6rem; }
.ub-dialog-ebene{ font-weight:600; font-size:.88rem; flex:1 1 100%; }
.ub-dialog-tiere{ display:flex; flex-wrap:wrap; gap:.4rem; }
.ub-dialog-tier{ padding:.35rem .6rem; min-height:36px; display:inline-flex;
  align-items:center; background:var(--vm-surface-2); border-radius:999px;
  text-decoration:none; color:inherit; font-size:.86rem; }
.ub-dialog-aktionen{ display:flex; gap:.4rem; margin-inline-start:auto; }
.ub-dialog-aktionen .btn{ min-width:44px; min-height:44px; }

/* -- Raumeditor -------------------------------------------------------- */
.ub-editor{ margin-block:1rem; padding:.9rem 1rem; background:var(--vm-surface);
  border:1px solid var(--vm-border); border-radius:var(--vm-r); }
.ub-palette{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.ub-pal-knopf{ display:flex; flex-direction:column; align-items:center; gap:.2rem;
  min-width:72px; min-height:64px; padding:.45rem; background:var(--vm-surface);
  border:2px solid var(--vm-border); border-radius:var(--vm-r); cursor:pointer;
  font-size:.74rem; }
.ub-pal-knopf.is-gewaehlt{ border-color:var(--vm-primary); background:var(--vm-primary-050); }
.ub-editor-aktionen{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ub-editor-aktionen .btn{ min-height:44px; }
.ub-moebel-el{ touch-action:none; }
[data-modus="bearbeiten"] .ub-moebel-el{ cursor:grab; }
.ub-moebel-el.is-gewaehlt use{ outline:3px solid var(--vm-primary); }
.ub-el-griff{ fill:var(--vm-primary); cursor:nwse-resize; display:none; }
[data-modus="bearbeiten"] .ub-el-griff{ display:block; }
.ub-villa-link{ color:inherit; text-decoration:none; }
.ub-villa-link:hover{ text-decoration:underline; }

/* -- Room Builder (Phase 4B) ------------------------------------------- */
/* Zwei getrennte Bearbeitungsarten, in der Oberflaeche deutlich verschieden
   gefaerbt: Wer eine Katze umsetzen will, soll nicht aus Versehen den Esstisch
   verschieben. */
.ub-modus{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block:.75rem; }
.ub-modus .btn{ min-height:44px; }
.ub-modusband{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center;
  padding:.7rem 1rem; border-radius:var(--vm-r); margin-block:.75rem; }
.ub-modusband.is-raum{ background:#efe7d8; border:1px solid #ddceb0; }
.ub-modusband.is-unterbringung{ background:var(--vm-info-bg);
  border:1px solid #cfe2df; }
.ub-modusband .ub-mb-aktionen{ margin-inline-start:auto; display:flex; gap:.5rem;
  flex-wrap:wrap; }

.ub-rb{ display:grid; gap:1rem; grid-template-columns:1fr; margin-block:1rem; }
/* Auf schmalen Geraeten zuerst der Raum, dann die Palette - man will sehen,
   was man baut, bevor man das Werkzeug waehlt. */
.ub-rb > .ub-rb-seite{ order:2; }
.ub-rb > .ub-plan-huelle{ order:1; margin-block:0; }
@media (min-width:992px){
  .ub-rb{ grid-template-columns:270px minmax(0,1fr); align-items:start; }
  .ub-rb > .ub-rb-seite{ order:0; position:sticky; top:1rem; max-height:calc(100vh - 2rem);
    overflow:auto; }
  .ub-rb > .ub-plan-huelle{ order:0; }
}
.ub-rb-seite{ background:var(--vm-surface); border:1px solid var(--vm-border);
  border-radius:var(--vm-r); padding:.9rem 1rem; }
.ub-rb-gruppe + .ub-rb-gruppe{ margin-top:.9rem; }
.ub-rb-gruppe h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--vm-ink-subtle); margin:0 0 .45rem; }
.ub-palette{ display:flex; flex-wrap:wrap; gap:.45rem; }
.ub-pal-knopf{ display:flex; flex-direction:column; align-items:center; gap:.2rem;
  min-width:70px; min-height:64px; padding:.4rem; background:var(--vm-surface);
  border:2px solid var(--vm-border); border-radius:var(--vm-r); cursor:pointer;
  font-size:.72rem; }
.ub-pal-knopf.is-gewaehlt{ border-color:var(--vm-primary); background:var(--vm-primary-050); }
.ub-formen{ display:flex; flex-wrap:wrap; gap:.4rem; }
.ub-rb-hinweis{ font-size:.82rem; color:var(--vm-ink-muted); margin:.5rem 0 0; }
.ub-rb-eigenschaften{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.ub-rb-eigenschaften .btn{ min-width:44px; min-height:44px; }

/* Eckpunkte der Raumform. Nur im Room Builder sichtbar. */
.ub-ecke{ fill:var(--vm-primary); stroke:#fff; stroke-width:3; cursor:move;
  touch-action:none; }
.ub-kante-plus{ fill:#fff; stroke:var(--vm-primary); stroke-width:3;
  cursor:copy; touch-action:none; }
.ub-kante-plus-txt{ font:700 18px/1 system-ui,sans-serif; fill:var(--vm-primary);
  text-anchor:middle; pointer-events:none; }
.ub-moebel-el{ touch-action:none; }
[data-modus="raum"] .ub-moebel-el{ cursor:grab; }
[data-modus="raum"] .ub-kaefige{ opacity:.45; pointer-events:none; }
[data-modus="unterbringung"] .ub-moebel{ opacity:.6; pointer-events:none; }
.ub-moebel-el.is-gewaehlt use{ outline:3px solid var(--vm-primary); }
.ub-el-griff{ fill:var(--vm-primary); cursor:nwse-resize; display:none; }
[data-modus="raum"] .ub-el-griff{ display:block; }
.ub-villa-link{ color:inherit; text-decoration:none; }
.ub-villa-link:hover{ text-decoration:underline; }

/* -- Room Builder: Formfehler und Mobilfeinschliff (Phase 4B) ---------- */
.ub-formwarnung{ margin:.5rem 0 0; padding:.5rem .7rem; border-radius:var(--vm-r);
  background:var(--vm-danger-bg); color:var(--vm-danger-ink);
  border:1px solid #eecccc; font-size:.84rem; font-weight:600; }
.ub-ecke.is-fehler{ fill:var(--vm-danger-ink); }
/* Die Wandkontur wird rot, solange sich die Form ueberschneidet - man sieht
   den Knoten, bevor man auf Speichern drueckt. */
.ub-raum.ub-form-kaputt .ub-wand{ stroke:var(--vm-danger-ink); }

/* Auf schmalen Geraeten bekommt die Raumflaeche jeden Millimeter: der Kasten
   verliert seinen Innenabstand, und die Buehne darf hoeher werden. Bauen ist
   am Desktop bequemer - brauchbar muss es hier trotzdem bleiben. */
@media (max-width:575.98px){
  .ub-rb-seite{ padding:.7rem .75rem; }
  .ub-plan-huelle{ margin-inline:calc(-1 * var(--vm-gap-mobil,.75rem)); }
  .ub-buehne{ border-radius:0; border-inline:0; }
  .ub-buehne--raum{ max-height:min(64vh,560px); }
  [data-modus="raum"] .ub-buehne--raum{ max-height:min(70vh,620px); }
  .ub-pal-knopf{ min-width:64px; }
}
/* Groessere Fingerziele fuer Ecken, Wand-Plus und Skaliergriff. Auf einem
   Zeigegeraet reichen kleinere Punkte, am Telefon nicht. */
/* Die Radien setzt der Editor selbst (siehe _editor.js) - `r` als
   CSS-Eigenschaft wird nicht ueberall zuverlaessig unterstuetzt. */

/* -- Bereichsverwaltung und Zweckverlauf (Phase 5) --------------------- */
.ub-villawahl{ display:inline-flex; border:1px solid var(--vm-border);
  border-radius:var(--vm-r); overflow:hidden; margin-block:.5rem 1rem; }
.ub-villawahl a{ padding:.7rem 1.1rem; min-height:44px; display:inline-flex;
  align-items:center; text-decoration:none; color:var(--vm-ink);
  background:var(--vm-surface); font-weight:600; }
.ub-villawahl a + a{ border-inline-start:1px solid var(--vm-border); }
.ub-villawahl a.is-aktiv{ background:var(--vm-primary); color:#fff; }

.ub-ebene{ margin-block:1.25rem; }
.ub-ebene-kopf{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
  justify-content:space-between; margin-bottom:.5rem;
  padding-bottom:.35rem; border-bottom:1px solid var(--vm-border); }
.ub-ebene-zahlen{ color:var(--vm-ink-muted); font-size:.84rem; }

.ub-kachel-ico{ margin-inline-end:.3rem; }
.ub-kachel-ohnezweck{ color:var(--vm-ink-subtle); font-size:.8rem; font-style:italic; }
.ub-kachel-hinweis{ display:flex; align-items:flex-start; gap:.3rem;
  color:var(--vm-warning-ink); font-size:.78rem; line-height:1.3; }
.ub-kachel.is-inaktiv{ opacity:.6; }
.ub-zahl-link{ text-decoration:none; color:var(--vm-ink-muted); }
.ub-zahl-link:hover{ text-decoration:underline; }

/* Verwaltungsliste: Karten statt Tabelle - am Telefon ist eine breite
   Tabelle unbrauchbar. */
.ub-verwaltung{ display:grid; gap:.6rem; }
.ub-vzeile{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center;
  padding:.85rem 1rem; background:var(--vm-surface);
  border:1px solid var(--vm-border); border-radius:var(--vm-r); }
.ub-vzeile.is-inaktiv{ background:var(--vm-surface-2); }
.ub-vz-haupt{ display:flex; flex-direction:column; gap:.15rem; flex:1 1 240px;
  min-width:0; }
.ub-vz-name{ font-weight:700; text-decoration:none; color:inherit; }
.ub-vz-name:hover{ text-decoration:underline; }
.ub-vz-meta{ color:var(--vm-ink-muted); font-size:.82rem; }
.ub-vz-aktionen{ display:flex; flex-wrap:wrap; gap:.35rem; }
.ub-vz-aktionen .btn{ min-height:40px; }

.ub-zweckverlauf{ list-style:none; margin:0; padding:0; }
.ub-zweckverlauf li{ display:flex; flex-wrap:wrap; gap:.25rem .75rem;
  padding:.5rem 0; border-top:1px solid var(--vm-border); }
.ub-zweckverlauf li:first-child{ border-top:0; }
.ub-zweckverlauf li.is-aktuell{ font-weight:600; }
.ub-zv-zeit{ color:var(--vm-ink-subtle); font-size:.82rem; min-width:11rem; }
.ub-zv-notiz{ color:var(--vm-ink-muted); font-size:.82rem; flex:1 1 100%; }

/* ==========================================================================
   Krankheitsrisiken, Ereignisse und Kontaktketten (Phase 6)
   ========================================================================== */

/* Der Warnbalken ist bewusst kraeftiger als eine Bootstrap-Meldung: Er sagt
   nicht „zur Kenntnis", sondern „hier darf nichts hinein". Farbe allein traegt
   die Aussage aber nicht - der Text nennt den Grund und das Symbol wiederholt
   ihn fuer alle, die Rot nicht als Warnung lesen. */
.ub-risiko-banner{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.85rem 1rem; margin-bottom:1rem;
  border:1px solid #eec7c7; border-inline-start:4px solid var(--vm-danger-ink);
  border-radius:12px; background:var(--vm-danger-bg); color:var(--vm-danger-ink);
}
.ub-risiko-banner > svg{ flex:0 0 auto; margin-top:.1rem; }
.ub-risiko-text{ min-width:0; font-size:.92rem; line-height:1.45; }
.ub-risiko-text p:last-child{ margin-bottom:0; }
.ub-risiko-text a{ color:inherit; font-weight:600; }
.ub-risiko-liste{ list-style:none; margin:.25rem 0 .5rem; padding:0;
  display:flex; flex-direction:column; gap:.3rem; }
.ub-risiko-liste li{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }

/* Marke auf der Bereichskachel: darf umbrechen. `.vm-badge` ist sonst
   `white-space:nowrap` - bei einem langen Krankheitsnamen laeuft damit die
   gesamte Seite horizontal ueber. */
.ub-kachel-risiko{
  white-space:normal; max-width:100%; text-align:start; line-height:1.3;
}

/* Gesperrter Raum im Villa-Plan: rote Umrandung, Warndreieck und der Name der
   Krankheit. Drei Signale statt eines - wer Rot nicht als Warnung liest, sieht
   trotzdem das Dreieck und den Text. */
.ub-raumkachel.is-gesperrt .ub-rk-flaeche{
  stroke:var(--vm-danger-ink); stroke-width:3; fill:#fdf1f1;
}
.ub-rk-sperre path{ fill:var(--vm-danger-ink); }
.ub-rk-sperre .ub-rk-sperre-ruf{ fill:none; stroke:#fff; stroke-width:2.2;
  stroke-linecap:round; }
.ub-rk-sperrtext{ fill:var(--vm-danger-ink); font-size:15px; font-weight:600; }

.ub-ereignisliste{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.5rem; }
.ub-ereignisliste li{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ub-ereignisliste.is-alt li{ opacity:.75; }
.ub-ereignis-neu > summary{ display:inline-block; list-style:none; cursor:pointer; }
.ub-ereignis-neu > summary::-webkit-details-marker{ display:none; }

.ub-ereignis-status{ font-weight:600; margin-bottom:.35rem; }
.ub-ereignis-status.is-aktiv, .ub-ereignis-status.is-reinigung{ color:var(--vm-danger-ink); }
.ub-ereignis-status.is-verdacht, .ub-ereignis-status.is-wartet{ color:var(--vm-warning-ink); }
.ub-ereignis-status.is-freigegeben{ color:var(--vm-success-ink); }

/* Kontaktliste: auf dem Telefon eine Zeile je Tier, die umbrechen darf. Eine
   Tabelle waere hier falsch - sie zwingt zum seitlichen Scrollen. */
.ub-expositionen{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.5rem; }
.ub-exp{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  padding:.5rem .65rem; border:1px solid var(--vm-border); border-radius:10px; }
.ub-exp.is-fall{ border-color:#eec7c7; background:var(--vm-danger-bg); }
.ub-exp > a{ font-weight:600; }
.ub-exp-notiz{ flex:1 1 100%; font-size:.85rem; color:var(--vm-ink-muted); }
.ub-exp-form{ display:flex; gap:.35rem; flex:1 1 220px; min-width:0; }
.ub-exp-form .form-control{ min-width:0; }
.ub-expositionen.is-gestrichen .ub-exp{ opacity:.7; }

/* Die Ausnahme wird optisch abgesetzt, damit niemand sie versehentlich
   ausfuellt: Sie ist kein weiteres Formularfeld, sondern eine Entscheidung. */
.ub-ausnahme{
  padding:.75rem .85rem; margin-bottom:1rem;
  border:1px dashed #e0b9b9; border-radius:10px; background:var(--vm-danger-bg);
}
.ub-ausnahme .form-text{ color:var(--vm-danger-ink); opacity:.85; }

.tv-krankheiten{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.65rem; }
.tv-krankheit{ padding:.65rem .8rem; border:1px solid var(--vm-border);
  border-radius:10px; border-inline-start-width:4px; }
.tv-krankheit.is-risiko3{ border-inline-start-color:var(--vm-danger-ink); }
.tv-krankheit.is-risiko2{ border-inline-start-color:var(--vm-warning-ink); }
.tv-krankheit.is-risiko1{ border-inline-start-color:var(--vm-neutral-ink); }
.tv-k-kopf{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.tv-k-meta{ font-size:.85rem; color:var(--vm-ink-muted); margin-top:.2rem; }
.tv-k-notiz{ margin:.4rem 0 .3rem; font-size:.92rem; }

/* ==========================================================================
   Umzugsplanung (Phase 7)
   ========================================================================== */

.ub-plankarten{ display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.ub-plankarte{
  display:flex; flex-direction:column; gap:.4rem;
  padding:.85rem 1rem; border:1px solid var(--vm-border);
  border-inline-start-width:4px; border-radius:12px;
  background:var(--vm-surface); text-decoration:none; color:inherit;
}
.ub-plankarte:hover{ box-shadow:var(--vm-sh-sm); border-color:var(--vm-border-strong); }
.ub-plankarte.is-entwurf{ border-inline-start-color:var(--vm-neutral-ink); }
.ub-plankarte.is-bereit{ border-inline-start-color:var(--vm-info-ink); }
.ub-plankarte.is-umsetzung{ border-inline-start-color:var(--vm-warning-ink); }
.ub-plankarte.is-abgeschlossen{ border-inline-start-color:var(--vm-success-ink); }
.ub-plankarte.is-verworfen{ opacity:.7; }
.ub-pk-kopf{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  justify-content:space-between; }
.ub-pk-name{ font-weight:700; }
.ub-pk-meta{ font-size:.85rem; color:var(--vm-ink-muted); }
.ub-pk-zahlen{ display:flex; flex-wrap:wrap; gap:.6rem; font-size:.85rem; }

/* Zugkarte: die Zeile „von → nach" ist die Aussage, alles andere ordnet sich
   darunter. Bewusst keine Tabelle - diese Karten werden auf dem Telefon
   gelesen, oft einhaendig. */
.ub-zugkarte{
  padding:.85rem 1rem; margin-bottom:.6rem;
  border:1px solid var(--vm-border); border-inline-start-width:4px;
  border-radius:12px; background:var(--vm-surface);
}
.ub-zugkarte.is-umgesetzt{ border-inline-start-color:var(--vm-success-ink); opacity:.85; }
.ub-zugkarte.is-abgewichen{ border-inline-start-color:var(--vm-warning-ink); }
.ub-zugkarte.is-verworfen{ border-inline-start-color:var(--vm-neutral-ink); opacity:.7; }
.ub-zk-kopf{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.ub-zk-tier{ font-weight:700; font-size:1.05rem; }
.ub-zk-weg{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline;
  margin-top:.2rem; font-size:1.02rem; }
.ub-zk-von{ color:var(--vm-ink-muted); }
.ub-zk-pfeil{ color:var(--vm-primary); font-weight:700; }
.ub-zk-nach{ font-weight:600; }
.ub-zk-meta{ font-size:.85rem; color:var(--vm-ink-muted); margin-top:.15rem; }
.ub-zk-wer{ display:block; font-size:.8rem; color:var(--vm-ink-muted); }
.ub-zk-abweichung{
  margin-top:.5rem; padding:.5rem .65rem; border-radius:8px;
  background:var(--vm-warning-bg); color:var(--vm-warning-ink);
  font-size:.9rem;
}
.ub-zk-hinweis{
  display:flex; gap:.4rem; align-items:flex-start; margin-top:.45rem;
  font-size:.88rem; line-height:1.35;
}
.ub-zk-hinweis > svg{ flex:0 0 auto; margin-top:.15rem; }
.ub-zk-hinweis.is-blockiert{ color:var(--vm-danger-ink); }
.ub-zk-hinweis.is-warnung{ color:var(--vm-warning-ink); }
.ub-zk-aktionen{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  margin:-.2rem 0 .9rem; }
/* Vor Ort grosse Ziele: die Umsetzung passiert mit einer Katze auf dem Arm. */
.ub-zk-arbeit{ margin-top:-.3rem; margin-bottom:1.2rem; }
.ub-zk-arbeit .btn-lg{ flex:1 1 auto; min-height:52px; }
.ub-zk-verwerfen{ display:flex; gap:.4rem; flex:1 1 100%; }
.ub-zk-verwerfen .form-control{ min-width:0; }

.ub-bedarfsliste{ list-style:none; margin:0 0 .5rem; padding:0;
  display:flex; flex-direction:column; gap:.35rem; }
.ub-bedarfsliste li{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ub-bedarfsliste li.is-knapp{ font-weight:600; }
.ub-bereichslinks{ display:flex; flex-wrap:wrap; gap:.4rem; }

.ub-tierauswahl{ display:flex; flex-direction:column; gap:.2rem;
  max-height:60vh; overflow-y:auto; margin-bottom:.75rem; }
.ub-ta-zeile{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:.55rem .5rem; border-radius:8px; cursor:pointer; min-height:44px; }
.ub-ta-zeile:hover{ background:var(--vm-surface-2); }
.ub-ta-zeile.is-verplant{ background:var(--vm-info-bg); }
.ub-ta-name{ font-weight:600; }
.ub-ta-meta{ flex:1 1 100%; font-size:.82rem; color:var(--vm-ink-muted); }
.ub-radios{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ub-radio{ display:flex; gap:.4rem; align-items:center; padding:.5rem .75rem;
  border:1px solid var(--vm-border); border-radius:10px; min-height:44px;
  cursor:pointer; }
.ub-radio:has(input:checked){ border-color:var(--vm-primary);
  background:var(--vm-primary-050); font-weight:600; }

/* Der Planungsmodus darf nie mit dem Ist-Zustand verwechselt werden. Balken,
   Rahmenfarbe und gestrichelte geplante Kaefige sagen dasselbe dreimal. */
.ub-planmodus-balken{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
  padding:.6rem .9rem; margin-bottom:1rem; border-radius:10px;
  background:var(--vm-warning-bg); color:var(--vm-warning-ink);
  border:1px solid #ecdcb4; border-inline-start:5px solid var(--vm-warning-ink);
}
.ub-pm-label{ font-weight:800; letter-spacing:.06em; }
.ub-pm-text{ font-size:.9rem; }
.ub-plan-huelle--planung{ outline:2px dashed var(--vm-warning-ink);
  outline-offset:3px; border-radius:12px; }
.ub-stapel--geplant{ opacity:.9; }
.ub-gk-flaeche{ fill:#fffaf0; stroke:var(--vm-warning-ink); stroke-width:2.5;
  stroke-dasharray:9 6; }
.ub-gk-label{ fill:var(--vm-warning-ink); font-size:13px; font-weight:700;
  letter-spacing:.04em; }
.ub-gk-tier{ fill:var(--vm-ink); font-size:15px; }

.ub-plangruppen{ display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.ub-plangruppe{ padding:.7rem .85rem; border:1px solid var(--vm-border);
  border-radius:10px; }
.ub-plangruppe h3{ font-size:.95rem; display:flex; gap:.4rem;
  align-items:center; margin-bottom:.4rem; }
.ub-plangruppe ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.3rem; font-size:.92rem; }
/* Nur der Name wird gestrichen - Marke und Zusatzzeile bleiben lesbar. */
.ub-plangruppe li.is-geht{ color:var(--vm-ink-muted); }
.ub-plangruppe li.is-geht > .ub-pg-name{ text-decoration:line-through; }
.ub-plangruppe.is-rein{ border-style:dashed; border-color:var(--vm-info-ink); }
.ub-plangruppe li.is-kommt{ font-weight:600; }
.ub-pg-von{ display:block; font-size:.8rem; color:var(--vm-ink-muted); }
.ub-zahl-raus b{ color:var(--vm-warning-ink); }
.ub-zahl-rein b{ color:var(--vm-info-ink); }
.ub-gruendeliste{ list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; }
.ub-gruendeliste li{ display:flex; gap:.4rem; align-items:flex-start; }
.ub-gruendeliste .vm-badge{ flex:0 0 auto; }

/* Tierbild auf der Zugkarte: nur zur schnellen Wiedererkennung, deshalb klein
   und in einer Reihe. Bei einem ganzen Kaefig mehrere kleine Bilder, ab dem
   fuenften eine Zahl - sonst waechst die Karte ins Unlesbare. */
.ub-zk-kopf{ align-items:flex-start; }
.ub-zk-bilder{ display:flex; gap:.2rem; flex:0 0 auto; align-items:center; }
.ub-zk-bild img, .ub-zk-bild .tv-thumb-ph{
  width:38px; height:38px; border-radius:8px; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--vm-surface-2); font-size:1rem;
}
.ub-zk-mehr{ font-size:.8rem; font-weight:600; color:var(--vm-ink-muted);
  padding-inline-start:.15rem; }
.ub-zk-titel{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  min-width:0; }
.ub-zugkarte.is-gruppe{ border-inline-start-color:var(--vm-info-ink); }
.ub-gruppentiere{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.5rem; }
.ub-gt-tier{ display:flex; gap:.35rem; align-items:center; font-size:.9rem; }
.ub-ta-bild img, .ub-ta-bild .tv-thumb-ph{
  width:34px; height:34px; border-radius:7px; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--vm-surface-2);
}
.ub-abw-titel{ display:flex; gap:.5rem; align-items:center; }

/* ==========================================================================
   Aenderungsinformationen, Vertraeglichkeit, Medikation (Phase 8)
   ========================================================================== */

/* Feed statt Tabelle: Diese Seite liest jemand am Abend auf dem Sofa, um zu
   sehen, was tagsueber passiert ist. */
.ub-feed{ display:flex; flex-direction:column; gap:.6rem; }
.ub-feed-eintrag{
  padding:.8rem 1rem; border:1px solid var(--vm-border);
  border-inline-start-width:4px; border-inline-start-color:var(--vm-border);
  border-radius:12px; background:var(--vm-surface);
}
.ub-feed-eintrag.is-neu{ border-inline-start-color:var(--vm-info-ink);
  background:var(--vm-surface); }
.ub-fe-kopf{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin-bottom:.25rem; }
.ub-fe-zeit{ font-size:.82rem; color:var(--vm-ink-muted); }
.ub-fe-text{ margin:0 0 .3rem; line-height:1.45; }
.ub-fe-grund, .ub-fe-override{ margin:0 0 .3rem; font-size:.88rem;
  color:var(--vm-ink-muted); }
.ub-fe-override{ color:var(--vm-danger-ink); }
.ub-fe-fuss{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }

/* Vertraeglichkeit: zwei Gruppen, keine Tabelle. */
.tv-vertraeglich{ display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.tv-vt-gruppe{ padding:.7rem .85rem; border:1px solid var(--vm-border);
  border-radius:10px; border-inline-start-width:4px; }
.tv-vt-gruppe.is-gut{ border-inline-start-color:var(--vm-success-ink); }
.tv-vt-gruppe.is-schlecht{ border-inline-start-color:var(--vm-warning-ink); }
.tv-vt-liste{ list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.4rem; }
.tv-vt-zeile{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  min-height:40px; }
.tv-vt-bild img, .tv-vt-bild .tv-thumb-ph{
  width:32px; height:32px; border-radius:7px; object-fit:cover;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--vm-surface-2);
}
.tv-vt-notiz{ flex:1 1 100%; font-size:.83rem; color:var(--vm-ink-muted); }

/* Medikation: Karte je Behandlung, gross genug fuer den Daumen. */
.tv-medikationen{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.6rem; }
.tv-medikation{ padding:.7rem .85rem; border:1px solid var(--vm-border);
  border-radius:10px; border-inline-start-width:4px;
  border-inline-start-color:var(--vm-primary); }
.tv-medikation.is-vergangen{ border-inline-start-color:var(--vm-border-strong);
  opacity:.75; }
.tv-med-kopf{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.tv-med-name{ font-weight:700; font-size:1.02rem; }
.tv-med-zeile{ font-size:.92rem; margin-top:.15rem; }
.tv-med-zeitraum{ font-size:.85rem; color:var(--vm-ink-muted); }
.tv-med-hinweis{ margin:.35rem 0 .3rem; font-size:.9rem; }
.tv-med-aktionen{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.4rem; }

/* Gebuendelte Feed-Eintraege: zugeklappt eine Zeile, aufgeklappt die
   Einzelmeldungen. Rein visuell - gespeichert bleibt jeder Hinweis fuer sich,
   und „gelesen" gilt weiterhin einzeln. */
.ub-feed-eintrag.is-buendel > summary{ list-style:none; cursor:pointer; }
.ub-feed-eintrag.is-buendel > summary::-webkit-details-marker{ display:none; }
.ub-fe-namen{ display:block; font-size:.85rem; color:var(--vm-ink-muted);
  margin-bottom:.3rem; }
.ub-fe-aufklappen{ display:inline-block; font-size:.85rem; font-weight:600;
  color:var(--vm-primary); }
.ub-feed-eintrag.is-buendel[open] .ub-fe-aufklappen::after{ content:" ▴"; }
.ub-feed-eintrag.is-buendel:not([open]) .ub-fe-aufklappen::after{ content:" ▾"; }
.ub-fe-einzeln{ margin-top:.6rem; padding-top:.5rem;
  border-top:1px solid var(--vm-border);
  display:flex; flex-direction:column; gap:.5rem; }
.ub-hinweiszeile{ padding-inline-start:.6rem;
  border-inline-start:2px solid var(--vm-border); }
.ub-hinweiszeile.is-neu{ border-inline-start-color:var(--vm-info-ink); }