:root {
  --petrol-50:#eff8fa; --petrol-100:#d7eef2; --petrol-200:#b3dde5;
  --petrol-400:#2c93a6; --petrol-500:#12798a; --petrol-600:#0e6373;
  --petrol-700:#0d5260; --petrol-800:#0f4450; --petrol-900:#0f3a44; --petrol-950:#062831;
  --n-0:#ffffff; --n-25:#fbfcfd; --n-50:#f6f8f9; --n-100:#eceff1; --n-200:#dde2e5;
  --n-300:#c4ccd1; --n-400:#94a1a8; --n-500:#6b7a82; --n-600:#526066; --n-700:#3d484d;
  --n-800:#2b3438; --n-900:#1a2124; --n-950:#0e1214;
  --ok-fg:#12603f; --ok-mid:#1f9d63; --ok-bg:#e8f6ef; --ok-br:#bae3ce;
  --info-fg:#14506e; --info-mid:#2a7fa8; --info-bg:#e9f4fa; --info-br:#bcdcec;
  --warn-fg:#7a4a06; --warn-mid:#c07a12; --warn-bg:#fdf3e3; --warn-br:#f0d6a6;
  --crit-fg:#7d2020; --crit-mid:#c23434; --crit-bg:#fdeded; --crit-br:#f2c4c4;
  --bg-nav: var(--petrol-900);
  --nav-w: 248px; --header-h: 56px; --content-max: 1600px;
  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px;
  --dur-fast:120ms; --ease: cubic-bezier(.4,0,.2,1);
  --el-1: 0 1px 2px rgba(14,18,20,.06), 0 1px 3px rgba(14,18,20,.08);
  --el-3: 0 8px 24px rgba(14,18,20,.14);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  font-size: var(--fs-14); line-height:1.5; color: var(--n-800); background: var(--n-50);
  -webkit-font-smoothing: antialiased;
}
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-12); }
a { color: var(--petrol-600); }
:focus-visible { outline: 2px solid var(--petrol-500); outline-offset: 2px; border-radius: var(--r-xs); }

/* --- Layout ---------------------------------------------------------------- */
.occ-app { display:grid; grid-template-columns: var(--nav-w) 1fr; min-height:100vh; }
.occ-nav {
  background: var(--bg-nav); color: var(--n-200); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.occ-brand { display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-4); border-bottom:1px solid rgba(255,255,255,.08); }
.occ-brand-dot { width:9px; height:9px; border-radius:50%; background: var(--petrol-400); flex:0 0 auto; }
.occ-brand strong { color:#fff; font-size:var(--fs-14); letter-spacing:.01em; }
.occ-brand small { display:block; color: var(--petrol-200); font-size:var(--fs-11); opacity:.85; }
.occ-nav-group { padding: var(--sp-3) var(--sp-2) 0; }
.occ-nav-group h3 { margin:0 0 var(--sp-1); }
/* Gruppenüberschrift UND Aufklapper. Die Überschriftenebene bleibt für
   Screenreader erhalten, der Knopf darin macht die Gruppe bedienbar. Ohne
   JavaScript bleibt sie aufgeklappt — der Ausgangszustand ist offen. */
.occ-nav-group-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  width:100%; background:none; border:none; cursor:pointer; text-align:left;
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm);
  font-size:var(--fs-11); font-weight:600; font-family:inherit;
  text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.4);
}
.occ-nav-group-toggle:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.05); }
.occ-nav-group-toggle::after { content:"−"; font-size:var(--fs-13); line-height:1; }
.occ-nav-group-toggle[aria-expanded="false"]::after { content:"+"; }
.occ-nav-group-items[hidden] { display:none; }
.occ-nav-legacy { margin-top: var(--sp-2); }
.occ-nav a {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  padding:7px var(--sp-2); margin-bottom:1px; border-radius:var(--r-sm);
  color: var(--n-200); text-decoration:none; font-size:var(--fs-13);
  transition: background var(--dur-fast) var(--ease);
}
.occ-nav a:hover { background: rgba(255,255,255,.07); color:#fff; }
.occ-nav a[aria-current="page"] { background: var(--petrol-600); color:#fff; font-weight:500; }
.occ-nav-foot { margin-top:auto; padding: var(--sp-3); border-top:1px solid rgba(255,255,255,.08); font-size:var(--fs-11); color: rgba(255,255,255,.5); }
.occ-main { display:flex; flex-direction:column; min-width:0; }
.occ-header {
  height: var(--header-h); display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-5); background: var(--n-0); border-bottom:1px solid var(--n-200);
  position:sticky; top:0; z-index:20;
}
.occ-header-spacer { flex:1; }
/* Der Krümelpfad ist das nachgiebige Element der Kopfzeile: er darf schrumpfen
   und kürzen, damit Profil, Profil-Link und Abmelden nie aus dem Viewport
   geschoben werden. Ohne min-width:0 verweigert ein Flex-Item das Schrumpfen —
   genau das ließ die Kopfzeile zwischen 901px und ~1100px überlaufen. */
.occ-crumb {
  font-size:var(--fs-13); color: var(--n-600); font-weight:500;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.occ-content { padding: var(--sp-6) var(--sp-5); max-width: var(--content-max); width:100%; }
.occ-nav-toggle { display:none; }

/* --- Umgebungschip: nie nur Farbe (Text + Symbol + Muster) ----------------- */
.occ-env {
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:var(--r-pill);
  font-size:var(--fs-11); font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  border:1px solid; white-space:nowrap;
}
.occ-env-prod {
  color: var(--crit-fg); border-color: var(--crit-br); background: var(--crit-bg);
  background-image: repeating-linear-gradient(135deg, rgba(194,52,52,.10) 0 5px, transparent 5px 10px);
}
.occ-env-staging { color: var(--warn-fg); border-color: var(--warn-br); background: var(--warn-bg); }
.occ-env-dev, .occ-env-demo, .occ-env-test { color: var(--info-fg); border-color: var(--info-br); background: var(--info-bg); }
.occ-env::before { content:"●"; font-size:9px; line-height:1; }
.occ-env-prod::before { content:"▲"; }

/* --- Karten / Seitenkopf --------------------------------------------------- */
.occ-page-head { margin-bottom: var(--sp-5); }
.occ-page-head h1 { margin:0 0 var(--sp-1); font-size:var(--fs-24); font-weight:600; color: var(--n-900); letter-spacing:-.01em; }
.occ-page-head p { margin:0; color: var(--n-500); font-size:var(--fs-13); max-width:70ch; }
.occ-card { background: var(--n-0); border:1px solid var(--n-200); border-radius: var(--r-md); box-shadow: var(--el-1); margin-bottom: var(--sp-4); }
.occ-card-head { padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--n-100); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.occ-card-head h2 { margin:0; font-size:var(--fs-14); font-weight:600; color: var(--n-800); }
.occ-card-head .occ-sub { font-size:var(--fs-12); color: var(--n-500); }
.occ-card-body { padding: var(--sp-4); }
.occ-card-body > :first-child { margin-top:0; }
.occ-card-body > :last-child { margin-bottom:0; }
/* OCC-V2-PAR-6: Gefahrenzone. Die endgültige Löschung ist der einzige
   unumkehrbare Vorgang der Fläche; sie steht als letzte Karte der Akte und ist
   ausdrücklich abgesetzt — nicht als Verzierung, sondern damit sie sich beim
   Überfliegen nicht mit den übrigen Karten verwechseln lässt. Die Kennzeichnung
   trägt zusätzlich ein Wort (Chip „Unumkehrbar"), nie Farbe allein. */
.occ-danger-zone { border-color: var(--crit-br); box-shadow: inset 3px 0 0 var(--crit-mid), var(--el-1); }
.occ-danger-zone > .occ-card-head { border-bottom-color: var(--crit-br); }
.occ-danger-zone > .occ-card-head h2 { color: var(--crit-fg); }
.occ-grid-2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--sp-4); }

