.ticket[data-model-id="51"] .hippie-photo-frame{display:block;background:linear-gradient(#f8fdfe,#e9f7fa);position:relative}.ticket[data-model-id="51"] .hippie-photo-frame>img{aspect-ratio:4/3;object-fit:contain;background:transparent}.atlantis-gallery .gallery-frame{aspect-ratio:4/3;background:linear-gradient(#f8fdfe,#e9f7fa);position:relative}.atlantis-gallery .gallery-frame>img{width:100%;height:100%;max-height:none;object-fit:contain}.title-hippie-atlantis img{width:100%!important;height:100%!important;object-fit:contain}.title-hippie-atlantis{width:clamp(80px,25%,160px)!important;height:auto!important;aspect-ratio:1;right:0!important;bottom:0!important;left:auto!important;top:auto!important}.atlantis-gallery .gallery-frame:not([data-gallery-panel="1"]){display:none}.atlantis-gallery:has(input[value="1"]:checked) .gallery-frame{display:none}.atlantis-gallery:has(input[value="1"]:checked) .gallery-frame[data-gallery-panel="1"]{display:flex}.atlantis-gallery:has(input[value="2"]:checked) .gallery-frame{display:none}.atlantis-gallery:has(input[value="2"]:checked) .gallery-frame[data-gallery-panel="2"]{display:flex}.atlantis-gallery:has(input[value="3"]:checked) .gallery-frame{display:none}.atlantis-gallery:has(input[value="3"]:checked) .gallery-frame[data-gallery-panel="3"]{display:flex}.atlantis-gallery:has(input[value="4"]:checked) .gallery-frame{display:none}.atlantis-gallery:has(input[value="4"]:checked) .gallery-frame[data-gallery-panel="4"]{display:flex}.atlantis-gallery:has(input[value="5"]:checked) .gallery-frame{display:none}.atlantis-gallery:has(input[value="5"]:checked) .gallery-frame[data-gallery-panel="5"]{display:flex}
/* TRIO PORTRAIT */
.ticket[data-model-id="51"] .hippie-photo-frame{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:#e9f7fa}.ticket[data-model-id="51"] .hippie-photo-frame>img{width:100%!important;height:100%!important;aspect-ratio:3/4!important;object-fit:contain!important}.ticket[data-model-id="51"] .ticket-photo-hint,.ticket[data-model-id="51"] .ticketno{position:static!important;display:block}.ticket[data-model-id="52"] .hippie-photo-frame{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:#e9f7fa}.ticket[data-model-id="52"] .hippie-photo-frame>img{width:100%!important;height:100%!important;aspect-ratio:3/4!important;object-fit:contain!important}.ticket[data-model-id="52"] .ticket-photo-hint,.ticket[data-model-id="52"] .ticketno{position:static!important;display:block}.ticket[data-model-id="53"] .hippie-photo-frame{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:#e9f7fa}.ticket[data-model-id="53"] .hippie-photo-frame>img{width:100%!important;height:100%!important;aspect-ratio:3/4!important;object-fit:contain!important}.ticket[data-model-id="53"] .ticket-photo-hint,.ticket[data-model-id="53"] .ticketno{position:static!important;display:block}
.trio-portrait .gallery-frame{position:relative}.atlantis-gallery .gallery-frame{aspect-ratio:3/4}.trio-portrait .gallery-frame{aspect-ratio:3/4;max-height:640px;background:#e9f7fa}.trio-portrait .gallery-frame>img{width:100%;height:100%;max-height:none;object-fit:contain}
.ticket[data-model-id="51"] .ticketimage{height:auto!important;padding:0!important}.ticket[data-model-id="51"] .ticket-photo-open{display:block}.ticket[data-model-id="51"] .ticketimage img{mix-blend-mode:normal}.ticket[data-model-id="52"] .ticketimage{height:auto!important;padding:0!important}.ticket[data-model-id="52"] .ticket-photo-open{display:block}.ticket[data-model-id="52"] .ticketimage img{mix-blend-mode:normal}.ticket[data-model-id="53"] .ticketimage{height:auto!important;padding:0!important}.ticket[data-model-id="53"] .ticket-photo-open{display:block}.ticket[data-model-id="53"] .ticketimage img{mix-blend-mode:normal}.trio-hippie,.title-hippie-atlantis{position:absolute!important;inset:auto 0 0 auto!important;width:clamp(64px,20%,110px)!important;height:auto!important;aspect-ratio:1;display:block;z-index:3;pointer-events:none;transform-origin:50% 100%}
.trio-hippie>img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important;background:transparent!important;border:0!important;aspect-ratio:1!important}
.trio-hippie:before,.trio-hippie:after{position:absolute;content:'';width:10px;height:10px;border:2px solid #64d8f0;border-radius:50%;left:5%;top:25%;opacity:0}
.trio-hippie-einhorn:before,.trio-hippie-einhorn:after{content:'✦';border:0;border-radius:0;color:#dba32a;font-size:24px;line-height:1}
/* Individuelle Kurzszenen, abgestimmt auf bereits vorhandene Motiv-Animationen.
   Atlantis: Welle am Wasser, Midi: schwimmender Bogen, Isabell: Einhornsprung.
   Einmal beim Sichtbarwerden; weder Dauerschleife noch automatischer Ton. */
.ticket[data-model-id="51"] .hippie-party-playing,
.atlantis-gallery .hippie-party-playing{animation:atlantis-wave-greeting 6s ease-in-out 1 both}
.ticket[data-model-id="52"] .hippie-party-playing{animation:midi-mermaid-swim 6s ease-in-out 1 both}
.ticket[data-model-id="53"] .hippie-party-playing{animation:isabell-unicorn-skip 6s ease-in-out 1 both}
.ticket[data-model-id="51"] .hippie-party-playing::before,
.ticket[data-model-id="51"] .hippie-party-playing::after,
.atlantis-gallery .hippie-party-playing::before,
.atlantis-gallery .hippie-party-playing::after,
.ticket[data-model-id="52"] .hippie-party-playing::before,
.ticket[data-model-id="52"] .hippie-party-playing::after{animation:trio-hippie-bubbles 2s ease-out 3 both}
.ticket[data-model-id="53"] .hippie-party-playing::before,
.ticket[data-model-id="53"] .hippie-party-playing::after{animation:isabell-magic-sparkle 3s ease-out 2 both}
.hippie-party-playing:after{left:auto;right:4%;top:12%;animation-delay:.4s}
@keyframes atlantis-wave-greeting{
  0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-3px,-4px) rotate(-8deg)}
  30%{transform:translate(-8px,-8px) rotate(5deg)}
  48%{transform:translate(-4px,-2px) rotate(-5deg)}
  65%{transform:translate(-10px,-7px) rotate(9deg)}
  82%{transform:translate(-3px,-3px) rotate(-4deg)}
}
@keyframes midi-mermaid-swim{
  0%,100%{transform:translate(0,0) rotate(0)}
  18%{transform:translate(-12px,-7px) rotate(-10deg)}
  38%{transform:translate(-22px,-18px) rotate(3deg)}
  58%{transform:translate(-12px,-13px) rotate(9deg)}
  78%{transform:translate(-4px,-6px) rotate(-4deg)}
}
@keyframes isabell-unicorn-skip{
  0%,100%{transform:translate(0,0) rotate(0) scale(1)}
  16%{transform:translate(-5px,-16px) rotate(-7deg) scale(1.03)}
  31%{transform:translate(-8px,0) rotate(4deg) scale(.98)}
  50%{transform:translate(-4px,-22px) rotate(7deg) scale(1.04)}
  68%{transform:translate(-6px,0) rotate(-3deg) scale(.99)}
  83%{transform:translate(0,-8px) rotate(4deg) scale(1.01)}
}
@keyframes trio-hippie-bubbles{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-35px) scale(1.15)}}
@keyframes isabell-magic-sparkle{0%,100%{opacity:0;transform:scale(.5) rotate(0)}30%{opacity:1;transform:translateY(-8px) scale(1.1) rotate(35deg)}70%{opacity:.7;transform:translateY(-22px) scale(.8) rotate(-25deg)}}
@media(prefers-reduced-motion:reduce){
 .hippie-party-playing,.hippie-party-playing::before,.hippie-party-playing::after{animation:none!important}
}


/* Harmonische Hochformatkarten: identisches Fenster, unbeschnittene Originale.
   Nur die leeren Ränder erhalten eine weichgezeichnete Kopie des gleichen Fotos. */
#full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  background:#e9f7fa;
}
#full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame::before{
  content:"";
  position:absolute;
  inset:-12px;
  z-index:0;
  background-position:center;
  background-size:cover;
  filter:blur(16px) saturate(.8) brightness(1.08);
  opacity:.55;
  pointer-events:none;
}
#full-cards .ticket[data-model-id="52"] .hippie-photo-frame::before{background-image:url("./magic-meerjungfrau-huepfburg-360.webp")}
#full-cards .ticket[data-model-id="53"] .hippie-photo-frame::before{background-image:url("./einhorn-isabell-360.webp")}
#full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame>img{
  position:relative!important;
  z-index:1;
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}
#full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .trio-hippie{z-index:3}
/* Ein klarer Details-Button pro Karte. Das ganze Foto bleibt zusätzlich verlinkt. */
#full-cards .ticket-photo-hint{display:none!important}

