/* ========================================================================== LunoHost – Dark Theme Wird nach bootstrap.css / style.css geladen und greift, sobald die Klasse "dark" trägt. Gilt für Landing (Marketing) und Dashboard. ========================================================================== */ html.dark { color-scheme: dark; /* Graphit-Palette (flaches Near-Black, Vorbild: skrime.io) */ --lh-bg: #0b0b0d; /* Seitenhintergrund */ --lh-bg-alt: #101012; /* abgesetzte Sektionen / Content */ --lh-surface: #17171b; /* Karten, Header, Panels */ --lh-surface-2: #222227; /* Eingaben, Zeilen, Hover */ --lh-surface-3: #2d2d34; /* aktive Elemente */ --lh-border: rgba(255, 255, 255, 0.08); --lh-border-strong: rgba(255, 255, 255, 0.18); --lh-text: #ffffff; --lh-text-2: #b4b7c3; /* muted */ --lh-text-3: #7c7f8c; /* Platzhalter, Kleingedrucktes */ --lh-primary: #3d5eff; /* Markenblau, kräftig */ --lh-primary-hover: #5c78ff; --lh-primary-soft: rgba(61, 94, 255, 0.18); --lh-primary-ring: rgba(61, 94, 255, 0.4); --lh-purple: #5e3fa0; /* zweite Farbe des Hero-Verlaufs */ --lh-gradient: linear-gradient(100deg, #2743e0 0%, #4a3fd0 45%, #7a3fd6 100%); --lh-success: #2ee6a0; --lh-danger: #ff5a6a; --lh-warning: #ffb340; --lh-info: #3fd0ec; --lh-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --lh-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35); /* Bootstrap-Variablen umbiegen, damit Komponenten ohne eigene Regel passen */ --bs-body-bg: var(--lh-bg); --bs-body-color: var(--lh-text); --bs-primary: var(--lh-primary); --bs-primary-rgb: 61, 94, 255; --bs-secondary-color: var(--lh-text-2); --bs-border-color: var(--lh-border); --bs-link-color: var(--lh-primary); --bs-link-hover-color: var(--lh-primary-hover); --bs-light: var(--lh-surface-2); --bs-light-rgb: 34, 34, 39; --bs-dark: var(--lh-text); --bs-dark-rgb: 242, 243, 245; --bs-heading-color: var(--lh-text); } /* -------------------------------------------------------------------------- Basis -------------------------------------------------------------------------- */ html.dark body { background-color: var(--lh-bg); color: var(--lh-text); } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark .h1, html.dark .h2, html.dark .h3, html.dark .h4, html.dark .h5, html.dark .h6, html.dark .title, html.dark .heading, html.dark .card-title, html.dark .modal-title, html.dark .fw-bold, html.dark .fw-semibold, html.dark label, html.dark .form-label, html.dark .accordion-button, html.dark dt, html.dark th { color: var(--lh-text); } html.dark p, html.dark li, html.dark td, html.dark small, html.dark .small { color: inherit; } html.dark a { color: var(--lh-primary); } html.dark a:hover { color: var(--lh-primary-hover); } html.dark hr { color: var(--lh-border-strong) !important; border-color: var(--lh-border-strong); opacity: 1; } html.dark ::selection { background: var(--lh-primary); color: #fff; } html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-track { background: var(--lh-bg-alt); } html.dark ::-webkit-scrollbar-thumb { background: var(--lh-surface-3); border-radius: 10px; border: 2px solid var(--lh-bg-alt); } html.dark ::-webkit-scrollbar-thumb:hover { background: #33446b; } /* Text-Utilities */ html.dark .text-dark, html.dark .text-body, html.dark .text-black { color: var(--lh-text) !important; } html.dark .text-muted, html.dark .text-secondary, html.dark .text-body-secondary { color: var(--lh-text-2) !important; } html.dark .text-primary { color: var(--lh-primary) !important; } html.dark .text-success { color: var(--lh-success) !important; } html.dark .text-danger { color: var(--lh-danger) !important; } html.dark .text-warning { color: var(--lh-warning) !important; } html.dark .text-info { color: var(--lh-primary) !important; } html.dark .text-white-50 { color: rgba(255, 255, 255, 0.6) !important; } html.dark .text-white, html.dark .title-dark.text-white, html.dark .heading.text-white { color: #fff !important; } /* Hintergrund-Utilities */ html.dark .bg-white { background-color: var(--lh-surface) !important; } html.dark .bg-light { background-color: var(--lh-bg-alt) !important; } html.dark .card .bg-light, html.dark .bg-light.border, html.dark .bg-light.rounded-4, html.dark .bg-light.rounded { background-color: var(--lh-surface-2) !important; } html.dark .bg-primary { background-color: var(--lh-primary) !important; } html.dark .bg-soft-primary { background-color: var(--lh-primary-soft) !important; color: var(--lh-primary) !important; } html.dark .bg-soft-secondary { background-color: rgba(166, 176, 200, 0.14) !important; color: var(--lh-text-2) !important; } html.dark .bg-soft-success { background-color: rgba(61, 220, 155, 0.14) !important; color: var(--lh-success) !important; } html.dark .bg-soft-danger { background-color: rgba(255, 107, 122, 0.14) !important; color: var(--lh-danger) !important; } html.dark .bg-soft-warning { background-color: rgba(247, 162, 75, 0.14) !important; color: var(--lh-warning) !important; } html.dark .bg-soft-info { background-color: rgba(56, 189, 214, 0.14) !important; color: var(--lh-info) !important; } html.dark .bg-soft-light { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--lh-text) !important; } html.dark .bg-white-50 { background-color: rgba(255, 255, 255, 0.06) !important; } /* Rahmen & Schatten */ html.dark .border, html.dark .border-top, html.dark .border-bottom, html.dark .border-start, html.dark .border-end { border-color: var(--lh-border) !important; } html.dark .shadow, html.dark .shadow-sm { box-shadow: none !important; } html.dark .shadow-md, html.dark .shadow-lg { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important; } /* -------------------------------------------------------------------------- Karten, Listen, Tabellen -------------------------------------------------------------------------- */ html.dark .card { background-color: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 12px; color: var(--lh-text); } html.dark .card .card-header, html.dark .card .card-footer { background-color: transparent; border-color: var(--lh-border); } html.dark .list-group-item { background-color: transparent; border-color: var(--lh-border); color: var(--lh-text); } html.dark .table { --bs-table-bg: transparent; --bs-table-color: var(--lh-text); --bs-table-border-color: var(--lh-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.025); --bs-table-striped-color: var(--lh-text); --bs-table-hover-bg: rgba(61, 94, 255, 0.08); --bs-table-hover-color: var(--lh-text); color: var(--lh-text); border-color: var(--lh-border); } html.dark .table thead th, html.dark .table > :not(caption) > * > * { border-bottom-color: var(--lh-border); color: var(--lh-text); background-color: transparent; } html.dark .table thead th { color: var(--lh-text-2); } html.dark .table .text-muted { color: var(--lh-text-2) !important; } /* Features / Icon-Kacheln (Startseite, Dashboard-Kennzahlen) */ html.dark .features.feature-primary .icon, html.dark .features.feature-info .icon, html.dark .pricing .icon { background-color: var(--lh-primary-soft) !important; color: var(--lh-primary) !important; } html.dark .features .icon i, html.dark .features.feature-info .icon i { color: var(--lh-primary) !important; } html.dark .features.feature-info { background-color: var(--lh-surface); border: 1px solid var(--lh-border); } html.dark .features .title, html.dark .features h6 { color: var(--lh-text); } html.dark .features .title:hover, html.dark .features.feature-primary .title:hover, html.dark .features a:hover .title { color: var(--lh-text) !important; } /* Pricing-Karten (Bestellseiten) */ html.dark .pricing.pricing-primary .name, html.dark .pricing.pricing-primary .title.name { color: var(--lh-primary) !important; } html.dark .pricing .border-bottom { border-color: var(--lh-border) !important; } html.dark .pricing li { color: var(--lh-text); } html.dark .price-card, html.dark .team-card, html.dark .legal-card { background-color: var(--lh-surface) !important; } html.dark .popular-flag { background: var(--lh-primary); } html.dark .soon-flag { background: var(--lh-primary-soft); color: var(--lh-primary); } /* -------------------------------------------------------------------------- Formulare -------------------------------------------------------------------------- */ html.dark .form-control, html.dark .form-select, html.dark .form-control[readonly], html.dark textarea.form-control, html.dark .qty-input { background-color: var(--lh-surface-2); border-color: var(--lh-border-strong); color: var(--lh-text) !important; } html.dark .form-control:focus, html.dark .form-select:focus { background-color: var(--lh-surface-2); border-color: var(--lh-primary); color: var(--lh-text); box-shadow: 0 0 0 3px var(--lh-primary-ring); } html.dark .form-control:disabled, html.dark .form-select:disabled { background-color: var(--lh-surface); color: var(--lh-text-3); opacity: 1; } html.dark .form-control::placeholder { color: var(--lh-text-3); opacity: 1; } html.dark .form-floating > .form-control::placeholder { color: transparent; } html.dark .form-floating > .form-control:focus::placeholder { color: transparent; } html.dark .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a6b0c8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } html.dark .form-floating > .form-control:focus ~ label, html.dark .form-floating > .form-control:not(:placeholder-shown) ~ label, html.dark .form-floating > label { color: var(--lh-text-2); } html.dark .form-floating > .form-control:focus ~ label::after, html.dark .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent; } html.dark .form-check-input { background-color: var(--lh-surface-2); border-color: var(--lh-border-strong); } html.dark .form-check-input:checked { background-color: var(--lh-primary); border-color: var(--lh-primary); } html.dark .form-check-input:focus { box-shadow: 0 0 0 3px var(--lh-primary-ring); } html.dark .input-group-text { background-color: var(--lh-surface); border-color: var(--lh-border-strong); color: var(--lh-text-2); } html.dark .qty-btn, html.dark .qty-group .btn { background-color: var(--lh-surface); border-color: var(--lh-border-strong); color: var(--lh-text); } html.dark .qty-btn:hover { background-color: var(--lh-surface-3); color: var(--lh-text); } html.dark input:-webkit-autofill, html.dark input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--lh-surface-2) inset; -webkit-text-fill-color: var(--lh-text); caret-color: var(--lh-text); } /* -------------------------------------------------------------------------- Buttons & Badges -------------------------------------------------------------------------- */ html.dark .btn-primary { border-radius: 8px; --bs-btn-bg: var(--lh-primary); --bs-btn-border-color: var(--lh-primary); --bs-btn-hover-bg: var(--lh-primary-hover); --bs-btn-hover-border-color: var(--lh-primary-hover); --bs-btn-active-bg: #4a6be0; --bs-btn-active-border-color: #4a6be0; --bs-btn-disabled-bg: var(--lh-primary); --bs-btn-disabled-border-color: var(--lh-primary); background-color: var(--lh-primary); border-color: var(--lh-primary); color: #fff; } html.dark .btn-primary:hover, html.dark .btn-primary:focus { background-color: var(--lh-primary-hover); border-color: var(--lh-primary-hover); color: #fff; } html.dark .btn-outline-primary { color: var(--lh-primary); border-color: var(--lh-primary); background-color: transparent; } html.dark .btn-outline-primary:hover { background-color: var(--lh-primary); border-color: var(--lh-primary); color: #fff; } html.dark .btn-soft-primary { background-color: var(--lh-primary-soft) !important; border-color: transparent !important; color: var(--lh-primary) !important; box-shadow: none; } html.dark .btn-soft-primary:hover { background-color: var(--lh-primary) !important; color: #fff !important; } html.dark .btn-light, html.dark .btn-soft-light, html.dark .btn-soft-secondary, html.dark .btn-secondary { background-color: var(--lh-surface-2) !important; border-color: var(--lh-border-strong) !important; color: var(--lh-text) !important; box-shadow: none; } html.dark .btn-light:hover, html.dark .btn-soft-light:hover, html.dark .btn-soft-secondary:hover, html.dark .btn-secondary:hover { background-color: var(--lh-surface-3) !important; border-color: var(--lh-border-strong) !important; color: #fff !important; } html.dark .btn-light .text-primary { color: var(--lh-primary) !important; } html.dark .btn-info { background-color: var(--lh-primary) !important; border-color: var(--lh-primary) !important; color: #fff !important; } html.dark .btn-info:hover { background-color: var(--lh-primary-hover) !important; border-color: var(--lh-primary-hover) !important; } html.dark .btn-success { background-color: #24b47e !important; border-color: #24b47e !important; color: #fff !important; } html.dark .btn-danger { background-color: #e3465a !important; border-color: #e3465a !important; color: #fff !important; } html.dark .btn-icon { color: var(--lh-text); } html.dark .btn-close { filter: invert(1) grayscale(100%) brightness(150%); } html.dark .badge { color: #fff; } html.dark .badge.bg-white, html.dark .badge.bg-light { background-color: rgba(255, 255, 255, 0.12) !important; color: var(--lh-text) !important; } html.dark .badge.bg-secondary { background-color: var(--lh-surface-3) !important; color: var(--lh-text) !important; } html.dark .badge.bg-info { background-color: var(--lh-primary) !important; } /* -------------------------------------------------------------------------- Navigation, Tabs, Dropdowns, Modals, Alerts, Accordion -------------------------------------------------------------------------- */ html.dark .nav-pills { background: var(--lh-surface) !important; border: 1px solid var(--lh-border); border-radius: 10px; padding: 5px; gap: 4px; } html.dark .nav-pills .nav-link { color: var(--lh-text-2) !important; background-color: transparent; border-radius: 8px !important; } html.dark .nav-pills .nav-link h6, html.dark .nav-pills .nav-link .h6 { color: inherit !important; font-weight: 600; } html.dark .nav-pills .nav-link:hover { color: var(--lh-text) !important; background-color: var(--lh-surface-2); } html.dark .nav-pills .nav-link.active, html.dark .nav-pills .show > .nav-link { background-color: var(--lh-primary) !important; color: #fff !important; } html.dark .nav-pills .nav-link.active .badge { background-color: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } html.dark .nav-tabs { border-color: var(--lh-border); } html.dark .nav-tabs .nav-link { color: var(--lh-text-2); } html.dark .nav-tabs .nav-link.active { background-color: var(--lh-surface); border-color: var(--lh-border) var(--lh-border) var(--lh-surface); color: var(--lh-primary); } html.dark .dropdown-menu { background-color: var(--lh-surface); border-color: var(--lh-border); box-shadow: var(--lh-shadow); } html.dark .dropdown-item { color: var(--lh-text); } html.dark .dropdown-item:hover, html.dark .dropdown-item:focus { background-color: var(--lh-surface-2); color: var(--lh-primary); } html.dark .dropdown-header { color: var(--lh-text-3) !important; } html.dark .dropdown-divider { border-color: var(--lh-border); } html.dark .modal-content { background-color: var(--lh-surface); border-color: var(--lh-border); color: var(--lh-text); } html.dark .modal-header, html.dark .modal-footer { border-color: var(--lh-border); } html.dark .modal-backdrop { background-color: #05070d; } html.dark .modal-backdrop.show { opacity: 0.7; } html.dark .alert { border-color: transparent; } html.dark .alert-warning { background-color: rgba(247, 162, 75, 0.14); color: #ffc98a; } html.dark .alert-danger { background-color: rgba(255, 107, 122, 0.14); color: #ff9aa5; } html.dark .alert-success { background-color: rgba(61, 220, 155, 0.14); color: #7be9bd; } html.dark .alert-info, html.dark .alert-primary { background-color: var(--lh-primary-soft); color: #9db1f7; } html.dark .accordion { --bs-accordion-bg: var(--lh-surface); --bs-accordion-color: var(--lh-text); --bs-accordion-border-color: var(--lh-border); --bs-accordion-btn-bg: var(--lh-surface); --bs-accordion-btn-color: var(--lh-text); --bs-accordion-active-bg: var(--lh-primary-soft); --bs-accordion-active-color: var(--lh-primary); } html.dark .accordion .accordion-item { background-color: var(--lh-surface) !important; border-color: var(--lh-border); } html.dark .accordion .accordion-item .accordion-button, html.dark .accordion .accordion-item .accordion-button.collapsed { background-color: var(--lh-surface) !important; color: var(--lh-text) !important; } html.dark .accordion .accordion-item .accordion-button:not(.collapsed), html.dark .faq-accordion .accordion-button:not(.collapsed) { background-color: var(--lh-primary-soft) !important; color: var(--lh-primary) !important; } html.dark .accordion-body { color: var(--lh-text-2); } html.dark .accordion-button::after { filter: invert(1) brightness(1.4); } html.dark .faq-accordion .accordion-item .accordion-button:before { color: var(--lh-text-2); } html.dark .breadcrumb .breadcrumb-item a { color: var(--lh-text-2); } html.dark .breadcrumb .breadcrumb-item.active { color: var(--lh-text); } html.dark .progress { background-color: var(--lh-surface-2); } /* -------------------------------------------------------------------------- Landing: Navigation, Hero, Sektionen, Footer -------------------------------------------------------------------------- */ html.dark #topnav, html.dark #topnav.nav-sticky { background-color: #0b0b0d; box-shadow: 0 1px 0 var(--lh-border); } html.dark #topnav .logo { color: var(--lh-text) !important; } html.dark #topnav .navigation-menu > li > a, html.dark #topnav.nav-sticky .navigation-menu > li > a { color: #ffffff !important; font-weight: 700; letter-spacing: 0.06em; } html.dark #topnav .navigation-menu > li:hover > a, html.dark #topnav .navigation-menu > li.active > a, html.dark #topnav.nav-sticky .navigation-menu > li:hover > a, html.dark #topnav.nav-sticky .navigation-menu > li.active > a { color: var(--lh-primary) !important; } html.dark #topnav .navigation-menu > li .menu-arrow, html.dark #topnav.nav-sticky .navigation-menu > li .menu-arrow { border-color: #ffffff; } html.dark #topnav .navigation-menu > li:hover .menu-arrow, html.dark #topnav.nav-sticky .navigation-menu > li:hover .menu-arrow { border-color: var(--lh-primary); } html.dark #topnav .navbar-toggle .lines span, html.dark #topnav.nav-sticky .navbar-toggle .lines span { background-color: #ffffff !important; } html.dark #topnav .buy-button .btn-light { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.25) !important; color: #fff !important; } html.dark #topnav .buy-button .btn-light:hover { border-color: #fff !important; } html.dark #topnav .navigation-menu .submenu { background-color: #151518 !important; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65); padding: 8px 0; min-width: 220px; margin-top: 0; } html.dark #topnav .navigation-menu > li > .submenu::before { /* unsichtbare Brücke zwischen Menüpunkt und Panel, damit nichts zuklappt */ content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } html.dark #topnav .navigation-menu .submenu li a.sub-menu-item { color: #ffffff !important; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; padding: 9px 44px 9px 18px; border-radius: 6px; margin: 0 8px; transition: background-color .15s ease, color .15s ease; } html.dark #topnav .navigation-menu .submenu li a.sub-menu-item:hover, html.dark #topnav .navigation-menu .submenu li a.sub-menu-item:focus, html.dark #topnav .navigation-menu .submenu li.has-submenu:hover > a.sub-menu-item { color: #ffffff !important; background-color: var(--lh-primary) !important; padding-left: 24px; } html.dark #topnav .navigation-menu .submenu li.has-submenu > .submenu-arrow { border-color: #ffffff; right: 20px; width: 6px; height: 6px; } html.dark #topnav .navigation-menu .submenu li.has-submenu:hover > .submenu-arrow { border-color: #ffffff; } /* Zweite Ebene: bündig neben dem Elternpunkt, keine Lücke */ html.dark #topnav .navigation-menu .submenu .submenu { left: 100%; top: -9px; margin-left: 2px; width: 210px; min-width: 210px; background-color: #151518 !important; } html.dark #topnav .navigation-menu .submenu li.has-submenu.open-left > .submenu { left: auto; right: 100%; margin-left: 0; margin-right: 2px; } html.dark #topnav .navigation-menu .submenu li.has-submenu::after { width: 6px; } html.dark #topnav .navigation-menu .submenu .submenu li a.sub-menu-item { padding: 9px 18px; } @media (max-width: 991px) { html.dark #topnav #navigation { background-color: #151518; border-top: 1px solid var(--lh-border); box-shadow: var(--lh-shadow); } html.dark #topnav .navigation-menu > li > a { color: var(--lh-text) !important; } html.dark #topnav .navigation-menu .submenu { background-color: transparent !important; border: 0; box-shadow: none; } html.dark #topnav .navigation-menu .submenu li a.sub-menu-item { color: var(--lh-text-2) !important; } } /* Hero: kräftiges Verlaufsband von Blau nach Lila (wie das Vorbild) */ html.dark .bg-home, html.dark .team-hero, html.dark .legal-hero, html.dark .bg-home.bg-circle-gradiant, html.dark .bg-circle-gradiant { background: var(--lh-gradient) !important; } html.dark .bg-overlay-white { background-color: transparent; } html.dark .bg-overlay { background-color: rgba(10, 10, 14, 0.55); } /* Produktseiten-Header: Verlauf, ausser die Seite bringt ein eigenes Hintergrundbild mit (inline style) */ html.dark .bg-half-170.bg-primary { background: var(--lh-gradient); background-color: #3a44b8 !important; } html.dark .bg-half-170.bg-primary[style*="background-image"] { background-size: cover !important; background-position: center !important; } html.dark .bg-home .heading, html.dark .bg-home h1, html.dark .bg-home h2, html.dark .bg-home h3, html.dark .bg-home h4, html.dark .bg-home .title, html.dark .bg-home .text-dark, html.dark .bg-home h6 { color: #ffffff !important; } html.dark .bg-home .para-desc, html.dark .bg-home .text-muted, html.dark .bg-home small { color: rgba(255, 255, 255, 0.75) !important; } html.dark .bg-home .features .icon, html.dark .bg-home .features.feature-primary .icon { background-color: rgba(255, 255, 255, 0.14) !important; } html.dark .bg-home .features .icon i { color: #ffffff !important; } html.dark .bg-home .btn-outline-primary { color: #fff; border-color: rgba(255, 255, 255, 0.55); } html.dark .bg-home .btn-outline-primary:hover { background-color: #fff; border-color: #fff; color: var(--lh-primary); } html.dark .bg-home .btn-primary { background-color: #ffffff; border-color: #ffffff; color: #2b46c9; } html.dark .bg-home .btn-primary:hover { background-color: #e9ecff; border-color: #e9ecff; color: #2b46c9; } /* Startseite: dunkler Hero mit sanftem Leuchten */ html.dark .bg-home.home-hero { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(61, 94, 255, 0.32) 0%, rgba(61, 94, 255, 0) 70%), radial-gradient(ellipse 45% 40% at 85% 85%, rgba(122, 63, 214, 0.22) 0%, rgba(122, 63, 214, 0) 70%), radial-gradient(ellipse 40% 35% at 10% 80%, rgba(39, 67, 224, 0.16) 0%, rgba(39, 67, 224, 0) 70%), var(--lh-bg) !important; position: relative; } html.dark .bg-home.home-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 100%); pointer-events: none; } html.dark .bg-home.home-hero .para-desc { color: var(--lh-text-2) !important; } html.dark .bg-home.home-hero .btn-primary { background-color: var(--lh-primary); border-color: var(--lh-primary); color: #fff; } html.dark .bg-home.home-hero .btn-primary:hover { background-color: var(--lh-primary-hover); border-color: var(--lh-primary-hover); color: #fff; } html.dark .bg-home.home-hero .btn-outline-primary { color: #fff; border-color: var(--lh-border-strong); } html.dark .bg-home.home-hero .btn-outline-primary:hover { background-color: var(--lh-surface-2); border-color: var(--lh-border-strong); color: #fff; } html.dark .bg-home.home-hero .features .icon, html.dark .bg-home.home-hero .features.feature-primary .icon { background-color: var(--lh-primary-soft) !important; border: 1px solid rgba(61, 94, 255, 0.35); } html.dark .bg-home.home-hero .features .icon i { color: var(--lh-primary-hover) !important; } html.dark .bg-home.home-hero .text-muted { color: var(--lh-text-2) !important; } html.dark .bg-home .legal-updated { background: rgba(255, 255, 255, 0.16); color: #fff; } html.dark .bg-home .form-signin { background-color: var(--lh-surface); } html.dark .bg-home .form-signin .btn-primary { background-color: var(--lh-primary); border-color: var(--lh-primary); color: #fff; } html.dark .bg-home .form-signin .btn-primary:hover { background-color: var(--lh-primary-hover); border-color: var(--lh-primary-hover); } html.dark .bg-home .form-signin label, html.dark .bg-home .form-signin .form-check-label { color: var(--lh-text-2) !important; } html.dark .bg-home .form-signin a { color: var(--lh-primary); } html.dark .bg-home .form-signin .btn-light { background-color: var(--lh-surface-2) !important; color: var(--lh-text) !important; } html.dark .section-title .title { color: var(--lh-text); } html.dark .para-desc { color: var(--lh-text-2); } html.dark .form-signin { background-color: var(--lh-surface); } /* Discord-Banner und Team-Seite kommen bereits dunkel – nur Feinschliff */ html.dark .discord-banner { background: var(--lh-gradient); border: 0; } html.dark .discord-banner .btn-light { background-color: #fff !important; color: #2b46c9 !important; border-color: #fff !important; } html.dark .footer-slim, html.dark .footer { background: #09090b; border-top: 1px solid var(--lh-border); color: var(--lh-text-2); } html.dark .footer .footer-border { border-color: var(--lh-border) !important; } html.dark .footer p { color: var(--lh-text-2); } html.dark .footer a.text-muted { color: #ffffff !important; } html.dark .footer a.text-muted:hover, html.dark .footer-legal a:hover { color: var(--lh-primary) !important; } /* Rechtliches (Impressum, AGB, Datenschutz) */ html.dark .legal-content p, html.dark .legal-content li { color: var(--lh-text-2); } html.dark .legal-content h5, html.dark .legal-content h6, html.dark .legal-content strong { color: var(--lh-text); } html.dark .legal-updated { background: var(--lh-primary-soft); color: var(--lh-primary); } /* -------------------------------------------------------------------------- Dashboard: Seitenleiste, Kopfzeile, Inhalt -------------------------------------------------------------------------- */ html.dark .page-wrapper .sidebar-wrapper.sidebar-dark { background-color: #09090b; border-right: 1px solid var(--lh-border); } html.dark .page-wrapper .sidebar-wrapper .sidebar-brand { border-bottom: 1px solid var(--lh-border); } html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li a { color: #ffffff; font-weight: 600; } html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li a i { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; } html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover > a, html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active > a { color: #ffffff !important; background: var(--lh-primary-soft); border-radius: 8px; margin: 0 8px; } html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover > a { color: var(--lh-primary-hover) !important; } html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active > a i, html.dark .page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover > a i { background-color: var(--lh-primary) !important; color: #fff !important; } html.dark .page-wrapper .sidebar-wrapper .sidebar-menu .dropdown-header { color: var(--lh-text-3) !important; } html.dark .simplebar-scrollbar:before { background: rgba(255,255,255,0.18); } html.dark .simplebar-track { background: transparent; } html.dark .page-wrapper .page-content, html.dark main.page-content.bg-light { background-color: var(--lh-bg-alt) !important; } html.dark .page-wrapper .page-content .top-header .header-bar { background: #0b0b0d; box-shadow: 0 1px 0 var(--lh-border); } html.dark .page-wrapper .page-content .top-header .header-bar .btn-icon.btn-soft-light { background-color: var(--lh-surface-2) !important; color: var(--lh-text) !important; } html.dark .layout-specing > div > h5, html.dark .layout-specing h5.mb-0 { color: var(--lh-text); } html.dark .product-container .border { border-color: var(--lh-border) !important; } html.dark .product-container .bg-light:hover { background-color: var(--lh-surface-3) !important; } /* -------------------------------------------------------------------------- Drittanbieter: DataTables, ion.rangeSlider, select2, SweetAlert2 -------------------------------------------------------------------------- */ html.dark table.dataTable { color: var(--lh-text); border-color: var(--lh-border); } html.dark table.dataTable thead th, html.dark table.dataTable thead td, html.dark table.dataTable tbody td, html.dark table.dataTable > thead > tr > th, html.dark table.dataTable > thead > tr > td { border-color: var(--lh-border) !important; } html.dark table.dataTable > tbody > tr { background-color: transparent; } html.dark table.dataTable > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(61, 94, 255, 0.08) !important; } html.dark table.dataTable.stripe > tbody > tr.odd > *, html.dark table.dataTable.display > tbody > tr.odd > * { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.025); } html.dark .dataTables_wrapper .dataTables_info, html.dark .dataTables_wrapper .dataTables_filter, html.dark .dataTables_wrapper .dataTables_length, html.dark .dt-info, html.dark .dt-search, html.dark .dt-length { color: var(--lh-text-2); } html.dark .dataTables_wrapper .dataTables_filter input, html.dark .dataTables_wrapper .dataTables_length select, html.dark .dt-search input, html.dark .dt-length select, html.dark .dt-input { background-color: var(--lh-surface-2); border: 1px solid var(--lh-border-strong); color: var(--lh-text); border-radius: 6px; } html.dark .dataTables_wrapper .dataTables_paginate .paginate_button, html.dark .dt-paging .dt-paging-button { color: var(--lh-text-2) !important; background: transparent !important; border-color: transparent !important; } html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover, html.dark .dt-paging .dt-paging-button:hover { background: var(--lh-surface-2) !important; color: var(--lh-text) !important; border-color: transparent !important; } html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.dark .dt-paging .dt-paging-button.current { background: var(--lh-primary) !important; color: #fff !important; border-color: var(--lh-primary) !important; } html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, html.dark .dt-paging .dt-paging-button.disabled { color: var(--lh-text-3) !important; } html.dark table.dataTable thead .sorting:before, html.dark table.dataTable thead .sorting:after, html.dark table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, html.dark table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after { color: var(--lh-text-2); } html.dark .irs--round .irs-line { background-color: var(--lh-surface-2); } html.dark .irs--round .irs-bar { background-color: var(--lh-primary); } html.dark .irs--round .irs-handle { border-color: var(--lh-primary); background-color: var(--lh-surface); } html.dark .irs--round .irs-min, html.dark .irs--round .irs-max { background-color: var(--lh-surface-2); color: var(--lh-text-2); } html.dark .irs--round .irs-from, html.dark .irs--round .irs-to, html.dark .irs--round .irs-single { background-color: var(--lh-primary); } html.dark .irs--round .irs-from:before, html.dark .irs--round .irs-to:before, html.dark .irs--round .irs-single:before { border-top-color: var(--lh-primary); } html.dark .irs--round .irs-grid-text { color: var(--lh-text-3); } html.dark .select2-container--bootstrap-5 .select2-selection, html.dark .select2-container .select2-selection--single { background-color: var(--lh-surface-2); border-color: var(--lh-border-strong); color: var(--lh-text); } html.dark .select2-container--bootstrap-5 .select2-selection .select2-selection__rendered, html.dark .select2-container .select2-selection--single .select2-selection__rendered { color: var(--lh-text); } html.dark .select2-container--bootstrap-5 .select2-dropdown, html.dark .select2-dropdown { background-color: var(--lh-surface); border-color: var(--lh-border); color: var(--lh-text); } html.dark .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted, html.dark .select2-results__option--highlighted { background-color: var(--lh-primary) !important; color: #fff !important; } html.dark .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field, html.dark .select2-search__field { background-color: var(--lh-surface-2) !important; border-color: var(--lh-border-strong) !important; color: var(--lh-text) !important; } html.dark .swal2-popup { background: var(--lh-surface); color: var(--lh-text); border: 1px solid var(--lh-border); } html.dark .swal2-popup.bg-info { background: var(--lh-primary) !important; } html.dark .swal2-title, html.dark .swal2-html-container { color: var(--lh-text) !important; } html.dark .swal2-input, html.dark .swal2-textarea, html.dark .swal2-select { background: var(--lh-surface-2); border-color: var(--lh-border-strong); color: var(--lh-text); } html.dark .swal2-timer-progress-bar { background: rgba(255, 255, 255, 0.35); } /* Login-Karte: leicht abgesetzter Rahmen auf dem Verlauf */ html.dark .form-signin { border: 1px solid rgba(255, 255, 255, 0.08); } /* Bilder mit weißem Hintergrund (z. B. Captcha) sanft einrahmen */ html.dark img[src^="data:image/png"] { border-radius: 8px; border: 1px solid var(--lh-border); } /* Logo: Falls kein helles Logo vorhanden ist, diese Zeile einkommentieren html.dark img[src*="logo.lunohost.eu"] { filter: brightness(0) invert(1); } */ /* Team-/Rechtsseiten: Rahmenkarten flach */ html.dark .team-card, html.dark .legal-card, html.dark .price-card { border: 0 !important; } /* -------------------------------------------------------------------------- Nachträge: Theme-Stellen mit hart weißem Hintergrund -------------------------------------------------------------------------- */ html.dark .table-responsive { background-color: transparent; } html.dark .pagination .page-item .page-link { background-color: var(--lh-surface); border-color: var(--lh-border); color: var(--lh-text-2); } html.dark .pagination .page-item .page-link:hover { background-color: var(--lh-surface-2); color: var(--lh-text); } html.dark .pagination .page-item.active .page-link { background-color: var(--lh-primary); border-color: var(--lh-primary); color: #fff; } html.dark .img-thumbnail { background-color: var(--lh-surface); border-color: var(--lh-border); } html.dark .features { background-color: transparent; } html.dark .features.bg-white, html.dark .features.feature-clean { background-color: var(--lh-surface) !important; } html.dark footer { background-color: transparent; } html.dark .apexcharts-tooltip, html.dark .apexcharts-tooltip-title { background: var(--lh-surface) !important; border-color: var(--lh-border) !important; color: var(--lh-text) !important; } html.dark .apexcharts-gridline { stroke: var(--lh-border); } html.dark .apexcharts-text { fill: var(--lh-text-2); } html.dark .chat.chat-person .chat-msg .msg { background-color: var(--lh-surface-2); } html.dark .bg-white-color { background-color: var(--lh-surface) !important; } html.dark .cpu-badge { color: var(--lh-primary); background: var(--lh-primary-soft); } html.dark .pricing { border-bottom: 0 !important; } html.dark .pricing.pricing-primary.business-rate:hover, html.dark .pricing.pricing-primary.starter-plan { border-color: var(--lh-primary-hover) !important; } html.dark .accordion .accordion-item .accordion-button:before, html.dark .accordion .accordion-item .accordion-button.collapsed:before { color: var(--lh-text-2) !important; } html.dark .accordion .accordion-item .accordion-button:not(.collapsed):before { color: var(--lh-primary) !important; } /* -------------------------------------------------------------------------- Rechtliches: Impressum, Datenschutz, AGB, Widerruf -------------------------------------------------------------------------- */ html.dark .legal-hero { padding: 140px 0 70px !important; } html.dark .legal-hero .heading { font-size: 2.6rem; letter-spacing: -0.01em; } html.dark .legal-hero .para-desc { max-width: 620px; } html.dark .legal-switch { display: flex; flex-wrap: wrap; gap: 6px; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 12px; padding: 6px; margin-top: -28px; /* schwebt leicht in den Hero hinein */ position: relative; z-index: 2; } html.dark .legal-switch a { flex: 1 1 auto; text-align: center; padding: 10px 16px; border-radius: 8px; color: var(--lh-text-2); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background-color .15s, color .15s; } html.dark .legal-switch a:hover { color: #fff; background: var(--lh-surface-2); } html.dark .legal-switch a.active { color: #fff; background: var(--lh-primary); } html.dark .legal-toc { position: sticky; top: 100px; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 12px; padding: 18px 8px 18px 18px; max-height: calc(100vh - 130px); overflow-y: auto; } html.dark .legal-toc h6 { color: var(--lh-text-3); font-size: .72rem; letter-spacing: .1em; margin: 0 0 10px; } html.dark .legal-toc ul { list-style: none; margin: 0; padding: 0; } html.dark .legal-toc li + li { margin-top: 2px; } html.dark .legal-toc a { display: block; padding: 7px 12px 7px 12px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; color: var(--lh-text-2); font-size: .86rem; line-height: 1.35; text-decoration: none; } html.dark .legal-toc a:hover { color: #fff; background: var(--lh-surface-2); } html.dark .legal-toc a.active { color: #fff; border-left-color: var(--lh-primary); background: var(--lh-primary-soft); } html.dark .legal-card { border: 1px solid var(--lh-border) !important; } html.dark .legal-content { max-width: 78ch; } html.dark .legal-content h5 { position: relative; padding-left: 16px; margin-top: 2.2rem !important; margin-bottom: .8rem !important; font-size: 1.15rem; color: #fff; scroll-margin-top: 110px; } html.dark .legal-content h5:first-child { margin-top: 0 !important; } html.dark .legal-content h5::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--lh-gradient); } html.dark .legal-content h6 { color: #fff; margin-top: 1.2rem; } html.dark .legal-content p, html.dark .legal-content li { color: var(--lh-text-2); line-height: 1.75; font-size: .97rem; } html.dark .legal-content strong { color: #fff; } html.dark .legal-content a { color: var(--lh-primary-hover); text-decoration: underline; text-underline-offset: 3px; } html.dark .legal-content ul, html.dark .legal-content ol { padding-left: 1.25rem; } html.dark .legal-content li { margin-bottom: .35rem; } html.dark .legal-content .highlight-box { background: rgba(255, 90, 106, 0.08) !important; border-left: 3px solid var(--lh-danger) !important; border-radius: 0 8px 8px 0 !important; } html.dark .legal-content .info-box { background: var(--lh-primary-soft); border-left: 3px solid var(--lh-primary); border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin-bottom: 1rem; } html.dark .legal-content .info-box p:last-child { margin-bottom: 0; } html.dark .legal-address { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; background: var(--lh-bg-alt); border: 1px solid var(--lh-border); border-radius: 10px; padding: 18px 22px; margin-bottom: 1.5rem; } html.dark .legal-address span:nth-child(odd) { color: var(--lh-text-3); font-size: .85rem; } html.dark .legal-address span:nth-child(even) { color: #fff; } html.dark .legal-form { background: var(--lh-bg-alt); border: 1px dashed var(--lh-border-strong); border-radius: 10px; padding: 22px 26px; font-family: inherit; } html.dark .legal-form p { margin-bottom: .6rem; } html.dark .legal-form .line { border-bottom: 1px solid var(--lh-border-strong); display: inline-block; min-width: 260px; } @media (max-width: 991px) { html.dark .legal-toc { position: static; max-height: none; margin-bottom: 1.25rem; } html.dark .legal-switch { margin-top: 0; } } html.dark .legal-hero, html.dark .bg-home.legal-hero { height: auto !important; min-height: 0 !important; } html.dark .legal-content .highlight-box { padding: 1rem 1.25rem; margin-bottom: 1rem; } html.dark .legal-content .highlight-box p:last-child { margin-bottom: 0; } /* Icons vor den Menüpunkten (Header + Dropdown-Kategorien) */ html.dark #topnav .nav-ico { display: inline-block; width: 1.15em; margin-right: .45em; text-align: center; font-size: .95em; color: var(--lh-primary); transition: color .15s ease; } html.dark #topnav .navigation-menu > li > a .nav-ico { font-size: 1em; } html.dark #topnav .navigation-menu .submenu li a.sub-menu-item .nav-ico { color: var(--lh-text-2); } html.dark #topnav .navigation-menu .submenu li a.sub-menu-item:hover .nav-ico, html.dark #topnav .navigation-menu .submenu li.has-submenu:hover > a.sub-menu-item .nav-ico { color: #fff; } @media (max-width: 991px) { html.dark #topnav .navigation-menu > li > a .nav-ico { color: var(--lh-primary); } } /* -------------------------------------------------------------------------- FAQ / Accordion: ruhiger, mit weichen Übergängen -------------------------------------------------------------------------- */ html.dark .accordion .accordion-item { background: var(--lh-surface) !important; border: 1px solid var(--lh-border) !important; border-radius: 12px !important; margin-bottom: 10px; overflow: hidden; box-shadow: none !important; transition: border-color .25s ease, background-color .25s ease; } html.dark .accordion .accordion-item:hover { border-color: var(--lh-border-strong) !important; } html.dark .accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(61, 94, 255, 0.45) !important; } html.dark .accordion .accordion-item .accordion-button, html.dark .accordion .accordion-item .accordion-button.collapsed { background: transparent !important; color: #fff !important; font-weight: 600; font-size: 1rem; padding: 1.1rem 3.2rem 1.1rem 1.4rem; border-radius: 0 !important; box-shadow: none !important; transition: color .25s ease, background-color .25s ease; } html.dark .accordion .accordion-item .accordion-button:not(.collapsed) { color: var(--lh-primary-hover) !important; background: var(--lh-primary-soft) !important; } html.dark .accordion .accordion-item .accordion-button::before { content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 12px; color: var(--lh-text-2) !important; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lh-surface-2); transform: translateY(-50%) rotate(0deg); transition: transform .35s cubic-bezier(.4, 0, .2, 1), background-color .25s ease, color .25s ease; } html.dark .accordion .accordion-item .accordion-button.collapsed::before { transform: translateY(-50%) rotate(0deg); top: 50%; color: var(--lh-text-2) !important; } html.dark .accordion .accordion-item .accordion-button:not(.collapsed)::before { transform: translateY(-50%) rotate(180deg); background: var(--lh-primary); color: #fff !important; } html.dark .accordion .accordion-item .accordion-button::after { display: none; } html.dark .accordion .accordion-collapse { transition: height .35s cubic-bezier(.4, 0, .2, 1); } html.dark .accordion .accordion-body { color: var(--lh-text-2); padding: .25rem 1.4rem 1.3rem; line-height: 1.7; animation: lh-fade-in .35s ease both; } @keyframes lh-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html.dark .accordion *, html.dark .accordion *::before { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- Produkt-/Bestellseiten: Paketkarten und Konfigurator -------------------------------------------------------------------------- */ html.dark .card.pricing { border: 1px solid var(--lh-border) !important; border-radius: 14px !important; overflow: hidden; background: #121215; transition: transform .3s ease, border-color .3s ease; } html.dark .card.pricing:hover { transform: translateY(-4px); border-color: var(--lh-border-strong) !important; } html.dark .card.pricing .card-body > .border-bottom { border-color: var(--lh-border) !important; } /* Kopf: Name + Preis + Button auf hellerem Grund */ html.dark .card.pricing .card-body > .border-bottom:first-child, html.dark .card.pricing .card-body > .border-bottom:nth-child(2) { background: #1b1b20; } html.dark .card.pricing .card-body > .border-bottom:first-child { border-bottom: 0 !important; padding: 1.8rem 1.5rem .4rem !important; } html.dark .card.pricing .card-body > .border-bottom:first-child h5 { color: #fff; font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; } html.dark .card.pricing .card-body > .border-bottom:nth-child(2) { padding: .6rem 1.5rem 1.8rem !important; } html.dark .card.pricing h2.text-primary { color: #fff !important; font-size: 1.9rem; letter-spacing: -0.02em; } html.dark .card.pricing h2.text-primary + span { color: #fff !important; font-weight: 600; font-size: .9rem; } html.dark .card.pricing .card-body > div:nth-child(2) .btn-primary { padding: .7rem 1.6rem; font-weight: 700; font-size: 1rem; border-radius: 8px; } html.dark .card.pricing h6.text-uppercase, html.dark .card.pricing h6.text-muted { color: #fff !important; font-size: .74rem !important; letter-spacing: .06em !important; font-weight: 600; margin-bottom: .9rem !important; } html.dark .card.pricing ul.list-unstyled li { display: flex; align-items: center; gap: .7rem; padding-left: 0; color: var(--lh-text); font-size: .95rem; margin-bottom: .55rem !important; } html.dark .card.pricing ul.list-unstyled li::before { content: none; } html.dark .card.pricing ul.list-unstyled li .pkg-ico { flex-shrink: 0; width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--lh-primary-soft); color: var(--lh-primary-hover); font-size: .68rem; } /* Konfigurator + Zusammenfassung */ html.dark .card.pricing .title.name { color: #fff !important; font-size: .8rem; letter-spacing: .12em; } html.dark .qty-group { border-radius: 10px; overflow: hidden; border: 1px solid var(--lh-border-strong); } html.dark .qty-group .qty-btn { border: 0; background: var(--lh-surface-2); color: #fff; width: 46px; font-size: 1.1rem; } html.dark .qty-group .qty-btn:hover { background: var(--lh-surface-3); } html.dark .qty-group .qty-input { border: 0; border-left: 1px solid var(--lh-border); border-right: 1px solid var(--lh-border); font-weight: 600; } html.dark .card.pricing .form-label { color: var(--lh-text-2); font-size: .82rem; font-weight: 600; } html.dark .card.pricing .price-info h2, html.dark .card.pricing .price-info .h2, html.dark #summaryPrice, html.dark #totalPrice, html.dark .summary-price { color: #fff; } html.dark .card.pricing hr { border-color: var(--lh-border) !important; } /* Checkout (Bestellung abschliessen) */ html.dark .included-features .bg-light { background: var(--lh-bg-alt) !important; border: 1px solid var(--lh-border); } html.dark .included-features h6 { color: var(--lh-text-3); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } html.dark .included-features .h5 { color: #fff !important; } html.dark .price-info .h5, html.dark .price-info .h4 { color: #fff; } html.dark .price-info { background: var(--lh-bg-alt); border: 1px solid var(--lh-border); border-radius: 10px; padding: 1rem 1.2rem; } html.dark .legal-checkboxes .form-check-label { color: var(--lh-text-2); line-height: 1.5; } html.dark .legal-checkboxes a { color: var(--lh-primary-hover); } html.dark form .btn-info.w-100, html.dark .btn-primary.w-100 { padding: .8rem 1rem; font-weight: 700; font-size: 1rem; border-radius: 10px !important; } /* Dashboard-Produktliste: Icons als dunkelblaue Plakette */ html.dark .product-container .bg-light > i.fa-solid, html.dark .product-container .bg-light > i.fa-brands { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--lh-primary-soft); color: var(--lh-primary-hover) !important; font-size: 1.05rem; margin-right: 1rem !important; flex-shrink: 0; } html.dark .product-container .bg-light { transition: border-color .2s ease, background-color .2s ease; } html.dark .product-container .bg-light:hover { border-color: rgba(61, 94, 255, 0.45) !important; background-color: var(--lh-surface-2) !important; } /* Buttons: nirgends Glow oder Schatten */ html.dark .btn, html.dark .btn:hover, html.dark .btn:focus, html.dark .btn:active, html.dark .btn-primary, html.dark .btn-primary:hover { box-shadow: none !important; } /* Pagination / DataTables: aktive Seite in Markenblau, nie Cyan */ html.dark .page-item.active .page-link, html.dark .pagination .page-item.active .page-link, html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current, html.dark .dt-paging .dt-paging-button.current { background-color: var(--lh-primary) !important; border-color: var(--lh-primary) !important; color: #fff !important; } html.dark .page-link { background-color: var(--lh-surface); border-color: var(--lh-border); color: var(--lh-text-2); } html.dark .page-link:hover { background-color: var(--lh-surface-2); color: #fff; border-color: var(--lh-border); } html.dark .page-link:focus { box-shadow: none; } html.dark table.dataTable tbody td { padding: .8rem .75rem; } html.dark .dataTables_wrapper .dataTables_filter label, html.dark .dt-search label { color: var(--lh-text-2); } html.dark .dataTables_wrapper .dataTables_filter input, html.dark .dt-search input { padding: .45rem .75rem; min-width: 240px; } /* -------------------------------------------------------------------------- Domain-Seite -------------------------------------------------------------------------- */ html.dark .domain-hero { background: var(--lh-gradient) !important; padding-bottom: 90px; } html.dark .domain-hero .pages-heading .display-6 { font-weight: 700; } html.dark .domain-search { position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto; background: rgba(9, 9, 11, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 6px 6px 6px 18px; backdrop-filter: blur(6px); } html.dark .domain-search:focus-within { border-color: rgba(255, 255, 255, 0.45); } html.dark .domain-search-ico { color: rgba(255, 255, 255, 0.6); margin-right: 10px; } html.dark .domain-search .form-control { flex: 1 1 auto; min-width: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font-size: 1.05rem; padding: .7rem .5rem; } html.dark .domain-search .form-control::placeholder { color: rgba(255, 255, 255, 0.5); } html.dark .subcribe-form .domain-search button, html.dark .domain-search .btn { position: static !important; top: auto !important; right: auto !important; margin: 0; flex-shrink: 0; border-radius: 999px; padding: .65rem 1.6rem; font-weight: 700; line-height: 1.4; } html.dark .subcribe-form .domain-search input { height: auto; padding-right: .5rem !important; } html.dark .domain-hero .container + .container { margin-top: 2.5rem; } html.dark .domain-top-card { border-radius: 14px !important; } html.dark .domain-top-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--lh-border); } html.dark .domain-top-head h6 { color: #fff; font-size: 1rem; font-weight: 700; } html.dark .domain-top-head small { color: var(--lh-text-3); } html.dark .domain-hint { color: var(--lh-text-2); font-size: .82rem; } html.dark .domain-hint i { color: var(--lh-primary-hover); margin-right: .3rem; } html.dark .domain-top-table thead th { color: var(--lh-text-3) !important; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1.5rem; border-bottom: 1px solid var(--lh-border) !important; } html.dark .domain-top-table tbody td { padding: .95rem 1.5rem; border-top: 1px solid var(--lh-border) !important; vertical-align: middle; font-size: 1rem; } html.dark .domain-top-table tbody tr:first-child td { border-top: 0 !important; } html.dark .domain-top-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); } html.dark .domain-top-table td strong { color: #fff; font-size: 1.05rem; } html.dark .domain-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; } html.dark .domain-status.is-idle { background: var(--lh-surface-2); color: var(--lh-text-2); } html.dark .domain-status.is-free { background: rgba(46, 230, 160, 0.14); color: var(--lh-success); } html.dark .domain-status.is-taken { background: rgba(255, 90, 106, 0.14); color: var(--lh-danger); } html.dark #domain_card { max-width: 720px; margin: 1.5rem auto 0; } html.dark .domain-result { display: flex; align-items: center; gap: 1rem; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 14px; padding: 1rem 1.25rem; text-align: left; } html.dark .domain-result-icon { font-size: 1.6rem; } html.dark .domain-result.is-free .domain-result-icon { color: var(--lh-success); } html.dark .domain-result.is-taken .domain-result-icon { color: var(--lh-danger); } html.dark .domain-result-text { flex: 1 1 auto; display: flex; flex-direction: column; } html.dark .domain-result-text strong { color: #fff; font-size: 1.05rem; } html.dark .domain-result-text span { color: var(--lh-text-2); font-size: .9rem; } @media (max-width: 767px) { html.dark .domain-result { flex-wrap: wrap; } html.dark .domain-result .btn { width: 100%; } html.dark .domain-top-head { padding: 1rem; } } html.dark div.dataTables_wrapper .pagination .page-item.active .page-link, html.dark div.dataTables_wrapper .pagination .page-item.active .page-link:hover { background-color: var(--lh-primary) !important; border-color: var(--lh-primary) !important; color: #fff !important; } html.dark div.dataTables_wrapper .pagination .page-item .page-link { background-color: var(--lh-surface); border-color: var(--lh-border); color: var(--lh-text-2); } html.dark div.dataTables_wrapper .pagination .page-item .page-link:hover { background-color: var(--lh-surface-2); color: #fff; }