/* Erzeugt aus @span/ui/styles.css (Tokens und Komponenten). Nicht von Hand ändern. */
/* Yachtspan Design System: aus tokens.json erzeugt, nicht von Hand ändern */
:root, [data-theme="light"] {--surface-canvas: #f1f3f5; --surface-raised: #ffffff; --surface-sunken: #e8ecf0; --surface-navy: #0e2744; --surface-navy-deep: #081a30; --line: #d9dfe6; --line-strong: #7b899d; --ink: #0f1f3a; --ink-muted: #4f5f7a; --ink-faint: #66748a; --on-navy: #ffffff; --on-navy-muted: #c5d0e0; --navy: #0e2744; --on-navy-fill: #ffffff; --navy-soft: #e3eaf4; --accent: #c08a3e; --accent-ink: #8a5a16; --accent-soft: #f6ecda; --success: #11695f; --success-soft: #dcf2ea; --warning: #8f5400; --warning-soft: #fcefd2; --danger: #b02a24; --danger-soft: #fbe3e0; --info: #1f4e8c; --info-soft: #e1eaf7; --focus: var(--info); --link: var(--info); --shadow-floating: 0 1px 2px rgba(15, 31, 58, 0.06), 0 8px 24px rgba(15, 31, 58, 0.10);}
[data-theme="dark"] {--surface-canvas: #0b1220; --surface-raised: #121b2d; --surface-sunken: #0d1524; --surface-navy: #0e2744; --surface-navy-deep: #081a30; --line: #243149; --line-strong: #5b6b86; --ink: #e6ecf5; --ink-muted: #a3b2c9; --ink-faint: #8291ab; --on-navy: #ffffff; --on-navy-muted: #c5d0e0; --navy: #dfe7f3; --on-navy-fill: #0e2744; --navy-soft: #182a47; --accent: #d9a85c; --accent-ink: #e3b876; --accent-soft: #2e2412; --success: #5ecfae; --success-soft: #10302a; --warning: #f0b45a; --warning-soft: #3a2a0d; --danger: #ff8c82; --danger-soft: #3d1512; --info: #8db4f0; --info-soft: #16284a; --focus: var(--info); --link: var(--info); --shadow-floating: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.50);}
:root {--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --control-sm: 28px; --control-md: 36px; --control-lg: 44px; --control-touch: 56px; --row-height: 36px; --sidebar-width: 240px; --content-max: 1200px; --reading-max: 640px; --hairline: 1px; --tenant: var(--navy); --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-serif: "Newsreader", "Source Serif 4", Georgia, serif;}
.mk-display { font-family: var(--font-sans); font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.02em; }
.mk-heading-lg { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 500; letter-spacing: -0.015em; }
.mk-heading { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: -0.01em; }
.mk-heading-sm { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.005em; }
.mk-lead { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.mk-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.mk-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.app-title { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.app-section { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.app-body { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.app-body-strong { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.app-label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 500; }
.app-cell { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.app-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.app-kpi { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.halle-title { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.halle-body { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 500; }
.halle-button { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; }
.board-value { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 500; letter-spacing: -0.02em; }
.mono-id { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.01em; }
.mono-id-lg { font-family: var(--font-mono); font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: 0.01em; }
.mono-id-xl { font-family: var(--font-mono); font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: 0.01em; }
.quote { font-family: var(--font-serif); font-size: 24px; line-height: 32px; font-weight: 400; font-style: italic; }
/* Scope jeder Oberfläche (design-system/06-umsetzung.md, Konsum der Tokens). Maße aus components/bundle.css. */

.ys, .ys * { box-sizing: border-box; }
.ys { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.ys input, .ys select, .ys textarea { font-family: inherit; color: inherit; }
.ys input.ys-input-mono { font-family: var(--font-mono); }
.ys-btn, .ys-tab, .ys-chip, .ys-nav-toggle, .ys-ws { font-family: inherit; }
.ys :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Alle Übergänge respektieren prefers-reduced-motion (06, Was die Referenz nicht leistet). */
@media (prefers-reduced-motion: reduce) {
  .ys, .ys *, .ys *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}
/* Primitive aus Schritt 2 (design-system/06-umsetzung.md). Regeln wie in components/bundle.css, mit drei bewussten Abweichungen,
   die test/css-parity.test.ts kennt: Hover nur unter (hover: hover), keine Farbliterale, Tooltip erscheint nach 400 ms. */

/* ---------- Button ---------- */
.ys-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-4); font-weight: 500; border-radius: var(--radius-sm); border: var(--hairline) solid transparent; background: transparent; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; text-decoration: none; }
.ys-btn:disabled { opacity: .4; cursor: default; }
.ys-btn-primary { background: var(--navy); color: var(--on-navy-fill); }
.ys-btn-outline { border-color: var(--line-strong); color: var(--ink); background: var(--surface-raised); }
.ys-btn-ghost { color: var(--ink); }
.ys-btn-danger { border-color: var(--danger); color: var(--danger); background: var(--surface-raised); }
.ys-btn-danger.ys-btn-filled { background: var(--danger); color: var(--on-navy); border-color: var(--danger); }
.ys-btn-sm { height: var(--control-sm); padding: 0 var(--space-2); font-size: 13px; line-height: 16px; font-weight: 500; }
.ys-btn-sm svg { width: 14px; height: 14px; }
.ys-btn-lg { height: var(--control-lg); padding: 0 var(--space-5); }
.ys-btn-touch { height: var(--control-touch); padding: 0 var(--space-6); border-radius: var(--radius-md); }
.ys-btn-block { display: flex; width: 100%; }
.ys-btn-icon { width: var(--control-md); padding: 0; }
.ys-btn-icon.ys-btn-sm { width: var(--control-sm); }
.ys-btn-icon.ys-btn-lg { width: var(--control-lg); }
.ys-btn-icon.ys-btn-touch { width: var(--control-touch); }
.ys-btn-icon[aria-pressed="true"] { background: var(--surface-sunken); color: var(--ink); }
.ys-btn-onnavy.ys-btn-outline { border-color: var(--on-navy); color: var(--on-navy); background: transparent; }
.ys-btn-onnavy.ys-btn-primary { background: var(--on-navy); color: var(--surface-navy); }
.ys-btn svg { width: 16px; height: 16px; flex: none; }
.ys-btn-touch svg { width: 24px; height: 24px; }
@media (hover: hover) {
  .ys-btn-primary:hover:not(:disabled) { filter: brightness(.94); }
  .ys-btn-outline:hover:not(:disabled) { background: var(--surface-sunken); }
  .ys-btn-ghost:hover:not(:disabled) { background: var(--surface-sunken); }
  .ys-btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
  .ys-btn-onnavy.ys-btn-outline:hover:not(:disabled) { background: color-mix(in srgb, var(--on-navy) 8%, transparent); }
}

/* ---------- Field, Input, Select, Checkbox ---------- */
.ys-field { display: flex; flex-direction: column; gap: var(--space-1); max-width: var(--reading-max); min-width: 0; }
.ys-field-label { color: var(--ink); }
.ys-field-label .ys-optional { color: var(--ink-muted); font-weight: 400; margin-left: var(--space-1); }
.ys-control { display: flex; align-items: center; height: var(--control-md); padding: 0 var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); gap: var(--space-2); transition: border-color 150ms ease-out; }
.ys-control:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; }
.ys-control input, .ys-control select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; outline: none; }
.ys-control input::placeholder { color: var(--ink-faint); }
.ys-control select { appearance: none; -webkit-appearance: none; padding-right: var(--space-5); }
.ys-control .ys-affix { color: var(--ink-muted); flex: none; }
.ys-control > svg { width: 16px; height: 16px; flex: none; color: var(--ink-muted); }
.ys-control-lg { height: var(--control-lg); padding: 0 var(--space-4); }
.ys-control-touch { height: var(--control-touch); padding: 0 var(--space-4); border-radius: var(--radius-md); }
.ys-control-error { border-color: var(--danger); }
.ys-control-disabled, .ys-control:has(> :disabled) { opacity: .4; }
.ys-check:has(input:disabled) { opacity: .4; cursor: default; }
.ys-field-help { color: var(--ink-muted); }
.ys-field-error { color: var(--danger); display: flex; align-items: flex-start; gap: var(--space-1); }
.ys-field-error svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ys-input-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; }
.ys-select-wrap { position: relative; }
.ys-select-wrap .ys-chevron { position: absolute; right: var(--space-3); top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink-muted); pointer-events: none; }

.ys-check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.ys-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ys-check-box { width: 18px; height: 18px; flex: none; margin-top: 1px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-raised); display: grid; place-items: center; color: var(--on-navy-fill); transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.ys-check-box svg { width: 12px; height: 12px; opacity: 0; }
.ys-check input:checked + .ys-check-box { background: var(--navy); border-color: var(--navy); }
.ys-check input:checked + .ys-check-box svg { opacity: 1; }
.ys-check input:focus-visible + .ys-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.ys-check-text { display: flex; flex-direction: column; gap: 2px; }
.ys-check-desc { color: var(--ink-muted); }
.ys-switch .ys-check-box { width: 36px; height: 20px; border-radius: 10px; position: relative; background: var(--surface-sunken); border-color: var(--line-strong); }
.ys-switch .ys-check-box::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 7px; background: var(--line-strong); transition: transform 150ms ease-out, background-color 150ms ease-out; }
.ys-switch input:checked + .ys-check-box { background: var(--navy); border-color: var(--navy); }
.ys-switch input:checked + .ys-check-box::after { transform: translateX(16px); background: var(--on-navy-fill); }
.ys-switch .ys-check-box svg { display: none; }

/* ---------- Textarea, Radio ---------- */
.ys-control-area { height: auto; padding: var(--space-2) var(--space-3); align-items: stretch; }
.ys-control-area textarea { flex: 1; border: 0; background: transparent; padding: 0; outline: none; resize: vertical; min-height: 72px; }
.ys-control-area textarea::placeholder { color: var(--ink-faint); }
.ys-radiogroup { border: 0; padding: 0; margin: 0; min-width: 0; }
.ys-radiogroup legend { padding: 0; margin-bottom: var(--space-2); }
.ys-radios { display: flex; flex-direction: column; gap: var(--space-2); }
.ys-radiogroup-inline .ys-radios { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }
.ys-radio .ys-check-box { border-radius: 50%; }
.ys-radio input:checked + .ys-check-box { background: var(--surface-raised); border-color: var(--navy); box-shadow: inset 0 0 0 4px var(--navy); }
.ys-radio input:focus-visible + .ys-check-box { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Badge, Ident ---------- */
.ys-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink-muted); white-space: nowrap; }
.ys-badge svg { width: 12px; height: 12px; }
.ys-badge-info { background: var(--info-soft); color: var(--info); }
.ys-badge-warning { background: var(--warning-soft); color: var(--warning); }
.ys-badge-success { background: var(--success-soft); color: var(--success); }
.ys-badge-danger { background: var(--danger-soft); color: var(--danger); }
.ys-badge-lg { height: 28px; padding: 0 var(--space-3); }
.ys-ident { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.ys-ident-muted { color: var(--ink-muted); }

/* ---------- Status ---------- */
.ys-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); white-space: nowrap; }
.ys-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.ys-status-neutral { color: var(--ink-muted); }
.ys-status-info .ys-status-dot { background: var(--ink); }
.ys-status-active .ys-status-dot { background: var(--ink); }
.ys-status-unverified .ys-status-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.ys-status-success .ys-status-dot { background: var(--success); }
.ys-status-warning .ys-status-dot { background: var(--warning); }
.ys-status-warning { color: var(--warning); }
.ys-status-danger .ys-status-dot { background: var(--danger); }
.ys-status-danger { color: var(--danger); }

