/* ============================================================ DARK MODE — shared across all visito.me pages Applied via [data-theme="dark"] on ============================================================ */ [data-theme="dark"] { --c-bg: #0f0f14; --c-surface: #1a1a24; --c-surface2: #22222e; --c-border: rgba(191,217,215,0.1); --c-text: #e8e8f0; --c-muted: #a8aabb; --c-accent: #bfd9d7; --c-accent2: #bfd9d7; --c-teal: #bfd9d7; --c-teal-dark: #8fbfbc; --c-warm: #1a1a24; --c-white: #e8e8f0; } /* ---- Body & global ---- */ [data-theme="dark"] body { background: #0f0f14; color: #e8e8f0; } /* ---- Logo dark switch ---- */ /* CSS content-swap (Webkit/Blink) */ [data-theme="dark"] .logo-img, [data-theme="dark"] .mn-logo-img, [data-theme="dark"] .footer-logo-img, [data-theme="dark"] .subpage-logo-img { content: url('assets/logo/logo-white.png'); } /* Fallback: brightness invert for Firefox / any other engine */ @supports not (content: url('x')) { [data-theme="dark"] .logo-img, [data-theme="dark"] .mn-logo-img, [data-theme="dark"] .footer-logo-img, [data-theme="dark"] .subpage-logo-img { filter: brightness(0) invert(1); } } /* Global text elements */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] p, [data-theme="dark"] li, [data-theme="dark"] span, [data-theme="dark"] label { color: inherit; } [data-theme="dark"] .lead { color: #b8bace; } [data-theme="dark"] .label { color: #7fbdba; } [data-theme="dark"] .display-xl, [data-theme="dark"] .display-lg, [data-theme="dark"] .display-md { color: #e8e8f0; } /* Inputs & forms */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: #0f0f14; border-color: rgba(191,217,215,0.2); color: #e8e8f0; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #5a5c6e; } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: rgba(191,217,215,0.5); outline: none; box-shadow: 0 0 0 3px rgba(191,217,215,0.1); } /* ---- Header ---- */ [data-theme="dark"] #header { color: #e8e8f0; } [data-theme="dark"] #header.scrolled { background: rgba(15,15,20,0.95); border-bottom-color: rgba(191,217,215,0.12); box-shadow: 0 8px 40px rgba(0,0,0,0.4); } [data-theme="dark"] nav a:hover { background: rgba(191,217,215,0.08); color: #e8e8f0; } /* ---- Logo ---- */ [data-theme="dark"] .logo-icon { background: #bfd9d7; } [data-theme="dark"] .logo-icon svg { fill: #0f0f14; } [data-theme="dark"] .logo span { color: #bfd9d7; } /* ---- Buttons ---- */ [data-theme="dark"] .btn-primary { background: #bfd9d7; color: #0f0f14; box-shadow: 0 4px 24px rgba(191,217,215,0.25); } [data-theme="dark"] .btn-primary:hover { background: #d4e8e7; box-shadow: 0 8px 32px rgba(191,217,215,0.35); } [data-theme="dark"] .btn-ghost { color: #e8e8f0; border-color: rgba(191,217,215,0.3); } [data-theme="dark"] .btn-ghost:hover { border-color: rgba(191,217,215,0.6); background: rgba(191,217,215,0.08); } /* ---- Hero ---- */ [data-theme="dark"] #hero { background: linear-gradient(160deg, #0d1a1a 0%, #0f0f14 40%, #0f0f14 100%); } [data-theme="dark"] .hero-grid { background-image: linear-gradient(rgba(191,217,215,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(191,217,215,0.04) 1px, transparent 1px); } [data-theme="dark"] .hero-badge { background: rgba(191,217,215,0.1); border-color: rgba(191,217,215,0.25); color: #bfd9d7; } [data-theme="dark"] .hero-headline em { background: linear-gradient(135deg, #bfd9d7 0%, #7fbdba 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .hero-float-card { background: rgba(26,26,36,0.96); border-color: rgba(191,217,215,0.15); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } [data-theme="dark"] .float-card-label, [data-theme="dark"] .float-card-val { color: #e8e8f0; } [data-theme="dark"] .hero-trust-avatar { border-color: #0f0f14; } /* ---- Sections ---- */ [data-theme="dark"] #problem, [data-theme="dark"] #other-features { background: #0f0f14; } [data-theme="dark"] .problem-item { background: #1a1a24; border-color: rgba(191,217,215,0.1); } /* ---- Feature cards ---- */ [data-theme="dark"] .feature-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .feature-card:hover { border-color: rgba(191,217,215,0.4); box-shadow: 0 20px 60px rgba(191,217,215,0.07); } [data-theme="dark"] .feature-card-icon { background: rgba(191,217,215,0.1); } /* ---- Outcomes ---- */ [data-theme="dark"] #outcomes { background: #0f0f14; } [data-theme="dark"] .outcome-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .outcome-num { background: linear-gradient(135deg, #bfd9d7, #7fbdba); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- Steps / how it works ---- */ [data-theme="dark"] .step-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .step-num { color: rgba(191,217,215,0.45); } /* ---- Testimonials ---- */ [data-theme="dark"] .testimonial-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } /* ---- Pricing ---- */ [data-theme="dark"] .pricing-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .pricing-card.featured { background: #1e2a2a; border-color: rgba(191,217,215,0.4); } [data-theme="dark"] .pricing-feature { color: #c0c0d0; } /* ---- Stats / logos strip ---- */ [data-theme="dark"] #logos { background: #1a1a24; border-color: rgba(191,217,215,0.08); } [data-theme="dark"] .logo-item { color: #a8aabb; } [data-theme="dark"] .stat-block { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .stat-block::before { background: radial-gradient(ellipse at 50% 0%, rgba(191,217,215,0.08) 0%, transparent 70%); } [data-theme="dark"] .stat-num { color: #e8e8f0; } [data-theme="dark"] .stat-label { color: #a8aabb; } /* ---- Hero phone mockup ---- */ [data-theme="dark"] .hero-device-main { background: #22222e; } [data-theme="dark"] .ph-screen { background: #1c1c28; color: #e8e8f0; } [data-theme="dark"] .ph-statusbar { color: #c0c2d4; } [data-theme="dark"] .ph-statusbar svg rect, [data-theme="dark"] .ph-statusbar svg path, [data-theme="dark"] .ph-statusbar svg circle { fill: #c0c2d4; } [data-theme="dark"] .ph-header { background: #1c1c28; border-bottom-color: rgba(191,217,215,0.1); } [data-theme="dark"] .ph-restaurant-name { color: #e8e8f0; } [data-theme="dark"] .ph-restaurant-sub { color: #a8aabb; } [data-theme="dark"] .ph-lang-btn { background: rgba(191,217,215,0.1); border-color: rgba(191,217,215,0.2); color: #bfd9d7; } [data-theme="dark"] .ph-lang-btn.active { background: #bfd9d7; color: #0f0f14; border-color: #bfd9d7; } [data-theme="dark"] .ph-tabs { background: #1c1c28; border-bottom-color: rgba(191,217,215,0.1); } [data-theme="dark"] .ph-tab { color: #a8aabb; } [data-theme="dark"] .ph-tab.active { color: #bfd9d7; border-bottom-color: #bfd9d7; } [data-theme="dark"] .ph-title { color: #e8e8f0; } [data-theme="dark"] .ph-section-label { color: #7fbdba; } [data-theme="dark"] .ph-menu-scroll { background: #1c1c28; } [data-theme="dark"] .ph-menu-item { background: #22222e; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .ph-menu-item.added { background: #1e2e2e; border-color: rgba(191,217,215,0.3); } [data-theme="dark"] .ph-menu-name { color: #e8e8f0; } [data-theme="dark"] .ph-menu-price { color: #bfd9d7; } [data-theme="dark"] .ph-btn-add { background: #bfd9d7; color: #0f0f14; } [data-theme="dark"] .ph-cart-bar { background: #2a2a3a; } [data-theme="dark"] .ph-cart-bar.empty { background: #22222e; } [data-theme="dark"] .ph-cart-label { color: #e8e8f0; } /* Summary screen */ [data-theme="dark"] .ph-sum-header { border-bottom-color: rgba(191,217,215,0.1); } [data-theme="dark"] .ph-sum-back { color: #bfd9d7; } [data-theme="dark"] .ph-sum-title { color: #e8e8f0; } [data-theme="dark"] .ph-sum-sub { color: #a8aabb; } [data-theme="dark"] .ph-sum-items { border-bottom-color: rgba(191,217,215,0.1); } [data-theme="dark"] .ph-sum-row { color: #a8aabb; } [data-theme="dark"] .ph-sum-total { color: #e8e8f0; } /* Cooking / rating screens */ [data-theme="dark"] #ph-cook-emoji { filter: none; } [data-theme="dark"] .ph-star { color: #5a5c6e; } [data-theme="dark"] .ph-star.lit { color: #f0c040; } /* ---- FAQ ---- open state hardcoded colors */ [data-theme="dark"] .faq-item.open { border-color: rgba(191,217,215,0.2); } [data-theme="dark"] .faq-item.open .faq-question { color: #e8e8f0; } [data-theme="dark"] .faq-item.open .faq-icon svg { stroke: #0f0f14; } [data-theme="dark"] .faq-icon { background: rgba(191,217,215,0.08); } /* ---- Solution section ---- */ [data-theme="dark"] .solution-img-placeholder { background: linear-gradient(135deg, #1a2424 0%, #1a1a24 100%); } [data-theme="dark"] .solution-img-wrap { box-shadow: 0 40px 80px rgba(0,0,0,0.4); } [data-theme="dark"] .check-icon { background: rgba(191,217,215,0.15); } [data-theme="dark"] .check-icon svg { stroke: #bfd9d7; } /* ---- Journey feat headings ---- */ [data-theme="dark"] .journey-feat-body h4 { color: #e8e8f0; } /* ---- Section headings (gradient-text em) ---- */ [data-theme="dark"] .gradient-text { background: linear-gradient(135deg, #bfd9d7 0%, #7fbdba 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---- Benefits / highlights ---- */ [data-theme="dark"] #benefits { background: #0f0f14; } [data-theme="dark"] .benefit-icon-wrap { background: rgba(191,217,215,0.08); } [data-theme="dark"] .benefit-title { color: #e8e8f0; } [data-theme="dark"] .benefit-desc { color: #a8aabb; } /* ---- Journey / gastro ---- */ [data-theme="dark"] #journey { background: #1a1a24; } [data-theme="dark"] .journey-tab { color: #a8aabb; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .journey-tab.active { color: #e8e8f0; border-color: #bfd9d7; background: rgba(191,217,215,0.06); } [data-theme="dark"] .journey-panel-title { color: #e8e8f0; } [data-theme="dark"] .journey-panel-desc { color: #b8bace; } [data-theme="dark"] .journey-check { color: #bfd9d7; } /* Journey mockup device */ [data-theme="dark"] .journey-mockup { background: #22222e; } [data-theme="dark"] .jm-screen { background: #1c1c28; color: #e8e8f0; } [data-theme="dark"] .jm-statusbar { color: #c0c2d4; } [data-theme="dark"] .jm-body { color: #e8e8f0; } [data-theme="dark"] .jm-btn { background: #2a2a3a; color: #e8e8f0; } [data-theme="dark"] .jm-btn-teal { background: #3a6e6c; color: #e8e8f0; } [data-theme="dark"] .jm-back-btn { color: #bfd9d7; } [data-theme="dark"] .jm-dot { background: #bfd9d7; } /* reservation screen */ [data-theme="dark"] .jm-date-box { background: rgba(191,217,215,0.12); border-color: rgba(191,217,215,0.25); color: #e8e8f0; } [data-theme="dark"] .jm-table-grid > div { background: #22222e; border-color: rgba(191,217,215,0.15); color: #e8e8f0; } /* menu ordering screen */ [data-theme="dark"] .jm-menu-item { background: #22222e; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .jm-menu-name { color: #e8e8f0; } [data-theme="dark"] .jm-menu-price { color: #bfd9d7; } [data-theme="dark"] .jm-cart-bar { background: #2a3535; } /* loyalty screen */ [data-theme="dark"] .jm-stamp-empty { background: #22222e; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .jm-coupon { background: #1e2e2e; border-color: rgba(191,217,215,0.2); } /* ---- How it works ---- */ [data-theme="dark"] #how { background: #0f0f14; } [data-theme="dark"] .step-title { color: #e8e8f0; } [data-theme="dark"] .step-desc { color: #a8aabb; } [data-theme="dark"] .step-connector { background: rgba(191,217,215,0.18); } /* ---- Testimonials ---- */ [data-theme="dark"] .testimonial-text { color: #d4d5e0; } [data-theme="dark"] .testimonial-name { color: #e8e8f0; } [data-theme="dark"] .testimonial-role { color: #a8aabb; } [data-theme="dark"] .testimonial-stars { color: #bfd9d7; } /* ---- Pricing section (index) ---- */ [data-theme="dark"] #pricing { background: #1a1a24; } [data-theme="dark"] .pricing-plan-name { color: #e8e8f0; } [data-theme="dark"] .pricing-plan-sub { color: #a8aabb; } [data-theme="dark"] .pricing-price { color: #e8e8f0; } [data-theme="dark"] .pricing-period { color: #a8aabb; } [data-theme="dark"] .pricing-note { color: #a8aabb; } [data-theme="dark"] .pricing-divider { border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .pricing-features li { color: #d4d5e0; } [data-theme="dark"] .pf-muted { color: rgba(191,217,215,0.15); } [data-theme="dark"] .pricing-setup-banner { background: #22222e; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .pricing-setup-banner strong { color: #e8e8f0; } [data-theme="dark"] .pricing-setup-banner p { color: #a8aabb; } /* Featured card stays dark — ensure white text stays readable */ [data-theme="dark"] .pricing-card-featured { background: #1e3333; border-color: rgba(191,217,215,0.3); } [data-theme="dark"] .pricing-card-featured .pricing-plan-name, [data-theme="dark"] .pricing-card-featured .pricing-price { color: #fff; } /* ---- Billing toggle ---- */ [data-theme="dark"] #billing-toggle { background: #22222e; border-color: rgba(191,217,215,0.15); } /* ---- FAQ ---- */ [data-theme="dark"] .faq-item { border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .faq-question span:first-child { color: #e8e8f0; } [data-theme="dark"] .faq-icon { border-color: rgba(191,217,215,0.2); } [data-theme="dark"] .faq-icon svg { stroke: #bfd9d7; } [data-theme="dark"] .faq-answer p { color: #b8bace; } [data-theme="dark"] .faq-q { color: #e8e8f0; } [data-theme="dark"] .faq-a { color: #a8aabb; } /* ---- Mobile Nav bottom sheet ---- */ [data-theme="dark"] #mobile-nav { background: #16161f; box-shadow: 0 -4px 32px rgba(0,0,0,0.5); } [data-theme="dark"] .mn-handle { background: rgba(255,255,255,0.12); } [data-theme="dark"] .mn-close { background: rgba(255,255,255,0.08); color: #a8aabb; } [data-theme="dark"] .mn-link:hover { background: rgba(255,255,255,0.05); } [data-theme="dark"] .mn-link:active { background: rgba(255,255,255,0.08); } [data-theme="dark"] .mn-link-icon { background: rgba(255,255,255,0.07); color: #7fbdba; } [data-theme="dark"] .mn-link-label { color: #e8e8f0; } [data-theme="dark"] .mn-link.mn-link-app .mn-link-icon { background: #bfd9d7; color: #1a2424; } [data-theme="dark"] .mn-link.mn-link-app .mn-link-label { color: #7fbdba; } [data-theme="dark"] .mn-divider { background: rgba(255,255,255,0.07); } [data-theme="dark"] .mn-btn-login { border-color: rgba(255,255,255,0.12); color: #e8e8f0; } [data-theme="dark"] .mn-btn-signup { background: #bfd9d7; color: #0f0f14; } [data-theme="dark"] .nav-toggle span { background: #e8e8f0; } /* ---- Header (non-scrolled, transparent area) ---- */ [data-theme="dark"] #header:not(.scrolled) .nav-toggle span { background: #e8e8f0; } /* ---- Footer ---- */ [data-theme="dark"] #footer { background: #0a0a0f; border-top-color: rgba(191,217,215,0.1); } [data-theme="dark"] .footer-col h4 { color: #e8e8f0; } [data-theme="dark"] .footer-col a { color: #a8aabb; } [data-theme="dark"] .footer-col a:hover { color: #bfd9d7; } /* ---- Solution section ---- */ [data-theme="dark"] #solution { background: #1a1a24; } [data-theme="dark"] .solution-point { background: rgba(191,217,215,0.08); border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .solution-badge-float { background: #bfd9d7; color: #0f0f14; } /* Solution dashboard mockup inline colors */ [data-theme="dark"] #solution [style*="color:#5e606f"] { color: #a8aabb !important; } [data-theme="dark"] #solution [style*="color: #5e606f"] { color: #a8aabb !important; } [data-theme="dark"] #solution [style*="color:#343445"] { color: #bfd9d7 !important; } [data-theme="dark"] #solution [style*="background:rgba(52,54,69,0.04)"] { background: rgba(191,217,215,0.05) !important; border-color: rgba(191,217,215,0.12) !important; } [data-theme="dark"] #solution [style*="background:rgba(191"] { background: rgba(191,217,215,0.12) !important; border-color: rgba(191,217,215,0.25) !important; } [data-theme="dark"] #solution [style*="background:#fff"] { background: #1c1c28 !important; } [data-theme="dark"] #solution [style*="background: #fff"] { background: #1c1c28 !important; } [data-theme="dark"] #solution [style*="border: 1px solid rgba(255,255,255,0.06)"] { border-color: rgba(191,217,215,0.12) !important; } [data-theme="dark"] #solution [style*="border:1px solid rgba(255,255,255,0.06)"] { border-color: rgba(191,217,215,0.12) !important; } /* Big numbers in dashboard cards inherit color — force white */ [data-theme="dark"] .solution-img-placeholder p { color: #e8e8f0; } [data-theme="dark"] .solution-img-placeholder p[style*="color:#5e606f"] { color: #a8aabb !important; } [data-theme="dark"] .solution-img-placeholder p[style*="color:#343445"] { color: #bfd9d7 !important; } [data-theme="dark"] .solution-img-placeholder p[style*="color:#4ade80"] { color: #4ade80 !important; } /* ---- Final CTA section ---- */ [data-theme="dark"] #cta-final { background: #0f0f14; border-top-color: rgba(191,217,215,0.1); } [data-theme="dark"] .cta-final-inner { background: linear-gradient(135deg, #1a2424 0%, #1a1a2e 100%); border: 1px solid rgba(191,217,215,0.12); } [data-theme="dark"] .cta-final-inner h2, [data-theme="dark"] .cta-final-inner .display-lg { color: #e8e8f0; } [data-theme="dark"] .cta-final-inner .lead { color: #a8aabb; } /* ---- CTA section (dark by default, needs adjustment) ---- */ [data-theme="dark"] #cta { background: #1a1a24; border-top: 1px solid rgba(191,217,215,0.12); border-bottom: 1px solid rgba(191,217,215,0.12); } /* ---- Subpages: partner, presse, karriere, ueber-uns, preise ---- */ [data-theme="dark"] .hero-trust-item { color: rgba(255,255,255,0.55); } [data-theme="dark"] .hero-trust-item span { color: #bfd9d7; } /* Cards on subpages */ [data-theme="dark"] .value-card, [data-theme="dark"] .benefit-card, [data-theme="dark"] .commission-card, [data-theme="dark"] .step-card, [data-theme="dark"] .faq-item, [data-theme="dark"] .job-card, [data-theme="dark"] .press-card, [data-theme="dark"] .asset-card, [data-theme="dark"] .who-card, [data-theme="dark"] .testimonial-card { background: #1a1a24; border-color: rgba(191,217,215,0.12); } [data-theme="dark"] .value-card h3, [data-theme="dark"] .benefit-card h3, [data-theme="dark"] .commission-card h3, [data-theme="dark"] .who-card h3, [data-theme="dark"] .press-card h3, [data-theme="dark"] .asset-card h3 { color: #e8e8f0; } [data-theme="dark"] .value-card p, [data-theme="dark"] .benefit-card p, [data-theme="dark"] .who-card p, [data-theme="dark"] .press-card p, [data-theme="dark"] .asset-card p { color: #a8aabb; } /* Accordion job cards */ [data-theme="dark"] .job-header { color: #e8e8f0; } [data-theme="dark"] .job-header:hover { background: rgba(191,217,215,0.05); } [data-theme="dark"] .job-body { color: #b8bace; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .job-tag { background: rgba(191,217,215,0.1); color: #bfd9d7; } /* Timeline */ [data-theme="dark"] .timeline-year { color: #7fbdba; } [data-theme="dark"] .timeline-content { color: #b8bace; } [data-theme="dark"] .timeline-line { background: rgba(191,217,215,0.15); } /* Stats bar on subpages */ [data-theme="dark"] .stats-bar, [data-theme="dark"] .press-stats { background: #1a1a24; border-color: rgba(191,217,215,0.08); } [data-theme="dark"] .stats-bar .stat-val, [data-theme="dark"] .press-stats .stat-val { color: #e8e8f0; } [data-theme="dark"] .stats-bar .stat-lbl, [data-theme="dark"] .press-stats .stat-lbl { color: #a8aabb; } /* Forms on subpages */ [data-theme="dark"] .signup-form, [data-theme="dark"] .contact-form, [data-theme="dark"] .apply-form { background: #1a1a24; border-color: rgba(191,217,215,0.12); } [data-theme="dark"] .form-group label { color: #d4d5e0; } /* Comparison table (preise.html) */ [data-theme="dark"] .compare-table th { color: #e8e8f0; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .compare-table td { color: #d4d5e0; border-color: rgba(191,217,215,0.08); } [data-theme="dark"] .compare-table tbody tr:hover { background: #1a1a24; } [data-theme="dark"] .compare-group td { color: #7fbdba; } [data-theme="dark"] .col-featured-bg { background: rgba(191,217,215,0.05); } [data-theme="dark"] .check-no { color: rgba(191,217,215,0.15); } [data-theme="dark"] .setup-banner { background: #1a1a24; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .setup-banner strong { color: #e8e8f0; } [data-theme="dark"] .setup-banner p { color: #a8aabb; } [data-theme="dark"] .setup-badge { background: #22222e; border-color: rgba(191,217,215,0.2); color: #7fbdba; } /* Press articles */ [data-theme="dark"] .press-article { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .press-article-title { color: #e8e8f0; } [data-theme="dark"] .press-article-meta { color: #a8aabb; } [data-theme="dark"] .press-article-excerpt { color: #b8bace; } [data-theme="dark"] .press-source { color: #7fbdba; } /* Ueber-uns cost comparison (already dark bg, keep as-is) */ [data-theme="dark"] .mission-para { color: #d4d5e0; } [data-theme="dark"] .mission-para strong { color: #e8e8f0; } [data-theme="dark"] .mission-para.highlight-para { color: #e8e8f0; border-left-color: #bfd9d7; } /* Footer on subpages */ [data-theme="dark"] footer { background: #0a0a0f; border-color: rgba(191,217,215,0.08); } [data-theme="dark"] .footer-bottom { color: #a8aabb; } [data-theme="dark"] .footer-bottom a { color: #a8aabb; } [data-theme="dark"] .footer-bottom a:hover { color: #bfd9d7; } [data-theme="dark"] .footer-slogan { color: #7c7e91; } /* Scrolled header on subpages */ [data-theme="dark"] #header.scrolled { background: rgba(15,15,20,0.96); } [data-theme="dark"] #header nav a { color: #d4d5e0; } [data-theme="dark"] #header nav a:hover { color: #e8e8f0; } /* ---- Blog / Feature subpage specific ---- */ [data-theme="dark"] .highlight-visual { background: linear-gradient(135deg, #1a2424, #1a1a24); border-color: rgba(191,217,215,0.2); } [data-theme="dark"] .other-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .other-card:hover { border-color: rgba(191,217,215,0.4); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } [data-theme="dark"] .benefit-icon-wrap.gastro { background: rgba(191,217,215,0.1); } [data-theme="dark"] .benefit-icon-wrap.gaeste { background: rgba(191,217,215,0.15); } /* ---- Blog cards ---- */ [data-theme="dark"] .post-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .post-card:hover { border-color: rgba(191,217,215,0.35); box-shadow: 0 16px 48px rgba(0,0,0,0.4); } [data-theme="dark"] .featured-post { background: #1a1a24; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .newsletter-box { background: #1a1a24; border-color: rgba(191,217,215,0.2); } /* ---- Blog article ---- */ [data-theme="dark"] .article-sidebar .toc-card, [data-theme="dark"] .article-sidebar .cta-card { background: #1a1a24; border-color: rgba(191,217,215,0.12); } [data-theme="dark"] .stat-box { background: #1a1a24; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .callout-box { background: #1e2a2a; border-left-color: #bfd9d7; } [data-theme="dark"] .strategy-card, [data-theme="dark"] .tip-card, [data-theme="dark"] .phase-block, [data-theme="dark"] .use-case-card { background: #1a1a24; border-color: rgba(191,217,215,0.1); } [data-theme="dark"] .convo-mock { background: #0a0a0f; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .timeline-item::before { background: #1a1a24; border-color: rgba(191,217,215,0.3); } [data-theme="dark"] .dsgvo-section { background: #1a1a24; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .definition-box { background: #1e2a2a; border-color: rgba(191,217,215,0.25); } [data-theme="dark"] blockquote { border-left-color: #bfd9d7; background: #1a1a24; color: #c0c0d0; } /* ---- Chatbot ---- */ [data-theme="dark"] #chat-window { background: #1a1a24; border-color: rgba(191,217,215,0.2); box-shadow: 0 24px 80px rgba(0,0,0,0.6); } [data-theme="dark"] .chat-header { background: #bfd9d7; } [data-theme="dark"] .chat-header * { color: #0f0f14 !important; } [data-theme="dark"] #chat-messages { background: #0f0f14; } [data-theme="dark"] .msg-bot .bubble { background: #1a1a24; color: #e8e8f0; border-color: rgba(191,217,215,0.15); } [data-theme="dark"] .msg-user .bubble { background: #bfd9d7; color: #0f0f14; } [data-theme="dark"] .quick-reply { background: #1a1a24; border-color: rgba(191,217,215,0.25); color: #bfd9d7; } [data-theme="dark"] .quick-reply:hover { background: rgba(191,217,215,0.1); } [data-theme="dark"] #chat-input-area { background: #1a1a24; border-top-color: rgba(191,217,215,0.12); } [data-theme="dark"] #chat-input { background: #0f0f14; border-color: rgba(191,217,215,0.2); color: #e8e8f0; } [data-theme="dark"] #chat-input::placeholder { color: #a8aabb; } /* ---- Theme toggle button ---- */ #theme-toggle { position: fixed; bottom: 24px; left: 24px; z-index: 9990; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.12); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-size: 18px; line-height: 1; } #theme-toggle:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(0,0,0,0.2); } [data-theme="dark"] #theme-toggle { background: #1a1a24; border-color: rgba(191,217,215,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.4); } /* ---- Lang switcher ---- */ #lang-switcher { position: fixed; bottom: 80px; left: 24px; z-index: 9990; } #lang-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.12); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); font-size: 18px; line-height: 1; } #lang-toggle:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(0,0,0,0.2); } [data-theme="dark"] #lang-toggle { background: #1a1a24; border-color: rgba(191,217,215,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.4); } #lang-menu { display: none; flex-direction: column; gap: 4px; position: absolute; bottom: 52px; left: 0; } #lang-menu.open { display: flex; } #lang-menu button { width: 44px; height: 36px; border-radius: 8px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } #lang-menu button:hover, #lang-menu button.active { background: var(--c-teal); color: #0f0f14; border-color: var(--c-teal); } [data-theme="dark"] #lang-menu button { background: #1a1a24; border-color: rgba(191,217,215,0.2); color: #e8e8f0; } [data-theme="dark"] #lang-menu button:hover, [data-theme="dark"] #lang-menu button.active { background: #bfd9d7; color: #0f0f14; border-color: #bfd9d7; } /* ============================================================ MOBILE — shared across all pages (feature & blog subpages) ============================================================ */ @media (max-width: 640px) { /* Fixed UI buttons: stack compactly */ #lang-switcher { bottom: 88px; left: 16px; } #theme-toggle { bottom: 16px; left: 16px; } /* Feature subpages */ .benefits-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .highlight-inner { grid-template-columns: 1fr !important; gap: 32px !important; } .other-grid { grid-template-columns: 1fr 1fr !important; } .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn { width: 100%; justify-content: center; } .back-link { margin-bottom: 16px; } /* Blog pages */ .article-layout { grid-template-columns: 1fr !important; } .article-sidebar { display: none; } .post-grid { grid-template-columns: 1fr !important; } .featured-post { grid-template-columns: 1fr !important; } .blog-hero-inner { padding-top: 100px !important; } } @media (max-width: 400px) { .other-grid { grid-template-columns: 1fr !important; } } /* ============================================================ DARK MODE — Subpage hardcoded color overrides Fixes hardcoded #5b8a88, #3d6b69, #343445 etc. in subpages ============================================================ */ /* Label / eyebrow text — teal in both modes */ [data-theme="dark"] .label { color: #7fbdba !important; } [data-theme="dark"] .toggle-yearly-badge { color: #7fbdba !important; } /* Teal accent text (#5b8a88, #3d6b69) — brighten for dark */ [data-theme="dark"] .pf-check, [data-theme="dark"] .check-yes, [data-theme="dark"] .press-link, [data-theme="dark"] .btn-outline, [data-theme="dark"] .c-label, [data-theme="dark"] .footer-slogan, [data-theme="dark"] .earnings-total span:last-child, [data-theme="dark"] .faq-q:hover { color: #7fbdba !important; } [data-theme="dark"] .who-tag, [data-theme="dark"] .job-section-title, [data-theme="dark"] .timeline-tag, [data-theme="dark"] .team-role, [data-theme="dark"] .founder-role, [data-theme="dark"] .asset-info a, [data-theme="dark"] .contact-ch-text a, [data-theme="dark"] .c-amount { color: #bfd9d7 !important; } /* Hero badges */ [data-theme="dark"] .hero-badge { background: rgba(191,217,215,0.12) !important; border-color: rgba(191,217,215,0.25) !important; color: #bfd9d7 !important; } /* Job tags */ [data-theme="dark"] .job-tag.type-internship { background: rgba(191,217,215,0.1) !important; color: #bfd9d7 !important; border-color: rgba(191,217,215,0.2) !important; } /* Setup badge (preise.html) */ [data-theme="dark"] .setup-badge { background: #22222e !important; color: #7fbdba !important; border-color: rgba(191,217,215,0.2) !important; } /* .btn-white on dark backgrounds (hero CTAs on subpages) */ [data-theme="dark"] .btn-white { background: rgba(255,255,255,0.12) !important; color: #e8e8f0 !important; box-shadow: none !important; border: 1px solid rgba(255,255,255,0.2) !important; } [data-theme="dark"] .btn-white:hover { background: rgba(255,255,255,0.18) !important; } /* btn-outline (presse.html) */ [data-theme="dark"] .btn-outline { color: #bfd9d7 !important; border-color: rgba(191,217,215,0.3) !important; } [data-theme="dark"] .btn-outline:hover { background: rgba(191,217,215,0.08) !important; } /* Billing toggle active button text */ [data-theme="dark"] #btn-monthly, [data-theme="dark"] #btn-yearly { color: #e8e8f0; } /* Hero section backgrounds on subpages (light gradient) */ [data-theme="dark"] #hero { background: linear-gradient(160deg, #0d1a1a 0%, #0f0f14 50%, #0f0f14 100%) !important; } /* Mission section */ [data-theme="dark"] #mission { background: #0f0f14 !important; } [data-theme="dark"] .mission-label-col h2 { color: #e8e8f0; } [data-theme="dark"] .mission-para.highlight-para em { color: #7fbdba !important; } /* Team avatars with hardcoded dark gradient — keep, they look fine */ /* .team-avatar gradients intentionally kept */ /* Karierre process steps (inline icon spans) */ [data-theme="dark"] .p-num { border-color: rgba(191,217,215,0.3) !important; color: #bfd9d7 !important; } /* Inline teal color in karriere.html steps */ [data-theme="dark"] [style*="color:#5b8a88"] { color: #7fbdba !important; } [data-theme="dark"] [style*="color: #5b8a88"] { color: #7fbdba !important; } /* Partner earnings section */ [data-theme="dark"] .earnings-section { background: #1a1a24 !important; border-color: rgba(191,217,215,0.1) !important; } [data-theme="dark"] .earnings-label { color: #7fbdba !important; } [data-theme="dark"] .earnings-amount { color: #e8e8f0 !important; } [data-theme="dark"] .earnings-note { color: #a8aabb !important; } /* Visual card (partner.html calculator) */ [data-theme="dark"] .visual-card { background: #1a1a24 !important; border-color: rgba(191,217,215,0.12) !important; } /* Commission featured card */ [data-theme="dark"] .commission-card.featured { background: #1e3333 !important; border-color: rgba(191,217,215,0.3) !important; } /* Presse hero (light gradient fix) */ [data-theme="dark"] #press-hero { background: linear-gradient(160deg, #0d1a1a 0%, #0f0f14 50%, #0f0f14 100%) !important; } [data-theme="dark"] .press-featured { background: #1a1a24 !important; border-color: rgba(191,217,215,0.12) !important; } [data-theme="dark"] .press-featured-visual { background: #22222e !important; } [data-theme="dark"] .press-source-badge { background: rgba(191,217,215,0.1) !important; color: #bfd9d7 !important; border-color: rgba(191,217,215,0.2) !important; } /* Section backgrounds on subpages that use hardcoded light */ [data-theme="dark"] #values, [data-theme="dark"] #who-section, [data-theme="dark"] #process-section { background: #0f0f14 !important; } [data-theme="dark"] #how-it-works, [data-theme="dark"] #benefits-section, [data-theme="dark"] #story { background: #1a1a24 !important; } /* Promise / dark sections on ueber-uns stay dark — already fine */ /* Presse #social section — already dark bg, just ensure text readable */ [data-theme="dark"] #social h2 { color: #fff !important; } [data-theme="dark"] #social p { color: rgba(255,255,255,0.65) !important; } /* Preise compare table col highlight */ [data-theme="dark"] .col-featured-bg { background: rgba(191,217,215,0.04) !important; } /* Inline style overrides */ [data-theme="dark"] [style*="color:#3d6b69"] { color: #7fbdba !important; } [data-theme="dark"] [style*="color: #3d6b69"] { color: #7fbdba !important; } /* Phone mockup inline color overrides (dark text → light in dark mode) */ [data-theme="dark"] .ph-screen [style*="color:#343445"] { color: #e8e8f0 !important; } [data-theme="dark"] .ph-screen [style*="color: #343445"] { color: #e8e8f0 !important; } [data-theme="dark"] .ph-screen [style*="color:#5e606f"] { color: #a8aabb !important; } [data-theme="dark"] .ph-screen [style*="color: #5e606f"] { color: #a8aabb !important; } [data-theme="dark"] .ph-screen [style*="color:#5b8a88"] { color: #7fbdba !important; } [data-theme="dark"] .ph-screen [style*="color: #5b8a88"] { color: #7fbdba !important; } [data-theme="dark"] .ph-screen [style*="background:#f"] { background: #22222e !important; } [data-theme="dark"] .ph-screen [style*="background: #f"] { background: #22222e !important; } [data-theme="dark"] .ph-screen [style*="background:rgba(52"] { background: rgba(191,217,215,0.06) !important; } [data-theme="dark"] .ph-screen [style*="background:rgba(191"] { background: rgba(191,217,215,0.15) !important; } [data-theme="dark"] .ph-screen [style*="border:1px solid rgba(52"] { border-color: rgba(191,217,215,0.15) !important; } /* Journey mockup inline color overrides */ [data-theme="dark"] .jm-screen [style*="color:#343445"] { color: #e8e8f0 !important; } [data-theme="dark"] .jm-screen [style*="color: #343445"] { color: #e8e8f0 !important; } [data-theme="dark"] .jm-screen [style*="color:#5e606f"] { color: #a8aabb !important; } [data-theme="dark"] .jm-screen [style*="color: #5e606f"] { color: #a8aabb !important; } [data-theme="dark"] .jm-screen [style*="color:#5b8a88"] { color: #7fbdba !important; } [data-theme="dark"] .jm-screen [style*="color:#7c7e91"] { color: #a8aabb !important; } [data-theme="dark"] .jm-screen [style*="background:#f"] { background: #22222e !important; } [data-theme="dark"] .jm-screen [style*="background: #f"] { background: #22222e !important; } [data-theme="dark"] .jm-screen [style*="background:rgba(52"] { background: rgba(191,217,215,0.06) !important; } [data-theme="dark"] .jm-screen [style*="background:rgba(191"] { background: rgba(191,217,215,0.12) !important; } [data-theme="dark"] .jm-screen [style*="background:linear-gradient(135deg, #343445"] { background: linear-gradient(135deg, #1e2a2a, #2a2a3a) !important; } /* demo.html — radio buttons */ [data-theme="dark"] .radio-option.selected { border-color: #bfd9d7 !important; background: rgba(191,217,215,0.08) !important; } [data-theme="dark"] .radio-option.selected .radio-dot { border-color: #bfd9d7 !important; background: #bfd9d7 !important; } [data-theme="dark"] .radio-option.selected .radio-dot::after { background: #1c1c28 !important; } [data-theme="dark"] .btn-next { background: #bfd9d7 !important; color: #1c1c28 !important; } [data-theme="dark"] .btn-next:hover { background: #d4eceb !important; } /* blog pages — btn-cta-white hover */ [data-theme="dark"] .btn-cta-white:hover { background: rgba(255,255,255,0.18) !important; color: #e8e8f0 !important; }