/* =========================================================================
   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); }
/* ---------- Benutzerverwaltung ----------
   Kopf: Titel und Knöpfe brechen auf schmalen Bildschirmen sauber um.
   Liste < 992 px: eine Zeile je Person - Bild, Name, „Bearbeiten“. */
.vm-ukopf{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.75rem 1rem; }
.vm-ulist{ list-style:none; margin:0; padding:0; overflow:hidden; }
.vm-uzeile{ display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; min-height:3.6rem; }
.vm-uzeile + .vm-uzeile{ border-top:1px solid var(--vm-border); }
.vm-uzeile .vm-avatar{ flex:0 0 auto; }
.vm-uname{ flex:1 1 auto; min-width:0; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.vm-uzeile .btn{ flex:0 0 auto; }

.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; }

/* Belegkarten der Übersicht (_belegkarte.html, < 992 px): jeder Beleg eine eigene Karte.
   Hierarchie: Händler + Betrag → Datum → Kategorie + Status → Belegnummer. Nichts wird
   abgeschnitten: Namen und Kategorien brechen um; Betrag und Belegnummer bleiben am Stück
   und rutschen bei Platzmangel in eine eigene Zeile. Status nie nur über Farbe (Badge
   mit Symbol und Text). */
.vm-rliste{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
@media (min-width:576px){ .vm-rliste{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.vm-rliste > li{ min-width:0; }
.vm-rcard.vm-rcard--karte{ height:100%; align-content:start; gap:.4rem; padding:.8rem .95rem;
  background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r-lg);
  box-shadow:var(--vm-sh-sm); -webkit-tap-highlight-color:rgba(56,107,60,.12); }
.vm-rcard.vm-rcard--karte:hover{ background:var(--vm-surface); border-color:var(--vm-border-strong); }
.vm-rcard.vm-rcard--karte:active{ background:var(--vm-surface-2); }
.vm-rcard.vm-rcard--karte:focus-visible{ outline:3px solid var(--vm-primary); outline-offset:2px; }
.vm-rcard--karte .vm-rc-top{ flex-wrap:wrap; row-gap:.1rem; }
.vm-rcard--karte .vm-rc-m{ flex:1 1 7rem; min-width:0; font-weight:700; line-height:1.3;
  color:var(--vm-ink); overflow-wrap:anywhere; }
.vm-rcard--karte .vm-rc-amt{ flex:0 0 auto; margin-inline-start:auto; font-size:1.05rem; font-weight:700;
  color:var(--vm-primary-strong); }
.vm-rcard--karte .vm-rc-zeile{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .8rem;
  font-size:.88rem; color:var(--vm-ink-muted); }
.vm-rcard--karte .vm-rc-datum{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.vm-rcard--karte .vm-rc-nr{ font-family:var(--vm-mono); font-size:.76rem; color:var(--vm-ink-subtle);
  white-space:nowrap; }
.vm-rcard--karte .vm-rc-unten{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.35rem .75rem; }
/* Basis = eigene Textbreite: kurze Kategorie bleibt neben dem Status, eine lange
   bekommt die ganze Zeile und der Status rutscht darunter - statt Wortsalat in einer
   schmalen Spalte. */
.vm-rcard--karte .vm-rc-kat{ flex:1 1 auto; min-width:0; font-size:.88rem; color:var(--vm-ink-muted);
  overflow-wrap:anywhere; }
.vm-rcard--karte .vm-badge{ flex:0 0 auto; }

/* ---------- 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--unten{ margin-top:1.25rem; }
.fm-abschnitt{ margin:1.6rem 0 .6rem; font-size:1.05rem; font-weight:600; color:var(--vm-ink); }
.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; }

/* ===== 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 =====
   Seit der Fussnavigation nur noch fuer angemeldete Seiten OHNE `vm-has-bnav`
   (z. B. kuenftige Druckansichten) - sonst ersetzt die Leiste unten den Kopf. */
.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)
   ========================================================================== */

/* --- 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); }
/* Privater Termin („Nur fuer mich sichtbar"): Schloss in Warnrot, damit er
   sich auf einen Blick von den uebrigen Eintraegen abhebt. */
.ev-lock{ flex:0 0 auto; display:inline-flex; color:var(--vm-danger); }
.cal-lock{ flex:0 0 auto; display:inline-flex; color:var(--vm-danger); }

/* --- Monatsansicht: Terminzeile im Raster (_monat.html) ------------------- */
.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; }
}

/* --- 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); }



/* =========================================================================
   Mobile Fussnavigation (< 992 px): Apps | Platz | CAI | Platz | Mehr
   Ersetzt auf dem Smartphone die Kopfzeile und den schwebenden Apps-Knopf.
   Desktop (>= 992 px) bleibt unveraendert: dort ist alles hier ausgeblendet
   (display:none - damit auch nicht per Tastatur erreichbar).
   ========================================================================= */
:root{
  /* Masse der Leiste in CSS-Pixeln. Weisse Flaeche = Inhalt + Abstand unten. */
  --vm-bnav-inhalt:60px;                         /* Oberkante bis Unterkante der Beschriftungen */
  --vm-bnav-symbol:26px;
  --vm-bnav-luecke:5px;                          /* Symbol bis Beschriftung - ueberall gleich */
  --vm-bnav-zeile:16px;                          /* Zeilenhoehe der Beschriftung */
  /* CAI-Flaeche (quadratisch): genau so hoch wie Symbol + Luecke + Beschriftung der
     Nachbarn - sitzt damit buendig im Balken und ragt nie darueber hinaus. */
  --vm-bnav-cai:calc(var(--vm-bnav-symbol) + 2px + var(--vm-bnav-luecke) + var(--vm-bnav-zeile));
  --vm-safe-b:env(safe-area-inset-bottom, 0px);  /* iPhone: Home-Balken */
  /* Luft unter den Beschriftungen: mit Home-Balken dessen Hoehe + 6 px, sonst
     (auch wenn iOS 0 meldet) mindestens 16 px. max() statt +: nie doppelt. */
  --vm-bnav-unten:max(calc(var(--vm-safe-b) + 6px), 16px);
  /* Ueberstand ueber der Leiste: keiner - auch CAI sitzt vollstaendig im Balken. */
  --vm-bnav-ueberstand:0px;
  /* Reservierter Platz = ganze Leiste inkl. Ueberstand und Sicherheitszone.
     mobilnav.js misst die tatsaechliche Hoehe nach und setzt den Wert inline. */
  --vm-bnav-space:calc(var(--vm-bnav-ueberstand) + var(--vm-bnav-inhalt) + var(--vm-bnav-unten) + 1px);
}
:root:lang(ar){ --vm-bnav-zeile:19px; }            /* arabische Schrift nicht abschneiden */
/* Hinter der iOS-Statusleiste: immer der solide Seitenhintergrund. html trägt ihn selbst
   (nicht nur über den body), und mobil deckt eine feste Fläche genau die Safe Area oben ab -
   scrollender Inhalt schiebt sich darunter statt sichtbar hinter die Statusleiste. Keine
   Transparenz, kein Blur. Was iOS selbst darüber zeichnet, kann die Seite nicht abstellen. */
html{ background-color:var(--vm-bg); }
@media (max-width:991.98px){
  body.vm-has-bnav::before{ content:""; position:fixed; inset-inline:0; inset-block-start:0; z-index:1035;
    height:env(safe-area-inset-top, 0px); background:var(--vm-bg); pointer-events:none; }
}
/* Notch im Querformat: Inhalte nicht unter die Kamera-Aussparung (viewport-fit=cover).
   Bewusst physisch links/rechts - die Aussparung haengt am Geraet, nicht an der Schrift. */
body{ padding-left:env(safe-area-inset-left, 0px); padding-right:env(safe-area-inset-right, 0px); }

.vm-bnav{ display:none; }
@media (max-width:991.98px){
  body.vm-has-bnav{
    padding-bottom:var(--vm-bnav-space);
    padding-top:env(safe-area-inset-top, 0px);
  }
  body.vm-has-bnav .navbar-vm{ display:none; }
  /* Modulmenue steht unter „Mehr → In dieser App" - keine zweite Leiste oben. */
  body.vm-has-bnav .vm-sidebar > .vm-nav{ display:none; }
  body.vm-has-bnav .vm-sidebar:not(:has(> :not(.vm-nav))){ display:none; }
  /* Klebende Formularaktionen (Einreise-Assistent) sitzen ueber der Leiste. */
  body.vm-has-bnav .ein-actions-sticky{ bottom:var(--vm-bnav-space); }

  .vm-bnav{
    display:block; position:fixed; inset-inline:0; inset-block-end:0; z-index:1030;
    /* Oben frei fuer die hoeher beginnende CAI-Flaeche; der freie Streifen
       daneben laesst Tipps auf den Inhalt durch. Die weisse Leiste ist die Liste. */
    padding-top:var(--vm-bnav-ueberstand);
    pointer-events:none;
  }
  /* Bildschirmtastatur offen (mobilnav.js): Leiste weg, kein reservierter Platz. */
  body.vm-kb-offen{ --vm-bnav-space:0px; }
  body.vm-kb-offen .vm-bnav{ display:none; }
}
/* Hülle um <main>: ausserhalb der installierten App ohne eigene Box (Layout wie ohne Hülle). */
.vm-seite{ display:contents; }
/* Installierte App (html.vm-installiert, mobilnav.js): Die Seite selbst scrollt nicht mehr, nur .vm-seite.
   Grund: Scrollt die Seite, lässt iOS 26 in der App feste Elemente zum Teil mit dem Inhalt
   mitwandern - die Fussleiste stand dann mitten im Bild, auch ohne Tastatur (Video 31.10.2026;
   WebKit-Bug 297779). Ohne Seitenscroll bleibt sie, wo iOS sie zeichnet: unten. Die Leiste liegt
   ausserhalb der scrollenden Fläche; der Platz für sie steht am Ende des Inhalts (::after).
   Nicht in Safari (dort soll die Browserleiste beim Scrollen kleiner werden) und nicht im festen
   Kalender-Layout (scrollt ohnehin nicht). */
@media screen and (max-width:991.98px){
  html.vm-installiert:has(> body.vm-has-bnav:not(.vm-kal-fest)){ height:100%; overflow:hidden; overscroll-behavior:none; }
  html.vm-installiert > body.vm-has-bnav:not(.vm-kal-fest){ height:100%; min-height:0; overflow:hidden;
    display:flex; flex-direction:column; padding-bottom:0; }
  html.vm-installiert > body.vm-has-bnav:not(.vm-kal-fest) > .vm-seite{ display:block; flex:1 1 auto; min-height:0;
    overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; }
  html.vm-installiert > body.vm-has-bnav:not(.vm-kal-fest) > .vm-seite::after{ content:""; display:block;
    height:var(--vm-bnav-space); }
}
.vm-bnav-liste{
  pointer-events:auto;
  list-style:none; margin:0; box-sizing:border-box;
  height:calc(var(--vm-bnav-inhalt) + var(--vm-bnav-unten) + 1px);
  /* Breite Bildschirme: Punkte mittig auf hoechstens 640 px, Flaeche voll breit.
     Seitlich physisch links/rechts: die Kamera-Aussparung haengt am Geraet. */
  padding-top:0; padding-bottom:var(--vm-bnav-unten);
  padding-left:max(8px, env(safe-area-inset-left, 0px), calc((100% - 640px) / 2));
  padding-right:max(8px, env(safe-area-inset-right, 0px), calc((100% - 640px) / 2));
  background:var(--vm-surface);
  border-top:1px solid var(--vm-border);
  box-shadow:0 -6px 18px -12px rgba(20,30,24,.18);
  display:grid; grid-template-columns:repeat(var(--vm-bnav-spalten, 5), minmax(0, 1fr));
  /* Feste Zeilenhoehe: Die hoehere CAI-Spalte waechst nach oben (in den
     reservierten Ueberstand) statt die Beschriftungen nach unten zu schieben. */
  grid-template-rows:var(--vm-bnav-inhalt);
  align-items:stretch;
}
.vm-bnav-platz{ display:flex; min-width:0; }
/* Alle Punkte gleich gebaut: Symbol, gleiche Luecke, Beschriftung - unten
   buendig, damit die Beschriftungen eine gemeinsame Grundlinie haben. */
