.wrapper-left { --login-bg-img-path: none; background-color: #FFFFFF !important; } .brand-login { --logo-path: url("../img/WW_Logo_RGB.svg") !important; } .brand-login-wrapper .brand-login { height: 200% !important; } .key-visual { background-image: url('../img/csm_Nachhaltigkeit_spuerbar_machen_1b1d46bc5b.webp') !important; background-size: 100% !important; } .page-footer-start h1, .page-footer-start h2, .page-footer-start h3, .page-footer-start h4 { color: #717171 !important; } .key-visual .key-visual-heading span { width: 90vh !important; } .restricted-content-width { max-width: none !important; } .page-nav-wrapper .page-nav-secondary li { background-color: #f07d00 !important; } .show-menu .toggle-menu-wrapper { background-color: #f07d00 !important; } .page-nav-wrapper .page-nav-header { border-bottom: 1px solid var(--color-nav-delimiter) !important; background-color: #f07d00 !important; } .show-menu .toggle-menu-wrapper{ border-bottom: 1px solid var(--color-nav-delimiter) !important; } .page-nav-wrapper .page-nav-header .btn { background-color: #f07d00 !important; color: var(--color-sidebar-link) !important; border-bottom: 1px solid var(--color-nav-delimiter) !important; line-height: 42px !important; } .toggle-menu-wrapper { background-color: #f07d00 !important; } :root { /* ************************************* Logo und CD/CI */ /* Datei, Größe und Positionierung */ --logo-file: url("../img/WW_Logo_RGB.svg") !important; --logo-path: url("../img/WW_Logo_RGB.svg") !important; --logo-height-scrolled: 26px !important; --logo-position: center !important; --desk-bg-img-path: none !important; /* Hintergrundfarbe und Rahmen des Logos */ --color-brand-bg: #FFFFFF !important; --color-brand-border: #FFFFFF !important; /* Schriftarten */ --default-font: "Roboto", sans-serif !important; --heading-font: "Roboto", sans-serif !important; /* ************************************* Allgemeine Farben */ /* Hauptfarbe inkl. Abstufungen */ --color-primary: #FFFFFF !important; --color-primary-darken-5: #F2F2F2 !important; --color-primary-darken-10: #E6E6E6 !important; --color-primary-darken-15: #CCCCCC !important; --color-primary-darken-20: #B3B3B3 !important; --color-text-on-primary: #444444 !important; --color-nav-delimiter: #00A096 !important; /*Schmuckfarbe */ --color-secondary: #00A096 !important; /* Textfarben */ --color-body-text: #444444 !important; --color-body-text-dark: #222 !important; --color-body-text-light: #999 !important; --color-heading: #222 !important; --color-link: #00A096 !important; --color-link-hover: #33B2A9 !important; /* Farben für Rahmen */ --color-border: #dfdfdf !important; --color-border-dark: #cacbd8 !important; --color-border-light: #e5e5e5 !important; /* Hintergrundfarben Inhalt */ --color-content-bg: #fafafa !important; --color-content-bg-light: #fff !important; --color-content-bg-dark: #e8e8e8 !important; --color-body-highlight: #fff0e5 !important; /* Kopfbereich Inhalt */ --color-content-header-bg: #f5f5f5 !important; --color-content-header-text: #21252e !important; --color-content-header-border: #dfdfdf !important; /* ************************************* Kopfbereich der Seite */ --color-header-bg: #FFFFFF !important; --color-header-bg-dark: #f7fafd !important; --color-header-shadow-scrolled: #f7fafd !important; --color-header-border: #f07d00 !important; --color-header-text: #fff !important; --color-header-text-bg: #f07d00 !important; --color-header-text-hover: #fff !important; --color-header-text-bg-hover: #f07d00 !important; --color-header-search-icon: #444444 !important; --color-header-search-text: #fff !important; --color-header-search-text-focus: #222 !important; --color-header-search-bg-focus: #fff !important; --color-header-search-placeholder: #6775d7 !important; /* ************************************* Fussbereich der Seite */ --color-footer-bg: #00A096 !important; --color-footer-text: #FFFFFF !important; --color-footer-link: #FFFFFF !important; --color-footer-link-hover: #FFFFFF !important; --color-footer-link-active: #FFFFFF !important; /* ************************************* Seitenbereich der Seite */ --color-sidebar-bg: #f07d00 !important; --color-sidebar-text: #FFFFFF !important; --color-sidebar-border: #dfdfdf !important; --color-sidebar-title: #FFFFFF !important; --color-sidebar-title-btn-bg: #00A096 !important; --color-sidebar-title-btn-link: #222 !important; --color-sidebar-title-btn-bg-active: #00A096 !important; --color-sidebar-title-btn-link-active: #00A096 !important; --color-sidebar-title-btn-border: #dfdfdf !important; --color-sidebar-link: #FFFFFF !important; --color-sidebar-link-hover: #FFFFFF !important; --color-sidebar-link-hover-border: #00A096 !important; --color-sidebar-active-bg: #00A096 !important; --color-sidebar-active-border: #00A096 !important; --color-sidebar-active-link: #FFFFFF !important; /* ************************************* Schaltflächen / Buttons */ --color-btn-default: #00A096 !important; --color-btn-default-hover: #33B2A9 !important; --color-btn-default-text: #fff !important; --color-btn-secondary: #00A096 !important; --color-btn-secondary-hover: #33B2A9 !important; --color-btn-secondary-text: #fff !important; --color-btn-positive: #4CAF50 !important; --color-btn-positive-hover: #3d8b40 !important; --color-btn-positive-text: #fff !important; --color-btn-negative: #D32F2F !important; --color-btn-negative-hover: #ab2424 !important; --color-btn-negative-text: #fff !important; --color-btn-light-bg: #fff !important; --color-btn-light-border: #cacbd8 !important; --color-btn-light-text: #444444 !important; --color-btn-light-text-hover: #103E76 !important; --color-btn-light-hover: #444444 !important; --color-button-ghost: #444444 !important; /* ************************************* Seitenmenü / Navigation */ --color-menu-trigger: #fff !important; --color-menu-trigger-active: #fff !important; --color-menu-trigger-bg: #1d276f !important; --color-menu-trigger-bg-active: #f07d00 !important; --color-nav-bg: #21252e !important; --color-nav-item-bg: #F7F7F7 !important; --color-nav-text: #222 !important; --color-nav-delimiter: #FFFFFF !important; --color-nav-text-hover: #FFFFFF !important; --color-nav-bg-hover: #00a096 !important; --color-nav-bg-active: #33B2A9 !important; --color-nav-text-active: #FFFFFF !important; /* ************************************* Benutzermenü */ --color-user-menu-bg: #FFFFFF !important; --color-user-menu-border: #33B2A9 !important; --color-user-menu-delimiter: #33B2A9 !important; --color-user-menu-item-link: #222 !important; --color-user-menu-item-link-hover: #00a096 !important; --color-user-menu-item-link-hover-bg: #FFFFFF !important; /* ************************************* Box-Ínhalt */ --color-box-bg: #fcfcfc !important; --color-box-footer-bg: #f5f5f5 !important; --color-box-title: #21252e !important; --color-box-title-hover: #17205b !important; --color-box-footer-link: #21252e !important; --color-box-expandable-bg: #fcfcfc !important; /* ************************************* Formular-Elemente */ --color-form-primary: #21252e !important; --color-form-secondary: #00a096 !important; --color-form-success: #4CAF50 !important; --color-form-error: #D32F2F !important; --color-form-input-bg: #fff !important; --color-form-input-special-bg: #fffed0 !important; --color-form-input-text: #222 !important; --color-form-input-bg-disabled: #f7f7f7 !important; --color-form-input-text-disabled: #999 !important; --color-form-input-bg-readonly: #fcfcfc !important; --color-form-input-text-readonly: #222 !important; --color-form-border: #adaec2 !important; --color-form-border-focus: #8f91ad !important; --color-form-border-readonly: #fff !important; --color-form-label: #222 !important; --color-form-label-hint: #999 !important; --color-form-input-glow: #ff944d !important; --color-form-placeholder: #999 !important; --color-form-select-button-text: #222 !important; --color-form-select-button-bg: #f5f5f5 !important; --color-form-select-title: #21252e !important; --color-form-select-text: #222 !important; --color-form-toggle-active: #fff !important; --color-form-toggle-bg-active: #00a096 !important; --color-form-toggle-border-active: #00a096 !important; --color-form-toggle-border-hover: #00a096 !important; --color-form-toggle-border: #00a096 !important; --color-form-toggle-bg: #fff !important; --color-form-toggle-checked: #4CAF50 !important; --color-form-toggle-unchecked: #D32F2F !important; --color-form-toggle-not-set: #999 !important; --color-checkbox-intermediate: #dfdfdf !important; /* ************************************* Fenster (Modal, Lightbox & PopUp) */ --color-modal-bg: #fff !important; --color-modal-header-bg: #21252e !important; --color-modal-title: #fff !important; --color-modal-text: #222 !important; --color-modal-footer-bg: #f5f5f5 !important; --color-modal-close-bg: #1d276f !important; --color-modal-close-bg-hover: #1a2363 !important; --color-modal-close-text: #fff !important; --color-lightbox-bg: #fff !important; --color-lightbox-close-bg: transparent !important; --color-lightbox-close-bg-hover: #1a2363 !important; --color-lightbox-close-text: #222 !important; --color-lightbox-close-text-hover: #fff !important; /* ************************************* Objekt-Editor */ --color-object-editor-bg: #fcfcfc !important; --color-object-editor-header: #656d77 !important; --color-object-editor-header-dark: #596069 !important; --color-object-editor-header-dark-10: #4e545b !important; /* ************************************* Reiter */ --color-tabs-border: #dfdfdf !important; --color-tabs-link: #666 !important; --color-tabs-link-hover: #222 !important; --color-tabs-link-active: #222 !important; --color-tabs-indicator: #00a096 !important; /* ************************************* Status-Farben */ --color-positive: #4CAF50 !important; --color-negative: #D32F2F !important; --color-info: #00a096 !important; --color-warning: #FFA500 !important; --color-mandatory: #D32F2F !important; --color-positive-bg: #c7e7c8 !important; --color-negative-bg: #f2c2c2 !important; --color-info-bg: #c4d8e8 !important; --color-warning-bg: #ffe4b3 !important; --color-mandatory-bg: #f2c2c2 !important; --color-positive-border: #449d48 !important; --color-negative-border: #c02929 !important; --color-info-border: #3f75a2 !important; --color-warning-border: #e69500 !important; --color-mandatory-border: #c02929 !important; /* ************************************* Funktions-Schaltflächen */ --color-gf-link: #666 !important; --color-gf-bg: #fff !important; --color-gf-border: #dfdfdf !important; --color-gf-link-hover: #00a096 !important; --color-gf-bg-hover: #21252e !important; --color-gf-border-hover: #21252e !important; --color-gf-link-active: #21252e !important; --color-gf-bg-active: #00a096 !important; --color-gf-border-active: #00a096 !important; --color-gf-link-disabled: gray !important; --color-gf-bg-disabled: #fff !important; --color-gf-border-disabled: #e7e7e7 !important; /* ************************************* Schrittanzeige */ --color-pb-default-bg: #fff !important; --color-pb-default-text: #999 !important; --color-pb-default-label: #999 !important; --color-pb-finish-bg: #00a096 !important; --color-pb-finish-text: #fff !important; --color-pb-finish-label: #666 !important; --color-pb-active-bg: #66CFC8 !important; --color-pb-active-text: #fff !important; --color-pb-active-label: #222 !important; --color-pb-border: #cacbd8 !important; /* ************************************* Tabellen */ --color-table-header: #444444 !important; --color-table-header-text: #fff !important; --color-table-row-background: #fff !important; --color-table-row-text: #222 !important; --color-table-highlight: #444444 !important; --color-table-highlight-text: #000 !important; --color-table-highlight-bg-dark: #12ABE420 !important; --color-table-selected: #00a096 !important; --color-table-selected-text: #000 !important; --color-table-row-background-1: #fcfcfc !important; --color-table-row-background-2: #fafafa !important; --color-table-row-background-3: #f7f7f7 !important; --color-table-row-background-4: whitesmoke !important; --color-table-row-background-5: #f2f2f2 !important; --color-table-row-background-6: #f0f0f0 !important; --color-table-row-background-7: #ededed !important; --color-table-row-background-8: #ebebeb !important; --color-table-selected-1: #ffede0 !important; --color-table-selected-2: #ffeadb !important; --color-table-selected-3: #ffe7d6 !important; --color-table-selected-4: #ffe4d1 !important; --color-table-selected-5: #ffe1cb !important; --color-table-selected-6: #ffdec6 !important; --color-table-selected-7: #ffdbc1 !important; --color-table-selected-8: #ffd8bc !important; --color-arrow-step-gap: #fcfcfc !important; --color-arrow-step-bg: #f5f5f5 !important; --color-arrow-step-link: #222 !important; --color-arrow-step-text: #666 !important; --color-arrow-step-label: #222 !important; --color-arrow-step-active-bg: #00a096 !important; /* ************************************* Datei(en) hochladen (DropZone) */ --color-dz-preview-bg: #fff !important; --color-dz-preview-border: #dfdfdf !important; --color-dz-progress-bar: #4CAF50 !important; --color-dz-progress-bar-bg: #f5f5f5 !important; /* ************************************* Tooltipp */ --color-tt-bg: #fff0e5 !important; --color-tt-text: #222 !important; --color-tt-border: #cacbd8 !important; /* ************************************* Datumauswahl (DatePicker) */ --color-dp-bg: #fff !important; --color-dp-border: #cacbd8 !important; --color-dp-link: #444444 !important; --color-dp-header-bg: #444444 !important; --color-dp-ctrl-bg: #f5f5f5 !important; --color-dp-month-nav-bg: #fff !important; --color-dp-full-month-border: #fff !important; --color-dp-circle-btn-bg: #444444 !important; --color-dp-circle-btn-text: #fff !important; --color-dp-circle-btn-border: #444444 !important; --color-dp-circle-btn-bg-hover: #fff !important; --color-dp-circle-btn-text-hover: #444444 !important; --color-dp-circle-btn-border-hover: #fff !important; --color-dp-select-bg: #fff !important; --color-dp-select-text: #444444 !important; --color-dp-select-border: #1d276f !important; --color-dp-month-header-border: #dfdfdf !important; --color-dp-month-header-bg: #f5f5f5 !important; --color-dp-month-header-text: #999 !important; --color-dp-other-month-bg: transparent !important; --color-dp-other-month-text: #b3b3b3 !important; --color-dp-month-bg: #fff !important; --color-dp-month-border: #dfdfdf !important; --color-dp-month-link-bg: #fff !important; --color-dp-month-link-text: #444444 !important; --color-dp-month-link-border: #cacbd8 !important; --color-dp-month-today-link-bg: transparent !important; --color-dp-month-today-link-text: #00a096 !important; --color-dp-month-today-link-border: #cacbd8 !important; --color-dp-month-highlight-link-bg: #444444 !important; --color-dp-month-highlight-link-text: #fff !important; --color-dp-month-weekend-link-bg: #f5f5f5 !important; --color-dp-month-weekend-link-text: #444444 !important; --color-dp-month-selected-link-bg: #00a096 !important; --color-dp-month-selected-link-text: #fff !important; /* ************************************* Zum Seitenanfang */ --color-top-jump-bg: rgba(245, 245, 245, 0.5) !important; --color-top-jump-text: #cacbd8 !important; --color-top-jump-border: #cacbd8 !important; --color-top-jump-circle: #dfdfdf !important; --color-top-jump-bg-hover: #00a096 !important; --color-top-jump-text-hover: #fff !important; --color-top-jump-border-hover: #00a096 !important; --color-top-jump-circle-hover: #444444 !important; /* ************************************* Klappboxen */ --color-toggle-box-bg: #656d77 !important; --color-toggle-box-text: #fff !important; /* ************************************* Slider Element */ --color-range-track: #656d77 !important; --color-range-thumb: #00a096 !important; --color-thumb-shadow: #dfdfdf !important; --color-thumb-border: #fff !important; --color-track-shadow: #222 !important; --color-track-border: #656d77 !important; /* ************************************* Weitere Farben */ --color-overlay: rgba(0, 0, 0, 0.25) !important; --color-map-topic-header: #656d77 !important; --color-expandable-header-bg-hover: #fff !important; --color-complementary: #fff !important; --color-full-width-container: #fcfcfc !important; --color-full-width-container-border: #dfdfdf !important; --color-footer-start-text: #222 !important; }