/* =============================================================================== COOKIE CONSENT & YOUTUBE – STYLESHEET =============================================================================== Diese Datei enthält alle Styles für: 1. das Cookie-/Datenschutz-Consent-Banner 2. den YouTube-Platzhalter ohne externes Vorschaubild 3. den YouTube-Platzhalter mit lokalem Vorschaubild 4. die Buttons zum Laden einzelner YouTube-Videos 5. das später erzeugte YouTube-iframe Die Datei liegt im Hugo-Theme unter: themes/base-theme/assets/css/cookie-consent.css Sie wird über Hugo Resources in baseof.html eingebunden. =============================================================================== */ /* ============================================================================ 1. GRUNDLEGENDE HILFSREGEL FÜR "hidden" ============================================================================ Das HTML-Attribut hidden sorgt normalerweise dafür, dass ein Element nicht angezeigt wird. Falls das Theme an anderer Stelle jedoch z.B. display: flex; für das betreffende Element definiert, kann diese Regel überschrieben werden. Deshalb erzwingen wir hier: [hidden] = wirklich nicht anzeigen Diese Regel gilt insbesondere für das Consent-Banner. ============================================================================ */ [hidden] { display: none !important; } /* ============================================================================ 2. CONSENT-BANNER ============================================================================ Das Banner wird von: layouts/partials/cookie-consent.html erzeugt. Die JavaScript-Datei: assets/js/cookie-consent.js blendet das Banner abhängig vom gespeicherten Consent ein bzw. aus. Erwartete HTML-Klasse: .cookie-consent ============================================================================ */ /* Äußerer Container des Consent-Banners. Das Banner liegt über dem normalen Seiteninhalt. */ .cookie-consent { position: fixed; /* * Abstand zu den Bildschirmrändern. */ left: 1rem; right: 1rem; bottom: 1rem; /* * Maximale Breite des Dialogs. */ max-width: 760px; /* * Bei größeren Bildschirmen zentrieren wir den Dialog. */ margin-left: auto; margin-right: auto; /* * Über dem normalen Seiteninhalt anzeigen. */ z-index: 10000; /* * Innenabstand. */ padding: 1.25rem; /* * Hintergrund und Rahmen. */ background: #ffffff; border: 1px solid #cccccc; border-radius: 6px; /* * Leichter Schatten, damit sich das Banner vom Seiteninhalt abhebt. */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* * Schriftfarbe. */ color: #222222; /* * Einheitliche Größenberechnung. */ box-sizing: border-box; } /* Überschrift des Consent-Banners. */ .cookie-consent h2, .cookie-consent h3 { margin-top: 0; margin-bottom: 0.75rem; } /* Absätze innerhalb des Consent-Banners. */ .cookie-consent p { margin-top: 0; margin-bottom: 0.75rem; line-height: 1.5; } /* Container für die Buttons des Consent-Banners. */ .cookie-consent__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } /* Allgemeine Consent-Buttons. */ .cookie-consent button { font: inherit; cursor: pointer; } /* Primärer Button: "Externe Inhalte akzeptieren" */ .cookie-consent__accept { padding: 0.65rem 1rem; border: 1px solid #333333; border-radius: 4px; background: #333333; color: #ffffff; font-weight: 600; } /* Hover-Zustand des primären Buttons. */ .cookie-consent__accept:hover { background: #111111; } /* Sekundärer Button: "Nur notwendige" */ .cookie-consent__necessary { padding: 0.65rem 1rem; border: 1px solid #888888; border-radius: 4px; background: #ffffff; color: #222222; font-weight: 600; } /* Hover-Zustand des sekundären Buttons. */ .cookie-consent__necessary:hover { background: #eeeeee; } /* Tastaturfokus für alle Consent-Buttons. Wichtig für die Bedienung ohne Maus. */ .cookie-consent button:focus-visible { outline: 3px solid #555555; outline-offset: 2px; } /* ============================================================================ DATENSCHUTZEINSTELLUNGEN – FOOTER Der Link zum erneuten Öffnen der Consent-Einstellungen soll optisch wie ein normaler Textlink des Themes aussehen und nicht wie ein Button. Die Funktion bleibt unverändert: data-consent-settings Nur die Darstellung wird angepasst. ============================================================================ */ [data-consent-settings] { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; } /* Hover-Zustand: Der Link verhält sich optisch wie ein normaler Link. */ [data-consent-settings]:hover { color: inherit; text-decoration: none; } /* Tastaturfokus weiterhin sichtbar halten. */ [data-consent-settings]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* ============================================================================ 3. YOUTUBE – ÄUSSERER CONTAINER ============================================================================ Der YouTube-Shortcode erzeugt:
Dieser Container dient als gemeinsame Hülle für: - lokales Vorschaubild - bildlosen Platzhalter - Datenschutzhinweis - späteres YouTube-iframe Der Shortcode befindet sich unter: layouts/_shortcodes/youtube.html ============================================================================ */ .youtube-consent { width: 100%; /* * Abstand zu anderen Inhalten. */ margin: 1.5rem 0; /* * Einheitliche Größenberechnung. */ box-sizing: border-box; } /* ============================================================================ 4. YOUTUBE – LOKALES VORSCHAUBILD ============================================================================ Wenn im Content Bundle beispielsweise dQw4w9WgXcQ.webp vorhanden ist, verwendet der Shortcode dieses Bild. Der Container hat immer ein Seitenverhältnis von 16:9. ============================================================================ */ .youtube-consent__thumbnail { position: relative; width: 100%; /* * Standard-Seitenverhältnis eines YouTube-Videos. */ aspect-ratio: 16 / 9; overflow: hidden; /* * Dunkler Hintergrund während das Bild geladen wird. */ background: #111111; /* * Damit Overlay und Play-Button sauber innerhalb des Containers bleiben. */ isolation: isolate; } /* Das lokale Vorschaubild. object-fit: cover sorgt dafür, dass ein eventuell anderes Bildformat den gesamten 16:9-Bereich ausfüllt. */ .youtube-consent__thumbnail img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; } /* Dunkle transparente Ebene über dem Thumbnail. Sie sorgt dafür, dass der Play-Button gut sichtbar bleibt. */ .youtube-consent__thumbnail::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.25); /* * Die Overlay-Fläche darf keine Mausklicks abfangen. */ pointer-events: none; transition: background 0.2s ease; } /* Beim Darüberfahren wird das Bild etwas heller. */ .youtube-consent__thumbnail:hover::after { background: rgba(0, 0, 0, 0.12); } /* ============================================================================ 5. YOUTUBE – PLAY-BUTTON AUF DEM THUMBNAIL ============================================================================ Der Button liegt über dem lokalen Vorschaubild. data-youtube-load="single" wird vom JavaScript erkannt und lädt genau dieses Video. ============================================================================ */ .youtube-consent__play { position: absolute; top: 50%; left: 50%; /* * Exakte Zentrierung. */ transform: translate(-50%, -50%); z-index: 2; width: 72px; height: 72px; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(210, 0, 0, 0.95); color: #ffffff; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease, background 0.15s ease; } /* Hover-Effekt des Play-Buttons. */ .youtube-consent__play:hover { transform: translate(-50%, -50%) scale(1.08); background: #ff0000; } /* Tastaturfokus des Play-Buttons. */ .youtube-consent__play:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; } /* Das eigentliche Dreieck-Symbol. */ .youtube-consent__play-icon { display: block; /* * Das Dreieck wird optisch etwas nach rechts verschoben, * damit es innerhalb des Kreises mittig erscheint. */ margin-left: 4px; font-size: 1.6rem; line-height: 1; } /* ============================================================================ 6. YOUTUBE – HINWEIS UNTER DEM THUMBNAIL ============================================================================ Dieser Bereich erklärt dem Besucher, warum das Video noch nicht geladen wurde. Das Video selbst wird erst nach Zustimmung bzw. ausdrücklichem Laden erzeugt. ============================================================================ */ .youtube-consent__notice { padding: 0.75rem 0; color: #666666; font-size: 0.9rem; line-height: 1.5; } /* Absatz im Hinweisbereich. */ .youtube-consent__notice p { margin-top: 0; margin-bottom: 0.6rem; } /* ============================================================================ 7. YOUTUBE – BUTTON "NUR DIESES VIDEO LADEN" ============================================================================ */ .youtube-consent__load { display: inline-block; padding: 0.55rem 0.9rem; border: 1px solid #888888; border-radius: 4px; background: #ffffff; color: #222222; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } /* Hover-Zustand. */ .youtube-consent__load:hover { background: #eeeeee; border-color: #444444; } /* Tastaturfokus. */ .youtube-consent__load:focus-visible { outline: 3px solid #666666; outline-offset: 2px; } /* ============================================================================ 8. YOUTUBE – AKTIONEN Unter dem Datenschutzhinweis können zwei Möglichkeiten angeboten werden: 1. "Nur dieses Video laden" -> lädt ausschließlich das angeklickte Video -> keine globale Einwilligung 2. "Alle Videos laden" -> erteilt die Einwilligung für externe Inhalte -> wird im localStorage gespeichert -> alle YouTube-Videos der aktuellen Seite werden geladen Auf größeren Bildschirmen stehen die Buttons nebeneinander. Auf kleinen Bildschirmen dürfen sie untereinander umbrechen. ============================================================================ */ .youtube-consent__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.75rem; } /* Der Button für "Alle Videos laden" wird optisch etwas stärker hervorgehoben, weil damit die globale Einwilligung erteilt wird. */ .youtube-consent__load--all { border-color: #333333; background: #333333; color: #ffffff; } /* Hover-Zustand des globalen Buttons. */ .youtube-consent__load--all:hover { border-color: #111111; background: #111111; color: #ffffff; } /* Tastaturfokus des globalen Buttons. */ .youtube-consent__load--all:focus-visible { outline: 3px solid #555555; outline-offset: 2px; } /* Auf kleinen Bildschirmen können die Buttons untereinander stehen. */ @media (max-width: 600px) { .youtube-consent__actions { flex-direction: column; align-items: stretch; } /* * Buttons auf kleinen Bildschirmen gut anklickbar machen. */ .youtube-consent__actions .youtube-consent__load { width: 100%; box-sizing: border-box; } } /* ============================================================================ 9. YOUTUBE – PLATZHALTER OHNE VORSCHAUBILD ============================================================================ Wenn kein Bild mit der YouTube-ID im Page Bundle gefunden wird, verwendet youtube.html diesen Bereich. Beispiel: {{< youtube dQw4w9WgXcQ >}} ohne: dQw4w9WgXcQ.webp Der Platzhalter soll trotzdem eindeutig als Video erkennbar sein. Deshalb: - 16:9-Format - sichtbarer Rahmen - dunkler Hintergrund - Play-Symbol - Titel - Datenschutzhinweis - Ladebutton ============================================================================ */ .youtube-consent__no-thumbnail { width: 100%; /* * Der Platzhalter sieht genauso groß aus wie ein späterer Videoplayer. */ aspect-ratio: 16 / 9; /* * Inhalt zentrieren. */ display: flex; align-items: center; justify-content: center; /* * Einheitliche Größenberechnung. */ box-sizing: border-box; /* * Deutlich sichtbarer Rahmen. */ border: 1px solid #888888; border-radius: 5px; /* * Dunkler Videoplayer-Hintergrund. */ background: linear-gradient( 135deg, #3a3a3a 0%, #181818 100% ); color: #ffffff; text-align: center; /* * Leichter Schatten. */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } /* Inhalt innerhalb des bildlosen Platzhalters. max-width verhindert, dass die Texte bei breiten Bildschirmen übermäßig breit werden. */ .youtube-consent__no-thumbnail .youtube-consent__message { width: min(90%, 600px); } /* ============================================================================ 10. YOUTUBE – PLAY-SYMBOL IM BILDLOSEN PLATZHALTER ============================================================================ */ .youtube-consent__play-icon--static { width: 64px; height: 64px; /* * Zentriert innerhalb des Platzhalters. */ margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #d00000; color: #ffffff; font-size: 1.5rem; line-height: 1; /* * Das Dreieck optisch etwas nach rechts verschieben. */ padding-left: 4px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* ============================================================================ 11. YOUTUBE – TITEL IM BILDLOSEN PLATZHALTER ============================================================================ */ .youtube-consent__no-thumbnail .youtube-consent__title { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.2rem; font-weight: 700; line-height: 1.3; } /* ============================================================================ 12. YOUTUBE – TEXT IM BILDLOSEN PLATZHALTER ============================================================================ */ .youtube-consent__no-thumbnail p { margin-top: 0.5rem; margin-bottom: 0.75rem; line-height: 1.5; } /* ============================================================================ 13. YOUTUBE – BUTTON IM BILDLOSEN PLATZHALTER ============================================================================ Auf dem dunklen Hintergrund bekommt der Button einen hellen Hintergrund, damit er eindeutig als Bedienelement erkennbar ist. ============================================================================ */ .youtube-consent__no-thumbnail .youtube-consent__load { margin-top: 0.5rem; border-color: #ffffff; background: #ffffff; color: #222222; } /* Hover-Zustand des Buttons. */ .youtube-consent__no-thumbnail .youtube-consent__load:hover { background: #e5e5e5; } /* Tastaturfokus im dunklen Platzhalter. */ .youtube-consent__no-thumbnail .youtube-consent__load:focus-visible { outline-color: #ffffff; } /* ============================================================================ 14. YOUTUBE – GELADENES IFRAME ============================================================================ Erst nachdem cookie-consent.js das Video freigegeben hat, wird ein iframe erzeugt. Erwartete Struktur:
Auch hier verwenden wir 16:9. ============================================================================ */ .youtube-consent iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; margin: 0; } /* ============================================================================ 15. RESPONSIVE DARSTELLUNG FÜR KLEINE BILDSCHIRME ============================================================================ Auf Smartphones werden Play-Button und Text etwas kleiner dargestellt. ============================================================================ */ @media (max-width: 600px) { /* * Kleinerer Play-Button auf Smartphones. */ .youtube-consent__play { width: 58px; height: 58px; } /* * Kleineres Play-Symbol. */ .youtube-consent__play-icon { font-size: 1.3rem; } /* * Kleinere Darstellung des statischen Play-Symbols. */ .youtube-consent__play-icon--static { width: 52px; height: 52px; font-size: 1.25rem; } /* * Datenschutzhinweis auf kleinen Bildschirmen etwas kompakter. */ .youtube-consent__notice { font-size: 0.85rem; } /* * Titel des bildlosen Platzhalters etwas kleiner. */ .youtube-consent__no-thumbnail .youtube-consent__title { font-size: 1.05rem; } /* * Auf sehr kleinen Displays etwas weniger Innenraum. */ .youtube-consent__no-thumbnail .youtube-consent__message { width: 92%; } } /* ============================================================================ ENDE DER DATEI ============================================================================ */