/* Office Hero — Komponenten-Stylesheet. Alle Farben, Abstände, Radien und Maße kommen aus tokens.json (var(--…)).
   Schriftgrößen spiegeln die Typo-Stile aus tokens.json: body 16/24, body-sm 14/20, label 14/20·500, meta 12/16·500. */

/* ---------- Basis ---------- */
.oh, .oh * { box-sizing: border-box; }
.oh { font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--text-primary); -webkit-font-smoothing: antialiased; }
.oh-num { font-variant-numeric: tabular-nums; }
.oh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.oh :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.oh-on-dark :focus-visible { outline-color: var(--focus-ring-on-dark); }
.oh-stack { display: flex; flex-direction: column; gap: var(--space-16); }
.oh-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.oh-eyebrow { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.oh-muted { color: var(--text-secondary); }
.oh-pagebg { background: var(--background); padding: var(--space-24); min-height: 100%; }

/* ---------- Icons (24er Raster, 2px Linie; erben currentColor) ---------- */
.oh-icon { display: inline-block; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: middle; }
.oh-icon--16 { width: 16px; height: 16px; }
:root {
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19L12 3.5z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.2v.3'/%3E%3C/svg%3E");
  --i-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.2v.3'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.7v.3'/%3E%3C/svg%3E");
  --i-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.7'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 3.5L10 14'/%3E%3Cpath d='M20.5 3.5l-6.5 17-4-6.5-6.5-4 17-6.5z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3C/svg%3E");
  --i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  --i-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9.5l4-4 4 4'/%3E%3Cpath d='M8 14.5l4 4 4-4'/%3E%3C/svg%3E");
  --i-sort-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6.5 10.5L12 5l5.5 5.5'/%3E%3C/svg%3E");
  --i-sort-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6.5 13.5L12 19l5.5-5.5'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16'/%3E%3Cpath d='M9 6.5V4h6v2.5'/%3E%3Cpath d='M6 6.5l1 13.5h10l1-13.5'/%3E%3Cpath d='M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E");
  --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17'/%3E%3Cpath d='M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4.5 4.5V21H6z'/%3E%3Cpath d='M14 3v4.5h4.5'/%3E%3Cpath d='M9 13h6M9 16.5h6'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6.5L20.5 7'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --i-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.5h10V9'/%3E%3Crect x='3.5' y='9' width='17' height='8' rx='2'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3C/svg%3E");
  --i-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16'/%3E%3Cpath d='M7 12h10'/%3E%3Cpath d='M10 18.5h4'/%3E%3C/svg%3E");
  --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.5'/%3E%3Cpath d='M3 20c.5-3.5 3-5.5 6-5.5s5.5 2 6 5.5'/%3E%3Cpath d='M15.5 5.2a3.5 3.5 0 0 1 0 6.6'/%3E%3Cpath d='M17.5 14.8c2 .6 3.2 2.4 3.5 5.2'/%3E%3C/svg%3E");
  --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5V20h-5.5v-6h-5v6H4z'/%3E%3C/svg%3E");
  --i-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E");
  --i-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2'/%3E%3Cpath d='M15.5 8.5V5a1.5 1.5 0 0 0-1.5-1.5H5A1.5 1.5 0 0 0 3.5 5v9A1.5 1.5 0 0 0 5 15.5h3.5'/%3E%3C/svg%3E");
  --i-euro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5a6.5 6.5 0 1 0 0 11'/%3E%3Cpath d='M4.5 10.5h9M4.5 13.5h9'/%3E%3C/svg%3E");
  --i-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='18.5' cy='12' r='1.2'/%3E%3C/svg%3E");
}
.oh-i-check { --i: var(--i-check); }
.oh-i-alert { --i: var(--i-alert); }
.oh-i-error { --i: var(--i-error); }
.oh-i-info { --i: var(--i-info); }
.oh-i-success { --i: var(--i-success); }
.oh-i-lock { --i: var(--i-lock); }
.oh-i-send { --i: var(--i-send); }
.oh-i-search { --i: var(--i-search); }
.oh-i-chevron-down { --i: var(--i-chevron-down); }
.oh-i-sort { --i: var(--i-sort); }
.oh-i-sort-up { --i: var(--i-sort-up); }
.oh-i-sort-down { --i: var(--i-sort-down); }
.oh-i-plus { --i: var(--i-plus); }
.oh-i-trash { --i: var(--i-trash); }
.oh-i-calendar { --i: var(--i-calendar); }
.oh-i-file { --i: var(--i-file); }
.oh-i-mail { --i: var(--i-mail); }
.oh-i-close { --i: var(--i-close); }
.oh-i-clock { --i: var(--i-clock); }
.oh-i-print { --i: var(--i-print); }
.oh-i-filter { --i: var(--i-filter); }
.oh-i-users { --i: var(--i-users); }
.oh-i-home { --i: var(--i-home); }
.oh-i-settings { --i: var(--i-settings); }
.oh-i-copy { --i: var(--i-copy); }
.oh-i-euro { --i: var(--i-euro); }
.oh-i-more { --i: var(--i-more); }


/* ---------- Button ---------- */
.oh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--control-height); padding: 0 var(--space-16); border: var(--border-width) solid transparent; border-radius: var(--radius-control); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.oh-btn--primary { background: var(--brand-lime); color: var(--on-lime); border-color: var(--brand-lime); }
.oh-btn--primary:hover, .oh-btn--primary.is-hover { background: var(--brand-lime-hover); border-color: var(--brand-lime-hover); }
.oh-btn--primary:active, .oh-btn--primary.is-active { background: var(--brand-lime-hover); box-shadow: inset 0 0 0 var(--border-width) var(--on-lime); }
.oh-btn--brand { background: var(--brand-forest); color: var(--on-forest); border-color: var(--brand-forest); }
.oh-btn--brand:hover, .oh-btn--brand.is-hover { background: var(--brand-forest-hover); }
.oh-btn--secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.oh-btn--secondary:hover, .oh-btn--secondary.is-hover { background: var(--state-hover); }
.oh-btn--secondary:active, .oh-btn--secondary.is-active { background: var(--surface-muted); }
.oh-btn--quiet { background: transparent; color: var(--text-primary); }
.oh-btn--quiet:hover, .oh-btn--quiet.is-hover { background: var(--state-hover); }
.oh-btn--danger { background: var(--surface); color: var(--error); border-color: var(--border-strong); }
.oh-btn--danger:hover, .oh-btn--danger.is-hover { background: var(--error-surface); border-color: var(--error); }
.oh-btn--icon { padding: 0; width: var(--control-height); }
.oh-btn.is-focus { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.oh-btn:disabled, .oh-btn[aria-disabled="true"] { background: var(--state-disabled); color: var(--text-disabled); border-color: var(--state-disabled); cursor: not-allowed; box-shadow: none; }
.oh-btn[aria-busy="true"] { cursor: progress; }
.oh-btn[aria-busy="true"] .oh-spinner { width: 16px; height: 16px; border-width: 2px; }

/* ---------- Felder ---------- */
.oh-field { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.oh-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); }
.oh-req { color: var(--error); margin-left: 2px; }
.oh-help { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 0; }
.oh-error-text { display: flex; gap: var(--space-4); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--error); margin: 0; }
.oh-error-text .oh-icon { margin-top: 2px; width: 16px; height: 16px; }
.oh-input, .oh-select { width: 100%; min-height: var(--control-height); padding: 0 var(--space-12); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 16px; line-height: 24px; }
.oh-input::placeholder { color: var(--text-secondary); }
.oh-input:hover, .oh-select:hover, .oh-input.is-hover { border-color: var(--text-primary); }
.oh-input:focus-visible, .oh-select:focus-visible, .oh-input.is-focus { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; border-color: var(--text-primary); }
.oh-input[aria-invalid="true"], .oh-select[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 var(--border-width) var(--error); }
.oh-input[readonly] { background: var(--surface-muted); border-color: var(--border-subtle); }
.oh-input:disabled, .oh-select:disabled { background: var(--state-disabled); color: var(--text-disabled); border-color: var(--border-subtle); cursor: not-allowed; }
.oh-input--amount { text-align: right; font-variant-numeric: tabular-nums; }
.oh-affix { position: relative; display: flex; }
.oh-affix .oh-input { padding-right: 36px; }
.oh-affix__end { position: absolute; right: var(--space-12); top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
.oh-affix--start .oh-input { padding-right: var(--space-12); padding-left: 40px; }
.oh-affix--start .oh-affix__end { right: auto; left: var(--space-12); }
.oh-select { appearance: none; padding-right: 40px; }
.oh-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-16) var(--space-24); }

