/* ──────────────────────────────────────────────────────────
   Leohaz: Video Lightbox
   Desktop : Balken + Flasche zentriert (1s Animation, 1.3s Fade)
   Mobile  : Thumbnail-Vorschau + Flasche-Cover (2s Animation, 2.5s Fade)

   Datei löschen = Lightbox weg, keine Fehler in functions.php.
   ────────────────────────────────────────────────────────── */

#lhz-lightbox {
  position: fixed;
  inset: 0;
  background: #2a2a2a;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease-out;
}

#lhz-lightbox.lhz-lb-open {
  opacity: 1;
  pointer-events: auto;
}

/* Querformat-Container (Default: 16:9) */
#lhz-lightbox .lhz-lb-video-wrap {
  position: relative;
  width: min(90vw, calc(90vh * (16 / 9)));
  aspect-ratio: 16 / 9;
  max-width: 90vw;
  max-height: 90vh;
}

/* Hochformat-Container (9:16) */
#lhz-lightbox .lhz-lb-video-wrap.portrait {
  width: min(90vw, calc(90vh * (9 / 16)));
  aspect-ratio: 9 / 16;
}

#lhz-lightbox iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

/* Mobile: iframe empfängt Touch für besseres Autoplay */
@media (max-width: 767px) {
  #lhz-lightbox iframe {
    pointer-events: auto;
  }
  #lhz-lightbox .lhz-lb-video-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* Click-Overlay Desktop: blockiert Hover → keine YouTube-Controls sichtbar */
#lhz-lightbox .lhz-click-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* Balken oben + unten (Desktop) */
#lhz-lightbox .lhz-bar {
  position: absolute;
  left: 0;
  right: 0;
  background: #2a2a2a;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.6s ease-in;
}
#lhz-lightbox .lhz-bar-top    { top: 0;    height: 80px; }
#lhz-lightbox .lhz-bar-bottom { bottom: 0; height: 80px; }
#lhz-lightbox .lhz-bar-top.lhz-bar-out    { transform: translateY(-100%); }
#lhz-lightbox .lhz-bar-bottom.lhz-bar-out { transform: translateY(100%);  }

/* Close-Button */
#lhz-lightbox .lhz-lb-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 44px;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  font-family: sans-serif;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
#lhz-lightbox .lhz-lb-close:hover { opacity: 1; }

/* Scroll-Lock */
body.lhz-lb-active { overflow: hidden; }

/* ────────────────────────────────────────────────────
   FLASCHEN-ANIMATIONEN
   ──────────────────────────────────────────────────── */

/* Mobile: voller Schwung von Anfang (0° → 450°), 2s */
@keyframes lhz-bottle-mobile {
  0%   { transform: rotate(0deg)   scale(1);    }
  70%  { transform: rotate(470deg) scale(1.06); }
  84%  { transform: rotate(438deg) scale(1);    }
  100% { transform: rotate(450deg) scale(1);    }
}

/* Desktop: Anfang abgeschnitten (240° → 450°), landet schnell auf dem Kopf */
@keyframes lhz-bottle-desktop {
  0%   { transform: rotate(240deg) scale(1);    }
  65%  { transform: rotate(468deg) scale(1.04); }
  82%  { transform: rotate(441deg) scale(1);    }
  100% { transform: rotate(450deg) scale(1);    }
}

/* Basis-Stil für alle Flaschen */
#lhz-lightbox .lhz-bottle-anim {
  width: 160px;
  height: auto;
  filter: invert(1);
  transform-origin: center center;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Cover: lhz-bottle-home (2 Umdrehungen, startet auf dem Kopf, 2.3s) */
#lhz-lightbox .lhz-start-cover .lhz-bottle-anim {
  animation-name: lhz-bottle-home;
  animation-duration: 2.3s;
  animation-delay: 0.1s;
}

