/* =========================================================
   CONVERSION-LAYER (Phase L2)
   Exit-Dialog „Bevor Sie gehen", Kontakt-Tab / mobile Kontaktleiste, Ebenen-System.
   Markup: inc/conversion/hooks.php, Verhalten: assets/js/conversion.js
========================================================= */

/* ---------- Ebenen (Z-Index-System) ----------
   Reihenfolge von unten nach oben. Bestehende Werte von Header (global.css) und Off-Canvas
   (header-nav.css) bleiben, alle anderen globalen Ebenen werden hier eingeordnet.
   Der Exit-Dialog liegt als natives <dialog> im Top-Layer über allem; er öffnet nie,
   solange eine andere Ebene offen ist. */
:root {
  --mr-z-floating: 9000;    /* Kontakt-Tab, mobile Kontaktleiste, Google-Bewertungs-Widget */
  --mr-z-header: 99990;     /* Floating-Header inkl. Mega-Menü (global.css, unverändert) */
  --mr-z-drawer: 100000;    /* Off-Canvas-Menü (header-nav.css, unverändert) */
  --mr-z-popup: 100020;     /* Elementor-Popups (Altbestand, z. B. Branding-Pakete) */
  --mr-z-toast: 100040;     /* Formular-Meldungen */
  --mr-z-consent: 100060;   /* Complianz-Einwilligung: immer oben und bedienbar */
  --mr-ctab-bar-space: 84px;
}

body .cmgr-widget { z-index: var(--mr-z-floating); }
body .cmgr-mini { z-index: var(--mr-z-floating); }
.mr-form-toast-wrap { z-index: var(--mr-z-toast); }
.elementor-popup-modal { z-index: var(--mr-z-popup) !important; } /* nur Ebene, nie display */
#cmplz-cookiebanner-container .cmplz-cookiebanner { z-index: var(--mr-z-consent); }

/* Alter Floating Contact Hub: Container im Footer 35 ist leer, seit das Widget nicht mehr ausgegeben wird */
.elementor-location-footer .elementor-element-75aa2d8 { display: none; }

/* Preloader (Elementor Custom Code 18): blendet sich spätestens nach 3,5 s aus,
   auch wenn das load-Ereignis wegen eines langsamen Drittanbieters ausbleibt. */
#site-preloader { animation: mr-preloader-failsafe 0s linear 3.5s forwards; }
@keyframes mr-preloader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* =========================================================
   KONTAKT-TAB (ab 1025 px) / KONTAKTLEISTE (bis 1024 px)
========================================================= */
.mr-ctab {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: var(--mr-z-floating);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  font-family: var(--mr-font-body, inherit);
  pointer-events: none; /* nur Tab und offenes Panel fangen Klicks */
  transition: opacity .25s ease, visibility 0s linear 0s;
}

.mr-ctab__trigger,
.mr-ctab.is-open .mr-ctab__panel { pointer-events: auto; }

.mr-ctab__trigger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 44px;
  min-height: 136px;
  margin: 0;
  padding: 16px 0;
  border: 1px solid rgba(143, 182, 255, .26);
  border-left: 0;
  border-radius: 0 18px 18px 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(143, 182, 255, .2), transparent 46%),
    linear-gradient(180deg, rgba(15, 22, 44, .96), rgba(7, 10, 22, .96));
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34), 0 0 28px rgba(47, 124, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.mr-ctab__trigger:hover,
.mr-ctab.is-open .mr-ctab__trigger {
  border-color: rgba(143, 182, 255, .5);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .4), 0 0 36px rgba(47, 124, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: translateX(2px);
}

.mr-ctab__trigger:focus-visible,
.mr-ctab__item:focus-visible {
  outline: 2px solid var(--mr-accent, #00d4ff);
  outline-offset: 3px;
}

.mr-ctab__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mr-ctab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fb6ff;
  box-shadow: 0 0 12px rgba(143, 182, 255, .7);
}

.mr-ctab__panel {
  display: grid;
  gap: 8px;
  width: 300px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(143, 182, 255, .16), transparent 44%),
    linear-gradient(180deg, rgba(15, 20, 38, .97), rgba(7, 10, 22, .97));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.mr-ctab.is-open .mr-ctab__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

.mr-ctab__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  color: #fff !important;
  text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.mr-ctab__item:hover {
  border-color: rgba(143, 182, 255, .32);
  background: rgba(143, 182, 255, .08);
  transform: translateY(-1px);
}

.mr-ctab__item--primary {
  border-color: rgba(143, 182, 255, .24);
  background: radial-gradient(circle at 20% 0%, rgba(143, 182, 255, .14), transparent 46%), rgba(143, 182, 255, .07);
}

.mr-ctab__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(143, 182, 255, .22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(47, 124, 255, .22), rgba(124, 60, 255, .18));
  color: #b9d0ff;
}