/* ---------- Kbd, Avatar ---------- */
.ys-kbd { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16px; padding: 0 4px; border: var(--hairline) solid var(--line); border-radius: var(--radius-xs); color: var(--ink-muted); white-space: nowrap; }
.ys-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: .02em; flex: none; }
.ys-avatar-t0 { background: var(--navy-soft); color: var(--navy); }
.ys-avatar-t1 { background: var(--success-soft); color: var(--success); }
.ys-avatar-t2 { background: var(--info-soft); color: var(--info); }
.ys-avatar-t3 { background: var(--surface-sunken); color: var(--ink); }
.ys-avatar-t4 { background: var(--navy-soft); color: var(--ink); }
.ys-avatar-t5 { background: var(--success-soft); color: var(--ink); }
.ys-avatar-sm { width: 20px; height: 20px; font-size: 12px; letter-spacing: 0; }
.ys-avatar-lg { width: 32px; height: 32px; font-size: 14px; }

/* ---------- Tooltip ---------- */
.ys-tooltip-wrap { position: relative; display: inline-flex; }
.ys-tooltip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); background: var(--ink); color: var(--surface-raised); padding: 4px 8px; border-radius: var(--radius-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; display: inline-flex; gap: var(--space-2); align-items: center; z-index: 20; }
.ys-tooltip-bottom { bottom: auto; top: calc(100% + 6px); }
.ys-tooltip-wrap:focus-within .ys-tooltip, .ys-tooltip-open { opacity: 1; transition-delay: 400ms; }
.ys-tooltip-open { transition-delay: 0ms; }
.ys-tooltip-kbd { color: inherit; opacity: .7; border-color: currentColor; }
[data-theme="dark"] .ys-tooltip { background: var(--ink); color: var(--surface-canvas); }
@media (hover: hover) {
  .ys-tooltip-wrap:hover .ys-tooltip { opacity: 1; transition-delay: 400ms; }
}

/* Nicht in der Referenz: Tooltip rechtsbündig für Elemente am rechten Rand der Titelzeile; sonst ragt der unsichtbare
   Tooltip über den Rand und die Seite scrollt seitlich. */
.ys-tooltip-end { left: auto; right: 0; transform: none; }
/* Shell aus Schritt 3 (design-system/06-umsetzung.md). Regeln wie in components/bundle.css; Hover nur unter (hover: hover). */

/* ---------- Tabs ---------- */
.ys-tabs { display: flex; gap: var(--space-5); border-bottom: var(--hairline) solid var(--line); }
.ys-tab { position: relative; padding: var(--space-2) 0 var(--space-3); color: var(--ink-muted); background: none; border: 0; cursor: pointer; display: inline-flex; gap: var(--space-2); align-items: center; }
.ys-tab[aria-selected="true"] { color: var(--ink); }
.ys-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); }
.ys-tab-count { color: var(--ink-muted); }

/* ---------- Toolbar ---------- */
.ys-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ys-toolbar .ys-control { height: var(--control-sm); width: 240px; border-color: var(--line); }
.ys-toolbar .ys-control input { font-size: 13px; line-height: 16px; }
.ys-toolbar .ys-spacer { flex: 1; }
.ys-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: var(--control-sm); padding: 0 var(--space-2); font-size: 13px; line-height: 16px; font-weight: 500; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.ys-chip-active { background: var(--surface-sunken); border-color: var(--line); color: var(--ink); }
.ys-chip svg { width: 14px; height: 14px; color: var(--ink-muted); }
@media (hover: hover) {
  .ys-chip:hover { background: var(--surface-sunken); }
}

