/* ============================================================ WOODCAM – CI-Theme (1:1 aus app/inc/header.php extrahiert) Bootstrap 5 + Metronic 8, WOODPLAN-Farbwelt Kopiert am 2026-08-11 – bei Theme-Änderungen in der App hier nachziehen (bewusste Kopie, damit /woodcam autark ist). ============================================================ */ /* ============================================================ WOODPLAN ERP — CI Theme Override Bootstrap 5 + Metronic 8 Primaer: RAL 5009 Azurblau #2D6A9F R45 G106 B159 Akzent: RAL 1023 Verkehrsgelb #F9B700 R249 G183 B0 Signal: RAL 3020 Verkehrsrot #CC2529 R204 G37 B41 Version: 1.0 | 2026 ============================================================ */ :root { /* Header kompakter: weniger Freiraum oben/unten (Standard-Theme: 120px). Der gescrollte Sticky-Zustand bleibt unverändert bei 70px. */ --bs-app-header-height: 80px; --bs-app-header-height-actual: 80px; /* ── WOODPLAN RAW PALETTE ───────────────────────────────── */ /* Azure / Primaer */ --wp-azure-50: #EBF3FB; --wp-azure-100: #C8DFF3; --wp-azure-200: #A5CAEB; --wp-azure-300: #5A92C0; --wp-azure-400: #2D6A9F; /* RAL 5009 */ --wp-azure-500: #1B4F78; --wp-azure-600: #0D2E47; --wp-azure-700: #071D2E; /* Gold / Akzent */ --wp-gold-50: #FFF8E1; --wp-gold-100: #FFEEA0; --wp-gold-200: #FFD740; --wp-gold-300: #F9B700; /* RAL 1023 */ --wp-gold-400: #C48E00; --wp-gold-500: #8F6600; --wp-gold-600: #5A4000; /* Rot / Signal */ --wp-red-50: #FDECEA; --wp-red-100: #F5B8BA; --wp-red-200: #E85A5E; --wp-red-300: #CC2529; /* RAL 3020 */ --wp-red-400: #9A1A1D; --wp-red-500: #6B1113; /* Neutral / Stein */ --wp-stone-50: #F8F7F5; --wp-stone-100: #ECEAE5; --wp-stone-200: #D5D2CA; --wp-stone-300: #B8B4AB; --wp-stone-400: #8E8A82; --wp-stone-500: #636059; --wp-stone-600: #47443E; --wp-stone-700: #2E2C28; /* Erfolg / Grün */ --wp-success: #2E7D52; --wp-success-l: #EAF4EE; /* ── BOOTSTRAP 5 COLOR SYSTEM ──────────────────────────── */ /* Primary */ --bs-primary: #2D6A9F; --bs-primary-rgb: 45, 106, 159; --bs-primary-text-emphasis:#1B4F78; --bs-primary-bg-subtle: #EBF3FB; --bs-primary-border-subtle:#A5CAEB; /* Secondary */ --bs-secondary: #8E8A82; --bs-secondary-rgb: 142, 138, 130; --bs-secondary-text-emphasis: #47443E; --bs-secondary-bg-subtle: #F8F7F5; --bs-secondary-border-subtle: #D5D2CA; /* Success */ --bs-success: #2E7D52; --bs-success-rgb: 46, 125, 82; --bs-success-text-emphasis:#1E5C3A; --bs-success-bg-subtle: #EAF4EE; --bs-success-border-subtle:#90CCA0; /* Info */ --bs-info: #2D6A9F; --bs-info-rgb: 45, 106, 159; --bs-info-text-emphasis: #1B4F78; --bs-info-bg-subtle: #EBF3FB; --bs-info-border-subtle: #A5CAEB; /* Warning */ --bs-warning: #F9B700; --bs-warning-rgb: 249, 183, 0; --bs-warning-text-emphasis:#8F6600; --bs-warning-bg-subtle: #FFF8E1; --bs-warning-border-subtle:#FFD740; /* Danger */ --bs-danger: #CC2529; --bs-danger-rgb: 204, 37, 41; --bs-danger-text-emphasis: #9A1A1D; --bs-danger-bg-subtle: #FDECEA; --bs-danger-border-subtle: #F5B8BA; /* Light / Dark */ --bs-light: #F8F7F5; --bs-light-rgb: 248, 247, 245; --bs-dark: #0D2E47; --bs-dark-rgb: 13, 46, 71; /* Body */ --bs-body-color: #2E2C28; --bs-body-color-rgb: 46, 44, 40; --bs-emphasis-color: #0D2E47; --bs-emphasis-color-rgb: 13, 46, 71; /* Secondary text */ --bs-secondary-color: rgba(46,44,40,.65); --bs-secondary-bg: #ECEAE5; --bs-tertiary-color: rgba(46,44,40,.45); --bs-tertiary-bg: #F8F7F5; /* Heading */ --bs-heading-color: #0D2E47; /* Links */ --bs-link-color: #2D6A9F; --bs-link-color-rgb: 45, 106, 159; --bs-link-hover-color: #1B4F78; --bs-link-hover-color-rgb: 27, 79, 120; /* Typography */ --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif; --bs-font-monospace: 'JetBrains Mono', 'Fira Code', monospace; /* Borders */ --bs-border-color: #D5D2CA; --bs-border-color-translucent: rgba(13,46,71,.12); /* Border radius */ --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.3125rem; --bs-border-radius-lg: 0.75rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 1.5rem; --bs-border-radius-pill: 50rem; /* Shadows */ --bs-box-shadow: 0 2px 8px rgba(13,46,71,.12); --bs-box-shadow-sm: 0 1px 3px rgba(13,46,71,.08); --bs-box-shadow-lg: 0 4px 20px rgba(13,46,71,.16); --bs-box-shadow-inset: inset 0 1px 2px rgba(13,46,71,.08); /* Focus */ --bs-focus-ring-width: 3px; --bs-focus-ring-opacity: .25; --bs-focus-ring-color: rgba(249,183,0,.35); /* Form check */ --bs-form-check-input-checked-bg-color: #2D6A9F; --bs-form-check-input-checked-border-color: #2D6A9F; --bs-form-check-input-focus-border: #5A92C0; --bs-form-check-input-indeterminate-bg-color: #2D6A9F; /* Form select */ --bs-form-select-focus-box-shadow: 0 0 0 3px rgba(45,106,159,.2); /* Nav */ --bs-nav-link-color: #2D6A9F; --bs-nav-link-hover-color: #1B4F78; --bs-nav-tabs-border-color:#D5D2CA; --bs-nav-tabs-link-active-color: #0D2E47; --bs-nav-tabs-link-active-bg: #F8F7F5; --bs-nav-pills-link-active-color: #fff; --bs-nav-pills-link-active-bg: #2D6A9F; /* Navbar */ --bs-navbar-color: rgba(255,255,255,.8); --bs-navbar-hover-color: rgba(255,255,255,1); --bs-navbar-active-color: #F9B700; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #F9B700; --bs-navbar-toggler-border-color: rgba(255,255,255,.2); /* Dropdown */ --bs-dropdown-bg: #fff; --bs-dropdown-border-color: #D5D2CA; --bs-dropdown-link-color: #2E2C28; --bs-dropdown-link-hover-color: #0D2E47; --bs-dropdown-link-hover-bg: #EBF3FB; --bs-dropdown-link-active-color:#fff; --bs-dropdown-link-active-bg: #2D6A9F; --bs-dropdown-divider-bg: #D5D2CA; /* Pagination */ --bs-pagination-color: #2D6A9F; --bs-pagination-bg: #fff; --bs-pagination-border-color: #D5D2CA; --bs-pagination-hover-color: #1B4F78; --bs-pagination-hover-bg: #EBF3FB; --bs-pagination-hover-border-color: #A5CAEB; --bs-pagination-active-color: #fff; --bs-pagination-active-bg: #2D6A9F; --bs-pagination-active-border-color: #2D6A9F; --bs-pagination-disabled-color: #B8B4AB; --bs-pagination-disabled-bg: #F8F7F5; /* Card */ /* Accordion */ --bs-accordion-bg: #fff; --bs-accordion-border-color: #D5D2CA; --bs-accordion-btn-color: #0D2E47; --bs-accordion-btn-active-color: #2D6A9F; --bs-accordion-btn-active-bg: #EBF3FB; --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(45,106,159,.2); --bs-accordion-active-color: #2D6A9F; --bs-accordion-active-bg: #EBF3FB; /* List group */ --bs-list-group-bg: #fff; --bs-list-group-border-color: #D5D2CA; --bs-list-group-action-hover-color: #0D2E47; --bs-list-group-action-hover-bg: #EBF3FB; --bs-list-group-action-active-bg: #ECEAE5; --bs-list-group-active-color: #fff; --bs-list-group-active-bg: #2D6A9F; --bs-list-group-active-border-color: #2D6A9F; /* Toast */ --bs-toast-bg: rgba(255,255,255,.92); --bs-toast-border-color: rgba(13,46,71,.12); --bs-toast-header-bg: rgba(248,247,245,.85); --bs-toast-header-border-color: rgba(13,46,71,.1); /* Tooltip */ --bs-tooltip-bg: #0D2E47; --bs-tooltip-color: #fff; /* Popover */ --bs-popover-bg: #fff; --bs-popover-border-color: #A5CAEB; --bs-popover-header-bg: #EBF3FB; --bs-popover-header-color: #0D2E47; --bs-popover-body-color: #2E2C28; /* Modal */ --bs-modal-bg: #fff; --bs-modal-border-color: #D5D2CA; --bs-modal-header-bg: #F8F7F5; --bs-modal-content-border-color: rgba(13,46,71,.12); /* Offcanvas */ --bs-offcanvas-bg: #0D2E47; --bs-offcanvas-color: rgba(255,255,255,.85); --bs-offcanvas-border-color:rgba(45,106,159,.3); /* Progress */ --bs-progress-bg: #ECEAE5; --bs-progress-bar-bg: #2D6A9F; --bs-progress-bar-color: #fff; /* Table */ --bs-table-color: #2E2C28; --bs-table-bg: transparent; --bs-table-striped-bg: rgba(45,106,159,.04); --bs-table-striped-color: #2E2C28; --bs-table-hover-bg: rgba(45,106,159,.07); --bs-table-hover-color: #2E2C28; --bs-table-border-color: #D5D2CA; --bs-table-active-bg: rgba(249,183,0,.1); /* Badge */ --bs-badge-padding-x: 0.55em; --bs-badge-padding-y: 0.3em; --bs-badge-font-size: 0.73em; --bs-badge-font-weight: 600; --bs-badge-color: #fff; --bs-badge-border-radius: 0.35rem; /* Breadcrumb */ --bs-breadcrumb-divider-color: #B8B4AB; --bs-breadcrumb-item-active-color: #8E8A82; /* Close button */ --bs-btn-close-color: #0D2E47; --bs-btn-close-focus-shadow:0 0 0 3px rgba(45,106,159,.2); /* ── METRONIC 8 KT-VARIABLES ────────────────────────────── */ /* Primary */ --kt-primary: #2D6A9F; --kt-primary-active: #1B4F78; --kt-primary-light: #EBF3FB; --kt-primary-light-dark: #1B4F78; --kt-primary-clarity: rgba(45,106,159,.2); --kt-primary-inverse: #ffffff; /* Secondary */ --kt-secondary: #8E8A82; --kt-secondary-active: #636059; --kt-secondary-light: #F8F7F5; --kt-secondary-clarity: rgba(142,138,130,.2); --kt-secondary-inverse: #2E2C28; /* Success */ --kt-success: #2E7D52; --kt-success-active: #1E5C3A; --kt-success-light: #EAF4EE; --kt-success-clarity: rgba(46,125,82,.2); --kt-success-inverse: #ffffff; /* Info */ --kt-info: #2D6A9F; --kt-info-active: #1B4F78; --kt-info-light: #EBF3FB; --kt-info-clarity: rgba(45,106,159,.2); --kt-info-inverse: #ffffff; /* Warning */ --kt-warning: #F9B700; --kt-warning-active: #C48E00; --kt-warning-light: #FFF8E1; --kt-warning-clarity: rgba(249,183,0,.2); --kt-warning-inverse: #1B3A00; /* Danger */ --kt-danger: #CC2529; --kt-danger-active: #9A1A1D; --kt-danger-light: #FDECEA; --kt-danger-clarity: rgba(204,37,41,.2); --kt-danger-inverse: #ffffff; /* Dark */ --kt-dark: #0D2E47; --kt-dark-active: #071D2E; --kt-dark-light: #EBF3FB; --kt-dark-clarity: rgba(13,46,71,.2); --kt-dark-inverse: #ffffff; /* Light */ --kt-light: #F8F7F5; --kt-light-active: #ECEAE5; --kt-light-inverse: #2E2C28; /* White */ --kt-white: #ffffff; --kt-white-active: #F8F7F5; --kt-white-inverse: #2D6A9F; /* Text grays */ --kt-text-muted: #8E8A82; --kt-text-gray-100: #F8F7F5; --kt-text-gray-200: #ECEAE5; --kt-text-gray-300: #D5D2CA; --kt-text-gray-400: #B8B4AB; --kt-text-gray-500: #8E8A82; --kt-text-gray-600: #636059; --kt-text-gray-700: #47443E; --kt-text-gray-800: #2E2C28; --kt-text-gray-900: #0D2E47; /* Border */ --kt-border-color: #D5D2CA; --kt-border-dashed-color: #B8B4AB; /* Page */ --kt-page-bg: #F8F7F5; --kt-page-bg-dark: #071D2E; /* App Sidebar / Aside */ --kt-app-sidebar-base-bg-color: #0D2E47; --kt-app-sidebar-base-bg-color-dark: #071D2E; --kt-app-sidebar-base-menu-link-color: rgba(255,255,255,.7); --kt-app-sidebar-base-menu-link-icon-color: rgba(255,255,255,.45); --kt-app-sidebar-base-menu-link-hover-color: #ffffff; --kt-app-sidebar-base-menu-link-hover-icon-color: #F9B700; --kt-app-sidebar-base-menu-link-here-color: #ffffff; --kt-app-sidebar-base-menu-link-here-icon-color:#F9B700; --kt-app-sidebar-base-menu-link-active-color: #ffffff; --kt-app-sidebar-base-menu-link-active-icon-color: #F9B700; --kt-app-sidebar-base-menu-link-active-bg-color: rgba(45,106,159,.25); --kt-app-sidebar-base-menu-section-label-color: rgba(255,255,255,.3); --kt-app-sidebar-base-separator-border-color: rgba(255,255,255,.08); --kt-app-sidebar-base-scrollbar-color: rgba(255,255,255,.2); --kt-app-sidebar-base-scrollbar-hover-color: rgba(255,255,255,.4); /* Legacy Aside (Metronic 8 older) */ --kt-aside-bg-color: #0D2E47; --kt-aside-menu-link-color: rgba(255,255,255,.7); --kt-aside-menu-link-icon-color: rgba(255,255,255,.45); --kt-aside-menu-link-hover-color: #ffffff; --kt-aside-menu-link-hover-icon-color: #F9B700; --kt-aside-menu-link-here-color: #ffffff; --kt-aside-menu-link-here-icon-color: #F9B700; --kt-aside-menu-link-active-color: #ffffff; --kt-aside-menu-link-active-icon-color: #F9B700; --kt-aside-menu-link-active-bg-color: rgba(45,106,159,.25); --kt-aside-menu-heading-color: rgba(255,255,255,.3); --kt-aside-logo-bg-color: #071D2E; --kt-aside-scrollbar-color: rgba(255,255,255,.2); --kt-aside-user-info-name-color: #ffffff; --kt-aside-user-info-job-color: rgba(255,255,255,.55); --kt-aside-toggle-btn-box-shadow: 0 3px 10px rgba(13,46,71,.4); /* App Header */ --kt-app-header-base-bg-color: #ffffff; --kt-app-header-base-bg-color-dark: #0D2E47; --kt-app-header-base-border-bottom: 1px solid #D5D2CA; --kt-app-header-base-border-bottom-dark: 1px solid rgba(45,106,159,.2); --kt-app-header-base-box-shadow: 0 1px 6px rgba(13,46,71,.08); /* Toolbar */ --kt-toolbar-bg-color: #EBF3FB; --kt-toolbar-border-top: 1px solid #D5D2CA; /* Content */ --kt-content-bg-color: #F8F7F5; /* Cards */ /* Tables */ --kt-table-border-color: #D5D2CA; --kt-table-striped-bg: rgba(45,106,159,.04); --kt-table-hover-bg: rgba(45,106,159,.07); --kt-table-loading-message-bg: #ffffff; --kt-table-loading-message-box-shadow: 0 2px 8px rgba(13,46,71,.12); --kt-table-head-bg: #0D2E47; --kt-table-head-color: #ffffff; /* Datatables */ --kt-datatable-odd-row-bg: rgba(45,106,159,.03); --kt-datatable-lock-border-color: #D5D2CA; /* Forms */ --kt-input-bg: #ffffff; --kt-input-border-color: #D5D2CA; --kt-input-color: #2E2C28; --kt-input-placeholder-color: #B8B4AB; --kt-input-disabled-bg: #F8F7F5; --kt-input-disabled-color: #8E8A82; --kt-input-focus-border-color: #5A92C0; --kt-input-focus-box-shadow: 0 0 0 3px rgba(45,106,159,.18); --kt-input-solid-bg: #EBF3FB; --kt-input-solid-bg-focus: #FFF8E1; --kt-input-solid-color: #2E2C28; --kt-input-solid-placeholder-color: #8E8A82; /* Scrollbar */ --kt-scrollbar-color: #D5D2CA; --kt-scrollbar-hover-color: #5A92C0; /* Symbol / Avatar */ --kt-symbol-label-bg: #EBF3FB; --kt-symbol-label-color: #2D6A9F; /* Bullet */ --kt-bullet-bg-color: #B8B4AB; /* Timeline */ --kt-timeline-label-color: #8E8A82; --kt-timeline-border-color: #D5D2CA; /* Stepper */ --kt-stepper-icon-border-color: #D5D2CA; --kt-stepper-icon-check-color: #2D6A9F; --kt-stepper-label-title-opacity: .5; /* Chat */ --kt-chat-in-bg-color: #EBF3FB; --kt-chat-in-color: #2E2C28; --kt-chat-out-bg-color: #FFF8E1; --kt-chat-out-color: #2E2C28; /* Tree (jstree) */ --kt-treeview-hover-bg-color: #EBF3FB; --kt-treeview-active-bg-color: rgba(45,106,159,.12); --kt-treeview-active-color: #2D6A9F; /* Drawer */ --kt-drawer-overlay-bg-color: rgba(13,46,71,.4); /* Popover */ --kt-popover-bg: #ffffff; --kt-popover-border-color: #A5CAEB; /* Tooltip */ --kt-tooltip-bg: #0D2E47; --kt-tooltip-color: #ffffff; /* Badge light variants */ --kt-badge-primary-light-bg: #EBF3FB; --kt-badge-primary-light-color: #2D6A9F; --kt-badge-warning-light-bg: #FFF8E1; --kt-badge-warning-light-color: #C48E00; --kt-badge-danger-light-bg: #FDECEA; --kt-badge-danger-light-color: #9A1A1D; --kt-badge-success-light-bg: #EAF4EE; --kt-badge-success-light-color: #1E5C3A; --kt-badge-info-light-bg: #EBF3FB; --kt-badge-info-light-color: #1B4F78; --kt-badge-dark-light-bg: #EBF3FB; --kt-badge-dark-light-color: #0D2E47; /* Gradient tokens */ --wp-grd-brand: linear-gradient(135deg, #071D2E 0%, #0D2E47 50%, #5A4000 100%); --wp-grd-brand-h: linear-gradient(135deg, #0D2E47 0%, #F9B700 100%); --wp-grd-hero: linear-gradient(135deg, #071D2E 0%, #0D2E47 45%, #1B4F78 72%, #5A4000 100%); --wp-grd-azure: linear-gradient(135deg, #071D2E 0%, #0D2E47 40%, #2D6A9F 100%); --wp-grd-gold: linear-gradient(135deg, #5A4000 0%, #F9B700 55%, #FFD740 100%); --wp-grd-signal: linear-gradient(135deg, #CC2529 0%, #E85A5E 100%); --wp-grd-success: linear-gradient(135deg, #1E5C3A 0%, #2E7D52 100%); --wp-grd-dawn: linear-gradient(135deg, #FFF8E1 0%, #EBF3FB 100%); --wp-grd-mist: linear-gradient(135deg, #EBF3FB 0%, #F8F7F5 60%, #FFF8E1 100%); /* Legacy / Compatibility */ --bs-text-primary: #2D6A9F; --bs-primary-light: rgba(45,106,159,.12); --bs-btn-active-shadow: inset 0 2px 4px rgba(13,46,71,.15); } /* ── Active nav item accent ──────────────────────────────── */ .menu-item .menu-link.active .menu-title, .menu-item .menu-link.active .menu-icon i, .menu-item .menu-link.active .menu-icon svg path { color: #F9B700 !important; fill: #F9B700 !important; } /* ── Focus ring ──────────────────────────────────────────── */ :focus-visible { outline: 2px solid #F9B700; outline-offset: 2px; } /* ── Scrollbar ───────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background-color: #B8B4AB; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background-color: #5A92C0; } ::-webkit-scrollbar-track { background: transparent; } /* ── Brand Gradient Bar (linker Rand, fix) ───────────────── */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 7px; height: 100vh; background: linear-gradient(to top, #2D6A9F 0%, #2D6A9F 70%, #CC2529 100%); z-index: 99999; pointer-events: none; } /* ── Primary-Buttons: Hover hellt auf, statt zu verdunkeln ── */ .btn.btn-primary { --bs-btn-bg: #2D6A9F; --bs-btn-border-color: #2D6A9F; --bs-btn-hover-bg: #5A92C0; /* --wp-azure-300 */ --bs-btn-hover-border-color: #5A92C0; --bs-btn-active-bg: #5A92C0; --bs-btn-active-border-color: #5A92C0; --bs-btn-disabled-bg: #2D6A9F; --bs-btn-disabled-border-color: #2D6A9F; } .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:focus-visible, .btn.btn-primary:active, .btn.btn-primary.active, .btn-check:checked + .btn.btn-primary, .show > .btn.btn-primary.dropdown-toggle { background-color: #5A92C0 !important; border-color: #5A92C0 !important; color: #fff !important; } /* btn-light-primary (Metronic): Hover etwas heller statt voll Primary */ .btn.btn-light-primary:hover, .btn.btn-light-primary:focus, .btn.btn-light-primary:active, .btn.btn-light-primary.active { background-color: #5A92C0 !important; border-color: #5A92C0 !important; color: #fff !important; } /* Abstand unter dem Header verkleinern (Toolbar-Top-Padding). Theme-Standard: pt-7 = 1,75rem / pt-lg-10 = 2,5rem. */ #kt_app_toolbar { padding-top: 0.75rem !important; } @media (min-width: 992px) { #kt_app_toolbar { padding-top: 1rem !important; } } /* Desktop-Ausrichtung: Begrüßungstext linksbündig mit den Breadcrumbs, erste Favoriten-Icons oben bündig mit der Breadcrumb-Zeile. */ @media (min-width: 992px) { /* Logo-Spalte exakt so breit wie die Sidebar-Leiste, damit der Begrüßungstext an derselben Kante wie die Breadcrumbs beginnt. (Inhalt startet bei: Container-Padding + Sidebar-Breite.) */ #kt_app_header_wrapper .app-header-logo > a.wp-header-logo-link { width: var(--bs-app-sidebar-width); margin-right: 0 !important; display: inline-flex; align-items: center; flex-shrink: 0; } /* Sidebar oben bündig mit der Breadcrumb-Zeile: gleicher oberer Abstand wie das Toolbar-Top-Padding (Theme-Standard war 30px). */ #kt_app_sidebar { margin-top: 1rem !important; } }