/* --- Command-Center-Kacheln (Phase 6: echte Cross-Domain-Aggregation) ------- */
.occ-tile-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--sp-3); }
.occ-tile {
  display:flex; flex-direction:column; gap:2px; padding: var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
  border:1px solid var(--n-200); background:var(--n-0); text-decoration:none; color:inherit;
}
.occ-tile:hover { border-color:var(--n-300); background:var(--n-25); }
.occ-tile-value { font-size:var(--fs-24,24px); font-weight:700; line-height:1.1; color:var(--n-900); }
.occ-tile-label { font-size:var(--fs-12); color:var(--n-600); }
.occ-tile-sub { font-size:var(--fs-11); color:var(--n-500); }
.occ-tile-warn { border-color: var(--crit-br, var(--warn-br)); background: var(--crit-bg, var(--warn-bg)); }
.occ-tile-warn .occ-tile-value { color: var(--crit-fg, var(--warn-fg)); }

/* --- Chips ----------------------------------------------------------------- */
.occ-chip {
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--r-pill);
  font-size:var(--fs-11); font-weight:600; border:1px solid; white-space:nowrap;
}
.occ-chip-ok { color:var(--ok-fg); background:var(--ok-bg); border-color:var(--ok-br); }
.occ-chip-info { color:var(--info-fg); background:var(--info-bg); border-color:var(--info-br); }
.occ-chip-warn { color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-br); }
.occ-chip-crit { color:var(--crit-fg); background:var(--crit-bg); border-color:var(--crit-br); }
.occ-chip-neutral { color:var(--n-600); background:var(--n-100); border-color:var(--n-200); }
.occ-chip::before { font-size:9px; line-height:1; }
.occ-chip-ok::before { content:"✓"; }
.occ-chip-warn::before { content:"!"; }
.occ-chip-crit::before { content:"✕"; }
.occ-chip-info::before { content:"i"; font-style:italic; font-weight:700; }
.occ-chip-neutral::before { content:"–"; }

/* --- Tabellen -------------------------------------------------------------- */
/* Responsive-Vertrag (BD-OCC-P0-1): JEDE .occ-table-wrap trägt ein
   data-occ-responsive mit genau einem der Werte cards | stacked | scroll.
   Es gibt KEINE Regel mehr, die eine Tabelle allein wegen der Viewportbreite
   ausblendet — Daten und Aktionen bleiben in jeder Breite erreichbar.
     cards   — Datensatzlisten: jede Zeile wird schmal zu einer Karte,
               jede Zelle trägt ihren Spaltennamen via data-label.
     stacked — kompakte Schlüssel-Wert-Tabellen: wie cards, ohne Kartenrahmen.
     scroll  — echte Matrizen/sehr breite Fachtabellen: Tabelle bleibt intakt
               und scrollt NUR innerhalb des Containers.
   cards/stacked ändern display und zerstören damit die implizite
   Tabellensemantik — deshalb tragen die Tabellen explizite ARIA-Rollen
   (role=table/rowgroup/row/cell). Reines CSS, kein JS: die Darstellung steht
   beim ersten Paint, es gibt keine leere Phase und keinen Layoutsprung. */