/* ---------- Sidebar ---------- */
.ys-sidebar { width: var(--sidebar-width); background: var(--surface-raised); border-right: var(--hairline) solid var(--line); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-4); min-height: 100%; }
.ys-sidebar-brand { padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ys-ws { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2); border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; width: 100%; text-align: left; }
.ys-ws .ys-mark { width: 30px; height: 21px; color: var(--navy); flex: none; }
.ys-ws .ys-ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys-ws .ys-ws-chev { width: 14px; height: 14px; color: var(--ink-muted); flex: none; }
.ys-sidebar-search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-sm); padding: 0 var(--space-2); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink-muted); }
.ys-sidebar-search svg { width: 14px; height: 14px; flex: none; }
.ys-sidebar-search .ys-kbd { margin-left: auto; font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 16px; padding: 0 4px; border: var(--hairline) solid var(--line); border-radius: var(--radius-xs); color: var(--ink-muted); }
.ys-brandrow { display: flex; align-items: center; gap: var(--space-2); height: 24px; color: var(--ink); }
.ys-mark { width: 24px; height: 17px; flex: none; }
.ys-sidebar-collapsed { width: 56px; padding: var(--space-4) var(--space-2); align-items: stretch; }
.ys-sidebar-collapsed .ys-sidebar-brand { padding: 0; align-items: center; }
.ys-sidebar-collapsed .ys-nav-item { justify-content: center; padding: 0; width: 40px; margin: 0 auto; }
.ys-nav-sep { height: var(--hairline); background: var(--line); margin: var(--space-2) var(--space-1); }
.ys-sidebar-foot { margin-top: auto; }
.ys-nav-toggle { width: 100%; border: 0; background: transparent; color: var(--ink-muted); text-align: left; }
.ys-nav-toggle svg { color: inherit; }
.ys-wordmark { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ys-sidebar-tenant { color: var(--ink-muted); }
.ys-nav-group { display: flex; flex-direction: column; gap: 2px; }
.ys-nav-group-label { color: var(--ink-muted); padding: var(--space-2) var(--space-2) var(--space-1); }
.ys-nav-count { margin-left: auto; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ys-nav-item { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--ink-muted); text-decoration: none; cursor: pointer; }
.ys-nav-item[aria-current="page"] { background: var(--surface-sunken); color: var(--ink); font-weight: 500; }
.ys-nav-item svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.ys-nav-item[aria-current="page"] svg { color: var(--navy); }
@media (hover: hover) {
  .ys-ws:hover { background: var(--surface-sunken); }
  .ys-nav-toggle:hover { color: var(--ink); }
  .ys-nav-item:hover { background: var(--surface-sunken); color: var(--ink); }
  .ys-nav-item:hover { background: var(--surface-sunken); }
}

/* ---------- PageHeader ---------- */
.ys-pagehead { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ys-pagehead .ys-spacer { flex: 1; }
.ys-pagehead .ys-actions { display: flex; gap: var(--space-2); }

/* ---------- Scrim ---------- */
.ys-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 20%, transparent); }

/* ---------- Popover ---------- */
.ys-popover { background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); padding: var(--space-1); }
.ys-popover-foot { color: var(--ink-muted); padding: var(--space-2) var(--space-2) var(--space-1); border-top: var(--hairline) solid var(--line); margin-top: var(--space-1); }

/* ---------- Menu ---------- */
.ys-menu { min-width: 220px; display: flex; flex-direction: column; }
.ys-menu-item { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2); border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; text-align: left; font-family: inherit; }
.ys-menu-item:disabled { opacity: .4; cursor: default; }
.ys-menu-item svg { width: 16px; height: 16px; color: var(--ink-muted); flex: none; }
.ys-menu-item .ys-menu-label { flex: 1; }
.ys-menu-danger { color: var(--danger); }
.ys-menu-danger svg { color: var(--danger); }
.ys-menu-sep { height: var(--hairline); background: var(--line); margin: var(--space-1) 0; }
@media (hover: hover) {
  .ys-menu-item:hover:not(:disabled) { background: var(--surface-sunken); }
}

/* ---------- Path ---------- */
.ys-path { display: flex; align-items: center; gap: var(--space-1); color: var(--ink-muted); }
.ys-path a { color: var(--ink-muted); text-decoration: none; }
.ys-path-item { display: inline-flex; gap: var(--space-1); }
.ys-path-sep { color: var(--ink-faint); }
.ys-path [aria-current="page"] { color: var(--ink); }
@media (hover: hover) {
  .ys-path a:hover { color: var(--ink); text-decoration: underline; }
}

/* ---------- CommandPalette ---------- */
.ys-cmdk { width: 640px; max-width: 100%; background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); display: flex; flex-direction: column; overflow: hidden; }
.ys-cmdk-input { display: flex; align-items: center; gap: var(--space-3); height: 48px; padding: 0 var(--space-4); border-bottom: var(--hairline) solid var(--line); }
.ys-cmdk-input svg { width: 18px; height: 18px; color: var(--ink-muted); flex: none; }
.ys-cmdk-input input { flex: 1; border: 0; outline: none; background: transparent; }
.ys-cmdk-input input::placeholder { color: var(--ink-faint); }
.ys-cmdk-body { padding: var(--space-2); max-height: 520px; overflow: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.ys-cmdk-group-label { color: var(--ink-muted); padding: var(--space-2) var(--space-2) var(--space-1); }
.ys-cmdk-item { display: flex; align-items: center; gap: var(--space-3); height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.ys-cmdk-active { background: var(--surface-sunken); }
.ys-cmdk-item > svg { width: 16px; height: 16px; color: var(--ink-muted); flex: none; }
.ys-cmdk-item .ys-ident, .ys-cmdk-pad { min-width: 96px; display: inline-block; }
.ys-cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys-cmdk-meta { color: var(--ink-muted); white-space: nowrap; }
.ys-cmdk-foot { display: flex; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: var(--hairline) solid var(--line); color: var(--ink-muted); }
.ys-cmdk-hint { display: inline-flex; align-items: center; gap: var(--space-1); }
@media (hover: hover) {
  .ys-cmdk-item:hover { background: var(--surface-sunken); }
}

/* Über bundle.css hinaus: das Suchfeld der Palette trägt keinen eigenen Fokus-Ring, die Palette ist der Fokusbereich (Suche.png). */
.ys .ys-cmdk-input input:focus-visible { outline: none; }
/* Daten aus Schritt 4 (design-system/06-umsetzung.md). Regeln wie in components/bundle.css; Hover nur unter (hover: hover). */

/* ---------- Table ---------- */
.ys-table-wrap { border-top: var(--hairline) solid var(--line); background: transparent; overflow: auto; }
.ys-table-wrap.ys-table-framed { border: var(--hairline) solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.ys-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ys-table th { position: sticky; top: 0; z-index: 1; text-align: left; background: var(--surface-raised); color: var(--ink-muted); font-weight: 500; padding: 0 var(--space-3); height: 32px; border-bottom: var(--hairline) solid var(--line); white-space: nowrap; }
.ys-table-framed .ys-table th { background: var(--surface-raised); }
.ys-table td { padding: 0 var(--space-3); height: var(--row-height); border-bottom: var(--hairline) solid var(--line); color: var(--ink); white-space: nowrap; }
.ys-table tr:last-child td { border-bottom: 0; }
.ys-table tr.ys-selected td { background: var(--navy-soft); }
.ys-table .ys-right { text-align: right; }
.ys-table .ys-muted { color: var(--ink-muted); }
.ys-table-compact td { height: 32px; }
.ys-table-comfortable td { height: 40px; }
.ys-table-touch td { height: var(--control-touch); }
.ys-table th .ys-th-inner { display: inline-flex; align-items: center; gap: var(--space-1); }
.ys-table th .ys-th-inner svg { width: 12px; height: 12px; }
.ys-table th.ys-sorted { color: var(--ink); }
.ys-table th.ys-sortable { cursor: pointer; }
.ys-table th.ys-right .ys-th-inner { flex-direction: row-reverse; }
.ys-table .ys-table-checkcol { width: 36px; min-width: 36px; padding: 0 0 0 var(--space-3); }
.ys-table .ys-table-check { position: relative; display: inline-flex; vertical-align: middle; }
.ys-table .ys-table-check .ys-check-box { margin-top: 0; width: 16px; height: 16px; }
.ys-table .ys-table-check .ys-check-box svg { width: 11px; height: 11px; }
.ys-table tr.ys-clickable { cursor: pointer; }
.ys-table tfoot td { position: sticky; bottom: 0; background: var(--surface-raised); border-top: var(--hairline) solid var(--line-strong); border-bottom: 0; color: var(--ink); font-weight: 500; }
.ys-table tbody tr:last-child td { border-bottom: var(--hairline) solid var(--line); }
.ys-table-wrap:not(:has(tfoot)) tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) {
  .ys-table tbody tr:hover td { background: var(--surface-sunken); }
  .ys-table tbody tr:hover td { background: var(--surface-sunken); }
}

/* ---------- EmptyState ---------- */
.ys-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-8) 0; max-width: var(--reading-max); }
.ys-empty p { margin: 0; color: var(--ink-muted); }
.ys-empty .ys-btn { margin-top: var(--space-2); }

