.elementor-kit-10{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;font-family:"space-grotesk-variable", Sans-serif;font-size:18px;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 a{font-family:"space-grotesk-variable", Sans-serif;}.elementor-kit-10 h1{font-family:"dystopian", Sans-serif;}.elementor-kit-10 h2{font-family:"dystopian", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1240px;}.e-con{--container-max-width:1240px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --brand-primary:#008ea6; --brand-secondary:#a63f2b; --brand-recovery:#7c5548; --brand-neutral:#d0cdc8; --surface-base:#ffffff; --surface-soft:#F3F3F1; --surface-dark:#303130; --text-primary:#303130; --text-secondary:#a63f2b; --text-inverse:#ffffff; --text-brand:#008ea6; --interactive-hover:#40AABB; --interactive-active:#ffffff; --e-gv-59dbf38:8px; --space-sm:clamp(8px, calc(3px + 0.78vw), 16px); --space-md:clamp(16px, calc(8px + 1.04vw), 24px); --space-lg:clamp(24px, calc(8px + 2.6vw), 48px); --space-xl:clamp(40px, calc(8px + 5.19vw), 80px); --space-2xl:clamp(60px, calc(8px + 7.27vw), 120px); --space-section-tablet:80px; --space-section-mobile:0px; --radius-sm:4px; --radius-md:clamp(6px, calc(4px + 0.26vw), 8px); --radius-lg:clamp(12px, calc(8px + 0.52vw), 16px); --radius-xl:24px; --radius-full:0px; --container-narrow:720px; --container-default:1240px; --container-wide:1440px; --e-gv-fba9fa4:px; --space-xs:clamp(4px, calc(2px + 0.39vw), 8px); --space-3xl:clamp(80px, calc(8px + 10.39vw), 160px); --Headline-Font:dystopian; --text:space-grotesk-variable; --h-display:clamp(40px, calc(16px + 3.9vw), 80px); --h-1:clamp(36px, calc(16px + 2.6vw), 56px); --h-2:clamp(28px, calc(16px + 1.56vw), 40px); --h-3:clamp(22px, calc(14px + 0.91vw), 28px); --h-4:clamp(18px, calc(14px + 0.39vw), 20px); --text-lead:clamp(18px, calc(14px + 0.39vw), 20px); --text-body:16px; --text-small:14px; --text-button:16px; --Logo:clamp(110px, calc(95.43px + 3.88vw), 170px); --logo-big:clamp(120px, calc(100.6px + 5.18vw), 200px); --font-size-hero-statement:clamp(48px, calc(16px + 12vw), 240px); --font-size-hero-small:clamp(42px, calc(14px + 7vw), 150px); --DUP_Headline-Font:dystopian; --DUP_h-1:clamp(36px, calc(16px + 2.6vw), 56px); --DUP_surface-base:#ffffff; --DUP_space-xl:clamp(40px, calc(8px + 5.19vw), 80px); --DUP_space-lg:clamp(24px, calc(8px + 2.6vw), 48px); --DUP_text:space-grotesk-variable; --DUP_h-2:clamp(28px, calc(16px + 1.56vw), 40px); --DUP_brand-primary:#008ea6; --DUP_space-xs:clamp(4px, calc(2px + 0.39vw), 8px); --DUP_radius-md:clamp(6px, calc(4px + 0.26vw), 8px); --DUP_text-small:14px; --DUP_interactive-hover:#40AABB; --DUP_space-sm:clamp(8px, calc(3px + 0.78vw), 16px); --DUP_space-md:clamp(16px, calc(8px + 1.04vw), 24px); --DUP_surface-soft:#F3F3F1; --DUP_text-secondary:#a63f2b; --DUP_container-default:1240px; --DUP_space-2xl:clamp(60px, calc(8px + 7.27vw), 120px); --DUP_brand-secondary:#a63f2b; --DUP_space-xs1:clamp(4px, calc(2px + 0.39vw), 8px); --DUP_space-xs2:clamp(4px, calc(2px + 0.39vw), 8px); }
/* Start custom CSS */::selection {
  background: var(--brand-primary);
  color: white;
}
html {
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
}
/* ============================================
   TRAIN SMART – Reveal + Scroll Choreography
   ============================================ */

#train-smart-text {
  opacity: 0;
  transform: translateY(100%);
  will-change: transform, opacity;
  display: inline-block;
}

#train-smart-text.is-revealed {
  opacity: 1;
  animation: trainSmartReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#train-smart-text.is-scrollable {
  animation: none !important;
  transition: transform 0.05s linear, opacity 0.05s linear;
}

