/* VIALENUM - App-Ebene.
   Teil 1-3 uebernommen aus dem Claude-Design-Handoff "vialenum-project"
   (assets/app.css, Login.html, Startseite.html). Teil 4: Ergaenzungen fuer Django
   (Dialoge, Toasts, Mobile-Navigation, Formulare). Farben/Typo nur ueber DS-Tokens. */

/* ===== 1) assets/app.css ===== */
/* ============================================================
   opAt × VIALENUM — application layer
   Built on the VIALENUM Design System tokens (navy + emerald,
   IBM Plex Sans, Carbon, borders-not-shadows, 16px cards).
   Only design-system tokens are used for color / type / spacing.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--vl-gray-10);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100vh; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------------- App frame ---------------- */
.vlapp { display: flex; height: 100vh; overflow: hidden; }
.vlapp__main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vlapp__scroll { flex: 1; overflow-y: auto; }
.vlapp__screen {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 28px 32px 64px; display: flex; flex-direction: column; gap: 24px;
}

/* ---------------- Top bar ---------------- */
.vltop {
  display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 28px;
  background: #fff; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto;
}
.vltop__title { font: var(--text-h4); font-size: 22px; margin: 0; letter-spacing: -0.01em; }
.vltop__search { position: relative; margin-left: auto; width: 300px; max-width: 38vw; }
.vltop__search .vl-field__input { height: 40px; background: var(--vl-gray-10); border-color: var(--border-subtle); }
.vltop__actions { display: flex; align-items: center; gap: 10px; }

/* Role switch (demo) */
.roleswitch { display: flex; align-items: center; gap: 0; background: var(--vl-gray-10);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 3px; }
.roleswitch button {
  border: none; background: transparent; cursor: pointer; font-family: var(--font-sans);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--vl-gray-60);
  padding: 5px 11px; border-radius: 6px; transition: all var(--dur-fast) var(--ease-standard);
}
.roleswitch button.on { background: #fff; color: var(--vl-navy); box-shadow: var(--elevation-popover); }

/* ---------------- Page header ---------------- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.pagehead > div:first-child { min-width: 0; }
.pagehead__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); color: var(--vl-gray-60); margin-bottom: 8px; }
.crumb a { color: var(--vl-gray-60); }
.crumb a:hover { color: var(--vl-navy); }
.crumb .sep { color: var(--vl-gray-30); }
.crumb .cur { color: var(--vl-gray-100); }
.greeting { font: var(--text-h3); margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.greeting__sub { color: var(--vl-gray-60); font-size: var(--fs-body-sm); margin-top: 4px; }
.greeting__sub strong { color: var(--vl-gray-100); font-weight: var(--fw-semibold); }

/* ---------------- Card head ---------------- */
.cardhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cardhead__ic { width: 32px; height: 32px; border-radius: var(--radius-sm); flex: 0 0 auto;
  background: var(--vl-gray-10); color: var(--vl-navy); display: grid; place-items: center; }
.cardhead__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--vl-gray-100); margin: 0; }
.cardhead__title .muted { font-weight: var(--fw-regular); color: var(--vl-gray-60); font-size: var(--fs-body-sm); }
.cardhead__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cardhead__count { font-size: var(--fs-caption); color: var(--vl-gray-60); font-weight: var(--fw-medium); }
.cardhead--flush { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); }

/* link button in card head */
.headlink { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-link); display: inline-flex; align-items: center; gap: 4px; }

/* ---------------- Lists ---------------- */
.vllist { list-style: none; margin: 0; padding: 0; }
.vlrow { display: flex; align-items: center; gap: 13px; padding: 13px 20px;
  border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-standard); }
.vlrow:last-child { border-bottom: none; }
a.vlrow:hover, .vlrow--click:hover { background: var(--vl-gray-10); text-decoration: none; }
.vlrow__grow { flex: 1; min-width: 0; }
.vlrow__main { font-weight: var(--fw-medium); color: var(--vl-gray-100); font-size: var(--fs-body-sm); }
.vlrow__sub { font-size: var(--fs-caption); color: var(--vl-gray-60); margin-top: 2px; }
.vlrow__time { font-size: var(--fs-caption); color: var(--vl-gray-50); white-space: nowrap; flex: 0 0 auto; }
.vlrow--top { align-items: flex-start; }

