/* Hero Section - Layout Structure (US-003-001) */
.hero-section {
  background: linear-gradient(
    to right,
    #F5E7EE 0%,           /* etwas helleres Rosa links */
    #F5E7EE 35%,          /* helleres Rosa bis 35% */
    #F2E1E9 65%,          /* fließender Übergang in der Mitte */
    #F2E1E9 100%          /* aktuelles Rosa rechts */
  );
  padding: 0 0 calc(var(--spacing-12) + 50px) 0; /* Bottom padding + 50px for hero4 transform offset */
  position: relative; /* For absolute positioned leaf decorators */
  overflow: hidden; /* Prevent scrollbars from animated halo */
}

.hero-section__container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-8) var(--spacing-4); /* Reduced top padding from spacing-8 to spacing-2 */
}

.hero-section__left-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.hero-section__right-column {
    display: none; /* Hidden on mobile, shown on desktop */
}

.hero-section__badge {
  display: inline-block;
  background-color: var(--color-accent-main); /* #A65C94 Rosa */
  color: var(--color-neutral-white);
  padding: var(--spacing-1-5) var(--spacing-4); /* 6px 16px */
  border-radius: var(--radius-full); /* 9999px - pill shape */
  font-family: var(--font-body); /* Raleway */
  font-size: var(--font-size-sm); /* 14px */
  font-weight: var(--font-weight-semibold); /* 600 */
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider); /* 0.1em */
}

.hero-section__headline {
  font-family: var(--font-heading); /* Cormorant Garamond */
  font-size: var(--font-size-3xl); /* Same as AboutSection heading */
  font-weight: var(--font-weight-bold); /* 700 */
  color: var(--color-primary-500); /* Same as AboutSection heading */
  margin-top: var(--spacing-3); /* 12px spacing from badge */
  margin-bottom: 1px; /* Reduced from 16px by 15px */
  line-height: var(--line-height-tight); /* 1.2 for large headlines */
  letter-spacing: var(--letter-spacing-wide); /* Same as AboutSection heading */
  white-space: nowrap; /* Prevent line breaks */
}

.hero-section__intro {
  margin-bottom: 17px; /* Reduced from 32px by 15px */
  text-align: justify; /* Blocksatz: rechts und linksbündig */
}

/* Pricing Cards */
.hero-section__pricing-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    position: relative; /* For absolute positioned leaf */
    overflow: visible; /* Allow leaf to extend beyond */
}

.hero-section__pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-6); /* Increase from --spacing-4 to 24px */
  background-color: var(--color-neutral-white); /* White background */
  border-radius: var(--radius-lg); /* 8px rounded corners */
  box-shadow: var(--shadow-md); /* Subtle depth shadow */
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition */
  position: relative; /* Create stacking context */
  z-index: 1; /* Above the leaf decorator */
}

.hero-section .hero-section__pricing-card:hover {
  box-shadow: var(--shadow-lg); /* Increased shadow on hover */
}

/* Card header with price and description side by side */
.hero-section__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4); /* 16px spacing between price and description */
  margin-bottom: var(--spacing-3); /* 12px spacing before divider */
}

.hero-section__card-price {
  font-family: var(--font-heading); /* Cormorant Garamond */
  font-size: calc(var(--font-size-3xl) * 2); /* 60px - double the size */
  font-weight: var(--font-weight-bold); /* 700 */
  color: var(--color-primary-700); /* #480437 dark wine red */
  line-height: var(--line-height-tight); /* 1.2 */
  flex-shrink: 0; /* Prevent price from shrinking */
}

.hero-section__card-description {
  font-family: var(--font-body); /* Raleway */
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-normal); /* 400 */
  color: var(--color-neutral-600); /* #8A6D7B dark Rosa-Grau */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Elegant spacing for uppercase text */
  text-align: right; /* Align text to the right */
  flex: 1; /* Take remaining space */
}

/* Decorative divider between subtitle and image (US-001-002) */
.hero-section__card-divider {
  display: block;
  width: 150px; /* Mobile base width - AC2 */
  height: auto; /* Maintain aspect ratio */
  margin: var(--spacing-1) auto; /* 8px top/bottom (halved from 16px), centered - AC4 */
  color: var(--color-decorative-copper); /* #8B6F47 copper - AC3 */
}

.hero-section__card-image-container {
    position: relative; /* US-001-003: Positioning context for animated ball */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-4) 0;
}