.vm-bnav-el{
  position:relative; flex:1 1 auto; min-width:0; min-height:48px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:var(--vm-bnav-luecke);
  padding:0 2px; margin:0; border:0; border-radius:var(--vm-r);
  background:none; color:var(--vm-ink-muted); font:inherit; text-decoration:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.vm-bnav-ico{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:calc(var(--vm-bnav-symbol) + 2px); height:calc(var(--vm-bnav-symbol) + 2px);
}
.vm-bnav-ico .vm-ico{ width:var(--vm-bnav-symbol); height:var(--vm-bnav-symbol); display:block; }
.vm-bnav-txt{
  flex:0 0 auto;              /* nie stauchen - die hoehere CAI-Spalte waechst nach oben */
  max-width:100%; padding-inline:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.78rem; line-height:var(--vm-bnav-zeile); font-weight:500; letter-spacing:.005em;
}
:lang(ar) .vm-bnav-txt{ font-size:.8rem; letter-spacing:0; }
@media (max-width:359.98px){                         /* 320er-Geraete: Beschriftung passt ganz */
  .vm-bnav-txt{ font-size:.72rem; letter-spacing:0; padding-inline:1px; }
}
.vm-bnav-el:hover{ color:var(--vm-ink); text-decoration:none; }
/* Aktiv: Vereinsgruen, kraeftigere Schrift und eine kleine Marke an der
   Oberkante - nie nur Farbe, aber ohne breite Hintergrundflaeche. */
.vm-bnav-el.is-aktiv{ color:var(--vm-primary); }
.vm-bnav-el.is-aktiv .vm-bnav-txt{ font-weight:700; }
.vm-bnav-el.is-aktiv::before{
  content:""; position:absolute; inset-block-start:0; inset-inline-start:50%;
  width:22px; height:3px; margin-inline-start:-11px;
  border-radius:0 0 3px 3px; background:var(--vm-primary);
}
.vm-bnav-el:focus-visible{ outline:3px solid color-mix(in srgb, var(--vm-primary) 45%, white); outline-offset:-3px; }
/* CAI in der Mitte: quadratische Flaeche im KI-Verlauf (nie Vereinsgruen) mit
   weisser Roboter-Katze und farbigem Schatten - ohne sichtbare Beschriftung
   (Name per aria-label), mittig in der Spalte und buendig mit Symbol +
   Beschriftung der Nachbarn: ragt nicht ueber den Balken hinaus.
   CAI ist eine Aktion - nie als aktuelle Seite markiert. */
.vm-bnav-cai{ color:var(--vm-ink); }
.cai-verlaufsschrift{
  background:var(--cai-schrift); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vm-bnav-cai-knopf{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--vm-bnav-cai); height:var(--vm-bnav-cai); border-radius:16px;
  background:var(--cai-verlauf); color:#fff;   /* weisse Bildmarke (currentColor) */
  box-shadow:var(--cai-schatten);
}
.vm-bnav-cai-knopf .cai-logo{ width:28px; height:28px; display:block; }
.vm-bnav-cai:hover .vm-bnav-cai-knopf,
.vm-bnav-cai[aria-expanded="true"] .vm-bnav-cai-knopf{ filter:saturate(1.12) brightness(.95); }
.vm-bnav-cai:focus-visible{ outline:none; }
.vm-bnav-cai:focus-visible .vm-bnav-cai-knopf{ outline:3px solid var(--cai-ring); outline-offset:2px; }
@media (max-width:991.98px) and (orientation:landscape) and (max-height:500px){
  :root{ --vm-bnav-inhalt:50px; --vm-bnav-symbol:22px; --vm-bnav-luecke:3px; }
  :root:lang(ar){ --vm-bnav-zeile:18px; }
  .vm-bnav-cai-knopf{ border-radius:12px; }
  .vm-bnav-cai-knopf .cai-logo{ width:24px; height:24px; }
}
[dir="rtl"] .vm-ico-richtung{ transform:scaleX(-1); }

/* ---------- Menues von unten („Mehr", CAI) ---------- */
.vm-sheet.offcanvas-bottom{
  --bs-offcanvas-height:auto;
  max-height:calc(100vh - 2.5rem);
  max-height:calc(100dvh - 2.5rem);
  border:0; border-start-start-radius:18px; border-start-end-radius:18px;
  box-shadow:0 -8px 30px rgba(20,30,24,.18);
  display:flex; flex-direction:column;
}
.vm-sheet-kopf{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:18px 8px; padding-inline:18px 12px; flex:0 0 auto;
}
.vm-sheet-kopf::before{   /* Griff - rein optisch */
  content:""; position:absolute; inset-block-start:7px; inset-inline-start:50%;
  width:38px; height:4px; margin-inline-start:-19px; border-radius:2px; background:var(--vm-border-strong);
}
.vm-sheet-titel{ font-size:1.1rem; font-weight:700; margin:0; }
.vm-sheet-zu{
  flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:var(--vm-surface-2); color:var(--vm-ink);
}
.vm-sheet-zu .vm-ico{ width:22px; height:22px; }
.vm-sheet-zu:hover{ background:var(--vm-border); }
.vm-sheet-inhalt{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:2px 12px calc(16px + var(--vm-safe-b));
}
.vm-mgruppe + .vm-mgruppe{ margin-top:14px; }
.vm-mgruppe-titel{
  margin:8px 8px 6px; font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--vm-ink-subtle);
}
.vm-mgruppe-modul{ text-transform:none; letter-spacing:0; font-weight:600; }
.vm-mliste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.vm-mzeile{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 10px;
  border-radius:var(--vm-r); color:var(--vm-ink); text-decoration:none; font-weight:500;
}
a.vm-mzeile:hover{ background:var(--vm-surface-2); color:var(--vm-ink); text-decoration:none; }
.vm-mzeile.is-aktuell{ background:var(--vm-primary-050); color:var(--vm-primary-strong); font-weight:600; }
.vm-mzeile-ico{
  flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--vm-surface-2); color:var(--vm-primary-strong);
}
.vm-mzeile-ico .vm-ico{ width:21px; height:21px; }
.vm-mzeile-text{ flex:1 1 auto; min-width:0; }
.vm-mzeile-pfeil{ color:var(--vm-ink-subtle); display:inline-flex; }
.vm-mzeile-pfeil .vm-ico{ width:18px; height:18px; }
.vm-mzeile--sprache{ flex-wrap:wrap; }
.vm-sprachwahl{ display:flex; gap:6px; margin-inline-start:auto; flex-wrap:wrap; }
.vm-sprachwahl form{ margin:0; }
.vm-sprachknopf{
  min-height:40px; padding:4px 12px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--vm-border-strong); border-radius:var(--vm-pill); background:var(--vm-surface);
  color:var(--vm-ink); font-size:.88rem;
}
.vm-sprachknopf.is-aktiv{ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); font-weight:600; }
.vm-konto{ display:flex; align-items:center; gap:12px; padding:4px 10px 10px; }
.vm-konto-text{ display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.vm-konto-label{ font-size:.75rem; color:var(--vm-ink-subtle); }
.vm-konto-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.vm-konto-login{ font-size:.82rem; color:var(--vm-ink-muted); }
/* „In dieser App": die Modul-Seitenleiste, hier als senkrechte Liste. */
.vm-sheet .vm-nav{ flex-direction:column; overflow:visible; gap:2px; padding:0; }
.vm-sheet .vm-nav a{
  white-space:normal; border:0; min-height:48px; padding:6px 10px; gap:12px;
  color:var(--vm-ink); font-size:1rem; font-weight:500;
}
.vm-sheet .vm-nav a svg{ width:21px; height:21px; color:var(--vm-primary-strong); }
.vm-sheet .vm-nav a.active{ border:0; background:var(--vm-primary-050); color:var(--vm-primary-strong); font-weight:600; }
.vm-sheet .vm-nav .vm-nav-sep{ display:block; }
.vm-sheet .fm-storage{ display:none; }
.vm-abmelden{ margin-top:16px; padding-top:12px; border-top:1px solid var(--vm-border); }
.vm-abmelden-knopf{
  width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--vm-border-strong); border-radius:var(--vm-r); background:var(--vm-surface);
  color:var(--vm-danger-ink); font-weight:600;
}
.vm-abmelden-knopf .vm-ico{ width:20px; height:20px; }
.vm-abmelden-knopf:hover{ background:var(--vm-danger-bg); }
@media (min-width:992px){
  #vmMehr{ display:none !important; }   /* „Mehr" gibt es nur mobil */
}