.occ-table-wrap { overflow-x:auto; }
.occ-table-wrap[data-occ-responsive="scroll"] { -webkit-overflow-scrolling:touch; }
/* Der Scrollbereich ist per Tastatur erreichbar (tabindex="0" im Markup) und
   muss seinen Fokus zeigen — sonst ist er für Tastaturnutzer unsichtbar. */
.occ-table-wrap[data-occ-responsive="scroll"]:focus-visible {
  outline:2px solid var(--petrol-500); outline-offset:2px;
}
/* Der Scrollhinweis steht als Text im Markup (nicht nur visuell) und wird nur
   dort eingeblendet, wo tatsächlich gescrollt werden muss. */
.occ-scroll-hint { display:none; font-size:var(--fs-12); color:var(--n-500); margin:0 0 var(--sp-2); }
table.occ-table { width:100%; border-collapse:collapse; font-size:var(--fs-13); }
.occ-table th {
  text-align:left; font-size:var(--fs-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color: var(--n-500); padding: var(--sp-2) var(--sp-3); border-bottom:1px solid var(--n-200);
  background: var(--n-25); position:sticky; top:0; white-space:nowrap;
}
.occ-table td { padding: var(--sp-3); border-bottom:1px solid var(--n-100); vertical-align:top; }
.occ-table tbody tr:hover { background: var(--n-25); }
.occ-table .occ-num { text-align:right; font-variant-numeric: tabular-nums; }
.occ-cards { display:none; }
.occ-card-row { border:1px solid var(--n-200); border-radius:var(--r-sm); padding:var(--sp-3); margin-bottom:var(--sp-2); background:var(--n-0); }
.occ-card-row dl { margin:var(--sp-2) 0 0; display:grid; grid-template-columns:auto 1fr; gap:4px var(--sp-3); font-size:var(--fs-12); }
.occ-card-row dt { color:var(--n-500); }
.occ-card-row dd { margin:0; min-width:0; }
/* Lange Bezeichner (occ.role.assignment.changed, E-Mail-Adressen) haben keine
   Leerzeichen und würden die Karte über die Viewportbreite hinaus dehnen. */
.occ-card-row, .occ-card-row strong, .occ-card-row dd, .occ-kv dd, .occ-table td { overflow-wrap:anywhere; }
.occ-cr-head { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

/* Technische Angaben (BD-OCC-P0-3): standardmäßig eingeklappt, aber ohne JS
   bedienbar und per Tastatur erreichbar — details/summary statt Eigenbau. */
.occ-tech > summary {
  cursor:pointer; font-size:var(--fs-13); font-weight:500; color:var(--n-600);
  padding:var(--sp-2) 0; list-style:revert;
}
.occ-tech > summary:hover { color:var(--n-800); }
.occ-tech > summary:focus-visible { outline:2px solid var(--petrol-500); outline-offset:2px; border-radius:var(--r-sm); }

/* --- Buttons --------------------------------------------------------------- */
.occ-btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--r-sm);
  font-size:var(--fs-13); font-weight:500; font-family:inherit; cursor:pointer;
  border:1px solid var(--n-300); background: var(--n-0); color: var(--n-700);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  text-decoration:none;
}
.occ-btn:hover:not(:disabled) { background: var(--n-50); border-color: var(--n-400); }
.occ-btn-primary { background: var(--petrol-500); border-color: var(--petrol-500); color:#fff; }
.occ-btn-primary:hover:not(:disabled) { background: var(--petrol-600); border-color: var(--petrol-600); }
.occ-btn-danger { background: var(--crit-mid); border-color: var(--crit-mid); color:#fff; }
.occ-btn-danger:hover:not(:disabled) { background: var(--crit-fg); border-color: var(--crit-fg); }
.occ-btn-sm { padding:4px 9px; font-size:var(--fs-12); }
.occ-btn:disabled { opacity:.5; cursor:not-allowed; }
.occ-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* --- Formulare ------------------------------------------------------------- */
.occ-field { margin-bottom: var(--sp-4); }
.occ-field label { display:block; font-size:var(--fs-12); font-weight:600; color: var(--n-700); margin-bottom:5px; }
.occ-field .occ-hint { font-size:var(--fs-11); color: var(--n-500); margin:4px 0 0; }
.occ-input, .occ-select, .occ-textarea {
  width:100%; padding:7px 10px; border:1px solid var(--n-300); border-radius:var(--r-sm);
  font-size:var(--fs-13); font-family:inherit; color: var(--n-800); background: var(--n-0);
}
.occ-input:focus, .occ-select:focus, .occ-textarea:focus { border-color: var(--petrol-500); outline:none; box-shadow:0 0 0 3px var(--petrol-100); }
.occ-textarea { min-height:76px; resize:vertical; }
.occ-filter-bar { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:flex-end; }
.occ-filter-bar .occ-field { margin-bottom:0; min-width:140px; flex:0 1 auto; }

/* --- Zustände -------------------------------------------------------------- */
.occ-state { padding: var(--sp-8) var(--sp-4); text-align:center; color: var(--n-500); }
.occ-state h3 { margin:0 0 var(--sp-2); font-size:var(--fs-16); color: var(--n-700); font-weight:600; }
.occ-state p { margin:0 auto var(--sp-4); max-width:56ch; font-size:var(--fs-13); }
.occ-notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border:1px solid; font-size:var(--fs-13); margin-bottom:var(--sp-4); }
.occ-notice h3 { margin:0 0 4px; font-size:var(--fs-13); font-weight:600; }
.occ-notice p { margin:0; }
.occ-notice ul { margin:var(--sp-2) 0 0; padding-left:18px; }
.occ-notice-info { color:var(--info-fg); background:var(--info-bg); border-color:var(--info-br); }
.occ-notice-warn { color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-br); }
.occ-notice-crit { color:var(--crit-fg); background:var(--crit-bg); border-color:var(--crit-br); }
.occ-notice-ok { color:var(--ok-fg); background:var(--ok-bg); border-color:var(--ok-br); }
.occ-skeleton { height:14px; border-radius:var(--r-xs); background:linear-gradient(90deg,var(--n-100),var(--n-50),var(--n-100)); background-size:200% 100%; animation:occ-sk 1.2s ease-in-out infinite; margin-bottom:var(--sp-2); }
@keyframes occ-sk { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* --- Definitionslisten ----------------------------------------------------- */
/* Schlüssel-Wert-Blöcke: die Wertspalte muss schrumpfen dürfen (minmax(0,1fr)),
   sonst drückt ein breiter Inhalt — etwa ein Statuschip mit ganzem Satz auf
   /status — die Seite über den Viewport hinaus. */
.occ-kv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-2) var(--sp-4); margin:0; font-size:var(--fs-13); }
.occ-kv dt { color: var(--n-500); white-space:nowrap; }
.occ-kv dd { margin:0; color: var(--n-800); min-width:0; }
/* Chips tragen hier teils ganze Sätze — sie müssen umbrechen dürfen. */
.occ-kv dd .occ-chip { white-space:normal; }

