/* ==========================================================================
   Consent-Leiste - kompakt + einklappbar            (2026-09-22)
   --------------------------------------------------------------------------
   Gehoert zu inc/consent-banner.php und assets/js/consent-banner.js.
   Laedt nach dist/styles/gdpr-main-nf.css des Plugins, deshalb reichen hier
   gleich tiefe Selektoren - kein !important ausser dort, wo das Plugin
   selbst welche setzt.

   Der Block von Dev100 (18.09.2026) in main.css hat die mobile Leiste schon
   einmal verkleinert (167 -> 137 px). Er bleibt stehen; was hier steht,
   setzt darauf auf. Wer eine der beiden Stellen aendert, sollte in die
   andere schauen.
   ========================================================================== */

/* --- Grundzustand: Uebergang auch fuer das Einklappen ---------------------- */
#moove_gdpr_cookie_info_bar {
  transition: bottom .3s cubic-bezier(.17, .04, .03, .94),
              transform .28s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease;
}

/* --- Eingeklappt: faehrt nach unten weg ----------------------------------- */
#moove_gdpr_cookie_info_bar.mesh-consent-collapsed {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              opacity .18s ease,
              visibility 0s linear .28s;
}

/* --- Der Knopf, der uebrig bleibt ----------------------------------------- */
.mesh-consent-reopen {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9899; /* knapp unter der Leiste (9900), ueber dem Seiteninhalt */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin: 0;
  height: 42px;
  padding: 0 16px 0 13px;

  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background-color: #202020;
  color: #fff;

  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;

  box-shadow: 0 6px 20px rgba(16, 24, 40, .22);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1),
              background-color .2s ease;
}

.mesh-consent-reopen.is-visible {
  opacity: 1;
  transform: none;
}

.mesh-consent-reopen:hover,
.mesh-consent-reopen:focus-visible {
  background-color: #2f2f2f;
}

.mesh-consent-reopen:focus-visible {
  outline: 2px solid #1866dd;
  outline-offset: 2px;
}

.mesh-consent-reopen__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.mesh-consent-reopen__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Waehrend der Einstellungen-Dialog offen ist, hat der Knopf nichts zu
   suchen - das Plugin legt den Dialog darueber, sichtbar bliebe nur ein
   halber Rand. */
body.moove_gdpr_overflow .mesh-consent-reopen,
body.gdpr_lightbox-active .mesh-consent-reopen {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #moove_gdpr_cookie_info_bar,
  #moove_gdpr_cookie_info_bar.mesh-consent-collapsed,
  .mesh-consent-reopen {
    transition: none;
  }
}

/* ==========================================================================
   Hinweistext: erster Satz, dann "... mehr lesen"
   --------------------------------------------------------------------------
   Aufgebaut in consent-banner.js. Der zweite Absatz ist nur ausgeblendet,
   nicht entfernt - ein Klick holt ihn zurueck.

   Ab 992 px ist die Leiste einzeilig und der ganze Text passt ohne Muehe
   hinein. Dort bleibt alles sichtbar und der Umschalter verschwindet, sonst
   waere es ein Klick ohne Gegenwert.
   ========================================================================== */
#moove_gdpr_cookie_info_bar .mesh-consent-more {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

#moove_gdpr_cookie_info_bar .mesh-consent-more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 991px) {
  #moove_gdpr_cookie_info_bar .mesh-consent-more {
    display: inline;
  }

  #moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice p.mesh-consent-rest {
    display: none;
  }

  #moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice.is-open p.mesh-consent-rest {
    display: block;
  }

  /* Aufgeklappt sind die Pluenktchen falsch - dann steht da schon Text. */
  #moove_gdpr_cookie_info_bar .moove-gdpr-cookie-notice.is-open .mesh-consent-more__dots {
    display: none;
  }
}

/* ==========================================================================
   Mobil: flacher machen
   --------------------------------------------------------------------------
   Kein Wort wird abgeschnitten. Gespart wird an Polstern, Zeilenhoehe und
   Knopfgroesse. Der Hinweistext bekommt zusaetzlich eine Hoehenbremse: falls
   die Texteinstellung im Backend spaeter laenger wird, waechst die Leiste
   nicht ins Unermessliche, sondern der Text wird scrollbar.
   ========================================================================== */
@media (max-width: 767px) {
  body #moove_gdpr_cookie_info_bar {
    min-height: 0;
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice {
    margin-bottom: 7px;
    padding-left: 0;
    max-height: 28vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p,
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a,
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p > a {
    font-size: 12px;
    line-height: 15px;
    font-weight: 600;
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder {
    margin-top: 0;
    gap: 6px;
    justify-content: center;
  }

  /* Beide Hauptknoepfe bleiben identisch - nur kompakter. Kein Dark Pattern. */
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton,
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton {
    margin: 0;
    padding: 6px 13px;
    font-size: 12px;
    line-height: 16px;
    min-height: 0;
  }

  .mesh-consent-reopen {
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
  }

  /* Mobil nur das Symbol - die Beschriftung steckt im aria-label. */
  .mesh-consent-reopen__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --- Desktop: nur leicht entschlacken ------------------------------------- */
@media (min-width: 768px) {
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 10px 24px;
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p,
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a {
    font-size: 13px;
    line-height: 17px;
  }

  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton,
  body #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton {
    padding: 7px 16px;
    font-size: 13px;
    line-height: 18px;
  }
}

/* ==========================================================================
   Mobil: Leiste startet eingeklappt, nur das Cookie-Symbol   (2026-09-30)
   --------------------------------------------------------------------------
   Bis 767 px ist die Leiste von Anfang an unten weggefahren - schon per CSS,
   damit vor dem (deferred) Skript nichts aufblitzt. Sichtbar wird sie nur,
   wenn jemand auf das Symbol tippt; consent-banner.js setzt dann
   .mesh-consent-open und nimmt sie beim Wiedereinklappen wieder weg.

   Auf /register/ gibt es mobil weder Leiste noch Symbol
   (body.mesh-consent-off-mobile, gesetzt in inc/consent-banner.php).
   ========================================================================== */
@media (max-width: 767px) {
  body #moove_gdpr_cookie_info_bar:not(.mesh-consent-open) {
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* /preise/: die Preisleiste unten wuerde sonst vom Symbol ueberdeckt */
  body:has(.calc__bar.is-visible) .mesh-consent-reopen {
    bottom: calc(93px + env(safe-area-inset-bottom, 0px));
  }

  body.mesh-consent-off-mobile #moove_gdpr_cookie_info_bar,
  body.mesh-consent-off-mobile .mesh-consent-reopen {
    display: none !important;
  }
}