/* ehrenwert.app – Design-Schicht über Pico.css
   Admin-App-Layout: petrolfarbene Akzente, schlanke Topbar mit Profil.
   CD-Palette:
   --vw-rasen  #1A4B65  Petrol (Primary)  --vw-ok #4A7C59 Erfolg
   --vw-kreide #F4F5F7  Hintergrund       --vw-gold #D4AF37 Akzent
   --vw-signal #9A7A20  Warnung (Gold, lesbar auf Hell) */
/* Pico skaliert die Root-Schrift mit der Viewport-Breite auf bis zu 20px hoch –
   für eine Admin-Oberfläche zu groß. Feste 16px-Basis auf allen Displays. */
html {
  font-size: 100% !important;
}

:root {
  --vw-rasen: #1A4B65;
  --vw-rasen2: #143A50;
  --vw-rasen3: #0E2C3D;
  --vw-ok: #4A7C59;
  --vw-gold: #D4AF37;
  --vw-kreide: #F4F5F7;
  --vw-linie: #D5DAE0;
  --vw-signal: #9A7A20;
  --vw-sidebar-breite: 15.25rem;
  --vw-trennlinie-staerke: 3px;
  /* Eine gemeinsame Höhe für Logozeile und Topbar – die Trennlinie
     liegt damit links und rechts auf derselben Kante. */
  --vw-kopfzeile-hoehe: 3.75rem;
  --vw-schrift: "Inter", system-ui, "Segoe UI", sans-serif;
  --vw-display: "Poppins", "Inter", system-ui, sans-serif;
  --pico-font-family: var(--vw-schrift);
  --pico-font-family-sans-serif: var(--vw-schrift);
  --pico-border-radius: 0.375rem;
  --pico-primary: var(--vw-rasen);
  --pico-primary-background: var(--vw-rasen);
  --pico-primary-hover: var(--vw-rasen2);
  --pico-primary-hover-background: var(--vw-rasen2);
  --pico-background-color: var(--vw-kreide);
}
html, body {
  font-family: var(--vw-schrift);
}
h1, h2, h3, hgroup > h1, .vw-wortmarke, .vw-zahl, .vw-modul-zahl,
.vw-profilname {
  font-family: var(--vw-display);
  font-weight: 600;
}
button, [type="submit"], [role="button"] {
  font-family: var(--vw-schrift);
  font-weight: 500;
}

.material-symbols-outlined {
  font-size: 1.25rem;
  vertical-align: -0.28em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- App-Gerüst ---------- */
body.vw-app { display: flex; min-height: 100vh; margin: 0; }

.vw-sidebar {
  width: var(--vw-sidebar-breite);
  min-width: var(--vw-sidebar-breite);
  background: #E8EEF2;
  color: var(--vw-rasen3);
  display: flex; flex-direction: column;
  padding: 0 .65rem;
  position: sticky; top: 0; height: 100vh;
}
.vw-sidebar .vw-marke {
  color: var(--vw-rasen3); font-weight: 700; letter-spacing: .02em; text-decoration: none;
  display: flex; align-items: center; gap: .55rem;
  box-sizing: border-box;
  height: var(--vw-kopfzeile-hoehe);
  min-height: var(--vw-kopfzeile-hoehe);
  max-height: var(--vw-kopfzeile-hoehe);
  margin: 0 -.65rem .35rem;
  padding: .45rem .65rem;
  border-bottom: var(--vw-trennlinie-staerke) solid var(--vw-rasen);
  overflow: hidden;
}
.vw-sidebar .vw-marke-ehrenwert {
  background: transparent;
  border-radius: 0;
  justify-content: flex-start;
  gap: .45rem;
  line-height: 1;
}
.vw-sidebar .vw-marke-ehrenwert .vw-marke-zeichen {
  height: 2.05rem;
  width: 2.05rem;
  flex: none;
  object-fit: contain;
  display: block;
}
.vw-wortmarke {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--vw-rasen);
  line-height: 1.1;
  white-space: nowrap;
}
.vw-sidebar .vw-wortmarke { font-size: 1rem; }
.vw-punkt { width: .7rem; height: .7rem; border: 2px solid #fff; border-radius: 50%;
  display: inline-block; flex: none; }
.vw-marke-logo {
  width: 1.85rem; height: 1.85rem; object-fit: contain; flex: none;
  border-radius: .3rem; background: rgba(255,255,255,.12);
}
.vw-sidebar nav {
  display: flex; flex-direction: column; gap: 0;
  justify-content: flex-start; align-content: flex-start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-top: .7rem;
  padding-bottom: .15rem;
}
aside.vw-sidebar nav p,
aside.vw-sidebar nav a {
  margin: 0;
}
aside.vw-sidebar nav p.vw-nav-gruppe {
  margin: 1.05rem 0 .2rem;
  padding: 0 .5rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(14, 44, 61, .45);
}
aside.vw-sidebar nav a {
  color: var(--vw-rasen2); text-decoration: none;
  display: flex; align-items: center; gap: .45rem;
  min-height: 1.85rem; height: auto;
  padding: .22rem .5rem; border-radius: .35rem;
  font-size: .82rem; line-height: 1.2;
  box-sizing: border-box;
}
aside.vw-sidebar nav a:hover {
  background: rgba(26, 75, 101, .10); color: var(--vw-rasen3);
}
aside.vw-sidebar nav a.vw-aktiv {
  background: rgba(26, 75, 101, .14);
  color: var(--vw-rasen3);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vw-rasen);
}
aside.vw-sidebar nav a .material-symbols-outlined {
  font-size: 1.05rem; opacity: .9; line-height: 1; flex: none;
}
aside.vw-sidebar nav a.vw-nav-settings {
  margin-top: auto;
}
.vw-sidebar-fuss {
  margin-top: auto; flex: none;
  display: flex; flex-direction: column; gap: .2rem;
  color: rgba(14, 44, 61, .55);
  padding: .55rem 0 .6rem;
  border-top: 1px solid rgba(26, 75, 101, .16);
}
.vw-sidebar-fuss a {
  display: flex; align-items: center; gap: .45rem;
  color: inherit; text-decoration: none;
  font-size: .75rem; line-height: 1.25;
  padding: .24rem .45rem; border-radius: .3rem;
  margin: 0;
  background: transparent; border: 0; box-shadow: none;
}
.vw-sidebar-fuss a .material-symbols-outlined {
  font-size: .95rem; opacity: .85; line-height: 1; flex: none;
}
.vw-sidebar-fuss a:hover { background: rgba(26, 75, 101, .10); color: var(--vw-rasen3); }
.vw-sidebar-fuss a.vw-aktiv {
  background: rgba(26, 75, 101, .14);
  color: var(--vw-rasen3);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vw-rasen);
}
.vw-sidebar-copy {
  margin: .35rem .45rem 0; font-size: .68rem; line-height: 1.3;
  color: rgba(14, 44, 61, .45);
}

.vw-hauptspalte {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--vw-kreide);
}

.vw-topbar {
  background: #fff;
  border-bottom: var(--vw-trennlinie-staerke) solid var(--vw-rasen);
  box-sizing: border-box;
  height: var(--vw-kopfzeile-hoehe);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem;
  position: sticky;
  top: 0;
  z-index: 30;
}
.vw-burger { display: none; cursor: pointer; margin: 0; }
.vw-topbar-rechts { margin-left: auto; }

/* Profil-Dropdown – Pico-Styles zurücksetzen (sonst doppelter Pfeil + zu hohe Zeile) */
.vw-profil { position: relative; margin: 0; display: inline; }
details.dropdown.vw-profil > summary:not([role]) {
  height: auto;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
details.dropdown.vw-profil > summary::after {
  display: none;
  content: none;
  background-image: none;
  width: 0;
  height: 0;
  margin: 0;
  float: none;
}
.vw-profil summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  padding: .25rem .5rem; border-radius: .5rem;
}
.vw-profil summary::-webkit-details-marker { display: none; }
.vw-profil summary::marker { display: none; }
.vw-profil summary:hover { background: var(--vw-kreide); }
.vw-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--vw-rasen); color: #fff; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.vw-avatar-lg { width: 3.3rem; height: 3.3rem; font-size: 1.15rem; }
.vw-profilname { font-weight: 600; font-size: .95rem; line-height: 1; }
.vw-pfeil { color: var(--pico-muted-color); font-size: 1.25rem; }
.vw-profil ul {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 40;
  background: #fff; border: 1px solid var(--vw-linie); border-radius: .5rem;
  padding: .35rem; list-style: none; min-width: 13rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.10); margin: 0;
}
.vw-profil ul li { padding: 0; }
.vw-profil ul a {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem; border-radius: .4rem; text-decoration: none;
  color: var(--pico-color); font-size: .93rem;
}
.vw-profil ul a:hover { background: var(--vw-kreide); }
.vw-logout-form { margin: 0; }
/* Pico setzt auf Buttons lokal --pico-color auf die Inverse-Farbe (weiss) und
   faerbt den Hintergrund primaer. Im hellen Dropdown waere "Abmelden" dann
   weiss auf weiss. Deshalb Text UND die lokale Variable explizit auf ein
   dunkles Markenblau setzen (nicht var(--pico-color), das ist hier weiss). */