/* --- Dialog ---------------------------------------------------------------- */
.occ-dialog-backdrop {
  position:fixed; inset:0; background: rgba(14,18,20,.5); z-index:100;
  display:flex; align-items:center; justify-content:center; padding: var(--sp-4);
}
.occ-dialog { background: var(--n-0); border-radius: var(--r-lg); box-shadow: var(--el-3); width:min(560px,100%); max-height:90vh; overflow-y:auto; }
.occ-dialog-head { padding: var(--sp-4); border-bottom:1px solid var(--n-100); }
.occ-dialog-head h2 { margin:0 0 4px; font-size:var(--fs-16); font-weight:600; color:var(--n-900); }
.occ-dialog-head p { margin:0; font-size:var(--fs-13); color: var(--n-500); }
.occ-dialog-body { padding: var(--sp-4); }
.occ-dialog-foot { padding: var(--sp-3) var(--sp-4); border-top:1px solid var(--n-100); display:flex; gap:var(--sp-2); justify-content:flex-end; background: var(--n-25); border-radius:0 0 var(--r-lg) var(--r-lg); }
.occ-form-error { color: var(--crit-fg); font-size:var(--fs-12); margin-top:6px; min-height:1em; }

/* --- Toast ----------------------------------------------------------------- */
.occ-toasts { position:fixed; bottom:var(--sp-4); right:var(--sp-4); z-index:200; display:flex; flex-direction:column; gap:var(--sp-2); max-width:380px; }
.occ-toast { padding: var(--sp-3) var(--sp-4); border-radius:var(--r-sm); box-shadow:var(--el-3); font-size:var(--fs-13); border:1px solid; }
.occ-toast-ok { background:var(--ok-bg); border-color:var(--ok-br); color:var(--ok-fg); }
.occ-toast-crit { background:var(--crit-bg); border-color:var(--crit-br); color:var(--crit-fg); }

/* --- Login ----------------------------------------------------------------- */
.occ-login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); background: var(--petrol-950); }
.occ-login { width:min(420px,100%); background:var(--n-0); border-radius:var(--r-lg); box-shadow:var(--el-3); padding: var(--sp-6); }
.occ-login h1 { margin:0 0 var(--sp-1); font-size:var(--fs-20); font-weight:600; color:var(--n-900); }
.occ-login .occ-login-sub { margin:0 0 var(--sp-5); font-size:var(--fs-13); color:var(--n-500); }
.occ-login-foot { margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--n-100); font-size:var(--fs-11); color:var(--n-500); }

/* --- Secure-Access-Shell (eigener Tab, ohne Hauptnavigation) --------------- */
.occ-app-solo { max-width:840px; margin:0 auto; padding:var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4); }

