/* Klaro 0.7 ships its own stylesheet (injected into at runtime) and is themed through CSS custom properties. We keep the UI vanilla and only set brand colors here. Overriding the variables works regardless of cascade order — structural overrides would need !important, because the injected sheet loads after our stylesheets and wins at equal specificity. All variables Klaro supports, with its built-in defaults: Colors --green1: #1a936f accent: accept buttons, links, switches (on) --green2: #24cc9a lighter accent (gradients, hover) --green3: #48dfb2 lightest accent --blue1: #2581c4 "accept selected" button --blue2: #459cdc --dark1: #333 modal / notice background (dark theme) --dark2: #5c5c5c switch background (off) --dark3: #7c7c7c borders, muted elements --light1: #fafafa main text (dark theme) --light2: #c8c8c8 secondary text --light3: #a0a0a0 muted text --white2: #f2f2f2 backgrounds (light theme) --white3: #e6e6e6 --button-text-color: #fff --box-shadow-color Typography & shape --font-family, --title-font-family, --font-size --border-radius, --border-width, --border-style Notice placement --notice-position, --notice-top, --notice-right, --notice-bottom, --notice-left, --notice-max-width Prebuilt themes are picked in config.js instead: styling.theme accepts e.g. ['light', 'top', 'wide']. */ .klaro { /* The CI green #055f07 is so dark that on Klaro's #333 background the accept button would barely stand out (contrast ratio ~1.6:1). The accent is therefore a lightened version of it; the hover state goes lighter still, and green3 picks up the light green the site already uses. */ --green1: #0a7a0c; --green2: #0f9612; --green3: #b2cf9f; /* Klaro's 400px default wraps the notice buttons with our German labels; 640px gives the link and the buttons some air between them without spanning the screen. */ --notice-max-width: 640px; /* Toggle track (white2) and knob (white3): Klaro's light-on-light defaults are barely visible on the dark theme. Both variables are used nowhere else. */ --white2: #7c7c7c; --white3: #fff; --font-family: 'Fira Sans', Arial, Helvetica, 'Helvetica Neue', sans-serif; --title-font-family: 'Fira Sans', Arial, Helvetica, 'Helvetica Neue', sans-serif; /* Matches the 5px of .btn-gruen. */ --border-radius: 5px; } /* Klaro colours every link with --green1 — the same variable that fills the accept button. On the dark #333 panel those two uses exclude each other: link text needs 4.5:1 against #333, which forces a light green, while white button text needs 4.5:1 against that same green, which forces a dark one. No single value satisfies both, so links get their own tone. The light green below is the one the site already uses (7.3:1 on #333). !important is unavoidable here: the selectors match Klaro's own at equal specificity, and its stylesheet is injected at runtime, i.e. after this file. */ .klaro .cookie-modal a, .klaro .cookie-notice a { color: #b2cf9f !important; text-decoration: underline; } /* The context notice is the one Klaro surface with a light background, so its links stay on the dark CI green (7.8:1 on #fafafa) instead. */ .klaro .context-notice p a { color: #055f07 !important; text-decoration: underline; } /* Klaro's injected z-index (999-1001) sits below the sticky header; lift the consent UI above it. !important beats the injected sheet. */ .klaro .cookie-modal, .klaro .cookie-notice { z-index: 9999 !important; } /* Klaro mounts and unmounts its UI via React, so only entry animations are possible in pure CSS — the DOM node is already gone when it "leaves". */ .klaro .cookie-notice:not(.cookie-modal-notice) { animation: klaroFadeIn .3s ease; } /* Plain fade only: Klaro centers the modal via top:50% + translateY(-50%), and any transform in the keyframes jitters against that centering. */ .klaro .cookie-modal .cm-modal.cm-klaro { animation: klaroFadeIn .3s ease; } /* Clicking the background closes the modal — so the second click of a double click on "Einstellungen" would close it right after it opened. Hold the background's click handling off while it fades in. */ .klaro .cookie-modal .cm-bg { animation: klaroFadeIn .3s ease, klaroClickGuard .4s; } @keyframes klaroFadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes klaroClickGuard { from { pointer-events: none } to { pointer-events: none } } /* Klaro dims descriptions, purposes and the "(notwendig)" flag in three different grays (dark3/light3/dark2), all hard to read on the dark theme. Its main text variable keeps them themable through --light1 alone. .cm-klaro raises the specificity above the injected per-element rules. */ .klaro .cookie-modal .cm-modal.cm-klaro .cm-body .cm-list-description { color: var(--light1, #fafafa); } /* Same size for all secondary texts; the title carries the hierarchy through its weight and a slightly larger size instead. */ .klaro .cookie-modal .cm-modal.cm-klaro .cm-body .cm-list-title { font-size: 1.1em; } .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service p.purposes, .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service span.cm-required, .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service span.cm-opt-out { color: var(--light1, #fafafa); } .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service p.purposes { font-size: .9em; } /* "(notwendig)" reads as part of the title, so it shares its size. */ .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service span.cm-required, .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service span.cm-opt-out { font-size: 1.1em; } /* The single-line title top-aligns with Klaro's 30px switch; matching its height centers the two. */ .klaro .cookie-modal .cm-modal.cm-klaro .cm-body ul.cm-services li.cm-service.cm-toggle-all .cm-list-title { line-height: 30px; } /* Klaro's variables only cover button colors and radius — not the base CI (padding, transition), so those are set here. The "button" element selector outranks Klaro's injected per-variant rules. */ .klaro .cookie-modal button.cm-btn, .klaro .cookie-notice button.cm-btn { padding: 8px 22px; font-weight: 400; transition: all 200ms ease-in-out; } /* "Nur notwendige akzeptieren" + "Ausgewählte akzeptieren" — the latter also carries cm-btn-success, so this must come after Klaro's primary rule. Klaro's own muted gray in the CI shape: a white/green outline button would be unreadable on the dark background, and the gray stays themable through the variable. */ .klaro .cookie-modal button.cm-btn.cm-btn-danger, .klaro .cookie-modal button.cm-btn.cm-btn-info, .klaro .cookie-notice button.cm-btn.cm-btn-danger, .klaro .cookie-notice button.cm-btn.cm-btn-info { background-color: var(--dark2, #5c5c5c); border-color: transparent; color: #fff; } /* color too: "Ausgewählte akzeptieren" also carries cm-btn-success, whose hover would otherwise tint the text green. */ .klaro .cookie-modal button.cm-btn.cm-btn-danger:hover, .klaro .cookie-modal button.cm-btn.cm-btn-info:hover, .klaro .cookie-notice button.cm-btn.cm-btn-danger:hover, .klaro .cookie-notice button.cm-btn.cm-btn-info:hover { background-color: var(--dark3, #7c7c7c); color: #fff; } /* Klaro stretches the "Einstellungen" link with flex-grow:1 so the buttons are pushed to the right edge — but that inflates the link's own clickable box to the entire free width (measured: 249px of hit area for ~85px of text), so a click far away from the label still opens the modal. An auto margin moves the buttons just as well and leaves the link at its text width. The trailing "a" raises the specificity above Klaro's injected rule. */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a.cn-learn-more { flex-grow: 0; margin-right: auto; } /* Klaro has no option for narrow screens: its only breakpoint (384px) puts the two buttons side by side at 50% and leaves the wrap between ~385-560px unhandled. Below Bootstrap's sm we stack all three actions full-width. */ @media (max-width: 767px) { .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok { flex-direction: column !important; align-items: center !important; } /* The auto margin from the desktop rule has no job in a column; centering runs through align-items so the link keeps its text width here too. */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body a.cn-learn-more { margin: 0 0 12px; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons { display: flex !important; flex-direction: column !important; width: 100% !important; } .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons .cm-btn { width: 100% !important; margin-right: 0 !important; } } /* ------------------------------------------------------------------------ Placeholder for the map on the contact page The iframe carries data-src instead of src, so nothing is requested from Snazzy Maps / Google before consent. The overlay sits on top of the empty iframe and is hidden again by the googleMaps callback in config.js. ------------------------------------------------------------------------ */ .map-container { position: relative; } .map-container--overlay { display: none; } .map-container.map-container-blocked { min-height: 500px; background-color: #f0f6ec; } .map-container.map-container-blocked .map-container--overlay { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; align-items: center; justify-content: center; padding: 20px; text-align: center; /* style.css gives ".map iframe" position:relative for a 5px nudge. That makes the iframe a positioned element too, and between two positioned elements that both sit at z-index:auto the DOM order decides — the iframe comes second and would cover this overlay, swallowing every click on "Jetzt aktivieren". The z-index puts the overlay back on top. */ z-index: 1; } .map-container--overlay p { margin-bottom: 15px; }