/* =========================================================
   cookie-consent.css — Klickwände (Maps/Cal) + ACI-Branding für Klaro.
   Lädt NACH vendor/klaro.css, überschreibt dessen Default-Look.
   ACI-Palette: Schwarz/Dunkel · ACI-Rot (#E82028) · Weiß.
   ========================================================= */

/* ---------- Google-Maps-Klickwand (im .mw-Wrapper) ---------- */
.mw { position: relative; }
.mw-frame { width: 100%; height: 100%; border: 0; filter: grayscale(.6) brightness(.95); }

.consent-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
  color: #ddd;
}
.consent-ph-ic { color: var(--red, #E82028); margin-bottom: 4px; }
.consent-ph-t { font-size: 16px; font-weight: 700; color: #fff; margin: 0; }
.consent-ph-p { font-size: 13px; line-height: 1.5; color: #aaa; max-width: 360px; margin: 0; }
.consent-ph-btn {
  margin-top: 6px;
  padding: 11px 24px;
  background: var(--red, #E82028); color: #fff;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: filter .2s, transform .2s;
}
.consent-ph-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.consent-ph-note { font-size: 12px; color: #888; margin: 4px 0 0; }
.consent-ph-note a { color: #bbb; text-decoration: underline; }
.consent-ph-note a:hover { color: #fff; }
/* WICHTIG: muss NACH .consent-ph stehen und das [hidden]-Attribut durchsetzen.
   consent.js blendet die Klickwand nach erteilter Einwilligung ueber
   `ph.hidden = true` aus. Das wirkt normalerweise ueber die
   Browser-Standardregel `[hidden] { display: none }` -- die hat aber
   Spezifitaet (0,1,0) und stammt aus dem User-Agent-Stylesheet. Die Regel
   `.consent-ph { display: flex }` oben hat dieselbe Spezifitaet, kommt aber
   aus dem Autoren-Stylesheet und gewinnt damit immer.
   Folge: nach Klick auf "Karte laden" wurde die Karte zwar korrekt geladen
   (iframe bekam src, Google-Tiles kamen an), die Klickwand blieb aber
   sichtbar und lag mit `position:absolute; inset:0` genau darueber -- fuer
   den Nutzer sah es aus, als passiere gar nichts. */
.consent-ph[hidden] { display: none; }

/* ---------- Cal.com-Einwilligungs-Klickwand (im Termin-Modal) ---------- */
.cal-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
  min-height: 320px;
  padding: 32px 24px;
}
.cal-consent-t { font-size: 17px; color: #111; margin: 0; }
.cal-consent-p { font-size: 14px; line-height: 1.6; color: #555; max-width: 440px; margin: 0; }
.cal-consent-btn {
  margin-top: 8px;
  padding: 13px 28px;
  background: var(--red, #E82028); color: #fff;
  border: none; border-radius: 8px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: filter .2s, transform .2s;
}
.cal-consent-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cal-consent-alt { font-size: 12px; color: #888; margin: 6px 0 0; }
/* Die Farben oben (#111/#555/#888) sind fuer das MODAL gedacht -- dort steht
   die Klickwand auf weisser Karte. Auf /termin/ liegt dieselbe Wand aber
   INLINE auf dem dunklen Foto (kein Karten-Wrapper), dort war der dunkle
   Text kaum lesbar. Helle Gegenstuecke nur fuer den Inline-Fall; das Modal
   bleibt unveraendert. Gleiche Klasse von Bug wie zuvor bei den
   FAQ-Fragen: Farbe passte zum alten Untergrund, nicht zum neuen. */
.page--termin .cal-consent-t { color: var(--text-on-dark); }
.page--termin .cal-consent-p { color: var(--text-on-dark); }
.page--termin .cal-consent-alt { color: rgba(244, 244, 242, .75); }
/* Eigene Abdunklung unter der Wand: heller Text allein reichte hier nicht.
   Die Wand sitzt genau ueber der hellsten Stelle des Fotos (Wabenleuchten
   im Showroom) -- gegen eine solche Stelle kam der helle Text nur auf
   ~4.1:1 und lag damit unter der 4.5:1-Grenze (WCAG AA, siehe PRODUCT.md).
   Mit dieser zusaetzlichen Flaeche steht der Text auf einem definierten
   Untergrund statt auf zufaelligem Bildinhalt: ~13:1, unabhaengig davon,
   welcher Bildausschnitt bei welcher Fensterhoehe gerade darunter liegt. */
.page--termin .cal-consent {
  background: rgba(13, 14, 17, .72);
  border-radius: var(--radius, 12px);
}

/* ====================================================================
   KLARO-BRANDING — Banner (.cookie-notice) + Modal (.cm-modal)
   ==================================================================== */
.klaro .cookie-notice,
.klaro .cookie-modal .cm-modal {
  background: #111;
  color: #f0f0f0;
  font-family: inherit;
  box-shadow: 0 -2px 30px rgba(0, 0, 0, .4);
}
.klaro .cookie-modal .cm-bg { background: rgba(0, 0, 0, .7); }

.klaro .cookie-notice .cn-body,
.klaro .cookie-modal .cm-body,
.klaro .cookie-modal .cm-header { color: #f0f0f0; }
.klaro .cookie-notice .cn-body p,
.klaro .cookie-modal .cm-body p { color: #c8c8c8; }
.klaro .cookie-modal .cm-header h1,
.klaro .cm-list-title,
.klaro .cm-purpose .cm-list-title { color: #fff; }

.klaro a,
.klaro .cookie-notice a,
.klaro .cookie-modal a,
.klaro .cm-link { color: var(--red, #E82028); }

/* Buttons: einheitliche Form. „Akzeptieren" rot, „Ablehnen" gleichwertig
   sichtbar (heller Outline-Button, NICHT ausgegraut — kein Dark-Pattern).
   Selektoren mit .cookie-notice/.cookie-modal/.context-notice-Scope, damit sie
   die spezifischeren Klaro-Vendor-Regeln (0,4,0) schlagen — sonst bleibt der
   Akzeptieren-Button im Banner Klaro-Grün statt ACI-Rot (Ein-Signal-Regel). */
.klaro .cookie-notice .cm-btn,
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 10px 18px;
  transition: filter .2s, background .2s, border-color .2s;
}
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success-var,
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-success-var,
.klaro .context-notice .cm-btn.cm-btn-success,
.klaro .context-notice .cm-btn.cm-btn-success-var {
  background: var(--red, #E82028);
  color: #fff;
  border: 1px solid var(--red, #E82028);
}
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success-var:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-success-var:hover,
.klaro .context-notice .cm-btn.cm-btn-success:hover,
.klaro .context-notice .cm-btn.cm-btn-success-var:hover { filter: brightness(1.08); }
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-info,
.klaro .cookie-modal .cm-btn.cm-btn-danger,
.klaro .cookie-modal .cm-btn.cn-decline,
.klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .context-notice .cm-btn.cm-btn-danger,
.klaro .context-notice .cm-btn.cn-decline,
.klaro .context-notice .cm-btn.cm-btn-info {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-info:hover,
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover,
.klaro .cookie-modal .cm-btn.cn-decline:hover,
.klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .context-notice .cm-btn.cm-btn-danger:hover,
.klaro .context-notice .cm-btn.cn-decline:hover,
.klaro .context-notice .cm-btn.cm-btn-info:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Toggle-Switches in ACI-Rot, wenn aktiv */
.klaro .cm-list-input:checked + .cm-list-label .slider,
.klaro .cm-list-input.required:checked + .cm-list-label .slider { background-color: var(--red, #E82028); }
.klaro .cm-list-label .slider { background-color: #555; }
.klaro .cm-list-input:checked + .cm-list-label .cm-switch { color: var(--red, #E82028); }

/* „Realisiert mit Klaro"-Hinweis dezent */
.klaro .cm-powered-by, .klaro .cm-powered-by a { color: #777; font-size: 11px; }