/* --- Profil-Menü ----------------------------------------------------------- */
.occ-profile { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-12); }
.occ-profile-name { font-weight:600; color:var(--n-800); }
.occ-profile-role { color:var(--n-500); }
.occ-avatar { width:28px; height:28px; border-radius:50%; background:var(--petrol-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:var(--fs-11); font-weight:600; }
/* Die Glocke war ein dauerhaft deaktivierter Knopf mit dem Titel
   "Benachrichtigungen (folgt)" — obwohl die Seite existierte und in der
   Navigation stand. Jetzt ist sie der Weg dorthin. */
.occ-bell {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; min-height:32px; border-radius:var(--r-sm);
  background:none; border:none; cursor:pointer; text-decoration:none;
  color:var(--n-500); padding:var(--sp-1); font-size:var(--fs-16); line-height:1;
}
.occ-bell:hover { background:var(--n-50); color:var(--n-800); }

/* --- Seitenvertrag: Zweck, Einordnung, Legacy ------------------------------ */
.occ-purpose { margin:var(--sp-1) 0 0; color:var(--n-700); font-size:var(--fs-14); max-width:70ch; }
.occ-task { margin:var(--sp-2) 0 0; color:var(--n-600); font-size:var(--fs-13); max-width:70ch; }
.occ-when { margin:0 0 var(--sp-4); }
.occ-rare { margin-bottom: var(--sp-4); }
.occ-page-tabs { margin-top: var(--sp-3); }
.occ-legacy-list { margin:var(--sp-2) 0; padding-left:var(--sp-4); display:grid; gap:var(--sp-2); }
.occ-legacy-list li { line-height:1.45; }
/* Die Warnkarte der Uebersicht ist die einzige Stelle, an der mehrere
   Warnhinweise gestapelt stehen — sie braucht Abstand, keine eigene Farbe. */
.occ-attention .occ-notice + .occ-notice { margin-top: var(--sp-3); }
.occ-attention .occ-notice p:last-child { margin-bottom:0; }
/* Folgenanzeige: nie nur Farbe. Die Einstufung steht als Wort im Chip UND
   als Zeile in der Liste; der Rahmen ist nur Gruppierung. */
.occ-risk { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border:1px solid var(--n-200); border-radius: var(--r-sm); background: var(--n-25); }
.occ-risk h3 { margin:0 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color: var(--n-800); }
.occ-risk[data-occ-risk="crit"], .occ-risk[data-occ-risk="high"] { border-color: var(--warn-br); background: var(--warn-bg); }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .occ-app { grid-template-columns: 1fr; }
  .occ-nav {
    position:fixed; left:0; top:0; bottom:0; width:var(--nav-w); height:100vh; z-index:60;
    /* BD-OCC-IA: nur wegschieben reicht nicht — die Links blieben in der
       Tab-Reihenfolge und im Screenreader-Baum, waehrend der Ausloeser
       aria-expanded="false" behauptete. visibility nimmt sie mit heraus und
       wird erst nach der Bewegung geschaltet, damit die Animation bleibt. */
    transform: translateX(-100%); visibility: hidden;
    transition: transform var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
  }
  .occ-app[data-nav="open"] .occ-nav { transform:none; visibility:visible; transition: transform var(--dur-fast) var(--ease), visibility 0s; }
  .occ-nav-scrim { position:fixed; inset:0; background:rgba(14,18,20,.5); z-index:50; }
  /* Scrollsperre nur solange das Menue offen ist; initNav entfernt die Klasse
     beim Schliessen und beim Zurueckkommen aus dem Verlauf. */
  body.occ-nav-locked { overflow:hidden; }
  /* BD-OCC-IA: Der Menueknopf ist mobil das wichtigste Bedienelement und war
     als occ-btn-sm nur 26px hoch. Touchziel jetzt 44px, wie die Eintraege. */
  .occ-nav-toggle { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }
  .occ-content { padding: var(--sp-4) var(--sp-3); }
  /* Header muss in eine 390px-Zeile passen: Krümelpfad weicht (Titel + Nav-Toggle
     tragen den Kontext), Elemente dürfen schrumpfen statt zu überlaufen. */
  .occ-header { padding:0 var(--sp-3); gap: var(--sp-2); }
  .occ-crumb { display:none; }
  .occ-header .occ-btn { padding:4px 8px; font-size:var(--fs-12); }

  /* --- Responsive-Tabellenvertrag (BD-OCC-P0-1) ---------------------------
     Früher stand hier ein globales display:none auf .occ-table-wrap, ohne
     Prüfung, ob eine Ersatzdarstellung existiert. 27 der 34 Tabellen hatten
     keine — dort
     verschwanden Daten UND Bedienelemente ersatzlos. Jetzt entscheidet der
     im Markup deklarierte Modus, und keiner der Modi blendet Inhalte aus. */

  /* cards + stacked: Zeile wird zum Block, Spaltenkopf wandert vor die Zelle. */
  .occ-table-wrap[data-occ-responsive="cards"] table.occ-table,
  .occ-table-wrap[data-occ-responsive="stacked"] table.occ-table { display:block; }
  .occ-table-wrap[data-occ-responsive="cards"] tbody,
  .occ-table-wrap[data-occ-responsive="stacked"] tbody { display:block; }
  .occ-table-wrap[data-occ-responsive="cards"] tr,
  .occ-table-wrap[data-occ-responsive="stacked"] tr { display:block; }
  .occ-table-wrap[data-occ-responsive="cards"] td,
  .occ-table-wrap[data-occ-responsive="stacked"] td { display:block; }

  /* Der Spaltenkopf trägt die Bedeutung der Zelle und darf mobil nicht
     einfach verschwinden — er wird pro Zelle aus data-label wiederholt.
     thead bleibt für Screenreader erhalten (visually hidden, nicht display:none). */
  .occ-table-wrap[data-occ-responsive="cards"] thead,
  .occ-table-wrap[data-occ-responsive="stacked"] thead {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .occ-table-wrap[data-occ-responsive="cards"] tr { border:1px solid var(--n-200); border-radius:var(--r-sm); background:var(--n-0); padding:var(--sp-3); margin-bottom:var(--sp-2); }
  .occ-table-wrap[data-occ-responsive="cards"] tbody tr:hover { background:var(--n-0); }
  .occ-table-wrap[data-occ-responsive="stacked"] tr { border-bottom:1px solid var(--n-200); padding:var(--sp-3) 0; }
  .occ-table-wrap[data-occ-responsive="cards"] td,
  .occ-table-wrap[data-occ-responsive="stacked"] td {
    border:0; padding:3px 0; display:grid; grid-template-columns:minmax(7rem,38%) 1fr;
    gap:var(--sp-3); align-items:start;
  }
  .occ-table-wrap[data-occ-responsive="cards"] td::before,
  .occ-table-wrap[data-occ-responsive="stacked"] td::before {
    content: attr(data-label); color:var(--n-500); font-size:var(--fs-12);
  }
  /* Zellen ohne Beschriftung (reine Aktionsspalten) füllen die volle Breite,
     damit die Schaltfläche nicht in eine 38%-Spalte gequetscht wird. */
  .occ-table-wrap[data-occ-responsive="cards"] td[data-label=""],
  .occ-table-wrap[data-occ-responsive="stacked"] td[data-label=""] { display:block; padding-top:var(--sp-2); }
  .occ-table-wrap[data-occ-responsive="cards"] td[data-label=""]::before,
  .occ-table-wrap[data-occ-responsive="stacked"] td[data-label=""]::before { content:none; }
  /* Zahlenspalten sind mobil linksbündig — rechtsbündig ergibt ohne Spalten keinen Sinn. */
  .occ-table-wrap[data-occ-responsive="cards"] .occ-num,
  .occ-table-wrap[data-occ-responsive="stacked"] .occ-num { text-align:left; }
  /* Leerzustandszeile (colspan) trägt kein data-label und bleibt einspaltig. */
  .occ-table-wrap[data-occ-responsive="cards"] td[colspan],
  .occ-table-wrap[data-occ-responsive="stacked"] td[colspan] { display:block; }
  .occ-table-wrap[data-occ-responsive="cards"] td[colspan]::before,
  .occ-table-wrap[data-occ-responsive="stacked"] td[colspan]::before { content:none; }

  /* scroll: Tabelle bleibt vollständig, scrollt nur im Container. */
  .occ-table-wrap[data-occ-responsive="scroll"] { overflow-x:auto; }
  .occ-table-wrap[data-occ-responsive="scroll"] table.occ-table { min-width:44rem; }
  .occ-scroll-hint { display:block; }

  /* NUR der Profilblock der Kopfzeile weicht schmal — Name und Rolle stehen
     dort neben dem Avatar und sprengen sonst die 390px-Zeile. Die Regel war
     früher global und hat dieselben Klassen in 12 Inhaltsstellen mit
     ausgeblendet (E-Mail in /users und /sessions, Rolle im Auditlog,
     Feature-Schlüssel in /features, Inhaber-E-Mail im Workspace-Detail …) —
     ein zweiter, unbemerkter Datenverlust. Jetzt strikt auf .occ-profile begrenzt. */
  .occ-profile .occ-profile-name, .occ-profile .occ-profile-role { display:none; }
  .occ-filter-bar .occ-field { min-width:0; flex:1 1 45%; }
}
@media (max-width: 640px) {
  /* Schlüssel-Wert-Blöcke werden einspaltig: bei 390px bleiben von der
     Wertspalte sonst wenige Zeichen übrig, und lange Bezeichner in dt
     (white-space:nowrap) erzwingen sonst eine Überbreite. */
  .occ-kv { grid-template-columns:1fr; gap:2px; }
  .occ-kv dt { white-space:normal; font-size:var(--fs-12); }
  .occ-kv dd { margin-bottom:var(--sp-2); }
  .occ-page-head h1 { font-size:var(--fs-20); }
  .occ-dialog-foot { flex-direction:column-reverse; }
  .occ-dialog-foot .occ-btn { width:100%; justify-content:center; }
}

/* --- Support: Segment-Tabs ------------------------------------------------- */
.occ-tabs { display:flex; gap:var(--sp-1); flex-wrap:wrap; margin-bottom:var(--sp-4); }
.occ-tab {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill);
  font-size:var(--fs-13); font-weight:500; text-decoration:none; color:var(--n-600);
  border:1px solid var(--n-200); background:var(--n-0);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.occ-tab:hover { background:var(--n-50); border-color:var(--n-300); }
.occ-tab[aria-current="page"] { background:var(--petrol-500); border-color:var(--petrol-500); color:#fff; }

/* --- Support: Ticketliste (Zeile klickbar) --------------------------------- */
.occ-table tr.occ-row-link { cursor:pointer; }
a.occ-card-row { display:block; text-decoration:none; color:inherit; }
a.occ-card-row:hover { border-color:var(--n-300); background:var(--n-25); }
.occ-mono-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--fs-12); color:var(--n-600); }