.hero-section__card-image {
  width: 150px;
  height: 150px;
  background-color: var(--color-neutral-100); /* #F9F6F8 very light pink background */
  border: 3px solid var(--color-neutral-white); /* White border for definition */
  border-radius: var(--radius-full); /* Perfect circle */
  box-shadow: var(--shadow-default); /* Subtle depth */
  object-fit: cover; /* Ensure image fills circle without distortion */
  object-position: center; /* Center the image within the circle */
}

/* US-001-003: Animated ball on circular image border */
/* Progressive enhancement: Hidden by default, shown only with @supports */
.hero-section__card-orbit-ball {
  display: none; /* Default: hidden for browsers without offset-path support */
}

/* Show ball only if CSS offset-path is supported (AC5) */
@supports (offset-path: path('M 0,0')) {
  .hero-section__card-orbit-ball {
    display: block;
    position: absolute;
    width: 8px; /* Mobile base size */
    height: 8px;
    background-color: rgb(242, 225, 233); /* Light pink color */
    border-radius: 50%; /* Perfect circle */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle depth */
    pointer-events: none; /* Don't interfere with clicks */
    z-index: 10; /* Above image */

    /* Circular path following image border (AC7) */
    /* Mobile: 150px image, 3px border, radius: 75px + 3px - 3.04% = 75.61px */
    offset-path: path('M 0,-75.61 A 75.61,75.61 0 1,1 0,75.61 A 75.61,75.61 0 1,1 0,-75.61');
    offset-anchor: center center; /* Anchor ball from its center point */
    offset-rotate: 0deg; /* Keep ball upright, no rotation */
    left: 50%; /* Position relative to container center */
    top: 50%;

    /* Animation (AC2, AC3) */
    animation: orbitPath 32s linear infinite; /* 32-second loop (87.5% slower than original), smooth linear timing */
    will-change: transform; /* GPU acceleration for 60fps performance */
  }
}

/* Keyframe animation: Travel along circular path (AC2) */
@keyframes orbitPath {
  from {
    offset-distance: 0%; /* Start position on path */
  }
  to {
    offset-distance: 100%; /* Complete circle */
  }
}

/* Responsive sizing: Tablet (AC7) */
@media (min-width: 640px) {
  .hero-section__card-orbit-ball {
    width: 10px;
    height: 10px;
    /* Tablet: 180px image, 3px border, radius: 90px + 3px - 3.04% = 90.17px */
    offset-path: path('M 0,-90.17 A 90.17,90.17 0 1,1 0,90.17 A 90.17,90.17 0 1,1 0,-90.17');
  }
}

/* Responsive sizing: Desktop (AC7) */
@media (min-width: 1024px) {
  .hero-section__card-orbit-ball {
    width: 12px;
    height: 12px;
    /* Desktop: 200px image, 3px border, radius: 100px + 3px - 3.04% = 99.83px */
    offset-path: path('M 0,-99.83 A 99.83,99.83 0 1,1 0,99.83 A 99.83,99.83 0 1,1 0,-99.83');
  }
}

/* Responsive sizing: Large Desktop */
@media (min-width: 1280px) {
  .hero-section__card-orbit-ball {
    /* Large Desktop: 220px image, 3px border, radius: 110px + 3px - 3.04% = 109.53px */
    offset-path: path('M 0,-109.53 A 109.53,109.53 0 1,1 0,109.53 A 109.53,109.53 0 1,1 0,-109.53');
  }
}

/* Accessibility: Respect motion preferences (AC4) */
@media (prefers-reduced-motion: reduce) {
  .hero-section__card-orbit-ball {
    animation: none; /* Stop animation completely */
  }
}

/* Bottom label section (US-001-004) */
.hero-section__card-bottom-label {
  /* Layout */
  width: 100%; /* AC1: Full-width treatment */
  display: flex;
  justify-content: center; /* AC1: Centered text */
  align-items: center;

  /* Spacing - Base (mobile-first) */
  padding: var(--spacing-3) var(--spacing-4); /* AC4: Mobile padding (12px 16px) */
  margin-top: var(--spacing-4); /* Spacing from image above */

  /* Colors */
  background-color: var(--color-label-background); /* AC1: Navy #2C3E50 */
  color: var(--color-neutral-white); /* AC2: White text for contrast */

  /* Typography */
  font-family: var(--font-body); /* Raleway - matches card subtitle */
  font-size: var(--font-size-sm); /* AC2: 14px for readability */
  font-weight: var(--font-weight-medium); /* AC2: Medium weight (500) */
  text-transform: uppercase; /* AC2: Uppercase transformation */
  letter-spacing: var(--letter-spacing-wider); /* AC2: Letter spacing for elegance (0.1em) */
  line-height: 1.5; /* Comfortable line height for text wrapping */

  /* Visual refinement */
  border-radius: var(--radius-sm); /* Subtle rounding (2px) */
  text-align: center; /* Ensure text centering */
}