/* note feed */
.note__ic { width: 34px; height: 34px; border-radius: var(--radius-sm); flex: 0 0 auto;
  background: var(--vl-emerald-soft); color: #0E6027; display: grid; place-items: center; }
.note__top { display: flex; align-items: baseline; gap: 12px; }
.note__body { font-size: var(--fs-body-sm); color: var(--vl-gray-70); margin-top: 4px; line-height: 1.45; }
.note__tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* todo progress row */
.todorow { padding: 13px 20px; border-bottom: 1px solid var(--border-subtle); }
.todorow:last-child { border-bottom: none; }
.todorow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.todorow__name { font-weight: var(--fw-medium); font-size: var(--fs-body-sm); color: var(--vl-gray-100); }
.todorow__count { font-size: var(--fs-caption); color: var(--vl-gray-60); font-variant-numeric: tabular-nums; }
.todorow__bar { margin-top: 8px; }

/* ---------------- Area tiles (emerald) ---------------- */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px){ .areas { grid-template-columns: repeat(2,1fr);} }
.area { display: flex; align-items: center; gap: 14px; }
.area__ic { width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
  background: var(--vl-emerald-soft); color: #0E6027; display: grid; place-items: center; }
.area__txt { flex: 1; min-width: 0; }
.area__label { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.area__sub { font-size: var(--fs-caption); color: var(--vl-gray-60); }

/* ---------------- Grids ---------------- */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px){ .statrow { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .statrow, .areas { grid-template-columns: 1fr;} }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px){ .cols2 { grid-template-columns: 1fr; } }
.detgrid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px){ .detgrid { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 20px; }

/* ---------------- Key/value ---------------- */
.kv { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); }
.kv:last-child { border-bottom: none; }
.kv__k { width: 150px; color: var(--vl-gray-60); flex: 0 0 auto; }
.kv__v { color: var(--vl-gray-100); font-weight: var(--fw-medium); }
.kv__v.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------- Entity header ---------------- */
.entity { display: flex; gap: 20px; align-items: center; }
.entity__name { font: var(--text-h3); font-size: 26px; display: flex; align-items: center; gap: 12px; letter-spacing: -0.01em; white-space: nowrap; }
.entity__meta { color: var(--vl-gray-60); font-size: var(--fs-body-sm); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.entity__meta .sep { color: var(--vl-gray-30); }
.entity__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.orglogo { width: 72px; height: 72px; border-radius: var(--radius-md); flex: 0 0 auto;
  background: var(--vl-emerald-soft); color: #0E6027; display: grid; place-items: center;
  font-weight: var(--fw-semibold); font-size: 26px; letter-spacing: -0.01em; }

/* ---------------- Address / contact rows ---------------- */
.addr { display: flex; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--border-subtle); }
.addr:last-child { border-bottom: none; }
.addr__ic { width: 36px; height: 36px; border-radius: var(--radius-sm); flex: 0 0 auto;
  background: var(--vl-gray-10); color: var(--vl-gray-60); display: grid; place-items: center; }
.addr__lines { flex: 1; min-width: 0; }
.addr__type { font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: #0E6027;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); display: flex; align-items: center; gap: 8px; }
.addr__val { font-size: var(--fs-body-sm); color: var(--vl-gray-100); margin-top: 3px; line-height: 1.45; }
.addr__tools { display: flex; gap: 2px; align-items: flex-start; }
.grouplbl { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--vl-gray-60); padding: 14px 20px 6px; display: flex; align-items: center; gap: 8px; }
.grouplbl .ml-auto { margin-left: auto; }