/* ---------- Skeleton, Pagination ---------- */
.ys-skeleton-group { display: flex; flex-direction: column; gap: var(--space-2); }
.ys-skeleton { display: block; border-radius: var(--radius-xs); background: var(--surface-sunken); animation: ys-pulse 1.4s ease-in-out infinite; }
@keyframes ys-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ys-skeleton { animation: none; } }
.ys-pagination { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); white-space: nowrap; }
.ys-pagination .ys-spacer { flex: 1; }
.ys-pagination-size { height: var(--control-sm); border-color: var(--line); position: relative; width: auto; padding-right: var(--space-6); }
.ys-pagination-size select { color: var(--ink-muted); }
.ys-pagination-size .ys-chevron { position: absolute; right: var(--space-2); top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--ink-muted); pointer-events: none; }
.ys-pagination-page { color: var(--ink-muted); }

/* ---------- BulkBar ---------- */
.ys-bulkbar { display: flex; align-items: center; gap: var(--space-2); height: var(--control-sm); padding: 0; }
.ys-bulkbar-floating { height: 44px; padding: 0 var(--space-3) 0 var(--space-4); background: var(--surface-raised); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); }
.ys-bulk-sep { width: var(--hairline); height: 20px; background: var(--line); margin: 0 var(--space-2); }
.ys-bulkbar .ys-spacer { flex: 1; }

/* Über bundle.css hinaus: sortierbare Spaltenköpfe sind Buttons (Tastatur), ohne eigene Gestalt. */
.ys-table th button.ys-th-inner { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
/* Über bundle.css hinaus: klickbare Zeilen sind per Tastatur erreichbar; der Fokus liegt auf der Zeile. */
.ys-table tr.ys-clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Rückmeldung und Flächen aus Schritt 5 (design-system/06-umsetzung.md). Regeln wie in components/bundle.css. */

/* ---------- Timeline ---------- */
.ys-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ys-timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-6); }
.ys-timeline li::before { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.ys-timeline li::after { content: ""; position: absolute; left: 8.5px; top: 20px; bottom: 0; width: var(--hairline); background: var(--line); }
.ys-timeline li:last-child::after { display: none; }
.ys-timeline li.ys-tl-accent::before { background: var(--accent); }
.ys-timeline .ys-tl-meta { color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* ---------- Dialog, Toast ---------- */
.ys-dialog { width: 480px; max-width: 100%; background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ys-dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
.ys-toast { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 320px; max-width: 480px; background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); padding: var(--space-3) var(--space-4); }
.ys-toast svg { width: 18px; height: 18px; flex: none; }
.ys-toast-danger svg { color: var(--danger); }
.ys-toast-success svg { color: var(--ink); }
.ys-toast .ys-spacer { flex: 1; }

/* ---------- Banner, Proposal ---------- */
.ys-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--hairline) solid var(--line); background: var(--surface-raised); color: var(--ink); }
.ys-banner-icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ys-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ys-banner-actions { display: flex; gap: var(--space-2); flex: none; }
.ys-banner-info { background: var(--surface-raised); border-color: var(--line); }
.ys-banner-info .ys-banner-icon { color: var(--info); }
.ys-banner-warning { background: var(--warning-soft); border-color: transparent; }
.ys-banner-warning .ys-banner-icon { color: var(--warning); }
.ys-banner-danger { background: var(--danger-soft); border-color: transparent; }
.ys-banner-danger .ys-banner-icon { color: var(--danger); }
.ys-banner-neutral { background: var(--surface-raised); border-color: var(--line); }
.ys-banner-compact { padding: var(--space-2) var(--space-3); border-radius: 0; align-items: center; }
.ys-proposal { border: var(--hairline) solid var(--line); border-left: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); display: flex; flex-direction: column; }
.ys-proposal-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--line); }
.ys-proposal-head > * { flex-shrink: 0; }
.ys-proposal-src { color: var(--ink-muted); white-space: nowrap; }
.ys-proposal-acts { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.ys-proposal-body { padding: var(--space-3); color: var(--ink); }
.ys-proposal-body dl { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.ys-proposal-body dt { color: var(--ink-muted); }
.ys-proposal-body dd { margin: 0; }

/* ---------- Drawer ---------- */
.ys-drawer { width: 400px; max-width: 100%; height: 100%; background: var(--surface-raised); border-left: var(--hairline) solid var(--line); box-shadow: var(--shadow-floating); display: flex; flex-direction: column; }
.ys-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3) var(--space-6); border-bottom: var(--hairline) solid var(--line); }
.ys-drawer-titles { display: flex; flex-direction: column; gap: 2px; }
.ys-drawer-sub { color: var(--ink-muted); }
.ys-drawer-body { flex: 1; overflow: auto; padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ys-drawer-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-top: var(--hairline) solid var(--line); }
/* Detailseiten (design-system/03-applikation.md, Detailseiten; Maße aus screens/source/AppDetail.dc.html).
   Nicht in bundle.css: die Referenz baut diese Flächen im Screen selbst. Werte nur aus tokens.json;
   die festen Breiten (Seitenpanel 320px, Label-Spalte 104px, Rand 2px) nennt 03 ausdrücklich. */

.ys-detail { display: flex; flex-wrap: wrap; gap: 0 var(--space-8); align-items: flex-start; }
.ys-detail-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.ys-detail-side { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; border-left: var(--hairline) solid var(--line); padding-left: var(--space-6); }

.ys-sect { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; }
.ys-sect-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: var(--hairline) solid var(--line); }
.ys-sect-head h2 { margin: 0; }
.ys-sect-meta { color: var(--ink-muted); }
.ys-sect-actions { display: flex; gap: var(--space-1); }
.ys-sect-plain > .ys-sect-head { border-bottom: 0; padding-bottom: 0; }
.ys-detail-side .ys-sect { padding: 0 0 var(--space-5); margin-bottom: var(--space-5); border-bottom: var(--hairline) solid var(--line); }
.ys-detail-side .ys-sect:last-child { border-bottom: 0; margin-bottom: 0; }
.ys-detail-side .ys-sect-head { border-bottom: 0; padding-bottom: 0; }

.ys-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; }
.ys-kv dt { margin: 0; color: var(--ink-muted); }
.ys-kv dd { margin: 0; text-wrap: pretty; }

/* Hinweis zur Herkunft: Absatz mit 2px line-strong links (03, Detailseiten). */
.ys-note { border-left: 2px solid var(--line-strong); padding: 2px 0 2px calc(var(--space-4) - 2px); color: var(--ink); text-wrap: pretty; }

.ys-sums { display: flex; justify-content: flex-end; gap: var(--space-6); padding: var(--space-2) var(--space-3) 0; border-top: var(--hairline) solid var(--line-strong); }
.ys-sums-muted { color: var(--ink-muted); }

.ys-list3 { display: grid; grid-template-columns: minmax(0, 1fr) auto 80px; gap: var(--space-2) var(--space-3); align-items: center; }
.ys-list3-value { color: var(--ink-muted); white-space: nowrap; text-align: right; }

.ys-textlink { color: var(--link); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }

/* Formularseite (screens/source/Formular.dc.html): Formular bis 640px, Zusammenfassung 320px rechts, sticky. */
.ys-formcols { display: grid; grid-template-columns: minmax(0, 640px) 320px; gap: var(--space-12); align-items: start; justify-content: space-between; }
.ys-formaside { position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-6); border-left: var(--hairline) solid var(--line); padding-left: var(--space-6); }
.ys-formaside h3 { margin: 0 0 var(--space-2); color: var(--ink-muted); }
.ys-kv-compact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; }
.ys-kv-compact dt { color: var(--ink-muted); margin: 0; }
.ys-kv-compact dd { margin: 0; }
.ys-kv-num dd { text-align: right; font-variant-numeric: tabular-nums; }
.ys-poslist { display: flex; flex-direction: column; }
.ys-poslist > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); }
.ys-poslist > div:last-child { border-bottom: 0; }
.ys-poslist-detail { color: var(--ink-muted); text-align: right; white-space: nowrap; }
@media (max-width: 1280px) { .ys-formcols { grid-template-columns: minmax(0, 1fr); } .ys-formaside { position: static; border-left: 0; padding-left: 0; } }