.mr-ctab__ico svg { width: 20px; height: 20px; }

.mr-ctab__txt { display: grid; gap: 3px; min-width: 0; }

/* Hauptpunkt: Kurztext nur bis 767 px ("Termin buchen"), darüber "Erstgespräch buchen" */
.mr-ctab__short { display: none; }

@media (max-width: 767px) {
  .mr-ctab__long { display: none; }
  .mr-ctab__short { display: inline; }
}

.mr-ctab__txt strong {
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
}

.mr-ctab__txt small {
  color: #aebad2;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* Andere Ebenen offen oder Seite noch im Hero: Tab ausblenden, nichts stapeln */
html.mr-drawer-open .mr-ctab,
html.mr-exit-open .mr-ctab,
html.mr-popup-open .mr-ctab,
body.cmplz-banner-active .mr-ctab,
.mr-ctab.is-waiting {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

html.mr-drawer-open .mr-ctab *,
html.mr-exit-open .mr-ctab *,
html.mr-popup-open .mr-ctab *,
body.cmplz-banner-active .mr-ctab *,
.mr-ctab.is-waiting * { pointer-events: none !important; }

/* ---------- Bis 1024 px: Kontaktleiste unten ---------- */
@media (max-width: 1024px) {
  .mr-ctab {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(380px, calc(100vw - 24px));
    transform: translateX(-50%);
  }

  .mr-ctab__trigger { display: none; }

  .mr-ctab__panel,
  .mr-ctab.is-open .mr-ctab__panel {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    padding: 6px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(14, 19, 37, .94), rgba(7, 10, 22, .94));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .mr-ctab__item {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 13px;
  }

  .mr-ctab__item--wa { display: none; }

  .mr-ctab__ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .mr-ctab__ico svg { width: 17px; height: 17px; }

  .mr-ctab__txt small { display: none; }

  .mr-ctab__txt strong { font-size: 13.5px; white-space: nowrap; }

  /* Bildschirmtastatur offen (Fokus in einem Formularfeld): Leiste aus dem Weg */
  html.mr-typing .mr-ctab {
    opacity: 0;
    visibility: hidden;
  }

  html.mr-typing .mr-ctab * { pointer-events: none !important; }

  /* Seitenende: Footer bekommt so viel Abstand, dass die Leiste nichts verdeckt */
  body.mr-has-ctab .elementor-location-footer .mr-footer.e-con {
    padding-bottom: calc(var(--padding-bottom, 24px) + var(--mr-ctab-bar-space) + env(safe-area-inset-bottom, 0px));
  }

  /* Phase N: Bewertungs-Badge (convi Google Bewertungen) sitzt sonst genau auf der Kontaktleiste.
     Mit Leiste: Badge darüber stapeln, beim Tippen ausblenden. */
  body.mr-has-ctab .cmgr-widget {
    bottom: calc(var(--mr-ctab-bar-space) + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.mr-typing body.mr-has-ctab .cmgr-widget {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Phase N: Bei wenig Höhe (z. B. 390x600, 360x520, Querformat) nur die Kontaktleiste, kein zweites schwebendes Element */
@media (max-width: 1024px) and (max-height: 640px) {
  body.mr-has-ctab .cmgr-widget { display: none !important; }
}

/* Phase Q2.2: Am Desktop schwebt das Bewertungs-Widget unten rechts (laut Plugin nur ab 1025 px).
   Am Seitenende bekommt der Footer so viel Abstand, dass Rechtslinks nicht unter dem Widget
   (bzw. dem kleinen Wiederherstellen-Knopf nach dem Schließen) liegen. */
@media (min-width: 1025px) {
  body:not(.mr-lg-page):has(.cmgr-widget:not(.cmgr-hide-desktop)) .elementor-location-footer .mr-footer.e-con { padding-bottom: 96px; }
  body:not(.mr-lg-page):has(.cmgr-widget:not(.cmgr-hide-desktop):not(.cmgr-widget--collapsed)) .elementor-location-footer .mr-footer.e-con { padding-bottom: 250px; }
}

@media (max-width: 359px) {
  .mr-ctab__ico { display: none; }
  .mr-ctab__item { grid-template-columns: auto; }
}

/* =========================================================
   EXIT-DIALOG „BEVOR SIE GEHEN"
========================================================= */
html.mr-exit-open { overflow: hidden !important; }

.mr-exit {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(143, 182, 255, .2);
  border-radius: var(--mr-radius-lg, 26px);
  background:
    radial-gradient(circle at 12% 0%, rgba(47, 124, 255, .2), transparent 42%),
    radial-gradient(circle at 92% 6%, rgba(124, 60, 255, .14), transparent 38%),
    linear-gradient(180deg, #0f1730 0%, #090e1d 100%);
  color: var(--mr-text-soft, #c9d3e8);
  font-family: var(--mr-font-body, inherit);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 60px rgba(47, 124, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mr-exit:not([open]) { display: none; }

.mr-exit::backdrop {
  background: rgba(3, 7, 17, .66);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.mr-exit[open] { animation: mr-exit-in .24s cubic-bezier(.22, 1, .36, 1); }
.mr-exit[open]::backdrop { animation: mr-exit-fade .24s ease; }

@keyframes mr-exit-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes mr-exit-fade { from { opacity: 0; } }

/* Schließen bleibt beim Scrollen im Dialog oben sichtbar */
.mr-exit__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
}

.mr-exit__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 14px 14px 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(15, 22, 44, .92);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}

.mr-exit__close svg { width: 20px; height: 20px; }

.mr-exit__close:hover {
  border-color: rgba(143, 182, 255, .55);
  background: rgba(47, 124, 255, .22);
}

.mr-exit__close:focus-visible,
.mr-exit__btn:focus-visible {
  outline: 2px solid var(--mr-accent, #00d4ff);
  outline-offset: 3px;
}

.mr-exit__title:focus { outline: none; }

.mr-exit__box { padding: 34px 36px 32px; }

.mr-exit__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 56px 0 0;
  color: #b9d0ff;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.mr-exit__eyebrow-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(143, 182, 255, .22);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(47, 124, 255, .22), rgba(124, 60, 255, .18));
}

.mr-exit__eyebrow-ico svg { width: 18px; height: 18px; }

.mr-exit__title {
  margin: 18px 0 0;
  color: #fff;
  font-family: var(--mr-font-body, inherit);
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.8rem);
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.18;
  text-transform: none;
}

.mr-exit__text {
  margin: 14px 0 0;
  color: #c9d3e8;
  font-size: 1rem;
  line-height: 1.6;
}

.mr-exit__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.mr-exit__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #dfe6f5;
  font-size: .9rem;
  font-weight: 600;
}

.mr-exit__trust svg { width: 16px; height: 16px; color: #7fdcff; stroke-width: 2.2; }

.mr-exit__ctas {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.mr-exit .mr-exit__btn {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.mr-exit .mr-exit__btn > * { position: relative; z-index: 2; }
.mr-exit .mr-exit__btn svg { width: 19px; height: 19px; flex: none; }

@media (max-width: 600px) {
  .mr-exit__box { padding: 28px 22px 24px; }
  .mr-exit .mr-exit__btn { padding: 0 16px; white-space: normal; text-align: center; }
}

@media (max-width: 380px) {
  .mr-exit .mr-exit__btn { font-size: .94rem; }
  .mr-exit .mr-exit__btn svg { display: none; }
}

@media (max-height: 560px) {
  .mr-exit__box { padding-top: 24px; padding-bottom: 22px; }
  .mr-exit__title { margin-top: 12px; font-size: 1.3rem; }
  .mr-exit__ctas { margin-top: 18px; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .mr-exit[open],
  .mr-exit[open]::backdrop { animation: none; }
  .mr-ctab,
  .mr-ctab *,
  .mr-ctab__panel,
  .mr-exit__close { transition: none !important; }
  .mr-ctab__trigger:hover,
  .mr-ctab.is-open .mr-ctab__trigger,
  .mr-ctab__item:hover { transform: none; }
}

@media print {
  .mr-ctab,
  .mr-exit { display: none !important; }
}