/* Klaro — Noir/Gold-Theme (Maren Möst). NACH klaro.css laden. Überschreibt das Default-Theme. */

/* Banner unten + Einstellungen-Modal: tiefes Schwarz, creme Text */
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal,
.klaro .cookie-modal {
  background: #141210 !important;
  color: #ece6da !important;
  font-family: "Montserrat", Arial, sans-serif !important;
}
/* Cookie-Notice als kompakte Karte UNTEN RECHTS (nicht über die volle Breite).
   Rechts, nicht links: die Hero-Handlungsaufrufe stehen linksbündig — als
   Karte unten links lag das Banner (z-index 999) beim Erstbesuch komplett
   über dem Button „Termin anfragen". */
.klaro .cookie-notice{
  position:fixed !important; right:clamp(16px,2.5vw,28px) !important; left:auto !important;
  bottom:clamp(16px,2.5vw,28px) !important; top:auto !important;
  width:min(420px, calc(100vw - 32px)) !important; max-width:420px !important;
  margin:0 !important; padding:22px 22px 18px !important;
  border:1px solid rgba(201,169,106,.30) !important; border-radius:8px !important;
  box-shadow:0 28px 80px rgba(0,0,0,.62) !important;
}
.klaro .cookie-notice .cn-body{ margin:0 0 14px !important; padding:0 !important; }
.klaro .cookie-notice .cn-ok{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important; padding:0 !important; }
.klaro .cookie-modal .cm-modal { border: 1px solid rgba(201,169,106,.30) !important; }
.klaro .cookie-notice .cn-body,
.klaro .cookie-notice p,
.klaro .cookie-modal p,
.klaro .cookie-modal .cm-body { color: #cfc7b8 !important; }
.klaro .cookie-notice h1, .klaro .cookie-modal h1,
.klaro .cookie-modal .title { color: #ece6da !important; }
.klaro a, .klaro .cm-link,
.klaro .cookie-notice a, .klaro .cookie-modal a { color: #c9a96a !important; }

/* Kontextueller Platzhalter (Google-Maps-Stelle) */
.klaro .context-notice {
  background: #141210 !important;
  color: #ece6da !important;
  border: 1px solid rgba(201,169,106,.30) !important;
}
.klaro .context-notice p { color: #cfc7b8 !important; }

/* Buttons: „Akzeptieren" und „Ablehnen" GLEICHWERTIG (DE-Compliance: VG Hannover 2025, LG Rostock) */
.klaro .cm-btn{
  background: transparent !important;
  color: #ece6da !important;
  border: 1px solid rgba(201,169,106,.55) !important;
  border-radius: 5px !important;
  font-weight: 500 !important;
  padding: .72em 1.2em !important;
}
.klaro .cm-btn:hover{ background: rgba(201,169,106,.14) !important; }
.klaro .cm-btn.cm-btn-success{ background: transparent !important; color: #ece6da !important; border-color: rgba(201,169,106,.55) !important; }
.klaro .cookie-notice .cn-ok .cm-btn{ flex:1 1 auto !important; min-width:118px !important; text-align:center !important; }

/* Map-Platzhalter „Karte laden": einzelner Invite -> darf Gold bleiben (kein Accept/Reject-Paar) */
.klaro .context-notice .cm-btn.cm-btn-success{ background:#c9a96a !important; color:#15110a !important; border-color:#c9a96a !important; }
.klaro .context-notice .cm-btn.cm-btn-success:hover{ background:#d8bd86 !important; }

/* Powered-by gedämpft */
.klaro .cookie-notice .cm-powered-by a,
.klaro .cookie-modal .cm-powered-by a { color: #857d70 !important; }

/* Ueber die fixe Kontaktleiste heben. Breakpoint MUSS dem von .mobile-cta
   entsprechen (1023px) - stand er auf 760px, verdeckte das Banner auf Tablets
   den einzigen sichtbaren Handlungsaufruf. */
@media (max-width:1023px){
  .klaro .cookie-notice{
    left:12px !important; right:12px !important;
    width:auto !important; max-width:none !important;
    bottom:calc(96px + env(safe-area-inset-bottom)) !important;
    padding:18px 18px 16px !important;
  }
}

/* Solange das Menue oder die Lightbox offen ist, hat der Consent-Banner nichts
   zu suchen: er liegt mit z-index 999 ueber beidem und machte auf 375px drei
   der sieben Menuepunkte unklickbar. Die Entscheidung bleibt danach faellig. */
body.is-overlay-open .klaro .cookie-notice{ display:none !important; }