From 586f4cc2b7f5f7d8f4ac73771328c617ca87bbd5 Mon Sep 17 00:00:00 2001
From: Matthias <matthias@example.com>
Date: Wed, 24 Jun 2026 17:11:46 +0200
Subject: [PATCH] Add cookie notice component and associated styles for user
 consent management

---
 src/components/CookieNotice.astro |  56 ++++++++++++++++
 src/layouts/BaseLayout.astro      |   8 +++
 src/styles/site.css               | 103 ++++++++++++++++++++++++++++++
 3 files changed, 167 insertions(+)
 create mode 100644 src/components/CookieNotice.astro
diff --git a/src/components/CookieNotice.astro b/src/components/CookieNotice.astro
new file mode 100644
index 0000000..1fab7ed
--- /dev/null
+++ b/src/components/CookieNotice.astro
@@ -0,0 +1,56 @@
+---
+import { legal } from "../data/legal";
+
+const storageKey = "mm-cookie-notice-dismissed";
+---
+
+<div
+  class="v2-notice"
+  id="cookie-notice"
+  role="dialog"
+  aria-labelledby="cookie-notice-title"
+  aria-describedby="cookie-notice-desc"
+  aria-modal="false"
+  hidden
+>
+  <div class="v2-notice__inner">
+    <p class="v2-notice__kicker" id="cookie-notice-title">
+      <span class="v2-notice__prompt" aria-hidden="true">// </span>
+      Hinweis zur Datenerfassung
+    </p>
+    <p class="v2-notice__text" id="cookie-notice-desc">
+      Diese Website setzt <strong>keine Cookies</strong>. Zur Reichweitenmessung
+      erfassen wir ausschließlich anonymisierte Nutzungsstatistiken mit{" "}
+      {legal.analytics.name} — ohne personenbezogene Profile und ohne
+      Tracking über andere Websites.
+      <a href="/datenschutz">Mehr in der Datenschutzerklärung</a>
+    </p>
+    <button class="v2-notice__btn" type="button" id="cookie-notice-dismiss">
+      <span class="v2-notice__prompt" aria-hidden="true">&gt; </span>
+      Verstanden
+    </button>
+  </div>
+</div>
+
+<script define:vars={{ storageKey }}>
+  const notice = document.getElementById("cookie-notice");
+  const dismissButton = document.getElementById("cookie-notice-dismiss");
+
+  if (!notice || !dismissButton) return;
+
+  function hideNotice() {
+    notice.hidden = true;
+    document.documentElement.classList.add("cookie-notice-seen");
+  }
+
+  if (!localStorage.getItem(storageKey)) {
+    notice.hidden = false;
+  } else {
+    hideNotice();
+  }
+
+  dismissButton.addEventListener("click", () => {
+    localStorage.setItem(storageKey, "1");
+    hideNotice();
+  });
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 4ecb693..20f2813 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,4 +1,6 @@
 ---
+import CookieNotice from "../components/CookieNotice.astro";
+
 interface Props {
   title: string;
   description?: string;
@@ -21,6 +23,11 @@ const {
     <meta name="description" content={description} />
     <title>{title}</title>
     <slot name="head" />
+    <script is:inline>
+      if (localStorage.getItem("mm-cookie-notice-dismissed")) {
+        document.documentElement.classList.add("cookie-notice-seen");
+      }
+    </script>
     <script
       src="https://rybbit.matthias.lol/api/script.js"
       data-site-id="63eb61dcdf55"
@@ -28,6 +35,7 @@ const {
   </head>
   <body>
     <slot />
+    <CookieNotice />
   </body>
 </html>
 
diff --git a/src/styles/site.css b/src/styles/site.css
index 766fad4..63c5457 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -495,3 +495,106 @@
 .v2__footer a:hover {
   color: var(--v2-term);
 }
+
+/* Cookie / analytics notice */
+
+html.cookie-notice-seen .v2-notice {
+  display: none;
+}
+
+.v2-notice {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: 100;
+  padding: clamp(0.75rem, 2vw, 1rem);
+  pointer-events: none;
+}
+
+.v2-notice__inner {
+  pointer-events: auto;
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 1rem 1.25rem;
+  display: grid;
+  gap: 0.75rem;
+  background: oklch(0.975 0.014 145 / 0.96);
+  color: var(--v2-ink);
+  border: 1px solid var(--v2-rule);
+  box-shadow: 0 12px 40px oklch(0.26 0.04 155 / 0.12);
+  backdrop-filter: blur(8px);
+  font-family: var(--v2-body, "IBM Plex Sans", system-ui, sans-serif);
+}
+
+@media (min-width: 640px) {
+  .v2-notice__inner {
+    grid-template-columns: 1fr auto;
+    align-items: end;
+    column-gap: 1.25rem;
+  }
+
+  .v2-notice__btn {
+    grid-column: 2;
+    grid-row: 1 / -1;
+    align-self: end;
+  }
+}
+
+.v2-notice__kicker {
+  margin: 0;
+  grid-column: 1 / -1;
+  font-family: var(--v2-mono, "IBM Plex Mono", ui-monospace, monospace);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--v2-term, oklch(0.4 0.1 155));
+}
+
+.v2-notice__prompt {
+  color: var(--v2-term, oklch(0.4 0.1 155));
+}
+
+.v2-notice__text {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: var(--v2-muted, oklch(0.48 0.04 155));
+  text-wrap: pretty;
+}
+
+.v2-notice__text strong {
+  color: var(--v2-ink, oklch(0.26 0.04 155));
+  font-weight: 600;
+}
+
+.v2-notice__text a {
+  color: var(--v2-ink, oklch(0.26 0.04 155));
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.v2-notice__btn {
+  justify-self: start;
+  padding: 0.55rem 1rem;
+  font-family: var(--v2-mono, "IBM Plex Mono", ui-monospace, monospace);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--v2-ink, oklch(0.26 0.04 155));
+  background: transparent;
+  border: none;
+  box-shadow: inset 0 0 0 2px var(--v2-ink, oklch(0.26 0.04 155));
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.v2-notice__btn:hover {
+  color: var(--v2-bg, oklch(0.975 0.014 145));
+  background: var(--v2-term, oklch(0.4 0.1 155));
+  box-shadow: inset 0 0 0 2px var(--v2-term, oklch(0.4 0.1 155));
+}
+
+.v2-notice__btn:focus-visible {
+  outline: 2px solid var(--v2-term, oklch(0.4 0.1 155));
+  outline-offset: 3px;
+}
