/* WerkPilot – verbindliches HYMOTEQ Akzentsystem, August 2026
   Grundfarben: Weiß / Silber / Graphit / Rot. Fachliche Statusfarben bleiben erhalten. */

:root,
html body {
    --hq-accent: #c81024;
    --hq-accent-bright: #ee4551;
    --hq-accent-dark: #b8071e;
    --hq-accent-hover: #8f0718;
    --hq-accent-border: #a70b1e;
    --hq-accent-soft: #fff0f1;
    --hq-accent-ring: rgba(191, 12, 31, .18);
    /* Verbindliche Farbe für normale Rot-Aktionen – Referenz: ME2M importieren. */
    --hq-action: var(--hq-accent);
    --hq-action-border: #9d0b1d;
    --hq-action-hover: #8f0718;
    --hq-action-shadow: 0 7px 16px rgba(180, 10, 30, .20);
    --hq-action-hover-shadow: 0 9px 20px rgba(132, 8, 23, .22);
    --leergut-accent: var(--hq-accent);
    --wp-danger: #d5001c;
    --wp-danger-dark: #b90018;

    /* Historische Akzentvariablen zeigen ab jetzt auf HYMOTEQ-Rot. */
    --primary-color: var(--hq-accent-dark) !important;
    --header-bg: var(--hq-accent-hover) !important;
    --info-color: var(--hq-accent) !important;
    --wp-ui-red: var(--hq-accent-dark) !important;
    --wp-ui-red-hover: var(--hq-accent-hover) !important;
    --start-red: var(--hq-accent-dark) !important;
    --production-red: var(--hq-accent-dark) !important;
    --werkpilot-light-red: var(--hq-accent-dark) !important;
    --planung-light-red: var(--hq-accent-dark) !important;
    --planung-light-red-dark: var(--hq-accent-hover) !important;
    --leergut-red: var(--hq-accent-dark) !important;
    --leergut-red-dark: var(--hq-accent-hover) !important;
    --wp-red: var(--hq-accent-dark) !important;
    --wp-red-deep: var(--hq-accent-hover) !important;

    /* Speicheraktionen sind neutral silbern; Importaktionen bleiben separat definiert. */
    --wp-save-matte-blue: #c6cdd6 !important;
    --wp-save-matte-blue-hover: #d9e0e7 !important;
    --wp-save-matte-blue-border: #b6bfc9 !important;
    --wp-import-metal-orange-top: var(--hq-accent-bright) !important;
    --wp-import-metal-orange: var(--hq-accent-dark) !important;
    --wp-import-metal-orange-dark: var(--hq-accent-hover) !important;
    --wp-import-metal-orange-border: var(--hq-accent-border) !important;
}

/* --------------------------------------------------------------------------
   Branding, Kopfzeile, Navigation und Ladefenster
   -------------------------------------------------------------------------- */
html body[data-view="login"] .wp-login-brand-word span:last-child {
    color: var(--hq-accent-dark) !important;
}