.vw-profil .vw-logout-form button,
.vw-profil .vw-logout-form button:is([type=submit], [type=button], :not([type])) {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  margin: 0; padding: .5rem .7rem; border: none; border-radius: .4rem;
  --pico-color: var(--vw-rasen3);
  background: transparent; color: var(--vw-rasen3); font-size: .93rem;
  font-weight: 400; cursor: pointer; text-align: left;
  box-shadow: none;
}
.vw-profil .vw-logout-form button:hover,
.vw-profil .vw-logout-form button:focus-visible {
  background: var(--vw-kreide);
  color: var(--vw-rasen3);
  border: none;
  box-shadow: none;
}
.vw-logout-inline { display: inline; }
.vw-logout-inline.vw-logout-form button,
.vw-link-button {
  display: inline; width: auto; padding: 0; color: var(--pico-primary);
  text-decoration: underline; background: none; border: none; cursor: pointer;
  font: inherit; box-shadow: none;
}

body.vw-app main.vw-inhalt {
  padding: 1.4rem 1.6rem 2.5rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  flex: 1 1 auto;
  align-self: stretch;
  box-sizing: border-box;
}

/* Mobil: Sidebar einklappbar über Burger */
@media (max-width: 860px) {
  body.vw-app { display: block; }
  .vw-sidebar { position: fixed; left: 0; top: 0; z-index: 50; height: 100vh;
    transform: translateX(-100%); transition: transform .18s ease; }
  .vw-navtoggle:checked ~ .vw-sidebar { transform: translateX(0); }
  .vw-burger { display: inline-flex; }
  body.vw-app main.vw-inhalt { padding: 1rem .9rem 2rem; }
}

/* ---------- Öffentliche Seiten (Login etc.) ---------- */
/* Quadratisches Marken-Icon im oeffentlichen Kopf + Staging-Banner. */
.vw-kopf-public .vw-marke-ehrenwert .vw-marke-zeichen {
  height: 2.2rem; width: 2.2rem;
  display: block; object-fit: contain;
}
.vw-staging-banner {
  background: #9A7A20; color: #fff; text-align: center;
  font-size: .85rem; font-weight: 600; padding: .45rem .75rem;
  letter-spacing: .01em;
}
.vw-staging-banner a { color: #fff; text-decoration: underline; }
body.vw-public {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(30, 92, 58, .12), transparent 55%),
    linear-gradient(180deg, #eef4ef 0%, var(--vw-kreide) 42%, var(--vw-kreide) 100%);
}
.vw-kopf-public {
  background: #fff;
  border-bottom: var(--vw-trennlinie-staerke) solid var(--vw-rasen);
  margin-bottom: 0;
  padding: 0 1.1rem;
}
.vw-kopf-public-innen {
  max-width: 42rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--vw-kopfzeile-hoehe);
}
.vw-kopf-public .vw-marke {
  color: var(--vw-rasen3);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.vw-kopf-public .vw-marke-ehrenwert-public {
  line-height: 0;
}
.vw-kopf-public .vw-marke-ehrenwert-public img {
  height: 2.35rem;
  width: auto;
  max-width: min(14rem, 70vw);
  object-fit: contain;
  object-position: left center;
  display: block;
}
.vw-public-main {
  padding-top: 1.25rem;
  padding-bottom: 1rem;
}
.vw-fuss {
  text-align: center;
  color: var(--pico-muted-color);
  margin-top: 1.5rem;
  padding-bottom: 2rem;
}
.vw-fuss-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.25rem;
  margin-bottom: 0;
}
.vw-fuss-links a {
  color: var(--vw-rasen2);
  text-decoration: none;
  font-size: .92rem;
}
.vw-fuss-links a:hover { text-decoration: underline; }
.vw-karte-schmal { max-width: 30rem; margin: 2rem auto 1.5rem; }
.vw-auth {
  max-width: 28rem;
  margin: 2rem auto 1.5rem;
  background: #fff;
  border: 1px solid #cfc6b8;
  border-radius: .85rem;
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: 0 10px 30px rgba(22, 69, 44, .07);
}
.vw-auth h1 {
  text-align: center;
  margin: 0 0 .55rem;
  font-size: 1.55rem;
  line-height: 1.25;
}
.vw-auth-lead {
  text-align: center;
  color: var(--pico-muted-color);
  margin: 0 0 1.2rem;
  font-size: .95rem;
}
.vw-auth-form { margin-top: .15rem; }
.vw-auth-form > button[type="submit"],
.vw-auth-form .vw-aktionen { margin-top: 1rem; }
.vw-auth-hinweis {
  margin: .65rem 0 0;
  font-size: .85rem;
  color: var(--pico-muted-color);
}
.vw-auth-fussnote {
  margin: 1rem 0 0;
  font-size: .82rem;
  color: var(--pico-muted-color);
  text-align: center;
}
.vw-auth-wahl {
  cursor: pointer;
  gap: .75rem;
}
.vw-auth-wahl input[type="radio"] {
  flex: none;
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
}
.vw-auth-wahl-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.vw-auth-wahl-text small { color: var(--pico-muted-color); }
.vw-login-stack {
  border: 1px solid #cfc6b8;
  border-radius: .65rem;
  background: #faf9f7;
  overflow: hidden;
}
.vw-login-zeile {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  padding: .85rem 1rem;
  border-bottom: 1px solid #e4ddd3;
}
.vw-login-zeile:last-child { border-bottom: 0; }
.vw-login-zeile .material-symbols-outlined {
  color: #8a847a;
  font-size: 1.35rem;
  flex: none;
}
.vw-login-zeile input {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  min-width: 0;
}
.vw-login-zeile input:focus {
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
}
.vw-login-auge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: .15rem;
  border: 0;
  background: transparent;
  color: #5c574f;
  cursor: pointer;
  width: auto;
  min-width: 0;
  box-shadow: none;
}
.vw-login-auge:hover,
.vw-login-auge:focus-visible {
  background: transparent;
  color: var(--vw-rasen2);
  box-shadow: none;
}
.vw-login-auge .material-symbols-outlined { font-size: 1.3rem; color: inherit; }
.vw-login-vergessen {
  text-align: right;
  margin: .65rem 0 0;
}
.vw-login-vergessen a {
  color: var(--vw-signal);
  text-decoration: none;
  font-size: .95rem;
}
.vw-login-vergessen a:hover { text-decoration: underline; }
.vw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vw-legal { max-width: 40rem; }
.vw-wizard { max-width: 36rem; }
.vw-wizard-kopf { margin-bottom: 1.2rem; }
.vw-wizard-progress {
  margin-top: .75rem; font-size: .92rem;
}
.vw-wizard-track { display: flex; gap: .45rem; margin-top: .35rem; }
.vw-wizard-dot {
  width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--vw-linie); display: inline-block;
}
.vw-wizard-dot-active { background: var(--vw-rasen); }
.vw-wizard-dot-done { background: var(--vw-rasen2); }
.vw-sig-canvas {
  display: block; width: 100%; max-width: 100%;
  border: 1px solid var(--vw-linie); border-radius: .4rem;
  background: #fff; touch-action: none; margin-bottom: .5rem;
}
.vw-wechsel { text-align: center; margin-top: 1rem; }

/* ---------- Komponenten ---------- */
.vw-kennzahl { text-align: center; padding: 1.1rem .5rem; }
.vw-zahl { display: block; font-size: 2.3rem; font-weight: 700; color: var(--vw-rasen); line-height: 1.1; }
.vw-label { color: var(--pico-muted-color); font-size: .88rem; }

.vw-modul-karten {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 0 0 1.5rem;
}
.vw-modul-karte {
  display: block;
  background: #fff;
  border: 1px solid var(--vw-linie);
  border-radius: .75rem;
  padding: 1.15rem 1.2rem 1.25rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 3px rgba(26, 75, 101, .06);
}
.vw-modul-karte:hover {
  border-color: var(--vw-rasen);
  box-shadow: 0 4px 14px rgba(26, 75, 101, .08);
}
.vw-modul-karte .material-symbols-outlined { color: var(--vw-rasen); font-size: 1.45rem; }
.vw-modul-karte h2 { font-size: 1rem; margin: .3rem 0 .15rem; }
.vw-modul-zahl {
  font-size: 2rem; font-weight: 700; color: var(--vw-rasen);
  line-height: 1.1; margin: 0;
}
.vw-modul-meta { color: var(--pico-muted-color); font-size: .85rem; margin: .2rem 0 0; }

.vw-titelzeile { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; }

/* Pico stylt "nav a" standardmäßig als Block mit Padding (für Navbars) – das
   bläht diese schlichte Brotkrumen-Zeile unnötig auf; hier auf Inline zurücksetzen. */