/* ---------- Combobox ---------- */
.oh-combo { position: relative; }
.oh-listbox { list-style: none; margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--surface); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); max-height: 280px; overflow: auto; }
.oh-option { display: flex; align-items: center; gap: var(--space-12); min-height: var(--control-height); padding: var(--space-8) var(--space-12); border-radius: var(--radius-control); cursor: pointer; }
.oh-option__meta { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.oh-option:hover, .oh-option.is-active { background: var(--state-hover); }
.oh-option[aria-selected="true"] { background: var(--state-selected); box-shadow: inset 2px 0 0 var(--brand-forest); }
.oh-option .oh-icon { margin-left: auto; }
.oh-option mark { background: none; color: inherit; font-weight: 600; }

/* ---------- Checkbox, Radio, Switch ---------- */
.oh-choice { display: flex; align-items: flex-start; gap: var(--space-12); min-height: var(--control-height); padding: var(--space-12) 0; cursor: pointer; font-size: 16px; line-height: 20px; }
.oh-choice input { appearance: none; flex: none; margin: 0; width: 20px; height: 20px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.oh-choice input[type="checkbox"] { border-radius: var(--radius-sm); }
.oh-choice input[type="radio"] { border-radius: 50%; }
.oh-choice input:hover { border-color: var(--text-primary); }
.oh-choice input:checked { background: var(--brand-forest); border-color: var(--brand-forest); }
.oh-choice input[type="checkbox"]:checked::after { content: ""; width: 14px; height: 14px; background: var(--on-forest); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.oh-choice input[type="radio"]:checked { background: var(--surface); border-width: 6px; }
.oh-choice input:disabled { background: var(--state-disabled); border-color: var(--border-subtle); cursor: not-allowed; }
.oh-choice:has(input:disabled) { color: var(--text-disabled); cursor: not-allowed; }
.oh-choice input[aria-invalid="true"] { border-color: var(--error); }
.oh-choice__hint { display: block; font-size: 14px; line-height: 20px; color: var(--text-secondary); margin-top: 2px; }
.oh-fieldset { border: 0; margin: 0; padding: 0; }
.oh-fieldset legend { padding: 0; margin-bottom: var(--space-4); }
.oh-switch { position: relative; appearance: none; flex: none; margin: 0; width: 40px !important; height: 24px !important; border-radius: 12px !important; border: 2px solid var(--border-strong) !important; background: var(--surface-muted) !important; cursor: pointer; }
.oh-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--border-strong); transition: transform .12s; }
.oh-switch:checked { background: var(--brand-forest) !important; border-color: var(--brand-forest) !important; }
.oh-switch:checked::after { transform: translateX(16px); background: var(--brand-lime); -webkit-mask: none; mask: none; }

/* ---------- Fehlerzusammenfassung, Meldungen ---------- */
.oh-alert { display: flex; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-card); border: var(--border-width) solid; }
.oh-alert__title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.oh-alert p { margin: 0; font-size: 14px; line-height: 20px; }
.oh-alert ul { margin: var(--space-8) 0 0; padding-left: 20px; font-size: 14px; line-height: 20px; }
.oh-alert a { color: inherit; font-weight: 500; text-underline-offset: 2px; }
.oh-alert > .oh-icon { margin-top: 2px; }
.oh-alert--error { background: var(--error-surface); border-color: var(--error); color: var(--text-primary); }
.oh-alert--error > .oh-icon, .oh-alert--error a { color: var(--error); }
.oh-alert--success { background: var(--success-surface); border-color: var(--success); }
.oh-alert--success > .oh-icon { color: var(--success); }
.oh-alert--warning { background: var(--warning-surface); border-color: var(--warning); }
.oh-alert--warning > .oh-icon { color: var(--warning); }
.oh-alert--info { background: var(--info-surface); border-color: var(--info); }
.oh-alert--info > .oh-icon { color: var(--info); }