@keyframes trainSmartReveal {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #train-smart-text {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ============================================
   HERO IMAGE – Slide-Up with Mask Reveal
   ============================================ */

#hero-image {
  opacity: 0;
  transform: translateY(60px);
  clip-path: inset(100% 0 0 0);
  will-change: transform, opacity, clip-path;
  transition: none;
}

#hero-image.is-revealed {
  animation: heroImageReveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes heroImageReveal {
  0% {
    opacity: 0;
    transform: translateY(60px);
    clip-path: inset(100% 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-image {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
  }
}

/* ============================================
   HERO IMAGE – Mobile größer (überschreibt Elementor UI)
   ============================================ */

@media (max-width: 767px) {
  body #hero-image,
  body .hero-image,
  body img#hero-image {
    width: clamp(540px, 135vw, 780px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* ============================================
   CARDS – Sequential Fly-In from Bottom
   ============================================ */

#cards-container {
  perspective: 1200px;
  position: relative;
}

/* Alle Karten: Start außerhalb (unten) */
.card {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: bottom center;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease-out;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateX(-50%) translateY(120vh) rotate(0deg);
}

/* === FLY-IN STATES === */
/* Jede Karte hat eigene Klasse für ihre finale Position */

/* Karte 1 (rostrot, nth-child 1) — landet ganz rechts */
.card.is-flown:nth-child(1) {
  opacity: 1;
  transform: translateX(calc(-50% + 120px)) translateY(40px) rotate(15deg);
  z-index: 1;
}

/* Karte 2 (petrol, nth-child 2) — weiter rechts */
.card.is-flown:nth-child(2) {
  opacity: 1;
  transform: translateX(calc(-50% + 70px)) translateY(20px) rotate(9deg);
  z-index: 2;
}

/* Karte 3 (terracotta, nth-child 3) — leicht rechts */
.card.is-flown:nth-child(3) {
  opacity: 1;
  transform: translateX(calc(-50% + 30px)) translateY(8px) rotate(4deg);
  z-index: 3;
}

/* Karte 4 (hellpetrol, nth-child 4) — ganz links */
.card.is-flown:nth-child(4) {
  opacity: 1;
  transform: translateX(calc(-50% - 120px)) translateY(40px) rotate(-15deg);
  z-index: 4;
}

/* Karte 5 (braun, nth-child 5) — weiter links */
.card.is-flown:nth-child(5) {
  opacity: 1;
  transform: translateX(calc(-50% - 70px)) translateY(20px) rotate(-9deg);
  z-index: 5;
}

/* Karte 6 (beige, nth-child 6) — leicht links */
.card.is-flown:nth-child(6) {
  opacity: 1;
  transform: translateX(calc(-50% - 30px)) translateY(8px) rotate(-4deg);
  z-index: 6;
}

/* Karte 7 (weiß, nth-child 7) — vorne mittig, kommt zuletzt */
.card.is-flown:nth-child(7) {
  opacity: 1;
  transform: translateX(-50%) translateY(0) rotate(0deg);
  z-index: 7;
}

/* Schatten beim Fliegen */
.card.is-flown {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Hover-Effekt auf aufgefächerten Karten */
.card.is-flown:hover {
  z-index: 100 !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.card.is-flown:nth-child(1):hover {
  transform: translateX(calc(-50% + 120px)) translateY(20px) rotate(15deg) scale(1.05);
}
.card.is-flown:nth-child(2):hover {
  transform: translateX(calc(-50% + 70px)) translateY(0px) rotate(9deg) scale(1.05);
}
.card.is-flown:nth-child(3):hover {
  transform: translateX(calc(-50% + 30px)) translateY(-12px) rotate(4deg) scale(1.05);
}
.card.is-flown:nth-child(4):hover {
  transform: translateX(calc(-50% - 120px)) translateY(20px) rotate(-15deg) scale(1.05);
}
.card.is-flown:nth-child(5):hover {
  transform: translateX(calc(-50% - 70px)) translateY(0px) rotate(-9deg) scale(1.05);
}
.card.is-flown:nth-child(6):hover {
  transform: translateX(calc(-50% - 30px)) translateY(-12px) rotate(-4deg) scale(1.05);
}
.card.is-flown:nth-child(7):hover {
  transform: translateX(-50%) translateY(-20px) rotate(0deg) scale(1.05);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .card {
    opacity: 1;
    transition: none;
  }
}
/* Headline Reveal beim Erreichen der Section */
#cards-sticky h2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#cards-section.is-active #cards-sticky h2 {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   CARDS – Mobile Swipe Slider (< 768px)
   ============================================ */

@media (max-width: 767px) {
  
  /* Section verkürzen – kein Pinning auf Mobile */
  #cards-section {
    min-height: auto !important;
    padding: var(--space-2xl) 0 !important;
  }
  
  /* Sticky deaktivieren */
  #cards-sticky {
    position: relative !important;
    height: auto !important;
    top: auto !important;
    padding: 0 !important;
  }
  
  /* Cards-Container wird zum Swipe-Slider */
  #cards-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: var(--space-xl) !important;
    
    /* Horizontal Scroll mit Snap */
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
    -webkit-overflow-scrolling: touch;
    
    /* Padding fuer ersten/letzten Karte */
    padding: 20px 20px 40px 20px !important;
    gap: 16px;
    
    /* Scrollbar verstecken */
    scrollbar-width: none;
  }
  
  #cards-container::-webkit-scrollbar {
    display: none;
  }
  
  /* Karten Mobile: nebeneinander, kein absolutes Positioning */
  #cards-container > .card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    
    /* Snap-Point */
    scroll-snap-align: center;
    flex-shrink: 0;
    
    /* Karten-Groesse Mobile */
    width: 75vw !important;
    max-width: 280px;
    height: 380px !important;
    
    /* Schatten dauerhaft */
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    
    /* Reset Transition */
    transition: none !important;
  }
  
  /* Hover-Effekte auf Mobile deaktivieren */
  #cards-container.is-fanned > .card:hover,
  #cards-container > .card.is-flown:hover {
    transform: none !important;
    z-index: auto !important;
  }
  
  /* Headline-Bereich Mobile */
  #cards-sticky h2 {
    opacity: 1 !important;
    transform: none !important;
    padding: 0 var(--space-md);
    text-align: center;
  }
}
@media (max-width: 767px) {
  
  /* Subtle Swipe-Hint unter dem Slider */
  #cards-container::after {
    content: "← swipe →";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    color: var(--text-secondary, #7c5548);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.6;
    pointer-events: none;
  }
    
      /* Mobile: visuelle Reihenfolge ueber order anpassen */

/* Position 1: Anfaenger:innen (weiss) — erste Sicht */
#cards-container > .card:nth-child(7) {
  order: 4 !important;
}

