/* =============================================================================
   MOJITO-LEMON — brand overrides (loaded after main.css / responsive.css)
   ============================================================================= */

/* =============================================================================
   TEST — header & hero side inset aligned to Belfrit (clamp(1.25rem, 8vw, 6rem))
   Revert: delete this block to restore main-subpages.css defaults
   (clamp(1.25rem, 15.87vw, 18.75rem) on .header-inner and .hero-inner)
   ============================================================================= */
.site-header .header-inner {
  padding-inline: clamp(1.25rem, 8vw, 6rem);
}

.hero-inner {
  padding-inline: clamp(1.25rem, 8vw, 6rem);
}

/* ============================================================================= */

/* Brand typography: paragraph body text 16.5px (main.css default: 15px).
   --text-body (18px) governs hero subtext and is intentionally left unchanged.
   Heading variables (--text-h2, --text-h3-*, --text-h4, --text-overline)
   are unchanged — they govern titles, block titles, subtitles, and footer
   accordion titles. */
:root {
  --text-body-sm: 1.03125rem;
  /* 16.5px — used by plain <p> elements in all blocks */

  /* Colour of the checked data-protection consent checkbox */
  --consent-check-color: var(--color-green-dark);
}

/* CTA banner description uses --text-body (18px) in main.css; align to brand body size */
.cp-cta-banner__desc {
  font-size: var(--text-body-sm);
}

/* Quote card: wider, sized for ~2 text lines, flex-centred content */
.cp-quote-card {
  width: clamp(15rem, 72%, 24rem);
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
}

/* Desktop: left edge at the image's horizontal midline */
@media (min-width: 1025px) {
  .cp-quote-card {
    left: 50%;
    right: auto;
    transform: none;
  }
}

/* 992–1024px: card horizontally centred in the image column */
@media (min-width: 992px) and (max-width: 1024px) {
  .cp-quote-card {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 1rem;
    width: calc(100% - 2rem);
    transform: translateX(-50%);
  }
}

/* Mobile / tablet: truly centred in the image */
@media (max-width: 991.9px) {
  .cp-quote-card {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

.cp-quote-card p {
  text-align: center;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  #qualitaet.ml-qualitaet {
    scroll-margin-top: calc(var(--site-header-height, 4.5rem) + 4rem);
  }

  .ml-qualitaet .cp-media-block__image {
    position: sticky;
    top: calc(var(--site-header-height, 4.5rem) + 3rem);
  }

  /*   .ml-qualitaet .cp-media-block {
    min-height: 1200px;
  } */

  .ml-qualitaet .cp-media-block__content {
    padding-top: 0;
  }
}

/* More breathing room between heading and benefit stamps */
.cp-media-block__content .section-heading {
  /* margin-bottom: 6rem; */
  margin-bottom: 2rem;
}

/* Centre all section overlines and headings on tablet/mobile.
   Hero is excluded automatically (uses .overline-badge, not .section-heading).
   Blocks already using .section-heading--center are unaffected. */
@media (max-width: 1024px) {

  /* .section-heading needs full width so text-align:center works within
     flex parents (e.g. .cp-events-header) that don't stretch their children */
  .section-heading {
    text-align: center;
    width: 100%;
  }

  .section-heading .overline {
    margin-inline: auto;
  }

  /* Sortiment: stack lead and tabs vertically, centred */
  .sortiment-header {
    flex-direction: column;
    align-items: center;
  }

  .sortiment-header__lead {
    text-align: center;
  }

  .sortiment-header__lead .overline {
    margin-inline: auto;
  }

  /* Tab buttons: span full width and centre; reduce horizontal padding so
     centring is visually perceptible (desktop padding leaves only 6px each side) */
  .cp-tab-group {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .cp-tab {
    padding-inline: 0.75rem;
    /* 12px each side vs 15/16px on desktop */
  }
}

/* Events: button below slider on mobile/tablet, next to heading on desktop.
   The <a> is a sibling of .cp-events-header in the DOM; CSS Grid
   reorders it visually on desktop (≥1025px) into the header row.
   On tablet and mobile the DOM order (header → slider → cta) is the visual order. */
@media (min-width: 1025px) {
  section#events {
    display: grid;
    grid-template-areas:
      "header cta"
      "slider slider";
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 2rem;
    row-gap: 3.125rem;
  }

  .cp-events-header {
    grid-area: header;
    margin-bottom: 0;
  }

  .cp-events-slider {
    grid-area: slider;
    min-width: 0;
    /* prevent Splide pixel widths from inflating the track */
  }

  .cp-events-cta {
    grid-area: cta;
    align-self: start;
    margin-top: 23px;
  }
}

@media (max-width: 1024px) {
  .cp-events-cta {
    display: flex;
    width: fit-content;
    margin: 2rem auto 0;
    border-radius: 1.6875rem;
    /* keep desktop pill shape; responsive.css reduces --radius-button on mobile */
  }
}

/* CTA banner: centre heading on tablet and narrow desktop (matches column-layout breakpoint) */
@media (max-width: 1439px) {
  .cp-cta-banner__inner {
    align-items: center;
    text-align: center;
  }
}

/* Footer divider: hide on mobile */
@media (max-width: 767px) {
  .site-footer__divider {
    display: none;
  }
}

/* =========================================================================
   Mojito-Lemon Contact Form
   Background: CTA-banner yellow; form card: white; button: dark (cp-btn--dark)
   ========================================================================= */

#ml-contact {
  background-color: var(--color-yellow);
  padding-block: var(--space-2xl);
}