/* ---------------- Modal ---------------- */
.scrim { position: fixed; inset: 0; background: rgba(15,39,68,0.42); backdrop-filter: blur(2px);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 64px 20px; overflow-y: auto; }
.scrim.open { display: flex; }
.modal { background: #fff; border-radius: var(--radius-md); width: 100%; max-width: 520px;
  box-shadow: var(--elevation-overlay); border: 1px solid var(--border-subtle);
  opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.scrim.open .modal { opacity: 1; transform: none; }
.modal--wide { max-width: 720px; }
.modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 14px; }
.modal__head h3 { font: var(--text-h4); margin: 0; }
.modal__head .sub { font-size: var(--fs-body-sm); color: var(--vl-gray-60); margin-top: 4px; }
.modal__head .x { margin-left: auto; }
.modal__body { padding: 4px 24px 8px; display: flex; flex-direction: column; gap: 16px; }
.modal__foot { padding: 18px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; }
.modal__foot--spread { justify-content: space-between; }
.confirm__ic { width: 44px; height: 44px; border-radius: 999px; flex: 0 0 auto;
  background: var(--vl-error-soft); color: var(--vl-error); display: grid; place-items: center; }

/* form rows */
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formrow--t31 { grid-template-columns: 2fr 1fr; }

/* segmented control */
.seg { display: flex; gap: 6px; background: var(--vl-gray-10); padding: 4px; border-radius: var(--radius-sm); }
.seg button { flex: 1; border: none; background: transparent; cursor: pointer; font-family: var(--font-sans);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--vl-gray-60); padding: 8px; border-radius: 6px; }
.seg button.on { background: #fff; color: var(--vl-navy); box-shadow: var(--elevation-popover); }

/* search result row (pick list) */
.pick { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease-standard); }
.pick:hover { border-color: var(--vl-navy); background: var(--vl-gray-10); }
.pick--sel { border-color: var(--vl-emerald); background: var(--vl-emerald-soft); }
.pick__grow { flex: 1; min-width: 0; }
.pick__t { font-weight: var(--fw-medium); font-size: var(--fs-body-sm); }
.pick__s { font-size: var(--fs-caption); color: var(--vl-gray-60); }
.picklist { display: flex; flex-direction: column; gap: 8px; }
.empty { padding: 28px 20px; text-align: center; color: var(--vl-gray-60); font-size: var(--fs-body-sm); }

/* ---------------- Pager ---------------- */
.pager { display: flex; align-items: center; gap: 6px; }
.pager__info { font-size: var(--fs-body-sm); color: var(--vl-gray-60); margin-right: auto; }
.pager button { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: #fff; color: var(--vl-gray-70);
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.pager button:hover:not(:disabled) { background: var(--vl-gray-10); }
.pager button.on { background: var(--vl-navy); color: #fff; border-color: var(--vl-navy); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.cardfoot { padding: 14px 20px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 12px; }
.cardfoot--center { justify-content: center; }

/* ---------------- Toast ---------------- */
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 200;
  background: var(--vl-navy); color: #fff; padding: 13px 18px; border-radius: var(--radius-sm);
  box-shadow: var(--elevation-overlay); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 10px; transform: translateY(80px); opacity: 0;
  transition: all var(--dur-base) var(--ease-standard); }
.toast.show { transform: none; opacity: 1; }
.toast__ic { color: var(--vl-emerald); display: flex; }

/* ---------------- Utilities ---------------- */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--vl-gray-60); }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.is-locked { opacity: 0.45; pointer-events: none; }

/* Restricted (Benutzer) role: write actions are present but locked, to
   demonstrate the permission model. Disabled state comes from the DS Button. */
.lockhint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption);
  color: var(--vl-gray-60); }