/* Vorschau unter „Reihenfolge ändern" (gleiche Vorlage wie die echte Leiste) */
.vm-bnav-vorschau{
  max-width:420px; padding-top:var(--vm-bnav-ueberstand);
  pointer-events:none; user-select:none;
}
.vm-bnav-vorschau:not(:has(.vm-bnav-cai)){ padding-top:0; }
.vm-bnav-vorschau .vm-bnav-liste{
  height:calc(var(--vm-bnav-inhalt) + 13px); padding:0 8px 12px;
  border:1px solid var(--vm-border); border-radius:var(--vm-r-lg); box-shadow:none;
}
.nav-anpassen-aktionen{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.nav-anpassen-aktionen .btn{ min-height:44px; display:inline-flex; align-items:center; gap:.35rem; }
.nav-anpassen-aktionen .btn-vm{ margin-inline-start:auto; }
.nav-anpassen-aktionen .vm-ico{ width:18px; height:18px; }

/* App-Uebersicht: Vereinslogo dezent im Inhalt (mobil, ohne Kopfzeile) */
.vm-launcher-logo{ display:block; height:34px; width:auto; margin:0 0 .9rem; }

/* Vollflaechige Ebenen nicht unter Notch/Home-Balken (viewport-fit=cover) */
.tv-lightbox{ padding:max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
                     max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
.tv-lightbox-close{ inset-block-start:calc(14px + env(safe-area-inset-top, 0px)); }
.ub-plan-huelle.is-gross{ padding:max(.6rem, env(safe-area-inset-top, 0px)) max(.6rem, env(safe-area-inset-right, 0px))
                                  max(.6rem, env(safe-area-inset-bottom, 0px)) max(.6rem, env(safe-area-inset-left, 0px)); }
.ub-dialog{ padding:max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
                    max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); }

/* =========================================================================
   CAI – die Katzen-KI (Dialog, Antwortkarten, Diagramme)
   Mobil: Bottom Sheet ueber der Fussnavigation. Desktop: Seitenleiste rechts
   (bei Arabisch links). Keine laufenden Animationen ausser dem kurzen
   „denkt nach"-Hinweis (bei reduzierter Bewegung statisch).
   ========================================================================= */
/* KI-Farbwelt: CAI ist nie Vereinsgruen, sondern traegt global einen eigenen
   Regenbogen-Verlauf (Orange - Pink - Violett - Blau - Cyan, bewusst ohne Gruen).
   Voller Verlauf nur hinter Symbolen; hinter Schrift der dunklere Verlauf
   (Weiss darauf >= 4.6:1). Schrift und Links in --cai-tinte (7.1:1 auf Weiss). */
:root{
  --cai-verlauf:linear-gradient(135deg, #f97316 0%, #ec4899 27%, #8b5cf6 52%, #3b82f6 78%, #06b6d4 100%);
  --cai-verlauf-text:linear-gradient(120deg, #c026d3 0%, #7c3aed 38%, #4f46e5 70%, #2563eb 100%);
  --cai-regenbogen:linear-gradient(110deg, #f59e0b 0%, #f97316 16%, #ec4899 36%, #8b5cf6 58%, #3b82f6 80%, #06b6d4 100%);
  --cai-schrift:linear-gradient(90deg, #be185d 0%, #6d28d9 50%, #1d4ed8 100%);
  --cai-zart:linear-gradient(135deg, #fdf2f8 0%, #f5f3ff 50%, #eff6ff 100%);
  --cai-tinte:#6d28d9; --cai-hell:#f5f3ff; --cai-rand:#c4b5fd; --cai-ring:#8b5cf6;
  --cai-schatten:0 8px 18px -8px rgba(124,58,237,.75), 0 3px 8px -3px rgba(236,72,153,.35);
  /* Diagramm: eine Reihe, eine Farbfamilie (Violett -> Indigo, >= 4.2:1 auf Weiss) */
  --cai-saeule:linear-gradient(180deg, #8b5cf6 0%, #6366f1 100%);
  --cai-saeule-aktiv:linear-gradient(180deg, #6d28d9 0%, #4338ca 100%);
}

.navbar-vm .navbar-cai{
  display:inline-flex; align-items:center; gap:.4rem; border:0; background:var(--cai-verlauf-text);
  font-weight:700; letter-spacing:.03em; margin-inline-end:.35rem; opacity:1;
  box-shadow:0 2px 8px -2px rgba(76,29,149,.55);
}
.navbar-vm .navbar-cai:hover{ background:var(--cai-verlauf-text); filter:brightness(1.1); }

.cai-sheet{
  background-image:
    radial-gradient(70% 150px at 0% 0%, rgba(236,72,153,.09), rgba(236,72,153,0) 100%),
    radial-gradient(70% 170px at 100% 0%, rgba(59,130,246,.10), rgba(59,130,246,0) 100%),
    linear-gradient(180deg, rgba(139,92,246,.07) 0%, rgba(139,92,246,0) 200px);
  background-repeat:no-repeat;
}
.cai-sheet .vm-sheet-kopf::before{ background:var(--cai-regenbogen); }
.cai-sheet :focus-visible{ outline-color:var(--cai-ring); }
.cai-sheet.offcanvas-bottom{
  height:min(88vh, 780px); height:min(88dvh, 780px);
  max-height:calc(var(--vm-vv-h, 100dvh) - .5rem);
  inset-block-end:var(--vm-kb-inset, 0px);
}
@media (min-width:992px){
  .cai-sheet.offcanvas-bottom{
    inset-block:0; inset-inline-start:auto; inset-inline-end:0;
    width:440px; max-width:100vw; height:100vh; height:100dvh; max-height:none;
    border-radius:0; border-inline-start:1px solid var(--vm-border);
    transform:translateX(100%);
  }
  [dir="rtl"] .cai-sheet.offcanvas-bottom{ transform:translateX(-100%); }
  .cai-sheet .vm-sheet-kopf::before{ display:none; }
}
.cai-kopf{ align-items:flex-start; }
.cai-marke{ display:flex; align-items:center; gap:10px; min-width:0; flex:1 1 auto; }
.cai-marke .cai-logo{ flex:0 0 auto; }
/* Bildmarke auf eigener Flaeche (Kopf, Avatare, Hinweis): Verlauf per CSS */
.cai-logo--flaeche{ background:var(--cai-verlauf); border-radius:30.6%; }
.cai-titel{ display:flex; align-items:center; color:var(--cai-tinte); line-height:1; }
.cai-wortmarke{ display:block; width:auto; }
.cai-untertitel{ margin:3px 0 0; font-size:.86rem; color:var(--vm-ink-muted); line-height:1.35; }
.cai-neu{
  flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cai-hell); color:var(--cai-tinte);
}
.cai-neu .vm-ico{ width:22px; height:22px; }
.cai-verlauf{ display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.cai-start-hinweis{ margin:4px 4px 8px; font-size:.82rem; color:var(--vm-ink-subtle); font-weight:600; }
.cai-vorschlaege{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cai-vorschlag{
  width:100%; min-height:48px; padding:10px 14px; text-align:start;
  border:1px solid var(--vm-border-strong); border-radius:14px; background:var(--vm-surface);
  color:var(--vm-ink); font-weight:500; line-height:1.35;
}
.cai-vorschlag:hover, .cai-vorschlag:focus-visible{
  border-color:transparent;
  background:linear-gradient(#faf8ff, #faf8ff) padding-box, var(--cai-regenbogen) border-box;
}
.cai-start-sicher{
  display:flex; gap:8px; align-items:flex-start; margin:14px 4px 0;
  font-size:.8rem; color:var(--vm-ink-muted); line-height:1.4;
}
.cai-start-ico{ flex:0 0 auto; margin-top:-1px; }

.cai-eingabe{
  flex:0 0 auto; display:flex; align-items:flex-end; gap:8px;
  padding:8px 12px 4px; border-top:1px solid var(--vm-border); background:var(--vm-surface);
}
.cai-eingabe textarea{
  flex:1 1 auto; min-height:44px; max-height:132px; resize:none; overflow-y:auto;
  padding:10px 14px; border:1.5px solid transparent; border-radius:22px;
  font:inherit; font-size:1rem; line-height:1.4; color:var(--vm-ink);
  /* Regenbogenrand: in Ruhe zart, beim Schreiben kraeftig */
  background:linear-gradient(var(--vm-surface), var(--vm-surface)) padding-box,
             linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)) border-box,
             var(--cai-regenbogen) border-box;
}
.cai-eingabe textarea:focus{
  outline:none; box-shadow:0 0 0 4px rgba(139,92,246,.16);
  background:linear-gradient(var(--vm-surface), var(--vm-surface)) padding-box, var(--cai-regenbogen) border-box;
}
.cai-senden{
  flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cai-verlauf); color:#fff; box-shadow:0 4px 12px -4px rgba(124,58,237,.6);
}
.cai-senden:disabled{ opacity:.55; }
.cai-senden .vm-ico{ width:22px; height:22px; }
.cai-fuss{
  flex:0 0 auto; margin:0; padding:2px 16px calc(8px + var(--vm-safe-b));
  font-size:.74rem; color:var(--vm-ink-subtle); text-align:center; background:var(--vm-surface);
}

/* Nachrichten */
.cai-msg{ display:flex; gap:8px; align-items:flex-start; }
.cai-msg--ich{ justify-content:flex-end; }
.cai-blase{
  margin:0; max-width:85%; padding:9px 13px; border-radius:16px; border-end-end-radius:5px;
  background:var(--cai-zart); color:var(--vm-ink); white-space:pre-wrap; overflow-wrap:anywhere;
}
.cai-msg-avatar{ flex:0 0 auto; margin-top:2px; }
.cai-msg-inhalt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px; }
.cai-antwort{ margin:2px 0 0; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.cai-msg.is-fehler .cai-antwort{ color:var(--vm-danger-ink); }
.cai-denkt{ display:flex; align-items:center; gap:8px; color:var(--vm-ink-muted); font-size:.9rem; }
.cai-punkte{ display:inline-flex; gap:3px; }
.cai-punkte i{ width:5px; height:5px; border-radius:50%; background:#ec4899; opacity:.3;
  animation:cai-punkt 1.2s ease-in-out infinite; }
.cai-punkte i:nth-child(2){ background:#8b5cf6; animation-delay:.2s; }
.cai-punkte i:nth-child(3){ background:#3b82f6; animation-delay:.4s; }
@keyframes cai-punkt{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cai-punkte i{ animation:none; opacity:.6; } }

/* Karten */
.cai-karte{
  border:1px solid var(--vm-border); border-radius:14px; background:var(--vm-surface);
  padding:12px; box-shadow:var(--vm-sh-sm);
}
.cai-karte-kopf{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cai-karte-titel{ margin:0; font-size:.95rem; font-weight:700; flex:1 1 auto; }
.cai-karte-zusatz{ font-size:.8rem; color:var(--vm-ink-muted); font-variant-numeric:tabular-nums; }
.cai-zeilen{ list-style:none; margin:0 -6px; padding:0; }
.cai-zeile{
  display:flex; align-items:center; gap:10px; min-height:48px; padding:6px;
  border-radius:10px; color:var(--vm-ink); text-decoration:none;
}
a.cai-zeile:hover{ background:var(--vm-surface-2); color:var(--vm-ink); text-decoration:none; }
.cai-zeilen li + li .cai-zeile{ border-top:1px solid var(--vm-border); border-radius:0; }
.cai-zeile-bild{ width:40px; height:40px; border-radius:10px; object-fit:cover; flex:0 0 auto; background:var(--vm-surface-2); }
.cai-zeile-text{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.3; }
.cai-zeile-titel{ font-weight:600; overflow-wrap:anywhere; }
.cai-zeile-unter{ font-size:.84rem; color:var(--vm-ink-muted); font-variant-numeric:tabular-nums; }
.cai-zeile-meta{ font-size:.78rem; color:var(--vm-ink-subtle); }
.cai-zeile-pfeil{ color:var(--vm-ink-subtle); display:inline-flex; }
.cai-zeile-pfeil .vm-ico{ width:18px; height:18px; }
.cai-leer{ margin:0; color:var(--vm-ink-muted); font-size:.9rem; }
.cai-aktionen{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
.cai-link{ display:inline-flex; align-items:center; min-height:40px; font-weight:600; color:var(--cai-tinte); }
.cai-datenbasis{ margin:10px 0 0; font-size:.76rem; color:var(--vm-ink-subtle); line-height:1.4; }
.cai-felder{ margin:0; display:grid; gap:4px; }
.cai-feld{ display:grid; grid-template-columns:minmax(90px, 38%) 1fr; gap:8px; font-size:.9rem; }
.cai-feld dt{ font-weight:500; color:var(--vm-ink-muted); }
.cai-feld dd{ margin:0; overflow-wrap:anywhere; }
.cai-datensatz-kopf{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cai-datensatz-bild{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--vm-surface-2); }

/* Kennzahlen + Diagramm (eine Reihe, eine Farbe; Werte auch als Tabelle) */
.cai-kpis{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.cai-kpi{ display:flex; flex-direction:column; padding:8px 10px; border-radius:10px; background:var(--vm-surface-2); min-width:0; }
.cai-kpi-wert{ font-size:1.15rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.cai-kpi-label{ font-size:.78rem; color:var(--vm-ink-muted); }
.cai-diagramm{ margin:12px 0 0; }
.cai-saeulen{
  position:relative; height:96px; display:flex; align-items:flex-end; gap:2px;
  border-bottom:1px solid var(--vm-border-strong); padding-top:18px; box-sizing:content-box;
}
.cai-saeule{
  position:relative; flex:1 1 0; max-width:24px; min-width:2px; height:var(--h); padding:0; border:0;
  background:var(--cai-saeule); border-start-start-radius:4px; border-start-end-radius:4px; cursor:default;
}
.cai-saeule:hover, .cai-saeule:focus-visible{ background:var(--cai-saeule-aktiv); }
.cai-saeule:focus-visible{ outline:2px solid var(--vm-ink); outline-offset:2px; }
.cai-saeule::after{ content:""; position:absolute; inset:-14px -2px 0; }   /* Trefferflaeche groesser als der Balken */
.cai-saeule-wert{
  position:absolute; inset-block-end:calc(100% + 2px); inset-inline-start:50%; transform:translateX(-50%);
  font-size:.7rem; color:var(--vm-ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums;
}
[dir="rtl"] .cai-saeule-wert{ transform:translateX(50%); }
.cai-tip{
  position:absolute; inset-block-start:0; z-index:2; display:flex; flex-direction:column;
  padding:4px 8px; border-radius:8px; background:var(--vm-ink); color:#fff; font-size:.75rem;
  line-height:1.3; pointer-events:none; white-space:nowrap; box-shadow:var(--vm-sh);
}
.cai-tip strong{ font-size:.85rem; }
.cai-achse{ display:flex; justify-content:space-between; font-size:.72rem; color:var(--vm-ink-subtle); margin-top:4px; font-variant-numeric:tabular-nums; }
.cai-balken{ display:flex; flex-direction:column; gap:6px; }
.cai-balken-zeile{ display:grid; grid-template-columns:minmax(70px, 34%) 1fr auto; align-items:center; gap:8px; font-size:.82rem; }
.cai-balken-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vm-ink); }
.cai-balken-spur{ display:block; height:14px; }
.cai-balken-wert{ display:block; height:100%; width:var(--w); max-width:100%; background:linear-gradient(90deg, #6366f1, #8b5cf6);
  border-start-end-radius:4px; border-end-end-radius:4px; }
.cai-balken-zahl{ font-variant-numeric:tabular-nums; color:var(--vm-ink-muted); }
.cai-tabelle{ margin-top:8px; font-size:.82rem; }
.cai-tabelle summary{ color:var(--cai-tinte); font-weight:600; cursor:pointer; min-height:32px; display:flex; align-items:center; }
.cai-tabelle table{ margin-top:4px; }

/* Entwurf, Auswahl, Hinweise, Ergebnis */
.cai-karte--entwurf{ border-inline-start:4px solid var(--vm-warning); }
.cai-karte--entwurf .cai-karte-kopf{ align-items:center; }
.cai-entwurf-hinweise{ margin:10px 0 0; padding-inline-start:18px; font-size:.8rem; color:var(--vm-ink-muted); }
.cai-entscheid{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.cai-entscheid .btn{ min-height:44px; }
.cai-ja{ border:0; background:var(--cai-verlauf-text); color:#fff; box-shadow:0 4px 12px -5px rgba(124,58,237,.7); }
.cai-ja:hover, .cai-ja:focus, .cai-ja:active{ background:var(--cai-verlauf-text); color:#fff; filter:brightness(1.08); }
.cai-leise{ color:var(--vm-ink-muted); text-decoration:none; }
.cai-optionen{ display:flex; flex-wrap:wrap; gap:8px; }
.cai-option{
  min-height:44px; padding:8px 14px; border:1px solid var(--cai-rand); border-radius:var(--vm-pill);
  background:var(--vm-surface); color:var(--cai-tinte); font-weight:600; text-align:start;
}
.cai-option:hover{ background:var(--cai-hell); }
.cai-hinweis{ display:flex; gap:8px; align-items:flex-start; padding:10px 12px; border-radius:12px; font-size:.9rem; }
.cai-hinweis .vm-ico{ width:20px; height:20px; flex:0 0 auto; }
.cai-hinweis--info{ background:var(--vm-info-bg); color:var(--vm-info-ink); }
.cai-hinweis--warnung{ background:var(--vm-warning-bg); color:var(--vm-warning-ink); }
.cai-hinweis--fehler{ background:var(--vm-danger-bg); color:var(--vm-danger-ink); }
.cai-ergebnis{ margin-top:12px; padding:10px 12px; border-radius:12px; }
.cai-ergebnis.is-erfolg{ background:var(--vm-success-bg); color:var(--vm-success-ink); }
.cai-ergebnis.is-fehler{ background:var(--vm-danger-bg); color:var(--vm-danger-ink); }
.cai-ergebnis-text{ display:flex; gap:8px; align-items:flex-start; font-weight:600; }
.cai-ergebnis-text .vm-ico{ width:20px; height:20px; flex:0 0 auto; }
.cai-ergebnis .cai-aktionen{ margin-top:4px; }
.cai-ergebnis .cai-link{ color:inherit; text-decoration:underline; }
:lang(ar) .cai-antwort, :lang(ar) .cai-blase, :lang(ar) .cai-vorschlag{ line-height:1.65; }
[dir="rtl"] .cai-balken-wert{ background:linear-gradient(270deg, #6366f1, #8b5cf6); }
/* Hoher Kontrast (Windows): Systemfarben statt Verlauf, damit nichts verschwindet */
@media (forced-colors:active){
  .cai-verlaufsschrift{ background:none; color:CanvasText; }
  .cai-logo--flaeche{ background:none; }
  .cai-logo--flaeche path{ fill:CanvasText; }
  .cai-wortmarke g, .cai-wortmarke path{ stroke:CanvasText; }
}

/* CAI-Protokoll (Verwaltung) */
.cai-protokoll td, .cai-protokoll th{ font-size:.85rem; }

/* =========================================================================
   Persönliche Mitteilungen (Übersicht, Zähler, Geräte)
   Zahl dezent: kleine runde Marke, keine Animation; bei 0 verschwindet sie.
   ========================================================================= */
.vm-zahl{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  min-width:20px; height:20px; padding:0 6px; border-radius:var(--vm-pill);
  background:var(--vm-danger); color:#fff; font-size:.72rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.vm-zahl[hidden]{ display:none; }
/* Am Symbol „Mehr" der Fussleiste: oben an der Ecke, ohne Layout zu schieben. */
.vm-bnav-ico{ position:relative; }
.vm-zahl--symbol{
  position:absolute; inset-block-start:-5px; inset-inline-end:-9px;
  min-width:17px; height:17px; padding:0 4px; font-size:.66rem;
  box-shadow:0 0 0 2px var(--vm-surface);
}
.vm-mliste--oben{ margin-bottom:8px; }
.navbar-vm .navbar-glocke{ position:relative; display:inline-flex; align-items:center; }
.navbar-vm .navbar-glocke .vm-ico{ width:22px; height:22px; }
.navbar-vm .navbar-glocke .vm-zahl{
  position:absolute; inset-block-start:2px; inset-inline-end:0; min-width:17px; height:17px;
  font-size:.66rem; padding:0 4px; box-shadow:0 0 0 2px var(--vm-primary);
}

.mitt-seite{ max-width:760px; }
.mitt-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:16px; }
.mitt-kopf-aktionen{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mitt-kopf-aktionen form{ margin:0; }
.mitt-hinweis{ color:var(--vm-ink-muted); font-size:.92rem; margin-bottom:8px; }
.mitt-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mitt-eintrag{
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
  background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r-lg);
}
.mitt-eintrag.is-ungelesen{ border-color:#c9dcc8; background:#fbfdfa; }
.mitt-punkt{ flex:0 0 auto; width:9px; height:9px; margin-top:7px; border-radius:50%; background:transparent; }
.mitt-eintrag.is-ungelesen .mitt-punkt{ background:var(--vm-primary); }
.mitt-inhalt{ flex:1 1 0; min-width:0; }
.mitt-titel{ margin:0; font-weight:500; color:var(--vm-ink); overflow-wrap:anywhere; }
.mitt-eintrag.is-ungelesen .mitt-titel{ font-weight:700; }
.mitt-text{ margin:2px 0 0; color:var(--vm-ink); overflow-wrap:anywhere; }
.mitt-eintrag:not(.is-ungelesen) .mitt-text{ color:var(--vm-ink-muted); }
.mitt-meta{ margin:4px 0 0; font-size:.82rem; color:var(--vm-ink-muted); display:flex; flex-wrap:wrap; gap:4px; }
.mitt-modul{ font-weight:600; }
.mitt-veraltet{ color:var(--vm-warning-ink); font-weight:600; }
.mitt-eintrag.is-ueberholt .mitt-titel, .mitt-eintrag.is-ueberholt .mitt-text{ text-decoration:line-through; text-decoration-color:var(--vm-ink-subtle); }
.mitt-aktionen{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.mitt-aktionen form{ margin:0; }
.mitt-gelesen-knopf{ font-size:.8rem; padding-inline:0; }
@media (max-width:575.98px){
  .mitt-eintrag{ flex-wrap:wrap; }
  .mitt-aktionen{ flex-direction:row; align-items:center; gap:10px; width:100%; padding-inline-start:21px; }
}
.mitt-leer{ text-align:center; padding:40px 16px; background:var(--vm-surface);
  border:1px dashed var(--vm-border-strong); border-radius:var(--vm-r-lg); }
.mitt-leer-ico{ display:inline-flex; width:52px; height:52px; border-radius:16px; align-items:center;
  justify-content:center; background:var(--vm-primary-050); color:var(--vm-primary-strong); margin-bottom:12px; }
.mitt-leer-ico .vm-ico{ width:26px; height:26px; }

.mitt-karte{ background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r-lg);
  padding:16px; margin-bottom:14px; }
.mitt-zustand{ display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:12px; }
.mitt-zustand-punkt{ width:10px; height:10px; border-radius:50%; background:var(--vm-ink-subtle); flex:0 0 auto; }
.mitt-zustand[data-zustand="aktiv"] .mitt-zustand-punkt{ background:var(--vm-success); }
.mitt-zustand[data-zustand="blockiert"] .mitt-zustand-punkt,
.mitt-zustand[data-zustand="fehler"] .mitt-zustand-punkt{ background:var(--vm-danger); }
.mitt-zustand[data-zustand="installieren"] .mitt-zustand-punkt,
.mitt-zustand[data-zustand="aus"] .mitt-zustand-punkt{ background:var(--vm-warning); }
.mitt-knoepfe{ display:flex; flex-wrap:wrap; gap:8px; }
.mitt-knoepfe .btn{ min-height:44px; }
.mitt-rueckmeldung{ margin:12px 0 0; padding:8px 12px; border-radius:var(--vm-r); background:var(--vm-surface-2); }
.mitt-hilfe{ margin-top:12px; padding:10px 12px; border-radius:var(--vm-r); background:var(--vm-info-bg);
  color:var(--vm-info-ink); font-size:.92rem; }
.mitt-hilfe ol, .mitt-hilfe ul{ padding-inline-start:1.2rem; }
.mitt-geraete{ list-style:none; margin:0 0 8px; padding:0; }
.mitt-geraete li{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--vm-border); }
.mitt-geraete li:last-child{ border-bottom:0; }
.mitt-geraete form{ margin:0; }
.mitt-geraet-name{ font-weight:600; }
.mitt-geraet-dieses{ color:var(--vm-primary-strong); font-weight:600; }
.mitt-geraet-meta{ display:block; font-size:.82rem; color:var(--vm-ink-muted); }

/* =========================================================================
   Einführungshinweis „Neu: Push-Mitteilungen" (+ Hinweis auf der Übersicht)
   Kompakter Dialog; auf dem Smartphone als Bottom Sheet von unten. Vereinsgrün,
   dezente Glocke, grosse Schaltflächen. Keine Formularfelder - die
   Systemabfrage selbst kommt vom Browser bzw. Betriebssystem.
   ========================================================================= */
.push-intro .modal-dialog{ max-width:400px; }
.push-intro .modal-content{
  border:0; border-radius:22px; background:var(--vm-surface);
  box-shadow:0 24px 60px -12px rgba(20,30,24,.35);
}
.push-intro-inhalt{ position:relative; padding:28px 24px 20px; text-align:center; }
.push-intro-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; margin-bottom:14px; border-radius:20px;
  background:linear-gradient(180deg, #f1f7ef 0%, var(--vm-primary-050) 100%);
  color:var(--vm-primary-strong); box-shadow:inset 0 0 0 1px #d4e3d0;
}
.push-intro-ico .vm-ico{ width:28px; height:28px; }
.push-intro-ico.is-erfolg{ background:var(--vm-success-bg); color:var(--vm-success); box-shadow:inset 0 0 0 1px #cfe6d1; }
.push-intro-titel{ margin:0 0 8px; font-size:1.22rem; font-weight:700; line-height:1.3; color:var(--vm-ink); }
.push-intro-text{ margin:0 auto 20px; max-width:34ch; color:var(--vm-ink-muted); line-height:1.5; }
.push-intro-fehler{ color:var(--vm-danger-ink); font-weight:600; }
.push-intro-erfolg{ margin:2px auto 8px; max-width:30ch; font-size:1.08rem; font-weight:700; line-height:1.4; color:var(--vm-success-ink); }
.push-intro-anleitung{
  margin:0 0 18px; padding:12px 14px; border-radius:14px; text-align:start;
  background:var(--vm-info-bg); color:var(--vm-info-ink); font-size:.92rem; line-height:1.45;
}
.push-intro-anleitung ol, .push-intro-anleitung ul{ padding-inline-start:1.2rem; }
.push-intro-anleitung li + li{ margin-top:4px; }
.push-intro-knoepfe{ display:flex; flex-direction:column; gap:6px; }
.push-intro-knoepfe .btn{ width:100%; min-height:52px; border-radius:14px; font-size:1.02rem; }
.push-intro-knoepfe .btn-vm:disabled{ background:var(--vm-primary); border-color:var(--vm-primary); color:#fff; opacity:.82; }
.push-intro-knoepfe .spinner-border{ width:1rem; height:1rem; border-width:.15em; vertical-align:-.1em; margin-inline-end:4px; }
.push-intro-spaeter{ color:var(--vm-ink-muted); background:transparent; border:0; font-weight:600; }
.push-intro-spaeter:hover, .push-intro-spaeter:focus-visible{ background:var(--vm-surface-2); color:var(--vm-ink); }
:lang(ar) .push-intro-text, :lang(ar) .push-intro-anleitung{ line-height:1.7; }
@media (max-width:575.98px){
  /* Bottom Sheet: unten angedockt, gleitet herein; Platz für den Home-Balken */
  .push-intro .modal-dialog{
    position:fixed; inset-inline:0; inset-block-end:0; margin:0; width:100%; max-width:none;
    min-height:0; display:block;
  }
  .push-intro.fade .modal-dialog{ transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
  .push-intro.show .modal-dialog{ transform:none; }
  .push-intro .modal-content{
    border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(20,30,24,.22);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .push-intro-inhalt{ padding:30px 20px 14px; }
  .push-intro-inhalt::before{   /* Griff - rein optisch */
    content:""; position:absolute; inset-block-start:9px; inset-inline-start:50%;
    width:38px; height:4px; margin-inline-start:-19px; border-radius:2px; background:var(--vm-border-strong);
  }
}
@media (prefers-reduced-motion:reduce){ .push-intro.fade .modal-dialog{ transition:none; } }

.push-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:12px 12px 12px 14px;
  background:var(--vm-surface); border:1px solid var(--vm-border); border-radius:var(--vm-r-lg);
  box-shadow:var(--vm-sh-sm);
}
.push-banner[hidden]{ display:none; }
.push-banner-ico{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:14px; background:var(--vm-primary-050); color:var(--vm-primary-strong);
}
.push-banner-ico .vm-ico{ width:22px; height:22px; }
.push-banner-text{ flex:1 1 220px; min-width:0; }
.push-banner-titel{ margin:0; font-size:1rem; font-weight:700; }
.push-banner-info{ margin:2px 0 0; font-size:.9rem; color:var(--vm-ink-muted); }
.push-banner-aktionen{ display:flex; gap:8px; }
.push-banner-aktionen .btn{ min-height:44px; white-space:nowrap; }
.push-banner-zu{
  flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; color:var(--vm-ink-muted);
}
.push-banner-zu:hover{ background:var(--vm-surface-2); color:var(--vm-ink); }
.push-banner-zu .vm-ico{ width:20px; height:20px; }
@media (max-width:575.98px){
  .push-banner{ position:relative; padding-inline-end:52px; }
  .push-banner-zu{ position:absolute; inset-block-start:6px; inset-inline-end:6px; }
  .push-banner-aktionen{ flex:1 1 100%; }
  .push-banner-aktionen .btn{ flex:1 1 auto; }
}

/* =========================================================================
   Zwei-Faktor-Anmeldung (Anmeldekarte, Code, Notfallcodes, Sicherheit)
   Kompakt, Vereinsgrün, grosse Touch-Flächen. Codes und Nummern immer LTR.
   ========================================================================= */
.zf-karte .card-body{ padding:1.75rem 1.5rem !important; }
.zf-logo{ max-width:190px; }
.zf-titel{ font-size:1.3rem; font-weight:700; margin:0 0 .4rem; text-align:center; }
.zf-text{ color:var(--vm-ink-muted); text-align:center; margin:0 0 .5rem; line-height:1.5; }
.zf-nummer{ text-align:center; font-weight:700; font-size:1.08rem; letter-spacing:.04em; margin:0 0 1rem;
  font-variant-numeric:tabular-nums; }
.zf-hinweis{ background:var(--vm-primary-050); color:var(--vm-primary-strong); border-radius:var(--vm-r);
  padding:.65rem .8rem; font-size:.88rem; margin-bottom:1rem; }
.zf-meldung{ font-size:.9rem; }
.zf-form .form-label{ font-weight:600; }
.zf-code{ text-align:center; font-size:1.6rem; font-weight:700; letter-spacing:.35em; padding-inline-start:.5em;
  font-variant-numeric:tabular-nums; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.zf-fehler{ color:var(--vm-danger-ink); font-size:.9rem; margin-top:.35rem; }
.zf-los{ margin-top:1rem; min-height:52px; }
.zf-neu{ text-align:center; margin-top:.5rem; }
.zf-neu-knopf{ font-weight:600; text-decoration:none; min-height:44px; }
.zf-neu-knopf:disabled{ color:var(--vm-ink-subtle); opacity:1; }
.zf-klein{ font-size:.8rem; color:var(--vm-ink-subtle); text-align:center; margin:.25rem 0 0; line-height:1.4; }
.zf-unten{ display:flex; flex-direction:column; align-items:center; gap:.15rem; margin-top:1rem;
  padding-top:.75rem; border-top:1px solid var(--vm-border); }
.zf-unten form{ margin:0; }
.zf-zurueck{ color:var(--vm-ink-muted); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; }
.zf-hilfe{ font-size:.85rem; color:var(--vm-ink-muted); text-align:center; margin:.35rem 0 0; line-height:1.45; }
.zf-merken{ margin-top:.9rem; }
.zf-status{ display:flex; align-items:center; gap:.5rem; font-weight:600; flex-wrap:wrap; }
.zf-punkt{ width:10px; height:10px; border-radius:50%; background:var(--vm-ink-subtle); flex:0 0 auto; }
.zf-status--bestaetigt .zf-punkt{ background:var(--vm-success); }
.zf-status--unbestaetigt .zf-punkt{ background:var(--vm-warning); }
.zf-status--fehlt .zf-punkt{ background:var(--vm-danger); }
.zf-geraete{ list-style:none; margin:0 0 .75rem; padding:0; }
.zf-geraete li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:.55rem 0;
  border-bottom:1px solid var(--vm-border); }
.zf-geraete li:last-child{ border-bottom:0; }
.zf-geraete form{ margin:0; }
.zf-geraet-name{ font-weight:600; }
.zf-dieses{ color:var(--vm-primary-strong); font-weight:600; }
.zf-geraet-meta{ display:block; font-size:.82rem; color:var(--vm-ink-muted); }
.zf-seite-inhalt{ max-width:760px; }

/* =========================================================================
   Kalender (neu): Kopf · Zeitraum · Fläche (Monat / Woche / Timeline)
   Mobil zuerst: Die Fläche füllt den Platz bis zur Fussnavigation, grosse
   Touch-Flächen, ruhige Linien. Eigene Termine rot mit Personensymbol,
   andere dezent grau (wie bisher, nicht nur über Farbe).
   ========================================================================= */
.kal{ --kal-kopf-h:52px; display:flex; flex-direction:column; gap:.5rem; }
.kal-kopf{ display:flex; align-items:center; gap:.5rem; min-height:var(--kal-kopf-h); }
.kal-neu{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:0 1rem 0 .8rem;
  border-radius:var(--vm-pill); background:var(--vm-primary); color:#fff; font-weight:700;
  text-decoration:none; white-space:nowrap; box-shadow:0 4px 12px -6px rgba(44,85,48,.6); }
.kal-neu:hover{ background:var(--vm-primary-strong); color:#fff; }
.kal-neu svg{ width:20px; height:20px; flex:0 0 auto; }
.kal-neu-platz{ flex:0 0 1px; }
.kal-ansicht{ margin-inline-start:auto; display:inline-flex; padding:3px; gap:2px;
  background:var(--vm-surface-2); border-radius:var(--vm-pill); }
.kal-ansicht a{ display:inline-flex; align-items:center; min-height:38px; padding:0 .85rem;
  border-radius:var(--vm-pill); font-size:.88rem; font-weight:600; color:var(--vm-ink-muted);
  text-decoration:none; white-space:nowrap; }
.kal-ansicht a.is-aktiv{ background:var(--vm-surface); color:var(--vm-primary-strong); box-shadow:var(--vm-sh-sm); }
.kal-einstellungen{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  color:var(--vm-ink-muted); }
.kal-einstellungen:hover{ background:var(--vm-surface-2); color:var(--vm-ink); }
.kal-einstellungen svg{ width:20px; height:20px; }

.kal-zeitraum{ display:flex; align-items:center; gap:.25rem; min-height:48px; }
.kal-zeitraum-mitte{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center;
  gap:.6rem; flex-wrap:wrap; }
.kal-titel{ margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.01em; text-align:center; }
.kal-zeitraum--liste{ justify-content:flex-start; }
.kal-zeitraum--liste .kal-titel{ text-align:start; }
.kal-pfeil{ flex:0 0 auto; display:inline-grid; place-items:center; width:44px; height:44px;
  border-radius:50%; color:var(--vm-ink); text-decoration:none; }
.kal-pfeil:hover{ background:var(--vm-surface-2); color:var(--vm-ink); }
.kal-pfeil svg{ width:22px; height:22px; }
.kal-heute{ display:inline-flex; align-items:center; min-height:34px; padding:0 .8rem;
  border:1px solid var(--vm-border-strong); border-radius:var(--vm-pill); background:var(--vm-surface);
  font-size:.85rem; font-weight:700; color:var(--vm-ink); text-decoration:none; }
.kal-heute:hover{ border-color:var(--vm-primary); color:var(--vm-primary-strong); }
.kal-teil{ display:flex; flex-direction:column; gap:.35rem; min-height:0; }
.kal-flaeche{ min-height:0; }
/* Waagerecht = Wischen, senkrecht = Scrollen, Zoomen bleibt möglich. Auch auf allen
   Kindern: Der Browser rechnet touch-action nur bis zum nächsten Scrollbereich
   (Woche) - sonst könnte dort eine waagerechte Geste als „Zurück" gedeutet werden. */
[data-kal-wischen], [data-kal-wischen] *{ touch-action:pan-y; touch-action:pan-y pinch-zoom; }  /* 1. = Rückfall */

.kal-legende{ display:flex; gap:1rem; font-size:.75rem; color:var(--vm-ink-muted); padding:.35rem .25rem 0; }
.kal-legende span{ display:inline-flex; align-items:center; gap:.35rem; }
.kal-legende i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.kal-legende i.is-mine{ background:var(--vm-danger-bg); border-inline-start:3px solid var(--vm-danger); }
.kal-legende i.is-other{ background:var(--vm-neutral-bg); border-inline-start:3px solid var(--vm-border-strong); }

/* --- Monat ------------------------------------------------------------- */
.km{ display:flex; flex-direction:column; }
.km-kopf{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); padding-bottom:.25rem; }
.km-kopf span{ text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--vm-ink-muted); }
.km-raster{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  grid-template-rows:repeat(var(--wochen, 6), minmax(92px, 1fr)); gap:1px;
  background:var(--vm-border); border:1px solid var(--vm-border); border-radius:var(--vm-r-lg); overflow:hidden; }
.km-zelle{ position:relative; background:var(--vm-surface); min-width:0; padding:.25rem .25rem .3rem;
  display:flex; flex-direction:column; gap:3px; cursor:pointer; -webkit-tap-highlight-color:rgba(56,107,60,.12); }
.km-zelle:hover{ background:#fcfdfb; }
.km-zelle:active{ background:var(--vm-surface-2); }
.km-zelle.is-aussen{ background:var(--vm-bg); }
.km-zelle.is-aussen .km-tag{ color:var(--vm-ink-subtle); }
.km-zelle.is-aussen .cal-ev{ opacity:.6; }
.km-tag{ align-self:flex-start; width:1.85rem; height:1.85rem; display:grid; place-items:center;
  border:0; border-radius:50%; background:transparent; font-size:.88rem; font-weight:700; color:var(--vm-ink);
  font-variant-numeric:tabular-nums; padding:0; }
.km-zelle.is-heute .km-tag{ background:var(--vm-primary); color:#fff; }
.km-termine{ display:flex; flex-direction:column; gap:2px; min-height:0; overflow:hidden; }
.km-termine .cal-ev{ font-size:.72rem; }
.km-mehr{ font-size:.68rem; font-weight:700; color:var(--vm-ink-muted); padding-inline-start:.2rem;
  direction:ltr; unicode-bidi:isolate; }                 /* „+4“ bleibt „+4“, auch auf Arabisch */
.km-termine .cal-ev:nth-of-type(n+4){ display:none; }
.km-mehr--mobil{ display:none; }
@media (min-width:992px){
  .km-raster{ grid-template-rows:repeat(var(--wochen, 6), minmax(118px, 1fr)); }
  .km-tag{ align-self:flex-end; }
}

/* --- Timeline ------------------------------------------------------------ */
.kt{ display:flex; flex-direction:column; gap:.25rem; max-width:760px; }
.kt-gruppe{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:.9rem; }
.kt-tag{ margin:.35rem .25rem 0; font-size:.8rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--vm-ink-muted); }
.kt-tag.is-heute{ color:var(--vm-primary-strong); }
.kt-karte{ position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:.25rem 1rem;
  align-items:start; padding:.9rem 1rem; background:var(--vm-surface); border:1px solid var(--vm-border);
  border-radius:18px; color:var(--vm-ink); text-decoration:none; box-shadow:var(--vm-sh-sm); }
.kt-karte:hover{ border-color:var(--vm-border-strong); color:var(--vm-ink); }
.kt-karte.is-mine{ border-color:#f0c9c9; background:linear-gradient(0deg, #fffafa, #fffafa);
  box-shadow:inset 4px 0 0 var(--vm-danger), var(--vm-sh-sm); }
[dir="rtl"] .kt-karte.is-mine{ box-shadow:inset -4px 0 0 var(--vm-danger), var(--vm-sh-sm); }
.kt-karte.is-done{ opacity:.55; }
.kt-karte.is-done .kt-titeltext{ text-decoration:line-through; }
.kt-zeit b{ font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.kt-zeit .kt-ganztags{ font-size:.8rem; font-weight:700; color:var(--vm-ink-muted); }
.kt-inhalt{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.kt-titel{ display:flex; align-items:center; gap:.35rem; font-size:1.02rem; font-weight:700; line-height:1.3; }
.kt-titeltext{ min-width:0; overflow-wrap:anywhere; }
.kt-karte:not(.is-mine) .kt-titel{ font-weight:600; }
.kt-unter, .kt-personen{ display:flex; align-items:flex-start; gap:.4rem; font-size:.88rem; color:var(--vm-ink-muted); }
.kt-unter .cal-dot{ margin-top:.42em; }
.kt-personen svg{ flex:0 0 auto; margin-top:.2em; }
.kt-untertext{ min-width:0; overflow-wrap:anywhere; }
.kt-wa{ align-self:flex-start; margin-top:.15rem; }
.kt-marke{ align-self:start; font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:var(--vm-pill);
  background:var(--vm-danger-bg); color:var(--vm-danger-ink); white-space:nowrap; }
.kt-mehr{ margin-top:.25rem; min-height:44px; }
.kt-leer{ text-align:center; padding:3rem 1rem; color:var(--vm-ink-muted); background:var(--vm-surface);
  border:1px dashed var(--vm-border-strong); border-radius:var(--vm-r-lg); }
.kt-leer-ico{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:18px;
  background:var(--vm-primary-050); color:var(--vm-primary-strong); margin-bottom:.75rem; }
.kt-leer-ico .vm-ico{ width:28px; height:28px; }

/* --- Woche: Fläche füllt den Platz ------------------------------------------- */
.kal-teil--woche .cw{ border-radius:var(--vm-r-lg); }
.kal-teil--woche .cw-scroll{ max-height:none; height:calc(100dvh - 330px); min-height:320px; }
@media (min-width:992px){ .kal-teil--woche .cw-scroll{ height:calc(100vh - 300px); } }

/* --- Tagesübersicht (Dialog; mobil Bottom Sheet) -------------------------------- */
.kal-tag .modal-dialog{ max-width:440px; }
.kal-tag .modal-content{ border:0; border-radius:20px; box-shadow:0 24px 60px -12px rgba(20,30,24,.35); }
.kal-tag-kopf{ display:flex; align-items:center; gap:.5rem; padding:1rem 1rem .5rem 1.25rem; }
.kal-tag-titel{ flex:1 1 auto; margin:0; font-size:1.1rem; font-weight:800; }
.kal-tag-zu{ flex:0 0 auto; width:44px; height:44px; display:inline-grid; place-items:center; border:0;
  border-radius:50%; background:var(--vm-surface-2); color:var(--vm-ink); }
.kal-tag-zu .vm-ico{ width:20px; height:20px; }
.kal-tag-inhalt{ padding:.25rem 1rem .75rem; overflow-y:auto; }
.kal-tag-liste{ display:flex; flex-direction:column; gap:.45rem; }
.kal-tag-zeile{ display:grid; grid-template-columns:4.6rem minmax(0, 1fr) auto; align-items:center; gap:.6rem;
  min-height:52px; padding:.55rem .75rem; border:1px solid var(--vm-border); border-radius:14px;
  color:var(--vm-ink); text-decoration:none; background:var(--vm-surface); }
.kal-tag-zeile:hover{ border-color:var(--vm-border-strong); color:var(--vm-ink); }
.kal-tag-zeile.is-mine{ border-color:#f0c9c9; background:#fffafa; }
.kal-tag-zeile.is-done{ opacity:.55; }
.kal-tag-zeit{ font-weight:800; font-variant-numeric:tabular-nums; font-size:.92rem; }
.kal-tag-zeit.is-ganztags{ font-size:.74rem; font-weight:700; color:var(--vm-ink-muted); overflow-wrap:anywhere; }
.kal-tag-haupt{ display:flex; align-items:center; gap:.45rem; min-width:0; font-weight:600; }
.kal-tag-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kal-tag-marke{ font-size:.7rem; font-weight:700; padding:.15rem .5rem; border-radius:var(--vm-pill);
  background:var(--vm-danger-bg); color:var(--vm-danger-ink); white-space:nowrap; }
.kal-tag-leer{ margin:.25rem 0 .5rem; color:var(--vm-ink-muted); }
.kal-tag-fuss{ padding:.25rem 1rem 1rem; }
.kal-tag-fuss .btn{ min-height:52px; border-radius:14px; }

/* --- Kalender als festes Bildschirm-Layout (< 992 px) ---------------------------------------
   Nur die Kalender-Hauptansicht (overview.html setzt body.vm-kal-fest) - Formulare,
   Einstellungen, Dialoge und alle anderen Module scrollen weiter normal.
   Oben die Bedienung, unten die Fussleiste (fest, eigener reservierter Platz), dazwischen
   die GANZE restliche Höhe für die Fläche. Die Seite selbst scrollt nicht; das Wochen-
   Stundenraster und die Timeline scrollen nur innerhalb ihrer Fläche. Höhe = dynamische
   Bildschirmhöhe (dvh) minus Safe Area oben (Body-Abstand) minus gemessene Fussleiste
   (--vm-bnav-space, mobilnav.js) - nichts wird doppelt reserviert. */
@media (max-width:991.98px){
  html:has(> body.vm-kal-fest){ height:100%; overscroll-behavior:none; }
  /* Höhe: Grundlage 100dvh (Rückfall 100vh) minus Safe Area oben (Body-Abstand) minus
     Fussleiste inkl. Safe Area unten (--vm-bnav-space, gemessen). Sobald mobilnav.js
     gemessen hat (.vm-gemessen), gilt GENAU: sichtbarer oberer Rand + Safe Area oben bis
     zur gezeichneten Oberkante der Fussleiste (--vm-nav-oben) - nichts doppelt, nichts
     geschätzt, auch wenn iOS 100dvh grösser meldet als sichtbar. */
  body.vm-kal-fest{ height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none;
    display:flex; flex-direction:column;
    min-height:0; }   /* die allgemeine Regel body{min-height:100vh} würde sonst gewinnen - auf dem
                         iPhone ist 100vh grösser als der sichtbare Bereich (letzte Zeile unter der Leiste) */
  body.vm-kal-fest.vm-gemessen{ height:var(--vm-nav-oben); padding-bottom:0;
    padding-top:calc(var(--vm-sichtbar-oben, 0px) + env(safe-area-inset-top, 0px)); }
  body.vm-kal-fest > .vm-seite > main{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
    padding-top:.6rem !important; padding-bottom:.45rem !important; }
  body.vm-kal-fest .vm-layout, body.vm-kal-fest .vm-main{ flex:1 1 auto; min-height:0;
    display:flex; flex-direction:column; }
  body.vm-kal-fest .kal{ flex:1 1 auto; min-height:0; }
  body.vm-kal-fest .kal-bereich, body.vm-kal-fest .kal-teil, body.vm-kal-fest .kal-flaeche{
    flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  /* Monat: alle Wochen gleich hoch (auch sechs), Zellen wachsen nie über ihre Zeile hinaus;
     was nicht passt, zählt „+N" (kalender.js) - antippen zeigt alle Termine des Tages. */
  body.vm-kal-fest .km{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  body.vm-kal-fest .km-raster{ flex:1 1 auto; min-height:0;
    grid-template-rows:repeat(var(--wochen, 6), minmax(0, 1fr)); }
  body.vm-kal-fest .km-zelle{ min-height:0; overflow:hidden; }
  body.vm-kal-fest .km-termine{ flex:1 1 auto; min-height:0; overflow:hidden; }
  /* Termine nie stauchen (sie haben overflow:hidden und würden sonst auf wenige Pixel
     schrumpfen) - lieber ausblenden und zählen. */
  body.vm-kal-fest .km-termine > *{ flex:0 0 auto; }
  body.vm-kal-fest .km--js .km-termine .cal-ev{ display:flex; }
  body.vm-kal-fest .km--js .km-termine .cal-ev.is-aus,
  body.vm-kal-fest .km--js .km-mehr--mobil, body.vm-kal-fest .km--js .km-mehr--gross{ display:none; }
  body.vm-kal-fest .km-mehr--js:not([hidden]){ display:block; }
  body.vm-kal-fest .km-mehr--ecke{ position:absolute; inset-inline-end:2px; inset-block-end:1px; margin:0;
    padding:0 3px; font-size:.56rem; line-height:1.4; border-radius:4px; background:var(--vm-surface-2); }
  /* Woche: Stundenraster scrollt in seiner Fläche, Wochenleiste und Ganztägiges bleiben stehen */
  body.vm-kal-fest .kal-teil--woche .cw{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  body.vm-kal-fest .kal-teil--woche .cw-scroll{ flex:1 1 auto; min-height:0; height:auto; max-height:none; }
  /* Timeline: nur die Liste scrollt */
  body.vm-kal-fest .kal-teil--timeline .kal-flaeche{ overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch; }

  .km-zelle{ padding:.2rem .15rem; gap:3px; }
  .km-tag{ width:1.65rem; height:1.65rem; font-size:.8rem; align-self:center; }
  /* Mobil: kurze Titel statt Zeit, schmale farbige Zeilen */
  .km-termine .cal-ev{ font-size:.64rem; line-height:1.3; padding:.1rem .25rem; border-radius:4px;
    border-inline-start-width:2px; font-weight:600; gap:0; }
  .km-termine .cal-ev .ev-time, .km-termine .cal-ev .ev-cat, .km-termine .cal-ev .ev-mine-mark,
  .km-termine .cal-ev .ev-lock{ display:none; }
  .km-termine .cal-ev.is-mine{ background:var(--vm-danger); color:#fff; border-inline-start-color:var(--vm-danger); }
  .km-termine .cal-ev:nth-of-type(n+3){ display:none; }
  .km-termine .km-mehr{ font-size:.6rem; }
  .km-mehr--gross{ display:none; }
  .km-mehr--mobil{ display:block; }
  .kal-legende{ font-size:.7rem; padding-top:.25rem; }
  .kal-teil--monat .kal-legende{ display:none; }
}
/* Sehr schmale Geräte (320 px): Zeitraum + „Heute“ passen in eine Zeile statt umzubrechen. */
@media (max-width:359.98px){
  .kal-zeitraum .kal-pfeil{ width:36px; height:36px; }
  .kal-zeitraum .kal-titel{ font-size:1.02rem; }
  .kal-zeitraum-mitte{ gap:.4rem; }
  .kal-heute{ padding:0 .6rem; min-height:32px; }
}
/* Querformat auf dem Smartphone: Bedienung kompakter, damit der Monat lesbar hineinpasst. */
@media (max-width:991.98px) and (orientation:landscape) and (max-height:500px){
  body.vm-kal-fest > .vm-seite > main{ padding-top:.3rem !important; padding-bottom:.2rem !important; }
  body.vm-kal-fest .kal{ gap:.2rem; }
  body.vm-kal-fest .kal-teil{ gap:.15rem; }
  body.vm-kal-fest .kal-kopf{ min-height:38px; }
  body.vm-kal-fest .kal-neu{ min-height:36px; }
  body.vm-kal-fest .kal-ansicht a{ min-height:32px; }
  body.vm-kal-fest .kal-einstellungen{ width:36px; height:36px; }
  body.vm-kal-fest .kal-zeitraum{ min-height:34px; }
  body.vm-kal-fest .kal-pfeil{ width:36px; height:36px; }
  body.vm-kal-fest .kal-titel{ font-size:1.05rem; }
  body.vm-kal-fest .kal-heute{ min-height:30px; }
  body.vm-kal-fest .km-kopf{ padding-bottom:.1rem; }
  body.vm-kal-fest .km-kopf span{ font-size:.62rem; }
  body.vm-kal-fest .km-zelle{ padding-block:.1rem; gap:1px; }
  body.vm-kal-fest .km-tag{ width:1.3rem; height:1.3rem; font-size:.72rem; }
}
@media (max-width:575.98px){
  .kal-neu{ padding:0; width:44px; justify-content:center; }
  .kal-neu-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .kal-ansicht a{ padding:0 .7rem; font-size:.84rem; }
  .kal-titel{ font-size:1.2rem; }
  /* Unten andocken: die Höhe der scrollbaren Bootstrap-Variante (fast 100 %) aufheben */
  .kal-tag .modal-dialog{ position:fixed; inset-inline:0; inset-block-end:0; margin:0; width:100%; max-width:none;
    height:auto; min-height:0; display:block; }
  .kal-tag.fade .modal-dialog{ transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  .kal-tag.show .modal-dialog{ transform:none; }
  .kal-tag .modal-content{ border-radius:20px 20px 0 0; padding-bottom:env(safe-area-inset-bottom, 0px);
    max-height:85dvh; }
  .kal-tag-kopf{ padding-top:1.25rem; }
  .kal-tag-kopf::before{ content:""; position:absolute; inset-block-start:8px; inset-inline-start:50%;
    width:38px; height:4px; margin-inline-start:-19px; border-radius:2px; background:var(--vm-border-strong); }
}
@media (prefers-reduced-motion:reduce){ .kal-tag.fade .modal-dialog{ transition:none; } }

/* --- App „Spenden“: Kennzahlen, grosse Knöpfe, schlanke Zeilen (mobil zuerst) --- */
.sp-kacheln{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; }
.sp-zahl{ display:flex; flex-direction:column; gap:.15rem; padding:1rem 1.1rem; border:1px solid #d4e3d0; border-radius:var(--vm-r-lg); background:var(--vm-primary-050); }
.sp-zahl.is-gross{ background:#fff8e6; border-color:#f1dfae; }
.sp-zahl-lbl{ font-size:.82rem; color:var(--vm-ink-muted); font-weight:600; }
.sp-zahl-num{ font-size:1.45rem; font-weight:800; color:var(--vm-primary-strong); font-variant-numeric:tabular-nums; line-height:1.15; }
.sp-zahl-sub{ font-size:.8rem; color:var(--vm-ink-muted); }
.sp-knoepfe{ display:grid; gap:.75rem; margin-bottom:1.25rem; }
@media (min-width:700px){ .sp-knoepfe{ grid-template-columns:1fr 1fr; } }
.sp-gross{ display:flex; align-items:center; gap:1rem; padding:1.15rem 1.2rem; border:1px solid var(--vm-border); border-radius:var(--vm-r-lg); background:#fff; color:inherit; text-decoration:none; box-shadow:0 6px 18px -14px rgba(0,0,0,.4); }
.sp-gross:hover{ border-color:var(--vm-primary); color:inherit; }
.sp-gross-ico{ display:grid; place-items:center; flex:none; width:56px; height:56px; border-radius:16px; background:#fde7e1; color:#b5452a; }
.sp-gross.is-abo .sp-gross-ico{ background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.sp-gross-ico svg{ width:28px; height:28px; }
.sp-gross-text{ display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.sp-gross-text strong{ font-size:1.1rem; }
.sp-gross-text span{ font-size:.86rem; color:var(--vm-ink-muted); }
.sp-h2{ font-size:1rem; font-weight:700; margin:0 0 .6rem; }
.sp-liste{ display:flex; flex-direction:column; }
.sp-mehr{ display:flex; justify-content:center; margin:.8rem 0 0; }
.sp-mehr .btn[aria-busy="true"]{ opacity:.6; pointer-events:none; }
.sp-zeile, .sp-abo{ display:flex; align-items:center; gap:.75rem; padding:.75rem .9rem; color:inherit; text-decoration:none; }
.sp-zeile + .sp-zeile, .sp-abo + .sp-abo{ border-top:1px solid var(--vm-border); }
.sp-zeile:hover{ background:var(--vm-primary-050); color:inherit; }
.sp-avatar{ display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--vm-primary-050); color:var(--vm-primary-strong); font-weight:700; font-size:.85rem; }
.sp-avatar.is-anonym{ background:#fde7e1; color:#b5452a; }
.sp-avatar.sp-kanal{ background:#fff; box-shadow:inset 0 0 0 1px var(--vm-border); overflow:hidden; }
.sp-avatar.sp-kanal img{ display:block; width:100%; height:100%; object-fit:contain; }
.sp-zeile-text{ display:flex; flex-direction:column; flex:1; min-width:0; }
.sp-zeile-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-zeile-meta{ font-size:.8rem; color:var(--vm-ink-muted); }
.sp-zeile-betrag{ display:flex; flex-direction:column; align-items:flex-end; flex:none; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.sp-zeile-betrag.is-erstattet{ color:var(--vm-ink-muted); }
.sp-zeile-betrag.is-erstattet .sp-zeile-summe{ text-decoration:line-through; }
.sp-abo{ flex-wrap:wrap; }
.sp-abo-aktion{ flex-basis:100%; display:flex; justify-content:flex-end; margin-top:-.25rem; }
@media (min-width:700px){ .sp-abo{ flex-wrap:nowrap; } .sp-abo-aktion{ flex-basis:auto; margin:0; } }
.sp-badge{ display:inline-block; margin-top:.15rem; padding:.05rem .45rem; border-radius:99px; background:#eef0ee; color:var(--vm-ink-muted); font-size:.7rem; font-weight:700; text-decoration:none; }
.sp-badge.is-warn{ background:#fff1d6; color:#8a5a00; }
.sp-badge.is-abo{ background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.sp-suche{ display:flex; gap:.5rem; margin-bottom:.75rem; }
.sp-blaettern{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:1rem; }
.sp-zurueck{ display:inline-block; margin-bottom:.75rem; font-weight:600; text-decoration:none; }
.sp-kopf{ margin-bottom:1rem; }
.sp-kopf-betrag{ font-size:2.1rem; font-weight:800; color:var(--vm-primary-strong); font-variant-numeric:tabular-nums; line-height:1.1; }
.sp-kopf-betrag.is-erstattet{ color:var(--vm-ink-muted); text-decoration:line-through; }
.sp-kopf-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color:var(--vm-ink-muted); }
.sp-aktionen{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.5rem; }
.sp-aktionen form{ margin:0; }
@media (max-width:575px){ .sp-aktionen > *, .sp-aktionen .btn{ width:100%; } }
.sp-karten{ display:grid; gap:1rem; margin-top:1rem; }
@media (min-width:900px){ .sp-karten{ grid-template-columns:1fr 1fr; } }
.sp-karte{ padding:1rem 1.1rem; }
.sp-dl{ display:grid; gap:.55rem; margin:0; }
.sp-dl > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:.5rem; }
.sp-dl dt{ font-weight:600; color:var(--vm-ink-muted); font-size:.88rem; }
.sp-dl dd{ margin:0; overflow-wrap:anywhere; }
.sp-klein{ font-size:.8rem; }
.sp-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.sp-chip{ padding:.35rem .85rem; border:1px solid var(--vm-border); border-radius:99px; background:#fff; color:var(--vm-ink-muted); font-size:.88rem; font-weight:600; text-decoration:none; }
.sp-chip:hover{ border-color:var(--vm-primary); color:var(--vm-primary-strong); }
.sp-chip.is-aktiv{ background:var(--vm-primary); border-color:var(--vm-primary); color:#fff; }
.sp-chip--kanal{ display:inline-flex; align-items:center; gap:.4rem; }
.sp-chip--kanal img{ width:18px; height:18px; border-radius:50%; background:#fff; }
.sp-chip-zahl{ font-weight:600; opacity:.7; font-variant-numeric:tabular-nums; }

/* Sicherheitsabfrage (platform/_bestaetigen.html): Zeilenumbrüche der Frage zeigen */
.vm-bestaetigen-text{ white-space:pre-line; }

/* App „Marketing“ (seit 30.10.2026): QR-Codes mit Scans und Spenden */
.mk-code{ display:block; padding:1rem 1.1rem; margin-bottom:.75rem; color:inherit; text-decoration:none; }
.mk-code:hover{ border-color:var(--vm-primary); color:inherit; }
.mk-code-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.25rem .75rem; }
.mk-code-name{ font-weight:700; }
.mk-code-link{ font-size:.82rem; color:var(--vm-ink-muted); word-break:break-all; }
.mk-zahlen{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; margin-top:.75rem; }
.mk-zahlen .sp-zahl{ padding:.75rem .8rem; }
.mk-zahlen .sp-zahl-num{ font-size:1.25rem; }
.mk-tage{ display:flex; flex-direction:column; padding:.5rem .9rem; }
.mk-tag{ display:grid; grid-template-columns:6.5rem 1fr 2.5rem; align-items:center; gap:.6rem; padding:.3rem 0; font-size:.88rem; }
.mk-tag-balken{ height:.6rem; border-radius:99px; background:var(--vm-primary-050); overflow:hidden; }
.mk-tag-balken span{ display:block; height:100%; width:var(--anteil); min-width:.4rem; border-radius:99px; background:var(--vm-primary); }
.mk-tag-zahl{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.mk-verteilung{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
/* Marketing: Bild und Ziel eines QR-Codes (seit 30.10.2026) */
.mk-code-bild{ display:block; width:100%; max-height:9rem; object-fit:cover; margin-bottom:.75rem; border-radius:var(--vm-r); background:var(--vm-neutral-bg); }
.mk-ziel{ display:grid; gap:.9rem; padding:1rem 1.1rem; }
@media (min-width:768px){ .mk-ziel{ grid-template-columns:minmax(0, 15rem) 1fr; align-items:start; } }
.mk-ziel-bild{ width:100%; height:auto; border-radius:var(--vm-r); border:1px solid var(--vm-border); }
.mk-ziel-text > div + div{ margin-top:.25rem; }
.mk-aenderung{ display:flex; flex-wrap:wrap; gap:.15rem .75rem; padding:.35rem 0; font-size:.88rem; }


/* App „Mitarbeiter“ – E-Learning-Kurse (seit 30.10.2026, static/js/mitarbeiter.js) */
.ma-neu{ display:inline-flex; align-items:center; gap:.45rem; }
.ma-neu svg{ width:18px; height:18px; }
.ma-kurs{ display:flex; flex-direction:row; align-items:center; gap:.9rem; padding:.95rem 1rem; margin-bottom:.75rem; color:inherit; text-decoration:none; }
.ma-kurs:hover{ border-color:var(--vm-primary); color:inherit; }
.ma-kurs-ico{ flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.ma-kurs-ico svg{ width:26px; height:26px; }
.ma-kurs-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35rem; }
.ma-kurs-titel{ font-weight:700; font-size:1.02rem; overflow-wrap:anywhere; }
.ma-kurs-meta, .ma-kopf-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; font-size:.85rem; color:var(--vm-ink-muted); }
.ma-kopf-meta{ margin-top:.45rem; }
.ma-pfeil{ flex:none; width:22px; height:22px; color:var(--vm-ink-subtle); }
[dir="rtl"] .ma-pfeil{ transform:scaleX(-1); }
.ma-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .62rem; border-radius:99px; background:var(--vm-neutral-bg); color:var(--vm-neutral-ink); font-size:.78rem; font-weight:700; }
.ma-chip.is-aktiv{ background:var(--vm-success-bg); color:var(--vm-success-ink); }
.ma-chip.is-entwurf{ background:var(--vm-warning-bg); color:var(--vm-warning-ink); }
.ma-chip.is-fehler{ background:var(--vm-danger-bg); color:var(--vm-danger-ink); }
.ma-chip.is-arbeit{ background:var(--vm-info-bg); color:var(--vm-info-ink); }
.ma-dreher{ display:inline-block; flex:none; width:.85em; height:.85em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ma-drehen .8s linear infinite; }
@keyframes ma-drehen{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ma-dreher{ animation-duration:2.4s; } }
.ma-balken{ appearance:none; -webkit-appearance:none; display:block; width:100%; height:.45rem; border:0; border-radius:99px; background:var(--vm-primary-050); overflow:hidden; }
.ma-balken::-webkit-progress-bar{ background:var(--vm-primary-050); border-radius:99px; }
.ma-balken::-webkit-progress-value{ background:var(--vm-primary); border-radius:99px; }
.ma-balken::-moz-progress-bar{ background:var(--vm-primary); border-radius:99px; }
.ma-balken--gross{ height:.6rem; margin:-.2rem 0 .9rem; }
/* Schritte, Karten, Formulare */
.ma-schritte{ display:flex; gap:.4rem; margin:0 0 1rem; padding:0; list-style:none; }
.ma-schritte li{ flex:1; display:flex; align-items:center; gap:.45rem; min-width:0; padding:.5rem .6rem; border:1px solid var(--vm-border); border-radius:var(--vm-r); background:var(--vm-surface); color:var(--vm-ink-muted); font-size:.82rem; font-weight:600; }
.ma-schritte span{ flex:none; width:1.45rem; height:1.45rem; display:grid; place-items:center; border-radius:50%; background:var(--vm-neutral-bg); font-size:.78rem; }
.ma-schritte .is-jetzt{ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.ma-schritte .is-jetzt span{ background:var(--vm-primary); color:#fff; }
@media (max-width:575px){ .ma-schritte li{ flex-direction:column; gap:.25rem; padding:.45rem .3rem; font-size:.74rem; text-align:center; } }
.ma-karte{ padding:1.1rem 1.15rem; margin-bottom:1rem; }
.ma-karte-kopf{ display:flex; align-items:flex-start; gap:.8rem; margin-bottom:.8rem; }
.ma-karte-ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--vm-primary-050); color:var(--vm-primary-strong); }
.ma-karte-ico.is-ton{ background:#fbeee6; color:#b5582f; }
.ma-karte-ico.is-video{ background:#e8eff9; color:#46679c; }
.ma-karte-ico svg{ width:22px; height:22px; }
.ma-karte-titel{ margin:0 0 .15rem; font-size:1.05rem; font-weight:700; }
.ma-hilfe{ margin:0; color:var(--vm-ink-muted); font-size:.88rem; }
.ma-hilfe-inline{ color:var(--vm-ink-muted); font-weight:400; }
.ma-mehr summary{ margin-bottom:.6rem; color:var(--vm-accent); font-size:.9rem; font-weight:600; cursor:pointer; }
.ma-hoch{ margin:.2rem 0 .3rem; }
.ma-waehlen{ position:relative; display:inline-flex; align-items:center; gap:.5rem; min-height:var(--vm-control-h); }
.ma-waehlen svg{ width:20px; height:20px; }
.ma-waehlen:focus-within{ outline:2px solid var(--vm-primary); outline-offset:2px; }
.ma-unsichtbar{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.ma-alert{ margin-bottom:1rem; }
.ma-formular textarea{ min-height:7rem; }
.ma-knopfreihe{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.ma-knopfreihe form{ margin:0; }
.ma-knopfreihe--umbruch{ margin-top:1rem; }
/* Aufnahme im Browser */
.ma-aufnahme{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin:.2rem 0 .8rem; }
.ma-mic{ display:inline-flex; align-items:center; gap:.65rem; min-height:52px; padding:.6rem 1.25rem .6rem .75rem; border:0; border-radius:99px; background:#c75d3d; color:#fff; font-weight:700; box-shadow:0 8px 18px -10px rgba(199,93,61,.9); }
.ma-mic-punkt{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; background:#fff; }
.ma-mic-punkt::after{ content:""; position:absolute; inset:8px; border-radius:50%; background:#c75d3d; }
.ma-aufnahme.is-aktiv .ma-mic{ background:#9d2626; }
.ma-aufnahme.is-aktiv .ma-mic-punkt::after{ inset:9px; border-radius:2px; background:#9d2626; animation:ma-puls 1.2s ease-in-out infinite; }
@keyframes ma-puls{ 50%{ opacity:.3; } }
.ma-zeit{ color:var(--vm-ink-muted); font-weight:700; font-variant-numeric:tabular-nums; }
/* Dateien (Sprachmemos, Videos) */
.ma-dateien{ display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0 0; padding:0; list-style:none; }
.ma-dateien:empty{ display:none; }
.ma-datei{ display:flex; align-items:flex-start; gap:.75rem; padding:.6rem .65rem; border:1px solid var(--vm-border); border-radius:var(--vm-r); background:var(--vm-bg); }
.ma-datei.is-fehler{ border-color:#efc4c4; background:var(--vm-danger-bg); }
.ma-datei-bild{ flex:none; width:64px; height:42px; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#e8eff9; color:#46679c; }
.ma-datei-bild.is-ton{ width:42px; background:#fbeee6; color:#b5582f; }
.ma-datei-bild img{ width:100%; height:100%; object-fit:cover; }
.ma-datei-bild svg{ width:20px; height:20px; }
.ma-datei-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.ma-datei-name{ font-size:.92rem; font-weight:600; overflow-wrap:anywhere; }
.ma-datei-stand{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; color:var(--vm-ink-muted); font-size:.82rem; }
.ma-datei.is-fehler .ma-datei-stand{ color:var(--vm-danger-ink); }
.ma-datei .ma-balken{ margin-top:.25rem; }
.ma-abschrift summary{ color:var(--vm-accent); font-size:.82rem; cursor:pointer; }
.ma-abschrift p{ max-height:14rem; margin:.4rem 0 0; overflow:auto; color:var(--vm-ink-muted); font-size:.85rem; }
.ma-icon-knopf{ flex:none; width:38px; height:38px; display:inline-grid; place-items:center; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--vm-ink-muted); }
.ma-icon-knopf:hover{ background:var(--vm-neutral-bg); color:var(--vm-ink); }
.ma-icon-knopf:disabled{ opacity:.3; pointer-events:none; }
.ma-icon-knopf.is-gefahr:hover{ background:var(--vm-danger-bg); color:var(--vm-danger-ink); }
.ma-icon-knopf.is-kopiert{ background:var(--vm-success-bg); color:var(--vm-success-ink); }
.ma-icon-knopf svg{ width:20px; height:20px; }
/* Aktionsleiste unten - klebt am Handy über der Fussnavigation */
.ma-leiste{ position:sticky; bottom:.75rem; z-index:5; display:flex; justify-content:flex-end; gap:.6rem; margin-top:.25rem; padding:.65rem; border:1px solid var(--vm-border); border-radius:var(--vm-r-lg); background:rgba(255,255,255,.94); box-shadow:var(--vm-sh); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media (max-width:991.98px){ .vm-has-bnav .ma-leiste{ bottom:calc(var(--vm-bnav-space, 80px) + .5rem); } }
.ma-leiste .btn{ min-height:var(--vm-control-h); }
.ma-ki-knopf{ flex:1 1 auto; max-width:22rem; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; }
.ma-ki-knopf svg{ width:18px; height:18px; }
/* Kurs: KI arbeitet, Freigabe, Link */
.ma-ki{ border-color:#cfe0ec; background:linear-gradient(135deg, #f3f8fc 0%, #fff 70%); }
.ma-ki-kopf{ display:flex; align-items:flex-start; gap:.9rem; }
.ma-ki-kopf h2{ margin:0 0 .25rem; font-size:1.1rem; font-weight:700; }
.ma-ki-kopf p{ margin:0; color:var(--vm-ink-muted); font-size:.9rem; }
.ma-ki-funke{ flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--vm-info-bg); color:var(--vm-info); }
.ma-ki-funke svg{ width:26px; height:26px; animation:ma-funkeln 2.2s ease-in-out infinite; }
@keyframes ma-funkeln{ 0%,100%{ transform:scale(1) rotate(0); opacity:1; } 50%{ transform:scale(.82) rotate(12deg); opacity:.7; } }
@media (prefers-reduced-motion:reduce){ .ma-ki-funke svg{ animation:none; } }
.ma-ki-schritte{ display:flex; flex-direction:column; gap:.45rem; margin:1rem 0 0; padding:0; list-style:none; }
.ma-ki-schritte li{ display:flex; align-items:center; gap:.6rem; color:var(--vm-ink-subtle); font-size:.92rem; }
.ma-ki-schritte li::before{ content:""; flex:none; width:1.1rem; height:1.1rem; border:2px solid var(--vm-border-strong); border-radius:50%; }
.ma-ki-schritte li.is-jetzt{ color:var(--vm-ink); font-weight:600; }
.ma-ki-schritte li.is-jetzt::before{ border-color:var(--vm-info); border-right-color:transparent; animation:ma-drehen .8s linear infinite; }
.ma-ki-schritte li.is-fertig{ color:var(--vm-success-ink); }
.ma-ki-schritte li.is-fertig::before{ border-color:var(--vm-success); background:var(--vm-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 75% no-repeat; }
.ma-freigabe{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem 1.2rem; border-color:#f1dfae; background:#fffaf0; }
.ma-freigabe > div:first-child{ flex:1 1 18rem; }
.ma-link{ border-color:#cfe3cf; background:#f6fbf5; }
.ma-link-feld{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 .5rem; }
.ma-link-feld input{ flex:1 1 15rem; min-width:0; background:#fff; font-size:.9rem; }
.ma-klein-link{ font-size:.85rem; }
/* Bereiche: Teilnehmende, Abschnitte, Fragen, Einstellungen */
.ma-sprung{ position:sticky; top:0; z-index:4; display:flex; gap:.4rem; margin:0 -.25rem 1rem; padding:.45rem .25rem; overflow-x:auto; background:var(--vm-bg); scrollbar-width:none; }
.ma-sprung::-webkit-scrollbar{ display:none; }
.ma-sprung a{ flex:none; display:inline-flex; align-items:center; gap:.35rem; padding:.42rem .85rem; border:1px solid var(--vm-border); border-radius:99px; background:#fff; color:var(--vm-ink); font-size:.86rem; font-weight:600; text-decoration:none; }
.ma-sprung a:hover{ border-color:var(--vm-primary); }
.ma-sprung span{ color:var(--vm-ink-muted); font-weight:700; font-variant-numeric:tabular-nums; }
.ma-bereich{ margin-bottom:1.75rem; scroll-margin-top:4rem; }
.ma-bereich-kopf{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; margin-bottom:.7rem; }
.ma-bereich-kopf h2{ margin:0; font-size:1.15rem; font-weight:700; }
.ma-bereich-kopf .btn{ margin-inline-start:auto; }
.ma-zahl{ color:var(--vm-ink-muted); font-size:.86rem; font-weight:600; }
.ma-unter{ margin:1.1rem 0 .3rem; font-size:.98rem; font-weight:700; }
.ma-unter + .ma-hilfe{ margin-bottom:.6rem; }
.ma-personen{ margin:0 0 .9rem; padding:.2rem 0; list-style:none; }
.ma-person{ display:flex; align-items:center; gap:.7rem; padding:.6rem .55rem .6rem .9rem; border-bottom:1px solid var(--vm-border); }
.ma-person:last-child{ border-bottom:0; }
.ma-person form{ margin:0; }
.ma-punkt{ flex:none; width:.75rem; height:.75rem; border-radius:50%; background:var(--vm-border-strong); }
.ma-punkt.is-bestanden{ background:var(--vm-success); }
.ma-punkt.is-nicht_bestanden{ background:var(--vm-danger); }
.ma-punkt.is-begonnen{ background:var(--vm-warning); }
.ma-person-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ma-person-name{ font-weight:600; overflow-wrap:anywhere; }
.ma-person-stand{ color:var(--vm-ink-muted); font-size:.84rem; }
.ma-person-stand.is-bestanden{ color:var(--vm-success-ink); }
.ma-person-stand.is-nicht_bestanden{ color:var(--vm-danger-ink); }
.ma-konto{ margin-inline-start:.3rem; padding:.05rem .4rem; border-radius:6px; background:var(--vm-primary-050); color:var(--vm-primary-strong); font-size:.7rem; font-weight:700; vertical-align:middle; }
.ma-person--zuordnen{ flex-wrap:wrap; }
.ma-zuordnen{ display:flex; gap:.4rem; margin-inline-start:auto; }
.ma-zuordnen select{ max-width:13rem; }
@media (max-width:575px){ .ma-zuordnen{ width:100%; padding-inline-start:1.45rem; } .ma-zuordnen select{ flex:1; max-width:none; } }
.ma-hinzu{ padding:0; }
.ma-hinzu summary{ display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; color:var(--vm-primary-strong); font-weight:700; cursor:pointer; list-style:none; }
.ma-hinzu summary::-webkit-details-marker{ display:none; }
.ma-hinzu summary svg{ width:18px; height:18px; }
.ma-hinzu form{ padding:0 1.1rem 1.1rem; }
.ma-benutzer{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; padding:0; border:0; }
.ma-benutzer legend{ width:100%; }
.ma-check{ display:inline-flex; align-items:center; gap:.45rem; min-height:40px; padding:.35rem .75rem; border:1px solid var(--vm-border); border-radius:99px; background:#fff; font-size:.9rem; cursor:pointer; }
.ma-check:has(input:checked){ border-color:var(--vm-primary); background:var(--vm-primary-050); color:var(--vm-primary-strong); font-weight:600; }
.ma-check input{ accent-color:var(--vm-primary); }
.ma-liste{ display:flex; flex-direction:column; gap:.75rem; margin:0; padding:0; list-style:none; }
.ma-eintrag{ padding:1rem 1.1rem; }
.ma-eintrag-kopf{ display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.5rem; }
.ma-eintrag-kopf h3{ margin:.1rem 0 0; font-size:1.02rem; font-weight:700; }
.ma-nr{ flex:none; width:1.85rem; height:1.85rem; display:grid; place-items:center; border-radius:50%; background:var(--vm-primary-050); color:var(--vm-primary-strong); font-size:.85rem; font-weight:800; }
.ma-eintrag-video{ display:flex; align-items:center; gap:.6rem; margin:0 0 .6rem; color:#46679c; font-size:.85rem; font-weight:600; }
.ma-eintrag-video img{ width:84px; height:52px; object-fit:cover; border-radius:8px; }
.ma-eintrag-video svg{ width:14px; height:14px; vertical-align:-2px; }
.ma-eintrag-text{ position:relative; max-height:9.5rem; overflow:hidden; color:var(--vm-ink-muted); font-size:.92rem; }
.ma-eintrag-text::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:2.5rem; background:linear-gradient(transparent, #fff); }
.ma-eintrag-text p, .ma-eintrag-text ul, .ma-eintrag-text ol{ margin:0 0 .5rem; }
.ma-eintrag-text h3{ font-size:.95rem; margin:.4rem 0 .3rem; }
.ma-eintrag-aktionen{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.7rem; }
.ma-knopfgruppe{ display:flex; gap:.15rem; margin:0; }
.ma-frage{ white-space:pre-line; }
.ma-hinweis-klein{ margin:-.2rem 0 .4rem 2.55rem; color:var(--vm-ink-muted); font-size:.8rem; font-weight:600; }
.ma-antworten{ display:flex; flex-direction:column; gap:.3rem; margin:0 0 .3rem; padding:0 0 0 2.55rem; list-style:none; }
.ma-antworten li{ display:flex; align-items:flex-start; gap:.5rem; color:var(--vm-ink-muted); font-size:.92rem; }
.ma-antworten li.is-richtig{ color:var(--vm-success-ink); font-weight:600; }
.ma-antworten svg, .ma-kreis{ flex:none; width:1.05rem; height:1.05rem; margin-top:.15rem; }
.ma-kreis{ border:1.5px solid var(--vm-border-strong); border-radius:50%; }
.ma-erklaerung{ margin:.4rem 0 0 2.55rem; padding:.45rem .7rem; border-radius:8px; background:var(--vm-neutral-bg); color:var(--vm-ink-muted); font-size:.85rem; }
.ma-leer-zeile{ padding:.9rem 1rem; border:1px dashed var(--vm-border-strong); border-radius:var(--vm-r); color:var(--vm-ink-muted); font-size:.9rem; }
.ma-dl dd{ white-space:normal; }
@media (max-width:575px){ .ma-dl > div{ grid-template-columns:1fr; gap:.1rem; } }
/* Frage bearbeiten */
.ma-antwort-felder{ margin:0 0 1rem; padding:0; border:0; }
.ma-antwort-zeile{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; }
.ma-richtig{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--vm-border); border-radius:10px; background:#fff; cursor:pointer; }
.ma-richtig:has(input:checked){ border-color:var(--vm-success); background:var(--vm-success-bg); }
.ma-richtig input{ width:22px; height:22px; accent-color:var(--vm-success); cursor:pointer; }

/* Spenden: Ads-Tracking (seit 30.10.2026) - je Werbeplattform ein eigener Link /go/<kürzel> */
.ad-zeitraum{ margin-bottom:.2rem; }
.ad-zeitraum .sp-chips{ margin-bottom:.4rem; }
.ad-eigen summary{ display:inline-block; margin:.1rem 0 .5rem; color:var(--vm-accent); font-size:.9rem; font-weight:600; cursor:pointer; }
.ad-eigen-felder{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; margin-bottom:.6rem; }
.ad-eigen-felder label{ display:flex; flex-direction:column; gap:.2rem; color:var(--vm-ink-muted); font-size:.85rem; font-weight:600; }
.ad-zeitraum-text{ margin:0 0 .9rem; color:var(--vm-ink-muted); font-size:.88rem; }
.ad-gesamt{ margin-bottom:1rem; }
.ad-plattform{ padding:1rem 1.1rem; margin-bottom:.9rem; }
.ad-kopf{ display:flex; align-items:center; gap:.75rem; margin-bottom:.85rem; }
.ad-kopf h2{ margin:0; font-size:1.05rem; font-weight:700; }
.ad-logo{ flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--vm-primary); color:#fff; font-size:1.15rem; font-weight:800; }
.ad-logo.is-meta{ background:#2d5fc4; }
.ad-logo.is-tiktok{ background:#1f1f1f; }
.ad-logo.is-google{ background:#2f7d4f; }
.ad-zahlen{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.6rem; }
.ad-zahlen > div{ display:flex; flex-direction:column; gap:.1rem; min-width:0; padding:.7rem .75rem; border-radius:var(--vm-r); background:var(--vm-primary-050); }
.ad-zahlen > div.is-gross{ background:#fff8e6; }
.ad-zahlen span{ color:var(--vm-ink-muted); font-size:.78rem; font-weight:600; }
.ad-zahlen strong{ color:var(--vm-primary-strong); font-size:1.2rem; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ad-zahlen small{ color:var(--vm-ink-muted); font-size:.76rem; }
@media (max-width:440px){ .ad-zahlen{ grid-template-columns:1fr 1fr; } .ad-zahlen > div.is-gross{ grid-column:1 / -1; } }
.ad-anteil{ display:flex; align-items:center; gap:.6rem; margin-top:.75rem; color:var(--vm-ink-muted); font-size:.8rem; white-space:nowrap; }
.ad-anteil .ma-balken{ flex:1; }
.ad-link{ margin-top:.9rem; padding-top:.8rem; border-top:1px dashed var(--vm-border); }
.ad-link .ma-link-feld{ margin:.35rem 0 .4rem; }
.ad-link-kopf{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.6rem; }
.ad-link-titel{ font-size:.85rem; font-weight:700; }
.ad-anleitung{ margin-top:.85rem; }
.ad-hinweis{ padding:0; margin-bottom:1rem; }
.ad-hinweis summary{ padding:.85rem 1.1rem; color:var(--vm-primary-strong); font-weight:700; cursor:pointer; }
.ad-hinweis ul{ margin:0; padding:0 1.1rem 1rem 2.2rem; color:var(--vm-ink-muted); font-size:.9rem; }
.ad-hinweis li + li{ margin-top:.4rem; }
/* Spenden: Werbekanal einer Spende (Meta, TikTok, Google Ads, Flyer - seit 30.10.2026) */
.sp-werbekanal{ color:var(--vm-accent-strong); font-weight:600; white-space:nowrap; }