#full-cards .ticket[data-model-id="51"] .hippie-photo-frame::before{background-image:url("./meerjungfrau-atlantis-360.webp")}
#full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame>img{aspect-ratio:3/4!important;object-fit:contain!important;height:100%!important;width:100%!important;object-position:center!important}

/* Smartphone: unveränderte Kartenbreiten und Kartenoptik, natürliches Fotoformat.
   Die Motivhöhe folgt dem Original, damit queres Atlantis weder winzig
   im hohen 3:4-Fenster noch beschnitten dargestellt wird. */
@media (max-width:760px){
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .ticketimage{
   height:auto!important;
   aspect-ratio:auto!important;
   padding:0!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .ticket-photo-open{
   display:block!important;
   width:100%!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame{
   display:block!important;
   width:100%!important;
   height:auto!important;
   aspect-ratio:auto!important;
   background:#e9f7fa!important;
   overflow:hidden!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame::before{
   display:none!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame>img{
   display:block!important;
   position:relative!important;
   width:100%!important;
   height:auto!important;
   aspect-ratio:auto!important;
   max-height:none!important;
   object-fit:contain!important;
   object-position:center!important;
   background:transparent!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) :is(.trio-hippie,.title-hippie-atlantis){
   position:absolute!important;
   top:auto!important;
   right:0!important;
   bottom:0!important;
   left:auto!important;
   z-index:3!important;
 }
}

/* Smartphone only: gleich große 3:4-Fotofenster wie bestehende Hochformatkarten.
   Fotos gezielt und unverzerrt zoomen statt graue/unscharfe Leerränder.
   Zuschnitt ist bewusst: Midi oben/unten, Isabell an den Seiten.
   Andere Geräte und Atlantis bleiben unverändert. */
@media (max-width:760px){
 #full-cards .ticket:is([data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame{
   display:block!important;
   position:relative!important;
   width:100%!important;
   height:auto!important;
   aspect-ratio:3/4!important;
   overflow:hidden!important;
   isolation:isolate;
   background:#e9f7fa!important;
 }
 #full-cards .ticket:is([data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame::before{
   display:none!important;
 }
 #full-cards .ticket:is([data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame>img{
   position:absolute!important;
   inset:0!important;
   display:block!important;
   width:100%!important;
   height:100%!important;
   max-height:none!important;
   aspect-ratio:auto!important;
   object-fit:cover!important;
   object-position:center!important;
   transform:none!important;
   background:transparent!important;
   z-index:1!important;
 }
 /* Midi: weniger Himmel und Bodenplane, Frontmotiv im Zentrum. */
 #full-cards .ticket[data-model-id="52"] .hippie-photo-frame>img{
   object-position:50% 48%!important;
 }
 /* Isabell: mittiger Ausschnitt mit Rutsche und Einhorn. */
 #full-cards .ticket[data-model-id="53"] .hippie-photo-frame>img{
   object-position:50% 50%!important;
 }
}