/* ---------- Status-Badge ---------- */
.oh-badge { display: inline-flex; align-items: center; gap: var(--space-4); padding: 2px var(--space-8) 2px 6px; border-radius: var(--radius-sm); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; border: var(--border-width) solid transparent; }
.oh-badge .oh-icon { width: 14px; height: 14px; }
.oh-badge--neutral { background: var(--surface-muted); color: var(--text-primary); border-color: var(--border-subtle); }
.oh-badge--draft { background: var(--surface); color: var(--text-secondary); border: var(--border-width) dashed var(--border-strong); }
.oh-badge--issued { background: var(--brand-forest); color: var(--on-forest); }
.oh-badge--success { background: var(--success-surface); color: var(--success); }
.oh-badge--warning { background: var(--warning-surface); color: var(--warning); }
.oh-badge--error { background: var(--error-surface); color: var(--error); }
.oh-badge--info { background: var(--info-surface); color: var(--info); }

/* ---------- Navigation ---------- */
.oh-nav { display: flex; flex-direction: column; gap: var(--space-24); width: 240px; padding: var(--space-16); background: var(--brand-forest); color: var(--on-forest); }
.oh-nav__brand { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-8); color: var(--on-forest); text-decoration: none; font-size: 18px; line-height: 26px; font-weight: 600; }
.oh-nav__brand svg { width: 32px; height: 32px; fill: currentColor; }
.oh-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.oh-nav__link { display: flex; align-items: center; gap: var(--space-12); min-height: var(--control-height); padding: 0 var(--space-12); border-radius: var(--radius-control); color: var(--on-forest); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 500; }
.oh-nav__link:hover { background: var(--brand-forest-hover); }
.oh-nav__link[aria-current="page"] { background: var(--brand-forest-hover); box-shadow: inset 3px 0 0 var(--brand-lime); }
.oh-nav__count { margin-left: auto; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.oh-topbar { display: flex; align-items: center; gap: var(--space-16); height: 56px; padding: 0 var(--space-16); background: var(--brand-forest); color: var(--on-forest); }

/* ---------- Seitenkopf ---------- */
.oh-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-16); padding-bottom: var(--space-24); }
.oh-pagehead h1 { margin: 0; font-size: 30px; line-height: 38px; font-weight: 500; letter-spacing: -0.005em; }
.oh-pagehead__meta { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.oh-crumbs { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin-bottom: var(--space-4); }
.oh-crumbs a { color: var(--text-secondary); }
@media (max-width: 640px) { .oh-pagehead h1 { font-size: 24px; line-height: 32px; } }

/* ---------- Karte, Adressblock ---------- */
.oh-card { background: var(--surface); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-24); }
.oh-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-16); }
.oh-card__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.oh-address { font-style: normal; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.oh-address strong { font-weight: 600; }
.oh-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-4) var(--space-16); margin: var(--space-16) 0 0; font-size: 14px; line-height: 20px; }
.oh-dl dt { color: var(--text-secondary); }
.oh-dl dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Tabellen ---------- */
.oh-tablewrap { background: var(--surface); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); overflow-x: auto; }
.oh-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.oh-table th { height: 40px; padding: 0 var(--space-12); background: var(--surface-muted); color: var(--text-secondary); font-weight: 500; text-align: left; white-space: nowrap; border-bottom: var(--border-width) solid var(--border-subtle); }
.oh-table td { height: var(--row-height); padding: var(--space-8) var(--space-12); border-bottom: var(--border-width) solid var(--border-subtle); vertical-align: middle; }
.oh-table tbody tr:last-child td { border-bottom: 0; }
.oh-table tbody tr:hover td { background: var(--state-hover); }
.oh-table tr[aria-selected="true"] td { background: var(--state-selected); }
.oh-table tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--brand-forest); }
.oh-table--compact td { height: var(--row-height-compact); padding-top: var(--space-4); padding-bottom: var(--space-4); }
.oh-table td.oh-num { white-space: nowrap; }
.oh-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-table .is-check { width: 44px; padding-right: 0; }
.oh-table .is-check .oh-choice { min-height: 0; padding: 0; }
.oh-table a { color: var(--text-primary); font-weight: 500; text-underline-offset: 2px; }
.oh-sort { display: inline-flex; align-items: center; gap: var(--space-4); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-sm); }
.oh-sort:hover { color: var(--text-primary); }
th[aria-sort="ascending"] .oh-sort, th[aria-sort="descending"] .oh-sort { color: var(--text-primary); }
.oh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); padding: var(--space-12); border-bottom: var(--border-width) solid var(--border-subtle); }
.oh-toolbar .oh-affix { flex: 1 1 260px; max-width: 360px; }
.oh-chip { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 36px; padding: 0 var(--space-12); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-primary); cursor: pointer; }
.oh-chip:hover { background: var(--state-hover); }
.oh-chip[aria-pressed="true"] { background: var(--state-selected); border-color: var(--brand-forest); }
.oh-tablefoot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-12); border-top: var(--border-width) solid var(--border-subtle); font-size: 14px; line-height: 20px; color: var(--text-secondary); }

