/* ========================================= RoWiA Dark/Light Theme Switcher (global) Nutzung: - - Toggle-Button: .theme-toggle-btn + #themeToggle/#themeIcon ========================================= */ /* Theme Tokens */ :root{ color-scheme: light; --theme-bg: #f8f8f8; --theme-text: #111827; --theme-muted: #6b7280; --theme-surface: #fafafa; /* Karten/Boxen */ --theme-surface-2: #f8f8f8; /* Sektion/Flächen */ --theme-border: rgba(17,24,39,.12); --rowia-bg: #f2f2f2; --navi-dark: #0F0F0F; --navi-light: #F1F1F1; } /* Dark Tokens */ html[data-theme="dark"]{ color-scheme: dark; /*--theme-bg: #3E403F;*/ /*--theme-bg: linear-gradient(oklch(0.3521 0.0232 238.54) 0%, oklch(0.42 0.0232 238.54), oklch(0.44 0.04 238.54), oklch(0.5 0.05 238.54), oklch(0.3521 0.0232 238.54));*/ --theme-bg: #9ca3af ; --theme-text: #e5e7eb; --theme-muted: #9ca3af; --theme-surface: #3E403F; /*--theme-surface-2: #313332;*/ /* --theme-surface-2: #404341; 05.03.2026 */ /* --theme-surface-2: #4A4A4A;*/ --theme-surface-2: #181818; --theme-border: rgba(229,231,235,.16); } /* Grundfarben */ html[data-theme="dark"] body{ /*background: linear-gradient(180deg, #262827 0%, #3f4241 45%, #313332 100%);*/ background-color: var(--theme-surface-2); position: relative; } html[data-theme="dark"] body::before{ content:""; position: fixed; inset: 0; /* background: url("../images/noise.svg"); background-size: 20px 20px; background-repeat: repeat; opacity: 0.2; /* <- Noise-Stärke */ mix-blend-mode:overlay; /* <- wirkt sehr „techy“ */ pointer-events: none; } /* Navbar / Header */ html[data-theme="dark"] .bg-white{ background-color: var(--navi-dark) !important; } html[data-theme="dark"] .header-light{ background-color: var(--navi-dark) !important; } html[data-theme="light"] .bg-white{ background-color: var(--navi-light) !important; } /* Sektionen: bg-solitude-blue */ html[data-theme="dark"] .bg-solitude-blue{ background-color: var(--theme-surface-2) !important; } /* Borders */ html[data-theme="dark"] .border, html[data-theme="dark"] .border-color-light-gray{ border-color: var(--theme-border) !important; } /* Textfarben */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-dark-gray, html[data-theme="dark"] .text-rowia-gray{ color: var(--theme-text) !important; } /* Links allgemein */ html[data-theme="dark"] a{ color: #FFF; } html[data-theme="dark"] a:hover{ color: #e8e8e8; } html[data-theme="dark"] .link-orange{ color: #f29b37; } html[data-theme="dark"] .link-orange a:hover{ color: #ffaf00; } /* TOC Box + Divider */ html[data-theme="dark"] .toc-box{ background: var(--theme-surface-2) !important; } /* TOC Box + Divider */ html[data-theme="light"] .toc-box{ background: var(--rowia-bg) !important; } html[data-theme="dark"] .divider-style-03{ border-color: var(--theme-border) !important; } /* Badge im Hero */ html[data-theme="dark"] .bg-gradient-very-light-gray{ background: rgba(15, 23, 42, 0.85) !important; } html[data-theme="dark"] .bg-gradient-very-light-gray.text-dark{ color: #e5e7eb !important; } /* Button Kontakt (falls benötigt) */ html[data-theme="dark"] .btn-transparent-light-gray{ background: #fdfdfd !important; color:#25282c !important; } /* Buttons */ html[data-theme="dark"] .btn-rowia-2{ background: transparent !important; color:#f08a24 !important; } /* feature box background */ html[data-theme="dark"] .feature-box { /* background-image: url("../images/rowia-paper-bg-white.png")!important; */ } /* leistungen background */ html[data-theme="light"] .leistungen-background { /* background-image: url("../images/rowia-paper-bg.png")!important; */ /*background-color: #F0F4FD!important;*/ background-color: #f8f8f8!important; } html[data-theme="dark"] .leistungen-background { /* background-image: url("../images/rowia-paper-bg-white.png")!important;*/ background-color: #313332!important; } /* leistungen subheader-switch */ html[data-theme="light"] .subheader-switch { color:#2f6184!important; } html[data-theme="dark"] .subheader-switch { color:#3fa4e7!important; } /* nutzen background */ html[data-theme="light"] .nutzen-background { background-color: #f8f8fa!important; } html[data-theme="dark"] .nutzen-background { background-color: #414141 !important; } /* ========================= Navbar Links (Dark) ========================= */ html[data-theme="dark"] .navbar .navbar-nav .nav-link{ color: rgba(229,231,235,.92) !important; } html[data-theme="dark"] .navbar .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar .navbar-nav .nav-link:focus{ color: #ed7c15 !important; } html[data-theme="dark"] .navbar .navbar-nav .nav-link.active, html[data-theme="dark"] .navbar .navbar-nav .nav-link[aria-current="page"]{ color: #ffffff !important; } html[data-theme="dark"] .navbar .dropdown-toggle, html[data-theme="dark"] .navbar .fa-angle-down{ color: rgba(229,231,235,.9) !important; } /* Dropdown Menü (Dark) */ html[data-theme="dark"] .navbar .dropdown-menu{ background-color: #313332 !important; border-color: rgba(229,231,235,.14) !important; /* background-image: url("../images/rowia-paper-bg-white.png")!important;*/ } html[data-theme="dark"] .navbar .dropdown-menu a{ color: rgb(250, 250, 250) !important; } html[data-theme="dark"] .navbar .dropdown-menu a:hover, html[data-theme="dark"] .navbar .dropdown-menu a:focus{ background-color: rgba(255,255,255,.06) !important; /*color: #ffffff !important;*/ } html[data-theme="dark"] .navbar .dropdown-menu .sub-title{ color: rgba(229,231,235,.75) !important; } html[data-theme="dark"] .navbar .dropdown-menu.submenu-content{ box-shadow: 0 10px 30px rgba(0,0,0,.45) !important; } /* ========================= Collapse / Toggler ========================= */ .navbar-toggler{ border: none !important; border-radius: 10px; padding: 10px 12px; background: transparent; outline: none !important; } .navbar-toggler .navbar-toggler-line{ display: block; height: 2px; background: rgba(17,24,39,.85); /* Light */ border-radius: 0px; border: none !important; outline: none !important; } .navbar-toggler:hover{ outline: none !important; } .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(9,144,235,.25); outline: none !important; } /* Dark */ html[data-theme="dark"] .navbar-toggler{ /*background: rgba(15,23,42,.2);*/ } html[data-theme="dark"] .navbar-toggler .navbar-toggler-line{ background: rgba(229,231,235,.92); } html[data-theme="dark"] .navbar-toggler:focus{ box-shadow: none; } /* Mobile Collapse-Panel */ @media (max-width: 991.98px){ html[data-theme="dark"] #navbarNav{ background: #363837; border: 1px solid rgba(229,231,235,.14); border-radius: 14px; padding: 10px 12px; margin-top: 10px; } html[data-theme="light"] #navbarNav{ background: #fafafa; border: 1px solid rgba(17,24,39,.10); border-radius: 14px; padding: 10px 12px; margin-top: 10px; } #navbarNav .nav-link{ padding: 10px 6px; } } /* ========================= Theme Toggle Button ========================= */ .theme-toggle-btn{ width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0,0,0,.12); background: transparent; cursor: pointer; } html[data-theme="dark"] .theme-toggle-btn{ border-color: rgba(255,255,255,.18); }