/* Position 2: Ruecken (beige) */
#cards-container > .card:nth-child(6) {
  order: 5 !important;
}

/* Position 3: Verletzung (braun) */
#cards-container > .card:nth-child(5) {
  order: 3 !important;
}

/* Position 4: Perimenopause (hellpetrol) */
#cards-container > .card:nth-child(4) {
  order: 1 !important;
}

/* Position 5: Schwangerschaft (terracotta) */
#cards-container > .card:nth-child(3) {
  order: 2 !important;
}

/* Position 6: Profi-Sport (petrol) */
#cards-container > .card:nth-child(2) {
  order: 6 !important;
}

/* Position 7: High Performer (rostrot) — letzter Wow */
#cards-container > .card:nth-child(1) {
  order: 7 !important;
  }
}

/* ============================================
   MARQUEE BANNER – Endloss Scrolling Text
   ============================================ */

#marquee-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#marquee-banner .marquee-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}

#marquee-banner .marquee-track * {
  white-space: nowrap;
  margin: 0;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover (optional, eleganter Move) */
#marquee-banner:hover .marquee-track {
  animation-play-state: paused;
}

/* Reduced Motion: Marquee statisch */
@media (prefers-reduced-motion: reduce) {
  #marquee-banner .marquee-track {
    animation: none;
  }
}

/* Mobile: etwas langsamer fuer Lesbarkeit */
@media (max-width: 767px) {
  #marquee-banner .marquee-track {
    animation-duration: 30s;
  }
}
.slider-arrow {
  cursor: pointer;
  user-select: none;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

#slider-prev:hover,
.slider-arrow#slider-prev:hover {
  transform: translateX(-4px) !important;
}