/* ---------- Rechnungspositionen ---------- */
.oh-lines td { vertical-align: top; padding-top: var(--space-8); }
.oh-lines .oh-input { min-height: 40px; font-size: 14px; line-height: 20px; padding: 0 var(--space-8); }
.oh-lines textarea.oh-input { padding: var(--space-8); min-height: 40px; resize: vertical; }
.oh-lines .oh-btn--icon { min-height: 40px; width: 40px; }
.oh-lines__pos { color: var(--text-secondary); padding-top: 18px !important; font-variant-numeric: tabular-nums; }
.oh-lines__sum { padding-top: 18px !important; }

/* ---------- Summen ---------- */
.oh-totals { margin-left: auto; width: 100%; max-width: 360px; background: var(--surface-muted); border-radius: var(--radius-card); padding: var(--space-16); font-size: 14px; line-height: 20px; }
.oh-totals dl { display: grid; grid-template-columns: 1fr auto; row-gap: var(--space-8); margin: 0; }
.oh-totals dt { color: var(--text-secondary); }
.oh-totals dd { margin: 0; padding-left: var(--space-16); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-totals .is-total { border-top: var(--border-width) solid var(--border-strong); padding-top: var(--space-12); margin-top: var(--space-4); color: var(--text-primary); font-size: 18px; line-height: 26px; font-weight: 600; }

/* ---------- Dialog ---------- */
.oh-backdrop { position: relative; display: grid; place-items: center; padding: var(--space-24); background: var(--overlay-scrim); min-height: 100%; }
.oh-dialog { width: 100%; max-width: 480px; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); padding: var(--space-24); }
.oh-dialog__title { margin: 0 0 var(--space-8); font-size: 18px; line-height: 26px; font-weight: 600; }
.oh-dialog__body { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-primary); }
.oh-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-24); }