/* --- Support: Prioritäts- und Statuschips (nie nur Farbe) ------------------ */
.occ-prio-crit { color:var(--crit-fg); background:var(--crit-bg); border-color:var(--crit-br); }
.occ-prio-high { color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-br); }
.occ-prio-med  { color:var(--info-fg); background:var(--info-bg); border-color:var(--info-br); }
.occ-prio-low  { color:var(--n-600); background:var(--n-100); border-color:var(--n-200); }

/* --- Support: Timeline ----------------------------------------------------- */
.occ-timeline { display:flex; flex-direction:column; gap:var(--sp-3); }
.occ-tl-item { border:1px solid var(--n-200); border-radius:var(--r-md); padding:var(--sp-3); background:var(--n-0); }
.occ-tl-item.occ-tl-customer { border-color:var(--info-br); background:var(--info-bg); }
.occ-tl-item.occ-tl-reply { border-color:var(--ok-br); background:var(--ok-bg); }
.occ-tl-item.occ-tl-system { background:var(--n-25); }
/* Interne Notiz: umlaufender gestrichelter Rand + Warnfarbe + Muster + Badge —
   bewusst nicht nur Farbe, damit die Abgrenzung auch ohne Farbwahrnehmung trägt. */
.occ-tl-item.occ-tl-internal {
  border:2px dashed var(--warn-mid);
  background: var(--warn-bg);
  background-image: repeating-linear-gradient(135deg, rgba(192,122,18,.06) 0 8px, transparent 8px 16px);
}
.occ-tl-head { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-2); }
.occ-tl-actor { font-weight:600; color:var(--n-800); font-size:var(--fs-13); }
.occ-tl-time { color:var(--n-500); font-size:var(--fs-11); }
.occ-tl-body { margin:0; white-space:pre-wrap; font-size:var(--fs-13); color:var(--n-800); overflow-wrap:anywhere; }
.occ-tl-meta { margin:0; font-size:var(--fs-12); color:var(--n-600); }