#slider-next:hover,
.slider-arrow#slider-next:hover {
  transform: translateX(4px) !important;
}

.slider-arrow.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.slider-arrow.is-disabled:hover {
  transform: none !important;
}
/* ============================================
   RECOVERY SLIDER – Drag + Snap
   ============================================ */

#recovery-slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: var(--space-lg);
  user-select: none;
}

#recovery-slider-track {
  display: flex;
  flex-direction: row;
  cursor: grab;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#recovery-slider-track.is-dragging {
  cursor: grabbing;
  transition: none;
}

#recovery-slider-track.is-dragging .recovery-card {
  pointer-events: none;
}

.recovery-card {
  flex-shrink: 0;
  user-select: none;
}

.recovery-card * {
  pointer-events: none;
  user-select: none;
}

/* Hover-Effekt auf der Karte */
.recovery-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#recovery-slider-track:not(.is-dragging) .recovery-card:hover {
  transform: translateY(-6px);
}

/* Disabled-State für Pfeile */
.slider-arrow.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
/* Soft-Fade an den Rändern des Sliders */
#recovery-slider-wrap {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 24px,
    black calc(100% - 80px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 24px,
    black calc(100% - 80px),
    transparent 100%
  );
}
/* ============================================
   RECOVER WITH HEART – Scroll-driven Reveal + Parallax
   ============================================ */

#recover-heart-text {
  position: absolute;
  top: -0.18em;
  left: 0;
  width: 100%;
  line-height: 0.85;
  margin: 0;
  letter-spacing: -0.03em;
  
  /* Scroll-getriebene Position via CSS-Variable */
  opacity: var(--reveal-opacity, 0);
  transform: translateY(var(--reveal-y, -180px));
  
  will-change: transform, opacity;
  pointer-events: none;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #recover-heart-text {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Recover-Heart Mobile-Fix — mit scroll-driven Animation */
@media (max-width: 767px) {
  
  #recovery-section {
     position: relative;
    overflow: hidden;
    padding-top: clamp(140px, 32vw, 240px) !important;
    margin-top: 0 !important;
    min-height: auto;
  }
  
  /* Inhalt darunter bekommt Platz fuer den Schriftzug */
  #recovery-info {
    padding-top: clamp(80px, 20vw, 140px) !important;
  }
  
  /* Schriftzug: oben positioniert, scroll-driven */
  #recover-heart-text {
    position: absolute !important;
    top: -0,10em !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    
    font-size: clamp(58px, 17vw, 96px) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.02em !important;
    
    /* Scroll-driven Animation aktiv */
    opacity: var(--reveal-opacity, 0) !important;
    transform: translateY(var(--reveal-y, -150px)) !important;
    
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
  }
}
/* ============================================
   STUDIO – Sticky Stacking Gallery (clean overlap)
   ============================================ */

#studio-section {
  position: relative;
}

/* Text-Spalte: sticky stehen bleiben waehrend Bilder durchscrollen */
#studio-text-col {
  position: sticky;
  top: 120px;
  align-self: flex-start;
  height: fit-content;
}

/* Gallery-Container: Spalte mit den 4 Bildern */
#studio-gallery-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  position: relative;
}

/* Jedes Bild im Stack: Sticky-Verhalten, alle auf gleicher Position */
.studio-stack-image {
  position: sticky;
  top: 100px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: var(--space-xl);
  opacity: 0;
  transform: translateX(120px);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.8s ease-out;
  will-change: transform, opacity;
}

