/* ═══════════════════════════════════════════════════════════════════════════
   YardPilot Design System (design.md v1.1) – nur TEST, nur mit body.theme-yp.
   Rechnungs-/Abrechnungsseiten sind ausgenommen (laufen serverseitig im klassischen Layout).
   Notschalter: Datei umbenennen -> sofort wieder klassisches Design.
   Schrift: Inter (SIL OFL 1.1, fonts/Inter-OFL.txt). Icons: Lucide (ISC, LUCIDE-LICENSE.txt).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(/static/theme/fonts/inter-latin-400-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(/static/theme/fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(/static/theme/fonts/inter-latin-500-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(/static/theme/fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(/static/theme/fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(/static/theme/fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }

/* ── Design-Tokens (design.md §2) + Mandanten-Tokens (§10) ──
   --tenant-primary wird serverseitig aus der Mandanten-Konfiguration gesetzt (HRT: #001a8a = Logo-Blau).
   Ohne Mandantenfarbe greift der neutrale Produkt-Standard #1769aa. */
:root {
  --color-nav: #142235;
  --color-nav-hover: #20354c;
  --color-primary: var(--tenant-primary, #1769aa);
  --color-primary-hover: var(--tenant-primary-hover, #12568d);
  --color-canvas: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafb;
  --color-border: #dce3e9;
  --color-text: #1c2b39;
  --color-text-muted: #617181;
  --color-success: #237a57;
  --color-warning: #a8660b;
  --color-danger: #b53a3a;
  --color-info: var(--color-primary);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-panel: 0 1px 3px rgba(20,34,53,.07);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  /* abgeleitete, helle Statusflächen (Text bleibt in der kräftigen Farbe -> Kontrast >= 4.5:1) */
  --bg-success: #e7f3ed; --bg-warning: #fbf0df; --bg-danger: #f8e7e7; --bg-info: #e6eaf6; --bg-neutral: #eef1f4;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nav-w: 240px;
}

/* ── Grundlage ── */
body.theme-yp { margin:0; background:var(--color-canvas); color:var(--color-text); font:400 14px/20px var(--font);
  -webkit-font-smoothing:antialiased; }
/* Tabellenziffern nur für Zahlen (Inter setzt sonst auch Bindestriche tabellarisch) */
body.theme-yp td.num, body.theme-yp .yp-mono, body.theme-yp .yp-metric b, body.theme-yp .yp-dl dd, body.theme-yp .v { font-feature-settings:'tnum' 1; }
body.theme-yp *, body.theme-yp *::before, body.theme-yp *::after { box-sizing:border-box; }
body.theme-yp [style*="gradient"] { background-image:none !important; }
body.theme-yp a { color:var(--color-primary); text-decoration:none; }
body.theme-yp a:hover { text-decoration:underline; }
body.theme-yp :focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
body.theme-yp .yp-ico { flex:none; display:inline-block; vertical-align:middle; }
@media (prefers-reduced-motion: no-preference) {
  body.theme-yp a, body.theme-yp button, body.theme-yp .yp-nav-link, body.theme-yp .yp-drawer { transition:background-color .15s, color .15s, border-color .15s, transform .2s; }
}

/* ── App-Shell (§4): feste Navigation links 240px, kompakt 64px ── */
body.theme-yp .yp-shell { display:flex; min-height:100vh; }
body.theme-yp .yp-side { position:sticky; top:0; height:100vh; flex:0 0 var(--nav-w); width:var(--nav-w); background:var(--color-nav); color:#c9d3dd;
  display:flex; flex-direction:column; z-index:200; }
body.theme-yp .yp-brand { display:flex; align-items:center; justify-content:center; height:64px; margin:12px 12px 8px; padding:8px 12px;
  background:#fff; border-radius:var(--radius-md); }
body.theme-yp .yp-brand img { max-height:40px; max-width:100%; width:auto; height:auto; display:block; }  /* Originallogo, nur skaliert */
body.theme-yp .yp-nav { flex:1; overflow-y:auto; padding:4px 8px 12px; scrollbar-width:thin; scrollbar-color:#2c4560 transparent; }
body.theme-yp .yp-nav-head { display:flex; align-items:center; justify-content:space-between; width:100%; height:32px; padding:0 8px; margin-top:8px;
  background:none; border:0; color:#8fa1b3; font:500 12px/1 var(--font); letter-spacing:.02em; cursor:pointer; border-radius:var(--radius-sm); }
body.theme-yp .yp-nav-head:hover { color:#fff; }
body.theme-yp .yp-nav-head .yp-ico { transition:transform .15s; }
body.theme-yp .yp-nav-group.open .yp-nav-head .yp-ico { transform:rotate(90deg); }
body.theme-yp .yp-nav-items { display:none; }
body.theme-yp .yp-nav-group.open .yp-nav-items { display:block; }
body.theme-yp .yp-nav-link { display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; margin:1px 0; color:#d5dde5;
  border-radius:var(--radius-sm); font-weight:400; border-left:3px solid transparent; }
body.theme-yp .yp-nav-link:hover { background:var(--color-nav-hover); color:#fff; text-decoration:none; }
body.theme-yp .yp-nav-link.active { background:var(--color-nav-hover); color:#fff; font-weight:500; border-left-color:#fff; }
body.theme-yp .yp-nav-link .yp-ico { color:#8fa1b3; }
body.theme-yp .yp-nav-link.active .yp-ico, body.theme-yp .yp-nav-link:hover .yp-ico { color:#fff; }
body.theme-yp .yp-collapse { display:flex; align-items:center; gap:10px; height:40px; margin:0 8px 8px; padding:0 10px; background:none; border:0;
  border-top:1px solid #20354c; color:#8fa1b3; font:400 13px var(--font); cursor:pointer; }
body.theme-yp .yp-collapse .yp-ico { transform:rotate(180deg); }
body.theme-yp .yp-collapse:hover { color:#fff; }

body.theme-yp .yp-frame { flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }

/* kompakte Navigation (nur Icons) */
body.theme-yp.yp-compact { --nav-w: 64px; }
body.theme-yp.yp-compact .yp-nav-text, body.theme-yp.yp-compact .yp-nav-head { display:none; }
body.theme-yp.yp-compact .yp-nav-items { display:block; }
body.theme-yp.yp-compact .yp-nav-group + .yp-nav-group { border-top:1px solid #20354c; margin-top:6px; padding-top:6px; }
body.theme-yp.yp-compact .yp-nav-link { justify-content:center; padding:0; border-left-width:0; }
body.theme-yp.yp-compact .yp-nav-link.active { box-shadow:inset 3px 0 0 #fff; }
body.theme-yp.yp-compact .yp-brand { margin:8px 6px; padding:4px; height:48px; }
body.theme-yp.yp-compact .yp-collapse { justify-content:center; }
body.theme-yp.yp-compact .yp-collapse .yp-ico { transform:none; }

/* Kopfzeile: Bereich, Suche, Benutzer */
body.theme-yp .yp-header { position:sticky; top:0; z-index:150; display:flex; align-items:center; gap:16px; height:56px; padding:0 24px;
  background:var(--color-surface); border-bottom:1px solid var(--color-border); }
body.theme-yp .yp-crumb { color:var(--color-text-muted); font-size:13px; white-space:nowrap; }
body.theme-yp .yp-search { position:relative; display:flex; align-items:center; flex:0 1 420px; margin:0 0 0 auto; }
body.theme-yp .yp-search .yp-ico { position:absolute; left:10px; color:var(--color-text-muted); pointer-events:none; }
body.theme-yp .yp-search input:not([type=hidden]) { width:100%; height:36px; padding:0 12px 0 34px !important; background:var(--color-surface-muted); }
body.theme-yp .yp-header-right { display:flex; align-items:center; gap:12px; }
body.theme-yp .yp-search + .yp-header-right { margin-left:0; }
body.theme-yp .yp-crumb + .yp-header-right { margin-left:auto; }
body.theme-yp .yp-menu-btn { display:none; }
body.theme-yp .yp-user { position:relative; }
body.theme-yp .yp-user summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:4px 8px; border-radius:var(--radius-md); }
body.theme-yp .yp-user summary::-webkit-details-marker { display:none; }
body.theme-yp .yp-user summary:hover { background:var(--color-surface-muted); }
body.theme-yp .yp-avatar { width:32px; height:32px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; }
body.theme-yp .yp-user-name { display:flex; flex-direction:column; line-height:16px; font-weight:500; font-size:13px; }
body.theme-yp .yp-user-name small { color:var(--color-text-muted); font-weight:400; font-size:12px; }
body.theme-yp .yp-user-menu { position:absolute; right:0; top:calc(100% + 6px); min-width:220px; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(20,34,53,.12); padding:6px; z-index:300; }
body.theme-yp .yp-user-menu a { display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; color:var(--color-text); border-radius:var(--radius-sm); }
body.theme-yp .yp-user-menu a:hover { background:var(--color-surface-muted); text-decoration:none; }
body.theme-yp .yp-lang select { height:32px; font-size:13px; }

body.theme-yp .yp-content { flex:1; padding:24px; min-width:0; }
body.theme-yp .yp-footer { padding:12px 24px 20px; color:var(--color-text-muted); font-size:12px; }

/* ── Seitenkopf (§5): Titel links, Hauptaktion rechts ── */
body.theme-yp .yp-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
body.theme-yp .yp-page-head h1 { margin:0; font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.01em; }
body.theme-yp .yp-page-sub { margin:4px 0 0; color:var(--color-text-muted); }
body.theme-yp .yp-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Schaltflächen (§17): primär, sekundär, ghost, destruktiv ── */
body.theme-yp .yp-btn, body.theme-yp button, body.theme-yp .pill, body.theme-yp a.btn, body.theme-yp input[type=submit] {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--radius-sm);
  font:500 14px/1 var(--font); cursor:pointer; white-space:nowrap; text-decoration:none !important;
  background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); }
body.theme-yp button:hover, body.theme-yp .pill:hover, body.theme-yp a.btn:hover, body.theme-yp .yp-btn-secondary:hover { background:var(--color-surface-muted); border-color:#c5cfd8; }
body.theme-yp .yp-btn-primary, body.theme-yp button[type=submit]:not(.yp-btn-secondary):not(.yp-btn-ghost):not(.yp-icon-btn),
body.theme-yp form button:not([type]):not(.yp-btn-secondary):not(.yp-btn-ghost):not(.yp-icon-btn):not(.yp-nav-head):not(.yp-collapse) {
  background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
body.theme-yp .yp-btn-primary:hover, body.theme-yp button[type=submit]:not(.yp-btn-secondary):not(.yp-btn-ghost):not(.yp-icon-btn):hover,
body.theme-yp form button:not([type]):not(.yp-btn-secondary):not(.yp-btn-ghost):not(.yp-icon-btn):not(.yp-nav-head):not(.yp-collapse):hover {
  background:var(--color-primary-hover); border-color:var(--color-primary-hover); color:#fff; }
body.theme-yp .yp-btn-ghost { background:transparent; border-color:transparent; color:var(--color-primary); }
body.theme-yp .yp-btn-ghost:hover { background:var(--bg-info); }
body.theme-yp .yp-btn-danger, body.theme-yp button.danger { background:var(--color-surface); color:var(--color-danger); border-color:#e3b9b9; }
body.theme-yp .yp-icon-btn { width:36px; padding:0; background:transparent; border-color:transparent; }
body.theme-yp .yp-icon-btn:hover { background:var(--color-surface-muted); }
body.theme-yp button:disabled { opacity:.5; cursor:not-allowed; }
body.theme-yp td button, body.theme-yp td .pill { height:30px; padding:0 10px; font-size:13px; }
/* Mehrfachklick verhindern (§17) */
body.theme-yp form.yp-submitting button[type=submit], body.theme-yp form.yp-submitting button:not([type]) { opacity:.6; pointer-events:none; }

/* ── Formulare (§7) ── */
body.theme-yp input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=file]), body.theme-yp select, body.theme-yp textarea {
  height:36px; padding:0 10px; background:var(--color-surface); color:var(--color-text); border:1px solid #c5cfd8; border-radius:var(--radius-sm);
  font:400 14px var(--font); max-width:100%; }
body.theme-yp textarea { height:auto; min-height:88px; padding:8px 10px; line-height:20px; }
body.theme-yp input:focus, body.theme-yp select:focus, body.theme-yp textarea:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(23,105,170,.18); }
body.theme-yp input::placeholder { color:#8796a5; }
body.theme-yp input[type=checkbox], body.theme-yp input[type=radio] { accent-color:var(--color-primary); width:16px; height:16px; vertical-align:-3px; }
body.theme-yp label { color:var(--color-text); font-size:13px; font-weight:500; }
body.theme-yp td input:not([type=checkbox]):not([type=radio]), body.theme-yp td select { height:32px; font-size:13px; }
body.theme-yp .row { display:flex; gap:16px; flex-wrap:wrap; }
body.theme-yp .row > div { min-width:180px; }
body.theme-yp .filters { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }

/* ── Panels / bestehende Karten ── */
body.theme-yp .card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:16px;
  box-shadow:var(--shadow-panel); }
body.theme-yp .card[style*="border-left"] { border-left-width:3px !important; }
body.theme-yp .k { font-size:13px; font-weight:600; color:var(--color-text); }
body.theme-yp .v { font-size:22px; font-weight:600; line-height:28px; color:var(--color-text); }
body.theme-yp .small, body.theme-yp .hint, body.theme-yp .muted { color:var(--color-text-muted); font-size:13px; }
body.theme-yp h2 { font-size:18px; line-height:26px; font-weight:600; margin:0 0 12px; }
body.theme-yp h3 { font-size:16px; line-height:24px; font-weight:600; margin:0 0 8px; }
body.theme-yp hr { border:0; border-top:1px solid var(--color-border); margin:20px 0; }
body.theme-yp .dash { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:16px; }
body.theme-yp .dash > .card { padding:12px 16px; }
/* alte Werkzeugleisten im Inhalt (Filterzeilen) */
body.theme-yp .top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:10px 12px; margin-bottom:16px; }
body.theme-yp .top form { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0; }
body.theme-yp .top .hint { margin-left:auto; }
body.theme-yp .top + br { display:none; }

/* ── Tabellen (§6) ── */
body.theme-yp table { width:100%; border-collapse:separate; border-spacing:0; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); font-size:13px; }
body.theme-yp th:first-child { border-top-left-radius:var(--radius-md); }
body.theme-yp th:last-child { border-top-right-radius:var(--radius-md); }
body.theme-yp th { background:var(--color-surface-muted); color:var(--color-text-muted); text-align:left;
  font-weight:500; font-size:12px; height:40px; padding:0 12px; border-bottom:1px solid var(--color-border); white-space:nowrap; }
body.theme-yp td { height:42px; padding:6px 12px; border-bottom:1px solid #edf1f4; vertical-align:middle; }
body.theme-yp tr:last-child td { border-bottom:0; }
body.theme-yp tbody tr:hover td { background:#f6f9fb; }
body.theme-yp td.num, body.theme-yp th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ── Status-Badges (§8): Text + Icon, nie nur Farbe ── */
body.theme-yp .yp-badge { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:11px; font-size:12px; font-weight:500;
  white-space:nowrap; border:1px solid transparent; }
body.theme-yp .yp-badge-success { background:var(--bg-success); color:var(--color-success); }
body.theme-yp .yp-badge-warning { background:var(--bg-warning); color:#8a5309; }
body.theme-yp .yp-badge-danger  { background:var(--bg-danger);  color:var(--color-danger); }
body.theme-yp .yp-badge-info    { background:var(--bg-info);    color:var(--color-primary); }
body.theme-yp .yp-badge-neutral { background:var(--bg-neutral); color:#4b5b6a; }
/* bestehende Badges vereinheitlichen */
body.theme-yp .lock-badge, body.theme-yp .warn-badge, body.theme-yp .misplaced-badge { display:inline-flex; align-items:center; gap:6px; padding:2px 8px;
  border-radius:11px; font-size:12px; font-weight:500; }
body.theme-yp .lock-badge { background:var(--bg-success) !important; color:var(--color-success) !important; border:0 !important; }
body.theme-yp .warn-badge, body.theme-yp .misplaced-badge { background:var(--bg-warning) !important; color:#8a5309 !important; border:0 !important; }
body.theme-yp .warn { color:#8a5309; font-weight:500; }
body.theme-yp .card .warn { display:block; background:var(--bg-warning); border:1px solid #efd3a6; border-radius:var(--radius-sm); padding:8px 12px; }

/* Gefahrgut: deutlich, eigene Felder (UN/Klasse) – kein generisches Rot */
body.theme-yp .dg-badge, body.theme-yp .hcdg-badge { display:inline-flex; align-items:center; padding:1px 6px; border-radius:var(--radius-sm);
  background:var(--bg-warning) !important; color:#7a4706 !important; border:1px solid #e3b97a !important; font-weight:600; font-size:12px; }
body.theme-yp .dg-box { background:var(--color-surface); border:1px solid #e3b97a; border-radius:var(--radius-md); }

/* ── Yard-Raster (Reihen-Ansicht) ── */
body.theme-yp .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
body.theme-yp .cell { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:8px; font-size:12px; min-height:96px; }
body.theme-yp .pos { font-weight:600; color:var(--color-text); margin-bottom:6px; }
body.theme-yp .stack { display:flex; flex-direction:column; gap:3px; }
body.theme-yp .tag { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:var(--radius-sm); font-size:12px; line-height:16px;
  border:1px solid var(--color-border); background:var(--color-surface-muted); color:var(--color-text) !important; text-decoration:none !important; }
body.theme-yp .tag.full { background:var(--bg-info); border-color:#c3cce8; }
body.theme-yp .tag.empty { background:var(--bg-success); border-color:#c4e0d2; }
body.theme-yp .tag.danger { background:var(--bg-warning); border-color:#e3b97a; color:#7a4706 !important; font-weight:500; }
body.theme-yp .tag.danger::before { content:'DG'; font-size:10px; font-weight:700; letter-spacing:.03em; }
body.theme-yp .tag.free { background:transparent; border-style:dashed; color:var(--color-text-muted) !important; }
body.theme-yp .cell.misplaced-cell { border-color:var(--color-warning) !important; }
body.theme-yp .yard-alert { font-size:11px; color:#8a5309 !important; }
body.theme-yp .yp-legend { display:inline-flex; gap:8px; flex-wrap:wrap; }
body.theme-yp .yp-lg { display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:var(--radius-sm); font-size:12px; border:1px solid var(--color-border); color:var(--color-text); }
body.theme-yp .yp-lg-danger { background:var(--bg-warning); border-color:#e3b97a; }
body.theme-yp .yp-lg-full { background:var(--bg-info); border-color:#c3cce8; }
body.theme-yp .yp-lg-empty { background:var(--bg-success); border-color:#c4e0d2; }
body.theme-yp .yp-lg-free { border-style:dashed; }

/* ── Container-Übersicht (Referenzmodul) ── */
body.theme-yp .yp-metrics { display:flex; flex-wrap:wrap; gap:0; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); margin-bottom:16px; box-shadow:var(--shadow-panel); }
body.theme-yp .yp-metric { display:flex; flex-direction:column; gap:2px; padding:10px 20px; min-width:130px; color:var(--color-text); }
body.theme-yp .yp-metric + .yp-metric { border-left:1px solid var(--color-border); }
body.theme-yp .yp-metric span { font-size:12px; color:var(--color-text-muted); }
body.theme-yp .yp-metric b { font-size:20px; line-height:28px; font-weight:600; font-variant-numeric:tabular-nums; }
body.theme-yp a.yp-metric:hover { background:var(--color-surface-muted); text-decoration:none; }
body.theme-yp .yp-metric-warning b { color:#8a5309; }

body.theme-yp .yp-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:12px 16px; margin-bottom:16px; }
body.theme-yp .yp-field { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:500; color:var(--color-text-muted); }
body.theme-yp .yp-field-grow { flex:1 1 260px; }
body.theme-yp .yp-field-grow input { width:100%; }
body.theme-yp .yp-filter-actions { display:flex; gap:8px; }

body.theme-yp .yp-table-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-panel); }
body.theme-yp .yp-table-meta { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; border-bottom:1px solid var(--color-border); font-size:13px; }
body.theme-yp .yp-table-scroll { overflow:visible; }
body.theme-yp .yp-table { border:0; border-radius:0; overflow:visible; }
body.theme-yp .yp-table th { position:sticky; top:56px; z-index:2; border-radius:0; }
body.theme-yp .yp-table th a { color:inherit; }
body.theme-yp .yp-table th[aria-sort=ascending] a, body.theme-yp .yp-table th[aria-sort=descending] a { color:var(--color-text); }
body.theme-yp .yp-table tbody tr { cursor:pointer; }
body.theme-yp .yp-table tbody tr:focus-visible { outline:2px solid var(--color-primary); outline-offset:-2px; }
body.theme-yp .yp-table tbody tr.yp-selected td { background:var(--bg-info); }
body.theme-yp .yp-key { font-weight:600; color:var(--color-text); letter-spacing:.01em; white-space:nowrap; }
body.theme-yp .yp-sub { font-size:12px; color:var(--color-text-muted); }
body.theme-yp .yp-mono { font-variant-numeric:tabular-nums; white-space:nowrap; }
body.theme-yp .yp-muted { color:var(--color-text-muted); }
body.theme-yp .yp-warn-text { color:#8a5309; font-weight:500; }
body.theme-yp .yp-flags { display:flex; gap:4px; flex-wrap:wrap; }
body.theme-yp td.yp-flags { display:table-cell; }
body.theme-yp td.yp-flags .yp-badge { margin:1px 4px 1px 0; }
body.theme-yp .yp-empty-row td { cursor:default; }
body.theme-yp .yp-empty { display:flex; align-items:center; gap:12px; justify-content:center; padding:40px 16px; color:var(--color-text-muted); }

/* Detail-Seitenpanel (§6/§7) */
body.theme-yp .yp-drawer-backdrop { position:fixed; inset:0; background:rgba(20,34,53,.28); z-index:700; }
body.theme-yp .yp-drawer { position:fixed; top:0; right:0; bottom:0; width:min(440px, 100vw); background:var(--color-surface); z-index:701;
  border-left:1px solid var(--color-border); box-shadow:-8px 0 24px rgba(20,34,53,.12); display:flex; flex-direction:column; }
body.theme-yp .yp-drawer[hidden], body.theme-yp .yp-drawer-backdrop[hidden] { display:none; }
body.theme-yp .yp-drawer-head { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 12px 0 20px; border-bottom:1px solid var(--color-border); }
body.theme-yp .yp-drawer-head h2 { margin:0; font-size:18px; }
body.theme-yp .yp-drawer-body { flex:1; overflow-y:auto; padding:16px 20px 24px; }
body.theme-yp .yp-dl { display:grid; grid-template-columns:140px 1fr; gap:8px 12px; margin:0 0 20px; font-size:13px; }
body.theme-yp .yp-dl dt { color:var(--color-text-muted); }
body.theme-yp .yp-dl dd { margin:0; font-weight:500; font-variant-numeric:tabular-nums; }
body.theme-yp .yp-section-title { font-size:12px; font-weight:600; color:var(--color-text-muted); margin:0 0 8px; text-transform:none; }
body.theme-yp .yp-dg-panel { border:1px solid #e3b97a; background:#fffaf2; border-radius:var(--radius-md); padding:12px 14px; margin-bottom:20px; }
body.theme-yp .yp-dg-panel .yp-dl { margin:0; }
body.theme-yp .yp-drawer-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }

/* Umgebungs-Banner (TEST/LIVE) nur über dem Inhaltsbereich, nicht klebend */
body.theme-yp .yp-env > div { position:static !important; z-index:auto !important; }

/* ── Responsiv (§16) ── */
@media (max-width: 1024px) {
  body.theme-yp .yp-side { position:fixed; inset:0 auto 0 0; height:auto; transform:translateX(-100%); width:260px; box-shadow:none; z-index:650; }
  body.theme-yp .yp-table-scroll { overflow-x:auto; }
  body.theme-yp .yp-table th { position:static; }
  body.theme-yp.yp-nav-open .yp-side { transform:none; box-shadow:8px 0 24px rgba(20,34,53,.25); }
  body.theme-yp.yp-compact { --nav-w: 240px; }
  body.theme-yp .yp-menu-btn { display:inline-flex; width:44px; height:44px; padding:0; background:transparent; border-color:transparent; color:var(--color-text); }
  body.theme-yp .yp-collapse { display:none; }
  body.theme-yp .yp-header { padding:0 12px; gap:8px; }
  body.theme-yp .yp-content { padding:16px; }
  body.theme-yp .yp-user-name { display:none; }
  body.theme-yp .yp-btn, body.theme-yp button { min-height:44px; }   /* Touch-Ziele Tablet */
  body.theme-yp input:not([type=checkbox]):not([type=radio]):not([type=hidden]), body.theme-yp select { height:44px; }
}
@media (max-width: 640px) {
  body.theme-yp .yp-crumb, body.theme-yp .yp-lang { display:none; }
  body.theme-yp .yp-search { flex:1; }
  body.theme-yp .yp-page-head h1 { font-size:20px; line-height:28px; }
  body.theme-yp .yp-metric { min-width:50%; }
  body.theme-yp .yp-metric + .yp-metric { border-left:0; }
  body.theme-yp table:not(.yp-table) { display:block; overflow-x:auto; }
  body.theme-yp .yp-dl { grid-template-columns:120px 1fr; }
}
@media print {
  body.theme-yp .yp-side, body.theme-yp .yp-header, body.theme-yp .yp-filters, body.theme-yp .yp-actions { display:none; }
  body.theme-yp .yp-frame { margin:0; }
}