/* Desktop Wrap: kürzere Animation, ab Mitte einsteigen */
#lhz-lightbox .lhz-bottle-desk-wrap .lhz-bottle-anim {
  animation-name: lhz-bottle-desktop;
  animation-duration: 1s;
  animation-delay: 0s;
}

/* Mobile Cover: Vollbild über Lightbox */
#lhz-lightbox .lhz-start-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #2a2a2a;
  opacity: 1;
  transition: opacity 0.6s ease-out;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Cover: Flasche wie Homepage — grau, Übergang zu grün wie lhz-home-bottle */
#lhz-lightbox .lhz-start-cover .lhz-bottle-anim {
  filter: invert(0.5) sepia(0) hue-rotate(0deg) saturate(1) brightness(1);
  transition: filter 0.7s ease;
}
#lhz-lightbox .lhz-start-cover .lhz-bottle-anim.lhz-lb-bottle-green {
  filter: invert(0.5) sepia(1) hue-rotate(86deg) saturate(20) brightness(1.2);
}

/* Mobile Cover: Münzen gold wie auf Homepage */
#lhz-lightbox .lhz-start-cover .lhz-coin {
  border-color: rgba(255, 200, 10, 0.88);
}
#lhz-lightbox .lhz-start-cover .lhz-coin::before {
  color: rgba(255, 200, 10, 0.88);
}

/* Desktop: Flasche zentriert zwischen den Balken */
#lhz-lightbox .lhz-bottle-desk-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

/* Play-Button: dezenter Kreis mit weißem Dreieck */
.lhz-mob-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.75);
  position: relative;
  pointer-events: none;
  flex-shrink: 0;
}
.lhz-mob-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 57%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 22px;
  border-color: transparent transparent transparent #fff;
}

/* ──────────────────────────────────────────────────────────
   MÜNZEN — fallen aus dem Flaschen-Stöpsel (Mobile)
   Startpunkt: ~80px unter Bildschirmmitte = Stöpsel nach Drehung.
   Falls Position nicht stimmt: top-Wert in .lhz-coin-wrap anpassen.
   ────────────────────────────────────────────────────────── */

.lhz-coin-wrap {
  position: absolute;
  left: 50%;
  top: calc(50% + 80px);
  pointer-events: none;
}

/* Weiße Kreise, gleiche Linienstärke wie Flasche.
   Hinter der Flasche (DOM-Reihenfolge), langsam fallend.
   Kreis → Ellipse → Kreis durch scaleX-Oszillation.
   € Symbol → Münzen klar als Geld erkennbar (kein Wassertropfen/Knopf). */
.lhz-coin {
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10px;
  top: -10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.88);
  opacity: 0;
  pointer-events: none;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.lhz-coin::before {
  content: '€';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.88);
  font-family: sans-serif;
  font-weight: normal;
  pointer-events: none;
}