/* --- Support: Sichtbarkeits-Badges ---------------------------------------- */
.occ-badge {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill);
  font-size:var(--fs-11); font-weight:700; text-transform:uppercase; letter-spacing:.04em; border:1px solid;
}
.occ-badge-internal { color:var(--warn-fg); background:var(--warn-bg); border-color:var(--warn-br); }
.occ-badge-internal::before { content:"🔒 intern"; }
.occ-badge-customer { color:var(--info-fg); background:var(--info-bg); border-color:var(--info-br); }
.occ-badge-customer::before { content:"👁 kundensichtbar"; }

/* --- Support: zwei getrennte Editoren ------------------------------------- */
.occ-editor-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:var(--sp-4); }
.occ-editor { border:1px solid var(--n-200); border-radius:var(--r-md); padding:var(--sp-4); background:var(--n-0); }
.occ-editor-customer { border-color:var(--info-br); background:var(--info-bg); }
.occ-editor-internal { border-color:var(--warn-br); background:var(--warn-bg); }
.occ-editor h3 { display:flex; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-1); font-size:var(--fs-14); font-weight:600; color:var(--n-900); }
.occ-editor .occ-editor-warn { margin:0 0 var(--sp-3); font-size:var(--fs-12); }

/* --- Support: nicht verfügbare Funktionen (ehrlich, nicht klickbar) -------- */
.occ-unavailable { border:1px dashed var(--n-300); border-radius:var(--r-md); padding:var(--sp-3); background:var(--n-25); margin-bottom:var(--sp-2); }
.occ-unavailable:last-child { margin-bottom:0; }
.occ-unavailable h3 { margin:0 0 2px; font-size:var(--fs-13); font-weight:600; color:var(--n-600); }
.occ-unavailable p { margin:0; font-size:var(--fs-12); color:var(--n-500); }

/* --- Single-Operator-Testmodus (BD-OCC-SO) --------------------------------- */
/* Dauerbanner über dem Inhalt jeder Shell-Seite. Nicht wegklickbar, nicht nur
   Farbe: die ⚠-Glyphe trägt die Warnung auch ohne Farbwahrnehmung. */
.occ-single-operator-banner {
  display:flex; gap:var(--sp-2); align-items:flex-start;
  margin: var(--sp-4) var(--sp-5) 0; margin-bottom:0;
  border-color: var(--warn-mid); font-weight:500;
}
.occ-single-operator-banner::before { content:"⚠"; font-size:var(--fs-16); line-height:1.3; flex:0 0 auto; }
.occ-single-operator-banner p { margin:0; overflow-wrap:anywhere; }
.occ-single-operator-banner a { color:inherit; font-weight:600; white-space:nowrap; }
@media (max-width: 900px) {
  .occ-single-operator-banner { margin: var(--sp-3) var(--sp-3) 0; }
  /* Der Header muss in eine 390px-Zeile passen — das Banner trägt den Kontext. */
  .occ-header .occ-so-badge { display:none; }
}

/* --- Support: kleine Layout-Helfer (statt Inline-Styles) ------------------ */
.occ-stack > * + * { margin-top:var(--sp-3); }
.occ-muted { color:var(--n-500); }
.occ-mt-3 { margin-top:var(--sp-3); }
.occ-plain-list { list-style:none; margin:0; padding:0; }
.occ-subhead { margin:0 0 var(--sp-2); font-size:var(--fs-13); font-weight:600; color:var(--n-800); }