.ml-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

.ml-contact__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--tracking-h2);
  color: var(--color-green-dark);
  margin-bottom: 1.25rem;
}

.ml-contact__desc {
  font-family: var(--font-heading);
  font-size: var(--text-body);
  color: var(--color-green-dark);
  margin-bottom: 1.75rem;
}

.ml-contact__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ml-contact__bullet {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--color-green-dark);
  font-family: var(--font-heading);
  font-weight: 500;
}

.ml-contact__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background-image: url('../img/universal/mojito-lemon-star-green.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Form card */
.ml-contact__form-wrap {
  background-color: var(--color-yellow);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}

.ml-contact__form-wrap .contact-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ml-contact .alert.contact-form__success,
.ml-contact .alert.contact-form__success p {
  background: none;
  border: none;
  box-shadow: none;
  font-size: 1.125rem !important;
  color: var(--color-green-dark) !important;
  text-align: center;
  padding: 0;
  margin: 0;
}

.ml-contact__form-wrap .form-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-green-dark);
  margin-bottom: 0.375rem;
}

.ml-contact__form-wrap .row {
  row-gap: 1.25rem;
}

.ml-contact__form-wrap .form-control,
.ml-contact__form-wrap .form-select {
  border-radius: 9999px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: var(--color-green-dark);
  font-family: var(--font-body);
  padding-inline: 1.125rem;
}

.ml-contact__form-wrap textarea.form-control {
  border-radius: 1rem !important;
  height: 7rem !important;
  resize: vertical;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.ml-contact__form-wrap .form-control:focus,
.ml-contact__form-wrap .form-select:focus {
  border-color: var(--color-green-dark);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.08);
  outline: none;
}

.ml-contact__form-wrap .form-control::placeholder,
.ml-contact__form-wrap .form-select::placeholder {
  color: var(--color-green-dark);
}

.ml-contact__submit {
  margin-top: 2.5rem !important;
  align-self: flex-start;
}

.form-check-input:checked {
  background-color: #84c447 !important;
  border-color: #84c447 !important;
}

/* Responsive */
@media (max-width: 991px) {
  .ml-contact__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 767px) {
  .ml-contact__form-wrap {
    padding: 1.5rem;
  }
}

