/* 6.77: ein Design für Menü und Inhalt. Hier stehen Schrift, Farben und Radien an einer Stelle. */
:root {
  --d-font: 'Segoe UI', system-ui, sans-serif; --d-head-font: var(--d-font); --d-num-font: var(--d-font);
  --d-title: #202c37; --d-th: #202c37; --d-th-text: #e7edf2;
  --d-dialog-head: #202c37; --d-dialog-head-text: #ffffff;
  --d-chem-bg: #202c37; --d-chem-border: #36475a;
  --d-btn-radius: 6px; --d-input-radius: 6px; --d-card-radius: 10px;
}

/* Schrift: gleiche Familie überall, nur chemische Formeln (Cambria Math) bleiben eigen */
h1, h2, h3, h4, .page-head h1, .panel-title { font-family: var(--d-font); font-weight: 600; }
.header .brand { padding-left: 4px; padding-right: 4px; }
.brand .b-title { font: 700 14px/1.25 var(--d-font); letter-spacing: 0; white-space: nowrap; gap: 7px; }
.brand .b-sub { font-size: 10px; letter-spacing: 1.2px; }
.nav-label { font-size: 10px; letter-spacing: 1.2px; }
.header .nav-btn { font-size: 13px; border-radius: var(--d-btn-radius); }
.header .nav-btn .nav-index { font: 500 10px var(--d-font); font-variant-numeric: tabular-nums; }
.header .connection-status { font-size: 11px; }
.data-table .r, .stat-number, .lot-quantity, .k-qty, .kav-kpi b, .nav-index { font-variant-numeric: tabular-nums; }
.stat-number { letter-spacing: 0; }
.lot-chip { font-family: inherit; }
.sub-tabs button { font-family: var(--d-font); }

/* Größen im Inhalt, passend zum Menü */
.main-content .btn { font-size: 13px; font-weight: 600; }
.main-content .btn-sm { font-size: 12px; }
.main-content .data-table { font-size: 13px; }
.main-content .data-table th { font-size: 11px; font-weight: 600; }
.main-content .desc { font-size: 13px; }
.main-content .kav-sub, .main-content .kav-kurz, .main-content .kav-lager { font-size: 12px; }