/* Nicht in der Referenz: Panel 440px mit dem Beleg im Posteingang (03, Posteingang). */
.ys-detail-side-wide { flex-basis: 440px; width: 440px; }

/* Nicht in der Referenz: Kennung als Link (Zuordnung im Posteingang) sieht aus wie die Kennung, Unterstrich nur bei Hover. */
a.ys-ident { text-decoration: none; }
@media (hover: hover) {
  a.ys-ident:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Nicht in der Referenz: erste Seite eines Belegs als DocumentPage auf 50 Prozent in einem surface-canvas-Rahmen
   (03, Dokumente). A4 794 × 1123 wird 397 × 562. */
.ys-doc-vorschau { background: var(--surface-canvas); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2); display: flex; justify-content: center; }
.ys-doc-vorschau-in { width: 397px; height: 562px; overflow: hidden; }
.ys-doc-vorschau-in > .ys-doc { transform: scale(0.5); transform-origin: top left; }
.ys-doc-vorschau-leer { height: 200px; display: grid; place-items: center; color: var(--ink-muted); text-align: center; padding: var(--space-4); }
.ys-kv-wide { grid-template-columns: 160px minmax(0, 1fr); }
/* Formulare aus Schritt 6 (design-system/06-umsetzung.md). Regeln wie in components/bundle.css; Hover nur unter (hover: hover). */

/* ---------- DateField ---------- */
.ys-datefield input { flex: 1; }
.ys-datefield svg { width: 16px; height: 16px; }

/* ---------- Combobox ---------- */
.ys-combobox-anchor { position: relative; display: block; }
.ys-combobox-list { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--space-1); z-index: 10; max-height: 320px; overflow: auto; }
.ys-option { display: flex; align-items: center; gap: var(--space-3); height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.ys-option-active { background: var(--surface-sunken); }
.ys-option .ys-ident { min-width: 96px; }
.ys-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ys-option-meta { color: var(--ink-muted); white-space: nowrap; }
@media (hover: hover) {
  .ys-option:hover { background: var(--surface-sunken); }
}

/* ---------- Calendar ---------- */
.ys-calendar { width: 280px; padding: var(--space-3); background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); display: flex; flex-direction: column; gap: var(--space-2); }
.ys-cal-head { display: flex; align-items: center; justify-content: space-between; }
.ys-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ys-cal-dow { text-align: center; color: var(--ink-muted); height: 24px; line-height: 24px; }
.ys-cal-day { position: relative; height: 32px; border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-family: inherit; }
.ys-cal-muted { color: var(--ink-faint); }
.ys-cal-closed { color: var(--ink-faint); cursor: default; text-decoration: line-through; }
.ys-cal-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ys-cal-selected { background: var(--navy); color: var(--on-navy-fill); }
.ys-cal-mark { position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink-muted); }
.ys-cal-selected .ys-cal-mark { background: var(--on-navy-fill); }
.ys-cal-foot { color: var(--ink-muted); border-top: var(--hairline) solid var(--line); padding-top: var(--space-2); }
@media (hover: hover) {
  .ys-cal-day:hover:not(:disabled) { background: var(--surface-sunken); }
  .ys-cal-selected:hover:not(:disabled) { background: var(--navy); color: var(--on-navy-fill); }
}

/* ---------- FormSection, FieldRow, SaveBar ---------- */
.ys-formsect { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) 0; border-top: var(--hairline) solid var(--line); }
.ys-formsect:first-of-type { border-top: 0; padding-top: 0; }
.ys-formsect-head { display: flex; flex-direction: column; gap: 2px; }
.ys-formsect-head p { color: var(--ink-muted); }
.ys-formsect-body { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--reading-max); }
.ys-fieldrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: var(--reading-max); }
.ys-fieldrow .ys-field { max-width: none; }
.ys-savebar { display: flex; align-items: center; gap: var(--space-2); height: 60px; padding: 0 var(--space-6); border-top: var(--hairline) solid var(--line); background: var(--surface-raised); position: sticky; bottom: 0; }
.ys-savebar .ys-spacer { flex: 1; }
.ys-savebar-note { color: var(--ink-muted); }

/* Über bundle.css hinaus: FieldRow fällt unter 640px auf eine Spalte zurück (Regelkarte FieldRow). */
@media (max-width: 640px) { .ys .ys-fieldrow { grid-template-columns: minmax(0, 1fr) !important; } }
/* Über bundle.css hinaus: das Icon des DateField ist ein Knopf, der den Kalender öffnet; ohne eigene Gestalt. */
.ys-datefield-toggle { display: inline-flex; padding: 0; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; }
.ys-datefield-anchor { position: relative; display: block; }
.ys-datefield-popover { position: absolute; left: 0; top: 100%; margin-top: var(--space-1); z-index: 10; }
/* Planung und Reporting aus Schritt 7 (design-system/06-umsetzung.md). Regeln wie in components/bundle.css; Hover nur unter (hover: hover). */

/* ---------- SegmentedControl ---------- */
.ys-seg { display: inline-flex; height: var(--control-md); padding: 2px; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); gap: 2px; }
.ys-seg-sm { height: var(--control-sm); }
.ys-seg-item { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border: 0; border-radius: 4px; background: transparent; color: var(--ink-muted); cursor: pointer; font-family: inherit; }
.ys-seg-sm .ys-seg-item { padding: 0 var(--space-2); }
@media (hover: hover) {
  .ys-seg-item:hover { color: var(--ink); }
}
.ys-seg-item[aria-checked="true"] { background: var(--surface-sunken); color: var(--ink); }
.ys-seg-item svg { width: 14px; height: 14px; }

/* ---------- Schedule ---------- */
.ys-sched { border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); overflow: auto; }
.ys-sched-row { display: grid; align-items: stretch; }
.ys-sched-head { border-bottom: var(--hairline) solid var(--line); }
.ys-sched-corner { color: var(--ink-muted); padding: var(--space-2) var(--space-3); display: flex; align-items: flex-end; }
.ys-sched-day { padding: var(--space-2) var(--space-2) var(--space-1); border-left: var(--hairline) solid var(--line); display: flex; flex-direction: column; gap: 0; color: var(--ink); }
.ys-sched-day .app-caption { color: var(--ink-muted); }
.ys-sched-today .app-label { color: var(--ink); font-weight: 600; }
.ys-sched-sub { border-bottom: var(--hairline) solid var(--line); }
.ys-sched-slot { color: var(--ink-faint); padding: 2px var(--space-2); border-left: var(--hairline) solid var(--line); }
.ys-sched-group-label { color: var(--ink-muted); padding: var(--space-3) var(--space-3) var(--space-1); border-bottom: var(--hairline) solid var(--line); }
.ys-sched-res { min-height: 72px; border-bottom: var(--hairline) solid var(--line); position: relative; }
.ys-sched-res:last-child { border-bottom: 0; }
.ys-sched-label { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-3); gap: 0; }
.ys-sched-label .app-caption { color: var(--ink-muted); }
.ys-sched-cell { border-left: var(--hairline) solid var(--line); }
.ys-sched-cell:not(.ys-sched-cell-dayStart) { border-left-style: dashed; }
.ys-sched-cell-today { background: var(--surface-canvas); }
.ys-sched-block { margin: 6px 3px; padding: 5px 7px; hyphens: auto; -webkit-hyphens: auto; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--navy-soft); display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; overflow: hidden; z-index: 1; cursor: pointer; }
@media (hover: hover) {
  .ys-sched-block:hover { border-color: var(--line-strong); }
}
.ys-sched-block-label { font-weight: 500; line-height: 16px; overflow-wrap: break-word; }
.ys-sched-block-sub { line-height: 15px; overflow-wrap: break-word; }
.ys-sched-block-sub { color: var(--ink-muted); }
.ys-sched-danger { border-color: var(--danger); background: var(--danger-soft); }
.ys-sched-danger .ys-sched-block-sub { color: var(--danger); opacity: .85; }
.ys-sched-danger .ys-sched-block-label { color: var(--danger); }
.ys-sched-muted { border-color: var(--line); color: var(--ink-muted); background: var(--surface-raised); }
.ys-sched-muted .ys-sched-block-label { color: var(--ink-muted); }
.ys-sched-draft { border-style: dashed; background: transparent; border-color: var(--line-strong); }
.ys-sched-selected { outline: 2px solid var(--navy); outline-offset: -1px; background: var(--surface-raised); }
.ys-sched-now { border-left: 2px solid var(--ink); margin-left: -1px; z-index: 2; pointer-events: none; opacity: .5; }
/* Nicht in der Referenz: Blöcke sind Buttons (Tastatur), Zellen nehmen Zeilen aus „Ohne Termin“ an (03, Planung). */
button.ys-sched-block { text-align: left; color: inherit; font-family: inherit; }
.ys-sched-cell-drop { background: var(--navy-soft); }

