* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; color: #2c3e50; }
.container { max-width: 1400px; margin: 0 auto; background: rgba(255,255,255,0.96); border-radius: 15px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); overflow: hidden; }

/* Kopf und Menü */
.header { background: linear-gradient(135deg, #2c3e50, #34495e); color: white; padding: 25px; text-align: center; }
.header h1 { font-size: 2.2rem; margin-bottom: 6px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.header p { opacity: 0.9; max-width: 920px; margin: 0 auto; line-height: 1.45; }
.nav-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.nav-btn { padding: 8px 18px; border: 2px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); color: white; border-radius: 6px; cursor: pointer; font-size: 0.92rem; font-weight: 500; font-family: inherit; transition: all 0.3s; }
.nav-btn:hover { background: rgba(255,255,255,0.3); }
.nav-btn.active { background: white; color: #2c3e50; border-color: white; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
/* Unterleiste des Dashboards: gleicher Stil wie das Menü im Kopf */
.dashboard-tabs { background: #34495e; padding: 10px 15px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.12); }
.main-content { padding: 20px; }
section.view { display: none; }
section.view.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
h2 { font-size: 1.2rem; margin-bottom: 12px; color: #2c3e50; }
h3 { font-size: 1rem; margin-bottom: 10px; color: #2c3e50; }
small { color: #5c636a; }

/* Buttons */
/* Gleiche Größe wie die Menü-Knöpfe im Kopf */
.btn { padding: 7px 16px; border: none; border-radius: 6px; font-size: 0.9rem; font-family: inherit; cursor: pointer; font-weight: 500; transition: all 0.3s ease; position: relative; overflow: hidden; color: white; background: linear-gradient(135deg, #0069d9, #0056b3); white-space: nowrap; }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.6s; }
.btn:hover:not(:disabled)::before { left: 100%; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
/* Gesperrte Knöpfe bleiben lesbar: blasser Grund, dunkle Schrift */
.btn:disabled { background: #e9ecef; color: #495057; box-shadow: none; cursor: not-allowed; }
.btn-usage:disabled { background: #fbe3d6; color: #9a3412; }
.btn-success { background: linear-gradient(135deg, #1e7e34, #18692b); }
.btn-info { background: linear-gradient(135deg, #0e7490, #155e75); }
.btn-warning { background: linear-gradient(135deg, #ffc107, #e0a800); color: #212529; }
.btn-danger { background: linear-gradient(135deg, #c92a2a, #a61e1e); }
.btn-secondary { background: linear-gradient(135deg, #6c757d, #545b62); }
.btn-excel { background: linear-gradient(135deg, #217346, #185c37); }
.btn-purple { background: linear-gradient(135deg, #8e44ad, #6a1b9a); }
.btn-sm { padding: 5px 11px; font-size: 0.82rem; }
.btn-soft { background: #e7ebff; color: #4c5bd4; }
/* Überschrift mit „Formular leeren“ rechts daneben */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.section-head h2 { margin: 0; }
.btn-soft-green { background: #d4edda; color: #155724; }
.btn-soft-red { background: #f8d7da; color: #a71d2a; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

/* Kennzahlen */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 6px 0 16px; }
.stat-card { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); text-align: center; transition: all 0.3s ease; border-left: 4px solid #007bff; }
.stat-card.click { cursor: pointer; }
.stat-card.click:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.stat-card.success { border-left-color: #28a745; }
.stat-card.warning { border-left-color: #ffc107; }
.stat-card.critical { border-left-color: #dc3545; }
.stat-card.urgent { border-left-color: #dc3545; background: linear-gradient(135deg, rgba(220,53,69,0.1), rgba(220,53,69,0.04)); }
.stat-card.info { border-left-color: #17a2b8; }
.stat-number { font-size: 1.45rem; font-weight: bold; margin-bottom: 4px; color: #2c3e50; }
.stat-number.normal { color: #28a745; }
.stat-number.warning { color: #b45309; }
.stat-number.danger { color: #dc3545; }
.stat-number.info { color: #117a8b; }
.stat-label { color: #5c636a; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; }

/* Hinweise */
.alerts-section { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); margin-bottom: 16px; }
.alerts-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.alert-list { max-height: 420px; overflow: auto; }
.alert-item { padding: 9px 12px; margin: 6px 0; font-size: 0.92rem; border-radius: 6px; border-left: 4px solid; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.alert-item .ai-main { flex: 1; }
.alert-item .ai-side { font-weight: 700; white-space: nowrap; }
.alert-urgent { background: rgba(220,53,69,0.1); border-left-color: #dc3545; color: #721c24; }
.alert-high { background: rgba(253,126,20,0.1); border-left-color: #fd7e14; color: #7e2914; }
.alert-medium { background: rgba(255,193,7,0.12); border-left-color: #ffc107; color: #856404; }
.alert-ok { background: rgba(40,167,69,0.1); border-left-color: #28a745; color: #155724; }
.alert-in { background: rgba(23,162,184,0.08); border-left-color: #17a2b8; color: #0c5460; }
.alert-out { background: rgba(253,126,20,0.08); border-left-color: #fd7e14; color: #7e2914; }

/* Formulare und Bereiche */
.form-section, .table-section { background: white; border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); margin-bottom: 16px; }
.form-group { margin-bottom: 12px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
label { display: block; margin-bottom: 4px; font-weight: 600; color: #2c3e50; font-size: 0.86rem; }
input, select, textarea { width: 100%; padding: 7px 10px; border: 2px solid #e1e5e9; border-radius: 6px; font-size: 0.9rem; font-family: inherit; background: white; color: #2c3e50; transition: all 0.3s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 10px rgba(0,123,255,0.25); }
input[type="file"] { padding: 5px; border: 2px dashed #007bff; background: #f8f9fa; cursor: pointer; }
textarea { min-height: 60px; resize: vertical; }
.hint { font-size: 0.84rem; color: #6c757d; margin-top: 4px; }
.recipe-box { background: linear-gradient(135deg, #f3e5f5, #ede7f6); border: 2px solid #ce93d8; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.recipe-box h3 { color: #6a1b9a; }
.recipe-box label { color: #4a148c; }
.recipe-box input, .recipe-box select { border-color: #ce93d8; }
.excel-import-section { background: linear-gradient(135deg, #e8f5e9, #f1f8e9); border: 2px solid #66bb6a; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.excel-import-section h3 { color: #2e7d32; }
.blue-box { background: linear-gradient(135deg, #e3f2fd, #f0f8ff); border: 2px solid #90caf9; border-radius: 10px; padding: 12px 14px; }
.blue-box h3 { color: #1565c0; }
.custom-toggle { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; background: #f8f9fa; border-radius: 8px; }
.custom-toggle .toggle-text { display: inline; margin: 0; font-weight: 500; font-size: 0.92rem; cursor: pointer; }
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 24px; margin: 0; flex: 0 0 auto; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #ccc; border-radius: 24px; transition: 0.3s; cursor: pointer; }
.slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.toggle-switch input:checked + .slider { background: #28a745; }
.toggle-switch input:checked + .slider::before { transform: translateX(22px); }
.toggle-switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(0,123,255,0.35); }
.green-box { background: linear-gradient(135deg, #e8f5e9, #f1f8e9); border: 2px solid #66bb6a; border-radius: 10px; padding: 12px 14px; }
.green-box h3 { color: #2e7d32; }
.recipe-box .form-group, .blue-box .form-group { margin-bottom: 8px; }
.inline-fields { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-fields > div { flex: 1 1 180px; }
.inline-fields > .grow { flex: 2 1 240px; }
.inline-fields > .fit { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.desc { color: #555; margin-bottom: 10px; font-size: 0.9rem; }

input[readonly], input:disabled { background: #f1f3f5; color: #6c757d; }
.scale-bar { background: linear-gradient(135deg, #e8f4fd, #f0f8ff); border: 2px solid #bee5eb; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.scale-bar h4 { margin-bottom: 8px; }
.scale-factor-badge { display: inline-block; background: #4c51bf; color: white; padding: 8px 14px; border-radius: 8px; font-weight: 700; white-space: nowrap; }
.summary-box { border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.summary-box.with-clear { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.summary-box h4 { margin-bottom: 4px; }
.summary-box.ok { background: #d4edda; border: 2px solid #c3e6cb; }
.summary-box.warn { background: #fff3cd; border: 2px solid #ffc107; }
.summary-box.bad { background: #f8d7da; border: 2px solid #f5c6cb; }
.lot-chip { display: inline-block; background: #e9ecef; border-radius: 4px; padding: 2px 7px; font-size: 0.78rem; margin: 2px; font-family: monospace; color: #495057; }
.lot-chip.expired { background: #f8d7da; color: #721c24; }
.st-ok { color: #1e7e34; font-weight: 600; } .st-warn { color: #b23c0a; font-weight: 600; } .st-bad { color: #b02525; font-weight: 600; }
.badge-exp { color: #b02525; font-size: 0.75rem; font-weight: 700; } .badge-soon { color: #c2410c; font-size: 0.75rem; }
.kommission-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 6px 0; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #8e44ad; }
.kommission-item .k-info { flex: 1; } .kommission-item .k-name { font-weight: 700; }
.kommission-item .k-qty { font-weight: 700; color: #8e44ad; white-space: nowrap; }
.k-total { margin-top: 8px; padding: 8px 12px; background: #e9ecef; border-radius: 8px; font-weight: 700; color: #6a1b9a; }
.booking-progress { background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.progress-item { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; }

/* Chargen-Auswahl */
.lot-selector { background: linear-gradient(135deg, #e8f4fd, #f0f8ff); border: 2px solid #bee5eb; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.lot-selector h4 { margin-bottom: 6px; font-size: 0.95rem; }
.lot-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; margin: 6px 0; background: white; border-radius: 8px; border: 2px solid #dee2e6; cursor: pointer; transition: all 0.25s ease; }
.lot-item:hover { border-color: #007bff; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,123,255,0.2); }
.lot-item.selected { background: linear-gradient(135deg, #0056b3, #004a99); color: white; border-color: #0056b3; box-shadow: 0 4px 15px rgba(0,123,255,0.4); }
.lot-item.selected small { color: rgba(255,255,255,0.85); }
.lot-item.expired { border-style: dashed; }
.lot-number { font-weight: bold; font-size: 0.95rem; margin-bottom: 2px; }
.lot-quantity { font-size: 1rem; font-weight: bold; color: #1e7e34; white-space: nowrap; }
.lot-item.selected .lot-quantity { color: white; }

/* Excel-Warteschlange */
.excel-queue { background: white; border-radius: 8px; padding: 15px; margin-top: 15px; }
.excel-queue-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; margin: 8px 0; background: #f8f9fa; border-radius: 6px; border-left: 4px solid #28a745; }
.excel-queue-item.bad { border-left-color: #dc3545; }
.excel-queue-item .item-name { font-weight: bold; }
.excel-queue-item input { width: 110px; padding: 7px; border-color: #28a745; text-align: center; font-weight: bold; }

/* Tabellen */
.table-wrap { overflow: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.table-wrap.limit { max-height: 520px; }
.data-table { width: 100%; border-collapse: collapse; background: white; font-size: 0.9rem; }
.data-table th, .data-table td { padding: 7px 11px; text-align: left; border-bottom: 1px solid #e9ecef; vertical-align: top; }
.data-table th { background: linear-gradient(135deg, #2c3e50, #34495e); color: white; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.4px; position: sticky; top: 0; z-index: 1; }
.data-table tbody tr:nth-child(even) { background: rgba(248,249,250,0.6); }
.data-table tbody tr:hover { background: rgba(0,123,255,0.05); }
.data-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tr.click { cursor: pointer; }
.data-table tr.sub > td { background: #f4f6fb; padding: 6px 13px 14px 34px; }
.data-table tr.sub .data-table th { background: #e9ecef; color: #2c3e50; position: static; }
.empty { color: #6c757d; padding: 18px; text-align: center; }
.status-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 0.74rem; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
.status-normal { background: linear-gradient(135deg, #d4edda, #c3e6cb); color: #155724; }
.status-warning { background: linear-gradient(135deg, #fff3cd, #ffeaa7); color: #856404; }
.status-danger { background: linear-gradient(135deg, #f8d7da, #f5c6cb); color: #721c24; }
.status-info { background: linear-gradient(135deg, #d1ecf1, #bee5eb); color: #0c5460; }
.status-mute { background: #e9ecef; color: #495057; }
.missing { color: #b02525; font-weight: 700; }
.overview-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; background: white; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.overview-header h2 { margin-bottom: 4px; }
.filter-info { display: inline-block; background: linear-gradient(135deg, #0e7490, #0f766e); color: white; padding: 5px 12px; border-radius: 15px; font-weight: bold; font-size: 0.85rem; }
.table-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.table-controls input, .table-controls select { width: auto; min-width: 160px; padding: 6px 9px; font-size: 0.88rem; }

/* Rezepturen */
.recipe-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); background: white; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); overflow: hidden; min-height: 460px; }
.recipe-side { background: #f8f9fa; border-right: 1px solid #e9ecef; padding: 14px; }
.recipe-side h3 { text-transform: uppercase; letter-spacing: 0.6px; }
.recipe-side .btn-new { width: 100%; padding: 8px; }
.recipe-list { margin-top: 8px; max-height: 640px; overflow: auto; }
.recipe-card { background: white; border: 2px solid #e9ecef; border-radius: 10px; padding: 10px 12px; margin: 8px 0; cursor: pointer; transition: all 0.25s; }
.recipe-card:hover { border-color: #a3b1f7; }
.recipe-card.active { border-color: #667eea; box-shadow: 0 4px 15px rgba(102,126,234,0.25); }
.recipe-card .rc-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; }
.recipe-card .btn-row { margin-top: 8px; gap: 6px; }
.recipe-main { padding: 18px; }
.empty-state { text-align: center; color: #6c757d; padding: 60px 20px; }
.empty-state .icon { font-size: 3rem; margin-bottom: 10px; }
.empty-state h2 { color: #6c757d; }

/* Statistik */
.bars .bar { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 100px; gap: 10px; align-items: center; font-size: 0.9rem; margin: 7px 0; }
.bars .track { background: #eef0f5; border-radius: 6px; height: 14px; overflow: hidden; }
.bars .fill { background: linear-gradient(90deg, #667eea, #764ba2); height: 100%; }
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 18px; font-size: 0.88rem; color: #6c757d; margin-top: 8px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.sub-tabs { display: flex; background: #f8f9fa; border-radius: 10px 10px 0 0; border-bottom: 2px solid #dee2e6; margin-bottom: 14px; overflow-x: auto; overflow-y: hidden; }
.sub-tabs button { flex: 1; padding: 9px 14px; border: 0; background: none; font: inherit; font-size: 0.92rem; color: #2c3e50; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.sub-tabs button:hover { background: #eef1f5; }
.sub-tabs button.active { background: white; color: #0056b3; font-weight: 600; border-bottom-color: #007bff; }
.warn-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; }
.warn-box h3 { color: #856404; }
.data-table tr.row-bad > td { background: #fdecee; }
.data-table tr.row-warn > td { background: #fff8e1; }
.data-table tr.row-info > td { background: #eaf6f9; }

/* BackOffice */
.lock { max-width: 460px; margin: 30px auto; text-align: center; }
.lock .icon { font-size: 3rem; margin-bottom: 8px; }
.lock form { text-align: left; }
.bo-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; padding: 8px 10px; background: #f8f9fa; border-radius: 10px; }
.bo-tabs .btn:not(.current) { background: white; color: #2c3e50; border: 2px solid #dee2e6; }

/* Meldungen und Status */
#toasts { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 1000; max-width: min(420px, calc(100vw - 40px)); }
.toast { padding: 14px 18px; border-radius: 8px; color: white; box-shadow: 0 8px 25px rgba(0,0,0,0.25); background: linear-gradient(135deg, #0e7490, #0f766e); animation: slideIn 0.3s ease; white-space: pre-line; }
.toast.ok { background: linear-gradient(135deg, #1e7e34, #146c43); }
.toast.bad { background: linear-gradient(135deg, #c92a2a, #a61e1e); }
.toast.warn { background: linear-gradient(135deg, #ffc107, #fd7e14); color: #212529; }
@keyframes slideIn { from { transform: translateX(110%); } to { transform: none; } }
.connection-status { position: fixed; bottom: 20px; right: 20px; padding: 7px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: bold; z-index: 999; background: #1e7e34; color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.connection-status.disconnected { background: #c92a2a; }
.connection-status.connecting { background: #ffc107; color: #212529; }
/* margin: auto zentriert (das globale „* { margin: 0 }“ würde Dialoge sonst nach oben links schieben) */
dialog { margin: auto; border: 0; border-radius: 14px; padding: 0; width: min(680px, calc(100vw - 32px)); box-shadow: 0 25px 60px rgba(0,0,0,0.35); }
dialog::backdrop { background: rgba(44,62,80,0.55); }
dialog .dh { padding: 16px 22px; background: linear-gradient(135deg, #2c3e50, #34495e); color: white; font-weight: 700; font-size: 1.1rem; }
dialog .dh.danger { background: linear-gradient(135deg, #dc3545, #a71d2a); font-size: 1.4rem; }
.danger-box { background: #f8d7da; border: 2px solid #dc3545; border-left-width: 6px; color: #721c24; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.93rem; }
.danger-box h3 { color: #a71d2a; margin-bottom: 4px; }
dialog .db { padding: 18px 22px; max-height: 70vh; overflow: auto; }
dialog .df { padding: 14px 22px; border-top: 1px solid #e9ecef; display: flex; justify-content: flex-end; gap: 10px; background: #f8f9fa; }
dialog .form-group { margin-bottom: 12px; }
/* Rezeptur-Formular (wie in der alten Rezeptur-Verwaltung) */
.panel-title { font-size: 1.25rem; font-weight: 700; color: #2c3e50; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid #e9ecef; }
.comp-table-wrapper { border: 2px solid #e9ecef; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th { background: linear-gradient(135deg, #f8f9fa, #e9ecef); padding: 9px 10px; text-align: left; font-size: 0.78rem; font-weight: 700; color: #495057; text-transform: uppercase; letter-spacing: 0.5px; }
.comp-table td { padding: 6px 10px; border-top: 1px solid #f0f0f0; vertical-align: middle; }
.comp-table tr:hover td { background: #fafbff; }
.comp-table select, .comp-table input { padding: 6px 9px; border-width: 1.5px; font-size: 0.88rem; }
.btn-add-comp { width: 100%; padding: 8px 16px; background: #e8f4fd; border: 2px dashed #9fd8e0; color: #0e7490; border-radius: 8px; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; transition: all 0.2s; }
.btn-add-comp:hover { background: #bee5eb; }
.btn-remove-row { padding: 4px 9px; background: #fee; border: 1.5px solid #f5c6cb; color: #b02525; border-radius: 5px; cursor: pointer; transition: all 0.2s; }
.btn-remove-row:hover { background: #dc3545; color: white; }
.btn-violet { background: linear-gradient(135deg, #4c51bf, #6b46a1); }
/* Jeder Knopf, der direkt Verbrauch bucht, ist orange – damit man ihn überall erkennt */
.btn-usage { background: linear-gradient(135deg, #cc4a0c, #b23c0a); font-weight: 600; }

.print-only { display: none; }
@media (max-width: 900px) {
  body { padding: 8px; }
  .header { padding: 18px 12px; }
  .header h1 { font-size: 1.6rem; }
  .main-content { padding: 15px; }
  .alerts-grid, .two-col, .recipe-layout { grid-template-columns: 1fr; }
  .recipe-side { border-right: 0; border-bottom: 1px solid #e9ecef; }
  .bars .bar { grid-template-columns: 1fr 1fr 80px; }
}
@media print {
  body { background: white; padding: 0; }
  .container { box-shadow: none; border-radius: 0; }
  .header, .dashboard-tabs, #toasts, .connection-status, .no-print { display: none !important; }
  .main-content { padding: 0; }
  section.view { display: none !important; }
  section.view.printing { display: block !important; }
  .table-section { box-shadow: none; padding: 0; }
  .table-wrap { box-shadow: none; overflow: visible; }
  .data-table th { background: #e9ecef !important; color: #000; }
  .print-only { display: block; }
}

/* ===================== Design-Variante (überschreibt nur das Aussehen) ===================== */
body { background: var(--d-body); color: var(--d-text); font-family: var(--d-font); }
.container { background: var(--d-container); border-radius: var(--d-radius); box-shadow: var(--d-container-shadow); }
.header { background: var(--d-header); color: var(--d-header-text); }
.header h1, .page-head h1 { font-family: var(--d-head-font); text-shadow: none; color: var(--d-header-title); letter-spacing: var(--d-head-spacing, 0); }
.header p { color: var(--d-header-sub); opacity: 1; }
.nav-btn { border: 1px solid var(--d-nav-border); background: var(--d-nav-bg); color: var(--d-nav-text); border-radius: var(--d-btn-radius); }
.nav-btn:hover { background: var(--d-nav-hover); }
.nav-btn.active { background: var(--d-nav-active-bg); color: var(--d-nav-active-text); border-color: var(--d-nav-active-bg); box-shadow: none; }
.dashboard-tabs { background: var(--d-subnav); border-top-color: transparent; }
h2, h3, h4 { color: var(--d-title); font-family: var(--d-head-font); }
.btn { border-radius: var(--d-btn-radius); background: linear-gradient(135deg, var(--d-primary), var(--d-primary-2)); }
.btn-info { background: linear-gradient(135deg, var(--d-info), var(--d-info-2)); }
.btn-purple, .btn-violet { background: linear-gradient(135deg, var(--d-accent), var(--d-accent-2)); }
.btn-secondary { background: var(--d-secondary); }
.btn-success { background: linear-gradient(135deg, var(--d-ok), var(--d-ok-2)); }
.btn-excel { background: linear-gradient(135deg, #217346, #185c37); }
.btn-usage { background: linear-gradient(135deg, #cc4a0c, #b23c0a); color: #fff; }
.btn-warning { background: linear-gradient(135deg, #fcc419, #f59f00); color: #212529; }
.btn-danger { background: linear-gradient(135deg, #c92a2a, #a61e1e); }
.btn-soft { background: var(--d-accent-soft); color: var(--d-accent-text); }
/* helle Nebenknöpfe: eigener Hintergrund, sonst greift oben der dunkle .btn-Verlauf (Text wäre kaum lesbar) */
.btn-soft-green { background: #d3f9d8; color: #1b5e20; }
.btn-soft-red { background: #ffe3e3; color: #a51111; }
.btn-soft-green:hover:not(:disabled), .btn-soft-red:hover:not(:disabled), .btn-soft:hover:not(:disabled) { filter: brightness(0.96); }
input, select, textarea { border-color: var(--d-input-border); border-radius: var(--d-input-radius); background-color: var(--d-input-bg); color: var(--d-text); }
input:focus, select:focus, textarea:focus { border-color: var(--d-primary); box-shadow: 0 0 0 3px var(--d-focus); }
input[readonly], input:disabled { background-color: var(--d-readonly); }
label { color: var(--d-label); }
.form-section, .table-section, .alerts-section, .overview-header { background: var(--d-card); border-radius: var(--d-card-radius); box-shadow: var(--d-card-shadow); border: var(--d-card-border); }
.stat-card { background: var(--d-card); border-radius: var(--d-card-radius); box-shadow: var(--d-card-shadow); border: var(--d-card-border); border-left: 4px solid var(--d-primary); }
.stat-label { color: var(--d-muted); }
.hint, small, .desc { color: var(--d-muted); }
.table-wrap { border-radius: var(--d-card-radius); box-shadow: var(--d-table-shadow); }
.data-table th { background: var(--d-th); color: var(--d-th-text); }
.data-table tbody tr:hover { background: var(--d-row-hover); }
.recipe-box { background: var(--d-accent-tint); border-color: var(--d-accent-border); border-radius: var(--d-card-radius); }
.recipe-box h3, .recipe-box label { color: var(--d-accent-text); }
.recipe-box input, .recipe-box select { border-color: var(--d-accent-border); }
.blue-box, .lot-selector, .scale-bar { background: var(--d-info-tint); border-color: var(--d-info-border); border-radius: var(--d-card-radius); }
.blue-box h3 { color: var(--d-info-text); }
.excel-import-section, .green-box { border-radius: var(--d-card-radius); }
.lot-item { border-radius: var(--d-input-radius); }
.lot-item:hover { border-color: var(--d-primary); }
.lot-item.selected { background: linear-gradient(135deg, var(--d-primary), var(--d-primary-2)); border-color: var(--d-primary); }
.lot-item.selected small { color: #fff; }
.sub-tabs { background: var(--d-subtabs); border-bottom-color: var(--d-line); }
.sub-tabs button { color: var(--d-text); }
.sub-tabs button.active { color: var(--d-primary); border-bottom-color: var(--d-primary); background: var(--d-card); }
.filter-info, .scale-factor-badge { background: linear-gradient(135deg, var(--d-primary), var(--d-primary-2)); }
.recipe-layout { border-radius: var(--d-card-radius); box-shadow: var(--d-card-shadow); border: var(--d-card-border); background: var(--d-card); }
.recipe-side { background: var(--d-side-tint); }
.recipe-card { border-radius: var(--d-card-radius); }
.recipe-card:hover { border-color: var(--d-accent-border); }
.recipe-card.active { border-color: var(--d-primary); background: var(--d-row-hover); box-shadow: 0 4px 14px var(--d-focus); }
.bars .fill { background: linear-gradient(90deg, var(--d-primary), var(--d-accent)); }
.kommission-item { border-left-color: var(--d-accent); }
.kommission-item .k-qty, .k-total { color: var(--d-accent-text); }
.bo-tabs, .custom-toggle { background: var(--d-subtabs); }
.bo-tabs .btn.current { background: linear-gradient(135deg, var(--d-primary), var(--d-primary-2)); }
.toggle-switch input:checked + .slider { background: var(--d-ok); }
.toast { background: linear-gradient(135deg, var(--d-info), var(--d-info-2)); }
dialog .dh { background: var(--d-dialog-head); color: var(--d-dialog-head-text); }
dialog .dh.danger { background: linear-gradient(135deg, #e03131, #a61e1e); color: #fff; }
.empty-state h2 { color: var(--d-muted); }
.panel-title { color: var(--d-title); border-bottom-color: var(--d-line); font-family: var(--d-head-font); }
.data-table .r, .stat-number, .lot-quantity, .k-qty { font-family: var(--d-num-font); }

:root {
  --d-font: 'Segoe UI', system-ui, sans-serif; --d-head-font: 'Segoe UI Semibold', 'Segoe UI', sans-serif; --d-num-font: 'Cascadia Mono', Consolas, monospace;
  --d-body: #f5f8fc; --d-text: #1e293b; --d-muted: #4a5a70; --d-label: #334155; --d-title: #0b1f3a;
  --d-container: #f5f8fc; --d-radius: 0; --d-container-shadow: none;
  --d-header: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 400' fill='none' stroke='%237dd3fc' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E %3Cg stroke-opacity='.32'%3E%3Cpath d='M98 20h44M103 20v62L62 168a9 9 0 0 0 8 13h100a9 9 0 0 0 8-13L137 82V20'/%3E%3Cpath d='M78 140h84' stroke-dasharray='4 5'/%3E%3C/g%3E %3Cg stroke-opacity='.28'%3E%3Cpath d='M30 240l20-12 20 12v24l-20 12-20-12z'/%3E%3Cpath d='M70 264l24 11'/%3E%3Cpath d='M94 275l20-12 20 12v24l-20 12-20-12z'/%3E%3Cpath d='M134 299l24 11'/%3E%3Cpath d='M158 310l20-12 20 12v24l-20 12-20-12z'/%3E%3C/g%3E %3Ctext x='120' y='382' text-anchor='middle' fill='%237dd3fc' fill-opacity='.5' stroke='none' font-family='Consolas,monospace' font-size='13'%3ECa%C2%B2%E2%81%BA %2B 2 Alg%E2%81%BB %E2%86%92 Ca(Alg)%E2%82%82%3C/text%3E %3C/svg%3E") center bottom 18px / 230px auto no-repeat, linear-gradient(180deg, #0b1426, #16325c);
  --d-header-text: #e0f2fe; --d-header-title: #0b1f3a; --d-header-sub: #93c5fd;
  --d-nav-border: rgba(125, 211, 252, 0.35); --d-nav-bg: rgba(125, 211, 252, 0.08); --d-nav-text: #e0f2fe; --d-nav-hover: rgba(125, 211, 252, 0.18); --d-nav-active-bg: #38bdf8; --d-nav-active-text: #0b1426;
  --d-subnav: #102445; --d-btn-radius: 7px;
  --d-primary: #0369a1; --d-primary-2: #075985; --d-info: #0e7490; --d-info-2: #155e75; --d-accent: #7c3aed; --d-accent-2: #6d28d9;
  --d-secondary: #475569; --d-ok: #15803d; --d-ok-2: #166534;
  --d-accent-soft: #f3e8ff; --d-accent-text: #5b21b6; --d-accent-tint: #f8f5ff; --d-accent-border: #ddd6fe;
  --d-input-border: #c7d3e3; --d-input-radius: 7px; --d-input-bg: #ffffff; --d-readonly: #eef2f7; --d-focus: rgba(3, 105, 161, 0.18);
  --d-card: #ffffff; --d-card-radius: 12px; --d-card-shadow: 0 2px 10px rgba(11, 20, 38, 0.06); --d-card-border: 1px solid #dbe4f0;
  --d-table-shadow: 0 0 0 1px #dbe4f0; --d-th: #0b1f3a; --d-th-text: #bae6fd; --d-row-hover: #f0f9ff;
  --d-info-tint: #f0f9ff; --d-info-border: #bae6fd; --d-info-text: #075985;
  --d-subtabs: #e8eef7; --d-side-tint: #eef3f9; --d-line: #dbe4f0; --d-dialog-head: linear-gradient(135deg, #0b1426, #16325c); --d-dialog-head-text: #e0f2fe;
  --d-chem-bg: #0b1f3a; --d-chem-border: #1e3a5f; --d-chem-text: #7dd3fc; --d-chem-meta: #e0f2fe; --d-chem-inline: #0369a1;
}
.header { border-right: 1px solid rgba(125, 211, 252, 0.2); }
.brand { padding: 6px 6px 18px; border-bottom: 1px solid rgba(125, 211, 252, 0.22); }
.brand .b-title { font-size: 1.4rem; font-weight: 600; color: #e0f2fe; letter-spacing: 0.4px; }
.brand .b-sub { font-size: 0.78rem; color: #93c5fd; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.brand .b-formula { margin-top: 12px; font: 0.95rem 'Cambria Math', Cambria, serif; color: #7dd3fc; }
.page-head h1 { color: #0b1f3a; }
.stat-number { letter-spacing: -0.5px; }

.chem-card { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 10px 14px; border-radius: var(--d-card-radius);
  background: var(--d-chem-bg); border: 1px solid var(--d-chem-border); }
.chem-formula { font-family: 'Cambria Math', Cambria, 'Times New Roman', serif; font-size: 1.55rem; color: var(--d-chem-text); white-space: nowrap; line-height: 1.2; }
.chem-formula sub { font-size: 0.62em; }
.chem-formula.chem-mix { font-size: 1.1rem; font-style: italic; opacity: 0.8; }
.chem-meta { font-size: 0.85rem; color: var(--d-chem-meta, var(--d-text)); line-height: 1.45; }
.chem-kav { margin-top: 4px; color: var(--d-chem-meta, var(--d-text)); }
.chem-kav span { font-weight: 700; color: var(--d-chem-text); }
.chem-inline { font-family: 'Cambria Math', Cambria, serif; font-size: 0.85rem; color: var(--d-chem-inline, var(--d-chem-text)); }
.chem-inline sub { font-size: 0.65em; }

body { padding: 0; }
.container { max-width: none; border-radius: 0; box-shadow: none; overflow: clip; display: grid;
  grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: 1fr; grid-template-areas: "side main"; min-height: 100vh; }
.header { grid-area: side; position: sticky; top: 0; height: 100vh; overflow-y: auto; text-align: left; padding: 22px 16px; }
.dashboard-tabs { grid-area: top; justify-content: flex-start; padding: 10px 26px; }
main.main-content { grid-area: main; padding: 22px 28px 40px; }
.nav-buttons { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px; margin-top: 22px; }
.nav-btn { text-align: left; padding: 10px 14px; font-size: 0.95rem; }
.page-head { margin-bottom: 18px; }
.page-head h1 { font-size: 1.75rem; margin-bottom: 4px; }
.page-head p { color: var(--d-muted); max-width: 980px; line-height: 1.45; }
@media (max-width: 900px) {
  .container { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "side" "main"; }
  .header { position: static; height: auto; }
  .nav-buttons { flex-direction: row; flex-wrap: wrap; }
}
@media print { .container { display: block; } .page-head { display: none; } }

/* ===================== 6.1: Kaviar-Rezepturen und KI-Rezepturberater ===================== */
.kav-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 18px; align-items: start; }
.kav-main { display: grid; gap: 16px; min-width: 0; }
.kav-box { margin: 0; }
.kav-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.kav-head h2 { margin: 0 auto 0 0; font-size: 1.15rem; }
.kav-cats, .kav-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.kav-chip { border: 1px solid var(--d-line); background: var(--d-card); color: var(--d-text); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 0.84rem; cursor: pointer; }
.kav-chip:hover { border-color: var(--d-primary); }
.kav-chip.active { background: var(--d-th); color: #e0f2fe; border-color: var(--d-th); }
.kav-q { font-size: 0.78rem; padding: 3px 10px; background: var(--d-info-tint); color: var(--d-info-text); border-color: var(--d-info-border); text-align: left; }
.kav-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.kav-card { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--d-text); cursor: pointer;
  background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--d-card-radius); padding: 10px 12px; }
.kav-card:hover { border-color: var(--d-primary); }
.kav-card.active { border-color: var(--d-primary); background: var(--d-row-hover); box-shadow: 0 0 0 2px var(--d-focus); }
.kav-card b { font-size: 0.95rem; color: var(--d-title); line-height: 1.3; }
.kav-sub { font-size: 0.78rem; color: var(--d-label); }
.kav-kurz { font-size: 0.8rem; color: var(--d-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kav-lager { font-size: 0.78rem; font-weight: 600; margin-top: auto; }
.kav-lager.ok { color: #15803d; }
.kav-lager.warn { color: #b45309; }
.kav-badge { align-self: flex-start; display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--d-info-tint); color: var(--d-info-text); border: 1px solid var(--d-info-border); }
.kav-badge.Gelierbad { background: #f3e8ff; color: #5b21b6; border-color: #ddd6fe; }
.kav-badge.Aufguss { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.kav-badge.Alternative { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.kav-detail-head h3 { margin: 8px 0 4px; font-size: 1.3rem; }
.kav-detail-head .desc { margin: 0 0 6px; line-height: 1.5; }
.kav-scale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid; }
.kav-scale input { width: 150px; }
.kav-sec { margin-top: 18px; }
.kav-sec h4 { margin: 0 0 8px; font-size: 1rem; }
#view-kaviar .data-table td small { display: block; }
.kav-na { color: var(--d-muted); font-size: 0.8rem; font-style: italic; }
.kav-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.kav-kpi { background: var(--d-chem-bg); border: 1px solid var(--d-chem-border); border-radius: var(--d-card-radius); padding: 10px 12px; color: var(--d-chem-meta); }
.kav-kpi b { display: block; font-family: var(--d-num-font); font-size: 1.15rem; color: var(--d-chem-text); }
.kav-kpi span { font-size: 0.78rem; line-height: 1.35; }
.kav-steps { margin: 0; padding-left: 22px; line-height: 1.6; }
.kav-formeln { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.kav-formel { background: var(--d-chem-bg); border: 1px solid var(--d-chem-border); border-radius: var(--d-card-radius); padding: 12px 14px; color: var(--d-chem-meta); }
.kav-formel .t { font-weight: 700; font-size: 0.85rem; color: var(--d-chem-text); }
.kav-formel .f { font-family: 'Cambria Math', Cambria, 'Times New Roman', serif; font-size: 1.12rem; color: #ffffff; margin: 6px 0; line-height: 1.4; }
.kav-formel .e { font-size: 0.82rem; line-height: 1.45; }
.kav-hinweis { margin-top: 18px; padding: 10px 14px; border-radius: var(--d-card-radius); background: #fff8e1; border: 1px solid #ffe08a; color: #5c4400; font-size: 0.88rem; line-height: 1.45; }
.kav-chat { position: sticky; top: 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 32px); }
.kav-chat select { width: 100%; }
.kav-chat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kav-chat-head h2 { margin: 0 auto 0 0; font-size: 1.15rem; }
.kav-model { margin-right: auto; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--d-th); color: #bae6fd; }
.kav-msgs { flex: 1 1 auto; min-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: var(--d-side-tint); border: 1px solid var(--d-line); border-radius: var(--d-card-radius); }
.kav-msg { display: flex; flex-direction: column; max-width: 94%; }
.kav-msg.nutzer { align-self: flex-end; align-items: flex-end; }
.kav-msg.ki, .kav-msg.fehler { align-self: flex-start; }
.kav-msg small { font-size: 0.72rem; margin-top: 2px; }
.kav-bubble { padding: 8px 12px; border-radius: 12px; font-size: 0.87rem; line-height: 1.5; overflow-wrap: anywhere; }
.kav-msg.nutzer .kav-bubble { background: var(--d-primary); color: #ffffff; border-bottom-right-radius: 4px; }
.kav-msg.ki .kav-bubble { background: var(--d-card); color: var(--d-text); border: 1px solid var(--d-line); border-bottom-left-radius: 4px; }
.kav-msg.fehler .kav-bubble { background: #fdecec; color: #8a1c1c; border: 1px solid #f5c2c2; }
.kav-bubble p { margin: 0 0 6px; }
.kav-bubble h4, .kav-bubble h5, .kav-bubble h6 { margin: 10px 0 4px; font-size: 0.95rem; }
.kav-bubble ul, .kav-bubble ol { margin: 4px 0 8px; padding-left: 20px; }
.kav-bubble pre { white-space: pre-wrap; background: var(--d-readonly); padding: 6px 8px; border-radius: 6px; font-size: 0.8rem; }
.kav-bubble code { background: var(--d-readonly); padding: 0 4px; border-radius: 4px; font-size: 0.85em; }
.kav-bubble .table-wrap { margin: 6px 0; overflow-x: auto; }
.kav-bubble .data-table { font-size: 0.8rem; }
.kav-bubble .data-table th, .kav-bubble .data-table td { padding: 5px 7px; }
.kav-bubble .btn-row { margin-top: 8px; }
.kav-typing { display: flex; gap: 4px; padding: 12px 14px; }
.kav-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--d-primary); animation: kavDot 1.2s infinite ease-in-out; }
.kav-typing span:nth-child(2) { animation-delay: 0.15s; }
.kav-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kavDot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
#kavFrage { width: 100%; min-height: 64px; resize: vertical; font: inherit; padding: 8px 10px; }
.kav-send { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.kav-send .hint { margin: 0 auto 0 0; font-size: 0.78rem; }
.kav-hist summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--d-label); }
.kav-hist > div { max-height: 220px; overflow-y: auto; margin-top: 6px; }
.kav-hist-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--d-line); font-size: 0.82rem; }
.kav-hist-item span { flex: 1; min-width: 0; }
.kav-hist-item small { display: block; }
.kav-note { margin: 0; font-size: 0.75rem; line-height: 1.4; }
/* eingeklappter Chat: schmale Leiste rechts, Rezepturen bekommen die volle Breite */
.kav-chat-open { display: none; }
.kav-layout.kav-zu { grid-template-columns: minmax(0, 1fr) 48px; }
.kav-zu .kav-chat { padding: 0; background: none; border: 0; box-shadow: none; }
.kav-zu .kav-chat > :not(.kav-chat-open) { display: none !important; }
.kav-zu .kav-chat-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 48px; min-height: 280px; padding: 16px 0;
  writing-mode: vertical-rl; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  background: linear-gradient(180deg, #0b1426, #16325c); color: #e0f2fe; border: 1px solid rgba(125, 211, 252, 0.35); border-radius: var(--d-card-radius); }
.kav-zu .kav-chat-open:hover { border-color: #7dd3fc; }
/* Verbindungsanzeige als Punkt unten im Menü */
.header .connection-status { position: static; display: flex; align-items: center; gap: 8px; margin: 18px 8px 0; padding: 0;
  background: none; box-shadow: none; border-radius: 0; color: #bbf7d0; font-size: 0.82rem; font-weight: 600; z-index: auto; }
.header .connection-status.connecting { background: none; color: #fde68a; }
.header .connection-status.disconnected { background: none; color: #fecaca; }
.conn-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.connecting .conn-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.disconnected .conn-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
.brand .b-title { font-size: 1.22rem; line-height: 1.3; }
@media (max-width: 1250px) {
  .kav-layout, .kav-layout.kav-zu { grid-template-columns: 1fr; }
  .kav-chat { position: static; max-height: none; }
  .kav-msgs { max-height: 520px; }
  .kav-zu .kav-chat-open { writing-mode: horizontal-tb; width: 100%; min-height: 0; padding: 10px 14px; }
}
@media print { #view-kaviar .kav-chat, #view-kaviar .kav-scale .btn-row, .kav-head .btn { display: none !important; } }

/* ---------- 6.2: Seitenleiste wie „Signal“ ---------- */
@media (min-width: 901px) { .container { grid-template-columns: 218px minmax(0, 1fr); } }
.header { display: flex; flex-direction: column; background: #202c37; border-right: 0; padding: 27px 12px 20px; }
svg.ui-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.brand { padding: 0 9px 24px; margin: 0; border: 0; }
.brand .b-title { display: flex; align-items: center; gap: 9px; font: 700 20px/1.3 'Bahnschrift', 'Segoe UI', sans-serif; letter-spacing: -0.6px; color: #ffffff; }
.brand .brand-symbol { display: grid; place-items: center; width: 29px; height: 32px; color: #f1cb4f; }
.brand .brand-symbol .ui-icon { width: 27px; height: 27px; }
.brand .b-sub { margin: 5px 0 0 39px; font-size: 9px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #9cafbb; }
.nav-label { padding: 12px 14px; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #9cafbb; }
.nav-buttons { margin: 0; gap: 6px; }
.header .nav-btn { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 12px; border: 1px solid transparent; border-radius: 3px;
  background: transparent; color: #b8c8d3; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; box-shadow: none; transition: background .18s, color .18s; }
.header .nav-btn:hover { background: #2d3b47; }
.header .nav-btn.active { background: #f1cb4f; color: #202a31; border-color: transparent; font-weight: 650; box-shadow: none; }
.header .nav-btn .nav-index { margin-left: auto; font: 9px Consolas, monospace; color: #8fa3b1; }
.header .nav-btn.active .nav-index { color: #4b4426; }
#tabs .nav-btn:last-child { margin-top: 21px; }
.header .connection-status { margin: auto 10px 0; padding-top: 30px; gap: 7px; font-size: 10px; font-weight: 500; color: #a5dab5; }
.header .connection-status.connecting { color: #e5ca83; }
.header .connection-status.disconnected { color: #efaaaa; }
.conn-dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.connecting .conn-dot { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.disconnected .conn-dot { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
@media (max-width: 900px) {
  .header .connection-status { margin-top: 14px; padding-top: 0; }
  #tabs .nav-btn:last-child { margin-top: 0; }
}

/* ---------- 6.3: ohne Emoji ---------- */
.empty-state .icon:empty { display: none; }
.progress-item .pi { flex: none; min-width: 96px; font-weight: 600; color: #334155; }

.chem-hint { font-size: 0.8rem; }

/* ---------- 6.4: Chatfenster Vollbild / Teilansicht / eingeklappt ---------- */
.kav-modi { display: flex; flex-wrap: wrap; gap: 4px; }
.kav-modi .kav-chip { font-size: 0.8rem; padding: 4px 10px; font-weight: 600; }
.kav-layout.kav-voll { grid-template-columns: minmax(0, 1fr); }
.kav-voll .kav-main { display: none; }
.kav-voll .kav-chat { height: calc(100vh - 32px); }
.kav-voll .kav-chat:has(#kavMsgs[style*="none"]) { height: auto; }   /* leerer Chat: keine leere Fläche */
.kav-voll .kav-msgs { min-height: 0; }
.kav-voll .kav-msg { max-width: min(94%, 1100px); }
@media (max-width: 1250px) {
  .kav-voll .kav-chat { height: auto; }
  .kav-voll .kav-msgs { min-height: 320px; max-height: 70vh; }
}



/* 6.5: Anmeldung (Header Auth) */
.kvh-login{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(180deg,#0b1426,#16325c)}
.kvh-login[hidden]{display:none}
.kvh-box{width:min(400px,100%);background:var(--d-card,#fff);color:var(--d-text);border-radius:14px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:grid;gap:10px;font-family:var(--d-font)}
.kvh-logo{width:38px;height:38px;padding:8px;border-radius:10px;background:var(--d-primary);color:#fff}
.kvh-box h2{margin:0;font-size:1.25rem;color:var(--d-title)}
.kvh-box p{margin:0 0 4px;color:var(--d-muted);font-size:.9rem;line-height:1.4}
.kvh-box label{font-weight:600;font-size:.85rem;color:var(--d-label)}
.kvh-box input[type=password]{padding:10px 12px;border:1px solid var(--d-input-border);border-radius:var(--d-input-radius,7px);font-size:1rem;color:var(--d-text);background:var(--d-input-bg,#fff)}
.kvh-box input[type=password]:focus{outline:2px solid var(--d-primary);outline-offset:1px}
.kvh-box .kvh-merken{font-weight:400;display:flex;gap:8px;align-items:center;justify-content:flex-start;text-align:left}
.kvh-box .kvh-merken input{width:auto;min-width:0;height:auto;margin:0;flex:none}
.kvh-box .kvh-btn{width:100%;height:42px;margin-top:4px;font-size:.95rem}
.kvh-msg{min-height:1.2em;font-size:.9rem;color:#b91c1c}
.kvh-msg.ok{color:var(--d-muted)}
body.kvh-gesperrt>:not(#kvhLogin):not(script):not(style){visibility:hidden}
/* Abmelden in derselben Zeile wie „Verbunden“ – das Menü bleibt so hoch (und ohne Scrollleiste so breit) wie in 6.4 */
.kvh-fuss{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px}
.kvh-fuss>.connection-status{margin:0!important;padding:0!important}
.kvh-abmelden{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;background:transparent;border:1px solid var(--d-nav-border,rgba(125,211,252,.35));color:var(--d-nav-text,#e0f2fe);border-radius:var(--d-btn-radius,7px);font:inherit;font-size:.76rem;font-weight:600;line-height:1.3;cursor:pointer;white-space:nowrap}
.kvh-abmelden:hover{background:var(--d-nav-hover,rgba(125,211,252,.16))}
.kvh-abmelden:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
.kvh-abmelden svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Schloss am Menüpunkt Datenbank: zu = Passwort nötig, offen = angemeldet */
.kvh-schloss{width:14px;height:14px;flex:none;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.nav-btn .kvh-schloss+.nav-index{margin-left:8px}


/* All density changes are confined to the content area; navigation stays original. */
main.main-content{padding:16px 20px 28px}
.main-content .page-head{margin-bottom:12px}
.main-content .page-head h1{font-size:24px;margin-bottom:3px;line-height:1.2}
.main-content .page-head p{font-size:13px;line-height:1.4}
.main-content h2{font-size:17px;margin-bottom:9px}
.main-content h3{font-size:15px;margin-bottom:7px}
.main-content .form-section,.main-content .table-section,.main-content .alerts-section{padding:12px 14px;margin-bottom:12px}
.main-content .section-head{margin-bottom:9px;gap:8px}
.main-content .section-head h2{margin:0}
.main-content .form-group{margin-bottom:8px;min-width:0}
.main-content .form-row{gap:10px}
.main-content label{font-size:12.5px;margin-bottom:3px}
.main-content input,.main-content select,.main-content textarea{padding:5px 8px;font-size:13px;border-width:1px;min-width:0}
.main-content input:not([type=checkbox]):not([type=radio]),.main-content select{min-height:33px}
.main-content textarea{min-height:52px}
.main-content input[type=checkbox],.main-content input[type=radio]{min-height:0}
.main-content .btn{padding:7px 12px;font-size:12.5px;line-height:1.35;min-height:32px}
.main-content .btn-sm{padding:5px 9px;font-size:12px;min-height:28px}
.main-content .btn-row{gap:7px;margin-top:9px}
.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:10px 12px;margin-bottom:10px}
.main-content .custom-toggle{padding:8px 10px;margin-bottom:9px;gap:9px}
.main-content .custom-toggle .toggle-text{font-size:13px}
.main-content .custom-toggle input{min-height:0}
.main-content .desc{font-size:12.5px;line-height:1.4;margin-bottom:8px}
.main-content .hint{font-size:12px;line-height:1.4}
.main-content .inline-fields{gap:9px}
.main-content .inline-fields>.fit{gap:6px}
.main-content .inline-fields>.fit .btn{white-space:normal}
.main-content .stats-grid{gap:9px;margin:4px 0 12px}
.main-content .stat-card{padding:10px 12px}
.main-content .stat-number{font-size:23px;margin-bottom:2px}
.main-content .stat-label{font-size:11px;line-height:1.35}
.main-content .data-table{font-size:12.5px}
.main-content .data-table th{font-size:11px}
.main-content .data-table th,.main-content .data-table td{padding:6px 9px}
.main-content .overview-header{padding:10px 12px;margin-bottom:10px}
.main-content .two-col{gap:12px}
.main-content .recipe-side{padding:12px}
.main-content .recipe-layout{gap:12px}
.main-content .kav-layout{gap:12px}
.main-content .kav-main{gap:12px}
.main-content .kav-box{margin:0;min-width:0}
.main-content .kav-head{gap:7px;margin-bottom:9px}
.main-content .kav-head h2{margin:0 auto 0 0}
.main-content .kav-cards{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px}
.main-content .kav-card{padding:9px 10px;gap:4px}
.main-content .kav-card b{font-size:14px}
.main-content .kav-sub,.main-content .kav-kurz,.main-content .kav-lager{font-size:12px}
.main-content .kav-chip{padding:4px 9px;font-size:12px}
.main-content .kav-badge{font-size:11px}
.main-content .kav-detail-head h3{font-size:21px;margin:6px 0}
.main-content .kav-scale{gap:9px;margin:10px 0 4px}
.main-content .kav-sec{margin-top:13px}
.main-content .kav-sec h4{font-size:14px;margin-bottom:7px}
.main-content .kav-kpis{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:8px;margin-top:10px}
.main-content .kav-kpi{padding:8px 10px}
.main-content .kav-formeln{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:8px}
.main-content .kav-formel{padding:10px 12px}
.main-content .kav-chat{gap:8px;margin:0}
.main-content .kav-chat-head h2{font-size:17px;margin:0 auto 0 0}
.main-content .kav-msgs{min-height:190px;padding:8px}
.main-content .kav-note{font-size:11px}
.main-content #kavFrage{font-size:13px;min-height:60px}
.main-content .kav-layout.kav-zu .kav-chat{padding:0}
@media(max-width:700px){main.main-content{padding:14px 12px 24px}.main-content .form-row,.main-content .two-col{grid-template-columns:1fr}.main-content input:not([type=checkbox]):not([type=radio]),.main-content select,.main-content textarea,.main-content #kavFrage{font-size:16px;min-height:38px}.main-content .btn{white-space:normal;min-height:36px}.main-content .kav-cards{grid-template-columns:1fr}.main-content .form-section,.main-content .table-section{padding:11px}.main-content .kav-scale input{max-width:100%}.main-content .kav-scale .btn-row{margin-left:0!important}.main-content .page-head h1{font-size:22px}}

/* 6.77: Labor-Rezepturen im gleichen Design wie alle anderen Bereiche; hier nur noch der Aufbau. */
#view-kaviar .kav-cards{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
#view-kaviar #kavDetail{padding:0 16px 16px;overflow:hidden}
#view-kaviar .kav-detail-head{background:var(--d-th);color:var(--d-th-text);margin:0 -16px;padding:14px 18px;border-bottom:3px solid #f1cb4f}
#view-kaviar .kav-detail-head h3{color:#fff;font-size:21px}
#view-kaviar .kav-detail-head .desc,#view-kaviar .kav-detail-head small{color:var(--d-th-text)}
#view-kaviar .kav-sec h4{border-bottom:1px solid var(--d-line);padding-bottom:6px}
@media(min-width:1251px){#view-kaviar .kav-layout:not(.kav-voll):not(.kav-zu){grid-template-columns:minmax(0,1fr) 360px;gap:14px}#view-kaviar .kav-layout:not(.kav-voll):not(.kav-zu) .kav-main{display:contents}#view-kaviar .kav-layout:not(.kav-voll):not(.kav-zu) .kav-main>.kav-box:first-child{grid-column:1/-1;grid-row:1}#view-kaviar .kav-layout:not(.kav-voll):not(.kav-zu) #kavDetail{grid-column:1;grid-row:2}#view-kaviar .kav-layout:not(.kav-voll):not(.kav-zu) .kav-chat{grid-column:2;grid-row:2}}



/* 6.71: the two decorative formulas from 6.1, within the 6.61 sidebar. */
.header .sidebar-formula{flex:none;color:#7dd3fc;font-family:'Cambria Math',Cambria,serif;line-height:1.5;white-space:nowrap}
.header .sidebar-formula sub,.header .sidebar-formula sup{font-size:.72em;line-height:0}
.header .sidebar-formula-intro{margin:-10px 9px 12px;padding-bottom:12px;border-bottom:1px solid #7dd3fc30;font-size:16px}
.header .sidebar-formula-reaction{margin:auto 9px 0;padding-top:18px;font-size:14px;color:#8dbed3;text-align:center}
.header .kvh-fuss{margin-top:0;padding-top:14px;flex-shrink:0}
@media(max-width:900px){.header .sidebar-formula-intro{text-align:center}.header .sidebar-formula-reaction{margin-top:16px;padding-top:0}}


/* Match 6.62 navigation proportions; trim only the added formula spacing. */
@media(min-width:901px){
  .header .sidebar-formula-intro{margin:-10px 9px 2px;padding-bottom:4px}
  .header #tabs .nav-btn:last-child{margin-top:0}
  .header .sidebar-formula-reaction{margin:auto 9px 0;padding-top:6px}
  .header .kvh-fuss{padding-top:10px}
}


/* Keep the monthly chart compact instead of scaling it with wide monitors. */
main.main-content:has(#view-stats.active){min-width:0}
#view-stats .chart{max-width:960px}
#stChart{overflow-x:auto}
#view-stats #stChart svg{width:100%;max-width:900px;min-width:600px;height:auto;display:block}


/* 6.75: Mehr Platz für das Menü, kein eigener Scrollbereich in der Seitenleiste. */
.container > .header { padding: 12px 12px 10px; overflow: visible; }
.header .brand { padding-bottom: 14px; flex-shrink: 0; }
.header .brand-symbol { flex-shrink: 0; }
.header .nav-label { padding: 8px 14px; flex-shrink: 0; }
.header #tabs { gap: 4px; flex-shrink: 0; }
.header #tabs .nav-btn { min-height: 40px; padding: 9px 12px; }
.header .sidebar-formula-intro { margin: 0 9px 4px; padding-bottom: 6px; }
.header .sidebar-formula-reaction { padding-top: 6px; }
.header .kvh-fuss { padding-top: 8px; }
@media (min-width: 901px) {
  .container > .header { height: auto; min-height: 100vh; min-height: 100dvh; align-self: start; }
}
@media (min-width: 901px) and (max-height: 680px) {
  .container > .header { padding-top: 8px; padding-bottom: 8px; }
  .header .brand { padding-bottom: 10px; }
  .header .nav-label { padding-top: 6px; padding-bottom: 6px; }
  .header #tabs { gap: 2px; }
  .header #tabs .nav-btn { min-height: 36px; padding: 7px 12px; }
  .header .sidebar-formula-intro { margin-bottom: 2px; padding-bottom: 4px; }
  .header .kvh-fuss { padding-top: 6px; }
}
/* Bei sehr niedrigen Fenstern bleibt alles über die normale Seite erreichbar. */
@media (min-width: 901px) and (max-height: 560px) {
  .container > .header { position: static; }
}
@media (max-width: 900px) {
  .container > .header { min-height: 0; height: auto; }
}


/* Formel zwischen Labor und Datenbank; Verbindungsstatus bleibt unten. */
.header #tabs .sidebar-formula-reaction { margin: 2px 9px; padding: 4px 0; }
@media (max-width: 900px) { .header #tabs .sidebar-formula-reaction { flex-basis: calc(100% - 18px); } }
.header .kvh-fuss { margin-top: auto; }