/* ---------- Benachrichtigung ---------- */
.oh-toast { display: flex; align-items: flex-start; gap: var(--space-12); width: 100%; max-width: 400px; padding: var(--space-12) var(--space-12) var(--space-12) var(--space-16); background: var(--surface); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); font-size: 14px; line-height: 20px; }
.oh-toast > .oh-icon { margin-top: 0; }
.oh-toast__title { font-weight: 600; margin: 0; }
.oh-toast p { margin: 0; color: var(--text-secondary); }
.oh-toast .oh-btn--icon { margin: -8px -4px -8px auto; min-height: 36px; width: 36px; }
.oh-toast--success > .oh-icon { color: var(--success); }
.oh-toast--error > .oh-icon { color: var(--error); }
.oh-toast--info > .oh-icon { color: var(--info); }
.oh-toast--warning > .oh-icon { color: var(--warning); }

/* ---------- Leer- und Ladezustand ---------- */
.oh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-8); padding: var(--space-48) var(--space-24); }
.oh-empty__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-card); background: var(--surface-muted); color: var(--text-secondary); margin-bottom: var(--space-8); }
.oh-empty__title { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.oh-empty p { margin: 0 0 var(--space-8); max-width: 400px; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.oh-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border-subtle); border-top-color: var(--brand-forest); border-radius: 50%; animation: oh-spin .8s linear infinite; }
.oh-btn--primary .oh-spinner { border-color: var(--brand-lime-hover); border-top-color: var(--on-lime); }
@keyframes oh-spin { to { transform: rotate(360deg); } }
.oh-skel { display: block; height: 12px; border-radius: var(--radius-sm); background: var(--surface-muted); }
@media (prefers-reduced-motion: reduce) { .oh-spinner { animation-duration: 2.4s; } .oh-btn, .oh-switch::after { transition: none; } }

