/* * Klaro Consent-Banner - Marken-Override (heyrecruit-jobboards). * Statisch im Blade- geladen (vor klaro.js), damit kein FOUC. * * Accent kommt aus --cmp-accent / --cmp-on-accent (pro Plattform in app.blade.php aus * brand_config.colors.primary injiziert). KEINE Marken-Farbe hier hartkodieren -> Satelliten * adaptieren automatisch. Neutrale Toene + Poppins entsprechen dem Site-Design. * * !important ist hier bewusst gesetzt: Klaro injiziert sein eigenes Stylesheet ZUR LAUFZEIT * (nach diesem ) und nutzt teils Inline-Styles -> nur so gewinnen die Layout-/Farb-Regeln. */ .klaro { --font-family: 'Poppins', system-ui, -apple-system, sans-serif; --border-radius: 12px; --green1: var(--cmp-accent); --green2: var(--cmp-accent); --green3: var(--cmp-on-accent); --dark1: #111915; --dark2: #2c3630; --dark3: #6a736d; --light1: #f6f4ee; --light2: #ede9dd; --light3: #e2ded2; } .klaro, .klaro * { font-family: 'Poppins', system-ui, -apple-system, sans-serif !important; box-sizing: border-box; } /* ===== Consent-Notice = zentrierte Modal-Karte mit Backdrop ===== */ .klaro .cookie-notice { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; max-width: none !important; z-index: 1000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; background: rgba(14, 31, 26, 0.5) !important; /* Vollbild-Overlay: eckig + ohne Schatten. Klaro setzt sonst --border-radius (runde Backdrop-Ecken) und einen box-shadow (sichtbare Kontur am Bildschirmrand). */ border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: cmp-fade 0.25s ease; } .klaro .cookie-notice .cn-body { max-width: 458px !important; width: 100% !important; margin: 0 !important; padding: 28px 30px 26px !important; background: #fff !important; color: #2c3630 !important; border-radius: 16px !important; border-top: 4px solid var(--cmp-accent) !important; box-shadow: 0 24px 60px -24px rgba(14, 31, 26, 0.55), 0 2px 8px rgba(14, 31, 26, 0.06) !important; animation: cmp-pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Headline - Klaro rendert im Notice keinen Titel, daher via CSS (Seite ist de-only). */ .klaro .cookie-notice .cn-body::before { content: 'Privatsphäre-Einstellungen'; display: block; margin-bottom: 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #111915; } .klaro .cookie-notice .cn-body p { margin: 0 0 20px !important; font-size: 14px !important; line-height: 1.6 !important; color: #2c3630 !important; } .klaro .cookie-notice .cn-ok { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding: 0 !important; } /* Ablehnen + Akzeptieren liegen in .cn-buttons -> dort den Abstand zwischen ihnen setzen */ .klaro .cookie-notice .cn-buttons { display: flex !important; gap: 16px !important; margin: 0 !important; order: 1 !important; } /* "Einstellungen anpassen" (eigener .cn-ok-Direktchild) darunter, linksbuendig */ .klaro .cookie-notice .cn-ok .cn-learn-more { order: 2 !important; flex: 1 1 100% !important; margin: 2px 0 0 !important; padding: 0 !important; text-align: left !important; color: #2c3630 !important; font-size: 13px !important; font-weight: 600 !important; } /* ===== Buttons ===== */ .klaro .cm-btn { margin: 0 !important; padding: 12px 18px !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -0.01em; border-radius: 11px !important; border: 1.5px solid transparent !important; cursor: pointer; transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } /* Akzeptieren - gefuellt in der Plattform-Akzentfarbe */ .klaro .cm-btn.cm-btn-success, .klaro .cm-btn.cm-btn-accept-all, .klaro .cm-btn.cm-btn-accept { background: var(--cmp-accent) !important; color: var(--cmp-on-accent) !important; border-color: var(--cmp-accent) !important; } .klaro .cm-btn.cm-btn-success:hover, .klaro .cm-btn.cm-btn-accept-all:hover, .klaro .cm-btn.cm-btn-accept:hover { filter: brightness(1.08); } /* Ablehnen - gleichwertig sichtbar als Outline-Button (kein Dark-Pattern) */ .klaro .cm-btn.cm-btn-danger, .klaro .cm-btn.cn-decline { background: #fff !important; color: #2c3630 !important; border-color: #e2ded2 !important; } .klaro .cm-btn.cm-btn-danger:hover, .klaro .cm-btn.cn-decline:hover { background: #f6f4ee !important; border-color: #a3aba5 !important; } /* "Einstellungen" / Mehr erfahren - dezenter Text-Link in der Akzentfarbe */ /* Links (Einstellungen anpassen, Datenschutzerklaerung) - neutral + lesbar, NICHT in der Akzentfarbe (helle Key-Colours waeren auf Weiss unlesbar). */ .klaro .cm-btn.cm-btn-info, .klaro a.cm-link, .klaro .cm-link { background: transparent !important; border: none !important; padding: 6px !important; font-size: 13px !important; font-weight: 600 !important; color: #2c3630 !important; text-decoration: underline !important; text-underline-offset: 3px; } /* Klaro faerbt Anker + Carets ueber --green1 (= Accent) -> auf Weiss unlesbar. Hier neutral ueberschreiben (Datenschutzerklaerung-Link, "N Dienst"-Aufklapper). */ .klaro .cookie-notice a, .klaro .cookie-modal a, .klaro .cm-caret, .klaro .cm-caret a { color: #2c3630 !important; } /* ===== Settings-Modal ===== */ .klaro .cookie-modal .cm-bg { background: rgba(14, 31, 26, 0.55) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .klaro .cookie-modal .cm-modal { color: #2c3630 !important; background: #fff !important; border-radius: 16px !important; box-shadow: 0 24px 70px -24px rgba(14, 31, 26, 0.6) !important; } .klaro .cookie-modal .cm-modal .cm-header { padding: 24px 26px 18px !important; border-bottom: 1px solid #ede9dd !important; } .klaro .cookie-modal .cm-modal .cm-header h1, .klaro .cookie-modal .cm-modal .cm-header .title { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #111915 !important; } .klaro .cookie-modal .cm-modal .cm-body { /* mehr Luft zwischen Header-Linie und erstem Dienst (pt) + vor der Footer-Linie (pb) */ padding: 20px 26px 18px !important; } .klaro .cookie-modal .cm-modal .cm-body p { font-size: 13.5px !important; line-height: 1.6 !important; color: #2c3630 !important; } /* Intro-/Beschreibungstext im Modal lesbar machen (Klaro-Default ist zu hell). */ .klaro .cookie-modal .cm-modal p, .klaro .cookie-modal .cm-modal .cm-caption, .klaro .cookie-modal .cm-modal .cm-header p { color: #2c3630 !important; opacity: 1 !important; } .klaro .cookie-modal .cm-modal .cm-footer { padding: 18px 26px !important; border-top: 1px solid #ede9dd !important; } .klaro .cookie-modal .cm-modal .cm-footer .cm-footer-buttons { display: flex !important; gap: 10px !important; justify-content: flex-end !important; } /* Kategorie-/Dienst-Titel */ .klaro .cm-modal .cm-purpose .cm-list-title, .klaro .cm-modal .cm-service .cm-list-title { font-weight: 600 !important; font-size: 14.5px !important; color: #111915 !important; } .klaro .cm-modal .cm-purpose .cm-list-description, .klaro .cm-modal .cm-service .cm-list-description { font-size: 12.5px !important; line-height: 1.5 !important; color: #6a736d !important; } /* Mehr Luft um die (dunkle) Trennlinie vor "Alle Dienste aktivieren/deaktivieren": margin-top = Abstand ueber der Linie, padding-top = Abstand unter der Linie. */ .klaro .cm-modal .cm-purpose.cm-toggle-all { margin-top: 20px !important; padding-top: 20px !important; /* helles Grau wie Header-/Footer-Linie (Klaro-Default ist dunkel #2c3630) */ border-top-color: #ede9dd !important; } /* ===== Toggles (Slider) ===== */ .klaro .cm-list-input:checked + .cm-list-label .slider, .klaro .cm-list-input:checked ~ .cm-list-label .slider, .klaro .cm-list-input.required + .cm-list-label .slider, .klaro .cm-list-input.required ~ .cm-list-label .slider { background-color: var(--cmp-accent) !important; } /* Flaches Toggle-Design - kein Schatten (passt zum sonstigen Flat-UI). */ .klaro .cm-list-label .slider, .klaro .cm-list-label .slider::before, .klaro .cm-switch .slider, .klaro .cm-switch .slider::before { box-shadow: none !important; } /* "Realisiert mit Klaro!" ausblenden */ .klaro .cm-powered-by { display: none !important; } /* ===== Motion ===== */ @keyframes cmp-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes cmp-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .klaro .cookie-notice, .klaro .cookie-notice .cn-body { animation: none; } } /* ===== Mobile ===== */ @media (max-width: 480px) { .klaro .cookie-notice .cn-body { padding: 24px 22px 22px !important; } .klaro .cookie-notice .cn-buttons { flex-direction: column !important; } } /* ===== Persistenter Re-Open-Button (Consent jederzeit erneut oeffnen) ===== DSGVO Art. 7 Abs. 3: Widerruf so einfach wie die Einwilligung. Fester runder Button unten links; oeffnet ueber window.klaro.show() das Einstellungs-Modal erneut. Bewusst neutral/dunkel (kein hartkodierter Marken-Ton) -> auf allen Plattformen stimmig. z-index unter dem Klaro-Overlay (1000), damit das Modal den Button verdeckt. */ .cmp-reopen { position: fixed; left: 18px; bottom: 18px; z-index: 900; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 9999px; cursor: pointer; background: #111915; color: #f6f4ee; font-size: 17px; line-height: 1; box-shadow: 0 4px 14px rgba(14, 31, 26, 0.28); transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .cmp-reopen:hover { background: #2c3630; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(14, 31, 26, 0.34); } .cmp-reopen:focus-visible { outline: 2px solid #111915; outline-offset: 3px; } @media (max-width: 480px) { .cmp-reopen { width: 40px; height: 40px; left: 14px; bottom: 14px; font-size: 15px; } }