/**
 * CXO Fahrzeuge – Overlays (Schnellanfrage, Datenschutz, Impressum)
 * Seit 1.11.0 eigene Datei, wird für die Rechtstexte im Footer auf allen
 * Seiten geladen.
 *
 * @author onlion® Studio
 */
/* ==========================================================
   Overlays: Schnellanfrage und Datenschutz (seit 1.9.0)
   Hintergrund wie beim geöffneten Menü (weichgezeichnet, abgedunkelt).
   ========================================================== */
html.cxo-ov-open,
html.cxo-ov-open body {
  overflow: hidden !important;
}
.cxo-ov {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.cxo-ov[hidden] { display: none !important; }
.cxo-ov.is-open { opacity: 1; }
.cxo-ov__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 28, 42, 0.5);
  -webkit-backdrop-filter: blur(28px) saturate(0.8);
  backdrop-filter: blur(28px) saturate(0.8);
}
.cxo-ov__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border-radius: 16px;
  background: #fff;
  color: #172d40;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 0.22s ease;
}
.cxo-ov.is-open .cxo-ov__panel { transform: none; }
.cxo-ov__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.cxo-ov__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eff2f5;
  color: #172d40;
  cursor: pointer;
}
.cxo-ov__close:hover { background: #dfe4ea; }
.cxo-ov__close:focus-visible { outline: 2px solid #7066ad; outline-offset: 2px; }
.cxo-ov .cxo-quick-card {
  --cxo-border: rgba(23, 45, 64, 0.12);
  padding: 28px 28px 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #172d40;
}
.cxo-ov .cxo-quick-card .cxo-aside-top { padding-right: 48px; }
.cxo-ov .cxo-quick-card .cxo-aside-title { padding-right: 8px; }
.cxo-ov--privacy .cxo-ov__panel { max-width: 1520px; } /* seit 1.11.4 doppelt so breit (vorher 760px) */
.cxo-privacy {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
}
.cxo-privacy__text {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 32px 32px 24px;
  font-family: 'Helvetica Now Display - Light', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #172d40;
}
.cxo-privacy__text h1,
.cxo-privacy__text h2,
.cxo-privacy__text h3,
.cxo-privacy__text h4 {
  margin: 1.2em 0 0.4em;
  padding: 0;
  color: #172d40;
  font-family: 'Helvetica Now Display - Bold', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
}
.cxo-privacy__text h1:first-child,
.cxo-privacy__text h2:first-child { margin-top: 0; padding-right: 48px; font-size: 22px; }
.cxo-privacy__text p,
.cxo-privacy__text li { margin: 0 0 0.8em; color: #172d40; }
.cxo-privacy__text a { color: #7066ad; }
.cxo-privacy__text:focus-visible { outline: 2px solid #7066ad; outline-offset: -2px; }
.cxo-privacy__bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 32px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(23, 45, 64, 0.12);
  background: #fff;
}
.cxo-privacy__full {
  color: #4d6073 !important;
  font-size: 14px;
}
.cxo-privacy__agree {
  flex: 0 0 auto;
  min-width: 200px;
  margin: 0 !important;
}
.cxo-quick-frame {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  left: -9999px !important;
  top: 0 !important;
  border: 0 !important;
  visibility: hidden;
}
@media (max-width: 767px) {
  .cxo-ov { padding: 0; align-items: stretch; }
  .cxo-ov__panel,
  .cxo-ov--privacy .cxo-ov__panel {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
  .cxo-privacy { max-height: none; height: 100%; }
  .cxo-ov__body { flex: 1 1 auto; }
  .cxo-ov--privacy .cxo-ov__body { display: flex; flex-direction: column; overflow: hidden; }
  .cxo-ov .cxo-quick-card { padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .cxo-ov .cxo-quick-card .cxo-aside-row { grid-template-columns: 1fr; }
  .cxo-privacy__text { padding: 24px 20px 16px; }
  .cxo-privacy__bar { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .cxo-privacy__agree { flex: 1 1 100%; }
  .cxo-privacy__full { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cxo-ov, .cxo-ov__panel { transition: none; }
}

/* Knopf „Ich stimme zu“ eigenständig gestaltet (seit 1.11.0), damit das
   Overlay auch auf Seiten ohne cxo-style.css vollständig aussieht. */
.cxo-ov .cxo-privacy__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.8em 1.2em 0.7em;
  border: 1px solid #a799ff;
  border-radius: 100px;
  background: #a799ff;
  color: #172d40;
  font-family: 'Helvetica Now Display - Bold', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cxo-ov .cxo-privacy__agree:hover,
.cxo-ov .cxo-privacy__agree:focus-visible {
  background: #8a7be0;
  border-color: #8a7be0;
  color: #fff;
}
.cxo-ov .cxo-privacy__agree:focus-visible { outline: 2px solid #7066ad; outline-offset: 2px; }
/* Impressum und Footer-Links: ohne Zustimmen-Knopf */
.cxo-privacy--plain .cxo-privacy__bar { justify-content: flex-end; }
.cxo-privacy--plain .cxo-privacy__agree { display: none !important; }

/* Zwei Ebenen (seit 1.11.7): Datenschutz aus der Schnellanfrage.
   Desktop: die Anfrage tritt nach links zurück und wird kleiner, die
   Erklärung schiebt sich von rechts davor; beim Schließen umgekehrt. */
@media (min-width: 768px) {
  .cxo-ov .cxo-ov__panel {
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.38s ease, opacity 0.38s ease;
  }
  .cxo-ov.is-behind .cxo-ov__panel {
    transform: translateX(-8%) scale(0.92);
    filter: brightness(0.82) saturate(0.9);
    pointer-events: none;
  }
  .cxo-ov.is-stacked .cxo-ov__backdrop {
    background: rgba(14, 28, 42, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .cxo-ov.is-stacked .cxo-ov__panel {
    transform: translateX(72px);
    opacity: 0;
  }
  .cxo-ov.is-stacked.is-open .cxo-ov__panel {
    transform: none;
    opacity: 1;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .cxo-ov .cxo-ov__panel { transition: none; }
  .cxo-ov.is-behind .cxo-ov__panel { transform: none; }
}

/* Breiter Desktop (seit 1.11.8): beide Ebenen nebeneinander. Die Anfrage
   gleitet an den linken Rand, die Erklärung schiebt sich rechts daneben.
   Klick auf die Anfrage (bzw. den freien Bereich) schließt die Erklärung,
   „Ich stimme zu“ setzt den Haken und die Anfrage gleitet zurück in die Mitte. */
@media (min-width: 1200px) {
  .cxo-ov.is-behind .cxo-ov__panel {
    transform: translateX(calc(-50vw + 50% + 24px));
    filter: none;
    opacity: 0.96;
  }
  .cxo-ov.is-stacked {
    justify-content: flex-end;
  }
  .cxo-ov.is-stacked .cxo-ov__backdrop {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cxo-ov.is-stacked .cxo-ov__panel,
  .cxo-ov--privacy.is-stacked .cxo-ov__panel {
    max-width: min(1000px, calc(100vw - 520px - 72px));
    transform: translateX(110%);
    opacity: 1;
  }
  .cxo-ov.is-stacked.is-open .cxo-ov__panel {
    transform: none;
  }
}