/* ===== 2) Login.html ===== */
  body.login-seite { background: #fff; }
  .login { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 100vh; }
  /* Brand panel */
  .login__brand {
    background: var(--vl-navy); color: #fff; padding: 48px 56px;
    display: flex; flex-direction: column; gap: 48px;
    position: relative; overflow: hidden;
  }
  .login__brand::after {
    content: ""; position: absolute; right: -180px; bottom: -180px;
    width: 460px; height: 460px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 0 0 60px rgba(255,255,255,0.04);
  }
  .login__brandtop { position: relative; z-index: 1; }
  .login__pitch { margin-top: auto; position: relative; z-index: 1; max-width: 420px; }
  .login__pitch h2 { font: var(--text-h2); font-size: 34px; margin: 0 0 16px; letter-spacing: -0.02em; }
  .login__pitch p { color: rgba(255,255,255,0.72); font-size: var(--fs-body); line-height: 1.55; margin: 0 0 28px; }
  .login__feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .login__feat li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body-sm); color: rgba(255,255,255,0.9); }
  .login__feat svg { color: var(--vl-emerald); flex: 0 0 auto; }
  .login__foot { position: relative; z-index: 1; font-size: var(--fs-caption); color: rgba(255,255,255,0.5); }
  /* Form panel */
  .login__main { display: grid; place-items: center; padding: 40px 24px; }
  .login__card { width: 100%; max-width: 408px; }
  .login__mark { margin-bottom: 24px; }
  .login__h1 { font: var(--text-h2); font-size: 30px; margin: 0 0 10px; letter-spacing: -0.02em; }
  .login__sub { color: var(--vl-gray-60); font-size: var(--fs-body-sm); line-height: 1.55; margin: 0 0 26px; }
  .login__actions { margin-top: 22px; }
  .login__hint { display: flex; align-items: center; gap: 8px; color: var(--vl-gray-50); font-size: var(--fs-caption); margin-top: 18px; }
  .login__hint svg { flex: 0 0 auto; }
  .login__check { width: 60px; height: 60px; border-radius: 999px; background: var(--vl-emerald-soft);
    color: #0E6027; display: grid; place-items: center; margin-bottom: 22px; }
  .login__sent strong { color: var(--vl-gray-100); }
  .login__resend { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 20px; font-size: var(--fs-body-sm); }
  .login__resend button { background: none; border: none; cursor: pointer; font-family: var(--font-sans);
    font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-link); padding: 0; }
  .login__resend .sep { color: var(--vl-gray-30); }
  .login__resent { display: inline-flex; align-items: center; gap: 6px; color: var(--vl-gray-60); }
  @media (max-width: 860px) {
    .login { grid-template-columns: 1fr; }
    .login__brand { display: none; }
  }

/* ===== 3) Startseite.html ===== */
  .dash { display: grid; gap: 20px; align-items: start; }
  .dash.layout-raster {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "orgs people" "notes todos";
  }
  .dash.layout-fokus {
    grid-template-columns: 1.55fr 1fr;
    grid-template-areas: "notes orgs" "notes people" "notes todos";
  }
  .area-orgs { grid-area: orgs; }
  .area-people { grid-area: people; }
  .area-notes { grid-area: notes; }
  .area-todos { grid-area: todos; }
  @media (max-width: 980px) {
    .dash.layout-raster, .dash.layout-fokus {
      grid-template-columns: 1fr;
      grid-template-areas: "orgs" "people" "notes" "todos";
    }
  }

/* ===== 4) Ergaenzungen fuer die Django-Umsetzung ===== */

/* Das HTML-Attribut hidden muss auch gegen display:flex/grid gewinnen (Dialog-Panes) */
[hidden] { display: none !important; }

/* Carbon-Icons ({% icon %}) */
svg.vl-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }

/* Seitenleiste mit echten Links statt React-Buttons */
.vlapp .vl-sidenav { height: 100vh; }
a.vl-sidenav__item, a.vl-sidenav__item:hover { text-decoration: none; }
.vl-sidenav__item[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.vl-sidenav__item[aria-disabled="true"]:hover { background: none; color: rgba(255, 255, 255, 0.74); }
.vl-sidenav__brand a { display: flex; text-decoration: none; }

/* Logo (Lockup) wie Logo.jsx */
.vl-logo { display: inline-flex; align-items: center; text-decoration: none; }
.vl-logo svg { display: block; flex: 0 0 auto; }
.vl-logo__text { display: flex; flex-direction: column; line-height: 1; }
.vl-logo__word { font-family: var(--font-sans); font-weight: 600; color: var(--vl-navy); letter-spacing: 0.16em; }
.vl-logo__claim { font-family: var(--font-sans); font-weight: 400; color: var(--vl-gray-60); letter-spacing: 0.02em; }
.vl-logo--inverse .vl-logo__word { color: #fff; }
.vl-logo--inverse .vl-logo__claim { color: rgba(255, 255, 255, 0.7); }

/* Kopfzeile: Suche als Formular, Menue-Knopf (mobil) */
.vltop__search { margin: 0 0 0 auto; }
.vltop__menu { display: none; }

/* Benutzermenue oben rechts (rechts der Suche): <details> als Dropdown */
.vlmenu { position: relative; flex: 0 0 auto; }
.vlmenu__knopf { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; list-style: none;
  border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-body-sm); color: var(--text-primary); }
.vlmenu__knopf::-webkit-details-marker { display: none; }
.vlmenu__knopf:hover, .vlmenu[open] .vlmenu__knopf { background: var(--vl-gray-10); }
.vlmenu__knopf:focus-visible { outline: 2px solid var(--vl-navy); outline-offset: 2px; }
.vlmenu__name { white-space: nowrap; font-weight: var(--fw-medium); }
.vlmenu__chev { display: flex; color: var(--vl-gray-60); transition: transform var(--dur-fast) var(--ease-standard); }
.vlmenu[open] .vlmenu__chev { transform: rotate(180deg); }
.vlmenu__liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 220px;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px; }
.vlmenu__kopf { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; }
.vlmenu__kname { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.vlmenu__mail { font-size: var(--fs-caption); color: var(--vl-gray-60); overflow-wrap: anywhere; }
.vlmenu form { margin: 0; }
.vlmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none;
  background: none; border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-body-sm);
  color: var(--text-primary); text-align: left; cursor: pointer; text-decoration: none; }