/* ---------- KpiTile ---------- */
.ys-kpi { display: flex; flex-direction: column; gap: var(--space-1); min-width: 160px; }
.ys-kpi-label { color: var(--ink-muted); }
.ys-kpi-value { color: var(--ink); }
.ys-kpi-delta { display: inline-flex; align-items: center; gap: var(--space-1); }
.ys-kpi-delta svg { width: 14px; height: 14px; }
.ys-kpi-up { color: var(--success); }
.ys-kpi-down { color: var(--danger); }
.ys-kpi-success { color: var(--success); }
.ys-kpi-danger { color: var(--danger); }
.ys-kpi-neutral { color: var(--ink-muted); }
.ys-kpi-note { color: var(--ink-muted); }

/* ---------- Diagramme ---------- */
.ys-chart { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ys-chart-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.ys-chart-title .app-caption { color: var(--ink-muted); }
.ys-chart svg { display: block; overflow: visible; }
.ys-chart-tick { font-family: var(--font-sans); font-size: 11px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ys-chart-legend { display: flex; gap: var(--space-4); color: var(--ink-muted); }
.ys-chart-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ys-chart-legend i { width: 12px; height: 2px; display: inline-block; border-radius: 1px; }
/* Hallen-App aus Schritt 8 (design-system/06-umsetzung.md, 04). Regeln wie in components/bundle.css; Hover nur unter (hover: hover). */

/* ---------- Scope: in der Halle wird app-* 16px, Felder 56px (04) ---------- */
.ys-halle .app-body, .ys-halle .app-label, .ys-halle .app-body-strong, .ys-halle .app-cell { font-size: 16px; line-height: 22px; }
.ys-halle .app-caption { font-size: 16px; line-height: 22px; }
.ys-halle .ys-halle-conn, .ys-halle .ys-halle-timeout { font-size: 16px; line-height: 22px; }
.ys-halle .ys-avatar-lg { font-size: 16px; width: 36px; height: 36px; }
.ys-halle textarea { resize: none; }
.ys-halle .ys-badge-lg { height: 32px; }
.ys-halle .ys-control { height: var(--control-touch); border-radius: var(--radius-md); padding: 0 var(--space-4); }
.ys-halle .ys-control-area { height: auto; padding: var(--space-3) var(--space-4); }
.ys-halle .ys-check-box { width: 24px; height: 24px; }
.ys-halle .ys-check-box svg { width: 16px; height: 16px; }

/* ---------- HalleHeader ---------- */
.ys-halle-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 72px; padding: 0 var(--space-6); border-bottom: var(--hairline) solid var(--line); background: var(--surface-raised); }
.ys-halle-head-left, .ys-halle-head-right { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ys-halle-head-right { flex: none; }
.ys-halle-head-left { flex: 1; }
.ys-halle-mark { width: 40px; height: 29px; color: var(--navy); flex: none; }
.ys-halle-back { flex: none; }
.ys-halle-titles { display: flex; flex-direction: column; min-width: 0; }
.ys-halle-sub { color: var(--ink-muted); font-weight: 400; font-size: 16px; line-height: 22px; }
.ys-halle-conn { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.ys-halle-conn .ys-status-dot { background: var(--success); }
.ys-halle-conn-warning .ys-status-dot { background: var(--warning); }
.ys-halle-conn-warning { color: var(--warning); }
.ys-halle-user { display: flex; align-items: center; gap: var(--space-3); height: var(--control-touch); padding: 0 var(--space-3) 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); cursor: pointer; font-family: inherit; }
@media (hover: hover) {
  .ys-halle-user:hover { background: var(--surface-sunken); }
}
.ys-halle-timeout { color: var(--ink-muted); }

/* ---------- TouchRow ---------- */
.ys-touchrow { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: var(--control-touch); padding: var(--space-2) var(--space-4); border: 0; border-bottom: var(--hairline) solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font-family: inherit; border-radius: 0; }
.ys-touchrow:last-child { border-bottom: 0; }
.ys-touchrow-active { background: var(--navy-soft); }
.ys-touchrow-icon { width: 24px; height: 24px; color: var(--ink-muted); flex: none; }
.ys-touchrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ys-touchrow-sub { color: var(--ink-muted); }
.ys-touchrow-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ys-touchrow-chev { width: 20px; height: 20px; color: var(--ink-faint); flex: none; }

/* ---------- Stepper ---------- */
.ys-stepper { display: flex; flex-direction: column; gap: var(--space-2); }
.ys-stepper-label { color: var(--ink-muted); }
.ys-stepper-controls { display: flex; align-items: center; gap: var(--space-4); }
.ys-stepper-value { display: flex; align-items: baseline; gap: var(--space-2); min-width: 120px; justify-content: center; }
.ys-stepper-unit { color: var(--ink-muted); }

/* ---------- PinPad ---------- */
.ys-pinpad { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ys-pin-dots { display: flex; gap: var(--space-4); height: 24px; align-items: center; }
.ys-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); }
.ys-pin-dot-on { background: var(--ink); border-color: var(--ink); }
.ys-pin-error .ys-pin-dot { border-color: var(--danger); }
.ys-pin-error .ys-pin-dot-on { background: var(--danger); }
.ys-pin-msg { color: var(--ink-muted); min-height: 26px; }
.ys-pin-error + .ys-pin-msg { color: var(--danger); }
.ys-pin-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: var(--space-3); }
.ys-pin-key { height: 72px; width: 72px; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; font-family: inherit; }
@media (hover: hover) {
  .ys-pin-key:hover { background: var(--surface-sunken); }
}
.ys-pin-keys > .ys-pin-key, .ys-pin-keys > .ys-btn { width: 72px !important; height: 72px !important; min-width: 72px; }

/* ---------- PhotoTile ---------- */
.ys-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--surface-sunken); border: var(--hairline) solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-1); padding: 30px var(--space-3) var(--space-3); text-align: center; color: var(--ink-muted); }
.ys-photo-ph { width: 28px; height: 28px; color: var(--ink-faint); }
.ys-photo-cap { color: var(--ink); position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-2); text-align: left; overflow-wrap: break-word; }
.ys-photo-state { position: absolute; left: var(--space-3); top: var(--space-2); color: var(--ink-muted); }
.ys-photo-add { border: var(--hairline) dashed var(--line-strong); background: transparent; cursor: pointer; }
.ys-photo-add svg { width: 32px; height: 32px; color: var(--ink); }
.ys-photo-add { justify-content: center; padding-top: var(--space-3); }
.ys-photo-add .ys-photo-cap { position: static; text-align: center; color: var(--ink); }
/* Nicht in der Referenz: Kacheln sind Buttons (Antippen zum Löschen, 04) und erben Schrift und Breite. */
button.ys-photo { font-family: inherit; width: 100%; cursor: pointer; }

/* ---------- ScanResult ---------- */
.ys-scan { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
.ys-scan-row { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); }
.ys-scan-row svg { width: 18px; height: 18px; }
.ys-scan-time { margin-left: auto; }
.ys-scan-code { color: var(--ink); }
.ys-scan-sub { color: var(--ink-muted); }
.ys-scan-error { border-color: var(--danger); }
.ys-scan-error .ys-scan-row { color: var(--danger); }

/* ---------- Spalten ---------- */
/* Nicht in der Referenz: zwei Spalten ab 1024px, Auswahl links, Detail oder Fotos rechts; darunter eine Spalte (04). */
.ys-halle-spalten { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
.ys-halle-spalten-gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1023px) {
  .ys-halle-spalten, .ys-halle-spalten-gleich { grid-template-columns: minmax(0, 1fr); }
}
/* Boards aus Schritt 9 (design-system/06-umsetzung.md, 04). Regeln wie in components/bundle.css. */