/* Responsive adjustments for bottom label */
@media (min-width: 640px) {
  /* Tablet: Moderate padding increase */
  .hero-section__card-bottom-label {
    padding: var(--spacing-4) var(--spacing-5); /* AC4: Tablet padding (16px 20px) */
    font-size: var(--font-size-base); /* 16px for better readability on larger screens */
  }
}

@media (min-width: 1024px) {
  /* Desktop: Optimal spacing */
  .hero-section__card-bottom-label {
    padding: var(--spacing-5) var(--spacing-6); /* AC4: Desktop padding (20px 24px) */
    font-size: var(--font-size-base); /* Maintain 16px */
  }
}

/* CTA Buttons */
.hero-section__cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* Base button styling for all hero section buttons */
.hero-section__cta-buttons .button {
  width: 100%;
  font-family: var(--font-body); /* Raleway */
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium); /* 500 */
  text-transform: uppercase;
  padding: var(--spacing-3) var(--spacing-5); /* 12px 20px */
  border-radius: var(--radius-sm); /* 2px - modern slight rounding */
  border: none;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); /* Fast, snappy transition */
}

/* Primary button - Weinrot */
.hero-section__cta-buttons .button-primary,
.hero-section__pricing-card .button-primary {
  background-color: var(--color-primary-500); /* #661652 Weinrot */
  color: var(--color-neutral-white);
}

.hero-section .hero-section__cta-buttons .button-primary:hover,
.hero-section .hero-section__pricing-card .button-primary:hover {
  background-color: var(--color-primary-700); /* #480437 darker Weinrot */
  box-shadow: var(--shadow-sm); /* Subtle shadow on hover */
}

/* Secondary button - Grün */
.hero-section__cta-buttons .button-secondary,
.hero-section__pricing-card .button-secondary {
  background-color: var(--color-secondary-500); /* #36771A Grün */
  color: var(--color-neutral-white);
}

.hero-section .hero-section__cta-buttons .button-secondary:hover,
.hero-section .hero-section__pricing-card .button-secondary:hover {
  background-color: var(--color-secondary-700); /* #1D5405 darker Grün */
  box-shadow: var(--shadow-sm); /* Subtle shadow on hover */
}

/* Tablet: ≥640px */
@media (min-width: 640px) {
    .hero-section__container {
        padding: var(--spacing-2) var(--spacing-6) var(--spacing-12) var(--spacing-6);
    }

    .hero-section__pricing-cards {
        flex-direction: row;
        gap: var(--spacing-6);
    }

    .hero-section__pricing-card {
        flex: 1;
        max-width: 320px; /* Reduced by 20% from 400px */
    }

    .hero-section__card-image {
        width: 180px;
        height: 180px;
    }

    .hero-section__card-divider {
        width: 200px; /* Tablet width - AC2 */
    }

    .hero-section__cta-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .hero-section__cta-buttons .button {
        width: auto;
        min-width: 200px;
    }

    /* Maintain button styling from base (padding already applied in base rule) */
    .hero-section__pricing-card .button {
        width: auto;
        min-width: 200px;
    }
}

/* Desktop: ≥1024px */
@media (min-width: 1024px) {
    .hero-section {
        padding: 0 0 65px 0; /* Bottom padding for spacing + hero4 image transform offset */
        overflow: hidden; /* Prevent scrollbars from animated halo */
    }

    .hero-section__headline {
        font-size: var(--font-size-4xl); /* Same as AboutSection @1024px */
    }

    .hero-section__container {
        display: grid;
        grid-template-columns: minmax(400px, 1fr) minmax(300px, 1fr);
        gap: var(--spacing-12);
        padding: var(--spacing-2) var(--spacing-8) 0 var(--spacing-8);
        align-items: start; /* Verhindert Dehnung der Spalten */
        margin-bottom: -68px; /* Reduziert rosa Bereich um 50% */
    }

    .hero-section__left-column {
        padding-bottom: 0;
    }

    .hero-section__card-image {
        width: 200px;
        height: 200px;
    }

    .hero-section__card-divider {
        width: 250px; /* Desktop width - AC2 */
    }
}

