Add GoogleMapsEmbed.tsx — consent-gated Maps embed, prepared but unused

Uses Klaro's own built-in contextual-consent mechanism (not
loadTrackingCode.ts's script-injection path) — the iframe renders
with data-name="google-maps" and its real src; Klaro's DOM scan finds
it after mount and blanks/restores src based on that service's
consent state, showing its own placeholder (styled via
KlaroConsentManager.tsx's KlaroTheme) in the meantime.

No map embedded anywhere in the app yet — this is prep work only, per
explicit request ahead of an actual page needing one.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/components/GoogleMapsEmbed.tsx

@@ -0,0 +1,44 @@
+// Server Component — no "use client" needed. The consent gating itself
+// happens entirely client-side inside Klaro (KlaroConsentManager.tsx),
+// not via any React state here: Klaro's own contextual-consent DOM scan
+// (renderContextualConsentNotices, runs as part of Klaro.render()) finds
+// this iframe by its `data-name="google-maps"` attribute after mount,
+// blanks its `src` and inserts its own "Karte laden?" placeholder in
+// front of it until that service's consent is granted, then restores the
+// real `src`. See klaroConfig.ts's own comment on the "google-maps"
+// service this depends on — a `tracking-codes` row with that provider
+// must exist and be `active`, or Klaro never gates (and never un-blanks)
+// this iframe at all.
+//
+// `width`/`height` are real HTML attributes, not just the Tailwind aspect-
+// ratio wrapper below — Klaro reads `element.width`/`element.height` (the
+// DOM attributes) to size its own placeholder box before the real iframe
+// has rendered, so both need to be present even though the wrapper's
+// `aspect-[...]` class is what actually controls layout.
+export function GoogleMapsEmbed({
+  src,
+  title,
+  className,
+}: {
+  /** A full Google Maps embed URL (Google Maps → Teilen → Karte einbetten
+   * → "HTML kopieren" → the `src` attribute of that iframe), e.g.
+   * "https://www.google.com/maps/embed?pb=...". */
+  src: string;
+  title: string;
+  className?: string;
+}) {
+  return (
+    <div className={`relative w-full aspect-[16/9] overflow-hidden rounded-md border border-border ${className ?? ""}`}>
+      <iframe
+        data-name="google-maps"
+        src={src}
+        title={title}
+        width={800}
+        height={450}
+        loading="lazy"
+        referrerPolicy="no-referrer-when-downgrade"
+        className="absolute inset-0 h-full w-full border-0"
+      />
+    </div>
+  );
+}

app/components/KlaroConsentManager.tsx

@@ -73,6 +73,30 @@ function KlaroTheme() {
       .klaro .cm-btn:hover { opacity: 0.88; }
       .klaro .cm-btn:active { transform: scale(0.97); }
       .klaro .cm-btn:focus-visible { outline: 2px solid #f6a701 !important; outline-offset: 2px; }
+      /* The "Karte laden?" placeholder ContextualConsentNotice renders in
+         place of a gated embed (GoogleMapsEmbed.tsx) — fills that embed's
+         own aspect-ratio box, so this needs to look like a real card
+         slot, not a bare unstyled div floating inside it. */
+      .klaro.cm-as-context-notice {
+        height: 100% !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+      }
+      .klaro .context-notice {
+        width: 100% !important;
+        height: 100% !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        gap: 4px !important;
+        padding: 24px !important;
+        background: #fffdf8 !important;
+        text-align: center !important;
+      }
+      .klaro .context-notice p { text-align: center !important; max-width: 32ch; }
+      .klaro .context-notice .cm-buttons { display: flex !important; gap: 10px !important; margin-top: 6px !important; }
       .klaro a.cm-link, .klaro .cookie-notice a, .klaro .cookie-modal a {
         color: #a06b00 !important;
         text-decoration: underline !important;