/* =====================================================================
   Zanadu · Cookie-Banner (CookieConsent v3) im Zanadu-Design
   Banner und Texte aus @idconc/einwilligung (dienste.yaml); geladen nach <Kopf /> (Grundlayout). Seit 28.10.: dunkle Keks-Karte mit Gelb wie Hochzeit Modul 3.
   Farben und Schriften wie zanadu.css; Ablehnen und Akzeptieren gleich gewichtet (equalWeightButtons).
   ===================================================================== */
#cc-main {
  --cc-font-family: 'Source Sans 3', sans-serif;
  --cc-modal-border-radius: 0;
  --cc-btn-border-radius: 999px;
  --cc-modal-margin: 16px;
  --cc-z-index: 2000;
  --cc-bg: #fff;
  --cc-primary-color: #1d1d1d;
  --cc-secondary-color: #3a3a3a;
  --cc-link-color: #1d1d1d;
  --cc-btn-primary-bg: #1d1d1d;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: #1d1d1d;
  --cc-btn-primary-hover-bg: #F23847;
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: #F23847;
  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: #1d1d1d;
  --cc-btn-secondary-border-color: #1d1d1d;
  --cc-btn-secondary-hover-bg: #1d1d1d;
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: #1d1d1d;
  --cc-separator-border-color: #e3e3e3;
  --cc-toggle-on-bg: #049DD9;
  --cc-toggle-off-bg: #8a8a8a;
  --cc-toggle-readonly-bg: #c9e7f4;
  --cc-toggle-readonly-knob-icon-color: #0A6FB2;
  --cc-cookie-category-block-bg: #f4f4f4;
  --cc-cookie-category-block-border: #f4f4f4;
  --cc-cookie-category-block-hover-bg: #eaeaea;
  --cc-cookie-category-block-hover-border: #eaeaea;
  --cc-cookie-category-expanded-block-bg: #f4f4f4;
  --cc-cookie-category-expanded-block-hover-bg: #eaeaea;
  --cc-overlay-bg: rgba(29, 29, 29, .6);
  --cc-footer-bg: #f4f4f4;
  --cc-footer-color: #1d1d1d;
  --cc-footer-border-color: #e3e3e3;
}
/* Einstellungen-Fenster: hell, gelbe Kante oben */
#cc-main .pm { border-top: 6px solid #F2CB05; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
#cc-main .cm__title, #cc-main .pm__title {
  font: 800 1.35rem/1.18 Geologica, sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: #1d1d1d;
}
#cc-main .pm__section-title { font: 800 1.02rem/1.25 Geologica, sans-serif; text-transform: uppercase; }
#cc-main .cm__desc, #cc-main .pm__section-desc { font-size: 1.02rem; line-height: 1.45; }
#cc-main .cm__btn, #cc-main .pm__btn {
  min-height: 48px; font: 800 .92rem/1 Geologica, sans-serif; text-transform: uppercase; letter-spacing: .02em;
}
#cc-main .pm__badge { background: #1d1d1d; color: #fff; font: 700 .72rem/1 'Source Sans 3', sans-serif; text-transform: uppercase; }
#cc-main a { text-decoration: underline; text-underline-offset: 3px; }
#cc-main :focus-visible { outline: 3px solid #049DD9; outline-offset: 3px; }

/* Banner: dunkle Karte, Keks oben rechts, Titel gelb */
#cc-main .cm {
  --cc-bg: #1d1d1d; --cc-primary-color: #fff; --cc-secondary-color: rgba(255, 255, 255, .82); --cc-link-color: #F2CB05;
  --cc-btn-primary-bg: #F2CB05; --cc-btn-primary-color: #1d1d1d; --cc-btn-primary-border-color: #F2CB05;
  --cc-btn-primary-hover-bg: #fff; --cc-btn-primary-hover-color: #1d1d1d; --cc-btn-primary-hover-border-color: #fff;
  --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: #fff; --cc-btn-secondary-border-color: rgba(255, 255, 255, .55);
  --cc-btn-secondary-hover-bg: #fff; --cc-btn-secondary-hover-color: #1d1d1d; --cc-btn-secondary-hover-border-color: #fff;
  --cc-separator-border-color: rgba(255, 255, 255, .14);
  --cc-footer-bg: #151515; --cc-footer-color: rgba(255, 255, 255, .75); --cc-footer-border-color: rgba(255, 255, 255, .14);
  border-radius: 18px; overflow: visible; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