/* Large Desktop: ≥1280px */
@media (min-width: 1280px) {
    .hero-section__headline {
        font-size: var(--font-size-5xl); /* Same as AboutSection @1280px */
    }

    .hero-section__container {
        max-width: 1400px;
        margin: 0 auto -68px auto; /* Horizontale Zentrierung + negativer bottom margin */
        padding: var(--spacing-2) var(--spacing-12) 0 var(--spacing-12);
    }

    .hero-section__left-column {
        padding-bottom: 0;
    }

    .hero-section__card-image {
        width: 220px;
        height: 220px;
    }
}

/* Hero Image Container */
.hero-section__hero-image-container {
  position: relative; /* For absolute positioned decorative elements */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content to bottom */
  overflow: visible; /* Allow leaf decorator to overflow outside container */
}

.hero-section__hero-image {
  width: calc(100% + 200px); /* 200px larger - Responsive sizing - AC1 */
  max-width: none; /* Remove max-width constraint */
  height: auto; /* Maintain aspect ratio - AC1 */
  display: block;
  border-radius: var(--radius-lg); /* 8px rounded corners */
  position: relative;
  z-index: 1; /* Above halo effect */
  transform: translateY(50px); /* Move image 50px down without affecting layout */
}

/* Desktop: Show right column with hero image */
@media (min-width: 1024px) {
  .hero-section__right-column {
    display: flex; /* Use flex for alignment */
    align-items: flex-end; /* Align image to bottom */
    overflow: visible; /* Allow leaf decorator to overflow */
  }
}

/* Animated Halo Effect - positioned on shoulder area */
.hero-section__halo {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle,
    rgba(212, 184, 197, 0.9) 0%,      /* --color-neutral-400 with opacity */
    rgba(232, 211, 221, 0.7) 25%,     /* --color-neutral-300 with opacity */
    rgba(242, 225, 233, 0.5) 50%,     /* --color-neutral-200 with opacity */
    rgba(249, 246, 248, 0.3) 70%,     /* --color-neutral-100 with opacity */
    transparent 75%
  );
  z-index: 0; /* Above background but behind image */
  top: 25%;
  left: 30%;
  animation: halo-pulse 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes halo-pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Circular Cutout Decorative Element */
.hero-section__circular-cutout {
  position: absolute; /* AC6 */
  width: var(--spacing-80); /* 320px - decorative element sizing */
  height: var(--spacing-80);
  border-radius: var(--radius-full); /* Perfect circle */
  background-color: var(--color-neutral-200); /* Light pink #F2E1E9 - AC5 */
  z-index: -1; /* Behind hero image - AC6 */
  top: calc(var(--spacing-12) * -1); /* -48px - Position partially behind/above image */
  right: calc(var(--spacing-12) * -1); /* -48px - Position partially off right edge */
}

/* Large Desktop: Scale up circular cutout */
@media (min-width: 1280px) {
  .hero-section__circular-cutout {
    width: var(--spacing-96); /* 384px - decorative element scaling */
    height: var(--spacing-96);
  }
}

/* Decorative Flower Background Element */
.hero-section__decorative-flower {
  position: absolute; /* AC6 */
  bottom: var(--spacing-5); /* 20px - Position at bottom of container - AC4 */
  left: calc(var(--spacing-20) * -1); /* -80px - Extend partially off left edge - AC4 */
  z-index: 0; /* Behind image but above cutout - AC6 */
  opacity: var(--opacity-40); /* 40% opacity for subtle effect - AC4 */
  pointer-events: none; /* Prevent mouse interaction */
  display: none; /* Hidden on mobile by default - AC4 */
}

/* Desktop: Show decorative flower */
@media (min-width: 1024px) {
  .hero-section__decorative-flower {
    display: block; /* Show on desktop - AC4 */
  }
}

.hero-section__decorative-flower-image {
  width: var(--spacing-48); /* 192px - Base size for desktop */
  height: auto;
  display: block;
}

/* Large Desktop: Scale up decorative flower */
@media (min-width: 1280px) {
  .hero-section__decorative-flower-image {
    width: var(--spacing-60); /* 240px - Larger on big screens */
  }
}

/* Decorative flower positioned at pricing cards top-right */
.hero-section__decorative-flower--cards {
  display: none; /* Hidden on mobile */
  position: absolute;
  top: -65px; /* 10px higher: -55px - 10px = -65px */
  right: -25px; /* 40px to the left: -65px + 40px = -25px */
  bottom: auto; /* Override base class bottom positioning */
  left: auto; /* Override base class left positioning */
  z-index: 0; /* Behind the cards (cards have z-index: 1) */
  opacity: 0.6; /* 20% opacity - less transparent, more visible */
  pointer-events: none;
  animation: flowerRotate 20s linear infinite; /* Slow continuous rotation */
  will-change: transform;
}