/* Knöpfe: gleiche Funktion = gleiche Farbe (siehe KNOPF_FARBEN in build_6_77.py). Flach wie das Menü. */
.btn { background: var(--d-primary); color: #fff; font-family: var(--d-font); border-radius: var(--d-btn-radius); }
.btn::before { display: none; }
.btn:hover:not(:disabled) { transform: none; box-shadow: none; filter: brightness(0.92); }
.btn:focus-visible { outline: 2px solid var(--d-primary); outline-offset: 2px; }
.btn-success { background: var(--d-ok); }
.btn-usage { background: #c2410c; color: #fff; }
.btn-warning { background: #fcc419; color: #212529; }
.btn-danger { background: #c92a2a; }
.btn-info { background: var(--d-info); }
.btn-purple, .btn-violet, .btn-excel { background: var(--d-accent); }
.btn-secondary { background: var(--d-secondary); }
.btn:disabled { background: #e9ecef; color: #495057; filter: none; }
.btn-usage:disabled { background: #fbe3d6; color: #9a3412; }
dialog .btn { font-size: 13px; font-weight: 600; min-height: 32px; padding: 7px 12px; line-height: 1.35; }
.btn-add-comp { background: var(--d-ok); border: 0; color: #fff; border-radius: var(--d-btn-radius); font-family: var(--d-font); font-size: 13px; font-weight: 600; }
.btn-add-comp:hover { background: var(--d-ok); filter: brightness(0.92); }
.btn-remove-row { background: #fcc419; border: 0; color: #212529; border-radius: var(--d-btn-radius); font-family: var(--d-font); }
.btn-remove-row:hover { background: #fcc419; color: #212529; filter: brightness(0.92); }

/* Reiter: Statistik und Datenbank sehen gleich aus */
.sub-tabs, .bo-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 0; margin-bottom: 12px; background: var(--d-subtabs); border-radius: var(--d-card-radius) var(--d-card-radius) 0 0; border-bottom: 2px solid var(--d-line); }
.sub-tabs button, .bo-tabs .btn:not(.btn-secondary) { flex: 0 1 auto; min-height: 0; padding: 9px 16px; margin: 0; background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--d-text); font-size: 13px; font-weight: 500; }
.sub-tabs button.active, .bo-tabs .btn.current:not(.btn-secondary) { background: var(--d-card); color: var(--d-primary); font-weight: 600; border-bottom-color: var(--d-primary); }
.sub-tabs button:hover, .bo-tabs .btn:not(.btn-secondary):not(.current):hover { background: var(--d-side-tint); filter: none; }
/* .bo-tabs .btn:not(.current) aus dem Grundstil machte den Abmelden-Knopf weiß */
.bo-tabs #boLogout { align-self: center; margin-right: 8px; background: var(--d-secondary); color: #fff; border: 0; }

/* Unterkästen: überall dieselbe ruhige Fläche */
.recipe-box, .excel-import-section, .blue-box, .green-box, .lot-selector, .scale-bar, #view-kaviar .kav-scale { background: var(--d-body); border: 1px solid var(--d-line); border-radius: var(--d-card-radius); }
.recipe-box h3, .excel-import-section h3, .blue-box h3, .green-box h3 { color: var(--d-title); }
.recipe-box label { color: var(--d-label); }
.recipe-box input, .recipe-box select { border-color: var(--d-input-border); }
.comp-table-wrapper { border: 1px solid var(--d-line); border-radius: var(--d-card-radius); }
.comp-table th { background: var(--d-th); color: var(--d-th-text); font-size: 11px; font-weight: 600; }
.kommission-item { border-left-color: var(--d-primary); }
.kommission-item .k-qty, .k-total { color: var(--d-title); }
.bars .fill { background: var(--d-primary); }

/* Abzeichen, Chips, Karten */
.filter-info, .scale-factor-badge { background: var(--d-primary); border-radius: var(--d-btn-radius); }
.kav-chip { border-radius: var(--d-btn-radius); }
.kav-chip.active { background: var(--d-th); color: #fff; border-color: var(--d-th); }
.kav-badge { border-radius: var(--d-btn-radius); }
.kav-kpi { background: var(--d-body); border-color: var(--d-line); color: var(--d-muted); }
.kav-kpi b { color: var(--d-title); }
.kav-formel .t { color: var(--d-chem-text); }
.kav-zu .kav-chat-open { background: var(--d-th); color: #fff; border-color: var(--d-th); }
dialog { border-radius: var(--d-card-radius); }
dialog .dh { font-family: var(--d-font); }
.kvh-login { background: var(--d-th); }

/* Excel-Import: nur ein kompakter Datei-Button statt einer langen weißen Fläche */
#excelFile { width: 128px; max-width: 100%; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer; }
#excelFile::file-selector-button { box-sizing: border-box; width: 128px; min-height: 36px; margin: 0; padding: 7px 10px; border: 1px solid var(--d-input-border); border-radius: var(--d-input-radius); background: var(--d-input-bg); color: var(--d-text); font: 600 13px var(--d-font); cursor: pointer; transition: background .18s, border-color .18s; }
#excelFile::file-selector-button:hover { background: var(--d-side-tint); border-color: var(--d-primary); }
#excelFile:focus-visible { outline: 3px solid var(--fx-accent); outline-offset: 3px; }

/* Lesbarkeit: Grün der Kennzahlen hatte auf Weiß nur 3,1 : 1 */
.stat-number.normal { color: var(--d-ok); }

/* Gemeinsame Interaktions- und Animationsebene. Fachlogik bleibt im Original. */
:root{
  --fx-accent:#46d9c4;--fx-rgb:70,217,196;--fx-secondary:#f4c95d;
  --design-shadow:0 18px 48px rgba(4,18,24,.14);--design-radius:18px;
}
html{min-height:100%;scroll-behavior:smooth}
body{position:relative;min-height:100dvh;isolation:isolate}
body>.container{position:relative;z-index:1}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6}
.design-switch{position:fixed;top:12px;right:16px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 12px;border:1px solid var(--d-line);border-radius:999px;background:var(--d-card);color:var(--d-text);box-shadow:0 6px 20px rgba(0,0,0,.12);font:600 11px/1.2 var(--d-font);text-decoration:none;letter-spacing:.03em;transition:transform .18s ease,box-shadow .18s ease}
.design-switch:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.design-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.design-switch:focus-visible{outline:3px solid var(--fx-accent);outline-offset:3px}
.container{transition:background .25s ease}
.header{isolation:isolate}
.header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 5%,rgba(var(--fx-rgb),.14),transparent 34%)}
.brand{position:relative}
.brand .b-title{position:relative}
.brand .brand-symbol{filter:drop-shadow(0 0 10px rgba(var(--fx-rgb),.32))}
.main-content{position:relative;min-width:0}
.page-head{position:relative;padding-right:130px}
.page-head h1{letter-spacing:-.035em}
.page-head p{max-width:75ch}
section.view.active{animation:designViewIn .26s cubic-bezier(.2,.8,.2,1)}
@keyframes designViewIn{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout{position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.form-section:hover,.table-section:hover{border-color:rgba(var(--fx-rgb),.3)}
.stat-card{position:relative;overflow:hidden;isolation:isolate;transform-style:preserve-3d;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease}
.stat-card::after{content:"";position:absolute;inset:-40% -20%;z-index:-1;background:radial-gradient(circle at var(--mx,70%) var(--my,20%),rgba(var(--fx-rgb),.16),transparent 35%);opacity:0;transition:opacity .2s}
.stat-card:hover::after{opacity:1}
.stat-card.click:hover{transform:perspective(700px) rotateX(2deg) rotateY(-2deg) translateY(-4px);box-shadow:var(--design-shadow)}
.stat-number{font-variant-numeric:tabular-nums}
.btn{isolation:isolate;transform:translateZ(0);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 7px 16px rgba(0,0,0,.15)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.btn:focus-visible,.nav-btn:focus-visible,.kav-chip:focus-visible,.kav-card:focus-visible{outline:3px solid var(--fx-accent);outline-offset:3px}
.nav-btn{position:relative;overflow:hidden;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.nav-btn:hover{transform:translateX(3px)}
.nav-btn.active .ui-icon{animation:navIconPop .28s ease}
@keyframes navIconPop{0%{transform:scale(.82) rotate(-6deg)}100%{transform:none}}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:rgba(var(--fx-rgb),.62)}
.lot-item,.recipe-card,.kav-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.lot-item:hover,.recipe-card:hover,.kav-card:hover{transform:translateY(-2px)}
.lot-item.selected{animation:selectedPulse .35s ease}
@keyframes selectedPulse{0%{transform:scale(.985)}70%{transform:scale(1.008)}100%{transform:none}}
.data-table tbody tr{transition:background .15s ease,transform .15s ease}
.data-table tbody tr:hover{box-shadow:inset 3px 0 0 var(--fx-accent)}
.toast{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px);animation:toastEnter .28s cubic-bezier(.2,.8,.2,1)}
.toast.ok::after{content:"";position:absolute;left:0;bottom:0;height:3px;background:var(--fx-accent);animation:toastLife 4s linear forwards}
@keyframes toastEnter{from{opacity:0;transform:translateX(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastLife{from{width:100%}to{width:0}}
dialog{animation:dialogIn .22s ease}
dialog::backdrop{backdrop-filter:blur(7px)}
@keyframes dialogIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.kvh-login{overflow:hidden}
.kvh-login::before,.kvh-login::after{content:"";position:absolute;width:38vmin;aspect-ratio:1;border:1px solid rgba(var(--fx-rgb),.25);border-radius:50%;animation:loginOrbit 12s linear infinite;pointer-events:none}
.kvh-login::after{width:55vmin;animation-direction:reverse;animation-duration:18s}
.kvh-box{position:relative;z-index:1}
@keyframes loginOrbit{to{transform:rotate(360deg)}}
.fx-celebration{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;pointer-events:none;perspective:900px}
.fx-celebration[hidden]{display:none}
.fx-success-card{position:relative;display:grid;place-items:center;gap:24px;min-width:220px;padding:32px;border:1px solid rgba(var(--fx-rgb),.45);border-radius:28px;background:rgba(9,22,27,.84);color:#f5fffd;box-shadow:0 24px 90px rgba(0,0,0,.3),inset 0 0 40px rgba(var(--fx-rgb),.08);backdrop-filter:blur(16px);animation:successCard 1.65s cubic-bezier(.2,.8,.2,1) forwards}
.fx-success-card strong{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.fx-scene{width:88px;height:88px;position:relative;transform-style:preserve-3d;animation:cubeSpin 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.fx-cube{position:absolute;inset:14px;transform-style:preserve-3d;animation:cubeTurn 1.4s ease forwards}
.fx-face{position:absolute;inset:0;border:2px solid var(--fx-accent);background:rgba(var(--fx-rgb),.17);box-shadow:inset 0 0 20px rgba(var(--fx-rgb),.18)}
.fx-face:nth-child(1){transform:translateZ(30px)}.fx-face:nth-child(2){transform:rotateY(180deg) translateZ(30px)}
.fx-face:nth-child(3){transform:rotateY(90deg) translateZ(30px)}.fx-face:nth-child(4){transform:rotateY(-90deg) translateZ(30px)}
.fx-face:nth-child(5){transform:rotateX(90deg) translateZ(30px)}.fx-face:nth-child(6){transform:rotateX(-90deg) translateZ(30px)}
.fx-check{position:absolute;inset:0;display:grid;place-items:center;color:var(--fx-accent);font:700 48px/1 var(--d-font);transform:translateZ(42px);opacity:0;animation:checkIn .35s .45s ease forwards}
.fx-halo{position:absolute;width:170px;height:170px;border:2px solid var(--fx-accent);border-radius:50%;animation:haloOut 1.2s ease forwards}
@keyframes cubeSpin{0%{transform:scale(.2) rotateX(-25deg) rotateY(0);opacity:0}20%{opacity:1}70%{transform:scale(1) rotateX(-15deg) rotateY(260deg)}100%{transform:scale(.85) rotateX(-10deg) rotateY(330deg);opacity:0}}
@keyframes cubeTurn{to{transform:rotateX(25deg) rotateY(90deg)}}
@keyframes checkIn{from{opacity:0;transform:translateZ(42px) scale(.4)}to{opacity:1;transform:translateZ(42px) scale(1)}}
@keyframes haloOut{from{opacity:.7;transform:scale(.2)}to{opacity:0;transform:scale(1.5)}}
@keyframes successCard{0%{opacity:0;transform:translateY(20px) scale(.92)}12%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px) scale(.98)}}
.fx-receipt .fx-success-card{border-radius:12px}.fx-usage .fx-success-card{border-color:var(--fx-secondary)}
.fx-save .fx-success-card{box-shadow:0 24px 90px rgba(0,0,0,.3),0 0 50px rgba(var(--fx-rgb),.18)}
@media(max-width:900px){
  .design-switch{top:8px;right:8px;min-height:34px;padding:6px 10px}.design-switch span{display:none}
  .page-head{padding-right:0}.nav-btn:hover{transform:none}.fx-canvas{opacity:.35}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .fx-canvas{opacity:.25}.fx-celebration{display:none!important}
}
@media print{.fx-canvas,.design-switch,.fx-celebration{display:none!important}}

/* 01 RIC — Farben und Schrift aus Legal_Aspects_Of_AI_Fact_Sheet_Final.html.
   Fast schwarzes Nachtblau, schiefer-blaue Karten, Periwinkle als Akzent, Gold als zweiter Akzent.
   Nur Darstellung: Fachlogik, Knopf-Bedeutungen und Figuren bleiben wie in 01_aurora.html. */
:root{
  color-scheme:dark;
  --fx-accent:#9bb6ff;--fx-rgb:155,182,255;--fx-secondary:#ffc65c;--design-radius:16px;--design-shadow:0 18px 60px rgba(0,0,0,.34);
  --r-seite:#020b13;--r-text:#f3f6fc;--r-grau:#c5ccda;--r-rand:#43536a;--r-rand-hell:#526783;--r-peri:#9bb6ff;--r-peri-hell:#c4d4ff;--r-cyan:#65e7ff;--r-gold:#ffc65c;--r-gruen:#58e0ad;--r-rot:#ff8d9b;--r-orange:#ffab73;
  --r-karte:linear-gradient(125deg,rgba(29,38,48,.96),rgba(20,28,39,.97) 62%,rgba(37,43,48,.96));
  --r-innen:linear-gradient(125deg,rgba(32,43,56,.91),rgba(26,34,45,.87));
  --d-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--d-head-font:var(--d-font);--d-num-font:var(--d-font);
  --d-body:#141c27;--d-text:var(--r-text);--d-muted:var(--r-grau);--d-label:#dbe2ee;--d-title:#ffffff;
  --d-container:transparent;--d-header:rgba(2,10,17,.94);--d-header-text:var(--r-text);--d-header-title:#ffffff;--d-header-sub:var(--r-grau);
  --d-nav-border:#42536b;--d-nav-bg:rgba(255,255,255,.02);--d-nav-text:#cbd5e6;--d-nav-hover:#192333;--d-nav-active-bg:#465c96;--d-nav-active-text:#ffffff;
  --d-subnav:#071824;--d-btn-radius:8px;--d-input-radius:8px;--d-card-radius:14px;
  --d-primary:#4564ad;--d-primary-2:#314f90;--d-info:#0e7490;--d-info-2:#155e75;--d-accent:#6d4fc7;--d-accent-2:#5a3fae;--d-secondary:#3f5068;--d-ok:#1b7a5b;--d-ok-2:#155f47;
  --d-accent-soft:#232e45;--d-accent-text:var(--r-peri-hell);--d-accent-tint:#192333;--d-accent-border:var(--r-rand);
  --d-input-border:var(--r-rand-hell);--d-input-bg:#0e1622;--d-readonly:#1b2533;--d-focus:rgba(155,182,255,.24);
  --d-card:rgba(20,28,39,.97);--d-card-shadow:0 18px 60px rgba(0,0,0,.34);--d-card-border:1px solid #3c4857;
  --d-table-shadow:0 0 0 1px var(--r-rand);--d-th:#192333;--d-th-text:#e6ecf8;--d-row-hover:#1f2c3f;
  --d-info-tint:#17222f;--d-info-border:var(--r-rand);--d-info-text:#bfe8ff;--d-subtabs:#192333;--d-side-tint:#17202c;--d-line:var(--r-rand);
  --d-dialog-head:#192333;--d-dialog-head-text:#ffffff;--d-chem-bg:#111b2c;--d-chem-border:#42536b;--d-chem-text:var(--r-peri-hell);--d-chem-meta:#dbe2ee;--d-chem-inline:var(--r-peri);
}
/* Seite: wie im Beispiel zwei feine Farbschleier auf Nachtblau */
body{background:var(--r-seite);color:var(--d-text);font-family:var(--d-font)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 20% 8%,rgba(0,144,255,.12),transparent 28%),radial-gradient(circle at 77% 10%,rgba(255,176,58,.1),transparent 26%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.18) 0%,transparent 18%,transparent 82%,rgba(0,0,0,.18) 100%)}
.fx-canvas{opacity:.42}
.container{grid-template-columns:238px minmax(0,1fr)}

/* Menü: wie die Kopfleiste und die aktiven Reiter des Beispiels */
.container>.header{background:rgba(2,10,17,.94);border-right:1px solid #1b3346;backdrop-filter:blur(14px)}
.header .brand .b-title{color:#ffffff;font-weight:800;letter-spacing:.01em}.header .brand-symbol{color:var(--r-gold)}.header .b-sub,.header .nav-label{color:#a8b9cf;letter-spacing:.16em;font-weight:700}
.header .nav-btn{color:#cbd5e6;border:1px solid transparent;border-radius:8px;font-weight:600}
.header .nav-btn:hover{background:#192333;color:#ffffff}
.header .nav-btn.active{background:linear-gradient(110deg,#344879,#465c96);color:#ffffff;border-color:#93b2ff;box-shadow:0 0 9px rgba(117,155,255,.3),inset 0 0 10px rgba(189,212,255,.12);font-weight:700}
.header .nav-btn .nav-index{color:#a8b9cf}.header .nav-btn.active .nav-index{color:#dbe6ff}
.header .sidebar-formula{color:var(--r-peri)}.header .sidebar-formula-reaction{color:#b6c6e2}.header .sidebar-formula-intro{border-bottom-color:#42536b}
.header .kvh-abmelden{color:#dbe2ee;border-color:#526783}.header .kvh-abmelden:hover{background:#192333}
.header .connection-status{color:var(--r-gruen)}.header .connection-status.connecting{color:var(--r-gold)}.header .connection-status.disconnected{color:var(--r-rot)}

/* Schrift und Überschriften: enge, kräftige Titel wie im Beispiel */
h1,h2,h3,h4,.page-head h1,.panel-title{font-family:var(--d-font);font-weight:700;color:#ffffff}
.page-head h1{color:#ffffff;font-size:30px;font-weight:800;letter-spacing:-.03em}.page-head p{color:var(--r-grau)}
.main-content .page-head p{color:var(--r-grau);font-size:14px}
.main-content .form-section>h2,.main-content .table-section>h2,.main-content .section-head h2{color:#ffffff;font-size:19px;font-weight:700;letter-spacing:-.015em}
.main-content .hint,.main-content small,.main-content .desc,.hint,small,.desc{color:var(--r-grau)}

/* Karten */
.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout{background:var(--r-karte);border:1px solid #3c4857;box-shadow:var(--d-card-shadow);backdrop-filter:blur(14px)}
.main-content .form-section,.main-content .table-section,.main-content .alerts-section{padding:16px 18px;margin-bottom:16px}
.main-content .form-section>h2,.main-content .table-section>h2,.main-content .section-head{padding-bottom:9px;border-bottom:1px solid var(--r-rand)}
.main-content .section-head{margin-bottom:14px}.main-content .form-group{margin-bottom:12px}.main-content .form-row{gap:14px}
.form-section:hover,.table-section:hover{border-color:var(--r-rand-hell)}
.stat-card{background:var(--r-innen);border:1px solid var(--r-rand);border-left:1px solid var(--r-rand);border-radius:14px;box-shadow:none;text-align:left;padding:18px}
.stat-card::before{content:"";position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--r-peri);box-shadow:0 0 12px rgba(114,138,255,.7)}
.stat-card.click:hover{border-color:#93b2ff}
.stat-number{color:#ffffff;font-size:28px;font-weight:800;letter-spacing:-.02em}.stat-number.normal{color:var(--r-gruen)}.stat-number.warning{color:var(--r-gold)}.stat-number.danger{color:var(--r-rot)}.stat-number.info{color:var(--r-cyan)}
.stat-label{color:var(--r-grau);letter-spacing:.06em}

/* Unterkästen: alle gleich, wie die inneren Karten des Beispiels */
.recipe-box,.excel-import-section,.blue-box,.green-box,.lot-selector,.scale-bar,#view-kaviar .kav-scale,.excel-queue,.booking-progress{background:var(--r-innen);border:1px solid var(--r-rand);border-radius:12px;color:var(--d-text)}
.main-content .recipe-box,.main-content .excel-import-section,.main-content .blue-box,.main-content .green-box,.main-content .scale-bar,.main-content .lot-selector{padding:13px 15px;margin-bottom:14px}
.recipe-box h3,.excel-import-section h3,.blue-box h3,.green-box h3,.scale-bar h4,.lot-selector h4{color:#ffffff}
.main-content .recipe-box h3,.main-content .excel-import-section h3,.main-content .blue-box h3,.main-content .green-box h3{font-size:16px;font-weight:700}
.recipe-box label{color:var(--d-label)}.recipe-side{background:rgba(14,22,34,.6);border-color:var(--r-rand)}
.recipe-card,.lot-item,.excel-queue-item,.kommission-item,.progress-item{background:#1a2432;border-color:var(--r-rand);color:var(--d-text)}
.recipe-card.active{background:#232f45;border-color:#93b2ff;box-shadow:0 0 9px rgba(117,155,255,.3)}.recipe-card:hover,.lot-item:hover{border-color:#93b2ff}
.lot-item.selected{background:linear-gradient(110deg,#344879,#465c96);border-color:#93b2ff;color:#ffffff}.lot-item.selected small{color:#e6ecf8}.lot-item.selected .lot-quantity{color:#ffffff}
.lot-quantity{color:var(--r-gruen)}.lot-chip{background:#232e3d;color:#dbe2ee}.lot-chip.expired{background:#47202a;color:#ffc7cf}
.kommission-item{border-left-color:var(--r-peri)}.kommission-item .k-qty,.k-total{color:#ffffff}.k-total{background:#192333}
.progress-item{border-bottom-color:var(--r-rand)}.progress-item .pi{color:#dbe2ee}
.custom-toggle{background:#192333}.custom-toggle .toggle-text{color:var(--d-text)}.slider{background:#526783}.toggle-switch input:checked+.slider{background:var(--d-primary)}
.empty,.empty-state,.empty-state h2,.empty-state p{color:var(--r-grau)}
#rfHint{color:var(--r-grau)!important}

/* Eingaben: dunkel wie die Bedienelemente des Beispiels */
.main-content label{display:block;color:var(--d-label);font-size:13px;font-weight:600;line-height:1.4;margin-bottom:5px}
.main-content input:not([type=checkbox]):not([type=radio]),.main-content select,.main-content textarea{min-height:39px;padding:7px 10px;border:1px solid var(--r-rand-hell);border-radius:8px;background:#0e1622;color:var(--r-text);font-size:14px;font-weight:500}
.main-content input::placeholder,.main-content textarea::placeholder{color:#a3b1c6;opacity:1;font-weight:400}
.main-content select option{background:#141c27;color:var(--r-text)}
.main-content input:hover:not(:disabled),.main-content select:hover:not(:disabled),.main-content textarea:hover:not(:disabled){border-color:#7f9bd6}
.main-content input:focus,.main-content select:focus,.main-content textarea:focus{border-color:#93b2ff;outline:0;background:#111b2a;box-shadow:0 0 0 3px rgba(114,138,255,.3)}
.main-content input[readonly],.main-content input:disabled{background:#1b2533;color:#c5ccda;border-color:var(--r-rand)}
#excelFile::file-selector-button{background:#192333;color:#ffffff;border-color:var(--r-rand-hell)}#excelFile::file-selector-button:hover{background:#232f45;border-color:#93b2ff}
dialog input,dialog select,dialog textarea{background:#0e1622;color:var(--r-text);border-color:var(--r-rand-hell)}dialog label{color:var(--d-label)}

/* Tabellen */
.main-content .data-table,.data-table{background:#141c27;color:var(--r-text);font-size:13px}
.main-content .data-table th,.data-table th{background:#192333;color:#e6ecf8;font-size:11px;font-weight:700;letter-spacing:.04em}
.main-content .data-table td,.data-table td{border-color:#2f3d50;color:#eef2f9}
.data-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}.data-table tr.sub>td{background:#192333}.data-table tr.sub .data-table th{background:#232e3d;color:#e6ecf8}
.data-table tbody tr:hover{background:#1f2c3f}.data-table tr.row-bad>td{background:#3a2029}.data-table tr.row-warn>td{background:#3a321f}.data-table tr.row-info>td{background:#1b3040}
.comp-table-wrapper{border-color:var(--r-rand)}.comp-table th{background:#192333;color:#e6ecf8}.comp-table td{border-color:#2f3d50}.comp-table tr:hover td{background:#1f2c3f}
.status-normal{background:#173b30;color:#9ff0cf}.status-warning{background:#3f3419;color:#ffe09a}.status-danger{background:#47202a;color:#ffc7cf}.status-info{background:#16343f;color:#a6ecff}.status-mute{background:#232e3d;color:#c5ccda}
.st-ok{color:var(--r-gruen)}.st-warn{color:var(--r-orange)}.st-bad,.missing,.badge-exp{color:var(--r-rot)}.badge-soon{color:var(--r-orange)}
.alert-item{border-left-width:2px;background:#1a2432;color:#e6ecf8}.alert-urgent{background:#3a2029;color:#ffc7cf}.alert-high{background:#3b2a1c;color:#ffd2ae}.alert-medium{background:#3a321f;color:#ffe09a}.alert-ok{background:#173b30;color:#b5f2d9}.alert-in{background:#16343f;color:#b9efff}.alert-out{background:#3b2a1c;color:#ffd2ae}
.summary-box{color:var(--d-text)}.summary-box.ok{background:#173b30;border-color:#2c6e57}.summary-box.warn{background:#3f3419;border-color:#7a6431}.summary-box.bad{background:#3a2029;border-color:#7d3a48}
.warn-box{background:#3a321f;border-color:#a98a3c;color:#ffe9b5}.warn-box h3{color:var(--r-gold)}.danger-box{background:#3a2029;border-color:#b44a5c;color:#ffd3da}.danger-box h3{color:#ffb3bf}
.bars .track{background:#232e3d}.legend{color:var(--r-grau)}.bars .fill{background:linear-gradient(90deg,#4564ad,#9bb6ff)}

/* Reiter und Chips: wie die Reiterleiste des Beispiels */
.sub-tabs,.bo-tabs{background:#192333;border:1px solid #42536b;border-radius:11px;padding:4px;gap:4px}
.sub-tabs button,.bo-tabs .btn:not(.btn-secondary){color:#cbd5e6;border:1px solid transparent;border-radius:7px;font-weight:600}
.sub-tabs button.active,.bo-tabs .btn.current:not(.btn-secondary){background:linear-gradient(110deg,#344879,#465c96);color:#ffffff;border-color:#93b2ff;box-shadow:0 0 9px rgba(117,155,255,.3);font-weight:650}
.sub-tabs button:hover,.bo-tabs .btn:not(.btn-secondary):not(.current):hover{background:#232f45;color:#ffffff}
.filter-info,.scale-factor-badge{background:linear-gradient(130deg,#4564ad,#314f90);color:#ffffff}
.kav-chip{background:#172737;border-color:#4b668d;color:#dbe2ee}.kav-chip:hover{border-color:#93b2ff}.kav-chip.active{background:linear-gradient(110deg,#344879,#465c96);color:#ffffff;border-color:#93b2ff}
.kav-q{background:#182536;color:#bfe8ff;border-color:#4b668d}

/* Knöpfe: Bedeutung und Farbgruppe wie in 6.77, Töne passend zum Beispiel (Weiß mindestens 4,5 : 1) */
.btn{background:linear-gradient(130deg,#4564ad,#314f90);color:#ffffff;border:1px solid transparent;font-weight:700;border-radius:8px}
.btn:not(:disabled){box-shadow:inset 0 0 8px rgba(180,203,255,.13)}
.btn-success{background:linear-gradient(130deg,#1b7a5b,#155f47)}
.btn-usage{background:linear-gradient(130deg,#c9480f,#a83a0a);color:#ffffff}
.btn-warning{background:linear-gradient(130deg,#ffc65c,#f0ad36);color:#1a1408}
.btn-danger{background:linear-gradient(130deg,#c8263a,#a81e30);color:#ffffff}
.btn-info{background:linear-gradient(130deg,#0e7490,#155e75)}
.btn-purple,.btn-violet,.btn-excel{background:linear-gradient(130deg,#6d4fc7,#5a3fae)}
.btn-secondary{background:#3f5068;border-color:#6686a9}
.btn:disabled{background:#232e3d;color:#a9b6c8;border-color:#3c4857;box-shadow:none;filter:none}
.btn-usage:disabled{background:#3a2a22;color:#ecc0a8;border-color:#5a4033}
.btn-add-comp{background:linear-gradient(130deg,#1b7a5b,#155f47);border:0;color:#ffffff}
.btn-add-comp:hover{background:linear-gradient(130deg,#1b7a5b,#155f47)}
.btn-remove-row,.btn-remove-row:hover{background:linear-gradient(130deg,#ffc65c,#f0ad36);color:#1a1408}
.bo-tabs #boLogout{background:#3f5068;color:#ffffff;border:1px solid #6686a9}
.design-switch{background:#172737;color:#edf4ff;border-color:#6686a9}

/* Labor-Rezepturen */
.kav-card{background:var(--r-innen);border-color:var(--r-rand);color:var(--d-text)}.kav-card.active{background:#232f45;border-color:#93b2ff;box-shadow:0 0 9px rgba(117,155,255,.3)}.kav-card b{color:#ffffff}
.kav-sub,.kav-kurz{color:var(--r-grau)}.kav-lager.ok{color:var(--r-gruen)}.kav-lager.warn{color:var(--r-gold)}
.kav-badge{background:#182536;color:#bfe8ff;border-color:#4b668d}.kav-badge.Gelierbad{background:#2a2348;color:#d8cbff;border-color:#5a4c8c}.kav-badge.Aufguss{background:#173b30;color:#b5f2d9;border-color:#2c6e57}.kav-badge.Alternative{background:#3b2a1c;color:#ffd2ae;border-color:#7a5533}
#view-kaviar .kav-detail-head{background:#192333;color:#e6ecf8;border-bottom-color:var(--r-gold)}
.kav-msgs{background:#0e1622;border-color:var(--r-rand)}.kav-msg.ki .kav-bubble{background:#1a2432;color:var(--r-text);border-color:var(--r-rand)}.kav-msg.nutzer .kav-bubble{background:#465c96}.kav-msg.fehler .kav-bubble{background:#3a2029;color:#ffc7cf;border-color:#7d3a48}
.kav-bubble pre,.kav-bubble code{background:#0e1622;color:#dbe2ee}
.kav-kpi{background:#1a2432;border-color:var(--r-rand);color:var(--r-grau)}.kav-kpi b{color:#ffffff}.kav-formel{background:#111b2c;border-color:#42536b}.kav-formel .t{color:var(--r-peri-hell)}.kav-formel .f{color:#ffffff}
.kav-hinweis{background:#3a321f;border-color:#a98a3c;color:#ffe9b5}.kav-hist summary{color:var(--d-label)}.kav-hist-item{border-color:var(--r-rand)}
.kav-na{color:var(--r-grau)}.kav-zu .kav-chat-open{background:linear-gradient(110deg,#344879,#465c96);color:#ffffff;border-color:#93b2ff}
.chem-card{background:#111b2c;border-color:#42536b}.chem-inline{color:var(--r-peri)}

/* Dialoge, Meldungen, Anmeldung */
dialog{background:#141c27;color:var(--r-text)}dialog .dh{background:#192333;color:#ffffff;border-bottom:1px solid var(--r-rand)}dialog .df{background:#111924;border-color:var(--r-rand)}.panel-title{color:#ffffff;border-bottom-color:var(--r-rand)}
.toast{background:#172737;color:#edf4ff;border-color:#6686a9}.toast.ok{background:#173b30;color:#d6f8ea}.toast.bad{background:#47202a;color:#ffe0e5}.toast.warn{background:#ffc65c;color:#1a1408}
.kvh-login{background:radial-gradient(circle at 20% 8%,rgba(0,144,255,.16),transparent 34%),radial-gradient(circle at 77% 10%,rgba(255,176,58,.12),transparent 30%),#020b13}
.kvh-box{background:#141c27;color:var(--r-text);border:1px solid #526783}.kvh-box input[type=password]{background:#0e1622;color:var(--r-text);border-color:var(--r-rand-hell)}.kvh-logo{background:linear-gradient(130deg,#4564ad,#314f90)}.kvh-msg{color:var(--r-rot)}
.fx-success-card{background:rgba(11,20,32,.9)}

/* Figuren Molekül und Perle: gleiche Form, Farben des Beispiels */
body[data-design="ric"] #molShell stop:nth-child(1){stop-color:#c9d6f2}body[data-design="ric"] #molShell stop:nth-child(2){stop-color:#5f729c}body[data-design="ric"] #molShell stop:nth-child(3){stop-color:#232f47}body[data-design="ric"] #molShell stop:nth-child(4){stop-color:#0e1622}
body[data-design="ric"] #molVisor stop:nth-child(1){stop-color:#1f2f52}body[data-design="ric"] #molVisor stop:nth-child(2){stop-color:#0a1220}body[data-design="ric"] #molVisor stop:nth-child(3){stop-color:#38548f}
body[data-design="ric"] #pearlShell stop:nth-child(1){stop-color:#e6ecf8}body[data-design="ric"] #pearlShell stop:nth-child(2){stop-color:#98a9cb}body[data-design="ric"] #pearlShell stop:nth-child(3){stop-color:#435370}body[data-design="ric"] #pearlShell stop:nth-child(4){stop-color:#1b2536}body[data-design="ric"] #pearlShell stop:nth-child(5){stop-color:#0c121c}
body[data-design="ric"] #pearlVisor stop:nth-child(1){stop-color:#2a3a5e}body[data-design="ric"] #pearlVisor stop:nth-child(2){stop-color:#0a0f1a}body[data-design="ric"] #pearlVisor stop:nth-child(3){stop-color:#1f2f4f}
body[data-design="ric"] .assistant-figure .orbit,body[data-design="ric"] .assistant-figure .pearl-ring{stroke:#9bb6ff}
body[data-design="ric"] .assistant-figure .orbit-b{stroke:#a8b9cf}
body[data-design="ric"] .assistant-figure .orbit-node{fill:#c4d4ff;stroke:#1b2536}
body[data-design="ric"] .assistant-figure .orbit-node.secondary,body[data-design="ric"] .assistant-figure .panel-light{fill:#ffc65c}
body[data-design="ric"] .assistant-figure .fin{fill:#263449;stroke:#8fa6cf}
body[data-design="ric"] .assistant-figure .shell{stroke:#a8bbdf}
body[data-design="ric"] .assistant-figure .shell-seam{stroke:#8295b8}
body[data-design="ric"] .assistant-figure .lower-panel{fill:#141c27;stroke:#7186ab}
body[data-design="ric"] .assistant-figure .visor{stroke:#8fa9dc}
body[data-design="ric"] .assistant-figure .visor-glint{stroke:#d6e2ff}
body[data-design="ric"] .assistant-figure .status-light{fill:#9bb6ff}
body[data-design="ric"] .assistant-figure .ring-segment{stroke:#ffc65c}
body[data-design="ric"] .assistant-figure .flight-trail{stroke:#9bb6ff}
body[data-design="ric"] .assistant-figure .reading-glasses{fill:rgba(196,212,255,.08);stroke:#ffc65c}
body[data-design="ric"] .assistant-figure .wheel-set{fill:#141c27;stroke:#a8bbdf}
body[data-design="ric"] .assistant-figure .confirm-badge circle{fill:#173b30;stroke:#58e0ad}
body[data-design="ric"] .assistant-figure .confirm-badge path{stroke:#b5f2d9}
body[data-design="ric"] .assistant-figure .visor-tool{stroke:#c4d4ff}
body[data-design="ric"] .assistant-figure .tool-confirm{stroke:#b5f2d9}
body[data-design="ric"] .assistant-figure .mood-layer{color:#d6e2ff}
body[data-design="ric"] .assistant-figure:focus-visible{outline-color:#9bb6ff}
body[data-design="ric"] .erp-assistant[data-state="confirm"] .status-light{fill:#b5f2d9}
body[data-design="ric"] .erp-assistant[data-state="alert"] .status-light{fill:#ff8d9b}
body[data-design="ric"] .erp-assistant[data-state="alert"] .orbit,body[data-design="ric"] .erp-assistant[data-state="alert"] .pearl-ring{stroke:#ff8d9b}
body[data-design="ric"] .erp-assistant[data-state="drive"]{filter:drop-shadow(0 12px 22px rgba(114,138,255,.38))}
body[data-design="ric"] .assistant-bubble{border-color:#6a85b1;background:rgba(20,28,39,.98);color:#f3f6fc}
body[data-design="ric"] .assistant-bubble.help{border-color:#93b2ff;background:rgba(20,28,39,.98)}
body[data-design="ric"] .assistant-bubble.success{border-color:#2c6e57;background:#173b30;color:#d6f8ea}
body[data-design="ric"] .assistant-bubble.error,body[data-design="ric"] .assistant-bubble.error.help{border-color:#b44a5c;background:#3a2029;color:#ffe0e5}
body[data-design="ric"] .assistant-bubble.mood{border-color:#a98a3c;background:#1a2432;color:#fff4d4}
body[data-design="ric"] .assistant-picker button{background:#172737;border-color:#6686a9;color:#c4d4ff}
body[data-design="ric"] .assistant-picker button:hover{background:#232f45;border-color:#93b2ff}
body[data-design="ric"] .assistant-picker button:focus-visible{outline-color:#9bb6ff}
body[data-design="ric"] .assistant-off-label{color:var(--r-grau)}
body[data-design="ric"] .prop-book .cover{background:#232f45}body[data-design="ric"] .prop-book .page{background:linear-gradient(145deg,#232f45,#141c27);border-color:#6a85b1}body[data-design="ric"] .prop-book .page::after{background:#9bb6ff;box-shadow:0 7px #526783,0 14px #526783}
body[data-design="ric"] .scan-plane{border-color:rgba(155,182,255,.55);background:linear-gradient(105deg,transparent 30%,rgba(155,182,255,.15) 50%,transparent 70%)}
body[data-design="ric"] .mini-road{background:#526783}body[data-design="ric"] .mini-shelf{border-color:#6a85b1;background:linear-gradient(transparent 31%,#6a85b1 32%,#6a85b1 34%,transparent 35%,transparent 65%,#6a85b1 66%,#6a85b1 68%,transparent 69%)}
body[data-design="ric"] .assistant-field-target{outline-color:#ff8d9b!important}
body[data-design="ric"] .assistant-scan-target{outline-color:#9bb6ff!important;box-shadow:0 0 18px rgba(155,182,255,.2)!important}
body[data-design="ric"] .assistant-clean-target{outline-color:#c4d4ff!important}
body[data-design="ric"] .assistant-help-target{outline-color:#93b2ff!important;box-shadow:0 0 0 6px rgba(155,182,255,.14),0 0 22px rgba(155,182,255,.2)!important}

@media(max-width:900px){.container{grid-template-columns:1fr}.container>.header{border-right:0;border-bottom:1px solid #1b3346}.stat-card{padding:14px}}
@media(max-width:700px){.main-content .form-section,.main-content .table-section,.main-content .alerts-section{padding:14px 13px}.main-content .form-row{gap:10px}.main-content label{font-size:14px}}

/* Molekül und Perle: technische Flug-Assistenten, komplett lokal als SVG/CSS. */
.erp-assistant{--as-accent:#76e5d2;position:fixed;right:20px;bottom:18px;z-index:80;width:154px;height:180px;pointer-events:none;transition:transform 1.1s cubic-bezier(.33,.65,.2,1);filter:drop-shadow(0 14px 20px rgba(0,0,0,.28))}
.erp-assistant *{box-sizing:border-box}.assistant-figure{position:absolute;right:0;bottom:34px;width:150px;height:140px;transform-origin:50% 65%;animation:assistantHover 6.4s linear infinite}.assistant-figure::after{content:"";position:absolute;left:45px;right:35px;bottom:4px;height:8px;border-radius:50%;background:rgba(0,0,0,.22);filter:blur(5px);transform:scaleX(.8)}.assistant-figure svg{position:relative;width:100%;height:100%;overflow:visible}
.assistant-figure .orbit,.assistant-figure .pearl-ring{fill:none;stroke:#80cfc6;stroke-width:1.25;opacity:.58}.assistant-figure .orbit-b{stroke:#8da9b6;stroke-dasharray:3 5;opacity:.5}.assistant-figure .orbit-node{fill:#9cf4e2;stroke:#163c45;stroke-width:2}.assistant-figure .orbit-node.secondary{fill:#d3aa6a}.assistant-figure .fin{fill:#26444e;stroke:#7fb3b4;stroke-width:1.2;stroke-linejoin:round}.assistant-figure .shell{stroke:#9ac0c3;stroke-width:1.3}.assistant-figure .shell-seam,.assistant-figure .lower-panel{fill:none;stroke:#7f9da5;stroke-width:1;opacity:.62}.assistant-figure .lower-panel{fill:#102a35;stroke:#6c8d96}.assistant-figure .visor{stroke:#75b9bc;stroke-width:1.1}.assistant-figure .visor-glint{fill:none;stroke:#b5e9e4;stroke-width:1.4;stroke-linecap:round;opacity:.55}.assistant-figure .status-light{fill:#82f0d8}.assistant-figure .panel-light{fill:#d5b16e}.assistant-figure .pearl-highlight{fill:none;stroke:#eefcfa;stroke-width:4;stroke-linecap:round;opacity:.35}.assistant-figure .ring-segment{fill:none;stroke:#d2ae71;stroke-width:2;stroke-linecap:round;opacity:.72}
.assistant-figure .flight-trail{fill:none;stroke:#7de3d2;stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .2s}.erp-assistant[data-state="fly"] .flight-trail,.erp-assistant[data-state="inspect"] .flight-trail,.erp-assistant[data-state="clean"] .flight-trail,.erp-assistant[data-state="drive"] .flight-trail{opacity:.65}
.assistant-figure .reading-glasses{fill:rgba(194,229,226,.08);stroke:#e0c38c;stroke-width:2;stroke-linejoin:round;opacity:0;transition:opacity .2s}.erp-assistant[data-state="read"] .reading-glasses{opacity:1}.assistant-figure .wheel-set{fill:#122832;stroke:#9ab8ba;stroke-width:2;opacity:0;transform:scaleY(.15);transform-origin:center 105px;transition:opacity .25s,transform .3s}.erp-assistant[data-state="drive"] .wheel-set{opacity:1;transform:scaleY(1)}
.assistant-figure .confirm-badge{opacity:0;transition:opacity .2s}.assistant-figure .confirm-badge circle{fill:#173f39;stroke:#87ecd2;stroke-width:1.5}.assistant-figure .confirm-badge path{fill:none;stroke:#b9f8e7;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.erp-assistant[data-state="confirm"] .confirm-badge{opacity:1}.erp-assistant[data-state="confirm"] .status-light{fill:#a5f4d9}.erp-assistant[data-state="alert"] .status-light{fill:#ff9c91}.erp-assistant[data-state="alert"] .orbit,.erp-assistant[data-state="alert"] .pearl-ring{stroke:#d9968e}
@keyframes assistantHover{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}50%{transform:translateY(-5px);animation-timing-function:cubic-bezier(.37,0,.63,1)}}@keyframes precisionHover{0%,100%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}50%{transform:translateY(-3px) rotate(.6deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}}.erp-assistant[data-state="save"] .assistant-figure,.erp-assistant[data-state="receive"] .assistant-figure,.erp-assistant[data-state="usage"] .assistant-figure,.erp-assistant[data-state="picking"] .assistant-figure,.erp-assistant[data-state="read"] .assistant-figure{animation:precisionHover 3.4s linear infinite}.erp-assistant[data-state="drive"] .wheel-set circle{animation:wheelTurn .55s linear infinite;transform-box:fill-box;transform-origin:center}@keyframes wheelTurn{to{transform:rotate(360deg)}}
.assistant-bubble{z-index:4;position:absolute;right:132px;bottom:102px;width:max-content;max-width:min(270px,calc(100vw - 170px));padding:10px 13px;border:1px solid rgba(118,229,210,.38);border-radius:10px 10px 2px 10px;background:rgba(12,32,40,.97);color:#e8f6f4;box-shadow:0 10px 28px rgba(0,0,0,.25);font:600 12px/1.45 var(--d-font);opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s;pointer-events:none}.assistant-bubble.show{opacity:1;transform:none}.assistant-bubble.error{border-color:#d98781;background:#30272c;color:#ffe5e2}.assistant-bubble.success{border-color:#69c8ae;background:#17352f;color:#dcf8ed}
.assistant-picker{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:4px;pointer-events:auto;opacity:.6;transition:opacity .18s}.erp-assistant:hover .assistant-picker,.assistant-picker:focus-within{opacity:1}.assistant-picker button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid #41656a;border-radius:50%;background:#122c33;color:#a9eee2;cursor:pointer;transition:background .15s,border-color .15s}.assistant-picker button:hover{background:#21464c;border-color:#76bbae}.assistant-picker button:focus-visible{outline:3px solid #64ead5;outline-offset:2px}.assistant-picker svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.assistant-name{min-width:72px;text-align:center;color:#b4cdca;font:600 9px/1.2 var(--d-font);letter-spacing:.03em;text-shadow:0 1px 4px #071418}.assistant-power{margin-left:3px}.assistant-off-label{display:none;min-width:116px;color:#b4cdca;font:600 11px var(--d-font);text-align:right}.erp-assistant[data-enabled="false"]{width:170px;height:48px;filter:none}.erp-assistant[data-enabled="false"] .assistant-figure,.erp-assistant[data-enabled="false"] .assistant-scene,.erp-assistant[data-enabled="false"] .assistant-bubble,.erp-assistant[data-enabled="false"] .assistant-name,.erp-assistant[data-enabled="false"] [data-assistant-prev],.erp-assistant[data-enabled="false"] [data-assistant-next]{display:none}.erp-assistant[data-enabled="false"] .assistant-off-label{display:block}.erp-assistant[data-enabled="false"] .assistant-picker{opacity:.8}.erp-assistant[data-enabled="false"] .assistant-power{color:#d2b477;border-color:#6d6653}
.assistant-scene{position:absolute;right:68px;bottom:47px;width:214px;height:110px;pointer-events:none}.assistant-scene:empty{display:none}.prop-book{position:absolute;left:38px;top:35px;width:90px;height:56px;perspective:400px;transform:rotateX(8deg)}.prop-book .cover{position:absolute;inset:0;border-radius:4px;background:#173d43;box-shadow:0 6px 14px #0004}.prop-book .page{position:absolute;top:4px;width:43px;height:47px;background:linear-gradient(145deg,#1c4148,#102a34);border:1px solid #659a99;padding:8px 5px;transform-origin:left center;animation:bookOpen .65s .08s ease-out both}.prop-book .page.left{left:4px;transform-origin:right center;border-radius:3px 0 0 3px;animation-name:bookOpenLeft}.prop-book .page.right{right:4px;border-radius:0 3px 3px 0}.prop-book .page::after{content:"";display:block;height:2px;margin:4px 0;background:#72b7ad;box-shadow:0 7px #406f70,0 14px #406f70}@keyframes bookOpen{from{transform:rotateY(88deg)}to{transform:rotateY(0)}}@keyframes bookOpenLeft{from{transform:rotateY(-88deg)}to{transform:rotateY(0)}}
.mini-road{position:absolute;left:0;right:0;bottom:5px;height:1px;background:#52787b}.mini-car{position:absolute;left:0;bottom:9px;width:66px;height:25px;border:1.5px solid #d2ab73;border-radius:8px 15px 4px 4px;background:#28434b;animation:carArrive 1.2s ease-out both}.mini-car::before{content:"";position:absolute;left:13px;top:-12px;width:35px;height:13px;border:1.5px solid #d2ab73;border-bottom:0;border-radius:9px 12px 0 0;background:#17303b}.mini-car i{position:absolute;bottom:-7px;width:12px;height:12px;border:3px solid #132831;border-radius:50%;background:#8da9ac}.mini-car i:first-child{left:8px}.mini-car i:last-child{right:8px}@keyframes carArrive{from{transform:translateX(-160px)}to{transform:translateX(0)}}.mini-box{position:absolute;left:50px;bottom:34px;width:24px;height:24px;border:1px solid #bc9866;background:#5e5545;animation:boxShelf 1.25s .8s ease-in-out both}.mini-box::before{content:"";position:absolute;left:9px;top:0;bottom:0;border-left:1px solid #d1b47f}.mini-shelf{position:absolute;right:0;bottom:4px;width:57px;height:75px;border-left:3px solid #669d99;border-right:3px solid #669d99;background:linear-gradient(transparent 31%,#669d99 32%,#669d99 34%,transparent 35%,transparent 65%,#669d99 66%,#669d99 68%,transparent 69%)}@keyframes boxShelf{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(98px,-34px);opacity:1}}.mini-shelf.pick{right:auto;left:0}.erp-assistant[data-state="picking"] .mini-box{left:23px;bottom:52px;animation:boxPick 1.15s ease-in-out both}.erp-assistant[data-state="usage"] .mini-box{left:75px;bottom:18px;animation:boxOut 1.15s ease-in-out both}@keyframes boxPick{to{transform:translate(118px,32px)}}@keyframes boxOut{to{transform:translate(120px,-4px);opacity:0}}
.scan-plane{position:absolute;left:70px;top:22px;width:70px;height:75px;border:1px solid rgba(118,229,210,.55);background:linear-gradient(105deg,transparent 30%,rgba(118,229,210,.15) 50%,transparent 70%);animation:scanPass 1.5s ease-in-out infinite}@keyframes scanPass{0%,100%{transform:translateX(-12px);opacity:.35}50%{transform:translateX(12px);opacity:.9}}.clean-beam{position:absolute;left:74px;top:35px;width:75px;height:55px;border-bottom:2px solid #a4d9d1;transform:rotate(-8deg)}.clean-beam::before{content:"";position:absolute;left:4px;right:4px;bottom:-5px;height:8px;background:repeating-linear-gradient(90deg,#8dbbb7 0 2px,transparent 2px 5px);animation:brushMove .6s ease-in-out infinite alternate}.clean-beam i{position:absolute;width:4px;height:4px;border-radius:50%;background:#d3eee9;animation:sparkle 1.2s ease-out infinite}.clean-beam i:nth-child(1){left:15px;top:20px}.clean-beam i:nth-child(2){left:43px;top:8px;animation-delay:.25s}.clean-beam i:nth-child(3){left:60px;top:27px;animation-delay:.5s}@keyframes brushMove{to{transform:translateX(10px)}}@keyframes sparkle{0%{transform:translateY(12px);opacity:0}45%{opacity:1}100%{transform:translateY(-8px);opacity:0}}.drive-line{position:absolute;left:-70px;right:-35px;bottom:5px;height:2px;background:repeating-linear-gradient(90deg,#6e9b9c 0 16px,transparent 16px 28px);animation:roadMove .55s linear infinite}@keyframes roadMove{to{background-position:28px 0}}
.assistant-field-target{outline:3px solid #ee9a91!important;outline-offset:4px!important;box-shadow:0 0 0 7px rgba(238,154,145,.12)!important}.assistant-scan-target{outline:1px solid #75d8c8!important;outline-offset:3px!important;box-shadow:0 0 18px rgba(117,216,200,.16)!important}.assistant-clean-target{outline:1px solid #b8d9d4!important;outline-offset:3px!important;animation:fieldClean 1.1s ease-in-out 2!important}@keyframes fieldClean{50%{box-shadow:0 0 24px rgba(184,217,212,.35)}}
@media(max-width:700px){.erp-assistant{right:7px;bottom:8px;transform:scale(.82);transform-origin:bottom right}.erp-assistant[data-state="fly"],.erp-assistant[data-state="inspect"],.erp-assistant[data-state="clean"],.erp-assistant[data-state="drive"]{transform-origin:center}.assistant-bubble{right:108px;max-width:190px}.assistant-picker{opacity:.85;transform:scale(1.22);transform-origin:bottom right}.assistant-scene{right:48px}.erp-assistant[data-enabled="false"] .assistant-picker{transform:scale(1.22)}}
.assistant-figure{pointer-events:auto;cursor:pointer}.assistant-figure:hover{filter:brightness(1.1)}.assistant-figure:focus-visible{outline:2px solid #8df2df;outline-offset:3px;border-radius:48%}
.assistant-figure .visor-tool{fill:none;stroke:#9df2df;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .18s}.erp-assistant:not([data-state="idle"]) .status-light{opacity:0}.erp-assistant[data-state="inspect"] .tool-scan,.erp-assistant[data-state="explain"] .tool-scan,.erp-assistant[data-state="drive"] .tool-drive,.erp-assistant[data-state="return"] .tool-drive,.erp-assistant[data-state="save"] .tool-save,.erp-assistant[data-state="clean"] .tool-clean,.erp-assistant[data-state="fly"] .tool-alert,.erp-assistant[data-state="alert"] .tool-alert,.erp-assistant[data-state="confirm"] .tool-confirm,.erp-assistant[data-state="receive"] .tool-receive,.erp-assistant[data-state="usage"] .tool-usage,.erp-assistant[data-state="picking"] .tool-usage{opacity:1}.assistant-figure .tool-alert{stroke:#ffab9f}.assistant-figure .tool-alert circle{fill:#ffab9f}.assistant-figure .tool-confirm{stroke:#b9f8e7;stroke-width:2.6}
.erp-assistant[data-state="drive"] .wheel-set,.erp-assistant[data-state="receive"] .wheel-set,.erp-assistant[data-state="usage"] .wheel-set,.erp-assistant[data-state="picking"] .wheel-set,.erp-assistant[data-action="book_receipt"] .wheel-set,.erp-assistant[data-action="book_usage"] .wheel-set{opacity:1;transform:scaleY(1)}.erp-assistant[data-state="drive"] .wheel-set circle,.erp-assistant[data-state="receive"] .wheel-set circle,.erp-assistant[data-state="usage"] .wheel-set circle,.erp-assistant[data-state="picking"] .wheel-set circle,.erp-assistant[data-action="book_receipt"] .wheel-set circle,.erp-assistant[data-action="book_usage"] .wheel-set circle{animation:wheelTurn .55s linear infinite;transform-box:fill-box;transform-origin:center}
.erp-assistant[data-state="return"] .flight-trail,.erp-assistant[data-state="receive"] .flight-trail,.erp-assistant[data-state="usage"] .flight-trail,.erp-assistant[data-state="picking"] .flight-trail{opacity:.72}.erp-assistant[data-state="drive"] .flight-trail,.erp-assistant[data-state="receive"] .flight-trail,.erp-assistant[data-state="usage"] .flight-trail,.erp-assistant[data-state="picking"] .flight-trail{stroke-width:3;stroke-dasharray:17 6;opacity:.9}.erp-assistant[data-state="drive"]{filter:drop-shadow(0 12px 22px rgba(70,225,202,.38))}.erp-assistant[data-state="drive"] .assistant-figure{animation:driveBob 1.15s ease-in-out infinite alternate}@keyframes driveBob{from{transform:translateY(0) rotate(-.6deg)}to{transform:translateY(-2.5px) rotate(.6deg)}}
.erp-assistant[data-bubble-side="right"] .assistant-bubble{right:auto;left:132px;border-radius:10px 10px 10px 2px}.assistant-bubble.help{width:360px;max-height:calc(100vh - 40px);overflow:auto;font-weight:500;line-height:1.55;border-color:#72c8bb;background:rgba(12,35,43,.98);pointer-events:auto}.assistant-bubble.error.help{border-color:#d98781;background:#30272c}
.assistant-help-target{outline:2px solid #62cbbd!important;outline-offset:4px!important;box-shadow:0 0 0 6px rgba(98,203,189,.14),0 0 22px rgba(98,203,189,.2)!important}
@media(max-width:700px){.erp-assistant[data-state="explain"],.erp-assistant[data-state="receive"],.erp-assistant[data-state="usage"],.erp-assistant[data-state="picking"],.erp-assistant[data-state="return"]{transform-origin:center}.erp-assistant[data-bubble-side="right"] .assistant-bubble{right:auto;left:108px}.assistant-bubble.help{width:240px}}
@media(prefers-reduced-motion:reduce){.erp-assistant,.erp-assistant *,.assistant-field-target,.assistant-clean-target{animation:none!important;transition:none!important}}
@media print{.erp-assistant{display:none!important}}

/* Power-Schalter direkt oben rechts an der Figur; Pfeile sind nicht mehr nötig. */
.assistant-picker{top:7px;right:2px;bottom:auto;z-index:6;gap:0;opacity:.85}
.assistant-picker [data-assistant-prev],.assistant-picker [data-assistant-next],.assistant-picker .assistant-name{display:none}
.assistant-picker button{position:relative;flex-basis:24px;width:24px;height:24px}
.assistant-picker button::before{content:"";position:absolute;inset:-10px;border-radius:50%}
.assistant-picker svg{width:12px;height:12px}
.assistant-power{margin-left:0}
.assistant-off-label{min-width:76px;font-size:10px}
.erp-assistant[data-enabled="false"]{width:112px;height:34px}
.erp-assistant[data-enabled="false"] .assistant-picker{top:0;right:0}

/* Kompakte Figur: bei belegtem Bereich rechts unten, nur bei freiem Platz rechts oben. */
.erp-assistant{width:134px;height:140px}
.erp-assistant .assistant-figure{right:0;bottom:6px;width:128px;height:119px}
.assistant-figure::after{left:36px;right:30px;bottom:2px;height:7px}
.assistant-scene{right:58px;bottom:30px}
.assistant-bubble{right:118px;bottom:84px;max-width:min(360px,calc(100vw - 150px));padding:12px 15px;font-size:14px;line-height:1.5}
.erp-assistant[data-bubble-side="right"] .assistant-bubble{left:118px}
.erp-assistant[data-state="explain"] .assistant-bubble,.erp-assistant[data-state="fly"] .assistant-bubble{font-size:15px}
.erp-assistant[data-help-position="top"][data-state="explain"] .assistant-bubble,.erp-assistant[data-help-position="top"][data-state="fly"] .assistant-bubble{top:24px;bottom:auto;right:126px;left:auto;border-radius:10px 10px 2px 10px}
.assistant-bubble.mood{border-color:#b99a65;background:#1b3037;color:#f4ead6}
.assistant-figure .mood-layer{color:#c9fff1;opacity:0;transition:opacity .18s}
.assistant-figure .mood-expression{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.assistant-figure .mood-expression .mood-fill{fill:currentColor;stroke:none}
.erp-assistant[data-state="mood"] .mood-layer{opacity:1}
@media(max-width:700px){.erp-assistant{right:8px;bottom:8px;transform:none}.erp-assistant .assistant-picker{transform:none;opacity:.9}.erp-assistant[data-enabled="false"] .assistant-picker{transform:none}.assistant-bubble{right:112px;max-width:220px;font-size:14px}.erp-assistant[data-bubble-side="right"] .assistant-bubble{left:112px}.erp-assistant[data-state="explain"] .assistant-bubble,.erp-assistant[data-state="fly"] .assistant-bubble{font-size:14px}.erp-assistant[data-help-position="top"][data-state="explain"] .assistant-bubble,.erp-assistant[data-help-position="top"][data-state="fly"] .assistant-bubble{right:122px}}

/* Elegante Figuren: Linien und Körpersprache. Sprechblasen, Feldhilfe und Abläufe bleiben in assistant.css/.js. */
.kf .kf-aura{fill:#1c84f0;opacity:.24;filter:url(#kfHalo);transition:fill .3s,opacity .3s}
.kf .kf-ader{fill:none;stroke:#ffd35a;stroke-width:.7;stroke-linecap:round;opacity:.78}
.kf .kf-funke{fill:#fff4c9;filter:url(#kfGlow);animation:kfFunkeln 3.4s ease-in-out infinite}
.kf .kf-funke:nth-of-type(2n){animation-delay:1.1s}.kf .kf-funke:nth-of-type(3n){animation-delay:2.2s}
.kf .kf-kanten{fill:none;stroke:url(#kfGold);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
.kf .kf-kette{fill:none;stroke:#ffd35a;stroke-width:.8;stroke-dasharray:2.4 1.2}
.kf .kf-striche{fill:none;stroke:#ffd35a;stroke-width:.8}
.kf .kf-ring ellipse{fill:none;stroke:url(#kfGold);stroke-width:1.3;stroke-opacity:.85}
.kf .kf-elektron{fill:#fff4c9;stroke:#ffd35a;stroke-width:.9;filter:url(#kfGlow)}
.kf .kf-elektron-b{fill:#d8f6ff;stroke:#7fd9ff}
.kf .kf-elektron-c{fill:#ffe6a6;stroke:#f0bd4d}
/* .assistant-figure davor: gewinnt gegen die Farben von Molekül und Perle in assistant.css und ric.css */
.erp-assistant .assistant-figure .kf .flight-trail{stroke:#ffd35a}
.erp-assistant .assistant-figure .kf .status-light{fill:#ffd35a}
.erp-assistant .assistant-figure .kf .visor-tool{stroke:#ffe6a6;stroke-width:1.6}.erp-assistant .assistant-figure .kf .tool-alert{stroke:#ff8d9b}.erp-assistant .assistant-figure .kf .tool-alert circle{fill:#ff8d9b}
.erp-assistant .assistant-figure .kf .mood-layer{color:#ffe0a0}
.erp-assistant .assistant-figure .kf .mood-expression{stroke-width:1.25}
.erp-assistant .assistant-figure .kf .confirm-badge circle{fill:#14233f;stroke:url(#kfGold);stroke-width:1.6}.erp-assistant .assistant-figure .kf .confirm-badge path{stroke:#ffd35a;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.kf .kf-blasen circle{fill:#d8f6ff;opacity:.8}
.kf .kf-strom{fill:none;stroke:#7fd9ff;stroke-width:1.6;stroke-dasharray:3 4;opacity:0;transition:opacity .25s}
.kf .kf-ruhe{transition:opacity .18s}
.erp-assistant:not([data-state="idle"]) .kf .kf-ruhe{opacity:0}
/* Eule: eigenes Gesicht bleibt in allen Zuständen sichtbar; nur die Stimmung tauscht die Mimik */
.kf-eule .kf-eule-augen{transition:opacity .18s}
.erp-assistant[data-state="mood"] .kf-eule .kf-eule-augen{opacity:0}

/* Atom und Eule schweben sanft sinusförmig: viele Zwischenschritte, keine harte Mitte (gewinnt gegen assistant.css) */
.erp-assistant .assistant-figure{animation:kfSchweben 6.4s linear infinite}
@keyframes kfSchweben{0%,100%{transform:translateY(0)}6.25%{transform:translateY(-.5px)}12.5%{transform:translateY(-1.8px)}18.75%{transform:translateY(-3.5px)}25%{transform:translateY(-5px)}31.25%{transform:translateY(-6px)}37.5%{transform:translateY(-6.5px)}43.75%{transform:translateY(-6.3px)}50%{transform:translateY(-5.5px)}56.25%{transform:translateY(-4.2px)}62.5%{transform:translateY(-2.6px)}68.75%{transform:translateY(-1.2px)}75%{transform:translateY(-.3px)}81.25%{transform:translateY(.2px)}87.5%{transform:translateY(.3px)}93.75%{transform:translateY(.2px)}}

/* Ruhe: leises Eigenleben */
.kf-sphaere .kf-ring-a{transform-box:view-box;transform-origin:80px 72px;animation:kfDrehen 42s linear infinite}
.kf-sphaere .kf-ring-b{transform-box:view-box;transform-origin:80px 72px;animation:kfDrehen 56s linear infinite reverse}
.kf-sphaere .kf-ring-c{transform-box:view-box;transform-origin:80px 72px;animation:kfDrehen 70s linear infinite}
.kf-siegel .kf-ring-a{transform-box:view-box;transform-origin:80px 74px;animation:kfDrehen 60s linear infinite}
.kf-kompass .kf-rose{transform-box:view-box;transform-origin:80px 76px;transition:transform .7s cubic-bezier(.3,1.5,.5,1)}
.kf-kolben .kf-blasen circle{animation:kfBlase 3.6s ease-in infinite}.kf-kolben .kf-blasen circle:nth-child(2){animation-delay:1.2s}.kf-kolben .kf-blasen circle:nth-child(3){animation-delay:2s}.kf-kolben .kf-blasen circle:nth-child(4){animation-delay:2.8s}
.kf-laterne .kf-flamme{transform-box:fill-box;transform-origin:50% 100%;animation:kfFlamme 2.6s ease-in-out infinite alternate}
.kf-waage .kf-balken{transform-box:view-box;transform-origin:80px 36px;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.kf-waage .kf-schale{transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.kf-phoenix .kf-fluegel{transform-box:view-box;transition:transform .5s ease}.kf-phoenix .kf-fluegel-l{transform-origin:66px 60px}.kf-phoenix .kf-fluegel-r{transform-origin:94px 60px}

/* Körpersprache: Aura und Bewegung je Zustand */
.erp-assistant[data-state="alert"] .kf .kf-aura{fill:#ff4358;opacity:.5;animation:kfPuls 1s ease-in-out infinite}
.erp-assistant[data-state="confirm"] .kf .kf-aura{fill:#ffc65c;opacity:.55}
.erp-assistant[data-state="mood"] .kf .kf-aura{fill:#8f7bff;opacity:.36}
.erp-assistant[data-state="explain"] .kf .kf-aura,.erp-assistant[data-state="read"] .kf .kf-aura,.erp-assistant[data-state="inspect"] .kf .kf-aura{fill:#65e7ff;opacity:.36}
.erp-assistant[data-state="save"] .kf .kf-aura,.erp-assistant[data-state="receive"] .kf .kf-aura,.erp-assistant[data-state="usage"] .kf .kf-aura,.erp-assistant[data-state="picking"] .kf .kf-aura{opacity:.42;animation:kfPuls 1.6s ease-in-out infinite}
.erp-assistant[data-state="usage"] .kf .kf-aura,.erp-assistant[data-state="picking"] .kf .kf-aura{fill:#ff8a3d}
.erp-assistant[data-state="receive"] .kf .kf-aura{fill:#58e0ad}

/* Waage: kippt bei Fehlern, wiegt beim Buchen, steht bei Erfolg ruhig */
.erp-assistant[data-state="alert"] .kf-waage .kf-balken{transform:rotate(-8deg)}.erp-assistant[data-state="alert"] .kf-waage .kf-schale-l{transform:translateY(8px)}.erp-assistant[data-state="alert"] .kf-waage .kf-schale-r{transform:translateY(-8px)}
.erp-assistant[data-state="usage"] .kf-waage .kf-balken,.erp-assistant[data-state="picking"] .kf-waage .kf-balken{transform:rotate(5deg)}.erp-assistant[data-state="usage"] .kf-waage .kf-schale-l,.erp-assistant[data-state="picking"] .kf-waage .kf-schale-l{transform:translateY(-5px)}.erp-assistant[data-state="usage"] .kf-waage .kf-schale-r,.erp-assistant[data-state="picking"] .kf-waage .kf-schale-r{transform:translateY(5px)}
.erp-assistant[data-state="receive"] .kf-waage .kf-balken,.erp-assistant[data-state="save"] .kf-waage .kf-balken{transform:rotate(-5deg)}.erp-assistant[data-state="receive"] .kf-waage .kf-schale-l,.erp-assistant[data-state="save"] .kf-waage .kf-schale-l{transform:translateY(5px)}.erp-assistant[data-state="receive"] .kf-waage .kf-schale-r,.erp-assistant[data-state="save"] .kf-waage .kf-schale-r{transform:translateY(-5px)}
/* Kolben: Blasen schneller bei Arbeit */
.erp-assistant:not([data-state="idle"]):not([data-state="mood"]) .kf-kolben .kf-blasen circle{animation-duration:1.5s}
/* Sanduhr: Sand fließt bei Arbeit */
.erp-assistant[data-state="save"] .kf .kf-strom,.erp-assistant[data-state="receive"] .kf .kf-strom,.erp-assistant[data-state="usage"] .kf .kf-strom,.erp-assistant[data-state="picking"] .kf .kf-strom{opacity:.95;animation:kfStrom .5s linear infinite}
/* Kompass: Rose sucht bei Bewegung, schlägt bei Fehlern aus */
.erp-assistant[data-state="fly"] .kf-kompass .kf-rose,.erp-assistant[data-state="drive"] .kf-kompass .kf-rose,.erp-assistant[data-state="return"] .kf-kompass .kf-rose{animation:kfDrehen 1.4s linear infinite}
.erp-assistant[data-state="alert"] .kf-kompass .kf-rose{transform:rotate(38deg)}.erp-assistant[data-state="confirm"] .kf-kompass .kf-rose{transform:rotate(360deg)}
/* Laterne: Flamme flackert bei Fehlern, leuchtet bei Erfolg */
.erp-assistant[data-state="alert"] .kf-laterne .kf-flamme{animation-duration:.26s}.erp-assistant[data-state="confirm"] .kf-laterne .kf-flamme{transform:scale(1.08)}
/* Phönix: Schwingen heben sich bei Erfolg und Bewegung, sinken bei Fehlern */
.erp-assistant[data-state="confirm"] .kf-phoenix .kf-fluegel-l,.erp-assistant[data-state="fly"] .kf-phoenix .kf-fluegel-l,.erp-assistant[data-state="drive"] .kf-phoenix .kf-fluegel-l{transform:rotate(10deg)}.erp-assistant[data-state="confirm"] .kf-phoenix .kf-fluegel-r,.erp-assistant[data-state="fly"] .kf-phoenix .kf-fluegel-r,.erp-assistant[data-state="drive"] .kf-phoenix .kf-fluegel-r{transform:rotate(-10deg)}
.erp-assistant[data-state="alert"] .kf-phoenix .kf-fluegel-l{transform:rotate(-12deg)}.erp-assistant[data-state="alert"] .kf-phoenix .kf-fluegel-r{transform:rotate(12deg)}
/* Kristall und Siegel: Erfolg dreht schneller; beim Atom funkeln stattdessen nur die Elektronen (kein Sprung der Bahngeschwindigkeit) */
.erp-assistant[data-state="confirm"] .kf-sphaere .kf-elektron{animation:kfFunkeln 1.2s ease-in-out infinite}
.erp-assistant[data-state="confirm"] .kf-siegel .kf-ring-a{animation-duration:4s}

@keyframes kfFunkeln{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes kfDrehen{to{transform:rotate(360deg)}}
@keyframes kfPuls{0%,100%{opacity:.26}50%{opacity:.6}}
@keyframes kfBlase{0%{transform:translateY(16px);opacity:0}30%{opacity:.85}100%{transform:translateY(-12px);opacity:0}}
@keyframes kfFlamme{from{transform:scale(1,.97)}to{transform:scale(.96,1.04)}}
@keyframes kfStrom{to{stroke-dashoffset:-7}}

/* 02 RIC — gleiche Farben wie Ric, Bewegung und Reaktion überarbeitet (Regeln aus dem Skill apple-design).
   Wird nach ric.css, assistant.css und figuren.css geladen und überschreibt nur Bewegung und Tiefe.
   Farben, Knopf-Bedeutungen, Sprechblasen-Texte und Fachlogik bleiben unverändert. */
:root{--r02-sanft:cubic-bezier(.23,1,.32,1);--r02-blatt:cubic-bezier(.32,.72,0,1);--r02-sinus:cubic-bezier(.37,0,.63,1)}

/* ---------- Figur: Schweben ----------
   Vorher: 16 Keyframes mit linear. Jeder Keyframe ändert die Geschwindigkeit schlagartig (alle 0,4 s), und jeder
   Zustandswechsel tauschte die Animation aus, sodass die Figur sprang.
   Jetzt: zwei Endpunkte mit Sinus-Kurve. Die Geschwindigkeit ändert sich stetig, an den Umkehrpunkten ist sie null.
   Dieselbe Animation läuft in allen Zuständen weiter; ric_02.js ändert nur das Tempo, nie die Position. */
body[data-design="ric"] .erp-assistant[data-state] .assistant-figure{animation:ric02Schweben 3.2s var(--r02-sinus) infinite alternate;will-change:transform}
@keyframes ric02Schweben{from{transform:translate3d(0,1px,0)}to{transform:translate3d(0,-6px,0)}}

/* Kein Schatten-Filter um die Figur: auf dem dunklen Grund unsichtbar, aber in jedem Bild neu zu berechnen */
body[data-design="ric"] .erp-assistant,body[data-design="ric"] .erp-assistant[data-state]{filter:none}
.assistant-figure::after{display:none}

/* Innere Bewegung auf eigenen Ebenen, damit die schwebende Fläche nicht in jedem Bild neu gezeichnet wird */
.kf .kf-ring{will-change:transform}
.kf .kf-funke{will-change:opacity}

/* Rückmeldung sofort beim Drücken, Federn beim Loslassen; Figurwechsel weich statt harter Schnitt */
.assistant-figure:hover{filter:none}
.assistant-figure svg{transition:transform .36s var(--r02-blatt);animation:ric02FigurNeu .26s var(--r02-blatt)}
.assistant-figure:active svg{transform:scale(.95);transition:transform 80ms ease-out}
@keyframes ric02FigurNeu{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* Sprechblase: Aussehen unverändert, erscheint aus Richtung der Figur */
.assistant-bubble{transform:translateY(4px) scale(.97);transform-origin:100% 100%;transition:opacity .14s ease,transform .14s ease}
.erp-assistant[data-bubble-side="right"] .assistant-bubble{transform-origin:0 100%}
.assistant-bubble.show{transform:none;transition:opacity .2s ease,transform .26s var(--r02-blatt)}

/* ---------- Tiefe ----------
   46 Elemente hatten backdrop-filter, obwohl sie zu 94–97 % deckend sind: Der Blur ist unsichtbar, muss aber bei jedem
   Bild der Hintergrund-Animation neu gerechnet werden. Dimmen genügt, um den Dialog nach vorn zu holen. */
.container>.header,.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout,.toast,.fx-success-card{backdrop-filter:none}
.fx-success-card{background:rgba(11,20,32,.97)}

/* ---------- Knöpfe ----------
   Vorher hob sich der Knopf beim Überfahren um 2 px: Er wanderte unter dem Zeiger weg, am unteren Rand flackerte er.
   Jetzt bleibt er stehen, der Hover zeigt nur einen Lichtrand (Knopffarben bleiben, Kontrast unverändert).
   Das Drücken reagiert sofort (50 ms), das Loslassen federt in 160 ms zurück. */
.btn{transform:none;transition:transform .16s var(--r02-sanft),filter .12s ease,box-shadow .12s ease}
.btn:hover:not(:disabled){transform:none;box-shadow:none}
@media(hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
}
.btn:active:not(:disabled),.btn:hover:active:not(:disabled){transform:scale(.97);transition-duration:50ms,.12s,.12s}

.nav-btn{transition:transform .16s var(--r02-sanft),background-color .12s ease,color .12s ease,border-color .12s ease}
.nav-btn:hover{transform:none}
.nav-btn:active{transform:scale(.98);transition-duration:50ms,.12s,.12s,.12s}
.nav-btn.active .ui-icon{animation:none}

.sub-tabs button,.kav-chip,.design-switch,.btn-add-comp,.btn-remove-row{transition:transform .16s var(--r02-sanft),background-color .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease}
.design-switch:hover{transform:none;border-color:#93b2ff;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.sub-tabs button:active,.kav-chip:active,.design-switch:active,.btn-add-comp:active,.btn-remove-row:active{transform:scale(.97);transition-duration:50ms,.12s,.12s,.12s,.12s}

/* Karten bleiben beim Überfahren stehen; klickbare Karten geben beim Drücken nach */
.stat-card{transform-style:flat;transition:transform .16s var(--r02-sanft),border-color .12s ease}
.stat-card.click:hover{transform:none;box-shadow:none}
.stat-card.click:active{transform:scale(.985);transition-duration:50ms,.12s}
.lot-item,.recipe-card,.kav-card{transition:transform .16s var(--r02-sanft),border-color .12s ease,background-color .12s ease}
.lot-item:hover,.recipe-card:hover,.kav-card:hover{transform:none;box-shadow:none}
.lot-item:active,.recipe-card:active,.kav-card:active{transform:scale(.985);transition-duration:50ms,.12s,.12s}
.lot-item.selected{animation:none}

/* Eingaben und Kleinteile: genaue Eigenschaften statt „all“ */
input,select,textarea{transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}
.slider{transition:background-color .15s ease}.slider::before{transition:transform .2s var(--r02-sanft)}
.data-table tbody tr{transition:background-color .1s ease}
.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout{transition:border-color .12s ease}

/* Menüwechsel passiert oft am Tag: kurz einblenden, nichts rutscht */
section.view.active{animation:ric02Sicht .14s ease-out}
@keyframes ric02Sicht{from{opacity:0}to{opacity:1}}

/* ---------- Dialoge ----------
   Vorher: nur eine Einblendung, beim Schließen ein harter Schnitt, Hintergrund erschien schlagartig.
   Jetzt: gleicher Weg hinein und hinaus, Hintergrund blendet mit, Ursprung am auslösenden Knopf (ric_02.js).
   Schließen läuft schneller als Öffnen. Ein Wechsel mitten im Ablauf läuft vom aktuellen Wert weiter. */
dialog{animation:none;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .15s ease,transform .15s ease,overlay .15s allow-discrete,display .15s allow-discrete}
dialog[open]{opacity:1;transform:none;transition:opacity .2s ease,transform .26s var(--r02-blatt),overlay .26s allow-discrete,display .26s allow-discrete}
@starting-style{dialog[open]{opacity:0;transform:translateY(8px) scale(.97)}}
dialog::backdrop{backdrop-filter:none;background:rgba(2,8,14,0);transition:background-color .15s ease,overlay .15s allow-discrete,display .15s allow-discrete}
dialog[open]::backdrop{background:rgba(2,8,14,.64);transition:background-color .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}
@starting-style{dialog[open]::backdrop{background:rgba(2,8,14,0)}}

/* ---------- Meldungen ----------
   Kommen von rechts und gehen nach rechts; vorher verschwanden sie von einem Bild zum nächsten */
.toast{animation:ric02ToastEin .22s var(--r02-sanft);transition:opacity .16s ease,transform .16s ease}
.toast.weg{opacity:0;transform:translateX(24px) scale(.97)}
@keyframes ric02ToastEin{from{opacity:0;transform:translateX(24px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Einstellungen des Betriebssystems ---------- */
@media(prefers-reduced-transparency:reduce){
  .fx-canvas{display:none}
  .container>.header{background:#020a11}
  .form-section,.table-section,.alerts-section,.overview-header,.recipe-layout{background:#141c27}
  dialog[open]::backdrop{background:rgba(2,8,14,.88)}
}
@media(prefers-contrast:more){
  .form-section,.table-section,.alerts-section,.overview-header,.recipe-layout,.stat-card,dialog{border:1px solid #93b2ff}
  .btn{border-color:#ffffff}
  dialog[open]::backdrop{background:rgba(2,8,14,.88)}
}

/* RIC-VARIANTEN 07, 10 und 17: gemeinsame Ebene, geladen nach ric_02.css und vor ric_07.css, ric_10.css und ric_17.css.
   Hier stehen keine Farben und keine Maße einer Variante, nur die Zuordnung: Jede fest eingetragene Farbe aus ric.css
   zeigt jetzt auf einen Kennwert (--v-… für Flächen, Schrift, Maße, --k-… für Knöpfe). So gilt jede Entscheidung in jedem
   Menüpunkt, in jedem Dialog und in jeder Tabelle. Die Varianten setzen die Kennwerte und bauen Menü und Karten um.
   Bewegung: nur transform und opacity, Reaktionen unter 300 ms, keine Hover-Bewegung, sofortige Rückmeldung beim Drücken. */

/* ---------- Grundwerte: gelten, solange eine Variante nichts anderes sagt ---------- */
:root{
  --v-font:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --v-titel-font:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --v-zahl-font:var(--v-font);
  --v-schrift:14px;--v-zeilenhoehe:1.5;
  --v-h1:30px;--v-h1-gewicht:600;--v-h1-lauf:-.02em;--v-h1-zeile:1.15;
  --v-h2:18px;--v-h2-gewicht:600;--v-h2-lauf:-.01em;
  --v-h3:15px;--v-h3-gewicht:600;--v-h3-lauf:0em;--v-h3-wandel:none;
  --v-unter:14px;--v-unter-stil:normal;--v-unter-font:var(--v-font);
  --v-haupt-pad:24px 32px 40px;--v-karte-pad:20px 24px;--v-innen-pad:14px 16px;--v-abstand:16px;--v-reihe:14px;--v-gruppe:12px;
  --v-knopf-h:36px;--v-knopf-pad:7px 14px;--v-knopf-schrift:13px;--v-knopf-gewicht:600;--v-knopf-lauf:0em;
  --v-klein-h:30px;--v-klein-pad:5px 10px;--v-klein-schrift:12px;
  --v-feld-h:38px;--v-feld-pad:7px 10px;--v-feld-schrift:14px;--v-label:13px;--v-label-gewicht:600;
  --v-th-schrift:11px;--v-th-gewicht:600;--v-th-lauf:.04em;--v-th-wandel:uppercase;--v-tabelle:13px;--v-zelle-y:8px;--v-zelle-x:10px;
  --v-zahl-gross:28px;--v-zahl-gewicht:700;--v-zahl-lauf:-.02em;--v-kpi-pad:16px;--v-kpi-label:11px;--v-kpi-lauf:.06em;--v-kpi-wandel:uppercase;--v-kpi-luecke:12px;
  --v-tab-schrift:13px;--v-tab-pad:8px 14px;
  --v-r-karte:12px;--v-r-innen:10px;--v-r-knopf:8px;--v-r-feld:8px;--v-r-dialog:14px;--v-r-marke:6px;
  --v-karte-rand:1px solid var(--v-linie);--v-schatten-karte:none;--v-schatten-dialog:0 24px 64px rgba(0,0,0,.5);--v-abdunkeln:rgba(0,0,0,.66);
  --v-fokus:var(--v-akzent);--v-fokus-ring:0 0 0 1px var(--v-fokus);

  /* Zuordnung auf die Namen aus 6.77 und ric.css */
  --fx-accent:var(--v-akzent);--fx-secondary:var(--v-akzent);--design-radius:var(--v-r-karte);--design-shadow:var(--v-schatten-karte);
  --d-font:var(--v-font);--d-head-font:var(--v-titel-font);--d-num-font:var(--v-zahl-font);
  --d-body:var(--v-seite);--d-text:var(--v-text);--d-muted:var(--v-text-2);--d-label:var(--v-label-farbe);--d-title:var(--v-titel);
  --d-header:var(--v-menue);--d-header-text:var(--v-menue-text);--d-header-title:var(--v-titel);--d-header-sub:var(--v-text-2);
  --d-nav-border:var(--v-menue-linie);--d-nav-bg:transparent;--d-nav-text:var(--v-menue-text);--d-nav-hover:var(--v-menue-hover);--d-nav-active-bg:var(--v-menue-aktiv);--d-nav-active-text:var(--v-menue-aktiv-text);
  --d-btn-radius:var(--v-r-knopf);--d-input-radius:var(--v-r-feld);--d-card-radius:var(--v-r-karte);
  --d-primary:var(--k-blau);--d-primary-2:var(--k-blau);--d-info:var(--k-tuerkis);--d-info-2:var(--k-tuerkis);--d-accent:var(--k-violett);--d-accent-2:var(--k-violett);--d-secondary:var(--k-grau);--d-ok:var(--k-gruen);--d-ok-2:var(--k-gruen);
  --d-accent-soft:var(--v-innen);--d-accent-text:var(--v-akzent);--d-accent-tint:var(--v-innen);--d-accent-border:var(--v-linie);
  --d-input-border:var(--v-linie-2);--d-input-bg:var(--v-feld);--d-readonly:var(--v-feld-aus);--d-focus:transparent;
  --d-card:var(--v-karte);--d-card-shadow:var(--v-schatten-karte);--d-card-border:var(--v-karte-rand);
  --d-table-shadow:none;--d-th:var(--v-kopf);--d-th-text:var(--v-kopf-text);--d-row-hover:var(--v-zeile);
  --d-info-tint:var(--v-innen);--d-info-border:var(--v-linie);--d-info-text:var(--v-info);--d-subtabs:var(--v-innen);--d-side-tint:var(--v-innen);--d-line:var(--v-linie);
  --d-dialog-head:var(--v-kopf);--d-dialog-head-text:var(--v-titel);--d-chem-bg:var(--v-innen);--d-chem-border:var(--v-linie);--d-chem-text:var(--v-akzent);--d-chem-meta:var(--v-text);--d-chem-inline:var(--v-akzent);
  --r-seite:var(--v-seite);--r-text:var(--v-text);--r-grau:var(--v-text-2);--r-rand:var(--v-linie);--r-rand-hell:var(--v-linie-2);--r-peri:var(--v-akzent);--r-peri-hell:var(--v-akzent);--r-cyan:var(--v-zahl-info);--r-gold:var(--v-zahl-warn);--r-gruen:var(--v-zahl-gut);--r-rot:var(--v-zahl-bad);--r-orange:var(--v-orange);
  --r-karte:var(--v-karte);--r-innen:var(--v-innen);
}

/* ---------- Seite ---------- */
html{background:var(--v-seite)}
body{background:var(--v-seite);color:var(--v-text);font-family:var(--v-font);font-size:var(--v-schrift);line-height:var(--v-zeilenhoehe);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
body::before,body::after{background:none}
.fx-canvas{opacity:1}
.header::after{display:none}
.brand .brand-symbol{filter:none}

/* ---------- Menü ---------- */
.container>.header{background:var(--v-menue);border-right:0;color:var(--v-menue-text)}
.header .brand .b-title{color:var(--v-menue-titel);font-family:var(--v-titel-font)}
.header .brand-symbol{color:var(--v-akzent)}
.header .b-sub,.header .nav-label{color:var(--v-menue-text-2)}
.header .sidebar-formula{color:var(--v-menue-text-2)}
.header .sidebar-formula-intro{border-bottom-color:var(--v-menue-linie)}
.header .nav-btn{color:var(--v-menue-text);background:transparent;border:1px solid transparent;box-shadow:none;font-family:var(--v-font)}
.header .nav-btn .nav-index{color:var(--v-menue-text-2)}
.header .nav-btn.active{background:var(--v-menue-aktiv);color:var(--v-menue-aktiv-text);border-color:transparent;box-shadow:none}
.header .nav-btn.active .nav-index{color:var(--v-menue-aktiv-text)}
.header .kvh-schloss{opacity:1}
.header .connection-status{color:var(--v-zahl-gut)}.header .connection-status.connecting{color:var(--v-zahl-warn)}.header .connection-status.disconnected{color:var(--v-zahl-bad)}
.conn-dot{background:currentColor;box-shadow:none}.connecting .conn-dot,.disconnected .conn-dot{background:currentColor;box-shadow:none}
.header .kvh-abmelden{background:var(--k-grau);color:var(--k-text);border:1px solid var(--k-grau);border-radius:var(--v-r-knopf);min-height:28px}
@media(hover:hover) and (pointer:fine){
  .header .nav-btn:not(.active):hover{background:var(--v-menue-hover);color:var(--v-menue-aktiv-hover,var(--v-menue-text))}
  .header .kvh-abmelden:hover{background:var(--k-grau);box-shadow:inset 0 0 0 1px var(--k-hover)}
}
.nav-btn:hover{transform:none}

main.main-content{padding:var(--v-haupt-pad)}

/* ---------- Überschriften und Text ---------- */
h1,h2,h3,h4,.page-head h1,.panel-title{font-family:var(--v-titel-font);color:var(--v-titel)}
.main-content .page-head{padding-right:150px;margin-bottom:var(--v-kopf-abstand,20px)}
.main-content .page-head h1{font-size:var(--v-h1);font-weight:var(--v-h1-gewicht);letter-spacing:var(--v-h1-lauf);line-height:var(--v-h1-zeile);margin-bottom:6px;color:var(--v-titel)}
.main-content .page-head p{font-size:var(--v-unter);font-style:var(--v-unter-stil);font-family:var(--v-unter-font);color:var(--v-text-2);line-height:1.45}
.main-content h2,.main-content .form-section>h2,.main-content .table-section>h2,.main-content .section-head h2,section.view>h2{font-size:var(--v-h2);font-weight:var(--v-h2-gewicht);letter-spacing:var(--v-h2-lauf);color:var(--v-titel);line-height:1.3}
.main-content h3{font-size:var(--v-h3);font-weight:var(--v-h3-gewicht);letter-spacing:var(--v-h3-lauf);text-transform:var(--v-h3-wandel);color:var(--v-titel);line-height:1.3}
.main-content h4{font-family:var(--v-titel-font);color:var(--v-titel)}
.main-content .form-section>h2,.main-content .table-section>h2,.main-content .section-head{border-bottom:1px solid var(--v-linie);padding-bottom:10px}
.main-content .section-head h2{border:0;padding:0}
.main-content .section-head{margin-bottom:var(--v-gruppe);gap:8px}
.main-content .hint,.main-content small,.main-content .desc,.hint,small,.desc,.empty,.empty-state,.empty-state h2,.empty-state p,.legend{color:var(--v-text-2)}
#rfHint{color:var(--v-text-2)!important}

/* ---------- Karten ---------- */
.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout{background:var(--v-karte);border:var(--v-karte-rand);box-shadow:var(--v-schatten-karte);border-radius:var(--v-r-karte)}
.main-content .form-section,.main-content .table-section,.main-content .alerts-section{padding:var(--v-karte-pad);margin-bottom:var(--v-abstand)}
.main-content .overview-header{padding:var(--v-kopfkarte-pad,12px 16px);margin-bottom:var(--v-gruppe)}
.main-content .table-section .overview-header,.main-content .overview-header[style*="padding:0"]{background:none;border:0;box-shadow:none;border-radius:0}
.form-section:hover,.table-section:hover{border-color:var(--v-karte-hover,var(--v-linie))}
.main-content .stats-grid{gap:var(--v-kpi-luecke);margin:6px 0 var(--v-abstand)}
.main-content .stat-card,.stat-card{background:var(--v-kpi,var(--v-innen));border:var(--v-kpi-rand,1px solid var(--v-linie));border-left:var(--v-kpi-rand-links,var(--v-kpi-rand,1px solid var(--v-linie)));border-radius:var(--v-r-kpi,var(--v-r-karte));box-shadow:none;padding:var(--v-kpi-pad);text-align:left}
.stat-card::before,.stat-card::after{display:none}
.stat-card.urgent{background:var(--v-bad-bg)}
.main-content .stat-number,.stat-number{font-family:var(--v-zahl-font);font-size:var(--v-zahl-gross);font-weight:var(--v-zahl-gewicht);letter-spacing:var(--v-zahl-lauf);color:var(--v-titel);line-height:1.15}
.main-content .stat-card{min-width:0}.main-content .stat-number{overflow-wrap:anywhere}
#stKpis .stat-number{font-size:calc(var(--v-zahl-gross)*.82)}
@media(min-width:901px){
  #kpis.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.9fr)}
  #stKpis.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}
.stat-number.normal{color:var(--v-zahl-gut)}.stat-number.warning{color:var(--v-zahl-warn)}.stat-number.danger{color:var(--v-zahl-bad)}.stat-number.info{color:var(--v-zahl-info)}
.stat-card.urgent .stat-number.danger{color:var(--v-bad)}
.main-content .stat-label,.stat-label{color:var(--v-text-2);font-size:var(--v-kpi-label);letter-spacing:var(--v-kpi-lauf);text-transform:var(--v-kpi-wandel)}
.stat-card.urgent .stat-label{color:var(--v-bad)}
.stat-card.click:hover{box-shadow:none;transform:none;border-color:var(--v-karte-hover,var(--v-linie-2))}

/* Unterkästen */
.recipe-box,.excel-import-section,.blue-box,.green-box,.lot-selector,.scale-bar,#view-kaviar .kav-scale,.excel-queue,.booking-progress{background:var(--v-innen);border:var(--v-innen-rand,1px solid var(--v-linie));border-radius:var(--v-r-innen);color:var(--v-text)}
.main-content .recipe-box,.main-content .excel-import-section,.main-content .blue-box,.main-content .green-box,.main-content .scale-bar,.main-content .lot-selector{padding:var(--v-innen-pad);margin-bottom:var(--v-gruppe)}
.recipe-box h3,.excel-import-section h3,.blue-box h3,.green-box h3,.scale-bar h4,.lot-selector h4{color:var(--v-titel)}
.main-content .recipe-box h3,.main-content .excel-import-section h3,.main-content .blue-box h3,.main-content .green-box h3{font-size:var(--v-h3)}
.recipe-box label{color:var(--v-label-farbe)}
.recipe-side{background:var(--v-innen);border-color:var(--v-linie)}
.recipe-card,.lot-item,.excel-queue-item,.kommission-item,.progress-item{background:var(--v-karte);border-color:var(--v-linie);color:var(--v-text);border-radius:var(--v-r-feld)}
.recipe-card.active{background:var(--v-zeile);border-color:var(--v-akzent);box-shadow:none}
.lot-item.selected{background:var(--v-markiert);border-color:var(--v-akzent);color:var(--v-markiert-text);box-shadow:none}.lot-item.selected small,.lot-item.selected .lot-quantity{color:var(--v-markiert-text)}
.lot-quantity{color:var(--v-zahl-gut);font-family:var(--v-zahl-font)}
.lot-chip{background:var(--v-zeile);color:var(--v-text);border-radius:var(--v-r-marke)}.lot-chip.expired{background:var(--v-bad-bg);color:var(--v-bad)}
.kommission-item{border-left-color:var(--v-akzent)}.kommission-item .k-qty,.k-total{color:var(--v-titel)}.k-total{background:var(--v-zeile)}
.excel-queue-item{border-left-color:var(--v-zahl-gut)}.excel-queue-item.bad{border-left-color:var(--v-zahl-bad)}.excel-queue-item input{border-color:var(--v-linie-2)}
.progress-item{border-bottom-color:var(--v-linie)}.progress-item .pi{color:var(--v-label-farbe)}
.custom-toggle{background:var(--v-innen);border-radius:var(--v-r-innen)}.custom-toggle .toggle-text{color:var(--v-text)}
.slider{background:var(--v-linie-2)}.toggle-switch input:checked+.slider{background:var(--k-gruen)}.toggle-switch input:focus-visible+.slider{box-shadow:0 0 0 2px var(--v-karte),0 0 0 4px var(--v-fokus)}

/* ---------- Eingaben ---------- */
.main-content label{color:var(--v-label-farbe);font-size:var(--v-label);font-weight:var(--v-label-gewicht);margin-bottom:5px;line-height:1.35}
.main-content .form-group{margin-bottom:var(--v-gruppe)}
.main-content .form-row{gap:var(--v-reihe)}
.main-content input:not([type=checkbox]):not([type=radio]),.main-content select,.main-content textarea,dialog input,dialog select,dialog textarea{min-height:var(--v-feld-h);padding:var(--v-feld-pad);border:1px solid var(--v-linie-2);border-radius:var(--v-r-feld);background-color:var(--v-feld);color:var(--v-text);font-family:var(--v-font);font-size:var(--v-feld-schrift);font-weight:400}
.main-content input::placeholder,.main-content textarea::placeholder,dialog input::placeholder{color:var(--v-platzhalter,var(--v-text-2));opacity:1;font-weight:400}
.main-content select option,.main-content select optgroup,dialog select option{background:var(--v-karte);color:var(--v-text)}
.main-content input:hover:not(:disabled),.main-content select:hover:not(:disabled),.main-content textarea:hover:not(:disabled),input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--v-feld-hover,var(--v-akzent))}
.main-content input:focus,.main-content select:focus,.main-content textarea:focus,dialog input:focus,dialog select:focus,dialog textarea:focus,input:focus,select:focus,textarea:focus{border-color:var(--v-fokus);outline:0;background-color:var(--v-feld);box-shadow:var(--v-fokus-ring)}
.main-content input[readonly],.main-content input:disabled,dialog input[readonly],input[readonly],input:disabled{background-color:var(--v-feld-aus);color:var(--v-text-2);border-color:var(--v-linie)}
.main-content input[readonly]:focus{background-color:var(--v-feld-aus)}
#excelFile::file-selector-button{background:var(--v-feld);color:var(--v-text);border-color:var(--v-linie-2);border-radius:var(--v-r-feld)}
#excelFile::file-selector-button:hover{background:var(--v-zeile);border-color:var(--v-akzent)}
dialog label{color:var(--v-label-farbe);font-size:var(--v-label);font-weight:var(--v-label-gewicht)}

/* ---------- Knöpfe: Bedeutung bleibt, Töne je Variante ---------- */
.btn{background:var(--k-blau);color:var(--k-text);border:1px solid transparent;border-radius:var(--v-r-knopf);font-family:var(--v-font);line-height:1.3}
.btn,.main-content .btn,dialog .btn{font-size:var(--v-knopf-schrift);font-weight:var(--v-knopf-gewicht);letter-spacing:var(--v-knopf-lauf);min-height:var(--v-knopf-h);padding:var(--v-knopf-pad)}
.btn:not(:disabled){box-shadow:none}
.main-content .btn-sm{font-size:var(--v-klein-schrift);min-height:var(--v-klein-h);padding:var(--v-klein-pad)}
.btn-success{background:var(--k-gruen)}
.btn-usage{background:var(--k-orange);color:var(--k-text)}
.btn-warning{background:var(--k-gelb);color:var(--k-gelb-text)}
.btn-danger{background:var(--k-rot);color:var(--k-text)}
.btn-info{background:var(--k-tuerkis)}
.btn-purple,.btn-violet,.btn-excel{background:var(--k-violett)}
.btn-secondary{background:var(--k-grau);border-color:var(--k-grau-rand,transparent)}
.btn-primary{background:var(--k-blau)}
.btn-soft{background:var(--v-innen);color:var(--v-akzent)}.btn-soft-green{background:var(--v-gut-bg);color:var(--v-gut)}.btn-soft-red{background:var(--v-bad-bg);color:var(--v-bad)}
.btn:disabled,.main-content .btn:disabled{background:var(--k-aus);color:var(--k-aus-text);border-color:var(--k-aus-rand);box-shadow:none;filter:none;opacity:1}
.btn-usage:disabled,.main-content .btn-usage:disabled{background:var(--k-orange-aus);color:var(--k-orange-aus-text);border-color:var(--k-orange-aus-rand)}
.btn-add-comp,.btn-add-comp:hover{background:var(--k-gruen);border:0;color:var(--k-text);border-radius:var(--v-r-knopf)}
.btn-remove-row,.btn-remove-row:hover{background:var(--k-gelb);color:var(--k-gelb-text);border-radius:var(--v-r-knopf)}
.bo-tabs #boLogout{background:var(--k-grau);color:var(--k-text);border:1px solid transparent}
@media(hover:hover) and (pointer:fine){
  .btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--k-hover)}
  .btn-warning:hover:not(:disabled),.btn-remove-row:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
}
.btn:hover:not(:disabled){filter:none}
.design-switch{background:var(--v-karte);color:var(--v-text);border:1px solid var(--v-linie-2);box-shadow:none;font-family:var(--v-font);border-radius:var(--v-r-knopf)}
.design-switch:hover{border-color:var(--v-akzent);box-shadow:none}

/* ---------- Tabellen ---------- */
.table-wrap{border-radius:var(--v-r-tabelle,var(--v-r-innen));box-shadow:none;border:var(--v-tabelle-rand,1px solid var(--v-linie))}
.main-content .data-table,.data-table{background:var(--v-karte);color:var(--v-text);font-size:var(--v-tabelle)}
.main-content .data-table th,.data-table th{background:var(--v-kopf);color:var(--v-kopf-text);font-family:var(--v-font);font-size:var(--v-th-schrift);font-weight:var(--v-th-gewicht);letter-spacing:var(--v-th-lauf);text-transform:var(--v-th-wandel);padding:var(--v-zelle-y) var(--v-zelle-x);border-bottom:var(--v-th-linie,1px solid var(--v-linie-2))}
.main-content .data-table td,.data-table td{border-color:var(--v-linie);color:var(--v-text);padding:var(--v-zelle-y) var(--v-zelle-x)}
.data-table .r{font-family:var(--v-zahl-font)}
#stockTable td:nth-child(3){white-space:nowrap}
/* Drei Knöpfe je Zeile: dürfen umbrechen, statt aus der Tabelle zu laufen */
#boCompTable td:last-child{white-space:normal!important;min-width:150px}#boCompTable td:last-child .btn{margin:1px 0}
.data-table tbody tr:nth-child(even){background:var(--v-streifen,transparent)}
.data-table tr.sub>td{background:var(--v-innen)}.data-table tr.sub .data-table th{background:var(--v-zeile);color:var(--v-text)}
.data-table tbody tr:hover{background:var(--v-zeile);box-shadow:none}
.data-table tr.row-bad>td{background:var(--v-bad-bg)}.data-table tr.row-warn>td{background:var(--v-warn-bg)}.data-table tr.row-info>td{background:var(--v-info-bg)}
.comp-table-wrapper{border-color:var(--v-linie);border-radius:var(--v-r-innen)}.comp-table th{background:var(--v-kopf);color:var(--v-kopf-text)}.comp-table td{border-color:var(--v-linie)}.comp-table tr:hover td{background:var(--v-zeile)}
.status-badge{border-radius:var(--v-r-marke);font-family:var(--v-font);font-weight:600}
.status-normal{background:var(--v-gut-bg);color:var(--v-gut)}.status-warning{background:var(--v-warn-bg);color:var(--v-warn)}.status-danger{background:var(--v-bad-bg);color:var(--v-bad)}.status-info{background:var(--v-info-bg);color:var(--v-info)}.status-mute{background:var(--v-zeile);color:var(--v-text-2)}
.st-ok{color:var(--v-zahl-gut)}.st-warn{color:var(--v-orange)}.st-bad,.missing,.badge-exp{color:var(--v-zahl-bad)}.badge-soon{color:var(--v-orange)}
.data-table tr.row-bad .st-bad,.data-table tr.row-warn .st-warn{color:inherit}

/* Hinweise */
.alert-item{border-left-width:var(--v-hinweis-kante,2px);background:var(--v-innen);color:var(--v-text);border-radius:var(--v-r-feld)}
.alert-item small,.alert-urgent small,.alert-high small,.alert-medium small,.alert-ok small,.alert-in small,.alert-out small{color:inherit}
.alert-urgent{background:var(--v-bad-bg);color:var(--v-bad);border-left-color:var(--v-zahl-bad)}
.alert-high,.alert-out{background:var(--v-orange-bg);color:var(--v-orange-text);border-left-color:var(--v-orange)}
.alert-medium{background:var(--v-warn-bg);color:var(--v-warn);border-left-color:var(--v-zahl-warn)}
.alert-ok{background:var(--v-gut-bg);color:var(--v-gut);border-left-color:var(--v-zahl-gut)}
.alert-in{background:var(--v-info-bg);color:var(--v-info);border-left-color:var(--v-zahl-info)}
.summary-box{color:var(--v-text)}.summary-box.ok{background:var(--v-gut-bg);border-color:var(--v-zahl-gut);color:var(--v-gut)}.summary-box.warn{background:var(--v-warn-bg);border-color:var(--v-zahl-warn);color:var(--v-warn)}.summary-box.bad{background:var(--v-bad-bg);border-color:var(--v-zahl-bad);color:var(--v-bad)}
.summary-box h4{color:inherit}
.warn-box{background:var(--v-warn-bg);border-color:var(--v-zahl-warn);color:var(--v-warn);border-radius:var(--v-r-innen)}.warn-box h3{color:var(--v-warn)}
.danger-box{background:var(--v-bad-bg);border-color:var(--v-zahl-bad);color:var(--v-bad);border-radius:var(--v-r-innen)}.danger-box h3{color:var(--v-bad)}.danger-box b{color:inherit}

/* Diagramme: Farben stehen im Skript als Attribut, CSS gewinnt gegen Attribute */
.bars .track{background:var(--v-zeile)}.bars .fill{background:var(--v-diagramm-balken,var(--v-akzent))}
#stChart svg text{fill:var(--v-text-2)}#stChart svg line{stroke:var(--v-linie-2)}
#stChart svg rect[fill="#15803d"]{fill:var(--v-diagramm-ein)}#stChart svg rect[fill="#c2410c"]{fill:var(--v-diagramm-aus)}
.chart .legend span:nth-child(1) i{background:var(--v-diagramm-ein)!important}.chart .legend span:nth-child(2) i{background:var(--v-diagramm-aus)!important}

/* Reiter und Chips */
.sub-tabs,.bo-tabs{background:var(--v-innen);border:1px solid var(--v-linie);border-radius:var(--v-r-innen);padding:4px;gap:4px}
.sub-tabs button,.bo-tabs .btn:not(.btn-secondary),.main-content .bo-tabs .btn:not(.btn-secondary){background:transparent;color:var(--v-text);border:1px solid transparent;border-radius:var(--v-r-feld);font-family:var(--v-font);font-size:var(--v-tab-schrift);font-weight:600;padding:var(--v-tab-pad);min-height:0}
.sub-tabs button.active,.bo-tabs .btn.current:not(.btn-secondary),.main-content .bo-tabs .btn.current:not(.btn-secondary){background:var(--v-markiert);color:var(--v-markiert-text);border-color:transparent;box-shadow:none;font-weight:600}
@media(hover:hover) and (pointer:fine){
  .sub-tabs button:not(.active):hover,.bo-tabs .btn:not(.btn-secondary):not(.current):hover{background:var(--v-zeile);color:var(--v-titel);box-shadow:none}
}
.filter-info,.scale-factor-badge{background:var(--v-markiert);color:var(--v-markiert-text);border-radius:var(--v-r-marke)}
.kav-chip{background:var(--v-karte);border-color:var(--v-linie-2);color:var(--v-text);border-radius:var(--v-r-chip,var(--v-r-marke))}
.kav-chip.active{background:var(--v-markiert);color:var(--v-markiert-text);border-color:transparent}
.kav-q{background:var(--v-innen);color:var(--v-text);border-color:var(--v-linie-2)}
.main-content .kav-chip{font-size:12px}

/* ---------- Labor-Rezepturen ---------- */
.kav-card{background:var(--v-innen);border-color:var(--v-linie);color:var(--v-text);border-radius:var(--v-r-innen)}.kav-card.active{background:var(--v-zeile);border-color:var(--v-akzent);box-shadow:none}.kav-card b{color:var(--v-titel)}
.kav-sub,.kav-kurz{color:var(--v-text-2)}.kav-lager.ok{color:var(--v-zahl-gut)}.kav-lager.warn{color:var(--v-zahl-warn)}
.kav-badge{background:var(--v-info-bg);color:var(--v-info);border-color:transparent;border-radius:var(--v-r-marke)}.kav-badge.Gelierbad{background:var(--v-violett-bg);color:var(--v-violett);border-color:transparent}.kav-badge.Aufguss{background:var(--v-gut-bg);color:var(--v-gut);border-color:transparent}.kav-badge.Alternative{background:var(--v-orange-bg);color:var(--v-orange-text);border-color:transparent}
#view-kaviar .kav-detail-head{background:var(--v-innen);color:var(--v-text);border-bottom:2px solid var(--v-akzent)}
#view-kaviar .kav-detail-head h3{color:var(--v-titel)}#view-kaviar .kav-detail-head .desc,#view-kaviar .kav-detail-head small{color:var(--v-text-2)}
.kav-msgs{background:var(--v-feld);border-color:var(--v-linie);border-radius:var(--v-r-innen)}.kav-msg.ki .kav-bubble{background:var(--v-innen);color:var(--v-text);border-color:var(--v-linie)}.kav-msg.nutzer .kav-bubble{background:var(--k-blau);color:var(--k-text)}.kav-msg.fehler .kav-bubble{background:var(--v-bad-bg);color:var(--v-bad);border-color:transparent}
.kav-bubble pre,.kav-bubble code{background:var(--v-feld);color:var(--v-text)}
.kav-typing span{background:var(--v-akzent)}
.kav-kpi{background:var(--v-innen);border-color:var(--v-linie);color:var(--v-text-2);border-radius:var(--v-r-innen)}.kav-kpi b{color:var(--v-titel)}.kav-formel{background:var(--v-innen);border-color:var(--v-linie);color:var(--v-text-2);border-radius:var(--v-r-innen)}.kav-formel .t{color:var(--v-akzent)}.kav-formel .f{color:var(--v-titel)}
.kav-hinweis{background:var(--v-warn-bg);border-color:transparent;color:var(--v-warn);border-radius:var(--v-r-innen)}.kav-hist summary{color:var(--v-label-farbe)}.kav-hist-item{border-color:var(--v-linie)}
.kav-na{color:var(--v-text-2)}.kav-zu .kav-chat-open{background:var(--v-markiert);color:var(--v-markiert-text);border-color:transparent;border-radius:var(--v-r-innen)}
.chem-card{background:var(--v-innen);border-color:var(--v-linie);border-radius:var(--v-r-innen)}

/* ---------- Dialoge, Meldungen, Anmeldung ---------- */
dialog{background:var(--v-dialog,var(--v-karte));color:var(--v-text);border:var(--v-dialog-rand,1px solid var(--v-linie-2));border-radius:var(--v-r-dialog);box-shadow:var(--v-schatten-dialog)}
dialog .dh{background:var(--v-dialog-kopf,var(--v-kopf));color:var(--v-titel);border-bottom:1px solid var(--v-linie);font-family:var(--v-titel-font);font-size:var(--v-dialog-titel,17px);font-weight:var(--v-h2-gewicht);padding:var(--v-dialog-pad,16px 22px)}
dialog .dh.danger{background:var(--k-rot);color:var(--k-text);font-size:var(--v-dialog-titel,17px)}
dialog .db{padding:var(--v-dialog-pad,18px 22px)}
dialog .db b{color:var(--v-titel)}
dialog .df{background:var(--v-dialog-fuss,var(--v-innen));border-top:1px solid var(--v-linie);padding:var(--v-dialog-fuss-pad,14px 22px)}
.panel-title{color:var(--v-titel);border-bottom-color:var(--v-linie);font-family:var(--v-titel-font);font-weight:var(--v-h2-gewicht)}
.toast{background:var(--v-meldung,var(--v-karte));color:var(--v-text);border:1px solid var(--v-linie-2);border-radius:var(--v-r-feld);box-shadow:var(--v-schatten-dialog);font-family:var(--v-font)}
.toast.ok{background:var(--v-gut-bg);color:var(--v-gut);border-color:var(--v-zahl-gut)}.toast.bad{background:var(--v-bad-bg);color:var(--v-bad);border-color:var(--v-zahl-bad)}.toast.warn{background:var(--k-gelb);color:var(--k-gelb-text);border-color:transparent}
.toast.ok::after{background:var(--v-zahl-gut);width:100%;transform-origin:0 50%;animation:vLeben 4s linear forwards}
@keyframes vLeben{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.kvh-login{background:var(--v-seite)}
.kvh-login::before,.kvh-login::after{display:none}
.kvh-box{background:var(--v-karte);color:var(--v-text);border:1px solid var(--v-linie-2);border-radius:var(--v-r-dialog);box-shadow:var(--v-schatten-dialog)}
.kvh-box h2{color:var(--v-titel);font-family:var(--v-titel-font)}.kvh-box p,.kvh-msg.ok{color:var(--v-text-2)}.kvh-box label{color:var(--v-label-farbe)}
.kvh-box input[type=password]{background:var(--v-feld);color:var(--v-text);border:1px solid var(--v-linie-2);border-radius:var(--v-r-feld)}
.kvh-box input[type=password]:focus{outline:2px solid var(--v-fokus);outline-offset:1px}
.kvh-logo{background:var(--v-markiert);color:var(--v-markiert-text);border-radius:var(--v-r-feld)}.kvh-msg{color:var(--v-zahl-bad)}
.fx-success-card{background:var(--v-karte);color:var(--v-titel);border-color:var(--v-akzent);border-radius:var(--v-r-dialog)}
.fx-receipt .fx-success-card{border-radius:var(--v-r-dialog)}

/* ---------- Figur: Form und Schweben bleiben, Sprechblasen folgen der Variante ---------- */
body[data-design="ric"] .assistant-bubble{border-color:var(--v-blase-rand,var(--v-linie-2));background:var(--v-blase,var(--v-karte));color:var(--v-blase-text,var(--v-text));border-radius:var(--v-r-blase,10px 10px 2px 10px);font-family:var(--v-font)}
body[data-design="ric"] .assistant-bubble.help{border-color:var(--v-akzent);background:var(--v-blase,var(--v-karte))}
body[data-design="ric"] .assistant-bubble.success{border-color:var(--v-zahl-gut);background:var(--v-gut-bg);color:var(--v-gut)}
body[data-design="ric"] .assistant-bubble.error,body[data-design="ric"] .assistant-bubble.error.help{border-color:var(--v-zahl-bad);background:var(--v-bad-bg);color:var(--v-bad)}
body[data-design="ric"] .assistant-bubble.mood{border-color:var(--v-akzent);background:var(--v-blase,var(--v-karte));color:var(--v-blase-text,var(--v-text))}
body[data-design="ric"] .assistant-picker button{background:var(--v-karte);border-color:var(--v-linie-2);color:var(--v-akzent)}
body[data-design="ric"] .assistant-picker button:hover{background:var(--v-zeile);border-color:var(--v-akzent)}
body[data-design="ric"] .assistant-picker button:focus-visible,body[data-design="ric"] .assistant-figure:focus-visible{outline-color:var(--v-fokus)}
body[data-design="ric"] .assistant-off-label,.assistant-name{color:var(--v-text-2);text-shadow:none}
body[data-design="ric"] .assistant-field-target{outline-color:var(--v-zahl-bad)!important}
body[data-design="ric"] .assistant-scan-target{outline-color:var(--v-akzent)!important;box-shadow:none!important}
body[data-design="ric"] .assistant-clean-target{outline-color:var(--v-akzent)!important}
body[data-design="ric"] .assistant-help-target{outline-color:var(--v-akzent)!important;box-shadow:0 0 0 3px rgba(var(--fx-rgb),.22)!important}

/* ---------- Fokus: überall sichtbar ---------- */
.btn:focus-visible,.nav-btn:focus-visible,.kav-chip:focus-visible,.kav-card:focus-visible,.sub-tabs button:focus-visible,.design-switch:focus-visible,.kvh-abmelden:focus-visible,.stat-card:focus-visible,.recipe-card:focus-visible,.lot-item:focus-visible,summary:focus-visible,#excelFile:focus-visible{outline:2px solid var(--v-fokus);outline-offset:2px}

/* ---------- Bewegung: nur transform und opacity ---------- */
.btn,.nav-btn,.header .nav-btn,.sub-tabs button,.kav-chip,.design-switch,.btn-add-comp,.btn-remove-row,.stat-card,.lot-item,.recipe-card,.kav-card,.kvh-abmelden{transition:transform .16s var(--r02-sanft)}
.btn:active:not(:disabled),.btn:hover:active:not(:disabled){transform:scale(.97);transition:transform 50ms ease-out}
.nav-btn:active,.header .nav-btn:active{transform:scale(.98);transition:transform 50ms ease-out}
.sub-tabs button:active,.kav-chip:active,.design-switch:active,.btn-add-comp:active,.btn-remove-row:active,.kvh-abmelden:active{transform:scale(.97);transition:transform 50ms ease-out}
.stat-card.click:active,.lot-item:active,.recipe-card:active,.kav-card:active{transform:scale(.985);transition:transform 50ms ease-out}
input,select,textarea,.slider,.data-table tbody tr,.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout,.container,.comp-table td,.assistant-picker button,.kav-kpi{transition:none}
input:hover,select:hover,textarea:hover{transition:none}
#excelFile::file-selector-button{transition:none}
.toggle-switch input:checked+.slider::before{transition:transform .2s var(--r02-sanft)}
dialog::backdrop{background:var(--v-abdunkeln);opacity:0;transition:opacity .15s ease,overlay .15s allow-discrete,display .15s allow-discrete}
dialog[open]::backdrop{background:var(--v-abdunkeln);opacity:1;transition:opacity .2s ease,overlay .2s allow-discrete,display .2s allow-discrete}
@starting-style{dialog[open]::backdrop{opacity:0}}

/* Sonderfälle der Darstellung: kein Glas in den Varianten, sofern eine Variante es nicht ausdrücklich setzt */
.container>.header,.form-section,.table-section,.alerts-section,.overview-header,.recipe-layout,.toast,.fx-success-card,.page-head,.design-switch,dialog::backdrop{backdrop-filter:none}

/* ---------- Schmale Fenster: Menü als Raster, Inhalt einspaltig ---------- */
@media(max-width:900px){
  .container>.header{padding:12px;gap:0}
  .header .brand{padding:0 0 10px}
  .header .sidebar-formula-intro,.header #tabs .sidebar-formula-reaction,.header .nav-label{display:none}
  .header #tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}
  .header #tabs .nav-btn{position:relative;flex-direction:column;justify-content:center;gap:4px;min-height:60px;padding:6px 2px;white-space:normal;text-align:center;font-size:12px;line-height:1.2;margin:0}
  .header .nav-btn .nav-index{display:none}
  .header .nav-btn .nav-text{overflow-wrap:anywhere}
  .header .kvh-schloss{position:absolute;top:6px;right:6px;margin:0}
  .header .kvh-fuss{padding-top:10px;margin-top:0}
  .header .kvh-abmelden{min-height:44px;padding:6px 12px}
  main.main-content{padding:var(--v-haupt-pad-mobil,16px 12px 96px)}
  .main-content .page-head{padding-right:0}
  .main-content .form-section,.main-content .table-section,.main-content .alerts-section{padding:var(--v-karte-pad-mobil,14px)}
  .main-content .btn,.main-content .btn-sm,dialog .btn,.btn{min-height:44px;white-space:normal}
  .sub-tabs button,.bo-tabs .btn:not(.btn-secondary),.main-content .bo-tabs .btn:not(.btn-secondary),.kav-chip,.main-content .kav-chip{min-height:44px}
  .inline-fields>.fit{flex:1 1 100%;min-width:0}
  .kav-chip,.main-content .kav-chip{min-width:44px}.main-content .bo-tabs .btn{min-height:44px}
  .main-content .two-col,.main-content .alerts-grid{grid-template-columns:minmax(0,1fr)}
  .table-section,.form-section,.alerts-section{min-width:0}
  .main-content .recipe-layout,.recipe-layout{grid-template-columns:minmax(0,1fr)}
  .recipe-side,.recipe-main{min-width:0}.recipe-side .btn-new{max-width:100%}
  .main-content .page-head h1{font-size:var(--v-h1-mobil,24px)}
  .main-content .stat-number{font-size:var(--v-zahl-mobil,22px)}
  .main-content .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .table-controls{width:100%}.table-controls input,.table-controls select{flex:1 1 140px;min-width:0}
  .recipe-side{border-bottom-color:var(--v-linie)}
  .bars .bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px}
  dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  dialog .db{max-height:calc(100dvh - 170px)}
  .design-switch{top:6px;right:6px;min-width:44px;min-height:44px;justify-content:center}
}

/* ---------- Einstellungen des Betriebssystems ---------- */
@media(prefers-reduced-motion:reduce){
  .btn:active:not(:disabled),.btn:hover:active:not(:disabled),.nav-btn:active,.sub-tabs button:active,.kav-chip:active,.design-switch:active,.btn-add-comp:active,.btn-remove-row:active,.kvh-abmelden:active,.stat-card.click:active,.lot-item:active,.recipe-card:active,.kav-card:active{transform:none}
  dialog,dialog[open]{transform:none}
  .toast.ok::after{animation:none}
}
@media(prefers-contrast:more){
  .form-section,.table-section,.alerts-section,.overview-header,.recipe-layout,.stat-card,dialog,.recipe-box,.lot-selector{border:1px solid var(--v-text)}
  .btn{border-color:var(--v-text)}
}
@media(prefers-reduced-transparency:reduce){
  .container>.header{background:var(--v-menue-fest,var(--v-menue))}
}

/* 07 LEITSTAND — Achse: Dichte.
   Dunkel, viele Zeilen auf einem Bildschirm, schmale Menüleiste mit Symbolen und kurzen Wörtern, Zahlen in Consolas. Ab 1400 px
   stehen Formular und Listen nebeneinander, damit man beim Buchen nicht scrollen muss. Knöpfe und Felder sind kleiner, die
   Status bleiben durch eine kräftige Kante und Farbe auf einen Blick erkennbar. */
:root{
  color-scheme:dark;--fx-rgb:63,210,199;
  --v-seite:#0b0e12;--v-menue:#0e1319;--v-karte:#131920;--v-innen:#181f28;--v-zeile:#212b36;--v-feld:#0c1015;--v-feld-aus:#1a222b;--v-kopf:#1b232d;--v-kopf-text:#c9d6e2;
  --v-text:#e4eaf0;--v-text-2:#a9b8c6;--v-titel:#f2f6fa;--v-label-farbe:#c3d0dc;--v-linie:#28323e;--v-linie-2:#71808f;
  --v-akzent:#3fd2c7;--v-markiert:#17514e;--v-markiert-text:#d7fbf7;
  --v-menue-text:#c3d0dc;--v-menue-text-2:#a0b0bf;--v-menue-titel:#f2f6fa;--v-menue-linie:#28323e;--v-menue-hover:#1b232d;--v-menue-aktiv:#17514e;--v-menue-aktiv-text:#d7fbf7;
  --v-zahl-gut:#6fe0a8;--v-zahl-warn:#ffcb5c;--v-zahl-bad:#ff9090;--v-zahl-info:#6fd8f0;
  --v-gut:#a6f0cb;--v-gut-bg:#10291f;--v-warn:#ffe19c;--v-warn-bg:#2b2410;--v-bad:#ffbcbc;--v-bad-bg:#331719;--v-info:#a6e8f7;--v-info-bg:#0f2830;--v-orange:#ffa871;--v-orange-text:#ffc9a6;--v-orange-bg:#2f1d10;--v-violett:#d3c7fb;--v-violett-bg:#221c3b;
  --v-diagramm-ein:#2fa877;--v-diagramm-aus:#e0772f;--v-diagramm-balken:#3fd2c7;
  --k-blau:#2f62c4;--k-gruen:#187a58;--k-orange:#c2440e;--k-gelb:#ffc940;--k-gelb-text:#1a1500;--k-rot:#c6283c;--k-tuerkis:#0b7288;--k-violett:#6e4dc9;--k-grau:#45515e;--k-text:#ffffff;--k-hover:rgba(255,255,255,.55);
  --k-aus:#1a222b;--k-aus-text:#a6b3c0;--k-aus-rand:#303c49;--k-orange-aus:#2f1d10;--k-orange-aus-text:#f0ae85;--k-orange-aus-rand:#593a24;

  --v-zahl-font:Consolas,"Cascadia Mono","Courier New",monospace;
  --v-schrift:12.5px;--v-zeilenhoehe:1.4;--v-h1:16px;--v-h1-gewicht:600;--v-h1-lauf:0em;--v-h1-zeile:1.2;--v-h1-mobil:18px;
  --v-h2:13px;--v-h2-gewicht:600;--v-h2-lauf:0em;--v-h3:12px;--v-h3-gewicht:600;--v-unter:12px;--v-kopf-abstand:8px;
  --v-haupt-pad:8px 12px 24px;--v-haupt-pad-mobil:8px 8px 112px;--v-karte-pad:8px 10px;--v-karte-pad-mobil:8px 10px;--v-innen-pad:6px 8px;--v-abstand:8px;--v-reihe:8px;--v-gruppe:6px;
  --v-knopf-h:28px;--v-knopf-pad:3px 10px;--v-knopf-schrift:12px;--v-klein-h:24px;--v-klein-pad:2px 8px;--v-klein-schrift:11.5px;
  --v-feld-h:28px;--v-feld-pad:2px 6px;--v-feld-schrift:12.5px;--v-label:11px;--v-label-gewicht:600;
  --v-th-schrift:10.5px;--v-th-lauf:.03em;--v-tabelle:12px;--v-zelle-y:3px;--v-zelle-x:8px;--v-streifen:rgba(255,255,255,.022);
  --v-zahl-gross:20px;--v-zahl-gewicht:700;--v-zahl-lauf:-.01em;--v-zahl-mobil:18px;--v-kpi-pad:6px 10px;--v-kpi-label:10.5px;--v-kpi-lauf:.03em;--v-kpi-luecke:6px;--v-kpi:#131920;--v-kpi-rand:1px solid var(--v-linie);
  --v-r-karte:4px;--v-r-innen:3px;--v-r-knopf:3px;--v-r-feld:3px;--v-r-dialog:4px;--v-r-marke:2px;--v-r-blase:4px;--v-r-tabelle:3px;
  --v-feld-hover:#3fd2c7;--v-fokus-ring:0 0 0 1px var(--v-fokus);
  --v-dialog-pad:10px 14px;--v-dialog-fuss-pad:8px 14px;--v-dialog-titel:13px;--v-schatten-dialog:0 16px 40px rgba(0,0,0,.6);--v-abdunkeln:rgba(0,0,0,.6);
  --v-hinweis-kante:3px;--v-tab-schrift:12px;--v-tab-pad:4px 10px;
}

/* Menüleiste: 108 px, Symbol über Wort */
@media(min-width:901px){
  .container{grid-template-columns:108px minmax(0,1fr)}
  .container>.header{padding:8px 4px;border-right:1px solid var(--v-linie);align-items:stretch}
  .header .brand{padding:2px 0 6px;margin:0;border-bottom:1px solid var(--v-linie)}
  .header .brand .b-title{justify-content:center;font-size:0;gap:0}
  .header .brand .b-title span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .header .brand .brand-symbol{width:26px;height:26px}.header .brand .brand-symbol .ui-icon{width:24px;height:24px}
  .header .brand .b-sub{margin:2px 0 0;font-size:9.5px;letter-spacing:.02em;text-align:center;text-transform:none;font-weight:600}
  .header .sidebar-formula-intro,.header #tabs .sidebar-formula-reaction,.header .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;border:0}
  .header #tabs{gap:2px;margin-top:6px}
  .header #tabs .nav-btn{position:relative;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:5px 1px 4px;border-radius:3px;font-size:11px;font-weight:500;line-height:1.15;white-space:normal;text-align:center}
  .header #tabs .nav-btn.active{box-shadow:inset 2px 0 0 var(--v-akzent);font-weight:600}
  .header .kvh-fuss{flex-direction:column;align-items:stretch;gap:4px;padding-top:6px;border-top:1px solid var(--v-linie)}
  .header .connection-status{justify-content:center;font-size:10px;text-align:center;font-weight:600}
  .header .kvh-abmelden{justify-content:center;font-size:11px;padding:3px 2px;min-height:26px}
}
@media(min-width:901px) and (max-height:720px){
  .header #tabs .nav-btn{min-height:50px;padding:3px 1px;gap:1px}
  .header .brand .b-sub{display:none}
}
.header .nav-btn .nav-index{display:none}
.header .nav-btn .ui-icon{width:18px;height:18px}
.header .nav-btn .kvh-schloss{position:absolute;top:5px;right:9px;width:12px;height:12px;margin:0}

/* Kopf: eine Zeile */
.main-content .page-head{display:flex;align-items:baseline;gap:12px;min-height:30px;padding-right:128px;border-bottom:1px solid var(--v-linie);padding-bottom:6px}
.main-content .page-head h1{margin:0;white-space:nowrap}
.main-content .page-head p{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
section.view>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.main-content .form-section>h2,.main-content .table-section>h2,.main-content .section-head{padding-bottom:4px;margin-bottom:6px}
.main-content .section-head{min-height:26px}
.main-content .alerts-section h3,.main-content .table-section>h3{padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--v-linie);font-size:12px}

/* Kennzahlen: schmale Streifen mit Statuskante */
.main-content .stats-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:0 0 8px}
.main-content .stat-card{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1px;border-left:3px solid var(--v-linie-2)}
.main-content .stat-card.success{border-left-color:var(--v-zahl-gut)}.main-content .stat-card.warning{border-left-color:var(--v-zahl-warn)}.main-content .stat-card.critical,.main-content .stat-card.urgent{border-left-color:var(--v-zahl-bad)}.main-content .stat-card.info{border-left-color:var(--v-zahl-info)}
.main-content .stat-number{margin:0}
#stKpis.stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.main-content .stat-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Hinweise und Listen: einzeilig, mit eigenem Scrollbereich */
.alert-list{max-height:260px}
.main-content .alerts-grid{gap:8px}
.alert-item{padding:3px 8px;margin:2px 0;border-radius:2px;font-size:12px;line-height:1.3}
.alert-item small{font-size:11px;font-family:var(--v-zahl-font)}
.table-wrap.limit{max-height:380px}
.main-content .overview-header{padding:6px 8px;margin-bottom:8px}
.main-content .table-controls{gap:4px}.main-content .table-controls input,.main-content .table-controls select{min-width:130px}
.lot-chip{font-family:var(--v-zahl-font);font-size:11px}
.main-content .custom-toggle{padding:4px 8px;margin-bottom:6px}
.toggle-switch{width:34px;height:18px}.slider::before{width:14px;height:14px;left:2px;top:2px}.toggle-switch input:checked+.slider::before{transform:translateX(16px)}
.lot-item{padding:3px 8px;margin:2px 0}.lot-number,.lot-quantity{font-size:12px}.lot-item small{font-size:11px}
.recipe-card{padding:6px 8px;margin:4px 0}.recipe-card .rc-name{font-size:12.5px}
.recipe-layout{grid-template-columns:240px minmax(0,1fr);min-height:0}
.recipe-side,.main-content .recipe-side{padding:8px}.recipe-main{padding:8px 10px}
.main-content .form-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.main-content textarea{min-height:44px}
.main-content .inline-fields{gap:6px}
.status-badge{padding:1px 5px;font-size:10.5px}
.kommission-item{padding:4px 8px;margin:2px 0;gap:8px}
.panel-title{font-size:13px;margin-bottom:8px;padding-bottom:4px}
.empty-state{padding:24px 12px}
.main-content .kav-card{padding:6px 8px;gap:2px}.main-content .kav-sub,.main-content .kav-kurz,.main-content .kav-lager{font-size:11px}
.main-content .kav-card b{font-size:12.5px}.main-content .kav-detail-head h3{font-size:15px}
#view-kaviar .kav-detail-head{padding:8px 16px}
.main-content .kav-sec{margin-top:10px}.main-content .kav-sec h4{font-size:12px;margin-bottom:4px;padding-bottom:3px}
.bars .bar{font-size:12px;margin:3px 0}.bars .track{height:10px}

/* Reiter: flach, mit Unterkante */
.sub-tabs,.bo-tabs{background:var(--v-karte);border:1px solid var(--v-linie);border-radius:4px;padding:0;gap:0;margin-bottom:8px}
.sub-tabs button,.bo-tabs .btn:not(.btn-secondary),.main-content .bo-tabs .btn:not(.btn-secondary){border:0;border-radius:0;box-shadow:inset 0 -2px 0 transparent;color:var(--v-text-2)}
.sub-tabs button.active,.bo-tabs .btn.current:not(.btn-secondary),.main-content .bo-tabs .btn.current:not(.btn-secondary){background:var(--v-innen);color:var(--v-titel);box-shadow:inset 0 -2px 0 var(--v-akzent)}
.bo-tabs #boLogout{margin:2px 4px 2px auto}

/* Dialog: kompakt, breite Felder in zwei Spalten */
dialog{width:min(640px,calc(100vw - 32px))}
dialog .dh{font-weight:700;letter-spacing:.02em}
dialog .form-group{margin-bottom:6px}
dialog .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kvh-box{border-radius:4px;padding:20px}
.design-switch{min-height:24px;padding:3px 8px;top:6px;right:12px;font-size:10.5px;border-radius:3px;background:var(--v-innen)}

/* Breite Bildschirme: nebeneinander statt untereinander */
@media(min-width:1400px){
  [data-st-panel="overview"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px;align-items:start}
  [data-st-panel="overview"]>#stKpis,[data-st-panel="overview"]>.two-col:last-child{grid-column:1/-1}
  #view-stats [data-st-panel="overview"]>.chart{max-width:none}
  #view-overview.active{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 8px;align-items:start}
  #view-overview>.stats-grid{grid-column:1/-1}
  #view-overview>.alerts-section{margin-bottom:8px}
  #view-overview #lastMoves .alerts-grid{grid-template-columns:1fr}
  #view-receipt.active{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px;align-items:start}
  #view-usage.active,#view-picking.active{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 8px;align-items:start}
  #view-usage>.recipe-box{grid-column:1;grid-row:1}#view-usage>.form-section{grid-column:1;grid-row:2}
  #view-usage>.table-section:nth-of-type(n){grid-column:2}
  #view-usage>.recipe-box~.table-section{grid-column:2}
  #view-picking>.table-section:first-child{grid-column:1/-1}
  #view-picking>.recipe-box,#view-picking>.form-section{grid-column:1}
  #view-picking>.table-section:nth-last-child(-n+2){grid-column:2;grid-row:2}
  #view-picking>.table-section:last-child{grid-row:3}
  #view-usage>.table-section:nth-last-child(2){grid-row:1}#view-usage>.table-section:last-child{grid-row:2}
}

@media(max-width:900px){
  .container>.header{padding:6px;border-bottom:1px solid var(--v-linie)}
  .header .brand{display:flex;align-items:center;gap:8px;padding:0 0 6px}
  .header .brand .b-title{font-size:13px}.header .brand .b-sub{margin:0;font-size:11px;letter-spacing:0;text-transform:none}
  .header .brand .brand-symbol{width:22px;height:22px}.header .brand .brand-symbol .ui-icon{width:20px;height:20px}
  .header #tabs{gap:2px}
  .header #tabs .nav-btn{flex-direction:row;justify-content:flex-start;gap:4px;min-height:44px;padding:2px 3px;text-align:left;font-size:11px;line-height:1.15}
  .header #tabs .nav-btn .nav-text{overflow-wrap:normal;hyphens:none;min-width:0}
  .header #tabs .nav-btn .ui-icon{width:16px;height:16px}
  .header #tabs .nav-btn.active{box-shadow:inset 2px 0 0 var(--v-akzent)}
  .header .nav-btn .kvh-schloss{top:4px;right:4px}
  .header .kvh-fuss{padding-top:6px}
  .main-content .page-head{display:block;padding-right:0;min-height:0}
  .main-content .page-head p{white-space:normal;overflow:visible}
  .main-content .page-head h1{margin-bottom:2px}
  .main-content .stat-card{padding:6px 8px}
  .main-content .alerts-grid{grid-template-columns:1fr}
  .main-content input:not([type=checkbox]):not([type=radio]),.main-content select,.main-content textarea{min-height:44px;font-size:16px}
  dialog .form-row{grid-template-columns:1fr}
  .summary-box.with-clear{flex-wrap:wrap}
  dialog input,dialog select,dialog textarea{min-height:44px;font-size:16px}
}

/* 17 — Aufbau und Größen aus 07 Leitstand, Farben aus 10 Glas-Labor.
   Geladen nach ric_07.css. Hier stehen nur Farben: Menüleiste, Dichte, Schriften, Radien und Abstände kommen aus ric_07.css.
   Der Verlauf von 10 liegt hinter dem Inhalt, die Karten bleiben deckend. Das Menü ist leicht durchscheinend, aber ohne
   backdrop-filter, denn Glas mit Unschärfe bleibt Variante 10 vorbehalten. */
:root{
  color-scheme:dark;--fx-rgb:127,227,214;
  --v-seite:#0d1526;--v-menue:rgba(16,24,44,.62);--v-menue-fest:#141d33;--v-karte:#131c30;--v-innen:#19243c;--v-zeile:#223050;--v-feld:#0e1526;--v-feld-aus:#1a2540;--v-kopf:#1a2540;--v-kopf-text:#d4def0;
  --v-text:#eef2fa;--v-text-2:#bac6dc;--v-titel:#ffffff;--v-label-farbe:#d4dcec;--v-linie:#2b3857;--v-linie-2:#7a8bad;
  --v-akzent:#7fe3d6;--v-markiert:#1f6a66;--v-markiert-text:#ffffff;
  --v-menue-text:#e2e8f4;--v-menue-text-2:#c6d0e2;--v-menue-titel:#ffffff;--v-menue-linie:rgba(255,255,255,.14);--v-menue-hover:rgba(255,255,255,.08);--v-menue-aktiv:rgba(255,255,255,.14);--v-menue-aktiv-text:#ffffff;
  --v-zahl-gut:#7fe8b8;--v-zahl-warn:#ffd36e;--v-zahl-bad:#ffa3a3;--v-zahl-info:#86e2f0;
  --v-gut:#b8f2d6;--v-gut-bg:#143530;--v-warn:#ffe4a5;--v-warn-bg:#332f1e;--v-bad:#ffcaca;--v-bad-bg:#3d212e;--v-info:#bcecf7;--v-info-bg:#143447;--v-orange:#ffb68f;--v-orange-text:#ffd3bb;--v-orange-bg:#39292a;--v-violett:#dcd1ff;--v-violett-bg:#2c2852;
  --v-diagramm-ein:#3cb78a;--v-diagramm-aus:#e78744;--v-diagramm-balken:#7fe3d6;
  --k-blau:#3366c9;--k-gruen:#1a7e5c;--k-orange:#c2440e;--k-gelb:#ffc940;--k-gelb-text:#1a1500;--k-rot:#c6283c;--k-tuerkis:#0b7690;--k-violett:#7052cf;--k-grau:#4b5874;--k-text:#ffffff;--k-hover:rgba(255,255,255,.55);
  --k-aus:#1a2540;--k-aus-text:#b2bed4;--k-aus-rand:#35436a;--k-orange-aus:#39292a;--k-orange-aus-text:#f4b794;--k-orange-aus-rand:#684a3a;
  --v-kpi:#131c30;--v-feld-hover:#7fe3d6;--v-abdunkeln:rgba(5,9,20,.72);--v-schatten-dialog:0 16px 40px rgba(4,8,20,.72);
}

/* Der Verlauf aus 10 mit dem feinen Sechseckraster */
body::before{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='146' viewBox='0 0 84 146' fill='none' stroke='%23ffffff' stroke-opacity='.05'%3E%3Cpath d='M42 1 83 25v48L42 97 1 73V25zM42 97v48'/%3E%3C/svg%3E"),
  radial-gradient(60vw 70vh at 8% 6%,#17606a 0%,transparent 62%),
  radial-gradient(52vw 62vh at 92% 12%,#3a2f7d 0%,transparent 64%),
  radial-gradient(70vw 70vh at 62% 108%,#17415f 0%,transparent 62%)}

/* Kanten des Menüs wie am Glas in 10, Schrift im Kopf hell genug für den Verlauf */
.container>.header{border-right-color:rgba(255,255,255,.16)}
.main-content .page-head{border-bottom-color:rgba(255,255,255,.16)}
.main-content .page-head p{color:var(--v-menue-text)}

@media(prefers-reduced-transparency:reduce){
  body::before{background:none}
}

/* Blick für 17: Eule mit den Pupillen, Atom mit dem Fenster, wie in 03.1. Die Werte kommen aus figur_blick.js (je −1 bis 1). */
.kf-eule .kf-eule-augen>circle:nth-of-type(n+3){translate:calc(var(--bx,0)*2.6px) calc(var(--by,0)*2.2px)}
.kf-sphaere .kf-fenster,.kf-sphaere .status-light,.kf-sphaere .visor-tool,.kf-sphaere .mood-layer{translate:calc(var(--bx,0)*1.8px) calc(var(--by,0)*1.4px)}

/* Listen, Excel-Zeile und Knöpfe: gleich für 6.77, 17 und 03.1. Geladen nach dem Stylesheet der jeweiligen Seite. */
/* Wareneingang: Formular schmaler, die Liste zeigt alle 20 Einträge ohne eigenes Scrollen */
#recentReceipts.table-wrap.limit{max-height:none}
@media(min-width:901px){
  #recentReceipts .data-table td{overflow-wrap:anywhere}
  #recentReceipts .data-table td:first-child,#recentReceipts .data-table td:nth-child(7),#recentReceipts .data-table td.r{overflow-wrap:normal;white-space:nowrap}
}
@media(min-width:1400px){
  #view-receipt.active{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  #receiptForm .form-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:end}
}

/* Excel-Import im Verbrauch: eine kompakte Zeile, Titel und Text links, Knopf rechts */
#view-usage .excel-import-section{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px}
#view-usage .excel-import-section>h3{grid-column:1;margin:0}
#view-usage .excel-import-section>.desc{grid-column:1;margin:2px 0 0}
#view-usage .excel-import-section>label{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
#view-usage .excel-import-section>#excelFile{grid-column:2;grid-row:1/span 2}
#view-usage .excel-import-section>.excel-queue{grid-column:1/-1}
@media(max-width:600px){
  #view-usage .excel-import-section{grid-template-columns:minmax(0,1fr)}
  #view-usage .excel-import-section>#excelFile{grid-column:1;grid-row:auto;margin-top:8px}
}

/* Übersicht: beide Hinweislisten zeigen alle Einträge ohne eigenes Scrollen */
#alerts.alert-list,#expiring.alert-list{max-height:none;overflow:visible}

/* Verbrauch: Knöpfe der Rezeptur etwas schmaler; die Reihe bleibt in der Box und bricht sonst um */
#view-usage .recipe-box .inline-fields>.fit{flex:0 1 auto;min-width:0;max-width:100%}
#view-usage .recipe-box .inline-fields>.fit .btn{padding-left:10px;padding-right:10px}

/* Übersicht: Letzte Lagerbewegungen sind eine reine Information und verlangen keine Handlung, deshalb ohne Signalfarben */
#lastMoves .alert-in,#lastMoves .alert-out{background:color-mix(in srgb,var(--d-text) 6%,transparent);color:var(--d-text);border-left-color:var(--d-muted)}
#lastMoves .alert-in small,#lastMoves .alert-out small{color:var(--d-muted)}

/* Chemie-Info für 6.77, 17 und 03.1: Unter der Komponentenauswahl steht nur noch die Formel in einem kleinen Feld, damit die
   Formulare im Wareneingang, Verbrauch und in der Kommissionierung kompakt bleiben. Die Erklärung erscheint beim Überfahren
   oder nach einem Klick über dem Formular und schiebt nichts weg. Farben kommen aus dem jeweiligen Design (--d-chem-…).
   Geladen nach allen anderen Stylesheets; die Klick- und Escape-Logik steht in chem_info.js. */
.chem-card{position:relative;display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;min-height:32px;margin-top:6px;padding:3px 9px 3px 10px;border-radius:var(--d-btn-radius);cursor:help;--chem-y:-4px}
.chem-card>.chem-formula{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:1.25}
.chem-card>.chem-formula.chem-mix{font-size:14px;opacity:1}
.chem-card::after{content:"i";display:grid;place-items:center;flex:none;width:16px;height:16px;border:1px solid var(--d-chem-text);border-radius:50%;color:var(--d-chem-text);font:600 11px/1 Georgia,Cambria,serif}
.chem-card:focus{outline:0}
.chem-card:focus-visible{outline:2px solid var(--d-chem-text);outline-offset:2px}

/* Die Erklärung liegt über dem Formular. Der kurze Aufschub verhindert ein Aufblitzen, wenn der Zeiger nur vorbeifährt. */
.chem-card>.chem-meta{position:absolute;z-index:30;left:0;top:calc(100% + 6px);width:min(460px,calc(100vw - 48px));padding:12px 14px;background:var(--d-chem-bg);border:1px solid var(--d-chem-text);border-radius:var(--d-card-radius);box-shadow:0 14px 36px rgba(0,0,0,.5);color:var(--d-chem-meta);font-size:14px;line-height:1.5;cursor:auto;opacity:0;pointer-events:none;transform:translateY(var(--chem-y));transition:opacity .12s ease,transform .12s ease}
.chem-card>.chem-meta::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.chem-card>.chem-meta .chem-kav{margin-top:8px}
.chem-card>.chem-meta .chem-hint{font-size:13px}
.chem-card:hover>.chem-meta,.chem-card:focus>.chem-meta{opacity:1;pointer-events:auto;transform:none;transition:opacity .16s ease .12s,transform .2s cubic-bezier(.23,1,.32,1) .12s}
.chem-card:focus>.chem-meta{transition-delay:0s}
.chem-card.zu>.chem-meta,.chem-card.zu:hover>.chem-meta{opacity:0;pointer-events:none;transform:translateY(var(--chem-y));transition:opacity .12s ease,transform .12s ease}

/* Reicht der Platz nach unten nicht, öffnet sie nach oben (Klasse setzt chem_info.js) */
.chem-card.oben{--chem-y:4px}
.chem-card.oben>.chem-meta{top:auto;bottom:calc(100% + 6px)}
.chem-card.oben>.chem-meta::before{top:auto;bottom:-8px}

@media(max-width:700px){
  .chem-card{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .chem-card,.chem-card.oben{--chem-y:0px}
  .chem-card:hover>.chem-meta,.chem-card:focus>.chem-meta{transition-delay:0s}
}

/* Rezeptmengen und kleine Prüfmeldungen für 6.77, 17 und 03.1. Farben kommen aus dem jeweiligen Design (--d-…). */
.kv-menge{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.kv-menge small{font-family:var(--d-font);font-size:11px;font-weight:400;color:var(--d-muted);white-space:nowrap}
.main-content .kv-menge .btn{min-height:24px;padding:2px 8px;font-size:11.5px;line-height:1.3;white-space:nowrap}
.kv-menge-feld{display:inline-flex;align-items:center;gap:4px}
.main-content .kv-menge-feld input{width:84px;min-width:84px;min-height:28px;padding:2px 6px;font-size:13px;text-align:right}
.kv-status,.kv-lots{vertical-align:top}

/* Meldungen zum Prüfergebnis: klein, die abgelaufene Charge ist ein Hinweis und kein Alarm */
.kv-mhd-hinweis{margin-top:1px;font-size:11.5px;font-weight:400;line-height:1.35;color:var(--d-muted)}
.kv-pruefergebnis{margin-top:6px;font-size:12px;line-height:1.35}
.kv-pruefergebnis .st-ok,.kv-pruefergebnis .st-warn,.kv-pruefergebnis .st-bad{font-weight:500}
#urPreview .summary-box{align-items:flex-start;gap:10px;padding:5px 9px;margin-bottom:6px;border-width:1px;font-size:12px;line-height:1.35}
#urPreview .summary-box b{font-weight:600}
.main-content #urPreview .summary-box .btn{flex:none;min-height:24px;padding:2px 8px;font-size:11.5px}
#ruSummary .summary-box .kv-mhd-hinweis{margin-top:3px}

/* „Verfügbarkeit prüfen“ nach einer Mengenänderung hervorheben, bis geprüft wurde */
.btn.kv-pruefen-markiert{outline:2px solid var(--fx-accent,var(--d-primary));outline-offset:3px}

@media(max-width:700px){
  .main-content .kv-menge .btn{min-height:44px;padding:4px 10px;font-size:12px}
  .main-content .kv-menge-feld input{min-height:44px;font-size:16px}
}


/* Knopf-Pulse wie in dashboard_6.77_variante_d.html, in den Farben dieses Designs.
   Dezent gehalten: weicher Ring, kein Blitzen, langsamer Takt. */
@keyframes ricPuls { 0%,100% { box-shadow:0 0 0 0 rgba(125,211,252,.6); filter:brightness(1); } 50% { box-shadow:0 0 16px 5px rgba(125,211,252,.3); filter:brightness(1.15); } }
@keyframes ricPulsOrange { 0%,100% { box-shadow:0 0 0 0 rgba(255,140,70,.6); filter:brightness(1); } 50% { box-shadow:0 0 16px 5px rgba(255,140,70,.3); filter:brightness(1.15); } }
@keyframes ricPulsViolet { 0%,100% { box-shadow:0 0 0 0 rgba(180,150,255,.6); filter:brightness(1); } 50% { box-shadow:0 0 16px 5px rgba(180,150,255,.3); filter:brightness(1.15); } }
/* „Verfügbarkeit prüfen" pulsiert erst, wenn eine Rezeptur gewählt ist und noch nicht geprüft wurde */
.main-content .inline-fields:has(#urRecipe option:checked:not([value=""])):has(.btn-usage:disabled) .btn-info:not(:disabled),
.main-content .inline-fields:has(.btn-success:disabled) .btn-info:not(:disabled),
.main-content .btn-row:has(.btn-usage:disabled) .btn-info:not(:disabled) { animation:ricPuls 2s ease-in-out infinite; }

/* Nach der Prüfung/Auswahl aktiv gewordene Knöpfe pulsieren in ihrer Farbe */
#urSubmit:not(:disabled), #pkBook:not(:disabled) { animation:ricPulsOrange 2.4s ease-in-out infinite; }
#pkAddRecipe:not(:disabled), #ruPick:not(:disabled), #pkGenerate:not(:disabled), #pkExcel:not(:disabled) { animation:ricPulsViolet 2.4s ease-in-out infinite; }
#usageSingle:has(#usComp option:checked:not([value=""])) button.btn-usage[type="submit"] { animation:ricPulsOrange 2.4s ease-in-out infinite; }