/* --- Nur-Screenreader-Text -------------------------------------------------- */
.occ-vh {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Kein-Zugriff-Seite ----------------------------------------------------- */
.occ-actions-center { justify-content:center; }

/* --- Rollen & Berechtigungen: Rollenkarten ------------------------------------------ */
.occ-role-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:var(--sp-3); }
.occ-role-card { border:1px solid var(--n-200); border-radius:var(--r-sm); padding:var(--sp-3); background:var(--n-0); }
.occ-role-card-desc { margin:var(--sp-2) 0 0; font-size:var(--fs-12); color:var(--n-600); }
.occ-role-card-meta { margin:var(--sp-2) 0 0; font-size:var(--fs-12); color:var(--n-500); }

/* --- Rollen & Berechtigungen: Matrix ------------------------------------------------ */
/* Horizontales Scrollen NUR innerhalb des Wrappers — die Seite selbst wird nie
   breiter als der Viewport. Erste Spalte sticky, damit die Rolle beim Scrollen
   lesbar bleibt. Kein occ-table-wrap: der wird mobil global ausgeblendet, die
   Matrix hat stattdessen ein eigenes Akkordeon als Mobil-Darstellung. */
/* contain:paint zusätzlich zu overflow-x: Chromium rechnet sticky Tabellenzellen
   sonst in die Scrollbreite des WURZELELEMENTS ein — die Seite meldete
   horizontalen Überlauf, obwohl sichtbar nur der Wrapper scrollt. */
.occ-matrix-wrap { overflow-x:auto; max-width:100%; contain:paint; }
table.occ-matrix { border-collapse:separate; border-spacing:0; font-size:var(--fs-12); min-width:100%; }
.occ-matrix th, .occ-matrix td { border-bottom:1px solid var(--n-100); padding:var(--sp-2) var(--sp-2); background:var(--n-0); }
.occ-matrix thead th, .occ-matrix thead td { position:sticky; top:0; z-index:2; background:var(--n-25); border-bottom:1px solid var(--n-200); }
.occ-matrix thead th { font-size:var(--fs-11); font-weight:600; color:var(--n-500); text-align:center; white-space:nowrap; }
.occ-matrix .occ-matrix-group { text-transform:uppercase; letter-spacing:.05em; border-left:1px solid var(--n-200); }
.occ-matrix .occ-matrix-corner, .occ-matrix .occ-matrix-role { position:sticky; left:0; z-index:3; background:var(--n-0); border-right:1px solid var(--n-200); }
.occ-matrix thead .occ-matrix-corner { z-index:4; background:var(--n-25); }
.occ-matrix .occ-matrix-role { text-align:left; font-size:var(--fs-13); font-weight:400; color:var(--n-800); white-space:nowrap; }
.occ-matrix .occ-matrix-yes { text-align:center; color:var(--ok-fg); font-weight:700; }
.occ-matrix .occ-matrix-no { text-align:center; color:var(--n-300); }
.occ-matrix .occ-matrix-temp { text-align:center; color:var(--warn-fg); background:var(--warn-bg); font-weight:700; }
.occ-matrix-legend { margin:0; display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-12); color:var(--n-600); }
.occ-matrix-yes-glyph { color:var(--ok-fg); font-weight:700; }
.occ-matrix-temp-glyph { color:var(--warn-fg); font-weight:700; }

/* --- Rollen & Berechtigungen: Akkordeon (mobil) ------------------------------------- */
.occ-acc-list { display:none; }
.occ-acc { border:1px solid var(--n-200); border-radius:var(--r-sm); background:var(--n-0); margin-bottom:var(--sp-2); }
.occ-acc > summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
  flex-wrap:wrap; min-height:44px; padding:var(--sp-2) var(--sp-3);
  cursor:pointer; list-style:none; font-size:var(--fs-13);
}
.occ-acc > summary::-webkit-details-marker { display:none; }
.occ-acc > summary::after { content:"▸"; color:var(--n-400); flex:0 0 auto; }
.occ-acc[open] > summary::after { content:"▾"; }
.occ-acc-title { display:inline-flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.occ-acc-meta { font-size:var(--fs-12); color:var(--n-500); }
.occ-acc-body { padding:var(--sp-3); border-top:1px solid var(--n-100); }
.occ-acc-body .occ-subhead { margin-top:var(--sp-3); }
.occ-acc-body .occ-subhead:first-of-type { margin-top:0; }
.occ-acc-scopes li { padding:4px 0; font-size:var(--fs-12); color:var(--n-700); overflow-wrap:anywhere; }
.occ-acc-temp { margin-top:var(--sp-3); border:2px dashed var(--warn-mid); border-radius:var(--r-sm); padding:var(--sp-2) var(--sp-3); background:var(--warn-bg); }
.occ-acc-temp-note { margin:0 0 var(--sp-2); font-size:var(--fs-11); color:var(--warn-fg); }
.occ-acc-sub { margin-top:var(--sp-3); }
.occ-acc-sub > summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:var(--fs-12); color:var(--n-600); }
.occ-glossary dt code { display:inline-block; margin-top:2px; }
.occ-glossary { margin-bottom:var(--sp-4); }
@media (max-width: 900px) {
  /* Matrix und Kartenüberblick weichen dem Akkordeon, das dieselben Angaben
     trägt — nie horizontales Seitenscrollen erzwingen, nichts doppelt zeigen. */
  .occ-matrix-wrap, .occ-matrix-foot, .occ-roles-overview { display:none; }
  .occ-acc-list { display:block; }
  /* Touch-Ziele: Navigationseinträge mindestens 44px hoch. */
  .occ-nav a { min-height:44px; }
}