/* Rotation: leichte Neigung pro Münze, zusätzlich zur scaleX-Flip-Illusion */
@keyframes lhz-coin-drop-1 {
  0%   { opacity: 0; transform: translate(  0px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate( -4px, 17px) scaleX(0.12) rotate(-12deg); }
  50%  { transform: translate( -8px, 33px) scaleX(1.00) rotate(-25deg); }
  75%  { transform: translate(-12px, 50px) scaleX(0.12) rotate(-36deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-16px, 66px) scaleX(1.00) rotate(-45deg); }
}

@keyframes lhz-coin-drop-2 {
  0%   { opacity: 0; transform: translate(  0px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate( -2px, 20px) scaleX(0.12) rotate(  8deg); }
  50%  { transform: translate( -3px, 39px) scaleX(1.00) rotate( 16deg); }
  75%  { transform: translate( -5px, 59px) scaleX(0.12) rotate( 24deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate( -6px, 78px) scaleX(1.00) rotate( 30deg); }
}

@keyframes lhz-coin-drop-3 {
  0%   { opacity: 0; transform: translate(  0px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(  1px, 21px) scaleX(0.12) rotate( -5deg); }
  50%  { transform: translate(  2px, 41px) scaleX(1.00) rotate(-11deg); }
  75%  { transform: translate(  2px, 62px) scaleX(0.12) rotate(-16deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(  3px, 82px) scaleX(1.00) rotate(-20deg); }
}

@keyframes lhz-coin-drop-6 {
  0%   { opacity: 0; transform: translate( -3px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(  1px, 20px) scaleX(0.12) rotate( 13deg); }
  50%  { transform: translate(  5px, 39px) scaleX(1.00) rotate( 25deg); }
  75%  { transform: translate(  9px, 58px) scaleX(0.12) rotate( 38deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate( 13px, 76px) scaleX(1.00) rotate( 50deg); }
}

@keyframes lhz-coin-drop-4 {
  0%   { opacity: 0; transform: translate(  0px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(  3px, 19px) scaleX(0.12) rotate( -9deg); }
  50%  { transform: translate(  6px, 37px) scaleX(1.00) rotate(-18deg); }
  75%  { transform: translate(  9px, 56px) scaleX(0.12) rotate(-27deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate( 12px, 74px) scaleX(1.00) rotate(-35deg); }
}

@keyframes lhz-coin-drop-5 {
  0%   { opacity: 0; transform: translate(  0px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(  5px, 16px) scaleX(0.12) rotate(  6deg); }
  50%  { transform: translate( 11px, 32px) scaleX(1.00) rotate( 13deg); }
  75%  { transform: translate( 16px, 48px) scaleX(0.12) rotate( 19deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate( 21px, 64px) scaleX(1.00) rotate( 25deg); }
}

/* Münze 7: letzter Tropfen — großer Abstand, fast senkrecht, vereinzelt */
@keyframes lhz-coin-drop-7 {
  0%   { opacity: 0; transform: translate(  1px,  0px) scaleX(1.00) rotate(  0deg); }
  8%   { opacity: 1; }
  25%  { transform: translate(  1px, 18px) scaleX(0.12) rotate( -4deg); }
  50%  { transform: translate(  2px, 36px) scaleX(1.00) rotate( -8deg); }
  75%  { transform: translate(  2px, 54px) scaleX(0.12) rotate(-12deg); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(  3px, 72px) scaleX(1.00) rotate(-15deg); }
}

/* Delays leicht variiert für organischeres Gefühl; Münze 6 diagonal zwischen 3 und 4;
   Münze 7 großer Abstand = letzter Tropfen. Duration pro Münze leicht unterschiedlich. */
.lhz-coin-1 { animation-name: lhz-coin-drop-1; animation-duration: 1.05s; animation-delay: 1.00s; }
.lhz-coin-2 { animation-name: lhz-coin-drop-2; animation-duration: 0.95s; animation-delay: 1.13s; }
.lhz-coin-3 { animation-name: lhz-coin-drop-3; animation-duration: 1.10s; animation-delay: 1.28s; }
.lhz-coin-6 { animation-name: lhz-coin-drop-6; animation-duration: 0.90s; animation-delay: 1.40s; }
.lhz-coin-4 { animation-name: lhz-coin-drop-4; animation-duration: 1.05s; animation-delay: 1.47s; }
.lhz-coin-5 { animation-name: lhz-coin-drop-5; animation-duration: 1.15s; animation-delay: 1.58s; }
.lhz-coin-7 { animation-name: lhz-coin-drop-7; animation-duration: 0.95s; animation-delay: 2.08s; }

/* Größenvariation: natürlicheres Bild (Basis: 20px via .lhz-coin) */
.lhz-coin-1 { width: 24px; height: 24px; left: -12px; top: -12px; }
.lhz-coin-1::before { font-size: 11px; }
.lhz-coin-2 { width: 18px; height: 18px; left: -9px;  top: -9px;  }
.lhz-coin-2::before { font-size: 8px; }
.lhz-coin-5 { width: 22px; height: 22px; left: -11px; top: -11px; }
.lhz-coin-5::before { font-size: 10px; }
.lhz-coin-6 { width: 22px; height: 22px; left: -11px; top: -11px; }
.lhz-coin-6::before { font-size: 10px; }
.lhz-coin-7 { width: 14px; height: 14px; left: -7px;  top: -7px;  }
.lhz-coin-7::before { font-size: 6px; }

/* ────────────────────────────────────────────────────
   HOMEPAGE FLASCHE + MÜNZEN — Desktop only, Startseite
   Shortcode [leohaz_bottle] im Elementor-Widget.
   ─────────────────────────────────────────────────── */

/* Eltern-Elemente dürfen Münzen nicht abschneiden (overflow:visible).
   :has() = Chrome 105+, Firefox 121+, Safari 15.4+ */
.elementor-section:has(.lhz-home-bottle-wrap),
.elementor-container:has(.lhz-home-bottle-wrap),
.elementor-row:has(.lhz-home-bottle-wrap),
.elementor-column:has(.lhz-home-bottle-wrap),
.elementor-widget-wrap:has(.lhz-home-bottle-wrap),
.elementor-widget:has(.lhz-home-bottle-wrap),
.elementor-widget-container:has(.lhz-home-bottle-wrap),
.e-con:has(.lhz-home-bottle-wrap),
.e-con-inner:has(.lhz-home-bottle-wrap) {
  overflow: visible !important;
}

.lhz-home-bottle-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
  cursor: pointer;
  overflow: visible;
}

.lhz-home-bottle {
  position: relative;
  z-index: 1;
  width: 110px;
  height: auto;
  /* Gleiche Funktionsliste in beiden Zuständen → smooth transition grau ↔ grün */
  filter: invert(0.5) sepia(0) hue-rotate(0deg) saturate(1) brightness(1);
  transition: filter 0.7s ease;
  transform-origin: center center;
  display: block;
}

/* Flasche grün (≈ Herz-Icon #00FF00) während der Drehung */
.lhz-home-bottle.lhz-home-green {
  filter: invert(0.5) sepia(1) hue-rotate(86deg) saturate(20) brightness(1.2);
}

/* Homepage-Flasche: startet auf dem Kopf (90°), 2 volle Umdrehungen → landet auf dem Kopf.
   Separate Keyframes → mobile Lightbox-Animation bleibt unverändert. */
@keyframes lhz-bottle-home {
  0%   { transform: rotate( 90deg) scale(1);    }  /* Startpos = auf dem Kopf */
  70%  { transform: rotate(830deg) scale(1.06); }  /* Überschwinger */
  84%  { transform: rotate(798deg) scale(1);    }  /* Einschwingen */
  100% { transform: rotate(810deg) scale(1);    }  /* Endpos = auf dem Kopf (810°≡90°) */
}

.lhz-home-bottle.lhz-home-anim {
  animation-name: lhz-bottle-home;
  animation-duration: 2.3s;  /* +0.3s für die zusätzliche Umdrehung */
  animation-delay: 0.1s;
  animation-fill-mode: both;  /* both → zeigt 0%-Keyframe auch vor dem Delay */
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Münzwrap: über nachfolgendem Text schwebend (z-index 9999).
   top 65px: 50% des Wraps + Padding-Offset (8px) + halbe Flaschenbreite (55px) ≈ 63px. */
.lhz-home-coin-wrap {
  position: absolute;
  left: 50%;
  top: calc(50% + 65px);
  z-index: 9999;
  pointer-events: none;
}

/* Münzen: warm goldgelb */
.lhz-home-coin-wrap .lhz-coin {
  border-color: rgba(255, 200, 10, 0.88);
}
.lhz-home-coin-wrap .lhz-coin::before {
  color: rgba(255, 200, 10, 0.88);
}

/* lhz-home-bottle-wrap: auf allen Geräten sichtbar (kein display:none) */