.vlmenu__item:hover { background: var(--vl-gray-10); text-decoration: none; }
.vlmenu__item .vl-icon { color: var(--vl-gray-60); }

/* Dialoge: natives <dialog> mit dem Modal-Aussehen aus app.css */
dialog.modal { padding: 0; margin: 64px auto auto; max-height: calc(100vh - 128px); overflow-y: auto; color: inherit; }
dialog.modal[open] { opacity: 1; transform: none; }
dialog.modal::backdrop { background: rgba(15, 39, 68, 0.42); backdrop-filter: blur(2px); }
dialog.modal--confirm { max-width: 440px; }
.modal__body form, .modal form { margin: 0; }

/* Toast aus Django-Messages (wird per JS nach 2.6 s ausgeblendet) */
.toast--error .toast__ic { color: #FF8389; }

/* Seitenwechsler mit Links */
.pager a, .pager .pg { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle); background: #fff; color: var(--vl-gray-70);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pager a:hover { background: var(--vl-gray-10); text-decoration: none; }
.pager .on { background: var(--vl-navy); color: #fff; border-color: var(--vl-navy); }
.pager .pg--off { opacity: 0.4; }

/* Entfernen-Knopf in Tags als echter Button (Formular) */
button.vl-tag__close { background: none; border: none; padding: 0; font: inherit; }
.tagform { display: inline; margin: 0; }

/* Formularseiten */
.formcard { max-width: 760px; }
.formstack { display: flex; flex-direction: column; gap: 16px; }
.formfoot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.vl-field textarea.vl-field__input { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.linkbtn { background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-sans);
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-link); }
.linkbtn:hover { text-decoration: underline; }
.inlineform { display: inline; margin: 0; }
.vl-btn:hover { text-decoration: none; }

/* Leere Zustaende in Karten */
.vllist .empty, .card-empty { padding: 28px 20px; }

/* ---- Mobil: Seitenleiste als ausklappbares Menue ---- */
.vlapp__navscrim { display: none; position: fixed; inset: 0; background: rgba(15, 39, 68, 0.42); z-index: 140; }
@media (max-width: 860px) {
  .vlapp .vl-sidenav { position: fixed; inset: 0 auto 0 0; z-index: 150; transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-standard); }
  body.nav-offen .vlapp .vl-sidenav { transform: none; }
  body.nav-offen .vlapp__navscrim { display: block; }
  .vltop__menu { display: inline-flex; }
  .vltop { padding: 0 12px; gap: 10px; }
  .vltop__title { font-size: 18px; }
  .vltop__search { width: auto; flex: 1; max-width: none; }
  .vlmenu__name, .vlmenu__chev { display: none; }
  .vlmenu__knopf { padding: 4px; }
  .vlapp__screen { padding: 20px 16px 48px; }
  .entity { flex-wrap: wrap; }
  .entity__actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .entity__name { white-space: normal; }
  .greeting { white-space: normal; }
  .formrow, .formrow--t31 { grid-template-columns: 1fr; }
  .kv__k { width: 120px; }
}

