/* Einwilligungsleiste am unteren Rand. =========================================================================== Absichtlich zurueckhaltend: weisse Leiste mit feiner Oberkante, kein Vorhang ueber der Seite, keine Verdunklung. Sie liegt fix am unteren Rand und verschiebt deshalb nichts im Layout - in einer CLS-Messung taucht sie gar nicht auf. Wird von global/cookie-banner.php und scripts/cookie-banner.js benutzt und ist auf allen oeffentlichen Seiten eingebunden. */ .eb-consent { position: fixed; left: 0; right: 0; bottom: 0; /* Ueber dem Seiteninhalt, aber unter Modalen (global/modal.css nutzt 1000 aufwaerts) - sonst laege die Leiste ueber dem Anfrageformular. */ z-index: 900; background: #ffffff; border-top: 1px solid #e2e5dc; box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.07); font-size: 0.85rem; line-height: 1.5; color: #2b2b2b; } /* Standard: unsichtbar. global/consent.php setzt html.eb-consent-offen schon im , wenn noch keine Entscheidung vorliegt - die Leiste ist damit vom ersten Bild an da und taucht nicht nachtraeglich auf. Das hidden-Attribut bleibt als zweite Sicherung: scripts/cookie-banner.js setzt es nach einer Entscheidung, falls die Klasse noch steht. */ .eb-consent { display: none; } html.eb-consent-offen .eb-consent:not([hidden]) { display: block; } .eb-consent-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; } .eb-consent-text { margin: 0; flex: 1 1 auto; /* Der Text darf ruhig kleiner sein als der Fliesstext der Seite, aber nicht unter 13px - darunter wird er auf dem Handy unlesbar. */ font-size: 0.85rem; } .eb-consent-text a { color: #4c6318; text-decoration: underline; text-underline-offset: 2px; } .eb-consent-text a:hover { color: #698B22; } .eb-consent-actions { flex: 0 0 auto; display: flex; gap: 10px; } /* Beide Schaltflaechen gleich gross und gleich auffaellig. Ein blasser oder kleinerer Ablehnen-Knopf gilt als unwirksame Einwilligung. */ /* Bewusst unter .eb-consent verschachtelt: auf /seminare laedt styles/seminare-tailwind.css eine Grundzuruecksetzung, die button und [type="button"] den Hintergrund entzieht. Die Regel ist genau so stark wie eine einzelne Klasse und steht spaeter im Dokument - ohne die zusaetzliche Klasse hier stuenden beide Schaltflaechen dort farblos da. */ .eb-consent .eb-consent-btn { min-width: 132px; padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; font-family: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .eb-consent .eb-consent-btn:focus-visible { outline: 2px solid #698B22; outline-offset: 2px; } /* #4c6318 auf Weiss sind 6,4:1, weit ueber den 4,5:1 der WCAG-Stufe AA. */ .eb-consent .eb-consent-btn--ghost { background: #ffffff; border-color: #b9c2a8; color: #3f4a2e; } .eb-consent .eb-consent-btn--ghost:hover { background: #f3f5ee; border-color: #8b9a72; } /* Weiss auf #55701b ergibt 5,5:1. Das hellere Markengruen #698B22 kaeme mit weisser Schrift nur auf 3,6:1 und waere fuer Text zu schwach. */ .eb-consent .eb-consent-btn--accept { background: #55701b; border-color: #55701b; color: #ffffff; } .eb-consent .eb-consent-btn--accept:hover { background: #445a15; border-color: #445a15; } /* Fussleisten-Eintrag "Cookie-Einstellungen": ein button, weil er nichts oeffnet, sondern die Einwilligungsleiste zurueckholt - optisch aber genau wie Impressum, Datenschutz und AGB daneben. Die Werte stammen aus .site-footer__legal a in styles/header-footer.css; ohne sie erbte der Button die Schriftgroesse des Umfelds und stand deutlich groesser und heller in der Reihe. */ .eb-consent-reopen { padding: 0; background: none; border: 0; font-family: inherit; font-size: 13px; font-weight: inherit; line-height: inherit; color: var(--sf-muted, #9aa39a); cursor: pointer; text-align: left; transition: color 0.2s ease; } .eb-consent-reopen:hover { color: var(--sf-heading, #ffffff); } .eb-consent-reopen:focus-visible { outline: 2px solid var(--sf-accent-soft, #698B22); outline-offset: 3px; border-radius: 2px; } @media (max-width: 720px) { .eb-consent-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .eb-consent-actions { /* Nebeneinander statt untereinander: zwei gleich breite Flaechen lassen sich mit dem Daumen sicher treffen und halten die Leiste flach. */ display: grid; grid-template-columns: 1fr 1fr; } .eb-consent .eb-consent-btn { min-width: 0; padding: 12px 12px; } }