/* ============================================================================
   VDM - Paletten auf dem Unterbau "Metall": Terminal, Tinte, Stahl dunkel
   ----------------------------------------------------------------------------
   Terminal reitet auf data-vdm-style="metal" (siehe vdm-styles.css). Damit erbt es
   auch alles, was in vdm-metal.css und vdm-styles.css fest auf das Kupfer-Orange
   (#e78a53) und die warme Near-Black-Rampe von Metall verdrahtet ist: Schalter, Fokusringe,
   Grid-Auswahl, Chat-Fenster. Hier werden diese Stellen auf die Palette des Schemas
   gezogen - der Akzent folgt --primary und damit der Akzentfarbe des Benutzers.

   Gemessen am 01.10.2026: ohne diese Datei erscheinen unter "Terminal" orange Schalter und
   ein braunes Chat-Fenster. Stahl dunkel und Tinte reiten ebenfalls auf Metall und haben
   dieselben Reste (Messung 02.10.2026: orange Hauptknoepfe unter Tinte); fuer sie gelten dieselben
   Regeln - nur die Neutral-Rampe, die Kontextlinks der Leiste und die Inhaltslinks sind Terminal-eigen.

   Wird in App.razor NACH vdm-metal.css und vdm-styles.css eingebunden (gleiche
   Spezifitaet, die spaetere Regel gewinnt).
   ========================================================================== */

