/* ═══════════════════════════════════════════════════════════════════════
   V3 DESIGN SYSTEM — global, wiederverwendbar (Pilot: Mitgliederliste)
   ───────────────────────────────────────────────────────────────────────
   Quelle: freigegebenes Mockup v2_mit_liste.html / v2_home.html (V3-Zielbild).
   Farben/Maße 1:1 aus dem Mockup übernommen, nur technisch an die App-Shell
   angepasst (Full-Bleed über das .shell-content-Padding wie home_v3.css).

   SCOPING: ALLES liegt unter `.v3-page` (bzw. den fixed-positionierten
   Panels innerhalb `.v3-page`). Bestands-Seiten (.stift, Tailwind-Utilities)
   bleiben unangetastet. Neue Seiten setzen einfach `.v3-page` als Wrapper und
   nutzen die `.v3-*`-Komponentenklassen.
   ═══════════════════════════════════════════════════════════════════════ */

.v3-page {
  /* ── Design-Tokens (aus Mockup :root) ── */
  --v3-canvas: #f4f6f9;
  --v3-card: #ffffff;
  --v3-line: #e6eaf1;
  --v3-line2: #eef1f6;
  --v3-ink: #16233a;
  --v3-ink2: #5b6b84;
  --v3-ink3: #8b98ad;
  --v3-brand: #1e56c8;
  --v3-brand-deep: #0f2b46;
  --v3-ok: #178a50;
  --v3-warn: #c07600;
  --v3-bad: #c93a4a;
  /* Kanalfarben (Zahlungsströme) */
  --v3-sepa: #2563eb;
  --v3-ueb: #0ea5a4;
  --v3-paypal: #7c6cf0;
  --v3-stripe: #b558d9;
  /* Radius + Schatten */
  --v3-r: 16px;
  --v3-r-sm: 11px;
  --v3-shadow: 0 1px 2px rgba(22,35,58,.05), 0 10px 28px -14px rgba(22,35,58,.14);

  /* Full-Bleed: über das Padding der App-Shell (.shell-content) hinaus, damit
     der Canvas-Ton bis an die Ränder läuft — gleiche Technik wie home_v3.css. */
  margin: -24px calc(clamp(16px, 3vw, 32px) * -1);
  padding: 22px 28px 44px;
  min-height: calc(100% + 48px);
  box-sizing: border-box;
  background: var(--v3-canvas);
  color: var(--v3-ink);
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.v3-page * { box-sizing: border-box; }
.v3-page h1, .v3-page h2, .v3-page h3, .v3-page h4 { font-family: inherit; }
.v3-page .num { font-variant-numeric: tabular-nums; }

/* ── Seitenkopf ── */
.v3-page .v3-pagehead { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.v3-page .v3-pagehead h1 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.v3-page .v3-pagehead .sub { color: var(--v3-ink3); font-weight: 500; font-size: 13px; margin-top: 3px; }
.v3-page .v3-pagehead .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Buttons ── */
.v3-page .v3-btn {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 11px;
  padding: 9px 15px; font-weight: 650; font-size: 13px; border: 1px solid var(--v3-line);
  background: #fff; color: var(--v3-ink2); box-shadow: var(--v3-shadow);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.v3-page .v3-btn:hover { background: #fafbfe; }
.v3-page .v3-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.v3-page .v3-btn.pri { background: linear-gradient(135deg, #2f6fe0, #1e56c8); color: #fff; border: none; }
.v3-page .v3-btn.pri:hover { filter: brightness(1.04); }
.v3-page .v3-btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }
.v3-page .v3-btn.on { background: #e8effd; border-color: #bcd3f7; color: var(--v3-brand); }
.v3-page .v3-iconbtn {
  width: 37px; height: 37px; border-radius: 11px; background: var(--v3-card);
  border: 1px solid var(--v3-line); display: grid; place-items: center;
  color: var(--v3-ink2); box-shadow: var(--v3-shadow);
}

/* ── Karte ── */
.v3-page .v3-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); }

/* ── Toolbar (Suche + Chips) ── */
.v3-page .v3-toolbar { padding: 14px 18px; margin-bottom: 14px; }
.v3-page .v3-searchrow { display: flex; align-items: center; gap: 12px; }
.v3-page .v3-bigsearch { flex: 1; display: flex; align-items: center; gap: 10px; background: #f6f8fb; border: 1px solid var(--v3-line); border-radius: 11px; padding: 10px 15px; color: var(--v3-ink3); font-size: 14px; }
.v3-page .v3-bigsearch svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.v3-page .v3-bigsearch input { flex: 1; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--v3-ink); font-family: inherit; }
.v3-page .v3-bigsearch input::placeholder { color: var(--v3-ink3); }
.v3-page .v3-count { font-size: 12.5px; color: var(--v3-ink3); font-weight: 600; white-space: nowrap; }
.v3-page .v3-count b { color: var(--v3-ink); }

/* ── Suchvorschläge (Mitgliederliste) ──
   Overlay unter dem Suchfeld: je Treffer ein Kurz-Infoblock (Name/Klasse/Rolle
   links, Beitragsstatus + offene Forderung rechts). Tastatur-Markierung = .on. */
.v3-page .v3-suggestwrap { position: relative; flex: 1; min-width: 0; }
.v3-page .v3-suggest {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 380px; overflow-y: auto; background: var(--v3-card);
  border: 1px solid var(--v3-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 43, 70, .14);
  padding: 5px;
}
.v3-page .v3-suggest[hidden] { display: none; }
.v3-page .v3-suggest .sg-empty { padding: 12px 13px; font-size: 12.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .v3-suggest .sg-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 11px; border-radius: 9px; text-decoration: none; color: inherit;
}
.v3-page .v3-suggest .sg-item:hover,
.v3-page .v3-suggest .sg-item.on { background: #eef4ff; }
.v3-page .v3-suggest .sg-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-page .v3-suggest .sg-main b { font-size: 13.5px; font-weight: 700; color: var(--v3-ink); }
.v3-page .v3-suggest .sg-main small,
.v3-page .v3-suggest .sg-fin small { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .v3-suggest .sg-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
.v3-page .v3-suggest .sg-badge {
  display: inline-block; border-radius: 99px; padding: 2px 9px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.v3-page .v3-suggest .sg-badge.ok { background: #e3f6ec; color: #178a50; }
.v3-page .v3-suggest .sg-badge.open { background: #fdeaec; color: #c93a4a; }
.v3-page .v3-suggest .sg-badge.neutral { background: #eef1f6; color: #6b7a90; }

/* ── Chips ── */
.v3-page .v3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.v3-page .v3-chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--v3-line);
  background: #fff; border-radius: 99px; padding: 6px 13px; font-size: 12.5px;
  font-weight: 600; color: var(--v3-ink2); white-space: nowrap; text-decoration: none; cursor: pointer;
}
.v3-page .v3-chip:hover { background: #fafbfe; }
.v3-page .v3-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: .7; }
.v3-page .v3-chip.on { background: #e8effd; border-color: #bcd3f7; color: var(--v3-brand); }
.v3-page .v3-chip.on svg { opacity: 1; }
.v3-page .v3-chip .x { margin-left: 2px; font-weight: 800; opacity: .6; }
.v3-page .v3-chips .divider { width: 1px; height: 20px; background: var(--v3-line); margin: 0 3px; }
/* „Zurücksetzen" — EIN Aussehen, egal wo der Link steht (13.08.2026).
   Die Regel hing bis dahin an `.v3-chips`; ausserhalb der Chips-Leiste (Leer-
   zustand, Suchleiste) wurde derselbe Link deshalb per `style=""` nachgebaut.
   Basis global unter `.v3-page`, die Chips-Leiste ergaenzt nur ihren Abstand. */
.v3-page .reset { color: var(--v3-brand); font-weight: 650; font-size: 12.5px; text-decoration: none; }
.v3-page .v3-chips .reset { margin-left: 2px; }

/* ── Gespeicherte Filter (Segmente, read-only) ── */
.v3-page .v3-saved { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--v3-line); }
.v3-page .v3-saved .sl { font-size: 11px; letter-spacing: .5px; color: var(--v3-ink3); font-weight: 700; margin-right: 2px; }
.v3-page .v3-savedchip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--v3-line); background: #fbfcfe; border-radius: 99px; padding: 5px 12px; font-size: 12.5px; font-weight: 650; color: var(--v3-ink2); text-decoration: none; }
.v3-page .v3-savedchip:hover { background: #f2f5fb; }
.v3-page .v3-savedchip .sc { width: 6px; height: 6px; border-radius: 50%; background: var(--v3-brand); }
.v3-page .v3-savedchip b { color: var(--v3-ink); font-variant-numeric: tabular-nums; }
.v3-page .v3-savedchip.add { color: var(--v3-brand); border-style: dashed; border-color: #bcd3f7; }
.v3-page .v3-savedchip.add svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* ── Auswahl-Leiste (dunkel, erscheint bei Selektion) ── */
.v3-page .v3-selectbar {
  display: none; align-items: center; gap: 14px; padding: 11px 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, #10304f, #1b4a7c); color: #fff; border: none; border-radius: var(--v3-r);
  box-shadow: var(--v3-shadow);
}
.v3-page .v3-selectbar.is-active { display: flex; }
.v3-page .v3-selectbar .bn { font-weight: 800; font-size: 14px; }
.v3-page .v3-selectbar .bn span { font-weight: 500; color: #bcd2e8; margin-left: 4px; }
.v3-page .v3-selectbar .bulkacts { margin-left: auto; display: flex; gap: 8px; }
.v3-page .v3-bulkbtn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 650; color: #fff; text-decoration: none; cursor: pointer; }
.v3-page .v3-bulkbtn:hover { background: rgba(255,255,255,.22); }
.v3-page .v3-bulkbtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .v3-bulkbtn.pri { background: #fff; color: var(--v3-brand-deep); border: none; }
.v3-page .v3-selectbar .clr { color: #bcd2e8; font-size: 12px; font-weight: 600; background: none; border: 0; cursor: pointer; }
.v3-page .v3-selectbar .clr:hover { color: #fff; }

/* ── Split: Tabelle + Panel ── */
.v3-page .v3-split { display: grid; grid-template-columns: 1fr 384px; gap: 16px; align-items: start; }
.v3-page .v3-split.no-panel { grid-template-columns: 1fr; }
@media (max-width: 1200px) { .v3-page .v3-split { grid-template-columns: 1fr; } }

/* ── Tabelle ── */
.v3-page .v3-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-page .v3-table thead th { font-size: 10.5px; letter-spacing: .7px; color: var(--v3-ink3); text-align: left; font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--v3-line); background: #fbfcfe; }
.v3-page .v3-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--v3-line2); vertical-align: middle; }
.v3-page .v3-table tbody tr { cursor: pointer; }
.v3-page .v3-table tbody tr:last-child td { border: none; }
.v3-page .v3-table tbody tr:hover { background: #fafbfe; }
.v3-page .v3-table tbody tr.is-selected { background: #eef4fe; box-shadow: inset 3px 0 0 var(--v3-brand); }
.v3-page .v3-table .thsort { display: inline-flex; align-items: center; gap: 4px; }
.v3-page .v3-table th.cbxh, .v3-page .v3-table td.cbxc { width: 38px; text-align: center; padding-left: 14px; padding-right: 0; }

.v3-page .mcell { display: flex; align-items: center; gap: 11px; }
.v3-page .mav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: #fff; flex: none; object-fit: cover; }
.v3-page .mcell b { font-weight: 700; font-size: 13.5px; white-space: nowrap; color: var(--v3-ink); }
.v3-page .mcell small { display: block; color: var(--v3-ink3); font-size: 11.5px; font-weight: 500; }

.v3-page .prog-chip { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 3px 8px; }
.v3-page .p-bsc { background: #e8effd; color: #1e56c8; }
.v3-page .p-msc { background: #e0f4f2; color: #0d8377; }
.v3-page .p-mba { background: #f0edfd; color: #6d5bd0; }
.v3-page .p-phd { background: #f7e9fb; color: #a344c9; }
.v3-page .p-gen { background: #f1f3f7; color: var(--v3-ink2); }

.v3-page .role-txt { color: var(--v3-ink2); font-size: 12.5px; font-weight: 600; }

.v3-page .status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.v3-page .status .d { width: 8px; height: 8px; border-radius: 50%; }
.v3-page .s-akt .d { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.v3-page .s-akt { color: var(--v3-ok); }
.v3-page .s-kue .d { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.v3-page .s-kue { color: var(--v3-warn); }
.v3-page .s-inak .d { background: #b6c0cf; }
.v3-page .s-inak { color: var(--v3-ink3); }

.v3-page .amp { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; }
.v3-page .amp .d { width: 9px; height: 9px; border-radius: 50%; }
.v3-page .a-ok .d { background: #22c55e; } .v3-page .a-ok { color: var(--v3-ok); }
.v3-page .a-of .d { background: #f59e0b; } .v3-page .a-of { color: var(--v3-warn); }
.v3-page .a-no .d { background: #ef4444; } .v3-page .a-no { color: var(--v3-bad); }
.v3-page .amp small { display: block; font-size: 11px; font-weight: 600; }

.v3-page .contact { display: flex; gap: 6px; }
.v3-page .ci { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #f1f4f8; color: var(--v3-ink2); }
.v3-page .ci svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .ci.off { opacity: .35; }

/* Checkbox */
.v3-page .cbx { width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid #c3ccd9; display: inline-grid; place-items: center; vertical-align: middle; background: #fff; cursor: pointer; position: relative; }
.v3-page .cbx svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; }
.v3-page .cbx input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.v3-page .cbx:has(input:checked) { background: var(--v3-brand); border-color: var(--v3-brand); }
.v3-page .cbx:has(input:checked) svg { opacity: 1; }
.v3-page .cbx.dash { background: var(--v3-brand); border-color: var(--v3-brand); }
.v3-page .cbx.dash svg { opacity: 1; }

/* ── Karten-Ansicht (Umschalter) ── */
.v3-page .v3-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.v3-page .v3-mcard { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: 14px; box-shadow: var(--v3-shadow); padding: 15px 16px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.v3-page .v3-mcard:hover { box-shadow: 0 4px 14px rgba(22,35,58,.10); transform: translateY(-1px); }
.v3-page .v3-mcard.is-selected { box-shadow: inset 0 0 0 2px var(--v3-brand); }
.v3-page .v3-mcard .mc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.v3-page .v3-mcard .mc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v3-page .v3-mcard .mc-fee { font-size: 12.5px; font-weight: 700; color: var(--v3-ink); }

/* ── Empty-State ── */
.v3-page .v3-empty { padding: 42px; text-align: center; }
.v3-page .v3-empty .h { font-weight: 700; color: var(--v3-ink2); }
.v3-page .v3-empty .s { color: var(--v3-ink3); margin-top: 4px; font-size: 13px; }

/* ── Pagination ── */
.v3-page .v3-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; }
.v3-page .v3-pager a, .v3-page .v3-pager span { min-width: 34px; text-align: center; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--v3-line); background: #fff; color: var(--v3-ink2); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.v3-page .v3-pager span.on { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   SIDE-PANEL (Schnellansicht rechts) — dunkler Kopf wie Mockup.
   Inline im Split; lädt lazy per Turbo-Frame beim Zeilen-Klick.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page .v3-sidepanel { position: sticky; top: 16px; padding: 0; overflow: hidden; }
.v3-page .v3-sidepanel .ph { padding: 18px 18px 15px; background: linear-gradient(135deg, #10304f, #1b4a7c); color: #fff; position: relative; }
.v3-page .v3-sidepanel .ph .close { position: absolute; top: 13px; right: 14px; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.14); display: grid; place-items: center; border: 0; cursor: pointer; }
.v3-page .v3-sidepanel .ph .close svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; }
.v3-page .v3-sidepanel .pav { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(140deg, #3f7ae6, #1e56c8); display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18); object-fit: cover; }
.v3-page .v3-sidepanel .pname { font-size: 18px; font-weight: 800; margin-top: 10px; letter-spacing: -.3px; }
.v3-page .v3-sidepanel .psub { font-size: 12.5px; color: #bcd2e8; margin-top: 2px; }
.v3-page .v3-sidepanel .pchips { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.v3-page .v3-sidepanel .pchip { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 3px 9px; background: rgba(255,255,255,.16); color: #fff; }
.v3-page .v3-sidepanel .pchip.grn { background: rgba(52,211,153,.25); color: #bbf7d0; }
.v3-page .v3-sidepanel .pchip.amb { background: rgba(245,158,11,.25); color: #fde68a; }
.v3-page .v3-sidepanel .pbody { padding: 16px 18px 18px; }
.v3-page .v3-sidepanel .sect { margin-bottom: 15px; }
.v3-page .v3-sidepanel .sect .st { font-size: 10.5px; letter-spacing: .8px; color: var(--v3-ink3); font-weight: 700; margin-bottom: 8px; }
.v3-page .v3-sidepanel .kv { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 13px; }
.v3-page .v3-sidepanel .kv svg { width: 15px; height: 15px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; flex: none; margin-top: 2px; }
.v3-page .v3-sidepanel .kv b { font-weight: 600; word-break: break-word; }
.v3-page .v3-sidepanel .kv span { color: var(--v3-ink3); display: block; font-size: 11px; }

/* Mehrjahres-Matrix (Beitragsstatus-Ampeln) */
.v3-page .v3-sidepanel .matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.v3-page .v3-sidepanel .yc { border: 1px solid var(--v3-line); border-radius: 10px; padding: 8px 6px; text-align: center; background: #fbfcfe; }
.v3-page .v3-sidepanel .yc .yy { font-size: 11px; font-weight: 700; color: var(--v3-ink3); }
.v3-page .v3-sidepanel .yc .ym { width: 22px; height: 22px; border-radius: 50%; margin: 5px auto 4px; display: grid; place-items: center; }
.v3-page .v3-sidepanel .yc .ym svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; }
.v3-page .v3-sidepanel .ym.ok { background: #22c55e; } .v3-page .v3-sidepanel .ym.of { background: #f59e0b; } .v3-page .v3-sidepanel .ym.no { background: #ef4444; } .v3-page .v3-sidepanel .ym.na { background: #cbd5e1; }
.v3-page .v3-sidepanel .yc .ya { font-size: 11px; font-weight: 700; }

.v3-page .v3-sidepanel .act { display: flex; flex-direction: column; gap: 8px; }
.v3-page .v3-sidepanel .actbtn { display: flex; align-items: center; gap: 10px; border: 1px solid var(--v3-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 650; color: var(--v3-ink); text-decoration: none; }
.v3-page .v3-sidepanel .actbtn:hover { background: #fafbfe; }
.v3-page .v3-sidepanel .actbtn svg { width: 16px; height: 16px; stroke: var(--v3-brand); fill: none; stroke-width: 2; }
.v3-page .v3-sidepanel .actbtn.full { background: linear-gradient(135deg, #2f6fe0, #1e56c8); color: #fff; border: none; justify-content: center; }
.v3-page .v3-sidepanel .actbtn.full svg { stroke: #fff; }
.v3-page .v3-sidepanel .actbtn.full:hover { filter: brightness(1.04); background: linear-gradient(135deg, #2f6fe0, #1e56c8); }

/* Panel-Platzhalter (nichts ausgewählt) */
.v3-page .v3-panel-empty { padding: 40px 22px; text-align: center; color: var(--v3-ink3); }
.v3-page .v3-panel-empty .pi { width: 46px; height: 46px; border-radius: 13px; background: #eef2f8; display: grid; place-items: center; margin: 0 auto 12px; color: var(--v3-ink3); }
.v3-page .v3-panel-empty .pi svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.v3-page .v3-panel-empty b { color: var(--v3-ink2); font-weight: 700; display: block; }
.v3-page .v3-panel-empty span { font-size: 12.5px; }

/* Kehraus 06.08.2026 — schmale Seite als MODIFIER, nicht als style-Attribut.
   Formular-Seiten (eine externe Spende erfassen, eine Mail schreiben) waren
   bisher mit einem eigenen `max-w-3xl`-Rahmen samt `min-h-screen` gebaut. Der
   Rahmen kommt jetzt aus `.v3-page`; die geringere Breite ist eine Modifier-
   Klasse — genau der Weg, den die Design-Referenz vorschreibt. */
.v3-page.v3-page-schmal { max-width: 56rem; }

/* Kehraus-Nebenfund 06.08.2026: `.ta-r` (rechtsbündig) wurde in vier Dateien
   benutzt — Quittungs-Akte, Quittungs-Blatt, Befunde-Arbeitsliste — und war
   NIRGENDS definiert. Die Spalten standen also links, obwohl das Markup
   „rechts" sagte. Zahlenspalten gehören rechtsbündig; die Regel holt nach, was
   die Views seit jeher behaupten. */
.v3-page .ta-r { text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════
   R1 — MITGLIEDER-BEREICH (Zielbild-Ports v2_mit_*; additiv, alles unter
   .v3-page.r1-*). Token-Aliase (Mockup nutzt --canvas/--card/… ohne v3-
   Präfix) werden hier EINMAL auf .v3-page gelegt — wirkt nur im .v3-page-
   Subtree, kollidiert mit nichts. Seiten-Styles sind je Seite gescoped.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page {
  --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --line2:#eef1f6;
  --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
  --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
  --sepa:#2563eb; --ueb:#0ea5a4; --paypal:#7c6cf0; --stripe:#b558d9;
  --bsc:#1e56c8; --msc:#0ea5a4; --mba:#7c6cf0; --phd:#b558d9;
  --r:16px;
  --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14);
}
/* Programm-/Rollen-Balkenfarben (mockup-global, in mehreren R1-Seiten genutzt) */
.v3-page .bar-bsc{background:linear-gradient(90deg,#3f7ae6,#1e56c8)}
.v3-page .bar-msc{background:linear-gradient(90deg,#22b3a6,#0ea5a4)}
.v3-page .bar-mba{background:linear-gradient(90deg,#8f80f2,#7c6cf0)}
.v3-page .bar-phd{background:linear-gradient(90deg,#c877e0,#b558d9)}
.v3-page .bar-neu{background:linear-gradient(90deg,#4bb978,#178a50)}
/* Ehrlicher „im Aufbau"-Platzhalter (Wachstums-Wochenchart ohne Datengrundlage) */
.v3-page .gplaceholder{flex:1;min-height:104px;margin:6px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;border:1px dashed var(--line);border-radius:12px;background:#fbfcfe;color:var(--ink3)}
.v3-page .gplaceholder svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.6}
.v3-page .gplaceholder span{font-size:12.5px;font-weight:700;color:var(--ink2)}
.v3-page .gplaceholder small{font-size:11px;font-weight:600}
/* Ehrlicher Leerzustand innerhalb einer Karte (Datengrundlage fehlt) */
.v3-page .emptybox{min-height:150px;margin-top:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;border:1px dashed var(--line);border-radius:12px;background:#fbfcfe;color:var(--ink3);padding:18px}
.v3-page .emptybox svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.55}
.v3-page .emptybox span{font-size:13px;font-weight:700;color:var(--ink2)}
.v3-page .emptybox small{font-size:11.5px;font-weight:600;max-width:340px}
/* Erreichbarkeit „jetzt" (1:1-Karte, Verlauf im Aufbau) */
.v3-page .reach-now{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.v3-page .reach-now .rn-row{display:flex;align-items:center;gap:14px}
.v3-page .reach-now .rn-k{width:90px;font-weight:800;font-size:13px}
.v3-page .reach-now .rn-tr{flex:1;height:12px;background:#eef1f6;border-radius:99px;overflow:hidden}
.v3-page .reach-now .rn-tr i{display:block;height:100%;border-radius:99px}
.v3-page .reach-now .rn-v{width:70px;text-align:right;font-weight:800;font-size:14px}
.v3-page .reach-now .rn-note{font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:2px}

/* ── v2_mit_uebersicht ── */
.r1-ueb .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.r1-ueb .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.r1-ueb .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.r1-ueb .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.r1-ueb .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.r1-ueb .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.r1-ueb .hero { grid-column:span 8;display:flex;flex-direction:column;background:linear-gradient(135deg,#10304f 0%,#153a60 55%,#1b4a7c 100%);color:#fff;border:none;position:relative;overflow:hidden }
.r1-ueb .hero::after { content:'';position:absolute;right:-70px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.25),transparent 65%) }
.r1-ueb .hero .lbl { font-size:12px;letter-spacing:1.6px;color:#9fc0e2;font-weight:700 }
.r1-ueb .hero .big { display:flex;align-items:baseline;gap:14px;margin-top:6px }
.r1-ueb .hero .big .v { font-size:46px;font-weight:800;letter-spacing:-1.5px }
.r1-ueb .hero .delta { background:rgba(52,211,153,.18);color:#6ee7b7;font-weight:700;font-size:12.5px;border-radius:99px;padding:4px 11px }
.r1-ueb .hero .delta.neg { background:rgba(248,113,113,.15);color:#fca5a5 }
.r1-ueb .hero .delta.zero { background:rgba(255,255,255,.12);color:#bcd2e8 }
.r1-ueb .spark { flex:1;min-height:96px;margin:14px 0 4px;position:relative }
.r1-ueb .spark svg { position:absolute;inset:0;width:100%;height:100% }
.r1-ueb .hero .legend { display:flex;gap:26px;padding-top:14px;font-size:13px;color:#bcd2e8;border-top:1px solid rgba(255,255,255,.10);margin-top:6px }
.r1-ueb .hero .legend b { color:#fff;font-size:16px;display:block;margin-top:1px }
.r1-ueb .hero .legend .up b { color:#6ee7b7 }
.r1-ueb .hero .legend .dn b { color:#fca5a5 }
.r1-ueb .hero .legend .vj { margin-left:auto;text-align:right;font-size:12px;color:#8fb0d0 }
.r1-ueb .growth { grid-column:span 4;display:flex;flex-direction:column }
.r1-ueb .gnums { display:flex;gap:18px;margin:12px 0 6px }
.r1-ueb .gnums b { font-size:22px;letter-spacing:-.5px }
.r1-ueb .gnums .up b { color:var(--ok) }
.r1-ueb .gnums .dn b { color:var(--bad) }
.r1-ueb .gnums span { display:block;font-size:11.5px;color:var(--ink3);font-weight:600 }
.r1-ueb .gchart { display:grid;grid-template-columns:repeat(7,1fr);gap:9px;flex:1;min-height:104px;align-items:center;margin-top:6px }
.r1-ueb .gcol { display:flex;flex-direction:column;align-items:center;height:100%;justify-content:center;gap:2px }
.r1-ueb .gup { width:70%;background:linear-gradient(180deg,#34d399,#178a50);border-radius:5px 5px 2px 2px }
.r1-ueb .gdn { width:70%;background:#f3b8bf;border-radius:2px 2px 5px 5px }
.r1-ueb .gzero { width:100%;height:1px;background:var(--line) }
.r1-ueb .gxlab { display:grid;grid-template-columns:repeat(7,1fr);gap:9px;text-align:center;font-size:10.5px;color:var(--ink3);font-weight:600;margin-top:4px }
.r1-ueb .net { margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:center;font-size:12.5px;color:var(--ink2) }
.r1-ueb .net b { color:var(--ok);font-size:15px;margin-left:auto }
.r1-ueb .seg { display:flex;background:#eef1f6;border-radius:9px;padding:3px;font-size:12px;font-weight:600;color:var(--ink2) }
.r1-ueb .seg span { padding:4px 12px;border-radius:7px }
.r1-ueb .seg .on { background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,35,58,.12) }
.r1-ueb .prog { grid-column:span 4 }
.r1-ueb .role { grid-column:span 4 }
.r1-ueb .year { grid-column:span 4 }
.r1-ueb .distrow { display:flex;align-items:center;gap:11px;margin-top:11px }
.r1-ueb .distrow .k { width:96px;font-weight:650;font-size:13px }
.r1-ueb .distrow .k small { display:block;font-weight:500;color:var(--ink3);font-size:11px }
.r1-ueb .distrow .track { flex:1;height:12px;background:#eef1f6;border-radius:99px;overflow:hidden }
.r1-ueb .distrow .track i { display:block;height:100%;border-radius:99px }
.r1-ueb .distrow .v { width:78px;text-align:right;font-weight:700;font-size:13px }
.r1-ueb .distrow .v small { color:var(--ink3);font-weight:600;font-size:11px }
.r1-ueb .bar-bsc { background:linear-gradient(90deg,#3f7ae6,#1e56c8) }
.r1-ueb .bar-msc { background:linear-gradient(90deg,#22b3a6,#0ea5a4) }
.r1-ueb .bar-mba { background:linear-gradient(90deg,#8f80f2,#7c6cf0) }
.r1-ueb .bar-phd { background:linear-gradient(90deg,#c877e0,#b558d9) }
.r1-ueb .bar-neu { background:linear-gradient(90deg,#4bb978,#178a50) }
.r1-ueb .role .rrow { display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px }
.r1-ueb .role .rrow:last-child { border:none }
.r1-ueb .role .rdot { width:10px;height:10px;border-radius:3px;flex:none }
.r1-ueb .role .rrow b { margin-left:auto;font-weight:700 }
.r1-ueb .role .rrow small { color:var(--ink3);font-weight:600;width:52px;text-align:right }
.r1-ueb .ybars { display:grid;grid-template-columns:repeat(11,1fr);gap:7px;align-items:end;height:126px;margin-top:14px }
.r1-ueb .ycol { display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:5px }
.r1-ueb .ycol i { width:70%;background:linear-gradient(180deg,#3f7ae6,#1e56c8);border-radius:5px 5px 2px 2px }
.r1-ueb .ycol.hi i { background:linear-gradient(180deg,#34d399,#178a50) }
.r1-ueb .ycol span { font-size:10px;color:var(--ink3);font-weight:600 }
.r1-ueb .ycap { display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin-top:10px;border-top:1px solid var(--line);padding-top:9px }
.r1-ueb .ycap b { color:var(--ink) }
.r1-ueb .quality { grid-column:span 6 }
.r1-ueb .qgrid { display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:13px }
.r1-ueb .qcell { border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fbfcfe }
.r1-ueb .qcell .qh { display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--ink2) }
.r1-ueb .qcell .qh svg { width:15px;height:15px;stroke-width:2;fill:none }
.r1-ueb .qcell .qv { font-size:24px;font-weight:800;letter-spacing:-.5px;margin:6px 0 4px }
.r1-ueb .qcell .qbar { height:8px;background:#eef1f6;border-radius:99px;overflow:hidden }
.r1-ueb .qcell .qbar i { display:block;height:100%;border-radius:99px }
.r1-ueb .qcell .qnote { font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:6px }
.r1-ueb .ic-grn { color:var(--ok) }
.r1-ueb .ic-blu { color:var(--brand) }
.r1-ueb .ic-amb { color:var(--warn) }
.r1-ueb .ic-red { color:var(--bad) }
.r1-ueb .fill-grn { background:linear-gradient(90deg,#34d399,#178a50) }
.r1-ueb .fill-blu { background:linear-gradient(90deg,#3f7ae6,#1e56c8) }
.r1-ueb .fill-amb { background:linear-gradient(90deg,#f0b657,#c07600) }
.r1-ueb .fill-red { background:linear-gradient(90deg,#e8697a,#c93a4a) }
.r1-ueb .moves { grid-column:span 6 }
.r1-ueb .moves ul { list-style:none;margin-top:10px }
.r1-ueb .moves li { display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px dashed var(--line) }
.r1-ueb .moves li:last-child { border:none }
.r1-ueb .mava { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:none }
.r1-ueb .moves .mt b { font-size:13.5px }
.r1-ueb .moves .mt span { display:block;font-size:11.5px;color:var(--ink3) }
.r1-ueb .moves .tag { margin-left:auto;font-size:11px;font-weight:700;border-radius:99px;padding:3px 10px }
.r1-ueb .tag-in { background:#e5f5ec;color:#178a50 }
.r1-ueb .tag-out { background:#fdeaec;color:#c93a4a }
.r1-ueb .moves time { font-size:11px;color:var(--ink3);font-weight:600;width:66px;text-align:right }
.r1-ueb .lifecycle { grid-column:span 12 }
.r1-ueb .lcgrid { display:grid;grid-template-columns:1.55fr 1fr;gap:28px;margin-top:15px;align-items:stretch }
.r1-ueb .funnel { display:flex;gap:8px;align-items:flex-end }
.r1-ueb .fstage { flex:1;text-align:center;text-decoration:none }
.r1-ueb .fstage .fbar { border-radius:10px 10px 4px 4px;display:flex;align-items:flex-end;justify-content:center;color:#fff;font-weight:800;font-size:16px;padding-bottom:7px;font-variant-numeric:tabular-nums }
.r1-ueb .fstage .flab { font-size:11.5px;color:var(--ink);font-weight:700;margin-top:8px }
.r1-ueb .fstage .fsub { font-size:10.5px;color:var(--ink3);font-weight:600 }
.r1-ueb .warns { display:flex;flex-direction:column;gap:9px;justify-content:center }
.r1-ueb .warn { display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 13px;background:#fbfcfe }
.r1-ueb .warn .wi { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none }
.r1-ueb .warn .wi svg { width:17px;height:17px;fill:none;stroke-width:2 }
.r1-ueb .warn .wt b { font-size:13px }
.r1-ueb .warn .wt span { display:block;font-size:11px;color:var(--ink3);font-weight:600 }
.r1-ueb .warn .wn { margin-left:auto;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums }
.r1-ueb .warn .wl { color:var(--brand);font-weight:800;font-size:16px;margin-left:9px }

/* ── v2_mit_auswertung ── */
.r1-ausw .ttools { margin-left:auto;display:flex;gap:9px;align-items:center }
.r1-ausw .ybox { display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink2);box-shadow:var(--shadow);font-weight:600;font-size:13px }
.r1-ausw .ybox svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-ausw .btn { display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border-radius:11px;padding:9px 15px;font-weight:650;font-size:13px;box-shadow:var(--shadow) }
.r1-ausw .btn svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-ausw .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.r1-ausw .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.r1-ausw .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.r1-ausw .card h2 svg.hi { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.r1-ausw .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.r1-ausw .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.r1-ausw .seg { display:flex;background:#eef1f6;border-radius:9px;padding:3px;font-size:12px;font-weight:600;color:var(--ink2);margin-left:auto }
.r1-ausw .seg span { padding:4px 12px;border-radius:7px }
.r1-ausw .seg .on { background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,35,58,.12) }
.r1-ausw .c8 { grid-column:span 8 }
.r1-ausw .c4 { grid-column:span 4 }
.r1-ausw .c6 { grid-column:span 6 }
.r1-ausw .c12 { grid-column:span 12 }
.r1-ausw .kstat { display:flex;flex-direction:column;gap:11px;margin-top:14px }
.r1-ausw .kstat .kr { display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe }
.r1-ausw .kstat .kr .ki { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none }
.r1-ausw .kstat .kr .ki svg { width:17px;height:17px;fill:none;stroke-width:2 }
.r1-ausw .kstat .kr .kl { font-size:12px;color:var(--ink3);font-weight:600 }
.r1-ausw .kstat .kr .kv { margin-left:auto;font-size:20px;font-weight:800;letter-spacing:-.4px }
.r1-ausw .kstat .kr .kgo { color:var(--ink3);font-size:16px;font-weight:700;margin-left:2px }
.r1-ausw .kstat .kr .kl small { display:block;font-size:10.5px;color:var(--brand);font-weight:600 }
.r1-ausw .kstat .kr .kd { font-size:11px;font-weight:700;border-radius:99px;padding:2px 8px }
.r1-ausw .kd.up { background:#e5f5ec;color:#178a50 }
.r1-ausw .kd.dn { background:#fdeaec;color:#c93a4a }
.r1-ausw .c-blue { background:#e8effd;color:#1e56c8 }
.r1-ausw .c-grn { background:#e5f5ec;color:#178a50 }
.r1-ausw .c-amb { background:#fdf3e2;color:#c07600 }
.r1-ausw .c-vio { background:#f0edfd;color:#7c6cf0 }
.r1-ausw .c-red { background:#fdeaec;color:#c93a4a }
.r1-ausw .mbars { display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:18px;height:190px;align-items:center }
.r1-ausw .mcol { display:flex;flex-direction:column;align-items:center;height:100%;justify-content:center }
.r1-ausw .mcol .up { display:block;width:64%;background:linear-gradient(180deg,#34d399,#178a50);border-radius:5px 5px 0 0 }
.r1-ausw .mcol .zero { width:100%;height:1.5px;background:var(--line) }
.r1-ausw .mcol .dn { display:block;width:64%;background:linear-gradient(180deg,#f3b8bf,#e26a78);border-radius:0 0 5px 5px }
.r1-ausw .mcol a.up, .r1-ausw .mcol a.dn { cursor:pointer;transition:filter .12s }
.r1-ausw .mcol a.up:hover, .r1-ausw .mcol a.dn:hover { filter:brightness(1.08) saturate(1.1) }
.r1-ausw .bestand-chart circle { cursor:pointer }
.r1-ausw .bfoot { margin-top:8px;font-size:11px;color:var(--ink3);font-weight:600;line-height:1.5 }
.r1-ausw .vcol a.bar { display:block;cursor:pointer;transition:filter .12s }
.r1-ausw .vcol a.bar:hover { filter:brightness(1.08) }
.r1-ausw a.eqbar { text-decoration:none;color:inherit;cursor:pointer }
.r1-ausw a.eqbar:hover .tr { outline:1.5px solid #bcd3f7 }
.r1-ausw .kg-bars { display:flex;flex-direction:column;gap:10px;margin-top:14px }
.r1-ausw .kg-bar { display:grid;grid-template-columns:1fr 96px;align-items:center;gap:12px;font-size:12.5px;font-weight:700 }
.r1-ausw .kg-bar .kg-lbl { min-width:0 }
.r1-ausw .kg-bar .kg-lbl span { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.r1-ausw .kg-bar .kg-tr { height:10px;background:#eef1f6;border-radius:99px;overflow:hidden;margin-top:4px }
.r1-ausw .kg-bar .kg-tr i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f3b8bf,#e26a78) }
.r1-ausw .kg-bar .kg-v { text-align:right;font-weight:800 }
.r1-ausw .kg-none { margin-top:10px;font-size:11.5px;color:var(--ink3);font-weight:600 }
.r1-ausw .rtrend { margin-top:14px }
.r1-ausw .rtrend .rt-head { display:flex;align-items:baseline;gap:8px;margin-bottom:6px }
.r1-ausw .rtrend .rt-head b { font-size:22px;font-weight:800;color:#178a50 }
.r1-ausw .rtrend .rt-head span { font-size:11.5px;color:var(--ink3);font-weight:600 }
.r1-ausw .rtrend .rt-x { display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);font-weight:600;margin-top:4px }
.r1-ausw .mx { display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-top:8px;text-align:center;font-size:10.5px;color:var(--ink3);font-weight:600 }
.r1-ausw .mx .now { color:var(--brand);font-weight:800 }
.r1-ausw .mnet { margin-top:12px;padding-top:11px;border-top:1px solid var(--line);display:flex;gap:20px;font-size:12.5px;color:var(--ink2) }
.r1-ausw .mnet b { font-weight:800 }
.r1-ausw .mnet .g { color:var(--ok) }
.r1-ausw .mnet .r { color:var(--bad) }
.r1-ausw .mnet .last { margin-left:auto;color:var(--ink) }
.r1-ausw .hbars { display:flex;flex-direction:column;gap:11px;margin-top:16px }
.r1-ausw .hbar { display:grid;grid-template-columns:158px 1fr 82px;align-items:center;gap:12px;font-size:12.5px;font-weight:600 }
.r1-ausw .hbar .tr { height:22px;background:#eef1f6;border-radius:7px;overflow:hidden }
.r1-ausw .hbar .tr i { display:block;height:100%;border-radius:7px }
.r1-ausw .hbar .vv { text-align:right;font-weight:700 }
.r1-ausw .hbar .vv small { color:var(--ink3);font-weight:600 }
.r1-ausw .vbars { display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:18px;height:180px;align-items:end }
.r1-ausw .vcol { display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px }
.r1-ausw .vcol .bar { width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4f8bec,#1e56c8) }
.r1-ausw .vcol .bar.hl { background:linear-gradient(180deg,#34d399,#178a50) }
.r1-ausw .vcol .n { text-align:center;font-size:11px;font-weight:700;color:var(--ink2) }
.r1-ausw .vx { display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:8px;text-align:center;font-size:10.5px;color:var(--ink3);font-weight:600 }
.r1-ausw .eqbars { display:flex;flex-direction:column;gap:12px;margin-top:16px }
.r1-ausw .eqbar { display:grid;grid-template-columns:120px 1fr 96px;align-items:center;gap:12px;font-size:12.5px;font-weight:700 }
.r1-ausw .eqbar .tr { height:24px;background:#eef1f6;border-radius:7px;overflow:hidden;position:relative }
.r1-ausw .eqbar .tr i { display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#34d399,#178a50) }
.r1-ausw .eqbar .tr .vjtick { position:absolute;top:-3px;bottom:-3px;width:2px;background:#c07600;border-radius:2px }
.r1-ausw .eqbar .vv { text-align:right }
.r1-ausw .eqbar .vv small { display:block;color:var(--ink3);font-weight:600;font-size:11px }
.r1-ausw .legend2 { display:flex;gap:18px;margin-top:14px;font-size:11.5px;color:var(--ink2);font-weight:600;flex-wrap:wrap }
.r1-ausw .legend2 i { width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px }
.r1-ausw .legend2 .vjl { width:12px;height:2px;background:#c07600;border-radius:2px;display:inline-block;margin-right:6px;vertical-align:3px }

/* ── v2_mit_segmente ── */
.r1-seg .layout { display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start }
.r1-seg .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow) }
.r1-seg .pad { padding:18px 20px }
.r1-seg h2.ct { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.r1-seg h2.ct svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.r1-seg .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.r1-seg .newbtn { display:flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border-radius:11px;padding:11px;font-weight:700;font-size:13px;margin:14px 0 6px }
.r1-seg .newbtn svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4 }
.r1-seg .seglist-grp { margin:16px 0 6px;font-size:10.5px;letter-spacing:1.2px;color:var(--ink3);font-weight:700 }
.r1-seg .segitem { display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;margin-bottom:8px;cursor:pointer }
.r1-seg .segitem.on { border-color:#bcd3f7;background:#eef4fe;box-shadow:inset 0 0 0 1px #bcd3f7 }
.r1-seg .segitem .si { width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none }
.r1-seg .segitem .si svg { width:16px;height:16px;fill:none;stroke-width:2 }
.r1-seg .segitem .st b { font-size:13px;display:block }
.r1-seg .segitem .st span { font-size:11px;color:var(--ink3) }
.r1-seg .segitem .cnt { margin-left:auto;font-size:13px;font-weight:800;color:var(--ink2) }
.r1-seg .segitem.on .cnt { color:var(--brand) }
.r1-seg .c-blue { background:#e8effd;color:#1e56c8 }
.r1-seg .c-grn { background:#e5f5ec;color:#178a50 }
.r1-seg .c-amb { background:#fdf3e2;color:#c07600 }
.r1-seg .c-vio { background:#f0edfd;color:#7c6cf0 }
.r1-seg .c-red { background:#fdeaec;color:#c93a4a }
.r1-seg .c-mut { background:#f1f4f8;color:#5b6b84 }
.r1-seg .bhead { display:flex;align-items:center;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line) }
.r1-seg .bhead .bi { width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none }
.r1-seg .bhead .bi svg { width:22px;height:22px;fill:none;stroke-width:2 }
.r1-seg .bhead h3 { font-size:18px;font-weight:800;letter-spacing:-.3px }
.r1-seg .bhead .bm { font-size:12.5px;color:var(--ink3);margin-top:2px }
.r1-seg .bactions { margin-left:auto;display:flex;gap:8px }
.r1-seg .ba { display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 14px;font-weight:650;font-size:12.5px;border:1px solid var(--line);background:#fff;color:var(--ink2) }
.r1-seg .ba svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-seg .ba.pri { background:var(--brand);color:#fff;border:none }
.r1-seg .ba.grn { background:var(--ok);color:#fff;border:none }
.r1-seg .ba.pri { background:linear-gradient(135deg,#2f6fe0,#1e56c8);color:#fff;border:none }
.r1-seg .rb { padding:18px 20px }
.r1-seg .rblabel { font-size:11px;letter-spacing:.8px;color:var(--ink3);font-weight:700;margin-bottom:12px }
.r1-seg .rules { display:flex;flex-direction:column;gap:10px }
.r1-seg .rrow { display:flex;align-items:center;gap:10px }
.r1-seg .conj { width:52px;flex:none;text-align:center;font-size:11px;font-weight:800;color:var(--brand);letter-spacing:.5px }
.r1-seg .rcond { flex:1;display:flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe }
.r1-seg .sel { display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:13px;font-weight:650 }
.r1-seg .sel svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2 }
.r1-seg .sel .fld { color:var(--brand) }
.r1-seg .op { font-size:13px;font-weight:800;color:var(--ink2);padding:0 2px }
.r1-seg .sel.val { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.r1-seg .rmv { margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ink3);border:1px solid var(--line);background:#fff;flex:none }
.r1-seg .rmv svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-seg .addcond { display:inline-flex;align-items:center;gap:8px;margin-top:14px;margin-left:62px;color:var(--brand);font-weight:700;font-size:12.5px;border:1px dashed #bcd3f7;border-radius:10px;padding:9px 14px;background:#f5f9ff }
.r1-seg .addcond svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4 }
.r1-seg .preview { display:flex;align-items:center;gap:18px;margin:0 20px 18px;padding:16px 20px;border-radius:14px;background:linear-gradient(135deg,#10304f,#1b4a7c);color:#fff }
.r1-seg .preview .pv { font-size:40px;font-weight:800;letter-spacing:-1.5px;line-height:1 }
.r1-seg .preview .pl { font-size:12.5px;color:#bcd2e8;font-weight:600 }
.r1-seg .preview .pl b { color:#fff;display:block;font-size:14px }
.r1-seg .preview .pdelta { margin-left:auto;display:flex;gap:20px;text-align:right }
.r1-seg .preview .pdelta .pd b { font-size:18px;font-weight:800;display:block }
.r1-seg .preview .pdelta .pd span { font-size:11px;color:#9fc0e2;font-weight:600 }
.r1-seg .preview .live { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:rgba(52,211,153,.2);color:#a7f3d0;border-radius:99px;padding:3px 10px }
.r1-seg .preview .live .dot { width:7px;height:7px;border-radius:50%;background:#34d399 }
.r1-seg .rtabhead { display:flex;align-items:center;gap:10px;padding:0 20px 8px }
.r1-seg .rtabhead h4 { font-size:13px;font-weight:700 }
.r1-seg .rtabhead .more { margin-left:auto;font-size:12px;color:var(--brand);font-weight:600 }
.r1-seg table { width:100%;border-collapse:collapse;font-size:13px }
.r1-seg th { font-size:10.5px;letter-spacing:.6px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fbfcfe }
.r1-seg td { padding:11px 20px;border-bottom:1px solid #eef1f6 }
.r1-seg tr:last-child td { border-bottom:none }
.r1-seg .mname { display:flex;align-items:center;gap:10px;font-weight:700 }
.r1-seg .mname .ma { width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#3f7ae6,#1e56c8);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none }
.r1-seg .tag { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px }
.r1-seg .tg-of { background:#fdf3e2;color:#c07600 }
.r1-seg .tg-ueb { background:#e0f2f6;color:#0e7490 }
.r1-seg .tg-pp { background:#f0edfd;color:#7c6cf0 }
.r1-seg .tg-ok { background:#e5f5ec;color:#178a50 }
.r1-seg .tg-fr { background:#eef1f6;color:#5b6b84 }
.r1-seg .amt { text-align:right;font-weight:700;font-variant-numeric:tabular-nums }

/* ── v2_mit_conversion ── */
.r1-conv .amp { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:5px 12px }
.r1-conv .amp .d { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.r1-conv .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.r1-conv .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.r1-conv .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.r1-conv .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.r1-conv .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.r1-conv .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.r1-conv .funnel { grid-column:span 5;display:flex;flex-direction:column;background:linear-gradient(135deg,#10304f 0%,#153a60 55%,#1b4a7c 100%);color:#fff;border:none;position:relative;overflow:hidden }
.r1-conv .funnel::after { content:'';position:absolute;right:-70px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.22),transparent 65%) }
.r1-conv .funnel .lbl { font-size:12px;letter-spacing:1.6px;color:#9fc0e2;font-weight:700 }
.r1-conv .fsteps { margin-top:16px;display:flex;flex-direction:column;gap:11px;position:relative }
.r1-conv .fstep { position:relative }
.r1-conv .fstep .fbar { border-radius:11px;padding:13px 16px;display:flex;align-items:center;gap:12px }
.r1-conv .fs1 .fbar { background:rgba(255,255,255,.14);width:100% }
.r1-conv .fs2 .fbar { background:linear-gradient(90deg,#34d399,#178a50);width:49.8% }
.r1-conv .fstep .fv { font-size:23px;font-weight:800;letter-spacing:-.7px }
.r1-conv .fstep .ft { font-size:12.5px;color:#cfe0f2;font-weight:600 }
.r1-conv .fs2 .ft { color:#dcfce7 }
.r1-conv .fstep .fpct { margin-left:auto;font-size:15px;font-weight:800;background:rgba(255,255,255,.18);border-radius:8px;padding:4px 10px }
.r1-conv .funnel .ffoot { margin-top:auto;padding-top:15px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:24px;font-size:12px;color:#bcd2e8 }
.r1-conv .funnel .ffoot b { color:#fff;font-size:17px;display:block;margin-top:2px }
.r1-conv .funnel .ffoot .up b { color:#6ee7b7 }
.r1-conv .pool { grid-column:span 7;display:flex;flex-direction:column }
.r1-conv .poolhead { display:flex;align-items:baseline;gap:12px;margin-top:6px }
.r1-conv .poolhead .pv { font-size:34px;font-weight:800;letter-spacing:-1px }
.r1-conv .poolhead .pl { font-size:12.5px;color:var(--ink3);font-weight:600 }
.r1-conv .pbars { margin-top:14px;display:flex;flex-direction:column;gap:11px }
.r1-conv .pbrow { display:flex;align-items:center;gap:11px }
.r1-conv .pbrow .k { width:130px;font-size:12.5px;font-weight:650 }
.r1-conv .pbrow .k small { display:block;color:var(--ink3);font-weight:500;font-size:11px }
.r1-conv .pbrow .track { flex:1;height:22px;background:#eef1f6;border-radius:7px;overflow:hidden;display:flex }
.r1-conv .pbrow .track i { height:100%;display:block }
.r1-conv .seg-bsc { background:var(--bsc) }
.r1-conv .seg-msc { background:var(--msc) }
.r1-conv .seg-mba { background:var(--mba) }
.r1-conv .seg-phd { background:var(--phd) }
.r1-conv .pbrow .v { width:64px;text-align:right;font-weight:700;font-size:13px }
.r1-conv .poolleg { display:flex;gap:16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink2);font-weight:600 }
.r1-conv .poolleg i { width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px }
.r1-conv .cohorts { grid-column:span 8 }
.r1-conv .ctab { width:100%;border-collapse:collapse;font-size:13px;margin-top:10px }
.r1-conv .ctab th { font-size:10.5px;letter-spacing:.5px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line) }
.r1-conv .ctab td { padding:10px 10px;border-bottom:1px solid #eef1f6 }
.r1-conv .ctab tr:last-child td { border:none }
.r1-conv .ctab tr.pot { background:#fdf8ee }
.r1-conv .ctab .kls { font-weight:700 }
.r1-conv .ctab .kls small { display:block;color:var(--ink3);font-weight:500;font-size:11px }
.r1-conv .qwrap { display:flex;align-items:center;gap:9px }
.r1-conv .qtrack { flex:1;height:9px;background:#eef1f6;border-radius:99px;overflow:hidden;max-width:150px }
.r1-conv .qtrack i { display:block;height:100%;border-radius:99px }
.r1-conv .q-hi { background:linear-gradient(90deg,#34d399,#178a50) }
.r1-conv .q-mid { background:linear-gradient(90deg,#3f7ae6,#1e56c8) }
.r1-conv .q-lo { background:linear-gradient(90deg,#f0b657,#c07600) }
.r1-conv .qwrap b { width:44px;text-align:right;font-weight:700 }
.r1-conv .trend { display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700 }
.r1-conv .trend svg { width:13px;height:13px;fill:none;stroke-width:2.4 }
.r1-conv .tr-up { color:var(--ok) }
.r1-conv .tr-dn { color:var(--bad) }
.r1-conv .tr-fl { color:var(--ink3) }
.r1-conv .potbadge { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#c07600;background:#fdf3e2;border-radius:99px;padding:2px 9px }
.r1-conv .potbadge svg { width:11px;height:11px;fill:none;stroke:#c07600;stroke-width:2.2 }
.r1-conv .potential { grid-column:span 4;display:flex;flex-direction:column }
.r1-conv .plist { display:flex;flex-direction:column;gap:11px;margin-top:13px }
.r1-conv .pcard { border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fbfcfe }
.r1-conv .pcard.hot { border-color:#f0d9ad;background:#fdf8ee }
.r1-conv .pcard .pt { display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700 }
.r1-conv .pcard .pt .pnum { margin-left:auto;font-size:16px;font-weight:800 }
.r1-conv .pcard .pd { font-size:11.5px;color:var(--ink2);margin-top:4px }
.r1-conv .pcard .pd b { color:var(--warn) }
.r1-conv .pcard .pmeta { display:flex;gap:8px;margin-top:9px }
.r1-conv .pmini { font-size:10.5px;font-weight:700;border-radius:7px;padding:3px 8px;background:#eef1f6;color:var(--ink2) }
.r1-conv .pcard .pmeta .pgo { margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:#e8effd;border:1px solid #bcd3f7;color:var(--brand);border-radius:7px;padding:3px 10px;font-size:11px;font-weight:700;text-decoration:none }
.r1-conv .pcard .pmeta .pgo svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2 }
.r1-conv .potfoot { margin-top:auto;padding-top:14px;display:flex;gap:9px }
.r1-conv .btn { flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:12.5px;font-weight:650 }
.r1-conv .btn svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-conv .btn.pri { border:none;background:linear-gradient(135deg,#1e56c8,#2f6fe0);color:#fff;box-shadow:0 4px 12px -4px rgba(30,86,200,.55) }

/* ── v2_mit_lebenszyklus ── */
.r1-lz .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px }
.r1-lz .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.r1-lz .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.r1-lz .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.r1-lz .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.r1-lz .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.r1-lz .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.r1-lz .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.r1-lz .matrix { grid-column:span 8 }
.r1-lz .mwrap { display:grid;grid-template-columns:20px 1fr;gap:9px;margin-top:14px }
.r1-lz .yax { writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:9.5px;letter-spacing:1.6px;color:var(--ink3);font-weight:700 }
.r1-lz .xhead { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 7px 29px }
.r1-lz .xhead span { font-size:9.5px;letter-spacing:1.4px;color:var(--ink3);font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px }
.r1-lz .xhead span i { width:8px;height:8px;border-radius:50%;display:inline-block }
.r1-lz .qgrid { display:grid;grid-template-columns:1fr 1fr;gap:13px }
.r1-lz .quad { border-radius:14px;padding:15px 16px 13px;border:1px solid;position:relative;min-height:138px;display:flex;flex-direction:column }
.r1-lz .quad .qc { font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px }
.r1-lz .quad .qc i { width:7px;height:7px;border-radius:50% }
.r1-lz .quad .qn { font-size:34px;font-weight:800;letter-spacing:-1.2px;margin:6px 0 1px;display:flex;align-items:baseline;gap:9px }
.r1-lz .quad .qn .tr { font-size:12px;font-weight:800;letter-spacing:0 }
.r1-lz .quad .ql { font-size:13.5px;font-weight:750 }
.r1-lz .quad .qd { font-size:11.5px;color:var(--ink2);margin-top:2px }
.r1-lz .quad .qgo { margin-top:auto;font-size:12px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:4px;padding-top:9px }
.r1-lz .q-grn { background:#eaf7ef;border-color:#c3e6d0 }
.r1-lz .q-grn .qc, .r1-lz .q-grn .ql { color:#146c40 }
.r1-lz .q-grn .qgo { color:#146c40 }
.r1-lz .q-amb { background:#fdf6ea;border-color:#f0ddb6 }
.r1-lz .q-amb .qc, .r1-lz .q-amb .ql { color:#9a5f00 }
.r1-lz .q-amb .qgo { color:#9a5f00 }
.r1-lz .q-blue { background:#eaf1fe;border-color:#c9dbf7 }
.r1-lz .q-blue .qc, .r1-lz .q-blue .ql { color:#1b4b9e }
.r1-lz .q-blue .qgo { color:#1b4b9e }
.r1-lz .q-red { background:#fdeef0;border-color:#f3ccd2 }
.r1-lz .q-red .qc, .r1-lz .q-red .ql { color:#a82f3d }
.r1-lz .q-red .qgo { color:#a82f3d }
.r1-lz .tr.up { color:var(--ok) }
.r1-lz .tr.dn { color:var(--bad) }
.r1-lz .score { grid-column:span 4;display:flex;flex-direction:column }
.r1-lz .schart { display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;height:132px;margin:16px 0 6px }
.r1-lz .scol { display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:6px }
.r1-lz .scol .sb { width:74%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#5b8def,#1e56c8) }
.r1-lz .scol.risk .sb { background:linear-gradient(180deg,#f0a3ad,#c93a4a) }
.r1-lz .scol.warm .sb { background:linear-gradient(180deg,#f4c877,#c07600) }
.r1-lz .scol.good .sb { background:linear-gradient(180deg,#57c98a,#178a50) }
.r1-lz .scol .sv { font-size:11px;font-weight:700;color:var(--ink2) }
.r1-lz .sxlab { display:grid;grid-template-columns:repeat(5,1fr);gap:10px;text-align:center;font-size:10px;color:var(--ink3);font-weight:600 }
.r1-lz .sig { margin-top:14px;padding-top:12px;border-top:1px solid var(--line) }
.r1-lz .sig .sigt { font-size:10.5px;letter-spacing:.8px;color:var(--ink3);font-weight:700;margin-bottom:9px }
.r1-lz .sigl { display:flex;flex-wrap:wrap;gap:7px }
.r1-lz .sigl .sc { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--ink2);background:#f6f8fb;border:1px solid var(--line);border-radius:99px;padding:4px 10px }
.r1-lz .sigl .sc i { width:8px;height:8px;border-radius:50%;flex:none }
.r1-lz .sugg { grid-column:span 8 }
.r1-lz table { width:100%;border-collapse:collapse;font-size:13px }
.r1-lz th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line) }
.r1-lz td { padding:10px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.r1-lz tr:last-child td { border:none }
.r1-lz .mcell { display:flex;align-items:center;gap:10px }
.r1-lz .mav { width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;flex:none }
.r1-lz .mcell .mn { font-weight:700;font-size:13px;color:var(--brand) }
.r1-lz .mcell .mn small { color:var(--ink3);font-weight:500;font-size:11px;margin-left:5px }
.r1-lz .qchip { font-size:10.5px;font-weight:700;border-radius:7px;padding:3px 9px;white-space:nowrap }
.r1-lz .qc-amb { background:#fdf3e2;color:#9a5f00 }
.r1-lz .qc-blue { background:#eaf1fe;color:#1b4b9e }
.r1-lz .qc-red { background:#fdeef0;color:#a82f3d }
.r1-lz .reason { color:var(--ink2);font-size:12.5px }
.r1-lz .lastk { font-size:12px;color:var(--ink3);font-weight:600;white-space:nowrap }
.r1-lz .acts { display:flex;gap:6px }
.r1-lz .acts .ab { width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fbfcfe;display:grid;place-items:center }
.r1-lz .acts .ab svg { width:14px;height:14px;fill:none;stroke-width:2 }
.r1-lz .ab.call svg { stroke:#c07600 }
.r1-lz .ab.mail svg { stroke:#1e56c8 }
.r1-lz .ab.wa svg { stroke:#178a50 }
.r1-lz .ab.call { background:#fdf6ea;border-color:#f0ddb6 }
.r1-lz .ab.mail { background:#eaf1fe;border-color:#c9dbf7 }
.r1-lz .ab.wa { background:#eaf7ef;border-color:#c3e6d0 }
.r1-lz .tabfoot { display:flex;align-items:center;justify-content:space-between;padding:12px 4px 2px;font-size:12.5px;color:var(--ink3);font-weight:600 }
.r1-lz .tabfoot a { color:var(--brand);font-weight:700;text-decoration:none }
.r1-lz .rail { grid-column:span 4;display:flex;flex-direction:column;gap:16px }
.r1-lz .warn ul { list-style:none;margin-top:12px }
.r1-lz .warn li { display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px dashed var(--line) }
.r1-lz .warn li:last-child { border:none }
.r1-lz .warn .wi { width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none }
.r1-lz .warn .wi svg { width:15px;height:15px;fill:none;stroke-width:2 }
.r1-lz .warn .wt { font-size:12.5px;font-weight:650 }
.r1-lz .warn .wt span { display:block;font-size:11px;color:var(--ink3);font-weight:500 }
.r1-lz .warn .wn { margin-left:auto;font-weight:800;font-size:15px }
.r1-lz .warn .wgo { color:var(--ink3);font-size:15px;margin-left:6px }
.r1-lz .c-red { background:#fdeaec;color:#c93a4a }
.r1-lz .c-amb { background:#fdf3e2;color:#c07600 }
.r1-lz .c-blue { background:#e8effd;color:#1e56c8 }
.r1-lz .c-vio { background:#f0edfd;color:#7c6cf0 }
.r1-lz .silent { background:linear-gradient(135deg,#12335a,#1b4a7c);color:#fff;border:none }
.r1-lz .silent h2 { color:#fff }
.r1-lz .silent h2 svg { stroke:#8fc0f0 }
.r1-lz .silent .big { font-size:40px;font-weight:800;letter-spacing:-1.5px;margin:8px 0 2px }
.r1-lz .silent .sd { font-size:12.5px;color:#bcd2e8 }
.r1-lz .wbchip { margin-top:13px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:650;color:#eaf3ff }
.r1-lz .wbchip svg { width:16px;height:16px;stroke:#9fd8b6;fill:none;stroke-width:2;flex:none }
.r1-lz .wbchip b { color:#fff }
.r1-lz .wbchip .go { margin-left:auto;color:#9fc0e2;font-weight:800 }
   R2a — KOMMUNIKATION KERN (Cockpit · Tickets-Liste · Ticket-Detail)
   Additive Komponenten, 1:1 aus den freigegebenen Mockups
   v2_kom_cockpit / v2_kom_tickets / v2_kom_ticket_detail. Alles unter
   `.v3-page` gescoped; Kanalfarben aus dem Mockup:
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page {
  --kc-mail: #1e56c8;
  --kc-wa: #178a50;
  --kc-ticket: #c07600;
  --kc-event: #6d5bd0;
  --kc-hb: #0e8f8e;
}

/* ── Health-Pille + Icon-Button-Reihe im Seitenkopf ── */
.v3-page .v3-hpill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--v3-ok); background: #e5f5ec; border-radius: 99px; padding: 4px 11px; }
.v3-page .v3-hpill .hd { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }

/* ── 12-Spalten-Cockpit-Raster ── */
.v3-page .kc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.v3-page .kc-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 18px 20px; }
.v3-page .kc-card h2 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; margin: 0; }
.v3-page .kc-card h2 svg { width: 17px; height: 17px; stroke: var(--v3-brand); fill: none; stroke-width: 2; flex: none; }
.v3-page .kc-card h2 .more { margin-left: auto; font-size: 12.5px; color: var(--v3-brand); font-weight: 600; text-decoration: none; }
.v3-page .kc-sub { color: var(--v3-ink3); font-size: 12px; margin-top: 2px; }
@media (max-width: 1100px) { .v3-page .kc-grid { grid-template-columns: 1fr; } .v3-page [class*="kc-col"] { grid-column: auto !important; } }

/* ── Kalender (Herzstück, span 12) ── */
.v3-page .kc-cal { grid-column: span 12; }
.v3-page .kc-calhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.v3-page .kc-monthnav { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.v3-page .kc-monthnav b { font-size: 15px; }
.v3-page .kc-monthnav .arw { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--v3-line); display: grid; place-items: center; color: var(--v3-ink2); text-decoration: none; }
.v3-page .kc-seg { display: flex; background: #eef1f6; border-radius: 9px; padding: 3px; font-size: 12px; font-weight: 600; color: var(--v3-ink2); }
.v3-page .kc-seg span { padding: 4px 12px; border-radius: 7px; }
.v3-page .kc-seg .on { background: #fff; color: var(--v3-ink); box-shadow: 0 1px 3px rgba(22,35,58,.12); }
.v3-page .kc-calleg { display: flex; gap: 15px; margin-left: auto; font-size: 11.5px; color: var(--v3-ink2); font-weight: 600; flex-wrap: wrap; }
.v3-page .kc-calleg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }
.v3-page .kc-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; font-size: 10.5px; letter-spacing: .6px; color: var(--v3-ink3); font-weight: 700; margin-bottom: 6px; text-align: left; padding: 0 2px; }
.v3-page .kc-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.v3-page .kc-cald { border: 1px solid var(--v3-line); border-radius: 11px; padding: 8px 9px; min-height: 96px; background: #fbfcfe; display: flex; flex-direction: column; }
.v3-page .kc-cald.today { background: #eef4fe; border-color: #bcd3f7; box-shadow: 0 0 0 1px #bcd3f7; }
.v3-page .kc-cald.mut { background: #f7f8fb; opacity: .55; }
.v3-page .kc-cald .d { font-size: 11px; font-weight: 700; color: var(--v3-ink3); margin-bottom: 6px; }
.v3-page .kc-cald.today .d { color: var(--v3-brand); }
.v3-page .kc-ev { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; border-radius: 6px; padding: 3px 6px; margin-bottom: 4px; line-height: 1.2; }
.v3-page .kc-ev svg { width: 11px; height: 11px; stroke-width: 2.2; fill: none; flex: none; }
.v3-page .kc-ev .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .kc-ev.mail { background: #e8effd; color: #1e56c8; } .v3-page .kc-ev.mail svg { stroke: #1e56c8; }
.v3-page .kc-ev.wa { background: #e5f5ec; color: #178a50; } .v3-page .kc-ev.wa svg { stroke: #178a50; }
.v3-page .kc-ev.event { background: #f0edfd; color: #6d5bd0; } .v3-page .kc-ev.event svg { stroke: #6d5bd0; }
.v3-page .kc-ev.tick { background: #fdf3e2; color: #c07600; } .v3-page .kc-ev.tick svg { stroke: #c07600; }
.v3-page .kc-ev.hb { background: #e2f6f5; color: #0e8f8e; } .v3-page .kc-ev.hb svg { stroke: #0e8f8e; }
.v3-page .kc-ev .mini { margin-left: auto; font-size: 9px; opacity: .7; font-weight: 700; flex: none; }
.v3-page .kc-evm { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--v3-ink3); font-weight: 700; padding: 0 6px 4px 6px; }
.v3-page .kc-evm .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.v3-page .kc-evm .dot.g { background: #22c55e; } .v3-page .kc-evm .dot.a { background: #f59e0b; }

/* ── Spaltenbreiten der zweiten Reihe ── */
.v3-page .kc-col8 { grid-column: span 8; }
.v3-page .kc-col4 { grid-column: span 4; display: flex; flex-direction: column; }

/* ── Nächste Kampagnen ── */
.v3-page .kc-clist { display: flex; flex-direction: column; gap: 10px; margin-top: 13px; }
.v3-page .kc-ccard { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--v3-line); border-radius: 13px; background: #fbfcfe; }
.v3-page .kc-cdate { width: 52px; flex: none; text-align: center; background: #fff; border: 1px solid var(--v3-line); border-radius: 10px; padding: 5px 0; }
.v3-page .kc-cdate .dd { font-size: 18px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.v3-page .kc-cdate .mm { font-size: 10px; font-weight: 700; color: var(--v3-ink3); letter-spacing: .5px; }
.v3-page .kc-cinfo { min-width: 0; flex: 1; }
.v3-page .kc-cinfo .tt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.v3-page .kc-ebadge { font-size: 10px; font-weight: 700; background: #f0edfd; color: #6d5bd0; border-radius: 99px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px; }
.v3-page .kc-ebadge svg { width: 10px; height: 10px; stroke: #6d5bd0; stroke-width: 2.2; fill: none; }
.v3-page .kc-cmeta { display: flex; align-items: center; gap: 14px; margin-top: 5px; font-size: 12px; color: var(--v3-ink2); }
.v3-page .kc-cmeta .seg2 { color: var(--v3-ink3); }
.v3-page .kc-crecv { font-weight: 700; color: var(--v3-ink); }
.v3-page .kc-chans { display: flex; gap: 5px; }
.v3-page .kc-chip-ch { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.v3-page .kc-chip-ch svg { width: 12px; height: 12px; stroke-width: 2; fill: none; }
.v3-page .kc-ch-mail { background: #e8effd; } .v3-page .kc-ch-mail svg { stroke: #1e56c8; }
.v3-page .kc-ch-wa { background: #e5f5ec; } .v3-page .kc-ch-wa svg { stroke: #178a50; }
.v3-page .kc-gate { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.v3-page .kc-gatebtn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #1e56c8, #2f6fe0); color: #fff; font-weight: 700; font-size: 12px; border-radius: 9px; padding: 7px 13px; box-shadow: 0 4px 12px -4px rgba(30,86,200,.55); white-space: nowrap; border: none; text-decoration: none; }
.v3-page .kc-gatebtn svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; fill: none; flex: none; }
.v3-page .kc-gatemeta { font-size: 11px; color: var(--v3-ink3); font-weight: 600; white-space: nowrap; }
.v3-page .kc-cstate { font-size: 10px; font-weight: 800; letter-spacing: .4px; border-radius: 6px; padding: 2px 7px; flex: none; }
.v3-page .kc-st-plan { background: #eef1f6; color: var(--v3-ink2); } .v3-page .kc-st-live { background: #e5f5ec; color: #178a50; }

/* ── Erreichbarkeit ── */
.v3-page .kc-rlist { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.v3-page .kc-rrow .rt { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.v3-page .kc-rrow .rt .ri { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; }
.v3-page .kc-rrow .rt .ri svg { width: 13px; height: 13px; stroke-width: 2; fill: none; }
.v3-page .kc-rrow .rt b { margin-left: auto; font-size: 15px; font-weight: 800; }
.v3-page .kc-rbar { height: 9px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.v3-page .kc-rbar i { display: block; height: 100%; border-radius: 99px; }
.v3-page .kc-rmeta { margin-top: 5px; font-size: 11px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .kc-reachfoot { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--v3-line); font-size: 11.5px; color: var(--v3-ink3); }

/* ── Puls der Woche ── */
.v3-page .kc-pbars { display: flex; flex-direction: column; gap: 13px; margin-top: 15px; }
.v3-page .kc-pgroup .pl { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--v3-ink2); margin-bottom: 6px; }
.v3-page .kc-pgroup .pl .pi { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.v3-page .kc-pgroup .pl .pi svg { width: 12px; height: 12px; stroke-width: 2; fill: none; }
.v3-page .kc-pgroup .pl .tot { margin-left: auto; font-weight: 700; color: var(--v3-ink); }
.v3-page .kc-pio { display: flex; gap: 6px; }
.v3-page .kc-pio .seg3 { flex: 1; }
.v3-page .kc-pio .lab { font-size: 10px; color: var(--v3-ink3); font-weight: 600; margin-bottom: 3px; display: flex; justify-content: space-between; }
.v3-page .kc-pio .track { height: 8px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.v3-page .kc-pio .track i { display: block; height: 100%; border-radius: 99px; }

/* ── Worüber schreiben Mitglieder ── */
.v3-page .kc-tlist { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.v3-page .kc-trow { display: grid; grid-template-columns: 118px 1fr 42px; align-items: center; gap: 10px; font-size: 12.5px; }
.v3-page .kc-trow .tn { font-weight: 600; color: var(--v3-ink2); }
.v3-page .kc-ttrack { height: 14px; border-radius: 7px; background: #eef1f6; overflow: hidden; }
.v3-page .kc-ttrack i { display: block; height: 100%; border-radius: 7px; }
.v3-page .kc-trow .tv { text-align: right; font-weight: 700; color: var(--v3-ink); }

/* ── Kanal-Status-Zeile ── */
.v3-page .kc-status { grid-column: span 12; }
.v3-page .kc-syssum { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; font-size: 12px; font-weight: 700; color: var(--v3-ok); background: #e5f5ec; border-radius: 99px; padding: 3px 11px; }
.v3-page .kc-stgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 30px; margin-top: 12px; }
@media (max-width: 900px) { .v3-page .kc-stgrid { grid-template-columns: repeat(2, 1fr); } }
.v3-page .kc-sysrow { display: flex; align-items: center; gap: 9px; padding: 7.5px 2px; overflow: hidden; white-space: nowrap; border-bottom: 1px dashed var(--v3-line); font-size: 13px; }
.v3-page .kc-sysrow .st { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.v3-page .kc-st-ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.v3-page .kc-st-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.v3-page .kc-sysrow b { font-weight: 650; }
.v3-page .kc-sysrow time { margin-left: auto; font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   R2a — TICKETS-ARBEITSLISTE (Port aus v2_kom_tickets.html)
   ═══════════════════════════════════════════════════════════════════════ */
/* Status-Kacheln */
.v3-page .kt-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .v3-page .kt-tiles { grid-template-columns: repeat(2, 1fr); } }
.v3-page .kt-tile { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 15px 18px; display: flex; align-items: center; gap: 14px; text-decoration: none; }
.v3-page .kt-tile:hover { background: #fafbfe; }
.v3-page .kt-tile .ti { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.v3-page .kt-tile .ti svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke: currentColor; }
.v3-page .kt-tile b { font-size: 26px; letter-spacing: -.8px; color: var(--v3-ink); }
.v3-page .kt-tile .l { font-size: 12.5px; color: var(--v3-ink2); font-weight: 650; }
.v3-page .kt-tile .d { font-size: 11px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .kt-c-blue { background: #e8effd; color: #1e56c8; } .v3-page .kt-c-amb { background: #fdf3e2; color: #c07600; }
.v3-page .kt-c-grn { background: #e5f5ec; color: #178a50; } .v3-page .kt-c-vio { background: #f0edfd; color: #7c6cf0; }
.v3-page .kt-agerow { display: flex; gap: 5px; margin-top: 5px; align-items: center; }
.v3-page .kt-agedot { width: 8px; height: 8px; border-radius: 50%; }
.v3-page .kt-ag-ok { background: #22c55e; } .v3-page .kt-ag-warn { background: #f59e0b; } .v3-page .kt-ag-bad { background: #c93a4a; }

/* Filter-Leiste */
.v3-page .kt-filters { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.v3-page .kt-fsel { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--v3-line); background: #fff; color: var(--v3-ink2); font-size: 12.5px; font-weight: 650; box-shadow: var(--v3-shadow); position: relative; }
.v3-page .kt-fsel > svg { width: 14px; height: 14px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; flex: none; }
.v3-page .kt-fsel .cv { color: var(--v3-ink); font-weight: 700; }
.v3-page .kt-fsel select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.v3-page .kt-fsel .cx { width: 14px; height: 14px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; }
.v3-page .kt-fsearch { flex: 0 1 250px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--v3-line); border-radius: 10px; padding: 0 14px; height: 38px; color: var(--v3-ink3); box-shadow: var(--v3-shadow); font-size: 12.5px; }
.v3-page .kt-fsearch svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.v3-page .kt-fsearch input { flex: 1; border: 0; background: transparent; outline: none; font-size: 12.5px; color: var(--v3-ink); font-family: inherit; }
.v3-page .kt-fsearch input::placeholder { color: var(--v3-ink3); }
.v3-page .kt-fchips { margin-left: auto; display: flex; gap: 6px; }
.v3-page .kt-chip { font-size: 11.5px; font-weight: 650; border-radius: 99px; padding: 7px 13px; border: 1px solid var(--v3-line); color: var(--v3-ink2); background: #fff; text-decoration: none; }
.v3-page .kt-chip.on { background: #e8effd; border-color: #bcd3f7; color: var(--v3-brand); }

/* Arbeitsliste */
.v3-page .kt-listhead { display: flex; align-items: center; gap: 9px; padding: 13px 20px; border-bottom: 1px solid var(--v3-line); }
.v3-page .kt-listhead h2 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; margin: 0; }
.v3-page .kt-listhead h2 svg { width: 16px; height: 16px; stroke: var(--v3-brand); fill: none; stroke-width: 2; }
.v3-page .kt-listhead .cnt { color: var(--v3-ink3); font-weight: 600; font-size: 12px; }
.v3-page .kt-listhead .r { margin-left: auto; font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.v3-page .kt-listhead .r svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .kt-colhead { display: grid; grid-template-columns: 22px 40px 1fr 188px 96px 116px 78px 128px 96px 20px; gap: 14px; align-items: center; padding: 9px 20px; border-bottom: 1px solid var(--v3-line); background: #fafbfd; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--v3-ink3); font-weight: 800; }
@media (max-width: 1100px) { .v3-page .kt-colhead { display: none; } }

.v3-page .kt-trow { display: grid; grid-template-columns: 22px 40px 1fr 188px 96px 116px 78px 128px 96px 20px; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid #eef1f6; cursor: pointer; transition: background .12s; text-decoration: none; color: inherit; }
.v3-page .kt-trow:last-child { border: none; }
.v3-page .kt-trow:hover { background: #f7faff; }
@media (max-width: 1100px) { .v3-page .kt-trow { grid-template-columns: 22px 40px 1fr auto; } .v3-page .kt-trow .kt-hide { display: none; } }
.v3-page .kt-trow .chev { opacity: 0; justify-self: end; }
.v3-page .kt-trow:hover .chev { opacity: 1; }
.v3-page .kt-trow .chev svg { width: 15px; height: 15px; stroke: var(--v3-brand); fill: none; stroke-width: 2.4; }
.v3-page .kt-tav { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; color: #fff; }
.v3-page .kt-tsubj { min-width: 0; }
.v3-page .kt-tsubj .sj { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--v3-ink); }
.v3-page .kt-tsubj .snip { font-size: 12px; color: var(--v3-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.v3-page .kt-tsubj .snip .dir { font-weight: 700; color: var(--v3-ink2); }
.v3-page .kt-tmem { min-width: 0; display: flex; align-items: center; gap: 9px; }
.v3-page .kt-tmem .ma { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #fff; flex: none; }
.v3-page .kt-tmem .mt { min-width: 0; }
.v3-page .kt-tmem .mn { font-weight: 650; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--v3-ink); }
.v3-page .kt-tmem .mc { font-size: 10.5px; color: var(--v3-ink3); font-weight: 500; }
.v3-page .kt-tmem .unk { font-style: italic; color: var(--v3-ink3); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-page .kt-srcchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 4px 9px; }
.v3-page .kt-src-mail { background: #e8effd; color: #1e56c8; } .v3-page .kt-src-wa { background: #e5f5ec; color: #178a50; }
.v3-page .kt-srcchip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .kt-catchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.v3-page .kt-cat-beitrag { background: #e8effd; color: #1e56c8; } .v3-page .kt-cat-quittung { background: #e5f5ec; color: #178a50; }
.v3-page .kt-cat-daten { background: #e2f6f5; color: #0e8f8e; } .v3-page .kt-cat-event { background: #f0edfd; color: #7c6cf0; }
.v3-page .kt-cat-mitgl { background: #fdf3e2; color: #c07600; } .v3-page .kt-cat-sonst { background: #f1f3f7; color: var(--v3-ink2); }
.v3-page .kt-age { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.v3-page .kt-age .ad { width: 8px; height: 8px; border-radius: 50%; }
.v3-page .kt-assign { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--v3-ink2); font-weight: 600; min-width: 0; }
.v3-page .kt-assign .aa { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; background: #2f6fe0; flex: none; }
.v3-page .kt-assign .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-page .kt-assign .un { color: var(--v3-ink3); font-style: italic; }
.v3-page .kt-stpill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.v3-page .kt-stpill .sd { width: 6px; height: 6px; border-radius: 50%; }
.v3-page .kt-sp-open { background: #e8effd; color: #1e56c8; } .v3-page .kt-sp-open .sd { background: #1e56c8; }
.v3-page .kt-sp-arbeit { background: #fdf3e2; color: #c07600; } .v3-page .kt-sp-arbeit .sd { background: #c07600; }
.v3-page .kt-sp-wait { background: #eef1f6; color: #5b6b84; } .v3-page .kt-sp-wait .sd { background: #8b98ad; }
.v3-page .kt-sp-todo { background: #fdeaec; color: #c93a4a; } .v3-page .kt-sp-todo .sd { background: #c93a4a; }
.v3-page .kt-sp-done { background: #e5f5ec; color: #178a50; } .v3-page .kt-sp-done .sd { background: #178a50; }

/* ═══════════════════════════════════════════════════════════════════════
   R2a — TICKET-DETAIL (Kopfzeile · Member-Karte · Rahmen; Port aus
   v2_kom_ticket_detail.html). Der funktionale Reply-/Verlauf-/Aktions-Kern
   (Paket 1/2/3) wird als bestehende Partials in diese Komposition eingebettet.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page .kd-back { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--v3-ink2); text-decoration: none; margin-bottom: 12px; }
.v3-page .kd-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .kd-back:hover { color: var(--v3-ink); }

.v3-page .kd-thead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.v3-page .kd-thead h1 { font-size: 20px; letter-spacing: -.3px; display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 800; }
.v3-page .kd-thead h1 .tn { color: var(--v3-ink3); font-weight: 700; }
.v3-page .kd-stchip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 4px 11px; }
.v3-page .kd-stchip .dt { width: 7px; height: 7px; border-radius: 50%; }
.v3-page .kd-st-open { background: #e8effd; color: #1e56c8; } .v3-page .kd-st-open .dt { background: #1e56c8; }
.v3-page .kd-st-arbeit { background: #fdf3e2; color: #c07600; } .v3-page .kd-st-arbeit .dt { background: #c07600; }
.v3-page .kd-st-wait { background: #eef1f6; color: #5b6b84; } .v3-page .kd-st-wait .dt { background: #8b98ad; }
.v3-page .kd-st-done { background: #e5f5ec; color: #178a50; } .v3-page .kd-st-done .dt { background: #178a50; }
.v3-page .kd-agechip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--v3-warn); background: #fdf3e2; border-radius: 99px; padding: 4px 11px; }
.v3-page .kd-agechip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .kd-assignpill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: var(--v3-ink2); background: #fff; border: 1px solid var(--v3-line); border-radius: 99px; padding: 3px 12px 3px 4px; box-shadow: var(--v3-shadow); }
.v3-page .kd-assignpill .aa { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 800; color: #fff; background: #2f6fe0; }
.v3-page .kd-hactions { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.v3-page .kd-hbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--v3-line); background: #fff; color: var(--v3-ink2); font-size: 13px; font-weight: 650; box-shadow: var(--v3-shadow); cursor: pointer; }
.v3-page .kd-hbtn:hover { background: #fafbfe; }
.v3-page .kd-hbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page .kd-hbtn.done { border: none; background: linear-gradient(135deg, #178a50, #1ea45e); color: #fff; box-shadow: 0 4px 12px -4px rgba(23,138,80,.5); }
.v3-page .kd-hbtn.done svg { stroke: #fff; }

/* Kompakte Bearbeiten-Leiste (Autosave-Selects → quick_update) */
.v3-page .kd-editbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.v3-page .kd-editsel { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: 10px; border: 1px solid var(--v3-line); background: #fff; color: var(--v3-ink2); font-size: 12px; font-weight: 650; box-shadow: var(--v3-shadow); }
.v3-page .kd-editsel .lbl { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--v3-ink3); font-weight: 800; }
.v3-page .kd-editsel select { border: 0; background: transparent; font-size: 12px; font-weight: 700; color: var(--v3-ink); font-family: inherit; outline: none; cursor: pointer; padding: 4px 2px; }

/* Layout-Raster */
.v3-page .kd-grid { display: grid; grid-template-columns: 1fr 364px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .v3-page .kd-grid { grid-template-columns: 1fr; } }
.v3-page .kd-left { display: flex; flex-direction: column; gap: 16px; }
.v3-page .kd-rail { display: flex; flex-direction: column; gap: 16px; }
.v3-page .kd-cardhd { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--v3-line); }
.v3-page .kd-cardhd h2 { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; margin: 0; }
.v3-page .kd-cardhd h2 svg { width: 16px; height: 16px; stroke: var(--v3-brand); fill: none; stroke-width: 2; }

/* Member-Karte */
.v3-page .kd-memhd { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--v3-line); }
.v3-page .kd-memhd .mav { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(140deg, #3f7ae6, #1e56c8); display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; flex: none; box-shadow: 0 3px 9px -3px rgba(30,86,200,.5); }
.v3-page .kd-memhd .mn { font-size: 15px; font-weight: 800; }
.v3-page .kd-memhd .mn a { color: inherit; text-decoration: none; }
.v3-page .kd-memhd .mr { font-size: 11.5px; color: var(--v3-ink3); margin-top: 2px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.v3-page .kd-memhd .mr .go { color: var(--v3-brand); font-weight: 800; }
.v3-page .kd-membody { padding: 13px 16px; display: flex; flex-direction: column; gap: 12px; }
.v3-page .kd-yrlbl { font-size: 10px; letter-spacing: 1px; color: var(--v3-ink3); font-weight: 800; text-transform: uppercase; margin-bottom: 4px; }
.v3-page .kd-yrs { display: flex; gap: 7px; }
.v3-page .kd-yr { flex: 1; border: 1px solid var(--v3-line); border-radius: 10px; padding: 7px 4px; text-align: center; background: #fbfcfe; }
.v3-page .kd-yr .yy { font-size: 11px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .kd-yr .ys { font-size: 10.5px; font-weight: 700; margin-top: 3px; display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
.v3-page .kd-yr .ys svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; }
.v3-page .kd-yr.ok { background: #eef8f1; border-color: #c9e9d5; } .v3-page .kd-yr.ok .ys { color: var(--v3-ok); }
.v3-page .kd-yr.open { background: #fdf2ea; border-color: #f2d9b8; } .v3-page .kd-yr.open .ys { color: var(--v3-warn); }
.v3-page .kd-yr.free { background: #f4f6f9; border-color: var(--v3-line); } .v3-page .kd-yr.free .ys { color: var(--v3-ink3); }
.v3-page .kd-yr .amt { font-size: 9.5px; color: var(--v3-ink3); margin-top: 2px; }
.v3-page .kd-yr .kd-over { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 700; color: #6d28d9; }
.v3-page .kd-lchips { display: flex; flex-direction: column; gap: 7px; }
.v3-page .kd-lchip { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 650; color: var(--v3-ink); border: 1px solid var(--v3-line); border-radius: 10px; padding: 8px 11px; background: #fff; text-decoration: none; }
.v3-page .kd-lchip:hover { background: #fafbfe; }
.v3-page .kd-lchip .li { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.v3-page .kd-lchip .li svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.v3-page .kd-lchip .lt { min-width: 0; }
.v3-page .kd-lchip .lt small { display: block; font-size: 10.5px; color: var(--v3-ink3); font-weight: 600; margin-top: 1px; }
.v3-page .kd-lchip .go { margin-left: auto; color: var(--v3-ink3); font-weight: 800; flex: none; }
.v3-page .kd-li-amb { background: #fdf3e2; color: #c07600; } .v3-page .kd-li-wa { background: #e5f5ec; color: #178a50; }
.v3-page .kd-li-ev { background: #f0edfd; color: #7c6cf0; } .v3-page .kd-li-rem { background: #e8effd; color: #1e56c8; }

/* Ticket-Historie */
.v3-page .kd-hist { padding: 14px 16px 6px; }
.v3-page .kd-histitem { position: relative; padding: 0 0 15px 22px; font-size: 12px; }
.v3-page .kd-histitem::before { content: ""; position: absolute; left: 4px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--v3-brand); }
.v3-page .kd-histitem::after { content: ""; position: absolute; left: 8px; top: 12px; bottom: -3px; width: 1px; background: var(--v3-line); }
.v3-page .kd-histitem:last-child::after { display: none; }
.v3-page .kd-histitem.grey::before { border-color: var(--v3-ink3); }
.v3-page .kd-histitem .hx { font-weight: 700; color: var(--v3-ink); }
.v3-page .kd-histitem .ht { color: var(--v3-ink3); font-size: 11px; margin-top: 1px; }

/* Eingebettete Bestands-Partials sollen den v3-Canvas nicht sprengen */
.v3-page .kd-embed { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   R1b — MITGLIEDER-PROFIL (members#show_v2; Zielbild-Ports v2_mit_profil*).
   4 Screens = 4 Tabs EINER Seite. Additiv, alles unter .v3-page.r1-prof.
   Farben/Maße 1:1 aus den freigegebenen Mockups (scratchpad/v2_mit_profil*.html).
   Tab-spezifische Styles je Panel gescoped (.pf-ueb/.pf-fin/.pf-dat/.pf-ver),
   damit gleichnamige Klassen (.timeline/.tli/.belong/.qgrid …) nicht kollidieren.
   ═══════════════════════════════════════════════════════════════════════ */
.r1-prof { --mail:#1e56c8; --wa:#178a50; --ticket:#c07600; --tick:#c07600; --event:#7c6cf0; --ev:#7c6cf0; --pay:#2563eb; --post:#0e7490; }
.r1-prof .num { font-variant-numeric:tabular-nums }

/* Breadcrumb */
.r1-prof .crumb { display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);font-weight:600;margin-bottom:14px;flex-wrap:wrap }
.r1-prof .crumb a { color:var(--brand);text-decoration:none }
.r1-prof .crumb svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2 }
/* ── MERGE-VERLIERER-BANNER (#857 W1) ──────────────────────────────────────
   Bauform der bestehenden `.dm-zustaende .banner`, aber eigener, auf .r1-prof
   gescopter Name: `.banner` ist dort seiten-lokal vergeben, und ein zweiter
   globaler `.banner` haette beide zerlegt (Lehre 17 — vor der Vergabe greppen;
   `.mrgband` war frei). Ton: sachlich-grau, kein Alarm — ein Merge ist kein
   Fehler, nur eine Auskunft, die bisher fehlte. */
.r1-prof .mrgband { display:flex;align-items:flex-start;gap:13px;margin-bottom:14px;
  border:1px solid var(--line);background:linear-gradient(180deg,#f7f9fc,#fff);border-radius:12px;padding:14px 16px }
.r1-prof .mrgband .ic { width:34px;height:34px;border-radius:10px;background:#f1f4f8;color:#5b6b84;display:grid;place-items:center;flex:none }
.r1-prof .mrgband .ic svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2 }
.r1-prof .mrgband b { font-size:13.5px;color:var(--ink) }
.r1-prof .mrgband p { font-size:12.5px;color:var(--ink2);margin-top:3px;max-width:620px }
.r1-prof .mrgband .bact { margin-left:auto;display:flex;gap:8px;flex:none;flex-wrap:wrap }
.r1-prof .mrgband .bbtn { border-radius:8px;padding:7px 12px;font-size:11.5px;font-weight:700;
  border:1px solid var(--line);background:#fff;color:var(--ink2);text-decoration:none;white-space:nowrap }
.r1-prof .mrgband .bbtn.pri { border-color:#c9d8f6;background:#e8effd;color:var(--brand) }

/* Karte */
.r1-prof .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow) }
.r1-prof .pad { padding:18px 20px }
.r1-prof h2.ct { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.r1-prof h2.ct svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.r1-prof h2.ct .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px }
.r1-prof h2.ct .more svg { width:13px;height:13px;stroke:var(--brand) }

/* ── PROFIL: Gestaltung aus dem Markup geholt (Rundgang Tag 3, 06.08.2026) ──
   BEFUND: Die Akte trug 29 `style=""`. Die aus Daten gerechneten (Balken-
   breiten) bleiben — Gestaltung gehoert in Klassen (Design-Referenz § 2).

   `.morelbl` ist dabei mehr als Kosmetik: Sechs Stellen sahen wie der
   „Mehr →"-Link aus, waren aber nur eine Beschriftung („SOLL / IST je Jahr").
   Sie standen deshalb mit `pointer-events:none` da — ein Element, das wie ein
   Weg aussieht und keiner ist, verstoesst gegen Q2 („jeder Knopf wirkt
   sichtbar"). Als eigene Klasse sieht man ihnen jetzt an, dass sie Text sind. */
.r1-prof h2.ct .morelbl {
  margin-left:auto;font-size:12.5px;color:var(--ink3);font-weight:600;
  display:inline-flex;align-items:center;gap:5px
}
.r1-prof h2.ct .morelbl svg { width:13px;height:13px;stroke:var(--ink3) }
/* Die zwei Tab-Wechsler im Kartenkopf sind echte Knoepfe (Stimulus) und
   muessen wie der Link daneben aussehen — bisher per style="" im Markup. */
.r1-prof h2.ct button.more { background:none;border:none;cursor:pointer;font:inherit }
.pf-ueb button.qbtn { text-align:left;cursor:pointer;font:inherit;width:100% }
/* Der Kopf-Textblock darf im Flex-Container schrumpfen (sonst reisst der Name
   die Karte am Handy auf). */
.r1-prof .herotop .hmain { min-width:0 }
/* Zahlenspalten stehen rechts. */
.r1-prof .r { text-align:right }
/* Abstufungen, die vorher als font-size im style="" standen. */
.r1-prof .dv.kompakt { font-size:12.5px }
.r1-prof .dv.klein { font-size:12px }
.r1-prof .vv.gross { font-size:14px }
.r1-prof .t-mut { color:var(--ink3) }
.r1-prof .t-mini { color:var(--ink3);font-size:11px }
.r1-prof .sm.sepa { color:var(--sepa);font-weight:700 }
.r1-prof .abstand-s { margin-top:7px }
.r1-prof .abstand-m { margin-top:10px }
.r1-prof .abstand-l { margin-top:12px }
.r1-prof .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.r1-prof .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }

/* HERO */
.r1-prof .hero { background:linear-gradient(135deg,#10304f 0%,#153a60 55%,#1b4a7c 100%);color:#fff;border:none;padding:24px 26px;position:relative;overflow:hidden;margin-bottom:16px }
.r1-prof .hero::after { content:'';position:absolute;right:-60px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.22),transparent 65%) }
.r1-prof .herotop { display:flex;align-items:flex-start;gap:20px;position:relative }
.r1-prof .bigav { width:82px;height:82px;border-radius:22px;background:linear-gradient(140deg,#3f7ae6,#1e56c8);display:grid;place-items:center;font-weight:800;font-size:30px;color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15);flex:none;object-fit:cover;overflow:hidden }
.r1-prof img.bigav { padding:0 }
.r1-prof .hname { font-size:26px;font-weight:800;letter-spacing:-.5px }
.r1-prof .hrole { font-size:13.5px;color:#bcd2e8;margin-top:3px }
/* Beruf im Kopf (27.08.2026): „wo jemand arbeitet" gehoert zur Identitaet und
   steht deshalb direkt unter dem Namen, ueber der Klassen-/Nummern-Zeile. */
.r1-prof .hjob { font-size:14px;font-weight:650;color:#e8f1fb;margin-top:5px }
.r1-prof .hchips { display:flex;gap:8px;margin-top:11px;flex-wrap:wrap }
.r1-prof .hchip { font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 11px;background:rgba(255,255,255,.15);color:#fff;display:inline-flex;align-items:center;gap:6px }
.r1-prof .hchip svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2 }
.r1-prof .hchip.grn { background:rgba(52,211,153,.24);color:#bbf7d0 }
.r1-prof .hchip.amb { background:rgba(245,158,11,.24);color:#fde68a }
.r1-prof .hchip.red { background:rgba(239,68,68,.26);color:#fecaca }
.r1-prof .hchip.vio { background:rgba(124,108,240,.28);color:#ddd6fe }
.r1-prof .hchip.eng { background:rgba(52,211,153,.2);color:#bbf7d0 }
.r1-prof .hchip.lnk { background:rgba(96,165,250,.22);color:#dbeafe }
/* ── DIE CHIP-ZUSAGE (Profil-W2c, 03.09.2026 · Audit R-18) ─────────────────
   Jeder Chip laeuft durch `members/_hchip` und traegt seinen Grund im
   `title`; wo eine MENGE dahintersteht, ist er ein Link oder ein
   Tab-Wechsel-Knopf. Beide muessen aussehen wie ein Chip — ein `button`
   bringt sonst Browser-Rahmen und eine fremde Schriftfamilie mit. */
.r1-prof a.hchip, .r1-prof button.hchip { text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:11.5px }
.r1-prof a.hchip:hover, .r1-prof button.hchip:hover { background:rgba(255,255,255,.3) }
.r1-prof a.hchip.amb:hover, .r1-prof button.hchip.amb:hover { background:rgba(245,158,11,.36) }
.r1-prof a.hchip.red:hover, .r1-prof button.hchip.red:hover { background:rgba(239,68,68,.38) }
.r1-prof a.hchip.vio:hover, .r1-prof button.hchip.vio:hover { background:rgba(124,108,240,.4) }
/* Sonderstatus im ersten Bild (Audit R-18, Umkehrung): das app-weite
   Badge-Bauteil `members/_sonderstatus_badges` zieht in die Kopfleiste ein.
   Es bringt seine eigenen (hellen) Toene mit — auf dem dunklen Kopf lesbar;
   der Wrapper reicht nur die Flex-Ausrichtung durch. Praefix `.hbadges` vor
   der Vergabe gegrept: 0 Treffer (Lehre 17). */
.r1-prof .hbadges { display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap }
/* ⚠️ Die zweite, gleichlautende `a.hchip/button.hchip`-Regel ist am 03.09.2026
   entfallen (Security-Review, Mini-Befund): zwei Regeln fuer dieselbe Sache
   sind zwei Meinungen — hier `border:0` gegen `border:none`, gleich in der
   Wirkung und verschieden im Wortlaut. Es gilt die Regel oben. */
.r1-prof .hactions { margin-left:auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end }
.r1-prof .hquick { display:flex;gap:7px;margin-bottom:2px }
.r1-prof .hqbtn { width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center }
.r1-prof .hqbtn svg { width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2 }
.r1-prof .hbtn { display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:9px 15px;font-weight:650;font-size:13px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.14);text-decoration:none;white-space:nowrap }
.r1-prof .hbtn svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-prof .hbtn.pri { background:#fff;color:var(--brand-deep);border:none }
.r1-prof .hcontact { display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#dbe7f4;position:relative;flex-wrap:wrap }
.r1-prof .hcontact .hc { display:flex;align-items:center;gap:9px }
.r1-prof .hcontact .hc svg { width:15px;height:15px;stroke:#9fc0e2;fill:none;stroke-width:2 }

/* TABS */
/* Die Sprungleiste KLEBT unter der Bereichs-Subnav (Form C, gemessen 03.09.:
   .s3-navwrap ist sticky top:0 und 76 px hoch — dieser top-Wert IST die
   Messung, kein Geschmack). z-index unter der Subnav (30). */
.r1-prof .tabs { display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:5px;box-shadow:var(--shadow);margin-bottom:16px;width:fit-content;max-width:100%;flex-wrap:wrap;position:sticky;top:76px;z-index:20 }
.r1-prof .tabs .tb { padding:9px 20px;border-radius:9px;font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:inherit }
.r1-prof .tabs .tb svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.r1-prof .tabs .tb.active { background:linear-gradient(135deg,#2f6fe0,#1e56c8);color:#fff }
.r1-prof .tabs .tb .cnt { font-size:11px;background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 7px;font-weight:700 }
.r1-prof .tabs .tb.active .cnt { background:rgba(255,255,255,.22);color:#fff }
.r1-prof .empty { color:var(--ink3);font-size:12.5px;padding:14px 4px;font-weight:600 }

/* ══ PROFIL-FORM C — EINE AKTE, ZWEI SPALTEN (Carsten-Entscheid F8, 03.09.2026) ══
   Vorlage: Variante C in `docs/mockups/2026-09-02-member-profil-redesign.html`.
   Aus fuenf Reitern (von denen vier `hidden` im HTML standen) sind fuenf
   Anker-Abschnitte geworden; `.r1-prof .panel.hidden` ist damit ersatzlos
   entfallen — es gibt kein Panel mehr, das versteckt wird.

   ⚠️ DAS ZWEISPALT-RASTER IST NICHT NEU. `.ev-zwei`/`.ev-links`/`.ev-rechts`
   sind das erprobte Bauteil der Event-Akte (§ 9e-4, Zeile ~11600) und werden
   hier ZITIERT, nicht kopiert — inklusive Bruchkante bei 1.240 px. Hier stehen
   nur die zwei Dinge, die dem Profil eigen sind: der Abstand der rechten
   Karten und die EINE begruendete Abweichung vom Bruchverhalten (siehe unten). */

/* ⚠️ DIE SPRUNGLEISTE KLEBT (NOCH) NICHT — und das ist gemessen, nicht
   vergessen: die Bereichs-Subnav dieser Seite (`.s3-navwrap.fin-subnav`) ist
   bereits `position:sticky; top:0; z-index:30` und steht IM `.v3-page`. Eine
   zweite klebende Leiste bei `top:0` verschwaende unter ihr; der richtige
   `top:`-Wert ist ihre HOEHE, und die ist ohne Browser nicht messbar
   (Lehre 10 — eine Grenze wird gemessen, nie behauptet). Der Leitstand misst
   sie beim Browser-Blick; bis dahin scrollt die Leiste mit, und der Weg
   zurueck nach oben bleibt der Anker in der Adresszeile.
   Der Anker-Abstand ist KEIN neuer Wert: die Abschnitts-Ueberschriften tragen
   zusaetzlich das app-weite `.ankerziel` (132 px, § 4). */
.r1-prof .ev-rechts { display:flex;flex-direction:column;gap:16px }
/* ⚠️ DIE EINE ABWEICHUNG VON § 9e-4 (bewusst, begruendet): unter dem Bruch
   faellt die Arbeitsspalte nach OBEN. In der Event-Akte ist die rechte Spalte
   eine Nachschlage-Liste und darf unter die Zahlen rutschen; hier ist sie die
   ARBEIT („Wartet auf einen Menschen") und gehoert ins erste Bild (§ 0 Nr. 1).
   Ueber dem Bruch aendert `order` nichts — beide Spalten stehen auf 0 und
   folgen der DOM-Reihenfolge. Drei Zeilen, kein zweites Raster. */
@media (max-width:1240px) {
  .r1-prof .ev-zwei > .ev-rechts { order:-1 }
}

/* Der Antwort-Satz haengt unten an der Kopfkarte (Konzept § 5.2). */
.r1-prof .hero.mit-antwort { margin-bottom:0;border-radius:var(--r) var(--r) 0 0 }
.r1-prof .pf-antwort { margin-bottom:16px;border-radius:0 0 var(--r) var(--r);border-top:none;
  padding:13px 20px;background:#fbfcfe }
.r1-prof .pf-antwort .pa-satz { font-size:14.5px;font-weight:650;color:var(--ink);
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;line-height:1.6 }
.r1-prof .pf-antwort .pa-lab { font-weight:650;color:var(--ink2) }
.r1-prof .pf-antwort .pa-tr { color:var(--ink3);font-weight:700 }
.r1-prof .pf-antwort .pa-weich { font-size:12.2px;color:var(--ink3);font-weight:600;margin-top:5px;line-height:1.55 }

/* „Wartet auf einen Menschen" — der Kopf der Arbeitsspalte.
   ⚠️ Praefix `.wm-` vor der Vergabe gegrept: 0 Treffer app-weit (Lehre 17). */
.r1-prof .wm-liste { display:flex;flex-direction:column;gap:10px;margin-top:13px }
.r1-prof .wm-zeile { display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fbfcfe }
.r1-prof .wm-t { font-size:12.8px;font-weight:700;color:var(--ink) }
.r1-prof .wm-g { grid-column:1/-1;font-size:11.4px;color:var(--ink3);font-weight:600;line-height:1.5 }
.r1-prof a.wm-btn { border:1px solid #c9d8f6;background:#e8effd;color:var(--brand);
  border-radius:8px;padding:5px 11px;font-size:11.6px;font-weight:700;text-decoration:none;white-space:nowrap }
.r1-prof a.wm-btn:hover { background:#dbe8fd }
.r1-prof .wm-sperre { font-size:11.2px;color:var(--ink3);font-weight:600;white-space:nowrap }
.r1-prof .wm-fuss { margin-top:11px;font-size:11.2px;color:var(--ink3);font-weight:600;line-height:1.5 }

/* ─────────── ABSCHNITT ÜBERBLICK (.pf-ueb) ─────────── */
/* ⚠️ `auto-fit` statt `repeat(4,1fr)`: die Leiste traegt seit Form C zwei
   Zellen (Mahn-Kaskade · Mitgliedschaft) — „Beitrag" ist im Antwort-Satz
   aufgegangen, „Erreichbarkeit" steht als eigene Karte (EINE Zelle) in der
   Arbeitsspalte. Eine feste Vierteilung liesse dort zwei leere Spalten stehen. */
.pf-ueb .statusbar { grid-column:span 12;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;padding:0;overflow:hidden }
.pf-ueb .stcell { padding:15px 20px;border-right:1px solid var(--line);display:flex;align-items:center;gap:13px }
.pf-ueb .stcell:last-child { border-right:none }
.pf-ueb .stic { width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none }
.pf-ueb .stic svg { width:20px;height:20px;fill:none;stroke-width:2 }
.pf-ueb .stcell .sl { font-size:11px;letter-spacing:.5px;color:var(--ink3);font-weight:700;text-transform:uppercase }
.pf-ueb .stcell .sv { font-size:17px;font-weight:800;letter-spacing:-.3px;margin-top:1px }
.pf-ueb .stcell .sm { font-size:11.5px;color:var(--ink3);font-weight:600 }
.pf-ueb .ic-amb { background:#fdf3e2;color:#c07600 } .pf-ueb .ic-red { background:#fdeaec;color:#c93a4a }
.pf-ueb .ic-blu { background:#e8effd;color:#1e56c8 } .pf-ueb .ic-grn { background:#e5f5ec;color:#178a50 }
.pf-ueb .tone-amb { color:#c07600 } .pf-ueb .tone-red { color:#c93a4a } .pf-ueb .tone-grn { color:#178a50 }
/* ⚠️ DIE BEITRAGS-AMPEL IST AM 03.09.2026 ERSATZLOS ENTFALLEN (Form C).
   Sie war der ZWILLING der Jahres-Karten `.pf-fin .ycards`: dieselben fuenf
   Jahre, dieselben Tueren, weniger Angaben — solange sie in verschiedenen
   Reitern standen, sah das niemand nebeneinander. Auf EINER Seite waeren es
   zwei Listen desselben Gegenstands, also zwei Meinungen (Lehre 8). Ihre zwei
   eigenen Teile leben weiter, beide im Abschnitt „Geld": die Fusszahl „Offene
   Forderungen gesamt" (dort MIT der besseren Tuer in die Forderungs-Akte —
   zwei gleich beschriftete Zahlen mit verschiedenen Tueren waren der eigentliche
   Befund) und der Vor-App-Vorbehalt (`shared/_vor_app_hinweis`).
   Entfallen sind damit: `.finmini`, `.ampel`, `.apt`, `.d-ok/.d-of/.d-mut`,
   `.finfoot` — app-weit gegrept, kein zweiter Traeger (Lehre 17). */
.pf-ueb .recent { grid-column:span 12;display:flex;flex-direction:column }
.pf-ueb .timeline { margin-top:14px;position:relative;padding-left:22px }
.pf-ueb .timeline::before { content:'';position:absolute;left:6px;top:4px;bottom:8px;width:2px;background:var(--line) }
.pf-ueb .tli { position:relative;padding:5px 0 15px;display:block;color:inherit;text-decoration:none }
/* Nur die Zeilen MIT Ziel reagieren — der Rest sieht bewusst aus wie Text. */
.pf-ueb a.tli:hover b { color:var(--brand, #1e56c8);text-decoration:underline }
.pf-ueb .tli:last-child { padding-bottom:2px }
.pf-ueb .tli .tdot { position:absolute;left:-22px;top:7px;width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line) }
.pf-ueb .td-mail { background:var(--mail) } .pf-ueb .td-wa { background:var(--wa) } .pf-ueb .td-ev { background:var(--event) } .pf-ueb .td-pay { background:var(--sepa) } .pf-ueb .td-tick { background:var(--ticket) } .pf-ueb .td-doc { background:var(--brand) } .pf-ueb .td-sys { background:var(--ink3) }
.pf-ueb .tli b { font-size:13.5px }
.pf-ueb .tli .tsrc { font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-left:8px }
.pf-ueb .tli .tm { font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:1px }
/* Form C: „Schnellaktionen" ist in die Arbeitsspalte gezogen, die Ampel ist
   entfallen — die zwei verbliebenen Karten der Reihe teilen sich die Breite. */
.pf-ueb .contact { grid-column:span 8;display:flex;flex-direction:column }
.pf-ueb .crow { display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px }
.pf-ueb .crow:last-child { border:none }
.pf-ueb .crow .ci { width:30px;height:30px;border-radius:9px;background:#f1f4f8;display:grid;place-items:center;flex:none }
.pf-ueb .crow .ci svg { width:15px;height:15px;stroke:var(--ink2);fill:none;stroke-width:2 }
.pf-ueb .crow .cv { font-weight:600;min-width:0 }
.pf-ueb .crow .cv small { display:block;color:var(--ink3);font-weight:500;font-size:11px }
.pf-ueb .deliv { margin-left:auto;font-size:10.5px;font-weight:700;border-radius:99px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap }
.pf-ueb .dl-ok { background:#e5f5ec;color:#178a50 } .pf-ueb .dl-warn { background:#fdf3e2;color:#c07600 }
.pf-ueb .deliv svg { width:10px;height:10px;fill:none;stroke-width:3 }
/* Der Unterschied „nimmt an" ≠ „kam an" (Profil-W2a): eine Ampel ist eine
   Fähigkeitsaussage, kein Zustellnachweis. */
.pf-ueb .ct-fuss { margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);font-size:11px;color:var(--ink3);font-weight:600 }
/* Zuletzt aktiv (Profil-W2d, 03.09.2026). Eigene Reihe: der Block bringt sein
   eigenes Bauteil mit (`shared/_zuletzt_aktiv` — Ampel, Badges, vier
   Aufklapper), und die drei bestehenden Reihen des Ueberblicks gehen exakt auf
   (12 / 5+7 / 4+4+4). Praefix `.zlaktiv` vor der Vergabe gegrept: 0 Treffer,
   und `.aktiv` bewusst NICHT genommen — ein so allgemeiner Klassenname waere
   die naechste Kollision (Lehre 17). `.v3-rows`, `.amp`, `.ab-badge` und der
   Aufklapper `.ddz` sind bereits `.v3-page`-global — hier kommt NUR der
   Abstand dazu, keine zweite Fassung des Bauteils. */
.pf-ueb .zlaktiv { grid-column:span 12 }
.pf-ueb .zlaktiv .zla-inhalt { margin-top:13px }
/* Beruf & Werdegang (27.08.2026). Volle Breite mit Absicht: die bestehenden
   Reihen des Ueberblicks gehen exakt auf (12 / 5+7 / 12 / 4+4+4) — eine
   vierte Karte zu 4 Spalten haette eine davon zerrissen und einen leeren
   Rest-Platz hinterlassen. Links die aktuelle Position, rechts der Werdegang. */
.pf-ueb .beruf { grid-column:span 12 }
.pf-ueb .brf-zeile { display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-top:13px }
.pf-ueb .brf-jetzt { flex:0 1 260px;min-width:0 }
.pf-ueb .brf-pos { font-size:16px;font-weight:750;letter-spacing:-.2px }
.pf-ueb .brf-firma { font-size:13px;color:var(--ink2);font-weight:600;margin-top:2px }
.pf-ueb .brf-weg { flex:1 1 340px;min-width:0 }
.pf-ueb .brf-quelle { margin-top:14px;padding-top:11px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink3);font-weight:600 }
/* Lebenszyklus-Band (Profil-W2a, 03.09.2026). Das Partial war vollstaendig
   `style=""`-inline gebaut — Verstoss gegen „Layout nie per style im Markup".
   Praefix `.lzb-` vor der Vergabe gegrept: 0 Treffer (Lehre 17). */
.pf-ueb .lifecycle-band { grid-column:span 12;padding:16px 18px }
.pf-ueb .lzb-kopf { display:flex;align-items:center;gap:9px;margin-bottom:4px;flex-wrap:wrap }
.pf-ueb .lzb-ic { width:16px;height:16px;stroke:#1e56c8;fill:none;stroke-width:2 }
.pf-ueb .lzb-titel { font-size:13.5px;font-weight:750;margin:0 }
.pf-ueb .lzb-chip { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:99px;padding:3px 10px;background:#e8effd;color:#1e56c8 }
.pf-ueb .lzb-warn { background:#fdf3e2;color:#c07600 }
.pf-ueb .lzb-vio { background:#f0edfd;color:#7c6cf0 }
.pf-ueb .lzb-ok { background:#e9f6ef;color:#178a50 }
.pf-ueb .lzb-sub { color:var(--ink3);font-size:12px;font-weight:500;margin-bottom:3px }
.pf-ueb .lzb-sub b { color:var(--ink) }
.pf-ueb .lzb-grund { color:var(--ink2);font-size:11.5px;font-weight:600;margin-bottom:12px }
.pf-ueb .lzb-band { display:flex;align-items:stretch;background:#fbfcfe;border:1px solid var(--line);border-radius:12px;padding:6px;overflow-x:auto }
.pf-ueb .lzb-step { flex:1 1 0;min-width:92px;padding:10px 12px;border-radius:9px;display:flex;flex-direction:column;gap:2px }
.pf-ueb .lzb-jahr { font-size:10px;font-weight:800;color:var(--ink3) }
.pf-ueb .lzb-label { font-size:12px;font-weight:700;color:var(--ink) }
.pf-ueb .lzb-fee { font-size:11px;font-weight:650;color:var(--ink2) }
.pf-ueb .lzb-s-done { opacity:.62 }
.pf-ueb .lzb-s-now { background:#1e56c8 }
.pf-ueb .lzb-s-now .lzb-jahr, .pf-ueb .lzb-s-now .lzb-fee { color:#cfe0ff }
.pf-ueb .lzb-s-now .lzb-label { color:#fff }
.pf-ueb .lzb-s-next { border:1.5px dashed #bcd3f7;background:#f3f7ff }
.pf-ueb .lzb-s-next .lzb-label { color:#1e56c8 }
.pf-ueb .lzb-pfeil { flex:0 0 16px;display:grid;place-items:center;color:#c3ccdb }
.pf-ueb .lzb-pfeil svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4 }
.pf-ueb .lzb-fuss { display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--ink2) }
.pf-ueb .lzb-fuss b { color:var(--ink) }
.pf-ueb .lzb-hinweis { font-size:11px;color:var(--ink3);margin-top:9px;font-style:italic }
/* Zugehoerigkeiten: Gruppen aus community_group_memberships, mit Rolle
   (Profil-W2a, Befund R-8). `.bt-lead` markiert die Leitung. */
.pf-ueb .bt-lead { color:#7c6cf0;border-color:#ddd6fe;background:#f7f5ff }
.pf-ueb .belong { grid-column:span 4 }
.pf-ueb .btags { display:flex;flex-wrap:wrap;gap:8px;margin-top:13px }
.pf-ueb .btag { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;border-radius:9px;padding:7px 12px;border:1px solid var(--line);background:#fbfcfe }
.pf-ueb .btag svg { width:14px;height:14px;fill:none;stroke-width:2 }
.pf-ueb .bt-chap { color:#1e56c8 } .pf-ueb .bt-ig { color:#0e8f8e } .pf-ueb .bt-role { color:#7c6cf0 } .pf-ueb .bt-tag { color:#c07600 }
.pf-ueb .quick { grid-column:span 4;display:flex;flex-direction:column }
.pf-ueb .qgrid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px }
.pf-ueb .qbtn { display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:#fbfcfe;font-size:12.5px;font-weight:650;color:var(--ink);text-decoration:none }
.pf-ueb .qbtn .qi { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none }
.pf-ueb .qbtn .qi svg { width:16px;height:16px;fill:none;stroke-width:2 }
.pf-ueb .qbtn.pri { grid-column:span 2;border:none;background:linear-gradient(135deg,#1e56c8,#2f6fe0);color:#fff;box-shadow:0 4px 12px -4px rgba(30,86,200,.55) }
.pf-ueb .qbtn.pri .qi { background:rgba(255,255,255,.2);color:#fff }
.pf-ueb .ic-blu2 { background:#e8effd;color:#1e56c8 } .pf-ueb .ic-grn2 { background:#e5f5ec;color:#178a50 } .pf-ueb .ic-amb2 { background:#fdf3e2;color:#c07600 } .pf-ueb .ic-vio2 { background:#f0edfd;color:#7c6cf0 }

/* ─────────── TAB FINANZEN (.pf-fin) ─────────── */
.pf-fin .of { grid-column:span 4;display:flex;flex-direction:column;background:linear-gradient(135deg,#3a1f28,#5a2733 60%,#7a2f3f);color:#fff;border:none }
.pf-fin .of.ok { background:linear-gradient(135deg,#123524,#155e3a 60%,#178a50) }
/* Dritter Zustand (11.08.2026): nichts offen, aber ein Beitragsjahr ist nicht
   belegbar (design-reference § 9b). Weder Alarm noch Entwarnung — die Karte
   sagt „0 €" ueber eine Menge, die sie nicht vollstaendig gesehen hat. */
.pf-fin .of.mut { background:linear-gradient(135deg,#26303d,#38445a 60%,#4b5b75) }
.pf-fin .of .lbl { font-size:11.5px;letter-spacing:1.4px;color:#f3b8bf;font-weight:700 }
.pf-fin .of.ok .lbl { color:#b6f0cf }
.pf-fin .of.mut .lbl { color:#c6d2e4 }
.pf-fin .of .big { font-size:38px;font-weight:800;letter-spacing:-1px;margin-top:4px }
/* Die grosse Zahl kommt seit dem 02.09.2026 aus `shared/_zahl` (:kennzahl) —
   sie behaelt Groesse und Farbe der dunklen Karte, bekommt aber Zaehlregel
   und Tuer. */
.pf-fin .of .zhl-kz .zhl-l { font-size:11.5px;letter-spacing:1.4px;font-weight:700;color:inherit;opacity:.9 }
.pf-fin .of .zhl-kz .zhl-i { border-color:rgba(255,255,255,.45);color:inherit }
.pf-fin .of .zhl-kz .zhl-w,
.pf-fin .of .zhl-kz a.zhl-w { font-size:38px;font-weight:800;letter-spacing:-1px;margin-top:2px;color:#fff;text-decoration-color:rgba(255,255,255,.5) }
.pf-fin .of .zhl-kz a.zhl-w:hover { color:#fff;text-decoration-color:#fff }
.pf-fin .of .zhl-kz .zhl-hl { color:inherit;opacity:.9;max-width:none }
.pf-fin .of .oyears { margin-top:14px;display:flex;flex-direction:column;gap:8px }
.pf-fin .of .oy { display:flex;align-items:center;gap:10px;font-size:13px }
.pf-fin .of .oy .track { flex:1;height:8px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden }
.pf-fin .of .oy .track i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#fca5a5,#f87171) }
.pf-fin .of .oy b { width:76px;text-align:right;font-weight:700 }
.pf-fin .of .oy span { width:44px;color:#f3b8bf;font-weight:700 }
.pf-fin .of .reminfo { margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);font-size:12.5px;color:#f7d4d9 }
.pf-fin .of.ok .reminfo { color:#cdeede;border-top-color:rgba(255,255,255,.14) }
.pf-fin .of .reminfo b { color:#fff }
.pf-fin .years { grid-column:span 8 }
.pf-fin .ycards { display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px }
/* Das ZAHLENPAAR aus Carsten-Entscheid F4 (02.09.2026): zwei Fragen
   nebeneinander, gleichrangig — kein „davon", keine Steigerung. */
.pf-fin .zahlpaar { display:flex;gap:34px;flex-wrap:wrap;margin:12px 0 4px;
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe }
.pf-fin .ycard { border:1px solid var(--line);border-radius:13px;padding:13px 12px;background:#fbfcfe;position:relative;text-decoration:none;color:inherit;display:block }
.pf-fin .ycard.now { border-color:#bcd3f7;background:#eef4fe }
.pf-fin .yhead { display:flex;align-items:center;justify-content:space-between }
.pf-fin .yhead .yr { font-size:15px;font-weight:800 }
.pf-fin .ybadge { width:20px;height:20px;border-radius:50%;display:grid;place-items:center }
.pf-fin .ybadge svg { width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3 }
.pf-fin .yb-ok { background:#22c55e } .pf-fin .yb-of { background:#f59e0b } .pf-fin .yb-mut { background:#cbd5e1 }
.pf-fin .yrow { display:flex;justify-content:space-between;font-size:12px;margin-top:9px;color:var(--ink3) }
.pf-fin .yrow b { color:var(--ink);font-weight:700 }
.pf-fin .ystat { margin-top:9px;font-size:11.5px;font-weight:700;border-radius:7px;padding:4px 8px;text-align:center }
.pf-fin .ystat.ok { background:#e5f5ec;color:#178a50 } .pf-fin .ystat.of { background:#fdf3e2;color:#c07600 } .pf-fin .ystat.mut { background:#f1f4f8;color:#8b98ad } .pf-fin .ystat.part { background:#fef4e6;color:#c07600 }
.pf-fin .ychan { margin-top:7px;text-align:center;font-size:10.5px;color:var(--ink3);font-weight:600 }
.pf-fin .pays { grid-column:span 7 }
.pf-fin .paytab { width:100%;border-collapse:collapse;font-size:13px;margin-top:6px }
.pf-fin .paytab th { font-size:10.5px;letter-spacing:.6px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line) }
.pf-fin .paytab td { padding:10px 8px;border-bottom:1px solid #eef1f6 }
.pf-fin .paytab tr:last-child td { border:none }
.pf-fin .kch { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:7px;padding:3px 9px;color:#fff }
.pf-fin .kch svg { width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.2 }
.pf-fin .k-sepa { background:var(--sepa) } .pf-fin .k-ueb { background:var(--ueb) } .pf-fin .k-pp { background:var(--paypal) } .pf-fin .k-str { background:var(--stripe) } .pf-fin .k-htr { background:#0e7490 } .pf-fin .k-oth { background:#64748b }
.pf-fin .paytab .amt { text-align:right;font-weight:700 }
.pf-fin .paytab .rstat { font-size:11px;font-weight:700;color:var(--ink3) }
/* #771 W3 (Ergaenzung F) — Rueckwaerts-Weg in den Transaktions-Arbeitsplatz.
   Erscheint nur, wenn dort fuer diese Person wirklich etwas liegt. */
.pf-fin .paywege { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px }
.pf-fin .paywege-link { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:#fbfcfe }
.pf-fin .paywege-link:hover { border-color:#bcd3f7;background:#eef4fe }
.pf-fin .paywege-num { font-size:11px;font-weight:800;color:var(--brand);background:#e8effd;border:1px solid #bcd3f7;border-radius:999px;padding:1px 7px }
.pf-fin .paywege-frage { font-size:11px;color:var(--ink3);margin-top:6px;flex-basis:100% }
.pf-fin .bank { grid-column:span 5;display:flex;flex-direction:column }
.pf-fin .ibanbox { margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:14px;background:#fbfcfe }
.pf-fin .ibanbox .il { font-size:10.5px;letter-spacing:.6px;color:var(--ink3);font-weight:700 }
.pf-fin .ibanbox .iv { font-size:16px;font-weight:700;letter-spacing:.5px;margin-top:3px;font-variant-numeric:tabular-nums }
.pf-fin .ibanbox .imeta { display:flex;gap:20px;margin-top:11px;font-size:12px;color:var(--ink3) }
.pf-fin .ibanbox .imeta b { color:var(--ink);display:block;font-weight:700 }
/* Der Grund neben dem Zustand: wo „Einzug" nicht „Aktiv" sagt, steht hier,
   warum nicht (Profil-W2b, 03.09.2026) — die Auskunft verschwindet nie. */
.pf-fin .ibanbox .imeta .ihint { display:block;margin-top:2px;font-size:11px;line-height:1.35;color:var(--ink3);max-width:30ch }
.pf-fin .toggle { display:flex;align-items:center;gap:12px;margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px 14px }
.pf-fin .toggle .tt b { font-size:13px } .pf-fin .toggle .tt span { display:block;font-size:11.5px;color:var(--ink3) }
.pf-fin .sw { margin-left:auto;width:42px;height:24px;border-radius:99px;background:#e6eaf1;position:relative;flex:none }
.pf-fin .sw i { position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2) }
.pf-fin .sw.on { background:#f59e0b } .pf-fin .sw.on i { left:21px }
.pf-fin .banknote { margin-top:12px;font-size:12px;color:var(--ink3);display:flex;gap:8px;align-items:flex-start }
.pf-fin .banknote svg { width:15px;height:15px;stroke:var(--warn);fill:none;stroke-width:2;flex:none;margin-top:1px }
.pf-fin .receipts { grid-column:span 12 }
.pf-fin .rtab { width:100%;border-collapse:collapse;font-size:13px;margin-top:8px }
.pf-fin .rtab th { font-size:10.5px;letter-spacing:.6px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 12px;border-bottom:1px solid var(--line) }
.pf-fin .rtab td { padding:11px 12px;border-bottom:1px solid #eef1f6 }
.pf-fin .rtab tr:last-child td { border:none }
.pf-fin .rtab .dr { font-weight:700;color:var(--brand) }
.pf-fin .rbadge { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 11px }
.pf-fin .rb-sent { background:#e5f5ec;color:#178a50 } .pf-fin .rb-issued { background:#e8effd;color:#1e56c8 } .pf-fin .rb-void { background:#f1f4f8;color:#8b98ad }
.pf-fin .dl { display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-weight:650;font-size:12.5px;text-decoration:none }
.pf-fin .dl svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.pf-fin .admintools { grid-column:span 12;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow) }
.pf-fin .admintools > summary { list-style:none;cursor:pointer;padding:14px 20px;font-size:13.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:9px }
.pf-fin .admintools > summary::-webkit-details-marker { display:none }
.pf-fin .admintools > summary svg { width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2 }
.pf-fin .admintools[open] > summary { border-bottom:1px solid var(--line) }
.pf-fin .admintools .inner { padding:16px 20px }

/* ─────────── TAB DATEN (.pf-dat) ─────────── */
.pf-dat .colspan6 { grid-column:span 6 } .pf-dat .colspan4 { grid-column:span 4 } .pf-dat .colspan8 { grid-column:span 8 } .pf-dat .colspan12 { grid-column:span 12 }
.pf-dat .drows { margin-top:12px;display:flex;flex-direction:column }
.pf-dat .drow { display:flex;align-items:flex-start;gap:12px;padding:11px 2px;border-bottom:1px dashed var(--line) }
.pf-dat .drow:last-child { border-bottom:none }
.pf-dat .drow .dk { width:128px;flex:none;font-size:12px;color:var(--ink3);font-weight:600;padding-top:1px }
.pf-dat .drow .dv { flex:1;font-size:13.5px;font-weight:600;min-width:0 }
.pf-dat .drow .dv small { display:block;font-size:11.5px;color:var(--ink3);font-weight:500;margin-top:2px }
.pf-dat .src { display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:1px }
.pf-dat .src svg { width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4 }
.pf-dat .src-hb { background:#e8effd;color:#1e56c8 } .pf-dat .src-app { background:#f1f4f8;color:#5b6b84 } .pf-dat .src-tick { background:#fdf3e2;color:#c07600 } .pf-dat .src-fin { background:#e0f2f6;color:#0e7490 }
.pf-dat .badge { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:99px;padding:2px 9px }
.pf-dat .bg-ok { background:#e5f5ec;color:#178a50 } .pf-dat .bg-warn { background:#fdf3e2;color:#c07600 } .pf-dat .bg-info { background:#e8effd;color:#1e56c8 } .pf-dat .bg-mut { background:#f1f4f8;color:#8b98ad }
.pf-dat .badge svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6 }
.pf-dat .syncmeta { display:flex;gap:9px;align-items:center;margin-top:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe }
.pf-dat .syncmeta .sd { width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15);flex:none }
/* GRAU SCHLAEGT GRUEN (#857 W1, Lehre 11): der Punkt stand fest auf gruen —
   auch bei einem Profil, das nie exportiert wurde oder gar keine
   HiveBrite-Verknuepfung hat. Die Lage kommt jetzt aus Members::SyncStand#ampel. */
.pf-dat .syncmeta-grau .sd { background:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.18) }
.pf-dat .syncmeta-warn .sd { background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.pf-dat .syncmeta b { font-size:13px } .pf-dat .syncmeta span { font-size:11.5px;color:var(--ink3) }
.pf-dat .syncmeta > div { min-width:0 }
.pf-dat .syncmeta time { margin-left:auto;font-size:11.5px;color:var(--ink3);font-weight:600 }
.pf-dat .qgrid { display:flex;flex-direction:column;gap:8px;margin-top:12px }
.pf-dat .qrow { display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:#fbfcfe;font-size:13px;font-weight:600 }
.pf-dat .qrow .qd { width:10px;height:10px;border-radius:50%;flex:none }
.pf-dat .qd-ok { background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.pf-dat .qd-warn { background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.pf-dat .qd-bad { background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15) }
.pf-dat .qrow .qs { margin-left:auto;font-size:11px;font-weight:700;color:var(--ink3) }
.pf-dat .qhead { display:flex;align-items:baseline;gap:10px;margin-top:12px }
.pf-dat .qhead .score { font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--ok) }
.pf-dat .qhead .scl { font-size:12px;color:var(--ink3);font-weight:600 }
.pf-dat .qbar { height:9px;border-radius:99px;background:#eef1f6;overflow:hidden;margin-top:8px }
.pf-dat .qbar i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#178a50) }
.pf-dat .htab { width:100%;border-collapse:collapse;font-size:13px;margin-top:8px }
.pf-dat .htab th { font-size:10.5px;letter-spacing:.6px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 10px;border-bottom:1px solid var(--line) }
.pf-dat .htab td { padding:11px 10px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.pf-dat .htab tr:last-child td { border:none }
.pf-dat .who { display:inline-flex;align-items:center;gap:8px;font-weight:700 }
.pf-dat .who .wa { width:24px;height:24px;border-radius:50%;background:#2f6fe0;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none }
.pf-dat .who .wa.sys { background:#5b6b84 }
.pf-dat .chg { font-size:12.5px } .pf-dat .chg .old { color:var(--ink3);text-decoration:line-through } .pf-dat .chg .arr { color:var(--ink3);margin:0 5px } .pf-dat .chg .new { color:var(--ink);font-weight:700 }
.pf-dat .tref { color:var(--brand);font-weight:700;font-size:12px;text-decoration:none }
/* Ein Tab-Wechsel ist eine Tuer, aber kein Link — der Knopf muss aussehen wie
   der Verweis daneben (WHU-Karte, Profil-W2c). */
.pf-dat button.tref { background:none;border:0;padding:0;cursor:pointer;font-family:inherit }
.pf-dat button.tref:hover { text-decoration:underline }
/* Drei „Vollstaendigkeiten", jede sagt jetzt, WELCHE sie ist (Audit R-19). */
.pf-dat .qfuss { margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);font-size:11px;color:var(--ink3);font-weight:600;line-height:1.5 }
.pf-dat .qfuss b { color:var(--ink2) }

/* ─────────── TAB VERLAUF (.pf-ver) ─────────── */
/* ⚠️ ERSATZLOS ENTFALLEN (Verlauf-W1, 27.08.2026): .flt / .srcchip* / .sc-*
   — die Quellen-Filterleiste des Verlaufs-Tabs. Sie zaehlte SECHS Quellen
   nebeneinander (Mail, WhatsApp, Tickets, Zahlungen, Events, Quittungen)
   und mischte damit beide Achsen in EINE Chip-Reihe; ausserdem filterte
   kein einziger dieser Chips (reine Anzeige mit Filter-Gestalt). An ihre
   Stelle tritt der Achsen-Kopf `.kv-achsen`. grep-Beweis vor dem Loeschen:
   `.srcchip` steht sonst nur in `community/r6/teilnehmer` (ausserhalb
   `.pf-ver`, also nie von diesen Regeln getroffen), `.flt`/`.sc-*` nirgends. */
.pf-ver .yseg { margin-left:auto;display:flex;background:#eef1f6;border-radius:9px;padding:3px;font-size:12.5px;font-weight:600;color:var(--ink2) }
.pf-ver .yseg a { padding:5px 14px;border-radius:7px;text-decoration:none;color:inherit }
.pf-ver .yseg a.on { background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,35,58,.12) }
.pf-ver .timeline { grid-column:span 8 }
.pf-ver .tmonth { display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1.2px;color:var(--ink3);font-weight:700;text-transform:uppercase;margin:6px 0 4px }
.pf-ver .tmonth:not(:first-of-type) { margin-top:18px }
.pf-ver .tmonth::after { content:'';flex:1;height:1px;background:var(--line) }
.pf-ver .tmonth .mc { background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 9px;letter-spacing:.4px }
.pf-ver .trail { position:relative;padding-left:38px }
.pf-ver .trail::before { content:'';position:absolute;left:12px;top:6px;bottom:6px;width:2px;background:var(--line) }
.pf-ver .tli { position:relative;display:flex;align-items:flex-start;gap:12px;padding:11px 12px 11px 0;border-bottom:1px dashed var(--line) }
.pf-ver .tli:last-child { border-bottom:none }
/* Verlauf-W1: eine Zeile MIT Tuer ist ein echter Link — vorher sah jede Zeile
   klickbar aus und keine war es. `a.tli` erbt exakt dasselbe Raster; nur Farbe
   und Unterstreichung muessen zurueckgesetzt werden. */
.pf-ver a.tli { color:inherit;text-decoration:none }
.pf-ver a.tli:hover { background:#f7f9fd }
.pf-ver a.tli:hover .chev { stroke:var(--brand) }

/* ── ZWEI ACHSEN, GETRENNTE ZAHLEN (Verlauf-W1) ────────────────────────────
   Kontakte und Ereignisse stehen nebeneinander und werden NIE addiert. Die
   aktive Achse traegt ihre Kante unten — dieselbe Sprache wie die Reiter. */
.pf-ver .kv-achsen { grid-column:span 12;display:flex;padding:0;overflow:hidden }
/* Der Excel-Export (F6, 02.09.2026) — er hing bis dahin an einer Flaeche ohne
   Einstiegspunkt und steht jetzt dort, wo das Versprechen steht. */
.pf-ver .kv-export { grid-column:span 12;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:-4px 0 2px;font-size:12.5px;font-weight:700 }
.pf-ver .kv-export .kv-export-rgl { font-weight:500;color:var(--ink3);font-size:11.5px }
.pf-ver .kv-achse { flex:1;padding:12px 18px;text-decoration:none;color:inherit;display:block;
  position:relative;border-right:1px solid var(--line);background:#fbfcfe }
.pf-ver .kv-achse:last-child { border-right:0 }
.pf-ver .kv-achse .lab { display:block;font-size:10.4px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink3) }
.pf-ver .kv-achse .zahl { display:block;font-size:21px;font-weight:800;letter-spacing:-.4px;margin-top:2px }
.pf-ver .kv-achse .rgl { display:block;font-size:11.2px;color:var(--ink3);margin-top:3px;line-height:1.45 }
.pf-ver .kv-achse.on { background:#fff;box-shadow:inset 0 -2px 0 var(--brand) }
.pf-ver .kv-achse.on .lab { color:var(--brand) }
.pf-ver .kv-karte { grid-column:span 8 }
@media (max-width:1100px) {
  .pf-ver .kv-achsen { flex-direction:column }
  .pf-ver .kv-achse { border-right:0;border-bottom:1px solid var(--line) }
  .pf-ver .kv-karte { grid-column:span 12 }
}
.pf-ver .tdot { position:absolute;left:-38px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 4px #fff }
.pf-ver .tdot i { width:26px;height:26px;border-radius:50%;display:grid;place-items:center }
.pf-ver .tdot svg { width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2 }
.pf-ver .di-mail { background:var(--mail) } .pf-ver .di-wa { background:var(--wa) } .pf-ver .di-tick { background:var(--tick) } .pf-ver .di-pay { background:var(--pay) } .pf-ver .di-ev { background:var(--ev) } .pf-ver .di-post { background:var(--post) } .pf-ver .di-doc { background:var(--brand) } .pf-ver .di-sys { background:var(--ink3) }
.pf-ver .tbody { flex:1;min-width:0 }
.pf-ver .tbody .ttl { font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.pf-ver .tsrc { font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border-radius:5px;padding:2px 6px }
.pf-ver .ts-mail { background:#e8effd;color:var(--mail) } .pf-ver .ts-wa { background:#e5f5ec;color:var(--wa) } .pf-ver .ts-tick { background:#fdf3e2;color:var(--tick) } .pf-ver .ts-pay { background:#e8effd;color:var(--pay) } .pf-ver .ts-ev { background:#f0edfd;color:var(--ev) } .pf-ver .ts-post { background:#e0f2f6;color:var(--post) } .pf-ver .ts-doc { background:#e8effd;color:var(--brand) } .pf-ver .ts-sys { background:#f1f4f8;color:var(--ink3) }
.pf-ver .tdet { font-size:12px;color:var(--ink2);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap }
.pf-ver .tdet .pill { display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:11px }
.pf-ver .tdet .pill svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2 }
.pf-ver .tdet .g { color:var(--ok) } .pf-ver .tdet .r { color:var(--bad) } .pf-ver .tdet .b { color:var(--brand) } .pf-ver .tdet .m { color:var(--ink3) }
.pf-ver .tright { display:flex;align-items:center;gap:10px;flex:none;padding-top:1px }
.pf-ver .ttime { font-size:11.5px;color:var(--ink3);font-weight:600;text-align:right;white-space:nowrap }
.pf-ver .chev { width:16px;height:16px;stroke:var(--ink3);fill:none;stroke-width:2 }
.pf-ver .rcol { grid-column:span 4;display:flex;flex-direction:column;gap:16px }
.pf-ver .stat { display:flex;flex-direction:column;gap:12px;margin-top:14px }
.pf-ver .strow { display:flex;align-items:center;gap:12px }
.pf-ver .strow .ico { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none }
.pf-ver .strow .ico svg { width:16px;height:16px;fill:none;stroke-width:2 }
.pf-ver .strow .lb { font-size:12px;color:var(--ink3);font-weight:600 }
.pf-ver .strow .vv { margin-left:auto;font-size:18px;font-weight:800;letter-spacing:-.3px }
.pf-ver .c-blue { background:#e8effd;color:#1e56c8 } .pf-ver .c-grn { background:#e5f5ec;color:#178a50 } .pf-ver .c-amb { background:#fdf3e2;color:#c07600 } .pf-ver .c-vio { background:#f0edfd;color:#7c6cf0 }
.pf-ver .rate { margin-top:14px;padding-top:13px;border-top:1px solid var(--line) }
.pf-ver .rate .rl { display:flex;justify-content:space-between;font-size:12px;color:var(--ink3);font-weight:600;margin-bottom:6px }
.pf-ver .rate .rl b { color:var(--ink) }
/* Der Nenner der Oeffnungsrate steht sichtbar unter dem Balken (Audit R-9):
   eine Rate ohne Nenner ist eine Behauptung. */
.pf-ver .rate .rn { margin-top:6px;font-size:11px;color:var(--ink3);font-weight:600 }
.pf-ver .rate .rl .zhl { flex:1;justify-content:space-between;white-space:normal }
.pf-ver .rate .rl .zhl .zhl-w { color:var(--ink);font-weight:800;margin-left:auto }
.pf-ver .rbar { height:9px;border-radius:99px;background:#eef1f6;overflow:hidden }
.pf-ver .rbar i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#178a50) }
.pf-ver .belong { display:flex;flex-direction:column;gap:9px;margin-top:14px }
.pf-ver .brow { display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe }
.pf-ver .brow .bi { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none }
.pf-ver .brow .bi svg { width:15px;height:15px;fill:none;stroke-width:2 }
.pf-ver .brow .bt b { font-size:13px } .pf-ver .brow .bt span { display:block;font-size:11.5px;color:var(--ink3) }
.pf-ver .brow .bd { margin-left:auto;font-size:11px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:99px;padding:2px 9px }
.pf-ver .freq { margin-top:2px;display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:12px;background:#e5f5ec;border:1px solid #bfe3cd }
.pf-ver .freq.warn { background:#fdf3e2;border-color:#f0d9a8 }
.pf-ver .freq svg { width:18px;height:18px;stroke:var(--ok);fill:none;stroke-width:2;flex:none;margin-top:1px }
.pf-ver .freq.warn svg { stroke:var(--warn) }
.pf-ver .freq b { font-size:13px;color:#0f6b3d } .pf-ver .freq span { display:block;font-size:12px;color:#2f7a54;margin-top:2px }
.pf-ver .freq.warn b { color:#8a5a00 } .pf-ver .freq.warn span { color:#a06a10 }

/* Funktionen-Tab (bestehende Cluster im v3-Rahmen) */
.pf-more { display:flex;flex-direction:column;gap:16px }
.pf-more .tgrid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px }
.pf-more .danger-zone { display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid #f3c6cc;background:#fdf1f2;border-radius:var(--r);padding:14px 18px }
.pf-more .danger-zone .dz-t { font-weight:800;color:var(--bad);font-size:13.5px }
.pf-more .danger-zone .dz-s { font-size:12px;color:var(--ink3);font-weight:600 }
/* Der Loesch-Knopf steht rechts aussen — war ein style="" am Formular. */
.pf-more .danger-zone form { margin-left:auto }

/* Sonderstatus & Badges: Anzeige + Verwaltung der manuellen Badges
   (Aufraeum-Welle 03.08.2026 — portiert aus der geloeschten April-Fassung).
   Formularfelder kommen aus den globalen Bausteinen .v3-field/.v3-fieldgrid;
   hier liegen nur die Listen-/Abstands-Regeln, damit kein style="" im Markup
   noetig ist (Design-Referenz). */
.pf-more .badgecap { font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-top:14px }
.pf-more .badgecap:first-of-type { margin-top:12px }
.pf-more .badgewrap { display:flex;flex-wrap:wrap;gap:6px;margin-top:7px }
.pf-more .badgelist { list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:7px }
.pf-more .badgerow { display:flex;align-items:center;gap:8px;min-width:0 }
.pf-more .badgerow .bnote { font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.pf-more .badgedelform { margin-left:auto;flex:none }
.pf-more .badgedel { background:none;border:0;padding:2px 5px;line-height:1;font-size:16px;color:var(--ink3);cursor:pointer }
.pf-more .badgedel:hover { color:var(--bad) }
.pf-more .badgeform { margin-top:16px;padding-top:13px;border-top:1px solid var(--line) }
.pf-more .badgehint { font-size:11.5px;color:var(--ink3);margin-top:10px;line-height:1.5 }

@media (max-width:1100px) {
  .r1-prof .grid { grid-template-columns:1fr }
  .r1-prof .grid > * { grid-column:auto !important }
  /* ⚠️ Der frühere Zwang `1fr 1fr` ist am 03.09.2026 entfallen: die Leiste
     trägt seit Form C zwei Zellen, die Erreichbarkeits-Karte EINE — eine feste
     Zweiteilung hätte dort eine leere Spalte gelassen. `auto-fit` (Basisregel)
     macht daraus von selbst eine oder zwei Spalten. */
  .pf-fin .ycards { grid-template-columns:repeat(3,1fr) }
  .pf-more .tgrid { grid-template-columns:1fr }
}

/* ═══════════════════════════════════════════════════════════════════════
   R2b — KOMMUNIKATION REST (Kampagnen-Detail · Wellen/Dispatch-Detail ·
   Vorlagen · Kanäle · Attribution). Additive Komponenten, 1:1 aus den
   freigegebenen Mockups v2_kom_kampagne_detail / v2_welle_detail_mockup /
   v2_kom_vorlagen / v2_kom_kanaele / v2_kom_attribution. Alles unter
   `.v3-page` gescoped; nutzt die vorhandenen Tokens + eigene Kanalfarben.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page {
  --kc-mail: #1e56c8; --kc-wa: #178a50; --kc-ticket: #c07600;
  --kc-event: #6d5bd0; --kc-post: #0ea5a4; --kc-sepa: #c07600;
}
.v3-page .r2b-hpill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--v3-ok); background: #e5f5ec; border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
.v3-page .r2b-hpill .hd { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.v3-page .r2b-crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .r2b-crumb a { color: var(--v3-brand); text-decoration: none; }
.v3-page .r2b-crumb svg { width: 14px; height: 14px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; }
.v3-page .r2b-crumb .cur { color: var(--v3-ink2); }

/* ═══ 1) KAMPAGNEN-DETAIL (kcd-) ═══════════════════════════════════════ */
.v3-page .kcd-hero { background: linear-gradient(135deg, #2a2150 0%, #3a2f66 55%, #4c3f80 100%); color: #fff; border: none; position: relative; overflow: hidden; margin-bottom: 16px; display: flex; align-items: center; gap: 26px; border-radius: var(--v3-r); padding: 22px 26px; box-shadow: var(--v3-shadow); }
.v3-page .kcd-hero.reminder { background: linear-gradient(135deg, #10304f 0%, #153a60 55%, #1b4a7c 100%); }
.v3-page .kcd-hero::after { content: ''; position: absolute; right: -70px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(157,140,240,.30), transparent 65%); }
.v3-page .kcd-hero.reminder::after { background: radial-gradient(circle, rgba(96,165,250,.25), transparent 65%); }
.v3-page .kcd-hstate { position: relative; z-index: 1; }
.v3-page .kcd-evbadge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.14); border-radius: 99px; padding: 5px 13px; font-size: 12px; font-weight: 700; color: #e6e0ff; }
.v3-page .kcd-evbadge svg { width: 14px; height: 14px; stroke: #cbc0ff; stroke-width: 2; fill: none; flex: none; }
.v3-page .kcd-hero h1 { font-size: 25px; letter-spacing: -.5px; margin: 9px 0 4px; font-weight: 800; }
.v3-page .kcd-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .4px; background: rgba(52,211,153,.20); color: #8ff0c0; border-radius: 99px; padding: 3px 11px; }
.v3-page .kcd-hmeta { display: flex; gap: 22px; font-size: 12.5px; color: #c9c0ea; margin-top: 10px; flex-wrap: wrap; }
.v3-page .kcd-hmeta b { color: #fff; display: block; font-size: 14px; margin-top: 1px; }
.v3-page .kcd-count { margin-left: auto; text-align: center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.15); border-radius: 15px; padding: 16px 24px; position: relative; z-index: 1; flex: none; }
.v3-page .kcd-count .cd { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.v3-page .kcd-count .cl { font-size: 11px; color: #c9c0ea; font-weight: 600; letter-spacing: .5px; margin-top: 4px; }
.v3-page .kcd-count .cdate { font-size: 12px; color: #fff; font-weight: 700; margin-top: 8px; }

.v3-page .kcd-layout { display: grid; grid-template-columns: 1fr 400px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .v3-page .kcd-layout { grid-template-columns: 1fr; } }
.v3-page .kcd-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 18px 20px; }
.v3-page .kcd-card h2 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; margin: 0; }
.v3-page .kcd-card h2 svg { width: 17px; height: 17px; stroke: var(--v3-brand); fill: none; stroke-width: 2; flex: none; }
.v3-page .kcd-card h2 .more { margin-left: auto; font-size: 12.5px; color: var(--v3-brand); font-weight: 600; text-decoration: none; }
.v3-page .kcd-sub { color: var(--v3-ink3); font-size: 12px; margin-top: 2px; }

/* Stufen-Timeline */
.v3-page .kcd-tl { position: relative; padding-left: 6px; margin-top: 16px; }
.v3-page .kcd-tlrow { display: grid; grid-template-columns: 150px 1fr; gap: 18px; position: relative; padding-bottom: 20px; }
.v3-page .kcd-tlrow:last-child { padding-bottom: 0; }
.v3-page .kcd-tldate { text-align: right; padding-top: 16px; }
.v3-page .kcd-tldate .dd { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.v3-page .kcd-tldate .dm { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .kcd-tldate .badge { display: inline-flex; margin-top: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; border-radius: 6px; padding: 2px 7px; }
.v3-page .kcd-b-sent { background: #e5f5ec; color: #178a50; } .v3-page .kcd-b-plan { background: #eef1f6; color: var(--v3-ink2); }
.v3-page .kcd-tlmain { position: relative; padding-left: 34px; }
.v3-page .kcd-tlmain::before { content: ''; position: absolute; left: 9px; top: 26px; bottom: -20px; width: 2px; background: var(--v3-line); }
.v3-page .kcd-tlrow:last-child .kcd-tlmain::before { display: none; }
.v3-page .kcd-tldot { position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--v3-line); z-index: 1; }
.v3-page .kcd-tldot svg { width: 11px; height: 11px; stroke-width: 2.6; fill: none; }
.v3-page .kcd-tldot.done { background: #178a50; border-color: #178a50; } .v3-page .kcd-tldot.done svg { stroke: #fff; }
.v3-page .kcd-tldot.plan { background: #fff; border-color: #c3ccda; } .v3-page .kcd-tldot.plan i { width: 6px; height: 6px; border-radius: 50%; background: #c3ccda; }
.v3-page .kcd-stagebox { border: 1px solid var(--v3-line); border-radius: 13px; padding: 14px 16px; background: #fbfcfe; }
.v3-page .kcd-stagebox.done { background: #fff; }
.v3-page .kcd-sthead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v3-page .kcd-sttitle { font-size: 15px; font-weight: 700; }
.v3-page .kcd-chans { display: flex; gap: 5px; margin-left: 2px; }
.v3-page .kcd-chip-ch { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; }
.v3-page .kcd-chip-ch svg { width: 12px; height: 12px; stroke-width: 2; fill: none; }
.v3-page .kcd-ch-mail { background: #e8effd; } .v3-page .kcd-ch-mail svg { stroke: #1e56c8; }
.v3-page .kcd-ch-wa { background: #e5f5ec; } .v3-page .kcd-ch-wa svg { stroke: #178a50; }
.v3-page .kcd-stprev { margin-left: auto; color: var(--v3-brand); font-weight: 600; font-size: 12px; text-decoration: none; white-space: nowrap; }
.v3-page .kcd-strecv { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 9px 11px; background: #f6f8fb; border-radius: 9px; font-size: 12.5px; }
.v3-page .kcd-stagebox.done .kcd-strecv { background: #eef4fe; }
.v3-page .kcd-strecv .rl { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: var(--v3-ink3); }
.v3-page .kcd-strecv .seg { font-weight: 700; }
.v3-page .kcd-strecv .cnt { margin-left: auto; font-weight: 800; font-size: 15px; }
.v3-page .kcd-exclrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v3-page .kcd-exchip { font-size: 10.5px; font-weight: 700; color: var(--v3-ink2); background: #eef1f6; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.v3-page .kcd-exchip.bad { background: #fdeef0; color: #c0394a; }
.v3-page .kcd-stmetrics { display: flex; gap: 26px; margin-top: 12px; flex-wrap: wrap; }
.v3-page .kcd-metric { flex: 0 0 auto; min-width: 104px; }
.v3-page .kcd-metric .ml { font-size: 10.5px; color: var(--v3-ink3); font-weight: 700; letter-spacing: .3px; margin-bottom: 5px; }
.v3-page .kcd-metric .mv { display: flex; align-items: baseline; gap: 6px; }
.v3-page .kcd-metric .mv b { font-size: 17px; font-weight: 800; }
.v3-page .kcd-metric .mv span { font-size: 11px; color: var(--v3-ink3); }
.v3-page .kcd-metric .mbar { height: 6px; border-radius: 99px; background: #eef1f6; overflow: hidden; margin-top: 6px; }
.v3-page .kcd-metric .mbar i { display: block; height: 100%; border-radius: 99px; }
.v3-page .kcd-conv-inline { margin-left: auto; text-align: right; align-self: center; background: #f0edfd; border-radius: 11px; padding: 9px 14px; }
.v3-page .kcd-conv-inline b { font-size: 20px; font-weight: 800; color: #5b47c0; letter-spacing: -.5px; }
.v3-page .kcd-conv-inline span { display: block; font-size: 11px; color: #6d5bd0; font-weight: 600; }
.v3-page .kcd-stplannote { margin-top: 11px; font-size: 12px; color: var(--v3-ink3); }
.v3-page .kcd-gatebox { margin-top: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; background: #eef4fe; border: 1px dashed #aec7f2; border-radius: 11px; padding: 12px 14px; }
.v3-page .kcd-gatebox .gt b { font-size: 13px; font-weight: 700; display: block; color: var(--v3-ink); }
.v3-page .kcd-gatebox .gt span { font-size: 11.5px; color: var(--v3-ink2); }
.v3-page .kcd-gatebtn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, #1e56c8, #2f6fe0); color: #fff; font-weight: 700; font-size: 12.5px; border: none; border-radius: 9px; padding: 9px 16px; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(30,86,200,.55); cursor: pointer; text-decoration: none; }
.v3-page .kcd-gatebtn svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.2; fill: none; }

/* Rechte Spalte */
.v3-page .kcd-rcol { display: flex; flex-direction: column; gap: 16px; }
.v3-page .kcd-convbig { text-align: center; padding: 8px 0 4px; }
.v3-page .kcd-convbig .cn { font-size: 44px; font-weight: 800; letter-spacing: -1.5px; color: var(--kc-event); }
.v3-page .kcd-convbig .cl { font-size: 12px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .kcd-funnel { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.v3-page .kcd-frow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.v3-page .kcd-frow .fbar { height: 26px; max-width: 190px; border-radius: 8px; display: flex; align-items: center; padding: 0 10px; color: #fff; font-weight: 700; font-size: 12px; white-space: nowrap; flex: none; }
.v3-page .kcd-frow .fl { color: var(--v3-ink2); font-weight: 600; width: 96px; flex: none; white-space: nowrap; }
.v3-page .kcd-frow .fpct { margin-left: auto; color: var(--v3-ink3); font-weight: 700; font-size: 11.5px; white-space: nowrap; flex: none; }
.v3-page .kcd-tmpls { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; }
.v3-page .kcd-tmpl { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--v3-line); border-radius: 11px; background: #fbfcfe; text-decoration: none; color: inherit; }
.v3-page .kcd-tmpl:hover { background: #f2f5fb; }
.v3-page .kcd-tmpl .thumb { width: 34px; height: 42px; border-radius: 6px; flex: none; background: #fff; border: 1px solid var(--v3-line); padding: 4px; display: flex; flex-direction: column; gap: 2.5px; }
.v3-page .kcd-tmpl .thumb .tbar { height: 3px; border-radius: 2px; background: #dfe6f1; }
.v3-page .kcd-tmpl .thumb .tbar.h { background: #c3d3ee; }
.v3-page .kcd-tmpl .tt b { font-size: 13px; font-weight: 700; word-break: break-all; }
.v3-page .kcd-tmpl .tt .tm { font-size: 11px; color: var(--v3-ink3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.v3-page .kcd-catchip { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; border-radius: 5px; padding: 1.5px 6px; }
.v3-page .kcd-cc-mail { background: #e8effd; color: #1e56c8; } .v3-page .kcd-cc-wa { background: #e5f5ec; color: #178a50; }
.v3-page .kcd-tmpl .go { margin-left: auto; color: var(--v3-ink3); font-size: 16px; }
.v3-page .kcd-cap { margin-top: 14px; }
.v3-page .kcd-cap .caprow { display: flex; justify-content: space-between; font-size: 12px; color: var(--v3-ink2); font-weight: 600; margin-bottom: 6px; }
.v3-page .kcd-cap .captrack { height: 12px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.v3-page .kcd-cap .captrack i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8b7be0, #6d5bd0); }
.v3-page .kcd-emptybox { min-height: 120px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; border: 1px dashed var(--v3-line); border-radius: 12px; background: #fbfcfe; color: var(--v3-ink3); padding: 18px; }
.v3-page .kcd-emptybox svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: .55; }
.v3-page .kcd-emptybox span { font-size: 13px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .kcd-emptybox small { font-size: 11.5px; font-weight: 600; max-width: 300px; }

/* ═══ 2) WELLE / DISPATCH-DETAIL (wd-) ═════════════════════════════════ */
.v3-page .wd-crumbrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.v3-page .wd-back { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--v3-brand); background: #e8effd; border-radius: 99px; padding: 6px 14px; text-decoration: none; }
.v3-page .wd-back svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.v3-page .wd-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); }
.v3-page .wd-whead { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--v3-line); flex-wrap: wrap; }
.v3-page .wd-wnum { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(140deg, #2f6fe0, #1e56c8); color: #fff; display: grid; place-items: center; flex: none; }
.v3-page .wd-wnum svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
.v3-page .wd-whead h2 { font-size: 18px; letter-spacing: -.2px; margin: 0; font-weight: 800; }
.v3-page .wd-whead .sub { font-size: 12.5px; color: var(--v3-ink3); margin-top: 2px; font-weight: 500; }
.v3-page .wd-status { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.v3-page .wd-chip { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 5px 13px; }
.v3-page .wd-ch-grn { background: #e5f5ec; color: #178a50; } .v3-page .wd-ch-blu { background: #e8effd; color: #1e56c8; }
.v3-page .wd-ch-amb { background: #fdf3e2; color: #c07600; } .v3-page .wd-ch-gry { background: #eef1f6; color: var(--v3-ink2); }
.v3-page .wd-body { display: grid; grid-template-columns: 400px 1fr; gap: 0; }
@media (max-width: 1100px) { .v3-page .wd-body { grid-template-columns: 1fr; } }

/* Stufen-Timeline links (4-Schritt-Gate) */
.v3-page .wd-stages { padding: 20px 24px; border-right: 1px solid var(--v3-line); }
@media (max-width: 1100px) { .v3-page .wd-stages { border-right: none; border-bottom: 1px solid var(--v3-line); } }
.v3-page .wd-stages h3, .v3-page .wd-result h3 { font-size: 11.5px; letter-spacing: 1.3px; color: var(--v3-ink3); font-weight: 700; margin: 0 0 14px; }
.v3-page .wd-stage { display: flex; gap: 13px; position: relative; padding-bottom: 22px; }
.v3-page .wd-stage:not(:last-child)::before { content: ''; position: absolute; left: 14px; top: 34px; bottom: 2px; width: 2px; background: var(--v3-line); }
.v3-page .wd-sdot { width: 29px; height: 29px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; z-index: 1; }
.v3-page .wd-sdot svg { width: 14px; height: 14px; stroke-width: 2.6; fill: none; }
.v3-page .wd-sd-done { background: #e5f5ec; color: #178a50; box-shadow: inset 0 0 0 1.5px #9fd8b8; } .v3-page .wd-sd-done svg { stroke: #178a50; }
.v3-page .wd-sd-plan { background: #f1f4f8; color: #8b98ad; box-shadow: inset 0 0 0 1.5px #d6dde8; }
.v3-page .wd-stbody { flex: 1; min-width: 0; }
.v3-page .wd-stbody b { font-size: 13.5px; display: block; }
.v3-page .wd-stbody .m { font-size: 12px; color: var(--v3-ink3); margin-top: 3px; }
.v3-page .wd-stbody .ok { color: var(--v3-ok); font-weight: 700; }
.v3-page .wd-stact { margin-top: 9px; }
.v3-page .wd-stact form { margin: 0; }
.v3-page .wd-field { width: 100%; border: 1px solid var(--v3-line); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; font-family: inherit; color: var(--v3-ink); background: #fff; margin-bottom: 8px; }
.v3-page .wd-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--v3-line); background: #fff; color: var(--v3-ink2); border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; box-shadow: var(--v3-shadow); cursor: pointer; text-decoration: none; }
.v3-page .wd-btn:hover { background: #fafbfe; }
.v3-page .wd-btn.pri { background: linear-gradient(135deg, #1e56c8, #2f6fe0); color: #fff; border: none; box-shadow: 0 4px 12px -4px rgba(30,86,200,.55); }
.v3-page .wd-btn.go { background: linear-gradient(135deg, #178a50, #1ea45e); color: #fff; border: none; }
.v3-page .wd-btn.dis { background: #eef1f6; color: var(--v3-ink3); border: none; box-shadow: none; cursor: not-allowed; }
.v3-page .wd-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Ergebnis rechts (Gate-Status + Empfaenger-Breakdown) */
.v3-page .wd-result { padding: 20px 26px; }
.v3-page .wd-bigrow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.v3-page .wd-bigrow .v { font-size: 34px; font-weight: 800; letter-spacing: -1px; }
.v3-page .wd-bigrow .of { font-size: 14px; color: var(--v3-ink2); font-weight: 600; }
.v3-page .wd-bigrow .conv { margin-left: auto; text-align: right; }
.v3-page .wd-bigrow .conv b { font-size: 22px; }
.v3-page .wd-bigrow .conv b.ok { color: var(--v3-ok); } .v3-page .wd-bigrow .conv b.bad { color: var(--v3-bad); }
.v3-page .wd-bigrow .conv span { display: block; font-size: 11px; color: var(--v3-ink3); font-weight: 700; letter-spacing: .6px; }
.v3-page .wd-sumline { font-size: 13px; color: var(--v3-ink2); margin-top: 6px; }
.v3-page .wd-sumline b { color: var(--v3-ink); }
.v3-page .wd-gatepanel { margin-top: 16px; border-radius: 12px; padding: 13px 15px; font-size: 13px; font-weight: 650; }
.v3-page .wd-gatepanel.ok { background: #e5f5ec; border: 1px solid #bfe6cd; color: #14713f; }
.v3-page .wd-gatepanel.blocked { background: #fdeef0; border: 1px solid #f4cdd3; color: #b0333f; }
.v3-page .wd-dormant { margin-top: 14px; background: #fdf3e2; border: 1px solid #f2d9b8; border-radius: 12px; padding: 12px 15px; font-size: 12.5px; color: #8a5a00; font-weight: 600; }
.v3-page .wd-gatelist { margin-top: 14px; display: flex; flex-direction: column; }
.v3-page .wd-grow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed var(--v3-line); font-size: 13px; }
.v3-page .wd-grow:last-child { border-bottom: none; }
.v3-page .wd-gicon { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 13px; }
.v3-page .wd-gicon.ok { background: #e5f5ec; color: #178a50; } .v3-page .wd-gicon.no { background: #fdeef0; color: #c93a4a; }
.v3-page .wd-grow b { font-weight: 650; }
.v3-page .wd-grow .gstate { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.v3-page .wd-grow .gstate.ok { color: var(--v3-ok); } .v3-page .wd-grow .gstate.no { color: var(--v3-bad); }
.v3-page .wd-krows { margin-top: 18px; }
.v3-page .wd-khead { font-size: 11px; letter-spacing: 1px; color: var(--v3-ink3); font-weight: 800; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--v3-line); }
.v3-page .wd-krow { display: grid; grid-template-columns: 12px 1fr 90px; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px dashed var(--v3-line); font-size: 13px; }
.v3-page .wd-krow:last-child { border-bottom: none; }
.v3-page .wd-krow .sq { width: 11px; height: 11px; border-radius: 4px; }
.v3-page .wd-krow b { font-weight: 650; }
.v3-page .wd-krow .cnt { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.v3-page .wd-segline { margin-top: 16px; font-size: 12px; color: var(--v3-ink3); line-height: 1.6; }
.v3-page .wd-segline b { color: var(--v3-ink2); }
.v3-page .wd-foot { padding: 14px 26px; border-top: 1px solid var(--v3-line); display: flex; gap: 20px; font-size: 12.5px; color: var(--v3-ink2); align-items: center; flex-wrap: wrap; }
.v3-page .wd-foot b { color: var(--v3-ink); }
.v3-page .wd-foot .open { margin-left: auto; font-weight: 700; color: var(--v3-warn); }
.v3-page .wd-cockpit { margin-top: 16px; }

/* ═══ 3) VORLAGEN-BIBLIOTHEK (vt-) ═════════════════════════════════════ */
.v3-page .vt-filterbar { display: flex; align-items: center; gap: 22px; margin-bottom: 16px; background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: 14px; padding: 12px 16px; box-shadow: var(--v3-shadow); flex-wrap: wrap; }
.v3-page .vt-fgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-page .vt-fgroup .fl { font-size: 10.5px; font-weight: 800; letter-spacing: .7px; color: var(--v3-ink3); margin-right: 2px; }
.v3-page .vt-chip { border: 1px solid var(--v3-line); background: #fff; border-radius: 99px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; color: var(--v3-ink2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.v3-page .vt-chip:hover { background: #fafbfe; }
.v3-page .vt-chip.on { background: #e8effd; border-color: #bcd3f7; color: var(--v3-brand); }
.v3-page .vt-chip i { width: 8px; height: 8px; border-radius: 3px; }
.v3-page .vt-chip svg { width: 12px; height: 12px; stroke-width: 2; fill: none; }
.v3-page .vt-fsep { width: 1px; height: 26px; background: var(--v3-line); }
.v3-page .vt-fcount { margin-left: auto; font-size: 12.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .vt-fcount b { color: var(--v3-ink); }

.v3-page .vt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1200px) { .v3-page .vt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .v3-page .vt-grid { grid-template-columns: 1fr; } }
.v3-page .vt-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 14px; position: relative; display: flex; flex-direction: column; }
.v3-page .vt-thumb { border: 1px solid var(--v3-line); border-radius: 11px; overflow: hidden; background: #fbfcfe; }
.v3-page .vt-thumb .head { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 12px; color: #fff; font-size: 11px; font-weight: 700; }
.v3-page .vt-thumb .head svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; }
.v3-page .vt-thumb .tbody { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.v3-page .vt-thumb .ln { height: 6px; border-radius: 3px; background: #e6ebf3; }
.v3-page .vt-thumb .ln.t { width: 70%; height: 8px; background: #d3dcea; }
.v3-page .vt-thumb .cta { display: inline-block; height: 16px; width: 88px; border-radius: 5px; background: #c3d3ee; margin-top: 6px; }
.v3-page .vt-h-mail { background: linear-gradient(135deg, #1e56c8, #3a72e0); }
.v3-page .vt-h-wa { background: linear-gradient(135deg, #178a50, #22a866); }
.v3-page .vt-h-event { background: linear-gradient(135deg, #6d5bd0, #8574e0); }
.v3-page .vt-h-winback { background: linear-gradient(135deg, #c0504c, #d9635f); }
.v3-page .vt-h-stiftung { background: linear-gradient(135deg, #0e8f8e, #1aa8a6); }
.v3-page .vt-h-receipt { background: linear-gradient(135deg, #178a50, #22a866); }
.v3-page .vt-h-chargeback { background: linear-gradient(135deg, #c0504c, #d9635f); }
.v3-page .vt-h-generic { background: linear-gradient(135deg, #5b6b84, #7c89a0); }
.v3-page .vt-name { font-size: 14.5px; font-weight: 700; margin-top: 12px; display: flex; align-items: center; gap: 8px; word-break: break-all; }
.v3-page .vt-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.v3-page .vt-cat { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; border-radius: 5px; padding: 2px 7px; }
.v3-page .vt-cat-reminder { background: #e8effd; color: #1e56c8; } .v3-page .vt-cat-receipt { background: #e5f5ec; color: #178a50; }
.v3-page .vt-cat-campaign { background: #f0edfd; color: #6d5bd0; } .v3-page .vt-cat-winback { background: #fbe9e8; color: #c0504c; }
.v3-page .vt-cat-stiftung { background: #e2f6f5; color: #0e8f8e; } .v3-page .vt-cat-chargeback { background: #fbe9e8; color: #c0504c; }
.v3-page .vt-cat-generic { background: #f1f4f8; color: var(--v3-ink2); }
.v3-page .vt-kanal { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; border-radius: 5px; padding: 2px 7px; display: inline-flex; align-items: center; gap: 4px; }
.v3-page .vt-kanal svg { width: 10px; height: 10px; stroke-width: 2.2; fill: none; }
.v3-page .vt-k-mail { background: #eef2fb; color: #3357a8; } .v3-page .vt-k-mail svg { stroke: #3357a8; }
.v3-page .vt-k-wa { background: #e9f4ee; color: #178a50; } .v3-page .vt-k-wa svg { stroke: #178a50; }
.v3-page .vt-metarows { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--v3-line); display: flex; flex-direction: column; gap: 7px; }
.v3-page .vt-mrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--v3-ink2); }
.v3-page .vt-mrow svg { width: 13px; height: 13px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; flex: none; }
.v3-page .vt-mrow .used { color: var(--v3-brand); font-weight: 600; text-decoration: none; }
.v3-page .vt-mrow b { color: var(--v3-ink); }
.v3-page .vt-mrow .r { margin-left: auto; font-weight: 700; color: var(--v3-ink); }
.v3-page .vt-mrow .r.dim { color: var(--v3-ink3); font-weight: 600; }
.v3-page .vt-tfoot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--v3-line); }
.v3-page .vt-status { font-size: 9.5px; font-weight: 800; letter-spacing: .2px; border-radius: 6px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
.v3-page .vt-status .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.v3-page .vt-s-active { background: #e5f5ec; color: #178a50; } .v3-page .vt-s-active .dot { background: #178a50; }
.v3-page .vt-s-draft { background: #fdf3e2; color: #c07600; } .v3-page .vt-s-draft .dot { background: #c07600; }
.v3-page .vt-s-unused { background: #f1f4f8; color: var(--v3-ink3); } .v3-page .vt-s-unused .dot { background: #b6c0cf; }
.v3-page .vt-acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.v3-page .vt-preview { display: inline-flex; align-items: center; gap: 4px; color: var(--v3-ink2); font-weight: 600; font-size: 11.5px; text-decoration: none; white-space: nowrap; }
.v3-page .vt-preview svg { width: 13px; height: 13px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; flex: none; }
.v3-page .vt-editor { display: inline-flex; align-items: center; gap: 3px; color: var(--v3-brand); font-weight: 700; font-size: 11.5px; text-decoration: none; white-space: nowrap; }

/* ═══ 4) KANÄLE & POSTFÄCHER (kn-) ═════════════════════════════════════ */
.v3-page .kn-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .v3-page .kn-grid { grid-template-columns: 1fr; } .v3-page [class*="kn-col"] { grid-column: auto !important; } }
.v3-page .kn-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 18px 20px; }
.v3-page .kn-card h2 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; margin: 0; }
.v3-page .kn-card h2 svg { width: 17px; height: 17px; stroke: var(--v3-brand); fill: none; stroke-width: 2; flex: none; }
.v3-page .kn-card h2 .more { margin-left: auto; font-size: 12.5px; color: var(--v3-brand); font-weight: 600; text-decoration: none; }
.v3-page .kn-card h2 .hcount { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--v3-ok); background: #e5f5ec; border-radius: 99px; padding: 3px 11px; }
.v3-page .kn-card h2 .hcount.gray { color: var(--v3-ink2); background: #eef1f6; }
.v3-page .kn-sub { color: var(--v3-ink3); font-size: 12px; margin-top: 2px; }

.v3-page .kn-boxes { grid-column: span 8; }
.v3-page .kn-whats { grid-column: span 4; display: flex; flex-direction: column; }
.v3-page .kn-freq { grid-column: span 7; }
.v3-page .kn-send { grid-column: span 5; }
.v3-page .kn-deliver { grid-column: span 12; }

/* Postfächer */
.v3-page .kn-mblist { margin-top: 14px; display: flex; flex-direction: column; }
.v3-page .kn-mbrow { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px dashed var(--v3-line); }
.v3-page .kn-mbrow:last-child { border: none; }
.v3-page .kn-mbicon { width: 38px; height: 38px; border-radius: 11px; background: #eef2fb; display: grid; place-items: center; flex: none; }
.v3-page .kn-mbicon svg { width: 19px; height: 19px; stroke: #3357a8; fill: none; stroke-width: 2; }
.v3-page .kn-mbinfo { min-width: 0; flex: 1; }
.v3-page .kn-mbinfo .addr { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.v3-page .kn-mbinfo .addr .st { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); flex: none; }
.v3-page .kn-mbinfo .purp { font-size: 11.5px; color: var(--v3-ink3); margin-top: 2px; }
.v3-page .kn-mbstate { margin-left: auto; text-align: right; flex: none; }
.v3-page .kn-mbstate .connected { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--v3-ok); }
.v3-page .kn-mbstate .connected .d { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.v3-page .kn-mbstate .hint { display: block; font-size: 10px; color: var(--v3-ink3); font-weight: 600; margin-top: 3px; }
.v3-page .kn-boxfoot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v3-line); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--v3-ink3); }
.v3-page .kn-boxfoot svg { width: 14px; height: 14px; stroke: var(--v3-ok); fill: none; stroke-width: 2; flex: none; }

/* WhatsApp */
.v3-page .kn-wanum { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 14px; border: 1px solid var(--v3-line); border-radius: 13px; background: #e9f4ee; }
.v3-page .kn-wanum .wi { width: 40px; height: 40px; border-radius: 11px; background: #178a50; display: grid; place-items: center; flex: none; }
.v3-page .kn-wanum .wi svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 2; }
.v3-page .kn-wanum .wt b { font-size: 15px; font-weight: 800; letter-spacing: .2px; }
.v3-page .kn-wanum .wt span { display: block; font-size: 11px; color: #2f7d55; font-weight: 600; margin-top: 1px; }
.v3-page .kn-warows { margin-top: 13px; display: flex; flex-direction: column; gap: 2px; }
.v3-page .kn-warow { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-bottom: 1px dashed var(--v3-line); font-size: 12.5px; }
.v3-page .kn-warow:last-child { border: none; }
.v3-page .kn-warow .wl { color: var(--v3-ink2); font-weight: 600; }
.v3-page .kn-warow .wv { margin-left: auto; font-weight: 700; }
.v3-page .kn-warow .stok { display: inline-flex; align-items: center; gap: 6px; color: var(--v3-ok); font-weight: 700; margin-left: auto; }
.v3-page .kn-warow .stok .d { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.v3-page .kn-warow .stoff { display: inline-flex; align-items: center; gap: 6px; color: var(--v3-ink3); font-weight: 700; margin-left: auto; }
.v3-page .kn-warow .stoff .d { width: 8px; height: 8px; border-radius: 50%; background: #b6c0cf; }
.v3-page .kn-botrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--v3-line); border-radius: 13px; background: #fbfcfe; }
.v3-page .kn-botrow .bt b { font-size: 13.5px; font-weight: 700; }
.v3-page .kn-botrow .bt span { display: block; font-size: 11px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .kn-toggle { margin-left: auto; width: 46px; height: 26px; border-radius: 99px; background: #178a50; position: relative; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.v3-page .kn-toggle i { position: absolute; top: 3px; left: 23px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.v3-page .kn-toggle.off { background: #ccd4e0; } .v3-page .kn-toggle.off i { left: 3px; }

/* Frequenzschutz */
.v3-page .kn-frule { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 15px; border: 1px solid #bcd3f7; border-radius: 13px; background: #eef4fe; }
.v3-page .kn-frule .fi { width: 38px; height: 38px; border-radius: 11px; background: #1e56c8; display: grid; place-items: center; flex: none; }
.v3-page .kn-frule .fi svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.v3-page .kn-frule .ft { flex: 1; min-width: 0; }
.v3-page .kn-frule .ft b { font-size: 14px; font-weight: 800; }
.v3-page .kn-frule .ft span { display: block; font-size: 11.5px; color: var(--v3-ink2); margin-top: 1px; }
.v3-page .kn-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 16px; }
@media (max-width: 620px) { .v3-page .kn-gauges { grid-template-columns: 1fr; } }
.v3-page .kn-gauge .gl { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--v3-ink2); font-weight: 600; margin-bottom: 7px; }
.v3-page .kn-gauge .gl b { margin-left: auto; color: var(--v3-ink); font-size: 13px; }
.v3-page .kn-gtrack { height: 11px; border-radius: 99px; background: #eef1f6; overflow: hidden; }
.v3-page .kn-gtrack i { display: block; height: 100%; border-radius: 99px; }
.v3-page .kn-gauge .gh { font-size: 11px; color: var(--v3-ink3); margin-top: 6px; }

/* Signaturen / Absender */
.v3-page .kn-slist { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.v3-page .kn-srow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--v3-line); border-radius: 12px; background: #fbfcfe; }
.v3-page .kn-srow .sa { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; }
.v3-page .kn-srow .si { min-width: 0; flex: 1; }
.v3-page .kn-srow .si b { font-size: 13px; font-weight: 700; }
.v3-page .kn-srow .si span { display: block; font-size: 11px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .kn-srow .sdefault { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; background: #e8effd; color: #1e56c8; border-radius: 5px; padding: 2px 7px; flex: none; }
.v3-page .kn-srow .sedit { margin-left: auto; color: var(--v3-ink3); font-size: 16px; flex: none; }
.v3-page .kn-sigblock { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--v3-line); }
.v3-page .kn-sigblock .st { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--v3-ink3); margin-bottom: 10px; }

/* Zustellqualität */
.v3-page .kn-dqtable { margin-top: 14px; display: flex; flex-direction: column; }
.v3-page .kn-dqrow { display: grid; grid-template-columns: 260px 220px 140px 1fr 1fr; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px dashed var(--v3-line); }
@media (max-width: 1000px) { .v3-page .kn-dqrow { grid-template-columns: 1fr 1fr; } }
.v3-page .kn-dqrow:last-child { border: none; }
.v3-page .kn-dqrow.head { padding: 0 4px 9px; color: var(--v3-ink3); font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.v3-page .kn-dqch { display: flex; align-items: center; gap: 11px; }
.v3-page .kn-dqicon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.v3-page .kn-dqicon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.v3-page .kn-dqch b { font-size: 13.5px; font-weight: 700; display: block; }
.v3-page .kn-dqch span { font-size: 11px; color: var(--v3-ink3); }
.v3-page .kn-dqstat b { font-size: 14px; font-weight: 800; }
.v3-page .kn-dqstat b.dim { color: var(--v3-ink3); }
.v3-page .kn-dqstat span { display: block; font-size: 10px; color: var(--v3-ink3); font-weight: 600; margin-top: 2px; }
.v3-page .kn-dqfoot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v3-line); font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .kn-aufbau { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .3px; color: var(--v3-ink3); background: #eef1f6; border-radius: 6px; padding: 3px 8px; }

/* ═══ 5) KOMMUNIKATIONS-WIRKUNG / ATTRIBUTION (at-) ════════════════════ */
.v3-page .at-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .v3-page .at-kpis { grid-template-columns: repeat(2, 1fr); } }
.v3-page .at-kpi { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.v3-page .at-kpi .ki { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.v3-page .at-kpi .ki svg { width: 22px; height: 22px; fill: none; stroke-width: 2; stroke: currentColor; }
.v3-page .at-kpi .kl { font-size: 11px; letter-spacing: .4px; color: var(--v3-ink3); font-weight: 700; text-transform: uppercase; }
.v3-page .at-kpi .kv { font-size: 25px; font-weight: 800; letter-spacing: -.8px; margin-top: 1px; }
.v3-page .at-kpi .kv small { font-size: 14px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .at-kpi .kd { font-size: 11.5px; color: var(--v3-ink2); font-weight: 600; }
.v3-page .at-c-grn { background: #e5f5ec; color: #178a50; } .v3-page .at-c-blue { background: #e8effd; color: #1e56c8; }
.v3-page .at-c-amb { background: #fdf3e2; color: #c07600; } .v3-page .at-c-vio { background: #f0edfd; color: #7c6cf0; }

.v3-page .at-card { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 18px 20px; margin-bottom: 16px; }
.v3-page .at-card h2 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; margin: 0; }
.v3-page .at-card h2 svg { width: 17px; height: 17px; stroke: var(--v3-brand); fill: none; stroke-width: 2; flex: none; }
.v3-page .at-card h2 .more { margin-left: auto; font-size: 12.5px; color: var(--v3-brand); font-weight: 600; text-decoration: none; }
.v3-page .at-sub { color: var(--v3-ink3); font-size: 12px; margin-top: 2px; }
.v3-page .at-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.v3-page .at-table th { font-size: 10.5px; letter-spacing: .7px; color: var(--v3-ink3); text-align: left; font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--v3-line); }
.v3-page .at-table td { padding: 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.v3-page .at-table tr:last-child td { border-bottom: none; }
.v3-page .at-stage { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 13.5px; }
.v3-page .at-stage .no { width: 26px; height: 26px; border-radius: 8px; background: #e8effd; color: var(--v3-brand); display: grid; place-items: center; font-size: 12.5px; flex: none; }
.v3-page .at-stage small { display: block; font-weight: 500; color: var(--v3-ink3); font-size: 11px; margin-top: 1px; }
.v3-page .at-kanal { display: flex; gap: 5px; }
.v3-page .at-ch { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.v3-page .at-ch svg { width: 14px; height: 14px; stroke-width: 2; fill: none; }
.v3-page .at-ch-mail { background: #e8effd; } .v3-page .at-ch-mail svg { stroke: #1e56c8; }
.v3-page .at-ch-wa { background: #e5f5ec; } .v3-page .at-ch-wa svg { stroke: #178a50; }
.v3-page .at-stag { display: flex; flex-direction: column; gap: 5px; min-width: 196px; }
.v3-page .at-sgr { display: flex; align-items: center; gap: 9px; }
.v3-page .at-sgr .sl { font-size: 10px; color: var(--v3-ink3); font-weight: 700; width: 46px; }
.v3-page .at-sgr .sbar { width: 132px; height: 9px; background: #eef1f6; border-radius: 99px; overflow: hidden; }
.v3-page .at-sgr .sbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #5cc98d, #178a50); }
.v3-page .at-sgr .sbar i.blu { background: linear-gradient(90deg, #4f8bec, #1e56c8); }
.v3-page .at-sgr .sp { font-size: 11.5px; font-weight: 700; width: 44px; color: var(--v3-ink2); white-space: nowrap; }
.v3-page .at-num { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.v3-page .at-dim { color: var(--v3-ink3); }
.v3-page .at-wfoot { display: flex; align-items: center; gap: 9px; padding: 12px 12px 2px; font-size: 12px; color: var(--v3-ink3); font-weight: 600; flex-wrap: wrap; }
.v3-page .at-wfoot .pill2 { background: #e2f6f5; color: #0e8f8e; border-radius: 99px; padding: 3px 11px; font-weight: 700; }

.v3-page .at-kgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .v3-page .at-kgrid { grid-template-columns: repeat(2, 1fr); } }
.v3-page .at-kcard { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r); box-shadow: var(--v3-shadow); padding: 16px 18px; }
.v3-page .at-kcard .kh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.v3-page .at-kcard .kh .ci { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.v3-page .at-kcard .kh .ci svg { width: 18px; height: 18px; fill: none; stroke-width: 2; stroke: currentColor; }
.v3-page .at-kcard .kh b { font-size: 14.5px; font-weight: 750; }
.v3-page .at-kcard .kh span { display: block; font-size: 11px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .at-kmet { display: flex; flex-direction: column; gap: 8px; }
.v3-page .at-kmet .mr { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--v3-ink2); font-weight: 600; padding: 5px 0; border-bottom: 1px dashed var(--v3-line); }
.v3-page .at-kmet .mr:last-child { border: none; }
.v3-page .at-kmet .mr b { font-size: 14px; font-weight: 800; color: var(--v3-ink); }
.v3-page .at-kmet .mr b.g { color: var(--v3-ok); }
.v3-page .at-kmet .mr b.dim { color: var(--v3-ink3); font-weight: 700; }
.v3-page .at-kb-mail .ci { background: #e8effd; color: #1e56c8; } .v3-page .at-kb-wa .ci { background: #e5f5ec; color: #178a50; }
.v3-page .at-kb-post .ci { background: #e2f6f5; color: #0e8f8e; } .v3-page .at-kb-sepa .ci { background: #fdf3e2; color: #c07600; }
.v3-page .at-ichips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.v3-page .at-ic { flex: 1; min-width: 280px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--v3-line); border-radius: 13px; padding: 13px 15px; background: #fbfcfe; }
.v3-page .at-ic .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.v3-page .at-ic .ico svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke: currentColor; }
.v3-page .at-ic .it { font-size: 13px; font-weight: 650; color: var(--v3-ink); line-height: 1.4; }
.v3-page .at-ic .rec { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; font-weight: 800; border-radius: 99px; padding: 3px 10px; }
.v3-page .at-ico-keep { background: #e5f5ec; color: #178a50; } .v3-page .at-rec-keep { background: #e5f5ec; color: #178a50; }
.v3-page .at-ico-tune { background: #e8effd; color: #1e56c8; } .v3-page .at-rec-tune { background: #e8effd; color: #1e56c8; }
.v3-page .at-ico-info { background: #eef1f6; color: var(--v3-ink2); } .v3-page .at-rec-info { background: #eef1f6; color: var(--v3-ink2); }
.v3-page .at-insight h2 svg { stroke: #c07600; }
   R3 — HOME (Übersicht). Pixel-Port aus dem freigegebenen Mockup
   scratchpad/v2_home.html. ADDITIV, alles unter `.v3-page .home3`, damit die
   kurzen Mockup-Klassennamen (.card/.hero/.todo/.fw/…) keine Bestands-Seite
   berühren. Sidebar/Topbar kommen aus der App-Shell — hier nur der Content.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page .home3 {
  --canvas: #f4f6f9; --card: #fff; --line: #e6eaf1; --ink: #16233a; --ink2: #5b6b84; --ink3: #8b98ad;
  --brand: #1e56c8; --ok: #178a50; --warn: #c07600; --bad: #c93a4a;
  --sepa: #2563eb; --ueb: #0ea5a4; --paypal: #7c6cf0; --stripe: #b558d9;
  --r: 16px; --shadow: 0 1px 2px rgba(22,35,58,.05), 0 10px 28px -14px rgba(22,35,58,.14);
  color: var(--ink);
}
.v3-page .home3 .num { font-variant-numeric: tabular-nums; }

/* Banner-Slots (Wächter) */
.v3-page .home3 .home3-banner { margin-bottom: 14px; }

/* Kopfzeile */
.v3-page .home3 .home-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.v3-page .home3 .home-top h1 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.v3-page .home3 .home-top .ht-date { color: var(--ink3); font-weight: 500; font-size: 13px; margin-top: 3px; }
.v3-page .home3 .hpill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ok); background: #e5f5ec; border-radius: 99px; padding: 5px 13px; margin-left: auto; white-space: nowrap; }
.v3-page .home3 .hpill.warn { color: var(--warn); background: #fdf3e2; }
.v3-page .home3 .hpill .hd { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.v3-page .home3 .hpill.warn .hd { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

/* Raster + Karte */
.v3-page .home3 .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.v3-page .home3 .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px 20px; display: block; text-decoration: none; color: inherit; }
a.card { transition: box-shadow .15s, transform .15s; }
.v3-page .home3 a.card:hover { box-shadow: 0 1px 2px rgba(22,35,58,.05), 0 16px 34px -14px rgba(22,35,58,.22); }
.v3-page .home3 .card h2 { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; margin: 0; }
.v3-page .home3 .card h2 svg { width: 17px; height: 17px; stroke: var(--brand); fill: none; stroke-width: 2; flex: none; }
.v3-page .home3 .card h2 .more { margin-left: auto; font-size: 12.5px; color: var(--brand); font-weight: 600; text-decoration: none; }
.v3-page .home3 .card .sub { color: var(--ink3); font-size: 12px; margin-top: 2px; }
.v3-page .home3 .seg { display: flex; background: #eef1f6; border-radius: 9px; padding: 3px; font-size: 12px; font-weight: 600; color: var(--ink2); margin-left: auto; }
.v3-page .home3 .seg span { padding: 4px 12px; border-radius: 7px; }
.v3-page .home3 .seg .on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(22,35,58,.12); }

/* EQ HERO */
.v3-page .home3 .hero { grid-column: span 8; display: flex; flex-direction: column; background: linear-gradient(135deg, #10304f 0%, #153a60 55%, #1b4a7c 100%); color: #fff; border: none; position: relative; overflow: hidden; }
.v3-page .home3 .hero::after { content: ''; position: absolute; right: -70px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(96,165,250,.25), transparent 65%); }
.v3-page .home3 .hero .lbl { font-size: 12px; letter-spacing: 1.6px; color: #9fc0e2; font-weight: 700; }
.v3-page .home3 .hero .big { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.v3-page .home3 .hero .big .v { font-size: 46px; font-weight: 800; letter-spacing: -1.5px; }
.v3-page .home3 .hero .delta { background: rgba(52,211,153,.18); color: #6ee7b7; font-weight: 700; font-size: 12.5px; border-radius: 99px; padding: 4px 11px; }
.v3-page .home3 .hero .delta.neg { background: rgba(248,113,113,.15); color: #fca5a5; }
.v3-page .home3 .hero .spark { flex: 1; min-height: 84px; margin: 10px 0 4px; position: relative; }
.v3-page .home3 .hero .spark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3-page .home3 .hero .bar { height: 12px; border-radius: 99px; background: rgba(255,255,255,.14); margin: 16px 0 10px; position: relative; overflow: visible; }
.v3-page .home3 .hero .bar i { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, #34d399, #4ade80); }
.v3-page .home3 .hero .bar .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fbbf24; border-radius: 2px; }
.v3-page .home3 .hero .legend { display: flex; gap: 26px; padding-top: 14px; font-size: 13px; color: #bcd2e8; }
.v3-page .home3 .hero .legend > div { display: flex; flex-direction: column; }
.v3-page .home3 .hero .legend b { color: #fff; font-size: 16px; margin-top: 1px; }
.v3-page .home3 .hero .legend .vj { margin-left: auto; text-align: right; font-size: 12px; color: #8fb0d0; font-weight: 500; }

/* HEUTE ZU TUN */
.v3-page .home3 .todo { grid-column: span 4; }
.v3-page .home3 .todo ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.v3-page .home3 .todo .titem { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px dashed var(--line); text-decoration: none; color: inherit; }
.v3-page .home3 .todo .titem:last-child { border: none; }
.v3-page .home3 .todo .titem:hover b.n { color: var(--brand); }
.v3-page .home3 .todo .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.v3-page .home3 .todo .ic svg { width: 16px; height: 16px; fill: none; stroke-width: 2; }
.v3-page .home3 .todo .t { flex: 1; }
.v3-page .home3 .todo .t b { font-size: 13.5px; }
.v3-page .home3 .todo .t span { display: block; font-size: 11.5px; color: var(--ink3); }
.v3-page .home3 .todo .n { font-weight: 800; font-size: 15px; }
.v3-page .home3 .todo .go { color: var(--ink3); font-size: 16px; margin-left: 2px; }
.v3-page .home3 .c-blue { background: #e8effd; color: #1e56c8; } .v3-page .home3 .c-red { background: #fdeaec; color: #c93a4a; }
.v3-page .home3 .c-amb { background: #fdf3e2; color: #c07600; } .v3-page .home3 .c-grn { background: #e5f5ec; color: #178a50; } .v3-page .home3 .c-vio { background: #f0edfd; color: #7c6cf0; }

/* FINANZWOCHE */
.v3-page .home3 .fw { grid-column: span 8; }
.v3-page .home3 .fw .chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 16px; align-items: end; height: 150px; }
.v3-page .home3 .fw .day { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; border-radius: 8px; padding: 5px 9px 0; }
.v3-page .home3 .fw .day.today { background: linear-gradient(180deg, #eaf1fe, #f5f8ff); outline: 1.5px solid #bcd3f7; }
.v3-page .home3 .fw .stack { width: 100%; display: flex; flex-direction: column-reverse; border-radius: 6px; overflow: hidden; }
.v3-page .home3 .fw .stack i { display: block; width: 100%; }
.v3-page .home3 .fw .day .sum { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--ink2); margin-bottom: 5px; }
.v3-page .home3 .fw .xlab { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 7px; text-align: center; font-size: 11.5px; color: var(--ink3); font-weight: 600; }
.v3-page .home3 .fw .xlab .today { color: var(--brand); font-weight: 800; }
.v3-page .home3 .fw .rows { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.v3-page .home3 .fw .mrow { display: grid; grid-template-columns: 150px repeat(7, 1fr) 96px; gap: 12px; align-items: center; font-size: 12px; color: var(--ink2); }
.v3-page .home3 .fw .mrow .dots { display: flex; justify-content: center; }
.v3-page .home3 .dot { min-width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; padding: 0 4px; }
.v3-page .home3 .d-red { background: #fdeaec; color: #c93a4a; } .v3-page .home3 .d-grn { background: #e5f5ec; color: #178a50; }
.v3-page .home3 .d-amb { background: #fdf3e2; color: #c07600; } .v3-page .home3 .d-mut { background: #f1f4f8; color: #b6c0cf; }
.v3-page .home3 .fw .mrow .tot { text-align: right; font-weight: 700; color: var(--ink); }
.v3-page .home3 .leg { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px; color: var(--ink2); font-weight: 600; }
.v3-page .home3 .leg i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; }

/* MITGLIEDERWACHSTUM */
.v3-page .home3 .growth { grid-column: span 4; display: flex; flex-direction: column; }
.v3-page .home3 .growth .gnums { display: flex; gap: 20px; margin: 12px 0 6px; }
.v3-page .home3 .growth .gnums b { font-size: 22px; letter-spacing: -.5px; }
.v3-page .home3 .growth .gnums .up b { color: var(--ok); } .v3-page .home3 .growth .gnums .dn b { color: var(--bad); }
.v3-page .home3 .growth .gnums span { display: block; font-size: 11.5px; color: var(--ink3); font-weight: 600; }
.v3-page .home3 .growth .gchart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; flex: 1; min-height: 110px; align-items: center; margin-top: 8px; }
.v3-page .home3 .growth .gcol { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: center; gap: 2px; }
.v3-page .home3 .growth .gup { display: block; width: 70%; background: linear-gradient(180deg, #34d399, #178a50); border-radius: 5px 5px 2px 2px; }
.v3-page .home3 .growth .gdn { display: block; width: 70%; background: #f3b8bf; border-radius: 2px 2px 5px 5px; }
.v3-page .home3 .growth a.gup, .v3-page .home3 .growth a.gdn { cursor: pointer; transition: filter .12s; }
.v3-page .home3 .growth a.gup:hover, .v3-page .home3 .growth a.gdn:hover { filter: brightness(1.08) saturate(1.1); }
.v3-page .home3 .growth .gzero { width: 100%; height: 1px; background: var(--line); }
.v3-page .home3 .growth .net { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; font-size: 12.5px; color: var(--ink2); }
.v3-page .home3 .growth .net b { color: var(--ok); font-size: 15px; margin-left: auto; }

/* KOMMUNIKATIONSKALENDER */
.v3-page .home3 .cal { grid-column: span 12; }
.v3-page .home3 .cal .calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; margin-top: 13px; }
.v3-page .home3 .cal .cald { border: 1px solid var(--line); border-radius: 11px; padding: 9px 10px; min-height: 104px; background: #fbfcfe; }
.v3-page .home3 .cal .cald.today { background: #eef4fe; border-color: #bcd3f7; }
.v3-page .home3 .cal .cald .d { font-size: 11px; font-weight: 700; color: var(--ink3); margin-bottom: 7px; }
.v3-page .home3 .cal .cald.today .d { color: var(--brand); }
.v3-page .home3 .cal .ev { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 3.5px 7px; margin-bottom: 5px; line-height: 1.25; }
.v3-page .home3 .cal .e-camp { background: #e8effd; color: #1e56c8; } .v3-page .home3 .cal .e-rem { background: #fdf3e2; color: #c07600; }
.v3-page .home3 .cal .e-event { background: #f0edfd; color: #6d5bd0; } .v3-page .home3 .cal .e-post { background: #e5f5ec; color: #178a50; }

/* REMINDER-PIPELINE */
.v3-page .home3 .pipe { grid-column: span 12; }
.v3-page .home3 .pipe .pipehead { display: flex; align-items: center; gap: 22px; margin: 12px 0 12px; flex-wrap: wrap; }
.v3-page .home3 .kchip { display: flex; flex-direction: column; padding: 9px 16px; border-radius: 11px; background: #f6f8fb; border: 1px solid var(--line); }
.v3-page .home3 .kchip b { font-size: 17px; letter-spacing: -.3px; }
.v3-page .home3 .kchip span { font-size: 11px; color: var(--ink3); font-weight: 600; letter-spacing: .3px; }
.v3-page .home3 .kchip.hot b { color: var(--bad); }
.v3-page .home3 .pipe .filters { margin-left: auto; display: flex; gap: 7px; }
.v3-page .home3 .chip { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.v3-page .home3 .chip.on { background: #e8effd; border-color: #bcd3f7; color: var(--brand); }
.v3-page .home3 .tblwrap { overflow-x: auto; }
.v3-page .home3 table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-page .home3 th { font-size: 11px; letter-spacing: .8px; color: var(--ink3); text-align: left; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.v3-page .home3 td { padding: 11px 10px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.v3-page .home3 tr:last-child td { border: none; }
.v3-page .home3 .stage { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.v3-page .home3 .stage .no { width: 24px; height: 24px; border-radius: 8px; background: #e8effd; color: var(--brand); display: grid; place-items: center; font-size: 12px; flex: none; }
.v3-page .home3 .stage small { display: block; font-weight: 500; color: var(--ink3); font-size: 11px; }
.v3-page .home3 .ch { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; margin-right: 4px; }
.v3-page .home3 .ch svg { width: 13px; height: 13px; stroke-width: 2; fill: none; }
.v3-page .home3 .links a { color: var(--brand); font-weight: 600; font-size: 12px; text-decoration: none; margin-right: 10px; white-space: nowrap; }

/* PULS */
.v3-page .home3 .pulse { grid-column: span 5; }
.v3-page .home3 .pulse ul { list-style: none; margin: 12px 0 0; padding: 0; }
.v3-page .home3 .pulse li { display: flex; gap: 12px; padding: 8.5px 0; border-bottom: 1px dashed var(--line); align-items: flex-start; }
.v3-page .home3 .pulse li:last-child { border: none; }
.v3-page .home3 .pulse .pi { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.v3-page .home3 .pulse .pi svg { width: 14px; height: 14px; fill: none; stroke-width: 2; }
.v3-page .home3 .pulse p { font-size: 13px; flex: 1; margin: 0; } .v3-page .home3 .pulse p b { font-weight: 700; }
.v3-page .home3 .pulse time { font-size: 11px; color: var(--ink3); font-weight: 600; white-space: nowrap; padding-top: 2px; }
.v3-page .home3 .pulse .empty { padding: 26px 8px; text-align: center; color: var(--ink3); font-size: 13px; }

/* SYSTEMCHECK */
.v3-page .home3 .sys { grid-column: span 7; }
.v3-page .home3 .sys .syssum { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; font-size: 12px; font-weight: 700; color: var(--ok); background: #e5f5ec; border-radius: 99px; padding: 3px 11px; }
.v3-page .home3 .sysgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 12px; }
.v3-page .home3 .sysrow { display: flex; align-items: center; gap: 9px; padding: 7.5px 2px; overflow: hidden; white-space: nowrap; border-bottom: 1px dashed var(--line); font-size: 13px; }
.v3-page .home3 .sysrow .st { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.v3-page .home3 .st-ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.v3-page .home3 .st-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.v3-page .home3 .sysrow b { font-weight: 650; }
.v3-page .home3 .sysrow .tag { font-size: 10px; font-weight: 700; letter-spacing: .4px; color: var(--ink3); background: #f1f4f8; border-radius: 5px; padding: 2px 6px; }
.v3-page .home3 .sysrow time { margin-left: auto; font-size: 11.5px; color: var(--ink3); font-weight: 600; white-space: nowrap; }

/* Responsive: unter 1100px auf eine Spalte */
@media (max-width: 1100px) {
  .v3-page .home3 .grid > .card { grid-column: span 12 !important; }
}

/* EQ-Hero: Monatslabels unter der Sparkline */
.v3-page .home3 .hero .spark-x { position: absolute; left: 40px; right: 12px; bottom: -1px; display: flex; justify-content: space-between; font-size: 9.5px; color: #8fb0d0; font-weight: 600; pointer-events: none; }
.v3-page .home3 a.sysrow { text-decoration: none; color: inherit; cursor: pointer; }
.v3-page .home3 a.sysrow:hover b { color: var(--brand); }
/* ═══════════════════════════════════════════════════════════════════════
   R4 — FINANZBEREICH-ZIELBILD, REST-BESTAND. ADDITIV: alles unter `.fin-r4`
   bzw. `.fin-r4--quittungen` gescoped; Tokens 1:1 aus dem Mockup, Full-Bleed
   nach der .v3-page-Technik (Ausbruch aus dem .shell-content-Padding).

   Von den urspruenglich neun Seiten-Varianten rendert seit der Ehrlich-Welle
   (01.08.2026) nur noch EINE: `finanzen/r4/quittungen`. Die acht uebrigen
   Adressen sind 301-Weiterleitungen (config/routes.rb), ihre Views waren
   bereits geloescht — die CSS-Blöcke standen aber weiter hier.
   Am 03.08.2026 entkernt (Design-Einheitlichkeit Welle B, Design-Referenz §7
   Regel 7 „tote Klassen loeschen, wenn die letzte View sie loslaesst"):
   1.765 Zeilen weg. Davon waren 950 ein wortgleiches Duplikat des gesamten
   Blocks, das weiter unten ein zweites Mal im File stand.
   Wer eine der acht Varianten zurueckholen will, findet sie in der Historie
   von v3_design.css vor diesem Commit — nicht neu nachbauen.
   ═══════════════════════════════════════════════════════════════════════ */
.fin-r4 {
  --canvas: #f4f6f9; --card: #ffffff; --line: #e6eaf1; --line2: #eef1f6;
  --ink: #16233a; --ink2: #5b6b84; --ink3: #8b98ad;
  --brand: #1e56c8; --brand-deep: #0f2b46;
  --ok: #178a50; --warn: #c07600; --bad: #c93a4a;
  --sepa: #2563eb; --ueb: #0ea5a4; --paypal: #7c6cf0; --stripe: #b558d9;
  --r: 16px; --r-sm: 11px;
  --shadow: 0 1px 2px rgba(22,35,58,.05), 0 10px 28px -14px rgba(22,35,58,.14);

  margin: -24px calc(clamp(16px, 3vw, 32px) * -1);
  padding: 0;
  min-height: calc(100% + 48px);
  box-sizing: border-box;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.fin-r4 * { box-sizing: border-box; }
.fin-r4 .num { font-variant-numeric: tabular-nums; }

/* --- quittungen --- */
.fin-r4--quittungen .num { font-variant-numeric:tabular-nums }
.fin-r4--quittungen .main { padding:22px 28px 40px }
.fin-r4--quittungen .top { display:flex;align-items:center;gap:12px;margin-bottom:16px }
.fin-r4--quittungen .top h1 { font-size:21px;letter-spacing:-.3px }
.fin-r4--quittungen .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.fin-r4--quittungen .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:6px 12px;white-space:nowrap;flex:none }
.fin-r4--quittungen .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.fin-r4--quittungen .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:270px;box-shadow:var(--shadow);white-space:nowrap;overflow:hidden;flex:none }
.fin-r4--quittungen .search span { overflow:hidden;text-overflow:ellipsis }
.fin-r4--quittungen .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow);flex:none }
.fin-r4--quittungen .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.fin-r4--quittungen .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.fin-r4--quittungen .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700 }
.fin-r4--quittungen .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.fin-r4--quittungen .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.fin-r4--quittungen .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.fin-r4--quittungen .stat { grid-column:span 3;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden }
.fin-r4--quittungen .stat .si { width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:8px }
.fin-r4--quittungen .stat .si svg { width:20px;height:20px;fill:none;stroke-width:2 }
.fin-r4--quittungen .stat b { font-size:30px;letter-spacing:-1px }
.fin-r4--quittungen .stat .l { font-size:12.5px;color:var(--ink2);font-weight:650 }
.fin-r4--quittungen .stat .d { font-size:11.5px;color:var(--ink3);margin-top:2px }
.fin-r4--quittungen .c-blue { background:#e8effd;color:#1e56c8 }
.fin-r4--quittungen .c-red { background:#fdeaec;color:#c93a4a }
.fin-r4--quittungen .c-amb { background:#fdf3e2;color:#c07600 }
.fin-r4--quittungen .c-grn { background:#e5f5ec;color:#178a50 }
.fin-r4--quittungen .sentspark { margin-top:8px }
.fin-r4--quittungen .sentspark svg { width:100%;height:26px;display:block }
.fin-r4--quittungen .auto { grid-column:span 5;display:flex;flex-direction:column }
.fin-r4--quittungen .autobox { margin-top:12px;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #bcd3f7;border-radius:13px;background:linear-gradient(135deg,#eef4fe,#f6f9ff) }
.fin-r4--quittungen .autobox .ai { width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--brand);flex:none;box-shadow:0 2px 8px -3px rgba(30,86,200,.35) }
.fin-r4--quittungen .autobox .ai svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2 }
.fin-r4--quittungen .autobox .at b { font-size:14.5px }
.fin-r4--quittungen .autobox .at span { display:block;font-size:12px;color:var(--ink2);margin-top:2px }
.fin-r4--quittungen .autobox .at .nextrun { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--brand);margin-top:6px;background:#fff;border-radius:99px;padding:2px 9px }
.fin-r4--quittungen .autobox .toggle { margin-left:auto;display:flex;align-items:center;gap:8px }
.fin-r4--quittungen .sw { width:44px;height:25px;border-radius:99px;background:#178a50;position:relative;flex:none }
.fin-r4--quittungen .sw i { position:absolute;top:2.5px;right:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2) }
.fin-r4--quittungen .runs { margin-top:14px;display:flex;flex-direction:column }
.fin-r4--quittungen .run { display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:12.5px }
.fin-r4--quittungen .run:last-child { border:none }
.fin-r4--quittungen .run .rd { width:9px;height:9px;border-radius:50%;flex:none }
.fin-r4--quittungen .run .rd.ok { background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.fin-r4--quittungen .run .rd.warn { background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.fin-r4--quittungen .run b { font-weight:700 }
.fin-r4--quittungen .run .res { margin-left:auto;color:var(--ink2);font-weight:600 }
.fin-r4--quittungen .run .res .err { color:var(--bad) }
.fin-r4--quittungen .week { grid-column:span 4;display:flex;flex-direction:column }
.fin-r4--quittungen .wk { display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-top:16px;align-items:end;height:120px }
.fin-r4--quittungen .wd { display:flex;flex-direction:column;justify-content:flex-end;height:100% }
.fin-r4--quittungen .wd .stack { width:70%;margin:0 auto;display:flex;flex-direction:column-reverse;border-radius:5px 5px 2px 2px;overflow:hidden }
.fin-r4--quittungen .wd .stack i { display:block;width:100% }
.fin-r4--quittungen .wd .sn-sent { background:var(--ok) }
.fin-r4--quittungen .wd .sn-wait { background:#f3d38a }
.fin-r4--quittungen .wd .sum { text-align:center;font-size:11px;font-weight:700;color:var(--ink2);margin-bottom:5px }
.fin-r4--quittungen .wd.today .sum { color:var(--brand) }
.fin-r4--quittungen .wklab { display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-top:8px;text-align:center;font-size:11px;color:var(--ink3);font-weight:600 }
.fin-r4--quittungen .wklab .today { color:var(--brand);font-weight:800 }
.fin-r4--quittungen .wleg { display:flex;gap:16px;margin-top:14px;font-size:11.5px;color:var(--ink2);font-weight:600 }
.fin-r4--quittungen .wleg i { width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px }
.fin-r4--quittungen .toolbar { display:flex;align-items:center;gap:10px;margin:20px 0 0;flex-wrap:wrap }
.fin-r4--quittungen .fsel { display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-weight:600;font-size:13px;color:var(--ink2);box-shadow:var(--shadow) }
.fin-r4--quittungen .fsel svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2.2 }
.fin-r4--quittungen .fsearch { display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 13px;color:var(--ink3);width:250px;box-shadow:var(--shadow) }
.fin-r4--quittungen .schip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink2);box-shadow:var(--shadow) }
.fin-r4--quittungen .schip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.fin-r4--quittungen .btn { margin-left:auto;display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1e56c8,#2f6fe0);color:#fff;border:none;border-radius:10px;padding:9px 16px;font:inherit;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 4px 12px -4px rgba(30,86,200,.55) }
.fin-r4--quittungen .btn svg { width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.2 }
.fin-r4--quittungen .tblcard { margin-top:14px;padding:0;overflow:hidden }
.fin-r4--quittungen table { width:100%;border-collapse:collapse;font-size:13px }
.fin-r4--quittungen th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:11px 16px;border-bottom:1px solid var(--line);background:#fbfcfe }
.fin-r4--quittungen th.r, .fin-r4--quittungen td.r { text-align:right }
.fin-r4--quittungen td { padding:12px 16px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.fin-r4--quittungen tr:last-child td { border:none }
.fin-r4--quittungen tbody tr:hover { background:#fafbfe }
.fin-r4--quittungen .drnr { font-weight:800;color:var(--brand);white-space:nowrap }
.fin-r4--quittungen .mcell { display:flex;align-items:center;gap:11px }
.fin-r4--quittungen .mav { width:32px;height:32px;border-radius:9px;background:#e8effd;color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none }
.fin-r4--quittungen .mcell b { font-weight:700 }
.fin-r4--quittungen .mcell small { display:block;color:var(--ink3);font-size:11px }
.fin-r4--quittungen .badge { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;border-radius:8px;padding:5px 11px }
.fin-r4--quittungen .b-ready { background:#e8effd;color:#1e56c8 }
.fin-r4--quittungen .b-sent { background:#e5f5ec;color:#178a50 }
.fin-r4--quittungen .b-fail { background:#fdeaec;color:#c93a4a }
.fin-r4--quittungen .b-wait { background:#fdf3e2;color:#c07600 }
.fin-r4--quittungen .b-void { background:#eef1f6;color:var(--ink2) }
/* Zustellstatus „historisch importiert“ — bewusst WEDER grün noch rot:
   ein Alt-Import ist kein Ergebnis, sondern ein Nichtwissen. */
.fin-r4--quittungen .b-import { background:#f0edfd;color:#6d5bd0 }
.fin-r4--quittungen .badge { white-space:normal;text-align:left;line-height:1.35 }
.fin-r4--quittungen .badge .bd { width:8px;height:8px;border-radius:50% }
.fin-r4--quittungen .bd-ready { background:var(--brand) }
.fin-r4--quittungen .bd-sent { background:#22c55e }
.fin-r4--quittungen .bd-fail { background:#ef4444 }
.fin-r4--quittungen .bd-wait { background:#f59e0b }
.fin-r4--quittungen .bd-void { background:#9aa8bd }
.fin-r4--quittungen .bd-import { background:#8b7bdc }
/* Versand-Status-Liste (vorher inline-style im Markup — Design-Referenz: nie style="") */
.fin-r4--quittungen .q4-statusliste { display:flex;flex-direction:column;gap:10px;padding:6px 2px }
.fin-r4--quittungen .q4-zeile { display:flex;justify-content:space-between;gap:12px;align-items:baseline }
.fin-r4--quittungen .q4-ok { color:var(--ok) }
.fin-r4--quittungen .q4-bad { color:var(--bad) }
.fin-r4--quittungen .q4-warn { color:var(--warn) }
.fin-r4--quittungen .q4-neutral { color:#6d5bd0 }
.fin-r4--quittungen .q4-hinweis { margin:10px 2px 0;font-size:11.5px;line-height:1.45;color:var(--ink3) }
.fin-r4--quittungen .corr { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 9px;margin-left:6px;background:#f0edfd;color:#6d5bd0 }
.fin-r4--quittungen .kebab { display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap }
.fin-r4--quittungen .act { display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink2);font-size:12px;font-weight:650;white-space:nowrap }
.fin-r4--quittungen .act svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.fin-r4--quittungen .act.pri { border-color:#bcd3f7;background:#e8effd;color:var(--brand) }
.fin-r4--quittungen .act.sq { width:30px;padding:0;justify-content:center }
.fin-r4--quittungen .tblfoot { display:flex;align-items:center;padding:12px 16px;font-size:12.5px;color:var(--ink3);font-weight:600;border-top:1px solid var(--line);background:#fbfcfe }
.fin-r4--quittungen .tblfoot .pg { margin-left:auto;display:flex;gap:5px }
.fin-r4--quittungen .tblfoot .pg span { border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:#fff;color:var(--ink2) }
.fin-r4--quittungen .tblfoot .pg span.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }

/* ═══════════════════════════════════════════════════════════════════════════
   R6 — VEREINSWELT-ZIELBILD (1:1-Ports der V2-Community-Mockups: Events,
   Event-Detail/Teilnehmer/Loop, Gruppen&Chapter, Jobboard, Job-Matching).
   ADDITIV: alles unter `.ver-r6` bzw. `.ver-r6--<seite>` gescoped, damit weder
   Bestands-Seiten noch andere Zielbild-Ports (R1/R4) kollidieren. Tokens
   spiegeln 1:1 die :root-Werte der Mockups; Full-Bleed folgt der .fin-r4-Technik
   (Ausbruch aus dem .shell-content-Padding). Read-only Darstellungsschicht.
   ═══════════════════════════════════════════════════════════════════════════ */
.ver-r6 {
  --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --line2:#eef1f6;
  --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
  --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
  --sepa:#2563eb; --ueb:#0ea5a4; --paypal:#7c6cf0; --stripe:#b558d9;
  --bsc:#1e56c8; --msc:#0ea5a4; --mba:#7c6cf0; --phd:#9333ea;
  --r:16px;
  --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14);

  margin: -24px calc(clamp(16px, 3vw, 32px) * -1);
  padding: 0;
  min-height: calc(100% + 48px);
  box-sizing: border-box;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════
   R5 — STIFTUNG (Zielbild-Ports v2_sti_*; additiv, alles unter
   .v3-page.r5-*). Token-Aliase liegen bereits global auf .v3-page (s.o.).
   Farben/Maße 1:1 aus den freigegebenen Mockups v2_sti_*.html übernommen.
   READ/DISPLAY-Layout — Quittungs-Logik/Sperren werden nur konsumiert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Gemeinsame Bausteine (mehrere R5-Seiten) ── */
.v3-page .r5-hpill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--ok); background:#e5f5ec; border-radius:99px; padding:4px 11px; }
.v3-page .r5-hpill.warn { color:var(--warn); background:#fdf3e2; }
.v3-page .r5-hpill .hd { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.16); }
.v3-page .r5-hpill.warn .hd { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.v3-page .r5-search { display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:8px 14px; color:var(--ink3); width:290px; box-shadow:var(--shadow); font-size:13px; }
.v3-page .r5-search svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; flex:none; }

/* Tabs (in-page, Unterstrich) */
.v3-page .r5-tabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.v3-page .r5-tabs a { display:flex; align-items:center; gap:8px; padding:11px 16px; font-weight:650; font-size:13.5px; color:var(--ink2); text-decoration:none; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.v3-page .r5-tabs a.on { color:var(--brand); border-color:var(--brand); }
.v3-page .r5-tabs a .cnt { background:#e8563f; color:#fff; font-size:10.5px; font-weight:800; border-radius:99px; padding:1px 7px; }
.v3-page .r5-tabs a.on .cnt { background:#e8effd; color:var(--brand); }
.v3-page .r5-tabs a .mut { color:var(--ink3); font-size:12px; font-weight:600; }

/* Filter-Chips (Row-Hint) */
.v3-page .r5-rowhint { display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:12.5px; color:var(--ink3); font-weight:600; flex-wrap:wrap; }
.v3-page .r5-schip { border:1px solid var(--line); background:#fff; border-radius:99px; padding:5px 13px; font-size:12px; font-weight:600; color:var(--ink2); text-decoration:none; white-space:nowrap; }
.v3-page .r5-schip.on { background:#e8effd; border-color:#bcd3f7; color:var(--brand); }
.v3-page .r5-rowhint .spacer { margin-left:auto; }

/* ── v2_sti_arbeitsplatz ── */
.r5-arb .r5-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
@media (max-width:1100px){ .r5-arb .r5-tiles{ grid-template-columns:repeat(2,1fr); } }
.r5-arb .tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; text-decoration:none; color:inherit; }
.r5-arb .tile .ti { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:9px; }
.r5-arb .tile .ti svg { width:20px; height:20px; fill:none; stroke-width:2; stroke:currentColor; }
.r5-arb .tile b.big { font-size:26px; letter-spacing:-.8px; font-weight:800; }
.r5-arb .tile .l { font-size:12.5px; color:var(--ink2); font-weight:650; margin-top:1px; }
.r5-arb .tile .d { font-size:11.5px; color:var(--ink3); margin-top:3px; }
.r5-arb .tile .d b { color:var(--ink2); }
.r5-arb .tile .go { position:absolute; top:16px; right:16px; color:var(--ink3); }
.r5-arb .tile .go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.r5-arb .tile.focus { background:linear-gradient(135deg,#12335a,#1b4a7c); border:none; color:#fff; }
.r5-arb .tile.focus .l { color:#cfe0f2; } .r5-arb .tile.focus .d { color:#9fc0e2; } .r5-arb .tile.focus .d b { color:#cfe0f2; }
.r5-arb .tile.focus .ti { background:rgba(255,255,255,.16); color:#fff; }
.r5-arb .tile.focus .go { color:#9fc0e2; }
.r5-arb .c-blue { background:#e8effd; color:#1e56c8; } .r5-arb .c-amb { background:#fdf3e2; color:#c07600; }
.r5-arb .c-grn { background:#e5f5ec; color:#178a50; } .r5-arb .c-vio { background:#f0edfd; color:#7c6cf0; } .r5-arb .c-red { background:#fdeaec; color:#c93a4a; }
.r5-arb .tile .sw { width:38px; height:22px; border-radius:99px; background:#178a50; position:relative; flex:none; display:inline-block; vertical-align:-6px; margin-left:6px; }
.r5-arb .tile .sw.off { background:#c9d2df; }
.r5-arb .tile .sw i { position:absolute; top:2.5px; right:2.5px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.r5-arb .tile .sw.off i { right:auto; left:2.5px; }
.r5-arb .agerow { display:flex; gap:6px; margin-top:9px; }
.r5-arb .agedot { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--ink3); }
.r5-arb .agedot .bar { width:100%; height:5px; border-radius:99px; }
.r5-arb .ab-grn { background:#22c55e; } .r5-arb .ab-amb { background:#f59e0b; } .r5-arb .ab-red { background:#ef4444; }
.r5-arb .agedot b { font-size:14px; color:var(--ink); }

/* Bulk-Leiste (hell) */
.r5-arb .r5-bulk { display:flex; align-items:center; gap:12px; background:#eef4fe; border:1px solid #bcd3f7; border-radius:11px; padding:10px 16px; margin-bottom:12px; font-size:13px; font-weight:650; color:var(--brand); }
.r5-arb .r5-bulk .cbx { width:18px; height:18px; border-radius:5px; background:var(--brand); display:grid; place-items:center; }
.r5-arb .r5-bulk .cbx svg { width:11px; height:11px; stroke:#fff; fill:none; stroke-width:3; }
.r5-arb .r5-bulk .sp { margin-left:auto; display:flex; gap:8px; }
.r5-arb .r5-bulk .bbtn { display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 14px; border-radius:8px; border:1px solid #bcd3f7; background:#fff; color:var(--brand); font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none; }
.r5-arb .r5-bulk .bbtn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-arb .r5-bulk .bbtn.pri { border:none; background:linear-gradient(135deg,#1e56c8,#2f6fe0); color:#fff; }

/* Payment-Rows */
.r5-arb .r5-list { display:flex; flex-direction:column; gap:10px; }
.r5-arb .prow { background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:14px 18px; display:grid; grid-template-columns:30px 74px 1fr 108px 178px 240px; gap:14px; align-items:center; }
@media (max-width:1200px){ .r5-arb .prow{ grid-template-columns:24px 66px 1fr 92px 150px; } .r5-arb .prow .pact{ grid-column:1/-1; justify-content:flex-end; } }
.r5-arb .rcbx { width:19px; height:19px; border-radius:6px; border:1.8px solid #c3ccda; display:inline-grid; place-items:center; background:#fff; }
.r5-arb .rcbx.ck { background:var(--brand); border-color:var(--brand); }
.r5-arb .rcbx.ck svg { width:12px; height:12px; stroke:#fff; fill:none; stroke-width:3; }
.r5-arb .rcbx.lock { opacity:.35; }
.r5-arb .pdate { font-size:12px; color:var(--ink2); font-weight:600; }
.r5-arb .pdate span { display:block; font-size:11px; color:var(--ink3); font-weight:500; margin-top:1px; }
.r5-arb .pwho { display:flex; align-items:flex-start; gap:11px; min-width:0; }
.r5-arb .pav { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:12px; flex:none; background:#eef1f6; color:var(--ink2); margin-top:1px; }
.r5-arb .pmeta { min-width:0; }
.r5-arb .pmeta b { font-weight:700; font-size:13.5px; }
.r5-arb .pmeta .pz { display:block; font-size:11.5px; color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; margin-top:1px; }
.r5-arb .chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.r5-arb .psrc { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink2); background:#f1f4f8; border-radius:6px; padding:2px 8px; }
.r5-arb .psrc .sd { width:7px; height:7px; border-radius:50%; }
.r5-arb .agechip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px; }
.r5-arb .age-grn { background:#e5f5ec; color:#178a50; } .r5-arb .age-amb { background:#fdf3e2; color:#c07600; } .r5-arb .age-red { background:#fdeaec; color:#c93a4a; }
.r5-arb .agechip .adt { width:6px; height:6px; border-radius:50%; }
.r5-arb .ad-grn { background:#22c55e; } .r5-arb .ad-amb { background:#f59e0b; } .r5-arb .ad-red { background:#ef4444; }
.r5-arb .mlink { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:var(--brand); background:#e8effd; border-radius:6px; padding:2px 8px; text-decoration:none; }
.r5-arb .mlink svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.2; }
.r5-arb .assign { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:650; color:var(--ink3); }
.r5-arb .assign i { width:18px; height:18px; border-radius:50%; background:#0e8f7a; color:#fff; display:inline-grid; place-items:center; font-size:9px; font-weight:800; font-style:normal; }
.r5-arb .assign.none i { background:#eef1f6; color:#8b98ad; }
.r5-arb .pamt { text-align:right; font-weight:800; font-size:16px; letter-spacing:-.3px; }
.r5-arb .catsel { display:flex; align-items:center; gap:8px; width:100%; border:1px solid var(--line); background:#fbfcfe; border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:650; color:var(--ink); }
.r5-arb .catsel .cd { width:9px; height:9px; border-radius:50%; flex:none; }
.r5-arb .catsel svg { width:14px; height:14px; stroke:var(--ink3); fill:none; stroke-width:2.2; margin-left:auto; }
.r5-arb .cd-einzel { background:var(--ok); } .r5-arb .cd-wied { background:var(--paypal); } .r5-arb .cd-keine { background:#b6c0cf; } .r5-arb .cd-verein { background:var(--brand); } .r5-arb .cd-ext { background:#c9a5ea; }
.r5-arb .pact { display:flex; gap:7px; justify-content:flex-end; align-items:center; }
.r5-arb .rbtn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12.5px; font-weight:650; cursor:pointer; white-space:nowrap; text-decoration:none; }
.r5-arb .rbtn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-arb .rbtn.pri { border:none; background:linear-gradient(135deg,#1e56c8,#2f6fe0); color:#fff; box-shadow:0 4px 12px -4px rgba(30,86,200,.55); }
.r5-arb .rbtn.amb { border-color:#f0d9ad; background:#fdf7ec; color:var(--warn); }
.r5-arb .rbtn.icon { padding:0; width:36px; justify-content:center; }
.r5-arb .extbadge { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:#6d5bd0; background:#f0edfd; border:1px solid #e0d8fa; border-radius:8px; padding:8px 12px; justify-self:end; white-space:nowrap; }
.r5-arb .extbadge svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-arb .catlocked { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:650; color:var(--ink3); padding:8px 4px; }
.r5-arb .rowsub { font-size:11.5px; color:var(--ink3); font-weight:600; text-align:right; max-width:160px; }

/* Sekundär-Sektion (Details & Kontrolle) im v3-Kartenlook */
.v3-page .r5-sec { margin-top:22px; }
.v3-page .r5-sec > h2 { font-size:16px; font-weight:800; letter-spacing:-.2px; margin-bottom:12px; }
.v3-page .r5-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:1000px){ .v3-page .r5-grid2{ grid-template-columns:1fr; } }
.v3-page .r5-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; }
.v3-page .r5-panel h3 { font-size:14px; font-weight:700; margin-bottom:4px; }
.v3-page .r5-panel .psub { font-size:12px; color:var(--ink3); margin-bottom:10px; }
.v3-page .r5-checkrow { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line2); }
.v3-page .r5-checkrow:first-of-type { border-top:none; }
.v3-page .r5-checkrow .dot { width:10px; height:10px; border-radius:50%; flex:none; }
.v3-page .r5-checkrow .dot.ok { background:#22c55e; } .v3-page .r5-checkrow .dot.bad { background:#ef4444; }
.v3-page .r5-checkrow .ct b { font-size:13px; font-weight:650; } .v3-page .r5-checkrow .ct span { display:block; font-size:11px; color:var(--ink3); }
.v3-page .r5-checkrow .cn { margin-left:auto; font-size:15px; font-weight:800; }
.v3-page .r5-checkrow .cn.ok { color:var(--ok); } .v3-page .r5-checkrow .cn.bad { color:var(--bad); }
.v3-page .r5-note { display:flex; align-items:center; gap:10px; border-radius:10px; padding:10px 13px; font-size:12.5px; font-weight:600; margin-bottom:12px; }
.v3-page .r5-note.warn { background:#fdf3e2; color:#8a5a00; border:1px solid #f0d9ad; }
.v3-page .r5-note.ok { background:#e5f5ec; color:#0f6b3e; border:1px solid #b9e4c9; }
.v3-page .r5-proto { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px dashed var(--line); font-size:13px; }
.v3-page .r5-proto:first-of-type { border-top:none; }
.v3-page .r5-proto time { font-size:11px; color:var(--ink3); font-weight:600; width:92px; flex:none; }
.v3-page .r5-proto .pd { width:7px; height:7px; border-radius:50%; flex:none; background:#cbd5e1; }
.v3-page .r5-proto .pd.ok { background:#22c55e; } .v3-page .r5-proto .pd.i { background:var(--brand); }
.v3-page .r5-linkbtn { display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:13px; font-weight:650; color:var(--brand); text-decoration:none; }
.v3-page .r5-linkbtn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── v2_sti_wiederkehrend ── */
.r5-wied .sumbar { display:flex; align-items:center; gap:26px; background:linear-gradient(135deg,#12335a,#1b4a7c); border-radius:var(--r); padding:18px 22px; margin-bottom:18px; color:#fff; box-shadow:var(--shadow); flex-wrap:wrap; }
.r5-wied .sumbar .si { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.14); display:grid; place-items:center; flex:none; }
.r5-wied .sumbar .si svg { width:23px; height:23px; fill:none; stroke:#fff; stroke-width:2; }
.r5-wied .sumbar .m { display:flex; flex-direction:column; }
.r5-wied .sumbar .m b { font-size:24px; letter-spacing:-.5px; font-weight:800; }
.r5-wied .sumbar .m span { font-size:12px; color:#9fc0e2; font-weight:600; }
.r5-wied .sumbar .m.warn b { color:#fca5a5; }
.r5-wied .sumbar .sep { width:1px; height:40px; background:rgba(255,255,255,.16); }
.r5-wied .sumbar .btn { margin-left:auto; display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--brand); border:none; border-radius:11px; padding:12px 20px; font-weight:750; font-size:14px; cursor:pointer; box-shadow:0 6px 18px -6px rgba(0,0,0,.4); text-decoration:none; }
.r5-wied .sumbar .btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; }
.r5-wied .r5-schip.alert { border-color:#f2c3c9; background:#fdeaec; color:var(--bad); }

.r5-wied .list { display:flex; flex-direction:column; gap:10px; }
.r5-wied .drow { background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); overflow:hidden; }
.r5-wied .drow.alert { border-color:#f2c3c9; box-shadow:0 4px 18px -8px rgba(201,58,74,.4); }
.r5-wied .dhead { display:grid; grid-template-columns:1fr 220px 150px 210px 40px; gap:16px; align-items:center; padding:14px 18px; }
@media (max-width:1100px){ .r5-wied .dhead{ grid-template-columns:1fr 150px 130px; } .r5-wied .dhead .dstat-cell, .r5-wied .dhead .chev{ display:none; } }
.r5-wied .drow.open .dhead { border-bottom:1px solid var(--line); background:#fbfcfe; }
.r5-wied .dwho { display:flex; align-items:center; gap:12px; min-width:0; }
.r5-wied .dav { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:12.5px; flex:none; background:#f0edfd; color:#7c6cf0; }
.r5-wied .dwho b { font-weight:700; font-size:14px; }
.r5-wied .dwho .de { display:block; font-size:11.5px; color:var(--ink3); }
.r5-wied .dfreq { font-size:12.5px; color:var(--ink2); font-weight:600; }
.r5-wied .dfreq b { color:var(--ink); font-weight:800; font-size:14px; }
.r5-wied .dfreq .rec { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:#7c6cf0; background:#f0edfd; border-radius:6px; padding:2px 7px; margin-bottom:4px; }
.r5-wied .dfreq .rec svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2.5; }
.r5-wied .dfreq .rec.miss { color:var(--bad); background:#fdeaec; }
.r5-wied .dlast { font-size:12px; color:var(--ink2); font-weight:600; }
.r5-wied .dlast span { display:block; font-size:11px; color:var(--ink3); font-weight:500; }
.r5-wied .dlast.miss span { color:var(--bad); font-weight:600; }
.r5-wied .dstat { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; border-radius:8px; padding:6px 11px; }
.r5-wied .st-wait { background:#fdf3e2; color:var(--warn); } .r5-wied .st-sent { background:#e5f5ec; color:var(--ok); } .r5-wied .st-new { background:#eef1f6; color:var(--ink2); } .r5-wied .st-miss { background:#fdeaec; color:var(--bad); }
.r5-wied .dstat .bd { width:8px; height:8px; border-radius:50%; }
.r5-wied .bd-wait { background:#f59e0b; } .r5-wied .bd-sent { background:#22c55e; } .r5-wied .bd-new { background:#8b98ad; } .r5-wied .bd-miss { background:#ef4444; }
.r5-wied .chev { display:grid; place-items:center; color:var(--ink3); }
.r5-wied .chev svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2; }
.r5-wied .missbar { display:flex; align-items:center; gap:12px; padding:12px 18px 14px 66px; background:#fdf6f7; border-top:1px solid #f2dfe2; font-size:12.5px; color:var(--ink2); font-weight:600; flex-wrap:wrap; }
.r5-wied .missbar svg.wi { width:16px; height:16px; stroke:var(--bad); fill:none; stroke-width:2; flex:none; }
.r5-wied .missbar .act { margin-left:auto; display:flex; gap:8px; }
.r5-wied .missbtn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12.5px; font-weight:650; cursor:pointer; text-decoration:none; }
.r5-wied .missbtn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-wied .missbtn.pri { border:none; background:linear-gradient(135deg,#c93a4a,#e05563); color:#fff; box-shadow:0 4px 12px -4px rgba(201,58,74,.5); }
.r5-wied .sublist { padding:6px 18px 12px 66px; background:#fafbfe; }
.r5-wied .subrow { display:grid; grid-template-columns:120px 1fr 100px 140px; gap:16px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--line); font-size:12.5px; color:var(--ink2); }
.r5-wied .subrow:last-child { border:none; }
.r5-wied .subrow .sd { color:var(--ink3); font-weight:600; }
.r5-wied .subrow .sz { color:var(--ink3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.r5-wied .subrow .sa { text-align:right; font-weight:700; color:var(--ink); }
.r5-wied .subrow.gap { background:#fdf6f7; border-radius:7px; padding-left:8px; padding-right:8px; }
.r5-wied .subrow.gap .sz { color:var(--bad); font-weight:700; }
.r5-wied .subrow .ss { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink2); background:#eef1f6; border-radius:6px; padding:2px 8px; justify-self:start; }
.r5-wied .subrow .ss.gapb { background:#fdeaec; color:var(--bad); }
.r5-wied .subrow .ss .sdot { width:6px; height:6px; border-radius:50%; }
.r5-wied .subfoot { display:flex; align-items:center; gap:12px; padding:10px 0 2px; font-size:12px; color:var(--ink3); font-weight:600; }
.r5-wied .subfoot b { color:var(--ink); font-weight:800; }
.r5-wied .subfoot a { margin-left:auto; color:var(--brand); font-weight:700; text-decoration:none; font-size:12.5px; }

/* ── v2_sti_sammellauf ── */
.r5-lauf .back { display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-weight:650; font-size:13px; color:var(--ink2); box-shadow:var(--shadow); text-decoration:none; }
.r5-lauf .back svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-lauf .stepper { display:flex; align-items:center; gap:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 24px; margin-bottom:18px; }
.r5-lauf .step { display:flex; align-items:center; gap:12px; }
.r5-lauf .step .no { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; flex:none; background:#eef1f6; color:var(--ink3); }
.r5-lauf .step.on .no { background:linear-gradient(135deg,#1e56c8,#2f6fe0); color:#fff; box-shadow:0 4px 12px -4px rgba(30,86,200,.55); }
.r5-lauf .step.done .no { background:#e5f5ec; color:var(--ok); }
.r5-lauf .step .l { font-size:11px; letter-spacing:.6px; color:var(--ink3); font-weight:700; }
.r5-lauf .step .t { font-size:14px; font-weight:700; color:var(--ink2); margin-top:1px; }
.r5-lauf .step.on .t { color:var(--ink); }
.r5-lauf .step .l.act { color:var(--brand); }
.r5-lauf .stepline { flex:1; height:2px; background:var(--line); margin:0 22px; border-radius:2px; }
.r5-lauf .r5-lgrid { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
@media (max-width:1050px){ .r5-lauf .r5-lgrid{ grid-template-columns:1fr; } }
.r5-lauf .side-cards { display:flex; flex-direction:column; gap:16px; position:sticky; top:10px; }
.r5-lauf .card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; }
.r5-lauf .bilanz h3 { font-size:13px; letter-spacing:.3px; color:var(--ink3); font-weight:700; margin-bottom:14px; }
.r5-lauf .brow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13.5px; font-weight:650; color:var(--ink2); }
.r5-lauf .brow .v { margin-left:auto; font-weight:800; font-size:15px; color:var(--ink); }
.r5-lauf .brow.sub .v { color:var(--bad); }
.r5-lauf .brow.total { border:none; border-top:2px solid var(--line); margin-top:6px; padding-top:14px; }
.r5-lauf .brow.total .lbl { font-size:14px; font-weight:800; color:var(--ink); }
.r5-lauf .brow.total .v { font-size:22px; color:var(--brand); }
.r5-lauf .brow .ic { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; }
.r5-lauf .brow .ic svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; }
.r5-lauf .c-vio { background:#f0edfd; color:#7c6cf0; } .r5-lauf .c-red { background:#fdeaec; color:#c93a4a; } .r5-lauf .c-grn { background:#e5f5ec; color:#178a50; }
.r5-lauf .amt-hint { font-size:12px; color:var(--ink3); margin-top:10px; }
.r5-lauf .amt-hint b { color:var(--ink2); font-weight:700; }
.r5-lauf .gate { margin-top:15px; padding:12px 13px; border:1px solid #cfe0f2; background:#eef4fe; border-radius:11px; display:flex; gap:10px; align-items:flex-start; }
.r5-lauf .gate .gk { width:20px; height:20px; border-radius:6px; border:2px solid var(--brand); background:var(--brand); display:grid; place-items:center; flex:none; margin-top:1px; }
.r5-lauf .gate .gk svg { width:12px; height:12px; stroke:#fff; fill:none; stroke-width:3; }
.r5-lauf .gate .gt { font-size:11.5px; color:var(--ink2); font-weight:600; line-height:1.5; }
.r5-lauf .gate .gt b { color:var(--ink); font-weight:750; display:block; margin-bottom:2px; }
.r5-lauf .gatechk { display:flex; gap:12px; margin-top:9px; }
.r5-lauf .gatechk span { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--ok); }
.r5-lauf .gatechk span svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.6; }
.r5-lauf .wbtn { width:100%; margin-top:13px; display:flex; align-items:center; justify-content:center; gap:9px; background:linear-gradient(135deg,#1e56c8,#2f6fe0); color:#fff; border:none; border-radius:11px; padding:13px; font-weight:750; font-size:14px; cursor:pointer; box-shadow:0 6px 18px -6px rgba(30,86,200,.55); }
.r5-lauf .wbtn svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.2; }
.r5-lauf .wsub { text-align:center; font-size:11px; color:var(--ink3); font-weight:600; margin-top:8px; }
.r5-lauf .hinweis { display:flex; gap:12px; background:#fbfaf4; border:1px solid #ece3cb; }
.r5-lauf .hinweis .hi { width:34px; height:34px; border-radius:10px; background:#fdf3e2; color:var(--warn); display:grid; place-items:center; flex:none; }
.r5-lauf .hinweis .hi svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.r5-lauf .hinweis b { font-size:13px; }
.r5-lauf .hinweis p { font-size:12px; color:var(--ink2); margin-top:3px; line-height:1.5; }
.r5-lauf .tblcard { padding:0; overflow:hidden; }
.r5-lauf .tblhead { display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.r5-lauf .tblhead h2 { font-size:15px; font-weight:700; }
.r5-lauf .tblhead .cnt { background:#e8effd; color:var(--brand); font-size:12px; font-weight:800; border-radius:99px; padding:2px 10px; }
.r5-lauf .tblhead .filters { margin-left:auto; display:flex; gap:7px; }
.r5-lauf .schip { border:1px solid var(--line); background:#fff; border-radius:99px; padding:5px 13px; font-size:12px; font-weight:600; color:var(--ink2); }
.r5-lauf .schip.on { background:#e8effd; border-color:#bcd3f7; color:var(--brand); }
.r5-lauf .schip.warn { border-color:#f2c3c9; background:#fdeaec; color:var(--bad); }
.r5-lauf table { width:100%; border-collapse:collapse; font-size:13px; }
.r5-lauf th { font-size:10.5px; letter-spacing:.7px; color:var(--ink3); text-align:left; font-weight:700; padding:11px 18px; border-bottom:1px solid var(--line); background:#fbfcfe; }
.r5-lauf th.r, .r5-lauf td.r { text-align:right; } .r5-lauf th.c, .r5-lauf td.c { text-align:center; }
.r5-lauf td { padding:12px 18px; border-bottom:1px solid #eef1f6; vertical-align:middle; }
.r5-lauf tr:last-child td { border:none; }
.r5-lauf tbody tr.off { background:#fdfbf8; }
.r5-lauf .cbx2 { width:19px; height:19px; border-radius:6px; border:1.8px solid #c3ccda; display:inline-grid; place-items:center; background:#fff; vertical-align:-4px; }
.r5-lauf .cbx2.ck { background:var(--brand); border-color:var(--brand); }
.r5-lauf .cbx2.ck svg { width:12px; height:12px; stroke:#fff; fill:none; stroke-width:3; }
.r5-lauf .cbx2.dis { background:#f1f4f8; border-color:#dde3ec; }
.r5-lauf .mcell { display:flex; align-items:center; gap:11px; }
.r5-lauf .mav { width:32px; height:32px; border-radius:9px; background:#f0edfd; color:#7c6cf0; display:grid; place-items:center; font-weight:800; font-size:12px; flex:none; }
.r5-lauf .mcell b { font-weight:700; } .r5-lauf .mcell small { display:block; color:var(--ink3); font-size:11px; }
.r5-lauf .amp2 { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; border-radius:8px; padding:5px 11px; }
.r5-lauf .amp-ok { background:#e5f5ec; color:var(--ok); } .r5-lauf .amp-bad { background:#fdeaec; color:var(--bad); }
.r5-lauf .amp2 .ad { width:8px; height:8px; border-radius:50%; } .r5-lauf .ad-ok { background:#22c55e; } .r5-lauf .ad-bad { background:#ef4444; }
.r5-lauf .fixlnk { color:var(--brand); font-weight:700; font-size:12px; text-decoration:none; margin-left:6px; }
.r5-lauf .tblfoot { padding:12px 18px; font-size:12px; color:var(--ink3); font-weight:600; }

/* ── v2_sti_quittungen ── */
.r5-quit .r5-grid12 { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
@media (max-width:1100px){ .r5-quit .r5-grid12{ grid-template-columns:repeat(2,1fr); } }
.r5-quit .stat { grid-column:span 3; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit; }
@media (max-width:1100px){ .r5-quit .stat{ grid-column:span 1; } .r5-quit .info{ grid-column:span 2 !important; } }
.r5-quit .stat .si { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; margin-bottom:8px; }
.r5-quit .stat .si svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; }
.r5-quit .stat b.big { font-size:28px; letter-spacing:-1px; font-weight:800; }
.r5-quit .stat .l { font-size:12.5px; color:var(--ink2); font-weight:650; }
.r5-quit .stat .d { font-size:11.5px; color:var(--ink3); margin-top:2px; }
.r5-quit .c-blue { background:#e8effd; color:#1e56c8; } .r5-quit .c-red { background:#fdeaec; color:#c93a4a; }
.r5-quit .c-amb { background:#fdf3e2; color:#c07600; } .r5-quit .c-grn { background:#e5f5ec; color:#178a50; } .r5-quit .c-vio { background:#f0edfd; color:#7c6cf0; }
.r5-quit .info { grid-column:span 4; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; display:flex; flex-direction:column; }
.r5-quit .info h3 { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; }
.r5-quit .info h3 svg { width:16px; height:16px; stroke:var(--brand); fill:none; stroke-width:2; }
.r5-quit .info h3 .more { margin-left:auto; font-size:12px; color:var(--brand); font-weight:600; text-decoration:none; }
.r5-quit .autoline { display:flex; align-items:center; gap:12px; margin-top:12px; }
.r5-quit .autoline .txt b { font-size:13.5px; } .r5-quit .autoline .txt span { display:block; font-size:11.5px; color:var(--ink3); margin-top:1px; }
.r5-quit .toggle { margin-left:auto; display:flex; align-items:center; gap:8px; }
.r5-quit .toggle .stt { font-size:12px; font-weight:800; color:var(--ok); } .r5-quit .toggle .stt.off { color:var(--ink3); }
.r5-quit .sw { width:44px; height:25px; border-radius:99px; background:#178a50; position:relative; flex:none; }
.r5-quit .sw.off { background:#c9d2df; }
.r5-quit .sw i { position:absolute; top:2.5px; right:2.5px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.r5-quit .sw.off i { right:auto; left:2.5px; }
.r5-quit .statusrow { display:flex; align-items:center; gap:9px; margin-top:12px; padding-top:11px; border-top:1px dashed var(--line); font-size:12px; color:var(--ink2); font-weight:600; }
.r5-quit .statusrow .rd { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); flex:none; }
.r5-quit .statusrow .r { margin-left:auto; color:var(--ink3); }
.r5-quit .nk { display:flex; align-items:baseline; gap:10px; margin-top:14px; }
.r5-quit .nk .big { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.r5-quit .nk .ok { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ok); background:#e5f5ec; border-radius:99px; padding:3px 10px; }
.r5-quit .nk .ok svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.5; }
.r5-quit .nkrow { display:flex; align-items:center; gap:9px; margin-top:12px; padding-top:11px; border-top:1px dashed var(--line); font-size:12px; color:var(--ink2); font-weight:600; }
.r5-quit .nkrow .r { margin-left:auto; color:var(--ink3); }
.r5-quit .spx { display:flex; align-items:center; gap:12px; margin-top:14px; }
.r5-quit .spx .spi { width:40px; height:40px; border-radius:11px; background:#e8effd; color:var(--brand); display:grid; place-items:center; flex:none; }
.r5-quit .spx .spi svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; }
.r5-quit .spx .spt b { font-size:19px; letter-spacing:-.4px; } .r5-quit .spx .spt span { display:block; font-size:11.5px; color:var(--ink3); }
.r5-quit .sprow { display:flex; align-items:center; gap:9px; margin-top:12px; padding-top:11px; border-top:1px dashed var(--line); font-size:12px; color:var(--ink2); font-weight:600; }
.r5-quit .sprow .rd { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); flex:none; }
.r5-quit .sprow .r { margin-left:auto; color:var(--ink3); }
.r5-quit .r5-toolbar { display:flex; align-items:center; gap:10px; margin:18px 0 14px; flex-wrap:wrap; }
.r5-quit .r5-toolbar .chips { display:flex; gap:7px; flex-wrap:wrap; }
.r5-quit .qchip { border:1px solid var(--line); background:#fff; border-radius:99px; padding:7px 15px; font-size:12.5px; font-weight:650; color:var(--ink2); box-shadow:var(--shadow); text-decoration:none; white-space:nowrap; }
.r5-quit .qchip.on { background:#e8effd; border-color:#bcd3f7; color:var(--brand); }
.r5-quit .fsel { display:flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-weight:600; font-size:13px; color:var(--ink2); box-shadow:var(--shadow); }
.r5-quit .fsel svg { width:13px; height:13px; stroke:var(--ink3); fill:none; stroke-width:2.2; }
.r5-quit .qbtn { margin-left:auto; display:flex; align-items:center; gap:8px; background:linear-gradient(135deg,#1e56c8,#2f6fe0); color:#fff; border:none; border-radius:10px; padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; box-shadow:0 4px 12px -4px rgba(30,86,200,.55); text-decoration:none; }
.r5-quit .qbtn svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2.2; }
.r5-quit .tblcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:0; overflow:hidden; }
.r5-quit table.qt { width:100%; border-collapse:collapse; font-size:13px; }
.r5-quit table.qt th { font-size:10.5px; letter-spacing:.7px; color:var(--ink3); text-align:left; font-weight:700; padding:11px 16px; border-bottom:1px solid var(--line); background:#fbfcfe; }
.r5-quit table.qt th.r, .r5-quit table.qt td.r { text-align:right; }
.r5-quit table.qt td { padding:12px 16px; border-bottom:1px solid #eef1f6; vertical-align:middle; }
.r5-quit table.qt tr:last-child td { border:none; }
.r5-quit table.qt tbody tr { cursor:pointer; }
.r5-quit table.qt tbody tr:hover { background:#fafbfe; }
.r5-quit .drnr { font-weight:800; color:var(--brand); white-space:nowrap; font-variant-numeric:tabular-nums; }
.r5-quit .mcell { display:flex; align-items:center; gap:11px; }
.r5-quit .mav { width:32px; height:32px; border-radius:9px; background:#f0edfd; color:#7c6cf0; display:grid; place-items:center; font-weight:800; font-size:12px; flex:none; }
.r5-quit .mcell b { font-weight:700; } .r5-quit .mcell small { display:block; color:var(--ink3); font-size:11px; }
.r5-quit .typ { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; border-radius:7px; padding:3px 9px; }
.r5-quit .t-einzel { background:#e5f5ec; color:var(--ok); } .r5-quit .t-sammel { background:#f0edfd; color:#7c6cf0; }
.r5-quit .badge { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; border-radius:8px; padding:5px 11px; }
.r5-quit .b-draft { background:#eef1f6; color:var(--ink2); } .r5-quit .b-appr { background:#e8effd; color:#1e56c8; }
.r5-quit .b-sent { background:#e5f5ec; color:#178a50; } .r5-quit .b-void { background:#fdeaec; color:#c93a4a; }
.r5-quit .badge .bd { width:8px; height:8px; border-radius:50%; }
.r5-quit .bd-draft { background:#8b98ad; } .r5-quit .bd-appr { background:var(--brand); } .r5-quit .bd-sent { background:#22c55e; } .r5-quit .bd-void { background:#ef4444; }
.r5-quit .kebab { display:flex; gap:6px; justify-content:flex-end; }
.r5-quit .qact { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12px; font-weight:650; text-decoration:none; }
.r5-quit .qact svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-quit .qact.pri { border-color:#bcd3f7; background:#e8effd; color:var(--brand); }
.r5-quit .qact.sq { width:30px; padding:0; justify-content:center; }
.r5-quit .tblfoot { display:flex; align-items:center; padding:12px 16px; font-size:12.5px; color:var(--ink3); font-weight:600; border-top:1px solid var(--line); background:#fbfcfe; }
.r5-quit .r5-subtabs { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.r5-quit .r5-subtab { font-size:13px; padding:8px 14px; border-radius:10px; font-weight:650; color:var(--ink2); text-decoration:none; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.r5-quit .r5-subtab.on { background:var(--brand-deep); color:#fff; border-color:var(--brand-deep); }

/* ── v2_sti_auswertung ── */
.r5-ausw .fbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.r5-ausw .fsel { display:flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 13px; font-weight:600; font-size:13px; color:var(--ink2); box-shadow:var(--shadow); text-decoration:none; }
.r5-ausw .fsel svg { width:13px; height:13px; stroke:var(--ink3); fill:none; stroke-width:2.2; }
.r5-ausw .xbtn { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); color:var(--ink2); border-radius:10px; padding:8px 14px; font-weight:700; font-size:13px; box-shadow:var(--shadow); text-decoration:none; }
.r5-ausw .xbtn svg { width:15px; height:15px; stroke:var(--ok); fill:none; stroke-width:2; }
.r5-ausw .grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
@media (max-width:1100px){ .r5-ausw .grid{ grid-template-columns:repeat(2,1fr); } .r5-ausw .monthly, .r5-ausw .topd, .r5-ausw .zweck, .r5-ausw .quellen, .r5-ausw .jahrgang, .r5-ausw .jv { grid-column:span 2 !important; } }
.r5-ausw .card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; }
.r5-ausw .card h2 { display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:700; }
.r5-ausw .card h2 svg { width:17px; height:17px; stroke:var(--brand); fill:none; stroke-width:2; }
.r5-ausw .card h2 .more { margin-left:auto; font-size:12.5px; color:var(--brand); font-weight:600; text-decoration:none; }
.r5-ausw .sub { color:var(--ink3); font-size:12px; margin-top:2px; }
.r5-ausw .kpi { grid-column:span 3; display:flex; flex-direction:column; gap:2px; }
@media (max-width:1100px){ .r5-ausw .kpi{ grid-column:span 1; } }
.r5-ausw .kpi .ki { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:8px; }
.r5-ausw .kpi .ki svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.r5-ausw .kpi b.big { font-size:25px; letter-spacing:-.7px; font-weight:800; }
.r5-ausw .kpi .l { font-size:12px; color:var(--ink2); font-weight:650; }
.r5-ausw .kpi .d { font-size:11.5px; color:var(--ink3); margin-top:3px; display:flex; align-items:center; gap:5px; }
.r5-ausw .kpi .up { color:var(--ok); font-weight:700; } .r5-ausw .kpi .dn { color:var(--bad); font-weight:700; }
.r5-ausw .c-blue { background:#e8effd; color:#1e56c8; } .r5-ausw .c-grn { background:#e5f5ec; color:#178a50; } .r5-ausw .c-vio { background:#f0edfd; color:#7c6cf0; } .r5-ausw .c-amb { background:#fdf3e2; color:#c07600; }
.r5-ausw .monthly { grid-column:span 8; }
.r5-ausw .mchart { display:grid; gap:16px; margin-top:18px; align-items:end; height:190px; }
.r5-ausw .mcol { display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative; }
.r5-ausw .msum { text-align:center; font-size:11.5px; font-weight:700; color:var(--ink2); margin-bottom:6px; white-space:nowrap; }
.r5-ausw .mstack { width:100%; display:flex; flex-direction:column-reverse; border-radius:6px 6px 3px 3px; overflow:hidden; min-height:3px; }
.r5-ausw .mstack i { display:block; width:100%; }
.r5-ausw .s-ueb { background:var(--ueb); } .r5-ausw .s-pp { background:var(--paypal); } .r5-ausw .s-ext { background:var(--stripe); }
.r5-ausw .mnote { position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-size:9.5px; font-weight:700; color:#8a6a1f; background:#fdf3e2; border:1px solid #f0d9ad; border-radius:5px; padding:1px 6px; white-space:nowrap; }
.r5-ausw .xlab { display:grid; gap:16px; margin-top:9px; text-align:center; font-size:11.5px; color:var(--ink3); font-weight:600; }
.r5-ausw .leg { display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink2); font-weight:600; flex-wrap:wrap; }
.r5-ausw .leg i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.r5-ausw .leg .r { margin-left:auto; color:var(--ink3); font-weight:600; }
.r5-ausw .hb { display:flex; flex-direction:column; gap:13px; margin-top:16px; }
.r5-ausw .hbrow { display:grid; grid-template-columns:120px 1fr 84px; gap:11px; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink2); }
.r5-ausw .hbrow .bar { height:11px; border-radius:99px; background:#eef1f6; overflow:hidden; }
.r5-ausw .hbrow .bar i { display:block; height:100%; border-radius:99px; }
.r5-ausw .hbrow .v { text-align:right; font-weight:800; color:var(--ink); font-size:12.5px; }
.r5-ausw .zweck { grid-column:span 4; } .r5-ausw .quellen { grid-column:span 4; } .r5-ausw .jahrgang { grid-column:span 4; }
.r5-ausw .topd { grid-column:span 8; } .r5-ausw .jv { grid-column:span 4; }
.r5-ausw table.at { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
.r5-ausw table.at th { font-size:10.5px; letter-spacing:.7px; color:var(--ink3); text-align:left; font-weight:700; padding:9px 8px; border-bottom:1px solid var(--line); }
.r5-ausw table.at th.r, .r5-ausw table.at td.r { text-align:right; }
.r5-ausw table.at td { padding:11px 8px; border-bottom:1px solid #eef1f6; vertical-align:middle; }
.r5-ausw table.at tr:last-child td { border:none; }
.r5-ausw .mcell { display:flex; align-items:center; gap:11px; }
.r5-ausw .mav { width:31px; height:31px; border-radius:9px; background:#f0edfd; color:#7c6cf0; display:grid; place-items:center; font-weight:800; font-size:11.5px; flex:none; }
.r5-ausw .mcell b { font-weight:700; } .r5-ausw .mcell small { display:block; color:var(--ink3); font-size:11px; }
.r5-ausw .tchip { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; border-radius:6px; padding:3px 9px; }
.r5-ausw .tc-ein { background:#e5f5ec; color:var(--ok); } .r5-ausw .tc-wied { background:#f0edfd; color:#7c6cf0; }

/* ── v2_sti_spenderakte ── */
.r5-akte .crumb { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink3); font-weight:600; margin-bottom:14px; }
.r5-akte .crumb a { color:var(--brand); text-decoration:none; }
.r5-akte .crumb svg { width:13px; height:13px; stroke:var(--ink3); fill:none; stroke-width:2; }
.r5-akte .hero { background:linear-gradient(135deg,#10304f 0%,#153a60 55%,#1b4a7c 100%); color:#fff; border:none; border-radius:var(--r); box-shadow:var(--shadow); padding:22px 26px; position:relative; overflow:hidden; margin-bottom:16px; }
.r5-akte .hero::after { content:''; position:absolute; right:-60px; top:-90px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(96,165,250,.22),transparent 65%); }
.r5-akte .herotop { display:flex; align-items:center; gap:20px; position:relative; flex-wrap:wrap; }
.r5-akte .bigav { width:76px; height:76px; border-radius:20px; background:linear-gradient(140deg,#34d399,#0e8f7a); display:grid; place-items:center; font-weight:800; font-size:26px; color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.15); flex:none; }
.r5-akte .hname { font-size:24px; font-weight:800; letter-spacing:-.5px; }
.r5-akte .hrole { font-size:13px; color:#bcd2e8; margin-top:3px; }
.r5-akte .hchips { display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.r5-akte .hchip { font-size:11.5px; font-weight:700; border-radius:99px; padding:4px 11px; background:rgba(255,255,255,.15); color:#fff; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.r5-akte .hchip svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.2; }
.r5-akte .hchip.grn { background:rgba(52,211,153,.24); color:#bbf7d0; }
.r5-akte .hchip.link { background:rgba(96,165,250,.26); color:#dbeafe; }
.r5-akte .hstats { margin-left:auto; display:flex; gap:26px; position:relative; text-align:right; }
.r5-akte .hstat .sv { font-size:26px; font-weight:800; letter-spacing:-.8px; }
.r5-akte .hstat .sl { font-size:11px; color:#9fc0e2; font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-top:2px; }
.r5-akte .hstat .sn { font-size:10px; color:#7fa3c6; font-weight:600; margin-top:2px; }
.r5-akte .wrap { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
@media (max-width:1050px){ .r5-akte .wrap{ grid-template-columns:1fr; } }
.r5-akte .atabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.r5-akte .atabs button { display:flex; align-items:center; gap:8px; padding:11px 16px; font-weight:650; font-size:13.5px; color:var(--ink2); border:none; background:none; cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; }
.r5-akte .atabs button svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.r5-akte .atabs button.on { color:var(--brand); border-color:var(--brand); }
.r5-akte .atabs button .cnt { font-size:11px; background:#eef1f6; color:var(--ink2); border-radius:99px; padding:1px 7px; font-weight:700; }
.r5-akte .atabs button.on .cnt { background:#e8effd; color:var(--brand); }
.r5-akte .alist { display:flex; flex-direction:column; gap:10px; }
.r5-akte .drow { background:var(--card); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:13px 16px; display:grid; grid-template-columns:70px 1fr 118px 168px; gap:14px; align-items:center; }
@media (max-width:640px){ .r5-akte .drow{ grid-template-columns:60px 1fr auto; } .r5-akte .drow .rq{ grid-column:1/-1; justify-content:flex-start; } }
.r5-akte .ddate { font-size:12px; color:var(--ink2); font-weight:700; }
.r5-akte .ddate span { display:block; font-size:11px; color:var(--ink3); font-weight:500; margin-top:1px; }
.r5-akte .dwho { min-width:0; }
.r5-akte .dwho .dz { font-size:13px; font-weight:650; }
.r5-akte .dsrc { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink2); background:#f1f4f8; border-radius:6px; padding:2px 8px; margin-top:5px; }
.r5-akte .dsrc .sd { width:7px; height:7px; border-radius:50%; }
.r5-akte .sd-ueb { background:var(--ueb); } .r5-akte .sd-pp { background:var(--paypal); } .r5-akte .sd-ext { background:var(--stripe); }
.r5-akte .damt { text-align:right; font-weight:800; font-size:16px; letter-spacing:-.3px; }
.r5-akte .rq { display:flex; justify-content:flex-end; }
.r5-akte .rqbadge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; border-radius:99px; padding:4px 11px; }
.r5-akte .rq-sent { background:#e5f5ec; color:#178a50; } .r5-akte .rq-sammel { background:#f0edfd; color:#7c6cf0; } .r5-akte .rq-open { background:#fdf3e2; color:#c07600; } .r5-akte .rq-ext { background:#f1f4f8; color:#8b98ad; }
.r5-akte .rqbadge svg { width:11px; height:11px; fill:none; stroke-width:2.4; }
.r5-akte .yearsep { display:flex; align-items:center; gap:10px; margin:6px 2px 2px; font-size:11.5px; font-weight:700; color:var(--ink3); }
.r5-akte .yearsep .ln { flex:1; height:1px; background:var(--line); }
.r5-akte .yearsep .sum { color:var(--ink2); }
.r5-akte .rail { display:flex; flex-direction:column; gap:16px; }
.r5-akte .rcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; }
.r5-akte .rcard h3 { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.r5-akte .rcard h3 svg { width:15px; height:15px; stroke:var(--brand); fill:none; stroke-width:2; }
.r5-akte .rsub { color:var(--ink3); font-size:11.5px; margin-top:2px; }
.r5-akte .freq { display:flex; align-items:center; gap:14px; margin-top:12px; }
.r5-akte .freqbig { font-size:30px; font-weight:800; letter-spacing:-1px; }
.r5-akte .freqbig small { font-size:14px; font-weight:700; color:var(--ink3); }
.r5-akte .freqmeta { font-size:11.5px; color:var(--ink2); font-weight:600; }
.r5-akte .freqmeta b { color:var(--ink); }
.r5-akte .spark { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; align-items:end; height:46px; margin-top:14px; }
.r5-akte .spark i { background:linear-gradient(180deg,#a78bf5,#7c6cf0); border-radius:3px 3px 1px 1px; min-height:3px; }
.r5-akte .freqfoot { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink3); display:flex; align-items:center; gap:7px; }
.r5-akte .freqfoot svg { width:14px; height:14px; stroke:var(--paypal); fill:none; stroke-width:2; flex:none; }
.r5-akte .tier { display:flex; align-items:center; gap:12px; margin-top:13px; }
.r5-akte .tbadge { font-size:12px; font-weight:800; border-radius:8px; padding:6px 12px; white-space:nowrap; }
.r5-akte .tb-bronze { background:linear-gradient(135deg,#f3e2d2,#e0bb97); color:#7a5230; }
.r5-akte .tb-silber { background:linear-gradient(135deg,#eef1f6,#cfd6e0); color:#4a5670; }
.r5-akte .tb-gold { background:linear-gradient(135deg,#f7ecc9,#e6c65a); color:#7a5f14; }
.r5-akte .tb-platin { background:linear-gradient(135deg,#e6eef2,#b9cdd8); color:#37525e; }
.r5-akte .tb-diamant { background:linear-gradient(135deg,#e6f0fb,#a8cbf0); color:#26547e; }
.r5-akte .tb-none { background:#eef1f6; color:var(--ink3); }
.r5-akte .tmeta { font-size:11.5px; color:var(--ink2); font-weight:600; line-height:1.45; }
.r5-akte .tmeta b { color:var(--ink); }
.r5-akte .tprog { margin-top:14px; }
.r5-akte .tpbar { height:8px; border-radius:99px; background:#eef1f6; overflow:hidden; }
.r5-akte .tpbar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#f3d284,#e0b24d); }
.r5-akte .tpfoot { font-size:11px; color:var(--ink3); font-weight:600; margin-top:7px; }
.r5-akte .tpfoot b { color:var(--ink2); }
.r5-akte .sammel { background:linear-gradient(135deg,#2a1f4a,#3d2e6b); color:#fff; border:none; }
.r5-akte .sammel h3 { color:#fff; } .r5-akte .sammel h3 svg { stroke:#c9b8fb; }
.r5-akte .sammel .rsub { color:#c9b8fb; }
.r5-akte .sammelbig { font-size:27px; font-weight:800; letter-spacing:-.8px; margin-top:11px; }
.r5-akte .sammelrow { display:flex; justify-content:space-between; font-size:12.5px; margin-top:9px; color:#d9d0f6; }
.r5-akte .sammelrow b { color:#fff; }
.r5-akte .sammelbtn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; padding:10px; border-radius:9px; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; }
.r5-akte .sammelbtn svg { width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2; }
.r5-akte .mlist { display:flex; flex-direction:column; gap:0; margin-top:10px; }
.r5-akte .mrow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line); text-decoration:none; color:inherit; }
.r5-akte .mrow:last-child { border:none; }
.r5-akte .mrow .mi { width:26px; height:26px; border-radius:8px; background:#e8effd; display:grid; place-items:center; flex:none; }
.r5-akte .mrow .mi svg { width:13px; height:13px; stroke:#1e56c8; fill:none; stroke-width:2; }
.r5-akte .mrow .mtx { min-width:0; }
.r5-akte .mrow .mt { font-size:12.5px; font-weight:650; }
.r5-akte .mrow .mm { font-size:11px; color:var(--ink3); font-weight:600; margin-top:1px; }
.r5-akte .mrow .mst { margin-left:auto; font-size:10px; font-weight:700; color:var(--ok); background:#e5f5ec; border-radius:99px; padding:2px 8px; flex:none; }
.r5-akte .acts { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.r5-akte .actbtn { display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:11px; border:1px solid var(--line); background:#fbfcfe; font-size:12.5px; font-weight:650; color:var(--ink); text-decoration:none; }
.r5-akte .actbtn .ai { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; }
.r5-akte .actbtn .ai svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.r5-akte .actbtn small { display:block; color:var(--ink3); font-weight:500; font-size:11px; }
.r5-akte .actbtn.pri { border:none; background:linear-gradient(135deg,#1e56c8,#2f6fe0); color:#fff; box-shadow:0 4px 12px -4px rgba(30,86,200,.55); }
.r5-akte .actbtn.pri .ai { background:rgba(255,255,255,.2); color:#fff; } .r5-akte .actbtn.pri small { color:#cfe0f2; }
.r5-akte .ic-blue { background:#e8effd; color:#1e56c8; } .r5-akte .ic-grn { background:#e5f5ec; color:#178a50; } .r5-akte .ic-vio { background:#f0edfd; color:#7c6cf0; }
.r5-akte .apanel { display:block; }
.r5-akte .apanel.hidden { display:none; }
/* Bestands-Formulare im Adresse-&-Daten-Tab: v3-Kartenlook */
.r5-akte .r5-formcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:14px; }
.ver-r6 * { box-sizing: border-box; }
.ver-r6 a { text-decoration: none; }
/* App-weit setzen h1/h2/h3 die Display-Serif; im R6-Zielbild sind alle
   Überschriften Inter (wie in den Mockups) → auf Container-Font zurücksetzen. */
.ver-r6 h1, .ver-r6 h2, .ver-r6 h3 { font-family: inherit; }
.ver-r6 .num { font-variant-numeric: tabular-nums; }
/* Ehrlicher „im Aufbau"/Leerzustand (Datengrundlage fehlt) — 1:1-Layout-Karte. */
.ver-r6 .emptybox { min-height:150px; margin-top:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; border:1px dashed var(--line); border-radius:12px; background:#fbfcfe; color:var(--ink3); padding:18px }
.ver-r6 .emptybox svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; opacity:.55 }
.ver-r6 .emptybox span { font-size:13px; font-weight:700; color:var(--ink2) }
.ver-r6 .emptybox small { font-size:11.5px; font-weight:600; max-width:340px }
/* R6-PAGES-APPEND-START */
/* --- event_loop --- */
.ver-r6--event_loop .num { font-variant-numeric:tabular-nums }
.ver-r6--event_loop .main { padding:22px 28px 40px }
.ver-r6--event_loop .top { display:flex;align-items:center;gap:16px;margin-bottom:16px }
.ver-r6--event_loop .top h1 { font-size:21px;letter-spacing:-.3px }
.ver-r6--event_loop .crumb { color:var(--ink3);font-weight:500;font-size:12.5px;margin-top:3px;display:flex;align-items:center;gap:6px }
.ver-r6--event_loop .crumb b { color:var(--ink2);font-weight:600 }
.ver-r6--event_loop .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line); border-radius:11px;padding:8px 14px;color:var(--ink3);width:270px;box-shadow:var(--shadow) }
.ver-r6--event_loop .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.ver-r6--event_loop .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px }
.ver-r6--event_loop .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--event_loop .ehero { background:linear-gradient(120deg,#0f5a53 0%,#12796a 55%,#1a9c74 100%);color:#fff;border-radius:var(--r); padding:22px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow) }
.ver-r6--event_loop .ehero::after { content:'';position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%) }
.ver-r6--event_loop .ehero .etags { display:flex;gap:8px;margin-bottom:12px }
.ver-r6--event_loop .etag { font-size:11px;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,.16);color:#eafff8;border-radius:7px;padding:4px 10px }
.ver-r6--event_loop .etag.solid { background:rgba(255,255,255,.92);color:#0f5a53 }
.ver-r6--event_loop .ehero h2 { font-size:27px;letter-spacing:-.6px;font-weight:800 }
.ver-r6--event_loop .emeta { display:flex;gap:22px;margin-top:11px;font-size:13px;color:#d3f2ea;font-weight:500;flex-wrap:wrap }
.ver-r6--event_loop .emeta span { display:inline-flex;align-items:center;gap:7px }
.ver-r6--event_loop .emeta svg { width:15px;height:15px;stroke:#a8e6d6;fill:none;stroke-width:2 }
.ver-r6--event_loop .ehero .side-right { position:absolute;right:26px;top:22px;text-align:right }
.ver-r6--event_loop .ehero .side-right .cnt { font-size:30px;font-weight:800;letter-spacing:-.8px }
.ver-r6--event_loop .ehero .side-right .cnt small { font-size:14px;font-weight:600;color:#cdeee4 }
.ver-r6--event_loop .ebar { width:250px;height:9px;border-radius:99px;background:rgba(255,255,255,.2);margin:9px 0 0 auto;position:relative;overflow:hidden }
.ver-r6--event_loop .ebar i { position:absolute;inset:0;width:69%;border-radius:99px;background:linear-gradient(90deg,#d8fff2,#8ff2d0) }
.ver-r6--event_loop .tabs { display:flex;gap:2px;margin:16px 0 18px;border-bottom:1px solid var(--line) }
.ver-r6--event_loop .tabs a { padding:11px 18px;font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px }
.ver-r6--event_loop .tabs a.on { color:var(--brand);border-color:var(--brand) }
.ver-r6--event_loop .tabs a .tb { margin-left:7px;font-size:11px;font-weight:700;background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 7px }
.ver-r6--event_loop .tabs a.on .tb { background:#e8effd;color:var(--brand) }
.ver-r6--event_loop .work { display:grid;grid-template-columns:1fr 322px;gap:16px;align-items:start }
.ver-r6--event_loop .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--event_loop .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--event_loop .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--event_loop .card h2 .r { margin-left:auto;display:flex;gap:8px }
.ver-r6--event_loop .btn { display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:650;color:var(--ink2);cursor:pointer }
.ver-r6--event_loop .btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff }
.ver-r6--event_loop .btn.gate { background:linear-gradient(180deg,#1e63d6,#1a52bb);border-color:#1a52bb;color:#fff;box-shadow:0 6px 16px -8px rgba(30,86,200,.7) }
.ver-r6--event_loop .counters { display:flex;gap:10px;margin:15px 0 14px }
.ver-r6--event_loop .kchip { display:flex;flex-direction:column;padding:9px 15px;border-radius:11px;background:#f6f8fb;border:1px solid var(--line);min-width:96px }
.ver-r6--event_loop .kchip b { font-size:19px;letter-spacing:-.3px }
.ver-r6--event_loop .kchip span { font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:.4px;margin-top:1px }
.ver-r6--event_loop .kchip.amb b { color:var(--warn) }
.ver-r6--event_loop .kchip.mut b { color:var(--ink3) }
.ver-r6--event_loop .fbar { display:flex;align-items:center;gap:9px;margin-bottom:6px }
.ver-r6--event_loop .fsearch { display:flex;align-items:center;gap:8px;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--ink3);flex:1;font-size:12.5px }
.ver-r6--event_loop .fsearch svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer }
.ver-r6--event_loop .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.ver-r6--event_loop table { width:100%;border-collapse:collapse;font-size:13px }
.ver-r6--event_loop th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line) }
.ver-r6--event_loop td { padding:10px 8px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.ver-r6--event_loop tr:last-child td { border:none }
.ver-r6--event_loop .mcell { display:flex;align-items:center;gap:11px }
.ver-r6--event_loop .av { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11.5px;flex:none }
.ver-r6--event_loop .mcell b { font-size:13px;font-weight:650;display:block }
.ver-r6--event_loop .mcell small { font-size:11px;color:var(--ink3) }
.ver-r6--event_loop .tk { font-weight:600 }
.ver-r6--event_loop .tk small { display:block;font-size:11px;color:var(--ink3);font-weight:500 }
.ver-r6--event_loop .pchip { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 10px }
.ver-r6--event_loop .pchip .d { width:6px;height:6px;border-radius:50%;background:currentColor }
.ver-r6--event_loop .p-paid { background:#e5f5ec;color:#178a50 }
.ver-r6--event_loop .p-open { background:#fdf3e2;color:#c07600 }
.ver-r6--event_loop .p-ref { background:#eef1f6;color:#7d8aa0 }
.ver-r6--event_loop .gchip { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#6d5bd0;background:#f0edfd;border-radius:99px;padding:3px 9px }
.ver-r6--event_loop .step { display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px }
.ver-r6--event_loop .step b { width:22px;height:24px;display:grid;place-items:center;color:var(--ink3);font-weight:700;background:#f6f8fb }
.ver-r6--event_loop .step i { min-width:26px;text-align:center;font-weight:700;font-style:normal;color:var(--ink) }
.ver-r6--event_loop .checkin { width:26px;height:26px;border-radius:8px;border:1.6px solid var(--line);display:grid;place-items:center;background:#fff }
.ver-r6--event_loop .checkin.on { background:#178a50;border-color:#178a50 }
.ver-r6--event_loop .checkin svg { width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.6;display:none }
.ver-r6--event_loop .checkin.on svg { display:block }
.ver-r6--event_loop .tgl { width:38px;height:21px;border-radius:99px;background:#e2e7ef;position:relative;display:inline-block }
.ver-r6--event_loop .tgl::after { content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2) }
.ver-r6--event_loop .tgl.on { background:#c93a4a }
.ver-r6--event_loop .tgl.on::after { left:19.5px }
.ver-r6--event_loop .noteic { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink3);position:relative }
.ver-r6--event_loop .noteic svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .noteic.has { color:var(--brand) }
.ver-r6--event_loop .noteic.has::after { content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:#e5484d }
.ver-r6--event_loop .guestrow td { background:#faf9ff }
.ver-r6--event_loop .colc { text-align:center }
.ver-r6--event_loop .rail { display:flex;flex-direction:column;gap:16px }
.ver-r6--event_loop .rc h3 { display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700 }
.ver-r6--event_loop .rc h3 svg { width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--event_loop .rc h3 .cn { margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:99px;padding:2px 9px }
.ver-r6--event_loop .abs { display:flex;flex-direction:column;gap:9px;margin-top:12px }
.ver-r6--event_loop .absrow { display:flex;align-items:flex-start;gap:10px;padding-bottom:9px;border-bottom:1px dashed var(--line) }
.ver-r6--event_loop .absrow:last-child { border:none;padding-bottom:0 }
.ver-r6--event_loop .absrow .av { width:28px;height:28px;font-size:10.5px;background:#94a3b8 }
.ver-r6--event_loop .absrow b { font-size:12.5px;font-weight:650;display:block }
.ver-r6--event_loop .absrow small { font-size:11px;color:var(--ink3) }
.ver-r6--event_loop .srcchip { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink2);background:#f1f4f8;border-radius:6px;padding:2px 7px;margin-top:4px }
.ver-r6--event_loop .srcchip a { color:var(--brand);font-weight:700;text-decoration:none }
.ver-r6--event_loop .srcchip svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .paycard { background:#fffaf0;border-color:#f4e2c0 }
.ver-r6--event_loop .paybig { display:flex;align-items:baseline;gap:9px;margin:11px 0 4px }
.ver-r6--event_loop .paybig b { font-size:24px;font-weight:800;color:var(--warn) }
.ver-r6--event_loop .paybig span { font-size:12.5px;color:var(--ink2);font-weight:600 }
.ver-r6--event_loop .paysub { font-size:12px;color:var(--ink2);margin-bottom:12px }
.ver-r6--event_loop .full { margin-bottom:16px }
.ver-r6--event_loop .funnel { display:flex;flex-direction:column;gap:9px;margin-top:14px }
.ver-r6--event_loop .fstep { display:grid;grid-template-columns:150px 1fr 96px;align-items:center;gap:14px }
.ver-r6--event_loop .fstep .fl { font-size:13px;font-weight:650;color:var(--ink2) }
.ver-r6--event_loop .fstep .fl small { display:block;font-size:11px;color:var(--ink3);font-weight:500 }
.ver-r6--event_loop .ftrack { height:34px;background:#f2f5f9;border-radius:9px;position:relative;overflow:hidden }
.ver-r6--event_loop .ftrack i { position:absolute;left:0;top:0;bottom:0;border-radius:9px;display:flex;align-items:center;padding-left:14px;color:#fff;font-weight:700;font-size:13.5px }
.ver-r6--event_loop .f1 { width:100%;background:linear-gradient(90deg,#1e56c8,#3b74e0) }
.ver-r6--event_loop .f2 { width:57.5%;background:linear-gradient(90deg,#0ea5a4,#22b7ac) }
.ver-r6--event_loop .f3 { width:20%;background:linear-gradient(90deg,#178a50,#28a862) }
.ver-r6--event_loop .fpct { text-align:right;font-weight:800;font-size:15px }
.ver-r6--event_loop .fpct small { display:block;font-size:10.5px;color:var(--ink3);font-weight:600 }
.ver-r6--event_loop .goalrow { display:grid;grid-template-columns:150px 1fr 96px;align-items:center;gap:14px;margin-top:3px;padding-top:11px;border-top:1px dashed var(--line) }
.ver-r6--event_loop .goaltrack { height:34px;border:1.5px dashed #bcd3f7;border-radius:9px;position:relative;background:repeating-linear-gradient(45deg,#f6f9ff,#f6f9ff 8px,#eef4ff 8px,#eef4ff 16px) }
.ver-r6--event_loop .goaltrack .tk { position:absolute;top:-4px;bottom:-4px;left:65.4%;width:2.5px;background:#c07600;border-radius:2px }
.ver-r6--event_loop .goaltrack .tklab { position:absolute;left:65.4%;top:-19px;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:#c07600;white-space:nowrap }
.ver-r6--event_loop .goaltrack span { position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:700;color:var(--ink2) }
.ver-r6--event_loop .diff { display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;border-radius:99px;padding:3px 10px }
.ver-r6--event_loop .d-bad { background:#fdeaec;color:#c93a4a }
.ver-r6--event_loop .d-warn { background:#fdf3e2;color:#c07600 }
.ver-r6--event_loop .d-good { background:#e5f5ec;color:#178a50 }
.ver-r6--event_loop .khtag { display:inline-block;font-size:11px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:6px;padding:1px 7px;margin-left:7px }
.ver-r6--event_loop .prep { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#178a50;background:#e5f5ec;border:1px solid #bfe6cf;border-radius:8px;padding:6px 12px }
.ver-r6--event_loop .prep svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6 }
.ver-r6--event_loop .nfbtn { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--brand);background:#e8effd;border:1px solid #bcd3f7;border-radius:8px;padding:6px 12px }
.ver-r6--event_loop .nfbtn svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .nfcard { background:linear-gradient(180deg,#f4f8ff,#ffffff);border-color:#cfe0fb }
.ver-r6--event_loop .nfhead { display:flex;align-items:center;gap:10px }
.ver-r6--event_loop .nfhead .lock { width:30px;height:30px;border-radius:9px;background:#e8effd;display:grid;place-items:center;color:var(--brand) }
.ver-r6--event_loop .nfhead .lock svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .nfgrid { display:flex;gap:10px;margin:14px 0;flex-wrap:wrap }
.ver-r6--event_loop .nfcell { flex:1;min-width:130px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 13px }
.ver-r6--event_loop .nfcell span { font-size:10.5px;font-weight:700;letter-spacing:.4px;color:var(--ink3) }
.ver-r6--event_loop .nfcell b { display:block;font-size:16px;margin-top:2px }
.ver-r6--event_loop .kohchips { display:flex;gap:6px;margin-top:5px }
.ver-r6--event_loop .kchip2 { font-size:11px;font-weight:700;color:var(--brand);background:#e8effd;border-radius:6px;padding:2px 8px }
.ver-r6--event_loop .chan { display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink2) }
.ver-r6--event_loop .chan .ci { width:22px;height:22px;border-radius:6px;display:grid;place-items:center }
.ver-r6--event_loop .chan .ci svg { width:13px;height:13px;fill:none;stroke-width:2 }
.ver-r6--event_loop .fz { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--warn);background:#fdf3e2;border-radius:8px;padding:5px 11px }
.ver-r6--event_loop .fz svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_loop .nffoot { display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line) }
.ver-r6--event_loop .cmp { margin-top:14px;display:flex;flex-direction:column;gap:14px }
.ver-r6--event_loop .cmprow .cl { display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px }
.ver-r6--event_loop .cmprow .cl b { font-size:17px;font-weight:800;color:var(--ink);white-space:nowrap;flex:none }
.ver-r6--event_loop .cmpbar { height:11px;border-radius:99px;background:#eef1f6;overflow:hidden }
.ver-r6--event_loop .cmpbar i { display:block;height:100%;border-radius:99px }
.ver-r6--event_loop .cmp-a i { background:linear-gradient(90deg,#178a50,#28a862) }
.ver-r6--event_loop .cmp-b i { background:linear-gradient(90deg,#94a3b8,#b6c0cf) }
.ver-r6--event_loop .wsum { margin-top:14px;padding:11px 13px;border-radius:11px;background:#e5f5ec;font-size:12.5px;color:#136b3f;font-weight:600;line-height:1.5 }
.ver-r6--event_loop .wsum b { font-weight:800 }
.ver-r6--event_loop .kostenchip { display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe }
.ver-r6--event_loop .kostenchip .kv { font-size:19px;font-weight:800 }
.ver-r6--event_loop .kostenchip .kl { font-size:11.5px;color:var(--ink3);font-weight:600 }
.ver-r6--event_loop .kostenchip a { margin-left:auto;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap }

/* --- event_detail --- */
.ver-r6--event_detail .num { font-variant-numeric:tabular-nums }
.ver-r6--event_detail .main { padding:22px 28px 40px }
.ver-r6--event_detail .crumbs { display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);font-weight:600;margin-bottom:14px }
.ver-r6--event_detail .crumbs a { color:var(--brand);text-decoration:none }
.ver-r6--event_detail .crumbs svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2 }
.ver-r6--event_detail .crumbs .hpill { margin-left:auto }
.ver-r6--event_detail .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px }
.ver-r6--event_detail .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--event_detail .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.ver-r6--event_detail .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--event_detail .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--event_detail .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--event_detail .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.ver-r6--event_detail .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.ver-r6--event_detail .hero { grid-column:span 12;position:relative;overflow:hidden;border:none;padding:0;color:#fff;border-radius:var(--r);box-shadow:var(--shadow) }
.ver-r6--event_detail .hero .bg { position:absolute;inset:0;background:linear-gradient(120deg,#0ea5a4 0%,#0f766e 55%,#10304f 100%) }
.ver-r6--event_detail .hero .bg::after { content:'';position:absolute;right:-60px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%) }
.ver-r6--event_detail .hero .inner { position:relative;padding:24px 28px;display:flex;align-items:flex-end;gap:26px }
.ver-r6--event_detail .hero .badges { display:flex;gap:8px;margin-bottom:11px }
.ver-r6--event_detail .hero .badges .t { background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:11px;font-weight:700;border-radius:7px;padding:3px 10px;letter-spacing:.4px }
.ver-r6--event_detail .hero .badges .paytag { background:#fff;color:#0f2b46 }
.ver-r6--event_detail .hero h1 { font-size:30px;letter-spacing:-.6px;line-height:1.1 }
.ver-r6--event_detail .hero .hmeta { display:flex;gap:24px;margin-top:12px;font-size:13.5px;color:#dceaf4;font-weight:500 }
.ver-r6--event_detail .hero .hmeta div { display:flex;align-items:center;gap:8px }
.ver-r6--event_detail .hero .hmeta svg { width:15px;height:15px;stroke:#a9d3d0;fill:none;stroke-width:2 }
.ver-r6--event_detail .hero .right { margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px }
.ver-r6--event_detail .hero .reg { display:flex;align-items:baseline;gap:9px }
.ver-r6--event_detail .hero .reg .v { font-size:34px;font-weight:800;letter-spacing:-1px }
.ver-r6--event_detail .hero .reg .of { font-size:14px;color:#bfe0dd;font-weight:600 }
.ver-r6--event_detail .hero .subreg { font-size:12px;color:#bfe0dd;font-weight:600 }
.ver-r6--event_detail .hero .subreg b { color:#fff }
.ver-r6--event_detail .hbar { width:260px;height:9px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden }
.ver-r6--event_detail .hbar i { display:block;height:100%;width:78%;border-radius:99px;background:linear-gradient(90deg,#4ade80,#a7f3d0) }
.ver-r6--event_detail .hero .acts { display:flex;gap:9px }
.ver-r6--event_detail .hbtn { display:flex;align-items:center;gap:7px;background:#fff;color:#0f2b46;border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:700 }
.ver-r6--event_detail .hbtn.ghost { background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22) }
.ver-r6--event_detail .hbtn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_detail .tabs { grid-column:span 12;display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:5px }
.ver-r6--event_detail .tabs a { display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none }
.ver-r6--event_detail .tabs a svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_detail .tabs a.on { background:#e8effd;color:var(--brand) }
.ver-r6--event_detail .tabs a .cnt { font-size:11px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:99px;padding:1px 7px }
.ver-r6--event_detail .tabs a.on .cnt { background:#d6e3fb;color:var(--brand) }
.ver-r6--event_detail .koh { grid-column:span 4;display:flex;flex-direction:column }
.ver-r6--event_detail .blk { margin-top:14px }
.ver-r6--event_detail .blk .bt { font-size:11px;letter-spacing:.8px;color:var(--ink3);font-weight:700;text-transform:uppercase;margin-bottom:9px }
.ver-r6--event_detail .prow { display:flex;align-items:center;gap:10px;margin-bottom:8px }
.ver-r6--event_detail .prow .lb { width:78px;font-size:12px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:6px }
.ver-r6--event_detail .prow .lb i { width:8px;height:8px;border-radius:2px;flex:none }
.ver-r6--event_detail .prow .rbar { flex:1;height:13px;background:#f1f4f8;border-radius:6px;overflow:hidden }
.ver-r6--event_detail .prow .rbar i { display:block;height:100%;border-radius:6px }
.ver-r6--event_detail .prow b { font-size:11.5px;min-width:30px;text-align:right;color:var(--ink2) }
.ver-r6--event_detail .c-bsc { background:var(--bsc) }
.ver-r6--event_detail .c-msc { background:var(--msc) }
.ver-r6--event_detail .c-mba { background:var(--mba) }
.ver-r6--event_detail .c-phd { background:var(--phd) }
.ver-r6--event_detail .distro { display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:4px }
.ver-r6--event_detail .distro .dc { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end }
.ver-r6--event_detail .distro .dc i { width:100%;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#5b8def,#1e56c8) }
.ver-r6--event_detail .distro .dc span { font-size:9.5px;color:var(--ink3);font-weight:600 }
.ver-r6--event_detail .repchips { display:flex;flex-direction:column;gap:6px;margin-top:4px }
.ver-r6--event_detail .repchip { display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 10px;border-radius:9px;background:#f6f8fb;border:1px solid var(--line) }
.ver-r6--event_detail .repchip .up { color:var(--ok);font-weight:800 }
.ver-r6--event_detail .repchip .dn { color:var(--bad);font-weight:800 }
.ver-r6--event_detail .repchip b { font-weight:700 }
.ver-r6--event_detail .repchip .tag { margin-left:auto;font-size:10px;font-weight:700;color:#fff;border-radius:5px;padding:2px 7px }
.ver-r6--event_detail .pay { grid-column:span 4;display:flex;flex-direction:column }
.ver-r6--event_detail .paygrid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px }
.ver-r6--event_detail .paycell { background:#f6f8fb;border:1px solid var(--line);border-radius:11px;padding:11px 12px }
.ver-r6--event_detail .paycell b { font-size:19px;letter-spacing:-.4px;display:block }
.ver-r6--event_detail .paycell span { font-size:11px;color:var(--ink3);font-weight:600 }
.ver-r6--event_detail .paycell.ok b { color:var(--ok) }
.ver-r6--event_detail .paycell.warn b { color:var(--warn) }
.ver-r6--event_detail .paycell.bad b { color:var(--bad) }
.ver-r6--event_detail .payline { display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);font-size:12.5px }
.ver-r6--event_detail .payline .l { color:var(--ink2);font-weight:600;display:flex;align-items:center;gap:7px }
.ver-r6--event_detail .payline .l svg { width:14px;height:14px;stroke:var(--ink3);fill:none;stroke-width:2 }
.ver-r6--event_detail .payline b { margin-left:auto;font-weight:700 }
.ver-r6--event_detail .payline a { margin-left:auto;color:var(--brand);font-weight:700;text-decoration:none;font-size:12px }
.ver-r6--event_detail .paybar { height:9px;border-radius:99px;overflow:hidden;display:flex;margin-top:13px;background:#eef1f6 }
.ver-r6--event_detail .paybar i { height:100% }
.ver-r6--event_detail .payleg { display:flex;gap:14px;margin-top:9px;font-size:11px;color:var(--ink2);font-weight:600;flex-wrap:wrap }
.ver-r6--event_detail .payleg i { width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px }
.ver-r6--event_detail .tn { grid-column:span 4;display:flex;flex-direction:column }
.ver-r6--event_detail .tnrow { display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line) }
.ver-r6--event_detail .tnrow:last-child { border:none }
.ver-r6--event_detail .tnav { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11.5px;flex:none }
.ver-r6--event_detail .tnn b { font-size:13px;display:block;line-height:1.25 }
.ver-r6--event_detail .tnn span { font-size:11px;color:var(--ink3) }
.ver-r6--event_detail .tnstat { margin-left:auto;display:flex;align-items:center;gap:6px }
.ver-r6--event_detail .tpill { font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 9px }
.ver-r6--event_detail .p-ok { background:#e5f5ec;color:#178a50 }
.ver-r6--event_detail .p-open { background:#fdf3e2;color:#c07600 }
.ver-r6--event_detail .p-guest { background:#f0edfd;color:#6d5bd0 }
.ver-r6--event_detail .p-rl { background:#fdeaec;color:#c93a4a }
.ver-r6--event_detail .tnfoot { margin-top:13px;display:flex;align-items:center;gap:10px }
.ver-r6--event_detail .btn { display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--ink2) }
.ver-r6--event_detail .btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_detail .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff }
.ver-r6--event_detail .tl { grid-column:span 12 }
.ver-r6--event_detail .camplink { display:flex;align-items:center;gap:10px;margin:10px 0 4px;padding:11px 14px;background:#f6f8fb;border:1px solid var(--line);border-radius:11px;font-size:12.5px;color:var(--ink2) }
.ver-r6--event_detail .camplink .ci { width:30px;height:30px;border-radius:9px;background:#e8effd;color:var(--brand);display:grid;place-items:center;flex:none }
.ver-r6--event_detail .camplink .ci svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--event_detail .camplink b { color:var(--ink);font-weight:700 }
.ver-r6--event_detail .camplink .cid { font-weight:700;color:var(--ink3);background:#eef1f6;border-radius:6px;padding:2px 8px;margin-left:4px }
.ver-r6--event_detail .camplink a { margin-left:auto;color:var(--brand);font-weight:700;text-decoration:none }
.ver-r6--event_detail table { width:100%;border-collapse:collapse;font-size:13px }
.ver-r6--event_detail th { font-size:11px;letter-spacing:.8px;color:var(--ink3);text-align:left;font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line) }
.ver-r6--event_detail td { padding:12px 10px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.ver-r6--event_detail tr:last-child td { border:none }
.ver-r6--event_detail .stage { display:flex;align-items:center;gap:10px;font-weight:700 }
.ver-r6--event_detail .stage .no { width:26px;height:26px;border-radius:8px;background:#e8effd;color:var(--brand);display:grid;place-items:center;font-size:12px;flex:none }
.ver-r6--event_detail .stage small { display:block;font-weight:500;color:var(--ink3);font-size:11px }
.ver-r6--event_detail .ch { display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;margin-right:4px }
.ver-r6--event_detail .ch svg { width:13px;height:13px;stroke-width:2;fill:none }
.ver-r6--event_detail .c-blue { background:#e8effd;color:#1e56c8 }
.ver-r6--event_detail .c-grn { background:#e5f5ec;color:#178a50 }
.ver-r6--event_detail .c-vio { background:#f0edfd;color:#7c6cf0 }
.ver-r6--event_detail .c-amb { background:#fdf3e2;color:#c07600 }
.ver-r6--event_detail .conv { display:flex;align-items:center;gap:9px }
.ver-r6--event_detail .cbar { flex:1;max-width:150px;height:7px;background:#eef1f6;border-radius:99px;overflow:hidden }
.ver-r6--event_detail .cbar i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#178a50) }
.ver-r6--event_detail .conv b { font-size:13px;min-width:44px }
.ver-r6--event_detail .links a { color:var(--brand);font-weight:600;font-size:12px;text-decoration:none;margin-right:10px;white-space:nowrap }

/* --- teilnehmer --- */
.ver-r6--teilnehmer .num { font-variant-numeric:tabular-nums }
.ver-r6--teilnehmer .main { padding:22px 28px 40px }
.ver-r6--teilnehmer .top { display:flex;align-items:center;gap:16px;margin-bottom:16px }
.ver-r6--teilnehmer .top h1 { font-size:21px;letter-spacing:-.3px }
.ver-r6--teilnehmer .crumb { color:var(--ink3);font-weight:500;font-size:12.5px;margin-top:3px;display:flex;align-items:center;gap:6px }
.ver-r6--teilnehmer .crumb b { color:var(--ink2);font-weight:600 }
.ver-r6--teilnehmer .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line); border-radius:11px;padding:8px 14px;color:var(--ink3);width:270px;box-shadow:var(--shadow) }
.ver-r6--teilnehmer .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.ver-r6--teilnehmer .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px }
.ver-r6--teilnehmer .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--teilnehmer .ehero { background:linear-gradient(120deg,#0f5a53 0%,#12796a 55%,#1a9c74 100%);color:#fff;border-radius:var(--r); padding:22px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow) }
.ver-r6--teilnehmer .ehero::after { content:'';position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%) }
.ver-r6--teilnehmer .ehero .etags { display:flex;gap:8px;margin-bottom:12px }
.ver-r6--teilnehmer .etag { font-size:11px;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,.16);color:#eafff8;border-radius:7px;padding:4px 10px }
.ver-r6--teilnehmer .etag.solid { background:rgba(255,255,255,.92);color:#0f5a53 }
.ver-r6--teilnehmer .ehero h2 { font-size:27px;letter-spacing:-.6px;font-weight:800 }
.ver-r6--teilnehmer .emeta { display:flex;gap:22px;margin-top:11px;font-size:13px;color:#d3f2ea;font-weight:500;flex-wrap:wrap }
.ver-r6--teilnehmer .emeta span { display:inline-flex;align-items:center;gap:7px }
.ver-r6--teilnehmer .emeta svg { width:15px;height:15px;stroke:#a8e6d6;fill:none;stroke-width:2 }
.ver-r6--teilnehmer .ehero .side-right { position:absolute;right:26px;top:22px;text-align:right }
.ver-r6--teilnehmer .ehero .side-right .cnt { font-size:30px;font-weight:800;letter-spacing:-.8px }
.ver-r6--teilnehmer .ehero .side-right .cnt small { font-size:14px;font-weight:600;color:#cdeee4 }
.ver-r6--teilnehmer .ebar { width:250px;height:9px;border-radius:99px;background:rgba(255,255,255,.2);margin:9px 0 0 auto;position:relative;overflow:hidden }
.ver-r6--teilnehmer .ebar i { position:absolute;inset:0;width:69%;border-radius:99px;background:linear-gradient(90deg,#d8fff2,#8ff2d0) }
.ver-r6--teilnehmer .tabs { display:flex;gap:2px;margin:16px 0 18px;border-bottom:1px solid var(--line) }
.ver-r6--teilnehmer .tabs a { padding:11px 18px;font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px }
.ver-r6--teilnehmer .tabs a.on { color:var(--brand);border-color:var(--brand) }
.ver-r6--teilnehmer .tabs a .tb { margin-left:7px;font-size:11px;font-weight:700;background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 7px }
.ver-r6--teilnehmer .tabs a.on .tb { background:#e8effd;color:var(--brand) }
.ver-r6--teilnehmer .work { display:grid;grid-template-columns:1fr 322px;gap:16px;align-items:start }
.ver-r6--teilnehmer .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--teilnehmer .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--teilnehmer .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--teilnehmer .card h2 .r { margin-left:auto;display:flex;gap:8px }
.ver-r6--teilnehmer .btn { display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:650;color:var(--ink2);cursor:pointer }
.ver-r6--teilnehmer .btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--teilnehmer .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff }
.ver-r6--teilnehmer .btn.gate { background:linear-gradient(180deg,#1e63d6,#1a52bb);border-color:#1a52bb;color:#fff;box-shadow:0 6px 16px -8px rgba(30,86,200,.7) }
.ver-r6--teilnehmer .counters { display:flex;gap:10px;margin:15px 0 14px }
.ver-r6--teilnehmer .kchip { display:flex;flex-direction:column;padding:9px 15px;border-radius:11px;background:#f6f8fb;border:1px solid var(--line);min-width:96px }
.ver-r6--teilnehmer .kchip b { font-size:19px;letter-spacing:-.3px }
.ver-r6--teilnehmer .kchip span { font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:.4px;margin-top:1px }
.ver-r6--teilnehmer .kchip.amb b { color:var(--warn) }
.ver-r6--teilnehmer .kchip.mut b { color:var(--ink3) }
.ver-r6--teilnehmer .fbar { display:flex;align-items:center;gap:9px;margin-bottom:6px }
.ver-r6--teilnehmer .fsearch { display:flex;align-items:center;gap:8px;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--ink3);flex:1;font-size:12.5px }
.ver-r6--teilnehmer .fsearch svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--teilnehmer .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer }
.ver-r6--teilnehmer .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.ver-r6--teilnehmer table { width:100%;border-collapse:collapse;font-size:13px }
.ver-r6--teilnehmer th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line) }
.ver-r6--teilnehmer td { padding:10px 8px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.ver-r6--teilnehmer tr:last-child td { border:none }
.ver-r6--teilnehmer .mcell { display:flex;align-items:center;gap:11px }
.ver-r6--teilnehmer .av { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11.5px;flex:none }
.ver-r6--teilnehmer .mcell b { font-size:13px;font-weight:650;display:block }
.ver-r6--teilnehmer .mcell small { font-size:11px;color:var(--ink3) }
.ver-r6--teilnehmer .tk { font-weight:600 }
.ver-r6--teilnehmer .tk small { display:block;font-size:11px;color:var(--ink3);font-weight:500 }
.ver-r6--teilnehmer .pchip { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 10px }
.ver-r6--teilnehmer .pchip .d { width:6px;height:6px;border-radius:50%;background:currentColor }
.ver-r6--teilnehmer .p-paid { background:#e5f5ec;color:#178a50 }
.ver-r6--teilnehmer .p-open { background:#fdf3e2;color:#c07600 }
.ver-r6--teilnehmer .p-ref { background:#eef1f6;color:#7d8aa0 }
.ver-r6--teilnehmer .gchip { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#6d5bd0;background:#f0edfd;border-radius:99px;padding:3px 9px }
.ver-r6--teilnehmer .step { display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px }
.ver-r6--teilnehmer .step b { width:22px;height:24px;display:grid;place-items:center;color:var(--ink3);font-weight:700;background:#f6f8fb }
.ver-r6--teilnehmer .step i { min-width:26px;text-align:center;font-weight:700;font-style:normal;color:var(--ink) }
.ver-r6--teilnehmer .checkin { width:26px;height:26px;border-radius:8px;border:1.6px solid var(--line);display:grid;place-items:center;background:#fff }
.ver-r6--teilnehmer .checkin.on { background:#178a50;border-color:#178a50 }
.ver-r6--teilnehmer .checkin svg { width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.6;display:none }
.ver-r6--teilnehmer .checkin.on svg { display:block }
.ver-r6--teilnehmer .tgl { width:38px;height:21px;border-radius:99px;background:#e2e7ef;position:relative;display:inline-block }
.ver-r6--teilnehmer .tgl::after { content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2) }
.ver-r6--teilnehmer .tgl.on { background:#c93a4a }
.ver-r6--teilnehmer .tgl.on::after { left:19.5px }
.ver-r6--teilnehmer .noteic { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink3);position:relative }
.ver-r6--teilnehmer .noteic svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--teilnehmer .noteic.has { color:var(--brand) }
.ver-r6--teilnehmer .noteic.has::after { content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:#e5484d }
.ver-r6--teilnehmer .guestrow td { background:#faf9ff }
.ver-r6--teilnehmer .colc { text-align:center }
.ver-r6--teilnehmer .rail { display:flex;flex-direction:column;gap:16px }
.ver-r6--teilnehmer .rc h3 { display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700 }
.ver-r6--teilnehmer .rc h3 svg { width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--teilnehmer .rc h3 .cn { margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:99px;padding:2px 9px }
.ver-r6--teilnehmer .abs { display:flex;flex-direction:column;gap:9px;margin-top:12px }
.ver-r6--teilnehmer .absrow { display:flex;align-items:flex-start;gap:10px;padding-bottom:9px;border-bottom:1px dashed var(--line) }
.ver-r6--teilnehmer .absrow:last-child { border:none;padding-bottom:0 }
.ver-r6--teilnehmer .absrow .av { width:28px;height:28px;font-size:10.5px;background:#94a3b8 }
.ver-r6--teilnehmer .absrow b { font-size:12.5px;font-weight:650;display:block }
.ver-r6--teilnehmer .absrow small { font-size:11px;color:var(--ink3) }
.ver-r6--teilnehmer .srcchip { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink2);background:#f1f4f8;border-radius:6px;padding:2px 7px;margin-top:4px }
.ver-r6--teilnehmer .srcchip a { color:var(--brand);font-weight:700;text-decoration:none }
.ver-r6--teilnehmer .srcchip svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--teilnehmer .paycard { background:#fffaf0;border-color:#f4e2c0 }
.ver-r6--teilnehmer .paybig { display:flex;align-items:baseline;gap:9px;margin:11px 0 4px }
.ver-r6--teilnehmer .paybig b { font-size:24px;font-weight:800;color:var(--warn) }
.ver-r6--teilnehmer .paybig span { font-size:12.5px;color:var(--ink2);font-weight:600 }
.ver-r6--teilnehmer .paysub { font-size:12px;color:var(--ink2);margin-bottom:12px }

/* --- jobboard --- */
.ver-r6--jobboard .num { font-variant-numeric:tabular-nums }
.ver-r6--jobboard .main { padding:22px 28px 40px }
.ver-r6--jobboard .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.ver-r6--jobboard .top h1 { font-size:21px;letter-spacing:-.3px }
.ver-r6--jobboard .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.ver-r6--jobboard .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px;margin-left:auto }
.ver-r6--jobboard .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--jobboard .search { display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:260px;box-shadow:var(--shadow) }
.ver-r6--jobboard .layout { display:grid;grid-template-columns:1fr 560px;gap:16px;align-items:start }
.ver-r6--jobboard .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--jobboard .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--jobboard .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--jobboard .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.ver-r6--jobboard .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.ver-r6--jobboard .jtool { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 18px;margin-bottom:16px }
.ver-r6--jobboard .tbsearch { display:flex;align-items:center;gap:9px;background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:8px 13px;color:var(--ink3);width:240px }
.ver-r6--jobboard .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink2) }
.ver-r6--jobboard .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.ver-r6--jobboard .joblist { display:flex;flex-direction:column;gap:12px }
.ver-r6--jobboard .job { background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:15px 17px;position:relative }
.ver-r6--jobboard .job.sel { border-color:#bcd3f7;box-shadow:0 0 0 2px #d6e3fb,var(--shadow) }
.ver-r6--jobboard .job .jhead { display:flex;gap:14px;align-items:flex-start }
.ver-r6--jobboard .job .clogo { width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;flex:none }
.ver-r6--jobboard .job .jm { flex:1 }
.ver-r6--jobboard .job .jm h3 { font-size:15px;letter-spacing:-.2px }
.ver-r6--jobboard .job .jm .cmp { font-size:12.5px;color:var(--ink2);font-weight:600;margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.ver-r6--jobboard .job .jm .cmp svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2 }
.ver-r6--jobboard .job .jm .cmp .sep { color:var(--line) }
.ver-r6--jobboard .job .tags { display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;align-items:center }
.ver-r6--jobboard .lchip { font-size:11px;font-weight:700;border-radius:7px;padding:3px 9px }
.ver-r6--jobboard .l-lvl { background:#e8effd;color:#1e56c8 }
.ver-r6--jobboard .l-hb { background:#eef7f1;color:#178a50;display:inline-flex;align-items:center;gap:5px }
.ver-r6--jobboard .l-hb i { width:6px;height:6px;border-radius:50%;background:#178a50 }
.ver-r6--jobboard .l-new { background:#fdf3e2;color:#c07600 }
.ver-r6--jobboard .l-run { background:#f1f4f8;color:#5b6b84;display:inline-flex;align-items:center;gap:5px }
.ver-r6--jobboard .l-run svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2 }
.ver-r6--jobboard .l-run.exp { color:#b6455a;background:#fdeaec }
.ver-r6--jobboard .job .stat { position:absolute;top:15px;right:17px;font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 9px }
.ver-r6--jobboard .s-act { background:#e5f5ec;color:#178a50 }
.ver-r6--jobboard .s-exp { background:#f1f4f8;color:#8b98ad }
.ver-r6--jobboard .job .matchrow { margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:10px }
.ver-r6--jobboard .matchchip { display:inline-flex;align-items:center;gap:7px;background:#e5f5ec;color:#178a50;font-size:12px;font-weight:800;border-radius:8px;padding:5px 11px }
.ver-r6--jobboard .matchchip svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--jobboard .matchchip.zero { background:#f1f4f8;color:#8b98ad }
.ver-r6--jobboard .matchchip.hot { background:#e8effd;color:#1e56c8 }
.ver-r6--jobboard .job .matchact { margin-left:auto;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;display:inline-flex;align-items:center;gap:6px }
.ver-r6--jobboard .job .matchact svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--jobboard .job .matchact.mut { color:var(--ink3) }
.ver-r6--jobboard .panel { position:sticky;top:22px;padding:0;overflow:hidden }
.ver-r6--jobboard .phero { padding:18px 20px;background:linear-gradient(120deg,#10304f,#1b4a7c);color:#fff;position:relative }
.ver-r6--jobboard .phero .cl { display:flex;gap:13px;align-items:center }
.ver-r6--jobboard .phero .clogo { width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.2) }
.ver-r6--jobboard .phero h3 { font-size:18px;letter-spacing:-.3px }
.ver-r6--jobboard .phero .cmp { font-size:12.5px;color:#bcd2e8;font-weight:600;margin-top:2px }
.ver-r6--jobboard .phero .meta { display:flex;gap:16px;margin-top:14px;font-size:12px;color:#cfe0ee;font-weight:500;flex-wrap:wrap }
.ver-r6--jobboard .phero .meta div { display:flex;align-items:center;gap:6px }
.ver-r6--jobboard .phero .meta svg { width:13px;height:13px;stroke:#9fc0e2;fill:none;stroke-width:2 }
.ver-r6--jobboard .pbody { padding:16px 20px }
.ver-r6--jobboard .pbody h4 { font-size:11px;letter-spacing:.8px;color:var(--ink3);font-weight:700;text-transform:uppercase;margin-bottom:8px }
.ver-r6--jobboard .pbody p { font-size:13px;color:var(--ink2);line-height:1.55 }
.ver-r6--jobboard .pbody ul { margin:8px 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:6px }
.ver-r6--jobboard .pbody ul li { font-size:12.5px;color:var(--ink2);display:flex;gap:8px;align-items:flex-start }
.ver-r6--jobboard .pbody ul li::before { content:'';width:6px;height:6px;border-radius:50%;background:#1e56c8;margin-top:6px;flex:none }
.ver-r6--jobboard .hblink { display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font-size:12.5px;font-weight:700;color:var(--brand) }
.ver-r6--jobboard .hblink svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--jobboard .share { margin:6px 20px 16px;background:#f6f8fb;border:1px solid var(--line);border-radius:13px;padding:15px 16px }
.ver-r6--jobboard .share .sh { display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700 }
.ver-r6--jobboard .share .sh svg { width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--jobboard .share .sh .open { margin-left:auto;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;display:inline-flex;align-items:center;gap:5px }
.ver-r6--jobboard .share .sh .open svg { width:13px;height:13px }
.ver-r6--jobboard .share .sub { margin-bottom:10px }
.ver-r6--jobboard .cand { display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed var(--line) }
.ver-r6--jobboard .cand:last-of-type { border:none }
.ver-r6--jobboard .cbox { width:19px;height:19px;border-radius:5px;border:2px solid #bcd3f7;flex:none;display:grid;place-items:center }
.ver-r6--jobboard .cbox.on { background:var(--brand);border-color:var(--brand) }
.ver-r6--jobboard .cbox svg { width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3 }
.ver-r6--jobboard .cav { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none }
.ver-r6--jobboard .cinfo { flex:1 }
.ver-r6--jobboard .cinfo b { font-size:13px;display:block;line-height:1.25 }
.ver-r6--jobboard .cinfo span { font-size:11.5px;color:var(--ink3) }
.ver-r6--jobboard .mchips { display:flex;gap:5px;margin-top:5px;flex-wrap:wrap }
.ver-r6--jobboard .mchip { font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;background:#e5f5ec;color:#178a50 }
.ver-r6--jobboard .cscore { margin-left:auto;text-align:right;font-size:11px;color:var(--ink3);font-weight:600 }
.ver-r6--jobboard .cscore b { display:block;font-size:15px;color:var(--ok);letter-spacing:-.3px }
.ver-r6--jobboard .morecand { display:block;text-align:center;margin-top:10px;font-size:12px;font-weight:700;color:var(--brand);text-decoration:none }
.ver-r6--jobboard .sharebtn { display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;width:100%;background:var(--brand);color:#fff;border-radius:11px;padding:11px;font-size:13px;font-weight:700 }
.ver-r6--jobboard .sharebtn svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--jobboard .mailmini { margin:0 20px 18px }
.ver-r6--jobboard .mailmini h4 { font-size:11px;letter-spacing:.8px;color:var(--ink3);font-weight:700;text-transform:uppercase;margin-bottom:9px }
.ver-r6--jobboard .mmcard { border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff }
.ver-r6--jobboard .mmcard .mmcover { height:66px;background:linear-gradient(120deg,#0f3f9e,#10304f);display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px }
.ver-r6--jobboard .mmcard .mmbody { padding:11px 13px }
.ver-r6--jobboard .mmcard .mmbody b { font-size:13px }
.ver-r6--jobboard .mmcard .mmbody .mmc { font-size:11.5px;color:var(--ink3);margin-top:2px }
.ver-r6--jobboard .mmcard .mmbody .mmlink { display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--brand) }
.ver-r6--jobboard .mmcard .mmbody .mmlink svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--jobboard .mailmini .note { font-size:11px;color:var(--ink3);margin-top:7px;line-height:1.5 }

/* --- events --- */
.ver-r6--events .num { font-variant-numeric:tabular-nums }
.ver-r6--events .main { padding:22px 28px 40px }
.ver-r6--events .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.ver-r6--events .top h1 { font-size:21px;letter-spacing:-.3px }
.ver-r6--events .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.ver-r6--events .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px;margin-left:auto }
.ver-r6--events .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--events .search { display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:260px;box-shadow:var(--shadow) }
.ver-r6--events .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.ver-r6--events .primebtn { display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border-radius:11px;padding:9px 15px;font-size:13px;font-weight:700;box-shadow:var(--shadow) }
.ver-r6--events .primebtn svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--events .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.ver-r6--events .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--events .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--events .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--events .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.ver-r6--events .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.ver-r6--events .toolbar { grid-column:span 12;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px }
.ver-r6--events .tbsearch { display:flex;align-items:center;gap:9px;background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:8px 13px;color:var(--ink3);width:250px }
.ver-r6--events .chips { display:flex;gap:7px;flex-wrap:wrap }
.ver-r6--events .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:6px }
.ver-r6--events .chip svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--events .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.ver-r6--events .sortsel { margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--ink2) }
.ver-r6--events .sortsel svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--events .events { grid-column:span 8;display:grid;grid-template-columns:1fr 1fr;gap:16px }
.ver-r6--events .ev { background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column }
.ver-r6--events .ev .cover { height:98px;position:relative;display:grid;place-items:center;color:#fff }
.ver-r6--events .ev .cover .ini { font-size:28px;font-weight:800;letter-spacing:-1px;opacity:.92;text-shadow:0 2px 8px rgba(0,0,0,.18) }
.ver-r6--events .ev .cover .tags { position:absolute;top:10px;left:10px;display:flex;gap:6px }
.ver-r6--events .ev .cover .tags .t { background:rgba(15,30,50,.42);color:#fff;font-size:10.5px;font-weight:700;border-radius:7px;padding:3px 8px;letter-spacing:.3px }
.ver-r6--events .ev .cover .pay { position:absolute;top:10px;right:10px;background:#fff;color:#0f2b46;font-size:11px;font-weight:800;border-radius:8px;padding:3px 9px;box-shadow:0 2px 6px rgba(0,0,0,.18) }
.ver-r6--events .ev .cover .sync { position:absolute;bottom:9px;right:11px;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#fff;background:rgba(15,30,50,.4);border-radius:99px;padding:2px 8px }
.ver-r6--events .ev .cover .sync i { width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.3) }
.ver-r6--events .ev .body { padding:13px 15px 14px;display:flex;flex-direction:column;flex:1 }
.ver-r6--events .ev .body h3 { font-size:15px;letter-spacing:-.2px;line-height:1.3 }
.ver-r6--events .ev .meta { display:flex;flex-direction:column;gap:3px;margin-top:7px;font-size:12px;color:var(--ink2);font-weight:500 }
.ver-r6--events .ev .meta div { display:flex;align-items:center;gap:7px }
.ver-r6--events .ev .meta svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2;flex:none }
.ver-r6--events .ev .chiprow { display:flex;gap:6px;flex-wrap:wrap;margin-top:10px }
.ver-r6--events .ec { font-size:10.5px;font-weight:700;border-radius:7px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px }
.ver-r6--events .ec svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2 }
.ver-r6--events .ec-open { background:#e5f5ec;color:#178a50 }
.ver-r6--events .ec-soon { background:#fdf3e2;color:#c07600 }
.ver-r6--events .ec-closed { background:#f1f4f8;color:#8b98ad }
.ver-r6--events .ec-cost { background:#eef4ff;color:#1e56c8 }
.ver-r6--events .ec-cost.warn { background:#fdf3e2;color:#c07600 }
.ver-r6--events .ec-cost.bad { background:#fdeaec;color:#c93a4a }
.ver-r6--events .ec-vj { background:#f0edfd;color:#6d5bd0 }
.ver-r6--events .ev .prog { margin-top:11px }
.ver-r6--events .ev .prog .pn { display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:700;color:var(--ink2);margin-bottom:5px }
.ver-r6--events .ev .prog .pn span { color:var(--ink3);font-weight:600 }
.ver-r6--events .ev .pbar { height:8px;border-radius:99px;background:#eef1f6;overflow:visible;position:relative }
.ver-r6--events .ev .pbar i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#178a50) }
.ver-r6--events .ev .pbar i.warn { background:linear-gradient(90deg,#f59e0b,#c07600) }
.ver-r6--events .ev .pbar i.full { background:linear-gradient(90deg,#1e56c8,#0f3f9e) }
.ver-r6--events .ev .pbar .vjt { position:absolute;top:-3px;bottom:-3px;width:2px;background:#6d5bd0;border-radius:2px }
.ver-r6--events .ev .foot { margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:12px }
.ver-r6--events .ev .foot a { font-size:12px;font-weight:700;color:var(--brand);text-decoration:none;display:inline-flex;align-items:center;gap:5px }
.ver-r6--events .ev .foot a svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--events .ev .foot .tn { margin-left:auto }
.ver-r6--events .ev .foot .ghost { color:var(--ink3) }
.ver-r6--events .aside { grid-column:span 4;display:flex;flex-direction:column;gap:16px }
.ver-r6--events .regcard .rrow { display:flex;align-items:center;gap:11px;margin-top:11px }
.ver-r6--events .regcard .rrow .lb { width:104px;font-size:12px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:7px }
.ver-r6--events .regcard .rrow .lb i { width:9px;height:9px;border-radius:3px;flex:none }
.ver-r6--events .regcard .rbar { flex:1;height:14px;background:#f1f4f8;border-radius:7px;overflow:hidden }
.ver-r6--events .regcard .rbar i { display:block;height:100%;border-radius:7px }
.ver-r6--events .regcard .rrow b { font-size:12px;min-width:34px;text-align:right;color:var(--ink2) }
.ver-r6--events .c-bsc { background:var(--bsc) }
.ver-r6--events .c-msc { background:var(--msc) }
.ver-r6--events .c-mba { background:var(--mba) }
.ver-r6--events .c-phd { background:var(--phd) }
.ver-r6--events .regcard .note { margin-top:13px;font-size:11.5px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:11px;line-height:1.5 }
.ver-r6--events .regcard .note b { color:var(--ink2) }
.ver-r6--events .statcard .srow { display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px }
.ver-r6--events .statcard .srow:last-child { border:none }
.ver-r6--events .statcard .srow span { color:var(--ink2);font-weight:500 }
.ver-r6--events .statcard .srow b { font-size:15px;letter-spacing:-.2px }
.ver-r6--events .statcard .srow b.ok { color:var(--ok) }
.ver-r6--events .miniev { display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line) }
.ver-r6--events .miniev:last-child { border:none }
.ver-r6--events .miniev .mi { width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:none }
.ver-r6--events .miniev .mt b { font-size:12.5px;display:block;line-height:1.3 }
.ver-r6--events .miniev .mt span { font-size:11px;color:var(--ink3) }
.ver-r6--events .miniev .mn { margin-left:auto;text-align:right;font-size:11.5px;font-weight:700;color:var(--ink2) }

/* --- job_matching --- */
.ver-r6--job_matching .num { font-variant-numeric:tabular-nums }
.ver-r6--job_matching .main { padding:22px 28px 40px }
.ver-r6--job_matching .top { display:flex;align-items:center;gap:16px;margin-bottom:16px }
.ver-r6--job_matching .top h1 { font-size:21px;letter-spacing:-.3px }
.ver-r6--job_matching .crumb { color:var(--ink3);font-weight:500;font-size:12.5px;margin-top:3px;display:flex;align-items:center;gap:6px }
.ver-r6--job_matching .crumb b { color:var(--ink2);font-weight:600 }
.ver-r6--job_matching .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line); border-radius:11px;padding:8px 14px;color:var(--ink3);width:270px;box-shadow:var(--shadow) }
.ver-r6--job_matching .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.ver-r6--job_matching .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px }
.ver-r6--job_matching .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--job_matching .ehero { background:linear-gradient(120deg,#0f5a53 0%,#12796a 55%,#1a9c74 100%);color:#fff;border-radius:var(--r); padding:22px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow) }
.ver-r6--job_matching .ehero::after { content:'';position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%) }
.ver-r6--job_matching .ehero .etags { display:flex;gap:8px;margin-bottom:12px }
.ver-r6--job_matching .etag { font-size:11px;font-weight:700;letter-spacing:.5px;background:rgba(255,255,255,.16);color:#eafff8;border-radius:7px;padding:4px 10px }
.ver-r6--job_matching .etag.solid { background:rgba(255,255,255,.92);color:#0f5a53 }
.ver-r6--job_matching .ehero h2 { font-size:27px;letter-spacing:-.6px;font-weight:800 }
.ver-r6--job_matching .emeta { display:flex;gap:22px;margin-top:11px;font-size:13px;color:#d3f2ea;font-weight:500;flex-wrap:wrap }
.ver-r6--job_matching .emeta span { display:inline-flex;align-items:center;gap:7px }
.ver-r6--job_matching .emeta svg { width:15px;height:15px;stroke:#a8e6d6;fill:none;stroke-width:2 }
.ver-r6--job_matching .ehero .side-right { position:absolute;right:26px;top:22px;text-align:right }
.ver-r6--job_matching .ehero .side-right .cnt { font-size:30px;font-weight:800;letter-spacing:-.8px }
.ver-r6--job_matching .ehero .side-right .cnt small { font-size:14px;font-weight:600;color:#cdeee4 }
.ver-r6--job_matching .ebar { width:250px;height:9px;border-radius:99px;background:rgba(255,255,255,.2);margin:9px 0 0 auto;position:relative;overflow:hidden }
.ver-r6--job_matching .ebar i { position:absolute;inset:0;width:69%;border-radius:99px;background:linear-gradient(90deg,#d8fff2,#8ff2d0) }
.ver-r6--job_matching .tabs { display:flex;gap:2px;margin:16px 0 18px;border-bottom:1px solid var(--line) }
.ver-r6--job_matching .tabs a { padding:11px 18px;font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px }
.ver-r6--job_matching .tabs a.on { color:var(--brand);border-color:var(--brand) }
.ver-r6--job_matching .tabs a .tb { margin-left:7px;font-size:11px;font-weight:700;background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 7px }
.ver-r6--job_matching .tabs a.on .tb { background:#e8effd;color:var(--brand) }
.ver-r6--job_matching .work { display:grid;grid-template-columns:1fr 322px;gap:16px;align-items:start }
.ver-r6--job_matching .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--job_matching .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--job_matching .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--job_matching .card h2 .r { margin-left:auto;display:flex;gap:8px }
.ver-r6--job_matching .btn { display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:650;color:var(--ink2);cursor:pointer }
.ver-r6--job_matching .btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--job_matching .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff }
.ver-r6--job_matching .btn.gate { background:linear-gradient(180deg,#1e63d6,#1a52bb);border-color:#1a52bb;color:#fff;box-shadow:0 6px 16px -8px rgba(30,86,200,.7) }
.ver-r6--job_matching .counters { display:flex;gap:10px;margin:15px 0 14px }
.ver-r6--job_matching .kchip { display:flex;flex-direction:column;padding:9px 15px;border-radius:11px;background:#f6f8fb;border:1px solid var(--line);min-width:96px }
.ver-r6--job_matching .kchip b { font-size:19px;letter-spacing:-.3px }
.ver-r6--job_matching .kchip span { font-size:10.5px;color:var(--ink3);font-weight:700;letter-spacing:.4px;margin-top:1px }
.ver-r6--job_matching .kchip.amb b { color:var(--warn) }
.ver-r6--job_matching .kchip.mut b { color:var(--ink3) }
.ver-r6--job_matching .fbar { display:flex;align-items:center;gap:9px;margin-bottom:6px }
.ver-r6--job_matching .fsearch { display:flex;align-items:center;gap:8px;background:#f6f8fb;border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--ink3);flex:1;font-size:12.5px }
.ver-r6--job_matching .fsearch svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--job_matching .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer }
.ver-r6--job_matching .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.ver-r6--job_matching table { width:100%;border-collapse:collapse;font-size:13px }
.ver-r6--job_matching th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line) }
.ver-r6--job_matching td { padding:10px 8px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.ver-r6--job_matching tr:last-child td { border:none }
.ver-r6--job_matching .mcell { display:flex;align-items:center;gap:11px }
.ver-r6--job_matching .av { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11.5px;flex:none }
.ver-r6--job_matching .mcell b { font-size:13px;font-weight:650;display:block }
.ver-r6--job_matching .mcell small { font-size:11px;color:var(--ink3) }
.ver-r6--job_matching .tk { font-weight:600 }
.ver-r6--job_matching .tk small { display:block;font-size:11px;color:var(--ink3);font-weight:500 }
.ver-r6--job_matching .pchip { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 10px }
.ver-r6--job_matching .pchip .d { width:6px;height:6px;border-radius:50%;background:currentColor }
.ver-r6--job_matching .p-paid { background:#e5f5ec;color:#178a50 }
.ver-r6--job_matching .p-open { background:#fdf3e2;color:#c07600 }
.ver-r6--job_matching .p-ref { background:#eef1f6;color:#7d8aa0 }
.ver-r6--job_matching .gchip { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#6d5bd0;background:#f0edfd;border-radius:99px;padding:3px 9px }
.ver-r6--job_matching .step { display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:12px }
.ver-r6--job_matching .step b { width:22px;height:24px;display:grid;place-items:center;color:var(--ink3);font-weight:700;background:#f6f8fb }
.ver-r6--job_matching .step i { min-width:26px;text-align:center;font-weight:700;font-style:normal;color:var(--ink) }
.ver-r6--job_matching .checkin { width:26px;height:26px;border-radius:8px;border:1.6px solid var(--line);display:grid;place-items:center;background:#fff }
.ver-r6--job_matching .checkin.on { background:#178a50;border-color:#178a50 }
.ver-r6--job_matching .checkin svg { width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.6;display:none }
.ver-r6--job_matching .checkin.on svg { display:block }
.ver-r6--job_matching .tgl { width:38px;height:21px;border-radius:99px;background:#e2e7ef;position:relative;display:inline-block }
.ver-r6--job_matching .tgl::after { content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2) }
.ver-r6--job_matching .tgl.on { background:#c93a4a }
.ver-r6--job_matching .tgl.on::after { left:19.5px }
.ver-r6--job_matching .noteic { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink3);position:relative }
.ver-r6--job_matching .noteic svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--job_matching .noteic.has { color:var(--brand) }
.ver-r6--job_matching .noteic.has::after { content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:#e5484d }
.ver-r6--job_matching .guestrow td { background:#faf9ff }
.ver-r6--job_matching .colc { text-align:center }
.ver-r6--job_matching .rail { display:flex;flex-direction:column;gap:16px }
.ver-r6--job_matching .rc h3 { display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700 }
.ver-r6--job_matching .rc h3 svg { width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--job_matching .rc h3 .cn { margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink3);background:#f1f4f8;border-radius:99px;padding:2px 9px }
.ver-r6--job_matching .abs { display:flex;flex-direction:column;gap:9px;margin-top:12px }
.ver-r6--job_matching .absrow { display:flex;align-items:flex-start;gap:10px;padding-bottom:9px;border-bottom:1px dashed var(--line) }
.ver-r6--job_matching .absrow:last-child { border:none;padding-bottom:0 }
.ver-r6--job_matching .absrow .av { width:28px;height:28px;font-size:10.5px;background:#94a3b8 }
.ver-r6--job_matching .absrow b { font-size:12.5px;font-weight:650;display:block }
.ver-r6--job_matching .absrow small { font-size:11px;color:var(--ink3) }
.ver-r6--job_matching .srcchip { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink2);background:#f1f4f8;border-radius:6px;padding:2px 7px;margin-top:4px }
.ver-r6--job_matching .srcchip a { color:var(--brand);font-weight:700;text-decoration:none }
.ver-r6--job_matching .srcchip svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--job_matching .paycard { background:#fffaf0;border-color:#f4e2c0 }
.ver-r6--job_matching .paybig { display:flex;align-items:baseline;gap:9px;margin:11px 0 4px }
.ver-r6--job_matching .paybig b { font-size:24px;font-weight:800;color:var(--warn) }
.ver-r6--job_matching .paybig span { font-size:12.5px;color:var(--ink2);font-weight:600 }
.ver-r6--job_matching .paysub { font-size:12px;color:var(--ink2);margin-bottom:12px }
.ver-r6--job_matching .jhero { background:linear-gradient(120deg,#10304f 0%,#143a60 55%,#1b4a7c 100%);color:#fff;border-radius:var(--r); padding:22px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;display:flex;gap:26px }
.ver-r6--job_matching .jhero::after { content:'';position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.22),transparent 65%) }
.ver-r6--job_matching .jhero .jco { width:52px;height:52px;border-radius:12px;background:linear-gradient(140deg,#2f6fe0,#1e56c8);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;flex:none }
.ver-r6--job_matching .jhero .jt { flex:1;position:relative;z-index:1 }
.ver-r6--job_matching .jhero .src { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.4px;background:rgba(255,255,255,.14);color:#cfe0f5;border-radius:7px;padding:3px 9px;margin-bottom:9px }
.ver-r6--job_matching .jhero .src svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--job_matching .jhero h2 { font-size:23px;letter-spacing:-.5px;font-weight:800 }
.ver-r6--job_matching .jmeta { display:flex;gap:20px;margin-top:9px;font-size:13px;color:#bcd2e8;font-weight:500;flex-wrap:wrap }
.ver-r6--job_matching .jmeta span { display:inline-flex;align-items:center;gap:7px }
.ver-r6--job_matching .jmeta svg { width:15px;height:15px;stroke:#8fb0d0;fill:none;stroke-width:2 }
.ver-r6--job_matching .jhero .jchart { width:230px;flex:none;position:relative;z-index:1;border-left:1px solid rgba(255,255,255,.14);padding-left:22px }
.ver-r6--job_matching .jhero .jchart .cl { font-size:11px;letter-spacing:.8px;color:#9fc0e2;font-weight:700;margin-bottom:10px }
.ver-r6--job_matching .hist { display:flex;align-items:flex-end;gap:7px;height:60px }
.ver-r6--job_matching .hist .hb { flex:1;background:linear-gradient(180deg,#4ade80,#178a50);border-radius:3px 3px 0 0;position:relative }
.ver-r6--job_matching .hist .hb.mut { background:rgba(255,255,255,.18) }
.ver-r6--job_matching .histx { display:flex;gap:7px;margin-top:6px;font-size:9.5px;color:#8fb0d0;font-weight:600 }
.ver-r6--job_matching .histx span { flex:1;text-align:center }
.ver-r6--job_matching .jchart .jsum { margin-top:11px;font-size:12px;color:#bcd2e8 }
.ver-r6--job_matching .jchart .jsum b { color:#fff;font-size:15px }
.ver-r6--job_matching .jbadge { margin-left:auto;display:flex;align-items:center;gap:10px }
.ver-r6--job_matching .selbar { display:flex;align-items:center;gap:12px;background:#f4f8ff;border:1px solid #cfe0fb;border-radius:12px;padding:11px 15px;margin:14px 0 4px }
.ver-r6--job_matching .selbar .sc { width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px }
.ver-r6--job_matching .selbar .stx b { font-size:13.5px }
.ver-r6--job_matching .selbar .stx span { display:block;font-size:11.5px;color:var(--ink3) }
.ver-r6--job_matching .warmchip { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#8a5a00;background:#fdf3e2;border:1px solid #f4e2c0;border-radius:8px;padding:5px 11px }
.ver-r6--job_matching .warmchip svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--job_matching .reasons { display:flex;gap:5px;flex-wrap:wrap }
.ver-r6--job_matching .rchip { font-size:11px;font-weight:600;color:var(--ink2);background:#f1f4f8;border:1px solid var(--line);border-radius:6px;padding:2px 8px }
.ver-r6--job_matching .rchip.warm { color:#8a5a00;background:#fdf3e2;border-color:#f4e2c0 }
.ver-r6--job_matching .mbar { display:flex;align-items:center;gap:9px }
.ver-r6--job_matching .mtrack { flex:1;max-width:120px;height:8px;background:#eef1f6;border-radius:99px;overflow:hidden }
.ver-r6--job_matching .mtrack i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#178a50) }
.ver-r6--job_matching .mbar b { font-size:13px;min-width:38px;color:var(--ok) }
.ver-r6--job_matching .cbx { width:19px;height:19px;border-radius:6px;border:1.6px solid #c3ccda;display:inline-grid;place-items:center;background:#fff }
.ver-r6--job_matching .cbx.on { background:var(--brand);border-color:var(--brand) }
.ver-r6--job_matching .cbx svg { width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;display:none }
.ver-r6--job_matching .cbx.on svg { display:block }
.ver-r6--job_matching .kpi2 { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px }
.ver-r6--job_matching .kpi2 .k { background:#f6f8fb;border:1px solid var(--line);border-radius:11px;padding:11px 13px }
.ver-r6--job_matching .kpi2 .k b { font-size:20px;letter-spacing:-.3px;display:block }
.ver-r6--job_matching .kpi2 .k span { font-size:11px;color:var(--ink3);font-weight:600 }
.ver-r6--job_matching .kpi2 .k.g b { color:var(--ok) }
.ver-r6--job_matching .vlist { margin-top:14px;display:flex;flex-direction:column }
.ver-r6--job_matching .vitem { display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:flex-start }
.ver-r6--job_matching .vitem:last-child { border:none }
.ver-r6--job_matching .vitem .vi { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none }
.ver-r6--job_matching .vitem .vi svg { width:14px;height:14px;fill:none;stroke-width:2 }
.ver-r6--job_matching .vitem p { font-size:12.5px }
.ver-r6--job_matching .vitem p b { font-weight:700 }
.ver-r6--job_matching .vitem time { margin-left:auto;font-size:11px;color:var(--ink3);font-weight:600;white-space:nowrap;padding-top:1px }
.ver-r6--job_matching .empgrid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px }
.ver-r6--job_matching .empcard { border:1px solid var(--line);border-radius:12px;padding:13px;background:#fbfcfe;display:flex;flex-direction:column;gap:9px }
.ver-r6--job_matching .empcard .eh { display:flex;align-items:center;gap:10px }
.ver-r6--job_matching .empcard b { font-size:13px;font-weight:650;display:block }
.ver-r6--job_matching .empcard small { font-size:11px;color:var(--ink3) }
.ver-r6--job_matching .introbtn { display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:650;color:var(--brand);background:#e8effd;border:1px solid #bcd3f7;border-radius:8px;padding:7px 10px;margin-top:auto }
.ver-r6--job_matching .introbtn svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }

/* --- community --- */
.ver-r6--community .num { font-variant-numeric:tabular-nums }
.ver-r6--community .main { padding:22px 28px 40px }
.ver-r6--community .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.ver-r6--community .top h1 { font-size:21px;letter-spacing:-.3px }
.ver-r6--community .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.ver-r6--community .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:4px 11px;margin-left:auto }
.ver-r6--community .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.ver-r6--community .search { display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:260px;box-shadow:var(--shadow) }
.ver-r6--community .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.ver-r6--community .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.ver-r6--community .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.ver-r6--community .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.ver-r6--community .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.ver-r6--community .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.ver-r6--community .kpi { grid-column:span 3;display:flex;flex-direction:column }
.ver-r6--community .kpi .klbl { font-size:11px;letter-spacing:1px;color:var(--ink3);font-weight:700 }
.ver-r6--community .kpi .kb { display:flex;align-items:baseline;gap:9px;margin-top:7px }
.ver-r6--community .kpi .kb .v { font-size:30px;font-weight:800;letter-spacing:-.8px }
.ver-r6--community .kpi .kb .u { font-size:13px;color:var(--ink3);font-weight:600 }
.ver-r6--community .bench { display:inline-flex;align-items:center;gap:6px;margin-top:11px;background:#e5f5ec;color:#178a50;font-size:12px;font-weight:700;border-radius:99px;padding:4px 11px;align-self:flex-start }
.ver-r6--community .bench svg { width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5 }
.ver-r6--community .bench.neu { background:#f0edfd;color:#6d5bd0 }
.ver-r6--community .kspark { margin-top:12px;height:34px }
.ver-r6--community .kspark svg { width:100%;height:100% }
.ver-r6--community .heat { grid-column:span 8;position:relative }
.ver-r6--community .hwrap { margin-top:14px;overflow-x:auto }
.ver-r6--community .hgrid { border-collapse:separate;border-spacing:4px;width:100% }
.ver-r6--community .hgrid th { font-size:11px;color:var(--ink3);font-weight:700;padding:0 0 4px;text-align:center }
.ver-r6--community .hgrid th.corner { text-align:left;width:180px }
.ver-r6--community .hgrid .rl { font-size:12.5px;font-weight:700;color:var(--ink2);text-align:left;white-space:nowrap;padding-right:8px }
.ver-r6--community .hgrid .rl i { width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:7px;vertical-align:0 }
.ver-r6--community .hgrid .grouphd td { font-size:10.5px;letter-spacing:.8px;color:var(--ink3);font-weight:700;padding:9px 0 2px }
.ver-r6--community .cell { height:34px;border-radius:7px;text-align:center;font-size:12px;font-weight:700;color:#fff;position:relative }
.ver-r6--community .cell.z0 { background:#eef1f6;color:#c2cbd8 }
.ver-r6--community .cell.hl { outline:2.5px solid #16233a;outline-offset:1px;z-index:2 }
.ver-r6--community .htip { position:absolute;top:150px;left:560px;width:208px;background:#0f2b46;color:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 18px 40px -12px rgba(15,43,70,.5);z-index:5 }
.ver-r6--community .htip::before { content:'';position:absolute;left:50px;top:-7px;border:7px solid transparent;border-bottom-color:#0f2b46 }
.ver-r6--community .htip b { font-size:13px }
.ver-r6--community .htip .r { display:flex;justify-content:space-between;font-size:11.5px;color:#bcd2e8;margin-top:7px }
.ver-r6--community .htip .r b { color:#fff;font-size:11.5px }
.ver-r6--community .hscale { display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;color:var(--ink3);font-weight:600 }
.ver-r6--community .hscale .ramp { display:flex;gap:2px }
.ver-r6--community .hscale .ramp i { width:22px;height:11px;border-radius:2px }
.ver-r6--community .flag { grid-column:span 4;display:flex;flex-direction:column }
.ver-r6--community .frow { display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed var(--line) }
.ver-r6--community .frow:last-of-type { border:none }
.ver-r6--community .frow .fi { width:34px;height:34px;border-radius:9px;background:#fdeaec;color:#c93a4a;display:grid;place-items:center;flex:none }
.ver-r6--community .frow .fi svg { width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--community .frow .fi.soon { background:#fdf3e2;color:#c07600 }
.ver-r6--community .frow .ft b { font-size:13px;display:block;line-height:1.25 }
.ver-r6--community .frow .ft span { font-size:11px;color:var(--ink3) }
.ver-r6--community .frow .fa { margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap }
.ver-r6--community .flag .fnote { margin-top:12px;font-size:11.5px;color:var(--ink3);border-top:1px dashed var(--line);padding-top:11px;line-height:1.5 }
.ver-r6--community .chsec { grid-column:span 12 }
.ver-r6--community .chgrid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px }
.ver-r6--community .cht { border:1px solid var(--line);border-radius:13px;padding:14px 15px;display:flex;flex-direction:column }
.ver-r6--community .cht .chh { display:flex;align-items:center;gap:10px }
.ver-r6--community .cht .cav { width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12.5px;flex:none }
.ver-r6--community .cht .cnm b { font-size:14px;letter-spacing:-.2px;display:block;line-height:1.2 }
.ver-r6--community .cht .cnm span { font-size:11px;color:var(--ink3);font-weight:600 }
.ver-r6--community .cht .trend { margin-left:auto;font-size:11px;font-weight:800;border-radius:7px;padding:3px 8px }
.ver-r6--community .trend.up { background:#e5f5ec;color:#178a50 }
.ver-r6--community .trend.flat { background:#eef1f6;color:#8b98ad }
.ver-r6--community .trend.dn { background:#fdeaec;color:#c93a4a }
.ver-r6--community .cht .cspark { height:38px;margin:11px 0 9px }
.ver-r6--community .cht .cspark svg { width:100%;height:100% }
.ver-r6--community .cht .cstats { display:flex;gap:16px;font-size:12px;color:var(--ink2);font-weight:600 }
.ver-r6--community .cht .cstats b { color:var(--ink);font-weight:800;font-size:14px;display:block;letter-spacing:-.2px }
.ver-r6--community .cht .cstats span { font-size:10.5px;color:var(--ink3);font-weight:600 }
.ver-r6--community .cht .cnext { margin-top:10px;font-size:11.5px;color:var(--ink2);display:flex;align-items:center;gap:7px }
.ver-r6--community .cht .cnext svg { width:13px;height:13px;stroke:var(--ink3);fill:none;stroke-width:2;flex:none }
.ver-r6--community .cht .cnext.warn { color:var(--warn) }
.ver-r6--community .cht .cnext.warn svg { stroke:var(--warn) }
.ver-r6--community .cht .leader { margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:9px }
.ver-r6--community .cht .lav { width:28px;height:28px;border-radius:50%;background:#e8effd;color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:10.5px;flex:none }
.ver-r6--community .cht .lav.vac { background:#fdeaec;color:#c93a4a }
.ver-r6--community .cht .lnm b { font-size:12px;display:block;line-height:1.2 }
.ver-r6--community .cht .lnm span { font-size:10.5px;color:var(--ink3) }
.ver-r6--community .cht .lbtn { margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:11.5px;font-weight:700;color:var(--brand);text-decoration:none;background:#fff }
.ver-r6--community .cht .lbtn svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2 }
.ver-r6--community .cht .lbtn.warn { color:var(--warn);border-color:#f0d9ac;background:#fdf7ec }
/* Seit dem WhatsApp-Link (13.08.2026) stehen zwei Knoepfe in der Leader-Zeile.
   Ohne diese Zeile zoege AUCH der zweite ein `margin-left:auto` und die beiden
   drifteten mit dem Freiraum dazwischen auseinander — sie gehoeren zusammen. */
.ver-r6--community .cht .lbtn + .lbtn { margin-left:0 }

/* R6-PAGES-APPEND-END */

/* ═══════════════════════════════════════════════════════════════════════
   R7a — DATENMANAGEMENT + VERWALTUNG. Pixel-Port aus den freigegebenen
   Mockups (scratchpad/v2_dm_*.html, v2_systemcheck/meldungen/einstellungen/
   kit_zustaende.html). ADDITIV, jede Seite in eigenem Scope .v3-page .dm-*,
   damit die kurzen Mockup-Klassennamen (.card/.hero/.det/…) keine Bestands-
   Seite berühren. Sidebar/Topbar kommen aus der App-Shell — hier nur Content.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── dm-gesund — ENTFERNT 01.08.2026 (Datenmanagement-Neubau #775, Welle W0).
   Die Insel (~104 Zeilen, Port aus v2_dm_gesundheit.html) war toter Code: die
   Klasse `dm-gesund` kam in KEINER View vor — das Gesundheits-Board wurde
   stattdessen in `.stift .dmb` neu gebaut (datenmanagement/overview.html.erb).
   Zwei Umsetzungen derselben Seite, eine davon nie erreichbar (Diagnose §1.5).
   Sie deklarierte ausserdem --canvas/--card/--line/--ink erneut mit denselben
   Werten wie --v3-* — genau das Anti-Muster aus Design-Referenz §3.
   Ersatz fuer den Kopf-Chip: `.v3-hpill` (jetzt mit .warn/.bad/.idle). */

/* ── dm-pflege (aus v2_dm_datenpflege.html) ── */
.v3-page .dm-pflege { --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --sepa:#2563eb; --ueb:#0ea5a4; --paypal:#7c6cf0; --stripe:#b558d9;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-pflege .num { font-variant-numeric:tabular-nums }
.v3-page .dm-pflege .top { display:flex;align-items:center;gap:16px;margin-bottom:16px }
.v3-page .dm-pflege .top h1 { font-size:21px;letter-spacing:-.3px }
.v3-page .dm-pflege .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.v3-page .dm-pflege .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
    border-radius:11px;padding:8px 14px;color:var(--ink3);width:260px;box-shadow:var(--shadow) }
.v3-page .dm-pflege .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.v3-page .dm-pflege .tabs { display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px }
.v3-page .dm-pflege .tabs a { display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px }
.v3-page .dm-pflege .tabs a.on { color:var(--brand);border-bottom-color:var(--brand) }
.v3-page .dm-pflege .tabs a .c { font-size:11px;font-weight:800;background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 8px }
.v3-page .dm-pflege .tabs a.on .c { background:#e8effd;color:var(--brand) }
.v3-page .dm-pflege .tabs a .c.hot { background:#fdeaec;color:var(--bad) }
.v3-page .dm-pflege .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow) }
.v3-page .dm-pflege .toolbar { display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap }
.v3-page .dm-pflege .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;cursor:default }
.v3-page .dm-pflege .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.v3-page .dm-pflege .chip.hot.on { background:#fdeaec;border-color:#f3b8bf;color:var(--bad) }
.v3-page .dm-pflege .chip .dt { width:8px;height:8px;border-radius:50% }
.v3-page .dm-pflege .chip .n { font-weight:800 }
.v3-page .dm-pflege .toolbar .sp { margin-left:auto;display:flex;align-items:center;gap:9px }
.v3-page .dm-pflege .srch { display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--ink3);font-size:12.5px;width:210px }
.v3-page .dm-pflege .bulkbar { display:flex;align-items:center;gap:14px;padding:11px 18px;background:#eef4fe;border-bottom:1px solid #d6e4fb;font-size:13px }
.v3-page .dm-pflege .bulkbar b { color:var(--brand) }
.v3-page .dm-pflege .bulkbar .acts { margin-left:auto;display:flex;gap:8px }
.v3-page .dm-pflege .btn { border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:650;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;cursor:default }
.v3-page .dm-pflege .btn svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-pflege .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff }
.v3-page .dm-pflege .btn.ok { background:var(--ok);border-color:var(--ok);color:#fff }
.v3-page .dm-pflege .btn.ghost-red { color:var(--bad);border-color:#f3b8bf;background:#fff }
.v3-page .dm-pflege .btn.gate { border-color:#cdb98a;color:var(--warn);background:#fffdf7 }
.v3-page .dm-pflege table { width:100%;border-collapse:collapse;font-size:13px }
.v3-page .dm-pflege th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line) }
.v3-page .dm-pflege td { padding:12px 14px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.v3-page .dm-pflege tbody tr:last-child td { border-bottom:none }
.v3-page .dm-pflege tbody tr.open { background:#fbfcff }
.v3-page .dm-pflege .cb { width:17px;height:17px;border:1.6px solid #c3ccda;border-radius:5px;display:inline-block;vertical-align:-3px }
.v3-page .dm-pflege .cb.ck { background:var(--brand);border-color:var(--brand);position:relative }
.v3-page .dm-pflege .cb.ck::after { content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg) }
.v3-page .dm-pflege .itype { display:inline-flex;align-items:center;gap:9px;font-weight:650 }
.v3-page .dm-pflege .itype .ii { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none }
.v3-page .dm-pflege .itype .ii svg { width:16px;height:16px;fill:none;stroke-width:2 }
.v3-page .dm-pflege .itype small { display:block;font-weight:500;color:var(--ink3);font-size:11px }
.v3-page .dm-pflege .c-blue { background:#e8effd;color:#1e56c8 }
.v3-page .dm-pflege .c-red { background:#fdeaec;color:#c93a4a }
.v3-page .dm-pflege .c-amb { background:#fdf3e2;color:#c07600 }
.v3-page .dm-pflege .c-grn { background:#e5f5ec;color:#178a50 }
.v3-page .dm-pflege .c-vio { background:#f0edfd;color:#7c6cf0 }
.v3-page .dm-pflege .mem { display:flex;align-items:center;gap:10px }
.v3-page .dm-pflege .mem .a { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:11.5px;color:#fff;flex:none }
.v3-page .dm-pflege .mem b { font-size:13px }
.v3-page .dm-pflege .mem small { display:block;color:var(--ink3);font-size:11px }
.v3-page .dm-pflege .prob { color:var(--ink2) }
.v3-page .dm-pflege .prob .bad { color:var(--bad);font-weight:650 }
.v3-page .dm-pflege .sev { font-size:10.5px;font-weight:800;letter-spacing:.4px;border-radius:6px;padding:3px 8px }
.v3-page .dm-pflege .sev-crit { background:#fdeaec;color:#c93a4a }
.v3-page .dm-pflege .sev-warn { background:#fdf3e2;color:#c07600 }
.v3-page .dm-pflege .hist { display:inline-flex;align-items:center;gap:5px;color:var(--brand);font-weight:650;font-size:12px;white-space:nowrap }
.v3-page .dm-pflege .hist svg { width:13px;height:13px;fill:none;stroke-width:2 }
.v3-page .dm-pflege .hist.warn { color:var(--warn) }
.v3-page .dm-pflege .histnew { font-size:11.5px;color:var(--ink3);font-weight:600 }
.v3-page .dm-pflege .rowacts { display:flex;gap:7px;justify-content:flex-end }
.v3-page .dm-pflege .ib { width:32px;height:32px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:var(--ink2);cursor:default }
.v3-page .dm-pflege .ib svg { width:15px;height:15px;fill:none;stroke-width:2 }
.v3-page .dm-pflege .ib.ok { color:var(--ok);border-color:#bfe3cd }
.v3-page .dm-pflege .ib.mut { color:var(--ink3) }
.v3-page .dm-pflege .edit td { background:#f2f7ff;border-bottom:1px solid #d6e4fb }
.v3-page .dm-pflege .editbox { display:flex;align-items:flex-end;gap:14px;padding:4px 0 4px 42px }
.v3-page .dm-pflege .fgrp { display:flex;flex-direction:column;gap:5px }
.v3-page .dm-pflege .fgrp label { font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.3px }
.v3-page .dm-pflege .inp { border:1.6px solid #bcd3f7;border-radius:9px;padding:9px 12px;font-size:13px;background:#fff;min-width:280px;color:var(--ink);display:flex;align-items:center;justify-content:space-between }
.v3-page .dm-pflege .inp .cur { color:var(--ink) }
.v3-page .dm-pflege .inp .caret { width:2px;height:16px;background:var(--brand) }
.v3-page .dm-pflege .oldval { font-size:11.5px;color:var(--ink3);text-decoration:line-through }
.v3-page .dm-pflege .editacts { display:flex;gap:8px;margin-left:auto }
.v3-page .dm-pflege .hint { font-size:11.5px;color:var(--ink3);margin-top:8px;padding-left:42px;display:flex;align-items:center;gap:7px }
.v3-page .dm-pflege .hint svg { width:13px;height:13px;fill:none;stroke:var(--brand);stroke-width:2 }
.v3-page .dm-pflege .hint.gate svg { stroke:var(--warn) }

/* ── dm-dubl (aus v2_dm_dubletten.html) ── */
.v3-page .dm-dubl { --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --sepa:#2563eb; --ueb:#0ea5a4; --paypal:#7c6cf0; --stripe:#b558d9;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-dubl .num { font-variant-numeric:tabular-nums }
.v3-page .dm-dubl .top { display:flex;align-items:center;gap:16px;margin-bottom:16px }
.v3-page .dm-dubl .top h1 { font-size:21px;letter-spacing:-.3px }
.v3-page .dm-dubl .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.v3-page .dm-dubl .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
    border-radius:11px;padding:8px 14px;color:var(--ink3);width:260px;box-shadow:var(--shadow) }
.v3-page .dm-dubl .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.v3-page .dm-dubl .tabs { display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px }
.v3-page .dm-dubl .tabs a { display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:13.5px;font-weight:650;color:var(--ink2);text-decoration:none;border-bottom:2.5px solid transparent;margin-bottom:-1px }
.v3-page .dm-dubl .tabs a.on { color:var(--brand);border-bottom-color:var(--brand) }
.v3-page .dm-dubl .tabs a .c { font-size:11px;font-weight:800;background:#eef1f6;color:var(--ink2);border-radius:99px;padding:1px 8px }
.v3-page .dm-dubl .tabs a.on .c { background:#e8effd;color:var(--brand) }
.v3-page .dm-dubl .tabs a .c.hot { background:#fdeaec;color:var(--bad) }
.v3-page .dm-dubl .split { display:grid;grid-template-columns:400px 1fr;gap:16px;align-items:start }
.v3-page .dm-dubl .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow) }
.v3-page .dm-dubl .listhead { display:flex;align-items:center;gap:9px;padding:15px 18px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:700 }
.v3-page .dm-dubl .listhead svg { width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2 }
.v3-page .dm-dubl .listhead .c { margin-left:auto;font-size:11px;font-weight:800;background:#fdf3e2;color:var(--warn);border-radius:99px;padding:2px 9px }
.v3-page .dm-dubl .buckets { display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--line);background:#fbfcfe }
.v3-page .dm-dubl .bk { flex:1;border:1px solid var(--line);border-radius:9px;padding:7px 6px;text-align:center;cursor:default;background:#fff }
.v3-page .dm-dubl .bk.on { background:#e8effd;border-color:#bcd3f7 }
.v3-page .dm-dubl .bk b { display:block;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.3px }
.v3-page .dm-dubl .bk span { font-size:9.5px;font-weight:700;color:var(--ink3);letter-spacing:.2px }
.v3-page .dm-dubl .bk.rev b { color:var(--warn) }
.v3-page .dm-dubl .bk.on.sure b { color:var(--ok) }
.v3-page .dm-dubl .pair { padding:13px 16px;border-bottom:1px solid #eef1f6;cursor:default }
.v3-page .dm-dubl .pair:last-child { border-bottom:none }
.v3-page .dm-dubl .pair.on { background:#f2f7ff;box-shadow:inset 3px 0 0 var(--brand) }
.v3-page .dm-dubl .pair .names { display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px }
.v3-page .dm-dubl .pair .names .vs { color:var(--ink3);font-weight:600;font-size:11.5px }
.v3-page .dm-dubl .pair .avs { display:flex;margin-right:2px }
.v3-page .dm-dubl .pair .avs .a { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:10px;color:#fff;border:2px solid #fff }
.v3-page .dm-dubl .pair .avs .a:nth-child(2) { margin-left:-9px }
.v3-page .dm-dubl .pair .chips { display:flex;flex-wrap:wrap;gap:6px;margin-top:9px }
.v3-page .dm-dubl .mchip { font-size:10.5px;font-weight:650;border-radius:99px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px }
.v3-page .dm-dubl .mchip svg { width:11px;height:11px;fill:none;stroke-width:2.2 }
.v3-page .dm-dubl .mc-mail { background:#fdeaec;color:#c93a4a }
.v3-page .dm-dubl .mc-name { background:#e8effd;color:#1e56c8 }
.v3-page .dm-dubl .mc-adr { background:#fdf3e2;color:#c07600 }
.v3-page .dm-dubl .mc-hb { background:#f0edfd;color:#7c6cf0 }
.v3-page .dm-dubl .pair .score { float:right;font-size:11px;font-weight:800 }
.v3-page .dm-dubl .sc-sure { color:var(--ok) }
.v3-page .dm-dubl .sc-mid { color:var(--warn) }
.v3-page .dm-dubl .sc-rev { color:var(--ink3) }
.v3-page .dm-dubl .cmphead { display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line) }
.v3-page .dm-dubl .cmphead h2 { font-size:15px;font-weight:700 }
.v3-page .dm-dubl .cmphead .simbadge { margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:5px 12px }
.v3-page .dm-dubl .why { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);background:#fbfcfe }
.v3-page .dm-dubl .why .wl { font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.4px;margin-right:2px }
.v3-page .dm-dubl .sig { font-size:11px;font-weight:650;border-radius:99px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px }
.v3-page .dm-dubl .sig .w { font-weight:800 }
.v3-page .dm-dubl .sig.pos { background:#e5f5ec;color:#178a50 }
.v3-page .dm-dubl .sig.mid { background:#e8effd;color:#1e56c8 }
.v3-page .dm-dubl .sig.neg { background:#fdf3e2;color:#c07600 }
.v3-page .dm-dubl .cmpgrid { width:100%;border-collapse:collapse }
.v3-page .dm-dubl .cmpgrid th { padding:14px 20px;border-bottom:1px solid var(--line);text-align:left }
.v3-page .dm-dubl .cmpgrid .colhdr { display:flex;align-items:center;gap:11px }
.v3-page .dm-dubl .cmpgrid .colhdr .a { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:none }
.v3-page .dm-dubl .cmpgrid .colhdr b { font-size:14.5px }
.v3-page .dm-dubl .cmpgrid .colhdr small { display:block;color:var(--ink3);font-size:11.5px;font-weight:600 }
.v3-page .dm-dubl .cmpgrid .fld { width:150px;font-size:11px;letter-spacing:.6px;color:var(--ink3);font-weight:700;padding:12px 20px;vertical-align:middle }
.v3-page .dm-dubl .cmpgrid td { padding:10px 20px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.v3-page .dm-dubl .cmpgrid tr:last-child td { border-bottom:none }
.v3-page .dm-dubl .opt { display:flex;align-items:center;gap:11px;padding:9px 13px;border:1.6px solid var(--line);border-radius:11px;font-size:13.5px;font-weight:600 }
.v3-page .dm-dubl .opt.win { border-color:#bcd3f7;background:#f2f7ff }
.v3-page .dm-dubl .opt .rd { width:18px;height:18px;border-radius:50%;border:2px solid #c3ccda;flex:none;position:relative }
.v3-page .dm-dubl .opt.win .rd { border-color:var(--brand) }
.v3-page .dm-dubl .opt.win .rd::after { content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand) }
.v3-page .dm-dubl .opt .val { overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.v3-page .dm-dubl .opt .flag { margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;color:var(--ok);background:#e5f5ec;border-radius:5px;padding:2px 7px;flex:none }
.v3-page .dm-dubl .opt .flag.mut { color:var(--ink3);background:#f1f4f8 }
.v3-page .dm-dubl .same { font-size:11px;color:var(--ink3);font-weight:600;text-align:center }
.v3-page .dm-dubl .preview { margin:14px 20px 0;border:1px solid #cfe0d6;background:#f4faf6;border-radius:12px;padding:13px 15px }
.v3-page .dm-dubl .preview .pt { font-size:11.5px;font-weight:800;letter-spacing:.4px;color:var(--ok);display:flex;align-items:center;gap:7px }
.v3-page .dm-dubl .preview .pt svg { width:14px;height:14px;fill:none;stroke:var(--ok);stroke-width:2;flex:none }
.v3-page .dm-dubl .preview .pl { display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:10px }
.v3-page .dm-dubl .preview .pi { font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:7px }
.v3-page .dm-dubl .preview .pi b { color:var(--ink);font-weight:700 }
.v3-page .dm-dubl .preview .pi svg { width:14px;height:14px;fill:none;stroke-width:2;flex:none }
.v3-page .dm-dubl .preview .pi.arch { color:var(--warn) }
.v3-page .dm-dubl .preview .undo { margin-top:11px;padding-top:10px;border-top:1px dashed #cfe0d6;font-size:11px;color:var(--ink3);font-weight:600;display:flex;align-items:center;gap:7px }
.v3-page .dm-dubl .preview .undo svg { width:13px;height:13px;fill:none;stroke:var(--ink3);stroke-width:2;flex:none }
.v3-page .dm-dubl .cmpfoot { display:flex;align-items:center;gap:12px;padding:15px 20px;border-radius:0 0 var(--r) var(--r) }
.v3-page .dm-dubl .btn { border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;gap:8px;cursor:default }
.v3-page .dm-dubl .btn svg { width:15px;height:15px;fill:none;stroke-width:2 }
.v3-page .dm-dubl .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff }
.v3-page .dm-dubl .btn.ghost { color:var(--ink2) }
.v3-page .dm-dubl .skip { margin-left:auto;font-size:12px;color:var(--ink3);font-weight:650;display:inline-flex;align-items:center;gap:7px }
.v3-page .dm-dubl .skip svg { width:14px;height:14px;fill:none;stroke:var(--ink3);stroke-width:2 }

/* ── dm-anreich (aus v2_dm_anreicherung.html) ── */
.v3-page .dm-anreich { --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --sepa:#2563eb; --ueb:#0ea5a4; --paypal:#7c6cf0; --stripe:#b558d9;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-anreich .num { font-variant-numeric:tabular-nums }
.v3-page .dm-anreich .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.v3-page .dm-anreich .top h1 { font-size:21px;letter-spacing:-.3px }
.v3-page .dm-anreich .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.v3-page .dm-anreich .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
    border-radius:11px;padding:8px 14px;color:var(--ink3);width:260px;box-shadow:var(--shadow) }
.v3-page .dm-anreich .iconbtn { width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.v3-page .dm-anreich .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:16px }
.v3-page .dm-anreich .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.v3-page .dm-anreich .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.v3-page .dm-anreich .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.v3-page .dm-anreich .card h2 .more { margin-left:auto;font-size:12.5px;color:var(--brand);font-weight:600 }
.v3-page .dm-anreich .card h2 .tot { margin-left:auto;font-size:12px;font-weight:700;color:var(--ink2) }
.v3-page .dm-anreich .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.v3-page .dm-anreich .c-blue { background:#e8effd;color:#1e56c8 }
.v3-page .dm-anreich .c-red { background:#fdeaec;color:#c93a4a }
.v3-page .dm-anreich .c-amb { background:#fdf3e2;color:#c07600 }
.v3-page .dm-anreich .c-grn { background:#e5f5ec;color:#178a50 }
.v3-page .dm-anreich .c-vio { background:#f0edfd;color:#7c6cf0 }
.v3-page .dm-anreich .review { grid-column:span 12;display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#fff8ec,#fef4f2);border:1px solid #f0dcae;padding:15px 20px }
.v3-page .dm-anreich .review .ri { width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid #f0dcae;display:grid;place-items:center;flex:none }
.v3-page .dm-anreich .review .ri svg { width:23px;height:23px;stroke:var(--warn);fill:none;stroke-width:2 }
.v3-page .dm-anreich .review .rt b { font-size:15px }
.v3-page .dm-anreich .review .rt p { font-size:12.5px;color:var(--ink2);margin-top:2px }
.v3-page .dm-anreich .review .rt p .k { color:var(--warn);font-weight:700 }
.v3-page .dm-anreich .review .rbadge { margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--warn);background:#fdf3e2;border:1px solid #f0dcae;border-radius:99px;padding:5px 12px }
.v3-page .dm-anreich .review .go { background:var(--brand);border:1px solid var(--brand);color:#fff;border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:8px;white-space:nowrap }
.v3-page .dm-anreich .review .go svg { width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2 }
.v3-page .dm-anreich .cov { grid-column:span 5 }
.v3-page .dm-anreich .covrow { display:flex;align-items:center;gap:12px;margin-top:13px }
.v3-page .dm-anreich .covrow .cl { width:104px;font-size:12.5px;font-weight:650;color:var(--ink2) }
.v3-page .dm-anreich .covrow .track { flex:1;height:9px;background:#eef1f6;border-radius:99px;overflow:hidden }
.v3-page .dm-anreich .covrow .track i { display:block;height:100%;border-radius:99px }
.v3-page .dm-anreich .covrow .cp { width:38px;text-align:right;font-size:13px;font-weight:800 }
.v3-page .dm-anreich .covrow .cn { width:96px;text-align:right;font-size:11px;color:var(--ink3);font-weight:600 }
.v3-page .dm-anreich .fill-grn { background:linear-gradient(90deg,#34d399,#178a50) }
.v3-page .dm-anreich .fill-blu { background:linear-gradient(90deg,#3f7ae6,#1e56c8) }
.v3-page .dm-anreich .fill-amb { background:linear-gradient(90deg,#f0b657,#c07600) }
.v3-page .dm-anreich .fill-red { background:linear-gradient(90deg,#ef8a97,#c93a4a) }
.v3-page .dm-anreich .p-grn { color:var(--ok) }
.v3-page .dm-anreich .p-blu { color:var(--brand) }
.v3-page .dm-anreich .p-amb { color:var(--warn) }
.v3-page .dm-anreich .p-red { color:var(--bad) }
.v3-page .dm-anreich .kosten { grid-column:span 4;display:flex;flex-direction:column }
.v3-page .dm-anreich .kbars { display:grid;grid-template-columns:repeat(6,1fr);gap:11px;align-items:end;height:104px;margin-top:16px }
.v3-page .dm-anreich .kbar { display:flex;flex-direction:column;justify-content:flex-end;height:100% }
.v3-page .dm-anreich .kbar i { width:100%;background:linear-gradient(180deg,#3f7ae6,#1e56c8);border-radius:5px 5px 0 0;min-height:3px }
.v3-page .dm-anreich .kbar.part i { background:linear-gradient(180deg,#9bbcf2,#6c95dd) }
.v3-page .dm-anreich .kbar .kv { text-align:center;font-size:10.5px;font-weight:700;color:var(--ink2);margin-bottom:4px }
.v3-page .dm-anreich .kxlab { display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin-top:7px;text-align:center;font-size:10.5px;color:var(--ink3);font-weight:600 }
.v3-page .dm-anreich .kxlab .now { color:var(--brand);font-weight:800 }
.v3-page .dm-anreich .kfoot { margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;font-size:12px;color:var(--ink2) }
.v3-page .dm-anreich .kfoot b { color:var(--ink);font-size:14px;margin-left:auto }
.v3-page .dm-anreich .creds { grid-column:span 3;display:flex;flex-direction:column }
.v3-page .dm-anreich .creds .cbig { font-size:30px;font-weight:800;letter-spacing:-1px;margin:12px 0 3px }
.v3-page .dm-anreich .creds .cbar { height:8px;background:#eef1f6;border-radius:99px;overflow:hidden;margin:0 0 5px }
.v3-page .dm-anreich .creds .cbar i { display:block;height:100%;border-radius:99px }
.v3-page .dm-anreich .creds .cnote { font-size:11.5px;color:var(--ink3);font-weight:600 }
.v3-page .dm-anreich .creds .crow { display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--ink2);padding:8px 0;border-top:1px solid var(--line);margin-top:12px }
.v3-page .dm-anreich .creds .crow b { font-weight:700;color:var(--ink) }
.v3-page .dm-anreich .creds .crow:first-of-type { margin-top:auto }
.v3-page .dm-anreich .hist { grid-column:span 8 }
.v3-page .dm-anreich table { width:100%;border-collapse:collapse;font-size:13px }
.v3-page .dm-anreich th { font-size:10.5px;letter-spacing:.7px;color:var(--ink3);text-align:left;font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line) }
.v3-page .dm-anreich td { padding:12px 12px;border-bottom:1px solid #eef1f6;vertical-align:middle }
.v3-page .dm-anreich tbody tr:last-child td { border-bottom:none }
.v3-page .dm-anreich .selname { font-weight:650 }
.v3-page .dm-anreich .selname small { display:block;color:var(--ink3);font-size:11px;font-weight:500 }
.v3-page .dm-anreich .stt { font-size:10.5px;font-weight:800;letter-spacing:.4px;border-radius:6px;padding:3px 9px;display:inline-flex;align-items:center;gap:5px }
.v3-page .dm-anreich .stt .d { width:7px;height:7px;border-radius:50% }
.v3-page .dm-anreich .st-ok { background:#e5f5ec;color:#178a50 }
.v3-page .dm-anreich .st-run { background:#e8effd;color:#1e56c8 }
.v3-page .dm-anreich .st-rev { background:#fdf3e2;color:#c07600 }
.v3-page .dm-anreich .difflink { color:var(--brand);font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;gap:5px }
.v3-page .dm-anreich .difflink svg { width:13px;height:13px;fill:none;stroke-width:2 }
.v3-page .dm-anreich .difflink.rev { color:var(--warn) }
.v3-page .dm-anreich .muted { color:var(--ink3) }
.v3-page .dm-anreich .newrun { grid-column:span 4;display:flex;flex-direction:column }
.v3-page .dm-anreich .frow { margin-top:14px }
.v3-page .dm-anreich .frow label { font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.3px }
.v3-page .dm-anreich .sel { margin-top:6px;border:1.6px solid #bcd3f7;border-radius:10px;padding:11px 13px;font-size:13.5px;font-weight:600;background:#f7faff;display:flex;align-items:center;gap:9px;color:var(--ink) }
.v3-page .dm-anreich .sel .sc { margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand);background:#e8effd;border-radius:99px;padding:2px 9px }
.v3-page .dm-anreich .sel svg { width:15px;height:15px;fill:none;stroke:var(--ink3);stroke-width:2 }
.v3-page .dm-anreich .calc { margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe;padding:14px 15px }
.v3-page .dm-anreich .calc .cr { display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:5px 0;color:var(--ink2) }
.v3-page .dm-anreich .calc .cr b { font-weight:700;color:var(--ink) }
.v3-page .dm-anreich .calc .cr.tot { border-top:1px solid var(--line);margin-top:6px;padding-top:11px;font-size:14px }
.v3-page .dm-anreich .calc .cr.tot b { font-size:20px;color:var(--brand);letter-spacing:-.5px }
.v3-page .dm-anreich .calc .credleft { font-size:11.5px;color:var(--warn);margin-top:4px;text-align:right;font-weight:600 }
.v3-page .dm-anreich .btn { border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 16px;font-size:13.5px;font-weight:700;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:default;width:100% }
.v3-page .dm-anreich .btn svg { width:15px;height:15px;fill:none;stroke-width:2 }
.v3-page .dm-anreich .btn.pri { background:var(--brand);border-color:var(--brand);color:#fff;margin-top:14px }
.v3-page .dm-anreich .gate { font-size:11px;color:var(--ink3);text-align:center;margin-top:9px;display:flex;align-items:center;gap:6px;justify-content:center }
.v3-page .dm-anreich .gate svg { width:13px;height:13px;fill:none;stroke:var(--ok);stroke-width:2 }
.v3-page .dm-anreich .single { grid-column:span 12;display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#f2f7ff,#f7f4ff);border-color:#dbe6fb }
.v3-page .dm-anreich .single .si { width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none }
.v3-page .dm-anreich .single .si svg { width:22px;height:22px;fill:none;stroke:var(--brand);stroke-width:2 }
.v3-page .dm-anreich .single b { font-size:14px }
.v3-page .dm-anreich .single p { font-size:12.5px;color:var(--ink2);margin-top:2px }
.v3-page .dm-anreich .single .go { margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap }

/* ── dm-syscheck (aus v2_systemcheck.html) ── */
.v3-page .dm-syscheck { --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --sepa:#2563eb; --ueb:#0ea5a4; --paypal:#7c6cf0; --stripe:#b558d9;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-syscheck .num { font-variant-numeric:tabular-nums }
.v3-page .dm-syscheck .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.v3-page .dm-syscheck .top h1 { font-size:21px;letter-spacing:-.3px }
.v3-page .dm-syscheck .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.v3-page .dm-syscheck .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:5px 12px }
.v3-page .dm-syscheck .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.v3-page .dm-syscheck .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:230px;box-shadow:var(--shadow) }
.v3-page .dm-syscheck .iconbtn { position:relative;width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.v3-page .dm-syscheck .iconbtn .bdg { position:absolute;top:-5px;right:-5px;background:#e8563f;color:#fff;font-size:10px;font-weight:700;border-radius:99px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px }
.v3-page .dm-syscheck .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow) }
.v3-page .dm-syscheck .summary { display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:20px }
.v3-page .dm-syscheck .sumbig { display:flex;align-items:center;gap:13px }
.v3-page .dm-syscheck .ring { width:52px;height:52px;border-radius:50%;background:conic-gradient(#22c55e 0 92%,#f59e0b 92% 100%);display:grid;place-items:center }
.v3-page .dm-syscheck .ring::after { content:'';width:40px;height:40px;border-radius:50%;background:#fff }
.v3-page .dm-syscheck .ring b { position:absolute;font-size:13px;font-weight:800;color:var(--ink) }
.v3-page .dm-syscheck .rw { position:relative;display:grid;place-items:center }
.v3-page .dm-syscheck .sumbig .tx b { font-size:17px }
.v3-page .dm-syscheck .sumbig .tx span { display:block;font-size:12px;color:var(--ink3);font-weight:600 }
.v3-page .dm-syscheck .sumpill { display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;border-radius:99px;padding:6px 13px;white-space:nowrap }
.v3-page .dm-syscheck .sumpill svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-syscheck .p-ok { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-syscheck .p-warn { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-syscheck .p-neut { background:#f1f4f8;color:var(--ink2) }
.v3-page .dm-syscheck .summary .act { margin-left:auto;display:flex;gap:9px }
.v3-page .dm-syscheck .btn { display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 15px;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;white-space:nowrap }
.v3-page .dm-syscheck .btn svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-syscheck .btn.prim { background:var(--brand);border-color:var(--brand);color:#fff }
.v3-page .dm-syscheck .grouphdr { display:flex;align-items:center;gap:11px;margin:22px 2px 11px }
.v3-page .dm-syscheck .grouphdr .lbl { font-size:11px;letter-spacing:1.4px;font-weight:800;color:var(--ink2) }
.v3-page .dm-syscheck .grouphdr .cnt { font-size:11px;font-weight:700;color:var(--ink3);background:#eef1f6;border-radius:99px;padding:2px 9px }
.v3-page .dm-syscheck .grouphdr .ln { flex:1;height:1px;background:var(--line) }
.v3-page .dm-syscheck .grouphdr .gtag { width:8px;height:8px;border-radius:3px }
.v3-page .dm-syscheck .t-fin { background:#1e56c8 }
.v3-page .dm-syscheck .t-mit { background:#0ea5a4 }
.v3-page .dm-syscheck .t-kom { background:#7c6cf0 }
.v3-page .dm-syscheck .t-sti { background:#b558d9 }
.v3-page .dm-syscheck .t-stb { background:#c07600 }
.v3-page .dm-syscheck .t-sys { background:#5b6b84 }
.v3-page .dm-syscheck .t-det { background:#c93a4a }
.v3-page .dm-syscheck .syslist { display:flex;flex-direction:column;gap:9px }
.v3-page .dm-syscheck .srow { display:grid;grid-template-columns:1.55fr 1.4fr 108px 120px 120px;gap:14px;align-items:center;padding:14px 18px }
.v3-page .dm-syscheck .srow.warn { border-color:#f0d49a;background:linear-gradient(180deg,#fffdf8,#fff) }
.v3-page .dm-syscheck .s-name { display:flex;align-items:flex-start;gap:11px;min-width:0 }
.v3-page .dm-syscheck .st { width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px }
.v3-page .dm-syscheck .st-ok { background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.v3-page .dm-syscheck .st-warn { background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.v3-page .dm-syscheck .st-bad { background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.15) }
.v3-page .dm-syscheck .s-name .nm { font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px }
.v3-page .dm-syscheck .arealink { font-size:9.5px;font-weight:800;letter-spacing:.4px;border-radius:5px;padding:2px 6px;display:inline-flex;align-items:center;gap:3px }
.v3-page .dm-syscheck .arealink svg { width:9px;height:9px;stroke-width:2.4;fill:none }
.v3-page .dm-syscheck .al-fin { background:#e8effd;color:#1e56c8 }
.v3-page .dm-syscheck .al-mit { background:#e0f5f3;color:#0b7d76 }
.v3-page .dm-syscheck .al-kom { background:#f0edfd;color:#6d5bd0 }
.v3-page .dm-syscheck .al-sti { background:#f6e9fb;color:#a13fc5 }
.v3-page .dm-syscheck .al-stb { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-syscheck .al-sys { background:#eef1f6;color:var(--ink2) }
.v3-page .dm-syscheck .s-name .sub { font-size:11.5px;color:var(--ink3);font-weight:500;margin-top:2px }
.v3-page .dm-syscheck .depchip { display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--ink2);background:#f1f4f8;border-radius:6px;padding:2px 8px;margin-top:6px }
.v3-page .dm-syscheck .depchip svg { width:11px;height:11px;stroke-width:2.2;fill:none }
.v3-page .dm-syscheck .depchip.blk { background:#fdf3e2;color:#9a6a12 }
.v3-page .dm-syscheck .col .k { font-size:10px;letter-spacing:.5px;color:var(--ink3);font-weight:700;text-transform:uppercase }
.v3-page .dm-syscheck .col .v { font-size:12.5px;color:var(--ink);font-weight:600;margin-top:2px }
.v3-page .dm-syscheck .col .v.good { color:var(--ok) }
.v3-page .dm-syscheck .col .nx { font-size:11px;color:var(--ink3);font-weight:500;margin-top:4px }
.v3-page .dm-syscheck .col .nx b { color:var(--ink2);font-weight:700 }
.v3-page .dm-syscheck .verl { display:flex;flex-direction:column;gap:5px }
.v3-page .dm-syscheck .verl .vk { font-size:9.5px;letter-spacing:.4px;color:var(--ink3);font-weight:700;text-transform:uppercase }
.v3-page .dm-syscheck .runs { display:flex;gap:3px;align-items:center }
.v3-page .dm-syscheck .run { width:11px;height:15px;border-radius:3px }
.v3-page .dm-syscheck .run.g { background:#22c55e }
.v3-page .dm-syscheck .run.a { background:#f59e0b }
.v3-page .dm-syscheck .run.r { background:#ef4444 }
.v3-page .dm-syscheck .fresh { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap }
.v3-page .dm-syscheck .fresh svg { width:12px;height:12px;fill:none;stroke-width:2 }
.v3-page .dm-syscheck .f-ok { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-syscheck .f-warn { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-syscheck .acts { display:flex;flex-direction:column;gap:6px;align-items:stretch }
.v3-page .dm-syscheck .abtn { display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;padding:7px 10px;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;white-space:nowrap }
.v3-page .dm-syscheck .abtn svg { width:13px;height:13px;fill:none;stroke-width:2 }
.v3-page .dm-syscheck .abtn.safe { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.v3-page .dm-syscheck .abtn.report { color:var(--warn);border-color:#f0d49a;background:#fffaf0 }
.v3-page .dm-syscheck .diag { grid-column:1 / -1;margin-top:13px;padding-top:13px;border-top:1px dashed #ecd9b0;display:flex;gap:22px;align-items:flex-start }
.v3-page .dm-syscheck .diagbox { display:flex;gap:11px;align-items:flex-start;flex:1 }
.v3-page .dm-syscheck .diagbox .ic { width:30px;height:30px;border-radius:9px;background:#fdf3e2;color:var(--warn);display:grid;place-items:center;flex:none }
.v3-page .dm-syscheck .diagbox .ic svg { width:16px;height:16px;fill:none;stroke-width:2 }
.v3-page .dm-syscheck .diagbox b { font-size:13px }
.v3-page .dm-syscheck .diagbox p { font-size:12.5px;color:var(--ink2);margin-top:2px;max-width:560px }
.v3-page .dm-syscheck .diagbox .meta { display:flex;gap:8px;margin-top:8px;flex-wrap:wrap }
.v3-page .dm-syscheck .mchip { font-size:11px;font-weight:700;background:#f6efe0;color:#9a6a12;border-radius:6px;padding:3px 9px }
.v3-page .dm-syscheck .detgrid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px }
.v3-page .dm-syscheck .det { padding:16px 17px;display:flex;flex-direction:column;gap:0 }
.v3-page .dm-syscheck .det.warn { border-color:#f0d49a;background:linear-gradient(180deg,#fffdf8,#fff) }
.v3-page .dm-syscheck .det .dhd { display:flex;align-items:flex-start;gap:11px }
.v3-page .dm-syscheck .det .di { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none }
.v3-page .dm-syscheck .det .di svg { width:17px;height:17px;fill:none;stroke-width:2 }
.v3-page .dm-syscheck .di-red { background:#fdeaec;color:var(--bad) }
.v3-page .dm-syscheck .di-amb { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-syscheck .di-blue { background:#e8effd;color:var(--brand) }
.v3-page .dm-syscheck .det .dhd b { font-size:13.5px }
.v3-page .dm-syscheck .det .dst { margin-left:auto;width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px }
.v3-page .dm-syscheck .dst.g { background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15) }
.v3-page .dm-syscheck .dst.a { background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.v3-page .dm-syscheck .det p { font-size:12px;color:var(--ink2);margin:9px 0 12px;line-height:1.5 }
.v3-page .dm-syscheck .det .find { display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;background:#f6f8fb;font-size:12px;font-weight:700 }
.v3-page .dm-syscheck .det .find.hit { background:#fdf3e2;color:#9a6a12 }
.v3-page .dm-syscheck .det .find.clean { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-syscheck .det .find .n { margin-left:auto;font-weight:800 }
.v3-page .dm-syscheck .det .dfoot { margin-top:12px;display:flex;align-items:center;gap:10px }
.v3-page .dm-syscheck .det .dlink { font-size:12px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:5px }
.v3-page .dm-syscheck .det .dlink svg { width:13px;height:13px;stroke-width:2;fill:none }
.v3-page .dm-syscheck .det .runsmini { margin-left:auto;display:flex;gap:2.5px }
.v3-page .dm-syscheck .det .runsmini i { width:8px;height:12px;border-radius:2px }

/* ── dm-meldungen (aus v2_meldungen.html) ── */
.v3-page .dm-meldungen { --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-meldungen .num { font-variant-numeric:tabular-nums }
.v3-page .dm-meldungen .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.v3-page .dm-meldungen .top h1 { font-size:21px;letter-spacing:-.3px;display:flex;align-items:center;gap:10px }
.v3-page .dm-meldungen .top h1 .badge { background:#e8563f;color:#fff;font-size:12px;font-weight:700;border-radius:99px;padding:2px 10px }
.v3-page .dm-meldungen .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.v3-page .dm-meldungen .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:230px;box-shadow:var(--shadow) }
.v3-page .dm-meldungen .iconbtn { position:relative;width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.v3-page .dm-meldungen .iconbtn .bdg { position:absolute;top:-5px;right:-5px;background:#e8563f;color:#fff;font-size:10px;font-weight:700;border-radius:99px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px }
.v3-page .dm-meldungen .iconbtn.hot { background:#fdeaec;border-color:#f3c3c9;color:var(--bad) }
.v3-page .dm-meldungen .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow) }
.v3-page .dm-meldungen .layout { display:grid;grid-template-columns:1fr 430px;gap:18px;align-items:start }
.v3-page .dm-meldungen .filterbar { display:flex;align-items:center;gap:8px;margin-bottom:14px }
.v3-page .dm-meldungen .chip { border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px }
.v3-page .dm-meldungen .chip .c { font-size:11px;font-weight:700;background:#eef1f6;color:var(--ink3);border-radius:99px;padding:0 7px }
.v3-page .dm-meldungen .chip.on { background:#e8effd;border-color:#bcd3f7;color:var(--brand) }
.v3-page .dm-meldungen .chip.on .c { background:#d3e2fb;color:var(--brand) }
.v3-page .dm-meldungen .filterbar .right { margin-left:auto;display:flex;gap:8px;align-items:center }
.v3-page .dm-meldungen .togglepill { display:inline-flex;align-items:center;gap:9px;border:1px solid #bcd3f7;background:#e8effd;border-radius:99px;padding:5px 13px 5px 15px;font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer }
.v3-page .dm-meldungen .togglepill .sw { width:34px;height:19px;border-radius:99px;background:var(--brand);position:relative;flex:none }
.v3-page .dm-meldungen .togglepill .sw::after { content:'';position:absolute;top:2.5px;left:17px;width:14px;height:14px;border-radius:50%;background:#fff }
.v3-page .dm-meldungen .tl { padding:6px 0 }
.v3-page .dm-meldungen .titem { display:grid;grid-template-columns:44px 1fr;gap:0;padding:0 20px;position:relative }
.v3-page .dm-meldungen .rail { display:flex;flex-direction:column;align-items:center }
.v3-page .dm-meldungen .rail .ic { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;z-index:1;margin-top:16px }
.v3-page .dm-meldungen .rail .ic svg { width:16px;height:16px;fill:none;stroke-width:2 }
.v3-page .dm-meldungen .rail .line { flex:1;width:2px;background:var(--line);margin:4px 0 0 }
.v3-page .dm-meldungen .titem:last-child .rail .line { display:none }
.v3-page .dm-meldungen .i-bad { background:#fdeaec;color:var(--bad) }
.v3-page .dm-meldungen .i-warn { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-meldungen .i-team { background:#e8effd;color:var(--brand) }
.v3-page .dm-meldungen .i-ok { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-meldungen .tbody { padding:15px 0 15px 14px;border-bottom:1px solid #eef1f6 }
.v3-page .dm-meldungen .titem:last-child .tbody { border-bottom:none }
.v3-page .dm-meldungen .tbody.sel { background:linear-gradient(90deg,#f5f8ff,#fff);border-radius:12px;padding-left:14px;padding-right:14px;border-bottom-color:transparent }
.v3-page .dm-meldungen .tline1 { display:flex;align-items:center;gap:9px }
.v3-page .dm-meldungen .tline1 b { font-size:14px;font-weight:700 }
.v3-page .dm-meldungen .kind { font-size:10px;font-weight:800;letter-spacing:.5px;border-radius:5px;padding:2px 7px }
.v3-page .dm-meldungen .k-sys { background:#eef1f6;color:var(--ink2) }
.v3-page .dm-meldungen .k-team { background:#e8effd;color:var(--brand) }
.v3-page .dm-meldungen .areachip { font-size:10px;font-weight:700;letter-spacing:.3px;border-radius:5px;padding:2px 7px;display:inline-flex;align-items:center;gap:4px }
.v3-page .dm-meldungen .areachip svg { width:9px;height:9px;stroke-width:2.4;fill:none }
.v3-page .dm-meldungen .a-fin { background:#e8effd;color:#1e56c8 }
.v3-page .dm-meldungen .a-sti { background:#f6e9fb;color:#a13fc5 }
.v3-page .dm-meldungen .a-stb { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-meldungen .a-kom { background:#f0edfd;color:#6d5bd0 }
.v3-page .dm-meldungen .tline1 time { margin-left:auto;font-size:11.5px;color:var(--ink3);font-weight:600;white-space:nowrap }
.v3-page .dm-meldungen .tdesc { font-size:12.5px;color:var(--ink2);margin-top:5px;max-width:640px }
.v3-page .dm-meldungen .tmeta { display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap }
.v3-page .dm-meldungen .dur { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;background:#f1f4f8;color:var(--ink2);border-radius:99px;padding:3px 9px }
.v3-page .dm-meldungen .dur svg { width:11px;height:11px;fill:none;stroke-width:2 }
.v3-page .dm-meldungen .stt { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;border-radius:99px;padding:3px 10px }
.v3-page .dm-meldungen .stt::before { content:'';width:7px;height:7px;border-radius:50% }
.v3-page .dm-meldungen .s-open { background:#fdeaec;color:var(--bad) }
.v3-page .dm-meldungen .s-open::before { background:var(--bad) }
.v3-page .dm-meldungen .s-prog { background:#fdf3e2;color:var(--warn) }
.v3-page .dm-meldungen .s-prog::before { background:var(--warn) }
.v3-page .dm-meldungen .s-done { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-meldungen .s-done::before { background:var(--ok) }
.v3-page .dm-meldungen .s-auto { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-meldungen .s-auto::before { background:var(--ok) }
.v3-page .dm-meldungen .assign { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink2);font-weight:600 }
.v3-page .dm-meldungen .syslink { display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--brand);background:#f5f8ff;border:1px solid #dce8fb;border-radius:99px;padding:3px 10px }
.v3-page .dm-meldungen .syslink svg { width:11px;height:11px;stroke-width:2.2;fill:none }
.v3-page .dm-meldungen .mini-ava { width:19px;height:19px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:9px }
.v3-page .dm-meldungen .av-lisa { background:#a13fc5 }
.v3-page .dm-meldungen .av-tim { background:#0ea5a4 }
.v3-page .dm-meldungen .av-cs { background:#2f6fe0 }
.v3-page .dm-meldungen .av-sys { background:#5b6b84 }
.v3-page .dm-meldungen .detail { position:sticky;top:22px }
.v3-page .dm-meldungen .dhead { padding:18px 20px;border-bottom:1px solid var(--line) }
.v3-page .dm-meldungen .dhead .row1 { display:flex;align-items:center;gap:9px;margin-bottom:10px }
.v3-page .dm-meldungen .dhead h2 { font-size:16px;font-weight:800;letter-spacing:-.2px;margin-top:10px }
.v3-page .dm-meldungen .dhead .who { display:flex;align-items:center;gap:9px;margin-top:12px;font-size:12.5px;color:var(--ink2) }
.v3-page .dm-meldungen .dhead .who b { color:var(--ink) }
.v3-page .dm-meldungen .dbody { padding:16px 20px }
.v3-page .dm-meldungen .dsec { font-size:10.5px;letter-spacing:.8px;font-weight:800;color:var(--ink3);text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:8px }
.v3-page .dm-meldungen .dsec .slink { margin-left:auto;font-size:11px;font-weight:700;color:var(--brand);letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:4px }
.v3-page .dm-meldungen .dsec .slink svg { width:11px;height:11px;stroke-width:2.2;fill:none }
.v3-page .dm-meldungen .escpath { display:flex;align-items:stretch;gap:0;margin-bottom:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden }
.v3-page .dm-meldungen .escnode { flex:1;padding:10px 11px;display:flex;flex-direction:column;gap:5px;position:relative;background:#fbfcfe }
.v3-page .dm-meldungen .escnode + .escnode { border-left:1px solid var(--line) }
.v3-page .dm-meldungen .escnode.done { background:#f4f9f5 }
.v3-page .dm-meldungen .escnode .en1 { display:flex;align-items:center;gap:6px }
.v3-page .dm-meldungen .escnode .en1 .mini-ava { width:17px;height:17px;font-size:8px }
.v3-page .dm-meldungen .escnode .en1 b { font-size:11px;font-weight:700 }
.v3-page .dm-meldungen .escnode .estep { font-size:9.5px;letter-spacing:.4px;font-weight:800;color:var(--ink3);text-transform:uppercase }
.v3-page .dm-meldungen .escnode time { font-size:10px;color:var(--ink3);font-weight:600 }
.v3-page .dm-meldungen .escnode .dotok { width:14px;height:14px;border-radius:50%;background:#e5f5ec;color:var(--ok);display:grid;place-items:center }
.v3-page .dm-meldungen .escnode .dotok svg { width:9px;height:9px;stroke-width:3;fill:none }
.v3-page .dm-meldungen .escnode .dotwait { width:14px;height:14px;border-radius:50%;background:#fdeaec;color:var(--bad);display:grid;place-items:center;font-size:9px;font-weight:800 }
.v3-page .dm-meldungen .thread { display:flex;flex-direction:column;gap:0;position:relative;margin-bottom:20px }
.v3-page .dm-meldungen .tevt { display:grid;grid-template-columns:30px 1fr;gap:11px;padding-bottom:16px;position:relative }
.v3-page .dm-meldungen .tevt:last-child { padding-bottom:0 }
.v3-page .dm-meldungen .tevt .dot { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;z-index:1 }
.v3-page .dm-meldungen .tevt .dot svg { width:13px;height:13px;fill:none;stroke-width:2 }
.v3-page .dm-meldungen .tevt .ln { position:absolute;left:13px;top:26px;bottom:-2px;width:2px;background:var(--line) }
.v3-page .dm-meldungen .tevt:last-child .ln { display:none }
.v3-page .dm-meldungen .tevt .txt b { font-size:12.5px }
.v3-page .dm-meldungen .tevt .txt p { font-size:12px;color:var(--ink2);margin-top:2px }
.v3-page .dm-meldungen .tevt .txt time { font-size:10.5px;color:var(--ink3);font-weight:600 }
.v3-page .dm-meldungen .cbox { background:#f6f8fb;border:1px solid var(--line);border-radius:12px;padding:12px }
.v3-page .dm-meldungen .cbox textarea { width:100%;border:none;background:transparent;resize:none;font:inherit;font-size:12.5px;color:var(--ink2);outline:none;min-height:46px }
.v3-page .dm-meldungen .cbox .cfoot { display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line) }
.v3-page .dm-meldungen .cbox .cfoot .send { margin-left:auto;background:var(--brand);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer }
.v3-page .dm-meldungen .attic { width:28px;height:28px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink3) }
.v3-page .dm-meldungen .attic svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-meldungen .dfoot { padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;flex-wrap:wrap }
.v3-page .dm-meldungen .dfoot .lbl { font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.5px }
.v3-page .dm-meldungen .sbtn { border-radius:9px;padding:8px 13px;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px }
.v3-page .dm-meldungen .sbtn svg { width:13px;height:13px;fill:none;stroke-width:2 }
.v3-page .dm-meldungen .sbtn.prog { background:#fdf3e2;border-color:#f0d49a;color:var(--warn) }
.v3-page .dm-meldungen .sbtn.done { background:var(--ok);border-color:var(--ok);color:#fff }
.v3-page .dm-meldungen .sbtn.task { background:#eef4fe;border-color:#bcd3f7;color:var(--brand);margin-left:auto }

/* ── dm-einstell (aus v2_einstellungen.html) ── */
.v3-page .dm-einstell { --canvas:#f4f6f9; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-einstell .num { font-variant-numeric:tabular-nums }
.v3-page .dm-einstell .top { display:flex;align-items:center;gap:16px;margin-bottom:18px }
.v3-page .dm-einstell .top h1 { font-size:21px;letter-spacing:-.3px }
.v3-page .dm-einstell .top .date { color:var(--ink3);font-weight:500;font-size:13px;margin-top:3px }
.v3-page .dm-einstell .hpill { display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ok);background:#e5f5ec;border-radius:99px;padding:5px 12px }
.v3-page .dm-einstell .hpill .hd { width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.v3-page .dm-einstell .search { margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 14px;color:var(--ink3);width:220px;box-shadow:var(--shadow) }
.v3-page .dm-einstell .iconbtn { position:relative;width:37px;height:37px;border-radius:11px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);box-shadow:var(--shadow) }
.v3-page .dm-einstell .iconbtn .bdg { position:absolute;top:-5px;right:-5px;background:#e8563f;color:#fff;font-size:10px;font-weight:700;border-radius:99px;min-width:16px;height:16px;display:grid;place-items:center;padding:0 4px }
.v3-page .dm-einstell .grid { display:grid;grid-template-columns:repeat(12,1fr);gap:18px }
.v3-page .dm-einstell .card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px }
.v3-page .dm-einstell .card h2 { display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;letter-spacing:-.1px }
.v3-page .dm-einstell .card h2 svg { width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:2 }
.v3-page .dm-einstell .card h2 .more { margin-left:auto;font-size:12px;color:var(--brand);font-weight:600 }
.v3-page .dm-einstell .sub { color:var(--ink3);font-size:12px;margin-top:2px }
.v3-page .dm-einstell .safety { grid-column:span 12;padding:0;overflow:hidden;display:grid;grid-template-columns:360px 1fr }
.v3-page .dm-einstell .safety .lead { background:linear-gradient(135deg,#10304f,#173a5f);color:#fff;padding:20px 22px;display:flex;flex-direction:column }
.v3-page .dm-einstell .safety .lead .sh { display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:1px;color:#9fc0e2;font-weight:700 }
.v3-page .dm-einstell .safety .lead .sh svg { width:16px;height:16px;stroke:#7fd1a8;fill:none;stroke-width:2 }
.v3-page .dm-einstell .safety .lead .big { display:flex;align-items:center;gap:12px;margin:14px 0 4px }
.v3-page .dm-einstell .safety .lead .big .st { width:13px;height:13px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2) }
.v3-page .dm-einstell .safety .lead .big b { font-size:22px;font-weight:800;letter-spacing:-.4px }
.v3-page .dm-einstell .safety .lead p { font-size:12px;color:#bcd2e8;margin-top:4px;line-height:1.5 }
.v3-page .dm-einstell .safety .lead .master { margin-top:auto;display:flex;align-items:center;gap:11px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14) }
.v3-page .dm-einstell .safety .lead .master .ml b { font-size:12.5px;color:#fff }
.v3-page .dm-einstell .safety .lead .master .ml span { display:block;font-size:11px;color:#9fb8d2 }
.v3-page .dm-einstell .safety .lead .master .sw { margin-left:auto;width:46px;height:26px;border-radius:99px;background:rgba(255,255,255,.22);position:relative;flex:none;cursor:pointer }
.v3-page .dm-einstell .safety .lead .master .sw::after { content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff }
.v3-page .dm-einstell .safety .body { padding:20px 22px;display:flex;flex-direction:column;gap:14px }
.v3-page .dm-einstell .safety .mets { display:grid;grid-template-columns:repeat(4,1fr);gap:14px }
.v3-page .dm-einstell .met { border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fbfcfe }
.v3-page .dm-einstell .met .ml { font-size:10.5px;letter-spacing:.5px;color:var(--ink3);font-weight:700;text-transform:uppercase }
.v3-page .dm-einstell .met .mv { font-size:21px;font-weight:800;letter-spacing:-.5px;margin:4px 0 2px }
.v3-page .dm-einstell .met .mv.good { color:var(--ok) }
.v3-page .dm-einstell .met .mv.warn { color:var(--warn) }
.v3-page .dm-einstell .met .mfoot { font-size:11px;color:var(--ink3);font-weight:600 }
.v3-page .dm-einstell .limitbar { height:6px;border-radius:99px;background:#eef1f6;margin-top:7px;overflow:hidden }
.v3-page .dm-einstell .limitbar i { display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#178a50) }
.v3-page .dm-einstell .safety .note { display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink2);background:#f6f8fb;border:1px solid var(--line);border-radius:11px;padding:10px 13px }
.v3-page .dm-einstell .safety .note svg { width:15px;height:15px;stroke:var(--ok);fill:none;stroke-width:2;flex:none }
.v3-page .dm-einstell .safety .note .gobtn { margin-left:auto;font-size:12px;font-weight:700;color:var(--brand) }
.v3-page .dm-einstell .users { grid-column:span 6 }
.v3-page .dm-einstell .ulist { margin-top:14px;display:flex;flex-direction:column }
.v3-page .dm-einstell .urow { display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid #eef1f6 }
.v3-page .dm-einstell .urow:last-child { border:none }
.v3-page .dm-einstell .uav { width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none }
.v3-page .dm-einstell .uav1 { background:#2f6fe0 }
.v3-page .dm-einstell .uav2 { background:#a13fc5 }
.v3-page .dm-einstell .uav3 { background:#0ea5a4 }
.v3-page .dm-einstell .uav4 { background:#c07600 }
.v3-page .dm-einstell .urow .un b { font-size:13.5px }
.v3-page .dm-einstell .urow .un span { display:block;font-size:11.5px;color:var(--ink3) }
.v3-page .dm-einstell .role { margin-left:auto;font-size:11px;font-weight:700;border-radius:99px;padding:4px 11px }
.v3-page .dm-einstell .r-super { background:#0f2b46;color:#fff }
.v3-page .dm-einstell .r-admin { background:#e8effd;color:var(--brand) }
.v3-page .dm-einstell .r-office { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-einstell .urow .gear { color:var(--ink3);margin-left:12px }
.v3-page .dm-einstell .adduser { margin-top:13px;border:1px dashed #cfd8e6;border-radius:10px;padding:10px;text-align:center;font-size:12.5px;font-weight:700;color:var(--brand);cursor:pointer }
.v3-page .dm-einstell .switches { grid-column:span 6 }
.v3-page .dm-einstell .tlist { margin-top:14px;display:flex;flex-direction:column;gap:2px }
.v3-page .dm-einstell .trow { display:flex;align-items:center;gap:13px;padding:13px 2px;border-bottom:1px solid #eef1f6 }
.v3-page .dm-einstell .trow:last-child { border:none }
.v3-page .dm-einstell .trow .ti { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none }
.v3-page .dm-einstell .trow .ti svg { width:17px;height:17px;fill:none;stroke-width:2 }
.v3-page .dm-einstell .ti-grn { background:#e5f5ec;color:var(--ok) }
.v3-page .dm-einstell .ti-blue { background:#e8effd;color:var(--brand) }
.v3-page .dm-einstell .ti-vio { background:#f0edfd;color:#7c6cf0 }
.v3-page .dm-einstell .trow .tt { min-width:0 }
.v3-page .dm-einstell .trow .tt b { font-size:13.5px }
.v3-page .dm-einstell .trow .tt .aud { display:flex;align-items:center;gap:7px;margin-top:3px }
.v3-page .dm-einstell .trow .tt .aud .who { display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink3);font-weight:600 }
.v3-page .dm-einstell .trow .tt .aud .mini-ava { width:15px;height:15px;border-radius:50%;background:#2f6fe0;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:700 }
.v3-page .dm-einstell .trow .tt .aud .ptr { font-size:10.5px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:4px;border-left:1px solid var(--line);padding-left:7px }
.v3-page .dm-einstell .trow .tt .aud .ptr svg { width:11px;height:11px;stroke-width:2.2;fill:none }
.v3-page .dm-einstell .sw { margin-left:auto;width:44px;height:25px;border-radius:99px;background:var(--ok);position:relative;flex:none;cursor:pointer }
.v3-page .dm-einstell .sw::after { content:'';position:absolute;top:3px;left:22px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3) }
.v3-page .dm-einstell .sw.off { background:#cfd6e0 }
.v3-page .dm-einstell .sw.off::after { left:3px }
.v3-page .dm-einstell .api { grid-column:span 8 }
.v3-page .dm-einstell .apigrid { display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin-top:14px }
.v3-page .dm-einstell .apirow { display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid #eef1f6 }
.v3-page .dm-einstell .apirow .logo2 { width:32px;height:32px;border-radius:9px;background:#f1f4f8;display:grid;place-items:center;color:var(--ink2);flex:none;font-size:11px;font-weight:800 }
.v3-page .dm-einstell .apirow .an b { font-size:13px }
.v3-page .dm-einstell .apirow .an span { display:block;font-size:11px;color:var(--ink3) }
.v3-page .dm-einstell .apirow .status { margin-left:auto;text-align:right }
.v3-page .dm-einstell .apirow .status .s1 { display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700 }
.v3-page .dm-einstell .apirow .status .s1::before { content:'';width:7px;height:7px;border-radius:50% }
.v3-page .dm-einstell .ok-dot { color:var(--ok) }
.v3-page .dm-einstell .ok-dot::before { background:var(--ok) }
.v3-page .dm-einstell .warn-dot { color:var(--warn) }
.v3-page .dm-einstell .warn-dot::before { background:var(--warn) }
.v3-page .dm-einstell .apirow .status .s2 { display:block;font-size:10.5px;color:var(--ink3);font-weight:600;margin-top:2px }
.v3-page .dm-einstell .audit { grid-column:span 4 }
.v3-page .dm-einstell .alist { margin-top:12px;display:flex;flex-direction:column }
.v3-page .dm-einstell .arow { display:flex;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:flex-start }
.v3-page .dm-einstell .arow:last-child { border:none }
.v3-page .dm-einstell .arow .ad { width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;background:#f1f4f8;color:var(--ink2) }
.v3-page .dm-einstell .arow .ad svg { width:13px;height:13px;fill:none;stroke-width:2 }
.v3-page .dm-einstell .arow p { font-size:12.5px }
.v3-page .dm-einstell .arow p b { font-weight:700 }
.v3-page .dm-einstell .arow .who { font-size:11px;color:var(--ink3);font-weight:600;margin-top:2px }
.v3-page .dm-einstell .arow time { margin-left:auto;font-size:11px;color:var(--ink3);font-weight:600;white-space:nowrap;padding-top:1px }
.v3-page .dm-einstell .reg { grid-column:span 6;display:flex;flex-direction:column }
.v3-page .dm-einstell .reg .rtot { display:flex;align-items:baseline;gap:9px;margin-top:12px }
.v3-page .dm-einstell .reg .rtot b { font-size:24px;font-weight:800;letter-spacing:-.5px }
.v3-page .dm-einstell .reg .rtot small { font-size:12px;color:var(--ink3);font-weight:600 }
.v3-page .dm-einstell .clist { margin-top:12px;display:flex;flex-direction:column;gap:9px }
.v3-page .dm-einstell .crow { display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fbfcfe }
.v3-page .dm-einstell .crow .cdot { width:9px;height:9px;border-radius:3px;flex:none }
.v3-page .dm-einstell .cd-vor { background:#0f2b46 }
.v3-page .dm-einstell .cd-test { background:#7c6cf0 }
.v3-page .dm-einstell .cd-son { background:#c07600 }
.v3-page .dm-einstell .crow .cn b { font-size:12.5px }
.v3-page .dm-einstell .crow .cn span { display:block;font-size:11px;color:var(--ink3) }
.v3-page .dm-einstell .crow .cc { margin-left:auto;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums }
.v3-page .dm-einstell .reg .rfoot { margin-top:13px;display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line) }
.v3-page .dm-einstell .reg .rfoot .guard { display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);font-weight:600 }
.v3-page .dm-einstell .reg .rfoot .guard svg { width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:2 }
.v3-page .dm-einstell .reg .rfoot .rbtn { margin-left:auto;background:#eef4fe;border:1px solid #bcd3f7;color:var(--brand);border-radius:9px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px }
.v3-page .dm-einstell .reg .rfoot .rbtn svg { width:13px;height:13px;stroke-width:2;fill:none }
.v3-page .dm-einstell .mini { grid-column:span 3;display:flex;flex-direction:column }
.v3-page .dm-einstell .mini .body { margin-top:12px;flex:1 }
.v3-page .dm-einstell .mini .stat { display:flex;align-items:baseline;gap:8px;margin-top:6px }
.v3-page .dm-einstell .mini .stat b { font-size:22px;font-weight:800;letter-spacing:-.4px }
.v3-page .dm-einstell .mini .stat small { font-size:12px;color:var(--ink3);font-weight:600 }
.v3-page .dm-einstell .mini .go { margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--brand) }
.v3-page .dm-einstell .mini .go svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-einstell .rowlist { margin-top:10px;display:flex;flex-direction:column;gap:0 }
.v3-page .dm-einstell .rl { display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px }
.v3-page .dm-einstell .rl:last-child { border:none }
.v3-page .dm-einstell .rl b { font-weight:700 }
.v3-page .dm-einstell .rl .n { margin-left:auto;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums }

/* ── dm-zustaende (aus v2_kit_zustaende.html) ── */
.v3-page .dm-zustaende { --canvas:#eef1f6; --card:#ffffff; --line:#e6eaf1; --ink:#16233a; --ink2:#5b6b84; --ink3:#8b98ad;
    --brand:#1e56c8; --brand-deep:#0f2b46; --ok:#178a50; --warn:#c07600; --bad:#c93a4a;
    --sepa:#2563eb; --vio:#7c6cf0;
    --r:16px; --shadow:0 1px 2px rgba(22,35,58,.05),0 10px 28px -14px rgba(22,35,58,.14); }
.v3-page .dm-zustaende .num { font-variant-numeric:tabular-nums }
.v3-page .dm-zustaende .wrap { padding:34px 40px 56px;max-width:1500px }
.v3-page .dm-zustaende .pagehead { display:flex;align-items:flex-end;gap:14px;margin-bottom:6px }
.v3-page .dm-zustaende .pagehead .mark { width:40px;height:40px;border-radius:11px;background:linear-gradient(140deg,#2f6fe0,#1e56c8);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px }
.v3-page .dm-zustaende .pagehead h1 { font-size:25px;letter-spacing:-.5px }
.v3-page .dm-zustaende .pagehead h1 span { color:var(--ink3);font-weight:600 }
.v3-page .dm-zustaende .pagesub { color:var(--ink2);font-size:13.5px;margin:8px 0 26px 54px;max-width:880px }
.v3-page .dm-zustaende .board { display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start }
.v3-page .dm-zustaende .demo { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column }
.v3-page .dm-zustaende .demo .cap { display:flex;align-items:center;gap:9px;margin-bottom:14px }
.v3-page .dm-zustaende .demo .cap .n { width:22px;height:22px;border-radius:7px;background:var(--brand-deep);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800 }
.v3-page .dm-zustaende .demo .cap b { font-size:13.5px }
.v3-page .dm-zustaende .demo .cap small { color:var(--ink3);font-size:11.5px;font-weight:600;margin-left:auto }
.v3-page .dm-zustaende .sk { border:1px solid var(--line);border-radius:12px;padding:14px;background:#fbfcfe }
.v3-page .dm-zustaende .shimmer { background:linear-gradient(100deg,#e9edf3 30%,#f4f7fb 50%,#e9edf3 70%);background-size:200% 100%;animation:sh 1.3s linear infinite;border-radius:7px }
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}
.v3-page .dm-zustaende .sk .ln { height:11px;margin-bottom:9px }
.v3-page .dm-zustaende .skcard { display:flex;gap:12px;margin-bottom:14px }
.v3-page .dm-zustaende .skcard .sq { width:44px;height:44px;border-radius:10px;flex:none }
.v3-page .dm-zustaende .skrow { display:grid;grid-template-columns:26px 1fr 60px;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid #eef1f6 }
.v3-page .dm-zustaende .skrow .c { height:20px;border-radius:6px }
.v3-page .dm-zustaende .skrow .c.circ { border-radius:50%;width:20px;height:20px }
.v3-page .dm-zustaende .empty { border:1px dashed #cfd8e6;border-radius:12px;padding:30px 18px;text-align:center;background:#fbfcfe;display:flex;flex-direction:column;align-items:center;gap:11px }
.v3-page .dm-zustaende .empty .il { width:56px;height:56px;border-radius:14px;background:#eef4fe;color:var(--brand);display:grid;place-items:center }
.v3-page .dm-zustaende .empty .il svg { width:28px;height:28px;fill:none;stroke-width:1.7 }
.v3-page .dm-zustaende .empty b { font-size:14.5px }
.v3-page .dm-zustaende .empty p { font-size:12.5px;color:var(--ink3);max-width:250px }
.v3-page .dm-zustaende .empty .pbtn { margin-top:4px;background:var(--brand);color:#fff;border:none;border-radius:9px;padding:9px 16px;font-size:12.5px;font-weight:700;display:inline-flex;gap:7px;align-items:center;cursor:pointer }
.v3-page .dm-zustaende .empty .pbtn svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .errc { border:1px solid #f3c9cf;border-radius:12px;padding:26px 18px;text-align:center;background:#fdf7f8;display:flex;flex-direction:column;align-items:center;gap:11px }
.v3-page .dm-zustaende .errc .il { width:56px;height:56px;border-radius:14px;background:#fdeaec;color:var(--bad);display:grid;place-items:center }
.v3-page .dm-zustaende .errc .il svg { width:28px;height:28px;fill:none;stroke-width:1.8 }
.v3-page .dm-zustaende .errc b { font-size:14.5px }
.v3-page .dm-zustaende .errc p { font-size:12.5px;color:var(--ink2);max-width:260px }
.v3-page .dm-zustaende .errc .code { font-size:11px;color:var(--ink3);font-family:ui-monospace,monospace;background:#f4eaec;border-radius:6px;padding:3px 9px }
.v3-page .dm-zustaende .errc .retry { background:#fff;color:var(--bad);border:1px solid #f3c9cf;border-radius:9px;padding:9px 16px;font-size:12.5px;font-weight:700;display:inline-flex;gap:7px;align-items:center;cursor:pointer }
.v3-page .dm-zustaende .errc .retry svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .banner { display:flex;align-items:flex-start;gap:13px;border:1px solid #f0d49a;background:linear-gradient(180deg,#fffaf0,#fff);border-radius:12px;padding:14px 16px }
.v3-page .dm-zustaende .banner .ic { width:34px;height:34px;border-radius:10px;background:#fdf3e2;color:var(--warn);display:grid;place-items:center;flex:none }
.v3-page .dm-zustaende .banner .ic svg { width:18px;height:18px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .banner b { font-size:13.5px;color:#9a6a12 }
.v3-page .dm-zustaende .banner p { font-size:12.5px;color:var(--ink2);margin-top:3px;max-width:560px }
.v3-page .dm-zustaende .banner .bact { margin-left:auto;display:flex;gap:8px;flex:none }
.v3-page .dm-zustaende .banner .bbtn { border-radius:8px;padding:7px 12px;font-size:11.5px;font-weight:700;border:1px solid #ecd9b0;background:#fff;color:var(--warn);cursor:pointer;white-space:nowrap }
.v3-page .dm-zustaende .kpirow { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px }
.v3-page .dm-zustaende .kpi { border:1px solid var(--line);border-radius:12px;padding:14px 15px;background:#fbfcfe }
.v3-page .dm-zustaende .kpi .kl { font-size:10.5px;letter-spacing:.6px;color:var(--ink3);font-weight:700;text-transform:uppercase }
.v3-page .dm-zustaende .kpi .kv { font-size:24px;font-weight:800;letter-spacing:-.6px;margin:5px 0 8px }
.v3-page .dm-zustaende .stalechip { display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;background:#fdf3e2;color:var(--warn);border-radius:99px;padding:3px 9px }
.v3-page .dm-zustaende .stalechip svg { width:11px;height:11px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .kpi.fresh .kv { color:var(--ink) }
.v3-page .dm-zustaende .freshchip { display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;background:#e5f5ec;color:var(--ok);border-radius:99px;padding:3px 9px }
.v3-page .dm-zustaende .freshchip svg { width:11px;height:11px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .modalstage { border-radius:12px;background:repeating-linear-gradient(45deg,#eef1f6,#eef1f6 10px,#e9edf3 10px,#e9edf3 20px);padding:22px;display:grid;place-items:center;min-height:250px }
.v3-page .dm-zustaende .modal { width:330px;background:#fff;border-radius:15px;box-shadow:0 24px 60px -20px rgba(22,35,58,.5);overflow:hidden }
.v3-page .dm-zustaende .modal .mtop { padding:20px 20px 6px;text-align:center }
.v3-page .dm-zustaende .modal .mic { width:48px;height:48px;border-radius:50%;background:#fdeaec;color:var(--bad);display:grid;place-items:center;margin:0 auto 12px }
.v3-page .dm-zustaende .modal .mic svg { width:24px;height:24px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .modal h3 { font-size:16px;font-weight:800 }
.v3-page .dm-zustaende .modal p { font-size:12.5px;color:var(--ink2);margin-top:7px;padding:0 6px }
.v3-page .dm-zustaende .modal .mfoot { display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 20px 20px }
.v3-page .dm-zustaende .modal .mbtn { border-radius:10px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2) }
.v3-page .dm-zustaende .modal .mbtn.danger { background:var(--bad);border-color:var(--bad);color:#fff }
.v3-page .dm-zustaende .toaststage { border-radius:12px;background:#0f2338;padding:26px 18px;display:flex;justify-content:center;min-height:120px;align-items:center }
.v3-page .dm-zustaende .toast { display:inline-flex;align-items:center;gap:11px;background:#fff;border-radius:12px;padding:12px 16px 12px 13px;box-shadow:0 16px 40px -14px rgba(0,0,0,.5) }
.v3-page .dm-zustaende .toast .tk { width:26px;height:26px;border-radius:8px;background:#e5f5ec;color:var(--ok);display:grid;place-items:center }
.v3-page .dm-zustaende .toast .tk svg { width:15px;height:15px;fill:none;stroke-width:2.4 }
.v3-page .dm-zustaende .toast b { font-size:13.5px }
.v3-page .dm-zustaende .toast .x { color:var(--ink3);font-size:16px;margin-left:8px }
.v3-page .dm-zustaende .toastbar { height:3px;border-radius:99px;background:var(--ok);margin-top:10px;width:80%;opacity:.5 }
.v3-page .dm-zustaende .ampelrow { display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap }
.v3-page .dm-zustaende .ampel { display:inline-flex;align-items:center;gap:9px;border-radius:11px;padding:8px 13px;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:#fff;cursor:pointer }
.v3-page .dm-zustaende .ampel .d { width:10px;height:10px;border-radius:50%;flex:none }
.v3-page .dm-zustaende .ampel .sub { font-weight:500;color:var(--ink3);font-size:11.5px }
.v3-page .dm-zustaende .ampel.g .d { background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16) }
.v3-page .dm-zustaende .ampel.a .d { background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.v3-page .dm-zustaende .ampel.r .d { background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16) }
.v3-page .dm-zustaende .ampel.a { border-color:#f0d49a;background:#fffaf0 }
.v3-page .dm-zustaende .ampel.r { border-color:#f3c9cf;background:#fdf7f8 }
.v3-page .dm-zustaende .drawer { border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow) }
.v3-page .dm-zustaende .drawer .dh { display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line);background:#fbfcfe }
.v3-page .dm-zustaende .drawer .dh .d { width:9px;height:9px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18) }
.v3-page .dm-zustaende .drawer .dh b { font-size:13.5px }
.v3-page .dm-zustaende .drawer .dh .more { margin-left:auto;font-size:11.5px;color:var(--brand);font-weight:700 }
.v3-page .dm-zustaende .dsys { display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #eef1f6;font-size:12.5px }
.v3-page .dm-zustaende .dsys:last-child { border-bottom:none }
.v3-page .dm-zustaende .dsys .sd { width:8px;height:8px;border-radius:50%;flex:none }
.v3-page .dm-zustaende .sd.g { background:#22c55e }
.v3-page .dm-zustaende .sd.a { background:#f59e0b }
.v3-page .dm-zustaende .dsys b { font-weight:700 }
.v3-page .dm-zustaende .dsys .rn { margin-left:auto;color:var(--ink3);font-weight:600;font-size:11.5px }
.v3-page .dm-zustaende .dsys .dg { color:var(--warn);font-weight:600;font-size:11.5px;margin-left:auto }
.v3-page .dm-zustaende .sugg { border:1px solid #d9d2f7;border-radius:13px;overflow:hidden;background:linear-gradient(180deg,#faf9ff,#fff) }
.v3-page .dm-zustaende .sugg .sgh { display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid #ece7fb }
.v3-page .dm-zustaende .sugg .sgh .ai { width:26px;height:26px;border-radius:8px;background:#efeafe;color:var(--vio);display:grid;place-items:center;flex:none }
.v3-page .dm-zustaende .sugg .sgh .ai svg { width:15px;height:15px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .sugg .sgh b { font-size:13px }
.v3-page .dm-zustaende .sugg .sgh .tag { margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.4px;color:var(--vio);background:#efeafe;border-radius:5px;padding:2px 7px }
.v3-page .dm-zustaende .sugg .sgb { padding:13px 15px }
.v3-page .dm-zustaende .sugg .meta { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap }
.v3-page .dm-zustaende .sugg .mc { font-size:10.5px;font-weight:700;color:var(--ink2);background:#f1f4f8;border-radius:6px;padding:3px 9px }
.v3-page .dm-zustaende .sugg .draft { font-size:12.5px;color:var(--ink2);line-height:1.55;border-left:2px solid #d9d2f7;padding-left:11px }
.v3-page .dm-zustaende .sugg .sgf { display:flex;gap:9px;padding:12px 15px;border-top:1px solid #ece7fb;background:#fbfaff }
.v3-page .dm-zustaende .sugg .sgf .take { background:var(--vio);border:none;color:#fff;border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;flex:1;justify-content:center }
.v3-page .dm-zustaende .sugg .sgf .take svg { width:14px;height:14px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .sugg .sgf .edit, .v3-page .dm-zustaende .sugg .sgf .drop { background:#fff;border:1px solid var(--line);color:var(--ink2);border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:700;cursor:pointer }
.v3-page .dm-zustaende .sugg .sgf .drop { color:var(--ink3) }
.v3-page .dm-zustaende .gatestage { border-radius:12px;background:repeating-linear-gradient(45deg,#e9edf3,#e9edf3 10px,#e4e9f0 10px,#e4e9f0 20px);padding:24px;display:flex;justify-content:center }
.v3-page .dm-zustaende .gate { width:100%;max-width:760px;background:#fff;border-radius:16px;box-shadow:0 26px 64px -22px rgba(22,35,58,.5);overflow:hidden }
.v3-page .dm-zustaende .gate .gh { display:flex;align-items:flex-start;gap:13px;padding:18px 22px;border-bottom:1px solid var(--line) }
.v3-page .dm-zustaende .gate .gh .gi { width:38px;height:38px;border-radius:11px;background:#fdeaec;color:var(--bad);display:grid;place-items:center;flex:none }
.v3-page .dm-zustaende .gate .gh .gi svg { width:20px;height:20px;fill:none;stroke-width:2 }
.v3-page .dm-zustaende .gate .gh h3 { font-size:16px;font-weight:800 }
.v3-page .dm-zustaende .gate .gh p { font-size:12.5px;color:var(--ink2);margin-top:3px;max-width:520px }
.v3-page .dm-zustaende .gate .gh .warntag { margin-left:auto;flex:none;font-size:10.5px;font-weight:800;letter-spacing:.4px;color:var(--bad);background:#fdeaec;border-radius:6px;padding:4px 9px }
.v3-page .dm-zustaende .gate .gbody { display:grid;grid-template-columns:1fr 260px;gap:0 }
.v3-page .dm-zustaende .gate .prev { padding:16px 22px;border-right:1px solid var(--line) }
.v3-page .dm-zustaende .gate .prev .pt { font-size:10.5px;letter-spacing:.7px;font-weight:800;color:var(--ink3);text-transform:uppercase;margin-bottom:10px }
.v3-page .dm-zustaende .gate .prow { display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #eef1f6;font-size:12.5px }
.v3-page .dm-zustaende .gate .prow .pn b { font-weight:700 }
.v3-page .dm-zustaende .gate .prow .pn span { display:block;font-size:11px;color:var(--ink3) }
.v3-page .dm-zustaende .gate .prow .pa { font-weight:700;font-variant-numeric:tabular-nums }
.v3-page .dm-zustaende .gate .prow.more { color:var(--ink3);font-weight:600;border-bottom:none;font-size:12px }
.v3-page .dm-zustaende .gate .summ { padding:16px 20px;background:#fbfcfe;display:flex;flex-direction:column;gap:12px }
.v3-page .dm-zustaende .gate .cnt { border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff }
.v3-page .dm-zustaende .gate .cnt .cl { font-size:10.5px;letter-spacing:.5px;color:var(--ink3);font-weight:700;text-transform:uppercase }
.v3-page .dm-zustaende .gate .cnt .cv { font-size:26px;font-weight:800;letter-spacing:-.6px;margin-top:3px }
.v3-page .dm-zustaende .gate .cnt .cv.money { color:var(--sepa) }
.v3-page .dm-zustaende .gate .checks { display:flex;flex-direction:column;gap:7px }
.v3-page .dm-zustaende .gate .chk { display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--ink2) }
.v3-page .dm-zustaende .gate .chk .ok { width:16px;height:16px;border-radius:50%;background:#e5f5ec;color:var(--ok);display:grid;place-items:center;flex:none }
.v3-page .dm-zustaende .gate .chk .ok svg { width:10px;height:10px;stroke-width:3;fill:none }
.v3-page .dm-zustaende .gate .gfoot { padding:15px 22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px }
.v3-page .dm-zustaende .gate .confirm { display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--ink2) }
.v3-page .dm-zustaende .gate .confirm .cb { width:18px;height:18px;border-radius:5px;border:2px solid var(--brand);background:var(--brand);display:grid;place-items:center;flex:none }
.v3-page .dm-zustaende .gate .confirm .cb svg { width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none }
.v3-page .dm-zustaende .gate .gbtns { margin-left:auto;display:flex;gap:10px }
.v3-page .dm-zustaende .gate .gbtns .cancel { background:#fff;border:1px solid var(--line);color:var(--ink2);border-radius:10px;padding:11px 18px;font-size:13px;font-weight:700;cursor:pointer }
.v3-page .dm-zustaende .gate .gbtns .go { background:var(--bad);border:none;color:#fff;border-radius:10px;padding:11px 20px;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px }
.v3-page .dm-zustaende .gate .gbtns .go svg { width:15px;height:15px;fill:none;stroke-width:2.2 }

.v3-page .dm-syscheck .cnt.warn { background:#fdf3e2; color:var(--warn); }

/* ── N2: tote Perioden-Umschalter → funktionale Links (Fix-Welle N2) ───────── */
.r1-ueb .seg a, .r1-ausw .seg a, .v3-page .home3 .seg a { padding:4px 12px; border-radius:7px; color:inherit; text-decoration:none; display:inline-block; }
.r1-ueb .gxlab .now { color:var(--brand); font-weight:800; }
.r1-ausw .seglabel { margin-left:auto; font-size:11.5px; color:var(--ink3); font-weight:700; }
.v3-page .home3 .growth .gxlab { display:grid; gap:9px; text-align:center; font-size:10px; color:var(--ink3); font-weight:600; margin-top:4px; }
.v3-page .home3 .growth .net { justify-content:space-between; }
.v3-page .home3 .growth .net .gmore { font-size:11.5px; color:var(--brand); font-weight:700; text-decoration:none; }
.v3-page .home3 .growth .net .ntot { display:inline-flex; align-items:center; gap:8px; }
.v3-page .home3 .growth .net .ntot b { margin-left:0; }


/* ── Ticket-Bulk-Aktionsleiste (Ticket 3.0) — erscheint sticky bei Auswahl ── */
.v3-page .kt-bulkcell { display: flex; align-items: center; justify-content: center; }
.v3-page .kt-bulkcell input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--v3-brand); cursor: pointer; }
.v3-page .kt-bulkbar { position: sticky; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 11px 18px; border-radius: 12px; background: var(--v3-brand); color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .25); }
.v3-page .kt-bulkbar.hidden { display: none; }
.v3-page .kt-bulkbar .cnt { font-weight: 800; font-size: 12.5px; }
.v3-page .kt-bulkbar select { border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600;
  color: var(--v3-ink); background: #fff; }
.v3-page .kt-bulkbar button { margin-left: auto; border: 1px solid rgba(255, 255, 255, .5); background: transparent;
  color: #fff; border-radius: 8px; padding: 5px 12px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.v3-page .kt-bulkbar button:hover { background: rgba(255, 255, 255, .12); }

/* ── Ticket-Detail Arbeitsleiste (Ticket 3.0) — member_action_card in voller
   Breite oben. Aktions-Formulare nutzen die Breite, statt in der Rail zu stapeln. */
.v3-page .kd-workbar { margin-bottom: 14px; }
.v3-page .kd-workbar #action_panel form { max-width: 720px; }

/* ═══════════════════════════════════════════════════════════════════════
   S3 — STIFTUNG 3.0 (Welle 1): Nav-Bereichsleiste + „Heute"-Arbeitsansicht.
   Additiv, append-only. Die Nav (.s3-navwrap) steht AUSSERHALB von .v3-page
   und trägt eigene Token-Aliase; die Seiten-Komponenten (.s3-heute) liegen in
   .v3-page und nutzen dessen Tokens. READ/DISPLAY-Layout — Sperren/Logik werden
   nur konsumiert (kein Versand, keine Nummern-Logik im CSS/HTML).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bereichs-Leiste (flach, 6 Bereiche + globaler Jahresfilter) ── */
.s3-navwrap {
  --s3-brand:#1e56c8; --s3-ink:#16233a; --s3-ink2:#5b6b84; --s3-ink3:#8b98ad;
  --s3-line:#e6eaf1; --s3-card:#fff;
  display:flex; flex-direction:column; gap:8px;
  font-family:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
}
.s3-navwrap .s3-areabar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--s3-card); border:1px solid var(--s3-line); border-radius:14px;
  box-shadow:0 1px 2px rgba(22,35,58,.05); padding:8px 10px;
}
.s3-navwrap .s3-areas { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.s3-navwrap .s3-area {
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-size:13.5px; font-weight:650; color:var(--s3-ink2);
  padding:8px 14px; border-radius:10px; transition:background .12s, color .12s;
}
.s3-navwrap .s3-area .s3-ic { font-size:14px; line-height:1; }
.s3-navwrap .s3-area:hover { background:#f2f5fb; color:var(--s3-ink); }
.s3-navwrap .s3-area.on { background:var(--s3-brand); color:#fff; }
.s3-navwrap .s3-area:focus-visible { outline:2px solid var(--s3-brand); outline-offset:2px; }
.s3-navwrap .s3-right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.s3-navwrap .s3-yearform { display:inline-flex; align-items:center; gap:7px; }
.s3-navwrap .s3-yearlbl { font-size:12.5px; color:var(--s3-ink3); font-weight:600; }
.s3-navwrap .s3-yearsel {
  font:inherit; font-size:13px; font-weight:700; color:var(--s3-ink);
  background:#fff; border:1px solid var(--s3-line); border-radius:9px;
  padding:6px 10px; cursor:pointer;
}
.s3-navwrap .s3-yearsel:focus-visible { outline:2px solid var(--s3-brand); outline-offset:1px; }
.s3-navwrap .s3-subbar {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  background:var(--s3-card); border:1px solid var(--s3-line); border-radius:12px;
  box-shadow:0 1px 2px rgba(22,35,58,.05); padding:6px 8px;
}
.s3-navwrap .s3-subtab {
  text-decoration:none; font-size:12.5px; font-weight:600; color:var(--s3-ink3);
  padding:6px 12px; border-radius:9px; transition:background .12s, color .12s;
}
.s3-navwrap .s3-subtab:hover { background:#f2f5fb; color:var(--s3-ink); }
.s3-navwrap .s3-subtab.on { background:#e8effd; color:var(--s3-brand); }
@media (max-width:720px){ .s3-navwrap .s3-right{ margin-left:0; width:100%; } }

/* ── Heute: Stations-Kopf (Fließband, sticky) ── */
.v3-page.s3-heute .s3-stations {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:2px 0 18px;
  position:sticky; top:0; z-index:20; background:var(--canvas); padding:6px 0 10px;
}
.v3-page.s3-heute .s3-station {
  position:relative; display:flex; flex-direction:column; gap:2px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:15px 18px 16px; text-decoration:none; color:var(--ink);
  transition:border-color .12s, box-shadow .12s, transform .06s;
}
.v3-page.s3-heute .s3-station:hover { border-color:#bcd3f7; box-shadow:0 8px 22px -12px rgba(30,86,200,.4); }
.v3-page.s3-heute .s3-station.on { border-color:var(--brand); box-shadow:0 0 0 3px #e8effd; }
.v3-page.s3-heute .s3-station:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.v3-page.s3-heute .s3-step {
  position:absolute; top:13px; right:15px; font-size:10.5px; font-weight:700;
  color:var(--ink3); background:#f1f4f9; border-radius:6px; padding:2px 8px;
}
.v3-page.s3-heute .s3-n { font-size:30px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.v3-page.s3-heute .s3-t { font-weight:750; font-size:15px; }
.v3-page.s3-heute .s3-d { font-size:12.5px; color:var(--ink3); font-weight:500; }
.v3-page.s3-heute .s3-station .s3-badge { margin-top:8px; align-self:flex-start; }

/* ── Launch-Umbau: „Neu seit gestern" + Tages-Stationen-Raster ── */
.v3-page.s3-heute .s3-neu { border-left:4px solid var(--brand); }
.v3-page.s3-heute .s3-neurow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.v3-page.s3-heute .s3-neunum { font-size:34px; font-weight:800; letter-spacing:-.5px; line-height:1; color:var(--brand); }
.v3-page.s3-heute .s3-statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.v3-page.s3-heute .s3-stat {
  display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--ink);
  margin-bottom:0; transition:border-color .12s, box-shadow .12s;
}
.v3-page.s3-heute .s3-stat:hover { border-color:#bcd3f7; box-shadow:0 8px 22px -12px rgba(30,86,200,.4); }
.v3-page.s3-heute .s3-stat:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.v3-page.s3-heute .s3-statlbl { font-size:11.5px; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; }
.v3-page.s3-heute .s3-statnum { font-size:30px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
@media (max-width:900px){ .v3-page.s3-heute .s3-statgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .v3-page.s3-heute .s3-statgrid{ grid-template-columns:1fr; } }
.s3-navwrap .s3-subtab-sep { align-self:center; font-size:11.5px; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; padding:0 2px 0 8px; }

/* ── Layout-Raster ── */
.v3-page.s3-heute .s3-cols { display:grid; gap:16px; margin-bottom:16px; align-items:start; }
.v3-page.s3-heute .s3-cols.c31 { grid-template-columns:1.55fr 1fr; }
.v3-page.s3-heute .s3-cols.c13 { grid-template-columns:1fr 1.4fr; }
@media (max-width:900px){ .v3-page.s3-heute .s3-cols{ grid-template-columns:1fr !important; }
  .v3-page.s3-heute .s3-stations{ grid-template-columns:1fr; position:static; } }

/* ── Karten ── */
.v3-page.s3-heute .s3-card {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:16px;
}
.v3-page.s3-heute .s3-card.pad0 { padding:0; }
.v3-page.s3-heute .s3-cardpad { padding:12px 16px; }
.v3-page.s3-heute .s3-cardhead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.v3-page.s3-heute .s3-card h3 { font-size:15px; font-weight:750; margin:0 0 4px; }
.v3-page.s3-heute .s3-sub { font-size:12.5px; color:var(--ink3); font-weight:500; }
.v3-page.s3-heute .s3-sep { border:0; border-top:1px solid var(--line); margin:12px 0; }

/* ── Tabellen ── */
.v3-page.s3-heute .s3-tblwrap { overflow-x:auto; }
.v3-page.s3-heute .s3-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.v3-page.s3-heute .s3-tbl th {
  font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--ink3);
  text-align:left; font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line); background:#fbfcfe; white-space:nowrap;
}
.v3-page.s3-heute .s3-tbl td { padding:10px 14px; border-bottom:1px solid var(--line2); vertical-align:middle; }
.v3-page.s3-heute .s3-tbl tbody tr:last-child td { border-bottom:none; }
.v3-page.s3-heute .s3-tbl tbody tr:hover { background:#fafbfe; }
.v3-page.s3-heute .s3-tbl .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.v3-page.s3-heute .s3-tbl b { font-weight:700; }

/* ── Chips ── */
.v3-page.s3-heute .s3-chips { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 16px; }
.v3-page.s3-heute .s3-chip {
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:12.5px; font-weight:600; color:var(--ink2);
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:6px 14px; transition:background .12s;
}
.v3-page.s3-heute .s3-chip:hover { background:#f2f5fb; }
.v3-page.s3-heute .s3-chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.v3-page.s3-heute .s3-chip .ct { font-weight:800; opacity:.8; }
.v3-page.s3-heute .s3-chip:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* ── Badges + Punkte ── */
.s3-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700;
  border-radius:99px; padding:2px 10px; border:1px solid transparent; white-space:nowrap; vertical-align:middle;
}
.s3-badge.ok { color:#178a50; background:#e5f5ec; border-color:#bbe5c4; }
.s3-badge.warn { color:#c07600; background:#fdf3e2; border-color:#f2dfae; }
.s3-badge.bad { color:#c93a4a; background:#fdeaec; border-color:#f2c3c9; }
.s3-badge.mut { color:#5b6b84; background:#f1f4f9; border-color:#e6eaf1; }
.s3-badge.acc { color:#155e75; background:#e6f6fa; border-color:#a5dce9; }
/* Spenderstatus-Stufen (Bronze → Diamant) als Badge — s3-Ausprägung der EINEN
   Farbwelt aus DonorStatusHelper::DONOR_STATUS_BADGE_CLASSES (Tailwind-Zwilling:
   stiftung/donors/_status_badge). Bronze=Kupfer · Silber=Slate · Gold=Gold ·
   Platin=Violett · Diamant=Petrol — identisch zu den Mail-Themes in
   Stiftung::DonorMailRenderer::THEMES. Wer hier eine Farbe ändert, ändert sie
   dort mit. Klassen sind Literale (JIT-Safelist);
   Partial: stiftung/shared/_spenderstatus_badge. */
.s3-badge.tier-bronze { color:#92400e; background:#fdf1e3; border-color:#f0d3b0; }
.s3-badge.tier-sil    { color:#475569; background:#f1f4f9; border-color:#cbd5e1; }
.s3-badge.tier-gold   { color:#8a6100; background:#fdf6dc; border-color:#f3e0a3; }
.s3-badge.tier-platin { color:#6d28d9; background:#f4effe; border-color:#d9c9f6; }
.s3-badge.tier-dia    { color:#0e7490; background:#e6f7fd; border-color:#7dd3fc; }
/* Override-Marker („manuell gesetzt") am Stufen-Badge — Klasse statt Inline-Style. */
.s3-badge .ovr { margin-left:3px; opacity:.6; }
/* Badges in der Seiten-Überschrift sitzen optisch auf der Grundlinie. */
.v3-pagehead h1 .s3-badge { vertical-align:3px; }
.s3-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.s3-dot.g { background:#22c55e; } .s3-dot.y { background:#d97706; }
.s3-dot.r { background:#dc2626; } .s3-dot.b { background:#1e56c8; }

/* ── Button-Reihe ── */
.v3-page.s3-heute .s3-btnrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.v3-page.s3-heute .s3-btnrow form { margin:0; display:inline; }

/* ── Arbeitskarte / Drawer ── */
.v3-page.s3-heute .s3-drawer {
  border:1px solid #a5dce9; background:linear-gradient(0deg,#fff,#fbfeff);
  border-radius:14px; padding:16px 18px; box-shadow:var(--shadow);
}
.v3-page.s3-heute .s3-dh { display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px; flex-wrap:wrap; }
.v3-page.s3-heute .s3-dh h3 { margin:0; }
.v3-page.s3-heute .s3-kv { display:grid; grid-template-columns:150px 1fr; gap:5px 14px; font-size:13px; }
.v3-page.s3-heute .s3-kv dt { color:var(--ink3); font-weight:500; }
.v3-page.s3-heute .s3-kv dd { font-weight:650; margin:0; }

/* ── KPI-Kacheln + Balken + Callout ── */
.v3-page.s3-heute .s3-kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.v3-page.s3-heute .s3-kpi { background:#fbfcfe; border:1px solid var(--line); border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; gap:2px; }
.v3-page.s3-heute .s3-kpi .v { font-size:22px; font-weight:800; letter-spacing:-.4px; }
.v3-page.s3-heute .s3-kpi .l { font-size:12px; color:var(--ink3); font-weight:600; }
.v3-page.s3-heute .s3-bar { height:9px; border-radius:6px; background:#edf0f4; overflow:hidden; margin:4px 0 4px; }
.v3-page.s3-heute .s3-bar i { display:block; height:100%; background:linear-gradient(90deg,#3f7ae6,#1e56c8); }
.v3-page.s3-heute .s3-callout { border-left:4px solid var(--brand); background:#e8effd; border-radius:0 10px 10px 0; padding:10px 14px; font-size:12.5px; font-weight:500; color:var(--ink2); margin-top:12px; }
.v3-page.s3-heute .s3-callout.warn { border-left-color:var(--warn); background:#fdf3e2; }
.v3-page.s3-heute .s3-callout code { font-size:11.5px; background:rgba(0,0,0,.05); padding:1px 5px; border-radius:4px; }

/* ── Quittieren: Spender-Gruppen (Accordion) ── */
.v3-page.s3-heute .s3-grouplist { display:flex; flex-direction:column; }
.v3-page.s3-heute .s3-group { border:1px solid var(--line); border-radius:12px; margin:0 12px 10px; overflow:hidden; }
.v3-page.s3-heute .s3-group:hover { border-color:#cfe0fb; }
.v3-page.s3-heute .s3-grouphead { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 16px; }
.v3-page.s3-heute .s3-gwho { display:flex; align-items:center; gap:10px; min-width:0; }
.v3-page.s3-heute .s3-chev { border:1px solid var(--line); background:#fff; border-radius:8px; width:28px; height:28px; display:grid; place-items:center; cursor:pointer; color:var(--ink3); flex:none; }
.v3-page.s3-heute .s3-chev:hover { background:#f2f5fb; color:var(--ink); }
.v3-page.s3-heute .s3-chev svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.v3-page.s3-heute .s3-sublist { border-top:1px solid var(--line); background:#fbfcfe; padding:6px 16px 12px; }
.v3-page.s3-heute .s3-sublist.hidden { display:none; }
.v3-page.s3-heute .s3-subrow { display:grid; grid-template-columns:110px 1fr 110px auto; gap:12px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
.v3-page.s3-heute .s3-subrow:last-child { border-bottom:none; }
.v3-page.s3-heute .s3-subrow .num { font-variant-numeric:tabular-nums; }
@media (max-width:720px){ .v3-page.s3-heute .s3-grouphead{ grid-template-columns:1fr; }
  .v3-page.s3-heute .s3-subrow{ grid-template-columns:1fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   STIFTUNG 3.0 · WELLE 2 — Spenden + Spender (s3-w2)
   Additiv, append-only. Reicht die bewährten s3-Komponenten (aus dem Heute-
   Abschnitt) an die neuen Bereichs-Seiten .v3-page.s3-w2 (Spenden/Spender)
   durch + ergänzt Listen-Drawer, Aktions-Dropdowns und Akte-Layout. Reine
   Darstellung — keine Logik.
   ═════════════════════════════════════════════════════════════════════════ */
.v3-page.s3-w2 .s3-headact { margin-left:auto; }

/* Karten / Tabellen / Sub-Text (wie Heute, hier für s3-w2) */
.v3-page.s3-w2 .s3-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:16px; }
.v3-page.s3-w2 .s3-card.pad0 { padding:0; }
.v3-page.s3-w2 .s3-cardpad { padding:12px 16px; }
.v3-page.s3-w2 .s3-card h3 { font-size:15px; font-weight:750; margin:0 0 10px; }
.v3-page.s3-w2 .s3-sub { font-size:12.5px; color:var(--ink3); font-weight:500; }
.v3-page.s3-w2 .s3-tblwrap { overflow-x:auto; }
.v3-page.s3-w2 .s3-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.v3-page.s3-w2 .s3-tbl th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line); background:#fafbfe; }
.v3-page.s3-w2 .s3-tbl td { padding:10px 14px; border-bottom:1px solid var(--line2); vertical-align:middle; }
.v3-page.s3-w2 .s3-tbl tbody tr:last-child td { border-bottom:none; }
.v3-page.s3-w2 .s3-tbl tbody tr:hover { background:#fafbfe; }
.v3-page.s3-w2 .s3-tbl .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.v3-page.s3-w2 .s3-tbl b { font-weight:700; }
.v3-page.s3-w2 .s3-serienrow td { background:#f5f8ff; }

/* Chips (wie Heute) + Konto-Lücken-Warnchip */
.v3-page.s3-w2 .s3-chips { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 14px; }
.v3-page.s3-w2 .s3-chip { display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-size:12.5px; font-weight:650; color:var(--ink2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px; }
.v3-page.s3-w2 .s3-chip:hover { background:#f2f5fb; }
.v3-page.s3-w2 .s3-chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.v3-page.s3-w2 .s3-chip .ct { font-weight:800; opacity:.8; }
.v3-page.s3-w2 .s3-chip.warnchip { border-color:#f2dfae; background:#fdf9ef; color:#8a5a00; }
.v3-page.s3-w2 .s3-chip.warnchip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.v3-page.s3-w2 .s3-chip:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* Suchleiste */
.v3-page.s3-w2 .s3-searchbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.v3-page.s3-w2 .s3-searchbar .r5-search { flex:1; min-width:220px; }
.v3-page.s3-w2 .s3-input { font:inherit; font-size:13px; border:1px solid var(--line); border-radius:9px; padding:8px 11px; background:#fff; color:var(--ink); min-width:160px; }
.v3-page.s3-w2 .s3-input:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }

/* KPI-Kacheln */
.v3-page.s3-w2 .s3-kpis { display:grid; gap:12px; margin-bottom:16px; }
.v3-page.s3-w2 .s3-kpis.four { grid-template-columns:repeat(4,1fr); }
.v3-page.s3-w2 .s3-kpis.three { grid-template-columns:repeat(3,1fr); }
.v3-page.s3-w2 .s3-kpi { background:#fbfcfe; border:1px solid var(--line); border-radius:12px; padding:13px 15px; display:flex; flex-direction:column; gap:2px; }
.v3-page.s3-w2 .s3-kpi .v { font-size:21px; font-weight:800; letter-spacing:-.4px; }
.v3-page.s3-w2 .s3-kpi .l { font-size:12px; color:var(--ink3); font-weight:600; }
@media (max-width:900px){ .v3-page.s3-w2 .s3-kpis.four,.v3-page.s3-w2 .s3-kpis.three{ grid-template-columns:1fr 1fr; } }

/* Callout */
.v3-page.s3-w2 .s3-callout { border-left:4px solid var(--brand); background:#e8effd; border-radius:0 10px 10px 0; padding:10px 14px; font-size:12.5px; font-weight:500; color:var(--ink2); margin-bottom:12px; }
.v3-page.s3-w2 .s3-callout.warn { border-left-color:var(--warn); background:#fdf3e2; }

/* Detail-/Definition-Listen */
.v3-page.s3-w2 .s3-kv { display:grid; grid-template-columns:150px 1fr; gap:5px 14px; font-size:13px; margin:0; }
.v3-page.s3-w2 .s3-kv dt { color:var(--ink3); font-weight:500; }
.v3-page.s3-w2 .s3-kv dd { font-weight:650; margin:0; }
.v3-page.s3-w2 .s3-dh { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.v3-page.s3-w2 .s3-dh h3 { margin:0; }
.v3-page.s3-w2 .s3-badges { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.v3-page.s3-w2 .s3-back { text-decoration:none; color:var(--brand); font-weight:650; }
.v3-page.s3-w2 .s3-btnrow { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.v3-page.s3-w2 .s3-btnrow form { margin:0; display:inline; }

/* Aufklappbare Zeilen-Liste (Spenden-Datenbestand) */
.v3-page.s3-w2 .s3-listhead,
.v3-page.s3-w2 .s3-rowhead { display:grid; grid-template-columns:110px 1.3fr 1.6fr 110px 110px 130px; gap:12px; align-items:center; }
.v3-page.s3-w2 .s3-listhead { padding:10px 16px; border-bottom:1px solid var(--line); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:700; background:#fafbfe; }
.v3-page.s3-w2 .s3-listhead .num { text-align:right; }
.v3-page.s3-w2 .s3-row { border-bottom:1px solid var(--line2); }
.v3-page.s3-w2 .s3-row:last-child { border-bottom:none; }
.v3-page.s3-w2 .s3-rowhead { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:11px 16px; font:inherit; color:inherit; }
.v3-page.s3-w2 .s3-rowhead:hover { background:#fafbfe; }
.v3-page.s3-w2 .s3-rowhead .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.v3-page.s3-w2 .s3-rowhead .s3-c-purpose { color:var(--ink3); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v3-page.s3-w2 .s3-rowdrawer { padding:14px 16px 16px; background:#fbfcfe; border-top:1px solid var(--line); }
.v3-page.s3-w2 .s3-rowdrawer.hidden { display:none; }

/* Aktions-Dropdowns (details/summary als Button) + Aktionssatz */
.v3-page.s3-w2 .s3-aktionssatz { margin-top:12px; }
.v3-page.s3-w2 .s3-act { position:relative; display:inline-block; }
.v3-page.s3-w2 .s3-act > summary { list-style:none; cursor:pointer; }
.v3-page.s3-w2 .s3-act > summary::-webkit-details-marker { display:none; }
.v3-page.s3-w2 .s3-actbody { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow); }
.v3-page.s3-w2 .s3-assign { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Zwei-Spalten-Layout (Akte) */
.v3-page.s3-w2 .s3-cols { display:grid; gap:16px; align-items:start; }
.v3-page.s3-w2 .s3-cols.c31 { grid-template-columns:1.55fr 1fr; }
.v3-page.s3-w2 .s3-stack { display:flex; flex-direction:column; }
@media (max-width:900px){ .v3-page.s3-w2 .s3-cols.c31{ grid-template-columns:1fr; }
  .v3-page.s3-w2 .s3-listhead,.v3-page.s3-w2 .s3-rowhead{ grid-template-columns:1fr 1fr; }
  .v3-page.s3-w2 .s3-rowhead .s3-c-purpose,.v3-page.s3-w2 .s3-rowhead .s3-c-src,.v3-page.s3-w2 .s3-listhead span:nth-child(3),.v3-page.s3-w2 .s3-listhead span:nth-child(4){ display:none; } }

/* Klärfälle (Launch-Umbau S3): zwei gleich breite Spalten + Abschnitts-Kopf.
   Erbt Karten/Chips/KPIs/Callout/Buttons über die s3-w2-Klasse. */
.v3-page.s3-w2 .s3-cols.c11 { grid-template-columns:1fr 1fr; }
.v3-page.s3-klaerfaelle .s3-secthead h2 { font-size:16px; font-weight:800; letter-spacing:-.2px; margin:0 0 2px; }
@media (max-width:900px){ .v3-page.s3-w2 .s3-cols.c11{ grid-template-columns:1fr; } }

/* Spender-Akte (Welle 3, Mockup s3/s3b): drei Kopf-Karten (Summe · Jetzt fällig ·
   Sammelt sich) + Werdegang-Zeilen. Additiv, erbt Karten/Chips/Buttons aus s3-w2. */
.v3-page.s3-w2 .s3-cols.c3 { grid-template-columns:repeat(3,1fr); margin-bottom:16px; }
.v3-page.s3-w2 .s3-acard { background:#fbfcfe; border:1px solid var(--line); border-radius:12px; padding:14px 15px; }
.v3-page.s3-w2 .s3-acard.todo { border-color:#f2dfae; background:#fdf9ef; }
.v3-page.s3-w2 .s3-acard h4 { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:700; margin:0 0 6px; }
.v3-page.s3-w2 .s3-acard .big { font-size:22px; font-weight:800; letter-spacing:-.4px; }
.v3-page.s3-w2 .s3-histrow { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line2); font-size:12.5px; }
.v3-page.s3-w2 .s3-histrow:last-child { border-bottom:none; }
@media (max-width:900px){ .v3-page.s3-w2 .s3-cols.c3{ grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   STIFTUNG 3.0 · WELLE 3 — Quittungen + Auswertung + Betrieb (s3-w3)
   Additiv, append-only. Die W3-Seiten tragen `s3-w2 s3-w3` und erben damit die
   bewährten Bausteine (Karten/Tabellen/Chips/KPIs/Callout/Buttons) aus dem
   s3-w2-Abschnitt. Hier NUR die netto-neuen Komponenten: Trenner, Stepper,
   Zeilen-Aktionen, Werkzeug-Links, Betriebs-Zeilen und die horizontalen
   Balken der Auswertung. Reine Darstellung — keine Logik.
   ═════════════════════════════════════════════════════════════════════════ */
.v3-page.s3-w3 .s3-sep { border:none; border-top:1px solid var(--line); margin:12px 0; }
.v3-page.s3-w3 .s3-toollink { color:var(--brand); font-weight:650; text-decoration:none; white-space:nowrap; }
.v3-page.s3-w3 .s3-toollink:hover { text-decoration:underline; }

/* Zeilen-Aktionen in der Quittungs-Tabelle */
.v3-page.s3-w3 .s3-rowacts { display:inline-flex; gap:12px; justify-content:flex-end; align-items:center; }

/* Gefahr-Button (Rückgängig) + deaktivierter Primärbutton */
.v3-page.s3-w3 .v3-btn.s3-danger { color:#c93a4a; border-color:#f2c3c9; background:#fff; }
.v3-page.s3-w3 .v3-btn.s3-danger:hover { background:#fdeaec; }
.v3-page.s3-w3 .v3-btn.is-disabled { opacity:.5; pointer-events:none; }

/* Sammellauf-Stepper */
.v3-page.s3-w3 .s3-stepper { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 14px; }
.v3-page.s3-w3 .s3-stepper li { font-size:12px; font-weight:700; color:var(--ink3); background:#f1f4f9; border:1px solid var(--line); border-radius:99px; padding:5px 13px; }
.v3-page.s3-w3 .s3-stepper li.on { color:#fff; background:var(--brand); border-color:var(--brand); }

/* Beispiel-Liste im Sammellauf */
.v3-page.s3-w3 .s3-examplelist { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:3px; }
.v3-page.s3-w3 .s3-examplelist li { font-size:12.5px; color:var(--ink2); }

/* Betrieb — Karten-Raster + Betriebs-Zeilen */
.v3-page.s3-w3 .s3-opgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin-bottom:16px; }
@media (max-width:900px){ .v3-page.s3-w3 .s3-opgrid { grid-template-columns:1fr; } }
.v3-page.s3-w3 .s3-oprow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; font-size:13px; }
.v3-page.s3-w3 .s3-oprow > span:first-child { color:var(--ink2); font-weight:600; }
.v3-page.s3-w3 .s3-opright { display:inline-flex; align-items:center; gap:10px; }

/* Auswertung — horizontale Balken (Monatsverlauf + Kanalmix) */
.v3-page.s3-w3 .s3-hbrow { display:grid; grid-template-columns:96px 1fr 96px; gap:12px; align-items:center; padding:5px 0; }
.v3-page.s3-w3 .s3-hblab { font-size:12.5px; color:var(--ink2); font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.v3-page.s3-w3 .s3-hbar { height:9px; border-radius:6px; background:#edf0f4; overflow:hidden; }
.v3-page.s3-w3 .s3-hbar i { display:block; height:100%; background:linear-gradient(90deg,#3f7ae6,#1e56c8); }
.v3-page.s3-w3 .s3-hbval { font-size:12px; color:var(--ink3); font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   STIFTUNG · FEEDBACK-WELLE 15.07. (P1–P9)
   Additiv, append-only. P1: klickbare Fall-Liste + Arbeitskarte in „Heute"
   (inkl. Aktionssatz-Bausteine im s3-heute-Scope). P4: zweizeilige Quittieren-
   Subrows. P6: Spender-Karten-Grid mit Tier-Rahmen (Bronze–Diamant). P7:
   klickbare Sammellauf-KPIs. P8: klickbarer Monatsverlauf. P9: Betrieb-
   Sprungleiste + Fold-Summaries. Reine Darstellung — keine Logik.
   ═════════════════════════════════════════════════════════════════════════ */

/* P1 — Fall-Liste klickbar + gewählte Zeile markiert */
.v3-page.s3-heute .s3-falllink { color:inherit; text-decoration:none; }
.v3-page.s3-heute .s3-falllink:hover b { color:var(--brand); text-decoration:underline; }
.v3-page.s3-heute .s3-tbl tr.s3-rowsel td { background:#eef4ff; }
.v3-page.s3-heute .s3-tbl tr.s3-rowsel td:first-child { box-shadow:inset 3px 0 0 var(--brand); }
.v3-page.s3-heute .s3-toollink { color:var(--brand); font-weight:650; text-decoration:none; white-space:nowrap; }
.v3-page.s3-heute .s3-toollink:hover { text-decoration:underline; }

/* P1/P2 — Aktionssatz-Bausteine im Heute-Scope (Muster s3-w2) */
.v3-page.s3-heute .s3-aktionssatz { margin-top:12px; }
.v3-page.s3-heute .s3-act { position:relative; display:inline-block; }
.v3-page.s3-heute .s3-act > summary { list-style:none; cursor:pointer; }
.v3-page.s3-heute .s3-act > summary::-webkit-details-marker { display:none; }
.v3-page.s3-heute .s3-actbody { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow); }
.v3-page.s3-heute .s3-assign { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.v3-page.s3-heute .s3-input { font:inherit; font-size:13px; border:1px solid var(--line); border-radius:9px; padding:8px 11px; background:#fff; color:var(--ink); min-width:160px; }
.v3-page.s3-heute .s3-input:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.v3-page.s3-heute .s3-neuanlage summary { font-size:12.5px; }

/* P4 — Quittieren: zweizeilige Spenden-Zeile (Hauptzeile + Detailzeile) */
.v3-page.s3-heute .s3-subrow.s3-subrow2 { display:block; }
.v3-page.s3-heute .s3-subrow2 .s3-submain { display:grid; grid-template-columns:110px 1fr 110px auto; gap:12px; align-items:center; }
.v3-page.s3-heute .s3-subrow2 .s3-sz { display:inline-flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.v3-page.s3-heute .s3-subrow2 .s3-subdetail { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:4px; padding-left:2px; }
.v3-page.s3-heute .s3-subrow2 .s3-subzweck { overflow-wrap:anywhere; }
@media (max-width:720px){ .v3-page.s3-heute .s3-subrow2 .s3-submain{ grid-template-columns:1fr 1fr; } }

/* P6 — Spender: Karten-Grid mit Tier-Rahmen — ENTFERNT 28.07.2026.
   Die Karten-Ansicht wurde beim Stiftung-4.0-Umbau (W3, 3feafd6a) durch die
   Arbeits-Tabelle ersetzt; die Klassen (.s3-spgrid/.s3-spcard/.s3-sphead/
   .s3-spname/.s3-spbadges/.s3-spkv/.s3-spfoot) hatte danach keine View mehr.
   Die Stufen-Farbwelt lebt jetzt in .s3-badge.tier-* (siehe dort). */

/* P7 — Sammellauf: klickbare KPI-Kacheln */
.v3-page.s3-w3 a.s3-kpilink { text-decoration:none; color:inherit; transition:border-color .12s, background .12s; }
.v3-page.s3-w3 a.s3-kpilink:hover { border-color:var(--brand); background:#f2f6ff; }
.v3-page.s3-w3 a.s3-kpilink:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* P8 — Auswertung: klickbarer Monatsverlauf */
.v3-page.s3-w3 a.s3-hbrowlink { text-decoration:none; color:inherit; border-radius:8px; }
.v3-page.s3-w3 a.s3-hbrowlink:hover { background:#f2f6ff; }
.v3-page.s3-w3 a.s3-hbrowlink:hover .s3-hblab { color:var(--brand); }

/* P9 — Betrieb: Sprungleiste + Fold-Summaries + Anker-Offsets */
.v3-page.s3-betrieb .s3-ankernav { margin-bottom:16px; }
.v3-page.s3-betrieb .s3-foldsum { cursor:pointer; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 0; }
.v3-page.s3-betrieb details.s3-card > .s3-foldsum::marker { color:var(--ink3); }
.v3-page.s3-betrieb [id] { scroll-margin-top:80px; }

/* ── Feedback 15.07. Nachfix: Zeilen-Klickbarkeit sichtbar machen ─────────── */
.v3-page.s3-heute .s3-tbl tr.s3-rowlink:hover td { background: #f3f7fd; }
.v3-page.s3-heute .s3-tbl td.s3-rowchev { width: 22px; text-align: right; color: var(--brand); font-weight: 700; opacity: .45; }
.v3-page.s3-heute .s3-tbl tr.s3-rowlink:hover td.s3-rowchev { opacity: 1; }
.s3-badgelink { text-decoration: none; }
.s3-badgelink:hover .s3-badge { filter: brightness(.94); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   TL — QUITTUNGS-ZEITLEISTE (Task #729). Additiv, append-only. Reine Anzeige-
   Schicht über dem jahresreinen Nummernkreis (Presenter Stiftung::Quittungs-
   Zeitleiste). NUTZT die bestehenden .v3-page-Tokens; ergänzt NUR die
   Spendenseite-Kanalfarbe (--plat, eigene Aussteller-Hoheit) — keine neue
   Farbwelt. Kein Versand, keine Nummern-Logik im CSS.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page { --plat:#6d28d9; --plat-soft:#f4effe; --plat-line:#d9c9f6; }

/* Spendenseite-Badge/-Chip (Lila) — read-only fremde Aussteller-Hoheit */
.s3-badge.plat { color:#6d28d9; background:#f4effe; border-color:#d9c9f6; }
.v3-page .s3-chip.platchip { border-color:var(--plat-line); color:var(--plat); }
.v3-page .s3-chip.platchip.on { background:var(--plat); border-color:var(--plat); color:#fff; }

/* Abschnitts-Titel zwischen den Karten/Tabellen */
.v3-page .secttl { margin:22px 0 8px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--v3-ink3); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Prognose-KPI (kursiv, warn) */
.v3-page .s3-kpi .v.prog { color:var(--warn); font-style:italic; }

/* Nummernstrahl */
.v3-page .tl-strahl-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.v3-page .tl-precount { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ink3); font-weight:600; background:#fafbfe; border:1px dashed var(--line); border-radius:9px; padding:6px 11px; margin-right:6px; }
.v3-page .tl-ns { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.v3-page .tl-seg { width:32px; height:38px; border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; font-weight:800; border:1px solid var(--line); background:#fff; color:var(--ink3); font-variant-numeric:tabular-nums; cursor:default; }
.v3-page .tl-seg small { font-weight:600; font-size:8.5px; letter-spacing:.02em; opacity:.85; }
.v3-page .tl-seg.app { background:#e8effd; border-color:#bcd3f7; color:var(--brand); }
.v3-page .tl-seg.plat { background:var(--plat-soft); border-color:var(--plat-line); color:var(--plat); }
.v3-page .tl-seg.gap { background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f6d6da 4px,#f6d6da 8px); border-color:#f2c3c9; color:var(--bad); }
.v3-page .tl-seg.frei { background:#fbfcfe; border-style:dashed; border-color:#c9d2e0; color:var(--ink3); }
.v3-page .tl-seg.next { background:#fdf3e2; border:2px dashed #e6b45e; color:var(--warn); font-style:italic; }
.v3-page .tl-leg { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink2); font-weight:600; margin-top:14px; }
.v3-page .tl-leg span { display:inline-flex; align-items:center; gap:6px; }
.v3-page .tl-sw { width:14px; height:14px; border-radius:4px; display:inline-block; border:1px solid var(--line); flex:none; }
.v3-page .tl-sw.app { background:#e8effd; border-color:#bcd3f7; }
.v3-page .tl-sw.plat { background:var(--plat-soft); border-color:var(--plat-line); }
.v3-page .tl-sw.gap { background:repeating-linear-gradient(45deg,#fff,#fff 3px,#f6d6da 3px,#f6d6da 6px); border-color:#f2c3c9; }
.v3-page .tl-sw.next { background:#fdf3e2; border:1px dashed #e6b45e; }

/* Nummern-Zellen: vergeben (fett) vs. Prognose (kursiv ~) */
.v3-page .tl-num { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.v3-page .tl-num.prog { font-weight:600; font-style:italic; color:var(--warn); }
.v3-page .tl-num small { display:block; font-weight:500; font-style:normal; font-size:10px; color:var(--ink3); margin-top:1px; }
.v3-page .tl-num .strike { color:var(--bad); text-decoration:line-through; }
.v3-page .tl-hint { cursor:help; border-bottom:1px dotted var(--warn); }

/* Monats-Trenner + Zeilen-Tönung */
.v3-page .tl-mrow td { background:#f5f8ff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:7px 14px; }
.v3-page .tl-mrow .ml { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.v3-page tr.tl-open td { background:#fffdf5; }
.v3-page tr.tl-open:hover td { background:#fef9ea; }
.v3-page tr.tl-plat td { background:#fdfcff; }
.v3-page tr.tl-sub td { background:#fbfcfe; color:var(--ink2); font-size:12px; }
.v3-page tr.tl-sub td .subin { padding-left:44px; color:var(--ink2); }

/* Wiederkehrend-Karten */
.v3-page .tl-recgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:1000px){ .v3-page .tl-recgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .v3-page .tl-recgrid{ grid-template-columns:1fr; } }
.v3-page .tl-rec { border:1px solid var(--line); border-left:4px solid #e6b45e; background:linear-gradient(0deg,#fff,#fffdf6); border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; gap:8px; }
.v3-page .tl-rec .rh { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.v3-page .tl-rec .nm { font-weight:750; font-size:13.5px; }
.v3-page .tl-rec .amt { font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
.v3-page .tl-rec .meta { font-size:12px; color:var(--ink3); font-weight:500; }
.v3-page .tl-cd { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--ink2); }
.v3-page .tl-cdbar { flex:1; height:8px; border-radius:5px; background:#efe3c6; overflow:hidden; }
.v3-page .tl-cdbar i { display:block; height:100%; background:linear-gradient(90deg,#e6b45e,#c07600); }
.v3-page .tl-recsum { border:1px dashed var(--line); background:#fbfcfe; border-radius:12px; padding:14px 15px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.v3-page .tl-recsum .big { font-size:20px; font-weight:800; }

/* Erklär-Notiz */
.v3-page .tl-note { background:#fffbe9; border:1px solid #ecdd9a; border-radius:12px; padding:13px 15px; font-size:12.5px; color:#5f4b12; margin-top:16px; }
.v3-page .tl-note b.h { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#8a6d00; margin-bottom:5px; }
.v3-page .tl-note ul { margin:6px 0 0 18px; }
.v3-page .tl-note li { margin:3px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   BEITRAGS-ERINNERUNGEN / OUTREACH-NACHSCHLAGEWERK (rp-)
   Reminder-Pipeline-Neubau (Konzept 2026-07-15, V2-Mockup, Stiftung-3.0-Design).
   Alles unter `.v3-page.rp-page`. Nutzt die v3-Tokens; keine eigenen Farbblöcke.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page.rp-page { --sepa:#2563eb; --ueb:#0ea5a4; --wa:#12a150; --tel:#7c6cf0; }

/* ── KPI-Strip ── */
.v3-page.rp-page .rp-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:8px; }
.v3-page.rp-page .rp-kpi { background:var(--v3-card); border:1px solid var(--v3-line); border-radius:14px; box-shadow:var(--v3-shadow); padding:14px 16px; }
.v3-page.rp-page .rp-kpi .v { font-size:25px; font-weight:800; letter-spacing:-.5px; line-height:1.1; font-variant-numeric:tabular-nums; }
.v3-page.rp-page .rp-kpi .v.ok { color:#178a50; } .v3-page.rp-page .rp-kpi .v.bad { color:#c93a4a; }
.v3-page.rp-page .rp-kpi .l { font-size:11.5px; color:var(--v3-ink3); font-weight:600; margin-top:3px; }
.v3-page.rp-page .rp-kpi .sub { font-size:11px; color:var(--v3-ink3); margin-top:5px; }

/* ── Info-Note + Legende ── */
.v3-page.rp-page .rp-note { background:#fdf9ef; border:1px solid #f2dfae; color:#7a5300; border-radius:12px; padding:11px 15px; font-size:12.5px; margin:14px 0 4px; display:flex; gap:9px; align-items:flex-start; line-height:1.55; }
.v3-page.rp-page .rp-note b { color:#5a3d00; }
.v3-page.rp-page .rp-legend { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:12px 2px 0; font-size:12px; color:var(--v3-ink3); }
.v3-page.rp-page .rp-legend .li { display:inline-flex; align-items:center; gap:6px; }
.v3-page.rp-page .rp-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.v3-page.rp-page .rp-dot.g{background:#22c55e}.v3-page.rp-page .rp-dot.y{background:#d97706}
.v3-page.rp-page .rp-dot.b{background:#1e56c8}.v3-page.rp-page .rp-dot.v{background:#7c6cf0}

/* ── „ungefähr / Platzhalter"-Marker ── */
.v3-page.rp-page .rp-est { display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#8b98ad; background:#f1f4f9; border:1px solid #e6eaf1; border-radius:5px; padding:0 4px; height:15px; line-height:1; margin-left:5px; cursor:help; vertical-align:middle; }

/* ── Kanal-Chips ── */
.v3-page.rp-page .rp-chan { display:inline-flex; align-items:center; gap:5px; font-weight:650; font-size:11.5px; padding:2px 9px; border-radius:7px; white-space:nowrap; }
.v3-page.rp-page .rp-chan.mail{background:#e8effd;color:#1e56c8}
.v3-page.rp-page .rp-chan.whatsapp{background:#e3f6ec;color:#12a150}
.v3-page.rp-page .rp-chan.hivebrite{background:#fdf3e2;color:#a06200}
.v3-page.rp-page .rp-chan.brief{background:#f1f4f9;color:#5b6b84}
.v3-page.rp-page .rp-chan.telefon{background:#efeafe;color:#5b41c8}

/* ── Section-Kopf ── */
.v3-page.rp-page .rp-sec { display:flex; align-items:baseline; gap:10px; margin:30px 2px 14px; flex-wrap:wrap; }
.v3-page.rp-page .rp-sec h2 { font-size:16px; font-weight:800; letter-spacing:-.2px; margin:0; }
.v3-page.rp-page .rp-sec .hint { color:var(--v3-ink3); font-size:12.5px; }

/* ── Timeline ── */
.v3-page.rp-page .rp-timeline { display:flex; flex-direction:column; }
.v3-page.rp-page .rp-wave { display:grid; grid-template-columns:52px 1fr; gap:0; }
.v3-page.rp-page .rp-rail { display:flex; flex-direction:column; align-items:center; }
.v3-page.rp-page .rp-rdot { width:32px; height:32px; border-radius:50%; background:var(--v3-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; box-shadow:0 0 0 4px #e8effd; z-index:2; }
.v3-page.rp-page .rp-rdot.done { background:#178a50; box-shadow:0 0 0 4px #e5f5ec; }
.v3-page.rp-page .rp-rdot.gap { background:#c07600; box-shadow:0 0 0 4px #fdf3e2; }
.v3-page.rp-page .rp-rdot.live { background:#7c6cf0; box-shadow:0 0 0 4px #efeafe; }
.v3-page.rp-page .rp-rdot.sub { width:20px; height:20px; font-size:10px; background:#c3ccdb; box-shadow:0 0 0 3px #eef1f6; }
.v3-page.rp-page .rp-rline { flex:1; width:2px; background:var(--v3-line); margin:3px 0; min-height:14px; }
.v3-page.rp-page .rp-wcard { background:var(--v3-card); border:1px solid var(--v3-line); border-radius:14px; box-shadow:var(--v3-shadow); padding:15px 17px; margin:0 0 14px; cursor:pointer; text-decoration:none; color:inherit; display:block; transition:border-color .12s, box-shadow .12s, transform .06s; }
.v3-page.rp-page .rp-wcard:hover { border-color:#bcd3f7; box-shadow:0 8px 22px -12px rgba(30,86,200,.4); transform:translateY(-1px); }
.v3-page.rp-page .rp-wcard.gapcard { border-color:#f2dfae; background:linear-gradient(0deg,#fff,#fffdf8); }
.v3-page.rp-page .rp-wtop { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.v3-page.rp-page .rp-wname { font-size:15px; font-weight:750; }
.v3-page.rp-page .rp-wmeta { color:var(--v3-ink3); font-size:12px; margin-top:4px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.v3-page.rp-page .rp-wmeta .d { font-weight:650; color:var(--v3-ink2); }
.v3-page.rp-page .rp-conv { text-align:right; min-width:112px; }
.v3-page.rp-page .rp-conv .big { font-size:23px; font-weight:800; line-height:1; }
.v3-page.rp-page .rp-conv .big.ok{color:#178a50}.v3-page.rp-page .rp-conv .big.warn{color:#c07600}.v3-page.rp-page .rp-conv .big.mut{color:var(--v3-ink3)}
.v3-page.rp-page .rp-conv .lbl { font-size:10px; color:var(--v3-ink3); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }

/* ── Typ-A/B Split-Balken ── */
.v3-page.rp-page .rp-split { margin-top:12px; border-top:1px solid var(--v3-line2); padding-top:11px; }
.v3-page.rp-page .rp-srow { display:flex; align-items:center; gap:10px; margin-top:7px; font-size:12px; }
.v3-page.rp-page .rp-srow .tag { width:190px; flex:none; color:var(--v3-ink2); font-weight:650; }
.v3-page.rp-page .rp-srow .tag small { color:var(--v3-ink3); font-weight:400; display:block; font-size:11px; }
.v3-page.rp-page .rp-bar { flex:1; height:20px; background:#f1f4f9; border-radius:6px; overflow:hidden; position:relative; border:1px solid #eef1f6; }
.v3-page.rp-page .rp-bar>span { position:absolute; left:0; top:0; bottom:0; border-radius:6px 0 0 6px; display:flex; align-items:center; padding-left:9px; color:#fff; font-weight:700; font-size:11px; white-space:nowrap; }
.v3-page.rp-page .rp-bar>span.a{background:linear-gradient(90deg,#2563eb,#3b82f6)}
.v3-page.rp-page .rp-bar>span.b{background:linear-gradient(90deg,#0e9488,#14b8a6)}
.v3-page.rp-page .rp-bar>span.wa{background:linear-gradient(90deg,#12a150,#22c55e)}
.v3-page.rp-page .rp-bar>span.tel{background:linear-gradient(90deg,#6d5bd0,#8b7cf0)}
.v3-page.rp-page .rp-srow .cnt { width:170px; flex:none; text-align:right; color:var(--v3-ink); font-weight:650; font-variant-numeric:tabular-nums; }
.v3-page.rp-page .rp-srow .cnt small { color:var(--v3-ink3); font-weight:400; }

/* ── Querstrom (RL) Slim-Karte ── */
.v3-page.rp-page .rp-stream { display:grid; grid-template-columns:52px 1fr; gap:0; }
.v3-page.rp-page .rp-streamcard { background:#fbfcfe; border:1px dashed var(--v3-line); border-radius:12px; padding:11px 15px; margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; }

/* ── Funnel ── */
.v3-page.rp-page .rp-funnel { background:var(--v3-card); border:1px solid var(--v3-line); border-radius:14px; box-shadow:var(--v3-shadow); padding:18px 20px; }
.v3-page.rp-page .rp-fbars { display:flex; gap:8px; align-items:flex-end; height:168px; margin-top:6px; }
.v3-page.rp-page .rp-fbar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.v3-page.rp-page .rp-fbar .col { width:100%; background:linear-gradient(180deg,#3f7ae6,#1e56c8); border-radius:8px 8px 0 0; display:flex; align-items:flex-start; justify-content:center; color:#fff; font-weight:800; padding-top:8px; font-size:13px; min-height:26px; font-variant-numeric:tabular-nums; }
.v3-page.rp-page .rp-fbar:first-child .col { background:linear-gradient(180deg,#8b98ad,#5b6b84); }
.v3-page.rp-page .rp-fbar:last-child .col { background:linear-gradient(180deg,#d97706,#c07600); }
.v3-page.rp-page .rp-fbar .cap { font-size:11px; color:var(--v3-ink3); margin-top:8px; text-align:center; font-weight:600; line-height:1.3; }
.v3-page.rp-page .rp-fbar .delta { font-size:11px; color:#178a50; font-weight:700; margin-top:3px; }

/* ── Toggle + Tabelle ── */
.v3-page.rp-page .rp-toggle { display:flex; gap:6px; flex-wrap:wrap; margin:0 2px 12px; }
.v3-page.rp-page .rp-toggle button { border:1px solid var(--v3-line); background:#fff; color:var(--v3-ink2); padding:6px 13px; border-radius:9px; font-size:12.5px; font-weight:650; cursor:pointer; font-family:inherit; }
.v3-page.rp-page .rp-toggle button.on { background:var(--v3-brand); color:#fff; border-color:var(--v3-brand); }
.v3-page.rp-page .rp-tblwrap { overflow-x:auto; }
.v3-page.rp-page .rp-tbl { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--v3-line); border-radius:13px; overflow:hidden; box-shadow:var(--v3-shadow); }
.v3-page.rp-page .rp-tbl th { background:#fbfcfe; text-align:left; padding:10px 14px; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--v3-ink3); border-bottom:1px solid var(--v3-line); white-space:nowrap; }
.v3-page.rp-page .rp-tbl td { padding:11px 14px; border-bottom:1px solid var(--v3-line2); font-size:13px; vertical-align:middle; }
.v3-page.rp-page .rp-tbl tr:last-child td { border-bottom:none; }
.v3-page.rp-page .rp-tbl tbody tr:hover { background:#fafbfe; }
.v3-page.rp-page .rp-tbl td.n { text-align:right; font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap; }
.v3-page.rp-page .rp-tbl td small, .v3-page.rp-page .rp-tbl th small { color:var(--v3-ink3); }
.v3-page.rp-page .rp-mini { height:7px; background:#eef1f6; border-radius:5px; overflow:hidden; width:74px; display:inline-block; vertical-align:middle; margin-left:6px; }
.v3-page.rp-page .rp-mini>span { display:block; height:100%; background:linear-gradient(90deg,#178a50,#22c55e); }
.v3-page.rp-page .rp-cohort { display:none; }
.v3-page.rp-page .rp-cohort.on { display:block; }

/* ── Member-Nachschlag ── */
.v3-page.rp-page .rp-searchbar { display:flex; align-items:center; gap:10px; background:#f6f8fb; border:1px solid var(--v3-line); border-radius:11px; padding:9px 13px; color:var(--v3-ink3); font-size:14px; }
.v3-page.rp-page .rp-searchbar input { flex:1; border:0; background:transparent; outline:none; font-size:14px; color:var(--v3-ink); font-family:inherit; }
.v3-page.rp-page .rp-searchbar .go { background:var(--v3-brand); color:#fff; border:none; border-radius:9px; padding:7px 14px; font-weight:700; font-size:12.5px; cursor:pointer; font-family:inherit; }
.v3-page.rp-page .rp-mtl { list-style:none; margin:14px 0 0; padding:0; position:relative; }
.v3-page.rp-page .rp-mtl::before { content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:var(--v3-line); }
.v3-page.rp-page .rp-mtl li { position:relative; padding:0 0 14px 42px; font-size:12.5px; }
.v3-page.rp-page .rp-mtl li:last-child { padding-bottom:0; }
.v3-page.rp-page .rp-mtl .mdot { position:absolute; left:8px; top:2px; width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--v3-line); }
.v3-page.rp-page .rp-mtl .mdot.mail{background:#1e56c8}.v3-page.rp-page .rp-mtl .mdot.wa{background:#12a150}
.v3-page.rp-page .rp-mtl .mdot.sepa{background:#2563eb}.v3-page.rp-page .rp-mtl .mdot.rl{background:#c93a4a}
.v3-page.rp-page .rp-mtl .mdot.pay{background:#178a50}.v3-page.rp-page .rp-mtl .mdot.hb{background:#c07600}
.v3-page.rp-page .rp-mtl .mt { font-weight:700; color:var(--v3-ink); }
.v3-page.rp-page .rp-mtl .mw { color:var(--v3-ink3); }

/* ── Querverweis-Karten ── */
.v3-page.rp-page .rp-xgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.v3-page.rp-page .rp-xcard { display:flex; gap:13px; align-items:flex-start; background:var(--v3-card); border:1px solid var(--v3-line); border-radius:14px; box-shadow:var(--v3-shadow); padding:15px 17px; text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .06s; }
.v3-page.rp-page .rp-xcard:hover { border-color:#bcd3f7; box-shadow:0 8px 22px -12px rgba(30,86,200,.4); transform:translateY(-1px); }
.v3-page.rp-page .rp-xcard .xi { font-size:20px; line-height:1; flex:none; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:#f2f5fb; }
.v3-page.rp-page .rp-xcard h4 { font-size:14px; font-weight:750; margin:0; }
.v3-page.rp-page .rp-xcard p { font-size:12px; color:var(--v3-ink3); margin:4px 0 0; line-height:1.5; }
.v3-page.rp-page .rp-xcard .arw { margin-left:auto; color:var(--v3-brand); font-weight:800; align-self:center; }

/* ── Deep-Dive (aufklappbar, server-gerendert) ── */
.v3-page.rp-page .rp-detail { margin:8px 2px 6px; }
.v3-page.rp-page .rp-dblock { background:#fff; border:1px solid var(--v3-line); border-radius:13px; padding:14px 16px; box-shadow:0 1px 2px rgba(22,35,58,.05); margin-bottom:12px; }
.v3-page.rp-page .rp-dblock>h4 { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--v3-ink3); margin:0 0 11px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.v3-page.rp-page .rp-kv { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--v3-line2); font-size:13px; }
.v3-page.rp-page .rp-kv:last-child { border-bottom:none; }
.v3-page.rp-page .rp-kv .k { color:var(--v3-ink2); } .v3-page.rp-page .rp-kv .v { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.v3-page.rp-page .rp-exrow { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--v3-line2); font-size:12.5px; }
.v3-page.rp-page .rp-exrow:last-child { border-bottom:none; }
.v3-page.rp-page .rp-exrow .en { flex:1; color:var(--v3-ink2); font-weight:600; }
.v3-page.rp-page .rp-exrow .ec { font-weight:700; font-variant-numeric:tabular-nums; width:64px; text-align:right; }
.v3-page.rp-page .rp-mailprev { border:1px solid var(--v3-line); border-radius:11px; overflow:hidden; font-size:12px; background:#fff; margin-bottom:10px; }
.v3-page.rp-page .rp-mailprev .mph { background:#fbfcfe; padding:9px 13px; border-bottom:1px solid var(--v3-line); color:var(--v3-ink2); }
.v3-page.rp-page .rp-mailprev .mph b { color:var(--v3-ink); }
.v3-page.rp-page .rp-mailprev .mpb { padding:13px 14px; color:var(--v3-ink); line-height:1.55; }
.v3-page.rp-page .rp-linkrow { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--v3-line2); font-size:12.5px; }
.v3-page.rp-page .rp-linkrow:last-child { border-bottom:none; }
.v3-page.rp-page .rp-curve { display:flex; gap:5px; align-items:flex-end; height:96px; margin-top:6px; }
.v3-page.rp-page .rp-cbar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
.v3-page.rp-page .rp-cbar .cc { width:100%; background:linear-gradient(180deg,#3f7ae6,#1e56c8); border-radius:5px 5px 0 0; min-height:3px; }
.v3-page.rp-page .rp-cbar .cl { font-size:9.5px; color:var(--v3-ink3); white-space:nowrap; }
.v3-page.rp-page .rp-dtbl { width:100%; border-collapse:collapse; font-size:12px; }
.v3-page.rp-page .rp-dtbl th { text-align:left; padding:7px 8px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--v3-ink3); border-bottom:1px solid var(--v3-line); white-space:nowrap; }
.v3-page.rp-page .rp-dtbl td { padding:8px; border-bottom:1px solid var(--v3-line2); white-space:nowrap; }
.v3-page.rp-page .rp-dtbl tr:last-child td { border-bottom:none; }
.v3-page.rp-page .rp-dtbl .n { text-align:right; font-variant-numeric:tabular-nums; }
.v3-page.rp-page .rp-callout { font-size:12.5px; color:var(--v3-ink2); line-height:1.6; margin:0; }
.v3-page.rp-page .rp-detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.v3-page.rp-page .rp-detail-head h3 { font-size:17px; font-weight:800; margin:0; }
.v3-page.rp-page .rp-detail-close { background:#f1f4f9; border:none; color:var(--v3-ink2); border-radius:9px; padding:6px 12px; font-weight:700; font-size:12px; cursor:pointer; text-decoration:none; }
.v3-page.rp-page .rp-empty { background:#fff; border:1px dashed var(--v3-line); border-radius:14px; padding:28px; text-align:center; color:var(--v3-ink3); font-size:13.5px; }

@media(max-width:820px){
  .v3-page.rp-page .rp-kpis { grid-template-columns:repeat(2,1fr); }
  .v3-page.rp-page .rp-xgrid { grid-template-columns:1fr; }
  .v3-page.rp-page .rp-srow .tag { width:130px; } .v3-page.rp-page .rp-srow .cnt { width:auto; }
}

/* ── Telefon-Kampagnen (Office-Cockpit + Anrufer-Bereich), v3-Stil ────────── */
.v3-page.pk-page .pk-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; border-radius:99px; padding:3px 10px; background:#eef2f8; color:var(--v3-ink2); white-space:nowrap; }
.v3-page.pk-page .pk-badge.c-grn { background:#e5f5ec; color:#178a50; }
.v3-page.pk-page .pk-badge.c-amb { background:#fdf3e2; color:#c07600; }
.v3-page.pk-page .pk-badge.c-red { background:#fdeaec; color:#c93a4a; }
.v3-page.pk-page .pk-badge.c-blue { background:#e8effd; color:#1e56c8; }
.v3-page.pk-page .pk-badge.c-slate { background:#eef2f8; color:#64748b; }
.v3-page.pk-page .pk-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.v3-page.pk-page .pk-kpi { background:var(--v3-card); border:1px solid var(--v3-line); border-radius:14px; box-shadow:var(--v3-shadow); padding:14px 16px; }
.v3-page.pk-page .pk-kpi .k { font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:var(--v3-ink3); font-weight:700; }
.v3-page.pk-page .pk-kpi .v { font-size:24px; font-weight:800; letter-spacing:-.4px; margin-top:6px; font-variant-numeric:tabular-nums; }
.v3-page.pk-page .pk-kpi .s { font-size:11.5px; color:var(--v3-ink3); margin-top:2px; }
.v3-page.pk-page .pk-grid { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
.v3-page.pk-page .pk-sect { padding:16px 18px; }
.v3-page.pk-page .pk-sect h2 { font-size:14px; font-weight:800; margin:0 0 4px; }
.v3-page.pk-page .pk-sect .hint { font-size:12px; color:var(--v3-ink3); margin:0 0 12px; }
.v3-page.pk-page .pk-act { display:flex; flex-direction:column; gap:9px; }
.v3-page.pk-page .pk-actrow { display:flex; align-items:center; gap:8px; }
.v3-page.pk-page .pk-src { display:flex; align-items:flex-start; gap:9px; background:#f6f8fb; border:1px solid var(--v3-line); border-radius:11px; padding:11px 13px; font-size:12.5px; color:var(--v3-ink2); line-height:1.55; }
.v3-page.pk-page .pk-src svg { width:16px; height:16px; stroke:var(--v3-brand); fill:none; stroke-width:2; flex:none; margin-top:1px; }
.v3-page.pk-page .pk-field label { display:block; font-size:11px; font-weight:700; color:var(--v3-ink3); margin-bottom:5px; }
.v3-page.pk-page .pk-input, .v3-page.pk-page .pk-select { width:100%; border:1px solid var(--v3-line); border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit; color:var(--v3-ink); background:#fff; }
.v3-page.pk-page .pk-input:focus, .v3-page.pk-page .pk-select:focus { outline:none; border-color:var(--v3-brand); box-shadow:0 0 0 3px rgba(47,111,224,.12); }
.v3-page.pk-page .pk-note { font-size:11.5px; color:#c07600; background:#fdf9ef; border:1px solid #f4e2bd; border-radius:9px; padding:8px 11px; }
@media(max-width:820px){ .v3-page.pk-page .pk-grid { grid-template-columns:1fr; } }
.v3-page.pk-page .pk-stack > * + * { margin-top:10px; }

/* ── Filter-Chips (Fall-Liste) ─────────────────────────────────────── */
.v3-page.pk-page .pk-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:650; border:1px solid var(--v3-line); border-radius:99px; padding:6px 13px; color:var(--v3-ink2); background:#fff; text-decoration:none; white-space:nowrap; cursor:pointer; }
.v3-page.pk-page .pk-chip:hover { border-color:var(--v3-brand); color:var(--v3-brand); }
.v3-page.pk-page .pk-chip.is-active { background:var(--v3-brand); border-color:var(--v3-brand); color:#fff; }
.v3-page.pk-page .pk-chip.is-active span { opacity:.85; }

/* ── Fall-Kacheln ──────────────────────────────────────────────────── */
.v3-page.pk-page .pk-falls { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.v3-page.pk-page .pk-fall { background:var(--v3-card); border:1px solid var(--v3-line); border-radius:14px; box-shadow:var(--v3-shadow); padding:13px 15px; display:flex; flex-direction:column; }
.v3-page.pk-page .pk-fall-main { text-decoration:none; color:var(--v3-ink); display:block; }
.v3-page.pk-page .pk-fall-main:hover .pk-fall-name { color:var(--v3-brand); }
.v3-page.pk-page .pk-fall-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.v3-page.pk-page .pk-fall-name { font-weight:800; font-size:14.5px; }
.v3-page.pk-page .pk-fall-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; font-size:12px; color:var(--v3-ink3); }
.v3-page.pk-page .pk-fall-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; font-size:13px; }
.v3-page.pk-page .pk-fall-open b { font-variant-numeric:tabular-nums; }
.v3-page.pk-page .pk-fall-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; padding-top:9px; border-top:1px solid var(--v3-line2, #eef2f8); font-size:11.5px; color:var(--v3-ink3); }

/* ── Gesprächskarte v2 — geführter Ablauf ─────────────────────────── */
.v3-page.pk-page .gk-step { border:1px solid var(--v3-line); border-radius:12px; padding:13px 15px; margin-top:12px; }
.v3-page.pk-page .gk-step > h3 { font-size:13px; font-weight:800; margin:0 0 9px; display:flex; align-items:center; gap:8px; }
.v3-page.pk-page .gk-step .gk-num { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--v3-brand); color:#fff; font-size:11px; font-weight:800; flex:none; }
.v3-page.pk-page .gk-chips { display:flex; flex-wrap:wrap; gap:8px; }
.v3-page.pk-page .gk-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:650; border:1px solid var(--v3-line); border-radius:99px; padding:8px 15px; color:var(--v3-ink2); background:#fff; cursor:pointer; user-select:none; }
.v3-page.pk-page .gk-chip:hover { border-color:var(--v3-brand); }
.v3-page.pk-page .gk-chip.is-active { background:var(--v3-brand); border-color:var(--v3-brand); color:#fff; }
.v3-page.pk-page .gk-chip.is-active.gk-neg { background:#c93a4a; border-color:#c93a4a; }
.v3-page.pk-page .gk-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--v3-line2, #eef2f8); }
.v3-page.pk-page .gk-row:last-child { border-bottom:0; }
.v3-page.pk-page .gk-row .gk-bestand { font-size:13px; }
.v3-page.pk-page .gk-row .gk-bestand .lbl { font-size:11px; color:var(--v3-ink3); }
.v3-page.pk-page .gk-toggle { display:inline-flex; border:1px solid var(--v3-line); border-radius:9px; overflow:hidden; flex:none; }
.v3-page.pk-page .gk-toggle button { border:0; background:#fff; padding:6px 11px; font-size:12px; font-weight:650; color:var(--v3-ink2); cursor:pointer; }
.v3-page.pk-page .gk-toggle button.is-on-ok { background:#e5f5ec; color:#178a50; }
.v3-page.pk-page .gk-toggle button.is-on-edit { background:#e8effd; color:#1e56c8; }

/* ═══════════ Stiftung 4.0 · Überblick (Welle 1) ═══════════
   Startseite mit drei To-do-Kacheln + Jahresstand + vier Gesundheits-Ampeln.
   Erbt s3-heute (s3-card/s3-callout/s3-kpi/num) — hier nur die Überblick-
   spezifischen Raster/Kacheln. */
.v3-page.s3-ueberblick .s3-todos { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .v3-page.s3-ueberblick .s3-todos{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .v3-page.s3-ueberblick .s3-todos{ grid-template-columns:1fr; } }
.v3-page.s3-ueberblick .s3-todo { border-left:4px solid var(--brand); display:flex; flex-direction:column; gap:6px; }
.v3-page.s3-ueberblick .s3-todo.warn { border-left-color:var(--warn); }
.v3-page.s3-ueberblick .s3-todo h3 { margin:0; font-size:13.5px; font-weight:700; color:var(--ink2); }
.v3-page.s3-ueberblick .s3-todonum { font-size:30px; font-weight:800; letter-spacing:-.5px; line-height:1.1; }
.v3-page.s3-ueberblick .s3-todosum { font-size:12px; color:var(--ink3); font-weight:600; }
.v3-page.s3-ueberblick .s3-todohint { font-size:12px; color:var(--ink3); line-height:1.5; }
.v3-page.s3-ueberblick .s3-todocta { display:inline-block; margin-top:auto; padding-top:4px; font-size:12.5px; font-weight:650; color:var(--brand); }
.v3-page.s3-ueberblick .s3-todocta.inline { margin:0; padding:0; }
.v3-page.s3-ueberblick .s3-todocta:hover { text-decoration:underline; }
.v3-page.s3-ueberblick .s3-cols { display:grid; gap:16px; align-items:start; }
.v3-page.s3-ueberblick .s3-cols.s3-ub-cols { margin-top:16px; }
.v3-page.s3-ueberblick .s3-cols.c11 { grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .v3-page.s3-ueberblick .s3-cols.c11{ grid-template-columns:1fr; } }
.v3-page.s3-ueberblick .s3-kpis.four { grid-template-columns:repeat(4,1fr); }
@media (max-width:560px){ .v3-page.s3-ueberblick .s3-kpis.four{ grid-template-columns:1fr 1fr; } }
.v3-page.s3-ueberblick .s3-ampeln { display:grid; gap:8px; margin-top:8px; }
.v3-page.s3-ueberblick .s3-ampel { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--ink2); line-height:1.5; }

/* Tab-Zeile: Punkt-Badge + ⚙-Zahnrad-Link (Stiftung 4.0) */
/* Arbeits-Badge auf Bereichs- UND Unter-Ebene (eine Regel statt zwei; die
   Subnav rendert je nach Seite innerhalb oder ausserhalb .v3-page ->
   Fallback fuer --warn). */
.s3-areabar .s3-tabdot,
.s3-subbar .s3-tabdot { font-size:11px; font-weight:800; color:var(--warn, #c07600); margin-left:4px; }
.s3-areabar .s3-gearlink { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; font-size:15px; color:var(--ink2); text-decoration:none; border:1px solid var(--line); background:#fff; }
.s3-areabar .s3-gearlink:hover { border-color:#bcd3f7; color:var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════════
   STIFTUNG 4.0 · WELLE 2 — Transaktionen (s3-transaktionen)
   Additiv, append-only. Die Seite trägt `v3-page s3-w2 s3-transaktionen` und
   erbt Karten/Tabellen/Chips/Buttons/Callout/Badges/kv/dh/act aus s3-w2. Hier
   NUR die netto-neuen Bausteine: Monatsgruppen, Ein-/Ausgangs-Zeilen, der
   Zuordnen-Drawer v2 (Vorher/Nachher, Treffer-Historie, Plausibilität) und die
   Kategorie-Menü-/Hinweis-Bausteine des Mockups s2. Reine Darstellung.
   ═════════════════════════════════════════════════════════════════════════ */
.v3-page.s3-transaktionen .s3-txtbl tbody { border:none; }
.v3-page.s3-transaktionen tr.s3-mgroup td { background:#fafbfe; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink3); font-weight:750; padding:7px 14px; border-bottom:1px solid var(--line); }
.v3-page.s3-transaktionen .s3-txrow td { vertical-align:middle; }
.v3-page.s3-transaktionen .s3-txrow .s3-sub { display:block; margin-top:1px; }
.v3-page.s3-transaktionen .s3-txout td { color:var(--ink3); }
.v3-page.s3-transaktionen .s3-neg { color:var(--bad); }
.v3-page.s3-transaktionen .s3-txdrawer td { padding:0; background:#fbfcfe; border-top:none; }
.v3-page.s3-transaktionen .s3-txdrawer.hidden { display:none; }
.v3-page.s3-transaktionen .s3-rowdrawer-inner { padding:14px 16px 16px; }
/* Carsten 28.07.: JEDE Zeile ist per Klick aufklappbar (nicht nur der Knopf). */
.v3-page .s3-clickrow { cursor:pointer; }
.v3-page .s3-clickrow:hover > td { background:#f6f9ff; }

/* Kategorie-Menü (Chip mit Dropdown) + Werkzeug-Links */
.v3-page.s3-transaktionen .s3-katmenu { position:relative; }
.v3-page.s3-transaktionen .s3-katmenu > summary { list-style:none; cursor:pointer; }
.v3-page.s3-transaktionen .s3-katmenu > summary::-webkit-details-marker { display:none; }
.v3-page.s3-transaktionen .s3-katmenu .s3-actbody { position:absolute; z-index:20; min-width:200px; }
.v3-page.s3-transaktionen .s3-toollink { color:var(--brand); font-weight:650; text-decoration:none; }
.v3-page.s3-transaktionen .s3-toollink:hover { text-decoration:underline; }
.v3-page.s3-transaktionen .s3-toollink.on { font-weight:800; }

/* Zuordnen-Drawer v2 */
.v3-page.s3-transaktionen .drawer { background:#fbfdff; border:1px solid #c7d2fe; border-radius:12px; padding:14px 16px; }
.v3-page.s3-transaktionen .s3-vn { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 13px; font-size:12.5px; margin-bottom:12px; }
.v3-page.s3-transaktionen .s3-vn-arrow { color:var(--brand); font-weight:800; }
.v3-page.s3-transaktionen .s3-zuordnen-cols { display:grid; grid-template-columns:1fr 260px; gap:14px; align-items:start; }
@media (max-width:820px){ .v3-page.s3-transaktionen .s3-zuordnen-cols{ grid-template-columns:1fr; }
  .v3-page.s3-transaktionen .s3-vn{ grid-template-columns:1fr; } }
.v3-page.s3-transaktionen .histbox { background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:12.5px; margin-top:10px; }
.v3-page.s3-transaktionen .histbox.match { border-color:#c7d2fe; }
.v3-page.s3-transaktionen .histbox .hd { display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin-bottom:5px; }
.v3-page.s3-transaktionen .s3-grund { display:inline-block; font-size:12px; font-weight:650; color:var(--brand); background:#e8effd; border:1px solid #bcd3f7; border-radius:8px; padding:2px 9px; }
.v3-page.s3-transaktionen .hint { display:flex; gap:8px; border-radius:10px; padding:9px 12px; font-size:12.5px; margin-top:10px; }
.v3-page.s3-transaktionen .hint.blue { background:#e8effd; border:1px solid #bcd3f7; color:#1e3a8a; }
.v3-page.s3-transaktionen .hint.green { background:#e5f5ec; border:1px solid #bbe5c4; color:#155e2e; }
.v3-page.s3-transaktionen .s3-serie form { margin:0; }

/* Reuse der Heute-Historien-Bausteine (spender_historie-Partial) im Drawer */
.v3-page.s3-transaktionen .s3-hist-rhythm { font-size:12px; font-weight:650; margin-bottom:6px; }
.v3-page.s3-transaktionen .s3-hist-rhythm.ok { color:var(--ok); }
.v3-page.s3-transaktionen .s3-hist-rhythm.warn { color:var(--warn); }
.v3-page.s3-transaktionen .s3-hist-stats { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink2); margin-bottom:6px; }
/* ═══════════════════════════════════════════════════════════════════════════
   STIFTUNG 4.0 · WELLE 4 — Quittungen-Nummernkreis-Timeline (s3-quit)
   Mockup #s4/#s4b/#s5. Append-only. Die Seite trägt `s3-w2 s3-w3 s3-quit`
   und erbt damit Karten/Chips/KPIs; hier NUR die Timeline-Einträge + Detail.
   ═════════════════════════════════════════════════════════════════════════ */
.v3-page.s3-quit .tl { display:flex; flex-direction:column; gap:8px; margin:6px 0 4px; }
.v3-page.s3-quit .tlm { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin:12px 0 2px; }
.v3-page.s3-quit .tli { border:1px solid var(--line); border-radius:12px; background:#fff; padding:11px 14px; }
.v3-page.s3-quit .tli .row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.v3-page.s3-quit .tli b { font-weight:750; font-size:13.5px; }
.v3-page.s3-quit .tli .mini { font-size:11.5px; color:var(--ink3); font-weight:500; }
.v3-page.s3-quit .tli.block { background:#fdf6e8; border-color:#f2dfae; }
.v3-page.s3-quit .tli.todo { background:#fffdf5; border-color:#f0e3b8; }
.v3-page.s3-quit .tli.gap { background:#f7f8fa; border-style:dashed; border-color:#d7dce4; }
.v3-page.s3-quit .tli.prob { background:#fdeef0; border:1px dashed #eab3bb; }
.v3-page.s3-quit .tli.is-hl { box-shadow:0 0 0 2px var(--brand); border-color:var(--brand); }
.v3-page.s3-quit .num-chip { display:inline-block; font-variant-numeric:tabular-nums; font-weight:800; font-size:12px; color:#1e56c8; background:#e8effd; border:1px solid #bcd3f7; border-radius:7px; padding:2px 8px; margin-right:6px; }
.v3-page.s3-quit .num-chip.plat { color:#6d28d9; background:#f4effe; border-color:#d9c9f6; }
.v3-page.s3-quit .b { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.02em; border-radius:99px; padding:2px 8px; vertical-align:1px; margin-left:4px; }
.v3-page.s3-quit .b.amber { color:#8a5a00; background:#fdf3e2; border:1px solid #f2dfae; }
.v3-page.s3-quit .b.red { color:#c93a4a; background:#fdeaec; border:1px solid #f2c3c9; }
.v3-page.s3-quit .b.green { color:#178a50; background:#e5f5ec; border:1px solid #bbe5c4; }
.v3-page.s3-quit .b.blue { color:#1e56c8; background:#e8effd; border:1px solid #bcd3f7; }
.v3-page.s3-quit .b.violet { color:#6d28d9; background:#f4effe; border:1px solid #d9c9f6; }
/* Aufklapp einer Timeline-Zeile (Carsten 28.07.: jede Zeile ist klickbar). */
.v3-page.s3-quit .tli .tl-more { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.v3-page.s3-quit .tli .tl-more.hidden { display:none; }
.v3-page.s3-quit .tli .row.s3-clickrow { cursor:pointer; }
.v3-page.s3-quit .tli:hover { border-color:#bcd3f7; }
.v3-page.s3-quit .s3-jumpform { display:inline-flex; align-items:center; gap:6px; margin:0; }
.v3-page.s3-quit .s3-jumpform .s3-input { min-width:0; }

/* Detail (Mockup #s5): 3-Schritt-Leiste + Mail-Vorschau-Karte */
.v3-page.s3-quit .wizsteps, .s3-quitdetail .wizsteps { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 16px; }
.s3-quitdetail .wizsteps > div { font-size:12px; font-weight:700; color:var(--ink3); background:#f1f4f9; border:1px solid var(--line); border-radius:99px; padding:6px 14px; }
.s3-quitdetail .wizsteps > div.done { color:#178a50; background:#e5f5ec; border-color:#bbe5c4; }
.s3-quitdetail .wizsteps > div.now { color:#fff; background:var(--brand); border-color:var(--brand); }
.s3-quitdetail .mailprev { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.s3-quitdetail .mailprev .mh { padding:12px 14px; border-bottom:1px solid var(--line); background:#fafbfe; display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
.s3-quitdetail .mailprev .mh > div > span:first-child { display:inline-block; min-width:64px; color:var(--ink3); font-weight:600; }
.s3-quitdetail .mailprev .mb { padding:14px; font-size:12.5px; color:var(--ink2); line-height:1.6; }
.s3-quitdetail .att { display:inline-block; font-size:11.5px; font-weight:650; color:var(--ink2); background:#f1f4f9; border:1px solid var(--line); border-radius:7px; padding:3px 9px; }
.s3-quitdetail .histbox { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fafbfe; margin-top:6px; }
.s3-quitdetail .histbox .hd { display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink3); margin-bottom:5px; }
.s3-quitdetail .histbox .hl { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:2px 0; }

/* ═════════════════════════════════════════════════════════════════════════
   STIFTUNG · NUMMERNKREIS-MATRIX (Carsten 28.07.2026) — Append-only.
   Der Zahlenraum eines Jahres als Raster: jede Nummer eine Zelle, Farbe =
   Zustand/Quelle. Klick → Steckbrief darunter (Server-Roundtrip, kein JS).
   Farbwelt bewusst identisch zur Timeline (.num-chip blau App / lila
   Spendenseite, .tli.gap grau-gestrichelt, .tli.prob rot-gestrichelt).
   ═════════════════════════════════════════════════════════════════════════ */
.v3-page.s3-quit .s3-nrlegend { display:flex; flex-wrap:wrap; gap:12px; margin:10px 0 2px; font-size:11.5px; font-weight:650; color:var(--ink3); align-items:center; }
.v3-page.s3-quit .s3-nrlegend span { display:inline-flex; align-items:center; gap:6px; }
.v3-page.s3-quit .s3-nrlegend .nrc { width:16px; height:16px; min-width:16px; padding:0; font-size:0; }

.v3-page.s3-quit .s3-nrgrid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; margin-top:12px; }
@media (max-width:1000px){ .v3-page.s3-quit .s3-nrgrid{ grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media (max-width:760px){ .v3-page.s3-quit .s3-nrgrid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }

.v3-page.s3-quit .nrc {
  display:inline-flex; align-items:center; justify-content:center;
  font-variant-numeric:tabular-nums; font-weight:800; font-size:12px;
  border:1px solid var(--line); border-radius:7px; padding:7px 4px;
  text-decoration:none; color:var(--ink2); background:#fff;
  transition:border-color .12s, box-shadow .12s;
}
.v3-page.s3-quit a.nrc:hover { border-color:var(--brand); box-shadow:var(--shadow); }
.v3-page.s3-quit a.nrc:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.v3-page.s3-quit .nrc.app   { color:#1e56c8; background:#e8effd; border-color:#bcd3f7; }
.v3-page.s3-quit .nrc.plat  { color:#6d28d9; background:#f4effe; border-color:#d9c9f6; }
.v3-page.s3-quit .nrc.hist  { color:#8a5a00; background:#fdf3e2; border-color:#f2dfae; }
.v3-page.s3-quit .nrc.resv  { color:#8a5a00; background:#fdf9f0; border-color:#f2dfae; border-style:dashed; }
.v3-page.s3-quit .nrc.storno{ color:#5b6b84; background:#f1f4f9; border-color:var(--line); text-decoration:line-through; }
.v3-page.s3-quit .nrc.frei  { color:var(--ink2); background:#f7f8fa; border-color:#d7dce4; border-style:dashed; }
.v3-page.s3-quit .nrc.next  { color:#178a50; background:#e5f5ec; border-color:#178a50; box-shadow:0 0 0 2px #bbe5c4; }
.v3-page.s3-quit .nrc.prob  { color:#c93a4a; background:#fdeef0; border-color:#c93a4a; border-style:dashed; }
.v3-page.s3-quit .nrc.on    { box-shadow:0 0 0 2px var(--brand); border-color:var(--brand); }

.v3-page.s3-quit .s3-nrdetail .s3-dh h4 { margin:0; font-size:14px; font-weight:750; }
.v3-page.s3-quit .s3-nrdetail { border:1px solid var(--line); border-radius:12px; background:#fafbfe; padding:12px 14px; }
.v3-page.s3-quit .s3-nrdetail .s3-kv { margin:10px 0 0; }
.v3-page.s3-quit .s3-nrdetail .s3-kv + .s3-kv { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }

/* ═══════════════════════════════════════════════════════════════════════
   V3-KOMPONENTEN aus dem freigegebenen Mockup „Abschlussklassen + Winback"
   (2026-07-30). Alles global unter `.v3-page`, damit weitere Bereiche die
   Bausteine wiederverwenden statt sie erneut zu bauen (Reuse vor Neubau).
   Nur die Fall-Zeile des Winback-Bereichs bleibt auf `.wb-page` gescopet.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Karten-Innenleben: Kopf mit Titel/Subtitel/Aktionen + Innenabstand ── */
.v3-page .v3-cardpad { padding: 16px 18px; }
.v3-page .v3-cardhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .v3-cardhead h2 { margin: 0; font-size: 14.5px; font-weight: 750; letter-spacing: -.1px; }
.v3-page .v3-cardhead .hsub { font-size: 12px; color: var(--v3-ink3); margin-top: 2px; font-weight: 500; }
.v3-page .v3-cardhead .hact { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Spaltenraster ── */
.v3-page .v3-cols { display: grid; gap: 16px; align-items: start; margin-bottom: 16px; }
.v3-page .v3-cols.c11 { grid-template-columns: 1fr 1fr; }
.v3-page .v3-cols.c21 { grid-template-columns: 1.6fr 1fr; }
.v3-page .v3-cols.c12 { grid-template-columns: 1fr 1.6fr; }
.v3-page .v3-cols.c3  { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .v3-page .v3-cols { grid-template-columns: 1fr; } }

.v3-page .v3-scroll { overflow-x: auto; }

/* ── Callout (Hinweis-Zeile mit Farbkante) ── */
.v3-page .v3-callout { border-left: 4px solid var(--v3-brand); background: #e8effd; border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 12.5px; font-weight: 500; color: var(--v3-ink2); margin-bottom: 14px; }
.v3-page .v3-callout.warn { border-left-color: var(--v3-warn); background: #fdf3e2; }
.v3-page .v3-callout.ok { border-left-color: var(--v3-ok); background: #e6f6ec; }
/* Der fehlende dritte Ton (W1 Teil 2, 26.08.2026). ROT NUR FUER BEWEISBAR
   PROBLEMATISCHES — erster Traeger ist die Doppelzahlungs-Warnung: dass
   derselbe Betrag beim selben Lieferanten bereits bezahlt WURDE, ist eine
   Messung, keine Vermutung. */
.v3-page .v3-callout.bad { border-left-color: var(--v3-bad); background: #fdeaec; }
.v3-page .v3-callout b { color: var(--v3-ink); }
.v3-page .v3-callout code { font-size: 11.5px; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }

/* ── Text-Tonwerte ── */
.v3-page .t-ok { color: var(--v3-ok); }
.v3-page .t-warn { color: var(--v3-warn); }
.v3-page .t-bad { color: var(--v3-bad); }
.v3-page .t-mut { color: var(--v3-ink3); }

/* ── Tabellen-Ergänzungen: Ausrichtung, abgeblendete Zeile, Nur-Lese-Zeilen ──
   Die Versalien-Kopfzeile bleibt bewusst auf die beiden umgebauten Bereiche
   gescopet, damit bestehende v3-Tabellen ihr Aussehen behalten. */
.v3-page.gc-page .v3-table thead th,
.v3-page.wb-page .v3-table thead th { text-transform: uppercase; white-space: nowrap; }
.v3-page .v3-table thead th.r, .v3-page .v3-table tbody td.r { text-align: right; }
.v3-page .v3-table thead th.c, .v3-page .v3-table tbody td.c { text-align: center; }
.v3-page .v3-table tbody tr.dim td { color: var(--v3-ink3); background: #fcfdff; }
/* Eine Zeile, die eine Schwelle gerissen hat (Angriffs-Erkennung, C2
   08.09.2026). ROT NUR FUER BEWEISBARES — der Riss ist gemessen, nicht
   vermutet; er zitiert `config/sicherheit_schwellen.yml`. Vor dem Namen
   gegreppt: `is-riss` kommt sonst nirgends vor (Lehre 17). */
.v3-page .v3-table tbody tr.is-riss td { background: #fdeaec; }
.v3-page .v3-table tbody tr.is-riss td:first-child { box-shadow: inset 3px 0 0 var(--v3-bad); }
.v3-page .v3-table.rows-plain tbody tr { cursor: default; }

.v3-page .p-emba { background: #fdf3e2; color: #a15c00; }

/* ── Waagerechte Mess-Zeile (Datenqualität, Rollen, Gründe, Quoten) ── */
.v3-page .barrow { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.v3-page .barrow:last-child { margin-bottom: 0; }
.v3-page .barrow .k { flex: 0 0 190px; font-size: 12.5px; font-weight: 650; color: var(--v3-ink2); min-width: 0; }
.v3-page .barrow .k small { display: block; font-weight: 500; color: var(--v3-ink3); font-size: 11px; }
.v3-page .barrow .track { flex: 1; height: 14px; background: #eef1f6; border-radius: 7px; overflow: hidden; }
.v3-page .barrow .track i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg,#3f7ae6,#1e56c8); }
.v3-page .barrow .track i.ok { background: linear-gradient(90deg,#34d399,#178a50); }
.v3-page .barrow .track i.warn { background: linear-gradient(90deg,#f0b657,#c07600); }
.v3-page .barrow .track i.bad { background: linear-gradient(90deg,#ef7d8b,#c93a4a); }
.v3-page .barrow .track i.mut { background: #cbd4e1; }
.v3-page .barrow .v { flex: 0 0 148px; text-align: right; white-space: nowrap; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.v3-page .barrow .v span { color: var(--v3-ink3); font-weight: 600; }

/* ── Säulen-Diagramm (reines CSS, kein Diagramm-Framework) ── */
.v3-page .colchart { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding-top: 8px; }
.v3-page .colchart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; min-width: 0; text-decoration: none; }
.v3-page .colchart .cv { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--v3-ink2); }
.v3-page .colchart .cbars { width: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.v3-page .colchart .cbar { width: 60%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg,#3f7ae6,#1e56c8); min-height: 2px; }
.v3-page .colchart .cbar.prev { width: 34%; background: #d7dee9; }
.v3-page .colchart .cbar.ok { background: linear-gradient(180deg,#34d399,#178a50); }
.v3-page .colchart .cbar.warn { background: linear-gradient(180deg,#f0b657,#c07600); }
.v3-page .colchart .cbar.bad { background: linear-gradient(180deg,#ef7d8b,#c93a4a); }
.v3-page .colchart .cl { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.v3-page .colchart a.col.on .cbar { background: linear-gradient(180deg,#2f6fe0,#0f2b46); }
.v3-page .colchart a.col.on .cl, .v3-page .colchart a.col.on .cv { color: var(--v3-brand); }
.v3-page .colchart .ce { font-size: 9.5px; height: 12px; line-height: 12px; color: #7c6cf0; font-weight: 700; }
.v3-page .chartlegend { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--v3-ink3); font-weight: 650; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--v3-line2); }
.v3-page .chartlegend i { width: 10px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: 0; }

/* ── Segmented Control (Jahres-/Metrik-Umschalter) ── */
.v3-page .v3-seg { display: inline-flex; background: #f1f4f8; border-radius: 11px; padding: 3px; gap: 2px; }
.v3-page .v3-seg button, .v3-page .v3-seg a, .v3-page .v3-seg label { border: 0; background: transparent; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--v3-ink2); padding: 6px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.v3-page .v3-seg .on { background: #fff; color: var(--v3-brand); box-shadow: 0 1px 2px rgba(22,35,58,.10); }

/* ── Bereichs-Tabs innerhalb einer Karte ── */
.v3-page .v3-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--v3-line); padding: 0 14px; overflow-x: auto; }
.v3-page .v3-tab { display: inline-block; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--v3-ink3); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; text-decoration: none; }
.v3-page .v3-tab:hover { color: var(--v3-ink2); }
.v3-page .v3-tab.on { color: var(--v3-brand); border-bottom-color: var(--v3-brand); }
.v3-page .v3-tab .n { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 3px; }

/* ── Abschlussklassen: Trend-Sparkline in der Kohorten-Tabelle ── */
.v3-page.gc-page .spark { width: 54px; height: 20px; display: inline-block; vertical-align: middle; }

/* ── Winback: Personen-Suche der Arbeitslisten (winback/_suchfeld) ──
   Kein eigenes Feld-CSS: die Leiste ist `.v3-searchrow` + `.v3-bigsearch` aus
   dem Baukasten, hier steht nur die Trennkante zur Liste darunter. */
.v3-page.wb-page .wb-suche { border-bottom: 1px solid var(--v3-line2); padding-top: 12px; padding-bottom: 12px; }
.v3-page.wb-page .wb-suche .v3-searchrow { flex-wrap: wrap; }

/* ── Winback: Fall-Zeile (Identität · Kanäle · Aktionen) ── */
.v3-page.wb-page .wb-row { display: grid; grid-template-columns: minmax(0,1fr) 190px 300px; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--v3-line2); align-items: start; }
.v3-page.wb-page .wb-row:last-child { border-bottom: 0; }
.v3-page.wb-page .wb-row:hover { background: #fafbfe; }
.v3-page.wb-page .wb-row.due { background: #fffaf0; box-shadow: inset 3px 0 0 var(--v3-warn); }
@media (max-width: 1100px) { .v3-page.wb-page .wb-row { grid-template-columns: 1fr; } }
.v3-page.wb-page .wb-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v3-page.wb-page .wb-name b { font-size: 13.5px; font-weight: 750; }
.v3-page.wb-page .wb-name a { text-decoration: none; }
.v3-page.wb-page .wb-reason { font-size: 12px; color: var(--v3-ink2); margin-top: 5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-page.wb-page .wb-reason .src { font-weight: 700; color: var(--v3-ink); }
.v3-page.wb-page .wb-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11.5px; color: var(--v3-ink2); margin-top: 7px; }
.v3-page.wb-page .wb-meta span i { font-style: normal; color: var(--v3-ink3); }
.v3-page.wb-page .wb-meta b { font-variant-numeric: tabular-nums; }
.v3-page.wb-page .wb-kanal { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.v3-page.wb-page .wb-kanal a, .v3-page.wb-page .wb-kanal span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; border-radius: 99px; padding: 4px 10px; text-decoration: none; border: 1px solid var(--v3-line); background: #fbfcfe; color: var(--v3-ink2); }
.v3-page.wb-page .wb-kanal a svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.v3-page.wb-page .wb-kanal a.mail { background: #e8effd; border-color: #c8dafa; color: #1e56c8; }
.v3-page.wb-page .wb-kanal a.tel { background: #e6f6ec; border-color: #bfe6cf; color: #12703f; }
.v3-page.wb-page .wb-kanal a.li { background: #e5f4fb; border-color: #bfe4f2; color: #0b6f92; }
.v3-page.wb-page .wb-kanal a.li svg { fill: currentColor; stroke: none; }
.v3-page.wb-page .wb-kanal span.none { background: #fdeaec; border-color: #f4bdc4; color: #a52b3a; }
.v3-page.wb-page .wb-akt { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.v3-page.wb-page .wb-akt form { margin: 0; }
.v3-page.wb-page .wb-akt .v3-btn { box-shadow: none; font-size: 11.5px; padding: 5px 9px; border-radius: 99px; }
.v3-page.wb-page .wb-akt details { position: relative; }
.v3-page.wb-page .wb-akt details > summary { list-style: none; }
.v3-page.wb-page .wb-akt details > summary::-webkit-details-marker { display: none; }
.v3-page.wb-page .wb-pop { position: absolute; right: 0; z-index: 30; margin-top: 6px; width: 320px; background: #fff; border: 1px solid var(--v3-line); border-radius: 12px; box-shadow: 0 12px 34px -10px rgba(22,35,58,.30); padding: 14px; text-align: left; }
.v3-page.wb-page .wb-pop .pl { font-size: 12px; font-weight: 700; color: var(--v3-ink2); margin-bottom: 8px; }
.v3-page.wb-page .wb-pop input[type="date"], .v3-page.wb-page .wb-pop select, .v3-page.wb-page .wb-pop textarea { width: 100%; font-family: inherit; font-size: 12px; border: 1px solid var(--v3-line); border-radius: 9px; padding: 6px 9px; color: var(--v3-ink); background: #fff; }
.v3-page.wb-page .wb-pop .prow { display: flex; gap: 8px; margin-bottom: 8px; }
.v3-page.wb-page .wb-pop textarea { margin-bottom: 8px; }
.v3-page.wb-page .wb-pop .wvrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.v3-page.wb-page .wb-pop .wvrow span { font-size: 11px; color: var(--v3-ink3); flex: none; }
.v3-page.wb-page .wb-pop input[type="submit"], .v3-page.wb-page .wb-pop button[type="submit"] { width: 100%; border: 0; border-radius: 9px; padding: 7px 12px; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#2f6fe0,#1e56c8); cursor: pointer; }
.v3-page.wb-page .wb-verlauf { grid-column: 1 / -1; border-left: 2px solid #bfe6cf; padding-left: 11px; margin-top: 4px; font-size: 11.5px; color: var(--v3-ink2); }
.v3-page.wb-page .wb-verlauf p { margin: 0 0 2px; }
.v3-page.wb-page .wb-verlauf b { color: #12703f; }

/* Mini-Wochenhistorie (klickbare letzte 12 Wochen) */
.v3-page.wb-page .wb-hist { display: flex; align-items: flex-end; gap: 5px; }
.v3-page.wb-page .wb-hist a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.v3-page.wb-page .wb-hist .hn { font-size: 9.5px; font-weight: 700; color: var(--v3-ink3); font-variant-numeric: tabular-nums; }
.v3-page.wb-page .wb-hist .hb { width: 16px; border-radius: 4px 4px 0 0; background: #d7dee9; }
.v3-page.wb-page .wb-hist a:hover .hb { background: #bfc9d8; }
.v3-page.wb-page .wb-hist a.on .hb { background: var(--v3-brand); }
.v3-page.wb-page .wb-hist a.on .hn { color: var(--v3-brand); }
.v3-page.wb-page .wb-hist .hk { font-size: 9px; color: var(--v3-ink3); font-variant-numeric: tabular-nums; }

/* Leerzustand innerhalb der Tab-Karte */
.v3-page .v3-empty { padding: 48px 18px; text-align: center; }
.v3-page .v3-empty .et { font-size: 14px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .v3-empty .es { font-size: 12.5px; color: var(--v3-ink3); margin-top: 4px; }

/* ── Abschlussklassen: schlankes Formular (neu / bearbeiten) ── */
.v3-page.gc-page .gc-field { margin-bottom: 14px; }
.v3-page.gc-page .gc-field label { display: block; font-size: 12px; font-weight: 700; color: var(--v3-ink2); margin-bottom: 5px; }
.v3-page.gc-page .gc-field input { width: 100%; font-family: inherit; font-size: 14px; color: var(--v3-ink); background: #f6f8fb; border: 1px solid var(--v3-line); border-radius: 11px; padding: 10px 14px; }
.v3-page.gc-page .gc-field input:focus { outline: none; border-color: var(--v3-brand); background: #fff; box-shadow: 0 0 0 3px rgba(30,86,200,.12); }
.v3-page.gc-page .gc-form input[type="submit"] { border: 0; }
/* ═══ WhatsApp-Vorlagen (wt-*) ══════════════════════════════════════════
   Liste mit Suche/Filter + Verwaltung (Archivieren/Löschen). Zustands-Pillen
   spiegeln WhatsappTemplate#lifecycle_stage — „Entwurf" ist sichtbar etwas
   anderes als „Bei Meta eingereicht". */
.v3-page .wt-note {
  background: #fdf3e2; border: 1px solid #f2dfae; color: #8a5a00;
  border-radius: var(--v3-r); padding: 12px 16px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.5;
}
.v3-page .wt-note b { font-weight: 800; }
.v3-page .wt-name { font-weight: 700; font-size: 13.5px; color: var(--v3-ink); }
.v3-page .wt-snippet { font-size: 11.5px; color: var(--v3-ink3); margin-top: 2px; max-width: 460px; }
.v3-page .wt-archnote { font-size: 11px; color: var(--v3-ink3); font-style: italic; margin-top: 3px; }
.v3-page .wt-metaid { font-size: 11.5px; color: var(--v3-ink3); font-variant-numeric: tabular-nums; }
.v3-page tr.wt-archived { opacity: .58; }
.v3-page .wt-acts { white-space: nowrap; text-align: right; }
.v3-page .wt-acts form { display: inline-block; margin: 0 0 0 6px; }
.v3-page .wt-acts .v3-btn.wt-danger { color: #c93a4a; border-color: #f0c4ca; }
.v3-page .wt-acts .v3-btn.wt-danger:hover { background: #fdeef0; }
.v3-page .wt-foot { font-size: 11.5px; color: var(--v3-ink3); margin-top: 12px; line-height: 1.6; }

.v3-page .wt-stpill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 11px; font-weight: 700; border-radius: 99px; padding: 4px 10px;
}
.v3-page .wt-stpill .sd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.v3-page .wt-st-draft  { background: #eef1f6; color: #5b6b84; }
.v3-page .wt-st-fail   { background: #fdeef0; color: #c93a4a; }
.v3-page .wt-st-review { background: #fdf3e2; color: #c07600; }
.v3-page .wt-st-ok     { background: #e5f5ec; color: #178a50; }
.v3-page .wt-st-bad    { background: #fdeaec; color: #c93a4a; }
.v3-page .wt-st-mute   { background: #f1f3f7; color: #8b98ad; }

/* ═══════════════════════════════════════════════════════════════════════
   (Entfallen 01.08.2026) Die Klasse .mockup-warn trug das Banner
   „Darstellungsentwurf — Beispieldaten, nicht die echten Zahlen." auf den
   drei R4-Attrappen-Seiten. Diese Seiten sind vom Netz (Finanz-Diagnose
   2026-08-01, E1/E2), das Partial ist gelöscht — damit hat auch das
   Banner-CSS keinen Träger mehr.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   FINANZEN · ABSCHLUSS — BELEG-LISTE DES MONATS (#774, 30.07.2026)
   „Zu welcher Abbuchung liegt ein Beleg vor?" auf dem Monats-Arbeitsplatz.
   Spec: docs/superpowers/specs/2026-07-30-finanz-kette-monat-bis-prognose.md
   § 3 A / Nachtrag 2. Additiv, append-only, gescoped auf `.v3-page.fa-page`.
   Nutzt bewusst die vorhandenen Bausteine `.fa-table`, `.fa-badge`,
   `.v3-scroll` und `.v3-empty` — hier kommen nur die zwei Kleinteile dazu,
   die es noch nicht gab (Zusammenfassungszeile + Zweitzeile in der Zelle).
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page.fa-page .fa-pad.tight { padding-bottom: 4px; }
.v3-page.fa-page .fa-belegsum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 18px 12px; font-size: 12.5px; color: var(--v3-ink2); font-weight: 600; }
.v3-page.fa-page .fa-belegsum b { color: var(--v3-ink); font-weight: 800; }
.v3-page.fa-page .fa-beleglink { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--v3-brand); text-decoration: none; }
.v3-page.fa-page .fa-beleglink:hover { text-decoration: underline; }
.v3-page.fa-page .fa-belegzweck { font-size: 11px; color: var(--v3-ink3); font-weight: 600; margin-top: 3px; line-height: 1.5; }
.v3-page.fa-page .fa-belegzweck a { color: var(--v3-brand); text-decoration: none; font-weight: 700; }
.v3-page.fa-page .fa-belegzweck a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .v3-page.fa-page .fa-beleglink { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRANSAKTIONS-ARBEITSPLATZ (#771 Welle 1, 30.07.2026)
   Spec: docs/superpowers/specs/2026-07-30-transaktions-arbeitsplatz-konzept.md
   Warteschlange · Akte · Aktion für jede Zahlung, die eine Entscheidung
   von Hand braucht. Alles global unter .v3-page, damit weitere Wellen und
   Bereiche die Bausteine wiederverwenden statt sie erneut zu bauen
   (Reuse vor Neubau). Nur --v3-*-Token, keine neuen Alias-Token.
   Scope: .tx-* — es werden KEINE bestehenden Regeln umgeschrieben.
   ═══════════════════════════════════════════════════════════════════════ */

/* Filter-Kopf: Achsen (Art der Entscheidung · Zeitraum) untereinander */
/* Die EINE Bereichszahl (W1, 21.08.2026) — steht ueber den Art-Chips, damit
   „bin ich fertig?" vor „woran arbeite ich?" beantwortet ist. */
.v3-page .tx-bereichszahl { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.v3-page .tx-bzhinweis { flex: 1; min-width: 220px; font-size: 11.5px; color: var(--v3-ink3); }

.v3-page .tx-filter { margin-bottom: 16px; }
.v3-page .tx-axis { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.v3-page .tx-axis + .tx-axis { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v3-line2); }
.v3-page .tx-axislbl { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; color: var(--v3-ink3); padding-top: 9px; min-width: 150px; }
.v3-page .tx-axis .v3-chips { margin-top: 0; flex: 1; min-width: 0; }
.v3-page .tx-months { margin-top: 10px !important; flex-basis: 100%; }
/* Mobil: Achsenlabel (min-width 150px) und nowrap-Chips passen unter ~700px
   nicht nebeneinander — das Label bekommt die volle Zeile, die Chips brechen
   darunter um; sonst scrollt die ganze Seite quer. */
@media (max-width: 700px) {
  .v3-page .tx-axislbl { min-width: 0; flex-basis: 100%; padding-top: 0; }
}

/* #771 W2 — Zaehlregel unter den Chips: jede Zahl erklaert sich an Ort und
   Stelle (Design-Referenz: klickbar UND erklaert). Zurueckgestellte Faelle und
   der Verbuchen-Block erben Bestands-Bausteine (.v3-callout, .v3-field) — hier
   liegen nur Abstaende, damit im Markup kein style="" noetig ist. */
.v3-page .tx-guide { margin-bottom: 16px; }
.v3-page .tx-zaehlregel { flex-basis: 100%; margin-top: 10px; font-size: 12px; line-height: 1.55; color: var(--v3-ink3); }
.v3-page .tx-zaehlregel b { display: block; font-size: 12.5px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .tx-kvwrap { padding-bottom: 0; }
.v3-page .v3-callout.tx-defer { margin-bottom: 0; }
.v3-page .tx-qrow.tx-deferred .tx-qwho,
.v3-page .tx-qrow.tx-deferred .tx-qpurpose { color: var(--v3-ink3); }
.v3-page .tx-deferbadge { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: var(--v3-line2); color: var(--v3-ink3); border-radius: 5px; padding: 1px 6px; }
.v3-page .tx-defergrund { font-size: 11.5px; color: var(--v3-ink3); margin-top: 2px; }
.v3-page .tx-verbuchen { border-top: 1px solid var(--v3-line2); padding-top: 16px; }
.v3-page .tx-sect .v3-fieldgrid { margin: 6px 0 10px; }

/* Zone 2 — Warteschlange: eine Zeile = ein Fall, die ganze Zeile ist der Link */
.v3-page .tx-queue { display: flex; flex-direction: column; }
.v3-page .tx-qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--v3-line2); text-decoration: none; color: inherit; }
/* #771 W3: .tx-qrow liegt seither in .tx-qitem und ist damit IMMER letztes Kind
   seines Wrappers — der Trenner darf deshalb nur an der letzten Zeile der
   Warteschlange entfallen, nicht an jeder. */
.v3-page .tx-queue > .tx-qrow:last-child,
.v3-page .tx-qitem:last-child > .tx-qrow { border-bottom: 0; }
.v3-page .tx-qrow:hover { background: #fafbfe; }
.v3-page .tx-qrow.on { background: #eef4fe; box-shadow: inset 3px 0 0 var(--v3-brand); }
.v3-page .tx-qmain { min-width: 0; }
.v3-page .tx-qtop { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.v3-page .tx-amt { font-size: 15px; font-weight: 800; color: var(--v3-ink); }
.v3-page .tx-kanal { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--v3-ink2); background: #eef1f6; border-radius: 6px; padding: 2px 7px; }
.v3-page .tx-qdate { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .tx-qwho { font-size: 13px; font-weight: 650; color: var(--v3-ink); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .tx-qpurpose { font-size: 11.5px; color: var(--v3-ink3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .tx-qgo { color: var(--v3-ink3); font-size: 18px; line-height: 1; }
.v3-page .tx-more { font-size: 12px; color: var(--v3-ink3); border-top: 1px solid var(--v3-line2); }
.v3-page .tx-emptylink { margin-top: 16px; }

/* #771 W3 — Personenfilter (Ergaenzung F): der Weg aus der Mitglieder-Akte.
   Bauform = die dokumentierte Filter-Pille (§ 5.5), keine eigene Karte: sichtbar
   und mit einem Klick weg. Eine stille Filterung waere die schlimmste Art, eine
   Zahl zu verkleinern. */
.v3-page .tx-personfilter .x { margin-left: 4px; font-weight: 700; }

/* #771 W3 — Mehrfachauswahl (Ergaenzung G). Die Kaestchen-Vorspalte benutzt
   dieselbe Geometrie wie die dokumentierte Fall-Zeile mit Auswahl
   (.wh-fall > .wh-pick): 34px-Grid-Vorspalte, damit die Kaestchen in allen
   Listen der App an derselben Stelle sitzen. */
.v3-page .tx-qitem { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.v3-page .tx-queue-pick .tx-qitem { grid-template-columns: 34px minmax(0, 1fr); }
.v3-page .tx-qpick { display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--v3-line2); }
.v3-page .tx-qitem:last-child .tx-qpick { border-bottom: 0; }
.v3-page .tx-queue-pick .tx-qrow { padding-left: 4px; }
.v3-page .tx-sammelaktion { font-size: 12.8px; font-weight: 700; color: var(--v3-ink); }

/* Zone 3 — Akte */
.v3-page .tx-akte .v3-cardhead h2 { font-size: 17px; }
.v3-page .tx-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px; margin-bottom: 16px; }
.v3-page .tx-kv > div { min-width: 0; }
.v3-page .tx-kv span { display: block; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; color: var(--v3-ink3); }
.v3-page .tx-kv b { display: block; font-size: 13px; font-weight: 600; color: var(--v3-ink); word-break: break-word; margin-top: 2px; }
.v3-page .tx-sect { margin-top: 18px; }
.v3-page .tx-sectttl { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .7px; text-transform: uppercase; font-weight: 700; color: var(--v3-ink3); margin-bottom: 9px; }
.v3-page .tx-none { font-size: 12.5px; color: var(--v3-ink3); padding: 10px 0; }

/* Beweisleiste der automatischen Erkennung */
.v3-page .tx-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.v3-page .tx-layer { border: 1px solid var(--v3-line); border-radius: 11px; padding: 9px 11px; background: #fbfcfe; min-width: 0; }
.v3-page .tx-layer.hit { border-color: #bcd3f7; background: #e8effd; }
.v3-page .tx-layer .ll { display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase; font-weight: 700; color: var(--v3-ink3); }
.v3-page .tx-layer b { display: block; font-size: 12.5px; font-weight: 700; color: var(--v3-ink); margin: 2px 0 1px; word-break: break-word; }
.v3-page .tx-layer .ld { font-size: 11px; color: var(--v3-ink3); }

/* Kandidat + Wirkungs-Zeile + Aktion */
.v3-page .tx-cand { border: 1px solid var(--v3-line); border-radius: var(--v3-r); padding: 13px 15px; margin-bottom: 10px; background: #fff; }
.v3-page .tx-cand.pri { border-color: #bcd3f7; }
.v3-page .tx-candtop { font-size: 13px; color: var(--v3-ink); }
.v3-page .tx-candsub { font-size: 11.5px; color: var(--v3-ink3); margin-top: 3px; }
.v3-page .tx-wirkung { font-size: 12.5px; line-height: 1.5; color: var(--v3-ink2); background: #fdf3e2; border-left: 4px solid var(--v3-warn); border-radius: 0 10px 10px 0; padding: 9px 12px; margin: 10px 0; }
.v3-page .tx-actform { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
/* Ein Raster mit einem zusammengesetzten Feld bekommt seine eigene Zeile — bis
   27.08.2026 tat es das nur ZUFAELLIG: zweispaltig war es 646 px breit und
   passte neben „Grund" nicht mehr auf die Zeile. Sobald der Topf-Picker die
   Rasterzeile allein nimmt (`.v3-fieldvoll`), schrumpfte der Block auf 473 px —
   und rutschte neben das Grund-Feld, mit einer Leerflaeche darueber. Eine
   Umbruchkante, die aus einer Inhaltsbreite faellt, ist keine Regel; hier steht
   sie als eine. ⚠️ NUR fuer solche Raster: ohne `:has` traf die Regel auch das
   Zurueckstellen-Formular daneben und schob dessen Knopf grundlos in eine
   eigene Zeile — ein Riegel gehoert an den Fall, den er meint. */
.v3-page .tx-actform > .v3-fieldgrid:has(> .v3-fieldvoll) { flex-basis: 100%; }
.v3-page .tx-actform input[type="submit"] { font-family: inherit; }
.v3-page .tx-actform input[type="text"] { flex: 1; min-width: 200px; font-family: inherit; font-size: 13px; color: var(--v3-ink); background: #f6f8fb; border: 1px solid var(--v3-line); border-radius: var(--v3-r-sm); padding: 8px 12px; }

/* ── Topf-Picker (Arbeitsplatz W1, 21.08.2026) ───────────────────────────
   Gruppierte Konten-Auswahl mit Tippfilter und Experten-Schwelle. Die Werkzeug-
   Zeile ist im Markup `hidden` und wird vom Stimulus-Controller eingeblendet —
   ohne JavaScript bleibt die Liste vollstaendig und bedienbar. */
.v3-page .topfpick { display: block; }
.v3-page .topfpick-tools { display: block; }
/* ⚠️ Die Autor-Regel darueber schlaegt das `[hidden]` des Browsers: bis zum
   27.08.2026 stand die Werkzeugzeile deshalb AUCH OHNE JavaScript da und tat
   nichts. Ein Suchfeld, das nicht sucht, ist schlimmer als keines. */
.v3-page .topfpick-tools[hidden] { display: none; }
.v3-page .topfpick-tools .v3-field { margin-bottom: 8px; }
.v3-page .topfpick-fuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: -4px; }
.v3-page .topfpick-zahl { font-size: 11.5px; color: var(--v3-ink3); white-space: nowrap; }
.v3-page .topfpick-experten { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--v3-ink3); cursor: pointer; }
/* ⚠️ DER PICKER STEHT IN FREMDEN CONTAINERN, UND DEREN REGELN GREIFEN TIEFER.
   `.v3-page .v3-fieldgrid label` (0,2,1) faerbt JEDES Label im Raster als
   Feld-Ueberschrift — auch den Experten-Schalter des Pickers (0,2,0), der damit
   in der Zuordnen-Akte VERSALIEN trug und als eigene Feld-Ueberschrift las
   statt als Schalter unter der Auswahl (Browser-Blick 27.08.2026). Der Schalter
   ist keine Ueberschrift; die Fusszeile behaelt ihre Gestalt, wo immer sie
   eingebaut wird. Gilt fuer die Fusszeile, nicht fuer das Raster — die echten
   Feld-Ueberschriften daneben bleiben unangetastet. */
.v3-page .topfpick-fuss label.topfpick-experten {
  display: flex; font-size: 11.5px; font-weight: 500; letter-spacing: normal;
  text-transform: none; margin-bottom: 0;
}
/* Die Herkunftszeile eines Vorschlags. Sie steht SICHTBAR beim Feld, nie in
   einem Tooltip — was hier vorausgewaehlt ist, wird beim naechsten Speichern
   festgeschrieben. */
.v3-page .topfpick-vorschlag { margin: -6px 0 7px; font-size: 12px; color: var(--v3-ink2); border-left: 3px solid var(--v3-brand); padding-left: 9px; }
/* Grau schlaegt gruen: erklaert der Satz, warum es KEINEN Vorschlag gibt,
   sieht er auch nicht aus wie einer. */
.v3-page .topfpick-vorschlag.leer { color: var(--v3-ink3); border-left-color: var(--v3-line); }

/* Mitglieder-Suche in der Akte */
.v3-page .tx-search { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.v3-page .tx-search input[type="search"] { flex: 1; min-width: 200px; font-family: inherit; font-size: 13px; color: var(--v3-ink); background: #f6f8fb; border: 1px solid var(--v3-line); border-radius: var(--v3-r-sm); padding: 8px 12px; }
.v3-page .tx-searchres { margin-top: 10px; border: 1px solid var(--v3-line); border-radius: var(--v3-r); overflow: hidden; }
.v3-page .tx-resrow { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--v3-line2); font-size: 13px; }
.v3-page .tx-resrow:last-child { border-bottom: 0; }
.v3-page .tx-resrow > span { flex: 1; min-width: 0; font-weight: 650; color: var(--v3-ink); }
.v3-page .tx-resrow small { display: block; font-weight: 500; font-size: 11.5px; color: var(--v3-ink3); }
/* Der Grund je Treffer (W1, 21.08.2026): warum ist das ein Treffer? Ohne
   Beleg steht hier nichts — es wird kein Grund erfunden. */
.v3-page .tx-searchhint { margin-top: 7px; font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .tx-resrow small.tx-grund { color: var(--v3-ink2); }

/* Entscheidungs-Protokoll */
.v3-page .tx-hist { list-style: none; margin: 0; padding: 0; }
.v3-page .tx-hist li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--v3-line2); font-size: 12.5px; }
.v3-page .tx-hist li:last-child { border-bottom: 0; }
.v3-page .tx-hist li > span { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; min-width: 110px; }
.v3-page .tx-hist li b { font-weight: 650; color: var(--v3-ink); }
.v3-page .tx-hist li small { color: var(--v3-ink3); font-size: 11.5px; }
/* Kandidaten-Initialen: fester Ton (keine Design-Farbe per style="" in der View) */
.v3-page .tx-cand .mav { background: linear-gradient(140deg, #3f7ae6, var(--v3-brand)); }

/* ══════════════════════════════════════════════════════════════════════════
   KOMMUNIKATIONS-COCKPIT — Kalender kräftiger + klickbar, Puls-Fußzeile
   (Carsten-Feedback 30.07.2026: „Kalender erscheint sehr blass; soll klickbar
   sein". Append-only-Ergänzung zum kc-Block ab Zeile 796 — die bestehenden
   Regeln bleiben unverändert, hier stehen nur die kräftigeren Werte, die sie
   überschreiben, plus zwei neue Bausteine. Leitfarben aus --v3-*/--kc-*; die
   Tint-Werte stehen inline wie im kc-Bestandsblock ab Zeile 829 — bewusst KEIN
   neues Alias-Token für eine Farbe, die es schon gibt.)
   ══════════════════════════════════════════════════════════════════════════ */

/* Tageszelle ist jetzt ein Link — Karten-Optik statt fast unsichtbarer Fläche. */
.v3-page a.kc-cald { text-decoration: none; color: inherit; background: var(--v3-card); border-color: #dbe2ec; transition: border-color .12s, box-shadow .12s, transform .12s; }
.v3-page a.kc-cald:hover { border-color: var(--v3-brand); box-shadow: 0 6px 16px -8px rgba(30, 86, 200, .45); transform: translateY(-1px); }
.v3-page a.kc-cald:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
/* „Heute" trägt die Markenfarbe statt eines hellblauen Hauchs. */
.v3-page a.kc-cald.today { background: #eaf1fe; border-color: var(--v3-brand); box-shadow: inset 3px 0 0 var(--v3-brand); }
.v3-page a.kc-cald.today .d { color: var(--v3-brand); font-weight: 800; }
/* Nachbarmonat bleibt zurückhaltend, aber lesbar (vorher opacity .55). */
.v3-page a.kc-cald.mut { background: #f2f4f8; opacity: .8; }
/* Tage mit Inhalt heben sich vom leeren Tag ab. */
.v3-page a.kc-cald.has-ev .d { color: var(--v3-ink); }
.v3-page .kc-cald .d { font-size: 11.5px; color: var(--v3-ink2); }

/* Einträge: satter Ton, farbige Kante links, dunklere Schrift. */
.v3-page .kc-ev { font-size: 11px; font-weight: 700; padding: 4px 7px; border-left: 3px solid currentColor; border-radius: 5px; }
.v3-page .kc-ev.mail { background: #d9e5fb; color: #14408f; } .v3-page .kc-ev.mail svg { stroke: #14408f; }
.v3-page .kc-ev.wa { background: #d4eede; color: #0f6b3d; } .v3-page .kc-ev.wa svg { stroke: #0f6b3d; }
.v3-page .kc-ev.event { background: #e6e0fb; color: #52439f; } .v3-page .kc-ev.event svg { stroke: #52439f; }
.v3-page .kc-ev.tick { background: #fbe8c9; color: #8f5700; } .v3-page .kc-ev.tick svg { stroke: #8f5700; }
.v3-page .kc-ev.hb { background: #cfeeec; color: #0a6b6a; } .v3-page .kc-ev.hb svg { stroke: #0a6b6a; }
.v3-page .kc-evm { color: var(--v3-ink2); font-size: 9.5px; }
/* „+N weitere" — macht sichtbar, dass die Zelle bei 3 Einträgen abschneidet. */
.v3-page .kc-evmore { margin-top: auto; padding: 2px 6px 0; font-size: 10px; font-weight: 700; color: var(--v3-brand); }

/* Legende: kräftigere Punkte, damit die Zuordnung Farbe→Kanal trägt. */
.v3-page .kc-calleg i { width: 10px; height: 10px; border-radius: 3px; }
.v3-page .kc-calleg { color: var(--v3-ink); }

/* Fußzeile „Puls der Woche" — Sprung an die drei Arbeitsorte. */
.v3-page .kc-pulsefoot { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--v3-line); font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .kc-pulsefoot a { color: var(--v3-brand); font-weight: 600; text-decoration: none; }
.v3-page .kc-pulsefoot a:hover { text-decoration: underline; }

/* Klickbare KPI-Kachel — global unter .v3-page (Design-Referenz §5.3: „eine tote
   Kachel gilt als Fehler"). Bisher gab es das Muster nur als .s3-kpilink im
   Sammellauf-Namensraum (.v3-page.s3-w3) und damit nirgends sonst nutzbar. */
.v3-page a.ab-kpi { text-decoration: none; color: inherit; transition: border-color .12s, background .12s, box-shadow .12s; }
.v3-page a.ab-kpi:hover { border-color: var(--v3-brand); background: #f4f7ff; box-shadow: 0 6px 16px -10px rgba(30, 86, 200, .5); }
.v3-page a.ab-kpi:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }

/* Jahres-Eingabe im Seitenkopf des Kommunikationskalenders. */
.v3-page .kal-yearform { display: inline-flex; align-items: center; gap: 8px; }
.v3-page .kal-yearform input[type="number"] { width: 88px; height: 34px; padding: 0 10px; border: 1px solid var(--v3-line); border-radius: var(--v3-r-sm); background: var(--v3-card); color: var(--v3-ink); font-size: 13px; font-weight: 600; }
.v3-page .kal-yearform input[type="number"]:focus { outline: none; border-color: var(--v3-brand); box-shadow: 0 0 0 3px rgba(30, 86, 200, .14); }

/* Quellenzeile im Seitenkopf des Kommunikationskalenders — eine Stufe kleiner als
   der .sub-Satz, damit der Kopf EINEN .sub behält (Design-Referenz §2). */
.v3-page .v3-pagehead .sub .kal-quelle { display: block; margin-top: 3px; font-size: 11.5px; color: var(--v3-ink3); }

/* ══════════════════════════════════════════════════════════════════════════
   Freigabe-Postfach (/datenmanagement/freigaben) — Bausteine, die es im
   Baukasten noch nicht gab. Namensraum `fg-`, additiv, nur unter .v3-page.
   Alles andere (Karte, Tabs, Tabelle, mcell, ab-badge, v3-empty, v3-pager)
   kommt unveraendert aus dem gemeinsamen Baukasten.
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Name in der Personen-Zelle ist ein Profil-Link — Tailwind-Preflight
   setzt a{color:inherit}, ohne diese Regel ist er nicht als Link erkennbar. */
.v3-page .mcell b a { color: var(--v3-brand); text-decoration: none; }
.v3-page .mcell b a:hover { text-decoration: underline; }

/* Vorher → Nachher in einer Zelle: alt gedaempft, neu betont. */
.v3-page .fg-diff { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.v3-page .fg-diff .alt { color: var(--v3-ink3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--v3-ink3) 60%, transparent); }
.v3-page .fg-diff .arr { color: var(--v3-ink3); font-weight: 700; }
.v3-page .fg-diff .neu { color: var(--v3-ok); font-weight: 650; }
.v3-page .fg-diff .same { color: var(--v3-ink2); }
.v3-page .fg-diff .same small { color: var(--v3-ink3); font-size: 10.5px; }

/* Metazeile unter einem Chip / in einer schmalen Spalte. */
.v3-page .fg-meta { font-size: 11.5px; color: var(--v3-ink3); margin-top: 3px; }

/* Aktionspaar Bestaetigen/Ablehnen — bleibt auch mobil beieinander. */
.v3-page .fg-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.v3-page .v3-empty .fg-actions { justify-content: center; margin-top: 14px; }
.v3-page .fg-actions form { margin: 0; }
/* In der Tabelle bleibt das Aktionspaar nebeneinander — bei Platzmangel
   scrollt .v3-scroll horizontal, statt die Knoepfe untereinander zu stapeln. */
.v3-page .v3-table .fg-actions { flex-wrap: nowrap; }

/* Kompakte Variante des vorhandenen Hinweis-Kastens fuer den Einsatz INNERHALB
   einer Tabellenzeile/Karte. Keine eigene Farbpalette — erbt .v3-callout(.warn). */
.v3-page .v3-callout.sm { margin: 6px 0 0; padding: 7px 10px; font-size: 11.5px; line-height: 1.45; }

/* Selbstauskuenfte: je Eingang eine eigene Sektion in der Tab-Karte. */
.v3-page .fg-list { padding: 4px 0; }
.v3-page .fg-sub { padding: 14px 18px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .fg-sub:last-child { border-bottom: 0; }
.v3-page .fg-subhead { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.v3-page .fg-subhead .fg-actions { margin-left: auto; }
.v3-page .fg-deeplink { font-size: 12px; font-weight: 600; color: var(--v3-brand); white-space: nowrap; }
.v3-page .fg-deeplink.muted { color: var(--v3-ink3); }

/* ═══════════════════════════════════════════════════════════════════════════
   W0-FUNDAMENT — die sieben gemeinsamen Bauteile des Datenmanagement-Neubaus
   (#775, Welle W0, 01.08.2026)

   Spec:    docs/superpowers/specs/2026-07-31-datenmanagement-vision.md
   Diagnose:docs/superpowers/2026-07-30-datenmanagement-diagnose.md §3.3 (B1–B7)
   Mockup:  docs/mockups/2026-07-31-datenmanagement-neubau-v3.html

   ALLES global unter `.v3-page`, damit jeder Bereich die Bausteine
   wiederverwendet statt sie erneut zu bauen (Reuse vor Neubau, Design-Referenz
   §7.2). KEINE neue Token-Insel — ausschliesslich --v3-*.

   Partials dazu:
     B1 shared/_v3_page_head   (.v3-pagehead .frage, .v3-hpill.warn/.bad/.idle)
     B2 shared/_v3_kpi_row     (a.s3-kpilink, .ab-kpi .nsm)
     B3 shared/_lauf_karte     (.lks, .lk)
     B5 shared/_doppelzahl     (.dz)
     B6 shared/_fall_zeile     (.heute-row)
   B4+B7 sind textlich (config/datenmanagement_register.yml) und brauchen kein CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── B1: Antonina-Zeile im Seitenkopf ──────────────────────────────────────
   EIN Satz, welche Frage die Seite beantwortet. Ruhiger als der Untertitel,
   damit sie erklaert statt zu konkurrieren. */
.v3-page .v3-pagehead .frage {
  margin-top: 5px; font-size: 12px; font-weight: 650; color: var(--v3-ink2);
  background: #f7f9fc; border: 1px solid var(--v3-line2); border-radius: 9px;
  padding: 5px 10px; display: inline-block; max-width: 70ch;
}

/* ── BROTKRUMEN (global, Rundgang Tag 3, 06.08.2026) ───────────────────────
   BEFUND: `.crumb` war dreimal definiert — einmal je Bereichs-Klasse
   (`.r1-prof` Profil, `.r5-akte` Event-Akte, `.ver-r6--event_loop`), jedesmal
   dieselbe Sache. Wer eine vierte Seite mit Rueckweg baute, musste eine vierte
   Definition schreiben oder auf ein `style=""` ausweichen (genau das war auf
   der Klassen-Seite passiert). Hier steht sie EINMAL unter `.v3-page`. Die
   drei bereichsspezifischen Faelle bleiben unveraendert stehen: sie sind
   spezifischer und gewinnen, es aendert sich also nirgends etwas — sie koennen
   spaeter still entfallen. */
.v3-page .crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--v3-ink3); margin-bottom: 14px;
}
.v3-page .crumb a { color: var(--v3-brand); text-decoration: none; }
.v3-page .crumb a:hover { text-decoration: underline; }
.v3-page .crumb svg { width: 13px; height: 13px; stroke: var(--v3-ink3); fill: none; stroke-width: 2; }

/* Der Loesch-Weg der Abschlussklasse steht bewusst UNTER dem Kopf, nicht neben
   „Bearbeiten": Loeschen und Bearbeiten sahen dort gleich aus (Q3). */
.v3-page .gc-loeschen { margin: -6px 0 14px; }
.v3-page .gc-loeschen form { display: inline-block; }

/* ── FILTER-AUFKLAPPER (Rundgang Tag 3, 06.08.2026) ────────────────────────
   Der „Weitere Filter"-Aufklapper der Mitgliederliste war komplett von Hand
   gestaltet (acht style="", darunter viermal dieselbe 120-Zeichen-Kette fuer
   ein Auswahlfeld). Die Felder darin sind jetzt `.v3-field` (B8); nur die
   Geometrie des Aufklappers selbst braucht eigene Regeln. */
.v3-page details.v3-filterdrop { display:inline-block; position:relative; }
.v3-page details.v3-filterdrop > summary { list-style:none; cursor:pointer; }
.v3-page details.v3-filterdrop > summary::-webkit-details-marker { display:none; }
.v3-page .v3-filterpanel {
  position:absolute; left:0; z-index:20; margin-top:8px; padding:14px; min-width:250px;
}
.v3-page .v3-filterpanel .v3-field:last-of-type { margin-bottom:14px; }

/* ── B1: Stand-Zeile im Seitenkopf (Q19, Rundgang Tag 3, 06.08.2026) ───────
   „Jede Seite sagt, von wann ihre Daten sind." Die leiseste Zeile im Kopf:
   sie soll erreichbar sein, wenn man ihr misstraut — nicht um Aufmerksamkeit
   mit Titel, Untertitel und Frage konkurrieren. Deshalb klein, grau, ohne
   Rahmen. Optional: fehlt `stand:`, entsteht kein Element. */
.v3-page .v3-pagehead .v3-stand {
  margin-top: 5px; font-size: 11px; color: var(--v3-ink3); letter-spacing: .1px;
}

/* Kehraus 06.08.2026: Die Stand-Zeile gilt fuer JEDE Seite (Q19) — auch fuer
   die, die ihren Kopf (noch) nicht aus dem gemeinsamen Bauteil bauen. Die
   Regel oben war an `.v3-page .v3-pagehead` gebunden; auf dem Community-
   Cockpit (`.stift`) waere die Zeile unformatiert erschienen. Basis-Regel,
   die die spezifischere oben nicht ueberschreibt. */
.v3-stand {
  margin-top: 5px; font-size: 11px; color: #8b98ad; letter-spacing: .1px;
}

/* ── B1: Status-Chip — EINE (helle) Farbwelt ───────────────────────────────
   `.v3-hpill` war bisher nur gruen. Die drei Modifier machen daraus den
   vollstaendigen Kopf-Chip fuer helle Koepfe und beenden den Zwang, auf
   `shared/_job_health` (dunkel-optimiert, Diagnose M5) auszuweichen. */
.v3-page .v3-hpill.warn { color: var(--v3-warn); background: #fdf3e2; }
.v3-page .v3-hpill.warn .hd { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.v3-page .v3-hpill.bad { color: var(--v3-bad); background: #fdeaec; }
.v3-page .v3-hpill.bad .hd { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.16); }
.v3-page .v3-hpill.idle { color: var(--v3-ink2); background: #eef1f6; }
.v3-page .v3-hpill.idle .hd { background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203,213,225,.3); }

/* ── B2: klickbare KPI-Kachel ──────────────────────────────────────────────
   `.s3-kpilink` gab es seit dem Sammellauf-Umbau, war aber auf `.s3-w3`
   gescopet und wurde in KEINER View benutzt. Hier global gestellt, damit
   jede KPI-Kachel ein Link sein kann — 96 % der Kacheln sind heute tot
   (Klick-Audit §0). Die alte `.s3-w3`-Regel bleibt unangetastet. */
.v3-page a.s3-kpilink { text-decoration: none; color: inherit; display: block;
  transition: border-color .12s, background .12s; }
.v3-page a.s3-kpilink:hover { border-color: var(--v3-brand); background: #fbfcff; }
.v3-page a.s3-kpilink:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }

/* ── B2: North-Star-Fusszeile einer Kachel (Soll + Trend) ──────────────── */
.v3-page .ab-kpi .nsm {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--v3-line); font-size: 11.5px; font-weight: 700;
  color: var(--v3-ink3); flex-wrap: wrap;
}
.v3-page .ab-kpi .nsm .soll { color: var(--v3-ink2); }
.v3-page .ab-kpi .nsm .trend { margin-left: auto; font-weight: 800; }
.v3-page .ab-kpi .nsm .trend.up { color: var(--v3-ok); }
.v3-page .ab-kpi .nsm .trend.down { color: var(--v3-bad); }
.v3-page .ab-kpi .nsm .trend.flat { color: var(--v3-ink3); }

/* ── F4 (28.08.2026): DER ERKLAERTEXT STEHT HINTER DEM HINWEIS (§ 0 Nr. 3) ──
   `erklaerung: :hinweis` in `shared/_v3_kpi_row` nimmt die Zaehlregel aus dem
   Kachelkoerper (`.kd`) und legt sie in den `title` der Kachel. Damit das
   SICHTBAR ist, traegt die Beschriftung ein kleines `i`.
   ⚠️ Ein MARKER, kein Knopf: die Kachel ist selbst ein `<a>`, und der
   `info_hint`-Helfer rendert ein `<button>` — ein Knopf im Link waere
   ungueltiges Markup und haette den Klick zerlegt. Deshalb hier ein `<span>`
   mit `aria-hidden`; vorgelesen wird die Zaehlregel ueber den `title` des
   Links, also genau einmal. */
.v3-page .ab-kpi .kl .kih {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 5px; border-radius: 50%;
  background: var(--v3-line); color: var(--v3-ink3);
  font-size: 9px; font-weight: 800; line-height: 1;
  text-transform: none; letter-spacing: 0; vertical-align: middle;
}
.v3-page a.ab-kpi:hover .kl .kih { background: var(--v3-brand); color: #fff; }

/* ── B3: Lauf-Karte ────────────────────────────────────────────────────────
   „Letzter Lauf: <Zeit> · Ergebnis · Beispiele · Absprung." Der linke Rand
   traegt den Ton; ohne Modifier ist er gruen (Lauf lief sauber). */
.v3-page .lks { display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); }
.v3-page .lk {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-left: 4px solid #22c55e; border-radius: 14px; padding: 13px 15px;
  box-shadow: var(--v3-shadow);
}
.v3-page .lk.warn { border-left-color: #f59e0b; }
.v3-page .lk.bad { border-left-color: #ef4444; }
.v3-page .lk.idle { border-left-color: #cbd5e1; }
.v3-page .lk .lkh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v3-page .lk .lkt { font-size: 13.5px; font-weight: 750; }
.v3-page .lk .lkw { margin-left: auto; font-size: 11.5px; font-weight: 650;
  color: var(--v3-ink3); font-variant-numeric: tabular-nums; }
.v3-page .lk .lkr { margin-top: 6px; font-size: 19px; font-weight: 800;
  letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.v3-page .lk .lkr small { font-size: 12px; font-weight: 650; color: var(--v3-ink2);
  letter-spacing: 0; margin-left: 6px; }
.v3-page .lk .lkr .delta { margin-left: 7px; font-size: 12.5px; font-weight: 700; }
/* „up" = der Bestand waechst (schlecht), „down" = er schrumpft (gut). */
.v3-page .lk .lkr .delta.up { color: var(--v3-bad); }
.v3-page .lk .lkr .delta.down { color: var(--v3-ok); }
.v3-page .lk .lkr .delta.flat { color: var(--v3-ink3); }
.v3-page .lk .lkbsp { margin-top: 5px; font-size: 12px; color: var(--v3-ink2); line-height: 1.5; }
.v3-page .lk .lkbsp .bsp { display: block; margin-top: 3px; color: var(--v3-ink3); }
.v3-page .lk .lkf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.v3-page .lk .lkq { font-size: 10.5px; font-weight: 650; color: var(--v3-ink3); letter-spacing: .2px; }

/* ── B5: Doppelzahl „N Befunde bei M Mitgliedern" ────────────────────────── */
.v3-page .dz { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v3-page .dz .dzn { font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.v3-page .dz .dzb { font-size: 13px; font-weight: 600; color: var(--v3-ink2); }
.v3-page .dz .dzb b { color: var(--v3-ink); }
.v3-page a.dz-link { text-decoration: none; color: inherit; border-radius: 10px; }
.v3-page a.dz-link:hover .dzn { color: var(--v3-brand); }
.v3-page a.dz-link:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 3px; }

/* ── B6: Fall-Zeile mit Person ─────────────────────────────────────────────
   Standard GESTAPELT (Person+Hebel, Grund, Aktionen) — so bleibt die Zeile
   auch in einer schmalen Spalte lesbar. `.wide` schaltet auf vierspaltig,
   wenn die Zeile die volle Seitenbreite hat. */
.v3-page .heute-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "person hebel" "grund grund" "akt akt";
  gap: 9px 14px; padding: 13px 18px; align-items: center;
  border-bottom: 1px solid var(--v3-line2);
}
.v3-page .heute-row:last-child { border-bottom: 0; }
.v3-page .heute-row:hover { background: #fafbfe; }
.v3-page .heute-row > .fz-person { grid-area: person; display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; min-width: 0; }
.v3-page .heute-row > .grund { grid-area: grund; font-size: 12.8px; line-height: 1.45;
  color: var(--v3-ink); }
.v3-page .heute-row > .hebel { grid-area: hebel; align-self: start; text-align: right;
  font-size: 14px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.v3-page .heute-row > .akt { grid-area: akt; display: flex; gap: 6px;
  justify-content: flex-end; flex-wrap: wrap; }
.v3-page .heute-row .grund .quelle {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  color: var(--v3-ink3); background: #f1f4f8; border-radius: 6px; padding: 2px 7px;
}
.v3-page .heute-row .hebel small { display: block; font-size: 10.5px; font-weight: 700;
  color: var(--v3-ink3); text-transform: uppercase; letter-spacing: .3px; }
.v3-page .heute-row .hebel.geld { color: var(--v3-bad); }
.v3-page .heute-row .hebel.risk { color: var(--v3-warn); font-size: 12.5px; }
.v3-page .heute-row.wide {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 128px 208px;
  grid-template-areas: "person grund hebel akt"; gap: 14px;
}
@media (max-width: 1080px) {
  .v3-page .heute-row.wide {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "person hebel" "grund grund" "akt akt"; gap: 9px 14px;
  }
}
@media (max-width: 520px) {
  .v3-page .heute-row, .v3-page .heute-row.wide {
    grid-template-columns: 1fr;
    grid-template-areas: "person" "hebel" "grund" "akt";
  }
  .v3-page .heute-row > .hebel { text-align: left; }
  .v3-page .heute-row > .akt { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   W1-BEFUNDE — die verschmolzene Seite „Befunde" (#775, Welle W1, 01.08.2026)

   Spec:    docs/superpowers/specs/2026-07-31-datenmanagement-vision.md
   Diagnose:docs/superpowers/2026-07-30-datenmanagement-diagnose.md §2.4/§3.2
   Mockup:  docs/mockups/2026-07-31-datenmanagement-neubau-v3.html (Seite 2)
   Views:   app/views/datenmanagement/befunde/*

   Hier steht AUSSCHLIESSLICH, was der Baukasten (§4 der Design-Referenz) und
   das W0-Fundament noch nicht hergeben: die Gruppen-Karten des Ueberblicks,
   die Fall-Zeile mit Auswahl-Kaestchen und die Detail-Karte. Alles global
   unter `.v3-page`, nur --v3-*-Token, keine Bereichs-Insel.

   Die Detail-Karte trug bis W1 den Praefix `dp-` (Datenpflege) und lebte in
   einem <style>-Block IN der View (78 Zeilen, Diagnose §1.2 M4). Sie ist
   hierher gezogen und heisst jetzt `bf-`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Modus-Umschalter (Ueberblick | Arbeitsliste) mit Doppelzahl rechts ──── */
.v3-page .bf-modi { margin-bottom: 16px; }
.v3-page .bf-modi .v3-tabs { padding: 0 16px; }
.v3-page .bf-modisum { margin-left: auto; padding: 6px 0; }
.v3-page .bf-modisum .dz .dzn { font-size: 18px; }
.v3-page .bf-modisum .dz .dzb { font-size: 12px; }

/* ── Ueberblick: eine Karte je Befund-Gruppe ─────────────────────────────── */
.v3-page .bf-gruppen {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.v3-page .bf-gruppe { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.v3-page .bf-gkopf { display: flex; align-items: flex-start; gap: 10px; }
.v3-page .bf-gtitel { font-size: 14.5px; font-weight: 750; color: var(--v3-ink); }
.v3-page .bf-gsub { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--v3-ink3); }
.v3-page .bf-gkopf .ab-badge { margin-left: auto; flex: 0 0 auto; }

.v3-page .bf-typen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v3-line2); }
.v3-page .bf-typen li { border-bottom: 1px solid var(--v3-line2); }
.v3-page .bf-typen li:last-child { border-bottom: 0; }
.v3-page a.bf-typ {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 2px;
  text-decoration: none; color: inherit; font-size: 12.8px;
}
.v3-page a.bf-typ:hover { background: #fafbfe; }
.v3-page a.bf-typ:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .bf-typname { flex: 1; min-width: 0; color: var(--v3-ink2); font-weight: 600; }
.v3-page a.bf-typ:hover .bf-typname { color: var(--v3-brand); }
.v3-page .bf-typzahl { font-weight: 800; color: var(--v3-ink); }
.v3-page .bf-typbei { font-size: 11px; color: var(--v3-ink3); font-variant-numeric: tabular-nums; }

.v3-page .bf-gfuss {
  margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--v3-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.v3-page .bf-gempf { flex: 1; min-width: 160px; font-size: 11.5px; line-height: 1.45; color: var(--v3-ink3); }

/* ── Ueberblick: Klartext-Spalte der Haeufigsten-Tabelle ─────────────────── */
.v3-page .bf-klartext { color: var(--v3-ink2); font-size: 12.5px; line-height: 1.45; max-width: 62ch; }
.v3-page .bf-klartext .bf-empf { display: block; margin-top: 3px; color: var(--v3-brand-deep); font-weight: 600; }

/* ── Arbeitsliste: Filterzeile ───────────────────────────────────────────── */
.v3-page .bf-filter { padding-bottom: 12px; }
.v3-page .bf-filter .v3-chips { margin-top: 0; }
.v3-page .bf-filter .v3-chip .num { font-weight: 800; color: var(--v3-ink3); }
.v3-page .bf-filter .v3-chip.on .num { color: var(--v3-brand); }
.v3-page .bf-aktivfilter { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--v3-line); }
.v3-page .bf-typwahl { margin-left: auto; }
.v3-page .bf-typform { margin: 0; }
.v3-page .bf-select {
  border: 1px solid var(--v3-line); border-radius: 9px; padding: 7px 10px;
  font-size: 12.5px; font-family: inherit; color: var(--v3-ink2);
  background: #fff; max-width: 300px; cursor: pointer;
}
.v3-page .bf-treffer { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--v3-line2); }
.v3-page .bf-treffer .dz .dzn { font-size: 22px; }

/* ── Arbeitsliste: Fall-Zeile mit Auswahl-Kaestchen ──────────────────────── */
.v3-page .bf-liste { border-top: 1px solid var(--v3-line); }
.v3-page .bf-fall { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
.v3-page .bf-fall:hover { background: #fafbfe; }
.v3-page .bf-fall.auf { background: #f4f8ff; }
/* „kein Kanal mehr" faellt ins Auge — das ist der haerteste Fall der Liste. */
.v3-page .bf-fall.ohne-kanal { background: #fdf6f7; }
.v3-page .bf-fall.ohne-kanal:hover { background: #fbeef0; }
.v3-page .bf-pick { display: flex; justify-content: center; padding: 18px 0 0; cursor: pointer; }
.v3-page .bf-fallzeile { grid-column: 2; min-width: 0; }
.v3-page .bf-fallzeile .heute-row { padding-left: 0; padding-right: 18px; }
.v3-page .bf-fall .bf-auf { cursor: pointer; }
.v3-page .bf-keinperson {
  font-size: 12.5px; font-weight: 650; color: var(--v3-ink3);
  background: #f1f4f8; border-radius: 8px; padding: 6px 10px;
}
.v3-page .bf-detail { grid-column: 1 / -1; background: #f6f8fc; border-bottom: 2px solid var(--v3-line); }
.v3-page .bf-detail-laden { padding: 22px; color: var(--v3-ink3); font-size: 13px; }

/* ── Arbeitsliste: Fuss (Ausleitung, Kampagne, Blaetterung) ──────────────── */
.v3-page .bf-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--v3-line);
}
.v3-page .bf-fussaktionen { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v3-page .bf-fuss .v3-pager { margin-left: auto; }
.v3-page .bf-hinweis {
  font-size: 11.5px; font-weight: 650; color: var(--v3-ink3);
  background: #f1f4f8; border: 1px solid var(--v3-line); border-radius: 99px; padding: 5px 12px;
}
.v3-page .bf-allfilter { display: inline-flex; align-items: center; gap: 8px; }

/* ── Arbeitsliste: fertige Auswahlen (Presets) ───────────────────────────── */
.v3-page .bf-presets { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.v3-page .bf-preset {
  border: 1px solid var(--v3-line); border-radius: 11px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.v3-page .bf-presetname { font-size: 13.5px; font-weight: 700; color: var(--v3-ink); }
.v3-page .bf-presettext { flex: 1; font-size: 12px; line-height: 1.4; color: var(--v3-ink3); }

/* ── Detail-Karte einer Fall-Zeile (aus datenpflege.html.erb hierher) ────── */
.v3-page .bf-detailkarte { padding: 14px 16px 18px; }
.v3-page .bf-dt-empty, .v3-page .bf-dt-note { color: var(--v3-ink3); font-size: 13px; padding: 8px 2px; }
.v3-page .bf-dt-card { background: #fff; border: 1px solid var(--v3-line); border-radius: 12px; padding: 14px 16px; }
.v3-page .bf-dt-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.v3-page .bf-dt-head b { font-size: 14.5px; color: var(--v3-ink); }
.v3-page .bf-dt-sub { display: block; font-size: 12px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .bf-dt-links { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.v3-page .bf-dt-lnk { color: var(--v3-brand); font-weight: 650; font-size: 12.5px; text-decoration: none; }
.v3-page .bf-dt-lnk:hover { text-decoration: underline; }
.v3-page .bf-dt-row { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--v3-line2); font-size: 13px; }
.v3-page .bf-dt-k { width: 110px; flex: 0 0 110px; color: var(--v3-ink3); font-size: 12px; padding-top: 2px; }
.v3-page .bf-dt-v { color: var(--v3-ink2); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.v3-page .bf-dt-score { font-size: 12px; color: var(--v3-ink3); }
.v3-page .bf-dt-hopeless { font-size: 11.5px; font-weight: 700; color: var(--v3-bad); background: #fdeaec; border-radius: 99px; padding: 2px 9px; }

/* Kanal-Ampel: Icon-Reihe (Liste) und Chip-Reihe (Detail-Karte) */
.v3-page .bf-ampel { display: inline-flex; gap: 3px; align-items: center; }
.v3-page .bf-amp { font-size: 12px; line-height: 1; }
.v3-page .bf-amp-grey { opacity: .32; filter: grayscale(1); }
.v3-page .bf-ampchip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650;
  border-radius: 99px; padding: 2px 9px; border: 1px solid var(--v3-line);
}
.v3-page .bf-ampchip.bf-amp-green { background: #e9f7ef; border-color: #b6e2c8; color: var(--v3-ok); }
.v3-page .bf-ampchip.bf-amp-red { background: #fdeaec; border-color: #f2c0c6; color: var(--v3-bad); }
.v3-page .bf-ampchip.bf-amp-grey { background: #f2f4f7; border-color: var(--v3-line); color: var(--v3-ink3); opacity: 1; filter: none; }

/* Finanz-Zeile der Detail-Karte */
.v3-page .bf-fin-chip { font-size: 12px; color: var(--v3-ink2); background: #f2f5fb; border: 1px solid var(--v3-line); border-radius: 8px; padding: 2px 9px; }
.v3-page .bf-fin-chip b { font-variant-numeric: tabular-nums; }
.v3-page .bf-fin-chip.warn { background: #fff4e6; border-color: #f0d9ac; color: #9a5b00; }
.v3-page .bf-fin-chip.free { background: #eef6ff; border-color: #cfe0f6; color: var(--v3-brand); }
.v3-page .bf-fin-cohort { font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 2px 10px; }
.v3-page .bf-fin-cohort.nz { background: #fdeaec; color: var(--v3-bad); }
.v3-page .bf-fin-cohort.tz { background: #fff4e6; color: #9a5b00; }
.v3-page .bf-fin-cohort.ok { background: #e9f7ef; color: var(--v3-ok); }

/* WHU-Unterschiede + Klaer-Wizard in der Detail-Karte */
.v3-page .bf-dt-whuhdr { margin: 14px 0 8px; font-size: 12px; font-weight: 700; color: var(--v3-ink2); text-transform: uppercase; letter-spacing: .03em; }
.v3-page .bf-dt-hintbox { border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.45; margin: 8px 0; }
.v3-page .bf-dt-hintbox.add { background: #eef6ff; border: 1px solid #cfe0f6; color: #123f8f; }
.v3-page .bf-dt-hintbox.sync { background: #fff4e6; border: 1px solid #f0d9ac; color: #7a4a00; }
.v3-page .bf-dt-wizard { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 16px; }
.v3-page .bf-wz-form { margin: 0; display: inline; }
.v3-page .bf-wz-secondary { background: none; border: none; color: var(--v3-ink3); font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 0; }

@media (max-width: 640px) {
  .v3-page .bf-fall { grid-template-columns: 30px minmax(0, 1fr); }
  .v3-page .bf-typwahl { margin-left: 0; width: 100%; }
  .v3-page .bf-select { max-width: 100%; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   W2-ERGAENZEN — die verschmolzene Seite „Ergänzen & Läufe" (#775, Welle W2)

   Spec:    docs/superpowers/specs/2026-07-31-datenmanagement-vision.md (Stufe 1)
   Diagnose:docs/superpowers/2026-07-30-datenmanagement-diagnose.md §2.1/§2.2/§3.2
   Mockup:  docs/mockups/2026-07-31-datenmanagement-neubau-v3.html (Seite 3)
   Views:   app/views/datenmanagement/ergaenzen/*

   Hier steht AUSSCHLIESSLICH, was Baukasten (§4 der Design-Referenz) und
   W0-Fundament noch nicht hergeben: die Abdeckungs-Zeilen, die Guthaben-Karte
   und die Schutz-Liste. Lauf-Karten (.lks/.lk), KPI-Reihe und Seitenkopf
   kommen unveraendert aus W0. Nur --v3-*-Token, keine Bereichs-Insel.

   Die Vorgaenger-Seite (datenmanagement_v3/anreicherung) lebte auf der
   CSS-Insel `.dm-anreich` mit eigenen Token-Namen — sie ist mit der View
   geloescht.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Callout-Verweise (mehrere wartende Laeufe nebeneinander) ─────────────── */
.v3-page .v3-callout .eg-callout-link {
  display: inline-block; margin-left: 10px; font-weight: 700;
  color: var(--v3-brand); text-decoration: none;
}
.v3-page .v3-callout .eg-callout-link:hover { text-decoration: underline; }
.v3-page .eg-hinweis { margin-top: 14px; }

/* ── „Was wir schon wissen": eine klickbare Zeile je Feld ─────────────────── */
.v3-page .eg-abdeckung { display: flex; flex-direction: column; gap: 2px; }
.v3-page a.eg-abrow {
  display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(0, 2fr) 56px 92px;
  align-items: center; gap: 12px; padding: 7px 6px; border-radius: 9px;
  text-decoration: none; color: inherit; font-size: 12.8px;
}
.v3-page a.eg-abrow:hover { background: #fafbfe; }
.v3-page a.eg-abrow:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .eg-ablabel { font-weight: 650; color: var(--v3-ink2); min-width: 0; }
.v3-page a.eg-abrow:hover .eg-ablabel { color: var(--v3-brand); }
.v3-page .eg-abbar { height: 8px; border-radius: 99px; background: var(--v3-line2); overflow: hidden; }
.v3-page .eg-abbar i { display: block; height: 100%; border-radius: 99px; background: var(--v3-brand); }
.v3-page .eg-abbar i.ok { background: #22c55e; }
.v3-page .eg-abbar i.warn { background: #f59e0b; }
.v3-page .eg-abbar i.bad { background: #ef4444; }
.v3-page .eg-abpct { text-align: right; font-weight: 800; }
.v3-page .eg-abpct.ok { color: var(--v3-ok); }
.v3-page .eg-abpct.warn { color: var(--v3-warn); }
.v3-page .eg-abpct.bad { color: var(--v3-bad); }
.v3-page .eg-abluecke { text-align: right; font-size: 11.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .eg-abfuss {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--v3-line);
  font-size: 12px; line-height: 1.5; color: var(--v3-ink3);
}

/* ── Lauf-Liste ──────────────────────────────────────────────────────────── */
.v3-page .eg-historie { margin-top: 14px; }
.v3-page .eg-historie .eg-zahl { font-size: 13px; font-weight: 800; color: var(--v3-ink3); }
.v3-page .eg-hzeit { display: block; font-size: 11px; color: var(--v3-ink3); }
.v3-page .eg-hquote { display: block; font-size: 11px; color: var(--v3-ink3); font-weight: 650; }

/* ── Guthaben-Karte ──────────────────────────────────────────────────────── */
.v3-page .eg-gzeilen { margin-top: 14px; border-top: 1px solid var(--v3-line2); }
.v3-page .eg-gzeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--v3-line2); font-size: 12.8px;
  color: var(--v3-ink2);
}
.v3-page .eg-gzeile b { color: var(--v3-ink); font-weight: 800; text-align: right; }
.v3-page .eg-gzeile b small {
  display: block; font-size: 11px; font-weight: 650; color: var(--v3-ink3);
}
.v3-page .eg-gform { margin-top: 14px; }
.v3-page .eg-gform label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--v3-ink3); margin-bottom: 6px;
}
.v3-page .eg-gfelder { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v3-page .eg-input {
  border: 1px solid var(--v3-line); border-radius: 9px; padding: 7px 10px;
  font-size: 12.5px; font-family: inherit; color: var(--v3-ink); background: #fff;
  width: 110px;
}
.v3-page .eg-input-weit { flex: 1; min-width: 150px; width: auto; }
.v3-page .eg-ghinweis { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--v3-ink3); }

/* ── „Was garantiert unberuehrt bleibt" ──────────────────────────────────── */
.v3-page .eg-schutz { margin-top: 14px; }
.v3-page .eg-schutzliste { list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px; }
.v3-page .eg-schutzliste li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650;
  color: var(--v3-ok); background: #e9f7ef; border: 1px solid #bfe6cf;
  border-radius: 99px; padding: 3px 11px;
}
.v3-page .eg-schutzik { font-weight: 800; }
.v3-page .eg-schutztext { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--v3-ink3); }

/* ── Unterseiten (Lauf vorbereiten / Lauf ansehen) ───────────────────────── */
/* `.eg-formfeld` ist seit W5 der globale Baustein `.v3-field`
   (Abschnitt W5-QUERSCHNITT) — W2 und W4 hatten dasselbe Formularfeld unter
   zwei Namen gebaut (`.eg-formfeld` / `.er-wform`). */
/* `.eg-checks`/`.eg-check` sind seit dem 12.08.2026 der globale Baustein
   `.v3-fieldchecks`/`.v3-fieldcheck` (Bauteil-Familie B8, Abschnitt
   W5-QUERSCHNITT) — die Mehrfach-Auswahl war zweimal unter zwei Namen
   gebaut. Die Regeln stehen dort, hier bleibt nur der Zeiger. */
/* Gesperrter Knopf: `.v3-btn` hatte app-weit keinen :disabled-Zustand — ein
   nicht klickbarer Primaerknopf sah aus wie ein klickbarer. */
.v3-page .v3-btn:disabled, .v3-page .v3-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none;
}
.v3-page .eg-rechner { position: sticky; top: 14px; }
.v3-page .eg-rechner .eg-gzeile.tot b { font-size: 15px; }
.v3-page .eg-rechner .v3-btn { width: 100%; justify-content: center; margin-top: 12px; }

@media (max-width: 720px) {
  .v3-page a.eg-abrow {
    grid-template-columns: minmax(0, 1fr) 54px 84px;
    grid-template-areas: "label pct luecke" "bar bar bar"; gap: 6px 10px;
  }
  .v3-page .eg-ablabel { grid-area: label; }
  .v3-page .eg-abbar { grid-area: bar; }
  .v3-page .eg-abpct { grid-area: pct; }
  .v3-page .eg-abluecke { grid-area: luecke; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   W3-WHU — die verschmolzene Seite „WHU-Abgleich" (#775, Welle W3)

   Spec:    docs/superpowers/specs/2026-07-31-datenmanagement-vision.md (Stufe 1)
   Diagnose:docs/superpowers/2026-07-30-datenmanagement-diagnose.md §2.3/§3.2
   Mockup:  docs/mockups/2026-07-31-datenmanagement-neubau-v3.html (Seite 5)
   Views:   app/views/datenmanagement/whu_abgleich/*

   Hier steht AUSSCHLIESSLICH, was Baukasten (§4 der Design-Referenz) und
   W0-Fundament noch nicht hergeben: die Ehrlichkeits-Zeile, die Fall-Zeile mit
   Auswahl-Kaestchen samt Detail-Aufklapper, die Zuordnungs-Karte und die
   Sammel-Leiste. Alles global unter `.v3-page`, nur --v3-*-Token, keine Insel.

   Praefix `wh-` (analog `bf-` in W1 und `eg-` in W2).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ehrliche Zahlen: X gesamt · Y zu bearbeiten · Z Nebensache ─────────────
   Seit W4 ein BAUKASTEN-Bauteil (`.v3-ehrlich` + `.v3-mehr`): ueberall dort
   Pflicht, wo eine Liste weniger zeigt, als es gibt, oder wo mehrere
   verschieden weit gefasste Mengen dieselbe Frage beantworten. `wh-ehrlich`/
   `wh-mehr` bleiben als Alt-Namen der W3-Seite bestehen. */
.v3-page .v3-callout.wh-ehrlich,
.v3-page .v3-callout.v3-ehrlich { line-height: 1.6; }
/* GLOBAL seit 05.08.2026 (Design-Review Kaskaden-Endspiel): `.v3-mehr` war nur
   INNERHALB von `.v3-ehrlich` gestaltet — dabei tragen 17 Views die Klasse, die
   meisten davon in Tabellenzellen und Callouts. Dort erbte der Link durch das
   Tailwind-Preflight (`a { color: inherit; text-decoration: inherit }`) den
   Fliesstext und war von normalem Text nicht zu unterscheiden. Eine Zahl, die
   klickbar ist, muss auch klickbar AUSSEHEN (Design-Referenz § 5.3). Die
   `.v3-ehrlich`-Fassung bleibt darunter stehen: sie setzt zusaetzlich den
   Abstand und den Umbruch-Schutz, die nur in der Ehrlichkeits-Zeile gelten. */
.v3-page .v3-mehr { font-weight: 700; color: var(--v3-brand); text-decoration: none; }
.v3-page .v3-mehr:hover { text-decoration: underline; }
.v3-page .wh-ehrlich .wh-mehr,
.v3-page .v3-ehrlich .v3-mehr { margin-left: 6px; font-weight: 700; color: var(--v3-brand);
  text-decoration: none; white-space: nowrap; }
.v3-page .wh-ehrlich .wh-mehr:hover,
.v3-page .v3-ehrlich .v3-mehr:hover { text-decoration: underline; }
.v3-page .v3-ehrlich .v3-fuss { display: block; margin-top: 5px; font-size: 12px;
  color: var(--v3-ink3); }
.v3-page .v3-callout.wh-hinweis { margin: 0 18px 12px; }

/* Die Verweis-Karten der ausgezogenen Sichten (Akquise / Auswertung) lagen
   hier als `.wh-verweis`. Sie sind seit W5 ein globaler Kartentyp
   (`.lk.verweis`, Abschnitt W5-QUERSCHNITT) — es gab keinen Grund, warum ein
   Wegweiser nur im WHU-Abgleich moeglich sein sollte. */

/* ── Modus-Umschalter (die zwei Fragen) ──────────────────────────────────── */
.v3-page .wh-modi { padding: 0; margin-bottom: 14px; overflow: hidden; }
.v3-page .wh-modi .v3-tabs { padding: 0 6px; }
.v3-page .wh-modi .v3-tab { font-size: 13.5px; }

/* ── Filter- und Suchzeile ───────────────────────────────────────────────── */
.v3-page .wh-filter { border-bottom: 1px solid var(--v3-line2); }
.v3-page .wh-suchform { display: flex; gap: 8px; align-items: center; flex: 1 1 auto;
  min-width: 0; flex-wrap: wrap; }
.v3-page .wh-suchform .v3-bigsearch { flex: 1 1 220px; min-width: 0; }
.v3-page .wh-jahrgang, .v3-page .wh-jahr, .v3-page .wh-sel, .v3-page .wh-note {
  border: 1px solid var(--v3-line); border-radius: 9px; padding: 7px 10px;
  font-size: 12.5px; font-family: inherit; color: var(--v3-ink); background: var(--v3-card);
}
.v3-page .wh-jahrgang { flex: 0 1 190px; }
.v3-page .wh-jahr { width: 108px; }
.v3-page .wh-note { flex: 1 1 240px; min-width: 160px; }
/* „Zurücksetzen" gab es bisher nur innerhalb `.v3-chips`; in den Suchzeilen
   dieser Seite steht es daneben und blieb deshalb ungestylt. */
.v3-page .wh-filter .reset { font-size: 11.5px; font-weight: 700; color: var(--v3-ink3);
  text-decoration: none; white-space: nowrap; }
.v3-page .wh-filter .reset:hover { color: var(--v3-brand); text-decoration: underline; }
/* Formulare MIT Begruendungsfeld brauchen mehr Platz als reine Knopf-Formulare
   und muessen umbrechen duerfen. */
.v3-page form.wh-entscheid.mit-grund { flex: 1 1 260px; min-width: 220px; }
/* Die Doppelzahl (B5) sitzt hier in der Suchzeile, nicht als Kopfzahl —
   dieselbe Anpassung wie auf „Befunde" (.bf-modisum). */
.v3-page .wh-filter .v3-count { white-space: normal; }
.v3-page .wh-filter .v3-count .dz .dzn { font-size: 18px; }
.v3-page .wh-filter .v3-count .dz .dzb { font-size: 12px; }
.v3-page .wh-jahrgang:focus, .v3-page .wh-jahr:focus,
.v3-page .wh-sel:focus, .v3-page .wh-note:focus {
  outline: 2px solid var(--v3-brand); outline-offset: 1px; border-color: var(--v3-brand);
}

/* ── B9 · SAMMEL-LEISTE („für alle angehakten") — EIN Bauteil ─────────────
   Seit #771 W3 benutzen WHU-Abgleich und Transaktions-Arbeitsplatz dieselbe
   Leiste; vorher waren es zwei Inseln mit sichtbar verschiedenen Werten
   (Fläche, Polster, Titelgröße). Regel: eine Liste mit Stapel-Aktion nimmt
   `.v3-sammelbar` + `.v3-sammeltitel`, die Felder darin sind `.v3-field`.
   Kurzform siehe docs/design-reference.md § 9a. */
.v3-page .v3-sammelbar,
.v3-page .wh-sammelbar { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 10px 18px; background: #f7f9fc; border-bottom: 1px solid var(--v3-line2); }
.v3-page .v3-sammeltitel,
.v3-page .wh-sammeltitel { font-size: 12px; font-weight: 750; color: var(--v3-ink2); }
.v3-page .v3-sammelhinweis { flex-basis: 100%; font-size: 11px; color: var(--v3-ink3); }
/* Felder in der Leiste stehen nebeneinander statt block-breit; wo sie eine
   sichtbare Beschriftung tragen, sitzt der Titel auf der Feld-Grundlinie. */
.v3-page .v3-sammelbar .v3-sammeltitel { padding-bottom: 9px; }
.v3-page .v3-sammelbar .v3-field.sb-feld { margin-bottom: 0; width: auto; min-width: 165px; }
/* Der Topf-Picker bringt seinen eigenen Wrapper mit (Werkzeugzeile + Hinweis) —
   er verhaelt sich in der Sammelleiste wie ein Feld (W1, 21.08.2026). */
.v3-page .v3-sammelbar .sb-feld .topfpick { min-width: 240px; }
.v3-page .v3-sammelbar .sb-feld .v3-field { margin-bottom: 0; }
.v3-page .v3-sammelbar .sb-feld .topfpick-fuss { gap: 8px; margin-top: 0; }
.v3-page .v3-sammelbar .v3-field.sb-breit { flex: 1 1 240px; min-width: 220px; }
.v3-page .v3-sammelbar .v3-field > span { margin-bottom: 3px; }
.v3-page .v3-sammelbar input[type="submit"] { margin-top: 0; }

/* ── Fall-Zeile mit Auswahl-Kaestchen + Detail-Aufklapper ────────────────── */
.v3-page .wh-fall { display: grid; grid-template-columns: 34px minmax(0, 1fr);
  border-bottom: 1px solid var(--v3-line2); }
.v3-page .wh-fall:last-of-type { border-bottom: 0; }
.v3-page .wh-fall .wh-pick { display: flex; align-items: flex-start;
  justify-content: center; padding-top: 17px; }
.v3-page .wh-fall .wh-fallzeile { min-width: 0; }
.v3-page .wh-fall .heute-row { border-bottom: 0; padding-left: 0; }
.v3-page .heute-row.wh-ohne .fz-person { color: var(--v3-ink3); font-size: 12.5px; }
.v3-page .wh-fall .akt form.wh-entscheid { display: inline; margin: 0; }
.v3-page .wh-fall .akt form.wh-entscheid input[type="submit"] { cursor: pointer; }

/* ── Detail eines Unterschieds (frueher der Tailwind-Drawer) ─────────────── */
/* Der leere Turbo-Rahmen der Zeile: erst nach dem Klick hat er Inhalt. */
.v3-page turbo-frame.wh-detail { display: block; }
.v3-page turbo-frame.wh-detail:empty { display: none; }
.v3-page .wh-dt { margin: 0 18px 14px; background: #fbfcfe;
  border: 1px solid var(--v3-line); border-radius: 12px; overflow: hidden; }
.v3-page .wh-dt-kopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--v3-line2); background: var(--v3-card); }
.v3-page .wh-dt-kopf h3 { font-size: 14px; font-weight: 800;
  letter-spacing: -.2px; margin: 0; }
.v3-page .wh-dt-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .wh-dt-label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--v3-ink3); margin-bottom: 5px; }
.v3-page .wh-dt-erklaerung { padding: 13px 16px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .wh-dt-was { font-size: 13px; color: var(--v3-ink); line-height: 1.55; margin: 0 0 10px; }
.v3-page .wh-dt-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; }
.v3-page .wh-dt-zwei p { margin: 0; font-size: 12.5px; color: var(--v3-ink2); line-height: 1.55; }
.v3-page .wh-dt-vergleich { padding: 13px 16px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .wh-dt-spalte { background: var(--v3-card); border: 1px solid var(--v3-line2);
  border-radius: 10px; padding: 11px 13px; }
.v3-page .wh-dt-liste { margin: 0; font-size: 12.5px; }
.v3-page .wh-dt-liste > div { display: flex; justify-content: space-between; gap: 12px;
  padding: 3px 0; }
.v3-page .wh-dt-liste dt { color: var(--v3-ink3); font-weight: 600; }
.v3-page .wh-dt-liste dd { margin: 0; text-align: right; color: var(--v3-ink); font-weight: 650; }
.v3-page .wh-dt-leer { font-size: 12.5px; color: var(--v3-ink3); font-style: italic; margin: 0; }
.v3-page .wh-dt-geld { padding: 12px 16px; background: #fffaf2;
  border-bottom: 1px solid var(--v3-line2); font-size: 12.8px; color: var(--v3-ink); line-height: 1.6; }
.v3-page .wh-dt-hinweis { display: block; margin-top: 5px; font-size: 11.5px;
  color: var(--v3-ink3); font-weight: 600; }
.v3-page .wh-dt-entschieden { padding: 11px 16px; font-size: 12.5px; color: var(--v3-ink2);
  border-bottom: 1px solid var(--v3-line2); }
.v3-page .wh-dt-notiz { display: block; margin-top: 4px; font-style: italic; color: var(--v3-ink3); }
.v3-page .wh-dt-akt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px; }
.v3-page .wh-dt-akt form.wh-entscheid { display: inline-flex; align-items: center; gap: 6px;
  margin: 0; }
.v3-page .wh-dt-roh { border-top: 1px solid var(--v3-line2); }
.v3-page .wh-dt-roh summary { padding: 9px 16px; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; color: var(--v3-ink3); cursor: pointer; }
.v3-page .wh-dt-roh summary:hover { color: var(--v3-brand); }
.v3-page .wh-dt-roh pre { margin: 0; padding: 10px 12px; background: #f4f6fa;
  border-radius: 9px; font-size: 11px; color: var(--v3-ink2); white-space: pre-wrap;
  overflow-x: auto; }
.v3-page .wh-dt-roh .wh-dt-zwei { padding: 0 16px 14px; }
.v3-page .wh-entschieden { font-size: 11.5px; font-weight: 700; color: var(--v3-ink3); }

/* ── Zuordnungs-Karte („Ist das dieselbe Person?") ───────────────────────── */
.v3-page .wh-karten { display: grid; gap: 12px; padding: 14px 18px; }
.v3-page .wh-zk { border: 1px solid var(--v3-line); border-left: 4px solid #f59e0b;
  border-radius: 12px; background: var(--v3-card); overflow: hidden; }
.v3-page .wh-zk.ohne { border-left-color: #ef4444; }
.v3-page .wh-zk-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--v3-line2); background: #fbfcfe; }
.v3-page .wh-zk-grund { font-size: 12.5px; font-weight: 700; color: var(--v3-ink2); }
.v3-page .wh-zk-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0; }
.v3-page .wh-zk-seite { padding: 12px 14px; }
.v3-page .wh-zk-seite + .wh-zk-seite { border-left: 1px solid var(--v3-line2); }
.v3-page .wh-zk-name { font-size: 13.5px; font-weight: 750; letter-spacing: -.2px; }
.v3-page .wh-zk-zeile { margin-top: 3px; font-size: 12px; color: var(--v3-ink2); }
.v3-page .wh-zk-akt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 11px 14px; border-top: 1px solid var(--v3-line2); background: #fbfcfe; }
.v3-page .wh-zk-akt form.wh-entscheid { display: inline-flex; align-items: center; gap: 6px;
  margin: 0; }
@media (max-width: 640px) {
  .v3-page .wh-zk-seite + .wh-zk-seite { border-left: 0; border-top: 1px solid var(--v3-line2); }
}

/* ── Fuss: Blaetterung + ehrlicher Zaehler ───────────────────────────────── */
.v3-page .wh-fuss { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--v3-line2); }
.v3-page .wh-fuss .v3-pager { margin: 0; }
.v3-page .wh-zaehler { font-size: 11.5px; font-weight: 650; color: var(--v3-ink3); }

/* ── Wissens-Karten (Register-Auszug) ────────────────────────────────────── */
.v3-page .wh-wissen p { margin: 0 0 9px; font-size: 12.8px; color: var(--v3-ink2); line-height: 1.65; }
.v3-page .wh-wissen p:last-child { margin-bottom: 0; }
.v3-page .wh-wissen b { color: var(--v3-ink); }
.v3-page .wh-glossar { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--v3-line); }
.v3-page .wh-glossar dt { font-size: 12px; font-weight: 800; color: var(--v3-ink); margin-top: 8px; }
.v3-page .wh-glossar dd { margin: 2px 0 0; font-size: 12.2px; color: var(--v3-ink2); line-height: 1.55; }
.v3-page .wh-verwandt { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed var(--v3-line); }
.v3-page .wh-verwandt a { font-size: 12px; font-weight: 700; color: var(--v3-brand);
  text-decoration: none; }
.v3-page .wh-verwandt a:hover { text-decoration: underline; }

/* ── Akquise-Liste (Rest-Sicht unter /admin/whu-pool/acquisition) ────────── */
.v3-page .wh-mehrfach { display: block; font-size: 10.5px; color: var(--v3-ink3); }

/* ═══════════════════════════════════════════════════════════════════════════
   W4-UEBERBLICK — der Bereichs-Ueberblick + die verschmolzene Seite
   „Erreichbarkeit" (#775, Welle W4)

   Spec:    docs/superpowers/specs/2026-07-31-datenmanagement-vision.md (§3/§7)
   Diagnose:docs/superpowers/2026-07-30-datenmanagement-diagnose.md §2.4/§3.1/§3.2
   Mockup:  docs/mockups/2026-07-31-datenmanagement-neubau-v3.html (Seiten 1+2)
   Views:   app/views/datenmanagement/overview.html.erb
            app/views/datenmanagement/erreichbarkeit/*

   Was hier stirbt: 82 Zeilen Inline-CSS des „stift"-Boards, das 202-Zeilen-
   <style> NACH dem Markup der Outreach-Worklist und die eigene Kopf-/Karten-
   Sprache der Erreichbarkeits-Seite. Hier steht AUSSCHLIESSLICH, was Baukasten
   (§4 der Design-Referenz) und W0-Fundament noch nicht hergeben.

   Praefixe `ub-` (Ueberblick) und `er-` (Erreichbarkeit) — analog `bf-` in W1,
   `eg-` in W2 und `wh-` in W3. Alles global unter `.v3-page`, nur --v3-*-Token,
   keine Insel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ueberblick: die Tagesliste ───────────────────────────────────────────── */
.v3-page .ub-heute { padding: 4px 0 6px; }

/* ── Ueberblick: die Daten-Gesundheits-Landkarte ──────────────────────────── */
.v3-page .ub-karten { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.v3-page .ub-karte { display: flex; flex-direction: column; gap: 9px; padding: 16px 17px;
  text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.v3-page a.ub-karte:hover { border-color: #bcd3f7;
  box-shadow: 0 8px 22px -12px rgba(31, 95, 214, .35); }
.v3-page .ub-karte.ub-note { border-style: dashed; background: #fbfcff; }

.v3-page .ub-kkopf { display: flex; align-items: flex-start; gap: 12px; }
.v3-page .ub-ktitel { font-size: 14px; font-weight: 750; color: var(--v3-ink); }
.v3-page .ub-kfelder { font-size: 11.5px; color: var(--v3-ink3); font-weight: 500; margin-top: 2px; }
.v3-page .ub-kwert { margin-left: auto; font-size: 27px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; white-space: nowrap; }
.v3-page .ub-kwert small { font-size: 14px; font-weight: 700; color: var(--v3-ink3); }
.v3-page .ub-karte.t-ok .ub-kwert { color: var(--v3-ok); }
.v3-page .ub-karte.t-warn .ub-kwert { color: var(--v3-warn); }
.v3-page .ub-karte.t-bad .ub-kwert { color: var(--v3-bad); }
.v3-page .ub-karte.t-neutral .ub-kwert { color: var(--v3-ink3); }

/* Fuellstand + Ziel-Marke kommen aus dem Baukasten (`.ab-bar > .fill + .marke`,
   Design-Referenz §4) — hier nur der rote Ton, den `.fill` noch nicht kennt,
   und der Abstand zur Ziel-Beschriftung ueber der Marke. */
.v3-page .ub-karte .ab-bar { margin-top: 20px; }
.v3-page .ub-karte .ab-bar .fill.bad { background: linear-gradient(90deg, #d95765, var(--v3-bad)); }

.v3-page .ub-kzeilen { display: flex; flex-wrap: wrap; gap: 6px; }
.v3-page .ub-kzeilen span { font-size: 11.5px; color: var(--v3-ink2); background: #f7f9fc;
  border: 1px solid var(--v3-line2); border-radius: 8px; padding: 3px 9px; }
.v3-page .ub-kzeilen small { color: var(--v3-ink3); }

.v3-page .ub-kregel { font-size: 11.5px; line-height: 1.5; color: var(--v3-ink3);
  border-top: 1px solid var(--v3-line2); padding-top: 8px; }
.v3-page .ub-kregel b { color: var(--v3-ink2); font-weight: 700; }
.v3-page .ub-kfuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 4px; }
.v3-page .ub-kmehr { margin-left: auto; font-size: 12px; font-weight: 700;
  color: var(--v3-brand); }

/* Beitrags-Zeilen der Gesamt-Note */
.v3-page .ub-kbeitraege { display: flex; flex-direction: column; gap: 6px; }
.v3-page .ub-bzeile { display: grid; grid-template-columns: 122px 1fr 74px; gap: 10px;
  align-items: center; }
.v3-page .ub-bzeile .l { font-size: 12px; font-weight: 650; color: var(--v3-ink2); }
.v3-page .ub-bzeile .l small { font-size: 10.5px; color: var(--v3-ink3); font-weight: 700; }
.v3-page .ub-bzeile .b { height: 7px; border-radius: 5px; background: var(--v3-line2);
  overflow: hidden; }
.v3-page .ub-bzeile .b i { display: block; height: 100%; background: var(--v3-brand); }
.v3-page .ub-bzeile .b i.na { background: repeating-linear-gradient(45deg,
  #e4e7ee, #e4e7ee 4px, #f3f5f9 4px, #f3f5f9 8px); }
.v3-page .ub-bzeile .v { font-size: 12px; font-weight: 700; text-align: right; }

/* ── Ueberblick: Aufraeum-Aktionen + Rundum-Blick ─────────────────────────── */
.v3-page .ub-aktionen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.v3-page .ub-faellig { margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--v3-ink3); }
.v3-page .ub-faellig.warn { color: var(--v3-bad); }
.v3-page .ub-verweis { display: flex; flex-direction: column; gap: 4px; margin: 14px 0;
  text-decoration: none; color: inherit; }
.v3-page .ub-verweis b { font-size: 13.5px; font-weight: 750; }
.v3-page .ub-verweis span { font-size: 12px; color: var(--v3-ink3); }
.v3-page .ub-rb { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.v3-page .ub-rbz { border: 1px solid var(--v3-line2); border-radius: 10px; padding: 9px 11px; }
.v3-page .ub-rbz.hit { border-color: #f2c0c6; background: #fffafa; }
.v3-page .ub-rbz .n { display: block; font-size: 17px; font-weight: 800; color: var(--v3-ok); }
.v3-page .ub-rbz.hit .n { color: var(--v3-bad); }
.v3-page .ub-rbz .l { font-size: 11px; color: var(--v3-ink3); font-weight: 600; }

/* ═══ Erreichbarkeit ═══════════════════════════════════════════════════════ */

/* Die Ehrlichkeits-Zeile („drei Mengen nebeneinander") kommt aus dem
   Baukasten (`.v3-ehrlich`/`.v3-mehr`/`.v3-fuss`) — hier nur der Modus-Rahmen. */
.v3-page .er-modi { padding: 0; margin-bottom: 16px; }

/* ── Kanal-Quoten mit gestapeltem Konfidenz-Balken ────────────────────────── */
.v3-page .er-kanal { display: grid; grid-template-columns: 150px 1fr 62px; gap: 14px;
  align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--v3-line2); }
.v3-page .er-kanal:last-of-type { border-bottom: 0; }
.v3-page .er-kname { font-size: 13.5px; font-weight: 700; color: var(--v3-ink); }
.v3-page .er-kname small { display: block; font-size: 11px; font-weight: 600;
  color: var(--v3-ink3); }
.v3-page .er-kbar { display: flex; height: 14px; border-radius: 99px; overflow: hidden;
  background: var(--v3-line2); }
.v3-page .er-kbar a { display: block; height: 100%; }
.v3-page .er-kpct { text-align: right; font-size: 14px; font-weight: 800; }

/* Die sechs Konfidenz-Stufen — EINE Palette fuer Balken, Legende und Matrix. */
.v3-page .er-seg.s-bestaetigt,  .v3-page .er-lg.s-bestaetigt::before  { background: var(--v3-ok); }
.v3-page .er-seg.s-verifiziert, .v3-page .er-lg.s-verifiziert::before { background: #2f9e6e; }
.v3-page .er-seg.s-zugestellt,  .v3-page .er-lg.s-zugestellt::before  { background: var(--v3-brand); }
.v3-page .er-seg.s-vorhanden,   .v3-page .er-lg.s-vorhanden::before   { background: #9fb2c9; }
.v3-page .er-seg.s-potenzial,   .v3-page .er-lg.s-potenzial::before   { background: #e6b34d; }
.v3-page .er-seg.s-risiko,      .v3-page .er-lg.s-risiko::before      { background: #e08a93; }

.v3-page .er-legende { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v3-line2); }
.v3-page .er-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 650; color: var(--v3-ink2); }
.v3-page .er-lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.v3-page .er-lghint { margin-left: auto; font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .er-mehrhint { font-size: 12px; color: var(--v3-ink3); }

/* ── Verteilung des Gesamt-Scores ─────────────────────────────────────────── */
.v3-page .er-vtzeile { display: grid; grid-template-columns: 150px 1fr 62px 46px; gap: 10px;
  align-items: center; padding: 8px 0; }
.v3-page .er-vtlabel { font-size: 12.5px; font-weight: 650; color: var(--v3-ink2); }
.v3-page .er-vtzeile .ab-bar { margin-top: 0; height: 9px; }
.v3-page .er-vtzeile .ab-bar .fill.bad { background: linear-gradient(90deg, #d95765, var(--v3-bad)); }
.v3-page .er-vtwert { text-align: right; font-size: 13.5px; font-weight: 800; }
.v3-page .er-vtpct { text-align: right; font-size: 11.5px; color: var(--v3-ink3);
  font-weight: 700; }

/* ── Trend-Saeulen ────────────────────────────────────────────────────────── */
.v3-page .er-trend { display: flex; align-items: flex-end; gap: 8px; height: 96px;
  padding: 6px 0; }
.v3-page .er-tb { flex: 1; min-height: 6px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #3f7ae6, var(--v3-brand)); }
.v3-page .er-tb.letzt { background: linear-gradient(180deg, #34d399, var(--v3-ok)); }
.v3-page .er-taxis { display: flex; gap: 8px; margin-top: 5px; }
.v3-page .er-taxis span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 700;
  color: var(--v3-ink3); }

/* ── Arbeitsliste: Gate, Filter, Fall-Zeilen ──────────────────────────────── */
.v3-page .er-gate { margin-bottom: 14px; }
.v3-page .er-filter { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 12px 14px; margin-bottom: 14px; }
.v3-page .er-fgruppe { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.v3-page .er-flabel { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  font-weight: 700; color: var(--v3-ink3); }
.v3-page .er-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--cc, var(--v3-ink3)); }
/* Die vier Kanalfarben — EINMAL hier, nie als Hex im Markup. */
.v3-page .k-telefon  { --cc: var(--v3-ok); }
.v3-page .k-whatsapp { --cc: var(--v3-ueb); }
.v3-page .k-mail     { --cc: var(--v3-brand); }
.v3-page .k-post     { --cc: var(--v3-warn); }
.v3-page .er-andock { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px; }
.v3-page .er-andock .er-atext { flex: 1 1 260px; font-size: 12.5px; color: var(--v3-ink2); }
.v3-page .er-split { align-items: start; }

/* Die Zeile WRAPPT den Bauteil B6 (`.heute-row.wide`) und stellt ihm nur die
   Kanal-Spalte voran — Muster `.bf-fall` (W1) und `.wh-fall` (W3). */
.v3-page .er-fall { display: grid; grid-template-columns: 118px minmax(0, 1fr);
  align-items: center; border-bottom: 1px solid var(--v3-line2); padding-left: 16px; }
.v3-page .er-fall:last-of-type { border-bottom: 0; }
.v3-page .er-fall.on { background: #eef4ff; box-shadow: inset 3px 0 0 var(--v3-brand); }
.v3-page .er-fall > .heute-row { border-bottom: 0; }
.v3-page .er-fall.on > .heute-row:hover { background: transparent; }
.v3-page .er-fkanal { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 750; color: var(--cc);
  border: 1px solid color-mix(in srgb, var(--cc) 35%, #fff);
  background: color-mix(in srgb, var(--cc) 9%, #fff); }
.v3-page .er-fkanal .er-fscore { background: var(--cc); color: #fff; border-radius: 99px;
  padding: 0 5px; font-size: 10.5px; }
.v3-page .er-fluecken { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.v3-page .er-luecke { font-size: 10.5px; font-weight: 700; border-radius: 99px;
  padding: 1px 8px; background: var(--v3-line2); color: var(--v3-ink2);
  border: 1px solid var(--v3-line2); }
.v3-page .er-luecke.l-critical { background: #fdeaec; color: var(--v3-bad); border-color: #f2c0c6; }
.v3-page .er-luecke.l-warning { background: #fff5e6; color: #9a5b00; border-color: #f0d9ac; }
@media (max-width: 900px) {
  .v3-page .er-fall { grid-template-columns: 1fr; padding: 10px 0 0 16px; }
}

/* ── Ausgeblendete Faelle ─────────────────────────────────────────────────── */
.v3-page .er-verborgen { border-top: 1px solid var(--v3-line); background: #fafbfd; }
.v3-page .er-abkopf { display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  font-size: 12.5px; font-weight: 750; color: var(--v3-ink2); }
.v3-page .er-abmehr { margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--v3-ink3); }
.v3-page .er-abzeile { display: flex; align-items: center; gap: 10px; padding: 7px 16px;
  border-top: 1px dashed var(--v3-line2); font-size: 12.5px; }
.v3-page .er-abname { flex: 1; min-width: 0; font-weight: 650; color: var(--v3-ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-page .er-abdatum { font-size: 11.5px; color: var(--v3-ink3); }

/* ── Arbeitskarte ─────────────────────────────────────────────────────────── */
.v3-page .er-karte { position: sticky; top: 16px; }
.v3-page .er-wkopf { display: flex; align-items: center; gap: 10px; padding: 15px 16px;
  border-bottom: 1px solid var(--v3-line2); }
.v3-page .er-wbody { padding: 14px 16px; display: flex; flex-direction: column; gap: 13px; }
.v3-page .er-wstats { display: flex; gap: 9px; flex-wrap: wrap; }
.v3-page .er-wstat { flex: 1; min-width: 108px; background: #f7f9fc;
  border: 1px solid var(--v3-line2); border-radius: 10px; padding: 9px 11px; }
.v3-page .er-wstat .l { display: block; font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; font-weight: 700; color: var(--v3-ink3); }
.v3-page .er-wstat .v { display: block; font-size: 14.5px; font-weight: 800;
  color: var(--v3-ink); margin-top: 2px; }
.v3-page .er-wstat .v small { font-size: 11px; font-weight: 600; color: var(--v3-ink3); }
.v3-page .er-wsek { border: 1px solid var(--v3-line2); border-radius: 11px; overflow: hidden; }
.v3-page .er-wsek > .h { display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: #f7f9fc; border-bottom: 1px solid var(--v3-line2); font-size: 12.5px;
  font-weight: 750; color: var(--v3-ink); }
.v3-page .er-wsek > .h .n { margin-left: auto; color: var(--v3-ink3); font-weight: 700; }
.v3-page .er-wsek > .b { padding: 12px 13px; }
.v3-page .er-wzeile { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--v3-line2); font-size: 12.5px; }
.v3-page .er-wzeile:last-child { border-bottom: 0; }
.v3-page .er-wzeile small { color: var(--v3-ink3); }
.v3-page .er-wbefund { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  padding: 4px 0; color: var(--v3-ink2); }
.v3-page .er-wbefund .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.v3-page .er-wbefund .d.sev-critical { background: var(--v3-bad); }
.v3-page .er-wbefund .d.sev-warning { background: var(--v3-warn); }
.v3-page .er-wbefund .d.sev-info { background: var(--v3-brand); }
.v3-page .er-whint { font-size: 11.5px; color: var(--v3-ink3); line-height: 1.5;
  margin-top: 6px; }
.v3-page .er-wakt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v3-page .er-wgate { background: var(--v3-canvas); border: 1px dashed var(--v3-line); border-radius: 10px;
  padding: 11px 13px; font-size: 12px; color: var(--v3-ink3); line-height: 1.5;
  margin-bottom: 9px; }
.v3-page .er-wadresse { font-size: 13px; color: var(--v3-ink); background: #f7f9fc;
  border: 1px solid var(--v3-line2); border-radius: 9px; padding: 9px 12px; line-height: 1.5;
  margin: 6px 0 9px; }
/* `.er-wform` (Formular-Bauform), `.er-wgrid` und `.er-wcap` sind seit W5 die
   globalen Bausteine `.v3-field` / `.v3-fieldgrid` / `.v3-fieldcap`
   (Abschnitt W5-QUERSCHNITT). */

/* ── „Ganz ohne Kanal": Kanal-Matrix + Rueckgewinnungs-Wege ───────────────── */
.v3-page .er-matrix { display: inline-flex; gap: 4px; }
.v3-page .er-mzelle { width: 25px; height: 25px; border-radius: 7px; display: grid;
  place-items: center; font-size: 10px; font-weight: 800; color: #fff; flex: none; }
.v3-page .er-mzelle.m-best { background: var(--v3-ok); }
.v3-page .er-mzelle.m-zug { background: var(--v3-brand); }
.v3-page .er-mzelle.m-vor { background: #9fb2c9; }
.v3-page .er-mzelle.m-ris { background: #e08a93; }
.v3-page .er-mzelle.m-na { background: var(--v3-line2); color: var(--v3-ink3); }
.v3-page .er-frisch { font-size: 11.5px; font-weight: 600; color: var(--v3-ink3); }
.v3-page .er-frisch.kalt { color: var(--v3-warn); }
.v3-page .er-wege { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Klassenkameraden stehen als Inline-Liste in der Zelle. Ein Popover waere hier
   unbrauchbar: die Tabelle liegt in `.v3-scroll` (overflow-x:auto), das kappt
   jedes absolut positionierte Element (Design-Referenz §5.4). */
.v3-page .er-mates { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline;
  font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .er-mates a { color: var(--v3-brand); text-decoration: none; font-weight: 650; }
.v3-page .er-mates a:hover { text-decoration: underline; }
.v3-page .er-tabfuss { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--v3-ink3); }

/* ═══════════════════════════════════════════════════════════════════════════
   W5-QUERSCHNITT — die Werkzeuge, die zu jeder Liste gehoeren (#775, Welle W5)

   Spec:    docs/superpowers/specs/2026-07-31-datenmanagement-vision.md §7
   Diagnose:docs/superpowers/2026-07-30-datenmanagement-diagnose.md §3.2
   Views:   app/views/datenmanagement/segmentbibliothek/*   (Segment-Werkzeug)
            app/views/datenmanagement/segment_builder/*      (Bearbeiten-Strecke)
            app/views/datenmanagement/ai_segments/*          (Freitext-Vorschau)
            app/views/datenmanagement/kampagnen/*            (Aufraeum-Aktionen)

   Drei Teile:
     1. GLOBALE Bausteine, die W1-W4 doppelt gebaut hatten (`.v3-field`,
        `.lk.verweis`) — sie gehoeren keiner Seite, sondern dem Design-System.
     2. Das Segment-Werkzeug (Praefix `sg-`) — vorher 59 Zeilen `<style>` in
        der View.
     3. Die Aufraeum-Aktionen (Praefix `ak-`) — vorher April-2026-Bildsprache
        (`header-gradient`, `bg-white/10`, `font-display`, `min-h-screen`).

   Nur `--v3-*`-Token, keine Insel, keine Hex-Werte im Markup.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── B8 · FORMULARFELD (global) ──────────────────────────────────────────────
   Ein Bauteil statt zweier: W2 hatte `.eg-formfeld` (ein Feld), W4 `.er-wform`
   (ein ganzes Formular) — dieselbe Sache unter zwei Namen. `.v3-field` kann
   beide Bauformen:

     (a) EIN Feld:       <label class="v3-field"><span>Rolle</span><select …>
                         <fieldset class="v3-field"><legend>…</legend>…
     (b) GANZES Formular: <form class="v3-field"> … <label for="x">Ergebnis</label>
                         <select id="x" …> …   — jedes label wird zur Beschriftung.

   Zusatz: `.v3-fieldgrid` (zwei Felder nebeneinander, bricht am Handy um) und
   `.v3-fieldcap` (Zwischenueberschrift innerhalb eines Formulars). */
.v3-page .v3-field { display: block; margin-bottom: 12px; }
.v3-page fieldset.v3-field { border: 0; padding: 0; }
.v3-page .v3-field > legend,
.v3-page .v3-field > span,
.v3-page form.v3-field label,
.v3-page .v3-fieldgrid label {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--v3-ink3); margin-bottom: 6px;
}
.v3-page form.v3-field label { margin: 11px 0 5px; }
.v3-page .v3-field input[type="text"],
.v3-page .v3-field input[type="search"],
.v3-page .v3-field input[type="email"],
/* ⚠️ `tel` fehlte (UX-Review 10.09.2026): `form.telephone_field` erzeugt
   `type="tel"` — die Telefonfelder standen damit als NACKTE Browser-Eingabe
   neben gestalteten Feldern. Eine Selektorliste ist eine Tuerliste (Lehre 1);
   sie ist nur so vollstaendig wie ihr letzter Leser. */
.v3-page .v3-field input[type="tel"],
.v3-page .v3-field input[type="number"],
.v3-page .v3-field input[type="date"],
.v3-page .v3-field input[type="datetime-local"],
.v3-page .v3-field select,
.v3-page .v3-field textarea {
  width: 100%; border: 1px solid var(--v3-line); border-radius: 9px; padding: 8px 10px;
  font-size: 12.8px; font-family: inherit; color: var(--v3-ink); background: #fff;
}
.v3-page .v3-field textarea { min-height: 54px; resize: vertical; }
.v3-page .v3-field input[type="submit"] { margin-top: 12px; }
.v3-page .v3-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v3-page .v3-fieldcap {
  font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase;
  font-weight: 700; color: var(--v3-ink3); margin: 14px 0 2px;
}
/* ── MEHRFACH-AUSWAHL (global, Career-Vertrag v1.2 · 12.08.2026) ─────────────
   War `.eg-checks`/`.eg-check` (W2, Anreicherungs-Lauf) — dasselbe Bauteil
   unter einem Bereichsnamen. Zusammengelegt wie `.eg-formfeld`/`.er-wform` in
   W5: EIN Regelsatz, globaler Name, Alt-Namen als Selektor mitgefuehrt, bis
   die Views nachgezogen sind. Die Beschriftungen der einzelnen Haekchen sind
   NICHT versal — sie sind Werte, keine Feldnamen. Das Kaestchen selbst kommt
   aus `.cbx` (§ 4), es gibt keine zweite Kaestchen-Bildsprache. */
.v3-page .v3-fieldchecks,
.v3-page .eg-checks { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.v3-page .v3-fieldchecks label,
.v3-page .eg-check {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12.8px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--v3-ink2); cursor: pointer;
}
/* Der Klartext unter einem Feld — sagt, was das Feld bewirkt, bevor jemand
   klickt. Bewusst am Feld, nicht in einem Hinweis-Kasten weiter oben. Steht
   IMMER ausserhalb des `<label>`: im Label waere er Teil des Feldnamens und
   wuerde vom Screenreader mitgelesen.
   FOLGEPUNKT: `.er-whint` (W4) und `.eg-ghinweis` (W2) tragen dieselben Werte
   unter zwei weiteren Namen. Zusammenlegen erst mit grep-Beweis ueber alle
   Traeger-Views (Regel: CSS nur loeschen, wenn jede Fundstelle geprueft ist) —
   hier nur vermerkt, nicht nebenbei mitgemacht. */
.v3-page .v3-fieldhint {
  font-size: 11.5px; line-height: 1.5; color: var(--v3-ink3);
  font-weight: 500; letter-spacing: 0; text-transform: none; margin-top: 5px;
}
/* ── FELD-GRUPPE (global, 14.08.2026) ────────────────────────────────────────
   Ein SICHTBARER Rahmen um Felder, die nur GEMEINSAM etwas bewirken. Anlass
   war das Ordnen-Formular der Event-Akte (Folgepunkt U1): dort standen drei
   Felder fuer eine NEUE Reihe in einer Reihe mit den Auswahlfeldern der
   bestehenden — und das Flagship-Feld wirkte bei gewaehlter Bestands-Reihe
   still nicht. Ein Feld, dessen Wirkung von einem anderen abhaengt, muss diese
   Abhaengigkeit ZEIGEN; ein Rahmen mit Beschriftung tut das ohne JavaScript.

   Bewusst KEIN bereichseigenes Feld-CSS (Design-Referenz): die Felder darin
   bleiben `.v3-field` / `.v3-fieldgrid`, gerahmt wird nur die Gruppe.
   Bauform: <fieldset class="v3-fieldgroup"><legend>…</legend> … </fieldset> */
.v3-page .v3-fieldgroup {
  border: 1px solid var(--v3-line); border-radius: 10px;
  padding: 4px 12px 12px; margin: 4px 0 12px; background: #fbfcfe;
}
.v3-page .v3-fieldgroup > legend {
  display: block; padding: 0 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .v3-fieldgroup .v3-fieldhint { margin: 0 0 6px; }

/* Die bestehende Regel bleibt, wie sie war — das Kaestchen vergroessert der
   app-weite Tap-Block bei `(max-width: 760px), (pointer: coarse)` ueber `.cbx`,
   nicht eine zweite Bruchkante hier. */
@media (max-width: 560px) { .v3-page .v3-fieldgrid { grid-template-columns: 1fr; } }

/* Drei Felder nebeneinander (Brutto · Netto · MwSt.). Globaler Modifier statt
   eines bereichseigenen Namens: die naechste dreispaltige Maske baut ihn sonst
   erneut. EINE Bruchkante — dieselbe wie die zweispaltige Familie oben. */
.v3-page .v3-fieldgrid.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .v3-page .v3-fieldgrid.drei { grid-template-columns: 1fr; } }

/* ── EIN ZUSAMMENGESETZTES FELD NIMMT DIE GANZE ZEILE (27.08.2026) ─────────
   Gemessen in der Zuordnen-Akte (`transaktionen/_akte_zuordnen`), 1440x900:
   der Topf-Picker ist seit dem Suchfeld DREI gestapelte Zeilen (Suche · Auswahl ·
   Fuss). Neben einem gewoehnlichen einzeiligen Feld richtet das Raster beide
   Zellen an ihrer OBERKANTE aus — also stand „Gehoert zu Event" (Kopf 2288,
   Feld 2310) neben dem SUCHFELD des Pickers (2310), waehrend die eigentliche
   Kategorie-Auswahl 66 px tiefer allein dastand (2376) und rechts davon 140 px
   Leere. Zwei Felder, die nichts miteinander zu tun haben, lasen sich als Paar.
   Ein zusammengesetztes Feld bekommt deshalb die ganze Zeile; das einzeilige
   Nachbarfeld rueckt darunter. Modifier statt `style=""` und global statt
   bereichseigen — der naechste Einbauort des Pickers braucht dieselbe Regel. */
.v3-page .v3-fieldgrid > .v3-fieldvoll { grid-column: 1 / -1; }

/* Der Datei-Waehler stand als EINZIGES Feld ohne Rahmen in der Karte — die
   Regel oben listet text/search/email/number/date/datetime-local/select/textarea,
   `file` fehlte (Review 26.08.2026). Der Knopf gehoert dem Browser, der Rahmen
   uns. */
.v3-page .v3-field input[type="file"] {
  width: 100%; border: 1px solid var(--v3-line); border-radius: 9px;
  padding: 7px 10px; font: inherit; font-size: 12.5px; color: var(--v3-ink2);
  background: #fff;
}
.v3-page .v3-field input[type="file"]::file-selector-button {
  margin-right: 10px; border: 1px solid var(--v3-line); border-radius: 7px;
  padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 650;
  color: var(--v3-ink2); background: #f7f9fc; cursor: pointer;
}

/* ── VERWEIS-KARTE (global, war `.wh-verweis` in W3) ──────────────────────────
   Eine Lauf-Karte ohne Lauf: „das gehoert woanders hin". Im Kopf steht statt
   des Zeitpunkts der Zielbereich. Value-Objekt: `LaufKarte.verweis`. */
.v3-page .lk.verweis .lkr .num { font-size: 19px; }
.v3-page .lk.verweis .lkw {
  font-weight: 800; letter-spacing: .3px; text-transform: uppercase; font-size: 10px;
}

/* ── BEREICHS-SUBNAV: Abstand ────────────────────────────────────────────────
   War ein `style="margin-bottom:14px"` im Markup (Design-Referenz §2 verbietet
   das). Als Modifier, damit die geteilte `.s3-navwrap` in Stiftung und
   Kommunikations-Pipeline unveraendert bleibt. */
.s3-navwrap.dm-subnav { margin-bottom: 14px; }

/* ═══ 2 · SEGMENT-WERKZEUG (Praefix sg-) ════════════════════════════════════
   Bibliothek (Katalog + eigene Segmente) und die Bearbeiten-Strecke
   (neu/bearbeiten) sind EIN Werkzeug — vorher drei Wege, eine Mitgliedermenge
   zu bauen (Bibliothek, Builder, Selektions-Engine; Diagnose §3.2). */
.v3-page .sg-intro {
  background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  padding: 13px 16px; font-size: 12.5px; color: var(--v3-ink2); line-height: 1.55;
  margin-bottom: 14px; box-shadow: var(--v3-shadow);
}
.v3-page .sg-intro b { color: var(--v3-ink); }
.v3-page .sg-gruppe {
  display: flex; align-items: baseline; gap: 8px; margin: 22px 0 10px;
}
.v3-page .sg-gruppe h2 { font-size: 15px; font-weight: 750; margin: 0; }
.v3-page .sg-gruppe .n { font-size: 12px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .sg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px;
}
.v3-page .sg-karte {
  background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: 12px;
  padding: 14px 15px; display: flex; flex-direction: column; gap: 9px;
}
.v3-page .sg-karte:hover { border-color: #cfe0fb; }
.v3-page .sg-kopf { display: flex; align-items: flex-start; gap: 8px; }
.v3-page .sg-kopf b { font-size: 14px; font-weight: 750; line-height: 1.3; flex: 1; }
.v3-page .sg-desc { font-size: 12px; color: var(--v3-ink3); line-height: 1.45; }
.v3-page .sg-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 99px; white-space: nowrap;
}
.v3-page .sg-tag.sys { color: #155e75; background: #e6f6fa; border: 1px solid #a5dce9; }
.v3-page .sg-tag.own { color: #7c3aed; background: #f2ecfe; border: 1px solid #ddc9fb; }
.v3-page .sg-zahlen { border-top: 1px solid var(--v3-line); padding-top: 9px; margin-top: 1px; }
.v3-page .sg-count { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; }
.v3-page .sg-count .v { font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.v3-page .sg-count .l { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .sg-splitbar {
  display: flex; height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--v3-line2); margin-bottom: 7px;
}
.v3-page .sg-splitbar span { display: block; height: 100%; }
.v3-page .sg-splitbar .sb-mail { background: var(--v3-brand); }
.v3-page .sg-splitbar .sb-telwa { background: var(--v3-ok); }
.v3-page .sg-splitbar .sb-post { background: var(--v3-warn); }
.v3-page .sg-splitbar .sb-unerr { background: var(--v3-bad); }
.v3-page .sg-splitleg {
  display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--v3-ink2);
}
.v3-page .sg-splitleg .li { display: inline-flex; align-items: center; gap: 4px; }
.v3-page .sg-splitleg .li b { font-weight: 700; color: var(--v3-ink); }
.v3-page .sg-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.v3-page .sg-lnk {
  font-size: 12px; font-weight: 600; color: var(--v3-brand); background: none; border: none;
  padding: 0; cursor: pointer;
}
.v3-page .sg-lnk.del { color: var(--v3-bad); }
.v3-page .sg-skel {
  height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #eef1f6, #f6f8fb, #eef1f6);
  background-size: 200% 100%; animation: sgskel 1.1s linear infinite;
}
@keyframes sgskel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .v3-page .sg-skel { animation: none; } }
/* KI-Kasten „Segment aus Freitext" — bewusst violett abgesetzt, weil hier ein
   Modell vorschlaegt und der Mensch bestaetigt. */
.v3-page .sg-ki {
  background: linear-gradient(180deg, #f4f0fe, #fbfaff); border: 1px solid #ddc9fb;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.v3-page .sg-ki .h {
  display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 750;
  color: #6d28d9; margin-bottom: 3px;
}
.v3-page .sg-ki .d { font-size: 12px; color: var(--v3-ink3); margin-bottom: 10px; line-height: 1.45; }
.v3-page .sg-ki form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.v3-page .sg-ki input[type="text"] {
  flex: 1; min-width: 240px; font-size: 13.5px; padding: 9px 12px;
  border: 1px solid #ddc9fb; border-radius: 8px; font-family: inherit; color: var(--v3-ink);
}
.v3-page .sg-ki button {
  background: #7c3aed; color: #fff; font-size: 13px; font-weight: 700;
  padding: 9px 16px; border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.v3-page .sg-ki button:hover { filter: brightness(1.08); }
.v3-page .sg-ki .hint { font-size: 11px; color: var(--v3-ink3); margin-top: 7px; }

/* ── Bearbeiten-Strecke (neu / bearbeiten) ───────────────────────────────── */
.v3-page .sg-modus {
  border-radius: 10px; padding: 10px 13px; font-size: 12.2px; line-height: 1.5;
  margin-bottom: 13px; border: 1px solid var(--v3-line); background: var(--v3-card);
}
.v3-page .sg-modus.dyn { border-color: #c9d9f7; background: #f1f6ff; }
.v3-page .sg-modus b { color: var(--v3-ink); }
.v3-page .sg-bilanz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.v3-page .sg-bilanz .gross { font-size: 25px; font-weight: 800; letter-spacing: -.5px; }
.v3-page .sg-bilanz .lbl { font-size: 12.5px; color: var(--v3-ink3); }
.v3-page .sg-bilanz .rest { margin-left: auto; font-size: 12px; color: var(--v3-ink3); }
.v3-page .sg-bilanz .rest b { color: var(--v3-ink); }
.v3-page .sg-bilanz .rest .weg { color: var(--v3-bad); }
.v3-page .sg-bilanz .rest .dazu { color: var(--v3-ok); }
.v3-page .sg-suchzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v3-page .sg-suchzeile input[type="search"] {
  flex: 1; min-width: 180px; border: 1px solid var(--v3-line); border-radius: 9px;
  padding: 8px 10px; font-size: 12.8px; font-family: inherit; color: var(--v3-ink);
}
.v3-page .sg-treffer { display: flex; flex-direction: column; }
.v3-page .sg-treffer li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--v3-line2); font-size: 13px;
}
.v3-page .sg-treffer li:first-child { border-top: 0; }
.v3-page .sg-drin { background: #f2fbf5; }
.v3-page .sg-marke { font-size: 11px; font-weight: 700; color: var(--v3-ok); }
.v3-page .sg-fussnote {
  margin: 6px 0 0; font-size: 11.5px; color: var(--v3-ink3); line-height: 1.5; font-weight: 500;
}
.v3-page .sg-status {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  background: var(--v3-line2); color: var(--v3-ink3); white-space: nowrap;
}
.v3-page .sg-status.ok { background: #e6f6ec; color: var(--v3-ok); }
.v3-page .sg-status.bad { background: #fdecee; color: var(--v3-bad); }
.v3-page .sg-status.warn { background: #fdf3e2; color: var(--v3-warn); }
.v3-page .sg-status.brand { background: #e8effd; color: var(--v3-brand); }

/* ═══ 3 · AUFRAEUM-AKTIONEN (Praefix ak-) ═══════════════════════════════════
   Fruehere „Daten-Fälle": Board + Fall-Liste. Querschnitt-Werkzeug, kein
   eigener Ort — deshalb ohne Subnav-Haupteintrag, aber MIT Bereichs-Subnav
   (Weg zurueck). */
.v3-page .ak-karten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px;
}
.v3-page .ak-karte { display: flex; flex-direction: column; }
.v3-page .ak-kzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px;
  margin: 10px 0 2px;
}
.v3-page .ak-kzahl {
  border: 1px solid var(--v3-line); border-radius: 10px; padding: 8px 10px; text-align: center;
}
.v3-page .ak-kzahl .v { font-size: 18px; font-weight: 800; letter-spacing: -.3px; display: block; }
.v3-page .ak-kzahl .l {
  font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--v3-ink3);
}
.v3-page .ak-kzahl.warn .v { color: var(--v3-warn); }
.v3-page .ak-kzahl.bad .v { color: var(--v3-bad); }
.v3-page .ak-kzahl.ok .v { color: var(--v3-ok); }
.v3-page .ak-balken {
  display: flex; height: 7px; border-radius: 99px; overflow: hidden;
  background: var(--v3-line2); margin: 10px 0 6px;
}
.v3-page .ak-balken span { display: block; height: 100%; }
.v3-page .ak-balken .b-offen { background: var(--v3-warn); }
.v3-page .ak-balken .b-arbeit { background: var(--v3-brand); }
.v3-page .ak-balken .b-fertig { background: var(--v3-ok); }
.v3-page .ak-spark { display: block; width: 108px; height: 34px; color: var(--v3-brand-deep); }
.v3-page form.ak-inlineform { display: inline-block; }
/* Fall-Liste: Lücken-Kontext darf breit sein, aber nicht die Tabelle sprengen. */
.v3-page .ak-kontext { max-width: 380px; font-size: 12.2px; color: var(--v3-ink3); }
.v3-page td.ak-faellig { color: var(--v3-bad); font-weight: 700; }
.v3-page .ak-faelligwort { display: block; font-size: 10px; font-weight: 700; }
/* Aufklapp-Zeile je Fall (details/summary, kein JS). */
.v3-page tr.ak-drawerrow { cursor: default; }
.v3-page tr.ak-drawerrow:hover { background: transparent; }
.v3-page tr.ak-drawerrow > td { background: #fbfcfe; padding: 0 14px; }
.v3-page .ak-drawer > summary {
  list-style: none; cursor: pointer; user-select: none; padding: 9px 0;
  font-size: 12px; font-weight: 700; color: var(--v3-brand);
  display: flex; align-items: center; gap: 8px;
}
.v3-page .ak-drawer > summary::-webkit-details-marker { display: none; }
.v3-page .ak-drawer > summary::before {
  content: "▸"; font-size: 11px; transition: transform .15s ease; display: inline-block;
}
.v3-page .ak-drawer[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .v3-page .ak-drawer > summary::before { transition: none; }
}
.v3-page .ak-drawer > .v3-cols { padding-bottom: 14px; }

/* ══ BRIEF-KANAL · Pruef-Box + Versand-Nachweis ═════════════════════════════
   Kontakt-Logging des Brief-Kanals (Confluentes-Befund ⑧, 08/2026).
   Bewusst KEINE eigene Farbwelt: die Box erbt `.v3-callout(.warn/.ok)`, die
   Status-Pillen sind `.v3-hpill(.warn/.idle)`, die Felder `.v3-field`. Hier
   liegen nur die Abstands-/Listen-Regeln, damit im Markup kein style=""
   noetig ist (Design-Referenz § 4). */
.v3-page .brief-pruef-wrap { margin-top: 16px; }
.v3-page .v3-callout.brief-pruef { margin-bottom: 0; }
.v3-page .brief-pruef-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.v3-page .brief-pruef-zeile { display: flex; align-items: baseline; gap: 10px; }
.v3-page .brief-pruef-zahl {
  flex: 0 0 auto; min-width: 30px; text-align: right;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--v3-ink3);
}
.v3-page .brief-pruef-zahl.warn { color: var(--v3-warn); }
.v3-page .brief-pruef-text { min-width: 0; }
.v3-page .brief-pruef-grau { display: block; font-weight: 400; color: var(--v3-ink3); }
.v3-page .brief-pruef-link { font-weight: 700; color: var(--v3-brand); text-decoration: underline; }
.v3-page .brief-nachweis-sub { margin-top: 4px; font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .brief-aktionen { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.v3-page form.v3-field.brief-confirm { margin-bottom: 0; min-width: 190px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FW1-FINANZEN — Bereichs-Rahmen + Cockpit (Finanzen-Neubau Welle 1, 08/2026)

   Spec:   docs/mockups/prototyp-finanzen.html (Abschnitt „#uebersicht" und das
           Subnav-Muster `.s3-navwrap`)
   Vision: docs/superpowers/specs/2026-08-03-finanzen-vision.md
   Regeln: docs/mockups/feedback-register.md G1-G16

   ALLES global unter `.v3-page` (bzw. an der geteilten `.s3-navwrap` als
   MODIFIER), damit der naechste Bereich die Bausteine wiederverwendet statt sie
   erneut zu bauen (Reuse vor Neubau, Design-Referenz § 7.2). Nur --v3-*-Token,
   keine zweite Farb-Insel. Append-only.

   Neu hier:
     .s3-navwrap.fin-subnav  Bereichs-Subnav: klebt oben, aktiver Reiter traegt
                             seinen Untertitel, rechts eine Verlaufskante als
                             Hinweis, dass die Leiste weitergeht (G11/G15)
     .kette / .kglied        Kettenband „Wie weit ist die Kette?" — je Glied
                             Nummer · Titel · Ampel · Zustand, jedes ein Link
     .fz-vorgang             Vorgangs-Zelle in `.heute-row` (B6) fuer Faelle
                             OHNE Person (Sammeleinzug, Monatsabschluss)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bereichs-Subnav: klebt am Handy oben, zeigt, dass sie weitergeht ─────── */
.s3-navwrap.fin-subnav {
  position: sticky; top: 0; z-index: 30;
  background: var(--shell-bg, #f7f8fa);
  padding: 8px 0 10px; margin: -8px 0 0;
}
/* Die folgende `.v3-page` zieht sich per -24px unter das Shell-Padding. Wo die
   Leiste diesen Platz einnimmt, waere das ein Ueberlauf UNTER die klebende
   Nav — deshalb hier neutralisiert. */
.s3-navwrap.fin-subnav + .v3-page { margin-top: 0; }
.s3-navwrap.fin-subnav .s3-subbar {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.s3-navwrap.fin-subnav .s3-subbar::-webkit-scrollbar { display: none; }
.s3-navwrap.fin-subnav .s3-subtab { flex: 0 0 auto; white-space: nowrap; line-height: 1.25; }
/* Der Untertitel steht NUR am aktiven Reiter — er beantwortet „wo bin ich?",
   nicht „was gibt es sonst?" (G15 Jargon-Deckel). */
.s3-navwrap.fin-subnav .s3-subtab .s3-sub { display: none; }
.s3-navwrap.fin-subnav .s3-subtab.on {
  display: block; min-width: 172px; max-width: 260px;
}
.s3-navwrap.fin-subnav .s3-subtab.on .s3-sub {
  display: block; margin-top: 2px; font-size: 11px; font-weight: 600;
  color: var(--s3-brand); white-space: normal; line-height: 1.35;
}
.s3-navwrap.fin-subnav .s3-mehr {
  position: absolute; right: 0; top: 8px; bottom: 10px; width: 34px;
  pointer-events: none; border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, transparent, var(--shell-bg, #f7f8fa) 78%);
}
@media (min-width: 1000px) {
  .s3-navwrap.fin-subnav .s3-subbar { flex-wrap: wrap; overflow: visible; }
  .s3-navwrap.fin-subnav .s3-mehr { display: none; }
}
/* Tap-Ziele am Handy (Design-Referenz § 8: >= 36px, Prototyp-Auflage 44px). */
@media (max-width: 760px), (pointer: coarse) {
  .s3-navwrap.fin-subnav .s3-subtab { min-height: 44px; display: flex;
    flex-direction: column; justify-content: center; }
  .s3-navwrap.fin-subnav .s3-subtab.on { display: flex; }
}

/* ── Kettenband „Wie weit ist die Kette?" ────────────────────────────────── */
.v3-page .kette {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 9px;
}
.v3-page a.kglied {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--v3-line); border-radius: 12px; padding: 11px 13px;
  background: var(--v3-card); transition: border-color .12s, background .12s;
}
.v3-page a.kglied:hover { border-color: var(--v3-brand); background: #f7faff; }
.v3-page a.kglied:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .kglied .kg {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--v3-ink3);
}
.v3-page .kglied .kt { font-size: 13.5px; font-weight: 750; margin-top: 3px; color: var(--v3-ink); }
.v3-page .kglied .kz {
  font-size: 11.5px; color: var(--v3-ink2); margin-top: 5px; line-height: 1.45;
}
.v3-page .kglied .kz .amp { margin-bottom: 3px; }

/* ── B6-Erweiterung: die Zelle fuer einen Fall OHNE Person ────────────────
   Ein Sammeleinzug oder ein haengender Monat hat keine Person. Statt in jedem
   Bereich eine zweite Zeilen-Bauform zu erfinden, traegt `shared/_fall_zeile`
   dafuer einen `vorgang` — optisch die Personen-Zelle, nur mit Zeichen statt
   Initialen. Ein Fall MIT Person bleibt unveraendert `.mcell` + Profil-Link. */
.v3-page .fz-vorgang { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v3-page .fz-vorgang .fz-zeichen {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff;
  background: var(--v3-ink3);
}
.v3-page .fz-vorgang.t-warn .fz-zeichen { background: var(--v3-warn); }
.v3-page .fz-vorgang.t-bad .fz-zeichen { background: var(--v3-bad); }
.v3-page .fz-vorgang > span { min-width: 0; }
.v3-page .fz-vorgang b {
  display: block; font-size: 13px; font-weight: 750; color: var(--v3-ink); line-height: 1.3;
}
.v3-page .fz-vorgang small {
  display: block; font-size: 11.5px; color: var(--v3-ink3); margin-top: 1px;
}

/* Die Zeilen von „Woher · wohin" sind ganze Links (Label UND Zahl klickbar,
   Design-Referenz § 10.8) — deshalb hier der Link-Zustand fuer `.eg-gzeile`. */
.v3-page a.eg-gzeile { text-decoration: none; color: var(--v3-ink2); }
.v3-page a.eg-gzeile:hover { color: var(--v3-brand); }
.v3-page a.eg-gzeile:hover b { color: var(--v3-brand); }
.v3-page a.eg-gzeile:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .eg-gzeile > span > small { display: block; font-size: 11px; color: var(--v3-ink3); }

/* Ein Abschnitts-Titel darf am Handy nie die Seite quer schieben: `.ab-badge`
   ist global `white-space: nowrap` (richtig fuer Status-Pillen, falsch fuer den
   erklaerenden Beisatz eines `.secttl`). Gemessen am 04.08.2026: der Ketten-
   Beisatz war 399 px breit auf einem 390-px-Viewport. */
.v3-page .secttl .ab-badge { white-space: normal; max-width: 100%; text-align: left; }

/* ── Cockpit-Feinschliff ─────────────────────────────────────────────────── */
.v3-page .fin-woher .tx-sectttl { margin-bottom: 2px; }
.v3-page .fin-kanal-quelle { margin-top: 10px; font-size: 11.5px; color: var(--v3-ink3); }

/* Tap-Ziele am Handy in den NEUEN FW1-Zonen (Fall-Zeilen, Lauf-Karten,
   Kettenband). Gemessen am 04.08.2026: `.v3-btn.sm` ist app-weit 31 px hoch —
   unter den 44 px, die der abgenommene Prototyp verlangt (und unter den 36 px,
   die Design-Referenz § 8 behauptet). Der app-weite Sweep von `.v3-btn.sm`
   gehoert in eine eigene Design-Welle (er aendert JEDE v3-Seite); hier steigt
   nur, was FW1 selbst baut. */
@media (max-width: 760px), (pointer: coarse) {
  .v3-page .heute-row .akt .v3-btn,
  .v3-page .lks .lk .v3-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .v3-page a.kglied { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FW2-FINANZEN — Die Beitrags-Kaskade (Finanzen-Neubau Welle 2, 08/2026)

   Spec:   docs/mockups/prototyp-finanzen.html, Abschnitt „#kaskade"
   Regeln: docs/mockups/feedback-register.md G1-G16

   ALLES global unter `.v3-page`, damit der naechste Bereich die Bausteine
   wiederverwendet statt sie erneut zu bauen (Design-Referenz § 7.2).
   Token, wo es Token gibt; die vier Flaechentoene der Pruefbox stehen als Hex,
   weil der abgenommene Prototyp sie so festlegt und es dafuer (noch) kein
   --v3-*-Token gibt. Append-only.

   ABGRENZUNG zu `.ab-check` (abstimmung_v3.css): Beide zeigen eine Liste von
   Vorbedingungen. `.ab-check` ist die KOMPAKTE Guard-Checkliste („was fehlt
   noch") ohne Zahl und ohne Weg in die Menge. `.pb` ist die ausfuehrliche
   Variante: je Zeile eine Nummer, ein Klartext-Absatz mit Zaehlregel, eine
   Zahl als Pille und ein Knopf in die Liste. Wer eine Vorbedingungs-Liste
   baut, nimmt `.ab-check`, solange keine Zahl dranhaengt — sobald jede Zeile
   eine Menge meint, ist `.pb` der Nachfolger.

   Neu hier:
     .stufen / .stufe    Das Steuerpult: eine Karte je Kaskaden-Stufe mit
                         Nummer · Zweck · Kanaelen · Zustand. Der farbige
                         linke Rand ist der Zustand (gelaufen/jetzt/gated).
     .pb                 Die Wellen-Blocker-Pruefbox: eine Zeile je Pruefung
                         mit Zeichen · Klartext · Zahl · Weg in die Liste.
     .aktionszeile       Knopfreihe unter einem Block (statt style="" — die
                         Design-Referenz § 7.5 verbietet Layout im Markup).
     .abstand-o          Abstands-Modifier, ebenfalls statt style="".
     .ok-zeichen /
     .warn-zeichen       Die zwei Statuszeichen der Pruefbox, ohne Emoji
                         (G13: Zustand als Form + Text, nie als Emoji).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Das Steuerpult: fuenf Stufen, ein Zustand je Stufe ───────────────────── */
.v3-page .stufen { display: grid; gap: 10px; }
.v3-page .stufe {
  display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 14px;
  align-items: center; border: 1px solid var(--v3-line);
  border-left: 4px solid var(--v3-ink3); border-radius: 12px;
  padding: 12px 14px; background: var(--v3-card);
}
/* Der linke Rand traegt den Zustand — zusaetzlich zum Text, nie als einziger
   Traeger (Farbe allein ist keine Information, Design-Referenz § 8). */
.v3-page .stufe.gelaufen { border-left-color: var(--v3-ok); }
.v3-page .stufe.jetzt    { border-left-color: var(--v3-brand); background: #f7faff; }
.v3-page .stufe.gated    { border-left-color: var(--v3-warn); }
.v3-page .stufe.wartet   { border-left-color: var(--v3-line); }
.v3-page .stufe .snr {
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--v3-ink3);
}
.v3-page .stufe .snr b {
  display: block; font-size: 14.5px; color: var(--v3-ink); letter-spacing: -.2px;
  text-transform: none; margin-top: 2px;
}
.v3-page .stufe .sbody { min-width: 0; }
.v3-page .stufe .sbody .st { font-size: 13.5px; font-weight: 750; }
.v3-page .stufe .sbody .sd {
  font-size: 12px; color: var(--v3-ink2); margin-top: 3px; line-height: 1.5;
}
.v3-page .stufe .skan { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.v3-page .stufe .srechts {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}
.v3-page .stufe .srechts .ab-badge { white-space: normal; text-align: right; }
@media (max-width: 780px) {
  .v3-page .stufe { grid-template-columns: 1fr; }
  .v3-page .stufe .srechts { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .v3-page .stufe .srechts .ab-badge { text-align: left; }
}
/* Tap-Ziel am Handy (Prototyp-Auflage 44 px). */
@media (max-width: 760px), (pointer: coarse) {
  .v3-page .stufe .srechts .v3-btn,
  .v3-page .pb .rechts .v3-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

/* ── Die Wellen-Blocker-Pruefbox ──────────────────────────────────────────── */
.v3-page .pb { display: grid; gap: 10px; }
.v3-page .pb .zeile {
  border: 1px solid var(--v3-line); border-radius: 12px; padding: 12px 14px;
  background: var(--v3-card);
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px;
  align-items: start;
}
.v3-page .pb .zeile.ok { border-color: #bfe6cf; background: #f6fcf8; }
.v3-page .pb .zeile.offen { border-color: #f7dfb4; background: #fffdf7; }
.v3-page .pb .zeichen { font-size: 16px; font-weight: 800; line-height: 1.3; }
.v3-page .pb .zeile.ok .zeichen { color: var(--v3-ok); }
.v3-page .pb .zeile.offen .zeichen { color: var(--v3-warn); }
.v3-page .pb .kopf {
  font-weight: 750; font-size: 13px; display: flex; gap: 8px; align-items: baseline;
  flex-wrap: wrap;
}
.v3-page .pb .kopf .prnr {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--v3-ink3);
}
.v3-page .pb .txt {
  font-size: 12.5px; color: var(--v3-ink2); margin-top: 5px; line-height: 1.5;
}
.v3-page .pb .txt .altjahre {
  display: block; margin-top: 4px; font-size: 11.5px; color: var(--v3-ink3);
}
.v3-page .pb .rechts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.v3-page .pb .rechts .ab-badge { white-space: normal; text-align: right; }
@media (max-width: 640px) {
  .v3-page .pb .zeile { grid-template-columns: 26px minmax(0, 1fr); }
  .v3-page .pb .rechts {
    grid-column: 1 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap;
  }
  .v3-page .pb .rechts .ab-badge { text-align: left; }
}

/* ── Statuszeichen ohne Emoji ─────────────────────────────────────────────── */
.v3-page .ok-zeichen, .v3-page .warn-zeichen {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px;
}
.v3-page .ok-zeichen { background: var(--v3-ok); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--v3-ok); }
.v3-page .warn-zeichen { background: var(--v3-warn); border-radius: 3px; }

/* ── Abstands-/Layout-Modifier statt style="" im Markup (§ 7.5) ───────────── */
.v3-page .abstand-o { margin-top: 14px; }
.v3-page .abstand-o.eng { margin-top: 12px; }
.v3-page .abstand-o.kein { margin-top: 0; }
.v3-page .secttl.erste { margin-top: 0; }
.v3-page .v3-cardpad.anschluss { padding-top: 12px; }
.v3-page .aktionszeile { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.v3-page .aktionszeile.mitte { align-items: center; }
.v3-page .aktionszeile.kein { margin-top: 0; }
.v3-page .fliesstext {
  font-size: 12.8px; color: var(--v3-ink2); line-height: 1.6; margin: 0 0 10px;
}
.v3-page .fliesstext.eng { margin: 0; }

/* Der Kontakt-Zeitstrahl steht direkt in der Karte (ohne `.v3-cardpad`-Hülle) —
   `.tx-hist` selbst hat `padding: 0`, sonst klebt die Liste am Kartenrand.
   Die Klasse gab es im Prototyp, beim Port fehlte die Regel (Review 04.08.). */
.v3-page .tx-hist.tx-histpad { padding: 6px 18px 14px; }

/* Turbo-Frames sind `display: inline` — trägt ein Frame Karteninhalt, muss er
   ein Block sein (dasselbe Muster wie `.wh-detail` aus W3). */
.v3-page turbo-frame.kaskade-nachweis { display: block; }

/* Ein Gate ist ein HALT, kein „bald" — Rand und Statuspille tragen denselben
   Ton (Review 04.08.: Rand war amber, Pille rot). */
.v3-page .stufe.gated { border-left-color: var(--v3-bad); }

/* ── Der Seitenkopf am Handy: stapeln statt quetschen ─────────────────────
   Gemessen am 04.08.2026 bei 390 px: `.v3-pagehead` ist eine Flex-Zeile, in
   der Titel und Aktions-Slot um denselben Platz konkurrieren. Traegt der Kopf
   mehr als einen Chip, schrumpft die Ueberschrift auf ~100 px und bricht
   Wort fuer Wort um (Kaskade 105 px / 352 px hoch, Befunde 97 px / 307 px).

   FW2 (04.08.2026) hat die Regel nur auf die Kaskaden-Seiten gelegt und den
   app-weiten Sweep als offenen Punkt notiert.

   FW3 (04.08.2026) loest ihn ein — gemessen auf dem Monatsabschluss bei 390 px:
   `.v3-pagehead` ist `flex-wrap: nowrap`, der Aktions-Slot kann also NICHT unter
   den Titel rutschen. Der Knopf „Zahlen dieses Jahres ansehen" endete bei
   x = 451 px auf einem 390-px-Bildschirm — die Hauptaktion der Seite war
   angeschnitten und nicht anklickbar. Das ist kein Schoenheitsfehler, sondern
   eine Sackgasse, und sie trifft JEDE v3-Seite mit mehr als einem Knopf im
   Kopf. Deshalb gilt die Regel ab hier app-weit; sie stapelt nur (Titel oben,
   Aktionen darunter) und aendert am Desktop nichts. */
@media (max-width: 640px) {
  .v3-page .v3-pagehead { display: block; }
  .v3-page .v3-pagehead h1 { font-size: 22px; }
  .v3-page .v3-pagehead .actions { margin-top: 10px; justify-content: flex-start; }
  .v3-page .v3-pagehead .actions .v3-btn { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FW3-FINANZEN — Angleich der restlichen Finanz-Seiten (Welle 3, 08/2026)

   Spec:   docs/mockups/prototyp-finanzen.html (Abschnitte „#monat", „#ja",
           „#forderungen", „#sepa")
   Vision: docs/superpowers/specs/2026-08-03-finanzen-vision.md
   Regeln: docs/mockups/feedback-register.md G1-G16

   BEFUND, der diese Welle ausgeloest hat: Commit a5c5e3bd (01.08.2026,
   „Sofort-Welle ehrlich machen") hat den kompletten `.fa-page`-Block aus dieser
   Datei entfernt — die Attrappen-Seiten waren weg, die ECHTEN Abschluss-Seiten
   benutzten die Klassen aber weiter. Monatsabschluss und Monats-Arbeitsplatz
   liefen seitdem ohne Formatierung.

   FW3 holt das bereichseigene CSS NICHT zurueck. Alles, wofuer es einen
   gemeinsamen Baustein gibt, ist im Markup darauf umgestellt (`.v3-pagehead`
   ueber `shared/_v3_page_head`, `.ab-kpis` ueber `shared/_v3_kpi_row`,
   `.heute-row` ueber `shared/_fall_zeile`, `.kette`/`a.kglied`, `.v3-table`,
   `.v3-callout`, `.ab-badge`, `.eg-gzeile`, `.dz`). Hier bleiben nur die vier
   Kleinteile, fuer die es keinen gemeinsamen Baustein gibt: die Jahres-Kaerte,
   der Monats-Streifen, die Konten-Ueberschrift und die Zweitzeile in einer
   Tabellenzelle. Alles unter `.v3-page`, nur --v3-*-Token, append-only.

   Der dunkle Konten-Kopf (`.fa-hero`, Verlaufsflaeche) kommt bewusst NICHT
   zurueck: EINE Farbwelt, heller Kopf auf hellem Grund (Design-Referenz § 5).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Aufeinanderfolgende Karten brauchen Luft, auch ohne `.secttl` dazwischen. */
.v3-page.fa-page > section { margin-bottom: 16px; }

/* ── Jahres-Kaerte der Jahresleiste ──────────────────────────────────────── */
.v3-page .fa-years { display: flex; gap: 12px; flex-wrap: wrap; }
.v3-page .fa-year {
  flex: 1 1 200px; min-width: 200px; background: #fafbfe;
  border: 1px solid var(--v3-line); border-radius: 12px; padding: 12px 14px;
}
.v3-page .fa-year.cur { border-color: #bcd3f7; background: #f3f7ff; }
.v3-page .fa-year.sel { border-color: var(--v3-brand); box-shadow: inset 0 0 0 1px var(--v3-brand); }
.v3-page .fa-year .y { font-size: 17px; font-weight: 800; margin-right: 6px; }
.v3-page .fa-year .jv {
  font-size: 12px; color: var(--v3-ink2); font-weight: 600; margin-top: 4px; line-height: 1.5;
}
.v3-page .fa-year .go {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--v3-brand);
  margin-top: 7px; margin-right: 12px; text-decoration: none;
}
.v3-page .fa-year .go:hover { text-decoration: underline; }

/* ── Monats-Streifen: zwoelf Kacheln, jede ein Link in ihren Arbeitsplatz ── */
.v3-page .fa-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.v3-page .fa-mo {
  display: block; text-align: center; text-decoration: none; color: inherit;
  border: 1px solid var(--v3-line); border-radius: 10px; padding: 9px 6px; background: #fff;
}
.v3-page .fa-mo:hover { border-color: var(--v3-brand); }
.v3-page .fa-mo:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .fa-mo b { display: block; font-size: 12px; }
.v3-page .fa-mo .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px;
  background: #cbd5e1;
}
.v3-page .fa-mo .st {
  display: block; font-size: 9.5px; font-weight: 700; color: var(--v3-ink3); margin-top: 3px;
  line-height: 1.3;
}
/* Der Zustand steht IMMER auch als Text darunter — Farbe allein traegt hier
   keine Information (Design-Referenz § 8). */
.v3-page .fa-mo.done { background: #f2faf5; border-color: #cdeeda; }
.v3-page .fa-mo.done .dot { background: var(--v3-ok); }
.v3-page .fa-mo.work { background: #fff8ec; border-color: #f3ddb0; }
.v3-page .fa-mo.work .dot { background: var(--v3-warn); }
.v3-page .fa-mo.future { opacity: .55; }
@media (max-width: 900px) {
  .v3-page .fa-months { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 520px) {
  .v3-page .fa-months { grid-template-columns: repeat(3, 1fr); }
  .v3-page .fa-mo { min-height: 44px; }
}

/* ── Kleinteile ──────────────────────────────────────────────────────────── */
.v3-page .fa-kontokopf {
  font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--v3-ink3); margin-bottom: 6px;
}
.v3-page .fa-zellsub {
  display: block; font-size: 11px; color: var(--v3-ink3); font-weight: 600; margin-top: 2px;
}
.v3-page .fa-guide { margin-top: 18px; }

/* ── Jahresabschluss (Live-JA): Tab-Leiste INNERHALB der Seite ────────────
   Abgrenzung zur Bereichs-Subnav: `.s3-navwrap.fin-subnav` navigiert ZWISCHEN
   den Seiten des Bereichs, `.fj-tabs` wechselt die Sicht INNERHALB einer Seite.
   Zwei Leisten uebereinander waeren zwei Navigationen — deshalb ist die innere
   flach und ohne Pillen-Optik, damit sie nie wie die aeussere aussieht. */
.v3-page .fj-tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--v3-line); margin: 18px 0 16px;
}
.v3-page .fj-tabs::-webkit-scrollbar { display: none; }
.v3-page .fj-tab {
  flex: 0 0 auto; white-space: nowrap; text-decoration: none;
  padding: 10px 14px; margin-bottom: -1px;
  font-size: 12.5px; font-weight: 700; color: var(--v3-ink2);
  border-bottom: 2px solid transparent;
}
.v3-page .fj-tab:hover { color: var(--v3-brand); border-bottom-color: var(--v3-line); }
.v3-page .fj-tab.on { color: var(--v3-brand); border-bottom-color: var(--v3-brand); }
.v3-page .fj-tab:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: -2px; }
@media (max-width: 760px), (pointer: coarse) {
  .v3-page .fj-tab { min-height: 44px; display: flex; align-items: center; }
}
/* Dieselbe Regel wie bei der Bereichs-Leiste (G16-Befund 04.08.2026): scrollt
   die Leiste, gehoert die aktive Sicht ins Bild — sonst sagt die Seite am Handy
   nicht, welche Sicht gerade offen ist. */
@media (max-width: 999px) {
  .v3-page .fj-tab.on { order: -1; }
}

/* ── Forderungen: die Struktur-Balken ─────────────────────────────────────
   Eine Zeile je Beitreibungs-Stand: Klartext-Label · Balken · Zahl, die ganze
   Zeile ein Link in genau diese Menge. Bewusst KEINE Ampel-Farben (Register-
   Regel C2: es gibt keine Schwellen, ab denen ein Bucket „rot" waere) — der
   Balken zeigt nur Groessenverhaeltnisse innerhalb der vier Zeilen. */
.v3-page .fo-balken { display: grid; gap: 2px; }
.v3-page a.fo-zeile {
  display: grid; grid-template-columns: minmax(150px, 190px) 1fr 74px; gap: 12px;
  align-items: center; padding: 8px 10px; border-radius: 9px;
  text-decoration: none; color: inherit;
}
.v3-page a.fo-zeile:hover { background: #f7faff; }
.v3-page a.fo-zeile:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: -2px; }
.v3-page .fo-zeile .fo-lab { font-size: 12.5px; font-weight: 650; color: var(--v3-ink2); }
.v3-page .fo-zeile .fo-bar {
  height: 9px; border-radius: 6px; background: #edf0f4; overflow: hidden;
}
.v3-page .fo-zeile .fo-bar i { display: block; height: 100%; background: var(--v3-brand); }
.v3-page .fo-zeile .fo-val {
  text-align: right; font-size: 12.5px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .v3-page a.fo-zeile { grid-template-columns: 1fr 64px; min-height: 44px; }
  .v3-page .fo-zeile .fo-bar { grid-column: 1 / -1; }
}

/* Die Chip-Reihe der Forderungs-Filter (Jahr + Menge). `.v3-seg` waere das
   gemeinsame Segment, taugt hier aber nicht: es sind bis zu zehn Eintraege mit
   Zahlen, die am Handy umbrechen muessen. */
.v3-page .fo-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.v3-page a.fo-chip {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 12.5px; font-weight: 650; color: var(--v3-ink2);
  background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: 999px;
  padding: 7px 13px;
}
.v3-page a.fo-chip:hover { border-color: var(--v3-brand); color: var(--v3-brand); }
.v3-page a.fo-chip:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page a.fo-chip.on { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.v3-page .fo-chip .ct { font-weight: 800; opacity: .82; font-variant-numeric: tabular-nums; }
/* F2/A6: die Zahl eines Chips steht VORN und traegt ueberall `b.num`
   (`FinanzenHelper#zahl_chip`) — dieselbe Optik wie `.ct`, damit der Wechsel
   der Leserichtung nicht auch die Optik wechselt. `.ct` bleibt fuer die
   Chip-Zeilen ausserhalb des Finanzbereichs. */
.v3-page .fo-chip .num { font-weight: 800; opacity: .82; }
.v3-page .fo-chiptrenner { width: 1px; height: 18px; background: var(--v3-line); }
@media (max-width: 760px), (pointer: coarse) {
  .v3-page a.fo-chip { min-height: 40px; }
}

/* Die Forderungs-Akte steht als Beistellspalte neben der Arbeitsliste und
   bleibt beim Scrollen stehen. Turbo-Frames sind `display: inline`. */
.v3-page .fo-split { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: start; }
@media (max-width: 1140px) { .v3-page .fo-split { grid-template-columns: minmax(0, 1fr); } }
.v3-page turbo-frame#forderungen_akte { display: block; }
.v3-page .fo-akte { position: sticky; top: 16px; }

/* Der Zeitstrahl der Forderungs-Akte steht ohne `.v3-cardpad`-Huelle in der
   Karte — sein Abschnitts-Titel braucht die Kartenpolsterung selbst. */
.v3-page .tx-sectttl.fo-aktetitel { padding: 0 18px; margin-top: 6px; }
/* Der Name in der Arbeitsliste ist der Weg in die Akte (Design-Referenz
   § 10.9: ein Fall mit Person ohne Link gilt als unfertig). */
.v3-page a.fo-name { display: block; text-decoration: none; color: inherit; }
.v3-page a.fo-name b { display: block; font-weight: 750; font-size: 13.5px; color: var(--v3-ink); }
.v3-page a.fo-name small { display: block; font-size: 11.5px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page a.fo-name:hover b { color: var(--v3-brand); }
.v3-page a.fo-name:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
/* Erklaerungs-Text in der Aufraeum-Liste: eine Zeile, Rest per Tooltip. */
.v3-page .fo-erklaerung {
  display: block; max-width: 380px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; color: var(--v3-ink2);
}
/* Der ausklappbare Dokumente-Block des Steuerbuero-Abgleichs. */
.v3-page .fo-docs { margin-top: 28px; border-top: 1px solid var(--v3-line); padding-top: 18px; }
.v3-page .fo-docs > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--v3-ink2); margin-bottom: 12px;
}
.v3-page .fo-docs > summary:hover { color: var(--v3-brand); }

/* G16-Befund FW3 (04.08.2026, 1280x900): Der Beisatz hinter einer KPI-Zahl
   (`wert_zusatz`) klebte an ihr — „0von 12". Der Partial setzt bewusst kein
   Leerzeichen ins Markup (es waere im HTML unsichtbar und je nach Zusatz
   falsch); der Abstand gehoert ins CSS. Gilt app-weit fuer jede Kachel aus
   `shared/_v3_kpi_row`. */
.v3-page .ab-kpi .kv small { margin-left: 5px; }

/* G16-Befund FW3 (04.08.2026, 390x844): Am Handy scrollt die Bereichs-Leiste
   waagerecht. Steht der aktive Reiter weit hinten (Monatsabschluss ist der
   siebte von acht), ist er ausserhalb des Bildes — die Seite beantwortet „wo
   bin ich?" dann NICHT, obwohl genau dafuer der Untertitel am aktiven Reiter
   haengt (G15).

   Der abgenommene Prototyp loest das genauso: dort steht auf JEDEM Bildschirm
   der aktive Reiter an erster Stelle der Leiste. `order: -1` bildet das ab,
   ohne die DOM-Reihenfolge (= die Kette der Vision) anzutasten und ohne eine
   Zeile JavaScript. Ab 1000 px bricht die Leiste ohnehin um, dort bleibt die
   Ketten-Reihenfolge unveraendert. */
@media (max-width: 999px) {
  .s3-navwrap.fin-subnav .s3-subtab.on { order: -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TEAM-ZEILE — „wer arbeitet heute" (Office „Mein Tag", 04.08.2026)

   WAS:   Eine Personen-Zeile mit Status rechts: Initialen · Name · Rolle bzw.
          Standort · Zustand (Ampel oder Knopf in die Abwesenheit).
   WARUM: Der abgenommene Office-Prototyp (docs/mockups/prototyp-office.html,
          Abschnitt „Team heute") braucht sie. `shared/_fall_zeile` passt
          NICHT: sie verlangt einen Grund im Klartext und ist fuer Arbeit
          gebaut, nicht fuer Anwesenheit — eine Team-Zeile ist kein Fall.
   SCOPE: Global unter `.v3-page` (Design-Referenz § 7.2), damit der naechste
          Bereich mit einer Personen-Liste sie benutzt statt sie nachzubauen.
          Append-only, nur --v3-*-Token.

   Die Personen-Zelle ist bewusst NICHT `shared/_v3_person_cell`: die arbeitet
   auf `Member` (Profil-Link ins Mitglied), hier steht ein `OfficeStaff` —
   eine Kollegin, kein Mitglied. Gleiches Aussehen, andere Gattung.
   ══════════════════════════════════════════════════════════════════════════ */
.v3-page .teamrow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--v3-line2);
}
.v3-page .teamrow:last-child { border-bottom: 0; }
.v3-page .teamrow:hover { background: #fafbfe; }
.v3-page .teamrow.ich { background: #f7faff; }
.v3-page .teamrow .tperson { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1 1 220px; }
.v3-page .teamrow .tav {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px;
  background: linear-gradient(140deg, #3f7ae6, #1e56c8);
}
.v3-page .teamrow .tperson b { display: block; font-weight: 700; font-size: 13.5px; color: var(--v3-ink); }
.v3-page .teamrow .tperson small { display: block; color: var(--v3-ink3); font-size: 11.5px; font-weight: 500; }
.v3-page .teamrow .tstatus {
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.v3-page .teamrow .tmeta { font-size: 11.5px; font-weight: 600; color: var(--v3-ink3); }
@media (max-width: 560px) {
  .v3-page .teamrow .tstatus { margin-left: 0; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   G16-BEFUNDE OFFICE „MEIN TAG" (05.08.2026, gemessen 390x844 und 1280x900)

   1) `.barrow` hatte keine einzige Mobil-Regel: `.k` fix 190 px + `.v` fix
      148 px sprengten die Karte, die Wertespalte stand ausserhalb (gemessen:
      Karte 332 px innen, `.v` bei right 407). Auf einer Zeile, deren ganze
      Aussage „gruen oder rot" ist, war damit genau die Aussage weg.
      Gilt app-weit — jede Seite mit Mess-Zeilen gewinnt.
   2) Ein Sprung auf einen Anker landete unter der klebenden Bereichs-Leiste
      (gemessen: Ziel bei top 56 px, Leisten-Unterkante bei 171 px). Der
      Modifier `.ankerziel` haelt den Platz frei, ohne style="" im Markup.
   3) Statuszeilen mit langem Text (`.teamrow .tstatus .v3-btn`) wurden am
      Handy rechts abgeschnitten — sie duerfen umbrechen.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .v3-page .barrow { flex-wrap: wrap; }
  .v3-page .barrow .k { flex: 1 1 100%; }
  .v3-page .barrow .track { flex: 1 1 60%; }
  .v3-page .barrow .v { flex: 0 0 auto; text-align: left; }
}
.v3-page .ankerziel { scroll-margin-top: 132px; }
@media (max-width: 999px) { .v3-page .ankerziel { scroll-margin-top: 150px; } }
.v3-page .teamrow .tstatus .v3-btn { white-space: normal; text-align: left; }

/* G16-Runde-2-Befund (05.08.2026): In der umgebrochenen `.barrow` stand der
   Balken naeher am naechsten Titel (11 px) als an seinem eigenen (13 px) —
   die Zeilen gruppierten optisch falsch. Der Zeilen-Abstand innerhalb einer
   Mess-Zeile muss kleiner sein als der Abstand ZWISCHEN zwei Zeilen. */
@media (max-width: 640px) {
  .v3-page .barrow { row-gap: 4px; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT-BAUTEILE — vier neue Bauteile aus dem abgenommenen Prototyp
   der Event-Akte (docs/mockups/prototyp-event-akte.html), 05.08.2026, #780.

   Alles GLOBAL unter `.v3-page` (Design-Referenz § 7.2), damit der naechste
   Bereich sie wiederverwendet statt sie nachzubauen. Nur `--v3-*`-Token,
   append-only, keine bestehende Regel umgeschrieben.

     .schritt-zeile — ein Arbeitsschritt: Titel, Regel, „x von y", Aktionen.
                      KEINE Ampel (Feedback-Register C2) und keine Frist (C3);
                      die Zeile sagt nur, was noch aussteht.
     .geldz         — der Geld-Mehrzeiler: Einnahmen / Ausgaben / die ehrliche
                      Luecken-Zeile / Ergebnis. Die Luecke ist ein eigener,
                      sichtbar unbezifferter Posten — sie wird nie geschaetzt.
     .gegen         — zwei Zahlen nebeneinander, die nicht zusammenpassen
                      (Buchungen im Netzwerk vs. Zahlungen beim Bezahldienst),
                      plus die Differenz als eigene Kachel.
     .v3-eckdaten   — Eckdaten als Schluessel-Wert-Raster (Anatomie wie .tx-kv,
                      aber als eigene Karte).
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-page .schritt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--v3-line2);
  align-items: center; }
.v3-page .schritt-zeile:last-child { border-bottom: 0; }
.v3-page .schritt-zeile .sz-titel { font-size: 13.5px; font-weight: 750; }
.v3-page .schritt-zeile .sz-regel { font-size: 12.5px; color: var(--v3-ink2);
  margin-top: 4px; line-height: 1.5; }
.v3-page .schritt-zeile .sz-zahl { text-align: right; font-size: 19px; font-weight: 800;
  letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-page .schritt-zeile .sz-zahl small { display: block; font-size: 10.5px; font-weight: 700;
  color: var(--v3-ink3); text-transform: uppercase; letter-spacing: .3px; }
.v3-page .schritt-zeile .sz-akt { grid-column: 1 / -1; display: flex; gap: 8px;
  flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 520px) {
  .v3-page .schritt-zeile { grid-template-columns: 1fr; }
  .v3-page .schritt-zeile .sz-zahl { text-align: left; }
}

.v3-page .geldz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--v3-line2); align-items: baseline; }
.v3-page .geldz:last-child { border-bottom: 0; }
.v3-page .geldz .gt { font-size: 13.5px; font-weight: 700; }
.v3-page .geldz .gr { font-size: 12.5px; color: var(--v3-ink2); margin-top: 3px;
  line-height: 1.5; grid-column: 1 / -1; }
.v3-page .geldz .gv { text-align: right; font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-page .geldz.luecke { background: #fffdf7; }
.v3-page .geldz.luecke .gv { color: var(--v3-warn); font-size: 14px; }
.v3-page .geldz.summe { background: #f7f9fc; }
.v3-page .geldz.summe .gt { font-size: 14px; font-weight: 800; }
.v3-page .geldz.summe .gv { font-size: 20px; }
@media (max-width: 520px) {
  .v3-page .geldz { grid-template-columns: 1fr; }
  .v3-page .geldz .gv { text-align: left; }
}

.v3-page .gegen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; }
.v3-page .gegen > div { border: 1px solid var(--v3-line); border-radius: 12px;
  padding: 11px 13px; background: #fbfcfe; }
.v3-page .gegen .gl { font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--v3-ink3); }
.v3-page .gegen .gz { font-size: 17px; font-weight: 800; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.v3-page .gegen .gs { font-size: 11.5px; color: var(--v3-ink3); margin-top: 2px;
  line-height: 1.4; }
.v3-page .gegen .diff { border-color: #f7dfb4; background: #fffdf7; }
.v3-page .gegen .diff .gz { color: var(--v3-warn); }

/* `.ev-kopf` hiess das Eckdaten-Raster, solange es nur die Event-Akte gab. Mit
   dem Job/Karriere-Bau (05.08.2026) bekam der zweite Bereich dasselbe Raster —
   der abgenommene Prototyp bat ausdruecklich darum, es NICHT zweimal zu bauen.
   Deshalb heisst es jetzt `.v3-eckdaten` und wohnt im gemeinsamen Bauteil
   `shared/_eckdaten` (B10). Der Alt-Name ist mit seinem einzigen Traeger
   (veranstaltungen/akte) mitgezogen worden — nachgeprueft per grep ueber alle
   Views, wie es die FW3-Regel verlangt. */
.v3-page .v3-eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px; }
.v3-page .v3-eckdaten > div { min-width: 0; }
.v3-page .v3-eckdaten span { display: block; font-size: 10.5px; letter-spacing: .6px;
  text-transform: uppercase; font-weight: 700; color: var(--v3-ink3); }
.v3-page .v3-eckdaten b { display: block; font-size: 13px; font-weight: 650; color: var(--v3-ink);
  margin-top: 2px; word-break: break-word; }
.v3-page .v3-eckdaten a { color: var(--v3-brand); font-weight: 700; text-decoration: none; }
.v3-page .v3-eckdaten a:hover { text-decoration: underline; }

/* G16-Runde-2-Befund (05.08.2026, Veranstaltungen #780): Der Aktions-Slot der
   Fall-Zeile ist fuer KNOEPFE gebaut (rechtsbuendig, umbrechend). Steht dort
   ein ganzes ENTSCHEIDUNGS-FORMULAR — wie in „Ohne Akte" (Veranstaltung
   waehlen + Grund + zwei Wege) —, klebte es als schmale Saeule am rechten Rand,
   und das Auswahlfeld schnitt seinen eigenen Platzhalter ab („— waehler").
   Deshalb: ein Formular-Behaelter, der die volle Slot-Breite nimmt und seine
   Formulare nebeneinander stellt, solange Platz ist. Global unter `.v3-page`
   (Design-Referenz § 7.2) — jede Warteschlange mit Entscheidungs-Formular in
   einer Fall-Zeile darf ihn benutzen, statt ihn nachzubauen. */
.v3-page .heute-row > .akt > .fz-formulare {
  flex: 1 1 100%;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  text-align: left;
}
.v3-page .heute-row > .akt > .fz-formulare .v3-field { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   JOB & KARRIERE — die Stellen-Akte (05.08.2026)

   Spec:  docs/mockups/prototyp-job-karriere.html (abgenommener Endziel-Prototyp)
   Scope: global unter `.v3-page` (Design-Referenz § 7.2) — die drei Bauteile
          hier sind bewusst KEINE Bereichs-Insel:
            .v3-erklaer  — der Erklaer-Aufklapper (Begriff/Zaehlregel/Gate) als
                           natives <details>, 0 Skripte. Regel § 6 war bisher
                           eine Regel ohne Bauteil.
            .dl-tab      — eine Drilldown-Tabelle, die am Handy zu gestapelten
                           Karten wird statt quer zu scrollen (Prototyp G10).
            .kand + .bw  — die Vorschlags-Zeile mit ihrer Beweisleiste; das
                           einzige wirklich bereichseigene Stueck, weil es die
                           sieben Dimensionen einer Bewertung abbildet.
          Nur --v3-*-Token, append-only, kein <style> in einer View.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Erklaer-Aufklapper (B11) ───────────────────────────────────────────────
   Der Griff sieht aus wie eine ERKLAERUNG, nie wie eine Aktion (Register-Regel
   G14): gestrichelte Unterkante + Fragezeichen-Kreis, kein Knopf-Rahmen. */
.v3-page .v3-erklaer { display: inline-block; max-width: 100%; vertical-align: top; }
.v3-page .v3-erklaer[open] { display: block; width: 100%; }
.v3-page .v3-erklaer > summary.v3-erklaer-griff {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 2px;
  font-size: 12.8px; font-weight: 650; color: var(--v3-brand); cursor: pointer;
  list-style: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--v3-brand) 45%, transparent); }
.v3-page .v3-erklaer > summary::-webkit-details-marker { display: none; }
.v3-page .v3-erklaer > summary::marker { content: ""; }
.v3-page .v3-erklaer > summary.v3-erklaer-griff::after {
  content: "?"; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: #e8effd; color: var(--v3-brand);
  font-size: 11px; font-weight: 800; }
.v3-page .v3-erklaer[open] > summary.v3-erklaer-griff::after { content: "\00d7"; }
.v3-page .v3-erklaer > summary:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .v3-erklaer-karte {
  margin: 8px 0 4px; background: #fbfcfe; border: 1px solid var(--v3-line);
  border-left: 4px solid var(--v3-brand); border-radius: 0 12px 12px 0; padding: 12px 14px;
  box-shadow: var(--v3-shadow); text-align: left; white-space: normal;
  overflow-wrap: anywhere; }
.v3-page .v3-erklaer-art { font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--v3-ink3); }
.v3-page .v3-erklaer-titel { font-size: 14.5px; font-weight: 800; letter-spacing: -.2px;
  margin-top: 2px; color: var(--v3-ink); }
.v3-page .v3-erklaer-karte p { margin: 9px 0 0; font-size: 12.8px; line-height: 1.55;
  color: var(--v3-ink2); }
.v3-page .v3-erklaer-karte ul { margin: 9px 0 0; padding-left: 19px; font-size: 12.5px;
  line-height: 1.55; color: var(--v3-ink2); }
.v3-page .v3-erklaer-karte li { margin: 4px 0; }
.v3-page .v3-erklaer-gate { margin-top: 12px; border-left: 4px solid var(--v3-warn);
  background: #fdf3e2; border-radius: 0 10px 10px 0; padding: 9px 12px; font-size: 12.5px;
  color: var(--v3-ink2); }
.v3-page .v3-erklaer-gate b { color: var(--v3-ink); }

/* ── Drilldown-Tabelle: am Handy gestapelt statt quer ───────────────────────
   Der Feldname kommt aus data-label. Ohne diese Regel schiebt jede sechsspaltige
   Tabelle die SEITE horizontal (Prototyp-Befund G10/K1). */
.v3-page .dl-tab td.r, .v3-page .dl-tab td.nowrap { white-space: nowrap; }
.v3-page .dl-tab td.dl-erst { min-width: 210px; }
.v3-page .dl-tab td.dl-erst small { display: block; font-size: 11.5px; font-weight: 500;
  color: var(--v3-ink3); margin-top: 2px; }
@media (max-width: 760px) {
  .v3-page .dl-tab, .v3-page .dl-tab tbody, .v3-page .dl-tab tr, .v3-page .dl-tab td {
    display: block; width: auto; }
  .v3-page .dl-tab thead { display: none; }
  .v3-page .dl-tab tr { border: 1px solid var(--v3-line); border-radius: 12px;
    padding: 11px 13px; margin: 0 0 10px; background: #fff; }
  .v3-page .dl-tab tr:hover { background: #fff; }
  .v3-page .dl-tab td { border: 0; padding: 3px 0; white-space: normal; }
  .v3-page .dl-tab td::before { content: attr(data-label); display: block; font-size: 11.5px;
    font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--v3-ink3);
    margin-bottom: 2px; }
  .v3-page .dl-tab td.dl-erst { padding: 0 0 7px; min-width: 0; }
  .v3-page .dl-tab td.dl-erst::before { display: none; }
  .v3-page .dl-tab td.dl-akt { margin-top: 8px; }
  .v3-page .dl-tab td.dl-akt::before { display: none; }
  .v3-page .dl-tab td.dl-akt .v3-btn { width: 100%; justify-content: center; }
  .v3-page .dl-tab td.r, .v3-page .dl-tab td.c { text-align: left; white-space: normal; }
}

/* ── Vorschlags-Zeile: Haekchen · Person · Beweisleiste · Punktwert ─────────
   Am Handy rutscht der Punktwert unter den Namen, die Aktionen ganz nach unten.
   Das Kaestchen haengt per HTML5-`form`-Attribut an der Sammel-Leiste darueber
   (Design-Referenz § 9a) — die Zeile bleibt dadurch ein normaler Textblock. */
.v3-page .kand { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px;
  padding: 13px 16px 13px 4px; border-bottom: 1px solid var(--v3-line2); align-items: start; }
.v3-page .kand:last-of-type { border-bottom: 0; }
.v3-page .kand:hover { background: #fafbfe; }
.v3-page .kand .kpick { display: grid; place-items: center; min-height: 44px; }
.v3-page .kand .kpick label { display: grid; place-items: center; width: 44px; height: 44px;
  cursor: pointer; }
.v3-page .kand .kmain { min-width: 0; }
.v3-page .kand .kzeile { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.v3-page .kand .kzeile .mcell { flex: 1 1 180px; min-width: 0; }
.v3-page .kand .kwert { margin-left: auto; text-align: right; white-space: nowrap;
  font-size: 21px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.v3-page .kand .kwert small { display: block; font-size: 10.5px; font-weight: 700;
  color: var(--v3-ink3); text-transform: uppercase; letter-spacing: .3px; }
.v3-page .kand .kakt { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 620px) {
  .v3-page .kand .kakt .v3-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Beweisleiste: EIN Satz + sieben benannte Balken + Herkunfts-Etiketten ──
   Ein leerer Balken ist GRAU (= wir wissen es nicht), nie rot (= passt nicht).
   Die Breite kommt aus dem Punktwert und steht deshalb als `style` im Markup
   (Design-Referenz § 7.5, „genuin dynamische Werte"). */
.v3-page .bw { margin-top: 8px; }
.v3-page .bw-satz { font-size: 12.8px; line-height: 1.55; color: var(--v3-ink); }
.v3-page .bw-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 5px 16px; margin-top: 9px; }
.v3-page .bw-dim { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v3-page .bw-dim .bd-l { flex: 0 0 96px; font-size: 11.5px; font-weight: 700;
  color: var(--v3-ink3); }
.v3-page .bw-dim .bd-t { flex: 1 1 auto; min-width: 30px; height: 8px; border-radius: 5px;
  background: #eef1f6; overflow: hidden; }
.v3-page .bw-dim .bd-t i { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #3f7ae6, #1e56c8); }
.v3-page .bw-dim .bd-t i.leer { background: #dde3ec; }
.v3-page .bw-dim .bd-v { flex: 0 0 52px; text-align: right; font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--v3-ink2); }
.v3-page .bw-unbekannt { margin-top: 8px; font-size: 12.5px; line-height: 1.5;
  color: var(--v3-ink2); }
.v3-page .bw-quelle { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.v3-page .bw-q { font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--v3-ink3); background: #f1f4f8; border-radius: 6px;
  padding: 2px 7px; }
.v3-page .bw-q.fehlt { background: #fdf3e2; color: #a15c00; }

/* ── Schritt-Strecke (Dry-Run → scharf), aus dem Prototyp uebernommen ───────
   Bisher gab es nur `.schritt-zeile` (eine Zeile je Schritt); dies ist die
   nebeneinander stehende Fassung fuer kurze Strecken mit Gates. */
.v3-page .schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px; }
.v3-page .schritt { border: 1px solid var(--v3-line); border-top: 4px solid #cbd5e1;
  border-radius: 12px; padding: 12px 14px; background: #fff; }
.v3-page .schritt.done { border-top-color: #22c55e; }
.v3-page .schritt.now { border-top-color: var(--v3-brand); }
.v3-page .schritt.gate { border-top-color: #f59e0b; }
.v3-page .schritt .sn { font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--v3-ink3); }
.v3-page .schritt .sh { font-size: 13.5px; font-weight: 750; margin-top: 3px; }
.v3-page .schritt .sx { font-size: 12px; color: var(--v3-ink2); margin-top: 5px;
  line-height: 1.5; }
.v3-page .schritt .sf { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; }

/* Eine scharfe Aktion (Geld/Aussenwirkung) traegt einen eigenen Rand, damit sie
   sich von einer harmlosen unterscheidet (Register-Regel G14). */
.v3-page .v3-btn.scharf { box-shadow: 0 0 0 2px #fde1b7, var(--v3-shadow); }

/* Kettenband-Gruppen: „liefert an" / „liest von" als je eigene Halbe. */
.v3-page .kette-gruppe { margin-bottom: 12px; }
.v3-page .kette-gruppe:last-child { margin-bottom: 0; }

/* ── TAP-ZIELE AM HANDY (G16-Messung 05.08.2026, Job/Karriere-Bau) ──────────
   BEFUND aus der Eigenmessung bei 390 px: `.v3-chip` mass 32 px, `.v3-btn.sm`
   31 px, `.cbx` 19 px, `.v3-mehr` unter 30 px — alle unter den 36 px, die die
   Design-Referenz § 8 fordert, und deutlich unter den 44 px, die der
   abgenommene Prototyp am Handy verlangt. Der Prototyp hatte genau diese Regel
   mitgeliefert und ausdrücklich vermerkt, dass sie in v3_design.css FEHLT.

   Deshalb steht sie hier — GLOBAL unter `.v3-page`, nicht in einer Bereichs-
   Insel: es ist kein Job-Problem, sondern ein App-Problem. Sie greift nur bei
   schmalem Bildschirm oder grobem Zeiger (Finger), am Desktop ändert sich
   nichts. Reine Mindesthöhe — Farben, Abstände und Layout bleiben unberührt. */
@media (max-width: 760px), (pointer: coarse) {
  .v3-page .v3-btn,
  .v3-page .v3-chip,
  .v3-page .v3-tab,
  .v3-page .v3-mehr,
  .v3-page .v3-iconbtn,
  .v3-page .kglied,
  .v3-page .ab-kpi,
  .v3-page .s3-subtab { min-height: 44px; }
  .v3-page .v3-btn,
  .v3-page .v3-chip { padding-top: 11px; padding-bottom: 11px; }
  .v3-page .v3-mehr { display: inline-flex; align-items: center; }
  .v3-page .cbx { width: 24px; height: 24px; }
  .v3-page .v3-erklaer > summary.v3-erklaer-griff { min-height: 44px; }
  .v3-page .v3-field input[type="text"],
  .v3-page .v3-field input[type="search"],
  .v3-page .v3-field input[type="email"],
  .v3-page .v3-field input[type="date"],
  .v3-page .v3-field input[type="datetime-local"],
  .v3-page .v3-field select { min-height: 44px; }
  /* Mehrfach-Auswahl: das Tap-Ziel ist die ganze Zeile, nicht das Kaestchen
     (Career-Vertrag v1.2, 12.08.2026 — erste Nutzung von email/datetime-local
     in einem `.v3-field`, dabei fiel die Luecke auf). */
  .v3-page .v3-fieldchecks label,
  .v3-page .eg-check { min-height: 44px; }
}

/* ── G16-Befund (05.08.2026): „1von 8" in der KPI-Kachel ────────────────────
   `shared/_v3_kpi_row` setzt den Beisatz (`wert_zusatz`) direkt hinter die Zahl
   ohne Trennung — das las sich in JEDER Kachel mit Anteil als ein Wort
   („1von 8", „150von 195"). Betrifft nicht nur diesen Bereich, sondern jede
   Seite, die den gemeinsamen Bauteil mit Beisatz benutzt; deshalb hier global
   und nicht in einer Bereichs-Insel. Reiner Abstand, keine Farbe, kein Layout. */
.v3-page .ab-kpi .kv small { margin-left: 5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   VORSTANDS-BAU (05.08.2026) — drei Klassen, die Views app-weit benutzen,
   ohne dass es sie je gab. Append-only, global unter `.v3-page` (§ 7.2), NICHT
   als Bereichs-Insel: alle drei haben Träger in mehreren Bereichen.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ein Fehler darf nicht aussehen wie ein Hinweis. `.v3-callout` kannte bisher
   nur `.warn` und `.ok`; `.bad` stand in drei Views (vorstand/jahreswerte,
   stellen/neu, karriere/index) und rutschte still ins neutrale Info-Blau. */
.v3-page .v3-callout.bad {
  border-left-color: var(--v3-bad);
  background: #fdeaec;
}

/* Der destruktive Knopf. Die zwei vorhandenen Rot-Varianten sind beide auf
   ihren Bereich gescopet (`.s3-w3 .s3-danger`, `.wt-acts .wt-danger`) und damit
   anderswo wirkungslos — „Entfernen" sah aus wie „Öffnen". */
.v3-page .v3-btn.gefahr {
  color: var(--v3-bad);
  border-color: #f2c3c9;
}
.v3-page .v3-btn.gefahr:hover { background: #fdf5f6; }

/* Die Aktionszeile im Leerzustand. `.v3-empty` definierte `.et`/`.es`, aber
   nicht den Knopf-Slot `.ea` — 14 Views tragen ihn, überall ohne Abstand. */
.v3-page .v3-empty .ea {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Die Spalten-Umbruchregel (`:5326`) verliert gegen ihre eigenen Modifier: sie
   greift auf `.v3-page .v3-cols` (0,2,0), die Varianten stehen auf
   `.v3-page .v3-cols.c11` (0,3,0) — der Umbruch kam am Handy also nie an, in
   KEINEM Bereich. Gemessen am 05.08.2026 im Vorstands-Bau: zwei Karten
   nebeneinander bei 390 px. Der Prototyp hatte dafür `!important`; hier reicht
   dieselbe Spezifität. Reiner Umbruch, keine Farbe, kein Abstand. */
@media (max-width: 980px) {
  .v3-page .v3-cols.c11,
  .v3-page .v3-cols.c21,
  .v3-page .v3-cols.c12,
  .v3-page .v3-cols.c3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RB — ROTES BUCH (#790, 05.08.2026)

   Spec: docs/mockups/prototyp-rotes-buch.html (abgenommen)

   Was hier NICHT steht, weil es der Bereich aus dem Design-System erbt:
     Seitenkopf (B1) · KPI-Reihe (B2) · Kettenband (.kette/.kglied) ·
     Stufen-Kette (.stufen/.stufe) · Lauf-Karten (.lks/.lk) · Fall-Zeile
     (.heute-row) · Gegenueberstellung (.gegen) · Tabellen (.v3-table/.dl-tab) ·
     Formularfelder (.v3-field/.v3-fieldgrid) · Badges · Leerzustaende.

   Bereichseigen sind genau SECHS Bauteile, alle mit `rb-`-Praefix, damit sie
   nie versehentlich eine globale Klasse ueberschreiben:
     .rb-jahre / a.rb-jkarte   Eine Karte je Jahrgang auf der Uebersicht
     .rb-teile / .rb-teil      Die sieben Teile des Buchs, Spalte „Stand"
     .rb-pruef                 Eine Pruefzeile des Pruefberichts
     .rb-zliste / .rb-zzeile   Die Zaehlliste („wer steht im Buch")
     .rb-umschlag / .rb-umasse Die Umschlag-Vorschau (U4 · Ruecken · U1)
     .rb-formel                Die sichtbare Herleitung einer gerechneten Zahl
   Dazu EIN Modifier fuer ein bestehendes globales Bauteil (.stufe.reisst) —
   die Stufen-Kette hatte bisher keinen roten Zustand.

   ⚠️ Regel aus dem dokumentierten CSS-Loeschvorfall (Design-Referenz § 9c-FW3):
   Dieser Block darf nur zusammen mit einem `grep` ueber alle Traeger-Views
   geloescht werden. Traeger sind ausschliesslich app/views/red_book/*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Die Stufen-Kette bekommt ihren roten Zustand ─────────────────────────── */
.v3-page .stufe.reisst { border-left-color: var(--v3-bad); background: #fffafa; }

/* ── Jahres-Karte ─────────────────────────────────────────────────────────── */
.v3-page .rb-jahre {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}
.v3-page a.rb-jkarte {
  display: block; background: var(--v3-card); border: 1px solid var(--v3-line);
  border-left: 4px solid var(--v3-ink3); border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--v3-shadow); text-decoration: none; color: inherit; min-width: 0;
}
.v3-page a.rb-jkarte:hover { border-color: var(--v3-brand); background: #f7faff; }
.v3-page a.rb-jkarte:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page a.rb-jkarte.ton-ok { border-left-color: var(--v3-ok); }
.v3-page a.rb-jkarte.ton-brand { border-left-color: var(--v3-brand); }
.v3-page .rb-jkarte .rb-jjahr { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.v3-page .rb-jkarte .rb-jjahr b { font-size: 21px; font-weight: 800; letter-spacing: -.5px; }
.v3-page .rb-jkarte .rb-jstand {
  font-size: 12.5px; color: var(--v3-ink2); margin-top: 7px; line-height: 1.5;
}
.v3-page .rb-jkarte .rb-jzahlen {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed var(--v3-line);
}
.v3-page .rb-jkarte .rb-jzahlen > div { min-width: 0; }
.v3-page .rb-jkarte .rb-jzahlen .zl {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .rb-jkarte .rb-jzahlen .zv {
  display: block; font-size: 15px; font-weight: 800; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.v3-page .rb-jkarte .rb-jfuss {
  margin-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--v3-brand);
}

/* ── Teil-Zeile ───────────────────────────────────────────────────────────── */
.v3-page .rb-teil {
  display: grid; grid-template-columns: 32px minmax(0, 1.5fr) minmax(0, 1.2fr) auto;
  gap: 8px 14px; padding: 13px 18px; border-bottom: 1px solid var(--v3-line2);
  align-items: start;
}
.v3-page .rb-teil:last-child { border-bottom: 0; }
.v3-page .rb-teil:hover { background: #fafbfe; }
.v3-page .rb-teil.veraltbar { background: #fffdf7; }
.v3-page .rb-teil .rb-tnr {
  font-size: 13px; font-weight: 800; color: var(--v3-ink3);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.v3-page .rb-teil .rb-ttitel { font-size: 13.5px; font-weight: 750; min-width: 0; }
.v3-page .rb-teil .rb-ttitel small {
  display: block; font-size: 11.5px; font-weight: 500; color: var(--v3-ink3); margin-top: 2px;
}
.v3-page .rb-teil .rb-tquelle {
  font-size: 12.5px; color: var(--v3-ink2); line-height: 1.5; min-width: 0;
}
.v3-page .rb-teil .rb-tmarke {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; color: var(--v3-ink3);
  background: #f1f4f8; border-radius: 6px; padding: 2px 7px; margin-top: 4px;
}
.v3-page .rb-teil .rb-tmarke.app { background: #e8effd; color: var(--v3-brand); }
.v3-page .rb-teil .rb-tmarke.word { background: #fdf3e2; color: #a15c00; }
.v3-page .rb-teil .rb-tseiten {
  text-align: right; white-space: nowrap; font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.v3-page .rb-teil .rb-tseiten small {
  display: block; font-size: 10.5px; font-weight: 700; color: var(--v3-ink3);
  text-transform: uppercase; letter-spacing: .3px;
}
@media (max-width: 820px) {
  .v3-page .rb-teil { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .v3-page .rb-teil .rb-tquelle { grid-column: 2 / -1; }
}
@media (max-width: 520px) {
  .v3-page .rb-teil { grid-template-columns: 1fr; }
  .v3-page .rb-teil .rb-tnr { display: none; }
  .v3-page .rb-teil .rb-tseiten { text-align: left; }
}

/* ── Pruefzeile ───────────────────────────────────────────────────────────── */
.v3-page .rb-pruef {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px;
  align-items: start; border: 1px solid var(--v3-line); border-radius: 12px;
  padding: 12px 14px; background: var(--v3-card); margin-bottom: 9px;
}
.v3-page .rb-pruef:last-child { margin-bottom: 0; }
.v3-page .rb-pruef.gruen { border-color: #bfe6cf; background: #f6fcf8; }
.v3-page .rb-pruef.rot { border-color: #f4bdc4; background: #fffafa; }
.v3-page .rb-pruef.fehlt { border-color: #f4bdc4; background: #fffafa; }
.v3-page .rb-pruef.ohne_bericht { border-color: var(--v3-line); background: #fbfcfe; }
.v3-page .rb-pruef .rb-pz { font-size: 16px; font-weight: 800; line-height: 1.3; }
.v3-page .rb-pruef.gruen .rb-pz { color: var(--v3-ok); }
.v3-page .rb-pruef.rot .rb-pz,
.v3-page .rb-pruef.fehlt .rb-pz { color: var(--v3-bad); }
.v3-page .rb-pruef.ohne_bericht .rb-pz { color: var(--v3-ink3); }
.v3-page .rb-pruef .rb-pk {
  font-weight: 750; font-size: 13px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.v3-page .rb-pruef .rb-pk .rb-pnr {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--v3-ink3);
}
.v3-page .rb-pruef .rb-pt { font-size: 12.5px; color: var(--v3-ink2); margin-top: 5px; line-height: 1.5; }
.v3-page .rb-pruef .rb-pw { font-size: 12.5px; font-weight: 700; margin-top: 5px; }
.v3-page .rb-pruef .rb-pr { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
@media (max-width: 640px) {
  .v3-page .rb-pruef { grid-template-columns: 26px minmax(0, 1fr); }
  .v3-page .rb-pruef .rb-pr { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* ── Zaehlliste ───────────────────────────────────────────────────────────── */
.v3-page .rb-zliste { display: flex; flex-direction: column; }
.v3-page .rb-zzeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--v3-line2); align-items: baseline;
}
.v3-page .rb-zzeile:last-child { border-bottom: 0; }
.v3-page .rb-zzeile:hover { background: #fafbfe; }
.v3-page .rb-zzeile .rb-zt { font-size: 13.5px; font-weight: 750; min-width: 0; }
.v3-page .rb-zzeile .rb-zr {
  grid-column: 1 / -1; font-size: 12.5px; color: var(--v3-ink2); line-height: 1.5;
}
.v3-page .rb-zzeile .rb-zn {
  text-align: right; font-size: 19px; font-weight: 800; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.v3-page .rb-zzeile.summe { background: #f7f9fc; }
.v3-page .rb-zzeile.summe .rb-zt { font-weight: 800; }
.v3-page .rb-zzeile.minus .rb-zn { color: var(--v3-warn); }
.v3-page .rb-zzeile.ergebnis .rb-zn { color: var(--v3-ok); }
@media (max-width: 520px) {
  .v3-page .rb-zzeile { grid-template-columns: 1fr; }
  .v3-page .rb-zzeile .rb-zn { text-align: left; white-space: normal; }
}

/* ── Umschlag-Vorschau + Herleitung ───────────────────────────────────────── */
.v3-page .rb-umschlag {
  display: grid; grid-template-columns: 1fr 44px 1fr; gap: 0;
  border: 1px solid var(--v3-line); border-radius: 8px; overflow: hidden;
  background: var(--v3-card); box-shadow: var(--v3-shadow); min-height: 210px;
}
.v3-page .rb-umschlag > div {
  padding: 14px 12px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; min-width: 0;
}
.v3-page .rb-umschlag .rb-u4 { background: #7f1d24; color: #fff; }
.v3-page .rb-umschlag .rb-uruecken {
  background: #6d181f; color: #fff; border-left: 1px solid rgba(255, 255, 255, .25);
  border-right: 1px solid rgba(255, 255, 255, .25); padding: 10px 2px;
}
.v3-page .rb-umschlag .rb-uruecken span {
  writing-mode: vertical-rl; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  white-space: nowrap;
}
.v3-page .rb-umschlag .rb-u1 { background: #7f1d24; color: #fff; }
.v3-page .rb-umschlag .rb-u1 .rb-umarke {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; opacity: .85;
}
.v3-page .rb-umschlag .rb-u1 .rb-utitel { font-size: 15px; font-weight: 800; margin-top: 8px; }
.v3-page .rb-umschlag .rb-u1 .rb-ujahr {
  font-size: 24px; font-weight: 800; margin-top: 6px; letter-spacing: -.5px;
}
.v3-page .rb-umschlag .rb-u1 .rb-uzeile { font-size: 10px; margin-top: 10px; opacity: .85; }
.v3-page .rb-umschlag .rb-u4 .rb-uleer { font-size: 11px; opacity: .7; }
.v3-page .rb-umasse {
  display: grid; grid-template-columns: 1fr 44px 1fr; gap: 0; margin-top: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--v3-ink3); text-align: center;
}
.v3-page .rb-formel {
  background: #f7f9fc; border: 1px solid var(--v3-line2); border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--v3-ink2);
}
.v3-page .rb-formel b { color: var(--v3-ink); }
.v3-page .rb-formel .rb-gleichung {
  display: block; font-size: 13px; font-weight: 750; color: var(--v3-ink);
  margin-bottom: 6px; overflow-wrap: anywhere;
}

/* Buchzeilen-Block der Vorschau: die gerenderten Druckzeilen als ruhiger
   Monospace-Kasten. Er ist keine Tabelle und keine Karte — er zeigt Text so,
   wie er im Buch steht. */
.v3-page .rb-buchzeilen {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.55; color: var(--v3-ink2);
  background: #f7f9fc; border: 1px solid var(--v3-line2); border-radius: 10px;
  padding: 8px 11px; white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Schalter-Zeile im Sonderfall-Formular. Sie entstand aus dem kritischen
   G16-Befund vom 05.08.2026: drei Kaestchen lagen in EINEM <label>, und ein
   Label ohne `for` bindet an das ERSTE Element darin — der Klick auf
   „Geburtsdatum" schaltete gemessen die ADRESSE ab. Ein Kaestchen, ein Label,
   eine Zeile mit ordentlichem Tap-Ziel. */
.v3-page .rb-schalter {
  display: flex; align-items: flex-start; gap: 10px; min-height: 36px;
  padding: 7px 0; font-size: 12.8px; line-height: 1.5; color: var(--v3-ink2);
  cursor: pointer;
}
.v3-page .rb-schalter + .rb-schalter { border-top: 1px solid var(--v3-line2); }
.v3-page .rb-schalter input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.v3-page .rb-schalter span { min-width: 0; }
.v3-page .rb-schalter:hover { color: var(--v3-ink); }
@media (max-width: 760px), (pointer: coarse) {
  .v3-page .rb-schalter { min-height: 44px; align-items: center; }
  .v3-page .rb-schalter input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DW1 — TAP-ZIELE UND EIN VERGESSENER BEISATZ (05.08.2026)

   Was: drei kleine, app-weite Korrekturen aus der G16-Messung des Endziel-
   Prototyps „Anfragen & WhatsApp" (390 x 844 und 1440 x 900 gemessen).
   Warum global: es sind keine Bereichs-Probleme, sondern App-Probleme — sie
   treffen jede Seite, die die Bauteile benutzt (Design-Referenz § 7.2, § 9f).

   1. „Zuruecksetzen" in einer Chip-Reihe war 18 px hoch und stand damit
      zwischen lauter 44-px-Chips: derselbe Rang, halbe Trefferflaeche.
   2. Auswahl- und Eingabefelder in `.v3-field` waren 35 px hoch — unter den
      44 px, die der Pruefauftrag verlangt.
   3. Ein `.ab-badge` traegt manchmal keinen Status, sondern einen ganzen Satz
      (z. B. „Mensch-Gate bleibt: Geld, Kuendigung, Identitaet"). Mit
      `white-space: nowrap` schob er bei 390 px die SEITE auf 552 px. Dieselbe
      Regel gilt seit FW1 fuer `.secttl .ab-badge` — sie fehlte fuer die
      Stufen-Kette und die rechte Spalte einer Stufe.

   Bereichsfremd bewusst mitgenommen: der Beisatz der Ticket-Alterszeile stand
   als `style=""` im Markup (Design-Referenz § 7.5 verbietet das fuer Design).
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-page .stufe .skan .ab-badge,
.v3-page .stufe .srechts .ab-badge { white-space: normal; text-align: left; }

.v3-page .kt-agenote { font-size: 10.5px; color: var(--v3-ink3); font-weight: 600; margin-left: 4px; }

@media (max-width: 760px), (pointer: coarse) {
  .v3-page .v3-chips .reset { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .v3-page .v3-field select,
  .v3-page .v3-field input[type="text"],
  .v3-page .v3-field input[type="search"],
  .v3-page .v3-field input[type="email"],
  .v3-page .v3-field input[type="date"],
  .v3-page .v3-field input[type="datetime-local"] { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFICE — RUNDGANG TAG 1 (06.08.2026)

   Der Office-Bereich hatte EINE Leiste, aber DREI Bildsprachen: „Mein Tag" war
   v3, das Weekly trug 6 verbotene Alt-Klassen, Zustaendigkeiten und Urlaub
   waren rohes Tailwind. Dieser Abschnitt traegt die wenigen Bauteile, die es im
   gemeinsamen Baukasten noch nicht gab — alles andere kommt aus § 4.

   Praefixe: .wk- (Weekly) · .zu- (Zustaendigkeiten) · .ur- (Urlaub).
   Nur --v3-*-Token, keine Insel, keine zweiten Farbnamen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Liste in einer Karte (Protokoll, Beschluesse, Historie) */
.v3-page .v3-liste { list-style: none; margin: 0; padding: 0; }
.v3-page .v3-liste > li { border-bottom: 1px solid var(--v3-line2); }
.v3-page .v3-liste > li:last-child { border-bottom: 0; }

/* ── Weekly ──────────────────────────────────────────────────────────────── */
.v3-page .wk-team { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.v3-page .wk-person { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 13px; border-radius: 12px; flex: none; min-width: 84px; }
.v3-page .wk-pname { font-size: 12px; font-weight: 700; color: var(--v3-ink); }
.v3-page .wk-pcount { font-size: 10.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .wk-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.v3-page .wk-lanekopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v3-page .wk-lanekopf h2 { margin: 0; }
.v3-page .wk-fortschritt { display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: var(--v3-ink3); }
.v3-page .wk-bar { width: 62px; height: 6px; border-radius: 99px; background: #eef1f6;
  overflow: hidden; display: inline-block; }
.v3-page .wk-bar > i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #3f7ae6, #1e56c8); }
.v3-page .wk-beschluesse { max-height: 70vh; overflow-y: auto; }
.v3-page .wk-histzeile { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 12px 18px; text-decoration: none; color: inherit; flex-wrap: wrap; }
.v3-page .wk-histzeile:hover { background: #fafbfe; }
.v3-page .wk-histmeta { font-size: 12px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .wk-histgo { color: var(--v3-brand); font-weight: 700; margin-left: 8px; }
/* Die Drop-Zonen liegen jetzt auf .v3-card — der gestrichelte Rahmen der
   „Unzugeordneten" bleibt als Einladung erhalten. */
.v3-page .wk-offen { border-style: dashed; }

/* ── Zustaendigkeiten ────────────────────────────────────────────────────── */
.v3-page .zu-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.v3-page .zu-karte { border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  padding: 14px 16px; background: #fff; box-shadow: var(--v3-shadow); }
.v3-page .zu-kopf { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.v3-page .zu-kopf b { font-size: 13.5px; font-weight: 750; }
.v3-page .zu-zeile { display: flex; align-items: baseline; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--v3-line2); font-size: 12.5px; }
.v3-page .zu-zeile:last-child { border-bottom: 0; }
.v3-page .zu-zeile .zu-lbl { color: var(--v3-ink3); flex: 1; min-width: 0; }
.v3-page .zu-zeile .zu-wert { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Urlaub ──────────────────────────────────────────────────────────────── */
.v3-page .ur-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.v3-page .ur-tagkopf { font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--v3-ink3); text-align: center; padding: 4px 0; }
.v3-page .ur-tag { border: 1px solid var(--v3-line2); border-radius: 9px; min-height: 54px;
  padding: 5px 6px; background: #fff; font-size: 11px; }
.v3-page .ur-tag.ur-leer { background: #fbfcfe; border-style: dashed; }
.v3-page .ur-tag.ur-heute { border-color: var(--v3-brand); box-shadow: inset 0 0 0 1px var(--v3-brand); }
.v3-page .ur-tag.ur-wochenende { background: #f7f9fc; }
.v3-page .ur-tagnr { font-weight: 800; color: var(--v3-ink3); font-variant-numeric: tabular-nums; }
.v3-page .ur-eintrag { display: block; margin-top: 3px; border-radius: 6px; padding: 2px 5px;
  font-size: 10.5px; font-weight: 700; text-decoration: none; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.v3-page .ur-urlaub { background: #e6f6ec; color: #12703f; }
.v3-page .ur-krank { background: #fdeaec; color: #a52b3a; }
.v3-page .ur-sonstig { background: #e8effd; color: #1e56c8; }
@media (max-width: 700px) {
  .v3-page .ur-monat { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .v3-page .ur-tag { min-height: 44px; padding: 3px; }
  .v3-page .ur-eintrag { font-size: 9.5px; padding: 1px 3px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — RUNDGANG TAG 2 (06.08.2026)

   Zwei Kleinteile, damit die Startseite ohne style="" im Markup auskommt
   (Design-Referenz § 7.5: style="" bleibt nur fuer echte dynamische Werte —
   Balkenhoehe, Spaltenzahl, Farbe aus Daten).

   .home3 a.schlicht  — ein Link, der wie Text aussieht (Titel, Zeilen-Summen,
                        Chips). Ersetzt 12× `style: "color:inherit;
                        text-decoration:none"` im Markup.
   .home3 .pulse .sub — die zweite Zeile eines Puls-Ereignisses.
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-page .home3 a.schlicht { color: inherit; text-decoration: none; }
.v3-page .home3 a.schlicht:hover { color: var(--brand, #1e56c8); }
.v3-page .home3 .pulse .sub { color: var(--ink3, #8b98ad); }
/* Ein Puls-Ereignis mit Akte ist als Ganzes anklickbar (Charta Q5). */
.v3-page .home3 .pulse a.ev { display: contents; color: inherit; text-decoration: none; }
.v3-page .home3 .pulse li:has(a.ev):hover { background: #fafbfe; }
/* Zustands-Toene der Startseite als Klassen statt style="" (§ 7.5). */
.v3-page .home3 .t-offen { color: #fbbf24; }
.v3-page .home3 .t-ok { color: var(--ok, #178a50); }
.v3-page .home3 .t-fehler { color: var(--bad, #c93a4a); font-weight: 700; }
.v3-page .home3 .stack.leer { height: 4%; }
.v3-page .home3 .stack.leer > i { background: #e6eaf1; height: 100%; }
.v3-page .home3 .dot.weit { min-width: auto; padding: 2px 9px; }
.v3-page .home3 a.schlicht.block { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   RUNDGANG TAG 4 · FINANZEN (06.08.2026)

   „Beiträge & Einzug" war der letzte Träger des bereichseigenen Design-Systems
   `finanzen_v3.css` (214 Zeilen, alles unter `.finanzen-v3`, ein einziger
   Träger-View). Die Seite steht jetzt auf den gemeinsamen Bauteilen; die Datei
   ist ersatzlos entfallen. Hier bleiben nur die WENIGEN Stellen, für die es
   noch kein Bauteil gab — bewusst als Klassen, nie als style="" im Markup.

   Regel aus dem FW3-Nebenbefund (a5c5e3bd): CSS wird nur zusammen mit einem
   grep über ALLE Träger-Views gelöscht. Beleg hier: `.finanzen-v3` kam in
   genau einer View vor (finanzen/beitraege.html.erb), und die trägt sie nicht
   mehr. Ein Test hält das fest.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Zahlenspalte in jeder Tabelle — fehlte als gemeinsames Stück, obwohl jede
   Finanz-Tabelle sie braucht. Zahlen stehen rechts und mit gleicher Ziffern-
   breite, damit man Beträge untereinander vergleichen kann. */
.v3-page .v3-table th.r,
.v3-page .v3-table td.r { text-align: right; font-variant-numeric: tabular-nums; }

/* Filterleiste und Summenzeile über der Tabelle. */
.v3-page .bt-filter { margin-bottom: 12px; }
.v3-page .bt-filter .v3-sammelbar { margin: 0; }
.v3-page .bt-summe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px;
}

/* Person in der Beitragszeile: Name führt in die Akte, darunter die Nummer. */
.v3-page a.bt-name { font-weight: 700; color: var(--v3-ink); text-decoration: none; }
.v3-page a.bt-name:hover { color: var(--v3-brand); text-decoration: underline; }
.v3-page .bt-nr { font-size: 11px; color: var(--v3-ink3); margin-top: 2px; }

/* Blättern unter einer Tabelle. */
.v3-page .bt-blaettern {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12.5px; color: var(--v3-ink3);
}

/* Aktions-Reihe unter dem Kettenband bzw. in einem Leer-Zustand. */
.v3-page .bt-laufaktionen { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }

/* Steuerbüro & Berichte: Erzeugen-Karte und Datei-Liste je Zeile. */
.v3-page .gr-erzeugen {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.v3-page .gr-erzeugen .secttl { margin-top: 0; }
.v3-page .gr-hinweis { font-size: 12.5px; color: var(--v3-ink3); max-width: 62ch; }
.v3-page .gr-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.v3-page .gr-form .v3-field { margin-bottom: 0; }
.v3-page .gr-monat { font-size: 11.5px; color: var(--v3-ink3); margin-top: 2px; }
.v3-page .gr-dateien { display: flex; gap: 6px; flex-wrap: wrap; }

/* Forderungs-Tabelle: der Stichtag-Kopf ist eine Karte mit drei Zonen
   (Kopf · Stichtags-Reiter · Filter). Rundgang Tag 4 — vorher handgebautes
   Tailwind-Chrome; die Innenwelt der Tabelle bleibt bewusst, wie sie ist. */
.v3-page .fo-hero { margin-bottom: 18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   SEGMENT-FUNDAMENT — Stufe 1 (06.08.2026)
   Spec: docs/superpowers/specs/2026-08-06-segment-fundament-konzept.md
   Abgenommenes Bild: docs/mockups/2026-08-06-segment-fundament.html

   Zwei neue Sachen, mehr nicht: die UMRANDUNG der festen System-Segmente
   (violett + Schloss, „das kann niemand kaputtmachen") und die BAUSTEIN-Chips
   der Facetten-Auswahl. Alles andere sind vorhandene Bauteile — `.v3-card`,
   `.v3-table`, `.v3-empty`, `.secttl`, `.v3-field`, der Erklaer-Aufklapper.
   Nur --v3-*-Token, keine zweite Farb-Insel. Append-only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Farbe der festen Segmente. Bewusst violett: sie ist in der ganzen App
   sonst unbenutzt, „System" ist damit auf einen Blick unterscheidbar von
   „gut" (gruen), „Achtung" (gelb) und „Fehler" (rot). */
.v3-page { --sg-system: #7a4df1; }

.v3-page .sg-systembadge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--sg-system); border: 1px solid var(--sg-system); border-radius: 99px;
  padding: 2px 9px;
}
.v3-page .sg-systemhinweis {
  font-size: 12.5px; color: var(--v3-ink3); max-width: 78ch; margin: -4px 0 14px;
}
.v3-page .sg-achsentitel {
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--v3-ink3); margin: 14px 0 8px;
}

/* Die Karte eines festen Segments: Umrandung + heller Grund + Schloss.
   ── Studio-Befund B3 (06.08.2026): Dieselbe Karte steht jetzt auch in der
   Empfängerwahl des Kampagnen-Studios, das NICHT auf `.v3-page` läuft (der
   Wizard hat seine eigene, funktionstragende Bildsprache). Ein Schutz-
   Kennzeichen, das an zwei Orten verschieden aussieht, ist keines mehr —
   deshalb gilt derselbe Block dort über `.sg-studio`. Die Karte ist geteilt
   (`shared/_festes_segment`), nur ihr Geltungsbereich ist zweigeteilt. */
.v3-page .sg-karte,
.sg-studio .sg-karte {
  background: var(--v3-card, #fff); border: 1px solid var(--v3-line, #e6eaf1);
  border-radius: 12px; padding: 13px 15px;
}
.v3-page .sg-karte.fest,
.sg-studio .sg-karte.fest { border: 2px solid var(--sg-system, #7a4df1); background: #faf8ff; }
.v3-page .sg-kkopf, .sg-studio .sg-kkopf { display: flex; align-items: center; gap: 8px; }
.v3-page .sg-kname, .sg-studio .sg-kname { font-weight: 700; font-size: 14px; }
.v3-page .sg-schloss, .sg-studio .sg-schloss { margin-left: auto; font-size: 13px; }
.v3-page .sg-regel, .sg-studio .sg-regel {
  font-size: 12.5px; color: var(--v3-ink2, #5b6b84); margin-top: 6px; line-height: 1.45;
}
.v3-page .sg-quelle, .sg-studio .sg-quelle {
  font-size: 11.5px; color: var(--v3-ink3, #8b98ad); margin-top: 5px;
}
.v3-page .sg-hinweis, .sg-studio .sg-hinweis {
  font-size: 11.5px; color: var(--v3-warn, #c07600); margin-top: 6px;
  border-left: 3px solid var(--v3-warn, #c07600); padding-left: 8px;
}
.v3-page .sg-kfuss, .sg-studio .sg-kfuss { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.v3-page .sg-nichtkombinierbar, .sg-studio .sg-nichtkombinierbar {
  font-size: 11.5px; color: var(--v3-ink3, #8b98ad); font-style: italic;
}
/* Die Live-Zahl und das Raster gelten im Studio ebenso. */
.sg-studio { --sg-system: #7a4df1; }
.sg-studio .sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sg-studio .sg-zahl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sg-studio .sg-zahl .z { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sg-studio .sg-zahl .t { font-size: 11.5px; color: var(--v3-ink3, #8b98ad); }
.sg-studio .v3-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9dfe8;
  background: #fff; border-radius: 9px; padding: 6px 11px; font-size: 12px;
  font-weight: 700; color: #16233a; text-decoration: none; cursor: pointer;
}
.sg-studio .v3-btn:hover { border-color: #1e56c8; color: #1e56c8; }

/* Die Live-Zahl: gross, daneben ihr Alter. Nie ohne Alter — genau das war der
   Vorwurf an die gespeicherte Zahl. */
.v3-page .sg-zahl { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.v3-page .sg-zahl .z { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v3-page .sg-zahl .t { font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .sg-zahl .rest {
  font-size: 11px; font-weight: 700; color: var(--v3-warn);
  background: #fdf3e2; border-radius: 99px; padding: 1px 8px;
}
.v3-page .sg-zahl.leer .z { color: var(--v3-ink3); }

/* ── Die Bausteine-Auswahl ─────────────────────────────────────────────── */
.v3-page .sg-achse { padding: 10px 0; border-bottom: 1px solid var(--v3-line2); }
.v3-page .sg-achse:last-child { border-bottom: 0; }
.v3-page .sg-achsekopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v3-page .sg-achsekopf b { font-size: 13px; min-width: 110px; }
.v3-page .sg-achselogik { font-size: 11.5px; color: var(--v3-ink3); font-style: italic; }
.v3-page .sg-achsereset { font-size: 11.5px; margin-left: auto; }
.v3-page .sg-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.v3-page a.sg-chip {
  border: 1.5px solid var(--v3-line); border-radius: 99px; padding: 5px 13px;
  font-size: 13px; font-weight: 600; background: #fff; color: var(--v3-ink);
  text-decoration: none; transition: border-color .12s, background .12s, color .12s;
}
.v3-page a.sg-chip:hover { border-color: var(--v3-brand); color: var(--v3-brand); }
.v3-page a.sg-chip.an {
  border-color: var(--v3-brand); background: #eaf1ff; color: var(--v3-brand);
}
.v3-page a.sg-chip:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .sg-keinbaustein { font-size: 12px; color: var(--v3-ink3); font-style: italic; }
.v3-page .sg-bausteinhinweis {
  font-size: 11.5px; color: var(--v3-warn); margin-top: 8px;
  border-left: 3px solid var(--v3-warn); padding-left: 8px; max-width: 80ch;
}

/* Die zwei Zahlen nebeneinander. */
.v3-page .sg-zwei { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.v3-page .sg-zahlblock { min-width: 170px; flex: 1 1 170px; max-width: 300px; }
.v3-page .sg-zahlblock .t { font-size: 12px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .sg-zahlblock .z {
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.v3-page .sg-zahlblock .z.ok { color: var(--v3-ok); }
.v3-page .sg-zahlblock .z.warn { color: var(--v3-warn); }
.v3-page .sg-zahlblock .r { font-size: 11.5px; color: var(--v3-ink3); margin-top: 4px; line-height: 1.45; }
.v3-page .sg-stand { font-size: 11px; color: var(--v3-ink3); margin-top: 12px; }

.v3-page .sg-speichern { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.v3-page .sg-speichern .v3-field { margin-bottom: 0; }
.v3-page .sg-speicherhinweis {
  font-size: 12px; color: var(--v3-ink3); margin-top: 10px; max-width: 78ch;
}

@media (max-width: 640px) {
  .v3-page .sg-achsekopf b { min-width: auto; }
  .v3-page a.sg-chip { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GEFÜHRTE ZUORDNUNG (#798, 06.08.2026)
   Spec: docs/superpowers/specs/2026-08-06-gefuehrte-zuordnung-konzept.md

   Carstens Befund: „Bereich auswählen" zeigte Buchhaltungs-Sprech — „oft kann
   man das selber gar nicht zuordnen". Der Dialog fragt nach der Natur; das
   Konto wird abgeleitet. Diese Regeln bauen die drei Schritte — mehr nicht:
   Karten, Knöpfe, Felder und Aufklapper sind die vorhandenen Bauteile.
   Nur --v3-*-Token, keine zweite Farbwelt. Append-only.
   ═══════════════════════════════════════════════════════════════════════════ */

.v3-page .tx-dialog { border: 1px solid var(--v3-brand); border-radius: 12px; padding: 14px 16px; }

/* Die Schrittanzeige — wo bin ich, was kommt noch. */
.v3-page .tx-dschritte {
  display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0 0 12px; padding: 0;
}
.v3-page .tx-dschritte li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--v3-ink3); font-weight: 600;
}
.v3-page .tx-dschritte li + li::before { content: "›"; margin-right: 4px; color: var(--v3-line); }
.v3-page .tx-dschritte .n {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #eef1f6; color: var(--v3-ink3); font-size: 10.5px; font-weight: 800;
}
.v3-page .tx-dschritte li.on { color: var(--v3-ink); }
.v3-page .tx-dschritte li.on .n { background: var(--v3-brand); color: #fff; }
.v3-page .tx-dschritte li.done .n { background: var(--v3-ok); color: #fff; }

.v3-page .tx-dhinweis { font-size: 12.5px; color: var(--v3-ink3); margin: 0 0 10px; }
.v3-page .tx-dfrage { font-size: 14px; font-weight: 700; margin: 0 0 10px; }

/* Die sechs Kacheln des ersten Schritts. */
.v3-page .tx-dkacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px;
}
.v3-page a.tx-dkachel {
  display: block; text-decoration: none; color: inherit; background: var(--v3-card);
  border: 1px solid var(--v3-line); border-radius: 11px; padding: 11px 13px;
  transition: border-color .12s, background .12s;
}
.v3-page a.tx-dkachel:hover { border-color: var(--v3-brand); background: #f7faff; }
.v3-page a.tx-dkachel:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
/* Der Tipp der automatischen Erkennung — sichtbar, aber nie vorausgewählt:
   bestätigt wird per Klick, nicht durch Wegsehen. */
.v3-page a.tx-dkachel.tipp { border-color: var(--v3-brand); background: #f2f6ff; }
.v3-page .tx-dkachel .k { display: block; font-size: 14px; font-weight: 750; }
.v3-page .tx-dkachel .t {
  display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: var(--v3-brand);
}
.v3-page .tx-dkachel .b {
  display: block; font-size: 11.5px; color: var(--v3-ink2); margin-top: 5px; line-height: 1.42;
}
.v3-page .tx-dkachel .eq {
  display: block; font-size: 11px; font-weight: 700; margin-top: 7px;
}
.v3-page .tx-dkachel .eq.ja { color: var(--v3-ok); }
.v3-page .tx-dkachel .eq.nein { color: var(--v3-ink3); }

/* Der gewählte Topf mit Rückweg. */
.v3-page .tx-dgewaehlt {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-size: 14px;
}
.v3-page a.tx-dzurueck { font-size: 12px; font-weight: 600; }

/* Die Zusammenfassung des dritten Schritts — der Satz, den man liest, bevor
   man bestätigt. */
.v3-page .tx-dsumme {
  background: #f7faff; border: 1px solid var(--v3-line2); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 10px;
}
.v3-page .tx-dsumme .s { font-size: 15px; font-weight: 750; }
.v3-page .tx-dsumme .w { font-size: 12.5px; color: var(--v3-ink2); margin-top: 4px; line-height: 1.45; }
.v3-page .tx-dform { margin-bottom: 8px; }
.v3-page .tx-dform .v3-field { max-width: 42rem; }

/* ── T1 · ANHANGS-MARKE IM TICKET-VERLAUF (Team-Wunsch Lisa, 06.08.2026) ────
   Die Anhänge steckten nur im Nachrichten-TEXT — und der ist bei allen ausser
   der jüngsten Nachricht eingeklappt. Wer wissen wollte, ob etwas mitgeschickt
   wurde, musste jede Nachricht aufklappen. Die Marke steht deshalb im Kopf und
   bleibt sichtbar. Reine Anzeige; an der Anhangs-Logik ändert sich nichts. */
.kt-anhangmarke {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  color: #6b3fd4; background: #f2ecfd; border: 1px solid #ddd0f8;
  border-radius: 99px; padding: 2px 8px;
}
.kt-anhangmarke svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.kt-anhangmarke.aus { color: #1e56c8; background: #e8effd; border-color: #c8dafa; }

/* Sortier-Auswahl über der Ticket-Arbeitsliste. Stand als 120-Zeichen-Kette im
   `style`-Attribut (Rundgang 06.08.2026) — Gestaltung gehört in eine Klasse. */
.v3-page .kt-sortsel {
  border: 1px solid var(--v3-line); border-radius: 8px; padding: 3px 6px;
  font-size: 11.5px; font-weight: 600; color: var(--v3-ink); background: #fff;
}

/* Kleinteile der Ticket-Arbeitsliste, die als `style=""` im Markup klebten
   (Rundgang 06.08.2026). Die aus DATEN gerechneten Farben (Avatar-Ton je
   Person, Alters-Ton der Wartezeit) bleiben am Element — sie sind Inhalt. */
.v3-page .kt-chipzahl { opacity: .7; }
.v3-page .kt-nr { color: var(--v3-ink3); font-weight: 600; }
.v3-page .kt-ehren { color: #7c6cf0; }
.v3-page .kt-spirit { color: #c07600; }
.v3-page .ma.kt-ma-unbekannt { background: #8b98ad; }

/* ═══════════════════════════════════════════════════════════════════════════
   DAS EXPORT-ARBEITSBLATT (#799 · Umbau 13.08.2026)

   Carsten am 12.08.2026: „Zu kompliziert, zu viel und zu viele Seiten — das
   sollte alles übersichtlich auf EINER Seite sein."

   Gemessen war der alte Stand: 2.214 px Inhalt in 944 px Sichthöhe, die
   Vorschau begann bei y = 1.823. Deshalb DREI SPALTEN, die IN SICH scrollen —
   die Seite selbst nicht. Was nicht auf 1440 × 900 passt, wurde kompakter
   gemacht (Chips statt Kacheln, zweispaltige Feldgruppen), nicht auf einen
   Folgeschritt verschoben.

   Karten, Felder, Knöpfe, Tabellen und Badges sind die vorhandenen Bauteile;
   hier stehen nur das Blatt-Raster, die Kachel-Bauform und die klebende
   Kopfzeile. Append-only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Was nur mit JavaScript Sinn ergibt — und sein Gegenstück ohne. Der
   Controller setzt `data-js` erst beim Verbinden: ohne ihn bleibt der
   Ersatzweg stehen, statt dass ein toter Knopf sichtbar wird. */
.v3-page.exb .ex-nurjs { display: none; }
.v3-page.exb[data-js="an"] .ex-nurjs { display: inline-flex; }
.v3-page.exb[data-js="an"] .exb-ohnejs { display: none; }

/* ── Die klebende Kopfzeile: Zahl · Vorlage · Datei ─────────────────────────
   SIE KLEBT UNTER DER BEREICHS-LEISTE, nicht über ihr: `.s3-navwrap.fin-subnav`
   klebt selbst bei `top: 0` mit `z-index: 30` (v3_design.css § Bereichs-Subnav).
   Mit demselben `top`/`z-index` legte sich die Kopfzeile beim Scrollen ÜBER die
   Leiste und nahm der Seite ihren Weg zurück (Design-Review 13.08.2026).
   Deshalb ein Versatz in Höhe der Leiste (gemessen 91 px bei 1440 × 900 mit dem
   Untertitel am aktiven Reiter) — und ein KLEINERER `z-index`, damit die Leiste
   auch dann oben liegt, wenn sie in einer schmaleren Ansicht höher umbricht. */
.v3-page .exb-kopf {
  position: sticky; top: var(--exb-kopf-versatz, 92px); z-index: 25;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--v3-line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 8px;
  box-shadow: 0 2px 10px rgb(16 24 40 / 6%);
}
.v3-page .exb-zahl { display: flex; align-items: baseline; gap: 10px; min-width: 260px; }
.v3-page .exb-zahl .z {
  font-size: 30px; font-weight: 850; color: var(--v3-brand); line-height: 1; font-variant-numeric: tabular-nums;
}
.v3-page .exb-zahl .w { font-size: 13px; font-weight: 700; }
.v3-page .exb-zahl .w small {
  display: block; font-size: 11px; font-weight: 550; color: var(--v3-ink3); margin-top: 2px;
  max-width: 46ch;
}
.v3-page .exb-zahllink { font-size: 11.5px; font-weight: 700; align-self: flex-end; }
.v3-page .exb-kopfrest {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-left: auto;
}
.v3-page .exb-merkfeld { display: flex; flex-direction: column; gap: 3px; }
.v3-page .exb-merkfeld span {
  font-size: 10.5px; font-weight: 750; letter-spacing: .3px; text-transform: uppercase;
  color: var(--v3-ink3);
}
.v3-page .exb-merkfeld input {
  border: 1px solid var(--v3-line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
  min-width: 190px;
}
.v3-page .exb-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.v3-page .exb-aktionsform { display: flex; gap: 6px; }
.v3-page .exb-gate {
  font-size: 11.5px; color: var(--v3-ink3); margin: 0 0 12px; max-width: 96ch;
}

/* ── Das Blatt: drei Spalten, die in sich scrollen ────────────────────────── */
.v3-page .exb-blatt {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.05fr) minmax(320px, 1.25fr);
  gap: 12px; align-items: start;
}
.v3-page .exb-spalte {
  background: #fff; border: 1px solid var(--v3-line); border-radius: 12px;
  display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 210px);
}
/* Der Spaltenkopf braucht kein `sticky`: gescrollt wird der Inhalt UNTER ihm
   (`.exb-spalteinhalt`), er selbst steht immer. Ein zweites klebendes Element
   würde nur mit der klebenden Kopfzeile darüber kollidieren. */
.v3-page .exb-spaltekopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--v3-line2);
  background: #fff; border-radius: 12px 12px 0 0; flex: none;
}
.v3-page .exb-spaltekopf .t { font-size: 14px; font-weight: 850; }
.v3-page .exb-spaltekopf .h { font-size: 11.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .exb-spaltekopf .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.v3-page .exb-spalteinhalt { padding: 10px 12px 14px; overflow: auto; min-height: 0; }
.v3-page .exb-spalteinhalt.pad0 { padding: 0; }

/* ── Eine Achse und ihre Kacheln ──────────────────────────────────────────── */
.v3-page .exb-gruppe { display: block; }
.v3-page .exb-achse { padding: 9px 0; border-bottom: 1px solid var(--v3-line2); }
.v3-page .exb-achse:last-child { border-bottom: 0; }
.v3-page .exb-achsekopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v3-page .exb-achsekopf b { font-size: 12.5px; }
.v3-page .exb-achselogik { font-size: 11px; color: var(--v3-ink3); font-style: italic; }
.v3-page .exb-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.v3-page .exb-chips.lang { max-height: 168px; overflow: auto; padding-right: 4px; }
.v3-page .exb-keinbaustein { font-size: 11.5px; color: var(--v3-ink3); font-style: italic; }
.v3-page label.exb-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1.5px solid var(--v3-line); border-radius: 99px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 650; background: #fff; color: var(--v3-ink);
  transition: border-color .12s, background .12s, color .12s;
}
.v3-page label.exb-chip:hover { border-color: var(--v3-brand); color: var(--v3-brand); }
.v3-page label.exb-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.v3-page label.exb-chip:has(input:checked) {
  border-color: var(--v3-brand); background: #eaf1ff; color: var(--v3-brand);
}
.v3-page label.exb-chip:has(input:focus-visible) { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .exb-chiptext { line-height: 1.3; }
.v3-page .exb-chipzahl {
  font-size: 10.5px; font-weight: 750; color: var(--v3-ink3); font-variant-numeric: tabular-nums;
}
.v3-page label.exb-chip:has(input:checked) .exb-chipzahl { color: var(--v3-brand); }
.v3-page .exb-achsesuche, .v3-page .exb-feldsuche {
  border: 1px solid var(--v3-line); border-radius: 8px; padding: 5px 9px; font-size: 12px;
  width: 100%; margin-top: 7px;
}
.v3-page .exb-feldsuche { width: 150px; margin-top: 0; }
.v3-page .exb-einzelfeld { margin: 7px 0 0; }

/* ── Aufklapper: die selteneren Achsen und der Experten-Fall ──────────────── */
.v3-page .exb-mehr, .v3-page .exb-experte {
  border: 1px dashed var(--v3-line); border-radius: 10px; margin-top: 10px; background: var(--v3-bg2);
}
.v3-page .exb-mehr > summary, .v3-page .exb-experte > summary {
  cursor: pointer; padding: 8px 11px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.v3-page .exb-mehrinner, .v3-page .exb-experteinner { padding: 0 11px 11px; }
.v3-page .exb-experteintro { font-size: 11.5px; color: var(--v3-ink2); line-height: 1.55; margin: 0 0 9px; }
.v3-page .exb-gruppe1 {
  font-size: 11.5px; background: #fff; border: 1px solid var(--v3-line);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 8px;
}
.v3-page .exb-weiteregruppe { border-left: 3px solid var(--v3-brand); margin-bottom: 8px; }
.v3-page .exb-gruppenkopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px;
}
.v3-page .exb-gruppenregel { font-size: 11px; color: var(--v3-ink3); display: block; margin-top: 3px; }
.v3-page .exb-gruppenzahl { font-size: 11.5px; font-weight: 750; color: var(--v3-brand); }

/* ── Der Status-Schalter der Personen-Vorauswahl ──────────────────────────── */
.v3-page .exb-statusschalter {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  background: var(--v3-bg2); border: 1px solid var(--v3-line); border-radius: 10px;
  padding: 9px 11px; margin-top: 10px;
}
.v3-page .exb-statusschalter input { margin-top: 2px; flex: none; }
.v3-page .exb-statusschalter b { font-size: 12px; display: block; }
.v3-page .exb-statushinweis {
  font-size: 11px; color: var(--v3-ink3); display: block; margin-top: 3px; line-height: 1.5;
}

/* ── Die Spalten-Seite: Voreinstellungen, Band, Feldgruppen ───────────────── */
.v3-page .exb-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 4px; }
.v3-page button.exb-preset {
  text-align: left; border: 1px solid var(--v3-line); border-radius: 9px; background: #fff;
  padding: 6px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 1px;
}
.v3-page button.exb-preset:hover { border-color: var(--v3-brand); }
.v3-page button.exb-preset b { font-size: 12px; }
.v3-page button.exb-preset span { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; }

.v3-page .exb-band {
  border: 1px solid var(--v3-line); border-radius: 10px; background: var(--v3-bg2);
  padding: 8px 10px; margin: 10px 0;
}
.v3-page .exb-bandkopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-page .exb-bandkopf b { font-size: 11.5px; }
.v3-page .exb-bandhilfe { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; margin-left: auto; }
.v3-page .exb-bandchips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.v3-page .exb-bandchip {
  display: inline-flex; align-items: center; gap: 3px; background: #fff;
  border: 1px solid var(--v3-line); border-radius: 7px; padding: 2px 4px 2px 6px; font-size: 11.5px;
}
.v3-page .exb-bandchip.sens { border-color: var(--v3-warn); }
.v3-page .exb-bandname { font-weight: 650; }
.v3-page .exb-bandchip button {
  border: 0; background: transparent; cursor: pointer; color: var(--v3-ink3);
  font-size: 12px; line-height: 1; padding: 2px 3px; border-radius: 5px;
}
.v3-page .exb-bandchip button:hover { background: var(--v3-bg2); color: var(--v3-brand); }
.v3-page .exb-bandchip button.exb-schieb { font-weight: 800; }
.v3-page .exb-bandchip button.exb-weg:hover { color: var(--v3-bad); }
.v3-page .exb-sensnote {
  font-size: 11px; color: var(--v3-warn); margin-top: 8px; line-height: 1.5;
  border-left: 3px solid var(--v3-warn); padding-left: 8px;
}

.v3-page .exb-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.v3-page .exb-feldgruppe {
  border: 1px solid var(--v3-line2); border-radius: 9px; padding: 7px 9px; min-width: 0;
}
.v3-page .exb-feldgruppenkopf { display: flex; align-items: baseline; gap: 6px; }
.v3-page button.exb-gruppenschalter {
  border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
  font-size: 11.5px; font-weight: 800; color: var(--v3-ink);
}
.v3-page button.exb-gruppenschalter:hover { color: var(--v3-brand); text-decoration: underline; }
.v3-page .exb-feldgruppenzahl {
  font-size: 10px; font-weight: 700; color: var(--v3-ink3); margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.v3-page .exb-gruppentext { font-size: 10.5px; color: var(--v3-ink3); margin: 2px 0 5px; line-height: 1.45; }
.v3-page label.exb-feld {
  display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 0; cursor: pointer;
}
.v3-page label.exb-feld:hover { color: var(--v3-brand); }
.v3-page .exb-sens {
  font-size: 9.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase;
  color: var(--v3-warn); border: 1px solid var(--v3-warn); border-radius: 5px; padding: 0 3px;
}

/* ── Die Vorschau-Spalte ──────────────────────────────────────────────────── */
.v3-page .exb-vorschau { display: flex; flex-direction: column; min-height: 0; }
.v3-page .exb-vorschaukopf { display: flex; gap: 6px; padding: 8px 12px 0; flex-wrap: wrap; }
.v3-page .exb-blattscroll { margin: 8px 0 0; }
.v3-page .exb-wersind { font-size: 11.5px; padding: 8px 12px 0; line-height: 1.6; }
.v3-page .exb-vorschaufuss {
  font-size: 11px; color: var(--v3-ink3); padding: 8px 12px 12px; line-height: 1.55;
}

/* ── Der Versand-Trichter (Adress-Welle #927) ─────────────────────────────
   Gesamt → unterdrückt → versandfähig. Er sitzt oben in der Vorschau-Spalte,
   weil er dieselbe Frage beantwortet wie die Vorschau: was steht nachher
   wirklich in der Datei. Neue Klassennamen vor dem Bau gegriffen (Lehre 17) —
   `exb-trichter*`, `exb-grundzahl`, `exb-grundwort` waren app-weit frei. */
.v3-page .exb-trichter {
  border-bottom: 1px solid var(--v3-line); padding: 10px 12px; background: var(--v3-bg2);
}
.v3-page .exb-trichterkopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; margin-bottom: 6px;
}
.v3-page .exb-trichterband {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.v3-page .exb-trichterstufe { display: flex; flex-direction: column; line-height: 1.25; }
.v3-page .exb-trichterstufe b { font-size: 15px; font-weight: 800; }
.v3-page .exb-trichterstufe span { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .exb-trichterstufe.minus b { color: var(--v3-bad); }
.v3-page .exb-trichterstufe.ziel b { color: var(--v3-brand); }
.v3-page .exb-trichterpfeil { color: var(--v3-ink3); font-size: 13px; }
.v3-page ul.exb-trichtergruende { list-style: none; margin: 8px 0 0; padding: 0; }
.v3-page ul.exb-trichtergruende li {
  display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; padding: 2px 0;
}
.v3-page .exb-grundzahl { font-weight: 750; min-width: 44px; text-align: right; }
.v3-page .exb-grundwort { color: var(--v3-ink2); }
.v3-page a.exb-grundlink { text-decoration: underline; text-underline-offset: 2px; }
.v3-page .exb-trichterland { font-size: 11.5px; margin: 0 0 8px; color: var(--v3-ink2); }
.v3-page .exb-trichterland span { color: var(--v3-ink3); }
.v3-page .exb-trichterfuss {
  font-size: 11px; color: var(--v3-ink3); line-height: 1.55; margin: 8px 0 0;
}
.v3-page a.exb-trichterlink { font-weight: 700; }

/* ── Mobil: aus drei Spalten wird eine Abfolge ────────────────────────────── */
@media (max-width: 1180px) {
  .v3-page .exb-blatt { grid-template-columns: 1fr; }
  .v3-page .exb-spalte { max-height: none; }
  .v3-page .exb-kopf { position: static; }
  .v3-page .exb-felder, .v3-page .exb-presets { grid-template-columns: 1fr; }
  /* 44 px ist das app-weit gebaute Tap-Ziel-Maß (FW1-Prototyp) — nicht die
     36 px, die § 8 früher behauptete. */
  .v3-page label.exb-chip { min-height: 44px; }
  .v3-page label.exb-feld { min-height: 44px; }
}

/* Bestand aus #799, weiter in Gebrauch: die Blatt-Tabelle der Vorschau und die
   gemerkten Zusammenstellungen. Alles Uebrige der alten Drei-Schritte-Maske ist
   geloescht — mit grep-Beweis ueber app/views, app/helpers, app/javascript. */
.v3-page .v3-table.ex-blatt thead th {
  background: #eef3fb; color: var(--v3-ink); font-size: 11px; letter-spacing: .3px;
  white-space: nowrap;
}
.v3-page .v3-table.ex-blatt tbody td { font-size: 12px; white-space: nowrap; }
.v3-page .ex-vorlagenhinweis {
  font-size: 12px; color: var(--v3-ink3); margin-top: 10px; max-width: 78ch;
}
.v3-page .ex-vorlagenliste { display: flex; gap: 8px; flex-wrap: wrap; }
.v3-page a.ex-vorlagechip {
  border: 1px solid var(--v3-line); border-radius: 99px; padding: 5px 13px;
  font-size: 12.5px; font-weight: 650; color: var(--v3-ink); text-decoration: none;
}
.v3-page a.ex-vorlagechip:hover { border-color: var(--v3-brand); color: var(--v3-brand); }
.v3-page a.ex-vorlagechip.on { border-color: var(--v3-brand); background: #eaf1ff; color: var(--v3-brand); }

/* PERFORMANCE-TAFEL entfernt (Carsten 08.08.: keine Werte-Seite in der App —
   Telemetrie sammelt weiter, Bericht via Tempo::Zaehlung ausserhalb). */


/* ═══════════════════════════════════════════════════════════════════════
   P5 · WF — DAS GEFUEHLTE LADE-ERLEBNIS (08.08.2026)

   Drei Dinge, alle aus Carstens Rundgang am Handy und seiner Beobachtung
   „klick und nichts passiert":

     WF-a  Der Ladebalken JEDER Navigation. Es ist Turbos eigener Balken
           (`.turbo-progress-bar`) — nur in unserer Farbe. Kein Eigenbau,
           kein zweites Bauteil. Turbo haengt ihn an den <body>, also steht
           diese Regel bewusst GLOBAL und nicht unter `.v3-page`.
           Turbos Standard-Stylesheet wird von Turbo selbst als ERSTES
           Element in den <head> gesetzt — unser Blatt kommt danach und
           gewinnt bei gleicher Spezifitaet.

     WF-b  `.v3-cardclip` — die Karte, die ihre Ecken beschneidet. Gemessen
           am 08.08.2026 stand dafuer 11-mal `style="overflow:hidden"` im
           Markup (verboten, Design-Referenz § 7 Nr. 5), davon 4-mal an
           einer v3-Karte mit breiter Tabelle. Die Klasse gehoert IMMER mit
           `.v3-scroll` zusammen: die Karte beschneidet, die Tabelle darin
           scrollt. Ohne diese Trennung ist eine 7-spaltige Tabelle am Handy
           abgeschnitten und NICHT erreichbar — genau der Befund aus dem
           Mitglieder-Bereich.

     WF-c  Der Handy-Bruch der Mitglieder-Akte (`.r1-prof`). Sie brach
           bisher nur bei 1100 px; darunter blieb alles nebeneinander.
           ═══════════════════════════════════════════════════════════ */

/* `--v3-brand` war bisher nur auf `.v3-page` deklariert — der Ladebalken
   haengt aber am <body> und haette den Token nie aufgeloest. Er steht
   deshalb zusaetzlich auf :root; `.v3-page` deklariert ihn unveraendert
   weiter, innen aendert sich nichts. Kein zweites Blau, kein neuer Name. */
:root { --v3-brand: #1e56c8; }

.turbo-progress-bar {
  height: 3px;
  /* Dasselbe Farbpaar wie `.v3-btn.pri` (Zeile 70) — nicht ein viertes Blau. */
  background: linear-gradient(90deg, #2f6fe0, var(--v3-brand));
  box-shadow: 0 0 8px color-mix(in srgb, var(--v3-brand) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar { transition: none; }
}

/* Nur an einer Karte — sonst beschneidet die Klasse still irgendwas. */
.v3-page .v3-card.v3-cardclip { overflow: hidden; }

/* Die Sortier-Kopfzelle hatte ihre Farbe/Unterstreichung bisher inline am
   `<a>` stehen (§ 7 Nr. 5). Sie fehlt der Klasse — hier nachgetragen. */
.v3-page .v3-table .thsort { color: inherit; text-decoration: none; }
/* Spaltenbreite als Modifier statt `style="width:31%"` im Markup. */
.v3-page .v3-table th.col-breit { width: 31%; }

/* ── Mitglieder-Akte am Handy (≤ 640 px) ──
   Die Akte war fuer Schreibtisch-Breiten gebaut: 82-px-Avatar neben Name
   neben Aktionsspalte, fuenf Jahres-Karten nebeneinander, drei Tabellen ohne
   Scroll-Behaelter. Bei 390 px stapelt jetzt der Kopf, die Reiterleiste
   scrollt statt umzubrechen, und die Tabellen bekommen ihren Scroll-Rahmen
   im Markup (`.v3-scroll`). */
@media (max-width: 640px) {
  .r1-prof .hero { padding: 18px 16px; }
  .r1-prof .herotop { flex-wrap: wrap; gap: 14px; }
  .r1-prof .bigav { width: 60px; height: 60px; border-radius: 17px; font-size: 22px; }
  .r1-prof .hname { font-size: 21px; }
  .r1-prof .hactions { margin-left: 0; width: 100%; align-items: stretch; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .r1-prof .hactions .hbtn { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .r1-prof .hquick { margin-bottom: 0; }
  .r1-prof .hqbtn { width: 40px; height: 40px; }
  .r1-prof .hcontact { gap: 10px 18px; }

  /* Reiter: eine scrollbare Zeile statt vier gestapelter Bloecke — nach dem
     Haus-Muster der klebenden Subnav (`.s3-navwrap.fin-subnav .s3-subbar`,
     Zeile 7086), damit es keinen zweiten Scroller-Dialekt gibt. */
  .r1-prof .tabs {
    flex-wrap: nowrap; overflow-x: auto; width: 100%; max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .r1-prof .tabs::-webkit-scrollbar { display: none; }
  .r1-prof .tabs .tb { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; min-height: 40px; }

  /* Vier Statuszellen untereinander — die Trennlinie muss dabei von rechts
     nach unten wandern, sonst haengt an jeder vollbreiten Zeile ein Strich. */
  .pf-ueb .statusbar { grid-template-columns: 1fr; }
  .pf-ueb .stcell { border-right: none; border-bottom: 1px solid var(--v3-line); }
  .pf-ueb .stcell:last-child { border-bottom: none; }

  .pf-fin .ycards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r1-prof .pad { padding: 15px 14px; }
}

/* ── Der Baukasten am Handy (≤ 640 px) ──
   Zwei Bauteile sind als EINE Zeile gebaut und werden unter 640 px
   zusammengedrueckt: die Suchzeile (Feld + Trefferzahl mit
   `white-space:nowrap`) und die dunkle Auswahl-Leiste. Sie duerfen am Handy
   umbrechen statt zu quetschen. Der SEITENKOPF steht bewusst nicht hier —
   den stapelt schon FW3 (Zeile 7355). Dazu das Tap-Ziel-Mass 44 px —
   der app-weit gebaute Standard (FW1-Prototyp), nicht die 36 px, die § 8
   frueher behauptete. Global, damit es jeder Bereich erbt. */
@media (max-width: 640px) {
  .v3-page .v3-searchrow { flex-wrap: wrap; }
  .v3-page .v3-count { white-space: normal; }

  .v3-page .v3-selectbar { flex-wrap: wrap; }
  .v3-page .v3-selectbar .bulkacts { margin-left: 0; width: 100%; }

  .v3-page .v3-btn { min-height: 44px; }
}

/* ══ EVENT-KARTEN MIT TITELBILD (11.08.2026, Carsten) ══════════════════════
   WAS:   `.ev-karten` (Raster) + `.ev-karte` (eine Karte) — ein Event als
          Bild-Karte: Titelbild-Hero, Datum/Ort auf dem Bild, Titel, die
          Zahlen der Zeile, der Klartext-Grund und der Weg in die Akte.
          Die Karte ist eine `.v3-card.v3-cardclip` (Flaeche, Rahmen, Radius,
          Schatten, Beschnitt kommen von dort) — `.ev-karte` ergaenzt nur, was
          eine KARTE ALS LINK zusaetzlich braucht.
   WARUM: Carsten am 11.08.2026 — „die Events haette ich auch gerne in der App
          wieder als richtige Eventkarten dargestellt, die schoen sind, mit
          entsprechendem Bild im Hero". Die Jahres-Liste (/events) hatte das
          im alten `.stift`-Look; hier steht es zum ersten Mal auf v3-Token,
          damit es KEIN zweites Design-System gibt (§ 1).
   SCOPE: global unter `.v3-page` (§ 7 Nr. 2) — jeder Bereich, der eine Sache
          mit Titelbild zeigt, benutzt dieselben Klassen statt neuer.
   SPEC:  docs/design-reference.md § 4 (Baukasten-Zeile) und § 9e.
   Nur --v3-*-Token bzw. der Ink-Ton rgba(22,35,58,…), append-only, keine
   bestehende Regel angefasst. */
.v3-page .ev-karten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
}
.v3-page .ev-karte {
  display: block; overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.v3-page .ev-karte:hover {
  border-color: var(--v3-brand); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(22, 35, 58, .10);
}
.v3-page .ev-karte:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }

/* Feste 16:9-Flaeche: die Karte ist mit und ohne Bild gleich hoch, das Raster
   springt beim Nachladen der Bilder nicht. Der Verlauf mit den Initialen liegt
   IMMER darunter — er ist der Fallback, kein Platzhalter. */
.v3-page .ev-hero {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--v3-brand), var(--v3-brand-deep));
}
.v3-page .ev-initialen {
  font-size: 30px; font-weight: 800; letter-spacing: .02em; color: #fff; opacity: .9;
}
.v3-page .ev-heroimg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .3s ease;
}
.v3-page .ev-karte:hover .ev-heroimg { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .v3-page .ev-karte, .v3-page .ev-heroimg { transition: none; }
  .v3-page .ev-karte:hover { transform: none; }
  .v3-page .ev-karte:hover .ev-heroimg { transform: none; }
}
/* Datum und Ort liegen AUF dem Bild. Der Verlauf geht bis .85 und der Text
   traegt einen Schatten — 11,5 px sind KEIN „large text", die 4,5:1 muessen
   auch ueber einem hellen Foto halten. Beide Texte gleich deckend (eine
   abgeschwaechte Zeile faellt sonst als Erste durch). */
.v3-page .ev-heroband {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 22px 12px 9px; font-size: 11.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(22, 35, 58, .9);
  background: linear-gradient(180deg, rgba(22, 35, 58, 0), rgba(22, 35, 58, .85));
}
.v3-page .ev-herodatum { font-variant-numeric: tabular-nums; }
.v3-page .ev-heroort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .ev-heromarken {
  position: absolute; top: 9px; left: 9px; right: 9px; z-index: 1;
  display: flex; gap: 5px; flex-wrap: wrap;
}
.v3-page .ev-marke {
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 20px; background: rgba(255, 255, 255, .92);
  color: var(--v3-ink);
}
.v3-page .ev-marke.naehe { color: var(--v3-brand); }
/* Amber wie im Haus (`.ab-badge.ab-amber`), kein neues Farb-Alias (§ 7 Nr. 3). */
.v3-page .ev-marke.flagship { background: #fdf3e2; color: var(--v3-warn); }

.v3-page .ev-korper { padding: 13px 15px 14px; }
.v3-page .ev-titel {
  font-size: 14px; font-weight: 700; line-height: 1.32; color: var(--v3-ink);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 37px;
}
.v3-page .ev-zahlen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.v3-page .ev-zahl {
  font-size: 11px; font-weight: 600; color: var(--v3-ink2);
  background: var(--v3-line2); border: 1px solid var(--v3-line);
  border-radius: 20px; padding: 2px 9px;
}
.v3-page .ev-zahl b { font-weight: 800; color: var(--v3-ink); font-variant-numeric: tabular-nums; }
.v3-page .ev-fuss {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--v3-line);
}
/* Der Klartext-Grund („was noch fehlt") ist auf der Karte auf zwei Zeilen
   gedeckelt — die vollstaendige Fassung steht in der Arbeitsliste darunter und
   in der Akte. Gekuerzt, nie verschwiegen. */
.v3-page .ev-fehlt {
  font-size: 11.5px; line-height: 1.4; color: var(--v3-ink2);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.v3-page .ev-oeffnen { font-size: 11.5px; font-weight: 700; color: var(--v3-brand); white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   JOB & KARRIERE — Erklaerbarkeit der Bewertung (12.08.2026)

   Carsten: „Man kann nicht erkennen, was die App aus dem Stellentext fuer
   Bausteine rausgezogen hat, wo was wie gematcht wird, warum das Scoring so
   entstanden ist."

   Bewusst KLEIN gehalten (Design-Review 12.08.2026): Herkunfts-Etiketten sind
   `.ab-badge`, der Leer-Hinweis ist ein `.v3-callout`, die Legende ist
   `.er-legende`/`.er-lg` — hier stehen nur die Stuecke, die es noch nicht gab:
     .bd-g        — der Grund UNTER jedem Balken der Beweisleiste
     .lesart/.ls-* — die Bausteine, die aus der Anzeige gelesen wurden
     .anz-*        — die Original-Anzeige mit ihren Fundstellen
     .hl-*         — die drei Markierungs-Toene (Text, Legende UND Chip in
                     derselben Farbe: die Chips oben und die Markierung unten
                     sollen als dasselbe erkennbar sein)
   Append-only, kein <style> in einer View.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Der Grund unter dem Balken ────────────────────────────────────────────
   Die Dimensions-Zeile bricht dafuer um; die Spalte wird breiter, weil ein
   Satz mehr Platz braucht als eine Zahl. Am Handy EINE Spalte — ein
   `auto-fit`-Track mit Mindestbreite kann nicht schrumpfen und schoebe sonst
   die ganze Seite quer (§ 8). */
.v3-page .bw-dims { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.v3-page .bw-dim { flex-wrap: wrap; align-content: flex-start; margin-bottom: 5px; }
.v3-page .bw-dim .bd-g { flex: 1 0 100%; margin: 2px 0 0 104px; font-size: 11.5px;
  line-height: 1.45; color: var(--v3-ink2); }
@media (max-width: 760px) {
  .v3-page .bw-dims { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .v3-page .bw-dim .bd-g { margin-left: 0; }
}

/* ── Die Bausteine der Bewertung ───────────────────────────────────────────
   Ein Block je Baustein: Kopf (Name · Herkunft · Quelle) → Chips → Zaehlregel.
   Der Innenabstand ist der Karten-Standard (18 px), damit die Chips mit dem
   Kartentitel fluchten. */
.v3-page .lesart { padding: 4px 18px 14px; }
.v3-page .ls-block { padding: 12px 0; border-bottom: 1px solid var(--v3-line2); }
.v3-page .ls-block:last-child { border-bottom: 0; }
.v3-page .ls-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 7px; }
.v3-page .ls-kopf b { font-size: 13.5px; letter-spacing: -.2px; color: var(--v3-ink); }
.v3-page .ls-meta { font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .ls-regel { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--v3-ink2); }
.v3-page .ls-block.ls-leer .ls-kopf b { color: var(--v3-ink2); }

/* ── Die Original-Anzeige mit ihren Fundstellen ────────────────────────────
   `white-space: pre-wrap` haelt die Absaetze der Anzeige — der Text ist
   Klartext, kein HTML (der Fremdtext wird nie als Markup ausgegeben). */
.v3-page .anz-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 460px;
  overflow-y: auto; background: #fbfcfe; border: 1px solid var(--v3-line); border-radius: 12px;
  padding: 13px 15px; font-size: 12.8px; line-height: 1.65; color: var(--v3-ink2); }
.v3-page .anz-text:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .anz-fuss { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--v3-ink2); }
.v3-page .er-lg.anz-abgel::before { background: repeating-linear-gradient(45deg, #fdf3e2,
  #fdf3e2 3px, #f6e3c3 3px, #f6e3c3 6px); }

/* Die drei Markierungs-Toene — im Text, in der Legende und am Chip derselbe. */
.v3-page .anz-text mark { padding: 0 2px; border-radius: 4px; color: var(--v3-ink); }
.v3-page .anz-text mark.hl-funktion,
.v3-page .er-lg.hl-funktion::before,
.v3-page .v3-chip.hl-funktion      { background: #cfe0fb; }
.v3-page .anz-text mark.hl-anforderungen,
.v3-page .er-lg.hl-anforderungen::before,
.v3-page .v3-chip.hl-anforderungen { background: #cfeedd; }
.v3-page .anz-text mark.hl-faehigkeiten,
.v3-page .er-lg.hl-faehigkeiten::before,
.v3-page .v3-chip.hl-faehigkeiten  { background: #e8dcfb; }

/* ── Sammel-Leiste: „Alle / keine" + Zaehler (Bruecke zur Kampagne) ──────────
   Nur mit Modifier, damit die anderen Traeger von `.v3-sammeltitel`
   (Transaktionen, WhatsApp) unberuehrt bleiben. */
.v3-page .v3-sammelbar .v3-sammeltitel.mit-alle { display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.v3-page .v3-alle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-weight: 700; cursor: pointer; }
.v3-page .v3-sammelzahl { font-size: 12px; color: var(--v3-ink2); }
.v3-page .v3-sammelzahl b { font-variant-numeric: tabular-nums; color: var(--v3-ink); }

/* ═══════════════════════════════════════════════════════════════════════
   EVENT-INSIGHTS — Reihen, Diagramme, Ordnung (12.08.2026, § 9e-2)
   ───────────────────────────────────────────────────────────────────────
   KEIN Diagramm-Framework. Alle Grafiken sind CSS-Balken mit datengetriebenen
   Inline-Massen (`style="height: X%"`) — dasselbe Muster wie `.ab-bar`
   (Abstimmungen). Grund: eine Grafik, die ohne JavaScript entsteht, steht auch
   im Ausdruck und in einer Turbo-Antwort, und sie kostet keinen zweiten
   Farbraum neben den `--v3-*`-Tokens.

   LESBARKEITS-REGELN, die im Markup mitgebaut sind:
     · Jede Grafik trägt ihre Achse als TEXT (Jahr unter der Säule, Zahl über
       ihr) — eine Grafik, die man ablesen muss, ist keine.
     · Jede Grafik trägt `role="img"` + `aria-label` mit denselben Zahlen und
       darunter die Zählregel im Klartext (wie die KPI-Kacheln).
     · Kein Wert ohne Bezugsgrösse. Die gestapelten Bänder tragen ihre
       Beschriftung in einer Legende, nicht als Farbe allein.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Säulen-Diagramm (Anmeldungen je Ausgabe/Jahr) ───────────────────── */
.v3-page .ev-dia { padding: 6px 2px 0; }
.v3-page .ev-saeulen { display: flex; align-items: flex-end; gap: 10px;
  min-height: 176px; overflow-x: auto; padding: 20px 2px 0; }
.v3-page .ev-saeule { flex: 1 0 46px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; }
.v3-page .ev-saeulenfeld { position: relative; width: 100%; height: 132px;
  display: flex; align-items: flex-end; }
/* position: relative ist tragend — die Ist-Marke (.ev-saeulenist) rechnet ihr
   bottom-Prozent gegen den BALKEN. Ohne diesen Bezug loest sie gegen das
   Skalenfeld auf und schwebt UEBER der Saeule (UX-Durchlauf 14.08.). */
.v3-page .ev-saeulenbalken { position: relative; width: 100%; min-height: 3px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #2f6fe0, var(--v3-brand)); }
.v3-page .ev-saeulenbalken.mut { background: repeating-linear-gradient(135deg,
  #dbe3ef 0 5px, #eef1f6 5px 10px); }
/* Die Ist-Zahl liegt als Marke IM Balken — sie ist eine andere Frage als die
   Anmeldung und darf deshalb nicht als zweite Säule danebenstehen. */
.v3-page .ev-saeulenist { position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--v3-warn); }
.v3-page .ev-saeulenist::after { content: attr(data-label); position: absolute;
  right: 0; top: -14px; font-size: 9.5px; font-weight: 700; color: var(--v3-warn);
  white-space: nowrap; }
.v3-page .ev-saeulenwert { position: absolute; left: 0; right: 0; top: -17px;
  text-align: center; font-size: 11px; font-weight: 750; color: var(--v3-ink);
  font-variant-numeric: tabular-nums; }
.v3-page .ev-saeulenjahr { font-size: 11px; font-weight: 700; color: var(--v3-ink2);
  font-variant-numeric: tabular-nums; }
.v3-page .ev-saeulensub { font-size: 10px; color: var(--v3-ink3); }

/* ── Gestapeltes Band (Verteilung innerhalb einer Menge) ─────────────── */
.v3-page .ev-stapelzeile { display: grid; grid-template-columns: 62px 1fr 78px;
  align-items: center; gap: 11px; padding: 5px 0; }
.v3-page .ev-stapellabel { font-size: 11.5px; font-weight: 700; color: var(--v3-ink2);
  font-variant-numeric: tabular-nums; }
.v3-page .ev-stapelzahl { font-size: 11.5px; color: var(--v3-ink3); text-align: right;
  font-variant-numeric: tabular-nums; }
.v3-page .ev-stapel { display: flex; height: 15px; border-radius: 999px;
  overflow: hidden; background: #eef1f6; }
.v3-page .ev-stapel > span { display: block; min-width: 1px; }
.v3-page .ev-stapel > .s1 { background: var(--v3-brand); }
.v3-page .ev-stapel > .s2 { background: #4d84e8; }
.v3-page .ev-stapel > .s3 { background: #7ba7f0; }
.v3-page .ev-stapel > .s4 { background: #a8c6f6; }
.v3-page .ev-stapel > .s5 { background: #cddffb; }
.v3-page .ev-stapel > .rest { background: #dfe5ee; }
.v3-page .ev-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.v3-page .ev-legende span { display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--v3-ink2); }
.v3-page .ev-legende i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ── Der Zählregel-Fuss unter jeder Grafik (Pflicht, nie weglassen) ──── */
.v3-page .ev-diaregel { margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--v3-line); font-size: 11.5px; color: var(--v3-ink2);
  line-height: 1.55; }
.v3-page .ev-diaregel b { color: var(--v3-ink); }

/* ── Reihen-Karte (das wiederkehrende Format als Kachel) ─────────────── */
.v3-page .ev-reihen { display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.v3-page a.ev-reihe { display: block; padding: 15px 16px 14px; text-decoration: none;
  color: inherit; }
.v3-page a.ev-reihe:hover { border-color: #bcd3f7; }
.v3-page a.ev-reihe:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .ev-reihekopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-page .ev-reihename { font-size: 15px; font-weight: 750; color: var(--v3-ink); }
.v3-page .ev-reiheturnus { font-size: 11.5px; color: var(--v3-ink3); margin-top: 3px; }
.v3-page .ev-reihezahlen { display: flex; gap: 16px; margin-top: 11px; flex-wrap: wrap; }
.v3-page .ev-reihezahl b { display: block; font-size: 19px; font-weight: 760;
  color: var(--v3-ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.v3-page .ev-reihezahl span { font-size: 10.5px; color: var(--v3-ink3); }

/* Das Flagship-Zeichen. Dieselbe Marke wie auf der Event-Karte (.ev-marke
   .flagship) — ein Zeichen, eine Bedeutung, zwei Orte. */
.v3-page .ev-flag { display: inline-flex; align-items: center; gap: 4px;
  background: #fdf3e2; color: var(--v3-warn); border-radius: 999px;
  padding: 2px 9px; font-size: 10.5px; font-weight: 750; letter-spacing: .2px; }

/* ── Die Ordnungs-Zeile in der Akte (Reihe + Art pflegen) ────────────── */
.v3-page .ev-ordnung { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.v3-page .ev-ordnung .v3-field { flex: 1 1 216px; }
.v3-page .ev-ordnung > label { flex: 1 1 216px; }
/* Die Feld-Gruppe und der Fuss stehen IMMER auf eigener Zeile — sie gehoeren
   nicht in die Reihe der einzelnen Felder (Folgepunkt U1/U2). */
.v3-page .ev-ordnung > .v3-fieldgroup,
.v3-page .ev-ordnung > .ev-ordnungfuss { flex: 1 1 100%; }
.v3-page .ev-ordnungfuss { margin-top: 2px; }
.v3-page .ev-ordnungfuss .v3-fieldhint { margin: 8px 0 10px; }
.v3-page .ev-vorschlag { margin-top: 11px; font-size: 12.5px; color: var(--v3-ink2);
  line-height: 1.55; }

@media (max-width: 720px) {
  .v3-page .ev-stapelzeile { grid-template-columns: 54px 1fr 62px; gap: 8px; }
  .v3-page .ev-saeulen { gap: 7px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GELDFLUSS (Stufe 1, 12.08.2026) — Design-Referenz § 9t

   ⚠️ AUSSCHLIESSLICH ZUSTANDS-/ANORDNUNGS-MODIFIER bestehender Bauteile.
   Der Bereich bringt KEINE eigene Bildsprache und KEIN eigenes Stylesheet mit:
   `finanzen_v3.css` wurde am 06.08.2026 genau deshalb geloescht (§ 9c). Wer
   hier eine neue Farbe, einen neuen Schatten oder eine neue Schrift ergaenzt,
   baut die naechste Bereichs-Insel.

   Getragen werden: .v3-card · .ab-kpi · .lk/.lks · .kette/.kglied ·
   .heute-row/.fz-vorgang · .dz · .v3-table · .v3-btn · .ab-badge · .secttl.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Arbeits-Leiste: eine Werkbank-Zeile, kein Kachel-Look. Die Kante links
   sagt „hier liegt Arbeit" — dieselbe Warnfarbe wie ueberall. */
.v3-page .arbeitsleiste { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px; border-left: 4px solid var(--v3-warn); }
.v3-page .arbeitsleiste .albox { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.v3-page .arbeitsleiste .alsp { margin-left: auto; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap; }
.v3-page .arbeitsleiste .dz .dzn { font-size: 30px; }
.v3-page .arbeitsleiste a.ab-badge { text-decoration: none; }

/* Familien-Reiter „Ueberblick · Liste" — das bestehende Segment-Control,
   nur mit Abstand nach unten. */
/* `.gf-ebenen` ist mit Fin-W6/W7 entfallen: der Familien-Reiter ist vom
   Sonderfall „Geldfluss" zum Bauteil ALLER vier Familien geworden und heisst
   jetzt `.fin-ebenen` (in der klebenden Bereichs-Leiste, s. u.). Kein Traeger
   mehr — mit grep ueber app/views und test belegt. */

/* Der Zeitraum-Umschalter: eine flache Werkbank-Zeile, kein zweiter Kopf.
   Voreinstellungen links, freie Wahl rechts, der geltende Stand ganz aussen —
   damit die Angabe aus dem Seitenkopf hier auch BEDIENBAR ist. */
.v3-page .gf-zeitraum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 16px; }
.v3-page .gf-zeitraum .gf-zrtitel { font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 800; color: var(--v3-ink3); }
.v3-page .gf-zeitraum .gf-zrwahl { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-page .gf-zeitraum .gf-zrform { display: flex; align-items: flex-end; gap: 8px;
  flex-wrap: wrap; padding-left: 12px; border-left: 1px solid var(--v3-line2); }
.v3-page .gf-zeitraum .gf-zrform .v3-field { margin: 0; }
.v3-page .gf-zeitraum .gf-zrform .v3-field input { font-size: 12px; padding: 5px 8px; }
.v3-page .gf-zeitraum .gf-zrstand { margin-left: auto; font-size: 11.5px; font-weight: 650;
  color: var(--v3-ink3); }

/* Das Kettenband als schmales Verbindungselement zwischen Quellen und Toepfen.
   Gleiches Bauteil wie ueberall, nur enger — die Arbeit bekommt den Platz. */
.v3-page .kette.schmal { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 7px;
  margin-bottom: 4px; }
.v3-page .kette.schmal a.kglied { padding: 8px 11px; }
.v3-page .kette.schmal .kglied .kg { font-size: 9.5px; }
.v3-page .kette.schmal .kglied .kt { font-size: 12.5px; margin-top: 1px; }
.v3-page .kette.schmal .kglied .kz { font-size: 11px; margin-top: 3px; }

/* Unterkanal-Zeile IN der Lauf-Karte („davon Sammeleinzuege"). Eingerueckt
   und getrennt, damit das Auge EINE Quelle liest, nicht zwei. */
.v3-page .lk .lkunter { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--v3-line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11.5px;
  font-weight: 650; color: var(--v3-ink2); line-height: 1.5; }
.v3-page .lk .lkunter .num { font-weight: 800; color: var(--v3-ink); }

/* Toepfe-Reihe: dieselbe Kachel wie in der KPI-Reihe, nur klickbar und
   inline aufklappbar. Die Reihe IST der Turbo-Frame (`turbo-frame.tpf`) —
   ein Klick tauscht Kacheln und geoeffneten Topf gemeinsam, damit der Zustand
   an der Kachel steht und nicht nur unter ihr. */
.v3-page .tpf { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.v3-page .tpf a.ab-kpi { text-decoration: none; color: inherit; display: block; }
.v3-page .tpf a.ab-kpi:hover { border-color: #c3d3ee; }
.v3-page .tpf .ab-kpi.on { border-color: var(--v3-brand); box-shadow: 0 0 0 2px #dce8fb, var(--v3-shadow); }
.v3-page .tk-kopf { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.v3-page .tk-konto { font-size: 10px; font-weight: 800; font-family: ui-monospace, Menlo, monospace;
  padding: 1px 6px; border-radius: 5px; background: #f1f4f8; color: var(--v3-ink2); }
.v3-page .tk-konto.fehlt { background: #fdeaec; color: #b02a3a; }

/* Die Buchungen klappen INLINE unter ihrer Kachel auf — ueber die volle
   Reihenbreite, damit die Zuordnung Kachel -> Liste sichtbar bleibt. */
.v3-page .tpf .topf-inline { grid-column: 1 / -1; background: var(--v3-card);
  border: 1px solid var(--v3-brand); border-radius: var(--v3-r);
  box-shadow: 0 0 0 2px #dce8fb, var(--v3-shadow); overflow: hidden; }
.v3-page .gf-topfkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--v3-line2); font-size: 12.5px;
  color: var(--v3-ink2); }
.v3-page .gf-topfkopf b { color: var(--v3-ink); }
.v3-page .gf-topfkopf .v3-btn { margin-left: auto; }
.v3-page .gf-zeile-sub { display: block; font-size: 11px; color: var(--v3-ink3); }

/* Zeilen-Aktionen: jede ist ein EIGENES Formular (kein formaction in einem
   fremden form_with — per-form-CSRF ergibt sonst 422, Lehre B3). */
.v3-page .tx-um { display: flex; gap: 6px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; }
.v3-page .gf-zeilenform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.v3-page .gf-zeilenform .fz-sel { max-width: 190px; }
.v3-page .fz-sel { font: inherit; font-size: 12px; font-weight: 650; border: 1px solid var(--v3-line);
  border-radius: 9px; padding: 6px 9px; background: #fff; color: var(--v3-ink2); max-width: 190px; }

/* Kopf und Fuss der Arbeitsliste. */
.v3-page .gf-listenkopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--v3-line2); font-size: 12.5px;
  font-weight: 700; color: var(--v3-ink2); }
.v3-page .gf-listenkopf .num { color: var(--v3-ink); }
.v3-page .gf-listenkopf-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; }
.v3-page .gf-listenfuss { padding: 11px 18px; border-top: 1px solid var(--v3-line2);
  font-size: 11.5px; color: var(--v3-ink3); line-height: 1.6; }

/* „Kommt nicht in der Schicht an" (G3) + unaufgeloeste Sammeleinzuege.
   Sichtbar machen, nicht spiegeln. */
.v3-page .gf-daneben { display: grid; gap: 10px; font-size: 12.5px; color: var(--v3-ink2);
  line-height: 1.55; border-left: 4px solid var(--v3-bad); margin-bottom: 16px; }
.v3-page .gf-daneben b { color: var(--v3-ink); }

/* Der Kaskaden-Frame: leer heisst geschlossen — kein Geisterkasten. */
.v3-page .gf-kaskadeframe { display: block; margin-top: 16px; }
.v3-page .gf-kaskadeframe.leer { margin-top: 0; }
.v3-page .gf-kaskadekopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 12.5px; color: var(--v3-ink2); }
.v3-page .gf-kaskadekopf b { color: var(--v3-ink); font-size: 14px; }
.v3-page .gf-kaskadekopf .v3-btn { margin-left: auto; }

/* Das Kaskaden-Panel: die Stationen-Leiste.
   ⚠️ Diese Klassen gab es NOCH NICHT — der erste Bau ging davon aus, weil ein
   zu weiter grep `.kstat` traf und als `.kst` gelesen wurde. Das Panel wäre
   damit auf BEIDEN Ebenen ohne Rahmen und ohne Ton-Unterscheidung erschienen,
   also genau ohne die Aussage, die es tragen soll (belegt vs. unbelegt).
   Werte 1:1 aus dem abgenommenen Mockup v4. */
.v3-page .kst { position: relative; padding: 0 0 15px 24px; border-left: 2px solid var(--v3-line);
  margin-left: 7px; }
.v3-page .kst:last-child { border-left-color: transparent; padding-bottom: 0; }
.v3-page .kst::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px;
  height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid #c3cad6; }
.v3-page .kst.hit::before { border-color: var(--v3-ok); background: var(--v3-ok); }
.v3-page .kst.warnk::before { border-color: var(--v3-warn); background: var(--v3-warn); }
.v3-page .kst .kl2 { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 800; color: var(--v3-ink3); }
.v3-page .kst .kn { font-size: 13.5px; font-weight: 750; margin-top: 1px; }
.v3-page .kst .kd2 { font-size: 12.5px; color: var(--v3-ink2); font-weight: 550; margin-top: 3px; }
/* „miss" = wir wissen es nicht — gedämpft, nie rot: ein fehlender Beleg ist
   kein Fehler (dieselbe Regel wie die leeren Balken der Jobboard-Beweisleiste). */
.v3-page .kst.miss .kn, .v3-page .kst.miss .kd2 { color: var(--v3-ink3); font-weight: 600; }

/* Zitat und Wirkungs-Kasten. */
.v3-page .gf-kaskade .zitat { background: #f6f8fc; border: 1px solid var(--v3-line);
  border-radius: 9px; padding: 9px 11px; margin-top: 7px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: var(--v3-ink2); word-break: break-word; }
.v3-page .gf-kaskade .zitat mark { background: #fff2c4; padding: 0 2px; border-radius: 3px;
  font-weight: 700; color: var(--v3-ink); }
.v3-page .gf-kaskade .wirk { border: 1px solid var(--v3-line); border-left: 4px solid var(--v3-ok);
  background: #f2faf6; border-radius: 10px; padding: 11px 13px; font-size: 12.5px;
  color: var(--v3-ink2); margin-top: 6px; }
.v3-page .gf-kaskade .wirk.warnw { border-left-color: var(--v3-bad); background: #fdf5f6; }
.v3-page .gf-kaskade .wirk b { color: var(--v3-ink); }
.v3-page .gf-kaskade .wirk ul { margin: 6px 0 0; padding-left: 17px; }
.v3-page .gf-umhaengen { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-top: 12px; }
/* Der Topf-Picker bringt Werkzeugzeile und Hinweis mit — er nimmt die Breite,
   der Knopf bleibt daneben (W1, 21.08.2026). */
.v3-page .gf-umhaengen .topfpick { flex: 1 1 320px; min-width: 260px; }
.v3-page .gf-umhaengen .topfpick .v3-field { margin-bottom: 0; }
/* Der Topf unter dem Schreib-Knopf: eine Zeile, keine Konkurrenz zum Knopf. */
.v3-page .gf-umhaengen .kd2 { flex-basis: 100%; margin-top: 2px; }

/* Mobil: der Fluss laeuft vertikal, das Kettenband scrollt seitlich.
   NIE overflow:hidden — das Abgeschnittene waere unerreichbar (§ 9q). */
@media (max-width: 720px) {
  .v3-page .arbeitsleiste .alsp { margin-left: 0; width: 100%; }
  .v3-page .kette.schmal { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .v3-page .gf-topfkopf .v3-btn { margin-left: 0; }
  .v3-page .gf-listenkopf-rechts { margin-left: 0; }
  /* Die Zeitraum-Zeile bricht in drei Bloecke statt zu quetschen; die
     senkrechte Trennlinie ergibt umgebrochen keinen Sinn mehr. */
  .v3-page .gf-zeitraum .gf-zrform { padding-left: 0; border-left: 0; }
  .v3-page .gf-zeitraum .gf-zrstand { margin-left: 0; width: 100%; }
}

/* ══ GEFILTERTE TREFFERZAHL IM SEITENKOPF (13.08.2026, Carsten) ════════════
   WAS: `.v3-trefferzahl` — die Aussage „N von M in der Liste — Filter: …",
        gerendert im `untertitel`-Slot von `shared/_v3_page_head`.
   WARUM: Wer filtert, schaut nach oben. Die Zahl stand vorher nur als
        12,5-px-Zeile an der Suchleiste, waehrend der Seitenkopf die
        Population nannte.
   WO: app/views/members/index.html.erb (bislang der einzige Verwender).
   REGEL: Sie steht genau EINMAL je Seite — bei aktivem Filter oben, sonst
        als schlichte Listengroesse an der Suchleiste (`.v3-count`).
        Nie beides (Klick-Audit 30.07.2026 §3.3). Detail: design-reference § 9v. */
.v3-page .v3-pagehead .sub .v3-trefferzahl b.num { font-size: 16px; font-weight: 800; color: var(--v3-ink); font-variant-numeric: tabular-nums; }
.v3-page .v3-pagehead .sub .v3-trefferzahl a { color: var(--v3-brand); font-weight: 650; text-decoration: none; }
.v3-page .v3-pagehead .sub .v3-trefferzahl a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   § 9w — DER ANSPRACHE-STECKBRIEF UND DIE WINBACK-AKTE (13.08.2026, #828)

   Drei neue globale Bauteile, alle unter `.v3-page`, alle aus dem bestehenden
   Farb-/Radius-/Schatten-Vokabular (keine neuen Variablen, kein zweites
   Design-System):

     .dd / .ddin / .ddz / .ddfuss   der AUFKLAPPER (shared/_aufklapper)
     .stb / .stbz                   der STECKBRIEF (shared/_member_steckbrief)
     .kv-liste / .kv-z              die HISTORIE (Lese-Schicht, Charta 0.3;
                                    Variante C seit Verlauf-W1 — die frueheren
                                    Namen .kh-liste/.khd gibt es nicht mehr)
     .kz-aktionen / .kz-akt         die KOMMUNIKATIONS-ZONE (Charta-Klasse 2)

   ⚠️ NAMENSKOLLISION, bewusst umbenannt: die Einzeleintrags-Zeile im Aufklapper
   heisst `.ddz` und NICHT `.dz`. `.v3-page .dz` ist seit dem Datenmanagement-
   Neubau die DOPPELZAHL („N Befunde bei M Mitgliedern", shared/_doppelzahl) —
   derselbe Klassenname mit anderer Bedeutung haette beide Bauteile still
   zerlegt, sobald sie auf einer Seite zusammentreffen. Aus demselben Grund
   heisst die Flex-Zeile `.v3-rows` und nicht `.rows`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Aufklapper ─────────────────────────────────────────────────────────────
   Die Pille traegt ihre Zahl schon zugeklappt (Entscheid W9). Server-gerendert
   ueber <details> — kein JavaScript, damit der Drill-Weg auch dann traegt, wenn
   Stimulus noch nicht geladen ist. */
.v3-page .dd { display: inline-block; vertical-align: middle; }
.v3-page .dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px dashed #c3d3ee; background: #f7faff; color: #2b5cbf; }
.v3-page .dd > summary::-webkit-details-marker { display: none; }
.v3-page .dd > summary::marker { content: ""; }
.v3-page .dd > summary:hover { background: #e8effd; border-style: solid; }
.v3-page .dd > summary::after { content: "\25BE"; font-size: 9px; opacity: .7; transition: transform .12s; }
.v3-page .dd[open] > summary::after { transform: rotate(180deg); }
.v3-page .dd[open] > summary { background: #e8effd; border-style: solid; }
.v3-page .dd.asbadge > summary { border-style: solid; }
.v3-page .dd.vio > summary { border-color: #e7d2f7; background: #f5eafd; color: #7b2fb8; }
.v3-page .dd.gru > summary { border-color: #c4ead6; background: #e3f6ec; color: #12794a; }
/* warn + grau: die ton_klasse-Map des Aufklappers kannte vier Toene, das CSS nur
   zwei — ein ueberschrittener Frequenzschutz sah neutral aus (Prod-UX 28.08.). */
.v3-page .dd.warn > summary { border-color: #f3cfc4; background: #fdeee9; color: #b23c17; }
.v3-page .dd.grau > summary { border-color: var(--line); background: #f4f6f9; color: var(--ink3); }
.v3-page .dd.grau > summary { border-color: #e2e8f0; background: #f1f4f8; color: #5b6b84; }
.v3-page .dd.warn > summary { border-color: #f7dfb4; background: #fefaf2; color: #a15c00; }
.v3-page .dd .ddin { display: block; margin-top: 6px; border: 1px solid var(--v3-line);
  border-radius: 10px; background: #fbfcfe; padding: 7px 10px; font-size: 12px; font-weight: 400;
  color: var(--v3-ink); min-width: 250px; max-width: 100%; }
.v3-page .dd .ddin.weit { min-width: 380px; }
.v3-page .dd.block { display: block; }
.v3-page .dd.block .ddin { min-width: 0; }
.v3-page .ddleer { font-size: 11.5px; color: var(--v3-ink3); font-style: italic; }

/* Einzeleintrags-Zeile. Siehe Kollisions-Hinweis oben: NICHT `.dz`. */
.v3-page .ddz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px;
  align-items: center; padding: 4px 0; border-bottom: 1px solid var(--v3-line2); font-size: 12px; }
.v3-page .ddz:last-child { border-bottom: 0; }
.v3-page .ddz .d { font-variant-numeric: tabular-nums; color: var(--v3-ink3); font-weight: 700;
  font-size: 11px; white-space: nowrap; }
.v3-page .ddz .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .ddz .t a { color: var(--v3-brand); text-decoration: none; font-weight: 650; }
.v3-page .ddz .t a:hover { text-decoration: underline; }
.v3-page .ddz .r { font-variant-numeric: tabular-nums; font-weight: 750; font-size: 11.5px;
  white-space: nowrap; color: var(--v3-ink2); }
.v3-page .ddz .r.ok { color: var(--v3-ok); }
.v3-page .ddz .r.bad { color: var(--v3-bad); }
.v3-page .ddfuss { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--v3-line2);
  font-size: 11px; color: var(--v3-ink3); line-height: 1.45; white-space: normal; }
.v3-page .ddfuss a { color: var(--v3-brand); text-decoration: none; font-weight: 700; }

/* ── Steckbrief ────────────────────────────────────────────────────────────── */
.v3-page .stb { border: 1px solid var(--v3-line); border-radius: var(--v3-r); background: #fff;
  overflow: hidden; box-shadow: var(--v3-shadow); }
.v3-page .stb .stbkopf { display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: #f7f9fc; border-bottom: 1px solid var(--v3-line2); font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--v3-ink3); flex-wrap: wrap; }
.v3-page .stb .stbkopf-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.v3-page .stb .stbz { display: grid; grid-template-columns: 122px minmax(0, 1fr); gap: 11px;
  padding: 9px 14px; border-bottom: 1px solid var(--v3-line2); align-items: start; }
.v3-page .stb .stbz:last-child { border-bottom: 0; }
.v3-page .stb .stbz.stbz-aktiv { background: #f7fcf9; }
.v3-page .stb .stbz .lbl { font-size: 11px; font-weight: 800; color: var(--v3-ink2); padding-top: 2px; }
.v3-page .stb .stbz .lblfrage { display: block; font-size: 9.5px; font-weight: 600; color: var(--v3-ink3);
  margin-top: 2px; font-style: italic; }
.v3-page .stb .stbz .val { font-size: 12.5px; line-height: 1.45; min-width: 0; }
.v3-page .stb-rand { margin-top: 8px; margin-bottom: 0; font-size: 11.5px; }

/* Warn-Knopf („Kündigung zurücknehmen"): dieselbe Form wie jeder `.v3-btn`,
   nur in der Haus-Warnfarbe. Kein neues Farb-Alias — `--v3-bad` ist gesetzt. */
.v3-page .v3-btn.warnbtn { color: var(--v3-bad); border-color: #f6cdd3; background: #fff; }
.v3-page .v3-btn.warnbtn:hover { background: #fef7f8; border-color: #eeb3bc; }

/* Schmale Variante — vorbereitet fuer die Ticket-Seitenleiste (Welle 2, W8).
   Der Umfang aendert NIE den Inhalt einer Zahl, nur die Prosa daneben. */
.v3-page .stb.stb-schmal .stbz { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 11px; }
.v3-page .stb.stb-schmal .stbz .lbl { padding-top: 0; }
.v3-page .stb.stb-schmal .dd .ddin { min-width: 0; }
.v3-page .stb.stb-schmal .dd .ddin.weit { min-width: 0; }

/* Gemeinsame Kleinteile des Steckbriefs. `.v3-rows` statt `.rows` — siehe oben. */
.v3-page .v3-rows { display: flex; flex-wrap: wrap; gap: 5px 11px; align-items: center; }
.v3-page .v3-rows + .v3-rows { margin-top: 6px; }
.v3-page .kvp { font-size: 12px; color: var(--v3-ink2); }
.v3-page .kvp b { color: var(--v3-ink); font-weight: 750; }
.v3-page .quelle { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase; color: var(--v3-ink3); background: #f1f4f8;
  border-radius: 5px; padding: 1px 6px; }
.v3-page .zitat { margin-top: 5px; border-left: 3px solid #e2e8f0; padding: 1px 0 1px 10px;
  font-size: 12px; color: var(--v3-ink2); font-style: italic; line-height: 1.45; }
.v3-page .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  letter-spacing: .2px; }
.v3-page .jahre { display: flex; gap: 5px; flex-wrap: wrap; }
.v3-page .jk { border: 1px solid var(--v3-line); border-radius: 8px; padding: 4px 9px; min-width: 76px;
  background: #fff; text-decoration: none; color: inherit; display: block; }
.v3-page .jk .jj { display: block; font-size: 10px; font-weight: 800; color: var(--v3-ink3); }
.v3-page .jk .jb { display: block; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v3-page .jk .js { display: block; font-size: 9.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .jk.ok { border-color: #c4ead6; background: #f4fcf8; }
.v3-page .jk.ok .jb { color: var(--v3-ok); }
.v3-page .jk.off { border-color: #f6cdd3; background: #fef7f8; }
.v3-page .jk.off .jb { color: var(--v3-bad); }

/* ── Kommunikations-Verlauf · Variante C „Hybrid" (Verlauf-W1, #862) ────────
   EIN Kontakt = EINE Zeile. Der Randstreifen trennt sichtbar, was die Charta
   trennt: Vorgang (Klasse 2, blau) gegen Belegpost (Klasse 3, grau). Genau
   diese Unterscheidung ginge verloren, wuerde man alles in ein Modell giessen.

   ⚠️ PRAEFIX `.kv-` vor der Vergabe gegrept (Lehre 17): im ganzen Repo kein
   Treffer. Die Vorgaenger-Namen `.kh-liste`/`.khd` sind ersatzlos entfallen —
   grep-Beweis: nur dieses Bauteil und `winback_akte_test` trugen sie.

   ⚠️ EIN CHEVRON IST EIN VERSPRECHEN: `.kv-chev` ist bewusst leer, wenn die
   Zeile nicht aufklappt. Kein CSS erzeugt hier ein Pfeil-Zeichen — die
   Entscheidung faellt in `VerlaufZeilen::Zeile#aufklappbar?`, nicht im Stil. */
.v3-page .kv-liste { border-top: 1px solid var(--v3-line2); }
.v3-page .kv-z { border-bottom: 1px solid var(--v3-line2); }
.v3-page .kv-z:last-child { border-bottom: 0; }
.v3-page .kv-z > summary,
.v3-page .kv-z.kv-fest { list-style: none; display: grid;
  grid-template-columns: 66px 148px minmax(0, 1fr) 16px 76px 100px 12px;
  gap: 10px; padding: 8px 14px; align-items: center; font-size: 12.3px; }
.v3-page .kv-z > summary { cursor: pointer; }
.v3-page .kv-z > summary::-webkit-details-marker { display: none; }
.v3-page .kv-z > summary::marker { content: ""; }
.v3-page .kv-z > summary:hover { background: #fafbfe; }
.v3-page .kv-z[open] > summary { background: #f7f9fc; }
.v3-page .kv-dat { font-variant-numeric: tabular-nums; color: var(--v3-ink3); font-weight: 700;
  font-size: 11.5px; line-height: 1.25; }
.v3-page .kv-dat i { display: block; font-style: normal; font-weight: 600; font-size: 10.3px; }
.v3-page .kv-mk { display: inline-flex; align-items: center; gap: 6px; font-size: 11.2px;
  font-weight: 800; color: var(--v3-ink2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.v3-page .kv-mk::before { content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: var(--v3-ink3); flex: none; }
.v3-page .kv-mk-vorgang::before { background: var(--v3-brand); }
.v3-page .kv-mk-whatsapp::before { background: #25d366; }
.v3-page .kv-mk-mail::before { background: #7c6cf0; }
.v3-page .kv-mk-beleg::before { background: #c3ccda; }
/* Die Regel ist SICHTBAR, bevor man klickt (Variante C). */
.v3-page .kv-mk.dlg::after { content: "Dialog"; font-size: 9.2px; font-weight: 800;
  letter-spacing: .3px; background: #eef1f6; color: var(--v3-ink3); border-radius: 4px;
  padding: 1px 4px; }
.v3-page .kv-ttl { min-width: 0; }
.v3-page .kv-ttl b { display: block; font-weight: 650; font-size: 12.8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-page .kv-ttl em { font-style: normal; font-size: 11.2px; color: var(--v3-ink3); font-weight: 550; }
.v3-page .kv-ri { color: var(--v3-ink3); font-weight: 800; text-align: center; }
.v3-page .kv-ri.ein { color: var(--v3-brand); }
.v3-page .kv-n { font-size: 11.2px; font-weight: 750; color: #5a48c9; text-align: center;
  white-space: nowrap; }
.v3-page .kv-tuerzelle { text-align: right; min-width: 0; }
.v3-page .kv-tuer { font-size: 11.7px; font-weight: 700; color: var(--v3-brand);
  text-decoration: none; white-space: nowrap; }
.v3-page .kv-tuer:hover { text-decoration: underline; }
.v3-page .kv-chev { color: var(--v3-ink3); text-align: center; font-weight: 700;
  transition: transform .12s; }
.v3-page .kv-z[open] .kv-chev { transform: rotate(90deg); display: inline-block; }
.v3-page .kv-z.vorgang > summary, .v3-page .kv-z.vorgang.kv-fest { box-shadow: inset 3px 0 0 var(--v3-brand); }
.v3-page .kv-z.beleg > summary, .v3-page .kv-z.beleg.kv-fest { box-shadow: inset 3px 0 0 #dfe5ee; }
.v3-page .kv-z.whatsapp > summary, .v3-page .kv-z.whatsapp.kv-fest { box-shadow: inset 3px 0 0 #25d366; }
.v3-page .kv-z.mail > summary, .v3-page .kv-z.mail.kv-fest { box-shadow: inset 3px 0 0 #cfc9fb; }

/* Der Aufklapp-Bereich: Chat, Serie oder Beleg — eine Regel je Art. */
.v3-page .kv-auf { padding: 4px 16px 14px 92px; background: #f8fafd;
  border-top: 1px solid var(--v3-line2); }
.v3-page .kv-beleg { background: #fff; border: 1px solid var(--v3-line); border-radius: 11px;
  padding: 10px 13px; max-width: 720px; }
.v3-page .kv-txt { font-size: 12.4px; color: var(--v3-ink2); line-height: 1.6; white-space: pre-line; }
.v3-page .kv-leer { font-size: 12.2px; color: var(--v3-ink3); font-style: italic; }
.v3-page .kv-laedt { font-size: 12.2px; color: var(--v3-ink3); display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap; }
.v3-page .kv-sub { display: grid; grid-template-columns: 66px minmax(0, 1fr) 120px; gap: 12px;
  align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--v3-line);
  font-size: 12.3px; max-width: 720px; }
.v3-page .kv-sub:last-of-type { border-bottom: 0; }
.v3-page .kv-sd { font-size: 11.4px; font-weight: 700; color: var(--v3-ink3);
  font-variant-numeric: tabular-nums; }
.v3-page .kv-st { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .kv-stz { text-align: right; }
.v3-page .kv-fuss { margin-top: 10px; display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; font-size: 11.6px; color: var(--v3-ink3); }
.v3-page .kv-fusslink { font-size: 12px; font-weight: 700; color: var(--v3-brand);
  text-decoration: none; }
.v3-page .kv-fusslink:hover { text-decoration: underline; }

/* ── Kommunikations-Zone ────────────────────────────────────────────────────
   „Ein Knopf, der nicht kann, verspricht nichts": `.dead` ist sichtbar gesperrt
   und traegt seinen Grund, statt wirkungslos zu sein. */
.v3-page .kz-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }
.v3-page .kz-akt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--v3-line);
  border-radius: 11px; padding: 10px 12px; background: #fff; text-decoration: none; color: inherit;
  text-align: left; font-family: inherit; font-size: 12.5px; width: 100%; }
.v3-page .kz-akt:hover { border-color: var(--v3-brand); background: #f7faff; }
.v3-page .kz-akt .ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid;
  place-items: center; font-size: 13px; background: #e8effd; color: var(--v3-brand); }
.v3-page .kz-akt.wa .ic { background: #e3f6ec; color: #12794a; }
.v3-page .kz-akt.dead { opacity: .62; cursor: not-allowed; }
.v3-page .kz-akt.dead:hover { border-color: var(--v3-line); background: #fff; }
.v3-page .kz-akt.dead .ic { background: #f1f4f8; color: var(--v3-ink3); }
.v3-page .kz-akt b { display: block; font-size: 12.5px; font-weight: 750; }
.v3-page .kz-akt small { display: block; font-size: 11px; color: var(--v3-ink3); margin-top: 2px;
  line-height: 1.35; }

/* ── Nachfass-Vermerke der Akte ─────────────────────────────────────────────── */
.v3-page .nfz { display: grid; grid-template-columns: 88px 96px minmax(0, 1fr) auto; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--v3-line2); font-size: 12.3px; align-items: start; }
.v3-page .nfz:last-child { border-bottom: 0; }
.v3-page .nfz .dat { font-variant-numeric: tabular-nums; color: var(--v3-ink3); font-weight: 700;
  font-size: 11.5px; }
.v3-page .nfz .who { justify-self: end; font-size: 11px; color: var(--v3-ink3); font-weight: 650;
  white-space: nowrap; }
.v3-page .wba-schnell { border-top: 1px solid var(--v3-line2); padding: 11px 14px; background: #fafbfe; }
.v3-page .wba-zurueck { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Die erklärenden Randsätze — nie per `style=""` im Markup (§ 2), immer als
   Modifier-Klasse. `.secttl-hint` steht im Abschnitts-Titel und muss deshalb
   die Versalien/Sperrung des `.secttl` wieder zurücknehmen. */
.v3-page .wba-hint { font-size: 11px; }
.v3-page .secttl .secttl-hint { text-transform: none; letter-spacing: 0; font-weight: 600;
  font-size: 11.5px; white-space: normal; }

/* Mobil: der Steckbrief legt Beschriftung ueber Wert, die Historie verliert die
   feste Spaltenbreite. NIE overflow:hidden — das Abgeschnittene waere
   unerreichbar (§ 9q, Mobil-Paket Mitglieder). */
@media (max-width: 720px) {
  .v3-page .stb .stbz { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .v3-page .dd .ddin, .v3-page .dd .ddin.weit { min-width: 0; }
  .v3-page .kv-z > summary, .v3-page .kv-z.kv-fest {
    grid-template-columns: 62px minmax(0, 1fr); row-gap: 3px; }
  .v3-page .kv-ri, .v3-page .kv-n, .v3-page .kv-tuerzelle, .v3-page .kv-chev {
    grid-column: 2; justify-self: start; text-align: left; }
  .v3-page .kv-auf { padding-left: 14px; }
  .v3-page .kv-sub { grid-template-columns: minmax(0, 1fr); }
  .v3-page .nfz { grid-template-columns: minmax(0, 1fr); }
  .v3-page .nfz .who { justify-self: start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   § 9x — ERREICHBARKEITS-RANGLISTE (Scoring-W1, 14.08.2026)
   (Der Abschnitt heisst in docs/design-reference.md § 9x, nicht § 9v — § 9v
   und § 9w waren bereits vergeben. Der alte Verweis hier war ein Schreibfehler
   und schickte jeden Leser in einen fremden Abschnitt.)

   Die Rangliste je ADRESSE/NUMMER im Mitglieder-Profil. Die Anzeige rechnet
   nie selbst — sie zitiert `Erreichbarkeit::Rangliste`. Gesperrte und nie
   getestete Zeilen bleiben SICHTBAR (sie werden gedaempft, nicht versteckt):
   ein ausgeblendeter Weg ist ein Weg, den niemand pruefen kann.
   Keine Hex-Werte im Markup (§ 3) — die Farbe steht ausschliesslich hier.
   ══════════════════════════════════════════════════════════════════════════ */
.v3-page .er-rangliste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.v3-page .er-rangliste .er-kopfsatz { font-size: 11.5px; color: var(--v3-ink3); line-height: 1.45; }

.v3-page .er-rang { border: 1px solid var(--v3-line); border-radius: var(--v3-r-sm);
  background: var(--v3-card); overflow: hidden; }
.v3-page .er-rang.leer { background: var(--v3-line2); }
.v3-page .er-rang.gesperrt { border-color: #f0d3d7; }
.v3-page .er-rang.spur { border-style: dashed; }

/* Die Score-Spalte war auf 38 px festgenagelt — ein Score ist zweistellig, das
   Wort „getrennt" (Post-Spur) ist es nicht: es lief in die Stufen-Spalte und
   ueberdeckte sie (gesehen im Browser-Durchlauf 19.08.2026, #922, erst sichtbar
   auf voller Seitenbreite). `minmax(38px, auto)` haelt die Ausrichtung der
   Zahlen und laesst das Wort wachsen. Reine Spaltenbreite — die Rangliste
   selbst bleibt unangetastet. */
.v3-page .er-rang > .er-kopf { display: grid; align-items: center; gap: 8px; cursor: pointer;
  grid-template-columns: 22px minmax(0, 1fr) auto minmax(38px, auto) 82px;
  padding: 7px 10px; list-style: none; }
.v3-page .er-rang > .er-kopf::-webkit-details-marker { display: none; }
.v3-page .er-rang .er-rnr { font-weight: 700; font-size: 12px; color: var(--v3-ink3); }
.v3-page .er-rang .er-adr { min-width: 0; }
.v3-page .er-rang .er-adr b { display: block; font-size: 12.5px; word-break: break-all; }
.v3-page .er-rang .er-satz { display: block; font-size: 10.5px; color: var(--v3-ink3);
  line-height: 1.4; margin-top: 1px; }
.v3-page .er-rang .er-art { font-size: 10.5px; color: var(--v3-ink2); white-space: nowrap; }
.v3-page .er-rang .er-score { font-weight: 700; font-size: 13px; text-align: right; }
.v3-page .er-rang .er-lvl { font-size: 10.5px; color: var(--v3-ink2); text-align: right;
  white-space: nowrap; }

.v3-page .er-rang .er-auf { border-top: 1px solid var(--v3-line2); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px; }
.v3-page .er-gruppe { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--v3-ink3); margin-top: 4px; }

/* Eine Punktzeile: Wert · Text · Datum · Sprung auf Ebene 3. */
.v3-page .er-pz { display: grid; align-items: baseline; gap: 8px;
  grid-template-columns: 42px minmax(0, 1fr) auto auto; font-size: 11.5px; }
.v3-page .er-pz .pzw { font-weight: 700; text-align: right; color: var(--v3-ok); }
.v3-page .er-pz.minus .pzw { color: var(--v3-bad); }
.v3-page .er-pz .pzt { min-width: 0; color: var(--v3-ink); }
.v3-page .er-pz .pzd { font-size: 10.5px; color: var(--v3-ink3); white-space: nowrap; }
.v3-page .er-pz .pze { font-size: 10.5px; color: var(--v3-brand); white-space: nowrap; }

/* Vertrauensgrad — „annahme" ist bewusst am blassesten: sie behauptet am wenigsten. */
.v3-page .er-grad { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.v3-page .er-grad.g-beweis { background: #e4f4ec; color: var(--v3-ok); }
.v3-page .er-grad.g-indiz { background: #fdf1de; color: var(--v3-warn); }
.v3-page .er-grad.g-annahme { background: var(--v3-line2); color: var(--v3-ink3); }

.v3-page .er-summe { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--v3-line);
  font-size: 10.5px; color: var(--v3-ink2); line-height: 1.45; }
.v3-page .er-hinweis { font-size: 11px; color: var(--v3-ink2); line-height: 1.5; }

.v3-page .er-naht { margin-top: 4px; padding: 8px 10px; border-radius: var(--v3-r-sm);
  background: var(--v3-line2); font-size: 11px; color: var(--v3-ink2); line-height: 1.5; }

/* Ebene 3 — der Rohbefund, nachgeladen in den Turbo-Frame. */
.v3-page .er-beleg { margin-top: 6px; padding: 9px 11px; border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-sm); background: var(--v3-card); }
.v3-page .er-beleg .er-beleg-kopf { font-size: 12px; margin-bottom: 6px; }
.v3-page .er-beleg .er-zaehlregel { display: block; font-size: 10.5px; color: var(--v3-ink3);
  line-height: 1.45; margin-top: 2px; }
.v3-page .er-beleg .er-beleg-zeile { display: grid; gap: 2px 10px; font-size: 11px;
  grid-template-columns: 92px minmax(0, 1fr); padding: 5px 0;
  border-top: 1px solid var(--v3-line2); margin: 0; }
.v3-page .er-beleg .er-beleg-zeile dt { color: var(--v3-ink3); }
.v3-page .er-beleg .er-beleg-zeile dd { margin: 0; min-width: 0; word-break: break-word; }

/* Mobil: die Kopfzeile legt Score/Stufe unter die Adresse. NIE overflow:hidden
   (§ 9q) — das Abgeschnittene waere unerreichbar. */
@media (max-width: 720px) {
  .v3-page .er-rang > .er-kopf { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 3px; }
  .v3-page .er-rang .er-score, .v3-page .er-rang .er-lvl { grid-column: 2; text-align: left; }
  .v3-page .er-pz { grid-template-columns: 42px minmax(0, 1fr); row-gap: 2px; }
  .v3-page .er-pz .pzd, .v3-page .er-pz .pze { grid-column: 2; }
  .v3-page .er-beleg .er-beleg-zeile { grid-template-columns: minmax(0, 1fr); }
}

/* ── § 9x-2 — DIE ANTWORT-KARTE im Profil (#922, 19.08.2026) ────────────────
   Die Rangliste oben beantwortet „woher wissen wir das?" und braucht dafuer
   die Seitenbreite (members#erreichbarkeit). Im Profil steht nur die ANTWORT:
   ein Satz, die 4-Kanal-Matrix, gesetzte Sperren, die Tuer zur Herleitung.
   Sie lebt in einer 322-px-Statuszelle — jede Regel hier existiert, weil die
   Rangliste an dieser Stelle 1.405 px hoch wurde (gemessen 19.08.2026).
   Der Name ist `.er-antwort`: `.er-karte` war bereits vergeben
   (datenmanagement/erreichbarkeit/_arbeitsliste, position:sticky) — vor jedem
   neuen globalen Klassennamen wird gegreppt UND der Treffer gelesen. */
.v3-page .er-antwort { margin-top: 7px; display: flex; flex-direction: column;
  gap: 5px; min-width: 0; }
.v3-page .er-antwort .er-antwort-weg { font-size: 12.5px; line-height: 1.4; min-width: 0; }
.v3-page .er-antwort .er-antwort-lbl { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--v3-ink3); }
.v3-page .er-antwort .er-antwort-weg b { font-weight: 800; }
/* Eine Adresse ist ein zusammenhaengender Wert: sie bricht am Zeichen, statt
   die Zelle quer zu schieben — aber sie wird nie abgeschnitten (§ 9q: was
   abgeschnitten ist, ist unerreichbar). */
.v3-page .er-antwort .er-antwort-adr { display: block; font-size: 12px;
  color: var(--v3-ink2); overflow-wrap: anywhere; }
.v3-page .er-antwort .er-antwort-beleg { font-size: 10.5px; color: var(--v3-ink3);
  line-height: 1.45; }
.v3-page .er-antwort .er-antwort-matrix { margin-top: 1px; }
.v3-page .er-antwort .er-antwort-sperren { display: flex; flex-wrap: wrap; gap: 4px; }
.v3-page .er-antwort .er-antwort-mehr { align-self: flex-start; font-size: 11.5px;
  font-weight: 700; color: var(--v3-brand); text-decoration: none; }
.v3-page .er-antwort .er-antwort-mehr:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   EVENTS-WELLE 1 (14.08.2026) — Mockup docs/mockups/2026-08-13-events-redesign-mockup.html
   Alle Klassen tragen den Praefix `ev-`, weil `.blk`, `.flt` und `.arbeit*`
   im Repo bereits unter ANDEREN Traegern existieren. Ein Name, der nur unter
   einem fremden Selektor eindeutig ist, ist in einem grep nicht eindeutig —
   und ein grep ist das Werkzeug, mit dem hier CSS geloescht wird (§ 9c).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Filterleiste: EINE Zeile (Carsten 13.08.: „viel zu gross") ──────────── */
.v3-page .ev-flt { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  border: 1px solid var(--v3-line); border-radius: 11px; background: var(--v3-card);
  box-shadow: var(--v3-shadow); padding: 6px 8px; }
.v3-page .ev-flt .ev-fltlbl { font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v3-ink3); padding: 0 3px 0 2px; }
.v3-page .ev-fchip { position: relative; }
.v3-page .ev-fchip > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 5px; border: 1px solid var(--v3-line); background: var(--v3-card);
  border-radius: 8px; padding: 4px 8px; font-size: 11.8px; font-weight: 700;
  color: var(--v3-ink2); white-space: nowrap; }
.v3-page .ev-fchip > summary::-webkit-details-marker { display: none; }
.v3-page .ev-fchip > summary::marker { content: ""; }
.v3-page .ev-fchip > summary::after { content: "\25BE"; font-size: 8.5px; opacity: .6; }
.v3-page .ev-fchip > summary:hover { border-color: #c3d3ee; background: #fafbfe; }
.v3-page .ev-fchip > summary .n { background: #e8effd; color: var(--v3-brand);
  border-radius: 5px; padding: 0 5px; font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.v3-page .ev-fchip.gesetzt > summary { border-color: #bcd3f7; background: #f2f7ff;
  color: var(--v3-brand); }
.v3-page .ev-fchip.arb > summary { border-color: #f7dfb4; background: #fefaf2; color: #a15c00; }
.v3-page .ev-fchip.arb > summary .n { background: #f7dfb4; color: #7a4c00; }
.v3-page .ev-fchip[open] > summary { border-color: #9dbcf3;
  box-shadow: 0 0 0 3px rgba(30, 86, 200, .1); }
.v3-page .ev-fchip .ev-pop { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0;
  width: 288px; max-width: 82vw; background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: 12px; box-shadow: 0 12px 34px -10px rgba(22, 35, 58, .28); padding: 9px 11px 10px; }
.v3-page .ev-fchip.re .ev-pop { left: auto; right: 0; }
.v3-page .ev-fchip .ev-pop .pk { font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v3-page .ev-fchip .ev-pop .pk .hint { text-transform: none; letter-spacing: 0;
  font-weight: 650; font-size: 9.5px; }
.v3-page .ev-fchip .ev-pop .pf { margin-top: 7px; padding-top: 6px;
  border-top: 1px solid var(--v3-line2); font-size: 10.5px; color: var(--v3-ink3);
  font-weight: 650; line-height: 1.4; }
.v3-page .ev-flt .ev-treffer { margin-left: auto; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.v3-page .ev-flt .ev-treffer .tz { font-size: 12.5px; font-weight: 800; color: var(--v3-ink);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.v3-page .ev-aktivfilter { display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
  margin: 7px 0 4px; }
.v3-page .ev-aktivfilter .ev-af { display: inline-flex; align-items: center; gap: 6px;
  background: #e8effd; border: 1px solid #bcd3f7; color: var(--v3-brand); border-radius: 999px;
  padding: 3px 6px 3px 10px; font-size: 11.5px; font-weight: 700; text-decoration: none; }
.v3-page .ev-aktivfilter .ev-af i { font-style: normal; color: #7ba0e6; font-weight: 800;
  padding: 0 3px; }

/* ── Umschalter Karten/Zeilen: zwei Links, kein JavaScript ───────────────── */
.v3-page .ev-ansicht { display: inline-flex; border: 1px solid var(--v3-line);
  border-radius: 8px; overflow: hidden; background: var(--v3-card); }
.v3-page .ev-ansicht a { padding: 4px 9px; font-size: 11.8px; font-weight: 700;
  color: var(--v3-ink2); text-decoration: none; display: flex; align-items: center; gap: 5px; }
.v3-page .ev-ansicht a + a { border-left: 1px solid var(--v3-line); }
.v3-page .ev-ansicht a[aria-current="true"] { background: #e8effd; color: var(--v3-brand); }

/* ── „Demnaechst" — schmale kuratierte Zeile ─────────────────────────────── */
.v3-page .ev-demn { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.v3-page .ev-dkarte { flex: 0 0 auto; width: 246px; border: 1px solid var(--v3-line);
  border-radius: 11px; background: var(--v3-card); text-decoration: none; color: inherit;
  display: flex; gap: 9px; padding: 8px 10px; align-items: center; box-shadow: var(--v3-shadow); }
.v3-page .ev-dkarte:hover { border-color: #bcd3f7; background: #fbfcff; }
.v3-page .ev-dkarte .ev-dat { flex: none; width: 42px; text-align: center; border-radius: 8px;
  background: var(--v3-brand-deep); color: #fff; padding: 4px 0; }
.v3-page .ev-dkarte .ev-dat .t { font-size: 15px; font-weight: 850; line-height: 1;
  font-variant-numeric: tabular-nums; display: block; }
.v3-page .ev-dkarte .ev-dat .m { font-size: 9px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; opacity: .75; display: block; }
.v3-page .ev-dkarte .ev-tx { min-width: 0; }
.v3-page .ev-dkarte .ev-tx b { display: block; font-size: 12.3px; font-weight: 750;
  line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .ev-dkarte .ev-tx small { display: block; font-size: 10.5px; color: var(--v3-ink3);
  font-weight: 650; margin-top: 2px; }

/* ── Akte: Hero-Banner (Carsten 13.08.: „in der Akte oben auch das Bild") ── */
.v3-page .ev-banner { position: relative; border-radius: var(--v3-r); overflow: hidden;
  border: 1px solid var(--v3-line); box-shadow: var(--v3-shadow);
  height: clamp(118px, 15vw, 168px); }
.v3-page .ev-banner .ev-bnbild { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.v3-page .ev-banner .ev-bnini { position: absolute; inset: 0; display: grid;
  place-items: center; background: linear-gradient(135deg, var(--v3-brand-deep), #2f6fe0);
  font-size: 46px; font-weight: 850; color: rgba(255, 255, 255, .3); letter-spacing: -1.5px; }
.v3-page .ev-banner .ev-bnschleier { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 17, 30, .86) 0%, rgba(9, 17, 30, .45) 42%,
                              rgba(9, 17, 30, .05) 78%); }
.v3-page .ev-banner .ev-bnmarken { position: absolute; top: 9px; left: 11px; right: 11px;
  display: flex; gap: 5px; flex-wrap: wrap; }
.v3-page .ev-banner .ev-bnband { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 13px; color: #fff; }
.v3-page .ev-banner .ev-bnband h1 { font-size: 19px; font-weight: 850; letter-spacing: -.35px;
  line-height: 1.2; text-shadow: 0 1px 12px rgba(9, 17, 30, .5); margin: 0; color: #fff; }
.v3-page .ev-banner .ev-bnmeta { font-size: 11.8px; font-weight: 650;
  color: rgba(255, 255, 255, .88); margin-top: 3px; display: flex; gap: 5px 10px;
  flex-wrap: wrap; align-items: center; }

/* ── Akte: Aufklapp-Bloecke ──────────────────────────────────────────────── */
/* ⚠️ KEIN `overflow: hidden` am Block: die Akte traegt breite Tabellen, und was
   ein Block abschneidet, ist am Handy unerreichbar (P5 · WF, Kodex 11). Die
   runden Ecken kommen deshalb an der Kopfzeile selbst, nicht durch Clipping. */
.v3-page .ev-blk { scroll-margin-top: 132px;
  border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  background: var(--v3-card); box-shadow: var(--v3-shadow); margin-top: 9px; }
.v3-page .ev-blk > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; gap: 9px; padding: 9px 13px; flex-wrap: wrap;
  border-radius: calc(var(--v3-r) - 1px); }
.v3-page .ev-blk[open] > summary { border-radius: calc(var(--v3-r) - 1px)
  calc(var(--v3-r) - 1px) 0 0; }
.v3-page .ev-blk > summary::-webkit-details-marker { display: none; }
.v3-page .ev-blk > summary::marker { content: ""; }
.v3-page .ev-blk > summary:hover { background: #fafbfe; }
.v3-page .ev-blk[open] > summary { background: #f7f9fc; border-bottom: 1px solid var(--v3-line2); }
.v3-page .ev-blk .ev-blknr { width: 20px; height: 20px; border-radius: 6px; background: #eceafd;
  color: #4c3ec4; font-size: 10.5px; font-weight: 850; display: grid; place-items: center;
  flex: none; }
.v3-page .ev-blk .ev-blkti { font-size: 13.2px; font-weight: 800; letter-spacing: -.2px; }
.v3-page .ev-blk .ev-blkzu { font-size: 12px; color: var(--v3-ink2); font-weight: 650;
  min-width: 0; }
.v3-page .ev-blk .ev-blkzu b { color: var(--v3-ink); font-weight: 800;
  font-variant-numeric: tabular-nums; }
.v3-page .ev-blk .ev-blkre { margin-left: auto; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.v3-page .ev-blk .ev-inh { padding: 11px 13px 13px; }
.v3-page .ev-blk .ev-inh > .secttl:first-child { margin-top: 0; }

/* Arbeitsmarke: sagt ZUGEKLAPPT, ob dort Arbeit liegt. Ohne sie waere ein
   zugeklappter Block mit Arbeit von einem leeren nicht zu unterscheiden — und
   das ist schlimmer als eine lange Seite (Mockup Abschnitt B, Regel). */
.v3-page .ev-arbeit { display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 800;
  background: #fdf3e2; color: #a15c00; border: 1px solid #f7dfb4; }
.v3-page .ev-arbeit.keine { background: #f7f9fc; color: var(--v3-ink3);
  border-color: var(--v3-line2); font-weight: 700; }
.v3-page .ev-arbeit .d { width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none; }

@media (max-width: 820px) {
  .v3-page .ev-flt { padding: 6px; }
  .v3-page .ev-flt .ev-treffer { margin-left: 0; width: 100%; justify-content: space-between; }
  .v3-page .ev-fchip .ev-pop { width: min(288px, 86vw); }
  .v3-page .ev-blk > summary { align-items: flex-start; }
  .v3-page .ev-blk .ev-blkre { margin-left: 0; width: 100%; }
  /* BEFUND AUS DEM BROWSER-DURCHLAUF (390 x 844, 14.08.2026): Marken oben und
     Titelband unten lagen beide absolut im 104-px-Banner — die Marken deckten
     den Titel ab. Am Handy waechst das Banner deshalb MIT seinem Inhalt: Marken
     und Band stehen im Fluss, nur Bild, Initialen-Grund und Schleier bleiben
     absolut dahinter. */
  .v3-page .ev-banner { height: auto; min-height: clamp(104px, 26vw, 132px);
    display: flex; flex-direction: column; justify-content: flex-end; }
  .v3-page .ev-banner .ev-bnmarken { position: relative; z-index: 1;
    top: auto; left: auto; right: auto; padding: 9px 11px 0; }
  .v3-page .ev-banner .ev-bnband { position: relative; z-index: 1;
    left: auto; right: auto; bottom: auto; }
  .v3-page .ev-banner .ev-bnband h1 { font-size: 15.5px; }
}

/* Profilbild im Person-Bauteil (#837): deckt den Initialen-Grund ab, ersetzt
   ihn nie — laedt es nicht, steht die gestaltete Flaeche wieder da.
   K2 (07.09.2026): dieselbe Mechanik traegt jetzt auch die Karten-Ansicht
   (`.mc-head .mav`) und die Schnellansicht (`.v3-sidepanel .pav`) der
   Mitgliederliste — EINE Regel, drei Traeger, kein zweites Bild-CSS. */
.v3-page .mcell .mav,
.v3-page .mc-head .mav,
.v3-page .v3-sidepanel .pav { position: relative; overflow: hidden; }
.v3-page .mcell .mav .mavimg,
.v3-page .mc-head .mav .mavimg,
.v3-page .v3-sidepanel .pav .mavimg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; }

/* Herkunfts-Hinweis im Eckdaten-Raster (B10, additiv seit Events-Welle 1):
   „woher stammt der Wert" bzw. „was sagt er NICHT" — klein unter dem Wert. */
.v3-page .v3-eckdaten small { display: block; font-size: 10.5px; line-height: 1.35;
  font-weight: 600; color: var(--v3-ink3); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STEUERZENTRALE (#910, Stufe 1) — Bereichs-Namensraum `.stz-`
   Mockup: docs/mockups/2026-08-22-steuerzentrale-mockup-f3.html (Fassung 3)

   KEIN zweites Design-System: dieser Block liegt in v3_design.css und haengt
   ausnahmslos unter `.v3-page`. Alles, was es schon gibt (`.v3-card`,
   `.v3-chip`, `.ab-badge`, `.v3-btn`, `.v3-field`, `.secttl`), wird BENUTZT,
   nicht nachgebaut.

   NAMENSPRUEFUNG vor dem Bau (App-Lehre 17: den Treffer LESEN):
   `.stz-` und `.stz` = 0 Treffer in allen vier Stylesheets. Der Praefix ist frei.

   Eine Akzentfarbe: Blau markiert, was Carstens Hand ist (Heute, Rang).
   „Liegengeblieben" ist GRAU — rot behauptete einen Notfall, „kein
   Lebenszeichen seit 18 Tagen" ist eine Messung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── kleine Bausteine, ueberall wiederverwendet ─────────────────────────── */
.v3-page .stz-pp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 700; color: var(--v3-ink2); background: #f7f9fc; border: 1px solid var(--v3-line2);
  border-radius: 6px; padding: 1px 7px; text-decoration: none; white-space: nowrap; }
.v3-page a.stz-pp:hover { border-color: #c8dafa; background: #eef4ff; color: var(--v3-brand); }

.v3-page .stz-herkunft { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  font-weight: 650; color: var(--v3-ink3); background: #fbfcfe; border: 1px dashed #d9e1ec;
  border-radius: 5px; padding: 1px 6px; }

.v3-page .stz-frist { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 750; color: var(--v3-ink3); background: #f7f9fc; border: 1px solid var(--v3-line2);
  border-radius: 5px; padding: 1px 7px; white-space: nowrap; }
.v3-page .stz-frist.nah { color: #a15c00; background: #fdf6e9; border-color: #f2e0bd; }
.v3-page .stz-frist.jetzt { color: #a52b3a; background: #fdeef0; border-color: #f4c9cf; }

.v3-page .stz-sicht { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px;
  font-weight: 700; color: var(--v3-ink3); background: #f7f9fc; border: 1px solid var(--v3-line2);
  border-radius: 5px; padding: 1px 7px; white-space: nowrap; }

.v3-page .stz-termin { display: inline-flex; align-items: center; border: 1px solid var(--v3-line);
  border-radius: 7px; font-size: 11.5px; font-weight: 700; color: var(--v3-ink2); background: #fff; }
.v3-page .stz-termin .tw { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; }
.v3-page .stz-termin.gesetzt { color: var(--v3-brand); border-color: #c8dafa; background: #f7faff; }

.v3-page .stz-zuletzt-inline { font-size: 11px; font-weight: 650; color: var(--v3-ink3); }
.v3-page .stz-zuletzt-inline b { color: var(--v3-ink2); font-weight: 750; }

.v3-page .stz-typ { font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--v3-ink3); border: 1px solid var(--v3-line); border-radius: 4px; padding: 1px 5px;
  background: #fbfcfe; white-space: nowrap; }
.v3-page .stz-typ.betrieb { color: #0b6f92; border-color: #c7e5f1; background: #f2f9fd; }

.v3-page .stz-still { font-size: 11px; font-weight: 700; color: var(--v3-ink3); background: #f4f6f9;
  border: 1px solid #e4e9f0; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }


.v3-page .stz-rueck { display: inline-block; font-size: 12px; font-weight: 700; color: var(--v3-ink3);
  text-decoration: none; margin-bottom: 10px; }
.v3-page .stz-rueck:hover { color: var(--v3-brand); }

/* ── Fortschritt: GEZAEHLT, nie geschaetzt ──────────────────────────────── */
.v3-page .stz-fort { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.v3-page .stz-fort .fz { font-size: 12px; font-weight: 750; color: var(--v3-ink2);
  font-variant-numeric: tabular-nums; }
.v3-page .stz-fort .fz small { font-weight: 650; color: var(--v3-ink3); font-size: 11px; margin-left: 5px; }
.v3-page .stz-meter { display: flex; gap: 2px; align-items: center; }
.v3-page .stz-meter i { width: 11px; height: 5px; border-radius: 1.5px; background: #e3e8f0; display: block; }
.v3-page .stz-fort.block { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
.v3-page .stz-fort.block .stz-meter { width: 100%; }
.v3-page .stz-fort.block .stz-meter i { flex: 1 1 0; width: auto; min-width: 2px; }
.v3-page .stz-meter i.on { background: var(--v3-brand); }
.v3-page .stz-meter i.bau { background: #a9c4f2; }
.v3-page .stz-meter i.gate { background: #e8c98a; }
/* Ein STRICH, nie eine 0: „keine Daten" ist kein Befund. */
.v3-page .stz-fortleer { font-size: 12px; font-weight: 700; color: var(--v3-ink3); white-space: nowrap; }
.v3-page .stz-fortleer .strich { font-size: 14px; font-weight: 800; margin-right: 5px; color: #c2cbd9; }

/* ── 1 · HEUTE-LEISTE ───────────────────────────────────────────────────── */
.v3-page .stz-heute { margin-bottom: 14px; }
.v3-page .stz-heute .v3-cardhead { background: #fbfcfe; border-radius: var(--v3-r) var(--v3-r) 0 0; }
.v3-page .stz-liste { position: relative; padding: 6px 0 0; }
.v3-page .stz-hk { position: relative; z-index: 1; display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 12px 18px 14px;
  border-bottom: 1px solid var(--v3-line2); transition: background .12s; }
.v3-page .stz-hk:last-of-type { border-bottom: none; }
.v3-page .stz-hk:hover { background: #fafbfe; }
.v3-page .stz-hk.stz-zieht { opacity: .45; }
.v3-page .stz-rang { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 1px; }
.v3-page .stz-rang .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; background: #fff; color: var(--v3-brand);
  border: 1.5px solid var(--v3-brand); font-variant-numeric: tabular-nums;
  position: relative; z-index: 1; }
.v3-page .stz-pfeile { display: flex; flex-direction: column; gap: 3px; }
.v3-page .stz-hk .kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-page .stz-hk .titel { font-size: 14px; font-weight: 700; letter-spacing: -.1px; color: var(--v3-ink);
  margin-top: 4px; }
.v3-page .stz-hk .warum { font-size: 12.5px; color: var(--v3-ink2); margin-top: 3px; line-height: 1.5;
  max-width: 82ch; }
.v3-page .stz-hk .fuss { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
.v3-page .stz-hk .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.v3-page .stz-hk .akt { display: flex; gap: 4px; }
.v3-page .stz-ib { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--v3-line);
  background: #fff; color: var(--v3-ink3); font-size: 12px; font-weight: 700; display: grid;
  place-items: center; cursor: pointer; padding: 0; line-height: 1; }
.v3-page .stz-ib:hover { border-color: #c8dafa; color: var(--v3-brand); background: #f7faff; }
.v3-page .stz-ib.weg:hover { border-color: #f4c9cf; color: var(--v3-bad); background: #fff8f9; }
.v3-page a.stz-ib { text-decoration: none; }
.v3-page .stz-drop { margin: 9px 18px 14px; border: 1.5px dashed #bfd2f2; background: #f7faff;
  border-radius: 9px; padding: 9px 12px; display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; color: var(--v3-brand); }
.v3-page .stz-drop .p { font-size: 13px; }
.v3-page .stz-drop span.n { font-weight: 600; color: var(--v3-ink3); }
.v3-page .stz-kommhinweis { margin-top: 7px; font-size: 11.5px; font-weight: 650; }

/* Notiz an die naechste Session */
.v3-page .stz-notiz { margin-top: 9px; display: flex; gap: 9px; align-items: flex-start;
  background: #fbfcfe; border: 1px solid var(--v3-line2); border-radius: 9px; padding: 8px 11px; }
.v3-page .stz-notiz .ni { flex: none; font-size: 11px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .stz-notiz .nb { min-width: 0; }
.v3-page .stz-notiz .nl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .45px;
  text-transform: uppercase; color: var(--v3-ink3); margin-bottom: 2px; }
.v3-page .stz-notiz .nt { font-size: 12.5px; line-height: 1.5; color: var(--v3-ink); }
.v3-page .stz-notiz .nw { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; margin-left: auto;
  flex: none; }

/* ── 2 · WARTET AUF DICH ────────────────────────────────────────────────── */
.v3-page .stz-warte { border: 1px solid #eadfc4; border-radius: var(--v3-r); background: #fffdf8;
  margin-bottom: 4px; overflow: hidden; }
.v3-page .stz-warte .wkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid #f0e6d2; }
.v3-page .stz-warte .wkopf h2 { font-size: 13.5px; font-weight: 750; display: flex; align-items: center;
  gap: 9px; margin: 0; }
.v3-page .stz-warte .wkopf .hsub { font-size: 11.5px; color: #96896e; margin-top: 2px; font-weight: 500; }
.v3-page .stz-gruppe { padding: 9px 18px 3px; display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: #a2926f; }
.v3-page .stz-gruppe .gz { font-variant-numeric: tabular-nums; color: #c0ab7e; }
.v3-page .stz-gruppe .gerkl { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11px;
  color: #96896e; }
.v3-page .stz-wz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
  align-items: center; padding: 11px 18px; border-top: 1px solid #f4ecdb; text-decoration: none;
  color: inherit; transition: background .12s; }
.v3-page .stz-gruppe + .stz-wz { border-top: none; }
.v3-page .stz-wz:hover { background: #fffaef; }
.v3-page .stz-wz .wt { font-size: 13.5px; font-weight: 700; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; }
.v3-page .stz-wz .ww { font-size: 12.5px; color: var(--v3-ink2); margin-top: 3px; line-height: 1.5;
  max-width: 88ch; }
.v3-page .stz-wz .wf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 7px;
  font-size: 11px; font-weight: 650; color: var(--v3-ink3); }
.v3-page .stz-wz .wf .alt { color: #a15c00; font-weight: 750; }
.v3-page .stz-wz .wrechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: none; }
.v3-page .stz-wz.blockiert { background: #fbfcfe; border-top-color: var(--v3-line2); }
.v3-page .stz-wz.blockiert:hover { background: #f7f9fc; }
.v3-page .stz-wz.blockiert .wt { color: var(--v3-ink2); font-weight: 650; }

/* ── 3 · SPUREN-LISTE ───────────────────────────────────────────────────── */
.v3-page .stz-chips { margin-bottom: 11px; }
.v3-page .stz-sz { display: grid; grid-template-columns: 14px minmax(0, 1fr) 152px 186px 182px;
  gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--v3-line2);
  transition: background .12s; }
.v3-page .stz-sz:last-child { border-bottom: none; }
.v3-page .stz-sz:hover { background: #fafbfe; }
.v3-page .stz-sz .punkt { width: 8px; height: 8px; border-radius: 50%; justify-self: center; flex: none; }
.v3-page .stz-sz .punkt.laeuft { background: #22a35f; box-shadow: 0 0 0 3px rgba(34, 163, 95, .14); }
.v3-page .stz-sz .punkt.wartet { background: #e0a02f; box-shadow: 0 0 0 3px rgba(224, 160, 47, .16); }
.v3-page .stz-sz .punkt.extern { background: #3ba3cd; box-shadow: 0 0 0 3px rgba(59, 163, 205, .15); }
.v3-page .stz-sz .punkt.still { background: #c2cbd9; box-shadow: 0 0 0 3px rgba(194, 203, 217, .28); }
.v3-page .stz-sz .punkt.fertig { background: #9fb6cf; }
.v3-page .stz-sz .punkt.leer { background: transparent; border: 1.5px dashed #c2cbd9; box-shadow: none;
  width: 9px; height: 9px; }
.v3-page .stz-sz .sname { font-size: 13.5px; font-weight: 700; letter-spacing: -.05px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.v3-page .stz-sz .sname a { text-decoration: none; }
.v3-page .stz-sz:hover .sname a { color: var(--v3-brand); }
.v3-page .stz-sz .sziel { font-size: 12px; color: var(--v3-ink2); margin-top: 3px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .stz-sz .sstatus { display: flex; justify-content: flex-start; }
.v3-page .stz-sz .szuletzt { font-size: 11.5px; color: var(--v3-ink3); font-weight: 650; line-height: 1.45;
  text-align: right; }
.v3-page .stz-sz .szuletzt b { color: var(--v3-ink2); font-weight: 700; }
.v3-page .stz-sz .srechts { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

@media (max-width: 1180px) {
  .v3-page .stz-sz { grid-template-columns: 16px minmax(0, 1fr) 160px; row-gap: 8px; align-items: start; }
  .v3-page .stz-sz > .punkt { grid-column: 1; grid-row: 1; margin-top: 6px; }
  .v3-page .stz-sz > .shaupt { grid-column: 2; grid-row: 1; }
  .v3-page .stz-sz > .sstatus { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  .v3-page .stz-sz > .sfort { grid-column: 2 / 4; grid-row: 2; }
  .v3-page .stz-sz > .srechts { grid-column: 2 / 4; grid-row: 3; align-items: flex-start; }
}
@media (max-width: 720px) {
  .v3-page .stz-sz { grid-template-columns: 16px minmax(0, 1fr); }
  .v3-page .stz-sz > .sstatus { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .v3-page .stz-sz > .sfort { grid-column: 2; grid-row: 3; }
  .v3-page .stz-sz > .srechts { grid-column: 2; grid-row: 4; }
  .v3-page .stz-hk { grid-template-columns: 40px minmax(0, 1fr); }
  .v3-page .stz-hk > .rechts { grid-column: 2; flex-direction: row; align-items: center;
    justify-content: flex-start; }
}

/* ── Schritte + Verlauf ─────────────────────────────────────────────────── */
.v3-page .stz-schritt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; transition: background .12s; }
.v3-page .stz-schritt:hover { background: #f1f6fd; }
.v3-page .stz-hk2 { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; border: 1.5px solid #d5deea; background: #fff; color: transparent;
  cursor: pointer; flex: none; padding: 0; line-height: 1; }
.v3-page .stz-schritt:hover .stz-hk2 { border-color: var(--v3-brand); color: #c8dafa; }
.v3-page .stz-schritt.fertig .stz-hk2 { background: var(--v3-ok); border-color: var(--v3-ok); color: #fff; }
.v3-page .stz-schritt.fertig:hover .stz-hk2 { color: #fff; }
.v3-page .stz-schritt.bau .stz-hk2 { border-color: var(--v3-brand); background: #e8effd; color: var(--v3-brand); }
.v3-page .stz-schritt.gate .stz-hk2 { border-color: #e0a02f; background: #fdf6e9; color: #a15c00; }
/* Erledigt wird GEDAEMPFT, nicht durchgestrichen: ein Durchstrich laeuft ueber
   den Zusatz mit und macht ihn unlesbar — fuenf durchgestrichene Zeilen
   untereinander sind Laerm, keine Information. */
.v3-page .stz-schritt.fertig .stx { color: var(--v3-ink3); font-weight: 550; }
.v3-page .stz-schritt .stx { font-weight: 600; color: var(--v3-ink); }
.v3-page .stz-schritt .stx .wo { font-weight: 600; color: var(--v3-ink3); font-size: 11px; margin-left: 7px; }
.v3-page .stz-schritt .sd { font-size: 10.5px; color: var(--v3-ink3); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }

.v3-page .stz-verlauf { margin-top: 14px; border-top: 1px solid var(--v3-line2); padding-top: 10px; }
.v3-page .stz-verlauf .vk { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--v3-ink3); margin-bottom: 7px; }
.v3-page .stz-vz { display: grid; grid-template-columns: 92px 74px minmax(0, 1fr); gap: 10px;
  align-items: baseline; padding: 3px 0; font-size: 12.5px; color: var(--v3-ink2); line-height: 1.5; }
.v3-page .stz-vz .vd { font-size: 10.5px; font-weight: 750; color: var(--v3-ink3); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.v3-page .stz-vz .vv { font-size: 11px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
.v3-page .stz-vz .vv.erledigt { color: #12703f; }
.v3-page .stz-vz .vv.gebaut { color: var(--v3-brand); }
.v3-page .stz-vz .vv.gate { color: #a15c00; }
.v3-page .stz-vz .vv.blockiert { color: #a52b3a; }
.v3-page .stz-vz .vv.gelernt { color: #6b46c1; }
.v3-page .stz-vz .wo { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; margin-left: 6px; }
@media (max-width: 720px) {
  .v3-page .stz-vz { grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 6px 0; }
}

/* ── Kommentare ─────────────────────────────────────────────────────────── */
.v3-page .stz-komm { margin-top: 4px; display: grid; gap: 9px; }
.v3-page .stz-kz { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; }
.v3-page .stz-kz .av { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; background: #e8effd; color: var(--v3-brand);
  border: 1px solid #c8dafa; }
.v3-page .stz-kz.session .av { background: #f1f4f8; color: var(--v3-ink3); border-color: #e2e8f0; }
.v3-page .stz-kz .kk { font-size: 11px; font-weight: 750; color: var(--v3-ink2); display: flex; gap: 7px;
  align-items: baseline; flex-wrap: wrap; }
.v3-page .stz-kz .kk .kw { font-weight: 650; color: var(--v3-ink3); font-size: 10.5px; }
.v3-page .stz-kz .kb { font-size: 12.5px; line-height: 1.55; color: var(--v3-ink2); margin-top: 2px; }
.v3-page .stz-kommzeile { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.v3-page .stz-kommzeile .kf { flex: 1; border: 1px solid var(--v3-line); border-radius: 8px;
  padding: 6px 11px; font-size: 12px; color: var(--v3-ink); background: #fff; }

/* ── Detail-Ansicht ─────────────────────────────────────────────────────── */
.v3-page .stz-detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 0; }
@media (max-width: 960px) { .v3-page .stz-detail { grid-template-columns: 1fr; } }
.v3-page .stz-dlinks { padding: 18px 20px; min-width: 0; }
.v3-page .stz-drechts { padding: 18px 20px; border-left: 1px solid var(--v3-line2); background: #fbfcfe;
  min-width: 0; }
@media (max-width: 960px) {
  .v3-page .stz-drechts { border-left: none; border-top: 1px solid var(--v3-line2); }
}
.v3-page .stz-dkopf { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .stz-dkopf .kopf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v3-page .stz-dkopf h2 { font-size: 17px; font-weight: 750; letter-spacing: -.2px; margin-top: 6px; }
.v3-page .stz-dkopf .dact { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.v3-page .stz-dblock { margin-top: 16px; }
.v3-page .stz-dlabel { font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--v3-ink3); margin-bottom: 5px; display: flex; align-items: baseline; gap: 8px; }
.v3-page .stz-dlabel .geerbt { text-transform: none; letter-spacing: 0; font-weight: 650; font-size: 10.5px;
  color: #a8b3c4; }
.v3-page .stz-dziel { font-size: 13px; line-height: 1.55; color: var(--v3-ink2); }
.v3-page .stz-dfertig { font-size: 13px; line-height: 1.55; color: var(--v3-ink); background: #f7f9fc;
  border: 1px solid var(--v3-line2); border-radius: 9px; padding: 9px 12px; }
.v3-page .stz-dknoepfe { display: flex; gap: 8px; margin-top: 8px; }
.v3-page .stz-dhinweis { font-size: 11px; color: var(--v3-ink3); font-weight: 650; margin-top: 7px;
  line-height: 1.5; }
.v3-page .stz-sichtchips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Hinweis-Fuss: wann das Board gelesen wird ───────────────────────────── */
.v3-page .stz-lesefuss { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border: 1px solid var(--v3-line); background: #fff; border-radius: 12px;
  font-size: 12.5px; color: var(--v3-ink2); line-height: 1.55; }
.v3-page .stz-lesefuss .lm { font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: var(--v3-ink3); flex: none; }
.v3-page .stz-lesefuss b { color: var(--v3-ink); }
.v3-page .stz-lesefuss .lr { margin-left: auto; flex: none; }

/* Verweis eines Arbeitspakets auf „sein" Gate (#910, Auflösung der
   146er-Doppelnennung): das Gate ist die eine „Wartet auf dich"-Wahrheit,
   das Paket zeigt nur darauf. Deshalb ruhig, nicht amber — es ist ein
   Wegweiser, keine zweite Entscheidung. */
.v3-page .stz-verweis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Fortschritts-BALKEN statt Kästchen-Reihe (ab Fortschritt::MAX_KAESTCHEN
   Schritten, #910). Die Zahl „N / M Schritte" steht weiterhin daneben — der
   Balken ersetzt nur die Kästchen, nie die Zählung. */
.v3-page .stz-balken { display: block; height: 5px; border-radius: 2px; background: #e3e8f0;
  overflow: hidden; width: 100%; min-width: 60px; }
.v3-page .stz-balken i { display: block; height: 100%; background: var(--v3-brand); }

/* Rang-SPINDEL der Heute-Leiste (Mockup F3): eine Haarlinie, an der die
   Rangzahlen aufgereiht sind. Sie macht sichtbar, dass die Reihenfolge EINE
   Kette ist und keine lose Kartensammlung — deshalb gehört sie zur Signatur
   der Seite, nicht zur Dekoration. Die Rang-Spalte ist hier 44px breit
   (Mockup 34px), die Linie sitzt entsprechend bei 40px. */
.v3-page .stz-liste::before { content: ""; position: absolute; left: 40px; top: 26px; bottom: 58px;
  width: 1px; background: linear-gradient(#dbe4f2, #eef2f8); }

/* ═══════════════════════════════════════════════════════════════════════════
   STEUERZENTRALE — Stufe 1.1 (#910, Begehung vom 21.08.2026)
   Vier neue Bauteile, alle im bestehenden `.stz-`-Namensraum (gegrept am
   21.08.: `.stz-pfad`, `.stz-tuer`, `.stz-gruppenbox`, `.stz-naheliegend`,
   `.wfilter`, `.wtreffer`, `.stz-wzwrap` = 0 Treffer in allen Stylesheets;
   die Treffer wurden GELESEN, nicht nur gezählt — App-Lehre 17).
   ═════════════════════════════════════════════════════════════════════════ */

/* Ein erkannter interner Pfad im Freitext wird zur Tür. Ruhig, nicht laut:
   er ist ein Wegweiser, keine Handlungsaufforderung. */
.v3-page a.stz-pfad { color: var(--v3-brand); font-weight: 700; text-decoration: none;
  border-bottom: 1px dotted #c8dafa; padding-bottom: 1px; overflow-wrap: anywhere; }
.v3-page a.stz-pfad:hover { border-bottom-style: solid; background: #f2f7ff; }

/* Die gesetzte Tür der Karte, unter der Gate-Zeile. Sie steht AUSSERHALB des
   Karten-Links (ein Link im Link ist ungültiges Markup). */
.v3-page .stz-wzwrap { border-top: 1px solid #f0e6cf; }
.v3-page .stz-wzwrap:first-of-type,
.v3-page .stz-gruppe + .stz-wzwrap { border-top: none; }
.v3-page .stz-wzwrap > .stz-wz { border-top: none; }
.v3-page .stz-tuerzeile { padding: 0 18px 11px 18px; margin-top: -4px; display: flex;
  justify-content: flex-end; }
.v3-page a.stz-tuer { border-color: #c8dafa; color: var(--v3-brand); background: #f7faff; }
.v3-page a.stz-tuer:hover { background: #eef4ff; }

/* Zuklappbare Gate-Gruppe. Der Pfeil ist EIGEN, nicht der Browser-Marker —
   sonst sieht die Zeile in jedem Browser anders aus. */
.v3-page .stz-gruppenbox { border-top: 1px solid #f0e6cf; }
.v3-page .stz-gruppenbox:first-of-type { border-top: none; }
.v3-page summary.stz-gruppe { cursor: pointer; list-style: none; user-select: none;
  padding: 11px 18px 10px 34px; position: relative; transition: background .12s; }
.v3-page summary.stz-gruppe::-webkit-details-marker { display: none; }
.v3-page summary.stz-gruppe::before { content: "▸"; position: absolute; left: 17px; top: 11px;
  font-size: 10px; color: #c0ab7e; transition: transform .14s; display: inline-block; }
.v3-page .stz-gruppenbox[open] > summary.stz-gruppe::before { transform: rotate(90deg); }
.v3-page summary.stz-gruppe:hover { background: #fffaef; }
.v3-page summary.stz-gruppe:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: -2px; }

/* Lokales Filterfeld über dem Gate-Block. Es filtert die schon geladenen
   Zeilen — kein Request je Tastendruck (Kodex 12), und der Treffer-Zähler
   sagt, wie viele von wie vielen stehenbleiben. */
.v3-page .stz-warte .wfilter { margin-left: auto; display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; }
.v3-page .stz-warte .wff { border: 1px solid #e6d9bd; border-radius: 9px; background: #fff;
  padding: 6px 11px; font-size: 12px; color: var(--v3-ink); min-width: 232px; }
.v3-page .stz-warte .wff:focus { outline: none; border-color: #d3b985; box-shadow: 0 0 0 3px rgba(224, 160, 47, .12); }
.v3-page .stz-warte .wtreffer { font-size: 11px; font-weight: 700; color: #96896e;
  font-variant-numeric: tabular-nums; }

/* Leerzustand „Heute": er zeigt jetzt, WORAUF er zeigt — die drei
   nächstliegenden Gates als Sprungmarken, statt „acht Bildschirme tiefer". */
.v3-page .stz-naheliegend { margin-top: 13px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center; }
.v3-page .stz-naheliegend .nl { font-size: 10px; font-weight: 800; letter-spacing: .45px;
  text-transform: uppercase; color: var(--v3-ink3); flex: none; }
.v3-page a.stz-naheliegend, .v3-page .stz-naheliegend a.nz { display: inline-flex; align-items: center;
  gap: 7px; text-decoration: none; border: 1px solid var(--v3-line); border-radius: 9px;
  padding: 5px 10px; background: #fff; font-size: 12px; font-weight: 650; color: var(--v3-ink2);
  max-width: 100%; }
.v3-page .stz-naheliegend a.nz:hover { border-color: #c8dafa; background: #f7faff; color: var(--v3-brand); }
.v3-page .stz-naheliegend a.nz .nt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px; }
.v3-page .stz-naheliegend .nh { flex-basis: 100%; text-align: center; font-size: 11px;
  color: var(--v3-ink3); font-weight: 600; }

/* Eine Verlaufszeile, die von CARSTEN stammt, nicht von einer Session.
   Mensch und Maschine stehen getrennt — wie bei den Kommentaren. */
.v3-page .stz-vz.mensch .vv { color: var(--v3-ink2); }
.v3-page .stz-vz.mensch { background: #fbfcfe; border-radius: 6px; padding-left: 6px;
  margin-left: -6px; }

/* Bei 390 px war der Kandidaten-Chip auf „Teilneh…" gekappt — eine
   Sprungmarke, deren Ziel man nicht lesen kann, ist keine. Auf schmalen
   Schirmen bekommt jeder Kandidat eine eigene volle Zeile. */
@media (max-width: 720px) {
  .v3-page .stz-naheliegend { justify-content: stretch; }
  .v3-page .stz-naheliegend a.nz { width: 100%; flex-direction: column; align-items: flex-start;
    gap: 4px; text-align: left; }
  .v3-page .stz-naheliegend a.nz .nt { max-width: 100%; }
  .v3-page .stz-warte .wfilter { margin-left: 0; width: 100%; }
  .v3-page .stz-warte .wff { min-width: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEUERZENTRALE — Stufe 2 (#910, 21.08.2026)
   Drei Bauteile, alle im bestehenden `.stz-`-Namensraum. Vor dem Bau gegrept
   und die Treffer GELESEN (App-Lehre 17): `.stz-pin`, `.stz-pinform`,
   `.stz-pinspalte`, `.stz-hstreifen`, `.frisch` = 0 Treffer in allen vier
   Stylesheets. Die kurzen Innennamen (`.hl`, `.hk`, `.hr`, `.ht`) stehen
   ausschliesslich UNTER `.stz-hstreifen` und sind damit keine globalen Namen.

     .stz-pin        Der Toggle „auf Heute / runter von Heute" an JEDER Zeile.
     .stz-hstreifen  Der klebende Ein-Zeilen-Streifen unter der Subnav.
     .stz-hk.frisch  Die 1,6 s lange Hervorhebung der gerade gepinnten Karte.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Der Pin: EIN Toggle, zwei Zustaende ─────────────────────────────────── */
/* `button_to` erzeugt ein eigenes <form>; es darf im Raster keinen Platz
   beanspruchen, sonst schiebt es die Zeile auseinander. */
.v3-page .stz-pinform { display: inline; margin: 0; padding: 0; }
.v3-page .stz-pinspalte { display: flex; align-items: center; justify-content: flex-end; }
.v3-page button.stz-pin {
  width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--v3-line);
  background: #fff; color: var(--v3-ink3); font-size: 13px; font-weight: 800;
  line-height: 1; cursor: pointer; display: grid; place-items: center; flex: none;
  transition: border-color .12s, background .12s, color .12s;
}
.v3-page button.stz-pin:hover { border-color: #c8dafa; background: #f2f7ff; color: var(--v3-brand); }
.v3-page button.stz-pin:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
/* Gefuellt = steht auf Heute; die Zahl IST der Rang. Ein zweites Badge daneben
   waere die zweite Meinung ueber denselben Zustand. */
.v3-page button.stz-pin.an { background: var(--v3-brand); border-color: var(--v3-brand); color: #fff; }
.v3-page button.stz-pin.an:hover { background: #17419b; border-color: #17419b; color: #fff; }
.v3-page button.stz-pin .pz { font-size: 12px; font-variant-numeric: tabular-nums; }

/* Im Gate-Block liegt der Pin rechts neben dem Karten-Link. */
.v3-page .stz-wzwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 4px; }
.v3-page .stz-wzwrap > .stz-pinspalte { padding-right: 14px; }
.v3-page .stz-wzwrap > .stz-tuerzeile { grid-column: 1 / -1; }

/* In der Spuren- und Fristen-Zeile bekommt der Pin eine eigene Rasterspalte.
   ⚠️ Die Spalte ist `minmax(34px, auto)`, KEINE feste Breite: das Tap-Ziel
   waechst bei `(pointer: coarse)` auf 44px, und diese Bedingung ist NICHT
   deckungsgleich mit den Breiten-Breakpoints. Ein 44px-Knopf in einer
   34px-Spalte (Touch-Notebook, iPad quer) haette die Zeile auseinander-
   gedrueckt. Eine Regel, die von zwei verschiedenen Bedingungen abhaengt,
   darf ihre Groesse nicht doppelt festschreiben. */
.v3-page .stz-sz { grid-template-columns: 14px minmax(0, 1fr) 152px 186px 182px minmax(34px, auto); }
@media (max-width: 1180px) {
  .v3-page .stz-sz { grid-template-columns: 16px minmax(0, 1fr) 160px minmax(34px, auto); }
  .v3-page .stz-sz > .stz-pinspalte { grid-column: 4; grid-row: 1; }
  .v3-page .stz-sz > .sfort { grid-column: 2 / 5; grid-row: 2; }
  .v3-page .stz-sz > .srechts { grid-column: 2 / 5; grid-row: 3; }
}
@media (max-width: 720px) {
  .v3-page .stz-sz { grid-template-columns: 16px minmax(0, 1fr) minmax(34px, auto); }
  .v3-page .stz-sz > .stz-pinspalte { grid-column: 3; grid-row: 1; }
  .v3-page .stz-sz > .sfort { grid-column: 2 / 4; grid-row: 3; }
  .v3-page .stz-sz > .srechts { grid-column: 2 / 4; grid-row: 4; }
}

/* ── Der klebende Heute-Streifen ─────────────────────────────────────────── */
/* ⚠️ `top`: die Bereichs-Subnav klebt selbst bei 0 (z-index 30). Dieser
   Streifen sitzt DARUNTER — Hoehe gemessen (steuerzentrale_heute_controller.js
   setzt `--stz-navh`), Rueckfall 62px, damit er ohne JavaScript nichts
   verdeckt. z-index 25 < 30: die Nav gewinnt immer. */
.v3-page .stz-hstreifen {
  position: sticky; top: var(--stz-navh, 62px); z-index: 25;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 0 14px; padding: 7px 12px;
  border: 1px solid #dbe4f2; border-radius: 12px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(22, 35, 58, .05);
}
.v3-page .stz-hstreifen::-webkit-scrollbar { display: none; }
.v3-page .stz-hstreifen .hl { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .45px;
  text-transform: uppercase; color: var(--v3-ink3); }
.v3-page .stz-hstreifen .hz { flex: none; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: var(--v3-brand); color: #fff; font-size: 11.5px;
  font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.v3-page .stz-hstreifen .hleer { font-size: 12px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .stz-hstreifen .hleer b { color: var(--v3-ink2); }
.v3-page .stz-hstreifen a.hk { flex: none; display: inline-flex; align-items: center; gap: 6px;
  max-width: 260px; padding: 3px 9px 3px 4px; border-radius: 999px; border: 1px solid var(--v3-line);
  background: #fff; text-decoration: none; color: var(--v3-ink2); font-size: 12px; font-weight: 650; }
.v3-page .stz-hstreifen a.hk:hover { border-color: #c8dafa; background: #f7faff; color: var(--v3-brand); }
.v3-page .stz-hstreifen a.hk .hr { width: 17px; height: 17px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: #eef3fc; color: var(--v3-brand);
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v3-page .stz-hstreifen a.hk .ht { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .stz-hstreifen .hm { flex: none; font-size: 11.5px; font-weight: 650; color: var(--v3-ink3); }
.v3-page .stz-hstreifen a.hoben { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 700;
  color: var(--v3-ink3); text-decoration: none; white-space: nowrap; }
.v3-page .stz-hstreifen a.hoben:hover { color: var(--v3-brand); }

/* ── „Ist es passiert?" — die gerade gepinnte Karte hebt sich kurz ab ────── */
/* Reine Anzeige aus dem Flash; nach dem naechsten Aufruf ist sie weg, ohne
   dass sich an der Karte etwas geaendert haette. */
@keyframes stz-frisch {
  0%   { background: #e8f0ff; box-shadow: inset 3px 0 0 var(--v3-brand); }
  70%  { background: #e8f0ff; box-shadow: inset 3px 0 0 var(--v3-brand); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.v3-page .stz-hk.frisch { animation: stz-frisch 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .v3-page .stz-hk.frisch { animation: none; background: #e8f0ff;
    box-shadow: inset 3px 0 0 var(--v3-brand); }
}

/* Das Verb der Anlage (Steuerzentrale::Schreibweg::ANLAGE_VERB). */
.v3-page .stz-vz .vv.angelegt { color: #0b6f92; }

/* Der Pin neben einem Sprung-Link im Leerzustand der Heute-Leiste. */
.v3-page .stz-naheliegend .nzp { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 720px) {
  .v3-page .stz-naheliegend .nzp { width: 100%; }
  .v3-page .stz-naheliegend .nzp > a.nz { flex: 1 1 auto; }
}

/* Tap-Ziele am Handy (Design-Referenz § 8: >= 36px, Prototyp-Auflage 44px).
   Gemessen im Browser-Durchlauf 21.08.: der Pin war 28x28 — auf dem Schirm,
   auf dem Carsten das Board morgens aufmacht, ist das zu klein.
   Die Rasterspalte waechst per `minmax(34px, auto)` von selbst mit (s. o.). */
@media (max-width: 1180px), (pointer: coarse) {
  .v3-page button.stz-pin { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
  .v3-page button.stz-pin .pz { font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   TICKET-AKTE 2.0 (`.tka-*`) — 26.08.2026
   Blaupause (§ 0): Objekt-Akte / Konversation wie Help Scout · Front — in v3.
   Mockup: docs/mockups/2026-08-25-ticket-akte-v2-a-helpscout.html, mit EINER
   Abweichung nach Carstens ausdruecklicher Anweisung: das Antwortfeld steht
   UEBER dem Verlauf, nicht darunter.

   ⚠️ NAMENSRAUM `tka-`: der Grep vor dem Bau (Lehre 17) fand fuer fast jeden
   kurzen Wunschnamen aus dem Mockup bereits einen Treffer im Bestand —
   `.th`, `.rc`, `.sb`, `.gv`, `.tw`, `.jk`, `.ki`, `.sig`, `.inh`, `.dat`,
   `.txt`, `.ri`, `.nm`, `.ad`, `.cx`, `.pf`, `.pt`, `.men`, `.titel`,
   `.rechts`, `.jahre`, `.anz`. Ein globaler `.th` haette mehrere Bauteile
   still zerlegt. Deshalb traegt hier JEDE Klasse das Praefix.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Aktenkopf: Identitaet + Status + EINE Primaeraktion ─────────────────── */
.v3-page .tka-kopf {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow); flex-wrap: wrap;
}
.v3-page .tka-kopf .tka-zurueck {
  color: var(--v3-ink3); text-decoration: none; font-size: 19px; font-weight: 700; line-height: 1;
}
.v3-page .tka-kopf .tka-zurueck:hover { color: var(--v3-brand); }
.v3-page .tka-kopf .tka-titel { min-width: 0; flex: 1 1 320px; }
.v3-page .tka-kopf .tka-titel h1 {
  font-size: 18px; font-weight: 800; letter-spacing: -.25px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-page .tka-kopf .tka-titel .tka-meta {
  font-size: 11.8px; color: var(--v3-ink3); font-weight: 600; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-page .tka-kopf .tka-rechts {
  display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap;
}
.v3-page .tka-sel {
  border: 1px solid var(--v3-line); border-radius: 10px; padding: 6px 10px;
  font-size: 12.5px; font-weight: 700; color: var(--v3-ink2); background: #fff;
  font-family: inherit; max-width: 170px;
}

/* Das „…"-Menue. Alles, was aus dem Antwortbereich verschwindet, lebt hier
   weiter — nichts wird unerreichbar (Abnahme-Invariante 7). */
.v3-page .tka-mehr { position: relative; }
.v3-page .tka-mehr > summary { list-style: none; cursor: pointer; }
.v3-page .tka-mehr > summary::-webkit-details-marker { display: none; }
.v3-page .tka-mehr .tka-men {
  position: absolute; right: 0; top: 40px; z-index: 30; background: #fff;
  border: 1px solid var(--v3-line); border-radius: 12px;
  box-shadow: 0 12px 34px -12px rgba(22, 35, 58, .3); min-width: 224px; padding: 6px;
}
.v3-page .tka-mehr .tka-men a,
.v3-page .tka-mehr .tka-men button {
  display: block; width: 100%; text-align: left; padding: 8px 11px; border-radius: 9px;
  font-size: 12.8px; font-weight: 650; color: var(--v3-ink2); text-decoration: none;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.v3-page .tka-mehr .tka-men a:hover,
.v3-page .tka-mehr .tka-men button:hover { background: #f2f7ff; color: var(--v3-brand); }
.v3-page .tka-mehr .tka-men hr { border: 0; border-top: 1px solid var(--v3-line2); margin: 5px 8px; }
.v3-page .tka-mehr .tka-men .tka-warn { color: var(--v3-bad); }
.v3-page .tka-mehr .tka-men .tka-mtitel {
  padding: 6px 11px 3px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3);
}

/* ── Grundraster: Konversation gross & ruhig, Kontextspalte schmal ───────── */
.v3-page .tka-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px;
  align-items: start; margin-top: 14px;
}
.v3-page .tka-mitte { min-width: 0; }

/* ── THREAD ─────────────────────────────────────────────────────────────── */
.v3-page .tka-th {
  border: 1px solid var(--v3-line); border-radius: var(--v3-r); background: #fff;
  box-shadow: var(--v3-shadow); overflow: hidden; margin-top: 14px;
}
.v3-page .tka-thkopf {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; background: #f7f9fc;
  border-bottom: 1px solid var(--v3-line2); font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--v3-ink3); flex-wrap: wrap;
}
.v3-page .tka-thkopf .tka-re {
  margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 650; font-size: 11.5px;
}

/* Alte Nachrichten: zugeklappt = EINE Zeile je Nachricht (Invariante 6). */
.v3-page .tka-altwrap > summary { list-style: none; cursor: pointer; }
.v3-page .tka-altwrap > summary::-webkit-details-marker { display: none; }
.v3-page .tka-altkopf {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: #fbfcfe;
  border-bottom: 1px solid var(--v3-line2); font-size: 12px; font-weight: 750; color: var(--v3-ink2);
}
.v3-page .tka-altkopf:hover { background: #f5f8fd; color: var(--v3-brand); }
.v3-page .tka-altkopf .tka-cx {
  color: var(--v3-ink3); font-size: 11px; transition: transform .15s; display: inline-block;
}
.v3-page .tka-altwrap[open] .tka-altkopf .tka-cx { transform: rotate(90deg); }
.v3-page .tka-altkopf .tka-anz {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--v3-ink3);
  font-variant-numeric: tabular-nums;
}
.v3-page .tka-altz {
  /* ⚠️ `.tka-altz` IST das <summary> der Alt-Zeile. Ohne diesen Reset zeichnet
     WebKit sein Dreieck davor — und das Dreieck wird zum 5. Raster-Element,
     womit die vier Spalten verrutschen. Alle anderen `summary` in diesem Block
     haben den Reset; hier fehlte er (Review 26.08.). */
  list-style: none;
  display: grid; grid-template-columns: 82px 148px minmax(0, 1fr) auto; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid var(--v3-line2); font-size: 12.4px;
  align-items: center; width: 100%; text-align: left; background: none; border-left: 0;
  border-right: 0; border-top: 0; font-family: inherit; color: inherit; cursor: pointer;
}
.v3-page .tka-altz::-webkit-details-marker { display: none; }
.v3-page .tka-altz:hover { background: #fafbfe; }
.v3-page .tka-altz .tka-d {
  font-variant-numeric: tabular-nums; color: var(--v3-ink3); font-weight: 700; font-size: 11.5px;
}
.v3-page .tka-altz .tka-w {
  font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-page .tka-altz .tka-t {
  color: var(--v3-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.v3-page .tka-altz .tka-r {
  justify-self: end; color: var(--v3-ink3); font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* Die aufgeklappte Einzelnachricht innerhalb des Alt-Verlaufs. */
.v3-page .tka-altvoll {
  padding: 4px 16px 15px 16px; border-bottom: 1px solid var(--v3-line2); background: #fdfdff;
}

.v3-page .tka-msg { padding: 17px 20px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .tka-msg:last-child { border-bottom: 0; }
.v3-page .tka-msg.tka-out { background: #fbfcff; }
.v3-page .tka-msg .tka-von {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.v3-page .tka-msg .tka-von .tka-n { font-size: 13.2px; font-weight: 800; }
.v3-page .tka-msg .tka-von .tka-a { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .tka-msg .tka-von .tka-z {
  margin-left: auto; font-size: 11.5px; color: var(--v3-ink3); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.v3-page .tka-body {
  font-size: 14px; line-height: 1.68; color: #26344b; max-width: 66ch;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.v3-page .tka-sys {
  padding: 8px 16px; font-size: 11.5px; color: var(--v3-ink3); text-align: center;
  background: #fafbfe; border-bottom: 1px solid var(--v3-line2);
}
.v3-page .tka-notiz {
  background: #fefaf2; border-left: 3px solid #f0c46a; padding: 11px 16px;
  font-size: 12.5px; color: #7a4c00; border-bottom: 1px solid var(--v3-line2);
}
.v3-page .tka-rckopf .tka-an { font-weight: 650; color: #4a628c; font-size: 11.8px; }
.v3-page .tka-sig {
  font-size: 11.5px; color: var(--v3-ink3); margin-top: 9px; display: flex; gap: 7px;
  align-items: center; flex-wrap: wrap; font-weight: 600;
}
.v3-page .tka-sig b { color: var(--v3-ink2); font-weight: 750; }
.v3-page .tka-sigblock {
  margin-top: 8px; border: 1px solid var(--v3-line2); border-radius: 10px; background: #fafbfe;
  padding: 9px 12px; font-size: 11.5px; color: var(--v3-ink3); max-height: 150px;
  overflow-y: auto; opacity: .8; pointer-events: none;
}
.v3-page .tka-rcz {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 13px;
  padding-top: 13px; border-top: 1px solid #e3ecfb;
}
.v3-page .tka-rcz .tka-sp {
  margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
}

/* Nachweis-Haken: ein Haken statt einer Datei-Pflicht (Invariante 5). */
.v3-page .tka-hak {
  display: inline-flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 650;
  color: var(--v3-ink2); border: 1px solid var(--v3-line); background: #fff; border-radius: 10px;
  padding: 7px 12px; cursor: pointer; font-family: inherit;
}
.v3-page .tka-hak input { accent-color: var(--v3-brand); width: 15px; height: 15px; margin: 0; }
.v3-page .tka-hak.tka-an { border-color: #c4ead6; background: #f2fbf6; color: var(--v3-ok); }
/* Eine DATEI ist kein Haken — sie wird als eigener Zustand gezeigt, damit
   „bestaetigt" und „belegt" nie gleich aussehen. */
.v3-page .tka-hak.tka-datei { border-color: #c9dbfa; background: #f2f7ff; color: #25406e; }

/* KI-Knopf: DREI sichtbare Zustaende (Invariante 4). */
.v3-page .tka-ki {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 11px; padding: 8px 14px;
  font-size: 12.8px; font-weight: 750; border: 1px solid #c9dbfa; background: #fff;
  color: var(--v3-brand); cursor: pointer; font-family: inherit;
}
.v3-page .tka-ki:hover { background: #f2f7ff; }
.v3-page .tka-ki[disabled] { cursor: progress; background: #f2f7ff; color: #25406e; }
.v3-page .tka-ki.tka-fertig { border-color: #c4ead6; background: #f2fbf6; color: #12794a; }
/* Die Wahl AM KI-Knopf (Carsten 27.08.2026): Modus und Sprache. Zwei stille
   FELDER neben dem Knopf, keine zwei weiteren Knoepfe — die Aktionsleiste ist
   mit sechs offenen Bedienelementen voll (Abnahme-Invariante 7). Sie sind
   bewusst leiser als der Knopf: sie tragen die Wahl, nicht die Handlung. */
.v3-page .tka-kigrp { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v3-page .tka-kisel {
  border: 1px solid var(--v3-line); border-radius: 9px; background: #fff;
  padding: 6px 8px; font-size: 11.5px; font-weight: 650; color: var(--v3-ink3);
  font-family: inherit; max-width: 178px; cursor: pointer;
}
.v3-page .tka-kisel:hover { border-color: #c9dbfa; color: var(--v3-brand); }
.v3-page .tka-spin {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c9dbfa;
  border-top-color: var(--v3-brand); animation: tka-sp .8s linear infinite; flex: none;
}
@keyframes tka-sp { to { transform: rotate(360deg); } }
@keyframes tka-gr { 0% { width: 18%; } 50% { width: 74%; } 100% { width: 18%; } }
/* Bewegung respektiert die Systemeinstellung (Design-Referenz § 8). */
@media (prefers-reduced-motion: reduce) {
  .v3-page .tka-spin { animation: none; }
}

/* ── KONTEXTSPALTE ──────────────────────────────────────────────────────── */
.v3-page .tka-sb {
  border: 1px solid var(--v3-line); border-radius: 14px; background: #fff;
  overflow: hidden; box-shadow: var(--v3-shadow);
}
.v3-page .tka-sb + .tka-sb { margin-top: 12px; }
.v3-page .tka-sbkopf { padding: 12px 13px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .tka-sbkopf .tka-zeile { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.v3-page .tka-sbtitel {
  padding: 9px 13px; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3); background: #f7f9fc;
  border-bottom: 1px solid var(--v3-line2); display: flex; align-items: center; gap: 7px;
}
.v3-page .tka-sbtitel .tka-anz {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 750;
}
.v3-page .tka-sbin { padding: 11px 13px 13px; font-size: 12.2px; }
.v3-page .tka-sbfuss {
  padding: 9px 13px; border-top: 1px solid var(--v3-line2); background: #fafbfe;
  font-size: 11.5px; color: var(--v3-ink3); display: flex; justify-content: space-between;
  gap: 8px; align-items: center; flex-wrap: wrap;
}
.v3-page .tka-sbfuss a { color: var(--v3-brand); text-decoration: none; font-weight: 750; }

/* Gesamt-Verlauf (personenweit) in der schmalen Spalte: eine Zeile je Eintrag. */
.v3-page .tka-gv-chips { padding: 10px 13px 2px; }
.v3-page .tka-gv-chips .v3-chip { font-size: 11px; padding: 3px 9px; }
.v3-page .tka-gv { padding: 4px 13px 0; max-height: 340px; overflow-y: auto; }
.v3-page .tka-gvz {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 7px 0;
  border-bottom: 1px solid var(--v3-line2); align-items: baseline; font-size: 11.8px;
  text-decoration: none; color: inherit;
}
.v3-page .tka-gvz:last-child { border-bottom: 0; }
.v3-page a.tka-gvz:hover b { color: var(--v3-brand); }
.v3-page .tka-gvz .d {
  color: var(--v3-ink3); font-variant-numeric: tabular-nums; font-weight: 750;
  font-size: 11px; white-space: nowrap;
}
.v3-page .tka-gvz .t { min-width: 0; }
.v3-page .tka-gvz .t b {
  display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px;
}
.v3-page .tka-gvz .t small { color: var(--v3-ink3); font-size: 10.8px; }
.v3-page .tka-gvz.whatsapp { border-left: 3px solid var(--v3-ok); padding-left: 9px; }
.v3-page .tka-gvz.beleg { border-left: 3px solid var(--v3-brand); padding-left: 9px; }
.v3-page .tka-gvz.vorgang { border-left: 3px solid var(--v3-ink3); padding-left: 9px; }
.v3-page .tka-gv-fuss {
  padding: 9px 13px 12px; font-size: 11px; color: var(--v3-ink3);
  border-top: 1px solid var(--v3-line2);
}
.v3-page .tka-leer { padding: 12px 13px; font-size: 11.8px; color: var(--v3-ink3); }

/* Ticket-Wechsler: die anderen Vorgaenge derselben Person. */
.v3-page .tka-tw a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--v3-line2); text-decoration: none;
  color: inherit; font-size: 12px;
}
.v3-page .tka-tw a:last-child { border-bottom: 0; }
.v3-page .tka-tw a:hover b { color: var(--v3-brand); }
.v3-page .tka-tw .tka-pt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.v3-page .tka-tw .tka-pt.offen { background: #ef4444; }
.v3-page .tka-tw .tka-pt.erledigt { background: #22c55e; }
.v3-page .tka-tw b {
  font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.v3-page .tka-tw .tka-dd {
  font-size: 10.8px; color: var(--v3-ink3); font-weight: 700; font-variant-numeric: tabular-nums;
}
.v3-page .tka-tw a.tka-hier {
  background: #f2f7ff; border-radius: 8px; padding-left: 7px; padding-right: 7px;
}

@media (max-width: 1120px) {
  .v3-page .tka-grid { grid-template-columns: 1fr; }
  .v3-page .tka-gv { max-height: none; }
}
@media (max-width: 760px) {
  .v3-page .tka-altz { grid-template-columns: 1fr; gap: 3px; padding: 10px 14px; }
  .v3-page .tka-altz .tka-r { justify-self: start; }
  .v3-page .tka-kopf .tka-rechts { width: 100%; margin-left: 0; }
}

/* ── Aufklapper IM Antwort-Cockpit: Vorlage · Text bearbeiten · Absender & CC ─
   Drei Diszipline-Traeger fuer Abnahme-Invariante 7 („was aus der Sicht
   verschwindet, bleibt erreichbar"). Bewusst native <details>: kein
   Aussenklick-Waechter, kein z-index-Streit, tastaturbedienbar von selbst. */
.v3-page .tka-vorlage,
.v3-page .tka-zusatz { display: inline-block; }
.v3-page .tka-vorlage { display: block; margin-bottom: 10px; }
.v3-page .tka-zusatz { display: block; }
.v3-page .tka-vorlage > summary,
.v3-page .tka-zusatz > summary { list-style: none; cursor: pointer; }
.v3-page .tka-vorlage > summary::-webkit-details-marker,
.v3-page .tka-zusatz > summary::-webkit-details-marker { display: none; }

.v3-page .tka-vorlage-sum,
.v3-page .tka-zusatz-sum {
  display: inline-flex; align-items: center; gap: 7px; border-radius: 11px; padding: 8px 14px;
  font-size: 12.8px; font-weight: 700; border: 1px solid var(--v3-line); background: #fff;
  color: var(--v3-ink2); box-shadow: var(--v3-shadow);
}
.v3-page .tka-vorlage-sum:hover,
.v3-page .tka-zusatz-sum:hover { background: #fafbfe; color: var(--v3-brand); }
.v3-page .tka-vorlage-hint,
.v3-page .tka-zusatz-hint {
  font-size: 11px; font-weight: 600; color: var(--v3-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.v3-page .tka-vorlage-in {
  margin-top: 9px; border: 1px solid var(--v3-line); border-radius: 12px; background: #fff;
  padding: 11px 12px;
}
.v3-page .tka-zusatz-in {
  margin-top: 9px; display: grid; grid-template-columns: 1fr; gap: 10px;
  border: 1px solid var(--v3-line); border-radius: 12px; background: #fff; padding: 11px 12px;
}
@media (min-width: 640px) {
  .v3-page .tka-zusatz-in { grid-template-columns: 1fr 1fr; }
}

/* Wer den Nachweis bestaetigt hat — Herkunft steht neben der Aussage. */
.v3-page .tka-hak-wer { font-weight: 600; color: var(--v3-ink3); font-size: 11.5px; }

/* Eigene Verbergen-Klasse: `hidden` ist eine Tailwind-Utility und in einer
   `.v3-page` nicht garantiert; `.tka-verborgen` gehoert diesem Bauteil. */
.v3-page .tka-verborgen { display: none !important; }

/* ── Autosave-Felder im Aktenkopf + Statusfarbe des Kopfes ────────────────── */
.v3-page .tka-inline { display: contents; }
.v3-page .tka-sel-schmal { max-width: 132px; color: var(--v3-ink3); }

/* Der Status faerbt EINE Kante des Kopfes. Ein Zustand, ein Ort — daneben steht
   er nicht noch einmal als Abzeichen (Lehre 8: eine Frage, eine Antwort). */
.v3-page .tka-kopf { border-left-width: 4px; }
.v3-page .tka-kopf.tka-offen { border-left-color: var(--v3-bad); }
.v3-page .tka-kopf.tka-arbeit { border-left-color: var(--v3-warn); }
.v3-page .tka-kopf.tka-wartend { border-left-color: var(--v3-brand); }
.v3-page .tka-kopf.tka-erledigt { border-left-color: var(--v3-ok); }

/* Der Block-Composer: derselbe Aufklapper-Ton wie „Vorlage". */
.v3-page .tka-composer { display: block; margin-top: 14px; }
.v3-page .tka-composer > summary { list-style: none; cursor: pointer; }
.v3-page .tka-composer > summary::-webkit-details-marker { display: none; }

/* Der Steckbrief in der schmalen Spalte: seine Bloecke sind fuer die volle
   Aktenbreite gebaut und brauchen hier einen Waagerecht-Ausweg, statt die
   Spalte zu sprengen (P5/WF: `overflow:hidden` waere ein Funktionsverlust). */
.v3-page .tka-sb .stb { overflow-x: auto; }
.v3-page .tka-sb .ddin.weit { min-width: 0; }

/* Der Anker, auf den „Antworten" springt, darf keinen Fokusrahmen erben. */
.v3-page #antwort:focus { outline: none; }

/* ── Eintraege im Vorgangs-Verlauf: Adressen, Zitat, Anhaenge, WhatsApp ────── */
.v3-page .tka-adr { font-size: 11.5px; color: var(--v3-ink3); margin-bottom: 7px; }
.v3-page .tka-adr span { font-weight: 750; }
.v3-page .tka-zitat { margin-top: 11px; }
.v3-page .tka-zitat > summary {
  list-style: none; cursor: pointer; font-size: 11.5px; color: var(--v3-ink3); font-weight: 650;
}
.v3-page .tka-zitat > summary::-webkit-details-marker { display: none; }
.v3-page .tka-zitat > summary:hover { color: var(--v3-brand); }
.v3-page .tka-zitat-in {
  margin-top: 7px; padding-left: 11px; border-left: 2px solid var(--v3-line);
  font-size: 12px; color: var(--v3-ink3); white-space: pre-wrap; overflow-wrap: anywhere;
}
.v3-page .tka-anh { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.v3-page .tka-laedt { font-size: 11px; color: var(--v3-ink3); font-style: italic; text-transform: none; }

/* `.tka-wabild`/`.tka-wadatei` sind am 27.08.2026 ERSATZLOS entfallen: sie
   gehoerten zur Einzel-WhatsApp-Blase der Ticket-Akte, die es nicht mehr gibt.
   Ihr Nachfolger ist das gemeinsame Bauteil `.mchat-*` am Ende dieser Datei
   (`shared/_mini_chat`, § 9am) — es steht dort, weil es KEIN Ticket-Bauteil
   ist (§ 7 Nr. 2). */

/* Die Kopfzeile eines Eintrags wird auch im AUFGEKLAPPTEN Alt-Verlauf
   gebraucht — `.tka-von` war nur unter `.tka-msg` gestylt, im `.tka-altvoll`
   griff keine Regel (Flex fehlte, der Zeitstempel klebte am Text). Seit
   WhatsApp-Buendel dort offen stehen, ist das der Regelfall (Design-Review
   27.08.). Angehaengte Regel statt Umschreiben der bestehenden (§ 7 Nr. 4). */
.v3-page .tka-altvoll .tka-von {
  display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap;
}
.v3-page .tka-altvoll .tka-von .tka-n { font-size: 13.2px; font-weight: 800; }
.v3-page .tka-altvoll .tka-von .tka-a { font-size: 11.5px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .tka-altvoll .tka-von .tka-z {
  margin-left: auto; font-size: 11.5px; color: var(--v3-ink3); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Der Loesch-Weg der internen Notiz — dezent, aber erreichbar. */
.v3-page .tka-inlineform { display: inline; }
.v3-page .tka-notiz-weg {
  border: 0; background: none; color: var(--v3-ink3); font-size: 15px; line-height: 1;
  cursor: pointer; padding: 0 4px; font-family: inherit;
}
.v3-page .tka-notiz-weg:hover { color: var(--v3-bad); }

/* Ton- und Formulier-Werkzeuge im selben Aufklapper wie die Textbausteine. */
.v3-page .tka-tonwerkz {
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--v3-line2);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.v3-page .tka-tonwerkz > p {
  width: 100%; margin: 4px 0 2px; font-size: 10px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .tka-tonwerkz > .border-t { display: none; }
.v3-page .tka-tonwerkz > button {
  width: auto; border: 1px solid var(--v3-line); border-radius: 9px; background: #fff;
  padding: 6px 11px; font-size: 12px; font-weight: 650; color: var(--v3-ink2);
}
.v3-page .tka-tonwerkz > button:hover { background: #f2f7ff; color: var(--v3-brand); }

/* ── Ein Zaehler auf NULL ist eine Aussage, kein Angebot ───────────────────
   `shared/_kommunikations_verlauf` setzt `.dead` auf Chips mit Zaehler 0 und
   schreibt daneben „Graue Zaehler heissen: es gibt dazu nichts." Die Klasse
   existierte app-weit nur als `.kz-akt.dead` — der Satz behauptete also eine
   Farbe, die niemand sah (Review 26.08.; der Fehler stammt aus
   `winback/akte.html.erb` und hat mit der Extraktion einen zweiten Traeger
   bekommen). */
.v3-page .v3-chip.dead { opacity: .55; color: var(--v3-ink3); border-style: dashed; }

/* Eine NICHT belegte Zeit (unser Import-Zeitpunkt statt der Empfangszeit) wird
   gedaempft und benannt — grau schlaegt gruen (Lehre 11). */
.v3-page .tka-z.tka-zvag { font-style: italic; opacity: .75; cursor: help; }

/* ── Schnell-Vermerk: EINE Zeile statt eines versteckten Formulars ──────────
   Carsten 26.08.2026 („nicht schön gelöst"): der freie Vermerk lag hinter einem
   Aufklapper und zeigte dann fünf Felder. Der häufigste Fall — eine Zeile
   aufschreiben und abhaken — hatte damit den längsten Weg der Seite. */
.v3-page .tka-vermerk {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f6;
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
}
.v3-page .tka-vermerk-text {
  flex: 1 1 16rem; min-width: 0; border: 1px solid #e6eaf1; border-radius: 10px;
  padding: 8px 12px; font: inherit; font-size: 13px; background: #fff; color: #16233a;
}
.v3-page .tka-vermerk-text:focus { outline: none; border-color: #9dbcf3; box-shadow: 0 0 0 3px rgba(30, 86, 200, .12); }
.v3-page .tka-vermerk-typ {
  border: 1px solid #e6eaf1; border-radius: 10px; padding: 8px 10px; font: inherit;
  font-size: 12.5px; font-weight: 650; color: #5b6b84; background: #fff; max-width: 190px;
}
.v3-page .tka-vermerk-hak {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 650; color: #5b6b84; cursor: pointer; white-space: nowrap;
}
.v3-page .tka-vermerk-hak input { accent-color: #1e56c8; width: 15px; height: 15px; margin: 0; }
.v3-page .tka-vermerk-nachweis { flex: 0 0 auto; }
.v3-page .tka-vermerk-nachweis > summary {
  list-style: none; cursor: pointer; font-size: 12px; font-weight: 650; color: #8b98ad;
  padding: 8px 4px;
}
.v3-page .tka-vermerk-nachweis > summary::-webkit-details-marker { display: none; }
.v3-page .tka-vermerk-nachweis > summary:hover { color: #1e56c8; }
.v3-page .tka-vermerk-nachweis-in {
  flex-basis: 100%; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 14px;
  border: 1px solid #e6eaf1; border-radius: 12px; background: #fff; padding: 12px;
}

/* Kleine Abstands-Modifier statt `style=""` im Markup (Design-Referenz § 7.5). */
.v3-page .tka-hinweis { margin-top: 6px; font-size: 12px; }
.v3-page .tka-verlaufwege { margin-top: 6px; }

/* ── RECHNUNGS-ERFASSUNG (P1, Antonina-Readiness 26.08.2026) ─────────────────
   `/rechnungen/new` trug rohes Tailwind mit `border-slate-200` OHNE die
   Breiten-Utility `border` — jedes Eingabefeld war weiss auf weiss, gemessen
   `border-bottom-width: 0px`. Die Maske ist deshalb auf die GLOBALEN Bausteine
   umgestellt (`.v3-field` / `.v3-fieldgrid` / `.v3-fieldcap`); hier stehen nur
   noch die drei Dinge, die ein Formular-LAYOUT braucht und die sonst als
   `style=""` im Markup gelandet waeren (Design-Referenz § 7.5).
   Praefix `.si-` war app-weit frei (grep 26.08.2026). */
.v3-page.si-page { max-width: 940px; }
.v3-page .si-block { padding: 14px 18px 6px; margin-bottom: 14px; }
.v3-page .si-block > .v3-fieldcap:first-child { margin-top: 4px; }
.v3-page .si-fehler { margin: 6px 0 0 18px; list-style: disc; }
.v3-page .si-datev { margin: 10px 0 12px; }
.v3-page .si-aktionen { display: flex; gap: 10px; align-items: center; margin: 4px 0 24px; }


/* ═══════════════════════════════════════════════════════════════════════
   LIEFERANTEN — Liste und Akte (W1, 26.08.2026)
   Blaupause: Stripe-Kundenliste bzw. -Detailseite (Kodex 14).

   ⚠️ Präfix `lf-` vor der Vergabe geprüft (Lehre 17 — den Treffer LESEN):
   `grep -noE '\.lf-[a-z0-9-]+'` über v3_design.css UND application.css
   liefert null Treffer, ebenso ein Klassen-Grep über app/views. Frei.
   NUR ADDITIV — es wird keine bestehende Regel geändert.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page a.lf-name { color: var(--v3-brand); font-weight: 650; text-decoration: none; }
.v3-page a.lf-name:hover { text-decoration: underline; }

/* Ein Strich ist keine Null — er ist gedämpft UND trägt seinen Grund im title. */
.v3-page .lf-strich { color: var(--v3-ink3); font-weight: 500; cursor: help; }

.v3-page .lf-delta {
  display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px;
  padding: 3px 8px; background: #f1f3f7; color: var(--v3-ink2); cursor: help;
}
/* Rot NUR für beweisbar Problematisches (Deck S8) — hier: die Ausgaben sind
   gegenüber dem Vorjahr deutlich gestiegen. */
.v3-page .lf-delta.hoch { background: #fdeaec; color: #c93a4a; }
.v3-page .lf-delta.runter { background: #e3f6ec; color: #178a50; }

.v3-page .lf-zustand {
  display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px;
  padding: 3px 8px; background: #f1f3f7; color: var(--v3-ink2); cursor: help;
}
.v3-page .lf-zustand.t-gelb { background: #fdf3e2; color: #a15c00; }
.v3-page .lf-zustand.t-blau { background: #e8effd; color: #1e56c8; }
.v3-page .lf-zustand.t-gruen { background: #e3f6ec; color: #178a50; }
.v3-page .lf-zustand.t-grau { background: #f1f3f7; color: var(--v3-ink3); }

.v3-page .lf-h2 { font-size: 15px; font-weight: 700; color: var(--v3-ink); margin: 0 0 4px; }
.v3-page .lf-sub { font-size: 12.5px; color: var(--v3-ink3); margin: 0 0 12px; }

.v3-page .lf-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 12px 0 0; }
.v3-page .lf-dl dt { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--v3-ink3); font-weight: 700; }
.v3-page .lf-dl dd { margin: 2px 0 0; font-size: 13.5px; color: var(--v3-ink); }

.v3-page .lf-alias { list-style: none; margin: 0; padding: 0; }
.v3-page .lf-alias li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--v3-line2); font-size: 13.5px;
}
.v3-page .lf-alias li:last-child { border-bottom: none; }
.v3-page .lf-aliasform { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--v3-line); }

.v3-page .lf-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.v3-page .lf-fuss .v3-pager { margin: 0; }
.v3-page .lf-zaehler { margin-left: auto; font-size: 12px; color: var(--v3-ink3); font-weight: 600; }

@media (max-width: 720px) {
  .v3-page .lf-fuss { flex-direction: column; align-items: stretch; }
  .v3-page .lf-zaehler { margin-left: 0; }
}

/* ══ EVENTS-WELLE 2 (26.08.2026) — Arbeitsliste & Akte ══════════════════════
   Mockups: docs/mockups/2026-08-26-events-liste-a-linear.html (Liste) und
   …-einzel-b-akte.html (Akte). Blaupausen § 0: „Arbeitsliste wie Linear" und
   „Objekt-Akte wie Stripe-Detailseite".

   ⚠️ Vor der Vergabe gegrept (Lehre 17): `.ev-werk*`, `.ev-grp*`, `.ev-sortpf`,
   `.ev-arb*`, `.ev-vt*`, `.ev-zwei` waren app-weit unbelegt. Der Sortier-Link
   selbst ist NICHT neu — er ist das bestehende `.thsort`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Die Werkzeugleiste der Übersicht ─────────────────────────────────────── */
.v3-page .ev-werk { margin-bottom: 14px; }
.v3-page .ev-werk .ev-flt { display: block; padding: 0; margin: 0; }
.v3-page .ev-werkzeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v3-page .ev-werkzeile + .ev-werkzeile { margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--v3-line2); }
.v3-page .ev-suche { flex: 1 1 300px; min-width: 220px; }
.v3-page .ev-suche .lupe { font-size: 13px; line-height: 1; flex: none; }
.v3-page .ev-suchhint { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650;
  white-space: nowrap; flex: none; }
.v3-page .ev-zeitseg { flex: none; }
.v3-page .ev-werkrechts { display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-left: auto; }
.v3-page .ev-suchwarn { margin-top: 11px; }

/* ── Sortier-Zeichen im Spaltenkopf ───────────────────────────────────────── */
.v3-page .v3-table .thsort .ev-sortpf { font-size: 8.5px; opacity: .45; }
.v3-page .v3-table .thsort.on { color: var(--v3-brand); }
.v3-page .v3-table .thsort.on .ev-sortpf { opacity: 1; }

/* ── Gruppen-Überschrift in der Arbeitsliste ──────────────────────────────── */
.v3-page .v3-table tr.ev-grp > td { background: #f6f8fc; padding: 9px 14px;
  border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line2); }
.v3-page .ev-grpkopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v3-page .ev-grpti { font-size: 12.5px; font-weight: 800; color: var(--v3-ink); }
.v3-page .ev-grpzu { font-size: 11px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .ev-grpsec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ── Die Akte: zwei Spalten — Zahlen links, Menschen rechts ───────────────── */
.v3-page .ev-zwei { display: grid; grid-template-columns: minmax(0, 1fr) 430px;
  gap: 16px; align-items: start; }
.v3-page .ev-zwei > .ev-links { min-width: 0; }
.v3-page .ev-rechts { position: sticky; top: 12px; min-width: 0;
  max-height: calc(100dvh - 96px); overflow: auto; }
/* Unter ~1.240 px klappt die Arbeitsspalte unter die Zahlen — dann ist die
   Akte wieder eine lange Seite, und das ist richtig so: eine 430-px-Spalte auf
   einem 1.100-px-Fenster nähme der linken Seite die Hälfte. */
@media (max-width: 1240px) {
  .v3-page .ev-zwei { grid-template-columns: minmax(0, 1fr); }
  .v3-page .ev-rechts { position: static; max-height: none; overflow: visible; }
}

/* ── Die Arbeitsspalte (Teilnehmer) ───────────────────────────────────────── */
.v3-page .ev-arbkopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v3-page .ev-arbzahl { font-size: 11px; color: var(--v3-ink3); font-weight: 700; }
.v3-page .ev-arbsuche { margin-top: 10px; }
.v3-page .ev-arbchips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.v3-page a.ev-arbchip { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border: 1px solid var(--v3-line); border-radius: 999px;
  background: #fff; font-size: 11.5px; font-weight: 650; color: var(--v3-ink2);
  text-decoration: none; }
.v3-page a.ev-arbchip:hover { border-color: #c3d3ee; background: #fafbfe; }
.v3-page a.ev-arbchip .n { background: #eef2f8; border-radius: 999px; padding: 0 5px;
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.v3-page a.ev-arbchip.on { border-color: #9dbcf3; background: #f2f7ff; color: var(--v3-brand); }
.v3-page a.ev-arbchip.on .n { background: #e8effd; color: var(--v3-brand); }
.v3-page .ev-arbliste { margin-top: 4px; }
.v3-page .ev-arbzeile { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 9px; padding: 7px 2px;
  border-top: 1px solid var(--v3-line2); }
.v3-page .ev-arbzeile:first-child { border-top: 0; }
.v3-page .ev-arbperson { min-width: 0; }
.v3-page .ev-arbperson b { display: block; font-size: 13px; font-weight: 700;
  color: var(--v3-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .ev-arbperson small { display: block; font-size: 11px; color: var(--v3-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .ev-arbrecht { display: flex; align-items: center; gap: 5px; flex: none; }
.v3-page .ev-arbfuss { margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--v3-line2); font-size: 11.5px; color: var(--v3-ink2);
  line-height: 1.6; }

/* ── Das Verteilungs-Bauteil (aus Mockup-Variante A übernommen) ───────────── */
.v3-page .ev-vteil + .ev-vteil { margin-top: 4px; }
/* ⚠️ NICHT auf `a` gescoped (Browser-Durchlauf 26.08.): die Überschneidungs-
   und Wiederkehr-Zeilen sind KEINE Links — sie führen in keine Teilmenge. Mit
   `a.ev-vzeile` bekamen sie kein Grid und standen als gestapelte Label/Wert-
   Paare ohne Balken da. Das Raster gilt für die ZEILE, die Klick-Eigenschaften
   nur für die verlinkte. */
.v3-page .ev-vzeile { display: grid; grid-template-columns: 168px minmax(0, 1fr) 62px;
  align-items: center; gap: 10px; padding: 5px 6px; border-radius: 9px;
  text-decoration: none; color: inherit; }
.v3-page a.ev-vzeile:hover { background: #fafbfe; }
.v3-page a.ev-vzeile:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page a.ev-vzeile.on { background: #f2f7ff; }
.v3-page .ev-vlabel { font-size: 12px; font-weight: 650; color: var(--v3-ink2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page a.ev-vzeile:hover .ev-vlabel { color: var(--v3-brand); }
.v3-page .ev-vbar { height: 8px; border-radius: 99px; background: var(--v3-line2);
  overflow: hidden; }
.v3-page .ev-vbar i { display: block; height: 100%; border-radius: 99px;
  background: var(--v3-brand); }
.v3-page .ev-vzeile.luecke .ev-vbar i { background: #cbd5e4; }
.v3-page .ev-vzeile.ok .ev-vbar i { background: var(--v3-ok); }
.v3-page .ev-vzeile.bad .ev-vbar i { background: var(--v3-bad); }
.v3-page .ev-vzahl { text-align: right; font-size: 12.5px; font-weight: 800;
  color: var(--v3-ink); font-variant-numeric: tabular-nums; }
.v3-page .ev-vsub { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; }

@media (max-width: 720px) {
  .v3-page .ev-vzeile { grid-template-columns: minmax(0, 1fr) 54px;
    grid-template-areas: "label zahl" "bar bar"; row-gap: 5px; }
  .v3-page .ev-vlabel { grid-area: label; white-space: normal; }
  .v3-page .ev-vbar { grid-area: bar; }
  .v3-page .ev-vzahl { grid-area: zahl; }
  .v3-page .ev-werkrechts { margin-left: 0; }
  /* Der Hinweis neben dem Suchfeld traegt `nowrap` und schob die Seite bei
     390 px um 38 px quer aus dem Bild (gemessen 26.08.2026). Er sagt dasselbe
     wie der Platzhalter im Feld — am Handy entfaellt er deshalb, statt eine
     Querscroll-Leiste zu erzwingen. */
  .v3-page .ev-suchhint { display: none; }
  .v3-page .ev-suche { flex: 1 1 100%; min-width: 0; }
}

/* Zeilen-Ansicht: schmale Spalten bleiben schmal. Ein Ort über drei Zeilen und
   ein Arbeitsstand über vier machen die Zeile dreimal so hoch — „in einer
   Sekunde scannbar" ist aber die Zusage dieser Ansicht (Browser-Durchlauf
   26.08.2026). Beide tragen ihren vollen Wortlaut als `title`. */
.v3-page .v3-table td.ev-zort { max-width: 150px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ `max-width` ALLEIN IST AN EINER TABELLENZELLE NUR EIN WUNSCH
   (Prod-Durchklick 27.08.2026, #848). Im automatischen Tabellen-Layout ist
   `width` die Angabe, die zaehlt — ohne sie haengt die Spaltenbreite an den
   laengsten Inhalten und die Kuerzung wird zur Glueckssache.
   Gemeldet war „die Marke laeuft unter den Akte-Knopf"; GEMESSEN bei 1.440 px
   war es das hier: die Marke blieb zwar in der Zelle (14 px Luft), ihr Text
   wurde aber hart abgeschnitten (s. u.), und das „+N" brach in eine zweite
   Zeile um. Der volle Wortlaut steht weiterhin im `title` der Zelle
   (U9-Regel: gekuerzt, aber aufloesbar). */
.v3-page .v3-table td.ev-zstand { width: 200px; max-width: 200px; white-space: nowrap; }
/* Der Titel ist die Spalte, die Platz braucht — er bekommt ihn, und lange
   Titel brechen auf hoechstens zwei Zeilen ab (voller Wortlaut im `title`). */
.v3-page .v3-table td.ev-ztitel { min-width: 230px; }
.v3-page .v3-table td.ev-ztitel a { display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
/* Der Stern gehoert NEBEN den Titel, nicht darueber: der geklammerte Titel ist
   ein Block, deshalb schwimmt die Marke davor statt in eigener Zeile zu stehen. */
.v3-page .v3-table td.ev-ztitel .ev-flag { float: left; margin: 1px 6px 0 0; }
.v3-page .v3-table td.ev-ztraeger { max-width: 130px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ `.ab-badge` ist global `display: inline-flex` — und ein Flex-Container
   kuerzt seinen eigenen Text NICHT mit Ellipse (`text-overflow` wirkt nur in
   einem Block-Container). GEMESSEN auf Prod am 27.08.2026 bei 1.440 px:
   die Marke war 230–277 px breit, sichtbar waren 170 px — 60 bis 107 px
   wurden hart abgeschnitten, mitten im Wort, OHNE jedes Zeichen dafuer. Hier
   steht in der Marke nur Text und kein Punkt, also wird sie fuer diese eine
   Spalte zum Block-Container und kuerzt sichtbar mit „…".
   Die 38 px halten den Platz fuer das „+N" daneben frei: ohne sie brach es in
   eine ZWEITE Zeile um und machte jede Zeile 67 px hoch (gemessen). */
.v3-page .v3-table td.ev-zstand .ab-badge { display: inline-block;
  max-width: calc(100% - 38px); vertical-align: middle; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.v3-page .v3-table td.ev-zstand .t-mut { vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════════════════
   § 9ah — DER RECHNUNGS-ARBEITSPLATZ (W1 Teil 2, 26.08.2026)

   BLAUPAUSE (Kodex 14 · § 0): Eingangsrechnungs-Inbox wie Candis / Pennylane.
   Links der Stapel im gewählten Zustand, rechts der BELEG in Lesegröße.
   Kern-These des Decks: Antonina arbeitet nicht mit einer Tabelle, sondern mit
   einem Blatt Papier — also steht das Blatt im Zentrum und die Liste daneben.

   ⚠️ PRÄFIX `.ra-*` VOR DER VERGABE GEGREPT (Lehre 17): null Treffer in
   `v3_design.css`, `application.css`, allen Views, Helpers und JS. `.rp-*`
   (Reminder-Pipeline) und `.lf-*` (Lieferanten) waren belegt, `.rz`/`.wg` zu
   kurz — `.ra-` ist frei und bleibt es.

   Alles unter `.v3-page` gescoped: EIN Design-System (CLAUDE.md §Conventions).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Die zweispaltige Arbeitsfläche ─────────────────────────────────────── */
.v3-page .ra-grid {
  display: grid; grid-template-columns: 392px minmax(0, 1fr);
  gap: 14px; align-items: start; margin-top: 14px;
}

/* ── Der Stapel ─────────────────────────────────────────────────────────── */
/* ⚠️ DER STAPEL BLEIBT STEHEN, waehrend das Blatt scrollt — so arbeitet eine
   Inbox (Blaupause Candis/Pennylane). Ohne `sticky` sah man beim Lesen des
   Belegs (700 px hoch) links eine leere weisse Flaeche und musste zum
   Weiterblaettern jedesmal hochscrollen; gemessen im UX-Durchlauf 26.08.
   Nur ab der zweispaltigen Breite: einspaltig steht der Stapel ohnehin oben. */
.v3-page .ra-stapel {
  border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  background: var(--v3-card); box-shadow: var(--v3-shadow); overflow: hidden;
}
@media (min-width: 1181px) {
  .v3-page .ra-stapel { position: sticky; top: 12px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
  .v3-page .ra-stapel .ra-liste { flex: 1 1 auto; max-height: none; }
}
.v3-page .ra-stkopf {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-bottom: 1px solid var(--v3-line2); background: #f7f9fc;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .ra-stkopf .ra-re {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.v3-page .ra-stfilter {
  display: flex; flex-direction: column; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--v3-line2);
}
.v3-page .ra-such {
  width: 100%; border: 1px solid var(--v3-line); border-radius: 9px;
  padding: 6px 10px; font: inherit; font-size: 12.5px;
  color: var(--v3-ink); background: #fbfcfe;
}
.v3-page .ra-such:focus {
  outline: none; border-color: #9dbcf3; box-shadow: 0 0 0 3px rgba(30, 86, 200, .1);
}
.v3-page .ra-suchzeile { display: flex; gap: 6px; align-items: center; }

/* Die Liste scrollt in sich — der Beleg rechts bleibt stehen (Deck). */
.v3-page .ra-liste { max-height: 620px; overflow: auto; }

/* ── Eine Zeile des Stapels ─────────────────────────────────────────────── */
/* Ohne Sammel-Auswahl gibt es KEINE Kaesten-Spalte — eine leere 34-px-Vorspalte
   kostete in drei von vier Sichten 11 % der Spaltenbreite fuer nichts. */
.v3-page .ra-zeile {
  display: grid; grid-template-columns: 4px minmax(0, 1fr);
  gap: 10px; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--v3-line2);
  align-items: center;
}
.v3-page .ra-zeile.waehlbar { grid-template-columns: 4px auto minmax(0, 1fr); }
.v3-page .ra-zeile:last-child { border-bottom: none; }
.v3-page .ra-zeile:hover { background: #fafbfe; }
.v3-page .ra-zeile.on { background: #f2f7ff; box-shadow: inset 3px 0 0 var(--v3-brand); }

/* Die Ampel ist ein Balken, kein Punkt: sie soll im Augenwinkel lesbar sein. */
.v3-page .ra-amp { width: 4px; height: 38px; border-radius: 0 3px 3px 0; background: #d7dee9; }
.v3-page .ra-amp.gelb { background: var(--v3-warn); }
.v3-page .ra-amp.rot { background: var(--v3-bad); }
.v3-page .ra-amp.gruen { background: var(--v3-ok); }

/* 34 px Vorspalte für das Kästchen (§ 9a — Mehrfachauswahl). */
.v3-page .ra-haken { width: 34px; display: flex; justify-content: center; }
.v3-page .ra-haken input { accent-color: var(--v3-brand); width: 15px; height: 15px; margin: 0; }

/* Die GANZE Zeile ist der Link — Text UND Betrag. Der Betrag stand zuerst
   daneben; damit war der auffaelligste Teil der Zeile tot. */
.v3-page .ra-ztext {
  min-width: 0; text-decoration: none; color: inherit;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
}
.v3-page .ra-zlinks { min-width: 0; }
.v3-page .ra-z1 { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.v3-page .ra-z1 b {
  font-size: 13.3px; font-weight: 750; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.v3-page .ra-zeile.on .ra-z1 b { color: var(--v3-brand); }
.v3-page .ra-z2 {
  font-size: 11.2px; color: var(--v3-ink3); font-weight: 600; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px;
}
.v3-page .ra-z2 .ra-topf { color: var(--v3-ink2); font-weight: 700; }
.v3-page .ra-zbetrag {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: 13.2px; white-space: nowrap;
}
.v3-page .ra-zbetrag small { display: block; font-size: 10.6px; font-weight: 700; margin-top: 1px; color: var(--v3-ink3); }
.v3-page .ra-zbetrag small.gelb { color: var(--v3-warn); }
.v3-page .ra-zbetrag small.rot { color: var(--v3-bad); }
.v3-page .ra-mini {
  font-size: 10px; font-weight: 800; border-radius: 5px; padding: 1px 5px;
  background: #f1f4f8; color: var(--v3-ink2); border: 1px solid #e2e8f0;
  white-space: nowrap; flex: none;
}
.v3-page .ra-mini.samm { background: #fdf3e2; color: #a15c00; border-color: #f7dfb4; }

.v3-page .ra-stfuss {
  padding: 8px 12px; border-top: 1px solid var(--v3-line2); background: #fafbfe;
  font-size: 11.2px; color: var(--v3-ink3); display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; font-weight: 650;
}
.v3-page .ra-kbd {
  display: inline-block; border: 1px solid #d7dee9; border-bottom-width: 2px;
  border-radius: 5px; background: #fff; padding: 0 5px; font-size: 10.5px;
  font-weight: 800; color: var(--v3-ink2); font-family: inherit;
}
.v3-page .ra-leer { padding: 26px 18px; text-align: center; color: var(--v3-ink3); font-size: 13px; }
.v3-page .ra-leer b { display: block; color: var(--v3-ink); font-size: 14px; margin-bottom: 4px; }

/* Die Sammelleiste steht ÜBER der Liste (§ 9a) — nie am Bildschirmrand. */
.v3-page .ra-sammel {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--v3-line2);
  background: #fdf3e2; font-size: 12px; color: #a15c00; font-weight: 650;
}
.v3-page .ra-sammel .ra-re { margin-left: auto; }

/* ── Das Blatt (rechte Spalte) ──────────────────────────────────────────── */
.v3-page .ra-blatt {
  border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  background: var(--v3-card); box-shadow: var(--v3-shadow); overflow: hidden;
}
.v3-page .ra-bkopf { padding: 13px 17px 11px; border-bottom: 1px solid var(--v3-line2); }
.v3-page .ra-bk1 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.v3-page .ra-bk1 h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin: 0; }
.v3-page .ra-bsumme { margin-left: auto; text-align: right; }
.v3-page .ra-bsumme .ra-gross {
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.4px;
}
.v3-page .ra-bsumme .ra-klein { font-size: 11px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .ra-bmeta {
  display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.8px;
  color: var(--v3-ink3); font-weight: 650; margin: 7px 0 0;
}
.v3-page .ra-bmeta b { color: var(--v3-ink2); font-weight: 750; }
.v3-page .ra-bmeta a { color: var(--v3-brand); font-weight: 750; text-decoration: none; }
.v3-page .ra-bmeta a:hover { text-decoration: underline; }

/* Aktionsleiste — GENAU EINE Primäraktion (Tafel § 1.4). */
.v3-page .ra-bakt {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 17px; background: #f7f9fc; border-bottom: 1px solid var(--v3-line2);
}
.v3-page .ra-bakt .ra-hin { font-size: 11.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .ra-bakt .ra-hin b { color: var(--v3-ink); }
.v3-page .ra-bakt .ra-re { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Das Übergabe-Panel: ein Schritt für beides (§ 1.5) ─────────────────── */
.v3-page .ra-panel {
  border: 1px solid #bcd3f7; background: #fbfcff; border-radius: 13px;
  margin: 13px 17px 0; overflow: hidden;
}
.v3-page .ra-panel > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; background: #f2f7ff; border-bottom: 1px solid #dbe6fb;
  font-size: 12.8px; font-weight: 800; color: #25406e; flex-wrap: wrap;
}
.v3-page .ra-panel > summary::-webkit-details-marker { display: none; }
.v3-page .ra-panel > summary .ra-re { margin-left: auto; font-weight: 650; font-size: 11.5px; color: #4a628c; }
.v3-page .ra-panelb { padding: 13px 15px 15px; }
.v3-page .ra-panelz {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid #e3ecfb;
}
.v3-page .ra-panelz .ra-re { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.v3-page .ra-betreff {
  margin-top: 11px; border: 1px solid var(--v3-line); border-radius: 11px;
  background: #fafbfe; padding: 9px 12px; font-size: 12.2px; color: var(--v3-ink2);
}
.v3-page .ra-betreff b { color: var(--v3-ink); font-weight: 750; }
/* Kanonische Bernstein-Werte der App (#fdf3e2 / #a15c00 / #f7dfb4) — nicht die
   Hex-Werte aus dem Mockup: zwei Bernsteintöne nebeneinander waeren eine
   Insel-Bildung (§ 3). */
.v3-page .ra-gate {
  margin-top: 11px; border: 1px solid #f7dfb4; background: #fdf3e2;
  border-radius: 11px; padding: 10px 13px; font-size: 12.2px; color: #a15c00;
  line-height: 1.5; display: flex; gap: 10px; align-items: flex-start;
}

/* ── Der Beleg ──────────────────────────────────────────────────────────── */
.v3-page .ra-beleg { padding: 13px 17px 17px; background: var(--v3-canvas); border-top: 1px solid var(--v3-line2); margin-top: 13px; }
.v3-page .ra-belegleiste {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 11.6px; color: var(--v3-ink3); font-weight: 700;
}
.v3-page .ra-belegleiste b { color: var(--v3-ink); }
.v3-page .ra-belegleiste .ra-re { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.v3-page .ra-belegrahmen {
  width: 100%; height: 700px; border: 1px solid #d7dee9; border-radius: 8px;
  background: #fff; display: block;
}
.v3-page .ra-belegleer {
  border: 1px dashed var(--v3-line); border-radius: 12px; background: #fff;
  padding: 34px 20px; text-align: center; color: var(--v3-ink3); font-size: 13px;
}
.v3-page .ra-belegleer b { display: block; color: var(--v3-ink); font-size: 15px; margin-bottom: 5px; }

/* ── W2: die Lesegröße des Blatts (27.08.2026) ──────────────────────────── */
/* ⚠️ PRÄFIXE VOR DER VERGABE GEGREPT (Lehre 17): `ra-hoch`, `ra-vollblatt` und
   `ra-lesestufen` haben in `v3_design.css`, `application.css`, allen Views und
   JS null Treffer. Bare `.hoch` WÄRE belegt gewesen (`.lf-delta.hoch`) und
   bare `.gross` gleich zweimal (`.sg-bilanz .gross`, `.r1-prof .vv.gross`) —
   deshalb tragen beide Stufen das Bereichs-Präfix.
   Der Umschalter selbst ist das BESTEHENDE `.v3-seg`; hier steht nur, dass er
   in der Leiste nicht mitwächst. */
.v3-page .ra-lesestufen { flex: 0 0 auto; }

/* ⚠️ DER WEG ZURÜCK DARF NICHT UNTER DER KLEBENDEN LEISTE LANDEN (Befund im
   Browser-Durchlauf 27.08.): der Sprung auf `#akte-beleg` setzte das Blatt
   korrekt an den oberen Rand — und schob damit die Belegleiste MIT DEM
   UMSCHALTER (35 px hoch, y = 70…105) unter die klebende Bereichs-Subnav
   (`.s3-navwrap`, y = 80…221). Wer „Ganzseitig" klickte, sah den Knopf
   „Lesegröße" nicht mehr. Erzeugt wird kein neues Bauteil — der Anker bekommt
   den Abstand, den die klebende Leiste braucht (gemessen 141 px + Luft). */
.v3-page .ra-beleg { scroll-margin-top: 152px; }

/* Stufe „Groß": das Blatt bekommt die Fensterhöhe. `100dvh` respektiert die
   Browserleisten mobiler Geräte.
   ⚠️ `max(…)` GEGEN DEN KNOPF, DER DAS GEGENTEIL TUT (Befund im Browser-
   Durchlauf 27.08., 1280 × 720): auf einem kurzen Fenster ergab
   `calc(100dvh - 120px)` genau 600 px — also WENIGER als die 700 px der
   Standard-Stufe. „Groß" hätte das Blatt kleiner gemacht. Die Stufe kann jetzt
   nie unter die Standardhöhe fallen; auf großen Bildschirmen wächst sie mit. */
.v3-page .ra-belegrahmen.ra-hoch { height: max(700px, calc(100dvh - 120px)); }

/* Stufe „Ganzseitig": EINE Spalte. Der Stapel bleibt im Markup (seine Adresse,
   seine Auswahl und die Tastatur-Navigation bleiben unangetastet) — er tritt
   nur zur Seite, damit das Blatt die ganze Fläche bekommt. Kein Overlay, kein
   Modal, kein zweiter Scroll-Kontext. */
.v3-page .ra-grid.ra-vollblatt { grid-template-columns: minmax(0, 1fr); }
.v3-page .ra-grid.ra-vollblatt .ra-stapel { display: none; }

/* Die Aufklapper-Spalte unter dem Beleg. */
.v3-page .ra-details { padding: 0 17px 17px; display: flex; flex-direction: column; gap: 9px; }
.v3-page .ra-details > * { min-width: 0; }

@media (max-width: 1180px) {
  .v3-page .ra-grid { grid-template-columns: 1fr; }
  .v3-page .ra-liste { max-height: 420px; }
}
@media (max-width: 820px) {
  .v3-page .ra-bsumme { margin-left: 0; text-align: left; width: 100%; }
  .v3-page .ra-bakt .ra-re { margin-left: 0; width: 100%; }
  .v3-page .ra-belegrahmen { height: 460px; }
}

/* Der Auswerten-Aufklapper unter der Arbeitsfläche (W1 Teil 2). */
.v3-page .ra-auswerten > summary {
  list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 750;
  color: var(--v3-ink2); display: flex; align-items: center; gap: 8px;
}
.v3-page .ra-auswerten > summary::-webkit-details-marker { display: none; }
.v3-page .ra-auswerten > summary::before { content: "›"; color: var(--v3-ink3); font-weight: 800; }
.v3-page .ra-auswerten[open] > summary::before { content: "⌄"; }
.v3-page .ra-auswerten { margin-top: 14px; }
.v3-page .ra-stfuss .ra-re { margin-left: auto; font-variant-numeric: tabular-nums; }
/* EIN Marker fuer „hier stehe ich": dieselben Werte wie `.ra-zeile.on`, das der
   Server setzt. Zwei Optiken fuer dieselbe Aussage waeren zwei Meinungen. */
.v3-page .ra-zeile.ra-tastenfokus { background: #f2f7ff; box-shadow: inset 3px 0 0 var(--v3-brand); }
.v3-page .ra-zeile.ra-tastenfokus .ra-z1 b { color: var(--v3-brand); }
.v3-page .ra-ztext:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: -2px; border-radius: 6px; }
.v3-page .ra-mitte { justify-content: center; margin-top: 12px; }
.v3-page .ra-filterkopf { display: flex; align-items: flex-start; gap: 12px; border-left-width: 4px; }
/* Nur IM Stapel buendig — freistehend behaelt der Kasten seinen Radius. */
.v3-page .ra-filterkopf.buendig { margin: 0; border-radius: 0; }
.v3-page .ra-filterkopf > div:first-child { flex: 1; min-width: 0; }
.v3-page .ra-filterleer { margin-top: 6px; }
/* `.ra-tueren` ist mit F2/A1 ersatzlos entfallen (28.08.2026): die Regel
   formatierte die ZWEITE Reiterzeile des Rechnungs-Bereichs
   (`supplier_invoices/_tueren`, #801) — dieselben drei Ziele, die seit W6/W7
   die Ebenen-Leiste der Familie „Rechnungen & Belege" traegt
   (`Finanzen::Bereichsreiter::EBENEN`). Grep-Beweis ueber alle Traeger-Views
   gefuehrt, Waechter in `rechnungen_charta_test`. */

/* Zwei Zahlen an EINEM Reiter (W1 § 2.2): sie sind zwei MENGEN, keine
   Steigerung — gleiche Farbe, sichtbar getrennt. Ein Trennzeichen statt einer
   zweiten Warnfarbe, weil "bezahlt ohne DATEV" nicht schlimmer ist als
   "offen", sondern etwas anderes. */
.s3-subbar .s3-tabdot + .s3-tabdot::before { content: "·"; color: var(--v3-ink3, #8b98ad); margin-right: 3px; font-weight: 700; }

/* Die Definitionsliste der Beleg-Akte. Eigener Namensraum statt `.lf-dl`
   (Lieferanten) — ein Bauteil mit zwei Besitzern wird beim nächsten CSS-Schnitt
   mit grep-Beweis übersehen (§ 9c). */
.v3-page .ra-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 12px 0 0; }
.v3-page .ra-dl dt { font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--v3-ink3); font-weight: 700; }
.v3-page .ra-dl dd { margin: 2px 0 0; font-size: 13.5px; color: var(--v3-ink); }

/* Der Sicht-Umschalter zeigt, WELCHE Sicht aktiv ist. Eine KPI-Reihe, die zum
   Umschalter erklaert wird, aber keinen Zustand hat, ist keiner (W1 Teil 2). */
.v3-page a.ab-kpi.on {
  border-color: var(--v3-brand);
  box-shadow: 0 0 0 2px rgba(30, 86, 200, .13), var(--v3-shadow);
}
.v3-page a.ab-kpi.on .kv { color: var(--v3-brand); }

/* Ein Gitter-Kind aus Beschriftung PLUS Hinweis. Der Hinweis MUSS ausserhalb
   des label-Elements stehen (die Regel darueber sagt es woertlich) — ohne
   diesen Kasten waere er ein eigenes Gitter-Kind und zerrisse die
   Zwei-Spalten-Aufteilung. */
.v3-page .ra-feld { min-width: 0; }
.v3-page .ra-feld .v3-fieldhint { margin-top: 4px; }
.v3-page .ra-dpliste { list-style: none; margin: 8px 0 0; padding: 0; font-size: 11.8px; }
.v3-page .ra-dpliste li { margin-top: 3px; }

/* Die Aufklapper der Beleg-Akte laufen ueber die volle Breite der rechten
   Spalte. Der Aufklapper ist als PILLE gebaut (inline-block, min-width 250px);
   in einer schmalen Spalte — und am Handy — schob sein Inhalt ihn ueber den
   Rand (gemessen 411 px bei 390 px Viewport, Inhalt abgeschnitten). Es ist
   genau der Fall, fuer den die block-Variante als Ausweg vorgesehen ist; hier
   auf den eigenen Namensraum gescoped statt am gemeinsamen Bauteil gedreht. */
.v3-page .ra-details .dd { display: block; }
.v3-page .ra-details .dd .ddin { min-width: 0; }
.v3-page .ra-mini.vorschlag { background: #e3f6ec; color: #12794a; border-color: #c4ead6; }
.v3-page .ra-mini.risiko { background: #fdeaec; color: #b02a3a; border-color: #f6cdd3; }
.v3-page .ra-satz { margin: 0 0 8px; font-size: 12.8px; color: var(--v3-ink2); }
.v3-page .ra-satz b { color: var(--v3-ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   EINLASS — die Kassen-/Scanner-Oberfläche des Event-Abends (AN-1, 27.08.2026)

   Spec: docs/superpowers/specs/2026-08-26-an1-checkin-konzept.md § 3.2 / § 3.5
   Blaupause (§ 0): KASSEN-/SCANNER-Oberfläche (ein Eingabefeld, große
   Tap-Ziele, ein Zustand sichtbar) — ausdrücklich NICHT „Arbeitsliste wie
   Linear": am Eingang wird nicht sortiert, gefiltert und gruppiert.

   Scope: `layouts/einlass` (die Einlass-Seite und ihr Startpunkt). Global unter
   `.v3-page` (§ 7 Nr. 2), damit ein späterer Einlass — Regionalclub, AI Summit,
   Mitgliederversammlung — dieselben Bauteile nimmt statt neue zu bauen.

   Präfix `.einl-` vor der Vergabe gegrept (Lehre 17): weder `.ein-` noch
   `.einl-` existierten; `kein-abstand`/`kein-fuss` beginnen nicht mit einem
   Punkt vor „ein-" und sind deshalb nicht betroffen.

   TAP-ZIELE, ehrlich benannt (Design-Review 27.08.2026): die ARBEITSFLÄCHE —
   Trefferzeile (66 px) und Suchfeld (56 px) — liegt über § 8; die Nebenknöpfe
   erben `.v3-btn` (36 px) und werden hier auf 48 px gehoben. Der Kopf dieses
   Blocks behauptete pauschal „≥ 56 px" und war damit für vier Knöpfe falsch;
   eine Ehrlichkeits-Aussage hat auch im Kommentar ein Verfallsdatum (Lehre 10).

   FARBEN: nur `--v3-*` bzw. die BESTEHENDEN Callout-Werte aus § 3 — kein
   zweiter Bernstein- und kein zweiter Blau-Wert neben `.v3-callout`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Die Token wohnen auf `.v3-page`, nicht auf `:root` — der `<body>` kommt nicht
   an sie heran. Deshalb wird der eine, den er braucht, hier erneut DEKLARIERT
   (derselbe Name, derselbe Wert), statt einen Hex-Wert von Hand zu wiederholen:
   wer den Canvas-Ton je ändert, ändert ihn an einer Stelle. */
.einl-body { margin: 0; --v3-canvas: #f4f6f9; background: var(--v3-canvas); }

/* Die eigene Hülle hat keine `.shell-content` — der Full-Bleed-Trick von
   `.v3-page` (negative Ränder) zöge den Inhalt sonst aus dem Bild. */
.v3-page.einl-page { margin: 0; padding: 0 0 40px; min-height: 100dvh;
  max-width: 720px; margin-inline: auto; }
.v3-page.einl-page .v3-btn { min-height: 48px; padding: 12px 16px; }

/* ── Der Kopf: Zähler, Zustand, Rückweg ────────────────────────────────── */
.v3-page .einl-kopf { position: sticky; top: 0; z-index: 30; background: var(--v3-card);
  border-bottom: 1px solid var(--v3-line); padding: 12px 16px 11px;
  box-shadow: 0 6px 18px -14px rgba(22,35,58,.5); }
.v3-page .einl-kopfreihe { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v3-page .einl-zahl { font-size: 27px; font-weight: 800; letter-spacing: -.6px;
  color: var(--v3-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.v3-page .einl-zahl span { font-size: 15px; font-weight: 700; color: var(--v3-ink3); }
.v3-page h1.einl-titel { font-size: 13.5px; font-weight: 700; color: var(--v3-ink2);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; }
.v3-page .einl-stand { font-size: 12px; color: var(--v3-ink2); font-weight: 600;
  margin-top: 2px; }
.v3-page .einl-stand.zu { color: var(--v3-warn); font-weight: 700; }
.v3-page .einl-zurueck { margin-left: auto; }

/* ── Das Suchfeld: der einzige Handgriff des Abends ────────────────────── */
.v3-page .einl-suche { padding: 12px 16px 6px; }
.v3-page .einl-suche input { width: 100%; min-height: 56px; border-radius: 14px;
  border: 2px solid var(--v3-line); background: var(--v3-card); padding: 0 16px;
  font-size: 19px; font-weight: 650; color: var(--v3-ink); }
.v3-page .einl-suche input:focus { outline: none; border-color: var(--v3-brand);
  box-shadow: 0 0 0 4px rgba(30,86,200,.12); }
.v3-page .einl-suche input::placeholder { color: var(--v3-ink3); font-weight: 500; }

/* ── Die Trefferzeile: ein Tipp = eine Erfassung ───────────────────────── */
.v3-page .einl-liste { padding: 6px 12px 0; display: flex; flex-direction: column; gap: 8px; }
.v3-page .einl-zeile { display: grid; grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center; gap: 12px; width: 100%; min-height: 66px; text-align: left;
  padding: 9px 13px; border-radius: 14px; border: 1px solid var(--v3-line);
  background: var(--v3-card); color: var(--v3-ink); font: inherit; cursor: pointer; }
.v3-page a.einl-zeile { text-decoration: none; }
.v3-page .einl-zeile:active { transform: scale(.985); }
.v3-page .einl-zeile.on { background: #eefaf2; border-color: #b6e3c9; }
/* Optimistisch grün, aber noch nicht bestätigt — die Oberfläche behauptet nie
   etwas, das der Weg nicht getan hat (§ 9r). */
.v3-page .einl-zeile.wartet { background: #fffaf0; border-color: #f0dcb4; }
/* ⚠️ `min-width: 0` an der mittleren Spalte: ohne das schrumpft ein Grid-Kind
   nicht unter seine Inhaltsbreite, und die Ellipse am langen Namen greift nie
   (Browser-Durchlauf 390 px). */
.v3-page .einl-zeile > span { min-width: 0; }
.v3-page .einl-av { width: 46px; height: 46px; border-radius: 13px; display: grid;
  place-items: center; font-weight: 800; font-size: 15px; color: #fff;
  background: var(--v3-brand-deep); overflow: hidden; position: relative; }
.v3-page .einl-av img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
/* ⚠️ `display: block`: als Inline-Spans brachen Name und Zusatz nur ZUFÄLLIG
   um — passten beide in eine Zeile, liefen sie ineinander. Ein Layout, das von
   der Länge des Namens abhängt, ist kein Layout. */
.v3-page .einl-name { display: block; font-size: 16.5px; font-weight: 750;
  letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `--v3-ink2`, nicht `--v3-ink3`: Klasse und Ticket sind das Unterscheidungs-
   merkmal zwischen fünf Müllers, und diese Seite wird im Dämmerlicht bedient.
   #8b98ad auf Weiss sind ~2,6:1, #5b6b84 sind ~4,9:1 (WCAG AA). */
.v3-page .einl-meta { display: block; font-size: 12px; color: var(--v3-ink2);
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .einl-marke { font-size: 11.5px; font-weight: 800; padding: 5px 9px;
  border-radius: 999px; background: #eef2f8; color: var(--v3-ink2); white-space: nowrap; }
.v3-page .einl-marke.ok { background: #dcf3e6; color: var(--v3-ok); }
.v3-page .einl-marke.warn { background: #fdf3e2; color: var(--v3-warn); }

/* Die lokale Suche BLENDET, sie lädt nicht nach. Die Klasse `filtert` setzt
   der Stimulus-Controller beim Verbinden — ohne JavaScript bleiben alle Zeilen
   sichtbar und die Seite ist eine (lange) benutzbare Liste. Ein `hidden` im
   Markup hätte die Seite ohne JavaScript LEER gemacht. */
.v3-page .einl-liste.filtert > .einl-zeile { display: none; }
.v3-page .einl-liste.filtert > .einl-zeile.treffer { display: grid; }

/* ── Zustände unter dem Feld ───────────────────────────────────────────── */
.v3-page .einl-hinweis { padding: 18px 20px; text-align: center; color: var(--v3-ink2);
  font-size: 13.5px; font-weight: 600; }
.v3-page .einl-walk { margin: 6px 12px 0; padding: 13px 15px; border-radius: 14px;
  border: 1px dashed #c9d4e6; background: #f8fafd; }
/* Nur die ÜBERSCHRIFT ist ein Block — der `<b>` im Erklärsatz darunter gehört
   in den Fließtext (als Block riss er den Satz in drei Zeilen auseinander). */
.v3-page .einl-walk > b { display: block; font-size: 14px; color: var(--v3-ink); }
.v3-page .einl-walk .sub { font-size: 12px; color: var(--v3-ink2); font-weight: 600;
  margin-top: 2px; }

/* ── Die sichtbare Warteschlange (Offline-Toleranz, § 3.5) ─────────────── */
/* ⚠️ ZWEI ZUSTÄNDE, ZWEI FARBEN: bernstein = „noch nicht gespeichert",
   blau = eine AUSKUNFT („war schon erfasst"). Beide trugen zuerst dieselbe
   Warnfarbe und lasen sich wie derselbe Vorgang (§ 9r). Die Werte sind die
   BESTEHENDEN Callout-Töne aus § 3, kein zweiter Bernstein daneben. */
.v3-page .einl-band { margin: 8px 12px 0; padding: 11px 14px; border-radius: 13px;
  background: #fdf3e2; border: 1px solid #f0dcb4; color: var(--v3-warn);
  font-size: 13px; font-weight: 700; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; }
.v3-page .einl-band .sub { font-weight: 600; font-size: 12px; color: var(--v3-ink2);
  flex: 1 1 100%; }
.v3-page .einl-band.info { background: #e8effd; border-color: #bcd3f7; color: var(--v3-brand); }
.v3-page .einl-band.weg { display: none; }

/* ── Leiste „zuletzt erfasst" mit Rückgängig und Begleitung ────────────── */
.v3-page .einl-letzte { margin: 18px 12px 0; }
.v3-page .einl-letzte .kopf { font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v3-ink2); padding: 0 4px 7px; }
.v3-page .einl-lz { display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 10px; padding: 9px 13px; border-radius: 13px;
  background: var(--v3-card); border: 1px solid var(--v3-line); margin-bottom: 7px; }
.v3-page .einl-lz > span { min-width: 0; }
.v3-page .einl-lzakt { display: flex; align-items: center; gap: 6px; }
.v3-page .einl-knopf { min-width: 44px; min-height: 44px; border-radius: 12px;
  border: 1px solid var(--v3-line); background: var(--v3-card); color: var(--v3-ink2);
  font-size: 15px; font-weight: 800; cursor: pointer; padding: 0 11px; }
.v3-page .einl-knopf:active { background: #eef2f8; }
.v3-page .einl-knopf.zurueck { color: var(--v3-bad); border-color: #f0c9ce; }
.v3-page .einl-begl { font-size: 12.5px; font-weight: 800; color: var(--v3-ink2);
  min-width: 26px; text-align: center; font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* ── Der Fuß: Plan B sichtbar, Erklärung dahinter (§ 0 Nr. 3) ──────────── */
.v3-page .einl-fuss { margin: 22px 12px 0; padding: 14px 16px; border-radius: 14px;
  background: var(--v3-card); border: 1px solid var(--v3-line);
  font-size: 12.5px; color: var(--v3-ink2); line-height: 1.6; }
.v3-page .einl-fuss b { color: var(--v3-ink); }
.v3-page .einl-mehr > summary { cursor: pointer; font-weight: 700; color: var(--v3-brand);
  margin-top: 8px; padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.v3-page .einl-mehr p { margin: 0 0 10px; }
.v3-page .einl-fussakt { margin-top: 12px; }

/* Unter 420 px stapeln Name und Knöpfe der Leiste: 44+26+44+110 px Knöpfe
   lassen bei 390 px keine 110 px für einen Namen übrig, und ein Tap-Ziel zu
   verkleinern wäre die falsche Antwort. */
@media (max-width: 420px) {
  .v3-page .einl-zeile { grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; }
  .v3-page .einl-av { width: 40px; height: 40px; border-radius: 11px; }
  .v3-page .einl-name { font-size: 15.5px; }
  .v3-page .einl-zahl { font-size: 24px; }
  .v3-page .einl-lz { grid-template-columns: minmax(0, 1fr); row-gap: 9px; }
  .v3-page .einl-lzakt { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MONATSABSCHLUSS-BOARD (W2, #846)
   ───────────────────────────────────────────────────────────────────────
   Blaupause (§ 0): Master-Detail-Arbeitspult — „Close-Board wie Numeric"
   (Gates links, feste Arbeitsflaeche rechts), Triage-Verhalten wie Linear
   (was fehlt ist gross, Erledigtes ist da, aber zugeklappt).

   PRAEFIX `.mg-`: vor der Vergabe ueber `app/assets` UND `app/views` gegrept,
   0 Treffer (Lehre 17 — dreimal traf ein grep in dieser App nur einen
   Kommentar oder eine laengere Klasse und haette zwei Bauteile still
   zerlegt). Alles unter `.v3-page` gescoped, keine zweite Farbfamilie:
   Toene kommen aus den bestehenden `--ok/--warn/--bad/--ink*`-Variablen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Monats-Streifen: die Kette, die der Freeze ohnehin erzwingt ───────── */
.v3-page .mg-streifen { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 6px }
.v3-page .mg-mo { display:flex; flex-direction:column; gap:2px; padding:7px 12px; border:1px solid var(--line);
  border-radius:11px; background:var(--card); text-decoration:none; color:var(--ink2); font-size:12.5px; font-weight:700 }
.v3-page .mg-mo:hover { border-color:var(--brand); color:var(--brand) }
.v3-page .mg-mo.on { border-color:var(--brand); background:#eef4fe; color:var(--brand) }
.v3-page .mg-mo .st { font-size:10.5px; font-weight:650; color:var(--ink3); letter-spacing:.02em }
.v3-page .mg-mo.done .st { color:var(--ok) }

/* ── Fenster-Zeile: genau EINE Zeile, immer an derselben Stelle ────────── */
.v3-page .mg-fenster { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px;
  font-size:12.2px; font-weight:650; color:var(--ink2) }
.v3-page .mg-fenster b { color:var(--ink); font-weight:800 }

/* ── Das Pult ─────────────────────────────────────────────────────────── */
.v3-page .mg-board { display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); gap:14px; align-items:start }
@media (max-width:1180px) { .v3-page .mg-board { grid-template-columns:minmax(0,1fr) } }
.v3-page .mg-links { display:flex; flex-direction:column; gap:10px }

.v3-page .mg-lkopf { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); margin-bottom:2px }
.v3-page .mg-lkopf .z { margin-left:auto; font-size:12px; color:var(--ink2) }

/* ── Eine Gate-Karte ──────────────────────────────────────────────────── */
.v3-page .mg-gate { display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border:1px solid var(--line);
  border-left:4px solid var(--line); border-radius:12px; background:var(--card); text-decoration:none; color:inherit }
.v3-page .mg-gate:hover { border-color:var(--brand); box-shadow:var(--shadow) }
.v3-page .mg-gate.on { border-color:var(--brand); border-left-color:var(--brand); background:#f7faff }
.v3-page .mg-gate.t-sperre { border-left-color:var(--bad) }
.v3-page .mg-gate.t-warnung { border-left-color:var(--warn) }
.v3-page .mg-gate.t-unablesbar { border-left-color:var(--ink3) }
.v3-page .mg-gate.t-erledigt { border-left-color:var(--ok) }
.v3-page .mg-gzahl { font-size:23px; font-weight:820; line-height:1.05; color:var(--ink); flex:none; min-width:44px }
.v3-page .mg-gzahl .eh { display:block; font-size:10px; font-weight:700; color:var(--ink3);
  letter-spacing:.03em; margin-top:2px }
.v3-page .mg-gtext { min-width:0 }
.v3-page .mg-gtitel { display:block; font-size:13px; font-weight:750; color:var(--ink); line-height:1.35 }
.v3-page .mg-gmeta { display:block; margin-top:4px; font-size:11.5px; font-weight:650; color:var(--ink2) }
.v3-page .mg-gmeta .b { color:var(--ink); font-weight:800 }

/* ── Erledigt-Zeile im Aufklapper ─────────────────────────────────────── */
.v3-page .mg-ez { display:flex; gap:9px; align-items:center; padding:6px 2px; border-top:1px solid var(--line2);
  text-decoration:none; color:inherit; font-size:12.2px }
.v3-page .mg-ez:first-child { border-top:0 }
.v3-page .mg-ez:hover b { color:var(--brand) }
.v3-page .mg-ez .hk { color:var(--ok); font-weight:800; flex:none }
.v3-page .mg-ez b { font-weight:700; color:var(--ink) }
.v3-page .mg-ez small { display:block; font-size:11px; font-weight:600; color:var(--ink3) }
.v3-page .mg-ez .zz { margin-left:auto; font-size:10.5px; color:var(--ink3); font-weight:650; white-space:nowrap }

/* ── Die feste Arbeitsflaeche ─────────────────────────────────────────── */
.v3-page .mg-flaeche { border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  box-shadow:var(--shadow); overflow:hidden }
.v3-page .mg-flaeche:focus { outline:2px solid var(--brand); outline-offset:2px }
.v3-page .mg-fkopf { padding:14px 17px 12px; border-bottom:1px solid var(--line2) }
.v3-page .mg-fkopf .z1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.v3-page .mg-fkopf h2 { margin:0; font-size:16.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em }
.v3-page .mg-fkopf .sp { margin-left:auto; display:flex; gap:7px; align-items:center }
.v3-page .mg-regel { margin-top:8px; font-size:11.5px; font-weight:600; line-height:1.5; color:var(--ink2) }
.v3-page .mg-regel b { color:var(--ink2); font-weight:800 }
.v3-page .mg-fbody { padding:13px 17px }
.v3-page .mg-massen { margin-top:11px; padding:10px 12px; border:1px solid var(--line); border-radius:11px;
  background:#fbfcfe; font-size:12px; font-weight:600; line-height:1.55; color:var(--ink2) }
.v3-page .mg-massen b { color:var(--ink) }
.v3-page .mg-massen .sp { margin-top:8px; display:flex; gap:7px; flex-wrap:wrap; align-items:center }

/* ── Die Fusszeile: der Abschluss-Knopf, bei JEDEM Gate an derselben Stelle */
.v3-page .mg-fuss { padding:12px 17px; border-top:1px solid var(--line2); background:#f8fafd;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.v3-page .mg-fuss .gr { font-size:11.8px; font-weight:650; line-height:1.5; color:var(--ink2); min-width:0; flex:1 1 260px }
.v3-page .mg-fuss .gr b { color:var(--ink) }
.v3-page .mg-fuss .sp { margin-left:auto; display:flex; gap:7px; align-items:center; flex-wrap:wrap }
.v3-page .mg-fuss form { margin:0 }

/* ── Paket-Karte: ein Gegenstand, ein Knopf, eine Zeile Vorbehalt ──────── */
.v3-page .mg-paket .pk-liste { margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px }
.v3-page .mg-paket .pk-liste li { font-size:12.2px; font-weight:650; color:var(--ink2) }
.v3-page .mg-paket .pk-liste li b { color:var(--ink); font-weight:750 }
.v3-page .mg-paket.zu { opacity:.72 }

/* ── Vorschau „was wird eingefroren" ──────────────────────────────────── */
.v3-page .mg-frz { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
@media (max-width:900px) { .v3-page .mg-frz { grid-template-columns:minmax(0,1fr) } }
.v3-page .mg-frzsp { border:1px solid var(--line); border-radius:12px; background:#fbfcfe; padding:11px 13px }
.v3-page .mg-frzsp .fk { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:7px }
.v3-page .mg-frzsp .fz { display:flex; gap:10px; align-items:baseline; padding:5px 0; border-top:1px solid var(--line2);
  font-size:12.3px; font-weight:650; color:var(--ink2) }
.v3-page .mg-frzsp .fz:first-of-type { border-top:0 }
.v3-page .mg-frzsp .fz .v { margin-left:auto; color:var(--ink); font-weight:750; text-align:right }
/* ═══════════════════════════════════════════════════════════════════════════
   BEITRAGSJAHR — Arbeitsliste nach dem Muster Linear (Fin-W3, 27.08.2026)

   WAS: Die Bauteile der Seite /finanzen/beitraege in ihrer abgenommenen
        Gestalt — Deck `docs/mockups/2026-08-26-fin-gesamtdeck.html` Seite 3,
        Carstens Wahl **B „Linear"** (Einzel-Mockup
        `2026-08-26-fin-beitragsjahr-b-linear.html`).
   WARUM: Blaupause je SEITENTYP (Kodex 14 / § 0): eine Arbeitsliste braucht
        eine Zeile, die in einer Sekunde scannbar ist, und Gruppenköpfe, die
        die Reihenfolge der Arbeit tragen. Der `.v3-table`-Baukasten kann das
        nicht: er kennt keine Gruppenzeile und keine Zeile-als-Link.
   SCOPE: alles global unter `.v3-page` (§ 7 Nr. 2), Präfix `.bj-` — vor der
        Vergabe über `app/assets/stylesheets`, `app/views` und
        `app/javascript` gegrept, NULL Treffer (Lehre 17).
   TOKEN: nur `--v3-*` (§ 7 Nr. 3).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Die KPI-ZEILE: dieselbe Kachelreihe, kompakte Bauform ──────────────────
   Kein zweites KPI-Bauteil — `shared/_v3_kpi_row` rendert mit
   `variante: :zeile` dieselben Kacheln in einer Zeile und legt die Zählregel
   in den Tooltip. Klickziel und Zählregel bleiben Pflicht (der Partial wirft
   weiterhin). Grund: mit ausgeschriebener Zählregel begann die Arbeit dieser
   Seite unter der Falz (§ 0 Nr. 1, gemessene Schwester-Lehre § 9e-4). */
.v3-page .ab-kpis.kpiz {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 12px;
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow);
  overflow-x: auto; scrollbar-width: none;
}
.v3-page .ab-kpis.kpiz::-webkit-scrollbar { display: none; }
.v3-page .ab-kpis.kpiz > .ab-kpi {
  border: 0; border-right: 1px solid var(--v3-line); border-radius: 0;
  box-shadow: none; background: transparent; padding: 9px 17px;
  display: flex; flex-direction: column; justify-content: center;
  white-space: nowrap;
  /* ⚠️ NICHT schrumpfen: mit dem Flex-Standard (`shrink: 1`) schoben sich die
     fuenf Kacheln bei 390 px uebereinander und die Zahlen lagen buchstaeblich
     aufeinander (gemessen am Handy-Screenshot 27.08.2026). Der Streifen
     scrollt in sich (§ 8: die SEITE scrollt nie quer, ein Bauteil darf). */
  flex: 0 0 auto;
}
.v3-page .ab-kpis.kpiz > .ab-kpi:last-of-type { border-right: 0; }
.v3-page .ab-kpis.kpiz a.ab-kpi:hover { background: #f4f7ff; box-shadow: none; }
.v3-page .ab-kpis.kpiz .kl { font-size: 10.5px; letter-spacing: .06em; }
.v3-page .ab-kpis.kpiz .kv { font-size: 17px; margin-top: 1px; }
.v3-page .ab-kpis.kpiz .kn { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .ab-kpis.kpiz .kfen {
  margin-left: auto; display: flex; align-items: center; padding: 0 15px;
  font-size: 11px; color: var(--v3-ink3); font-weight: 700;
  border-left: 1px solid var(--v3-line); white-space: nowrap;
}

/* ── Das Raster: Arbeit links, Nachschlagewerk rechts ─────────────────────── */
.v3-page .bj-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 13px;
  align-items: start;
}

/* ── Die Liste ────────────────────────────────────────────────────────────
   Die Werkzeugzeile darin ist die GEMEINSAME `.v3-sammelbar` (B9) — die Liste
   bringt keine eigene Filterleiste mit (Reuse vor Neubau, § 9a). */
.v3-page .bj-liste {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow);
  overflow: hidden;
}
.v3-page .bj-kopf, .v3-page .bj-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 118px 96px 150px 132px;
  padding: 0 14px;
}
.v3-page .bj-kopf {
  background: #fafbfe; border-bottom: 1px solid var(--v3-line);
  font-size: 10.2px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .bj-kopf div { padding: 7px 6px; }
.v3-page .bj-kopf .r { text-align: right; }

/* Der Gruppenkopf trägt die Zahlen der GANZEN Kohorte — die Zeilen darunter
   sind nur die dieser Seite. Deshalb steht die Menge daneben. */
.v3-page .bj-gkopf {
  display: flex; align-items: center; gap: 9px; padding: 8px 20px;
  background: #f4f7fc; border-bottom: 1px solid var(--v3-line);
  border-top: 1px solid var(--v3-line);
  font-size: 11.8px; font-weight: 800; color: var(--v3-ink2);
}
.v3-page .bj-gkopf .anz { font-weight: 700; color: var(--v3-ink3); font-variant-numeric: tabular-nums; }
.v3-page .bj-gkopf .sp {
  margin-left: auto; display: flex; gap: 10px; align-items: center;
  font-variant-numeric: tabular-nums; font-weight: 750; color: var(--v3-ink2);
}
.v3-page .bj-gkopf.leer { color: var(--v3-ink3); background: #fbfcfe; }

.v3-page .bj-zeile {
  border-bottom: 1px solid var(--v3-line); align-items: center;
  font-size: 12.8px; text-decoration: none; color: inherit;
}
.v3-page .bj-zeile > div { padding: 9px 6px; min-width: 0; }
.v3-page .bj-zeile:hover { background: #f7faff; }
.v3-page .bj-zeile:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: -2px; }
.v3-page .bj-zeile .nm { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-page .bj-zeile .nm small { display: block; font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .bj-zeile .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.v3-page .bj-zeile .gr { color: var(--v3-ink2); font-weight: 650; }
.v3-page .bj-zeile .gr small { display: block; font-size: 10.3px; color: var(--v3-ink3); font-weight: 600; }
.v3-page .bj-zeile .akt {
  font-size: 11.5px; font-weight: 750; color: var(--v3-brand);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v3-page .bj-zeile .off { color: var(--v3-bad); }
.v3-page .bj-zeile .teil { color: var(--v3-warn); }

/* Der Stufen-Punkt. GRAU heisst „kein Kontakt protokolliert" — ausdrücklich
   nicht rot: „nichts protokolliert" ist kein Befund, sondern eine Lücke
   (Lehre 11). Rot bliebe der Zustellungs-Aussage vorbehalten, die diese Seite
   nicht trifft. */
.v3-page .bj-stufe { display: inline-flex; align-items: center; gap: 5px; font-size: 11.2px; font-weight: 750; color: var(--v3-ink2); }
.v3-page .bj-stufe i { width: 6px; height: 6px; border-radius: 50%; background: var(--v3-brand); display: inline-block; font-style: normal; }
.v3-page .bj-stufe.leer { color: var(--v3-ink3); }
.v3-page .bj-stufe.leer i { background: #c3ccda; }

.v3-page .bj-lfuss {
  padding: 10px 14px; border-top: 1px solid var(--v3-line); background: #fafbfe;
  font-size: 11.7px; color: var(--v3-ink3); display: flex; gap: 12px;
  flex-wrap: wrap; align-items: center;
}
.v3-page .bj-lfuss b { color: var(--v3-ink); font-variant-numeric: tabular-nums; }
.v3-page .bj-lfuss .sp { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ── Die rechte Spalte: Nachschlagewerk, keine Dauerfläche (§ 0 Nr. 2) ────── */
.v3-page .bj-rp {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow); overflow: hidden;
}
.v3-page .bj-rp + .bj-rp { margin-top: 11px; }
.v3-page .bj-rp > summary {
  list-style: none; cursor: pointer; padding: 10px 13px; display: flex;
  align-items: center; gap: 8px; font-size: 12.2px; font-weight: 750;
  color: var(--v3-ink2); min-height: 44px;
}
.v3-page .bj-rp > summary::-webkit-details-marker { display: none; }
.v3-page .bj-rp > summary:hover { background: #fafbfe; color: var(--v3-brand); }
.v3-page .bj-rp > summary .cx { color: var(--v3-ink3); font-size: 11px; display: inline-block; transition: transform .15s; }
.v3-page .bj-rp[open] > summary .cx { transform: rotate(90deg); }
.v3-page .bj-rp[open] > summary { background: #f7f9fc; border-bottom: 1px solid var(--v3-line); }
.v3-page .bj-rp > summary .pf { margin-left: auto; font-size: 11px; color: var(--v3-ink3); font-weight: 750; font-variant-numeric: tabular-nums; }
.v3-page .bj-rp .inh { padding: 11px 13px 13px; }

/* Die Kohorten-Zeile ist bewusst KEIN Link: die Liste links ist bereits nach
   genau diesen Bändern gruppiert, und einen Sprunganker zu versprechen, den
   die Blätterung nicht einlösen kann, wäre ein totes Klickziel. Ein eigener
   Kohorten-Filter ist ein Folgepunkt, kein halbes Versprechen. */
.v3-page .bj-koh { display: block; color: inherit; padding: 6px 0; border-bottom: 1px solid var(--v3-line); }
.v3-page .bj-koh:last-of-type { border-bottom: 0; }
.v3-page .bj-koh .z1 { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 750; align-items: baseline; }
/* Kein Quoten-Balken: seine Breite waere ein `style=""` im Markup, und die
   Beitrags-Seite verbietet das ausnahmslos (Charta Q8). Die Quote steht als
   farbige `.ab-badge` — dasselbe Bauteil wie im Gruppenkopf der Liste. */
.v3-page .bj-koh .z2 { font-size: 10.4px; color: var(--v3-ink3); font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }

.v3-page .bj-sz { display: flex; justify-content: space-between; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--v3-line); font-size: 11.7px; align-items: baseline; }
.v3-page .bj-sz:last-of-type { border-bottom: 0; }
.v3-page .bj-sz .k { color: var(--v3-ink3); font-weight: 650; }
.v3-page .bj-sz .k.davon { padding-left: 12px; }
.v3-page .bj-sz .v { font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.v3-page .bj-sz.summe { border-top: 2px solid var(--v3-line); border-bottom: 0; padding-top: 8px; }
.v3-page .bj-mini { font-size: 10.5px; color: var(--v3-ink3); font-weight: 650; margin-top: 9px; line-height: 1.55; }

/* Ab 1240 px hat die rechte Spalte keinen Platz mehr neben einer Liste mit
   sechs Spalten — sie rutscht darunter (dieselbe Bruchkante wie `.ev-zwei`
   der Event-Akte, § 9e-4). */
@media (max-width: 1240px) {
  .v3-page .bj-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Am Handy wird aus dem Streifen ein Raster: fuenf Zahlen nebeneinander sind
   dort entweder unlesbar klein oder versteckt hinter einem Querscroll, den
   niemand sucht. Zwei Spalten zeigen alle fuenf ohne Wischen. */
@media (max-width: 720px) {
  .v3-page .ab-kpis.kpiz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .v3-page .ab-kpis.kpiz > .ab-kpi { border-bottom: 1px solid var(--v3-line); white-space: normal; padding: 10px 14px; }
  .v3-page .ab-kpis.kpiz > .ab-kpi:nth-child(2n) { border-right: 0; }
  .v3-page .ab-kpis.kpiz .kfen { grid-column: 1 / -1; margin-left: 0; border-left: 0; padding: 8px 14px; }
}
/* Am Handy trägt die Zeile Person, offen und den nächsten Schritt; Klasse,
   Tarif und letzter Kontakt sind Kontext und entfallen. Ein waagerechtes
   Scrollen der SEITE wäre der Funktionsverlust, den § 8 verbietet.
   ⚠️ Der nächste Schritt bekommt eine EIGENE Zeile statt einer dritten
   Spalte: bei 390 px blieben dem Namen sonst gemessene 94 px — er wurde
   abgeschnitten, und abgeschnitten heisst hier unlesbar, nicht knapp. */
@media (max-width: 720px) {
  .v3-page .bj-kopf, .v3-page .bj-zeile { grid-template-columns: minmax(0, 1fr) 96px; }
  .v3-page .bj-kopf .weg, .v3-page .bj-zeile .weg { display: none; }
  .v3-page .bj-kopf .akt { display: none; }
  .v3-page .bj-zeile .akt { grid-column: 1 / -1; padding-top: 0; }
  .v3-page .bj-gkopf { flex-wrap: wrap; padding: 8px 14px; }
  .v3-page .bj-gkopf .sp { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAGESKARTE — der Kopf des Jahresabschlusses (Fin-W4, Board #853, 27.08.2026)

   Mockup: docs/mockups/2026-08-26-fin-gesamtdeck.html, Abschnitt Tages-JA,
   abgenommene Fassung C „Tageskarte" (Einzel-Mockup
   docs/mockups/2026-08-26-fin-tagesja-c-tageskarte.html).

   Blaupause (§ 0): Objekt-Akte wie eine Stripe-Detailseite — das Objekt ist das
   GESCHÄFTSJAHR. Erst der Satz, der die Frage beantwortet, dann SOLL → IST →
   Diskrepanz, dann das Band „was den Stand noch trübt". Vorher standen dort vier
   KPI-Kacheln, zwei Erklär-Kästen und ein Kettenband — die Arbeit begann unter
   der Falz.

   BEWUSST NUR ZWEI NEUE BAUTEILE: die Triade ist `shared/_v3_kpi_row`
   (CLAUDE.md „Conventions": die KPI-Reihe wird nie handgebaut). Hier stehen
   deshalb nur der Antwort-Satz und das Band. Präfix `.tja-` vor der Vergabe
   gegrept (Lehre 17): `.tk-` war belegt (`.tk-kopf`/`.tk-konto`), `.ja-` und
   `.tja-` waren frei.
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-page .tja-satz { margin-bottom: 11px; }
.v3-page .tja-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.v3-page .tja-kopf .t { font-size: 11.4px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v3-ink3); }
.v3-page .tja-kopf .sp { margin-left: auto; font-size: 11.4px; color: var(--v3-ink3); font-weight: 700; }
.v3-page .tja-antwort { margin: 0; font-size: 17.5px; line-height: 1.5; font-weight: 600;
  color: var(--v3-ink2); max-width: 104ch; }
.v3-page .tja-antwort b { color: var(--v3-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.v3-page .tja-antwort .off { color: var(--v3-warn); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Das Band: die ZWEITE Frage, sauber von der Diskrepanz getrennt — die eine
   Zahl sagt, WIE das Jahr steht, das Band sagt, wie BELASTBAR sie ist. */
.v3-page .tja-bel { margin-top: 11px; border: 1px solid #f0dfc0; background: #fdfaf3;
  border-radius: var(--v3-r); padding: 11px 15px 13px; }
.v3-page .tja-bel.ruhig { border-color: #c4ead6; background: #f2fbf6; }
.v3-page .tja-bel .bt { font-size: 11.4px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #a15c00; display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; flex-wrap: wrap; }
.v3-page .tja-bel.ruhig .bt { color: var(--v3-ok); }
.v3-page .tja-bel .bt .re { margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: 11.4px; color: #8a6220; }
.v3-page .tja-bel .reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 9px; }
.v3-page .tja-bel a.bp { display: flex; align-items: center; gap: 10px; background: var(--v3-card);
  border: 1px solid #f0dfc0; border-radius: var(--v3-r-sm); padding: 9px 12px;
  text-decoration: none; color: inherit; min-height: 44px; }
.v3-page .tja-bel a.bp:hover { border-color: #e0b978; background: #fffdf8; }
.v3-page .tja-bel a.bp:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 2px; }
.v3-page .tja-bel a.bp .pk { width: 8px; height: 8px; border-radius: 50%; background: var(--v3-warn); flex: none; }
.v3-page .tja-bel a.bp .tx { min-width: 0; flex: 1; }
.v3-page .tja-bel a.bp .tx b { display: block; font-size: 12.8px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.v3-page .tja-bel a.bp .tx small { display: block; font-size: 11.2px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .tja-bel a.bp .go { font-size: 11.4px; font-weight: 800; color: var(--v3-brand); white-space: nowrap; }
.v3-page .tja-bel .schluss { margin-top: 9px; font-size: 11.8px; color: #7a5416;
  font-weight: 650; line-height: 1.55; }
.v3-page .tja-bel .schluss b { color: #5f3f0c; }
.v3-page .tja-bel.ruhig .schluss { color: #2c6446; }
.v3-page .tja-bel.ruhig .schluss b { color: #12794a; }

@media (max-width: 640px) {
  .v3-page .tja-antwort { font-size: 16px; }
  .v3-page .tja-kopf .sp { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN-W6/W7 — DIE ZWEITE EBENE DER BEREICHS-LEISTE + DAS COCKPIT
   Spec:   docs/superpowers/specs/2026-08-26-fin-w2-monatsabschluss-bauspec.md (A9)
   Deck:   docs/mockups/2026-08-26-fin-gesamtdeck.html Seite 0
   Zielbild Cockpit: docs/mockups/2026-08-27-fin-cockpit-zielbild.html
   Register: Finanzen::Bereichsreiter

   Zwei kleine Bausteine, sonst nichts — alles Übrige des neuen Cockpits steht
   auf dem Bestand (`shared/_v3_page_head`, `shared/_v3_kpi_row`, `.v3-card`,
   `.v3-cardhead`, `.v3-chips`, `.tja-satz`). Präfixe `.fin-ebenen` und `.ck-`
   wurden vor der Vergabe gegen die ganzen Stylesheets gegrept (Lehre 17): 0
   Treffer, auch kein Kommentar-Treffer.
   Append-only, nur --v3-*-Token.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Die Ebenen einer Familie: zweite Zeile INNERHALB der klebenden Leiste ──
   `.v3-seg` ist auf `.v3-page` gescoped und wäre hier — ausserhalb des
   Seiten-Wrappers — unstyled. Dieselbe Bildsprache, eigener Ort. */
.s3-navwrap.fin-subnav .fin-ebenen {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  margin: 6px 0 0; padding: 3px; border-radius: 11px;
  background: #f1f4f8; width: fit-content; max-width: 100%;
}
.s3-navwrap.fin-subnav .fin-ebenen a {
  padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 700;
  color: var(--v3-ink2); text-decoration: none; white-space: nowrap;
}
.s3-navwrap.fin-subnav .fin-ebenen a:hover { color: var(--v3-brand); }
.s3-navwrap.fin-subnav .fin-ebenen a.on {
  background: var(--v3-card); color: var(--v3-brand);
  box-shadow: 0 1px 2px rgba(22, 35, 58, .10);
}
.s3-navwrap.fin-subnav .fin-ebenen a:focus-visible {
  outline: 2px solid var(--v3-brand); outline-offset: 2px;
}
@media (max-width: 760px), (pointer: coarse) {
  .s3-navwrap.fin-subnav .fin-ebenen a { min-height: 36px; display: flex; align-items: center; }
}

/* ── Cockpit: DIE eine Arbeitsfrage ────────────────────────────────────────
   Der einzige Block der Seite, der nicht aus einem geteilten Bauteil kommt —
   und er ist nur eine Betonung: Kante links, grosse Zahl. Carstens Diktat
   „Cockpit viel zu überladen" heisst nicht „weniger Kacheln", sondern „EINE
   Frage sichtbar grösser als alles andere". */
.v3-page .ck-arbeit { border-left: 4px solid var(--v3-brand); }
.v3-page .ck-arbeit .v3-cardhead h2 { font-size: 26px; letter-spacing: -.6px; line-height: 1.15; }
.v3-page .ck-arbeit .v3-cardhead h2 .n { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .v3-page .ck-arbeit .v3-cardhead h2 { font-size: 21px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MINI-CHAT (`.mchat-*`) — das gemeinsame DIALOG-Bauteil, 27.08.2026
   View: `app/views/shared/_mini_chat.html.erb` · Daten:
   `Kommunikation::Chatfaden` · Detail: design-reference § 9am

   Carstens Entscheid zur Verlaufs-Darstellung (Variante C, Mockup
   `docs/mockups/2026-08-27-verlauf-c-hybrid.html`): wo ein Kanal ein DIALOG
   ist, wird er als Chat gezeichnet — eingehend links, unsere Nachrichten
   rechts, Zeitstempel an jeder Blase. Erster Traeger ist der Verlauf der
   Ticket-Akte, zweiter der personenweite Verlauf im Profil (Verlauf-W1);
   deshalb steht der Block hier GLOBAL am Dateiende und nicht in der
   `.tka-*`-Insel der Ticket-Akte (§ 7 Nr. 2 + Nr. 4).

   ⚠️ Praefix `mchat-` vor der Vergabe gegrept UND die Treffer gelesen
   (Lehre 17): `mc-` war belegt (`.v3-mcard .mc-head/.mc-tags/.mc-fee`,
   `.dm-dubl .mc-mail/.mc-name`), bare `.mc` ebenfalls (`.kt-tmem`,
   `.pf-ver .tmonth`). `mchat` hatte NULL Treffer.
   ════════════════════════════════════════════════════════════════════════════ */
.v3-page .mchat { display: flex; flex-direction: column; gap: 7px; max-width: 720px; }
.v3-page .mchat-b {
  max-width: 82%; align-self: flex-start; background: #fff; border: 1px solid var(--v3-line);
  border-radius: 13px; border-bottom-left-radius: 4px; padding: 8px 12px; font-size: 12.5px;
  color: var(--v3-ink2); line-height: 1.6;
}
/* Unsere Blase traegt den ETABLIERTEN „aktiv"-Ton des Baukastens
   (`.v3-btn.on`, `.v3-chip.on`) — ein eigener Blauton eine Nuance daneben
   liest sich als Druckfehler, nicht als eigener Zustand (§ 7 Nr. 3). */
.v3-page .mchat-b.mchat-wir {
  align-self: flex-end; background: #e8effd; border-color: #bcd3f7; color: #1c3d78;
  border-bottom-left-radius: 13px; border-bottom-right-radius: 4px;
}
.v3-page .mchat-wer {
  display: flex; gap: 9px; align-items: baseline; font-size: 10.3px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--v3-ink3); margin-bottom: 3px;
}
/* Kontrast: bei 10,3 px reicht ein heller Blauton nicht (gemessen 3,5:1 auf
   dem Blasen-Grund). Der Marken-Ton liegt bei ~5,6:1. */
.v3-page .mchat-b.mchat-wir .mchat-wer { color: var(--v3-brand); }
.v3-page .mchat-wer time {
  margin-left: auto; font-variant-numeric: tabular-nums; text-transform: none;
  letter-spacing: 0; font-weight: 700; white-space: nowrap;
}
.v3-page .mchat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.v3-page .mchat-vorlage {
  font-size: 10.8px; font-weight: 700; color: var(--v3-ink3); margin-bottom: 3px;
}
.v3-page .mchat-fehlt { font-size: 11.8px; color: var(--v3-ink3); font-style: italic; }
.v3-page .mchat-sys {
  align-self: center; font-size: 10.7px; color: var(--v3-ink3); font-weight: 650;
}
.v3-page .mchat-leer { font-size: 12px; color: var(--v3-ink3); }
/* ⚠️ `max-width` ist Pflicht, nicht Kosmetik: ein Querformat-Foto (WhatsApp
   liefert regelmaessig 1600 px breit) waere sonst auf 260 px Hoehe skaliert
   BREITER als die Blase — und die einspaltige Akte wuerde waagerecht
   scrollen (§ 8). */
.v3-page .mchat-bild img {
  border-radius: 10px; max-height: 260px; max-width: 100%; height: auto;
  width: auto; margin-bottom: 6px;
}
.v3-page .mchat-datei {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 6px; padding: 6px 10px;
  border: 1px solid var(--v3-line); border-radius: 9px; background: #fff; text-decoration: none;
  color: var(--v3-ink2); font-size: 11.8px; max-width: 100%;
}
.v3-page .mchat-datei b {
  display: block; font-weight: 700; overflow-wrap: anywhere;
}
.v3-page .mchat-datei small { color: var(--v3-ink3); font-size: 10.5px; }
/* Am Finger ist eine Datei-Zeile ein Ziel, kein Text (§ 8: 44 px). */
@media (max-width: 640px), (pointer: coarse) {
  .v3-page .mchat-b { max-width: 92%; }
  .v3-page .mchat-datei { min-height: 44px; padding: 8px 12px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   MINI-CHAT · FEINSCHLIFF 28.08.2026 (Carsten zu /tickets/1568)
   Detail: design-reference § 9am-2. Alles hier ist Darstellung — WAS gezeigt
   wird, entscheidet `Kommunikation::Chatfaden`.
   ──────────────────────────────────────────────────────────────────────────── */

/* Lesbarkeit: 12,5 px waren an einer Chat-Blase zu klein, und der Eingehend-Ton
   `--v3-ink2` auf Weiss lag unter 7:1. Blasentext 13,5 px, eingehender Text auf
   `--v3-ink` (gemessen ≥ 12:1 auf #fff) — unsere Blase behaelt ihren Marken-Ton
   (#1c3d78 auf #e8effd = 8,4:1). */
.v3-page .mchat-b { font-size: 13.5px; color: var(--v3-ink); }
.v3-page .mchat-b.mchat-wir { color: #1c3d78; }

/* Der TAGESTRENNER ersetzt das Datum an jeder Blase. Eine Linie mit einem Wort
   darin — er ordnet, ohne selbst gelesen werden zu wollen. */
.v3-page .mchat-tag {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 2px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .mchat-tag::before,
.v3-page .mchat-tag::after { content: ""; flex: 1; height: 1px; background: var(--v3-line); }

/* „2×" — die Faltung doppelter Blasen wird BENANNT, nie still gemacht. */
.v3-page .mchat-mal {
  font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: var(--v3-ink3); border: 1px solid var(--v3-line); border-radius: 999px;
  padding: 0 5px; line-height: 1.5; cursor: help;
}

/* Eine gekappte Riesenblase. Der Anriss steht offen da, der Rest ist einen
   Klick entfernt — und der volle Text bleibt im DOM (Suchen/Drucken). */
.v3-page .mchat-lang > summary { list-style: none; cursor: pointer; }
.v3-page .mchat-lang > summary::-webkit-details-marker { display: none; }
.v3-page .mchat-mehr {
  display: inline-block; margin-top: 2px; font-size: 11px; font-weight: 700;
  color: var(--v3-brand);
}
.v3-page .mchat-lang[open] > summary { display: none; }

/* Die Knoepfe einer Vorlage sind Chips, kein Fliesstext. */
.v3-page .mchat-knoepfe { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.v3-page .mchat-knopf {
  font-size: 10.8px; font-weight: 700; color: var(--v3-ink3);
  border: 1px dashed var(--v3-line); border-radius: 999px; padding: 2px 9px;
}

/* Ein Button-TIPP des Mitglieds ist eine Aussage von einem Wort. */
.v3-page .mchat-b.mchat-knapp { max-width: 62%; font-size: 12.5px; padding: 5px 11px; }

/* Die Tuer ins Cockpit steht am FUSS des Gespraechs — dort wird sie gesucht. */
.v3-page .tka-watuer {
  display: inline-block; margin-top: 8px; font-size: 11.8px; font-weight: 700;
  color: var(--v3-brand); text-decoration: none;
}
.v3-page .tka-watuer:hover { text-decoration: underline; }

/* Eine wortgleiche Wiederholung — sie steht an ihrem Platz, aber sie breitet
   denselben Absatz nicht ein zweites Mal aus (§ 9am-2). */
.v3-page .mchat-b.mchat-wdh {
  font-size: 11.5px; font-style: italic; color: var(--v3-ink3);
  background: transparent; border-style: dashed;
}
.v3-page .mchat-b.mchat-wdh.mchat-wir { background: transparent; color: var(--v3-ink3); }

/* ══════════════════════════════════════════════════════════════════════════
   E9 · DIE EINE ZUORDNUNGS-EINHEIT (`finanzen/shared/_zuordnung`)
   Entscheid E9 (Carsten 28.08.2026): EIN Muster fuer alle Zuordnungs-Flows
   des Finanzbereichs — Ding · Vorschlaege mit Begruendung · ein Klick · Spur.
   Praefix `.ze-` vor der Vergabe gegrept (Lehre 17): frei; `.zu-` war durch
   das Datenmanagement belegt, deshalb NICHT dieses.
   ══════════════════════════════════════════════════════════════════════════ */
.v3-page .ze {
  border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  background: #fff; overflow: hidden;
}
.v3-page .ze-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 13px; background: #f7faff; border-bottom: 1px solid var(--v3-line);
  font-size: 12.8px; font-weight: 750; color: var(--v3-ink);
}
.v3-page .ze-ort { margin-left: auto; font-size: 11px; color: var(--v3-ink3); font-weight: 600; }

/* ① Das Ding — Betrag links, eine Zeile rechts. Nie eine Feldliste. */
.v3-page .ze-ding {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: baseline; padding: 11px 13px; border-bottom: 1px solid var(--v3-line);
}
.v3-page .ze-betrag { font-size: 16.5px; font-weight: 800; color: var(--v3-ink); white-space: nowrap; }
.v3-page .ze-tx { font-size: 12.5px; color: var(--v3-ink2); min-width: 0; }
.v3-page .ze-tx small { display: block; font-size: 11.3px; color: var(--v3-ink3); margin-top: 2px; }

/* ② Die Vorschlaege */
.v3-page .ze-vsk {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px 3px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .ze-v {
  display: grid; grid-template-columns: 62px minmax(0, 190px) minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 9px 13px;
  border-top: 1px solid var(--v3-line);
}
.v3-page .ze-v.pri { background: #f6fbf7; }
.v3-page .ze-pz {
  justify-self: start; font-size: 10.5px; font-weight: 800; border-radius: 999px;
  padding: 2px 8px; border: 1px solid var(--v3-line); color: var(--v3-ink3); background: #fff;
}
.v3-page .ze-pz.hoch { color: #178a50; border-color: #b7e2c9; background: #eefaf2; }
.v3-page .ze-pz.mittel { color: #b06a06; border-color: #f0d9ae; background: #fdf6e8; }
.v3-page .ze-pz.schwach { color: var(--v3-ink3); }
.v3-page .ze-id { min-width: 0; }
.v3-page .ze-id b { display: block; font-size: 13px; font-weight: 750; color: var(--v3-ink); }
.v3-page .ze-id small { display: block; font-size: 11.2px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .ze-gr { font-size: 12px; color: var(--v3-ink2); min-width: 0; }
.v3-page .ze-gr small { display: block; font-size: 11.2px; color: var(--v3-ink3); margin-top: 2px; }
.v3-page .ze-kn { justify-self: end; }

/* Kein Vorschlag ist ein ZUSTAND mit Satz, nie ein leerer Kasten (Lehre 11). */
.v3-page .ze-leer {
  padding: 11px 13px; font-size: 12.3px; color: var(--v3-ink3);
  border-top: 1px solid var(--v3-line);
}

/* Der Platz des Traegers: Suchfeld, Topf-Feld — was die Flaeche zusaetzlich
   braucht, steht INNERHALB der Einheit statt daneben. */
.v3-page .ze-feld { padding: 11px 13px; border-top: 1px solid var(--v3-line); }

/* ④ Die Spur — sie benennt den Schreibweg, sie ist keine Aktion. */
.v3-page .ze-spur {
  padding: 8px 13px; background: #fafbfd; border-top: 1px solid var(--v3-line);
  font-size: 11.4px; color: var(--v3-ink3); line-height: 1.55;
}
.v3-page .ze-spur b { color: var(--v3-ink2); font-weight: 750; }

@media (max-width: 780px) {
  .v3-page .ze-v { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .v3-page .ze-kn { justify-self: start; }
}
.v3-page .ze-vorbelegt {
  font-size: 11px; font-weight: 750; color: var(--v3-ink3);
  border: 1px dashed var(--v3-line); border-radius: 999px; padding: 3px 9px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   E12 · FORDERUNGEN ALS ARBEITSLISTE (Blaupause Linear)
   Praefix `.fo-` ist der bestehende Namensraum der Forderungs-Flaeche; die
   vier neuen Namen (`tools`, `such`, `toolszahl`, `cb`, `mass`, `liste`)
   waren vor der Vergabe frei (Lehre 17, gegrept 28.08.2026).
   ══════════════════════════════════════════════════════════════════════════ */
.v3-page .fo-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 15px; border-bottom: 1px solid var(--v3-line); background: #fafbfd;
}
.v3-page .fo-such { display: flex; align-items: center; gap: 7px; flex: 1 1 320px; min-width: 0; }
.v3-page .fo-such input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 11px;
  border: 1px solid var(--v3-line); border-radius: 9px; font-size: 12.8px; background: #fff;
}
.v3-page .fo-such input[type="search"]:focus-visible { outline: 2px solid var(--v3-brand); outline-offset: 1px; }
.v3-page .fo-toolszahl {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.3px; color: var(--v3-ink3);
}
.v3-page .fo-toolszahl b { color: var(--v3-ink); font-weight: 800; }

/* Die Auswahl-Spalte bleibt schmal — sie ist ein Griff, keine Information. */
.v3-page .fo-liste th.fo-cb, .v3-page .fo-liste td.fo-cb { width: 30px; padding-right: 0; }
.v3-page .fo-liste td.fo-cb input { accent-color: var(--v3-brand); width: 14px; height: 14px; margin: 0; }

/* Die Massenleiste erscheint erst mit einer Auswahl. Sie schreibt NICHTS
   selbst: ihr einziger Knopf geht in die bestehende Bruecke
   `segments#from_selection` (Segment + Kampagnen-ENTWURF, 0 Versand). */
.v3-page .fo-mass {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 15px; border-top: 1px solid var(--v3-line); background: #f4f8ff;
  font-size: 12.5px; color: var(--v3-ink2);
}
.v3-page .fo-mass b.num { font-size: 14px; font-weight: 800; color: var(--v3-ink); }
.v3-page .fo-massgate { margin-left: auto; font-size: 11.4px; color: var(--v3-ink3); }
/* ⚠️ `.v3-page .fo-mass` ist eine AUTOR-Regel und schlaegt Tailwinds `.hidden`
   (Spezifitaet 0-2-0 gegen 0-1-0) — dieselbe Falle, die schon das Suchfeld des
   Topf-Pickers ohne JavaScript sichtbar stehen liess. Ohne diese Zeile stuende
   die Massenleiste dauerhaft da und meldete „0 ausgewaehlt". */
.v3-page .fo-mass.hidden { display: none; }
.v3-page .fo-massgate b { color: var(--v3-ink2); font-weight: 750; }

@media (max-width: 780px) {
  .v3-page .fo-toolszahl { margin-left: 0; }
  .v3-page .fo-massgate { margin-left: 0; width: 100%; }
}

/* E8 · Lieferstand des Steuerbueros — ein SATZ je Jahr, nie eine Null.
   Ein Jahr ohne Lieferung steht grau (grau schlaegt gruen, Lehre 11). */
.v3-page .fo-lieferungen { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.v3-page .fo-lieferungen li {
  display: flex; align-items: baseline; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--v3-line); font-size: 12.5px;
}
.v3-page .fo-lieferungen li:last-child { border-bottom: 0; }
.v3-page .fo-lieferungen li span { color: var(--v3-ink3); font-weight: 700; min-width: 46px; }
.v3-page .fo-lieferungen li b { font-weight: 700; color: var(--v3-ink2); }
.v3-page .fo-lieferungen li.leer b { color: var(--v3-ink3); font-weight: 600; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   MITGLIEDSCHAFT & GELD BEARBEITEN — .mgb-* (Profil-Voll-Bearbeitung, 02.09.2026)

   Blaupause: Objekt-Akte wie Stripe-Detailseite. Kopf mit Lage, darunter je
   Vorgang GENAU EINE Karte, die aufklappt.

   ⚠️ Praefix vor der Vergabe gegrept (Lehre 17): `.mg-` war bereits vergeben
   (Monatsabschluss-Board, `finanzen/abschluss/_board`), `.mgb-` war frei.
   Formularfelder kommen aus den globalen Bausteinen .v3-field/.v3-fieldgrid —
   hier stehen nur Abstaende und die Vorschau-Tabelle, damit im Markup kein
   style="" noetig ist.
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-page.mgb-page .mgb-lage {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow);
  padding: 13px 18px; margin-bottom: 16px;
}
/* Das ZAHLENPAAR aus Carsten-Entscheid F4 (02.09.2026): zwei gleichrangige
   Fragen nebeneinander — kein „davon", keine Steigerung. Es steht bewusst
   ABGESETZT unter der Lage, damit es nicht als vierte Lage-Zahl gelesen wird. */
.v3-page.mgb-page .mgb-zahlpaar { align-items: flex-start; border-style: dashed; box-shadow: none; }
/* Die drei Lage-Zahlen rendert seit Welle W0b (02.09.2026) `shared/_zahl`
   (Bauform :kennzahl, .zhl-kz) — mit Pflicht-Zaehlregel und Pflicht-Tuer.
   Die frueheren .mgb-lz-Regeln sind damit ersatzlos entfallen; ein zweites
   Kennzahl-CSS neben dem Bauteil waeren zwei Meinungen ueber dieselbe
   Darstellung (Lehre 8). */
.v3-page.mgb-page .mgb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.v3-page.mgb-page .mgb-chip {
  font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 3px 10px;
  background: var(--v3-line2); color: var(--v3-ink2); white-space: nowrap;
}
.v3-page.mgb-page .mgb-chip.warn { background: #fdf3e2; color: #8a5a10; }
.v3-page.mgb-page .mgb-chip.bad { background: #fdeaec; color: #a02334; }

/* Die Vorschau steht UEBER den Karten und ist immer offen (Lehre 15). */
.v3-page.mgb-page .mgb-vs {
  background: var(--v3-card); border: 1px solid #bcd3f7; border-left: 4px solid var(--v3-brand);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow);
  padding: 16px 18px; margin-bottom: 16px; outline: none;
}
.v3-page.mgb-page .mgb-vskopf h2 { margin: 0; font-size: 15px; font-weight: 750; }
.v3-page.mgb-page .mgb-vskopf p { margin: 3px 0 12px; font-size: 12.5px; color: var(--v3-ink3); }
.v3-page.mgb-page .mgb-vstab { width: 100%; border-collapse: collapse; font-size: 13px; }
.v3-page.mgb-page .mgb-vstab th {
  font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; text-align: left;
  font-weight: 700; color: var(--v3-ink3); padding: 7px 10px; border-bottom: 1px solid var(--v3-line);
}
.v3-page.mgb-page .mgb-vstab td { padding: 9px 10px; border-bottom: 1px solid var(--v3-line2); vertical-align: top; }
.v3-page.mgb-page .mgb-vstab tr:last-child td { border-bottom: 0; }
.v3-page.mgb-page .mgb-vstab td.f { font-weight: 650; color: var(--v3-ink2); white-space: nowrap; }
.v3-page.mgb-page .mgb-alt { color: var(--v3-ink3); text-decoration: line-through; }
.v3-page.mgb-page .mgb-vswrap { max-width: 100%; }
/* Unveraenderte Zeile: gedaempft, aber NICHT durchgestrichen — eine Angabe,
   die bleibt, ist keine Loeschung (UX-Durchlauf 10.09.2026). */
.v3-page.mgb-page .mgb-gleich { color: var(--v3-ink3); }
/* Unter 560 px stapeln: auf einem 330-px-Container ist eine dreispaltige
   Tabelle nicht lesbar, und der Scroll allein verschiebt die Arbeit nach
   rechts. Beides zusammen — Scrollrahmen (s. `.v3-cardclip`) und gestapelte
   Zeilen — macht die Vorschau auf dem Handy zur Arbeitsflaeche. */
@media (max-width: 560px) {
  .v3-page.mgb-page .mgb-vstab thead { display: none; }
  .v3-page.mgb-page .mgb-vstab, .v3-page.mgb-page .mgb-vstab tbody,
  .v3-page.mgb-page .mgb-vstab tr, .v3-page.mgb-page .mgb-vstab td { display: block; width: 100%; }
  .v3-page.mgb-page .mgb-vstab tr { padding: 8px 0; border-bottom: 1px solid var(--v3-line2); }
  .v3-page.mgb-page .mgb-vstab tr:last-child { border-bottom: 0; }
  .v3-page.mgb-page .mgb-vstab td { border-bottom: 0; padding: 2px 0; white-space: normal; }
  .v3-page.mgb-page .mgb-vstab td.f { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
  .v3-page.mgb-page .mgb-alt::before,
  .v3-page.mgb-page .mgb-gleich::before { content: "bisher: "; text-decoration: none; display: inline-block; }
  .v3-page.mgb-page .mgb-neu::before { content: "danach: "; font-weight: 500; color: var(--v3-ink3); }
}
.v3-page.mgb-page .mgb-neu { color: var(--v3-ink); font-weight: 700; }
.v3-page.mgb-page .mgb-vsform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.v3-page.mgb-page .mgb-vsform input[type="submit"] { font-family: inherit; }
.v3-page.mgb-page .mgb-fehler { outline: none; }

/* Die Karten: ein Zustand sichtbar, der Rest klappt auf (Paragraph 0 Nr. 2). */
.v3-page.mgb-page .mgb-karten { display: flex; flex-direction: column; gap: 10px; }
.v3-page.mgb-page .mgb-karte {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow); overflow: hidden;
}
.v3-page.mgb-page .mgb-karte > summary {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px;
  cursor: pointer; list-style: none;
}
.v3-page.mgb-page .mgb-karte > summary::-webkit-details-marker { display: none; }
.v3-page.mgb-page .mgb-karte > summary:hover { background: #fafbfe; }
.v3-page.mgb-page .mgb-karte > summary .t { font-size: 14.5px; font-weight: 750; }
.v3-page.mgb-page .mgb-karte > summary .s { font-size: 12.5px; color: var(--v3-ink3); }
.v3-page.mgb-page .mgb-karte[open] > summary { border-bottom: 1px solid var(--v3-line2); }
.v3-page.mgb-page .mgb-body { padding: 16px 18px 18px; }
.v3-page.mgb-page .mgb-form input[type="submit"] { font-family: inherit; margin-top: 4px; }
.v3-page.mgb-page .mgb-form .v3-fieldhint { margin: 0 0 10px; }
.v3-page.mgb-page .mgb-beenden { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v3-line2); }
.v3-page.mgb-page .mgb-quer { margin-top: 12px; }
.v3-page.mgb-page .mgb-fuss { margin-top: 16px; margin-bottom: 0; line-height: 1.6; }

@media (max-width: 760px) {
  .v3-page.mgb-page .mgb-chips { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZAHL — die Zusage "klickbar und erklaert" ausserhalb der Kachelreihe
   (Welle W0b, 02.09.2026 · Bauteil shared/_zahl · Praefix .zhl-*)

   Zwei Bauformen, eine Zusage:
     .zhl      inline — die Zahl IM SATZ, gestrichelt unterstrichen, mit
               i-Marker. Zaehlregel im title.
     .zhl-kz   Kennzahl-Zeile — Beschriftung oben, Zahl darunter.

   Die dritte Bauform (Kachel) ist und bleibt .ab-kpi / _v3_kpi_row.

   .zhl-tot ist der PRODUKTIONS-Rueckfall: dort, wo die Pruefung nur geloggt
   hat, rendert die Zahl unverlinkt statt die Seite zu zerlegen. Sie sieht
   bewusst nicht aus wie ein Link.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page .zhl {
  display: inline-flex; align-items: baseline; gap: 4px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.v3-page .zhl .zhl-l { font-size: 12.5px; color: var(--v3-ink3); }
.v3-page .zhl .zhl-w {
  font-weight: 750; font-variant-numeric: tabular-nums;
  text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: #b3bfd2;
}
.v3-page a.zhl:hover .zhl-w { color: var(--v3-brand); text-decoration-color: var(--v3-brand); }
.v3-page .zhl .zhl-i,
.v3-page .zhl-kz .zhl-i {
  display: inline-grid; place-items: center; width: 12px; height: 12px;
  border-radius: 50%; border: 1px solid var(--v3-line);
  font-size: 8.5px; font-weight: 800; font-style: normal;
  color: var(--v3-ink3); line-height: 1; flex: none;
}
.v3-page a.zhl:hover .zhl-i { border-color: var(--v3-brand); color: var(--v3-brand); }

.v3-page .zhl-kz { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-page .zhl-kz .zhl-l {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--v3-ink3);
}
.v3-page .zhl-kz .zhl-w {
  font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--v3-ink); text-decoration: none; align-self: flex-start;
}
/* Die Tuer muss man SEHEN, bevor man mit der Maus darauf faehrt (gemessener
   Blick 02.09.2026: ohne diese Zeile sah die verlinkte Zahl exakt aus wie die
   unverlinkte davor). Dieselbe gestrichelte Andeutung wie in der Inline-
   Bauform — ein Bauteil, eine Sprache. */
.v3-page .zhl-kz a.zhl-w {
  text-decoration: underline dotted; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px; text-decoration-color: #b3bfd2;
}
.v3-page .zhl-kz a.zhl-w:hover { color: var(--v3-brand); text-decoration-color: var(--v3-brand); }
.v3-page .zhl-kz .zhl-og { font-size: 11.5px; color: var(--v3-ink3); }
/* Die HERLEITUNG (W1b, 02.09.2026) — eine stille Zeile unter der Zahl, fuer
   Werte, die nicht aus einer MENGE kommen, sondern aus einer REGEL: der
   SOLL-Betrag hat keine Einzelmenge, er hat einen Entscheid. Ohne sie stand
   am Profil ein Betrag, dessen Regel niemand nachlesen konnte. */
.v3-page .zhl-kz .zhl-hl {
  font-size: 11.5px; line-height: 1.35; color: var(--v3-ink3);
  max-width: 34ch; text-wrap: pretty;
}

/* Toene — dieselben Namen wie in der Kachelreihe, damit ein Ton ueberall
   dasselbe heisst (ein Wort, eine Bedeutung). */
.v3-page .zhl.ab-ton-green .zhl-w, .v3-page .zhl-kz.ab-ton-green .zhl-w { color: var(--v3-ok); }
.v3-page .zhl.ab-ton-amber .zhl-w, .v3-page .zhl-kz.ab-ton-amber .zhl-w { color: var(--v3-warn); }
.v3-page .zhl.ab-ton-red   .zhl-w, .v3-page .zhl-kz.ab-ton-red   .zhl-w { color: var(--v3-bad); }
.v3-page .zhl.ab-ton-blue  .zhl-w, .v3-page .zhl-kz.ab-ton-blue  .zhl-w { color: var(--v3-brand); }

.v3-page .zhl-tot { cursor: default; }
.v3-page .zhl-tot.zhl-w, .v3-page .zhl .zhl-tot { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   .pf-edit — DIE KARTEN-AKTE DER PROFIL-BEARBEITUNG (Sync W9a, 10.09.2026)
   ───────────────────────────────────────────────────────────────────────
   Blaupause: Objekt-Akte wie Stripe-Detailseite, in v3 (Design-Referenz § 0).
   Carstens Wahl vom 10.09.2026: Variante A des Mockups
   `docs/mockups/2026-09-10-w9-profil-bearbeitung.html`.

   ⚠️ ALLES SCOPED. `.pf-edit` war im Repo frei (gegrept am 10.09.2026, der
   Treffer stand nur im Bauauftrag); `.pf-ueb`, `.pf-fin`, `.pf-more` und
   `.r1-prof` sind vergeben. Die Innenklassen (`.karte`, `.krow`, `.kcap` …)
   sind bewusst KURZ und leben ausschliesslich hier drinnen — `.krow` gibt es
   z. B. schon unter `.home-v3 .komm` und meint dort etwas anderes (Lehre 17:
   greppen UND den Treffer lesen).

   Felder kommen aus dem Bestand (`.v3-field`/`.v3-fieldgrid`/`.v3-fieldhint`);
   hier steht KEIN zweites Feld-CSS.
   ═══════════════════════════════════════════════════════════════════════ */
.v3-page .pf-edit { max-width: 900px; }
/* ⚠️ `turbo-frame` ist ein UNBEKANNTES Element und damit `display: inline`
   (Rails-Review 10.09.2026) — eine Karte darin bekaeme Zeilenhoehe statt
   Blockfluss. */
.v3-page .pf-edit .pfe-frame { display: block; }

/* Der profilweite Vorbehalt — EINMAL, ueber allen Karten. */
.v3-page .pf-edit .qband {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid #f3c9ce; background: #fdeaec;
  border-radius: 12px; padding: 11px 14px; margin-bottom: 14px;
}
.v3-page .pf-edit .qband .qi {
  width: 26px; height: 26px; border-radius: 8px; background: #f8d6da;
  color: var(--v3-bad); flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.v3-page .pf-edit .qband b { font-size: 12.8px; color: var(--v3-ink); }
.v3-page .pf-edit .qband p { margin: 2px 0 0; font-size: 12px; color: var(--v3-ink2); }
/* W9c: derselbe Kasten, andere AUSSAGE — ein Vorschlag ist keine Ablehnung.
   Rot bleibt dem profilweiten Vorbehalt vorbehalten (Lehre 11: grau schlaegt
   gruen, und eine Farbe ist eine Behauptung). */
.v3-page .pf-edit .qband.hinweis { border-color: #cfdcf5; background: #eef3fd; }
.v3-page .pf-edit .qband.hinweis .qi { background: #dbe6fa; color: var(--v3-brand); }
.v3-page .pf-edit .qband ul { margin: 4px 0 0; padding-left: 17px; }
.v3-page .pf-edit .qband li { font-size: 12px; color: var(--v3-ink2); }

/* Die Karte: ein Ruhezustand, ein Arbeitszustand — nie beide. */
.v3-page .pf-edit .karte {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow); margin-bottom: 14px;
}
.v3-page .pf-edit .karte:focus { outline: none; }
.v3-page .pf-edit .karte.arbeitet {
  border-color: #bcd3f7; box-shadow: 0 0 0 3px rgba(30, 86, 200, .09), var(--v3-shadow);
}
.v3-page .pf-edit .kkopf { display: flex; align-items: center; gap: 9px; padding: 14px 18px 0; }
.v3-page .pf-edit .kkopf h3 { font-size: 14px; font-weight: 750; margin: 0; letter-spacing: -.1px; }
.v3-page .pf-edit .kkopf .kakt { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.v3-page .pf-edit .kmut { font-size: 11.5px; color: var(--v3-ink3); font-weight: 700; }

/* Der Punkt traegt den Ton der Zusage — dieselben drei Namen wie im Kasten. */
/* ⚠️ WELCHE FARBE WARNT (UX-Review 10.09.2026): gelb heisst „aufpassen" — und
   aufpassen muss, wer gerade etwas VEROEFFENTLICHT. Ein Probelauf ist das
   Gegenteil eines Befunds (es passiert nichts) und bleibt deshalb neutral. */
.v3-page .pf-edit .kdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--v3-ink3); }
.v3-page .pf-edit .kdot.aussenwirkung { background: var(--v3-warn); }
.v3-page .pf-edit .kdot.probe { background: var(--v3-ink3); }
.v3-page .pf-edit .kdot.intern { background: var(--v3-line); }

.v3-page .pf-edit .kherkunft {
  display: flex; align-items: center; gap: 7px; padding: 0 18px; margin-top: 5px;
  font-size: 11.5px; color: var(--v3-ink3);
}
.v3-page .pf-edit .ksrc {
  border: 1px solid var(--v3-line); border-radius: 6px; padding: 1px 6px; font-size: 10.5px;
  font-weight: 800; letter-spacing: .3px; text-transform: uppercase; background: #f8fafc;
}
.v3-page .pf-edit .kmeldung {
  margin: 10px 18px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 650;
}
.v3-page .pf-edit .kmeldung.ok { background: #e5f5ec; color: #146c40; }
.v3-page .pf-edit .kmeldung.bad { background: #fdeaec; color: #9d2b39; }

.v3-page .pf-edit .kbody { padding: 13px 18px 16px; }
.v3-page .pf-edit .kcap {
  font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase; font-weight: 800;
  color: var(--v3-ink3); margin: 15px 0 7px;
}
.v3-page .pf-edit .kbody > .kcap:first-child { margin-top: 2px; }

/* Werte im Ruhezustand */
.v3-page .pf-edit .krows { display: flex; flex-direction: column; }
.v3-page .pf-edit .krow {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; padding: 7px 0;
  border-bottom: 1px solid var(--v3-line2); align-items: baseline;
}
.v3-page .pf-edit .krow:last-child { border-bottom: 0; }
.v3-page .pf-edit .krk { font-size: 11.5px; color: var(--v3-ink3); font-weight: 650; }
.v3-page .pf-edit .krv { font-size: 13px; color: var(--v3-ink); min-width: 0; overflow-wrap: anywhere; }
.v3-page .pf-edit .krv small { display: block; font-size: 11.5px; color: var(--v3-ink3); margin-top: 1px; }
.v3-page .pf-edit .kstrich { color: var(--v3-ink3); }

/* Die Zusage — drei Toene, drei Bedeutungen. */
/* Die Zusage in drei Toenen — Warnton fuer das, was hinausgeht. */
.v3-page .pf-edit .kzusage {
  border-left: 4px solid var(--v3-warn); background: #fdf3e2; border-radius: 0 10px 10px 0;
  padding: 9px 13px; font-size: 12px; color: var(--v3-ink2); margin-top: 13px; font-weight: 500;
}
.v3-page .pf-edit .kzusage.probe { border-left-color: var(--v3-ink3); background: #f2f5f9; }
.v3-page .pf-edit .kzusage.intern { border-left-color: var(--v3-line); background: #f7f9fc; color: var(--v3-ink3); }
.v3-page .pf-edit .kzl {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  margin-bottom: 3px; color: var(--v3-warn);
}
.v3-page .pf-edit .kzusage.probe .kzl { color: var(--v3-ink2); }
.v3-page .pf-edit .kzusage.intern .kzl { color: var(--v3-ink3); }
.v3-page .pf-edit .kzhinweis { margin: 8px 0 0; font-size: 11.5px; color: var(--v3-bad); font-weight: 650; }

/* Speicherleiste — kein Auto-Save, der Klick ist die Entscheidung. */
.v3-page .pf-edit .kfuss {
  display: flex; align-items: center; gap: 9px; margin: 14px -18px -16px; padding: 12px 18px;
  border-top: 1px solid var(--v3-line2); background: #fbfcfe; border-radius: 0 0 var(--v3-r) var(--v3-r);
}
.v3-page .pf-edit .ksp { margin-left: auto; font-size: 11.5px; color: var(--v3-ink3); }
.v3-page .pf-edit .kspur { font-size: 11px; color: var(--v3-ink3); }

/* Frühere Stationen (W9b, Karte „Werdegang & Profil") — reines Lesen. */
.v3-page .pf-edit .kwdg ul { list-style: none; margin: 0; padding: 0; }
.v3-page .pf-edit .kwdg li {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--v3-line2); font-size: 12.5px;
}
.v3-page .pf-edit .kwdg li:last-child { border-bottom: 0; }
.v3-page .pf-edit .kwdg li b { font-weight: 650; color: var(--v3-ink); min-width: 0; }
.v3-page .pf-edit .kwdg li span { font-size: 11.5px; color: var(--v3-ink3); flex: none; }
.v3-page .pf-edit .kwdgm { margin: 6px 0 0; font-size: 11.5px; color: var(--v3-ink3); }

/* Ein Ja/Nein-Feld im Feldraster (W9b, Sperren) — das Kaestchen steht links
   neben seiner Beschriftung, nicht darunter. Kein zweites Feld-CSS: der
   Rahmen bleibt `.v3-field`. */
.v3-page .pf-edit .v3-field.kchk { flex-direction: row; align-items: center; gap: 9px; }
.v3-page .pf-edit .v3-field.kchk input[type="checkbox"] { width: 17px; height: 17px; flex: none; }

/* Die Sprungleiste ueber den acht Karten (W9b-Review) — kein Reiter, ein
   Wegweiser: sie faerbt nichts aktiv, sie springt nur. */
.v3-page .pf-edit .pfe-sprung {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.v3-page .pf-edit .pfe-sprung a {
  font-size: 11.5px; font-weight: 650; color: var(--v3-ink2); text-decoration: none;
  border: 1px solid var(--v3-line); border-radius: 999px; padding: 3px 10px; background: #fff;
}
.v3-page .pf-edit .pfe-sprung a:hover { border-color: var(--v3-brand); color: var(--v3-brand); }

/* Die Vorgangs-Knoepfe der Karte „Mitgliedschaft & Geld" (W9b). Sie fuehren
   auf die BESTEHENDE Vorgangs-Flaeche — hier entsteht kein zweiter Weg. */
.v3-page .pf-edit .kvorg {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid var(--v3-line2);
}
.v3-page .pf-edit .pfe-rest { font-size: 12.5px; color: var(--v3-ink3); margin: 4px 2px 0; max-width: 70ch; }

/* W9c: das Anschlussstudium an einer EXTERNEN Uni. Kein `members`-Feld und
   deshalb keine Karte — eigene Endpunkte, eigener Block unter den Karten. */
.v3-page .pf-edit .pfe-extern {
  background: var(--v3-card); border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: var(--v3-shadow);
  padding: 14px 16px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 9px;
}

@media (max-width: 640px) {
  .v3-page .pf-edit .krow { grid-template-columns: 1fr; gap: 2px; }
}