/* ============================================================ style.css – Versicherungsagentur Tom-Kevin Kempe tomkevinkempe.de STRUKTUR: 1. CSS Custom Properties (Design-Tokens) ← ERWEITERT: Dark Mode 2. @font-face (lokale Inter-Schriften) 3. Reset & Basis-Elemente 4. Header & Navigation 5. Dropdown-Menü 6. Buttons 7. Hero-Section 8. Content-Box & Layout-Container 9. Feature-Grid 10. Produkt-Grid (Hauptseite) 11. Kontaktbereich & Formular 12. Footer 13. Floating Window / Modal 14. Popup-Layout (Produktdetail-Seiten) 15. FAQ-Akkordeon 16. Social-Media-Icons (Header) 17. News-Feed (Swiper-Karussell) 18. Blog-Karussell & Artikel-Ansicht 19. Team-Foto & Bildungsbereich 20. Hilfsklassen 21. Media Queries (Mobile-First ↑ 768px, 1024px) 22. Dark-Mode-Toggle-Button DARK MODE ÄNDERUNGEN vs. Vorversion: – Alle hardcodierten Farbwerte (#fff, #333 etc.) durch CSS Custom Properties ersetzt – Dark-Mode-Variablen via [data-theme="dark"] auf – ARAG-Gelb (#fff100) bleibt in BEIDEN Modi unverändert – body erhält transition für sanftes Umschalten – Flash-of-wrong-theme wird durch JS (inline im HTML) verhindert ============================================================ */ /* ============================================================ 1. CSS CUSTOM PROPERTIES ============================================================ */ /* --- Light Mode (Standard) -------------------------------- */ :root { /* Markenfarben */ --clr-accent: #fff100; /* ARAG-Gelb – unveränderlich */ --clr-accent-dark: #e0d400; /* ARAG-Gelb dunkler (Hover/Border) */ --clr-black: #000000; --clr-text: #333333; --clr-text-mid: #555555; --clr-text-light: #6c757d; --clr-white: #ffffff; --clr-bg: #f8f9fa; --clr-border: #e9ecef; --clr-border-mid: #dee2e6; /* Dimensionen */ --header-height: 80px; /* Border-Radius */ --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; /* Schatten – Light Mode */ --shadow-xs: 0 2px 5px rgba(0,0,0,.10); --shadow-sm: 0 4px 12px rgba(0,0,0,.10); --shadow-md: 0 8px 20px rgba(0,0,0,.15); --shadow-lg: 0 10px 30px rgba(0,0,0,.05); /* Transitions */ --tr-fast: .2s ease; --tr-std: .3s ease; /* Dark-Mode-Toggle – Farben des Buttons selbst */ --clr-toggle-bg: #eeeeee; --clr-toggle-icon: #333333; --clr-toggle-border: #cccccc; } /* --- Dark Mode -------------------------------------------- */ /* Aktivierung: Alle :root-Variablen werden hier überschrieben. Was NICHT überschrieben wird (z.B. --radius-sm) bleibt gleich. */ [data-theme="dark"] { /* Hintergründe */ --clr-bg: #121212; /* Seitenhintergrund */ --clr-white: #1e1e1e; /* "Weiße" Flächen → dunkelgrau */ /* Texte */ --clr-black: #f0f0f0; /* Überschriften (waren schwarz) */ --clr-text: #e0e0e0; /* Fließtext */ --clr-text-mid: #aaaaaa; /* Sekundärtext */ --clr-text-light: #888888; /* Tertiärtext, Footer */ /* Rahmen */ --clr-border: #2a2a2a; --clr-border-mid: #333333; /* Schatten – im Dark Mode stärker damit Tiefe erhalten bleibt */ --shadow-xs: 0 2px 5px rgba(0,0,0,.40); --shadow-sm: 0 4px 12px rgba(0,0,0,.40); --shadow-md: 0 8px 20px rgba(0,0,0,.55); --shadow-lg: 0 10px 30px rgba(0,0,0,.35); /* ARAG-Gelb bleibt identisch – Compliance */ /* --clr-accent und --clr-accent-dark werden NICHT überschrieben */ /* Toggle-Button im Dark Mode */ --clr-toggle-bg: #2a2a2a; --clr-toggle-icon: #fff100; /* Gelb im Dark Mode – passt zum Branding */ --clr-toggle-border: #444444; } /* ============================================================ 2. @FONT-FACE – Lokale Inter-Schrift ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-v13-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-v13-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-v13-latin-700.woff2') format('woff2'); } /* ============================================================ 3. RESET & BASIS-ELEMENTE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; padding-top: var(--header-height); color: var(--clr-text); line-height: 1.6; overflow-x: hidden; background-color: var(--clr-bg); background-image: none !important; /* Sanfter Übergang beim Themenwechsel */ transition: background-color var(--tr-std), color var(--tr-std); } main { overflow-y: auto; } section { padding: 60px 20px; border-top: 1px solid var(--clr-white); min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; justify-content: center; text-align: center; background: transparent; } section:first-of-type { border-top: none; padding-top: 20px; } /* Überschriften */ h1, h2, h3 { margin-bottom: 1.5rem; color: var(--clr-black); /* War: #000000 hardcodiert */ } h1 { font-size: 2.8em; line-height: 1.2; text-align: center; } h2 { font-size: 2.2em; } h3 { font-size: 1.8em; } /* Absätze */ p { margin-bottom: 1rem; text-align: center; } /* Links */ a { color: var(--clr-black); /* War: #000000 hardcodiert */ text-decoration: none; transition: color var(--tr-fast); } a:hover { color: var(--clr-text-mid); } /* War: #444 hardcodiert */ /* Bilder */ img { max-width: 100%; height: auto; display: block; } /* Listen */ ol, ul { padding-left: 20px; margin-bottom: 1rem; } #startseite-heading { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } /* ============================================================ 4. HEADER & NAVIGATION ============================================================ */ header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); z-index: 1000; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ box-shadow: var(--shadow-xs); transition: background-color var(--tr-std); } .header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; height: 100%; margin: 0 auto; padding: 0 20px; } .logo-action-wrapper { display: flex; align-items: center; gap: 15px; } .logo-img { max-height: 60px; width: auto; } /* Gelber CTA-Button im Header – bleibt in beiden Modi gelb */ .header-cta-button { background-color: var(--clr-accent) !important; color: var(--clr-text) !important; border: 1px solid var(--clr-accent-dark) !important; padding: 8px 15px !important; font-size: .85rem !important; font-weight: 700; border-radius: var(--radius-sm); white-space: nowrap; text-decoration: none; display: inline-block; transition: background-color var(--tr-fast), color var(--tr-fast); } .header-cta-button:hover { background-color: var(--clr-text) !important; color: var(--clr-accent) !important; } nav { display: flex; align-items: center; } .nav-links { list-style: none; display: flex; align-items: center; } .nav-links li { margin: 0 5px; position: relative; } .nav-links a { color: var(--clr-text); /* War: #333 hardcodiert */ font-weight: 600; padding: 10px 15px; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap; display: inline-block; transition: background-color var(--tr-std), color var(--tr-std), box-shadow var(--tr-std); } .nav-links a:hover, .nav-links a:focus { background-color: var(--clr-accent); color: var(--clr-text); border-color: var(--clr-accent-dark); box-shadow: 0 2px 4px rgba(0,0,0,.1); outline: 2px solid transparent; } .nav-links a:focus-visible { box-shadow: 0 0 0 3px rgba(255,241,0,.5); } .burger { display: none; cursor: pointer; background: none; border: none; padding: 10px; margin-left: 15px; } .burger i { font-size: 24px; color: var(--clr-black); } /* War: #000000 hardcodiert */ /* ============================================================ 5. DROPDOWN-MENÜ ============================================================ */ .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ border: 1px solid var(--clr-border); /* War: #eee hardcodiert */ box-shadow: 0 4px 10px rgba(0,0,0,.1); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 8px 0; list-style: none; z-index: 1010; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity var(--tr-fast), visibility var(--tr-fast), transform var(--tr-fast); } .dropdown-menu li { margin: 0; width: 100%; } .dropdown-menu li a { display: block; padding: 9px 20px; color: var(--clr-text); /* War: #333 hardcodiert */ font-size: .9em; font-weight: normal; white-space: nowrap; border: none; border-radius: 0; transition: background-color var(--tr-fast), color var(--tr-fast); } .dropdown-menu li a:hover, .dropdown-menu li a:focus { background-color: var(--clr-accent); color: var(--clr-text); outline: none; } .dropdown-menu li a:focus-visible { background-color: var(--clr-accent-dark); } .nav-links li.has-dropdown:hover > .dropdown-menu, .nav-links li.has-dropdown:focus-within > .dropdown-menu { display: block; opacity: 1; visibility: visible; transform: translateY(0); } .nav-links .has-dropdown > a .dropdown-icon { margin-left: 5px; font-size: .7em; display: inline-block; vertical-align: middle; transition: transform var(--tr-std); } .nav-links li.has-dropdown:hover > a .dropdown-icon, .nav-links li.has-dropdown:focus-within > a .dropdown-icon, .nav-links li.has-dropdown.dropdown-open > a .dropdown-icon { transform: rotate(180deg); } /* ============================================================ 6. BUTTONS ============================================================ */ .button-group { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 20px; } /* Primär-Button */ .button, button, input[type="submit"], a.button { display: inline-block; background-color: var(--clr-text); color: var(--clr-accent); border: 1px solid var(--clr-text); padding: 12px 25px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color var(--tr-std), color var(--tr-std), border-color var(--tr-std), transform .1s ease, box-shadow var(--tr-fast); } .button:hover, button:hover, input[type="submit"]:hover, a.button:hover { background-color: var(--clr-accent); color: var(--clr-text); border-color: var(--clr-accent-dark); transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,.15); } .button:focus, button:focus, input[type="submit"]:focus, a.button:focus { outline: 2px solid transparent; outline-offset: 2px; } .button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible, a.button:focus-visible { box-shadow: 0 0 0 3px rgba(51,51,51,.4); } /* Sekundär-Button */ .button-secondary, a.button-secondary { background-color: var(--clr-white); /* War: #ffffff hardcodiert */ color: var(--clr-text); border-color: var(--clr-border-mid); /* War: #ccc hardcodiert */ } .button-secondary:hover, a.button-secondary:hover { background-color: var(--clr-accent); color: var(--clr-text); border-color: var(--clr-border-mid); transform: translateY(-2px); box-shadow: 0 6px 10px rgba(0,0,0,.1); } .button-secondary:focus-visible, a.button-secondary:focus-visible { box-shadow: 0 0 0 3px rgba(204,204,204,.6); } /* ============================================================ 7. HERO-SECTION ============================================================ */ .hero { color: var(--clr-black); text-align: center; padding: 40px 15px; background: none; min-height: auto; border: none; border-radius: 0; } .hero h1 { font-size: 3em; margin-bottom: 20px; } .hero p { font-size: 1.3em; margin-bottom: 30px; max-width: 800px; margin-left: auto; margin-right: auto; } /* ============================================================ 8. CONTENT-BOX & LAYOUT-CONTAINER ============================================================ */ .content-background-box { background-color: var(--clr-white); /* War: #ffffff hardcodiert */ padding: 60px 50px; border-radius: var(--radius-lg); max-width: 1100px; margin: 40px auto; box-shadow: var(--shadow-lg); border: 1px solid var(--clr-border); /* War: rgba(0,0,0,.03) */ text-align: left; overflow-wrap: break-word; transition: background-color var(--tr-std), border-color var(--tr-std); } .content-background-box h2, .content-background-box h3 { text-align: center; } .content-background-box ol.process-list { max-width: 800px; margin-left: auto; margin-right: auto; } /* Beratungs-Schritte */ #beratung ol.process-list { list-style: none; padding: 0; margin: 30px auto; max-width: 800px; } #beratung ol.process-list li { background-color: var(--clr-white); /* War: #ffffff hardcodiert */ border: 1px solid var(--clr-border-mid); /* War: #ccc hardcodiert */ color: var(--clr-text); padding: 20px 25px; margin-bottom: 15px; border-radius: var(--radius-md); text-align: left; position: relative; font-size: 1.05em; line-height: 1.6; box-shadow: var(--shadow-xs); } #beratung ol.process-list li strong { font-weight: 700; } /* ============================================================ 9. FEATURE-GRID ============================================================ */ .feature-item { text-align: center; background-color: var(--clr-white); /* War: rgba(255,255,255,.9) hardcodiert */ padding: 40px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15); border: 1px solid var(--clr-border); /* War: rgba(0,0,0,.05) hardcodiert */ transition: transform var(--tr-std), box-shadow var(--tr-std), background-color var(--tr-std); } .feature-item:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,.2); background-color: var(--clr-accent); } .feature-item i { font-size: 3.5em; color: var(--clr-text); margin-bottom: 20px; } .feature-item h3 { font-size: 1.4em; margin-bottom: 10px; color: var(--clr-black); } /* War: #212529 */ .feature-item p { font-size: 1em; color: var(--clr-text-mid); } /* ============================================================ 10. PRODUKT-GRID (Hauptseite) ============================================================ */ .product-grid-container { margin: 30px auto; max-width: 1200px; width: 95%; } /* Mobile: 1 Spalte */ .product-grid-boxed { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; padding: 20px; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ border-radius: 10px; box-shadow: var(--shadow-sm); transition: background-color var(--tr-std); } /* Kachel */ .product-item { background-color: var(--clr-white); /* War: #ffffff hardcodiert */ border: 1px solid var(--clr-border-mid); /* War: #ddd hardcodiert */ color: var(--clr-text); border-radius: var(--radius-md); padding: 25px 15px; text-align: center; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 180px; box-shadow: 0 4px 8px rgba(0,0,0,.05); transition: background-color var(--tr-std), box-shadow var(--tr-std), transform var(--tr-std); } .product-item:hover, .product-item:focus { background-color: var(--clr-accent); color: var(--clr-text); box-shadow: var(--shadow-md); transform: translateY(-5px); outline: none; } .product-item:focus-visible { box-shadow: 0 0 0 3px rgba(255,241,0,.6); } .product-item i { font-size: 3.5em; margin-bottom: 15px; color: var(--clr-text-mid); transition: color var(--tr-std); } /* War: #444 */ .product-item:hover i, .product-item:focus i { color: var(--clr-black); } .product-item p { font-size: 1.1em; font-weight: 600; color: inherit; margin-bottom: 0; } .grid-info { text-align: center; margin-top: 20px; font-size: .95em; color: var(--clr-text-mid); } /* War: #444 */ /* ============================================================ 11. KONTAKTBEREICH & FORMULAR ============================================================ */ .kontakt-container { display: grid; gap: 40px; max-width: 1100px; margin: 0 auto; width: 100%; } .kontakt-formular, .kontaktdaten { text-align: left; } .kontakt-formular h3, .kontaktdaten h3 { font-size: 1.4em; margin-bottom: 20px; } #kontakt label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95em; } #kontakt input[type="text"], #kontakt input[type="email"], #kontakt input[type="tel"], #kontakt textarea { width: 100%; padding: 10px 14px; margin-bottom: 18px; border: 1px solid var(--clr-border-mid); /* War: #ced4da hardcodiert */ border-radius: var(--radius-sm); font-size: 1rem; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ color: var(--clr-text); /* NEU: wichtig für Dark Mode */ line-height: 1.5; transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-std); } #kontakt input::placeholder, #kontakt textarea::placeholder { color: var(--clr-text-light); /* NEU: Placeholder im Dark Mode sichtbar */ } #kontakt input:focus, #kontakt textarea:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); outline: none; } #kontakt textarea { resize: vertical; min-height: 130px; } #kontakt .form-actions { text-align: center; } #kontakt button[type="submit"] { margin-top: 10px; } #form-status { margin-top: 15px; font-weight: bold; min-height: 1.5em; padding: 10px; border-radius: var(--radius-sm); display: inline-block; } /* Erfolgs-/Fehlerfarben bleiben semantisch und brauchen kein Dark-Mode-Override */ #form-status.success { color: #0f5132; background-color: #d1e7dd; border: 1px solid #badbcc; } #form-status.error { color: #842029; background-color: #f8d7da; border: 1px solid #f5c2c7; } .kontaktdaten p { margin-bottom: 1.5rem; line-height: 1.8; } .kontaktdaten strong { color: var(--clr-text); } .kontaktdaten iframe { max-width: 100%; border-radius: var(--radius-md); } /* ============================================================ 12. FOOTER ============================================================ */ footer { background-color: var(--clr-border); /* War: #e9ecef hardcodiert */ padding: 30px 20px; text-align: center; font-size: .9em; color: var(--clr-text-light); border-top: 1px solid var(--clr-border-mid); transition: background-color var(--tr-std); } footer a { color: var(--clr-black); font-weight: 500; } footer a:hover { color: var(--clr-black); } /* ============================================================ 13. FLOATING WINDOW / MODAL ============================================================ */ .floating-window-backdrop { display: none; position: fixed; inset: 0; background-color: rgba(0,0,0,.7); z-index: 1040; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Modal: Mobile = Vollbild */ .floating-window { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1050; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ transition: background-color var(--tr-std); } .floating-window-inner { display: flex; flex-direction: column; width: 100%; height: 100%; position: relative; } .floating-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Section-Styles im Modal deaktivieren */ .floating-content section, .floating-content .blog-full-article { width: 100% !important; max-width: 100% !important; min-height: auto !important; padding: 20px !important; display: block !important; text-align: left !important; margin: 0 !important; box-sizing: border-box !important; } .floating-content .blog-cta-flex { display: flex !important; flex-wrap: wrap; gap: 20px; justify-content: center; } .floating-content img { width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 20px 0 !important; display: block !important; } /* Schließen-Button */ .close-button { position: absolute; top: 10px; right: 12px; cursor: pointer; font-size: 1.6rem; font-weight: 400; background-color: var(--clr-bg); /* War: #f1f3f5 hardcodiert */ color: var(--clr-text-light); border: none; padding: 2px 8px; line-height: 1.2; border-radius: 4px; z-index: 10; transition: background-color var(--tr-fast), color var(--tr-fast); } .close-button:hover, .close-button:focus { background-color: var(--clr-accent); color: var(--clr-text); outline: 2px solid transparent; } .close-button:focus-visible { box-shadow: 0 0 0 2px rgba(51,51,51,.4); } /* Bild-Modal */ .floating-window.image-modal .floating-content { background-color: rgba(0,0,0,.8); display: flex; justify-content: center; align-items: center; padding: 10px; } .floating-window.image-modal .close-button { background-color: rgba(255,255,255,.7); color: var(--clr-black); } .floating-window.image-modal .close-button:hover { background-color: var(--clr-white); } /* ============================================================ 14. POPUP-LAYOUT (Produktdetail-Seiten) ============================================================ */ .popup-layout { font-family: 'Inter', sans-serif; line-height: 1.6; } /* Gelber Header-Block – bleibt in beiden Modi identisch */ .popup-layout .popup-header { text-align: center; padding: 15px 20px; margin-bottom: 15px; border: 2px solid var(--clr-text); background-color: var(--clr-accent); border-radius: var(--radius-md); } .popup-layout .popup-header h1 { font-size: 1.5em; color: var(--clr-text); /* Auf Gelb immer dunkler Text */ margin: 0; line-height: 1.3; } .popup-layout .popup-header .popup-header-icon { margin-bottom: 8px; font-size: 2.3em; } .popup-layout .popup-header .popup-header-icon i { color: var(--clr-text); } .popup-layout .popup-subheader { text-align: center; margin-bottom: 20px; } .popup-layout .popup-subheader .popup-tagline { font-size: 1em; color: var(--clr-text-mid); margin-bottom: 8px; } .popup-layout .popup-subheader .popup-description-text { font-size: .9em; color: var(--clr-text-mid); /* War: #666 hardcodiert */ max-width: 600px; margin: 0 auto; line-height: 1.5; text-align: center; } /* Benefit-Boxen */ .popup-layout .popup-benefits { margin-bottom: 25px; } .popup-layout .benefits-box-grid-simple { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; } .popup-layout .benefit-box-simple { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--clr-border); background-color: var(--clr-bg); /* War: --clr-bg (bleibt) */ padding: 18px 10px; border-radius: var(--radius-sm); font-size: .9em; font-weight: 500; color: var(--clr-black); transition: color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-std); } .popup-layout .benefit-box-simple:hover { color: var(--clr-black); box-shadow: 0 4px 10px rgba(0,0,0,.1); } .popup-layout .benefit-box-icon { font-size: 1.8em; margin-bottom: 10px; color: var(--clr-text); transition: color var(--tr-fast); } .popup-layout .benefit-box-simple:hover .benefit-box-icon { color: var(--clr-black); } .popup-layout .benefit-box-text { font-size: .9em; } .popup-layout .popup-cta { margin-bottom: 30px; } .popup-layout .popup-cta .button-container { margin-top: 0; } .popup-layout .popup-leistungen-title { font-size: 1.4em; text-align: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--clr-border); /* War: #eee hardcodiert */ color: var(--clr-text); } .popup-layout .popup-leistungen-title::after { display: none; } /* Tab-Steuerung */ .popup-layout .popup-tab-controls { display: grid; gap: 10px; margin-bottom: 20px; border-bottom: none; } .popup-layout .popup-tab-controls.single-tab { grid-template-columns: 1fr; max-width: 300px; margin-left: auto; margin-right: auto; } .popup-layout .popup-tab-controls.two-tabs { grid-template-columns: repeat(2, 1fr); max-width: 500px; margin-left: auto; margin-right: auto; } .popup-layout .popup-tab-controls.five-tabs { grid-template-columns: repeat(5, 1fr); } .popup-layout .popup-tab-controls:not(.single-tab):not(.two-tabs):not(.five-tabs) { grid-template-columns: repeat(4, 1fr); } /* Tab-Button */ .popup-layout .popup-tab-button { padding: 12px 10px; font-size: .90em; font-weight: 600; color: var(--clr-text-mid); /* War: #495057 hardcodiert */ background-color: var(--clr-white); /* War: #ffffff hardcodiert */ border: 1px solid var(--clr-border-mid); /* War: #ccc hardcodiert */ border-radius: var(--radius-sm); cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--tr-fast), border-color var(--tr-fast), background-color var(--tr-fast), box-shadow var(--tr-fast); } .popup-layout .popup-tab-button small { font-size: .8em; display: block; line-height: 1; margin-top: 2px; opacity: .8; } .popup-layout .popup-tab-button:hover { color: var(--clr-black); background-color: var(--clr-bg); border-color: var(--clr-text-mid); /* War: #aaa hardcodiert */ } .popup-layout .popup-tab-button:focus { outline: none; } .popup-layout .popup-tab-button:focus-visible { box-shadow: 0 0 0 2px rgba(51,51,51,.4); } .popup-layout .popup-tab-button.active { color: var(--clr-text); background-color: var(--clr-accent); border-color: var(--clr-accent-dark); font-weight: 700; box-shadow: inset 0 -2px 0 rgba(0,0,0,.1); } /* Tab-Inhalt */ .popup-layout .popup-tab-content { border: 1px solid var(--clr-border-mid); border-radius: var(--radius-sm); min-height: 250px; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ margin-bottom: 15px; transition: background-color var(--tr-std); } .popup-layout .popup-tab-panel { padding: 20px; animation: fadeInTab .4s ease; } .popup-layout .popup-tab-panel:not(.active) { display: none; } .popup-layout .tab-panel-title { font-size: 1.1em; font-weight: 600; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px solid var(--clr-border); /* War: #eee hardcodiert */ } @keyframes fadeInTab { from { opacity: 0; } to { opacity: 1; } } /* Leistungs-Tabelle */ .popup-layout .leistungsarten-tabelle { width: 100%; font-size: .9em; border-collapse: collapse; border: none; overflow: hidden; } .popup-layout .leistungsarten-tabelle th, .popup-layout .leistungsarten-tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--clr-border-mid); text-align: left; vertical-align: top; line-height: 1.5; } .popup-layout .leistungsarten-tabelle tr:last-child td { border-bottom: none; } .popup-layout .leistungsarten-tabelle thead th { background-color: var(--clr-bg); font-weight: 600; color: var(--clr-text-mid); /* War: #495057 hardcodiert */ border-bottom: 2px solid var(--clr-border-mid); font-size: .95em; } .popup-layout .leistungsarten-tabelle tbody tr:nth-child(even) td { background-color: var(--clr-border); /* War: --clr-border (bleibt) */ } .popup-layout .leistungsarten-tabelle tbody tr:hover td { background-color: var(--clr-border-mid); /* War: #d4dadf hardcodiert */ } .popup-layout .leistungsarten-tabelle small { font-size: .85em; color: var(--clr-text-light); display: inline-block; } /* Vergleichstabelle */ .comparison-table { margin-top: 15px; border: 1px solid var(--clr-border-mid); border-collapse: collapse; width: 100%; } .comparison-table th, .comparison-table td { border: 1px solid var(--clr-border-mid); padding: 10px 12px; text-align: left; vertical-align: top; font-size: .88em; line-height: 1.5; } .comparison-table thead th { background-color: var(--clr-bg); font-weight: 600; color: var(--clr-text-mid); /* War: #495057 hardcodiert */ text-align: center; vertical-align: middle; } .comparison-table tbody th, .comparison-table tbody td:first-child { font-weight: 600; background-color: var(--clr-bg); } .comparison-table ul { margin: 0; padding-left: 18px; } .table-responsive-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } /* FAQ in Popups */ .popup-layout .faq-bullet-item { margin-bottom: .7em; line-height: 1.6; display: flex; align-items: flex-start; text-align: left; } .popup-layout .faq-bullet-item i { width: 20px; flex-shrink: 0; text-align: center; margin-right: 10px; margin-top: .1em; color: #007bff; } .popup-layout .faq-cta-buttons { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* ============================================================ 15. FAQ-AKKORDEON ============================================================ */ .faq-container { max-width: 850px; margin: 0 auto; padding: 0 15px; } .faq-container details { display: block; width: 100%; margin-bottom: 15px; border: 1px solid var(--clr-border); /* War: #e0e0e0 hardcodiert */ border-radius: var(--radius-sm); background-color: var(--clr-white); /* War: #ffffff hardcodiert */ overflow: hidden; transition: background-color var(--tr-std); } details[open] { background-color: var(--clr-bg); } details summary { padding: 15px 20px; font-weight: 600; color: var(--clr-text); cursor: pointer; outline: none; display: block; position: relative; } details summary::after { content: '\f078'; font-family: 'Font Awesome 7 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(0deg); transition: transform var(--tr-std); color: var(--clr-text-light); /* War: #888 hardcodiert */ } details[open] summary::after { transform: translateY(-50%) rotate(180deg); } summary:focus-visible { box-shadow: 0 0 0 2px rgba(51,51,51,.4); border-radius: 3px; } .faq-antwort { padding: 0 20px 15px; font-size: .95em; line-height: 1.6; color: var(--clr-text-mid); text-align: left; overflow-wrap: break-word; word-break: break-word; border-top: 1px solid var(--clr-border); /* War: #eee hardcodiert */ margin-top: 10px; } .faq-bullet-item { margin-bottom: .7em; display: flex; align-items: flex-start; text-align: left; } .faq-bullet-item i { width: 20px; flex-shrink: 0; text-align: center; margin-right: 10px; margin-top: .1em; color: #007bff; } .faq-bullet-item .fa-check { color: #28a745; } .faq-bullet-item .fa-car-crash { color: #dc3545; } .faq-bullet-item .fa-file-contract { color: #17a2b8; } /* ============================================================ 16. SOCIAL-MEDIA-ICONS (Header) ============================================================ */ .nav-links .social-nav-item a { padding: 10px 8px; font-size: 1.3em; line-height: 1; background-color: transparent; border-color: transparent; box-shadow: none; transition: background-color var(--tr-std), color var(--tr-std); } .nav-links .social-nav-item a i { color: var(--clr-text); transition: color var(--tr-fast), transform var(--tr-fast); vertical-align: middle; display: inline-block; } .nav-links .social-nav-item a:hover, .nav-links .social-nav-item a:focus { background-color: var(--clr-accent); outline: none; } .nav-links .social-nav-item a:hover i, .nav-links .social-nav-item a:focus i { color: var(--clr-black); transform: scale(1.15); } .nav-links .social-nav-item a:focus-visible { box-shadow: 0 0 0 3px rgba(255,241,0,.5); outline: none; } .social-nav-item.whatsapp-icon a:hover { color: #25D366 !important; } .social-nav-item { margin-left: 10px; display: flex; align-items: center; } .whatsapp-cta a:hover { background-color: #128C7E !important; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37,211,102,.3); transition: all var(--tr-std); } /* ============================================================ 18. BLOG-KARUSSELL & ARTIKEL-ANSICHT ============================================================ */ #blog-news { width: 100vw !important; max-width: 100% !important; overflow-x: hidden !important; padding-left: 0 !important; padding-right: 0 !important; } #blog-news .content-background-box { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .blog-carousel-container { position: relative; width: 100%; } .blog-track { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 15px; padding: 10px 20px 30px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .blog-track::-webkit-scrollbar { display: none; } /* Blog-Karte */ .blog-card { flex: 0 0 80vw; scroll-snap-align: center; box-sizing: border-box; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,.05); display: flex; flex-direction: column; height: 100%; cursor: pointer; transition: transform var(--tr-std), box-shadow var(--tr-std), background-color var(--tr-std); } .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); background-color: var(--clr-accent); color: var(--clr-text); } .blog-card:hover h3, .blog-card:hover p, .blog-card:hover a { color: var(--clr-text); } .blog-card img { width: 100%; height: 200px; object-fit: cover; display: block; } .blog-content { padding: 15px; display: flex; flex-direction: column; flex: 1; } .blog-content h3 { font-size: 1.05em; margin-bottom: 8px; } .blog-content p { font-size: .9em; color: var(--clr-text-mid); flex: 1; text-align: left; } .blog-link { margin-top: 12px; font-weight: 600; font-size: .9em; color: var(--clr-text); display: flex; align-items: center; gap: 6px; } /* Karussell-Pfeile */ .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--clr-text); color: var(--clr-accent); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.2); transition: background var(--tr-std), color var(--tr-std), transform var(--tr-std); } .nav-btn:hover { background: var(--clr-accent); color: var(--clr-text); transform: translateY(-50%) scale(1.1); } .nav-btn.prev { left: 10px; } .nav-btn.next { right: 10px; } /* Blog-Artikel im Modal */ .blog-full-article { width: 100%; max-width: 100%; box-sizing: border-box; } .blog-full-article img { width: 100%; max-width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 20px; } .blog-full-article h1 { font-size: 1.6rem; text-align: left; margin-bottom: 20px; line-height: 1.3; } .article-content { font-size: 1rem; line-height: 1.6; text-align: left; } .article-content p { text-align: left; margin-bottom: 1.2rem; } /* Direktaufruf (Archiv) */ .single-article-page { background-color: var(--clr-bg); padding-top: 40px; } .single-article-page .blog-full-article { max-width: 800px; margin: 0 auto; background: var(--clr-white); padding: 30px; border-radius: var(--radius-lg); box-shadow: 0 4px 15px rgba(0,0,0,.05); } .blog-hero-img { width: 100%; max-height: 450px; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 25px; } /* ============================================================ 19. TEAM-FOTO & BILDUNGSBEREICH ============================================================ */ .team-photo-container { margin: 40px 0; padding: 0 20px; text-align: center; } .team-photo-thumbnail { max-width: 300px; height: auto; cursor: pointer; border: 3px solid var(--clr-white); box-shadow: 0 6px 18px rgba(0,0,0,.18); border-radius: var(--radius-md); display: inline-block; vertical-align: middle; transition: transform var(--tr-std), box-shadow var(--tr-std); } .team-photo-thumbnail:hover { transform: scale(1.04); box-shadow: 0 10px 25px rgba(0,0,0,.22); } .education-image-container { margin: 40px auto; max-width: 700px; text-align: center; } .education-image { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 4px 10px rgba(0,0,0,.1); cursor: pointer; transition: transform var(--tr-std), box-shadow var(--tr-std); } .education-image:hover { transform: scale(1.03); box-shadow: 0 6px 15px rgba(0,0,0,.15); } /* ============================================================ 20. HILFSKLASSEN ============================================================ */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: -999; background-color: var(--clr-accent); color: var(--clr-text); padding: 15px; font-weight: bold; border-radius: var(--radius-sm); } .skip-link:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; overflow: visible; z-index: 1100; border: 2px solid var(--clr-text); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* Back-to-Top */ #back-to-top { position: fixed; bottom: 25px; right: 25px; z-index: 999; border: none; outline: none; background-color: rgba(51,51,51,.8); color: var(--clr-accent); cursor: pointer; padding: 0; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5em; opacity: .8; display: none; justify-content: center; align-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.3); transition: opacity var(--tr-std), background-color var(--tr-std), transform var(--tr-fast); } #back-to-top:hover, #back-to-top:focus { opacity: 1; background-color: rgba(51,51,51,1); transform: scale(1.05); outline: none; } #back-to-top i { line-height: 1; } .mx-auto { margin-left: auto; margin-right: auto; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } /* ============================================================ 21. MEDIA QUERIES (Mobile-First) ============================================================ */ /* ── 768px und kleiner (Smartphone) ────────────────────── */ @media (max-width: 768px) { body { background-image: none !important; } section { padding-left: 0; padding-right: 0; } h2 { font-size: 1.7em; } h3 { font-size: 1.4em; } #startseite-heading { font-size: 2em; line-height: 1.3; } .hero h1 { font-size: 2.4em; line-height: 1.3; } .hero p { font-size: 1.15em; } .content-background-box, #kontakt .kontakt-container, .product-grid-boxed, .kontakt-formular, #blog-news .content-background-box { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 15px !important; padding-right: 15px !important; } /* Mobile Navigation */ .nav-links { display: none; position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: var(--clr-white); /* War: #ffffff hardcodiert */ flex-direction: column; align-items: center; padding: 15px 0; box-shadow: 0 5px 10px rgba(0,0,0,.1); border-top: 1px solid var(--clr-border); /* War: #eee hardcodiert */ z-index: 999; } .nav-links.active { display: flex; } .nav-links li { margin: 8px 0; width: 100%; text-align: center; } .nav-links a { padding: 12px 20px; display: block; width: 90%; margin: 0 auto; border: 1px solid transparent; } .nav-links a:hover, .nav-links a:focus { background-color: var(--clr-border); color: var(--clr-text); border-color: var(--clr-border-mid); } /* War: #f0f0f0/#ddd */ .burger { display: block; } /* Mobile Dropdown */ .nav-links.active li.has-dropdown > a { display: flex; justify-content: center; align-items: center; width: 90%; margin: 0 auto; } .nav-links.active li.has-dropdown > a .dropdown-icon { margin-left: 8px; } .nav-links.active .dropdown-menu { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background-color: var(--clr-bg); padding: 5px 0 10px; margin-top: 5px; border-top: 1px solid var(--clr-border); border-bottom: 1px solid var(--clr-border); border-radius: 0; } .nav-links.active li.has-dropdown.dropdown-open > .dropdown-menu { display: block; } .nav-links.active .dropdown-menu li a { padding: 10px 20px; text-align: center; font-weight: normal; color: var(--clr-text-mid); } .nav-links.active .dropdown-menu li a:hover, .nav-links.active .dropdown-menu li a:focus { background-color: var(--clr-border); color: var(--clr-black); } /* Social Icons Mobile */ .nav-links.active .social-nav-item { margin: 5px auto; width: 90%; } .nav-links.active .social-nav-item a { padding: 10px 20px; display: block; font-size: 1.4em; text-align: center; } .nav-links.active .social-nav-item a i { color: var(--clr-text); transform: none; } .nav-links.active .social-nav-item a:hover i, .nav-links.active .social-nav-item a:focus i { color: var(--clr-black); } /* Popup-Benefits: 2 Spalten auf Mobile */ .popup-layout .benefits-box-grid-simple { grid-template-columns: repeat(2, 1fr); } .popup-layout .popup-tab-controls { grid-template-columns: repeat(2, 1fr); } /* News Swiper Mobile */ #news h2 { font-size: 1.6em; padding: 0 5px; } #news .content-background-box { padding-left: 0; padding-right: 0; } #news-feed-container.swiper { padding-left: 0; padding-right: 0; } .news-slider .swiper-button-prev, .news-slider .swiper-button-next { width: 35px; height: 35px; background: rgba(0,0,0,.49); } .news-slider .swiper-button-prev { left: 2px; } .news-slider .swiper-button-next { right: 2px; } .news-slider .swiper-button-prev::after, .news-slider .swiper-button-next::after { font-size: .9em; } #news-feed-container.swiper .swiper-slide { width: 100% !important; box-sizing: border-box !important; flex-shrink: 0 !important; } .news-item { padding: 15px; min-height: 200px; } .news-item h3 { font-size: 1em; } .news-item .news-meta { font-size: .75em; } .news-item .news-excerpt { font-size: .85em; line-height: 1.45; } .news-item .news-source { font-size: .7em; } /* Blog Mobile */ .blog-card { flex: 0 0 260px; } .blog-carousel-container { padding: 0 10px; } .nav-btn { display: none; } .blog-track { padding-left: 10px; } .single-article-page .blog-full-article { width: 95%; padding: 20px; } .blog-hero-img { max-height: 250px; } /* Show-Team-Photo Link */ .show-team-photo-link { display: inline-block; margin-top: 15px; padding: 8px 15px; border: 1px solid var(--clr-border-mid); background-color: var(--clr-bg); color: var(--clr-text); border-radius: var(--radius-sm); text-decoration: none; font-size: .9em; font-weight: 600; cursor: pointer; transition: background-color var(--tr-fast), border-color var(--tr-fast); } .show-team-photo-link:hover, .show-team-photo-link:focus { background-color: var(--clr-border); border-color: var(--clr-text-light); outline: none; } .show-team-photo-link:focus-visible { box-shadow: 0 0 0 2px rgba(51,51,51,.4); } .show-team-photo-link i { margin-right: 5px; } } /* ── 480px und kleiner (kleines Smartphone) ─────────────── */ @media (max-width: 480px) { #startseite-heading { font-size: 1.8em; line-height: 1.35; } h2 { font-size: 1.5em; } h3 { font-size: 1.3em; } .hero h1 { font-size: 1.9em; line-height: 1.35; } .hero p { font-size: 1.05em; } .popup-layout .popup-tab-button { font-size: .85em; padding: 8px 5px; } .popup-layout .leistungsarten-tabelle { font-size: .8em; } .popup-layout .leistungsarten-tabelle th, .popup-layout .leistungsarten-tabelle td { padding: 8px 10px; } } /* ── 768px und größer (Tablet aufwärts) ─────────────────── */ @media (min-width: 768px) { .product-grid-boxed { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 25px; } .content-background-box { padding: 40px 20px; margin: 20px auto; } .floating-content { padding: 40px 50px; } .blog-full-article h1 { font-size: 2.2rem; } .article-content { font-size: 1.1rem; } } /* ── 1024px und größer (Desktop) ────────────────────────── */ @media (min-width: 1024px) { .content-background-box, .product-grid-container, .kontakt-container, .kontakt-formular, #blog-news .content-background-box { max-width: 1100px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } .product-grid-boxed { max-width: 100%; margin: 0 auto; grid-template-columns: repeat(4, 1fr); gap: 25px; } #blog-news { width: 100% !important; overflow: visible !important; } #blog-news .content-background-box { max-width: 1100px !important; margin: 40px auto !important; border-radius: var(--radius-lg) !important; padding: 40px !important; box-shadow: var(--shadow-lg) !important; } .blog-carousel-container { padding: 0 60px; } .blog-card { flex: 0 0 320px; } .nav-btn { display: flex; } /* Floating Window: Fenster statt Vollbild */ .floating-window { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 900px; height: 90vh; border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,.3); } .floating-window-inner { border-radius: var(--radius-lg); } .floating-content section, .floating-content .blog-full-article { padding: 50px !important; } .kontakt-container { grid-template-columns: 1fr 1fr; } } /* ============================================================ 22. DARK-MODE-TOGGLE-BUTTON ============================================================ */ /* HTML (in deinen Header einfügen, neben dem Burger-Button): */ /* Alles zurücksetzen – nur das Icon zählt */ #darkmode-toggle { all: unset; /* Kompletter Reset aller Styles */ cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; /* Klickbereich wie Nav-Links */ color: var(--clr-text); font-size: 1.1rem; border-radius: var(--radius-sm); flex-shrink: 0; transition: color var(--tr-std), transform var(--tr-fast); } #darkmode-toggle:hover { color: var(--clr-text-mid); } /* Fokus-Ring für Tastaturnutzer */ #darkmode-toggle:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; } /* Icon dreht sich beim Wechsel */ #darkmode-toggle i { display: inline-block; transition: transform .4s ease; pointer-events: none; } #darkmode-toggle:hover i { transform: rotate(20deg); } /* ---------------------------------------------------------------- TERMIN-CTA-FOOTER IM BLOG-MODAL ---------------------------------------------------------------- */ .modal-termin-cta { margin-top: 40px; padding: 24px 20px; background-color: var(--clr-accent); border-top: 3px solid var(--clr-text); border-radius: 0 0 8px 8px; } .modal-termin-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 700px; margin: 0 auto; text-align: center; } .modal-termin-cta__text { margin: 0; font-size: 1rem; font-weight: 600; color: var(--clr-text); line-height: 1.5; } .modal-termin-cta__text .fa-calendar-check { margin-right: 8px; color: var(--clr-text); } .modal-termin-cta__button { background-color: var(--clr-text) !important; color: var(--clr-accent) !important; border-color: var(--clr-text) !important; padding: 14px 30px; font-size: 1rem; white-space: nowrap; } .modal-termin-cta__button:hover { background-color: var(--clr-black) !important; color: var(--clr-accent) !important; border-color: var(--clr-black) !important; transform: translateY(-2px); } @media (min-width: 600px) { .modal-termin-cta__inner { flex-direction: row; justify-content: space-between; text-align: left; } .modal-termin-cta__text { flex: 1; padding-right: 20px; } } /* ---------------------------------------------------------------- ZURÜCK-ZUM-ARTIKEL-BUTTON IM MODAL ---------------------------------------------------------------- */ .modal-zurueck-button { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 24px 0; padding: 10px 18px; background-color: var(--clr-bg) !important; color: var(--clr-text) !important; border: 1px solid var(--clr-border-mid); border-radius: 5px; cursor: pointer; font-size: 0.9rem; font-weight: 600; transition: background-color var(--tr-fast), border-color var(--tr-fast), transform .1s ease; } .modal-zurueck-button:hover { background-color: var(--clr-accent) !important; border-color: var(--clr-accent-dark) !important; color: var(--clr-text) !important; transform: translateX(-3px); box-shadow: none; } .modal-zurueck-button .fa-arrow-left { font-size: 0.85rem; } /* ---------------------------------------------------------------- GESAMTBEWERTUNGS-BADGE ---------------------------------------------------------------- */ .bewertungen-gesamt { text-align: center; margin-bottom: 32px; } .bewertungen-badge { display: inline-flex; align-items: center; gap: 10px; background-color: var(--clr-white); /* War: #fff hardcodiert */ border: 2px solid var(--clr-text); border-radius: 50px; padding: 10px 24px; flex-wrap: wrap; justify-content: center; } .bewertungen-badge__sterne { color: #f5a623; font-size: 1.1rem; letter-spacing: 1px; } .bewertungen-badge__zahl { font-size: 1.4rem; font-weight: 700; color: var(--clr-text); } .bewertungen-badge__anzahl { color: var(--clr-text-light); font-weight: 400; font-size: 0.9rem; } /* ---------------------------------------------------------------- BEWERTUNGS-TRACK ---------------------------------------------------------------- */ .bewertungen-track { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 16px; padding: 8px 4px 24px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bewertungen-track::-webkit-scrollbar { display: none; } /* ---------------------------------------------------------------- BEWERTUNGS-KARTE ---------------------------------------------------------------- */ .bewertung-karte { flex: 0 0 82vw; max-width: 340px; scroll-snap-align: start; background-color: var(--clr-white); /* War: #fff hardcodiert */ border: 1px solid rgba(0, 0, 0, 0.08); border-left: 4px solid var(--clr-accent); border-radius: 10px; padding: 22px 20px 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: 10px; transition: transform var(--tr-fast), box-shadow var(--tr-fast), border-left-color var(--tr-fast), background-color var(--tr-std); } .bewertung-karte:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); border-left-color: var(--clr-text); } .bewertung-karte__sterne { color: #f5a623; font-size: 1rem; letter-spacing: 2px; } .bewertung-karte__text { font-size: 0.93rem; line-height: 1.65; color: var(--clr-text-mid); /* War: #444 hardcodiert */ text-align: left; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .bewertung-karte > footer.bewertung-karte__footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--clr-border); /* War: #f0f0f0 hardcodiert */ padding-top: 12px; margin-top: auto; background-color: transparent; padding-bottom: 0; text-align: left; } .bewertung-karte__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bewertung-karte__avatar--initiale { background-color: var(--clr-text); color: var(--clr-accent); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; } .bewertung-karte__meta { display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; } .bewertung-karte__name { font-weight: 700; font-size: 0.88rem; color: var(--clr-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* War: #222 */ .bewertung-karte__datum { font-size: 0.78rem; color: var(--clr-text-light); } .bewertungen-laden { width: 100%; text-align: center; color: var(--clr-text-light); /* War: #888 hardcodiert */ padding: 20px; font-size: 0.95rem; } @media (min-width: 768px) { .bewertung-karte { flex: 0 0 300px; } } .bewertungen-carousel-container { display: flex; align-items: center; gap: 8px; width: 100%; } .bewertungen-carousel-container .nav-btn { display: none; flex-shrink: 0; } @media (min-width: 1024px) { .bewertungen-carousel-container .nav-btn { display: flex; position: static; transform: none; } .bewertungen-carousel-container .nav-btn:hover { transform: scale(1.1); } } /* ---------------------------------------------------------------- HERO SECTION – Startseite Gradient Im Dark Mode: gedämpfter Gelb-Gradient ---------------------------------------------------------------- */ #startseite { background: linear-gradient(160deg, #fffde7 0%, #f8f9fa 60%) !important; } /* Dark Mode Override für den Hero-Gradient */ [data-theme="dark"] #startseite { background: linear-gradient(160deg, #1e1a00 0%, #121212 60%) !important; } /* ============================================================ DARK MODE – KONTRAST AUF GELBEM HINTERGRUND ============================================================ Problem: Im Dark Mode ist --clr-text hell (#e0e0e0). Auf gelbem Hintergrund (#fff100) wäre das schlecht lesbar. Lösung: Überall wo Gelb als Hintergrund genutzt wird, Schrift auf #000000 (Tiefschwarz) forcieren. Das gilt für: Hover-Zustände, aktive Tabs, CTAs, Badges, Blog-Karten-Hover, Feature-Items, Social Icons, Bewertungen. ============================================================ */ /* --- Nav-Links Hover / Focus -------------------------------- */ [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a:focus { color: #000000; } /* --- Dropdown-Links ----------------------------------------- */ [data-theme="dark"] .dropdown-menu li a:hover, [data-theme="dark"] .dropdown-menu li a:focus { color: #000000; } /* --- Primär-Button Hover ------------------------------------ */ [data-theme="dark"] .button:hover, [data-theme="dark"] button:hover, [data-theme="dark"] input[type="submit"]:hover, [data-theme="dark"] a.button:hover { color: #000000; } /* --- Sekundär-Button Hover ---------------------------------- */ [data-theme="dark"] .button-secondary:hover, [data-theme="dark"] a.button-secondary:hover { color: #000000; } /* --- Header CTA-Button -------------------------------------- */ [data-theme="dark"] .header-cta-button { color: #000000 !important; } /* --- Feature-Items Hover ------------------------------------ */ [data-theme="dark"] .feature-item:hover, [data-theme="dark"] .feature-item:hover h3, [data-theme="dark"] .feature-item:hover p, [data-theme="dark"] .feature-item:hover i { color: #000000; } /* --- Produkt-Kacheln Hover ---------------------------------- */ [data-theme="dark"] .product-item:hover, [data-theme="dark"] .product-item:focus, [data-theme="dark"] .product-item:hover i { color: #000000; } /* --- Blog-Karten Hover ------------------------------------- */ [data-theme="dark"] .blog-card:hover, [data-theme="dark"] .blog-card:hover h3, [data-theme="dark"] .blog-card:hover p, [data-theme="dark"] .blog-card:hover a { color: #000000; } /* --- Nav-Pfeile (Blog/Bewertungen Karussell) ---------------- */ [data-theme="dark"] .nav-btn:hover { color: #000000; } /* --- Social Icons Hover ------------------------------------- */ [data-theme="dark"] .nav-links .social-nav-item a:hover i, [data-theme="dark"] .nav-links .social-nav-item a:focus i { color: #000000; } /* --- Popup-Header (gelber Block) ---------------------------- */ [data-theme="dark"] .popup-layout .popup-header h1, [data-theme="dark"] .popup-layout .popup-header i, [data-theme="dark"] .popup-layout .popup-header .popup-header-icon i { color: #000000; } /* --- Termin-CTA im Modal ------------------------------------ */ [data-theme="dark"] .modal-termin-cta__text, [data-theme="dark"] .modal-termin-cta__text .fa-calendar-check { color: #000000; } /* --- Zurück-Button Hover ------------------------------------ */ [data-theme="dark"] .modal-zurueck-button:hover { color: #000000 !important; } /* --- Bewertungs-Badge --------------------------------------- */ [data-theme="dark"] .bewertungen-badge__zahl { color: #000000; } /* --- Close-Button Hover ------------------------------------- */ [data-theme="dark"] .close-button:hover, [data-theme="dark"] .close-button:focus { color: #000000; } /* --- Skip-Link ---------------------------------------------- */ [data-theme="dark"] .skip-link { color: #000000; } /* --- FAQ-Seite (Hover-Zustände & gelbe Elemente) -------- */ [data-theme="dark"] .faq-hero-label { color: #000000; } [data-theme="dark"] .faq-hero-nav a:hover { color: #000000; } [data-theme="dark"] .faq-item:hover summary, [data-theme="dark"] .faq-item[open] summary { color: #000000; } [data-theme="dark"] .faq-item[open] .faq-toggle { color: #000000; } [data-theme="dark"] .faq-tag.wichtig, [data-theme="dark"] .faq-tag.berlin { color: #000000; } [data-theme="dark"] .btn-faq-cta, [data-theme="dark"] .btn-faq-cta:hover { color: #000000; } [data-theme="dark"] .faq-banner h2, [data-theme="dark"] .faq-banner p { color: #000000; } [data-theme="dark"] .faq-trust-item i { color: #000000; } [data-theme="dark"] .faq-sticky, [data-theme="dark"] .faq-cta { background-color: var(--clr-border-mid); /* Dunkler Hintergrund statt hellgrau */ } [data-theme="dark"] .faq-sticky-text, [data-theme="dark"] .faq-cta-text { color: var(--clr-text-mid); /* Helle Schrift für Lesbarkeit */ } [data-theme="dark"] .btn-banner { background-color: #333333; color: var(--clr-accent); border-color: #333333; } [data-theme="dark"] .btn-banner:hover { background-color: #000000; border-color: #000000; } /* ---------------------------------------------------------------- DARK MODE – Primär-Button Ruhezustand Problem: --clr-text ist im Dark Mode #e0e0e0 (hellgrau) → grauer Hintergrund + gelbe Schrift = schlechter Kontrast. Lösung: Button invertieren → gelber Hintergrund + schwarze Schrift. ---------------------------------------------------------------- */ [data-theme="dark"] .button, [data-theme="dark"] button:not(#darkmode-toggle), [data-theme="dark"] input[type="submit"], [data-theme="dark"] a.button { background-color: var(--clr-accent) !important; /* #fff100 gelb */ color: #000000 !important; /* schwarz */ border-color: var(--clr-accent-dark) !important; } /* Hover: gelb → tiefschwarz */ [data-theme="dark"] .button:hover, [data-theme="dark"] button:not(#darkmode-toggle):hover, [data-theme="dark"] input[type="submit"]:hover, [data-theme="dark"] a.button:hover { background-color: #000000 !important; color: var(--clr-accent) !important; border-color: #000000 !important; } /* --- Popup Tab-Buttons (Dark Mode Fix) ---------------------- */ /* Inaktiver Zustand: dunkelgrauer Button, hellgraue Schrift */ [data-theme="dark"] .popup-layout .popup-tab-button { background-color: var(--clr-white) !important; /* #1e1e1e */ color: var(--clr-text-mid) !important; /* #aaaaaa */ border-color: var(--clr-border-mid) !important; /* #333333 */ } /* Hover auf inaktivem Button: wird gelb mit schwarzer Schrift */ [data-theme="dark"] .popup-layout .popup-tab-button:hover { background-color: var(--clr-accent) !important; color: #000000 !important; border-color: var(--clr-accent-dark) !important; } /* Aktiver Zustand: schwarzer Button, gelbe Schrift */ [data-theme="dark"] .popup-layout .popup-tab-button.active, [data-theme="dark"] .popup-layout .popup-tab-button.active:hover { background-color: #000000 !important; color: var(--clr-accent) !important; border-color: var(--clr-accent) !important; box-shadow: none !important; } /* ============================================================ 23. FAQ-SEITE ============================================================ */ /* ── Seitenstruktur ─────────────────────────────────────── */ .faq-page-main section { min-height: auto; padding: 0; border-top: none; display: block; text-align: left; } .faq-outer { max-width: 1100px; margin: 0 auto; padding: 0 20px 80px; } /* ── Hero ───────────────────────────────────────────────── */ .faq-hero { background-color: var(--clr-bg); padding: 48px 20px 40px; text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--clr-border); transition: background-color var(--tr-std), border-color var(--tr-std); } .faq-hero-inner { position: relative; max-width: 720px; margin: 0 auto; } .faq-hero-label { display: inline-block; background-color: var(--clr-accent); color: var(--clr-text); font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; } .faq-hero-title { color: var(--clr-black); font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.2; margin-bottom: 14px; } .faq-hero-highlight { color: var(--clr-accent); } .faq-hero-sub { color: var(--clr-text-mid); font-size: 1rem; line-height: 1.6; margin-bottom: 28px; max-width: 540px; margin-left: auto; margin-right: auto; } .faq-hero-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .faq-hero-nav a { font-size: .82rem; font-weight: 600; color: var(--clr-text); background: var(--clr-white); border: 1px solid var(--clr-border-mid); padding: 7px 16px; border-radius: var(--radius-sm); text-decoration: none; transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast); display: inline-flex; align-items: center; gap: 6px; } .faq-hero-nav a:hover { background: var(--clr-accent); border-color: var(--clr-accent-dark); color: var(--clr-text); } /* ── Sektions-Überschrift ───────────────────────────────── */ .faq-section-header { display: flex; align-items: center; gap: 14px; padding: 36px 0 16px; border-bottom: 2px solid var(--clr-border); margin-bottom: 8px; } .faq-section-badge { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .faq-section-badge.rs { background: #e6f4f3; color: #007A72; } .faq-section-badge.abs { background: #fff3e0; color: #E65100; } .faq-section-badge.ges { background: #f3e5f5; color: #7B1FA2; } .faq-section-badge.vor { background: #e8f5e9; color: #2E7D32; } [data-theme="dark"] .faq-section-badge.rs { background: #002c2a; color: #66d9d1; } [data-theme="dark"] .faq-section-badge.abs { background: #3d1500; color: #ffab40; } [data-theme="dark"] .faq-section-badge.ges { background: #2c0b3e; color: #d08dff; } [data-theme="dark"] .faq-section-badge.vor { background: #0f2d14; color: #81c784; } .faq-section-title { font-size: 1.4rem; font-weight: 700; color: var(--clr-black); margin: 0 0 2px; line-height: 1.2; } .faq-section-meta { font-size: .8rem; color: var(--clr-text-light); margin: 0; } /* ── Produkt-Label ──────────────────────────────────────── */ .faq-product-group { margin-top: 24px; } .faq-product-label { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-text-mid); background: var(--clr-bg); border-left: 3px solid var(--clr-accent); padding: 5px 12px; margin-bottom: 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .faq-product-label.abs { border-color: #E65100; } .faq-product-label.ges { border-color: #7B1FA2; } .faq-product-label.vor { border-color: #2E7D32; } /* ── FAQ-Item (details/summary) ─────────────────────────── */ .faq-item { background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-fast); } .faq-item:hover { background-color: var(--clr-accent); border-color: var(--clr-accent-dark); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .faq-item:hover summary { color: var(--clr-text); } .faq-item[open] { border-color: var(--clr-accent-dark); background-color: var(--clr-accent); } .faq-item[open] .faq-answer { background-color: var(--clr-white); } .faq-item summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 18px; cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--clr-text); line-height: 1.45; position: relative; user-select: none; -webkit-tap-highlight-color: transparent; } .faq-item summary::-webkit-details-marker, .faq-item summary::marker { display: none; } .faq-item summary { list-style: none; } .faq-item summary::after { display: none !important; } .faq-q-text { flex: 1; } .faq-tag { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin: 0 3px 3px 0; background: #fffae6; color: #5c4d00; border: 1px solid var(--clr-accent-dark); } .faq-tag.wichtig { background: var(--clr-accent); color: var(--clr-text); border-color: var(--clr-accent-dark); } .faq-tag.berlin { background: var(--clr-accent); color: var(--clr-black); border-color: var(--clr-black); } .faq-toggle { width: 26px; height: 26px; border-radius: 50%; background: var(--clr-bg); border: 1px solid var(--clr-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .7rem; color: var(--clr-text-mid); transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-std), color var(--tr-fast); } .faq-item[open] .faq-toggle { background: var(--clr-accent); border-color: var(--clr-accent-dark); color: var(--clr-text); transform: rotate(45deg); } /* ── Antwort-Block ──────────────────────────────────────── */ .faq-answer { padding: 0 18px 18px; border-top: 1px solid var(--clr-border); } .faq-answer p { font-size: .93rem; color: var(--clr-text-mid); line-height: 1.7; margin: 12px 0 0; text-align: left; } .faq-list { list-style: none; padding: 0; margin: 10px 0 0; } .faq-list li { font-size: .9rem; color: var(--clr-text-mid); padding: 4px 0 4px 26px; position: relative; line-height: 1.55; text-align: left; } .faq-list li::before { content: '\f058'; font-family: 'Font Awesome 7 Free'; font-weight: 900; position: absolute; left: 0; top: 5px; font-size: .78rem; color: #28a745; } .faq-list.warn li::before { content: '\f071'; color: #E65100; } .faq-case { background: var(--clr-bg); border-left: 3px solid var(--clr-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 14px; margin: 12px 0 0; font-size: .87rem; color: var(--clr-text); line-height: 1.6; } .faq-case strong { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-text-mid); margin-bottom: 4px; } .faq-case.abs { border-color: #E65100; } .faq-case.ges { border-color: #7B1FA2; } .faq-case.vor { border-color: #2E7D32; } .faq-hint { background: #fffde7; border: 1px solid var(--clr-accent-dark); border-radius: var(--radius-sm); padding: 9px 13px; margin: 12px 0 0; font-size: .84rem; color: #5D4037; line-height: 1.55; text-align: left; } .faq-hint i { color: var(--clr-accent-dark); margin-right: 6px; } [data-theme="dark"] .faq-hint { background: #302800; color: #e0d6b3; } .faq-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--clr-text); border-radius: var(--radius-md); padding: 14px 18px; margin-top: 16px; flex-wrap: wrap; } .faq-cta-text { font-size: .85rem; color: var(--clr-bg); opacity: 0.8; line-height: 1.4; } .faq-cta-text strong { display: block; color: var(--clr-white); font-size: .9rem; margin-bottom: 1px; } [data-theme="dark"] .faq-cta-text strong { color: var(--clr-black); } .btn-faq-cta { display: inline-flex; align-items: center; gap: 7px; background-color: var(--clr-accent); color: var(--clr-text); border: 1px solid var(--clr-accent-dark); padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; transition: background-color var(--tr-std), transform var(--tr-fast), box-shadow var(--tr-std); } .btn-faq-cta:hover { background-color: var(--clr-accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--clr-text); } /* ── Abschluss-Banner ───────────────────────────────────── */ .faq-banner { background-color: var(--clr-accent); border-radius: var(--radius-lg); padding: 48px 28px; text-align: center; margin-top: 56px; box-shadow: var(--shadow-sm); } .faq-banner h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); color: var(--clr-black); margin-bottom: 12px; } .faq-banner p { color: var(--clr-text); font-size: .97rem; line-height: 1.65; max-width: 500px; margin: 0 auto 24px; text-align: center; } .btn-banner { display: inline-flex; align-items: center; gap: 10px; background-color: var(--clr-text); color: var(--clr-accent); border: 1px solid var(--clr-text); padding: 14px 32px; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color var(--tr-std), transform var(--tr-fast), box-shadow var(--tr-std); } .btn-banner:hover { background-color: var(--clr-black); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--clr-accent); } /* ── Trust Badges ───────────────────────────────────────── */ .faq-trust { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--clr-border); } .faq-trust-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--clr-text-mid); } .faq-trust-item i { font-size: 1rem; color: var(--clr-text); background: var(--clr-accent); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* ── Sticky CTA Bar ─────────────────────────────────────── */ .faq-sticky { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--clr-text); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 990; box-shadow: 0 -4px 20px rgba(0,0,0,.18); transform: translateY(100%); transition: transform var(--tr-std); } .faq-sticky.visible { transform: translateY(0); } .faq-sticky-text { font-size: .83rem; color: var(--clr-bg); opacity: 0.8; line-height: 1.3; } .faq-sticky-text strong { display: block; color: var(--clr-accent); font-size: .9rem; } /* ── Responsive ─────────────────────────────────────────── */ @media (min-width: 768px) { .faq-hero { padding: 64px 40px 56px; } .faq-outer { padding: 0 40px 100px; } .faq-item summary { padding: 17px 22px; font-size: 1rem; } .faq-answer { padding: 0 22px 22px; } .faq-cta { flex-wrap: nowrap; } .faq-sticky { max-width: 900px; left: 50%; right: auto; bottom: 20px; transform: translateX(-50%) translateY(200%); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .faq-sticky.visible { transform: translateX(-50%) translateY(0); } } @media (min-width: 1024px) { .faq-section-title { font-size: 1.6rem; } } /* ============================================================ 24. IMPRESSUM & DATENSCHUTZ ============================================================ */ #privacy-content, #impressum-content { max-width: 850px; margin: 40px auto; padding: 30px; background-color: var(--clr-white); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); text-align: left; line-height: 1.7; font-size: 0.95em; transition: background-color var(--tr-std), border-color var(--tr-std); } #privacy-content h1, #impressum-content h1 { text-align: center; font-size: 2em; color: var(--clr-black); margin-bottom: 1.5rem; padding-bottom: 10px; border-bottom: 2px solid var(--clr-border-mid); } #privacy-content h2, #impressum-content h2 { font-size: 1.4em; color: var(--clr-black); margin-top: 2.5rem; margin-bottom: 1.5rem; padding-bottom: 5px; border-bottom: 1px solid var(--clr-border); } #privacy-content h3, #impressum-content h3 { font-size: 1.1em; color: var(--clr-text); margin-top: 1.5rem; margin-bottom: 0.8rem; } #privacy-content p, #impressum-content p { color: var(--clr-text-mid); margin-bottom: 1rem; text-align: left; } #privacy-content strong, #impressum-content strong { color: var(--clr-text); } #privacy-content ul, #impressum-content ul { list-style: disc; margin-left: 20px; margin-bottom: 1rem; color: var(--clr-text-mid); } #privacy-content a, #impressum-content a { color: var(--clr-accent-dark); text-decoration: underline; font-weight: 600; } #privacy-content a:hover, #impressum-content a:hover { color: var(--clr-text); text-decoration: none; } .stand-datum { text-align: right; font-style: italic; color: var(--clr-text-light); margin-top: 2rem; } .address-block { margin-bottom: 1.5em; padding: 1em; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background-color: var(--clr-bg); } .address-block strong:first-child { font-size: 1.1em; color: var(--clr-black); margin-bottom: 0.5em; display: block; } [data-theme="dark"] #privacy-content a, [data-theme="dark"] #impressum-content a { color: var(--clr-accent); } [data-theme="dark"] #privacy-content a:hover, [data-theme="dark"] #impressum-content a:hover { color: var(--clr-white); } /* ========================================================================== COOKIE-BANNER STYLES Anhängen ans Ende der style.css Zweck: DSGVO-konformer Cookie-Consent für tomkevinkempe.de Kompatibilität: Vanilla CSS, Mobile-First, kein Framework ========================================================================== */ /* -------------------------------------------------------------------------- 1. OVERLAY – dunkelt den Hintergrund beim ersten Besuch ab -------------------------------------------------------------------------- */ #cookie-overlay { position: fixed; inset: 0; /* top/right/bottom/left: 0 */ background: rgba(0, 0, 0, 0.45); z-index: 9998; /* Unter dem Banner, über allem anderen */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } #cookie-overlay.visible { opacity: 1; pointer-events: auto; } /* -------------------------------------------------------------------------- 2. BANNER – fährt von unten ins Bild -------------------------------------------------------------------------- */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #ffffff; border-top: 3px solid #000000; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); padding: 20px 16px 24px; /* Mobile: etwas kompakter */ transform: translateY(100%); /* Startet unterhalb des Viewports */ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } #cookie-banner.visible { transform: translateY(0); } /* Zentriert den Inhalt auf breiten Screens */ #cookie-banner .cookie-inner { max-width: 900px; margin: 0 auto; } /* -------------------------------------------------------------------------- 3. BANNER-INHALTE -------------------------------------------------------------------------- */ #cookie-banner .cookie-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } /* Überschrift im Banner – überschreibt das globale h2-Styling */ #cookie-banner .cookie-header h2 { font-size: 1rem; font-weight: 700; color: #000000; margin: 0; line-height: 1.3; text-align: left; } #cookie-banner .cookie-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; } /* Beschreibungstext – überschreibt globales text-align:center */ #cookie-banner .cookie-text { font-size: 0.82rem; color: #444444; line-height: 1.55; margin: 0 0 12px; text-align: left; } #cookie-banner .cookie-text a { color: #000000; text-decoration: underline; font-weight: 600; } #cookie-banner .cookie-text a:hover { color: #333; } /* -------------------------------------------------------------------------- 4. DETAILS-BEREICH (ausklappbar) -------------------------------------------------------------------------- */ #cookie-details { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } #cookie-details.open { max-height: 600px; } .cookie-category { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 12px 14px; margin-bottom: 8px; } .cookie-category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .cookie-category-header strong { font-size: 0.85rem; color: #000; } /* Status-Badges */ .cookie-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .cookie-badge.required { background: #e8f5e9; color: #2e7d32; } .cookie-badge.optional { background: #fff3e0; color: #e65100; } /* Beschreibungstext in der Kategorie-Karte */ .cookie-category p { font-size: 0.78rem; color: #666; margin: 0 0 8px; text-align: left; line-height: 1.45; } /* Details-Toggle-Link */ #cookie-toggle-details { display: inline-block; font-size: 0.78rem; color: #000; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; margin-bottom: 14px; font-family: inherit; } #cookie-toggle-details:hover { color: #555; } /* -------------------------------------------------------------------------- 5. TOGGLE-SWITCH (für Kategorie-Einstellungen) -------------------------------------------------------------------------- */ .cookie-toggle-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .cookie-toggle-wrapper label { font-size: 0.78rem; color: #444; cursor: pointer; } .cookie-toggle { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; background: #ccc; border-radius: 22px; cursor: pointer; position: relative; flex-shrink: 0; transition: background 0.2s ease; } /* Der weiße Knopf */ .cookie-toggle::before { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .cookie-toggle:checked { background: #000000; } .cookie-toggle:checked::before { transform: translateX(18px); } /* Pflicht-Toggle: immer grün, nicht klickbar */ .cookie-toggle:disabled { background: #4caf50; cursor: not-allowed; opacity: 0.85; } .cookie-toggle:disabled::before { transform: translateX(18px); } /* -------------------------------------------------------------------------- 6. BUTTONS -------------------------------------------------------------------------- */ #cookie-banner .cookie-buttons { display: flex; flex-direction: column; /* Mobile: untereinander */ gap: 10px; margin-top: 4px; } #cookie-banner .cookie-buttons button { font-family: inherit; font-size: 0.88rem; font-weight: 600; border-radius: 4px; padding: 13px 16px; cursor: pointer; border: 2px solid #000000; transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease; width: 100%; line-height: 1; letter-spacing: 0.01em; } /* Primär: "Alle akzeptieren" */ #cookie-btn-accept-all { background: #000000; color: #ffffff; } #cookie-btn-accept-all:hover { background: #222222; transform: translateY(-1px); } /* Sekundär: "Nur notwendige" */ #cookie-btn-accept-necessary { background: #ffffff; color: #000000; } #cookie-btn-accept-necessary:hover { background: #f0f0f0; transform: translateY(-1px); } /* Tertiär: "Auswahl speichern" – nur sichtbar wenn Details offen */ #cookie-btn-save-selection { background: #f8f9fa; color: #000000; border-color: #aaa; display: none; } #cookie-btn-save-selection.visible { display: block; } #cookie-btn-save-selection:hover { background: #e9ecef; } /* -------------------------------------------------------------------------- 7. WIEDERÖFFNEN-BUTTON (persistent nach Einwilligung) DSGVO-Pflicht: Nutzer muss Einwilligung jederzeit widerrufen können -------------------------------------------------------------------------- */ #cookie-reopen { position: fixed; bottom: 16px; left: 16px; z-index: 9990; background: #ffffff; border: 2px solid #000000; border-radius: 50px; padding: 8px 14px; font-size: 0.75rem; font-weight: 600; font-family: inherit; cursor: pointer; display: none; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: box-shadow 0.2s ease, transform 0.1s ease; color: #000; line-height: 1; } #cookie-reopen.visible { display: flex; } #cookie-reopen:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.2); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 8. GOOGLE MAPS PLATZHALTER Ersetzt den iframe bis zur Einwilligung -------------------------------------------------------------------------- */ .maps-placeholder { width: 100%; min-height: 350px; background: #f0f0f0; border: 2px dashed #ccc; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; box-sizing: border-box; } .maps-placeholder .maps-placeholder-icon { font-size: 2.5rem; color: #999; } /* Überschreibt globales p-Styling (margin, text-align) */ .maps-placeholder p { font-size: 0.88rem; color: #666; margin: 0; max-width: 320px; line-height: 1.5; text-align: center; } .maps-placeholder-btn { background: #000; color: #fff; border: none; border-radius: 4px; padding: 10px 22px; font-size: 0.85rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.2s ease; } .maps-placeholder-btn:hover { background: #333; } /* -------------------------------------------------------------------------- 9. DESKTOP-ANPASSUNGEN (ab 600px) -------------------------------------------------------------------------- */ @media (min-width: 600px) { #cookie-banner { padding: 22px 30px 26px; } /* Buttons nebeneinander */ #cookie-banner .cookie-buttons { flex-direction: row; flex-wrap: wrap; gap: 12px; } #cookie-banner .cookie-buttons button { width: auto; flex: 1; min-width: 160px; } } /* === ENDE COOKIE-BANNER STYLES === */