/* Z-Index gestaffelt: oberes Bild deckt unteres komplett ab */
.studio-stack-image:nth-child(1) {
  z-index: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.studio-stack-image:nth-child(2) {
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.studio-stack-image:nth-child(3) {
  z-index: 3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.studio-stack-image:nth-child(4) {
  z-index: 4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Reveal-Zustand: Slide rein von rechts */
.studio-stack-image.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .studio-stack-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* Mobile (< 768px): Sticky-Stack wie Desktop, vertikal angepasst */
@media (max-width: 767px) {
  
  /* Section: relative bleibt */
  #studio-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
  
  /* Row-Container auf Spalte zwingen: Text oben, Gallery unten */
  #studio-section > .e-con-inner > .e-flex,
  #studio-section .e-flex {
    flex-direction: column !important;
  }
  
  /* Text-Spalte: NICHT sticky auf Mobile, einfach oben */
  #studio-text-col {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    margin-bottom: var(--space-xl);
    padding: 0 20px;
  }
  
  /* Gallery-Container: bleibt position relative fuer Sticky-Kinder */
  #studio-gallery-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 20px;
    overflow: visible !important;
    margin: 0;
    position: relative;
  }
  
  /* Swipe-Hint entfernen */
  #studio-gallery-stack::after {
    display: none;
  }
  
  /* Bilder Mobile: Sticky bleibt aktiv, Slide von unten */
  .studio-stack-image {
    position: sticky !important;
    top: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--space-xl);
    border-radius: 8px;
    overflow: hidden;
    
    /* Start-Zustand: von unten, unsichtbar */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
  }
  
  /* Z-Index: oberes Bild deckt unteres ab */
  .studio-stack-image:nth-child(1) {
    z-index: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .studio-stack-image:nth-child(2) {
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .studio-stack-image:nth-child(3) {
    z-index: 3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .studio-stack-image:nth-child(4) {
    z-index: 4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  
  /* Reveal-Zustand */
  .studio-stack-image.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ============================================
   PROBESTUNDE STICKER – Reveal + Slow Rotation
   ============================================ */

/* Section muss relative sein fuer Sticker-Positionierung */
#lagree-section {
  position: relative;
}

#probestunde-sticker {
  position: absolute !important;
  bottom: clamp(40px, 6vw, 80px);
  right: clamp(40px, 6vw, 80px);
  width: clamp(140px, 16vw, 200px);
  height: clamp(140px, 16vw, 200px);
  z-index: 10;
  
  opacity: 0;
  transform: translateY(60px) rotate(0deg);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#probestunde-sticker.is-revealed {
  opacity: 1;
  animation: stickerRotateLoop 40s linear infinite;
}

@keyframes stickerRotateLoop {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

#probestunde-sticker:hover {
  animation-play-state: paused;
}

/* Mobile: kleinerer Sticker, weiter unten rechts */
@media (max-width: 767px) {
  #probestunde-sticker {
    width:clamp(120px,32vw, 160px);
    height: clamp(120px,32vw, 160px);
    bottom: 20px;
    right: 20px;
  }
  
  #probestunde-sticker.is-revealed {
    animation-duration: 30s;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #probestunde-sticker {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ============================================
   TEXT-LINKS – nur inline Text-Links färben
   ============================================ */

/* Nur Links innerhalb von Fließtext (Paragraphen, Listen, Form-Labels) */
p a,
li a:not(.elementor-button):not([class*="button"]),
.elementor-widget-text-editor a,
.elementor-field-label a,
.elementor-form a:not(.elementor-button),
form a {
  color: #008EA6;
  transition: color 0.3s ease;
}

p a:hover,
li a:not(.elementor-button):not([class*="button"]):hover,
.elementor-widget-text-editor a:hover,
.elementor-field-label a:hover,
.elementor-form a:not(.elementor-button):hover,
form a:hover {
  color: #A63F2B;
}

/* ============================================
   RECOVERY SLIDER – Mobile Touch + Pfeile Fix v2
   ============================================ */

@media (max-width: 767px) {
  
  /* Fade: nur an letzter Karte, minimal, verschwindet beim Wischen */
  #recovery-slider-wrap {
    -webkit-mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 20px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      black 0%,
      black calc(100% - 20px),
      transparent 100%
    ) !important;
    transition: -webkit-mask-image 0.4s ease, mask-image 0.4s ease !important;
  }
  
  /* Beim aktiven Wischen: Fade komplett weg */
  #recovery-slider-track.is-dragging ~ *,
  #recovery-slider-wrap:has(.is-dragging) {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  
  /* Touch-Events sauber durchreichen */
  #recovery-slider-wrap,
  #recovery-slider-track,
  #recovery-slider-track * {
    pointer-events: auto !important;
    touch-action: pan-x !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
  
  /* Pfeile: dick, klar, in Rostrot mit Beton-Kreis */
  .slider-arrow {
    font-size: 22px !important;
    font-weight: 900 !important;
    width: 56px !important;
    height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #E8DCD0 !important;
    border: 2px solid #A63F2B !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin-right: 14px !important;
    color: #A63F2B !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
  
  .slider-arrow:active {
    background: #A63F2B !important;
    color: #E8DCD0 !important;
  }
  
  #slider-prev:active {
    transform: translateX(-3px) scale(0.95);
  }
  
  #slider-next:active {
    transform: translateX(3px) scale(0.95);
  }
  
  #recovery-nav {
    padding-bottom: var(--space-lg) !important;
    gap: 12px !important;
  }
}
/* ==========================================
   BENTO GALLERY — v2, konfliktfrei
   ========================================== */