html body[data-view="login"] .wp-login-brand-emblem,
html body.werkpilot-header-branding .modern-title-emblem {
    filter: drop-shadow(0 8px 14px rgba(164, 10, 28, .22)) !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-title-emblem::before,
html body:is([data-view="register"], [data-view="twofa"]) .modern-title-emblem::before {
    background-image: none !important;
    content: none !important;
    display: none !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-title-block::after,
html body[data-view="capacity"] .capacity-page-hero::before {
    background: linear-gradient(90deg, var(--hq-accent-bright), var(--hq-accent-dark) 62%, transparent) !important;
    box-shadow: none !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-nav-group .header-btn.active::after {
    background: linear-gradient(90deg, var(--hq-accent-bright), var(--hq-accent-dark), var(--hq-accent-bright)) !important;
    box-shadow: none !important;
}

html body.werkpilot-header-branding .modern-nav-group .header-btn.active,
html body.werkpilot-header-branding .modern-nav-group .header-btn.active :is(span, .nav-icon, svg) {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html body.werkpilot-header-branding .modern-today-btn,
html body[data-view="login"] .auth-primary-btn,
html body[data-view="login"] .auth-card:not(.hymoteq-login-card) button[type="submit"] {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(164, 10, 28, .20) !important;
}

html body.werkpilot-header-branding .modern-today-btn:hover,
html body[data-view="login"] .auth-primary-btn:hover,
html body[data-view="login"] .auth-card:not(.hymoteq-login-card) button[type="submit"]:hover {
    border-color: var(--hq-accent-hover) !important;
    background: var(--hq-accent-hover) !important;
    color: #ffffff !important;
}

html body :is(input, select, textarea):focus,
html body :is(input, select, textarea):focus-visible {
    border-color: var(--hq-accent-dark) !important;
    box-shadow: 0 0 0 3px var(--hq-accent-ring) !important;
    outline: none !important;
}

html body input[type="checkbox"],
html body input[type="radio"] {
    accent-color: var(--hq-accent-dark) !important;
}

body.app-loading::after {
    border-color: #969da3 !important;
    border-top-color: var(--hq-accent-dark) !important;
    background: linear-gradient(180deg, #fafafb 0%, #e4e8ea 50%, #cbd1d4 100%) !important;
    color: #151515 !important;
    box-shadow: 0 18px 44px rgba(20, 24, 28, .20), 0 0 0 3px rgba(164, 10, 28, .08) !important;
}

/* --------------------------------------------------------------------------
   Start-, Hub- und Datenbankkacheln
   -------------------------------------------------------------------------- */
html body[data-view="start"] #main-view-container #start-view .start-kachel::before {
    content: "" !important;
    position: absolute !important;
    inset: 18px auto 18px 0 !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    background: linear-gradient(180deg, var(--hq-accent-bright), var(--hq-accent-dark) 70%, var(--hq-accent-hover)) !important;
    opacity: 1 !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(145deg, transparent 0 60%, rgba(90,96,102,0.025) 61% 62%, transparent 63%),
        repeating-linear-gradient(145deg, transparent 0 18px, rgba(90,96,102,0.018) 19px 20px) !important;
    opacity: 1 !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel-arrow,
html body[data-view="start"] #main-view-container #start-view .start-kachel-arrow svg {
    color: var(--hq-accent-dark) !important;
    stroke: currentColor !important;
}

html body:is([data-view="production-home"], [data-view="planning-home"], [data-view="logistics-home"]) .planning-hub-card:not(.planning-hub-status-card)::before,
html body[data-view="planning-home"] .planning-hub-card-metallic::before {
    background: linear-gradient(180deg, var(--hq-accent-bright), var(--hq-accent-dark) 68%, var(--hq-accent-hover)) !important;
}

html body:is([data-view="production-home"], [data-view="planning-home"], [data-view="logistics-home"]) .planning-hub-card:not(.planning-hub-status-card) .planning-hub-card-meta span:last-child,
html body[data-view="planning-home"] .planning-hub-card-metallic .planning-hub-card-meta span:last-child {
    color: var(--hq-accent-dark) !important;
}

html body #database-view #db-dashboard .kachel::before {
    background: linear-gradient(180deg, var(--hq-accent-bright), var(--hq-accent-dark) 68%, var(--hq-accent-hover)) !important;
}

html body #database-view :is(.db-anlagenparameter-add-btn, .artikel-db-save-btn),
html body :is(.db-ruestmatrix-import-btn, .db-ruestmatrix-commit-btn),
html body #database-view .artikel-db-details-card .artikel-db-save-btn {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(164, 10, 28, .20) !important;
    text-shadow: none !important;
}

html body #database-view :is(.db-anlagenparameter-add-btn, .artikel-db-save-btn):hover,
html body :is(.db-ruestmatrix-import-btn, .db-ruestmatrix-commit-btn):hover {
    border-color: var(--hq-accent-hover) !important;
    background: var(--hq-accent-hover) !important;
}

html body :is(.db-ruestmatrix-pilot-badge, .db-ruestmatrix-summary-update) {
    border-color: rgba(164, 10, 28, .30) !important;
    background: var(--hq-accent-soft) !important;
    color: var(--hq-accent-hover) !important;
}

html body :is(.db-ruestmatrix-modal-kicker, .db-ruestmatrix-summary-update strong) {
    color: var(--hq-accent-hover) !important;
}

html body .db-ruestmatrix-spinner {
    border-top-color: var(--hq-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   Einheitliche Aktionsbuttons und Werkzeug-Service
   -------------------------------------------------------------------------- */
html body .wp-import-action,
html body button.backup-import-btn,
html body #scm-gesamtliste-import-btn,
html body button[onclick="oeffneScmEinzelimport()"],
html body button.umsatz-planung-primary-btn,
html body button.fp-entry-sap-import,
html body #fp-sap-import-save,
html body .werkzeug-modern-top-btn.primary,
html body[data-view="werkzeuge"] .werkzeug-actions button.primary,
html body[data-view="werkzeuge"] .werkzeuge-open-btn {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(164, 10, 28, .20) !important;
    text-shadow: none !important;
}

html body .wp-import-action:hover:not(:disabled),
html body[data-view="werkzeuge"] .werkzeug-actions button.primary:hover:not(:disabled),
html body .werkzeug-modern-top-btn.primary:hover:not(:disabled) {
    border-color: var(--hq-accent-hover) !important;
    background: var(--hq-accent-hover) !important;
}

html body button.wp-save-action,
html body button.wp-save-action:hover:not(:disabled),
html body button.wp-save-action:focus-visible:not(:disabled) {
    border-color: #b6bfc9 !important;
    background: linear-gradient(180deg, #ffffff, #e8edf2 54%, #c6cdd6) !important;
    background-image: linear-gradient(180deg, #ffffff, #e8edf2 54%, #c6cdd6) !important;
    color: #15181c !important;
    -webkit-text-fill-color: #15181c !important;
    box-shadow: inset 0 1px #ffffff, 0 5px 13px rgba(32,40,48,.15) !important;
    text-shadow: none !important;
}

html body[data-view="werkzeuge"] .werkzeug-toggle-btn.active i,
html body[data-view="werkzeuge"] .werkzeug-toggle-btn.active i::after,
html body[data-view="werkzeuge"] .werkzeug-editor-status-btn.active {
    border-color: var(--hq-accent-dark) !important;
    background: var(--hq-accent-dark) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Heatmap / Kapazität
   -------------------------------------------------------------------------- */
html body[data-view="capacity"] .capacity-page-hero {
    background: linear-gradient(145deg, #ffffff 0%, #eef1f3 100%) !important;
    border-color: #d2d6d9 !important;
}

html body[data-view="capacity"] :is(
    .capacity-mode-switch button.active,
    .capacity-action-btn.is-active,
    .capacity-quarter-btn.is-active
) {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px var(--hq-accent-ring) !important;
}

html body[data-view="capacity"] :is(.capacity-week-head.is-selected, .capacity-cell.is-selected) {
    border-color: var(--hq-accent-dark) !important;
    box-shadow: inset 0 0 0 1px var(--hq-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   Planung, Blockansicht und Anlagenboard: helle HYMOTEQ-Silberaktionen.
   Rot ist Warnungen/Fehlern vorbehalten; Schrift bleibt dunkel.
   -------------------------------------------------------------------------- */
html body.production-area-light[data-view="bereich"] #admin-bereich-controls :is(.bkz-notes-btn, .bkz-excel-btn, .bkz-add-btn),
html body.planning-edit-light[data-view="admin-edit"] :is(.add-entry-btn, .planning-notes-actions .primary),
html body :is(.planer-excel-btn, .bereich-excel-btn) {
    border-color: #929aa3 !important;
    background: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    background-image: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    color: #14181d !important;
    -webkit-text-fill-color: #14181d !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 6px 14px rgba(37,43,50,.16) !important;
    text-shadow: none !important;
}

html body.production-area-light[data-view="bereich"] #admin-bereich-controls :is(.bkz-notes-btn, .bkz-excel-btn, .bkz-add-btn):hover,
html body.planning-edit-light[data-view="admin-edit"] :is(.add-entry-btn, .planning-notes-actions .primary):hover,
html body :is(.planer-excel-btn, .bereich-excel-btn):hover {
    border-color: #6e7882 !important;
    background: linear-gradient(145deg, #ffffff 0%, #e8edf1 30%, #b8c0c8 58%, #e9edf1 100%) !important;
    background-image: linear-gradient(145deg, #ffffff 0%, #e8edf1 30%, #b8c0c8 58%, #e9edf1 100%) !important;
    color: #111419 !important;
    -webkit-text-fill-color: #111419 !important;
}

html body :is(
    .bereich-planungswerkzeug-option.is-active,
    .bereich-planungswerkzeug-option[aria-pressed="true"],
    .planning-tool-option.is-active,
    .planning-tool-option[aria-pressed="true"],
    .anlagen-layout-option.active
) {
    border-color: #8d959e !important;
    background: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    background-image: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    color: #14181d !important;
    -webkit-text-fill-color: #14181d !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 4px 11px rgba(37,43,50,.15) !important;
}

html body :is(
    .anlagenboard-save-btn,
    .anlagenboard-excel-btn,
    .anlagenboard-primary-btn,
    .anlagenboard-machine-save-btn
) {
    border-color: #89939d !important;
    background: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    background-image: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    color: #11161c !important;
    -webkit-text-fill-color: #11161c !important;
    box-shadow: inset 0 1px 0 #ffffff, 0 5px 13px rgba(37,43,50,.18) !important;
    text-shadow: none !important;
}

html body :is(
    .anlagenboard-save-btn,
    .anlagenboard-excel-btn,
    .anlagenboard-primary-btn,
    .anlagenboard-machine-save-btn
):hover:not(:disabled) {
    border-color: #65717b !important;
    background: linear-gradient(145deg, #ffffff 0%, #e8edf1 30%, #b8c0c8 58%, #e9edf1 100%) !important;
    background-image: linear-gradient(145deg, #ffffff 0%, #e8edf1 30%, #b8c0c8 58%, #e9edf1 100%) !important;
    color: #11161c !important;
    -webkit-text-fill-color: #11161c !important;
}

html body .anlagenboard-kw-target:is(.is-current, .is-hover-target) {
    border-color: #838c95 !important;
    background: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    background-image: linear-gradient(145deg, #ffffff 0%, #edf0f3 24%, #c9ced4 53%, #f5f6f8 77%, #c5cbd1 100%) !important;
    color: #11161c !important;
    -webkit-text-fill-color: #11161c !important;
    box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(37,43,50,.16) !important;
}

html body .anlagenboard-machine-zoom-btn:hover,
html body .anlagenboard-machine-zoom-btn:focus-visible {
    border-color: #7f8891 !important;
    background: linear-gradient(145deg, #ffffff 0%, #e8edf1 30%, #b8c0c8 58%, #e9edf1 100%) !important;
    color: #11161c !important;
}

/* --------------------------------------------------------------------------
   Leergut: Silber für normale Aktionen; Emblem und Schrift schwarz.
   -------------------------------------------------------------------------- */
html body[data-view="leergut"] :is(.leergut-main-tabs button.active, .leergut-area-tabs button.active),
html body[data-view="logistics-home"] :is(.leergut-main-tabs button.active, .leergut-area-tabs button.active) {
    border-color: #b6bfc9 !important;
    background: linear-gradient(180deg, #ffffff, #e8edf2 54%, #c6cdd6) !important;
    color: #15181c !important;
    -webkit-text-fill-color: #15181c !important;
}

html body[data-view="leergut"] .leergut-page-head::before,
html body[data-view="logistics-home"] .leergut-page-head::before {
    background: linear-gradient(180deg, #b7bdc4, #777f89) !important;
}

html body :is(.leergut-page-emblem, .leergut-page-head small) {
    color: #15181c !important;
    -webkit-text-fill-color: #15181c !important;
}

html body .leergut-btn.primary {
    border-color: #b6bfc9 !important;
    background: linear-gradient(180deg, #ffffff, #e8edf2 54%, #c6cdd6) !important;
    color: #15181c !important;
    -webkit-text-fill-color: #15181c !important;
}

html body .leergut-btn.primary:hover:not(:disabled) {
    border-color: #9ca5af !important;
    background: linear-gradient(180deg, #ffffff, #d9e0e7) !important;
}

html body #leergut-submit-order {
    border-color: #b6bfc9 !important;
    background: linear-gradient(180deg, #ffffff, #e8edf2 54%, #c6cdd6) !important;
    color: #15181c !important;
    -webkit-text-fill-color: #15181c !important;
}

html body .leergut-logistics-modal .leergut-order-complete-action {
    border-color: #4e7657 !important;
    background: #5f7f66 !important;
    color: #ffffff !important;
}

html body .leergut-logistics-modal .leergut-order-print-action {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   WerkPilot-Assistent: gleiche Figur und Animation, neue rote Akzente
   -------------------------------------------------------------------------- */
.werkpilot-login-assistant,
.wp-assistant-note-overlay {
    --wp-red: var(--hq-accent-dark) !important;
    --wp-red-deep: var(--hq-accent-hover) !important;
}

.wp-assistant-speech,
.wp-assistant-speech::before {
    border-color: rgba(164, 10, 28, .55) !important;
}

.wp-assistant-toggle:focus-visible,
.wp-assistant-chat-close:focus-visible,
.wp-assistant-conversation-actions button:focus-visible,
.wp-assistant-quick-actions button:focus-visible,
.wp-assistant-form textarea:focus-visible,
.wp-assistant-form button:focus-visible {
    outline-color: rgba(164, 10, 28, .30) !important;
}

.werkpilot-login-assistant.is-compact.is-notifying .wp-assistant-speech strong::before,
.wp-assistant-context::before,
.wp-assistant-notes-count,
.wp-assistant-note-tabs button.is-active,
.wp-assistant-note-actions .primary {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(164, 10, 28, .20) !important;
}

.wp-assistant-chat-close:hover,
.wp-assistant-conversation-actions button:hover:not(:disabled),
#wp-assistant-notes-open,
.wp-assistant-quick-actions button:hover,
.wp-assistant-note-tabs button:hover,
.wp-assistant-note-tabs button:focus-visible,
.wp-assistant-note-card-actions button:hover,
.wp-assistant-note-card-actions button:focus-visible {
    border-color: rgba(164, 10, 28, .40) !important;
    background: var(--hq-accent-soft) !important;
    color: var(--hq-accent-hover) !important;
}

#wp-assistant-notes-open:hover:not(:disabled) {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    color: #ffffff !important;
}

.wp-assistant-message-user .wp-assistant-message-content,
.wp-assistant-form button {
    border-color: var(--hq-accent-border) !important;
    background: linear-gradient(145deg, var(--hq-accent-bright), var(--hq-accent-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 13px rgba(164, 10, 28, .20) !important;
}

.wp-assistant-messages {
    background: radial-gradient(circle at 100% 0, rgba(164, 10, 28, .05), transparent 34%), #ffffff !important;
}

.wp-assistant-form textarea:focus,
.wp-assistant-note-body :is(textarea, input):focus {
    border-color: var(--hq-accent-dark) !important;
    box-shadow: 0 0 0 3px rgba(164, 10, 28, .12) !important;
}

.wp-assistant-note-dialog {
    border-top-color: var(--hq-accent-dark) !important;
}

.wp-assistant-note-head {
    box-shadow: inset 4px 0 0 var(--hq-accent-dark) !important;
}

.wp-assistant-note-head small,
.wp-assistant-message.is-loading .wp-assistant-message-content::after {
    color: var(--hq-accent-hover) !important;
}

.wp-assistant-note-card:not(.is-due) {
    border-left-color: var(--hq-accent-dark) !important;
}

/* --------------------------------------------------------------------------
   Fachliche Farben – bewusst NICHT auf HYMOTEQ-Rot umstellen
   -------------------------------------------------------------------------- */
html body .modern-user-avatar[data-user-status="offline"],
html body .planning-hub-status-card.is-inactive {
    --werkpilot-hub-kachel-akzent: var(--wp-danger) !important;
    --werkpilot-hub-pfeilfarbe: var(--wp-danger) !important;
}

html body .modern-user-avatar[data-user-status="offline"] {
    background: var(--wp-danger) !important;
}

html body .modern-production-card.inaktiv {
    --werkpilot-produktionsbereich-statusstrich: var(--wp-danger) !important;
}

html body .anlage-card.inaktiv {
    --werkpilot-anlage-statusstrich: var(--wp-danger) !important;
}

html body .anlage-card.inaktiv .anlage-status-badge {
    color: #15181c !important;
}

html body :is(
    .anlagenboard-danger-btn,
    .db-anlagenparameter-remove-btn,
    .db-param-row-remove,
    .messages-delete-btn,
    .werkzeug-mini-btn.danger,
    .leergut-order-close-action
) {
    border-color: #b84c54 !important;
    background: #b84c54 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.planning-edit-light[data-view="admin-edit"] .planung-entry-actions :is(
    [onclick*="entferne"],
    [onclick*="Entfern"],
    [onclick*="loesche"]
),
#wp-assistant-conversation-delete,
.wp-assistant-note-card-actions button[data-action="delete"] {
    border-color: rgba(213, 0, 28, .35) !important;
    background: #fff1f3 !important;
    color: var(--wp-danger) !important;
    -webkit-text-fill-color: var(--wp-danger) !important;
    box-shadow: none !important;
}

#wp-assistant-conversation-delete:hover:not(:disabled),
.wp-assistant-note-card-actions button[data-action="delete"]:hover {
    border-color: var(--wp-danger) !important;
    background: var(--wp-danger) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #database-view #db-table-body td:last-child button:last-child,
html body #database-view .artikel-db-table-wrap td:last-child button:last-child {
    border-color: rgba(213, 0, 28, .34) !important;
    background: #fff1f3 !important;
    color: var(--wp-danger) !important;
}

html body .modern-notification.has-leergut-notification .modern-admin-request-badge,
html body .messages-thread-badge {
    background: var(--wp-danger) !important;
    color: #ffffff !important;
}

html body .leergut-logistics-shell .leergut-order-card.is-open {
    border-left-color: #c33e47 !important;
}

html body .leergut-required-message-window {
    border-top-color: var(--wp-danger) !important;
}

.werkpilot-login-assistant :is(
    .wp-assistant-reminder-indicator.is-due,
    .wp-assistant-reminder-confirm,
    .is-reminder-alert .wp-assistant-speech strong::before
),
.wp-assistant-note-status.is-due {
    border-color: var(--wp-danger) !important;
    background: var(--wp-danger) !important;
    color: #ffffff !important;
}

.wp-assistant-note-empty.is-error,
.wp-assistant-note-inline-error,
.wp-assistant-note-error {
    color: var(--wp-danger) !important;
}

/* --------------------------------------------------------------------------
   Rot-Kontrast v37: fließende Konturen, Produktionshub und Admin
   -------------------------------------------------------------------------- */

/* Kopfzeile: Rot nur abschnittsweise in der Kontur, die Flächen bleiben hell. */
html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-nav-group {
    border: 1px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(112deg,
            rgba(164, 10, 28, .92) 0%,
            rgba(197, 16, 36, .44) 14%,
            #c8d2d6 36%,
            #e2e7e9 50%,
            #c2ccd0 66%,
            #c2ccd0 100%) border-box !important;
    border-right-width: 1px !important;
    box-shadow:
        0 9px 22px rgba(20, 24, 28, .08),
        inset 1px 0 0 rgba(139, 151, 158, .16),
        inset 0 1px 0 rgba(139, 151, 158, .16),
        inset 0 -1px 0 rgba(139, 151, 158, .16) !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-period-group {
    border: 1px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(112deg,
            rgba(164, 10, 28, .92) 0%,
            rgba(197, 16, 36, .44) 14%,
            #c8d2d6 36%,
            #e2e7e9 50%,
            #c2ccd0 66%,
            rgba(164, 10, 28, .58) 100%) border-box !important;
    box-shadow: 0 9px 22px rgba(20, 24, 28, .08), 0 0 0 1px rgba(139, 151, 158, .16) inset !important;
}

/* Hauptnavigation: links und rechts identischer Innenabstand.
   Dadurch bleiben erste und letzte Navigationskachel gleich weit von der Außenkontur entfernt. */
html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) .modern-nav-group {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

html body.werkpilot-header-branding[data-view]:not([data-view="login"]):not([data-view="register"]):not([data-view="twofa"]) :is(
    .modern-notification,
    .modern-user-group,
    .modern-power-btn
) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(180deg, #f5f7f8 0%, #e8ecee 100%) padding-box,
        linear-gradient(122deg,
            rgba(164, 10, 28, .76) 0%,
            #d8e0e3 34%,
            #eef1f2 50%,
            #cbd1d5 67%,
            rgba(164, 10, 28, .48) 100%) border-box !important;
    box-shadow: 0 7px 18px rgba(20, 24, 28, .07), 0 0 0 1px rgba(139, 151, 158, .14) inset !important;
}

/* Die beiden zentralen Produktionsmodule erhalten zuverlässig ihren Rot-Strich. */
html body[data-view="production-home"] #production-home-view .planning-hub-card.leergut-module-hub-card::before {
    background: linear-gradient(180deg, var(--hq-accent-bright), var(--hq-accent-dark) 68%, var(--hq-accent-hover)) !important;
    box-shadow: none !important;
}

html body[data-view="production-home"] #production-home-view .planning-hub-card.leergut-module-hub-card .planning-hub-card-meta span:last-child {
    color: var(--hq-accent-dark) !important;
    -webkit-text-fill-color: var(--hq-accent-dark) !important;
}

/* Kompaktes Assistentenportal: letzte rote Reflexion durch neutrales Weiß ersetzen. */
.werkpilot-login-assistant.is-compact .wp-assistant-portal-back::before {
    border-color: rgba(250, 250, 251, .94) !important;
    background: radial-gradient(ellipse at center,
        #fafafb 0%,
        #dfe4e7 18%,
        #747c82 44%,
        #30363b 67%,
        #111519 100%) !important;
    box-shadow:
        0 0 12px rgba(255, 255, 255, .78),
        inset 0 0 10px rgba(255, 255, 255, .58),
        inset 0 -5px 8px rgba(64, 58, 64, .58) !important;
}

/* Admin: Weiß/Grau/Rot mit derselben teilweise verlaufenden Kontur. */
html body #admin-users-view .admin-modern-page-head {
    border: 1px solid transparent !important;
    background:
        linear-gradient(112deg, #ffffff 0%, #ffffff 63%, #eef2f3 100%) padding-box,
        linear-gradient(116deg,
            rgba(164, 10, 28, .88) 0%,
            rgba(255, 255, 255, .98) 34%,
            #cbd1d5 66%,
            rgba(164, 10, 28, .56) 100%) border-box !important;
}

html body #admin-users-view .admin-modern-page-head::before {
    background: linear-gradient(180deg, var(--hq-accent-bright), var(--hq-accent-dark) 70%, var(--hq-accent-hover)) !important;
}

html body #admin-users-view :is(.admin-modern-metric, .admin-modern-panel) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(145deg, #ffffff 0%, #fafbfb 58%, #f0f3f4 100%) padding-box,
        linear-gradient(124deg,
            rgba(164, 10, 28, .66) 0%,
            rgba(255, 255, 255, .98) 27%,
            #d2d7da 67%,
            rgba(164, 10, 28, .42) 100%) border-box !important;
}

html body #admin-users-view .admin-modern-footer,
html body :is(.admin-detail-window, .admin-invite-detail-window) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(145deg, #ffffff, #f2f5f6) padding-box,
        linear-gradient(120deg,
            rgba(164, 10, 28, .74) 0%,
            rgba(255, 255, 255, .98) 32%,
            #cbd1d5 70%,
            rgba(164, 10, 28, .46) 100%) border-box !important;
}

html body #admin-users-view :is(
    .admin-modern-metric-icon,
    .admin-modern-panel-title > span,
    .admin-panel-head-plain-icon,
    .admin-row-icon
) {
    border-color: rgba(164, 10, 28, .24) !important;
    background: linear-gradient(145deg, #ffffff, var(--hq-accent-soft)) !important;
    color: var(--hq-accent-dark) !important;
}

html body #admin-users-view .admin-modern-metric-inbox strong {
    color: var(--hq-accent-dark) !important;
}

html body #admin-users-view .admin-modern-metric-inbox .admin-modern-metric-icon {
    border-color: rgba(164, 10, 28, .24) !important;
    background: linear-gradient(145deg, #ffffff, var(--hq-accent-soft)) !important;
    color: var(--hq-accent-dark) !important;
}

html body #admin-users-view :is(
    .admin-top-refresh,
    .admin-add-user-btn,
    .admin-security-btn:not(.admin-security-btn-secondary),
    .admin-inbox-refresh-btn
),
html body .admin-invite-detail-window .admin-security-btn:not(.admin-security-btn-secondary) {
    border-color: var(--hq-accent-border) !important;
    background: linear-gradient(180deg, var(--hq-accent), var(--hq-accent-dark)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 8px 17px rgba(164, 10, 28, .18), inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html body #admin-users-view :is(
    .admin-top-refresh,
    .admin-add-user-btn,
    .admin-security-btn:not(.admin-security-btn-secondary),
    .admin-inbox-refresh-btn
):hover,
html body .admin-invite-detail-window .admin-security-btn:not(.admin-security-btn-secondary):hover {
    border-color: var(--hq-accent-hover) !important;
    background: var(--hq-accent-hover) !important;
}

html body #admin-users-view .admin-security-btn-secondary,
html body .admin-invite-detail-window .admin-security-btn-secondary {
    border-color: #cbd0d4 !important;
    background: linear-gradient(180deg, #ffffff, #eceff1) !important;
    color: #30353a !important;
    -webkit-text-fill-color: #30353a !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
}

html body #admin-users-view :is(.admin-mini-select, .admin-form-group input, .admin-form-group select):focus,
html body .admin-invite-detail-window .admin-form-group :is(input, select):focus {
    border-color: var(--hq-accent-dark) !important;
    box-shadow: 0 0 0 3px var(--hq-accent-ring) !important;
}

html body #admin-users-view :is(.admin-system-row, .admin-preview-row):hover {
    border-color: rgba(164, 10, 28, .34) !important;
    background: linear-gradient(135deg, #ffffff, var(--hq-accent-soft)) !important;
}

html body #admin-users-view .admin-chevron,
html body #admin-users-view .admin-all-show-btn:hover {
    color: var(--hq-accent-dark) !important;
}

html body #admin-users-view .admin-all-show-btn:hover {
    border-color: rgba(164, 10, 28, .34) !important;
    background: var(--hq-accent-soft) !important;
}

html body #admin-users-view .admin-role-pill:is(
    .role-admin,
    .role-planung,
    .role-logistik,
    .role-logistikleitung
) {
    border-color: rgba(164, 10, 28, .32) !important;
    background: var(--hq-accent-soft) !important;
    color: var(--hq-accent-hover) !important;
}

html body #admin-users-view .admin-role-pill.role-admin,
html body #admin-users-view .admin-role-pill.role-logistikleitung {
    border-color: var(--hq-accent-border) !important;
    background: var(--hq-accent-dark) !important;
    color: #ffffff !important;
}

html body #admin-users-view .admin-you-pill {
    border-color: rgba(164, 10, 28, .30) !important;
    background: var(--hq-accent-soft) !important;
    color: var(--hq-accent-hover) !important;
}

html body .admin-invite-detail-window {
    border-top: 4px solid var(--hq-accent-dark) !important;
}

html body .admin-invite-detail-window .admin-modern-panel-title > span {
    border-color: rgba(164, 10, 28, .28) !important;
    background: var(--hq-accent-soft) !important;
    color: var(--hq-accent-dark) !important;
}

/* Excel-Übersicht: Schwarz auf Weiß mit Rot-Rahmen. */
html body.excel-overview-light[data-view="excel"] .excel-plan-title,
html body.excel-overview-light[data-view="excel"] .excel-plan-subline,
html body.excel-overview-light[data-view="excel"] .excel-plan-subline span,
html body.excel-overview-light[data-view="excel"] .excel-plan-subline strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
}

html body.excel-overview-light[data-view="excel"] .excel-druck-buttons .bkz-print-btn,
html body.excel-overview-light[data-view="excel"] :is(.excel-layout-tool-btn, .excel-idle-toggle-btn) {
    border-color: var(--hq-accent) !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 0 8px 18px rgba(20, 24, 28, .08) !important;
}

html body.excel-overview-light[data-view="excel"] .excel-druck-buttons .bkz-print-btn:hover,
html body.excel-overview-light[data-view="excel"] :is(.excel-layout-tool-btn, .excel-idle-toggle-btn):hover {
    border-color: var(--hq-accent-dark) !important;
    background: var(--hq-accent-soft) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html body.excel-overview-light[data-view="excel"] .excel-plan-title-box::before {
    background: var(--hq-accent) !important;
}

/* --------------------------------------------------------------------------
   Startseite: exakt dieselbe Kacheloptik wie in den Unterkategorien
   -------------------------------------------------------------------------- */
html body[data-view="start"] #main-view-container #start-view .start-container {
    width: min(1460px, 100%) !important;
    max-width: 1460px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(210px, 1fr)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 22px !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 260px !important;
    min-height: 260px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid #d7d9dc !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, transparent 0 58%, rgba(90, 96, 102, .035) 59% 60%, transparent 61%),
        repeating-linear-gradient(145deg, transparent 0 18px, rgba(90, 96, 102, .024) 19px 20px),
        #ffffff !important;
    color: #151515 !important;
    box-shadow: 0 18px 40px rgba(20, 24, 28, .10) !important;
    text-align: center !important;
    appearance: none !important;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px auto 22px 0 !important;
    width: 4px !important;
    border-radius: 0 4px 4px 0 !important;
    background: linear-gradient(180deg, var(--hq-accent-bright), var(--hq-accent-dark) 68%, var(--hq-accent-hover)) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(145deg, transparent 0 58%, rgba(90, 96, 102, .035) 59% 60%, transparent 61%),
        repeating-linear-gradient(145deg, transparent 0 18px, rgba(90, 96, 102, .024) 19px 20px) !important;
    opacity: 1 !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel:hover {
    transform: translateY(-4px) !important;
    border-color: #c4c7ca !important;
    box-shadow: 0 22px 46px rgba(20, 24, 28, .14) !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel-icon {
    position: absolute !important;
    left: 50% !important;
    top: 48px !important;
    z-index: 2 !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    border: 1px solid #d8dbde !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #22252a !important;
    box-shadow: 0 8px 22px rgba(20, 24, 28, .09) !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel-icon::before,
html body[data-view="start"] #main-view-container #start-view .start-kachel-icon::after {
    content: none !important;
    display: none !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel-icon svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    color: #22252a !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel h2,
html body[data-view="start"] #main-view-container #start-view #planung-start-kachel h2,
html body[data-view="start"] #main-view-container #start-view #werkzeuge-start-kachel h2 {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 92% !important;
    min-height: 92px !important;
    margin: 64px auto 0 !important;
    padding: 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(24px, 1.55vw, 30px) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: -.025em !important;
    text-align: center !important;
    text-shadow: none !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel-arrow {
    position: absolute !important;
    right: 26px !important;
    bottom: 24px !important;
    left: auto !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    color: var(--hq-accent-dark) !important;
    transition: transform .2s ease !important;
}

html body[data-view="start"] #main-view-container #start-view .start-kachel:hover .start-kachel-arrow {
    transform: translateX(4px) !important;
}

@media (max-width: 1180px) {
    html body[data-view="start"] #main-view-container #start-view .start-container {
        grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    html body[data-view="start"] #main-view-container #start-view .start-container {
        grid-template-columns: minmax(0, 420px) !important;
    }
}