/* Desktop comparison: three equal catalogue windows, photograph fills the frame.
   Do not touch the successful mobile crop or alter cards, prices or mascots. */
@media (min-width:761px){
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame{
   position:relative!important;
   display:block!important;
   width:100%!important;
   height:auto!important;
   aspect-ratio:3/4!important;
   overflow:hidden!important;
   background:#e9f7fa!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame::before{
   display:none!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame>img{
   display:block!important;
   position:absolute!important;
   inset:0!important;
   width:100%!important;
   height:100%!important;
   max-height:none!important;
   aspect-ratio:auto!important;
   object-fit:cover!important;
   transform:none!important;
   background:transparent!important;
   z-index:1!important;
 }
 /* Choose meaningful subject placement for each original image. */
 #full-cards .ticket[data-model-id="51"] .hippie-photo-frame>img{object-position:54% 50%!important}
 #full-cards .ticket[data-model-id="52"] .hippie-photo-frame>img{object-position:50% 48%!important}
 #full-cards .ticket[data-model-id="53"] .hippie-photo-frame>img{object-position:50% 50%!important}
}

/* Smartphone: trio mascots use the same catalogue-card scale as the
   established new/single Hippies (28%, max 110px), not the older 20% rule.
   Keep individual animation keyframes and unchanged photo crops. */
@media (max-width:760px){
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .hippie-photo-frame :is(.trio-hippie,.title-hippie-atlantis){
   width:clamp(68px,28%,110px)!important;
   max-width:30%!important;
   height:auto!important;
   aspect-ratio:1!important;
   inset:auto 0 0 auto!important;
 }
 /* Use the exact existing category color under the photo; keep the label compact. */
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .ticketimage{
   background:var(--world-color)!important;
 }
 #full-cards .ticket:is([data-model-id="51"],[data-model-id="52"],[data-model-id="53"]) .ticketimage>.ticketno{
   position:static!important;
   display:inline-flex!important;
   align-items:center!important;
   width:max-content!important;
   max-width:calc(100% - 20px)!important;
   min-width:0!important;
   height:auto!important;
   margin:6px 10px!important;
   padding:5px 9px!important;
   border-radius:15px!important;
   inset:auto!important;
   box-sizing:border-box!important;
 }
}