.vw-breadcrumbs { margin: 0 0 1.1rem; font-size: .85rem; line-height: 1.3; }
.vw-breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; list-style: none;
  margin: 0; padding: 0; color: var(--pico-muted-color);
}
.vw-breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: 0; }
.vw-breadcrumbs li:not(:last-child)::after {
  content: "›"; color: #aaa; margin-left: .3rem;
}
.vw-breadcrumbs a { display: inline; padding: 0; text-decoration: none; }
.vw-breadcrumbs a:hover { text-decoration: underline; }
.vw-breadcrumbs [aria-current="page"] { color: var(--pico-color); font-weight: 600; }

.vw-settings-hub { margin-top: .25rem; }
.vw-settings-hub-grid {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .vw-settings-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vw-settings-hub-block {
  border: 1px solid var(--vw-linie); border-radius: .45rem;
  background: #fff; padding: 1rem 1.15rem; min-height: 8rem;
}
.vw-settings-hub-block h2 {
  font-size: 1.05rem; margin: 0 0 .65rem; padding-bottom: .45rem;
  border-bottom: 1px solid var(--vw-linie);
}
.vw-settings-hub-block ul { margin: 0; padding-left: 1.1rem; }
.vw-settings-hub-block li { margin: .35rem 0; }
.vw-settings-hub-block a { text-decoration: none; }
.vw-settings-hub-block a:hover { text-decoration: underline; }
.vw-settings-section { max-width: 40rem; }

.vw-settings-grid article header h2 {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem;
}
.vw-settings-grid article header p {
  color: var(--pico-muted-color); font-size: .92rem; margin-bottom: 1rem;
}
@media (min-width: 900px) {
  .vw-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vw-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.vw-aktionen [role="button"], .vw-aktionen button { margin-bottom: 0; width: auto; }
.vw-btn-full { width: 100%; margin: 0; }
.vw-btn-full[disabled] { opacity: .5; cursor: not-allowed; }
/* km-Pauschale-Feld direkt unter dem Namen einer Kategorie (Auslagenersatz-Einstellungen). */
.vw-category-km-input { margin-top: .35rem; }
/* "Neue Kategorie": Name + Max-Betrag nebeneinander in einer Zeile statt Pico's
   Standard-Inputbreite von 100%, die sie sonst untereinander umbrechen ließe. */
.vw-category-new-row input[type="text"],
.vw-category-new-row input[type="number"] { flex: 1 1 12rem; width: auto; margin-bottom: 0; }
/* Aktionspaare in Modals: zwei gleich große Buttons, immer 50/50 breit. */
.vw-aktionen-split, .vw-modal-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-top: .75rem;
}
.vw-aktionen-split > button, .vw-aktionen-split > [role="button"],
.vw-modal-actions > button, .vw-modal-actions > [role="button"] {
  width: 100%; margin: 0; text-align: center;
}
/* Alpine.js: Elemente mit x-cloak bleiben verborgen, bis Alpine initialisiert. */
[x-cloak] { display: none !important; }
/* eFZ-Modus-Umschalter (Einsichtnahme vs. Gemeindebescheinigung). */
.fw-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1rem; }
.fw-mode-switch label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 2.75rem; margin: 0; padding: .5rem .7rem;
  border: 1px solid var(--vw-linie); border-radius: .4rem;
  font-size: .88rem; line-height: 1.25; cursor: pointer; background: #fafafa;
  transition: border-color .12s ease, background .12s ease;
}
.fw-mode-switch label:has(input:checked) {
  border-color: var(--vw-rasen); background: #e8eef3; font-weight: 600; color: #1A4B65;
}
.fw-mode-switch label:has(input:focus-visible) {
  outline: 2px solid var(--vw-rasen); outline-offset: 1px;
}
/* Rohe Radio-Kreise ausblenden – die Kachel selbst zeigt die Auswahl. */
.fw-mode-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
/* Datenschutz-Hinweis (z. B. eFZ: nur Einsichtnahme dokumentieren, keine Kopie). */
.fw-datenschutz-hinweis {
  background: #fff8e6; border: 1px solid #e8d59a; border-radius: .4rem;
  padding: .6rem .75rem; margin: 0 0 .9rem; font-size: .85rem; line-height: 1.4;
  color: #6b5610;
}
/* Getippte Unterschrift (Admin dokumentiert Einsichtnahme). */
.fw-formfield { margin: 0 0 .5rem; }
.fw-formfield-unterschrift {
  font-family: 'Caveat', 'Segoe Script', cursive; font-size: 24px; line-height: 1.3;
}
.fw-formfield-unterschrift::placeholder { font-family: 'Caveat', 'Segoe Script', cursive; opacity: .4; }
.fw-formfield-addon { font-size: .82rem; margin-top: .1rem; }
.fw-formfield-addon-fehler { color: #b33a3a; }
.fw-formfield-fehler .fw-formfield-unterschrift {
  border-color: #b33a3a;
  box-shadow: 0 0 0 .12rem rgba(179, 58, 58, .18);
}
/* htmx-Ladehinweis (z. B. beim Datei-Upload) */
.vw-ladehinweis { margin: .25rem 0; color: var(--pico-muted-color); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.vw-btn-icon { font-size: 1.05rem; }

.vw-filter { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.vw-filter input[type="search"] { flex: 2 1 12rem; margin-bottom: 0; }
.vw-filter select { flex: 1 1 8rem; margin-bottom: 0; width: auto; }
.vw-filter button { margin-bottom: 0; }

.vw-tabelle { overflow-x: auto; }

.vw-eintrag { padding: .8rem 0; border-bottom: 1px solid var(--vw-linie); }
.vw-eintrag-zeile-oben, .vw-eintrag-zeile-unten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; align-items: end;
}
.vw-eintrag-zeile-unten { margin-top: .5rem; }
.vw-eintrag-zeile-oben label, .vw-eintrag-zeile-unten label { margin-bottom: 0; }
.vw-eintrag-zeile-oben input[readonly], .vw-eintrag-zeile-unten input[readonly] {
  background: var(--pico-form-element-disabled-background-color, #eee); opacity: .75;
}
.vw-eintrag-entfernen { align-self: center; }

.vw-status { display: inline-block; padding: .15rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; text-transform: capitalize;
  border: 1px solid var(--vw-linie); background: #fff; letter-spacing: .01em; }
.vw-status-active { color: #fff; background: var(--vw-rasen); border-color: var(--vw-rasen); }
.vw-status-interested { color: #8a5a00; background: #fff8e8; border-color: var(--vw-signal); }
.vw-status-paused { color: #555; background: #f0f0f0; border-color: #bbb; }
.vw-status-none { color: #8a5a00; background: #fff8e8; border-color: var(--vw-signal); }
.vw-status-past { color: var(--pico-muted-color); background: #f7f7f7; }

.vw-fehler { color: #A33; font-weight: 600; }
.vw-erfolg { color: var(--vw-ok); font-weight: 600; }
.vw-fehlerbox { border-left: 4px solid #A33; }
.vw-erfolgbox { border-left: 4px solid var(--vw-ok); }
.vw-wizard-erfolg { max-width: 52rem; }
.vw-erfolg-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.vw-check-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--vw-rasen); color: #fff; font-weight: 700; font-size: 1.2rem;
}
.vw-pdf-vorschau { margin: 1.2rem 0; }
.vw-pdf-toolbar { margin-bottom: .6rem; }
.vw-pdf-frame {
  width: 100%; min-height: 28rem; border: 1px solid var(--vw-linie);
  border-radius: .4rem; background: #f5f5f5;
}
.vw-korrektur { margin: 1.2rem 0; }
.vw-vergangene { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--vw-linie); }
.vw-vergangene h3 { font-size: 1rem; margin-bottom: .6rem; }

/* Compliance-Matrix – kompakte Status-Punkte + Inline-Aktionen */
.vw-matrix-toolbar { margin-top: 1.25rem; margin-bottom: 0; }
.vw-matrix-scroll {
  display: block;
  overflow-x: auto; max-width: 100%;
  /* Box wie die Nachweis-Typen-Verwaltung. Horizontal KEIN Padding: sonst
     schimmert gescrollter Spalteninhalt links neben den fixierten Spalten durch. */
  margin-top: 1.25rem; padding: .75rem 0;
  border: 1px solid var(--vw-linie); border-radius: .4rem; background: #fafafa;
}
.vw-matrix {
  --vw-matrix-select-w: 2.4rem;
  --vw-matrix-person-w: 176px;
  --vw-matrix-lifecycle-w: 160px;
  --vw-matrix-proof-min-w: 7.5rem;
  width: 100%;
  min-width: 100%;
  font-size: .88rem;
  table-layout: fixed;
  border-collapse: collapse;
}
.vw-matrix col.vw-col-select { width: var(--vw-matrix-select-w); }
.vw-matrix col.vw-col-person { width: var(--vw-matrix-person-w); }
.vw-matrix col.vw-col-lifecycle { width: var(--vw-matrix-lifecycle-w); }
.vw-matrix col.vw-col-proof { width: auto; min-width: var(--vw-matrix-proof-min-w); }
.vw-matrix thead th,
.vw-matrix tbody th,
.vw-matrix tbody td {
  vertical-align: middle;
  padding: .35rem .45rem;
  box-sizing: border-box;
}
/* Nur die ersten drei Spalten (Auswahl + Person + Status) fixieren – Kopf UND
   Datenzellen, damit Titel und Inhalt beim horizontalen Scrollen deckungsgleich
   bleiben. Wichtig: gezielt nur diese Klassen, sonst würden alle Kopfzellen kleben. */
.vw-matrix thead th { background: #fff; }
.vw-matrix .vw-matrix-select {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
  text-align: center;
}
.vw-matrix .vw-matrix-person {
  position: sticky;
  left: var(--vw-matrix-select-w);
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 var(--vw-linie);
  white-space: normal;
}
.vw-matrix .vw-matrix-lifecycle-col {
  position: sticky;
  left: calc(var(--vw-matrix-select-w) + var(--vw-matrix-person-w));
  z-index: 3;
  background: #fff;
  box-shadow: 1px 0 0 var(--vw-linie);
}
.vw-matrix-select input[type="checkbox"],
.vw-person-select {
  width: 1.05rem; height: 1.05rem; margin: 0; vertical-align: middle;
}
.vw-matrix-lifecycle { white-space: normal; line-height: 1.3; }
.vw-lifecycle-dates { color: var(--pico-muted-color); font-size: .72rem; display: block; margin-top: .15rem; }
.vw-matrix-th-wrap { position: relative; vertical-align: middle; }
.vw-matrix .vw-colhead { padding: 0; }
.vw-proof-type-hidden td { color: var(--pico-muted-color); }
.vw-legende-inline-icon { font-size: 15px; vertical-align: -3px; }

/* Klickbare Spaltenköpfe: Filter + Sortierung */
.vw-colhead { vertical-align: middle; }
.vw-colhead-btn {
  display: flex; align-items: center; gap: .28rem;
  width: 100%; margin: 0; padding: .45rem .5rem;
  border: none; background: transparent; background-color: transparent;
  box-shadow: none; color: inherit; font: inherit; font-weight: 600;
  text-align: left; cursor: pointer; border-radius: .3rem;
  line-height: 1.25;
}
.vw-colhead-btn:hover,
.vw-colhead-btn:focus-visible,
.vw-colhead.is-open .vw-colhead-btn {
  background: var(--vw-kreide);
}
.vw-colhead-text { flex: 1 1 auto; min-width: 0; }
.vw-colhead-chevron {
  font-size: 1.15rem !important; opacity: .55;
  margin-left: auto; flex: none; vertical-align: 0;
}
.vw-colhead-btn:hover .vw-colhead-chevron,
.vw-colhead-btn:focus-visible .vw-colhead-chevron,
.vw-colhead.is-open .vw-colhead-chevron,
.vw-colhead.has-active .vw-colhead-chevron {
  opacity: 1; color: var(--vw-rasen);
}
.vw-colhead-sort { font-size: .72rem; color: var(--vw-rasen); flex: none; }
.vw-colhead-dot {
  width: .42rem; height: .42rem; border-radius: 99px;
  background: var(--vw-signal); flex: none;
}
.vw-matrix .vw-colhead-btn { background: #fff; }
.vw-matrix .vw-colhead-btn:hover,
.vw-matrix .vw-colhead-btn:focus-visible,
.vw-matrix .vw-colhead.is-open .vw-colhead-btn {
  background: var(--vw-kreide);
}

#vw-table-popover { position: relative; z-index: 80; }
.vw-col-panel.is-docked,
#vw-table-popover > .vw-col-panel {
  position: fixed; z-index: 80;
  min-width: 14rem; max-width: 18rem;
  max-height: min(24rem, calc(100vh - 2rem)); overflow: auto;
  padding: .65rem .75rem;
  background: #fff; border: 1px solid var(--vw-linie); border-radius: .4rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.14); font-size: .82rem;
}
.vw-col-tip {
  position: fixed; z-index: 90;
  padding: .28rem .55rem; background: #1a1a1a; color: #fff;
  font-size: .75rem; border-radius: .3rem;
  pointer-events: none; white-space: nowrap;
}
.vw-col-section {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--pico-muted-color);
  margin: .6rem 0 .3rem;
}
.vw-col-section:first-child { margin-top: 0; }
.vw-col-search label { display: block; margin: 0; font-size: .82rem; }
.vw-col-search input[type="search"] {
  width: 100%; margin: .2rem 0 0; font-size: .82rem; padding: .25rem .4rem;
}
.vw-col-check {
  display: flex; align-items: center; gap: .4rem;
  margin: 0 0 .3rem; font-weight: 400; cursor: pointer;
}
.vw-col-check input { width: auto; margin: 0; flex: none; }
.vw-col-choice,
.vw-col-sort-btn {
  display: block; text-align: left; width: 100%; margin: .15rem 0; padding: .35rem .45rem;
  border: 1px solid transparent; border-radius: .3rem; background: transparent;
  cursor: pointer; font-size: .8rem; color: inherit;
}
.vw-col-choice:hover, .vw-col-sort-btn:hover {
  background: var(--vw-kreide); border-color: var(--vw-linie);
}
.vw-col-choice.is-active, .vw-col-sort-btn.is-active {
  background: #e8eef3; border-color: var(--vw-rasen); font-weight: 600;
}
.vw-col-clear { font-size: .75rem; margin-top: .35rem; }
.vw-globalsuche {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 1rem; max-width: 28rem;
  background: #fff; border: 1px solid var(--vw-linie);
  border-radius: .5rem; padding: .15rem .75rem .15rem .55rem;
}
.vw-globalsuche .material-symbols-outlined {
  color: var(--pico-muted-color); font-size: 1.25rem; flex: none;
}
.vw-globalsuche input[type="search"] {
  margin: 0; border: 0; background: transparent; box-shadow: none;
  padding: .45rem 0; font-size: .95rem;
}
.vw-globalsuche input[type="search"]:focus {
  box-shadow: none; outline: none;
}
.vw-coming-soon {
  max-width: 38rem; background: #fff;
  border: 1px solid var(--vw-linie); border-radius: .6rem;
  padding: 1.1rem 1.25rem;
}
.vw-coming-soon h2 { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.vw-coming-soon h2:first-child { margin-top: 0; }
.vw-coming-soon p:last-child { margin-bottom: 0; }
.vw-feedback-fragen { margin: .75rem 0 1.1rem; padding-left: 1.2rem; }
.vw-feedback-fragen li { margin: .35rem 0; }
.vw-roadmap-modul {
  background: #fff;
  border: 1px solid var(--vw-linie);
  border-radius: .6rem;
  padding: .85rem 1.1rem;
  margin: 0 0 .75rem;
}
.vw-roadmap-modul summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.vw-roadmap-modul summary::-webkit-details-marker { display: none; }
.vw-roadmap-modul summary::before {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  vertical-align: middle;
  margin-right: .35rem;
  color: var(--vw-rasen3);
}
.vw-roadmap-modul[open] summary::before { content: "expand_less"; }
.vw-roadmap-body { margin-top: .75rem; }
.vw-roadmap-body p:last-child { margin-bottom: 0; }
.vw-filter-chips {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1rem 0 1.2rem;
}
.vw-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .55rem; border: 1px solid var(--vw-linie);
  border-radius: 999px; background: #fff; font-size: .78rem;
  text-decoration: none; color: inherit;
}
.vw-chip:hover { border-color: var(--vw-rasen); color: var(--vw-rasen); }
.vw-chip-aktiv {
  border-color: var(--vw-rasen);
  background: color-mix(in srgb, var(--vw-rasen) 12%, #fff);
  color: var(--vw-rasen);
  font-weight: 600;
}
.vw-chip-reset { border-style: dashed; color: var(--pico-muted-color); }
.vw-stunden-zeile .vw-stunden-form {
  display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: flex-end;
  margin: 0;
}
.vw-stunden-zeile .vw-stunden-feld {
  margin: 0; font-size: .78rem; color: var(--pico-muted-color);
}
.vw-stunden-zeile .vw-stunden-feld input {
  width: 5.5rem; margin: 0; padding: .25rem .4rem; font-size: .9rem;
}
.vw-proof-drag-handle {
  cursor: grab; color: #999; user-select: none; padding: .15rem .35rem 0 0;
  font-size: 1.1rem; line-height: 1; vertical-align: middle;
}
.vw-proof-drag-handle:active { cursor: grabbing; }
tr.vw-proof-type-row.vw-dragging { opacity: .55; background: #fff8e8; }
tr.vw-proof-type-row.vw-drag-over { box-shadow: inset 0 2px 0 0 var(--vw-rasen); }
.vw-proof-types-table th.vw-proof-drag-col,
.vw-proof-types-table td.vw-proof-drag-col { width: 1.6rem; padding-right: .15rem; }
.vw-matrix-pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  margin-top: .75rem; font-size: .88rem;
}
.vw-page-disabled { opacity: .45; pointer-events: none; }
.vw-page-info { color: var(--pico-muted-color); }
.vw-matrix-count { margin: .5rem 0 0; color: var(--pico-muted-color); }
.vw-proof-types-admin {
  margin-top: 1.25rem; padding: .75rem 1rem;
  border: 1px solid var(--vw-linie); border-radius: .4rem; background: #fafafa;
}
.vw-proof-types-admin-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem 1rem; margin-bottom: .6rem;
}
.vw-proof-types-admin-head h3 { font-size: .92rem; margin: 0 0 .25rem; }
.vw-proof-types-admin-head .vw-muted { margin: 0; }
.vw-proof-types-admin-head a[role="button"] { width: auto; flex-shrink: 0; }
/* Auf schmalen Screens horizontal scrollen, statt über die Box hinauszuragen. */
.vw-proof-types-scroll { overflow-x: auto; max-width: 100%; }
.vw-proof-types-table { font-size: .85rem; margin: 0; width: 100%; min-width: 30rem; }
.vw-proof-type-validity { white-space: nowrap; }
.vw-proof-types-actions { text-align: right; white-space: nowrap; }
.vw-proof-types-icon-actions { display: flex; gap: .15rem; justify-content: flex-end; flex-wrap: nowrap; }
.vw-proof-types-actions-head { text-align: right; }
.vw-proof-types-actions .small { width: auto; margin: 0 0 0 .25rem; display: inline-block; }
.vw-proof-types-table .vw-inline-zeile input,
.vw-proof-types-table .vw-inline-zeile select { width: 100%; font-size: .85rem; margin: 0; }
.vw-proof-types-center { text-align: center; }
.vw-proof-types-table input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; margin: 0; vertical-align: middle;
}
.vw-proof-types-table .vw-inline-zeile { border-top: 2px solid var(--vw-linie); }
/* Pflicht-Checkbox in der neuen-Typ-Zeile: vertikal mittig statt am oberen Rand. */
.vw-inline-zeile td.vw-proof-types-center { vertical-align: middle; }
/* Gültigkeit: Einheit sichtbar neben dem Zahlenfeld, statt nur im Tooltip. */
.vw-gueltigkeit-feld { display: flex; align-items: center; gap: .35rem; }
.vw-gueltigkeit-feld input { width: auto; flex: 1 1 auto; min-width: 0; }
.vw-gueltigkeit-feld .vw-einheit { flex-shrink: 0; color: var(--pico-muted-color); font-size: .78rem; }
.vw-modal-wide { max-width: 36rem; }
/* Auslagenersatz-Prüfmodal: PDF-Vorschau + Posten-Tabelle brauchen mehr Platz.
   Compound-Selektor nötig, da die spätere .vw-modal-Regel (26rem) sonst bei
   gleicher Spezifität per Quellreihenfolge gewinnen würde (siehe .vw-modal-pdf). */
.vw-modal.vw-modal-reimbursement { max-width: 56rem; }
.vw-reimbursement-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.2rem; margin: 0 0 1rem; }
.vw-reimbursement-review-grid dt { font-weight: 600; color: var(--pico-muted-color); font-size: .85rem; }
.vw-reimbursement-review-grid dd { margin: 0 0 .3rem; }
.vw-reimbursement-posten-table { width: 100%; font-size: .88rem; margin: 0 0 1rem; }
.vw-reimbursement-posten-table th, .vw-reimbursement-posten-table td {
  padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--vw-linie);
}
.vw-reimbursement-posten-table td.betrag, .vw-reimbursement-posten-table th.betrag {
  text-align: right; white-space: nowrap;
}
/* Statuslabel ist bereits korrekt geschrieben (z. B. "Auszahlung ausstehend") –
   die globale .vw-status-Großschreibung wäre hier falsch. */
.vw-status-reimbursement { text-transform: none; }
.vw-status-reimbursement.vw-status-payout_pending,
.vw-status-reimbursement.vw-status-paid { color: var(--vw-ok); border-color: var(--vw-ok); }
.vw-status-reimbursement.vw-status-rejected { color: #A33; border-color: #A33; }
.vw-mail-template-block { margin: 0 0 1rem; padding: .6rem .75rem; border: 1px solid var(--vw-linie); border-radius: .35rem; }
.vw-mail-template-block legend { font-weight: 600; font-size: .88rem; padding: 0 .25rem; }
.vw-modal-danger .vw-delete-warn {
  background: #fff5f5; border: 1px solid #e8b4b4; border-radius: .35rem;
  padding: .6rem .75rem; margin-bottom: .75rem; font-size: .88rem;
}
.vw-modal-danger .vw-delete-warn ul { margin: .4rem 0 0; padding-left: 1.2rem; }
/* .vw-modal-actions: Layout siehe .vw-aktionen-split (50/50-Grid) weiter oben. */
.vw-muted { color: var(--pico-muted-color); }
.vw-matrix-th-name {
  white-space: normal; font-size: .8rem; line-height: 1.25; vertical-align: bottom;
}
.vw-matrix-head th { padding-bottom: .35rem; vertical-align: middle; }
.vw-matrix-filter-row th { padding-top: 0; }
.vw-matrix-filter-row input,
.vw-matrix-filter-row select {
  font-size: .78rem; margin: 0; padding: .2rem .35rem; width: 100%;
}
.vw-matrix-cell { padding: .3rem .4rem; text-align: left; vertical-align: middle; }
.vw-matrix-cell-actions {
  display: inline-flex; align-items: center; gap: .2rem; flex-wrap: nowrap;
}
.vw-status-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.vw-dot-valid { background: var(--vw-ok); }
.vw-dot-missing { background: #B33A3A; }
.vw-dot-requested { background: var(--vw-signal); }
.vw-dot-not_required { background: #bbb; }
.vw-dot-expired { background: #6b1010; }
.vw-dot-uploaded { background: #2b6cb0; }
.vw-matrix-icon {
  /* Grid + place-items zentriert den Glyph zuverlässig in der festen Box. */
  display: inline-grid; place-items: center;
  padding: 0; margin: 0; border: none; background: none; cursor: pointer;
  line-height: 0; color: #1a1a1a; vertical-align: middle;
  border-radius: .3rem; width: 1.9rem; height: 1.9rem;
}
.vw-matrix-icon-lg { width: 1.9rem; height: 1.9rem; }
.vw-matrix-icon:hover { color: #000; background: var(--vw-kreide); }
.vw-matrix-icon[disabled] { opacity: .35; cursor: not-allowed; }
.vw-matrix-icon[disabled]:hover { background: none; }
/* Auslagenersatz-Kategorien: eigene, größere Icon-Box – unabhängig von
   .vw-matrix-icon-lg (an anderer Stelle bereits mit fester Größe belegt). */
.vw-category-icon-lg { width: 2.5rem; height: 2.5rem; }
.vw-category-icon-lg .material-symbols-outlined { font-size: 26px; }
/* Alle Aktions-Glyphen exakt gleich groß und in der Box vertikal mittig.
   Material Symbols hat eine top-lastige Metrik (Ascent≫Descent) – die feste
   quadratische Box + place-items:center gleicht das aus. */
.vw-matrix-icon .material-symbols-outlined {
  font-size: 20px; line-height: 1; display: block;
  font-variation-settings: 'wght' 400, 'opsz' 24;
}
/* Mehrfachauswahl (Sammelaktion): Anfrage-Icons bleiben aktiv, alle anderen
   Aktionen der Matrix werden ausgegraut und sind nicht mehr anklickbar. */
.vw-bulk-banner {
  display: none; align-items: center; gap: .4rem;
  margin: 1rem 0 -.25rem; padding: .55rem .75rem;
  border: 1px solid var(--vw-rasen); border-radius: .4rem;
  background: #e8eef3; color: #1A4B65; font-size: .85rem;
}
body.vw-bulk-mode .vw-bulk-banner { display: flex; }
.vw-bulk-count { font-weight: 700; }
body.vw-bulk-mode .vw-matrix-icon:not([data-bulk-request]) {
  opacity: .35; pointer-events: none; cursor: not-allowed;
}
.vw-profile-option { display: block; margin: .5rem 0; padding: .5rem .65rem; border: 1px solid var(--vw-linie); border-radius: .35rem; }
.vw-profile-option small { display: block; color: var(--pico-muted-color); margin-top: .2rem; }
.vw-sign-document { max-height: 20rem; overflow: auto; background: #fafafa; padding: .75rem; border-radius: .35rem; }
.vw-sign-document-pdf { max-height: none; }
.vw-pdf-embed { width: 100%; height: 32rem; border: 1px solid var(--vw-linie); border-radius: .35rem; background: #fff; }
/* Großes PDF-Vorschau-Modal: nutzt fast den ganzen Viewport, Embed füllt die Höhe.
   .vw-modal.vw-modal-pdf schlägt das spätere .vw-modal { max-width: 26rem }. */
.vw-modal.vw-modal-pdf {
  width: 90vw; max-width: 1000px; height: 85vh; max-height: 85vh;
  display: flex; flex-direction: column;
}
.vw-modal-pdf .vw-pdf-embed { height: auto; flex: 1 1 auto; min-height: 0; }
.vw-modal-pdf .vw-review-facts { flex: 0 0 auto; }
.vw-modal-pdf .vw-aktionen { flex: 0 0 auto; }
.vw-document-body { white-space: pre-wrap; font-family: inherit; font-size: .9rem; margin: 0; }

/* Vorlagen-Gestaltung (Editor-Vorschau, Signatur-Ansicht; PDF analog) */
.vw-doc-sans { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.vw-doc-serif { font-family: Georgia, "Times New Roman", serif; }
.vw-doc-size-small { font-size: .8rem; }
.vw-doc-size-normal { font-size: .9rem; }
.vw-doc-size-large { font-size: 1.05rem; }
.vw-doc-align-left { text-align: left; }
.vw-doc-align-justify { text-align: justify; }
.vw-doc-align-center { text-align: center; }

/* Nutzer & Rollen */
.vw-user-inactive td { color: var(--pico-muted-color); text-decoration: line-through; }
.vw-user-inactive td:last-child, .vw-user-inactive td select { text-decoration: none; }

/* Vereinslogo in den Einstellungen */
.vw-logo-vorschau { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.vw-logo-vorschau img {
  max-height: 5rem; max-width: 12rem; object-fit: contain;
  border: 1px solid var(--vw-linie); border-radius: .35rem; padding: .3rem; background: #fff;
}

/* Vorlagen-Editor: Formular + Vorschau nebeneinander */
.vw-editor-grid { display: grid; gap: 1.2rem; align-items: start; }
@media (min-width: 1100px) {
  .vw-editor-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.vw-editor-grid .vw-sign-document { max-height: 32rem; }
.vw-editor-style { border: 1px solid var(--vw-linie); border-radius: .4rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.vw-editor-style legend { font-weight: 600; padding: 0 .25rem; }
.vw-matrix-lifecycle .vw-status { font-size: .82rem; }
.vw-matrix-legende {
  margin-top: 1rem; padding: .75rem 1rem;
  border: 1px solid var(--vw-linie); border-radius: .4rem; background: #fafafa;
}
.vw-matrix-legende h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pico-muted-color); margin: 0 0 .4rem; }
.vw-legende-teil { margin-bottom: .6rem; }
/* Status und Aktionen als spaltenbündiges Raster: jedes Aktions-Icon steht
   unter einem Status-Punkt. */
.vw-matrix-legende ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .35rem .9rem;
  list-style: none; padding: 0; margin: 0;
}
.vw-matrix-legende li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.vw-matrix-legende li .material-symbols-outlined {
  font-size: 20px; width: 22px; text-align: center; color: #1a1a1a;
}
.vw-matrix-legende li .vw-status-dot { margin: 0 5px; }
.vw-matrix-legende p { margin: .2rem 0 0; color: var(--pico-muted-color); }
.vw-modal-host {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center;
  justify-content: center; pointer-events: none; padding: 1rem;
}
.vw-modal-host:not(:empty) {
  pointer-events: auto; background: rgba(0, 0, 0, .35);
}
.vw-modal {
  position: relative;
  background: #fff; border: 1px solid var(--vw-linie); border-radius: .5rem;
  padding: 1rem 1.2rem; max-width: 26rem; width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .15); margin: 0;
  /* Hohe Modals nicht abschneiden: im Viewport halten und intern scrollen. */
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.vw-modal-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; padding-right: 2.75rem; }
.vw-modal-kopf h3 { flex: 1 1 100%; margin: 0; }
/* Schließen-Button: rund, dezent, oben rechts in der Modal-Ecke. */
.vw-modal .vw-modal-close {
  position: absolute; top: .7rem; right: .7rem; z-index: 1;
  width: 2rem; height: 2rem; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; font-weight: 400;
  border: none; border-radius: 50%;
  background: transparent; color: var(--pico-muted-color);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.vw-modal .vw-modal-close:hover,
.vw-modal .vw-modal-close:focus-visible {
  background: rgba(0, 0, 0, .07); color: var(--pico-color, #1a1a1a);
}
.vw-proof-chip {
  display: inline-block; padding: .15rem .55rem; border-radius: .35rem;
  font-size: .8rem; font-weight: 600; border: 2px solid transparent;
}
.vw-proof-chip.vw-proof-valid { border-color: var(--vw-ok); background: #eef4f0; color: #2d5a3a; }
.vw-proof-chip.vw-proof-missing { border-color: #B33A3A; background: #fdf0f0; color: #7a1f1f; }
.vw-proof-chip.vw-proof-requested { border-color: var(--vw-signal); background: #fff8e8; color: #8a5a00; }
.vw-proof-chip.vw-proof-not_required { border-color: #ccc; background: #f5f5f5; color: #666; }
.vw-proof-chip.vw-proof-expired { border-color: #6b1010; background: #3d1414; color: #fff; }
.vw-proof-chip.vw-proof-uploaded { border-color: #2b6cb0; background: #ebf4ff; color: #1a4f8a; }

/* Personenliste – kompakt */
.vw-personen-tabelle { font-size: .92rem; }
.vw-personen-tabelle th,
.vw-personen-tabelle td { padding: .7rem .85rem; vertical-align: middle; }
.vw-personen-tabelle td.vw-email { font-size: .85rem; color: var(--pico-muted-color); word-break: break-all; }
.vw-personen-tabelle td input,
.vw-personen-tabelle td select { margin-bottom: 0; font-size: .88rem; }
.vw-name-inline {
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; align-items: start;
}
.vw-name-inline input { margin: 0; width: 100%; font-size: .88rem; }
.vw-name-inline input[type="hidden"] { display: none; }
.vw-person-edit-name { display: flex; align-items: flex-start; gap: .65rem; }
.vw-person-edit-name .vw-name-inline { flex: 1; min-width: 0; }
.vw-aktion-spalte { width: 7.2rem; text-align: left; white-space: nowrap; vertical-align: middle; }
.vw-aktion-gruppe {
  display: inline-flex; align-items: center; gap: .2rem;
  justify-content: flex-start; flex-wrap: nowrap;
}
.vw-aktion-gruppe form,
form.vw-icon-form { display: contents; }
button.vw-icon-btn, a.vw-icon-btn, span.vw-icon-btn {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; min-width: 1.9rem; min-height: 1.9rem;
  margin: 0; padding: 0;
  background: none; border: none; cursor: pointer;
  border-radius: .3rem; color: #1a1a1a;
  box-shadow: none; line-height: 0; vertical-align: middle;
  text-decoration: none;
}
span.vw-icon-btn.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}
button.vw-icon-btn:hover, button.vw-icon-btn:focus-visible,
a.vw-icon-btn:hover, a.vw-icon-btn:focus-visible {
  border-color: transparent; color: #000; background: var(--vw-kreide);
}
button.vw-icon-btn-save:hover, button.vw-icon-btn-save:focus-visible {
  color: var(--vw-rasen); background: var(--vw-kreide); border-color: transparent;
}
button.vw-icon-btn .material-symbols-outlined,
a.vw-icon-btn .material-symbols-outlined,
span.vw-icon-btn .material-symbols-outlined {
  font-size: 20px; line-height: 1; display: block;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vw-personen-tabelle .vw-status { margin: 0; }
.vw-inline-toolbar-zeile td { padding-top: .35rem; padding-bottom: .85rem; }
.vw-inline-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .65rem;
}
.vw-inline-toolbar button {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0; width: auto; font-size: .88rem;
}
.vw-inline-toolbar-spacer { flex: 1 1 4rem; }
.vw-inline-extra { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.vw-inline-extra input { width: 11rem; margin: 0; font-size: .88rem; }
.vw-inactive-toggle { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; }
.vw-zeitraum-liste { display: flex; flex-direction: column; gap: .65rem; }
.vw-zeitraum-karten-zelle {
  display: flex; flex-direction: column; gap: .4rem; min-width: 11rem;
}
.vw-zeitraum-karten-zelle select,
.vw-zeitraum-karten-zelle input { margin: 0; font-size: .88rem; }
.vw-zeitraum-karte {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--vw-linie);
  border-radius: .5rem; background: #fff;
  border-left-width: 4px;
}
.vw-zeitraum-karte-aktiv {
  background: #e8eef3; border-color: #c5d4de; border-left-color: var(--vw-rasen);
}
.vw-zeitraum-karte-past {
  background: #f3f3f1; border-color: #e0e0dc; border-left-color: #9a9a92;
}
.vw-zeitraum-karte-none {
  background: #fff8e8; border-color: #ead9b3; border-left-color: var(--vw-signal);
}
.vw-zeitraum-karte-kompakt { padding: .45rem .65rem; gap: .5rem; }
.vw-zeitraum-karte-kompakt .vw-zeitraum-karte-body strong { font-size: .88rem; }
.vw-zeitraum-karte-kompakt .vw-zeitraum-karte-meta,
.vw-zeitraum-karte-kompakt .vw-zeitraum-karte-dates { font-size: .78rem; }
.vw-zeitraum-karte-body { min-width: 0; flex: 1; }
.vw-zeitraum-karte-body strong { display: block; font-size: 1rem; }
.vw-zeitraum-karte-meta, .vw-zeitraum-karte-dates {
  margin: .2rem 0 0; color: var(--pico-muted-color); font-size: .88rem;
}
.vw-zeitraum-karte-dates { color: var(--pico-color); }
.vw-zeitraum-karte-past .vw-zeitraum-karte-dates { color: var(--pico-muted-color); }
.vw-zeitraum-karte .vw-aktion-gruppe { flex: none; padding-top: .1rem; }
.vw-zeitraum-karte-kompakt .vw-aktion-gruppe { padding-top: 0; align-self: center; }
.vw-zeitraum-edit-wrap { margin-top: .75rem; }
.vw-zeitraum-form { display: grid; gap: .65rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.vw-zeitraum-form h3 { grid-column: 1 / -1; margin: 0; font-size: 1.05rem; }
.vw-zeitraum-neu {
  width: 100%; margin-top: 1.35rem; padding: 1rem 1.15rem 1.2rem;
  border: 1px solid var(--vw-linie); border-radius: .5rem; background: #fff;
}
.vw-zeitraum-neu .vw-zeitraum-form { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vw-zeitraum-form .vw-zeitraum-neu-actions,
.vw-zeitraum-form .vw-hinweis,
.vw-zeitraum-form .vw-checkbox-label { grid-column: 1 / -1; }
.vw-zeitraum-form .vw-zeitraum-neu-actions button { width: auto; }
.vw-zeitraum-neu-actions {
  display: flex; justify-content: flex-start; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.vw-zeitraum-neu-actions button {
  width: auto; flex: 0 0 auto; margin: 0; min-width: 0;
}
@media (max-width: 52rem) {
  .vw-zeitraum-form,
  .vw-zeitraum-neu .vw-zeitraum-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 32rem) {
  .vw-zeitraum-form,
  .vw-zeitraum-neu .vw-zeitraum-form { grid-template-columns: 1fr; }
}
.vw-hinweis { background: #fff8e8; border: 1px solid var(--vw-signal); padding: .6rem .75rem; border-radius: .4rem; }
.vw-checkbox-label { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.vw-pflicht-hinweis { color: var(--pico-muted-color); font-size: .8rem; }
.vw-tabelle-fuss { margin: .9rem 0 0; }
.vw-tabelle-fuss button { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.vw-person-link {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none;
}
.vw-person-link-text { display: flex; flex-direction: column; line-height: 1.25; }
.vw-person-link small { color: var(--pico-muted-color); font-weight: 400; }
.vw-club-avatar {
  width: 2.15rem; height: 2.15rem; object-fit: contain;
  border-radius: .4rem; background: #fff;
  border: 1px solid var(--vw-linie); flex: none;
}
.vw-club-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vw-rasen); color: #fff; font-weight: 700;
  font-size: .85rem; border-color: transparent;
}
.vw-club-avatar-lg { width: 3.3rem; height: 3.3rem; font-size: 1.2rem; }
.vw-person-kopf { margin-bottom: 1.75rem; }
.vw-person-kopf-main { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.vw-person-kopf-main hgroup { margin: 0; }
.vw-email-zeile { display: block; }
.vw-konto-icon {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: .35rem;
  width: 1.55rem; height: 1.55rem; min-width: 1.55rem; padding: 0; border: none;
  background: transparent; color: var(--vw-rasen); cursor: default;
  box-shadow: none; line-height: 1;
}
button.vw-konto-icon {
  cursor: pointer; margin: 0; padding: 0;
  background: transparent; border: none; box-shadow: none;
  width: 1.55rem; height: 1.55rem;
}
button.vw-konto-icon { cursor: pointer; }
.vw-konto-icon .material-symbols-outlined { font-size: 1.2rem; vertical-align: 0; }
.vw-konto-ok { color: var(--vw-ok); }
.vw-inline-invite { display: inline; margin: 0; }
.vw-extra-toggle { width: auto; display: inline-flex; align-items: center; gap: .35rem; }
[x-cloak] { display: none !important; }
.vw-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vw-dot-bar { display: inline-flex; align-items: center; gap: .35rem; }
.vw-dot-bar-empty { min-width: 2.5rem; }

/* Personen-Detail */
.vw-stamm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.vw-stamm-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--vw-linie); }
.vw-stamm-standard { margin-bottom: 1.75rem; }
.vw-stamm-standard-liste {
  list-style: none; padding: 0; margin: .75rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem;
}
.vw-stamm-standard-liste li {
  background: #f6f8f6; border: 1px solid var(--vw-linie); border-radius: .4rem;
  padding: .55rem .75rem;
}
.vw-stamm-standard-liste small { display: block; color: var(--pico-muted-color); font-size: .8rem; }
.vw-stamm-zusatz h3 { margin-top: 0; }
.vw-feld-neu-form { margin-top: .75rem; }
.vw-feld-neu-form button { width: auto; }
#vw-feld-neu-btn { width: auto; }
.vw-abteilungen-block { scroll-margin-top: 1.5rem; }
.vw-abteilungen-add button { width: auto; }
.vw-abteilung-feld .vw-feld-link {
  display: inline-block; font-size: .82rem; margin-top: .2rem;
}
.vw-abteilung-feld-kompakt { font-size: .82rem; margin: 0; font-weight: 600; }
.vw-abteilung-feld-kompakt select { font-weight: 400; }
.vw-inline-aktivitaet label { font-size: .82rem; margin: 0; font-weight: 600; }
.vw-inline-aktivitaet label input,
.vw-inline-aktivitaet label select { font-weight: 400; margin: .2rem 0 0; }
.vw-pre { white-space: pre-wrap; }
.vw-person-matrix { width: 100%; }
.vw-person-matrix th[scope="row"] {
  text-align: left; font-weight: 600; font-size: .92rem; vertical-align: middle;
}
.vw-person-matrix th[scope="row"] small {
  display: block; font-weight: 400; color: var(--pico-muted-color);
}
.vw-person-matrix td.vw-matrix-cell { width: 1%; white-space: nowrap; }
.vw-hinweisbox { border-left: 4px solid var(--vw-signal); }

/* Inline-Direkteingabe */
.vw-inline-zeile { background: #fff; }
.vw-inline-zeile td { vertical-align: top; }
.vw-inline-zeile input, .vw-inline-zeile select { margin-bottom: .35rem; font-size: .9rem; }
.vw-kontakt-inline input { margin-bottom: .35rem; }
.vw-inline-speichern { font-size: .85rem; margin-bottom: 0; }

/* Vorlagen & Dokumente */
.vw-dokument { background: #fff; border: 1px solid var(--vw-linie); }
.vw-dokument-text { white-space: pre-wrap; font-family: inherit; background: transparent;
  padding: 0; margin: 0; font-size: .95rem; line-height: 1.55; }
.vw-checkbox-label { display: block; margin-bottom: .6rem; }
.vw-zeilen-aktionen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.vw-zeilen-aktionen form { margin: 0; display: inline; }
.vw-linkbutton { background: none; border: none; color: var(--vw-rasen); padding: 0;
  font-size: .95rem; text-decoration: underline; cursor: pointer; width: auto; margin: 0; }
.vw-linkbutton.vw-gefahr { color: #A33; }

/* Aufgabenlisten */
.vw-aufgaben { list-style: none; padding: 0; }
.vw-aufgaben li { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--vw-linie); flex-wrap: wrap; }
.vw-aufgaben [role="button"] { margin-bottom: 0; }
.vw-badge { background: var(--vw-signal); color: #fff; border-radius: 999px;
  padding: .05rem .55rem; font-size: .8rem; vertical-align: middle; }

/* Multi-Select & Dreipunktemenü */
.vw-bulk { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--vw-rasen); border-radius: .4rem;
  padding: .5rem .8rem; margin-bottom: .8rem; }
.vw-bulk select, .vw-bulk button { margin-bottom: 0; width: auto; }
.vw-check { width: 2.2rem; }
.vw-check input[type="checkbox"] { margin: 0; }
.vw-menuspalte { width: 2.5rem; text-align: right; }
.vw-menu summary { list-style: none; cursor: pointer; padding: .1rem .5rem;
  border-radius: .3rem; font-weight: 700; display: inline-block; }
.vw-menu summary::-webkit-details-marker { display: none; }
.vw-menu summary::after { content: none; }
.vw-menu summary:hover { background: var(--vw-kreide); }
.vw-menu { position: relative; margin: 0; }
.vw-menu ul { position: absolute; right: 0; z-index: 20; background: #fff;
  border: 1px solid var(--vw-linie); border-radius: .4rem; padding: .3rem .6rem;
  list-style: none; min-width: 11rem; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.vw-menu ul li { padding: .15rem 0; text-align: left; direction: ltr; }
.vw-menu form { margin: 0; }

/* Compliance-Ampel */
.vw-ampel { display: inline-block; width: .85rem; height: .85rem; border-radius: 50%;
  vertical-align: middle; border: 1px solid rgba(0,0,0,.15); }
.vw-ampel-valid { background: var(--vw-ok); }
.vw-ampel-expiring { background: var(--vw-signal); }
.vw-ampel-expired { background: #B33A3A; }
.vw-ampel-missing { background: #D9D9D9; }
.vw-ampel-pending { background: #fff; border: 2px dashed var(--vw-signal); }
.vw-ampelzelle { white-space: nowrap; }
.vw-ampelzelle small { display: block; color: var(--pico-muted-color); font-size: .72rem; }
.vw-review { display: flex; gap: .4rem; flex-wrap: wrap; }
.vw-review input { margin-bottom: 0; font-size: .85rem; flex: 1 1 9rem; }
.vw-review button { margin-bottom: 0; font-size: .85rem; width: auto; }

/* Dokumenten-Portal (öffentlich + /meine-dokumente) */
.vw-docs-portal .vw-portal-shell { max-width: 40rem; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.vw-portal-logo { text-align: center; margin: 0 0 1rem; }
.vw-portal-logo img { max-height: 4.5rem; max-width: 12rem; object-fit: contain; }
.vw-portal-titel h1 { font-size: 1.55rem; margin-bottom: .35rem; }
.vw-portal-meta { color: var(--pico-muted-color); line-height: 1.4; margin: 0 0 1rem; }
.vw-portal-intro { font-size: 1.05rem; margin: 0 0 1.5rem; }
.vw-portal-block {
  border: 1px solid var(--vw-linie); border-radius: .5rem;
  padding: 1rem 1.1rem; margin: 0 0 1rem; background: #fff;
}
.vw-portal-block-open { border-color: #e0a86a; background: #fffaf3; }
.vw-portal-block h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.vw-portal-group-head { font-weight: 600; margin: .75rem 0 .4rem; }
.vw-portal-group-head:first-of-type { margin-top: 0; }
.vw-portal-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.vw-portal-actions a[role="button"],
.vw-portal-actions button { width: auto; margin: 0; }
.vw-portal-item { display: block; padding: .25rem 0; color: var(--pico-muted-color); }

.vw-mail-editor-intro { margin-bottom: 1rem; }
.vw-placeholder-chips, .vw-mail-body-tools {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .4rem 0 .75rem;
}
.vw-placeholder-chips .vw-chip,
.vw-mail-body-tools .vw-chip {
  width: auto !important; margin: 0 !important; padding: .15rem .5rem !important;
  font-size: .75rem !important; font-family: ui-monospace, monospace;
}
.vw-mail-template-block { margin-bottom: 1.5rem; }
.vw-mail-block-actions { margin: .5rem 0 0; }
.vw-mail-preview { margin-top: 1rem; padding: .75rem; border: 1px solid var(--vw-linie); border-radius: .4rem; background: #fafafa; }
.vw-mail-preview h4 { margin: 0 0 .5rem; font-size: .95rem; }
.vw-mail-preview-frame {
  display: block; width: 100%; min-height: 22rem; border: 1px solid var(--vw-linie);
  border-radius: .3rem; background: #fff;
}
[x-cloak] { display: none !important; }

.vw-proof-history { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--vw-linie); }
.vw-proof-history h4 { margin: 0 0 .65rem; font-size: 1rem; }
.vw-proof-history-table { width: 100%; font-size: .9rem; }
.vw-proof-history-table th,
.vw-proof-history-table td { padding: .35rem .4rem; text-align: left; border-bottom: 1px solid var(--vw-linie); }
.vw-proof-history-table th { color: var(--pico-muted-color); font-weight: 600; }
.vw-proof-history-empty { margin: 0 0 .5rem; color: var(--pico-muted-color); }
.vw-proof-history-upload { margin: .75rem 0 0; }

.vw-sign-done-head h1 { font-size: 1.45rem; margin: 0; }
.vw-sign-done-head p { margin: .65rem 0 0; }
.vw-sign-done-pdf { margin: 1.25rem 0; }
.vw-sign-done-download { text-align: right; margin: 0 0 .5rem; }
.vw-pdf-embed {
  display: block; width: 100%; min-height: 32rem; height: 70vh;
  border: 1px solid var(--vw-linie); border-radius: .35rem; background: #fff;
}

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

/* ---------- Einrichtungs-Assistent (Setup-Guide) ---------- */

.vw-setup-karte {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  border-left: 4px solid var(--vw-signal);
  margin-bottom: 1.5rem;
}
.vw-setup-karte-kopf { display: flex; align-items: center; gap: .75rem; }
.vw-setup-karte-kopf .material-symbols-outlined {
  color: var(--vw-signal); font-size: 2rem;
}
.vw-setup-karte-kopf p { margin: 0; }
.vw-setup-karte [role="button"] { margin: 0; white-space: nowrap; }

.vw-setup-schritte { list-style: none; padding: 0; margin: 0; }
.vw-setup-schritt {
  display: flex; gap: 1rem;
  padding: 1.25rem; margin-bottom: 1rem;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--vw-linie); border-radius: .5rem;
}
.vw-setup-schritt.vw-setup-erledigt { opacity: .72; }
.vw-setup-marke { flex: 0 0 2.5rem; }
.vw-setup-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--vw-rasen); color: #fff; font-weight: 700;
}
.vw-setup-erledigt .vw-setup-marke .material-symbols-outlined {
  color: var(--vw-rasen); font-size: 2.25rem;
}
.vw-setup-inhalt { flex: 1 1 auto; }
.vw-setup-inhalt h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.vw-setup-inhalt p { margin: 0 0 .75rem; }
.vw-setup-inhalt [role="button"] { margin: 0; }
.vw-setup-status {
  margin-left: .5rem; font-weight: 400; color: var(--vw-rasen);
  text-transform: uppercase; letter-spacing: .04em; font-size: .7rem;
}
.vw-setup-fertig { border-left: 4px solid var(--vw-ok); }
.vw-setup-fertig p { display: flex; align-items: center; gap: .5rem; }
.vw-setup-fertig .material-symbols-outlined { color: var(--vw-ok); }
.vw-setup-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.vw-setup-aktionen form { margin: 0; }
.vw-setup-aktionen button { margin: 0; }

/* Onboarding: gerenderter Markdown und Zielgruppen-Haken */
.vw-markdown {
  background: #fff; border: 1px solid var(--vw-linie); border-radius: .4rem;
  padding: .9rem 1.1rem; line-height: 1.55;
}
.vw-markdown > :first-child { margin-top: 0; }
.vw-markdown > :last-child { margin-bottom: 0; }
.vw-zielgruppe {
  border: 1px solid var(--vw-linie); border-radius: .4rem;
  padding: .75rem 1rem; margin: 0 0 1rem;
}
.vw-zielgruppe legend { font-weight: 600; padding: 0 .35rem; }
.vw-lektion-medium { margin: 1rem 0; }
.vw-lektion-medium img, .vw-lektion-medium video { max-width: 100%; height: auto; }

/* CSV-Import-Vorschau */
.vw-import-vorschau { margin-top: .5rem; }
.vw-import-aktionen {
  display: flex; flex-wrap: wrap; gap: .65rem; align-items: center;
  margin: 0 0 1rem;
}
.vw-import-aktionen button { margin: 0; }
.vw-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.vw-import-tabelle { width: 100%; font-size: .9rem; }
.vw-import-tabelle th { white-space: nowrap; }
.vw-import-tabelle input,
.vw-import-tabelle select {
  margin: 0; width: 100%; min-width: 6rem; font-size: .9rem;
}
.vw-import-tabelle input[type="checkbox"] {
  width: auto; min-width: 0; margin: 0 auto; display: block;
}
.vw-import-tabelle td { vertical-align: middle; }
.vw-import-duplicate { background: #faf6ee; }
.vw-import-invalid { background: #f8eeee; color: var(--pico-muted-color); }
.vw-import-ok { color: var(--vw-ok); font-weight: 600; }
.vw-import-hinweis { color: var(--vw-signal); }
.vw-import-nein { color: var(--pico-muted-color); }

.vw-inventar-anlegen { margin-top: 2rem; }
.vw-inventar-anlegen-felder {
  display: grid;
  gap: .85rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start;
  margin-bottom: 1rem;
}
.vw-inventar-anlegen-felder label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  min-width: 0;
  margin-bottom: 0;
  white-space: normal;
}
.vw-inventar-anlegen-felder input,
.vw-inventar-anlegen-felder select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-bottom: 0;
}
.vw-umlauf { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-umlauf-voll { font-weight: 600; }
.vw-inventar-zuweisungen { margin-top: 2.25rem; }
.vw-inventar-zuweisen-kurz {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 1fr) auto;
  gap: .5rem .75rem;
  align-items: end;
  margin: 0;
}
.vw-inventar-zuweisen-kurz label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
  margin-bottom: 0;
}
.vw-inventar-zuweisen-kurz input,
.vw-inventar-zuweisen-kurz select,
.vw-inventar-zuweisen-kurz button {
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.vw-inventar-zuweisen-kurz button { width: auto; }
.vw-inventar-tabelle .vw-aktion-spalte { width: 8.5rem; }