/* Login: Variante "Link ungueltig" (rotes statt gruenes Symbol) */
.login__check--fehler { background: var(--vl-error-soft); color: var(--vl-error); }
.login__resend form { display: inline; margin: 0; }

/* "Neu erfassen": Auswahl-Kacheln */
.neuwahl { display: flex; gap: 12px; align-items: center; padding: 16px; text-decoration: none; color: inherit; }
a.neuwahl:hover { text-decoration: none; }
.neuwahl__t { font-weight: var(--fw-semibold); }
.neuwahl__s { font-size: var(--fs-caption); }

/* Auswahlliste mit Radio (Person / Organisation waehlen) - :has() markiert die Wahl */
.pick { position: relative; }
.pick__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.pick:has(.pick__radio:checked) { border-color: var(--vl-emerald); background: var(--vl-emerald-soft); }
.pick:has(.pick__radio:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pick__ok { display: none; color: var(--vl-emerald); }
.pick:has(.pick__radio:checked) .pick__ok { display: flex; }
.picksuche { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.picksuche .vl-field { flex: 1; }

/* Tags als Links */
a.vl-tag:hover { text-decoration: none; border-color: var(--border-strong); }

/* Tabs als Links (Personen-Detail) */
a.vl-tab { text-decoration: none; }
a.vl-tab:hover { text-decoration: none; }
.vl-tab__count { font-size: var(--fs-caption); color: var(--vl-gray-60); font-weight: var(--fw-regular); }

/* Listen-Kopf mit Suche (Organisationen / Personen) */
.listsuche { display: flex; gap: 8px; margin: 0 0 0 auto; }
.listsuche .vl-field__input { height: 36px; font-size: var(--fs-body-sm); }
.tdname { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; font-weight: var(--fw-medium); }
a.tdname:hover { text-decoration: none; color: var(--vl-navy); }
.vl-table td .muted { font-size: var(--fs-body-sm); }

/* Kontaktwerte bleiben klickbar (tel:/mailto:), aber in Textfarbe wie im Design */
.addr__val a { color: inherit; }
.addr__val a:hover { color: var(--vl-navy); }

/* Mobil: breite Tabellen in Karten waagrecht scrollbar statt abgeschnitten */
@media (max-width: 860px) {
  .vl-card--flush { overflow-x: auto; }
  .vl-card--flush > .vl-table { min-width: 560px; }
}

/* Themen + Notizen */
.note__link { color: inherit; text-decoration: none; }
.note__link:hover { color: var(--vl-navy); text-decoration: underline; }
.orglogo .vl-icon { color: inherit; }
.prosa { font-size: var(--fs-body); line-height: 1.6; color: var(--vl-gray-100); overflow-wrap: anywhere; }
.prosa p { margin: 0 0 12px; }
.prosa p:last-child { margin-bottom: 0; }
.formcard--breit { max-width: 960px; }
.formrow--drei { grid-template-columns: 1fr 1fr 1fr; }
.formgruppe { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
  border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.listsuche--zwei .vl-select__el { height: 36px; font-size: var(--fs-body-sm); }
@media (max-width: 860px) {
  .formrow--drei { grid-template-columns: 1fr; }
  .listsuche--zwei { flex-wrap: wrap; }
}

/* ---- Notizen: Editor, Mehrfachauswahl, Anhaenge ---- */
.richtext textarea { width: 100%; min-height: 220px; }
.richtext .tox-tinymce { border: 1px solid var(--border-strong, #8D8D8D); border-radius: var(--radius-sm); }
.richtext.vl-field--error .tox-tinymce { border-color: var(--vl-error); }
.richtext .tox .tox-toolbar__primary { background: var(--vl-gray-10); }
.prosa a { color: var(--vl-blue, #0F62FE); }
.prosa ul, .prosa ol { margin: 0 0 12px; padding-left: 22px; }
.prosa h3 { font-size: 18px; margin: 16px 0 6px; }
.prosa h4 { font-size: 16px; margin: 14px 0 4px; }
.prosa blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--border-subtle); color: var(--vl-gray-70); }

.vl-mehrfach { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vl-mehrfach select[multiple] { width: 100%; border: 1px solid var(--border-strong, #8D8D8D); border-radius: var(--radius-sm);
  padding: 4px; font: inherit; font-size: var(--fs-body-sm); }
.mehrfach { position: relative; display: flex; flex-direction: column; gap: 6px; }
.mehrfach__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mehrfach__chips:empty { display: none; }
.mehrfach__chip { gap: 6px; }
.mehrfach__eingabe { height: 36px; font-size: var(--fs-body-sm); }
.mehrfach__liste { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); max-height: 260px; overflow-y: auto; }
.mehrfach__liste li { padding: 7px 10px; border-radius: 6px; font-size: var(--fs-body-sm); cursor: pointer; }
.mehrfach__liste li:hover, .mehrfach__liste li.on { background: var(--vl-gray-10); }
.mehrfach__liste li.mehrfach__leer { cursor: default; color: var(--vl-gray-60); }
.mehrfach__liste li.mehrfach__leer:hover { background: none; }
.kv__v.tags { display: flex; flex-wrap: wrap; gap: 6px; }

.dateiwahl { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
  border: 1px dashed var(--border-strong, #8D8D8D); border-radius: var(--radius-sm); font-size: var(--fs-body-sm); }
.dateiwahl:hover { background: var(--vl-gray-10); }
.dateiwahl .vl-icon { color: var(--vl-gray-60); }
.dateiwahl input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dateiwahl:focus-within { outline: 2px solid var(--vl-navy); outline-offset: 2px; }
.dateiwahl__liste { margin: 8px 0 0; padding-left: 20px; font-size: var(--fs-body-sm); color: var(--vl-gray-70); }
.anhangliste { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.anhang { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body-sm); }
.anhang:last-child { border-bottom: none; }
.anhang__ic { display: flex; color: var(--vl-gray-60); }
.anhang__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.anhang__gr { white-space: nowrap; }
.anhang__weg { margin-left: 8px; }
a.anhang__link { color: inherit; text-decoration: none; min-width: 0; }
a.anhang__link:hover .anhang__name { color: var(--vl-navy); text-decoration: underline; }

/* ---- Aufgaben ---- */
.aufgabe { align-items: flex-start; }
.aufgabe__form { display: flex; padding-top: 2px; }
.aufgabe__check input:checked + .vl-check__box { background: var(--vl-emerald); border-color: var(--vl-emerald); }
.aufgabe__check:has(input:disabled) { cursor: not-allowed; }
.aufgabe__titel { color: inherit; text-decoration: none; display: block; }
.aufgabe__titel:hover { color: var(--vl-navy); text-decoration: underline; }
.aufgabe--erledigt .aufgabe__titel { text-decoration: line-through; color: var(--vl-gray-50, #8D8D8D); }
.aufgabe .vlrow__sub a { color: inherit; }
.aufgabe .vl-badge { flex: 0 0 auto; margin-top: 2px; }
.schnellzeile { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border-subtle);
  background: var(--vl-gray-10); }
.schnellzeile__ic { display: flex; color: var(--vl-gray-60); }
.schnellzeile .vl-field__input { height: 36px; font-size: var(--fs-body-sm); background: #fff; }
.schnellzeile input[name=titel] { flex: 1; min-width: 0; }
.schnellzeile__datum { width: 160px; flex: 0 0 auto; }
a.todorow--link { display: block; color: inherit; text-decoration: none; }
a.todorow--link:hover { background: var(--vl-gray-10); text-decoration: none; }
.todorow__meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: var(--fs-caption); }
.seg a { flex: 1; padding: 5px 12px; border-radius: 6px; text-align: center; font-size: var(--fs-caption);
  font-weight: var(--fw-medium); color: var(--vl-gray-70); text-decoration: none; white-space: nowrap; }
.seg a.on { background: #fff; color: var(--vl-navy); box-shadow: var(--elevation-popover); }
@media (max-width: 860px) {
  .schnellzeile { flex-wrap: wrap; padding: 12px 16px; }
  .schnellzeile__datum { width: auto; flex: 1; }
}