/* ---------- Rechnungsdokument (Druck) ---------- */
.oh-doc { width: 100%; max-width: 794px; margin: 0 auto; background: var(--surface); color: var(--text-primary); padding: var(--space-48); font-size: 13px; line-height: 19px; border: var(--border-width) solid var(--border-subtle); }
.oh-doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-24); }
.oh-doc__logo { display: flex; align-items: center; gap: var(--space-8); font-size: 16px; line-height: 24px; font-weight: 600; }
.oh-doc__logo svg { width: 40px; height: 40px; fill: var(--text-primary); }
.oh-doc__sender { text-align: right; color: var(--text-secondary); font-size: 12px; line-height: 17px; }
.oh-doc__addr { margin-top: var(--space-48); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-24); }
.oh-doc__return { font-size: 10px; line-height: 14px; color: var(--text-secondary); border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 2px; margin-bottom: var(--space-8); }
.oh-doc__addr address { font-style: normal; overflow-wrap: anywhere; }
.oh-doc__facts { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-12); margin: 0; }
.oh-doc__facts dt { color: var(--text-secondary); }
.oh-doc__facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-doc h1 { margin: var(--space-48) 0 var(--space-8); font-size: 22px; line-height: 30px; font-weight: 600; }
.oh-doc__table { width: 100%; border-collapse: collapse; margin-top: var(--space-24); }
.oh-doc__table th { text-align: left; font-weight: 600; border-bottom: 2px solid var(--text-primary); padding: var(--space-8); white-space: nowrap; }
.oh-doc__table td { padding: var(--space-8); border-bottom: var(--border-width) solid var(--border-subtle); vertical-align: top; overflow-wrap: anywhere; }
.oh-doc__table th:first-child, .oh-doc__table td:first-child { padding-left: 0; }
.oh-doc__table th:last-child, .oh-doc__table td:last-child { padding-right: 0; }
.oh-doc__table .is-unit { white-space: nowrap; }
.oh-doc__table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oh-doc__table thead { display: table-header-group; }
.oh-doc__table tr { break-inside: avoid; }
.oh-doc__sums { margin: var(--space-16) 0 0 auto; width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr auto; row-gap: var(--space-4); }
.oh-doc__sums dd { margin: 0; padding-left: var(--space-16); text-align: right; font-variant-numeric: tabular-nums; }
.oh-doc__sums .is-total { font-weight: 600; font-size: 15px; border-top: 2px solid var(--text-primary); padding-top: var(--space-8); margin-top: var(--space-4); }
.oh-doc__foot { margin-top: var(--space-48); padding-top: var(--space-12); border-top: var(--border-width) solid var(--border-subtle); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); font-size: 10px; line-height: 14px; color: var(--text-secondary); }
.oh-doc__page { margin-top: var(--space-16); text-align: right; font-size: 10px; color: var(--text-secondary); }
@media print { @page { size: A4; margin: 0; } .oh-doc { border: 0; max-width: none; } .oh-noprint { display: none !important; } }
@media (max-width: 640px) { .oh-doc { padding: var(--space-16); } .oh-doc__addr { grid-template-columns: 1fr; } .oh-doc__foot { grid-template-columns: 1fr; } .oh-doc__sums { width: 100%; } }

/* ---------- App-Rahmen ---------- */
.oh-shell { display: flex; min-height: 100%; background: var(--background); }
.oh-shell__main { flex: 1; min-width: 0; padding: var(--space-32); }
@media (max-width: 800px) { .oh-shell { flex-direction: column; } .oh-shell .oh-nav { width: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: var(--space-8); } .oh-shell .oh-nav__list { flex-direction: row; } .oh-shell__main { padding: var(--space-16); } }