/* Hero Landing Styles */
.hero-landing {
  background: #fcfcfc;
  position: relative;
  overflow-x: hidden;
}

/* Background Shapes */
.hero-shapes {
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* SVG Blob Styles */
.svg-blob {
  opacity: 1;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.blob-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

/* Top Blob (Mustard Yellow) - Zentriert, halb aus dem Bild oben */
.svg-blob-top {
  width: clamp(900px, 75vw, 2000px);
  height: clamp(900px, 75vw, 2000px);
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow: visible !important;
}

/* Right Blob (Cream) - Klein, oben rechts */
.svg-blob-right {
  width: clamp(900px, 75vw, 1900px);
  height: clamp(900px, 75vw, 1900px);
  top: -10%;
  right: -25%;
  z-index: 1;
  overflow: visible !important;
}

/* Left Blob (Burgundy) - Groß, links dominant */
.svg-blob-left {
  width: clamp(500px, 42vw, 1100px);
  height: clamp(500px, 42vw, 1100px);
  top: 10%;
  left: -15%;
  z-index: 1;
  overflow: visible !important;
}

/* Bottom Blob (Coral) - Groß, unten rechts */
.svg-blob-bottom {
  width: clamp(1000px, 80vw, 2100px);
  height: clamp(1000px, 80vw, 2100px);
  bottom: -35%;
  left: 50%;
  transform: translateX(-50%) rotate(230deg);
  z-index: 1;
  overflow: visible !important;
}

/* ============ RESPONSIVE BLOB ANPASSUNGEN ============ */

/* 1200px Breakpoint - Tablet Landscape */
@media (max-width: 1200px) {
  .svg-blob-top {
    width: clamp(650px, 60vw, 1400px);
    height: clamp(650px, 60vw, 1400px);
    top: -48%;
  }

  .svg-blob-right {
    width: clamp(500px, 45vw, 1000px);
    height: clamp(500px, 45vw, 1000px);
    right: -22%;
    top: -8%;
  }

  .svg-blob-left {
    width: clamp(450px, 40vw, 850px);
    height: clamp(450px, 40vw, 850px);
    left: -14%;
    top: 11%;
  }

  .svg-blob-bottom {
    width: clamp(750px, 65vw, 1450px);
    height: clamp(750px, 65vw, 1450px);
    bottom: -33%;
  }
}

/* 768px Breakpoint - Tablet Portrait */
@media (max-width: 768px) {
  /* Top Blob - viel größer, halb außerhalb oben */
  .svg-blob-top {
    width: 120vh;
    height: 120vh;
    top: -60vh;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Right Blob - viel größer, halb außerhalb rechts */
  .svg-blob-right {
    width: 120vw;
    height: 120vw;
    right: -60vw;
    top: 5%;
  }

  /* Left Blob - viel größer, halb außerhalb links */
  .svg-blob-left {
    width: 120vw;
    height: 120vw;
    left: -75vw;
    top: 15%;
  }

  /* Bottom Blob - viel größer, halb außerhalb unten */
  .svg-blob-bottom {
    width: 120vh;
    height: 120vh;
    bottom: -60vh;
    left: 50%;
    transform: translateX(-50%) rotate(230deg);
  }

  /* Keywords */
  .keyword-facilitation {
    top: 15%;
    left: 15%;
  }

  .keyword-coaching {
    top: 68%;
    right: 10%;
  }

  .keyword-training {
    bottom: 18%;
    left: 18%;
  }
}

/* 576px Breakpoint - Mobile Landscape */
@media (max-width: 576px) {
  /* Top Blob - viel größer, halb außerhalb oben */
  .svg-blob-top {
    width: 130vh;
    height: 130vh;
    top: -65vh;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Right Blob - viel größer, halb außerhalb rechts */
  .svg-blob-right {
    width: 130vw;
    height: 130vw;
    right: -65vw;
    top: 8%;
  }

  /* Left Blob - viel größer, halb außerhalb links */
  .svg-blob-left {
    width: 130vw;
    height: 130vw;
    left: -80vw;
    top: 18%;
  }

  /* Bottom Blob - viel größer, halb außerhalb unten */
  .svg-blob-bottom {
    width: 130vh;
    height: 130vh;
    bottom: -65vh;
    left: 50%;
    transform: translateX(-50%) rotate(230deg);
  }

  /* Keywords */
  .keyword-facilitation {
    top: 16%;
    left: 16%;
  }

  .keyword-coaching {
    top: 65%;
    right: 12%;
  }

  .keyword-training {
    bottom: 20%;
    left: 20%;
  }
}

/* 480px Breakpoint - Mobile Portrait */
@media (max-width: 480px) {
  /* Top Blob - viel größer, halb außerhalb oben */
  .svg-blob-top {
    width: 140vh;
    height: 140vh;
    top: -70vh;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Right Blob - viel größer, halb außerhalb rechts */
  .svg-blob-right {
    width: 140vw;
    height: 140vw;
    right: -70vw;
    top: 10%;
  }

  /* Left Blob - viel größer, halb außerhalb links */
  .svg-blob-left {
    width: 140vw;
    height: 140vw;
    left: -85vw;
    top: 20%;
  }

  /* Bottom Blob - viel größer, halb außerhalb unten */
  .svg-blob-bottom {
    width: 140vh;
    height: 140vh;
    bottom: -70vh;
    left: 50%;
    transform: translateX(-50%) rotate(230deg);
  }

  /* Keywords */
  .keyword-facilitation {
    top: 17%;
    left: 17%;
  }

  .keyword-coaching {
    top: 62%;
    right: 13%;
  }

  .keyword-training {
    bottom: 22%;
    left: 22%;
  }

  /* Typography */
  .hero-name {
    font-size: clamp(3rem, 15vw, 6rem);
  }

  .hero-surname {
    font-size: clamp(1rem, 4vw, 1.5rem);
  }

  .keyword {
    font-size: clamp(0.7rem, 3vw, 1rem);
  }
}

/* ============ HEIGHT-BASED ADJUSTMENTS FOR TALL SCREENS ============ */

/* Tall Tablet Portrait - größere Blobs */
@media (max-width: 768px) and (min-height: 1000px) {
  /* Top Blob - 60vh */
  .svg-blob-top {
    width: 60vh;
    height: 60vh;
    top: -30vh;
  }

  /* Right Blob - 60vw */
  .svg-blob-right {
    width: 60vw;
    height: 60vw;
    right: -30vw;
  }

  /* Left Blob - 60vw */
  .svg-blob-left {
    width: 60vw;
    height: 60vw;
    left: -30vw;
  }

  /* Bottom Blob - 60vh */
  .svg-blob-bottom {
    width: 60vh;
    height: 60vh;
    bottom: -30vh;
  }
}

/* Tall Mobile Landscape - größere Blobs */
@media (max-width: 576px) and (min-height: 900px) {
  /* Top Blob - 65vh */
  .svg-blob-top {
    width: 65vh;
    height: 65vh;
    top: -32vh;
  }

  /* Right Blob - 65vw */
  .svg-blob-right {
    width: 65vw;
    height: 65vw;
    right: -32vw;
  }

  /* Left Blob - 65vw */
  .svg-blob-left {
    width: 65vw;
    height: 65vw;
    left: -32vw;
  }

  /* Bottom Blob - 65vh */
  .svg-blob-bottom {
    width: 65vh;
    height: 65vh;
    bottom: -32vh;
  }
}

/* Tall Mobile Screens - größere Blobs (z.B. iPhone 16 Pro) */
@media (max-width: 480px) and (min-height: 800px) {
  /* Top Blob - 70vh */
  .svg-blob-top {
    width: 70vh;
    height: 70vh;
    top: -35vh;
  }

  /* Right Blob - 70vw */
  .svg-blob-right {
    width: 70vw;
    height: 70vw;
    right: -35vw;
  }

  /* Left Blob - 70vw */
  .svg-blob-left {
    width: 70vw;
    height: 70vw;
    left: -35vw;
  }

  /* Bottom Blob - 70vh */
  .svg-blob-bottom {
    width: 70vh;
    height: 70vh;
    bottom: -35vh;
  }
}

/* Extra Tall Mobile Screens - noch größere Blobs */
@media (max-width: 480px) and (min-height: 900px) {
  /* Top Blob - 75vh */
  .svg-blob-top {
    width: 75vh;
    height: 75vh;
    top: -37vh;
  }

  /* Right Blob - 75vw */
  .svg-blob-right {
    width: 75vw;
    height: 75vw;
    right: -37vw;
  }

  /* Left Blob - 75vw */
  .svg-blob-left {
    width: 75vw;
    height: 75vw;
    left: -37vw;
  }

  /* Bottom Blob - 75vh */
  .svg-blob-bottom {
    width: 75vh;
    height: 75vh;
    bottom: -37vh;
  }
}

/* Main Content */
.hero-content {
  z-index: 3;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* Typography */
.hero-name {
  font-family: 'Sporting Grotesque', sans-serif;
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 500;
  color: #1c2d41;
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-surname {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 500;
  color: #1c2d41;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Service Keywords */
.service-keywords {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
}

.keyword {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.8rem, 2vw, 1.7rem);
  font-weight: 500;
  color: #1c2d41;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: absolute;
  opacity: 1;
}

.keyword-facilitation {
  top: 18%;
  left: 22%;
  transform: none;
}

.keyword-coaching {
  top: 70%;
  right: 8%;
  transform: none;
}

.keyword-training {
  bottom: 15%;
  left: 20%;
  transform: none;
}

/* Scroll Indicator */
.scroll-indicator {
  z-index: 3;
  /* iOS Safe Area Support - großzügiger Basis-Abstand */
  margin-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  animation: scrollDown 2s ease-in-out infinite;
}

/* Mobile Screens - extra Sicherheitsabstand */
@media (max-width: 768px) {
  .scroll-indicator {
    margin-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Extra Abstand für hohe Mobile Screens (iPhone 16 Pro etc.) */
@media (max-width: 480px) and (min-height: 800px) {
  .scroll-indicator {
    margin-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Extra Tall Screens - maximaler Abstand */
@media (max-width: 480px) and (min-height: 900px) {
  .scroll-indicator {
    margin-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

.scroll-arrow:active {
  transform: translateY(-4px) scale(1.05);
}

@keyframes scrollDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes hoverFall {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  20% {
    transform: translateY(0px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}