/* Replace nav separator dots with lemon slice icons */
.site-header nav li:not(:last-child)::after {
  background-color: transparent;
  background-image: url('../img/universal/mojito-lemon-lemon-slice-icon-yellow.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 14px;
  height: 14px;
  border-radius: 0;
}

/* Language switcher: visible on mobile (overrides responsive.css display:none) */
@media (max-width: 767px) {
  .language-switcher {
    display: flex;
  }
}

/* Hero: lemon-fly-by backdrop when no Panel image is configured */
#hero {
  background-image: var(--hero-bg, url('../img/header/mojito-lemon-lemons-fly-by.png'));
}

/* -------------------------------------------------------------------------
   Hamburger header + nav: Mojito-Lemon lemon-fly-by backdrop (≤1439px).
   responsive.css provides structural layout (position, padding, max-height).
   This block adds brand-specific backgrounds and nav link colors.
   ------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  .site-header {
    background-color: var(--color-bg-hero);
    background-image: url('../img/header/mojito-lemon-lemons-fly-by.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    /* Viewport-Koordinaten: nahtlos mit #hero */
  }

  /* Hero: same fixed-attachment as header → same coordinate system */
  #hero {
    background-attachment: fixed;
  }

  .site-header nav[aria-label="Hauptnavigation"] {
    background-color: var(--color-bg-hero);
    background-image: url('../img/header/mojito-lemon-lemons-fly-by.png');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
  }

  .site-header nav a {
    color: var(--color-green-dark);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .site-header nav li:last-child a {
    border-bottom: none;
  }
}

/* =============================================================================
   HERO — video background
   ============================================================================= */

/* White title + description with shadow; keep yellow highlight */
#hero.has-bg-video .hero-content h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

#hero.has-bg-video .hero-content h1 .highlight {
  color: var(--color-yellow);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

#hero.has-bg-video .hero-content p {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

/* Button 2 (outline) becomes solid green */
#hero.has-bg-video .hero-content .cp-btn--outline {
  background-color: var(--color-green-accent);
  border-color: var(--color-green-accent);
  color: var(--color-white);
}

/* Header nav: white text with shadow when video hero is active (not pinned) */
body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) nav a {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .language-switcher__toggle {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1);
}

body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .language-switcher .icon-globe {
  filter: brightness(0) invert(1);
}

/* Logo swap: standard visible by default, video only over video hero.
   Specificity must beat .logo img { display: block } (0,1,1) from main-subpages.css → use (0,2,0). */
.logo .logo__img--video {
  display: none;
}

.logo .logo__img--standard {
  display: block;
}

body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .logo .logo__img--video {
  display: block;
}

body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .logo .logo__img--standard {
  display: none;
}

/* Mobile: the header always has a background (see the ≤1439px block above), so
   keep the dark/standard treatment even over a video hero. Same selector
   specificity as the has-bg-video rules above, placed later in source order so
   it wins inside this breakpoint only — desktop keeps the light-over-video look. */
@media (max-width: 1439px) {
  body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) nav a {
    color: var(--color-green-dark);
    text-shadow: none;
  }

  body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .language-switcher__toggle {
    color: var(--color-black);
    text-shadow: none;
  }

  body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .language-switcher .icon-globe {
    filter: none;
  }

  body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .logo .logo__img--video {
    display: none;
  }

  body:has(#hero.has-bg-video) .site-header:not(.site-header--is-pinned) .logo .logo__img--standard {
    display: block;
  }
}

/* Language switcher: remove Bootstrap active-item background */
.site-header .language-switcher__option.active {
  --bs-dropdown-link-active-bg: transparent;
}

/* =========================================================================
   Banner ticker
   ========================================================================= */
.ml-banner__ticker-wrap {
  overflow: hidden;
  padding-block: 1.125rem;
  margin-top: 1.5rem;
  margin-inline: 10%;
}

.ml-banner__ticker {
  display: flex;
  width: max-content;
  animation: ml-ticker-scroll 9.5s linear infinite;
}

.ml-banner__ticker-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ml-banner__ticker-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  white-space: nowrap;
}

.ml-banner__ticker-sep {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@keyframes ml-ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% / 10));
  }
}

.ml-banner__ticker-wrap:hover .ml-banner__ticker {
  animation-play-state: paused;
}