/* ============================================================
   Caro's Heilmassage — base styles, responsive layout,
   and interactive states (hover/focus).
   Most layout lives as inline styles in index.html; this file
   holds what must be real CSS: the reset, media queries, and
   :hover / :focus / .active rules.
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Mulish',system-ui,sans-serif;color:#46553a;background:#FAF9F3;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#C5F8A8;color:#33521C}
input,select,textarea,button{font-family:inherit}
a{color:inherit}
::placeholder{color:#68735A}
img,svg{max-width:100%}

/* ---------- Accessibility: skip link + visible keyboard focus ---------- */
.skip-link{
  position:fixed;left:0;top:0;z-index:100;
  background:#33521C;color:#F4F9EC;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:0 0 12px 0;text-decoration:none;
  /* Clip statt off-screen: left:-9999px wird beim iOS-Overscroll (Gummiband) sichtbar */
  clip-path:inset(100%);
}
.skip-link:focus{clip-path:none}
/* Visually hidden, but read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Light halo + dark ring stays visible on both cream and dark-green backgrounds. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid transparent; /* keeps an outline in Windows High Contrast mode */
  box-shadow:0 0 0 2px #FAF9F3,0 0 0 4px #33521C;
}

/* ---------- Navigation links (hover + scroll-spy active state) ---------- */
.navlink{
  text-decoration:none;color:#5f6b51;font-size:14.5px;font-weight:500;
  padding:5px 1px;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;white-space:nowrap;
}
.navlink:hover{color:#33521C}
.navlink.active{color:#33521C;border-bottom-color:#7BB553}

/* ---------- Hamburger toggle (hidden on desktop, shown on mobile) ---------- */
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;flex:none;
  background:transparent;border:none;border-radius:11px;cursor:pointer;
  transition:background .2s ease;
}
.nav-toggle:hover{background:rgba(51,82,28,0.07)}
.nav-toggle-bar{
  display:block;width:100%;height:2px;border-radius:2px;background:#33521C;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Interactive states (replacing the original style-hover/style-focus) ---------- */
.btn-primary:hover{background:#2a4417 !important}
.btn-outline:hover{border-color:#33521C !important;background:rgba(197,248,168,0.25) !important}
.btn-submit:hover{background:#2a4417 !important}
.svc-card:hover{transform:translateY(-4px) !important;box-shadow:0 22px 38px -26px rgba(51,82,28,0.5) !important}
.field:focus{border-color:#4E7A31 !important;background:#fff !important}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .r-hero,.r-split,.r-splitp{grid-template-columns:1fr !important;}
  .r-hero{gap:40px !important;}
  .r-split{gap:44px !important;}
  .r-splitp{gap:30px !important;}
  .r-cards{grid-template-columns:repeat(2,1fr) !important;}
  .r-pad{padding-top:64px !important;padding-bottom:64px !important;}
  .r-sticky{position:static !important;top:auto !important;}
  .r-hero-pad{padding-top:60px !important;padding-bottom:68px !important;}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .r-cards{grid-template-columns:1fr !important;}
  .r-duo{grid-template-columns:1fr !important;}
  .r-pad,.r-hero-pad{padding-top:48px !important;padding-bottom:48px !important;padding-left:20px !important;padding-right:20px !important;}

  /* Hero: Massagefoto als Hintergrund statt gestapeltes Portrait unter dem Text */
  .hero-photo{display:none !important;}
  .hero-watermark{display:none !important;}
  #top{
    background:
      linear-gradient(180deg,rgba(250,249,243,0.96) 0%,rgba(250,249,243,0.88) 48%,rgba(250,249,243,0.45) calc(100% - 40px),#FAF9F3 100%),
      url('/assets/img/caro-massage.webp') center 30%/cover no-repeat !important;
  }
  .r-nav{padding-left:18px !important;padding-right:18px !important;gap:12px !important;}

  /* Show the hamburger, collapse the inline links into a dropdown panel */
  .nav-toggle{display:flex;}
  .r-navlinks{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch !important;justify-content:flex-start !important;
    gap:2px !important;flex-wrap:nowrap !important;
    padding:10px 18px 20px;
    background:rgba(250,249,243,0.98);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(51,82,28,0.12);
    box-shadow:0 22px 32px -24px rgba(51,82,28,0.55);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .r-navlinks.open{opacity:1;visibility:visible;transform:none;}
  .r-navlinks .navlink{
    padding:13px 4px;font-size:16px;
    border-bottom:1px solid rgba(51,82,28,0.08);
  }
  .r-navlinks .navlink.active{border-bottom-color:#7BB553;}
  .r-cta{align-self:flex-start;margin-top:12px;padding:12px 22px !important;}

  /* Let the contact fields use the full section width on small screens. */
  .contact-form-card{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
  }
}

/* ---------- Hero-Logo: Wirbel (einmalig pro Sitzung) + Atmen (dauerhaft) ---------- */
/* Drehung/Atmung liegen auf dem <svg>-Element (eindeutige CSS-Box) — die
   Blütenmitte sitzt wegen des Letterboxing bei 41.7%/49.1% der Box */
.hl-logo{
  transform-origin:41.7% 49.1%;
  animation:hlBreathe 6.5s ease-in-out 1.5s infinite;
}
/* Farbzyklus: jedes Blatt wandert durch alle 10 Grüntöne der Palette (24s).
   --p ist die Position des eigenen Grundtons im Zyklus — der negative Delay
   startet jedes Blatt genau bei seiner Originalfarbe, ohne Sprung. */
.hl-flower path{
  transform-box:fill-box;transform-origin:50% 50%;
  animation:hlSpectrum 24s linear calc(var(--p)*-2.4s) infinite;
}
.hl-flower path:nth-of-type(1){--i:0;--p:2}.hl-flower path:nth-of-type(2){--i:1;--p:0}
.hl-flower path:nth-of-type(3){--i:2;--p:5}.hl-flower path:nth-of-type(4){--i:3;--p:6}
.hl-flower path:nth-of-type(5){--i:4;--p:6}.hl-flower path:nth-of-type(6){--i:5;--p:3}
.hl-flower path:nth-of-type(7){--i:6;--p:1}.hl-flower path:nth-of-type(8){--i:7;--p:8}
.hl-flower path:nth-of-type(9){--i:8;--p:7}.hl-flower path:nth-of-type(10){--i:9;--p:9}
.hl-flower path:nth-of-type(11){--i:10;--p:4}
.logo-intro .hl-logo{
  animation:hlSwirl 1.2s cubic-bezier(.22,1,.36,1) both,
            hlBreathe 6.5s ease-in-out 1.5s infinite;
}
.logo-intro .hl-flower path{
  animation:hlPetal .75s cubic-bezier(.22,1,.36,1) calc(var(--i)*45ms) both,
            hlSpectrum 24s linear calc(var(--p)*-2.4s) infinite;
}
.logo-intro .hero-fade{animation:hlFade .6s ease-out .25s both}
@keyframes hlSwirl{from{transform:rotate(-130deg) scale(.6)}to{transform:none}}
@keyframes hlPetal{0%{opacity:0;transform:scale(.5)}45%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hlBreathe{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}62%{transform:scale(1.044)}}
@keyframes hlSpectrum{
  0%{fill:#428642}10%{fill:#4a9e4a}20%{fill:#45b245}30%{fill:#41b841}
  40%{fill:#63cd63}50%{fill:#75c475}60%{fill:#67dc67}70%{fill:#77ef77}
  80%{fill:#60d060}90%{fill:#47b247}100%{fill:#428642}
}
@keyframes hlFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
  }
  /* Logo-Animationen komplett aus (globale Regel oben kürzt nur die Dauer,
     nicht die Delays — das gäbe sonst verzögert aufblitzende Blätter) */
  .hl-logo,.hl-flower path,.logo-intro .hero-fade{animation:none !important}
  /* Test-Schalter: Aufruf mit #anim erzwingt die Logo-Animation trotz
     "Bewegung reduzieren" (setzt html.force-motion, siehe Head-Script) */
  html.force-motion .hl-logo{
    animation:hlSwirl 1.2s cubic-bezier(.22,1,.36,1) both,
              hlBreathe 6.5s ease-in-out 1.5s infinite !important;
  }
  html.force-motion .hl-flower path{
    animation:hlPetal .75s cubic-bezier(.22,1,.36,1) calc(var(--i)*45ms) both,
              hlSpectrum 24s linear calc(var(--p)*-2.4s) infinite !important;
  }
  html.force-motion .hero-fade{animation:hlFade .6s ease-out .25s both !important}
}