/* Section */
.bento-section {
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  padding: 0 !important;
  display: flex !important;
}

/* Grid */
.bento-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 8px !important;
}

.bento-tile {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  cursor: pointer;
  min-height: 0 !important;
  min-width: 0 !important;
  transition: border-radius 500ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Beim Hover: Ecken abrunden */
.bento-tile:hover {
  border-radius: clamp(16px, 2vw, 32px) !important;
  transform: translateY(-4px);

}

/* Grid-Positionen */
.bento-tile--lagree {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 3 !important;
}
.bento-tile--red-light {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
}
.bento-tile--yoga {
  grid-column: 4 / 5 !important;
  grid-row: 1 / 2 !important;
}
.bento-tile--pilates {
  grid-column: 3 / 4 !important;
  grid-row: 2 / 3 !important;
}
.bento-tile--balance {
  grid-column: 4 / 5 !important;
  grid-row: 2 / 3 !important;
}
.bento-tile--running {
  grid-column: 1 / 5 !important;
  grid-row: 3 / 4 !important;
}

/* BILD-FIX — Fit bleibt zentral, Position lokal steuerbar */
.bento-tile .elementor-widget-image,
.bento-tile .e-image,
.bento-tile .e-image-base {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
}

.bento-tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: none !important;
  border-radius: 0 !important;
  /* object-position: center — bewusst weggelassen, damit V4-UI greifen kann */

}

@media (max-width: 767px) {
  .bento-section {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .bento-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-content: start !important;
  }

  .bento-tile,
  .bento-tile--lagree,
  .bento-tile--red-light,
  .bento-tile--yoga,
  .bento-tile--pilates,
  .bento-tile--balance,
  .bento-tile--running {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3;
  }

  .bento-tile--lagree {
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================
   BENTO GALLERY — Phase 2 v2: Hover
   ========================================== */

/* Bild-Animation vorbereiten */
.bento-tile img {
  transition: filter 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 800ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Petrol-Overlay als eigene Ebene über dem Bild */
.bento-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #40AABB;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: inherit;
}

/* Titel — targetiert sowohl das Heading direkt als auch den Wrapper */
.bento-title,
.bento-tile .elementor-widget-heading,
.bento-tile [class*="heading"] {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: clamp(20px, 2.5vw, 40px) !important;
  margin: 0 !important;
  z-index: 3 !important;
  transform: translateY(110%);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  width: auto !important;
  height: auto !important;
}

/* Hero-Kachel: größere Schrift */
.bento-tile--lagree .bento-title,
.bento-tile--lagree h3 {
  font-size: clamp(28px, 3.5vw, 64px) !important;
}

.bento-tile:hover img {
  filter: blur(3px) !important;
  transform: scale(1.05) !important;
}

/* HOVER — Titel slided rein */
.bento-tile:hover .bento-title,
.bento-tile:hover .elementor-widget-heading,
.bento-tile:hover [class*="heading"] {
  transform: translateY(0);
}

/* Kleine Lift-Bewegung */
.bento-tile {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-tile:hover {
  transform: translateY(-4px);
}

/* Touch: dauerhaft sichtbar */
@media (hover: none) {
  .bento-tile::before {
    opacity: 0.15;
  }
  .bento-tile img {
    filter: none !important;
  }
  .bento-title,
  .bento-tile .elementor-widget-heading,
  .bento-tile [class*="heading"] {
    transform: translateY(0);
  }
}

/* ==========================================
   BENTO GALLERY — Phase 3: Vollbild-Overlay
   ========================================== */

.bento-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  overflow: hidden;
  cursor: default;
}

/* Hintergrund-Bild (füllt Screen) */
.bento-overlay-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: blur(8px);
  transform: scale(1.05);
}

/* Petrol-Layer über dem Bild (wie Hover-Optik) */
.bento-overlay-tint {
  position: absolute;
  inset: 0;
  background: #40AABB;
  opacity: 0.72;
  z-index: 2;
  pointer-events: none;
}

/* Content-Container */
.bento-overlay-content {
  position: relative;
  z-index: 3;
  max-width: min(880px, 88vw);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 64px);
  color: #ffffff;
  text-align: left;
  align-self: center;
  width: 100%;
}