html[data-vdm-palette="terminal"] {
    /* DevExpress: Neutral-Rampe gruenstichiges Near-Black statt warmem Metall-Grau.
       250 = App-Grund #07090a, 230 = Flaeche (etwa #0b0e0f). Erzeugt aus #eaf6ec ... #07090a
       mit Exponent 1,6, damit die dunklen Stufen fein aufgeloest sind. Nur Terminal: Tinte und
       Stahl dunkel haben eigene Flaechen. */
    --dxds-neutral-10: color-mix(in srgb, var(--primary) 3.0%, #dfe2e0);
    --dxds-neutral-20: color-mix(in srgb, var(--primary) 3.5%, #ced1ce);
    --dxds-neutral-30: color-mix(in srgb, var(--primary) 4.0%, #bcc0bd);
    --dxds-neutral-40: color-mix(in srgb, var(--primary) 5.0%, #acb0ad);
    --dxds-neutral-50: color-mix(in srgb, var(--primary) 6.0%, #9ca19e);
    --dxds-neutral-60: color-mix(in srgb, var(--primary) 7.0%, #8c918e);
    --dxds-neutral-70: color-mix(in srgb, var(--primary) 6.8%, #808482);
    --dxds-neutral-80: color-mix(in srgb, var(--primary) 6.5%, #747876);
    --dxds-neutral-90: color-mix(in srgb, var(--primary) 6.2%, #676c69);
    --dxds-neutral-100: color-mix(in srgb, var(--primary) 6.0%, #5b5f5d);
    --dxds-neutral-110: color-mix(in srgb, var(--primary) 6.0%, #515554);
    --dxds-neutral-120: color-mix(in srgb, var(--primary) 6.0%, #484b4c);
    --dxds-neutral-130: color-mix(in srgb, var(--primary) 6.0%, #3e4143);
    --dxds-neutral-140: color-mix(in srgb, var(--primary) 6.0%, #34373a);
    --dxds-neutral-150: color-mix(in srgb, var(--primary) 6.0%, #26282a);
    --dxds-neutral-160: color-mix(in srgb, var(--primary) 5.0%, #212224);
    --dxds-neutral-170: color-mix(in srgb, var(--primary) 4.0%, #1c1d1f);
    --dxds-neutral-180: color-mix(in srgb, var(--primary) 3.7%, #1a1b1c);
    --dxds-neutral-190: color-mix(in srgb, var(--primary) 3.3%, #17181a);
    --dxds-neutral-200: color-mix(in srgb, var(--primary) 3.0%, #151617);
    --dxds-neutral-210: color-mix(in srgb, var(--primary) 2.8%, #131415);
    --dxds-neutral-220: color-mix(in srgb, var(--primary) 2.7%, #121314);
    --dxds-neutral-230: color-mix(in srgb, var(--primary) 2.5%, #101112);
    --dxds-neutral-240: color-mix(in srgb, var(--primary) 1.9%, #0c0d0e);
    --dxds-neutral-250: color-mix(in srgb, var(--primary) 1.2%, #08090a);
}

/* Fokusring und DevExpress-Akzentrampe: gelten fuer alle drei Paletten, die auf Metall reiten
   (Terminal, Tinte, Stahl dunkel) - Metall setzt sonst das Kupfer-Orange. Stufe 70 ist bewusst
   abgedunkelt: DevExpress setzt weissen Text auf 70, und Weiss auf hellem Akzent ist unlesbar. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"], [data-vdm-palette="terminalhell"]) {
    --vdm-focus-ring: color-mix(in srgb, var(--primary) 30%, transparent);
    --dxbl-accent-color-10: color-mix(in srgb, var(--primary) 10%, #fff);
    --dxbl-accent-color-20: color-mix(in srgb, var(--primary) 20%, #fff);
    --dxbl-accent-color-30: color-mix(in srgb, var(--primary) 30%, #fff);
    --dxbl-accent-color-40: color-mix(in srgb, var(--primary) 42%, #fff);
    --dxbl-accent-color-50: color-mix(in srgb, var(--primary) 55%, #fff);
    --dxbl-accent-color-60: color-mix(in srgb, var(--primary) 70%, #fff);
    --dxbl-accent-color-70: color-mix(in srgb, var(--primary) 62%, #000);
    --dxbl-accent-color-80: color-mix(in srgb, var(--primary) 55%, #000);
    --dxbl-accent-color-90: color-mix(in srgb, var(--primary) 48%, #000);
    --dxbl-accent-color-100: color-mix(in srgb, var(--primary) 42%, #000);
    --dxbl-accent-color-110: color-mix(in srgb, var(--primary) 36%, #000);
    --dxbl-accent-color-120: color-mix(in srgb, var(--primary) 30%, #000);
    --dxbl-accent-color-130: color-mix(in srgb, var(--primary) 25%, #000);
    --dxbl-accent-color-140: color-mix(in srgb, var(--primary) 20%, #000);
    --dxbl-accent-color-150: color-mix(in srgb, var(--primary) 15%, #000);
    --dxbl-accent-color-160: color-mix(in srgb, var(--primary) 10%, #000);
    --dxbl-accent-color-170: color-mix(in srgb, var(--primary) 6%, #000);
}

/* Links: Metall faerbt jeden Inhaltslink orange (#ffa463). Hier der Akzent der Palette, wie bei
   Stahl (vdm-stahl.css). Die Kontextlinks der Menueleiste bleiben hell - sie tragen ihre Farbe
   aus der Leiste, der aktive Link den Akzentbalken. */
html[data-vdm-palette="terminal"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):not(.evp-knopf):not(.vdm-context-links a) {
    color: var(--primary);
}
html[data-vdm-palette="terminal"] a:not(.btn):not(.dxbl-btn):not(.nav-link):not(.vdm-launcher-tile):not(.vdm-brand):not([class*="tab"]):not(.evp-knopf):not(.vdm-context-links a):hover {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
}

/* Kontextlinks der Menueleiste: Metall faerbt sie ueber die allgemeine Linkregel orange. Die Regel
   dort hat eine sehr hohe Spezifitaet (fuenf :not), daher !important statt eines Gegen-Selektors. */
html[data-vdm-palette="terminal"] .vdm-context-links a { color: var(--vdm-nav-text, #cfe8d4) !important; }
html[data-vdm-palette="terminal"] .vdm-context-links a:hover,
html[data-vdm-palette="terminal"] .vdm-context-links a.is-active { color: #fff !important; }

/* Tabellenkoepfe, Zeilen-Hover und Badges: Metall nutzt warmes Grau/Braun */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-header-row > th,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-header-row > td {
    color: var(--muted) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .entity-portionen-grid th,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .rezepte-table th {
    color: var(--muted);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .rezepte-table tbody tr:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .entity-portionen-grid tbody tr:hover {
    background: var(--surface-2);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .badge {
    background: var(--surface-2);
    color: var(--primary);
}

/* Fokus und Auswahl */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td:first-child,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-data-row.dxbl-grid-selected-row > td,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-data-row.dxbl-grid-focused-row > td {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) input:not([type="checkbox"]):not([type="radio"]):focus,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) select:focus,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) textarea:focus {
    border-color: var(--primary);
}

/* Chat-Fenster und KI-Dialoge: Metall zeichnet sie braun/orange. Hier Flaechen der Palette,
   Akzent aus --primary. Text auf dem Akzent bleibt dunkel (Kontrast auf hellem Akzent). */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-panel { background: var(--surface); color: var(--text); border-color: var(--border); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-panel-head,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-fab,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-msg.is-own,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-send-btn { background: var(--primary); color: var(--vdm-on-ink, #07090a); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-fab:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-send-btn:hover { background: var(--primary-600); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-msg.is-other { background: var(--surface-2); color: var(--text); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-input,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-search { background: var(--bg); color: var(--text); border-color: var(--border); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-avatar { background: var(--surface-2); color: var(--text); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-ghost-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-teilen-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .ki-aus-trigger { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-konv:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-person:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-person.is-selected,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-mention-item:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-quick-item:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-msg-menu-item:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-ghost-btn:hover { background: var(--primary-50); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-mention-pop,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-msg-menu,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-quick-menu,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-forward,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-teilen-dialog,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .ki-aus-dialog { background: var(--surface-2); color: var(--text); border-color: var(--border); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-teilen-note,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-teilen-suche,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .ki-aus-frage { background: var(--bg); color: var(--text); border-color: var(--border); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-teilen-av { background: var(--surface-2); color: var(--text); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-presence-dot--corner { border-color: var(--surface); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .chat-msg.is-other .chat-mention-tag { background: var(--primary-50); color: var(--primary); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .ki-aus-btn.is-primary { background: var(--primary); border-color: var(--primary); color: var(--vdm-on-ink, #07090a); }

/* ---------- Artikelstamm: Metall-Abschnitt der Seite ----------
   Artikel.razor.css faerbt aktive Reiter, Filter, Markierungen und den gewaehlten Kennzahlen-Reiter
   fuer .vdm-style-metal orange. Terminal traegt diese Klasse mit. Die Regeln hier haben mit
   html[data-vdm-palette] davor eine hoehere Spezifitaet als die gekapselten Seitenregeln. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-drawer-tab.is-active {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: var(--primary);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-flag-row span.is-set {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-filter-chip:hover {
    border-color: color-mix(in srgb, var(--primary) 34%, transparent);
    color: var(--text);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-filter-chip.is-active {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--primary) 36%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-metric.is-selected {
    border-color: color-mix(in srgb, var(--primary) 42%, transparent);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-metric.is-selected span,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-metric.is-selected strong {
    color: var(--text);
}

/* ---------- Einrichtungen: Liste, Drawer und Details ----------
   Einrichtungen.razor.css hat einen langen Metall-Abschnitt (Kupfer/Orange, warmes Schwarz) fuer
   Drawer-Kopf, Reiter, Kopfzeilen-Knoepfe und Werkzeugleiste. Terminal traegt .vdm-style-metal
   mit; hier werden diese Stellen auf die Palette gezogen. Gemessen am 02.10.2026: orange Knoepfe
   und brauner Verlauf im Drawer, weisser Text auf Orange mit 2,6:1. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-drawer .dxbl-drawer-panel {
    background: var(--surface);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail {
    background:
        radial-gradient(circle at 0% 14%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 30%),
        var(--surface);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-content {
    background:
        radial-gradient(circle at 0 8%, color-mix(in srgb, var(--primary) 6%, transparent), transparent 28%),
        var(--surface);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-hero,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-hero.entity-detail-hero-fallback {
    background:
        radial-gradient(130% 130% at 6% 115%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 46%),
        linear-gradient(205deg, var(--bg) 0%, color-mix(in srgb, var(--primary) 22%, var(--bg)) 100%);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-hero.entity-detail-hero-has-image {
    background:
        linear-gradient(180deg, rgba(7, 9, 10, 0.44), rgba(7, 9, 10, 0.30)),
        var(--detail-hero-image),
        linear-gradient(160deg, color-mix(in srgb, var(--primary) 25%, #000), var(--bg));
    background-position: center;
    background-size: cover;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-hero-glow {
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 20%, transparent), transparent 68%);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-hero-fallback .entity-detail-eyebrow,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-eyebrow,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .detail-fact-icon.tb-icon {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-tab.is-active {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    border-bottom-color: var(--primary);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-tab.is-active small {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
    color: var(--text);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-info-card,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-section,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-card {
    background: var(--surface);
    border-color: var(--border);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-portionen-grid-wrap { background: var(--bg); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-portionen-grid th { background: var(--surface-2); color: var(--text); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-portionen-grid tbody tr:nth-child(odd) { background: var(--surface); }
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-portionen-grid tbody tr:nth-child(even) { background: var(--surface-2); }

/* Kopfzeilen-Knoepfe im Drawer (Details, Route): Metall setzt Orange mit !important und weissem Text.
   Terminal: abgedunkelter Akzent, damit weisser Text lesbar bleibt (Neon waere 1,4:1). */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-header-actions .detail-header-btn.dxbl-btn {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--vdm-on-ink, #07090a) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail-header-actions .detail-header-btn.dxbl-btn:hover:not(:disabled):not(.dxbl-disabled) {
    background: color-mix(in srgb, var(--primary) 86%, #fff) !important;
    border-color: color-mix(in srgb, var(--primary) 86%, #fff) !important;
}

/* Werkzeugleiste und Nebenknoepfe: warmes Grau -> Flaechen der Palette */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-left .entity-status-filter.dxbl-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-export-btn.dxbl-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-columns-btn.dxbl-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-clear-btn.dxbl-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-refresh-btn.dxbl-btn,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail .detail-action-btn.dxbl-btn:not(.vdm-btn-primary) {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-left .entity-status-filter.dxbl-btn:hover:not(:disabled):not(.dxbl-disabled),
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-export-btn.dxbl-btn:hover:not(:disabled):not(.dxbl-disabled),
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-columns-btn.dxbl-btn:hover:not(:disabled):not(.dxbl-disabled),
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-clear-btn.dxbl-btn:hover:not(:disabled):not(.dxbl-disabled),
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-refresh-btn.dxbl-btn:hover:not(:disabled):not(.dxbl-disabled),
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail .detail-action-btn.dxbl-btn:not(.vdm-btn-primary):hover:not(:disabled):not(.dxbl-disabled) {
    background: color-mix(in srgb, var(--surface-2) 80%, var(--primary)) !important;
    border-color: color-mix(in srgb, var(--border) 60%, var(--primary)) !important;
    color: var(--text) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-left .entity-status-filter .tb-icon,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-export-btn .tb-icon,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-columns-btn .tb-icon,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-clear-btn .tb-icon,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-toolbar-actions .toolbar-refresh-btn .tb-icon,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail .detail-action-btn.dxbl-btn:not(.vdm-btn-primary) .tb-icon,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .entity-detail .detail-action-btn.dxbl-btn:not(.vdm-btn-primary) .dxbl-btn-text {
    color: var(--text) !important;
}

/* Einrichtungsdetails: gewaehlter Eintrag der Vertragshistorie */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .details-contract-history-item.is-selected {
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* ---------- Artikel: Rest des Metall-Abschnitts ----------
   Artikel.razor.css und ArtikelDetails.razor.css haben ueber die oben genannten Stellen hinaus
   Metall-Orange fuer Stammdaten-Reiter, Hinzufuegen-Knopf, Auswahl in der Liste, gewaehlte Grid-Zeile
   (#8a4621), Drawer-Kopf mit Verlauf und Knoepfen, Fakten-Symbole und Platzhalterbild. Gemessen am
   02.10.2026: Die gewaehlte Zeile im Artikelstamm war kupferbraun, der Drawer-Kopf orange. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-master-tab.is-active {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-art-add-button {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-art-picker-row.is-selected {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
/* Gewaehlte Zeile: abgedunkelter Akzent mit weisser Schrift (Neon waere 1,4:1) */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-grid-card .dxbl-grid-focused-row > td,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-grid-card .dxbl-grid-selected-row > td {
    background: color-mix(in srgb, var(--primary) 40%, #000) !important;
    color: #ffffff !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-drawer-action-button {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--vdm-on-ink, #07090a) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-drawer-action-button:hover {
    background: color-mix(in srgb, var(--primary) 86%, #fff) !important;
    border-color: color-mix(in srgb, var(--primary) 86%, #fff) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-drawer-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--primary) !important;
    color: color-mix(in srgb, var(--primary) 70%, #fff) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-drawer-tab.is-active span {
    color: color-mix(in srgb, var(--primary) 70%, #fff) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-fact-icon {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-detail-hero {
    background:
        radial-gradient(130% 130% at 6% 115%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 46%),
        linear-gradient(205deg, var(--bg) 0%, color-mix(in srgb, var(--primary) 22%, var(--bg)) 100%);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-image-placeholder {
    border-color: color-mix(in srgb, var(--primary) 42%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 8%, transparent));
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-flag-pill.is-set {
    color: color-mix(in srgb, var(--primary) 70%, #fff);
    background: color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ---------- Apps-Seite (/apps) ----------
   Apps.razor.css faerbt den Knopf "Anpassen" je Schema fest (Hell gruen, Dunkel blau, Dark (Teal)
   tuerkis, Metall orange). Terminal, Tinte und Stahl dunkel tragen data-vdm-style="metal" und
   bekamen so das Orange. Hier der abgedunkelte Akzent der Palette (weisse Schrift bleibt lesbar).
   Doppelte Klasse statt !important: hoehere Spezifitaet als das gekapselte Seiten-CSS. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .apps-customize-button.apps-customize-button {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--vdm-on-ink, #07090a);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .apps-customize-button.apps-customize-button:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .apps-customize-button.apps-customize-button.is-active {
    background: color-mix(in srgb, var(--primary) 86%, #fff);
    border-color: color-mix(in srgb, var(--primary) 86%, #fff);
}

/* Symbole der Karten: Apps.razor.css faerbt die SVG-Symbole ueber feste Farbfilter je Schema (Metall:
   Orange-Filter). Ein Filter kann dem frei waehlbaren Akzent nicht folgen; fuer die drei Metall-Paletten
   daher helle Symbole auf der akzentgetoenten Kachel (wie im Apps-Launcher der Leiste). Die farbigen
   Bereichsbilder (BO_Department) bleiben. Angeheftet: ebenfalls hell, die Kachel traegt den Akzent. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .apps-card-icon.apps-card-icon img:not([src*="BO_Department"]) {
    filter: brightness(0) invert(1);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .apps-pin-button.is-pinned.is-pinned img,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .apps-sz-pin.is-pinned.is-pinned img {
    filter: brightness(0) invert(1);
}

/* ---------- Grids: eine Optik fuer Auswahl, Fokus und Hover ----------
   Gemessen am 02.10.2026: Einrichtungen nutzt die DevExpress-Auswahl (Akzent 55 %), Artikel eine
   eigene (Akzent 40 %, weisse Schrift), Rezepte die kupferbraune von Metall (#8a4621) - drei Optiken
   fuer dasselbe Bedienelement. Die DevExpress-Werte werden hier gesetzt, die Seiten mit eigener
   Auswahl (Artikel, Rezepte) ziehen auf denselben Wert (40 %, weisse Schrift). */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid {
    --dxbl-grid-selection-bg: color-mix(in srgb, var(--primary) 22%, #000);
    --dxbl-grid-focus-bg: color-mix(in srgb, var(--primary) 32%, #000);
    --dxbl-grid-selection-focus-dark-bg: color-mix(in srgb, var(--primary) 40%, #000);
    --dxbl-grid-selected-hover-bg: color-mix(in srgb, var(--primary) 46%, #000);
    --dxbl-grid-hover-bg: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* Artikelstamm: eigene Dunkelwerte (Rahmen weiss 16 %, Schrift #f8fafc, Flaeche etwas heller) auf die
   Werte der DevExpress-Grids der anderen Seiten (Neutral-Rampe der Palette). */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .artikel-page {
    --artikel-surface: var(--dxds-neutral-230, var(--surface));
    --artikel-surface-muted: var(--dxds-neutral-210, var(--surface-2));
    --artikel-border: var(--dxds-neutral-140, var(--border));
    --artikel-text-primary: var(--dxds-neutral-10, var(--text));
    --artikel-text-secondary: var(--dxds-neutral-60, var(--muted));
}

/* ---------- Rezepte ----------
   Rezepte.razor.css hat einen Metall-Abschnitt (Kupfer/Orange): Hauptknopf "Neu", Mini-Knoepfe im
   Drawer, Drawer-Kopf, Bio-Vorschau und gewaehlte Grid-Zeile (#8a4621). Gemessen: orange "Neu",
   brauner Drawer-Kopf, kupferbraune Zeile. Doppelte Klasse statt !important, wo die Seite keins setzt. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .rezepte-primary-action.rezepte-primary-action,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .rezepte-primary-action.is-create.is-create,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .rezepte-mini-actions.rezepte-mini-actions button {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--vdm-on-ink, #07090a);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .rezepte-primary-action.rezepte-primary-action:hover,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .rezepte-mini-actions button:hover {
    background: color-mix(in srgb, var(--primary) 86%, #fff);
    border-color: color-mix(in srgb, var(--primary) 86%, #fff);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"])[data-vdm-style="metal"] .rezepte-bio-preview.rezepte-bio-preview {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .rezepte-drawer-hero.rezepte-drawer-hero {
    background:
        radial-gradient(130% 130% at 6% 115%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 46%),
        linear-gradient(205deg, var(--bg) 0%, color-mix(in srgb, var(--primary) 22%, var(--bg)) 100%);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .rezepte-grid-host .dxbl-grid-focused-row > td,
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.vdm-style-terminal, .vdm-style-tinte, .vdm-style-stahl) .rezepte-grid-host .dxbl-grid-selected-row > td {
    background: color-mix(in srgb, var(--primary) 40%, #000) !important;
    color: #ffffff !important;
}

/* Toasts (ToastThemeMode.Saturated): helle Schrift auf mittelhellen Signalfarben misst 1,9-2,6:1
   (Warnung 1,9, Erfolg 2,3, Info 2,5, Gefahr 2,6; Messung 02.10.2026). Hintergrund fuer die dunklen
   Schemata auf Signalfarbe + Schwarz abdunkeln (mit heller Schrift >= 4,5:1). */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-danger {
    --dxbl-toast-background-color: color-mix(in srgb, #e0615a 55%, #000);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-warning {
    --dxbl-toast-background-color: color-mix(in srgb, #f7804c 50%, #000);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-success {
    --dxbl-toast-background-color: color-mix(in srgb, #4ba747 55%, #000);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-saturated.dxbl-toast-render-info {
    --dxbl-toast-background-color: color-mix(in srgb, #6a87f0 55%, #000);
}

/* Hauptknoepfe unter Tinte: DevExpress setzt weisse Schrift auf den Akzent
   (Tinte-Akzent #6d94e6: 3,0:1, Messung 02.10.2026). Schrift = --vdm-auf-akzent (dunkel). Stahl dunkel fuellt die Knoepfe dunkelteal (28,81,86) und behaelt die weisse Schrift. */
html[data-vdm-palette="tinte"] .dxbl-btn {
    --dxbl-btn-primary-color: var(--vdm-auf-akzent, #15171b);
}
html[data-vdm-palette="tinte"] .dxbl-btn.dxbl-btn-primary .dxbl-btn-caption,
html[data-vdm-palette="tinte"] .dxbl-btn.vdm-btn-primary .dxbl-btn-caption {
    color: var(--vdm-auf-akzent, #15171b);
}

/* Tinte: kuehle blaugraue Neutral-Rampe. Metall liefert sonst ein warmes Braungrau (#5e5852 als Feldrahmen,
   #373431 gesperrt, Messung 02.10.2026), das unter Tinte als dunkelroter Stich auffaellt.
   230 liegt bei der Flaeche #1d2025, 250 knapp unter dem App-Grund #15171b. */
html[data-vdm-palette="tinte"] {
    --dxds-neutral-10: #ecedee;
    --dxds-neutral-20: #dddfe1;
    --dxds-neutral-30: #ced1d5;
    --dxds-neutral-40: #c0c3c8;
    --dxds-neutral-50: #b2b6bc;
    --dxds-neutral-60: #a5a9b1;
    --dxds-neutral-70: #989da5;
    --dxds-neutral-80: #8b919a;
    --dxds-neutral-90: #7f8590;
    --dxds-neutral-100: #717988;
    --dxds-neutral-110: #676f7c;
    --dxds-neutral-120: #5e6571;
    --dxds-neutral-130: #555b66;
    --dxds-neutral-140: #4d525c;
    --dxds-neutral-150: #444952;
    --dxds-neutral-160: #3d4149;
    --dxds-neutral-170: #363940;
    --dxds-neutral-180: #2f3238;
    --dxds-neutral-190: #292b31;
    --dxds-neutral-200: #23252a;
    --dxds-neutral-210: #1e2024;
    --dxds-neutral-220: #191b1e;
    --dxds-neutral-230: #16171a;
    --dxds-neutral-240: #131417;
    --dxds-neutral-250: #111315;
}

/* Stahl dunkel: kuehle Stahl-Rampe (Farbton 207, Grund #0d1116, Flaeche #161c22) statt des warmen Metall-Braungraus
   (#5e5852 als Feldrahmen, Messung 02.10.2026). */
html[data-vdm-palette="stahl"] {
    --dxds-neutral-10: #ecedef;
    --dxds-neutral-20: #dcdfe1;
    --dxds-neutral-30: #cdd1d5;
    --dxds-neutral-40: #bec4c8;
    --dxds-neutral-50: #b0b6bc;
    --dxds-neutral-60: #a2aab0;
    --dxds-neutral-70: #959da4;
    --dxds-neutral-80: #879199;
    --dxds-neutral-90: #7b858e;
    --dxds-neutral-100: #6b7b88;
    --dxds-neutral-110: #616f7b;
    --dxds-neutral-120: #58656f;
    --dxds-neutral-130: #4f5a64;
    --dxds-neutral-140: #465159;
    --dxds-neutral-150: #3e474f;
    --dxds-neutral-160: #363f45;
    --dxds-neutral-170: #2f363c;
    --dxds-neutral-180: #282f34;
    --dxds-neutral-190: #22272c;
    --dxds-neutral-200: #1d2124;
    --dxds-neutral-210: #181b1e;
    --dxds-neutral-220: #131618;
    --dxds-neutral-230: #0f1214;
    --dxds-neutral-240: #0d0f10;
    --dxds-neutral-250: #0b0d0e;
}

/* Eingabefelder, Hover-Zeilen und Badges: Metall setzt feste Violett-Dunkeltoene (#1c1a1e, #2a2228).
   Unter Terminal, Tinte und Stahl dunkel uebernehmen Felder die Farbe des umliegenden Bereichs
   (Dennis 02.10.2026); der Rahmen bleibt die Schema-Rahmenfarbe. */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    background-color: transparent;
    border-color: var(--border);
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .dxbl-grid .dxbl-grid-data-row:hover > td {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .badge {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
    color: var(--text);
}

html[data-vdm-palette="terminalhell"] .dxbl-grid .dxbl-grid-table tr.dxbl-grid-selected-row,
html[data-vdm-palette="terminalhell"] .dxbl-grid .dxbl-grid-table tr.dxbl-grid-focused-row {
    --dxbl-grid-selection-bg: color-mix(in srgb, var(--primary) 14%, var(--surface));
    --dxbl-grid-selection-focus-dark-bg: color-mix(in srgb, var(--primary) 14%, var(--surface));
    --dxbl-grid-focus-bg: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--text);
}
/* Terminal hell: Seitengrund. Artikel, Speiseplaene und Speiseplanung setzen einen festen hellen Seitengrund
   (#f8fafc, #f6f8fb), der als harte Kante gegen den getoenten Schemagrund steht (Dennis 02.10.2026). */
html[data-vdm-palette="terminalhell"] :is(.artikel-page, .meal-plan-page, .planning-page) {
    background: var(--bg) !important;
}

/* Terminal hell: Anlegen-Knoepfe der Listen (fest Gruen #15803d / #087f3f) im Akzent der Palette. */
html[data-vdm-palette="terminalhell"] :is(.artikel-primary-action, .rezepte-primary-action.is-create) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Terminal hell: Grid-Auswahl und Fokus. Die helle DevExpress-Auswahl ist schwarz mit weisser Schrift.
   Der Drawer-Kopf laeuft ueber --vdm-hero-von/-bis (siehe vdm-styles.css). */
html[data-vdm-palette="terminalhell"] .dxbl-grid .dxbl-grid-table tr.dxbl-grid-selected-row > td,
html[data-vdm-palette="terminalhell"] .dxbl-grid .dxbl-grid-table tr.dxbl-grid-focused-row > td {
    background-color: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
    color: var(--text) !important;
}
html[data-vdm-palette="terminalhell"] .dxbl-grid .dxbl-grid-table tr.dxbl-grid-selected-row > td:first-child,
html[data-vdm-palette="terminalhell"] .dxbl-grid .dxbl-grid-table tr.dxbl-grid-focused-row > td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}
html[data-vdm-palette="terminalhell"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-vdm-palette="terminalhell"] select:focus,
html[data-vdm-palette="terminalhell"] textarea:focus {
    border-color: var(--primary);
}
/* @@NUR-TERMINAL@@ */
/* ---------- Hauptknoepfe: hell mit dunkler Schrift (Mockup Variante B, "Freigeben") ----------
   Bisher dunkel gefuellt mit weisser Schrift, weil DevExpress weissen Text auf den Akzent setzt. Das
   Mockup setzt den Akzent sparsam und hell: heller Akzent, dunkle Schrift (Neon 14:1). Nur Terminal;
   Tinte und Stahl dunkel behalten ihre bisherigen Knoepfe in den Seitenregeln. */
html[data-vdm-palette="terminal"] .dxbl-btn {
    --dxbl-btn-primary-bg: var(--primary);
    --dxbl-btn-primary-hover-bg: color-mix(in srgb, var(--primary) 86%, #fff);
    --dxbl-btn-primary-active-bg: color-mix(in srgb, var(--primary) 72%, #000);
    --dxbl-btn-primary-color: var(--vdm-on-ink, #07090a);
}
html[data-vdm-palette="terminal"] .dxbl-btn.dxbl-btn-primary .tb-icon,
html[data-vdm-palette="terminal"] .dxbl-btn.dxbl-btn-primary .detail-icon,
html[data-vdm-palette="terminal"] .dxbl-btn.vdm-btn-primary .tb-icon,
html[data-vdm-palette="terminal"] .dxbl-btn.vdm-btn-primary .detail-icon {
    color: var(--vdm-on-ink, #07090a);
}
html[data-vdm-palette="terminal"] .dxbl-btn.vdm-btn-primary:not(:disabled):not(.dxbl-disabled) {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--vdm-on-ink, #07090a) !important;
    box-shadow: none;
}
html[data-vdm-palette="terminal"] .dxbl-btn.vdm-btn-primary:not(:disabled):not(.dxbl-disabled):hover {
    background-color: color-mix(in srgb, var(--primary) 86%, #fff) !important;
    border-color: color-mix(in srgb, var(--primary) 86%, #fff) !important;
}

/* Symbole und Texte der seitenspezifischen Hauptknoepfe (Drawer-Kopf Einrichtungen, Artikel, Apps) */
html[data-vdm-palette="terminal"] .vdm-style-terminal .entity-detail-header-actions .detail-header-btn .dxbl-btn-text,
html[data-vdm-palette="terminal"] .vdm-style-terminal .entity-detail-header-actions .detail-header-btn .tb-icon,
html[data-vdm-palette="terminal"] .vdm-style-terminal .entity-detail-header-actions .detail-header-btn .detail-icon {
    color: var(--vdm-on-ink, #07090a) !important;
}
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-drawer-action-button img,
html[data-vdm-palette="terminal"][data-vdm-style="metal"] .apps-customize-button img {
    filter: brightness(0);
}

/* Grids: Kopf-, Filter- und Datenzeilen auf eine Flaeche (Kartenfarbe) statt dreier Dunkelstufen;
   Rezept- und Artikel-Grids ziehen mit. */
html[data-vdm-palette="terminal"] .dxbl-grid {
    --dxbl-grid-row-bg: var(--surface);
}
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-table,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-header-row,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-filter-row,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-data-row > td {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid th,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid td {
    border-color: var(--border);
}
/* Artikel-Grid: Rahmen und Schrift stehen dort an Tabelle und Zeile (weiss 18 % bzw. #fff) und werden
   von den Zellen geerbt - deshalb auch dort ueberschreiben (gemessen: Rahmen und Schrift blieben weiss). */
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-table,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-table tr,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-table thead,
html[data-vdm-palette="terminal"] .vdm-style-terminal .artikel-grid-card .dxbl-grid-table tbody {
    color: var(--text) !important;
    border-color: var(--border) !important;
}

/* Speiseplanung und Speiseplaene: die Dunkelbloecke der Seiten haben feste Blau-Schiefer-Flaechen
   (#0f172a, #111c2e) und pastellige Kategoriemarken. Unter Terminal, Tinte und Stahl dunkel auf die Neutraltoene und den
   Akzent ziehen (Gemessen 02.10.2026: Flaechen 15,23,42 und 17,28,46 statt Terminal-Neutral). */
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.planning-page, .meal-plan-page) {
    background: var(--bg) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.planning-matrix-shell, .planning-statusbar, .meal-week-nav, .meal-matrix-shell,
    .meal-matrix thead th, .meal-line-column, .meal-cell-content, .meal-legend, .meal-allergen-panel, .meal-info-dialog) {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) .meal-icon-button.meal-allergen-button {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.meal-icon, .spn-mark.planning-icon) {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important;
    color: var(--text) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.meal-icon-glyph, .planning-icon-glyph, .spn-mark-label, .meal-legend-item strong) {
    color: var(--text) !important;
}
html:is([data-vdm-palette="terminal"], [data-vdm-palette="tinte"], [data-vdm-palette="stahl"]) :is(.meal-plan-note, .spn-count, .meal-legend > span, .meal-legend-title) {
    color: var(--muted) !important;
}