/* ---------- Boards ---------- */
.ys-board-tile { background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-height: 200px; }
.ys-board-tile-title { color: var(--ink-muted); }
.ys-board-value { display: flex; align-items: baseline; gap: var(--space-2); color: var(--ink); }
.ys-board-unit { color: var(--ink-muted); }
.ys-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ys-board-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--hairline) solid var(--line); min-height: 48px; }
.ys-board-item-text { display: flex; flex-direction: column; min-width: 0; }
.ys-board-item-text .halle-body { overflow-wrap: break-word; }
.ys-board-item-sub { color: var(--ink-muted); font-size: 16px; line-height: 22px; }
.ys-board-item-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ys-board-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.ys-board-tile-meta { color: var(--ink-muted); white-space: nowrap; }
.ys-board-tile-foot { color: var(--ink-muted); font-size: 16px; line-height: 22px; }
.ys-board-tile-warning { border-color: var(--warning); }
.ys-board-tile-warning .ys-board-tile-title { color: var(--warning); }
.ys-board-progress { height: 1px; background: var(--line); border-radius: 1px; overflow: hidden; margin-top: auto; }
.ys-board-progress span { display: block; height: 100%; width: 40%; background: var(--line-strong); }
/* ---------- BoardShell ---------- */
.ys-board { display: flex; flex-direction: column; width: 1920px; height: 1080px; background: var(--surface-canvas); color: var(--ink); padding: 40px 48px 32px; gap: 32px; box-sizing: border-box; }
.ys-board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.ys-board-head-left { display: flex; align-items: baseline; gap: var(--space-4); }
.ys-board-sub { color: var(--ink-muted); font-weight: 400; }
.ys-board-head-right { display: flex; align-items: center; gap: var(--space-8); }
.ys-board-conn { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-weight: 400; }
.ys-board-conn .ys-status-dot { background: var(--success); width: 10px; height: 10px; }
.ys-board-conn-warning .ys-status-dot { background: var(--warning); }
.ys-board-conn-warning { color: var(--warning); }
.ys-board-time { font-variant-numeric: tabular-nums; margin-left: var(--space-4); }
/* Boards aus sechs Metern: nichts unter 18px außer Fußnoten */
.ys-board .app-body, .ys-board .app-body-strong, .ys-board .app-label, .ys-board .ys-board-item-sub, .ys-board .ys-board-tile-foot { font-size: 18px; line-height: 26px; }
.ys-board .ys-badge-lg { height: 36px; padding: 0 var(--space-3); }
.ys-board .ys-badge svg { width: 18px; height: 18px; }
.ys-board .ys-board-list li { min-height: 60px; }
.ys-board-brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); }
.ys-board-mark { width: 36px; height: 26px; color: var(--ink); }
.ys-board-brand .ys-wordmark { font-size: 22px; }
.ys-board-grid { flex: 1; display: grid; grid-auto-rows: minmax(0, 1fr); gap: var(--space-6); min-height: 0; }
.ys-board .ys-board-tile { min-height: 0; overflow: hidden; }
.ys-board-foot { display: flex; align-items: center; gap: var(--space-6); }
.ys-board-rot-label { color: var(--ink-muted); white-space: nowrap; font-weight: 400; }
.ys-board-rot { flex: 1; height: 1px; background: var(--line); border-radius: 1px; overflow: hidden; }
.ys-board-rot span { display: block; height: 100%; background: var(--line-strong); transition: width 1s linear; }
.ys-board-light { background: var(--surface-raised); }
.ys-pairing { align-items: center; justify-content: center; }
.ys-pairing-in { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); max-width: 720px; text-align: center; }
.ys-pairing-lead { color: var(--ink-muted); }
.ys-pairing-code { font-family: var(--font-mono); font-weight: 500; font-size: 128px; line-height: 136px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.ys-pairing-steps { margin: 0; padding-left: 1.2em; text-align: left; display: flex; flex-direction: column; gap: var(--space-2); }
.ys-pairing-note { color: var(--ink-muted); font-size: 16px; line-height: 22px; }
/* Portale und Belege aus Schritt 10 (design-system/06-umsetzung.md, 05). Regeln wie in components/bundle.css;
   Hover nur unter (hover: hover). Belege tragen ihre festen Farben als Tokens im festen Light-Theme (DocumentPage
   setzt data-theme="light"): #0f1f3a ist ink, #4f5f7a ink-muted, #d9dfe6 line, #e8ecf0 surface-sunken. */

.ys-doc { width: 794px; min-height: 1123px; padding: 76px 76px 60px; background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 10pt; line-height: 14pt; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; position: relative; }
.ys-doc * { box-sizing: border-box; }
.ys-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ys-doc-brand { display: flex; align-items: center; gap: 10px; }
.ys-doc-brand svg { height: 28px; width: auto; }
.ys-doc-tenant { font-size: 16pt; font-weight: 600; letter-spacing: -0.01em; }
.ys-doc-sender { text-align: right; color: var(--ink-muted); font-size: 8pt; line-height: 11pt; white-space: pre-line; }
.ys-doc-addr { display: grid; grid-template-columns: 1fr 240px; gap: 24px; margin-top: 16px; }
.ys-doc-addr-block { display: flex; flex-direction: column; }
.ys-doc-return { font-size: 7pt; color: var(--ink-muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; margin-bottom: 8px; width: 85mm; }
.ys-doc-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 9pt; line-height: 12pt; align-content: start; }
.ys-doc-meta div { display: contents; }
.ys-doc-meta dt { color: var(--ink-muted); }
.ys-doc-meta dd { margin: 0; text-align: right; }
.ys-doc-mono { font-family: var(--font-mono); font-size: 9pt; }
.ys-doc-title { font-size: 14pt; line-height: 18pt; font-weight: 600; margin: 8px 0 0; letter-spacing: -0.01em; }
.ys-doc-p { margin: 0; max-width: 150mm; }
.ys-doc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ys-doc-table th { text-align: left; font-weight: 500; font-size: 8pt; color: var(--ink-muted); padding: 6px 8px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.ys-doc-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ys-doc-table .ys-right { text-align: right; }
.ys-doc-sums { align-self: flex-end; width: 260px; display: flex; flex-direction: column; }
.ys-doc-sum { display: flex; justify-content: space-between; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.ys-doc-sum-strong { font-weight: 600; border-bottom: 2px solid var(--ink); }
.ys-doc-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; font-size: 7.5pt; line-height: 10.5pt; color: var(--ink-muted); }
.ys-doc-foot div { display: flex; flex-direction: column; }
.ys-doc-page { text-align: right; }
.ys-portal p a, .ys-portal small a { color: var(--info); }
.ys-portal { --navy: var(--tenant); --on-navy-fill: var(--on-navy); }
.ys-topnav { background: var(--surface-raised); border-bottom: var(--hairline) solid var(--line); }
.ys-topnav-in { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); height: 64px; display: flex; align-items: center; gap: var(--space-8); }
.ys-topnav-compact .ys-topnav-in { height: 56px; padding: 0 var(--space-4); gap: var(--space-3); }
.ys-topnav-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.ys-topnav-name { font-weight: 600; letter-spacing: -0.01em; font-size: 16px; }
.ys-topnav-portal { color: var(--ink-muted); padding-left: var(--space-3); border-left: var(--hairline) solid var(--line); }
.ys-topnav-links { display: flex; gap: var(--space-6); flex: 1; }
.ys-topnav-links a { color: var(--ink-muted); text-decoration: none; display: inline-flex; gap: var(--space-1); align-items: center; height: 64px; border-bottom: 2px solid transparent; }
.ys-topnav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--navy); }
.ys-topnav-count { color: var(--ink-muted); }
.ys-topnav-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.ys-topnav-user { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-2); border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; font-family: inherit; }
.ys-topnav-user svg { width: 14px; height: 14px; color: var(--ink-muted); }
.mono-id, .mono-id-lg, .mono-id-xl, .ys-doc-mono, .ys-nowrap { white-space: nowrap; }
.ys-topnav-org { color: var(--ink-muted); padding-left: 8px; border-left: var(--hairline) solid var(--line); }
.ys-portal .ys-btn-lg { font-size: 16px; line-height: 24px; }
.ys-portal b, .ys-portal strong { font-weight: 600; }
.ys-portal .ys-topnav-user { height: var(--control-lg); }
.ys-portal .ys-topnav-compact .ys-btn { width: var(--control-lg); height: var(--control-lg); }
.ys-portal textarea, .ys-portal input { font-size: 16px; line-height: 24px; }
.ys-tenant-logo { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--tenant, var(--navy)); color: var(--on-navy); display: grid; place-items: center; font-weight: 600; font-size: 13px; letter-spacing: .02em; flex: none; }
.ys-portal .ys-avatar { background: var(--surface-sunken); color: var(--ink-muted); }
@media (hover: hover) {
  .ys-topnav-links a:hover { color: var(--ink); }
  .ys-topnav-user:hover { background: var(--surface-sunken); }
}