/* Titel */
.bento-overlay-title {
  font-size: clamp(48px, 8vw, 140px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(16px, 2vw, 32px) 0;
  color: #ffffff;
}

/* Beschreibung */
.bento-overlay-description {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  max-width: 640px;
  margin: 0 0 clamp(24px, 3vw, 48px) 0;
  color: #ffffff;
}

/* Button — matcht .primary-button aus V4 */
.bento-overlay-button {
  display: inline-block;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.85);
  color: #40AABB;
  border: 1.5px solid #40AABB;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 16px;
  box-shadow: 4px 4px 6px 0px rgba(203, 122, 94, 1);
  transition: background 300ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-overlay-button:hover {
  background: #F3F3F1;
  color: #40AABB;
  transform: translateY(-1px);
  box-shadow: 4px 4px 6px 0px rgba(203, 122, 94, 1);

}

/* Close-Button im Bento-Overlay */
.bento-overlay-close {
  position: absolute;
  top: clamp(20px, 2.5vw, 40px);
  right: clamp(20px, 2.5vw, 40px);
  z-index: 10;

  /* Kreis-System */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 4vw, 60px);
  height: clamp(48px, 4vw, 60px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid #008ea6;
  color: #008ea6;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1;
  cursor: pointer;
  transition: background 300ms ease, transform 300ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0;
}

.bento-overlay-close:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);

}
/* ==========================================
   PLUS-SYMBOL — Klick-Einladung beim Hover
   ========================================== */

.bento-tile::after {
  content: "+";
  position: absolute;
  top: clamp(16px, 1.5vw, 28px);
  right: clamp(16px, 1.5vw, 28px);
  z-index: 4;
  width: clamp(40px, 3.5vw, 56px);
  height: clamp(40px, 3.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #008ea6;
  font-family: "space-grotesk", sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Beim Hover: einblenden + pulsieren starten */
.bento-tile::after {
  content: "+";
  position: absolute;
  top: clamp(16px, 1.5vw, 28px);
  right: clamp(16px, 1.5vw, 28px);
  z-index: 4;
  width: clamp(40px, 3.5vw, 56px);
  height: clamp(40px, 3.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid #008ea6;
  color: #008ea6;
  font-family: "space-grotesk-variable", sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.bento-tile:hover::after {
  opacity: 1;
  transform: scale(1);
  animation: bento-pulse 1.8s ease-in-out infinite;
  animation-delay: 400ms;
}

@keyframes bento-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 142, 166, 0.5);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 14px rgba(0, 142, 166, 0);
  }
}

@media (hover: none) {
  .bento-tile::after {
    opacity: 1;
    transform: scale(1);
    animation: bento-pulse 2.4s ease-in-out infinite;
  }

}
/* ==========================================
   BENTO GRID — ENTRANCE ANIMATION
   Startzustand: unsichtbar, leicht unten
   ========================================== */

.bento-tile {
  opacity: 0;
  transform: translateY(50px) scale(0.94);
  will-change: opacity, transform;
}

/* Sobald Animation gelaufen ist, will-change entfernen (Performance) */
.bento-tile.is-animated {
  will-change: auto;
}

@media (max-width: 767px) {
  .e-n-tab-title {
    position: relative;
    padding-right: 40px !important;
  }

  .e-n-tab-title::after {
    content: "+";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 300;
    color: #40AABB;
    transition: transform 300ms ease;
  }

  .e-n-tab-title[aria-selected="true"]::after {
    content: "−";
  }
}

@media (max-width: 767px) {

  .price-tabs .elementor-tab-mobile-title {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    z-index: 2 !important;
    touch-action: manipulation;
  }

  .price-tabs .elementor-tab-content {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 1 !important;
    touch-action: pan-y;
  }

  .price-tabs .elementor-tab-content * {
    touch-action: pan-y;
  }

  .price-tabs .price-card {
    position: relative;
  }

  .price-tabs .popular-badge {
    position: absolute;
    top: 0;
    left: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
    z-index: 5;
  }
}/* End custom CSS */