#cc-main .cm__body { position: relative; }
#cc-main .cm__texts { padding-top: 1.6em; }
#cc-main .cm__title { color: #F2CB05; font-size: 1.6rem; padding-right: 64px; }
/* Keks mit Biss, schräg, wippt einmal beim Erscheinen */
#cc-main .cm__body::before {
  content: ""; position: absolute; top: -26px; right: 18px; width: 76px; height: 76px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23D9963B' d='M32 3a29 29 0 1 0 29 30 7 7 0 0 1-8-7 7 7 0 0 1-7-8 7 7 0 0 1-7-8 7 7 0 0 1-7-7z'/%3E%3Cpath fill='%23B8762A' d='M32 7a25 25 0 1 0 25 26 10 10 0 0 1-7-5 10 10 0 0 1-7-7 10 10 0 0 1-7-7 10 10 0 0 1-4-7z' opacity='.35'/%3E%3Cg fill='%233B2314'%3E%3Ccircle cx='20' cy='22' r='3.6'/%3E%3Ccircle cx='15' cy='38' r='3'/%3E%3Ccircle cx='28' cy='48' r='3.8'/%3E%3Ccircle cx='32' cy='31' r='3.2'/%3E%3Ccircle cx='44' cy='42' r='3.4'/%3E%3Ccircle cx='30' cy='15' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4)); transform: rotate(-14deg);
  animation: zx-keks 1.1s .35s ease-out both;
}
@keyframes zx-keks {
  0% { transform: translateY(-14px) rotate(-40deg); opacity: 0; }
  60% { transform: translateY(2px) rotate(-8deg); opacity: 1; }
  100% { transform: rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) { #cc-main .cm__body::before { animation: none; } }
#cc-main .cm__footer { font-size: .95rem; border-radius: 0 0 18px 18px; }
#cc-main .cm__footer a { color: rgba(255, 255, 255, .85); }
/* Handy und Tablet (Anfrage-Leiste bis 959 px sichtbar, uk-hidden@m): Banner über der Leiste, damit er den Button
   „Wunschtermin anfragen“ nie verdeckt (Werbeplan v2, 9.2). Leiste: 64 px hoch + 10 px Abstand + Safe Area. */
@media (max-width: 959px) {
  #cc-main .cm--box { margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (max-width: 639px) {
  #cc-main .cm__title { font-size: 1.3rem; }
  #cc-main .cm__body::before { width: 62px; height: 62px; top: -22px; }
}
/* Beim Öffnen setzt CookieConsent den Fokus auf eine Hilfs-Div (tabindex -1): kein Rahmen um die ganze Karte, nur um Knöpfe und Links */
#cc-main [tabindex="-1"]:focus, #cc-main [tabindex="-1"]:focus-visible { outline: none; }
/* „Lieber ohne“ wie „Selbst auswählen“: hell umrandet, ohne Füllung; nur „Her mit den Keksen“ bleibt gelb (Luca 28.10.) */
#cc-main .cm__btn[data-role="necessary"] { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
#cc-main .cm__btn[data-role="necessary"]:hover { background: #fff; color: #1d1d1d; border-color: #fff; }

/* Banner sofort beim ersten Rendern (Luca 28.10.): CookieConsent macht ihn erst sichtbar, wenn es 100 ms nach dem Einfügen
   „cc--anim“ setzt, und blendet dann noch ein. Hier ohne Warten und ohne Einblenden; das Ausblenden nach der Wahl bleibt. */
.show--consent #cc-main .cm { opacity: 1; transform: none; visibility: visible !important; }
