/* Farbwelt der KunstWerkstatt für das Cookie-Werkzeug.
   Die Variablen hängen am #cc-root des Werkzeugs — auf :root gesetzt würden
   sie von dessen eigenen Werten überschrieben. */
#cc-root {
  --cc-bg:           #FBF8F4;
  --cc-fg:           #2A2622;
  --cc-muted:        #6B625A;
  --cc-border:       #E5DCD0;
  --cc-primary:      #A94E2C;
  --cc-primary-fg:   #ffffff;
  --cc-secondary-bg: #F4EEE5;
  --cc-secondary-fg: #2A2622;
  --cc-radius:       3px;
  --cc-shadow:       0 12px 38px rgba(42, 38, 34, .20);
  --cc-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
/* Überschriften in der Serifenschrift der Seite */
#cc-root h2, #cc-root h3 {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -.01em;
}
#cc-root .cc-btn { border-radius: 2px; letter-spacing: .015em; }
#cc-root .cc-btn-primary:hover { background: #8E3F22; }
/* Hinweiskasten der geblockten Karte sitzt bündig im Kartenrahmen */
.karte-feld .cc-iframe-placeholder {
  border: 0; border-radius: 0; background: var(--papier-warm);
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
}

/* ---------- Mittiges Aufploppen, ruhigere Optik (03.08.) ----------
   Das Fenster erscheint in der Bildmitte über einem weichen Schleier —
   damit wirkt die Einwilligung wie eine Frage, nicht wie ein Klebezettel. */
#cc-root[data-cc-position="center"] .cc-banner {
  max-width: 460px;
  padding: 30px 32px 26px;
  border: 1px solid rgba(229, 220, 208, .9);
  box-shadow: 0 30px 80px rgba(42, 38, 34, .26), 0 2px 8px rgba(42, 38, 34, .08);
}
/* Weicher Schleier hinter dem Fenster. Bewusst am Wurzelelement statt am
   Banner: Ein ::before des Banners liegt über dessen eigenem Hintergrund und
   würde die Fläche eingrauen. */
/* WICHTIG (04.08., Fehlerbehebung): `:has(.cc-banner)` allein hat den Schleier
   dauerhaft stehen lassen. Das Banner wird nach der Entscheidung nicht aus dem
   Dokument entfernt, sondern nur auf `hidden` gesetzt — der Wähler passte
   danach weiter, und die ganze Seite blieb für immer weichgezeichnet und
   abgedunkelt. Deshalb ausdrücklich auf das SICHTBARE Banner prüfen. */
#cc-root[data-cc-position="center"]:has(.cc-banner:not([hidden]))::before {
  content: ''; position: fixed; inset: 0;
  background: rgba(24, 20, 17, .36);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  pointer-events: none;
  animation: cc-schleier .4s ease both;
}
@keyframes cc-schleier { from { opacity: 0; } to { opacity: 1; } }

#cc-root .cc-banner h2 {
  font-size: 1.45rem; line-height: 1.2; margin: 0 0 10px;
}
#cc-root .cc-banner p {
  font-size: .95rem; line-height: 1.6; color: var(--cc-muted); margin: 0 0 22px;
}
/* Ihr Stempel als leiser Absender über der Überschrift */
#cc-root[data-cc-position="center"] .cc-banner-inner::before {
  content: ''; display: block;
  width: 66px; height: 43px; margin: 0 0 16px;
  background: url("../img/signet-sf.png") no-repeat left center / contain;
  opacity: .38;
}
/* Knöpfe: klare Rangfolge, volle Breite auf schmalen Schirmen */
#cc-root .cc-banner .cc-actions { gap: 10px; margin-top: 6px; }
#cc-root .cc-btn {
  padding: 12px 20px; font-size: .93rem; font-weight: 500;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#cc-root .cc-btn-primary { box-shadow: 0 4px 14px rgba(169, 78, 44, .28); }
#cc-root .cc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(169, 78, 44, .34); }
#cc-root .cc-btn-secondary:hover { background: #EDE4D6; }
@media (max-width: 560px) {
  #cc-root[data-cc-position="center"] .cc-banner { padding: 24px 22px 20px; }
  /* „Einverstanden" gehört nach oben — im Markup steht es zuletzt. */
  #cc-root .cc-banner .cc-actions { flex-direction: column-reverse; }
  #cc-root .cc-banner .cc-actions .cc-btn { width: 100%; }
}

/* Das Werkzeug hebt auf schmalen Schirmen die waagerechte Zentrierung auf
   (left/right 8px, transform: none) — für die mittige Variante brauchen wir
   sie aber. Gleiche Variablen wie das Original, damit die Aufplopp-Animation
   weiterläuft. */
#cc-root[data-cc-position="center"] .cc-banner {
  left: 50%; top: 50%; right: auto; bottom: auto;
  --cc-base-x: -50%;
  --cc-base-y: -50%;
  transform: translate(var(--cc-base-x), var(--cc-base-y));
  width: min(460px, calc(100vw - 32px));
  max-width: none;
}
@media (max-width: 480px) {
  #cc-root[data-cc-position="center"] .cc-banner {
    left: 50%; top: 50%; right: auto; bottom: auto;
    --cc-base-x: -50%;
    --cc-base-y: -50%;
    transform: translate(var(--cc-base-x), var(--cc-base-y));
    width: calc(100vw - 28px);
    padding: 24px 22px 20px;
  }
}