@media (min-width: 1024px) {
  .hero-section__decorative-flower--cards {
    display: block; /* Visible on desktop */
  }

  .hero-section__decorative-flower--cards .hero-section__decorative-flower-image {
    width: 96px; /* 50% of 192px base size */
  }
}

/* Large Desktop: Scale up flower in cards area */
@media (min-width: 1280px) {
  .hero-section__decorative-flower--cards .hero-section__decorative-flower-image {
    width: 120px; /* 50% of 240px large screen size */
  }
}

/* Animated Leaf Decorators (US-003-004) */

/* Keyframe animation: Subtle floating and swaying motion */
@keyframes leafFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

/* Keyframe animation for right leaf with vertical centering */
@keyframes leafFloatRight {
  0%, 100% {
    transform: translateY(-50%) scaleX(-1) rotate(0deg);
  }
  50% {
    transform: translateY(calc(-50% - 12px)) scaleX(-1) rotate(2deg);
  }
}

/* Keyframe animation: Slow continuous rotation for flower */
@keyframes flowerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Leaf decorator container - provides positioning context */
.hero-section__leaf-decorators {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Leaves don't interfere with clicks - AC requirement */
  z-index: 1; /* Above background decoratives (z-index 0), behind content */
  display: none; /* Hidden by default on mobile - AC5 */
}

/* Desktop: Show leaf decorators */
@media (min-width: 1024px) {
  .hero-section__leaf-decorators {
    display: block; /* Visible on desktop ≥1024px - AC5 */
  }
}

/* Individual leaf element base styling */
.hero-section__leaf-decorator {
  position: absolute; /* Positioned within container */
  width: var(--spacing-20); /* 80px base width - AC6 */
  height: auto; /* Maintain aspect ratio */
  z-index: 1; /* Inherit from container context */
  will-change: transform; /* Performance optimization - AC4 */
  animation: leafFloat 3s ease-in-out infinite; /* AC2, AC3 timing */
}

/* Large Desktop: Scale up leaf size */
@media (min-width: 1440px) {
  .hero-section__leaf-decorator {
    width: 100px; /* 100px on large screens - AC5 */
  }

  .hero-section__leaf-decorator--top {
    width: 250px; /* 50% larger on large screens */
  }
}

/* Leaf 1: Bottom-left positioning */
.hero-section__leaf-decorator--top {
  bottom: -40px; /* Partially below the box */
  left: var(--spacing-5); /* 20px from left - AC6 */
  animation-delay: 0s; /* Starts immediately - AC3 */
  width: 220px; /* 50% larger than base 80px */
  z-index: 0; /* Behind the box */
}

/* Leaf positioned at pricing cards bottom-left */
.hero-section__leaf-decorator--cards {
  display: none; /* Hidden on mobile */
  position: absolute;
  bottom: -40px; /* Partially below the cards */
  left: -170px; /* 170px to the left */
  width: 220px; /* 50% larger than base 80px */
  z-index: 0; /* Behind the cards */
  animation: leafFloat 3s ease-in-out infinite;
  animation-delay: 0s;
  will-change: transform;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero-section__leaf-decorator--cards {
    display: block; /* Visible on desktop */
  }
}

@media (min-width: 1440px) {
  .hero-section__leaf-decorator--cards {
    width: 250px; /* 50% larger on large screens */
  }
}

/* Leaf decorator positioned right of hero image container */
.hero-section__leaf-decorator--right {
  display: none; /* Hidden on mobile */
  position: absolute;
  top: calc(50% - 300px); /* 300px higher from center */
  right: -160px; /* Positioned to the right, outside container */
  transform: translateY(-50%) scaleX(-1); /* Center and mirror */
  width: 160px; /* 100% larger than base 80px */
  z-index: 1;
  animation: leafFloatRight 3s ease-in-out infinite;
  animation-delay: 1.5s;
  will-change: transform;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .hero-section__leaf-decorator--right {
    display: block; /* Visible on desktop */
  }
}

@media (min-width: 1440px) {
  .hero-section__leaf-decorator--right {
    width: 200px; /* 100% larger on large screens */
    right: -200px; /* More space on large screens */
  }
}

/* Accessibility: Respect motion preferences - AC7 */
@media (prefers-reduced-motion: reduce) {
  .hero-section__leaf-decorator {
    animation: none; /* Disable animation completely */
  }
}