{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "consent-banner-gestaltet",
 "name": "Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)",
 "name_en": "Designed GDPR-compliant consent banner",
 "kurz": "Das Consent-Banner spricht die Sprache der Marke: Ablehnen und Akzeptieren stehen gleichwertig nebeneinander, Dienste laden erst nach der Zustimmung.",
 "kategorie": "Navigation",
 "kategorie_slug": "navigation",
 "kategorie_nr": 3,
 "bau_chat": "C3",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 5,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "seriös",
  "funktional",
  "freundlich",
  "sachlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "dialog"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Das Consent-Banner ist Teil des Designsystems statt ein fremdes CMP-Overlay. Auf dem Desktop ist es eine kompakte Karte unten links oder rechts, auf dem Telefon ein Bottom-Sheet. Es nutzt Hausschrift, Markenfarben und Radius und blendet sanft ein. Die erste Ebene bietet gleichwertige Aktionen: Ablehnen und Akzeptieren sind gleich groß und gleich gut erreichbar, dazu kommen die Einstellungen. Die zweite Ebene ist ein Dialog mit Kategorien als Schalter: Notwendig ist fest an, Statistik, Marketing und externe Medien sind standardmäßig aus. Skripte wie Analytics oder Einbettungen laden erst nach der Zustimmung. Die Wahl lässt sich jederzeit über den Footer-Link „Cookie-Einstellungen“ ändern. Externe Medien wie Videos oder Karten stehen als Zwei-Klick-Platzhalter im Layout.",
  "warum_es_wirkt": "Das Banner ist oft das Erste, was Besucher sehen. Ist es gestaltet und ehrlich, wirkt es wie ein Teil der Marke statt wie ein Fremdkörper und schafft Vertrauen. Gleichwertige Knöpfe vermeiden Dark Patterns und senken das Abmahnrisiko.",
  "wann_einsetzen": "Auf jeder Website mit nicht notwendigen Cookies, Trackern oder eingebetteten Drittinhalten. Besonders lohnend bei Templates, weil es einmal sauber gebaut überall passt, und bei Studio-Websites, deren Detailtreue bewertet wird.",
  "wann_nicht": "Wenn keine einwilligungspflichtigen Dienste laufen, etwa bei cookieloser Statistik ohne Einwilligungspflicht (rechtlich prüfen). Dann braucht es kein Banner. Nie als Vollbild-Sperre (Cookie-Wall) ohne gleichwertige Alternative.",
  "varianten": [
   "Helle Karte mit drei gleichrangigen Knöpfen Einstellungen / Ablehnen / Akzeptieren und Einstellungsdialog (Manual)",
   "Dunkle Karte unten links mit zwei gleichen Knöpfen, mobil volle Breite (Dogstudio)",
   "Glas-Box mit Kategorie-Schaltern direkt auf der ersten Ebene (Bureau Borsche; dort fehlt ein ausdrückliches Ablehnen, in der Demo ergänzt)",
   "Texte und Kategorien im CMS gepflegt (Edenspiekermann)",
   "Standard-CMP wie Cookiebot per CSS an das Designsystem angepasst (Diesdas)",
   "Zwei-Klick-Platzhalter für Video oder Karte im Layout"
  ],
  "umsetzung": "Das Banner ist eine <section aria-label=\"Cookie-Hinweis\">, nicht modal. Es steht früh im DOM, damit die Tastatur es schnell erreicht, und ist unten fixiert. Es blendet erst nach dem ersten Paint ein (opacity und translate, 300 ms, cubic-bezier(0.25, 0.46, 0.45, 0.94)), damit es den LCP nicht verschiebt. Ablehnen und Akzeptieren haben gleiche Größe, Farbe und Gewicht. „Einstellungen“ öffnet einen <dialog> mit showModal(). Die Kategorien sind echte Checkboxen mit role=\"switch\"; nur „Notwendig“ ist gesetzt und deaktiviert. Gespeichert werden Entscheidung, Version und Zeitstempel in einem notwendigen Cookie oder in localStorage. Skripte stehen als <script type=\"text/plain\" data-kategorie=\"statistik\"> im HTML und werden nach Zustimmung als echtes Skript neu eingesetzt. Der Footer-Link „Cookie-Einstellungen“ öffnet den Dialog erneut. Als Open-Source-Basis eignet sich orestbida/cookieconsent, das sich komplett über CSS-Variablen gestalten lässt. Rechtlicher Rahmen (vor dem Livegang prüfen, keine Rechtsberatung): § 25 TDDDG (vormals TTDSG), Art. 6 und 7 DSGVO, EuGH Planet49 (keine vorausgewählten Häkchen) und die DSK-Orientierungshilfe Telemedien (Ablehnen auf der ersten Ebene gleichwertig). Stand Digital Omnibus (Heuking, 23.10.2026; vom Kunden prüfen lassen): Bis zum Inkrafttreten gilt § 25 TDDDG unverändert. Einwilligung braucht also alles, was für den gewünschten Dienst nicht unbedingt erforderlich ist. Der Rat hat am 21.10.2026 seine Position festgelegt, die des Parlaments steht noch aus; in Kraft frühestens 2027. Geplant sind Ausnahmen für aggregierte Reichweitenmessung (auch durch beauftragte Dienstleister, wenn die Daten aggregiert und anonymisiert sind) und für kontextbezogene Werbung, dazu eine Sperrfrist nach Ablehnung, in der nicht erneut gefragt werden darf (Kommission sechs, Ratstext vier Monate). Die Pflicht, Browsersignale zu beachten, hat der Rat gestrichen. Deshalb die Kategorien konfigurierbar bauen: Dienste mit Zweck in einer Liste pflegen (notwendig, Sicherheit, Reichweitenmessung, Werbung, externe Medien), Ablehnen mit einem Klick auf der ersten Ebene, Entscheidung mit Zeitstempel, Zweck und Version speichern und die Wartezeit bis zur nächsten Abfrage als Einstellung vorsehen. So lässt sich eine Kategorie später ohne Umbau aus der Einwilligung nehmen.",
  "mobil": "Bottom-Sheet in voller Breite, höchstens etwa 40 bis 45 % der Höhe. Die Knöpfe sind gleich breit und mit dem Daumen erreichbar. Inhalte dürfen nicht unbedienbar verdeckt werden; ein Abstand in Höhe des Banners am Seitenende hilft.",
  "reduzierte_bewegung": "Banner und Dialog erscheinen sofort, ohne Gleiten und Blenden.",
  "barrierefreiheit": "Das Banner ist per Tastatur früh erreichbar, entweder durch seine Stellung im DOM oder per Skip-Link. Die Einstellungen sind ein echter <dialog> mit Fokusfalle und Escape. Jeder Schalter hat ein Label. Der Kontrast liegt bei mindestens 4,5 : 1, und die Knöpfe unterscheiden sich nicht nur durch Farbe. Das Banner darf Fokus-Elemente der Seite nicht dauerhaft verdecken (WCAG 2.4.11), etwa durch scroll-padding-bottom in Höhe des Banners."
 },
 "messwerte": {
  "easing": "cubic-bezier(.25,.46,.45,.94) (Dogstudio) bzw. ease-out",
  "dauer_ms": "Einblenden 300 (Dogstudio)",
  "stagger_ms": "",
  "distanz": "Desktop-Karte 50 px vom Rand, max-width 360 px, padding 40 px, Radius 20 px (Dogstudio); Dialog max-width 32rem, Backdrop blur 4px (Manual)",
  "sonstiges": "Gleichrangige Buttons: Manual (Customize/Reject/Accept), Dogstudio (Accept/Deny); Mobil: volle Breite am unteren Rand",
  "herkunft": "beobachtet",
  "quelle": "https://dogstudio.co/app/themes/portfolio-2018/static/css/main.css; https://www.manualcreative.com/ (HTML + BaseLayout-CSS)"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.46,
   0.45,
   0.94
  ],
  "css": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
  "name": "eigene Kurve",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "Manual Creative",
   "url": "https://www.manualcreative.com/",
   "auszeichnung": "",
   "beobachtung": "Eigenes Banner (data-consent, consent-banner-card) mit drei gleich gestalteten Buttons Customize / Reject / Accept; Einstellungsdialog role=dialog aria-modal=true mit Kategorien Necessary (checked disabled) und Measurement (Toggle), Backdrop backdrop-filter blur(4px) auf #1c1c1c66, Karte max-width 32rem; Google-Analytics-ID nur als data-ga-id hinterlegt, Laden nach Zustimmung (HTML + _astro/BaseLayout.sy7ZRPxL.css).",
   "art": "website"
  },
  {
   "seite": "Dogstudio",
   "url": "https://www.dogstudio.co/",
   "auszeichnung": "",
   "beobachtung": ".site-cookie: fixed, bottom/left 50px, padding 40px, Hintergrund #0e101a, border-radius 20px, max-width 360px; Einblenden über opacity/visibility .3s cubic-bezier(.25,.46,.45,.94); mobil unten volle Breite ohne Radius; zwei gleichrangige Buttons Accept / Deny (HTML + static/css/main.css).",
   "art": "website"
  },
  {
   "seite": "Bureau Borsche",
   "url": "https://www.bureauborsche.com/",
   "auszeichnung": "",
   "beobachtung": "Box mit Blur (class cookie box blur) im Seitenraster: Überschrift COOKIE SETTINGS, Checkbox Necessary (checked disabled), Performance (nicht vorausgewählt), Buttons Accept Selection / Accept All gleich groß (je w-6-12); eigenes cookies.js. Kein expliziter ‚Ablehnen‘-Button – ‚Accept Selection‘ ohne Häkchen wirkt als Ablehnung.",
   "art": "website"
  },
  {
   "seite": "Edenspiekermann",
   "url": "https://www.edenspiekermann.com/",
   "auszeichnung": "",
   "beobachtung": "Eigene React-Komponente (CookieConsentProvider, DeferredCookieConsentForm) mit Texten und Kategorien Necessary / Analytics / Marketing / Contents aus dem CMS (CookieConsentFormRecord im HTML-Payload); Änderung über Footer-Link.",
   "art": "website"
  },
  {
   "seite": "Diesdas Digital",
   "url": "https://www.diesdas.digital/",
   "auszeichnung": "",
   "beobachtung": "Cookiebot als CMP, aber Widget per CSS ans eigene System angepasst (#CookiebotWidget mit bottom: var(--gutter), box-shadow: var(--drop-shadow), Größen aus Spacing-Tokens; ab 48em links an --nav-gutter ausgerichtet) (_next/static/css/de290f49ff9f21a5.css).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "orestbida/cookieconsent (Open-Source-Consent-Banner, per CSS stylbar)",
   "url": "https://github.com/orestbida/cookieconsent"
  }
 ],
 "kombinierbar_mit": [
  "mega-footer-sitemap",
  "einblenden-starting-style",
  "mobile-bottom-navigation",
  "toggle-switch",
  "studio-visitenkarte-footer"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/",
  "meta": "https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-b.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Das Consent-Banner spricht die Sprache der Marke: Ablehnen und Akzeptieren stehen gleichwertig nebeneinander, Dienste laden erst nach der Zustimmung.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 0.46, 0.45, 0.94) (gemessen bei Dogstudio)",
   "dauer_ms": "Banner ein/aus 300 · Dialog ein 300, aus 200 · Schalter und Hover 150",
   "verzoegerung_ms": "500 nach dem ersten Paint (zwei requestAnimationFrame + setTimeout)",
   "weg": "Desktop translateY 12 px → 0 mit opacity 0 → 1 (eigener Wert) · Telefon translateY 100 % → 0 (Bottom-Sheet)",
   "karte_hell": "fixed, 50 px vom Rand unten links, max. 440 px breit, 28 px innen, Radius 20 px, drei gleiche Knöpfe Einstellungen / Ablehnen / Akzeptieren",
   "karte_dunkel": "fixed, 50 px vom Rand unten links, max. 360 px, 40 px innen, Radius 20 px, Grund #0e101a, zwei gleiche Knöpfe (Messwerte Dogstudio)",
   "glas": "unten mittig, 50 px vom Rand, max. 640 px, 28 px innen, Radius 20 px, rgba(250,248,243,.6) + backdrop-filter blur(20px) saturate(1.5), vier Kategorie-Schalter auf Ebene 1",
   "dialog": "<dialog> mit showModal(), max-width 32rem, Radius 20 px, ::backdrop rgba(28,28,28,.4) + blur(4px) (Messwerte Manual)",
   "knoepfe": "min-height 44 px (Touch 48 px), Pille, 1,5 px Rahmen, alle gleich groß und gleich gestaltet",
   "schalter": "42 × 24 px (Touch 48 × 28), Checkbox mit role=switch, Standard aus, Notwendig checked disabled",
   "telefon": "ab ≤ 760 px Bottom-Sheet volle Breite, Radius 20 20 0 0, max. 46svh, Ablehnen/Akzeptieren nebeneinander in Daumenhöhe",
   "speicherung": "localStorage feldmark.einwilligung = { version: 3, zeit (ISO), kategorien }",
   "skripte": "<script type=\"text/plain\" data-kategorie=\"…\"> werden nach Zustimmung als echtes Skript neu eingesetzt",
   "abstand_fokus": "--banner-h per ResizeObserver → scroll-padding-bottom und padding-bottom am body (WCAG 2.4.11)"
  },
  "ausloeser": "laden",
  "touch": "Banner als Bottom-Sheet in voller Breite (max. 46 % der Höhe), Ablehnen und Akzeptieren gleich breit nebeneinander unten, Einstellungen bzw. Auswahl speichern darüber. Größere Knöpfe (48 px) und Schalter. Der Dialog füllt die Breite bis auf 16 px.",
  "reduziert": "Banner, Dialog und Rückmeldung erscheinen sofort ohne Gleiten und Blenden, Schalter springen um. Das freigegebene Video erscheint ohne Unschärfe-Übergang.",
  "korrekturen": {
   "beschreibung": "Das Consent-Banner ist Teil des Designsystems statt ein fremdes CMP-Overlay. Auf dem Desktop ist es eine kompakte Karte unten links oder rechts, auf dem Telefon ein Bottom-Sheet. Es nutzt Hausschrift, Markenfarben und Radius und blendet sanft ein. Die erste Ebene bietet gleichwertige Aktionen: Ablehnen und Akzeptieren sind gleich groß und gleich gut erreichbar, dazu kommen die Einstellungen. Die zweite Ebene ist ein Dialog mit Kategorien als Schalter: Notwendig ist fest an, Statistik, Marketing und externe Medien sind standardmäßig aus. Skripte wie Analytics oder Einbettungen laden erst nach der Zustimmung. Die Wahl lässt sich jederzeit über den Footer-Link „Cookie-Einstellungen“ ändern. Externe Medien wie Videos oder Karten stehen als Zwei-Klick-Platzhalter im Layout.",
   "warum_es_wirkt": "Das Banner ist oft das Erste, was Besucher sehen. Ist es gestaltet und ehrlich, wirkt es wie ein Teil der Marke statt wie ein Fremdkörper und schafft Vertrauen. Gleichwertige Knöpfe vermeiden Dark Patterns und senken das Abmahnrisiko.",
   "wann_einsetzen": "Auf jeder Website mit nicht notwendigen Cookies, Trackern oder eingebetteten Drittinhalten. Besonders lohnend bei Templates, weil es einmal sauber gebaut überall passt, und bei Studio-Websites, deren Detailtreue bewertet wird.",
   "wann_nicht": "Wenn keine einwilligungspflichtigen Dienste laufen, etwa bei cookieloser Statistik ohne Einwilligungspflicht (rechtlich prüfen). Dann braucht es kein Banner. Nie als Vollbild-Sperre (Cookie-Wall) ohne gleichwertige Alternative.",
   "varianten": [
    "Helle Karte mit drei gleichrangigen Knöpfen Einstellungen / Ablehnen / Akzeptieren und Einstellungsdialog (Manual)",
    "Dunkle Karte unten links mit zwei gleichen Knöpfen, mobil volle Breite (Dogstudio)",
    "Glas-Box mit Kategorie-Schaltern direkt auf der ersten Ebene (Bureau Borsche; dort fehlt ein ausdrückliches Ablehnen, in der Demo ergänzt)",
    "Texte und Kategorien im CMS gepflegt (Edenspiekermann)",
    "Standard-CMP wie Cookiebot per CSS an das Designsystem angepasst (Diesdas)",
    "Zwei-Klick-Platzhalter für Video oder Karte im Layout"
   ],
   "umsetzung": "Das Banner ist eine <section aria-label=\"Cookie-Hinweis\">, nicht modal. Es steht früh im DOM, damit die Tastatur es schnell erreicht, und ist unten fixiert. Es blendet erst nach dem ersten Paint ein (opacity und translate, 300 ms, cubic-bezier(0.25, 0.46, 0.45, 0.94)), damit es den LCP nicht verschiebt. Ablehnen und Akzeptieren haben gleiche Größe, Farbe und Gewicht. „Einstellungen“ öffnet einen <dialog> mit showModal(). Die Kategorien sind echte Checkboxen mit role=\"switch\"; nur „Notwendig“ ist gesetzt und deaktiviert. Gespeichert werden Entscheidung, Version und Zeitstempel in einem notwendigen Cookie oder in localStorage. Skripte stehen als <script type=\"text/plain\" data-kategorie=\"statistik\"> im HTML und werden nach Zustimmung als echtes Skript neu eingesetzt. Der Footer-Link „Cookie-Einstellungen“ öffnet den Dialog erneut. Als Open-Source-Basis eignet sich orestbida/cookieconsent, das sich komplett über CSS-Variablen gestalten lässt. Rechtlicher Rahmen (vor dem Livegang prüfen, keine Rechtsberatung): § 25 TDDDG (vormals TTDSG), Art. 6 und 7 DSGVO, EuGH Planet49 (keine vorausgewählten Häkchen) und die DSK-Orientierungshilfe Telemedien (Ablehnen auf der ersten Ebene gleichwertig). Stand Digital Omnibus (Heuking, 23.10.2026; vom Kunden prüfen lassen): Bis zum Inkrafttreten gilt § 25 TDDDG unverändert. Einwilligung braucht also alles, was für den gewünschten Dienst nicht unbedingt erforderlich ist. Der Rat hat am 21.10.2026 seine Position festgelegt, die des Parlaments steht noch aus; in Kraft frühestens 2027. Geplant sind Ausnahmen für aggregierte Reichweitenmessung (auch durch beauftragte Dienstleister, wenn die Daten aggregiert und anonymisiert sind) und für kontextbezogene Werbung, dazu eine Sperrfrist nach Ablehnung, in der nicht erneut gefragt werden darf (Kommission sechs, Ratstext vier Monate). Die Pflicht, Browsersignale zu beachten, hat der Rat gestrichen. Deshalb die Kategorien konfigurierbar bauen: Dienste mit Zweck in einer Liste pflegen (notwendig, Sicherheit, Reichweitenmessung, Werbung, externe Medien), Ablehnen mit einem Klick auf der ersten Ebene, Entscheidung mit Zeitstempel, Zweck und Version speichern und die Wartezeit bis zur nächsten Abfrage als Einstellung vorsehen. So lässt sich eine Kategorie später ohne Umbau aus der Einwilligung nehmen.",
   "mobil": "Bottom-Sheet in voller Breite, höchstens etwa 40 bis 45 % der Höhe. Die Knöpfe sind gleich breit und mit dem Daumen erreichbar. Inhalte dürfen nicht unbedienbar verdeckt werden; ein Abstand in Höhe des Banners am Seitenende hilft.",
   "reduzierte_bewegung": "Banner und Dialog erscheinen sofort, ohne Gleiten und Blenden.",
   "barrierefreiheit": "Das Banner ist per Tastatur früh erreichbar, entweder durch seine Stellung im DOM oder per Skip-Link. Die Einstellungen sind ein echter <dialog> mit Fokusfalle und Escape. Jeder Schalter hat ein Label. Der Kontrast liegt bei mindestens 4,5 : 1, und die Knöpfe unterscheiden sich nicht nur durch Farbe. Das Banner darf Fokus-Elemente der Seite nicht dauerhaft verdecken (WCAG 2.4.11), etwa durch scroll-padding-bottom in Höhe des Banners."
  },
  "geprueft": "31.10.2026",
  "notiz": "Beispielseite des erfundenen Studio Feldmark (Kassel) mit drei Banner-Varianten (Karte, Dunkel, Glas), Einstellungsdialog, Zwei-Klick-Video und Footer-Link. Die Werte-Zeile zeigt live den gespeicherten Einwilligungsstand und welche text/plain-Skripte wirklich gelaufen sind. Das Video ist nur simuliert (Standbild statt Player). Die Demo zeigt das Banner bei jedem Laden; eine echte Seite liest zuerst die gespeicherte Entscheidung und zeigt es nur, wenn keine (oder eine ältere Version) vorliegt. Die Vorführung wechselt die Varianten: Karte mit Dialog und Auswahl, Dunkel mit Ablehnen und Zwei-Klick-Video, Glas mit Schaltern auf Ebene 1. Bilder 01.11.2026: eigene Bilder statt Portfolio. Korrektur 02.11.2026: umsetzung um den Stand Digital Omnibus ergänzt (§ 25 TDDDG gilt bis zum Inkrafttreten, Rat-Position 21.10.2026, frühestens 2027, Kategorien konfigurierbar); Quelle Heuking 23.10.2026 per Abruf geprüft."
 }
}