/* ===================================================== MACHINESPACE LIGHT MODE OVERRIDES Include after style.css on every page. Activated via class "light-mode" on . ===================================================== */ /* ===== CSS Variable Overrides ===== */ html.light-mode { --color-primary: #0088aa; --color-primary-dark: #006680; --color-primary-light: #33aacc; --color-bg: #f5f5f5; --color-bg-secondary: #eaeaea; --color-bg-tertiary: #e0e0e0; --color-surface: rgba(0, 0, 0, 0.04); --color-surface-hover: rgba(0, 0, 0, 0.07); --color-text: #1a1a1a; --color-text-secondary: #555555; --color-text-muted: #888888; --color-border: rgba(0, 0, 0, 0.12); --color-border-hover: rgba(0, 0, 0, 0.25); --glass-bg: rgba(245, 245, 245, 0.85); --glass-border: rgba(0, 0, 0, 0.1); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); /* CI Accent Colors – darkened for contrast on light bg */ --color-accent-sand: #b07830; --color-accent-grey: #3a7ab5; --color-accent-red: #b84545; } /* ===== Logo invertieren ===== */ html.light-mode .logo-image, html.light-mode .footer-logo-image { filter: invert(1); } html.light-mode .footer-logo-image:hover { filter: invert(1) brightness(0.85); } /* ===== Navigation ===== */ html.light-mode .nav.scrolled { background: rgba(245, 245, 245, 0.95); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } html.light-mode .nav-link.nav-cta { border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 136, 170, 0.15); } html.light-mode .nav-link.nav-cta .led-indicator { background: rgba(0, 136, 170, 0.5); border-color: rgba(0, 136, 170, 0.4); } html.light-mode .nav-link:hover { color: var(--color-primary); } html.light-mode .nav-toggle span { background: var(--color-text); } /* ===== Hero ===== */ html.light-mode .hero { background: radial-gradient( ellipse at top, rgba(0, 136, 170, 0.06) 0%, var(--color-bg) 50%, #e8e8e8 100% ); } /* ===== Gradient text – blau statt grau ===== */ html.light-mode .gradient-text { background: linear-gradient(135deg, #006680 0%, #0088aa 50%, #33aacc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===== Corner Frames ===== */ html.light-mode .corner-frame .hero-container-grid::before, html.light-mode .corner-frame .hero-container-grid::after, html.light-mode .corner-frame::before, html.light-mode .corner-frame::after, html.light-mode .setup-corner-frame::before, html.light-mode .setup-corner-frame::after, html.light-mode .setup-layout-wrapper::before, html.light-mode .setup-layout-wrapper::after { border-color: rgba(0, 0, 0, 0.15); } /* ===== Tags ===== */ html.light-mode .audience-tags .tag { background: rgba(0, 136, 170, 0.06); border-color: rgba(0, 136, 170, 0.2); color: var(--color-text-secondary); } html.light-mode .audience-tags .tag:hover { border-color: var(--color-primary); color: var(--color-primary-dark); } /* ===== Buttons ===== */ html.light-mode .btn-primary { background: var(--color-primary); color: #ffffff; box-shadow: 0 4px 16px rgba(0, 136, 170, 0.25); } html.light-mode .btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 8px 24px rgba(0, 136, 170, 0.35); } html.light-mode .btn-secondary { color: var(--color-text); border-color: rgba(0, 0, 0, 0.2); } html.light-mode .btn-secondary:hover { background: rgba(0, 136, 170, 0.06); border-color: var(--color-primary); color: var(--color-primary); } /* ===== Challenge Cards ===== */ html.light-mode .challenge-statement-card { background: rgba(255, 255, 255, 0.85); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(0, 0, 0, 0.05); } html.light-mode .challenge-statement-card::before, html.light-mode .challenge-statement-card::after { border-color: rgba(0, 136, 170, 0.25); } html.light-mode .challenge-statement-card .painpoint-icon::before, html.light-mode .challenge-statement-card .painpoint-icon::after { border-color: rgba(0, 136, 170, 0.25); } /* ===== Challenge Tabs ===== */ html.light-mode .challenge-tab { border-color: rgba(0, 0, 0, 0.15); } html.light-mode .challenge-tab:hover { border-color: rgba(0, 136, 170, 0.4); color: var(--color-primary); } html.light-mode .challenge-tab.active { border-color: var(--color-primary); color: var(--color-primary); background: rgba(0, 136, 170, 0.06); box-shadow: 0 0 8px rgba(0, 136, 170, 0.12); } html.light-mode .challenge-tab.active svg { stroke: var(--color-primary); } /* ===== Consequence / Result text ===== */ html.light-mode .consequence { color: #c0392b; } /* ===== Video Overlay ===== */ html.light-mode .video-spacer-overlay { background: rgba(255, 255, 255, 0.15); } html.light-mode .hero-video { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } html.light-mode .hero-video:hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } /* ===== Solution Section ===== */ html.light-mode .section-solution { background: linear-gradient(180deg, var(--color-bg) 0%, #dde8ec 100%); } html.light-mode .solution-text-paragraph { border-left-color: var(--color-primary); } html.light-mode .solution-paragraph-full { background: rgba(255, 255, 255, 0.7); border-left-color: var(--color-primary); } /* ===== Infra Cards ===== */ html.light-mode .infra-card { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); } html.light-mode .infra-card:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--color-primary); } html.light-mode .infra-card::before { background: var(--color-primary); } html.light-mode .infra-number { color: var(--color-primary); } html.light-mode .infra-card-list li::before { background: var(--color-primary); } /* ===== Value Prop Cards ===== */ html.light-mode .value-prop-card { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); } html.light-mode .value-prop-card:hover { background: rgba(255, 255, 255, 0.9); border-color: var(--color-primary); } html.light-mode .value-prop-icon { color: var(--color-primary); } /* ===== Pricing Card ===== */ html.light-mode .pricing-card { background: rgba(255, 255, 255, 0.8); border-color: var(--color-primary); } html.light-mode .pricing-card::before { background: radial-gradient(ellipse at top, rgba(0, 136, 170, 0.06) 0%, transparent 60%); } html.light-mode .pricing-badge { background: var(--color-primary); color: #fff; } html.light-mode .pricing-price { color: var(--color-primary); } html.light-mode .pricing-features li svg { color: var(--color-primary); } /* ===== ROI Calculator ===== */ html.light-mode .roi-select { background: rgba(255, 255, 255, 0.9); color: #1a1a1a; border-color: rgba(0, 0, 0, 0.15); } html.light-mode .roi-select option { background: #ffffff; color: #1a1a1a; } html.light-mode .roi-select:hover { border-color: var(--color-primary); } html.light-mode .roi-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 136, 170, 0.1); } html.light-mode .roi-breakdown-item { background: rgba(0, 136, 170, 0.04); } html.light-mode .roi-total-value { color: var(--color-primary); } /* ===== Section Divider ===== */ html.light-mode .section-divider { background: linear-gradient( to right, transparent 0%, rgba(0, 136, 170, 0.15) 20%, rgba(0, 136, 170, 0.3) 50%, rgba(0, 136, 170, 0.15) 80%, transparent 100% ); } html.light-mode .section-divider::before { background: var(--color-primary); box-shadow: 0 0 20px rgba(0, 136, 170, 0.3); } /* ===== Section Labels ===== */ html.light-mode .section-label { color: var(--color-primary); } /* ===== Background image sections ===== */ html.light-mode .section-setup::before { opacity: 0.04; } html.light-mode .section-painpoints::before { opacity: 0.03; } /* ===== Capability items ===== */ html.light-mode .capability-item { background: rgba(0, 136, 170, 0.03); border-left-color: var(--color-primary); } html.light-mode .capability-item:hover { background: rgba(0, 136, 170, 0.06); border-left-color: var(--color-primary-dark); } html.light-mode .capability-check { background: var(--color-primary); box-shadow: 0 0 15px rgba(0, 136, 170, 0.2); } html.light-mode .capability-check svg { stroke: #ffffff; } /* ===== Setup Steps ===== */ html.light-mode .setup-step.active .step-circle { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 20px rgba(0, 136, 170, 0.25); } html.light-mode .setup-step:hover .step-circle { border-color: var(--color-primary); } /* ===== Team Section ===== */ html.light-mode .founder-quote-overlay { background: rgba(255, 255, 255, 0.92); } html.light-mode .founder-circle-image { border-color: rgba(0, 0, 0, 0.12); } html.light-mode .highlight-icon svg { stroke: #ffffff; } /* ===== CTA Section ===== */ html.light-mode .cta-card-large { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); } /* ===== Modal ===== */ html.light-mode .modal-overlay { background: rgba(0, 0, 0, 0.45); } html.light-mode .modal-close { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.1); } /* ===== Cookie Banner ===== */ html.light-mode .cookie-banner { background: linear-gradient(180deg, rgba(250, 250, 250, 0.98) 0%, rgba(240, 240, 240, 0.98) 100%); border-top-color: var(--color-primary); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08); } html.light-mode .cookie-container::before, html.light-mode .cookie-container::after { border-color: var(--color-primary); } html.light-mode .cookie-content-wrapper::before, html.light-mode .cookie-content-wrapper::after { border-color: var(--color-primary); } html.light-mode .cookie-category { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); } html.light-mode .cookie-category:hover { background: rgba(0, 136, 170, 0.04); border-color: rgba(0, 136, 170, 0.2); } html.light-mode .category-icon { color: var(--color-primary); } html.light-mode .toggle-slider { background: #d0d0d0; border-color: rgba(0, 0, 0, 0.15); } html.light-mode .toggle-slider::before { background: #888; } html.light-mode .toggle-switch input:checked + .toggle-slider { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 10px rgba(0, 136, 170, 0.2); } html.light-mode .btn-accept-cookie { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } html.light-mode .btn-accept-cookie:hover { background: var(--color-primary-dark); box-shadow: 0 0 20px rgba(0, 136, 170, 0.25); } html.light-mode .btn-primary-cookie { border-color: var(--color-primary); color: var(--color-primary); } html.light-mode .btn-primary-cookie:hover { background: rgba(0, 136, 170, 0.06); } html.light-mode .cookie-footer { border-top-color: rgba(0, 0, 0, 0.1); } html.light-mode .cookie-footer a { color: var(--color-primary); } /* ===== Cookie Settings Button ===== */ html.light-mode .cookie-settings-btn { background: #f0f0f0; border-color: var(--color-primary); } html.light-mode .cookie-settings-btn svg { color: var(--color-primary); } html.light-mode .cookie-settings-btn:hover { background: rgba(0, 136, 170, 0.06); box-shadow: 0 0 20px rgba(0, 136, 170, 0.15); } /* ===== Legal Pages ===== */ html.light-mode .legal-page { background: var(--color-bg); } html.light-mode .info-box { background: rgba(0, 136, 170, 0.06); border-left-color: var(--color-primary); } html.light-mode .back-link { color: var(--color-primary); } html.light-mode .back-link:hover { color: var(--color-primary-dark); } /* ===== Benefit items ===== */ html.light-mode .benefit-icon { background: var(--color-primary); } /* ===== Use Case Tabs ===== */ html.light-mode .use-case-tab.active { border-color: var(--color-primary); color: var(--color-primary); background: rgba(0, 136, 170, 0.06); } html.light-mode .use-case-tab:hover { border-color: rgba(0, 136, 170, 0.4); } /* ===== Stat Values ===== */ html.light-mode .stat-value, html.light-mode .metric-value { color: var(--color-primary); } /* ===== Form Inputs ===== */ html.light-mode .form-group input, html.light-mode .form-group textarea { background: rgba(255, 255, 255, 0.9); color: var(--color-text); } html.light-mode .form-group input:focus, html.light-mode .form-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 136, 170, 0.1); } /* ===== Theme Toggle Button ===== */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: var(--color-bg-secondary); border: 2px solid var(--color-border-hover); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } .theme-toggle svg { width: 22px; height: 22px; color: var(--color-text); transition: transform 0.3s ease; } .theme-toggle:hover svg { transform: rotate(15deg); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html.light-mode .theme-toggle .icon-sun { display: block; } html.light-mode .theme-toggle .icon-moon { display: none; } html.light-mode .theme-toggle { background: #ffffff; border-color: rgba(0, 136, 170, 0.25); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } html.light-mode .theme-toggle:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); border-color: var(--color-primary); } @media (max-width: 768px) { .theme-toggle { bottom: 15px; right: 15px; width: 44px; height: 44px; } .theme-toggle svg { width: 20px; height: 20px; } } /* ===== Hero Icon-Tags (Neuer Verkauf/Service/Wissen) ===== */ html.light-mode .hero-icon-tag { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); } html.light-mode .hero-icon-tag:hover { background: rgba(255, 255, 255, 0.95); border-color: var(--color-primary); } html.light-mode .hero-icon-tag svg { color: var(--color-primary); } html.light-mode .hero-icon-tag-label { color: var(--color-text); } /* ===== Trust Section ===== */ html.light-mode .trust-wrapper { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); } html.light-mode .trust-label { color: var(--color-text-secondary); } /* ===== Field Tabs / Panels (Drei Geschäftsfelder) ===== */ html.light-mode .field-tab { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.15); color: var(--color-text-secondary); } html.light-mode .field-tab:hover { border-color: rgba(0, 136, 170, 0.4); color: var(--color-primary); } html.light-mode .field-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; box-shadow: 0 0 15px rgba(0, 136, 170, 0.3); } html.light-mode .field-panel { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); } html.light-mode .field-panel-headline { color: var(--color-text); } html.light-mode .field-panel-intro { color: var(--color-text-secondary); } html.light-mode .field-panel-list li { color: var(--color-text-secondary); } html.light-mode .field-panel-list li strong { color: var(--color-text); } html.light-mode .field-panel-list li::before { background: var(--color-primary); } html.light-mode .field-kpi { background: rgba(0, 136, 170, 0.08); border-left-color: var(--color-primary); } html.light-mode .field-kpi-label { color: var(--color-primary); } html.light-mode .field-kpi-text { color: var(--color-text); } html.light-mode .field-panel-headline .gradient-text { background: linear-gradient(135deg, #006680 0%, #0088aa 50%, #33aacc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===== Infra Outro (Drei Anwendungen. Ein Setup.) ===== */ html.light-mode .infra-outro-title { color: var(--color-text); } html.light-mode .infra-outro-text { color: var(--color-text-secondary); } /* ===== Infra Card Icons ===== */ html.light-mode .infra-card-icon { color: var(--color-primary); } /* ===== Smooth Theme Transition ===== */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important; }