/* Nicht in der Referenz: Druck eines Belegs als A4 ohne Rand des Browsers; nur der Beleg erscheint (05, Format). */
@page { size: A4; margin: 0; }
@media print {
  .ys-doc-druck-aus { display: none !important; }
  .ys-doc { min-height: 297mm; width: 210mm; }
}

/* Nicht in der Referenz: Seitenraster der Portale nach 05 (Aufbau, Verlauf, Handy; die sticky Handlung steht
   per order nach der Fußzeile) und den Screens PortalKV und
   PortalPhone. Portaltext 16px/24px wie .ys-portal textarea der Referenz; Titel über mk-heading-sm. */
.ys-portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-canvas); }
.ys-portal-text { font-size: 16px; line-height: 24px; }
.ys-portal-wrap { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); width: 100%; display: flex; flex-direction: column; gap: var(--space-6); flex: 1; }
.ys-portal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.ys-portal-head h1 { margin: 0; }
.ys-portal-head p { margin: var(--space-1) 0 0; color: var(--ink-muted); text-wrap: pretty; }
.ys-portal-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
.ys-portal-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.ys-portal-card { background: var(--surface-raised); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ys-portal-card h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.ys-portal-card p { margin: 0; text-wrap: pretty; }
.ys-portal-muted { color: var(--ink-muted); }
.ys-portal-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.ys-portal-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ys-portal-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ys-portal-step { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--hairline) solid var(--line); }
.ys-portal-step b { font-weight: 600; }
.ys-portal-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; flex: none; background: var(--ink); }
.ys-portal-step-next { color: var(--ink-muted); }
.ys-portal-step-next .ys-portal-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-muted); }
.ys-portal-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; }
.ys-portal-facts dt { color: var(--ink-muted); }
.ys-portal-facts dd { margin: 0; }
.ys-portal-sums { display: flex; justify-content: flex-end; gap: var(--space-8); padding: var(--space-3) var(--space-3) 0; flex-wrap: wrap; }
.ys-portal-sums b { font-weight: 600; }
.ys-portal-pos { display: flex; flex-direction: column; border-top: var(--hairline) solid var(--line); }
.ys-portal-pos > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); }
.ys-portal-pos .ys-portal-pos-head { color: var(--ink-muted); padding: var(--space-1) 0; }
.ys-portal-pos .ys-portal-pos-sum { font-weight: 600; border-bottom: 0; }
.ys-portal-pos .ys-portal-pos-m { color: var(--ink-muted); white-space: nowrap; }
.ys-portal-foot { border-top: var(--hairline) solid var(--line); background: var(--surface-raised); }
.ys-portal-foot-in { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); color: var(--ink-muted); flex-wrap: wrap; }
.ys-portal-foot a { color: var(--ink-muted); }
.ys-portal-sticky { order: 1; position: sticky; bottom: 0; padding: var(--space-3) var(--space-4) var(--space-6); background: var(--surface-raised); border-top: var(--hairline) solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
.ys-portal-sticky small { color: var(--ink-muted); }
.ys-portal-schmal .ys-portal-wrap { padding: var(--space-4); gap: var(--space-4); }
.ys-portal-schmal .ys-portal-card { padding: var(--space-4); gap: var(--space-3); }
.ys-portal-schmal .ys-portal-head { flex-direction: column-reverse; gap: var(--space-2); }
.ys-portal-schmal .ys-portal-facts { grid-template-columns: 112px minmax(0, 1fr); }
.ys-portal-schmal .ys-portal-step { border-top: 0; padding: var(--space-1) 0; }
.ys-portal-schmal .ys-portal-step span:last-child b { display: block; }
.ys-portal-schmal .ys-portal-foot { background: transparent; border-top: 0; }
.ys-portal-schmal .ys-portal-foot-in { flex-direction: column; gap: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.ys-doc-brand .ys-tenant-logo { width: 28px; height: 28px; font-size: 11px; }
.ys-portal-tablebox { overflow-x: auto; }
.ys-portal-zustand { display: flex; flex-direction: column; padding: var(--space-1) 0; }
.ys-doc-buehne { padding: var(--space-10) var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); background: var(--surface-canvas); min-height: 100vh; }
.ys-doc-buehne .ys-doc { border: var(--hairline) solid var(--line); }
@media print {
  .ys-doc-buehne { padding: 0; background: none; }
  .ys-doc-buehne .ys-doc { border: 0; }
}
/* Nicht in der Referenz: Wissen und Analyse aus Schritt 11 (design-system/03-applikation.md, Wissen und Analyse).
   Fragefeld 44px wie die globale Suche mit primärem Button daneben; Ergebnissatz 15px/24px bis 760px, wie 03 ihn
   festlegt; Antwort als dreispaltige Liste mit Haarlinien. */
.ys-frage { display: flex; gap: var(--space-2); align-items: center; }
.ys-frage .ys-control { flex: 1; }
.ys-frage-bezug { color: var(--ink-muted); white-space: nowrap; }
.ys-antwort { display: flex; flex-direction: column; gap: var(--space-3); max-width: 800px; }
.ys-antwort-kopf { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); flex-wrap: wrap; }
.ys-antwort-satz { margin: 0; font-size: 15px; line-height: 24px; max-width: 760px; text-wrap: pretty; }
.ys-antwort-liste { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto; margin: 0; border-top: var(--hairline) solid var(--line); }
.ys-antwort-liste > div { display: contents; }
.ys-antwort-liste dt, .ys-antwort-liste dd { margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--hairline) solid var(--line); }
.ys-antwort-liste dt { color: var(--ink-muted); }
.ys-antwort-quelle { color: var(--ink-muted); white-space: nowrap; padding-right: 0; }
.ys-antwort-aktionen { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: calc(-1 * var(--space-3)); }
/* Nicht in der Referenz: Anmeldeseite (design-system/03-applikation.md, Anmelden; screens/png/Login.png). Weiße Seite,
   Zeichen und Wortmarke oben links, Formular 360px, Fußzeile mit Haarlinie; keine Fotos, kein Navy-Band. */
.ys-anmelden { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-raised); }
.ys-anmelden-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-8); }
.ys-anmelden-marke { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.ys-anmelden-marke svg { width: 40px; height: 29px; display: block; color: var(--navy); }
.ys-anmelden-marke .ys-wordmark { font-size: 19px; }
.ys-anmelden-kopf a, .ys-anmelden-fuss a, .ys-anmelden-links button { color: var(--ink-muted); text-decoration: none; }
.ys-anmelden-mitte { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-16) var(--space-6) var(--space-12); }
.ys-anmelden-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-5); }
.ys-anmelden-form h1 { margin: 0; }
.ys-anmelden-form p { margin: 0; color: var(--ink-muted); text-wrap: pretty; }
.ys-anmelden-oder { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-muted); }
.ys-anmelden-oder::before, .ys-anmelden-oder::after { content: ""; flex: 1; height: var(--hairline); background: var(--line); }
.ys-anmelden-links { display: flex; justify-content: space-between; gap: var(--space-4); }
.ys-anmelden-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ys-anmelden-fuss { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-8); border-top: var(--hairline) solid var(--line); color: var(--ink-muted); flex-wrap: wrap; }
.ys-anmelden-fuss span:last-child { display: flex; gap: var(--space-4); }
@media (hover: hover) {
  .ys-anmelden-kopf a:hover, .ys-anmelden-fuss a:hover, .ys-anmelden-links button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
}