/* V54 – zentral bereinigte Animationen */
html{scroll-behavior:smooth}
.js-animate .reveal-v54{opacity:0;translate:0 12px;transition:opacity .46s cubic-bezier(.22,.61,.36,1),translate .46s cubic-bezier(.22,.61,.36,1)}
.js-animate .reveal-v54.is-visible-v54{opacity:1;translate:0 0}
.js-animate main{opacity:0;transition:opacity .18s ease}
.js-animate body.page-ready-v54 main{opacity:1}
.js-animate body.page-leaving-v54 main{opacity:0;pointer-events:none}
.hero-logo-v14{animation:heroFadeV54 .42s ease both}
.event-link-v14{animation:eventFadeV54 .50s .04s ease both}
@keyframes heroFadeV54{from{opacity:0}to{opacity:1}}
@keyframes eventFadeV54{from{opacity:0}to{opacity:1}}
.event-card,.kontakt-card,.legal-card,.video-frame,.drinks-card{transition:translate .2s ease,box-shadow .2s ease,border-color .2s ease}
.signup-btn,.mail-button{transition:translate .16s ease,scale .16s ease,box-shadow .16s ease,filter .16s ease}
@media(hover:hover) and (pointer:fine){.event-card:hover,.kontakt-card:hover,.legal-card:hover,.video-frame:hover,.drinks-card:hover{translate:0 -2px;box-shadow:0 20px 48px rgba(0,0,0,.28)}.signup-btn:hover,.mail-button:hover{translate:0 -1px;scale:1.006}}
.cocktail-item[open] .cocktail-content,.travel-item[open] .travel-content{animation:detailsV54 .18s ease both}
@keyframes detailsV54{from{opacity:0;translate:0 -3px}to{opacity:1;translate:0 0}}
.travel-mark img,.reise-grafik img,.kontakt-route img{animation:travelFloatV54 8s ease-in-out infinite}
@keyframes travelFloatV54{0%,100%{translate:0 0}50%{translate:0 -3px}}
.site-nav-v10 a,.site-nav-v10 a:link,.site-nav-v10 a:visited{color:#f3f0eb !important;opacity:1 !important}
.site-nav-v10 a.active,.site-nav-v10 a.active:link,.site-nav-v10 a.active:visited,.site-nav-v10 a.active:hover,.site-nav-v10 a.active:focus,.site-nav-v10 a.active:active{color:#ff2d72 !important;opacity:1 !important}
@media(min-width:901px){.site-nav-v10 a::before{display:none !important;content:none !important}.site-nav-v10 a{transition:color .16s ease !important;translate:none !important;transform:none !important;text-shadow:none !important}.site-nav-v10 a:hover{color:#ff2d72 !important;translate:none !important;transform:none !important;text-shadow:none !important}.site-nav-v10 a:not(.active)::after{opacity:0 !important}.site-nav-v10 a.active::after{opacity:1 !important;background:#ff2d72 !important}.first-visit-v54 .site-header-v10{animation:firstHeaderV54 .30s ease both}@keyframes firstHeaderV54{from{opacity:.9}to{opacity:1}}}
@media(max-width:900px){.site-nav-v10 a::before{display:none !important;content:none !important}.site-header-v10.menu-open-v46 .site-nav-v10{animation:mobilePanelV54 .18s ease both}@keyframes mobilePanelV54{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}.js-animate main,.js-animate .reveal-v54{opacity:1 !important;translate:none !important}}


/* =========================================================
   V55 – Zauberhafte Akkordeons + cleane Seitenwechsel
   ========================================================= */

/* Alte JS-Seitenwechsel vollständig neutralisieren.
   Kein künstliches Warten mehr vor dem Laden der nächsten HTML-Seite. */
.js-animate main,
.js-animate body.page-ready-v52 main,
.js-animate body.page-ready-v53 main,
.js-animate body.page-leaving-v52 main,
.js-animate body.page-leaving-v53 main{
  opacity:1 !important;
  translate:none !important;
  transform:none !important;
  transition:none !important;
  pointer-events:auto !important;
}

/* Moderne, browser-native Übergänge zwischen HTML-Seiten.
   Header und Inhalt laufen getrennt, dadurch bleibt das Menü ruhig. */
@view-transition{
  navigation:auto;
}

.site-header-v10{
  view-transition-name:mixtour-header;
}
main{
  view-transition-name:mixtour-page;
}

::view-transition-group(mixtour-header){
  animation-duration:.16s;
  animation-timing-function:ease;
}
::view-transition-old(mixtour-header),
::view-transition-new(mixtour-header){
  animation:menuCrossfadeV55 .16s ease both;
}

::view-transition-group(mixtour-page){
  animation-duration:.28s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(mixtour-page){
  animation:pageOutV55 .18s ease both;
}
::view-transition-new(mixtour-page){
  animation:pageInV55 .26s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes menuCrossfadeV55{
  from{opacity:.88}
  to{opacity:1}
}
@keyframes pageOutV55{
  from{opacity:1;filter:blur(0)}
  to{opacity:0;filter:blur(1.5px)}
}
@keyframes pageInV55{
  from{opacity:0;filter:blur(1.5px)}
  to{opacity:1;filter:blur(0)}
}

/* Cocktailkultur & Reisen:
   Inhalt wird per JS höhenanimiert. */
.js-animate details.magic-details-v55 > .cocktail-content,
.js-animate details.magic-details-v55 > .travel-content{
  overflow:hidden;
  will-change:height,opacity,translate;
}

/* geschlossene Inhalte bleiben sauber */
details.magic-details-v55:not([open]) > .cocktail-content,
details.magic-details-v55:not([open]) > .travel-content{
  height:0;
  opacity:0;
}

/* Beim Öffnen dezenter Glow am gesamten Punkt */
.cocktail-item,
.travel-item{
  transition:
    background-color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease;
}
.cocktail-item[open],
.travel-item[open]{
  background:rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}

/* Pfeil etwas lebendiger beim Öffnen */
.cocktail-chevron,
.travel-chevron{
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    filter .28s ease !important;
}
details[open] .cocktail-chevron,
details[open] .travel-chevron{
  filter:brightness(1.18);
}

/* Text/Tags im geöffneten Bereich kommen minimal versetzt rein */
.magic-details-v55.is-opening-v55 .cocktail-content > *,
.magic-details-v55.is-opening-v55 .travel-content > *{
  animation:detailChildrenInV55 .30s .06s ease both;
}
@keyframes detailChildrenInV55{
  from{opacity:0;translate:0 -4px}
  to{opacity:1;translate:0 0}
}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:auto}
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration:.001ms !important;
  }
  .js-animate details.magic-details-v55 > .cocktail-content,
  .js-animate details.magic-details-v55 > .travel-content{
    transition:none !important;
  }
}


/* =========================================================
   V56 – Garantierte Seitenwechsel für Edge/Chromium
   Kein View-Transition-API-Zwang mehr.
   ========================================================= */

/* Browser-native Übergänge werden nicht mehr benötigt. */
@view-transition{
  navigation:none;
}

/* Fester Übergangs-Layer über der kompletten Seite.
   Er verdeckt den harten HTML-Seitenwechsel zuverlässig. */
.page-transition-v56{
  position:fixed;
  inset:0;
  z-index:999999;
  pointer-events:none;
  opacity:1;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,45,114,.045), transparent 34%),
    rgba(5,8,11,.985);
  transition:opacity .28s cubic-bezier(.22,.61,.36,1);
  will-change:opacity;
}

/* Nach dem Laden weich freigeben */
body.page-entered-v56 .page-transition-v56{
  opacity:0;
}

/* Beim Verlassen wieder weich abdunkeln */
body.page-exiting-v56 .page-transition-v56{
  opacity:1;
  pointer-events:auto;
  transition-duration:.20s;
}

/* Inhalt selbst bewegt sich nur minimal – kein Ruckeln */
body.page-entered-v56 main{
  animation:contentInV56 .34s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes contentInV56{
  from{opacity:.72}
  to{opacity:1}
}

/* Menü bleibt während des Seitenwechsels optisch stabil */
.site-header-v10{
  isolation:isolate;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .page-transition-v56{
    transition:none !important;
    opacity:0 !important;
  }
  body.page-entered-v56 main{
    animation:none !important;
  }
}


/* =========================================================
   V57 – schöne Ladeanimation zurück + Menü bleibt konstant
   ========================================================= */

/* Header/Menü immer oberhalb des Seitenübergangs halten */
.site-header-v10{
  position:relative;
  z-index:1000001 !important;
}

/* Übergangslayer nur über dem Seiteninhalt – NICHT über dem Menü */
.page-transition-v56{
  z-index:1000000 !important;
}

/* Die schöne Einblendanimation beim Laden einer Seite ist wieder da.
   Nur MAIN animiert – der Header bleibt komplett stabil. */
body.page-entered-v57 main{
  animation:beautifulPageInV57 .58s cubic-bezier(.22,.61,.36,1) both !important;
}

@keyframes beautifulPageInV57{
  0%{
    opacity:0;
    translate:0 12px;
    filter:blur(2px);
  }
  55%{
    opacity:.92;
  }
  100%{
    opacity:1;
    translate:0 0;
    filter:blur(0);
  }
}

/* Beim Seitenwechsel nur der Inhalt + Layer, niemals der Header */
body.page-exiting-v57 main{
  animation:beautifulPageOutV57 .18s ease both !important;
  pointer-events:none;
}

@keyframes beautifulPageOutV57{
  from{
    opacity:1;
    translate:0 0;
    filter:blur(0);
  }
  to{
    opacity:.18;
    translate:0 -3px;
    filter:blur(1px);
  }
}

/* Alte V56 Inhaltsanimation neutralisieren, damit nichts doppelt läuft */
body.page-entered-v56 main{
  animation:none !important;
}

/* Menü selbst behält nur seine eigenen Hover-/Mobile-Animationen.
   Keine Abdunklung, kein Fade beim Seitenwechsel. */
body.page-exiting-v57 .site-header-v10,
body.page-entered-v57 .site-header-v10{
  opacity:1 !important;
  filter:none !important;
  translate:none !important;
  transform:none !important;
  animation:none !important;
}

/* Beim allerersten Besuch darf der Header weiterhin dezent einblenden. */
.first-visit-v52 .site-header-v10{
  animation:firstHeaderV52 .38s ease both !important;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  body.page-entered-v57 main,
  body.page-exiting-v57 main{
    animation:none !important;
    opacity:1 !important;
    translate:none !important;
    filter:none !important;
  }
}


/* =========================================================
   V58 – maximal cleaner Seitenwechsel
   Nur Crossfade. Kein Blur. Kein Slide. Kein Overlay.
   Menü bleibt komplett stabil.
   ========================================================= */

/* V56/V57 Übergangs-Layer deaktivieren */
.page-transition-v56{
  display:none !important;
}

/* Alte Enter/Exit-Animationen neutralisieren */
body.page-entered-v56 main,
body.page-entered-v57 main,
body.page-exiting-v57 main,
body.page-entered-v58 main,
body.page-exiting-v58 main{
  translate:none !important;
  transform:none !important;
  filter:none !important;
}

/* Standardzustand: Inhalt unsichtbar bis Ready-Klasse gesetzt wird */
.js-animate main{
  opacity:0 !important;
  transition:opacity .22s ease !important;
  will-change:opacity;
}

/* Neue Seite: weich einblenden */
.js-animate body.page-entered-v58 main{
  opacity:1 !important;
}

/* Alte Seite: kurz ausblenden */
.js-animate body.page-exiting-v58 main{
  opacity:0 !important;
  transition:opacity .14s ease !important;
  pointer-events:none;
}

/* Header/Menu niemals Teil des Seitenwechsels */
.site-header-v10,
body.page-entered-v58 .site-header-v10,
body.page-exiting-v58 .site-header-v10{
  opacity:1 !important;
  translate:none !important;
  transform:none !important;
  filter:none !important;
  animation:none !important;
}

/* Beim allerersten Website-Besuch darf der Header weiterhin
   seinen dezenten einmaligen Fade bekommen. */
.first-visit-v52 .site-header-v10{
  animation:firstHeaderV52 .38s ease both !important;
}

/* Keine View-Transition-API verwenden */
@view-transition{
  navigation:none;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .js-animate main,
  .js-animate body.page-entered-v58 main,
  .js-animate body.page-exiting-v58 main{
    opacity:1 !important;
    transition:none !important;
  }
}

/* V68 – auf Desktop ersetzt eine einzige bewegliche Linie die einzelnen
   Pseudo-Unterstreichungen. Mobil bleibt die bisherige aktive Linie erhalten. */
@media(min-width:901px){
  .site-nav-v10 a::after,
  .site-nav-v10 a.active::after{
    display:none !important;
    content:none !important;
  }
}

/* =========================================================
   V65 – einheitliche Buttons + Schutz gegen Mobile-Überlauf
   ========================================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

main,
header,
nav,
section,
article,
aside,
div{
  min-width:0;
}

img,
video,
svg{
  max-width:100%;
}

/* Alle normalen Aktionsbuttons verwenden dasselbe Mixtour-Design. */
.signup-btn,
.mail-button,
.membership-button,
.home-button{
  min-height:54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:13px 20px !important;
  border:0 !important;
  border-radius:12px !important;
  color:#05080b !important;
  background:linear-gradient(90deg,#ff3f85,#ffb82e 36%,#d8ef4a 58%,#1ed6f3) !important;
  box-shadow:none !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  font-size:.98rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  text-align:center !important;
  white-space:normal !important;
  translate:none !important;
  scale:1 !important;
  transition:transform .18s ease,filter .18s ease !important;
}

.signup-btn,
.mail-button{
  width:100% !important;
  max-width:100% !important;
}

.membership-button,
.home-button{
  width:min(100%,320px) !important;
  max-width:100% !important;
}

@media(hover:hover) and (pointer:fine){
  .signup-btn:hover,
  .mail-button:hover,
  .membership-button:hover,
  .home-button:hover{
    transform:translateY(-2px) !important;
    translate:none !important;
    filter:brightness(1.05) !important;
    scale:1 !important;
  }
}

@media(max-width:600px){
  .site-header-v10,
  .site-nav-v10,
  main,
  .event-feature,
  .event-card,
  .event-actions,
  .drinks-card,
  .offer-line,
  .future-strip,
  .cocktail-intro,
  .cocktail-list,
  .reisen-intro,
  .travel-list,
  .story-layout,
  .story-inner,
  .about-video-wrap,
  .kontakt-layout,
  .kontakt-card,
  .legal-grid,
  .legal-card,
  .membership-main,
  .membership-story,
  .membership-action,
  .error-intro,
  .error-visual,
  .coming-intro,
  .coming-copy,
  .coming-route{
    min-width:0 !important;
    max-width:100% !important;
  }

  .cocktail-intro .travel-mark,
  .reisen-intro .reise-grafik,
  .future-strip .travel-mark,
  .membership-route,
  .kontakt-route,
  .coming-route{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden;
  }

  .cocktail-intro .travel-mark img,
  .reisen-intro .reise-grafik img,
  .future-strip .travel-mark img,
  .kontakt-route img,
  .coming-route img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .membership-route img{
    display:block !important;
    width:min(100%,451px) !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  .error-visual{
    overflow:hidden;
  }

  h1,
  h2,
  h3,
  p,
  a,
  strong,
  span{
    overflow-wrap:anywhere;
  }

  .membership-button,
  .home-button{
    width:100% !important;
  }
}

@media(max-width:360px){
  .cocktail-main,
  .reisen-main,
  .kontakt-main,
  .legal-main,
  .membership-main,
  .error-main,
  .coming-main{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .cocktail-item summary,
  .travel-item summary{
    grid-template-columns:18px minmax(0,1fr) 26px !important;
    gap:8px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .cocktail-content,
  .travel-content{
    padding-left:30px !important;
    padding-right:12px !important;
  }
}