/* Home public page/hero presentation.
   Owner: HOME_PUBLIC_HERO_CSS_EXTRACTION_S1.
   Keep Planner drawer, page transition, hero video runtime, shared shell,
   backend/payment/admin/pricing, and content semantics out of this file. */

:root{
  --bg:var(--anima-home-page-bg, #ffffff);
  --text:var(--anima-ink-dark, #0b0b0f);
  --muted:var(--anima-muted-dark, #6b6b75);
  --card:var(--anima-home-card-bg, #f5f5f7);
  --mobileChrome:var(--anima-home-mobile-chrome, #ffffff);
  --line:var(--anima-home-line, rgba(0,0,0,.10));
  --shadow:var(--anima-home-shadow, 0 14px 34px rgba(0,0,0,.10));
  --radius:var(--anima-radius-lg, 28px);
  --accent:var(--anima-home-accent, #0b0b0f);
  --accentText:var(--anima-home-accent-text, #ffffff);
  --layout-max-width:var(--anima-layout-max, clamp(1240px, 88vw, 1720px));
  --layout-padding-x:var(--anima-layout-padding-x, clamp(22px, 3.4vw, 64px));
  --layout-content-width:var(--layout-max-width);
  --layout-inset:max(var(--layout-padding-x), calc((100vw - var(--layout-max-width)) / 2 + var(--layout-padding-x)));
  --page-max-width:var(--footer-max-width);
  --page-padding-x:var(--layout-padding-x);
  --content-max-width:var(--layout-content-width);
  --text-max-width:var(--anima-home-hero-copy-width);
  --hero-max-width:var(--layout-max-width);
  --page-grid-inset:var(--layout-inset);
  --content-grid-inset:var(--layout-inset);
  --hero-grid-inset:var(--layout-inset);
  --section-gap:var(--anima-section-gap, clamp(52px, 6vw, 96px));
  --section-padding-y:var(--section-gap);
  --content-gap:var(--anima-home-hero-copy-gap);
  --heading-gap:var(--anima-home-hero-heading-gap);
  --hero-content-max-width:var(--anima-home-hero-content-width);
}

*{box-sizing:border-box}
html,
body{
  -webkit-tap-highlight-color:transparent;
}
:where(
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn
){
  -webkit-tap-highlight-color:transparent;
  tap-highlight-color:transparent;
}
:where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn
){
  -webkit-appearance:none;
  appearance:none;
  background-clip:padding-box;
}
@media (hover:none), (pointer:coarse){
  :where(
    a,
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn
  ):is(:focus, :focus-visible, :active){
    outline:none !important;
    box-shadow:none !important;
  }
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--apple-ui-font);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,
input,
select,
textarea{
  font:inherit;
  font-family:var(--apple-ui-font);
}
a{color:inherit}

@media (max-width:767px){
  html,
  body{
    background:var(--mobileChrome);
  }
}

/* One consistent width for everything */
.wrap{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--page-padding-x) 90px}
#top.wrap{padding-bottom:0}

.section{padding:var(--section-padding-y) 0}
.hero{padding:0;text-align:center}

.hero h1{
  margin:0 auto var(--heading-gap);
  font-size:var(--anima-home-legacy-title-size);
  line-height:var(--anima-home-legacy-title-line-height);
  font-weight:var(--anima-home-legacy-title-weight);
  letter-spacing:var(--anima-home-legacy-title-letter-spacing);
  max-width:var(--anima-home-legacy-title-width);
}
.hero p{
  margin:0 auto var(--content-gap);
  color:var(--muted);
  font-size:var(--anima-home-legacy-copy-size);
  line-height:var(--anima-home-legacy-copy-line-height);
  max-width:var(--anima-home-legacy-copy-width);
}
.heroApple{
  padding:0;
  margin-bottom:0;
}
#offer-frauen{
  margin-top:calc(var(--headerH) * -1);
}
.heroVisual{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  overflow-y:auto;
  min-height:calc(var(--homePanelVh) - var(--headerH) - 56px);
  border:none;
  box-shadow:none;
  background:var(--anima-home-hero-surface-bg);
}
.heroVisual--video{
  overflow:hidden;
  min-height:var(--homePanelVh);
  background:var(--anima-home-hero-media-bg);
}
.heroVisual--video.is-autoplay-blocked{
  cursor:pointer;
}
.heroVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease;
}
.heroVideoPoster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}
.heroVideo.is-ready,
.heroVideo.is-playing{
  opacity:1;
  visibility:visible;
}
.heroVisual--laser-static{
  background:var(--anima-home-hero-media-bg);
}
.heroLaserBackdrop{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.heroLaserBackdrop::before,
.heroLaserBackdrop::after{
  content:none;
}

.heroVisual::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--anima-home-hero-overlay-soft);
  pointer-events:none;
}
.heroVisual::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--anima-home-hero-overlay-side);
  pointer-events:none;
}
#offer-frauen .heroVisual{
  background:var(--anima-home-hero-frauen-bg);
}
#offer-frauen .heroVisual.heroVisual--video{
  background:var(--anima-home-hero-media-bg);
}
#offer-frauen .heroVisual--video,
#offer-frauen .heroVisual--video .heroOverlay{
  min-height:calc(var(--homePanelVh) + var(--headerH));
}
#offer-frauen .heroVisual.heroVisual--laser-static{
  background:var(--anima-home-hero-media-bg);
}
#offer-frauen .heroVisual::before{
  background:var(--anima-home-hero-fresh-overlay-soft);
}
#offer-frauen .heroVisual::after{
  background:var(--anima-home-hero-fresh-overlay-side);
}
#offer-frauen .heroVisual.heroVisual--video::before{
  background:var(--anima-home-hero-fresh-video-overlay-soft);
  z-index:1;
}
#offer-frauen .heroVisual.heroVisual--video::after{
  background:var(--anima-home-hero-fresh-video-overlay-side);
  z-index:1;
}
#offer-detox .heroVisual{
  background:var(--anima-home-hero-detox-bg);
}
#offer-detox .heroVisual.heroVisual--video{
  background:var(--anima-home-hero-media-bg);
}
#offer-detox .heroVisual::before{
  background:var(--anima-home-hero-fresh-overlay-soft);
}
#offer-detox .heroVisual::after{
  background:var(--anima-home-hero-fresh-overlay-side);
}
#offer-detox .heroVisual.heroVisual--video::before{
  background:var(--anima-home-hero-fresh-video-overlay-soft);
  z-index:1;
}
#offer-detox .heroVisual.heroVisual--video::after{
  background:var(--anima-home-hero-fresh-video-overlay-side);
  z-index:1;
}
#offer-thermo .heroVisual{
  background:var(--anima-home-hero-thermo-bg);
}
#offer-thermo .heroVisual.heroVisual--video{
  background:var(--anima-home-hero-media-bg);
}
#offer-thermo .heroVisual::before{
  background:var(--anima-home-hero-thermo-overlay-soft);
}
#offer-thermo .heroVisual::after{
  background:var(--anima-home-hero-thermo-overlay-side);
}
#offer-thermo .heroVisual.heroVisual--video::before{
  background:var(--anima-home-hero-thermo-video-overlay-soft);
  z-index:1;
}
#offer-thermo .heroVisual.heroVisual--video::after{
  background:var(--anima-home-hero-thermo-video-overlay-side);
  z-index:1;
}
#about-anima{
  padding:0;
  margin-top:0;
}
#about-anima .heroVisual{
  min-height:var(--homePanelVh);
  background:var(--anima-home-hero-media-bg);
  overflow:hidden;
}
#about-anima .heroVisual::before{
  background:var(--anima-home-hero-about-overlay-soft);
  z-index:1;
}
#about-anima .heroVisual::after{
  background:var(--anima-home-hero-about-overlay-side);
  z-index:1;
}
#about-anima .heroVideoPoster{
  object-position:center center;
}
#about-anima .heroVideo{
  object-position:center center;
}
.heroOverlay{
  position:relative;
  z-index:2;
  min-height:calc(var(--homePanelVh) - var(--headerH) - 56px);
  padding:var(--section-padding-y) var(--page-padding-x);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--anima-home-hero-panel-text);
  width:min(100%, var(--hero-content-max-width));
  margin:0 auto;
  user-select:none;
  -webkit-user-select:none;
}
.heroVisual--video .heroOverlay{
  min-height:var(--homePanelVh);
  width:100%;
  max-width:none;
  padding:var(--anima-home-hero-video-overlay-padding);
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  color:var(--anima-home-hero-media-text);
}
.heroOverlay h1{
  margin:0 0 var(--heading-gap);
  max-width:var(--anima-home-hero-title-width);
  color:var(--anima-home-hero-panel-text);
  text-shadow:var(--anima-home-hero-panel-title-shadow);
  font-size:var(--anima-home-hero-title-size);
  line-height:var(--anima-home-hero-title-line-height);
  letter-spacing:var(--anima-home-hero-title-letter-spacing);
}
.heroOverlay h2{
  margin:0 0 var(--heading-gap);
  max-width:var(--anima-home-hero-title-width);
  color:var(--anima-home-hero-panel-text);
  text-shadow:var(--anima-home-hero-panel-title-shadow);
  font-size:var(--anima-home-hero-title-size);
  line-height:var(--anima-home-hero-title-line-height);
  letter-spacing:var(--anima-home-hero-title-letter-spacing);
  font-weight:var(--anima-home-hero-title-weight);
}
.heroOverlay p{
  margin:0 0 var(--content-gap);
  max-width:var(--text-max-width);
  color:var(--anima-home-hero-panel-copy);
  text-shadow:var(--anima-home-hero-panel-copy-shadow);
  font-size:var(--anima-home-hero-copy-size);
  line-height:var(--anima-home-hero-copy-line-height);
  letter-spacing:var(--anima-home-hero-copy-letter-spacing);
  font-weight:var(--anima-home-hero-copy-weight);
}
.heroVisual--video .heroOverlay h1,
.heroVisual--video .heroOverlay h2{
  color:var(--anima-home-hero-media-text);
  text-shadow:var(--anima-home-hero-media-title-shadow);
  max-width:var(--anima-home-hero-title-width);
}
.heroVisual--video .heroOverlay p{
  color:var(--anima-home-hero-media-copy);
  text-shadow:var(--anima-home-hero-media-copy-shadow);
  max-width:var(--text-max-width);
  margin:0 0 var(--content-gap);
}

.heroVisual--video .btnRow{
  justify-content:center;
  margin-top:0;
}

@media (min-width:921px){
  #offer-frauen .heroVisual--video .heroOverlay{
    width:100%;
    max-width:none;
    margin:0;
    padding-left:var(--hero-grid-inset);
    padding-right:var(--hero-grid-inset);
    align-items:center;
    text-align:center;
  }
  #offer-frauen .heroVisual--video .heroOverlay h1{
    width:min(820px, 100%);
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    align-self:center;
  }
  #offer-frauen .heroVisual--video .heroOverlay p,
  #offer-frauen .heroVisual--video .heroOverlay .btnRow{
    width:min(var(--text-max-width), 100%);
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    align-self:center;
  }
  #offer-frauen .heroVisual--video .heroOverlay .btnRow{
    justify-content:center;
  }
}

.heroApple .btn{
  border-color:var(--anima-home-hero-button-border);
  background:var(--anima-home-hero-button-bg);
  color:var(--anima-home-hero-button-text);
  backdrop-filter:var(--anima-home-hero-button-backdrop);
}
.heroApple .btn:hover{
  background:var(--anima-home-hero-button-bg-hover);
}
.heroApple .btn.primary{
  background:var(--anima-home-hero-button-primary-bg);
  color:var(--anima-home-hero-button-primary-text);
  border-color:var(--anima-home-hero-button-primary-border);
}
.heroApple .btn.ui-click-fill::after{
  background:var(--anima-home-hero-button-fill-feedback);
}
.heroApple .btn.ui-click-ghost::after{
  border-color:var(--anima-home-hero-button-ghost-feedback);
}
.heroVisual--video .btn{
  border-color:var(--anima-home-hero-media-button-border);
  background:var(--anima-home-hero-media-button-bg);
  color:var(--anima-home-hero-media-button-text);
  backdrop-filter:var(--anima-home-hero-media-button-backdrop);
}
@media (hover:none), (pointer:coarse){
  .heroApple .btn{
    background:var(--anima-home-hero-button-coarse-bg);
    border-color:var(--anima-home-hero-button-coarse-border);
    box-shadow:var(--anima-home-hero-button-coarse-shadow);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .heroApple .btn.primary{
    background:var(--anima-home-hero-button-primary-coarse-bg);
    color:var(--anima-home-hero-button-primary-coarse-text);
    border-color:var(--anima-home-hero-button-primary-coarse-border);
    box-shadow:var(--anima-home-hero-button-primary-coarse-shadow);
  }
  .heroVisual--video .btn{
    background:var(--anima-home-hero-media-button-coarse-bg);
    border-color:var(--anima-home-hero-media-button-coarse-border);
    box-shadow:var(--anima-home-hero-media-button-coarse-shadow);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .heroVisual--video .btn.primary{
    background:var(--anima-home-hero-media-button-primary-coarse-bg);
    border-color:var(--anima-home-hero-media-button-primary-coarse-border);
    box-shadow:var(--anima-home-hero-media-button-primary-coarse-shadow);
  }
}
.heroVisual--video .btn:hover{
  background:var(--anima-home-hero-media-button-bg-hover);
}
.heroVisual--video .btn.primary{
  background:var(--anima-home-hero-media-button-primary-bg);
  color:var(--anima-home-hero-media-button-primary-text);
  border-color:var(--anima-home-hero-media-button-primary-border);
}
.heroVisual--video .btn.ui-click-fill::after{
  background:var(--anima-home-hero-media-button-fill-feedback);
}
.heroVisual--video .btn.ui-click-ghost::after{
  border-color:var(--anima-home-hero-media-button-ghost-feedback);
}

.heroLaunchInline{
  /* Reusable hero announcement slot. */
  display:none;
  margin-top:4px;
  color:var(--anima-home-hero-inline-accent, #67ef9d);
}
.heroMoveoInline{
  color:var(--anima-home-hero-inline-accent, #67ef9d);
}
#offer-detox,
#offer-thermo{
  padding:0;
  margin-top:0;
}

.btnRow{
  display:flex;
  justify-content:center;
  gap:clamp(10px, 1.2vw, 14px);
  flex-wrap:wrap;
  margin-top:10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:var(--anima-home-button-padding-block) var(--anima-home-button-padding-inline);
  border-radius:var(--anima-home-button-radius);
  border:1px solid var(--anima-home-button-border);
  background:var(--anima-home-button-bg);
  text-decoration:none;
  font-weight:var(--anima-home-button-font-weight);
  font-size:var(--anima-home-button-font-size);
  transition:var(--anima-home-button-transition);
  cursor:pointer;
  min-width:var(--anima-home-button-min-width);
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--anima-home-button-bg-hover)}
.btn:active{transform:var(--anima-home-button-active-transform)}
.btn.primary{
  background:var(--anima-home-button-primary-bg);
  color:var(--anima-home-button-primary-text);
  border-color:var(--anima-home-button-primary-border);
}
.btn.primary:hover{
  opacity:1;
  animation:btnPrimaryHover 1.05s ease-in-out infinite alternate;
}
.btn.buyGhost{
  background:var(--anima-home-button-buy-ghost-bg);
  border-color:var(--anima-home-button-buy-ghost-border);
  color:var(--anima-home-button-buy-ghost-text);
  backdrop-filter:var(--anima-home-button-buy-ghost-backdrop);
}
.btn.buyGhost:hover{
  background:var(--anima-home-button-buy-ghost-bg-hover);
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transform:scale(.96);
}
.btn.ui-click-ghost::after{
  background:transparent;
  border:2px solid var(--anima-home-button-ghost-feedback);
  animation:btnGhostRing .30s ease-out both;
}
.btn.ui-click-fill::after{
  background:var(--anima-home-button-fill-feedback);
  animation:btnFillFlash .32s ease-out both;
}

@keyframes btnGhostRing{
  0%{opacity:0;transform:scale(.94)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(1.03)}
}
@keyframes btnFillFlash{
  0%{opacity:0;transform:scale(.96)}
  40%{opacity:1}
  100%{opacity:0;transform:scale(1)}
}
@keyframes btnPrimaryHover{
  0%{box-shadow:0 0 0 0 rgba(11,11,15,0)}
  100%{box-shadow:0 0 0 5px rgba(11,11,15,.12)}
}

/* Homepage: all blocks fade in together once, then stay static */
.reveal{opacity:1;transform:none;transition:none;will-change:auto}
.reveal.is-visible{opacity:1;transform:none;}
body.home-intro .wrap > .section{
  opacity:0;
  transform:translateY(18px);
}
body.home-intro.home-intro-visible .wrap > .section{
  opacity:1;
  transform:translateY(0);
  transition:opacity .7s ease, transform .7s ease;
}

@media (max-width:920px){
  .hero h1{font-size:var(--anima-home-legacy-title-mobile-size)}
  .heroApple{padding:0}
  #offer-frauen .heroVisual--laser-static .heroVideo{
    object-fit:cover;
    object-position:center center;
  }
  #about-anima .heroVideo,
  #about-anima .heroVideoPoster{
    object-position:center center;
    transform:scale(1.85);
    transform-origin:center center;
  }
  .heroVisual,
  .heroOverlay{min-height:calc(var(--homePanelVh) - var(--headerH) - 34px)}
  .heroVisual{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  .heroVisual--video,
  .heroVisual--video .heroOverlay{
    min-height:var(--homePanelVh);
  }
  .heroOverlay{
    width:min(100%, var(--hero-content-max-width));
    padding:var(--anima-home-hero-mobile-overlay-padding);
    justify-content:center;
  }
  .heroVisual--video .heroOverlay{
    width:100%;
    max-width:none;
    padding:var(--anima-home-hero-mobile-video-overlay-padding);
    align-items:center;
    justify-content:flex-end;
    text-align:center;
  }
  #offer-frauen .heroVisual--video .heroOverlay{
    max-width:none;
    align-items:center;
    text-align:center;
  }
  .heroOverlay h1{
    font-size:var(--anima-home-hero-mobile-title-size);
    line-height:var(--anima-home-hero-mobile-title-line-height);
    margin-bottom:var(--anima-home-hero-mobile-title-margin-bottom);
  }
  .heroOverlay h2{
    font-size:var(--anima-home-hero-mobile-title-size);
    line-height:var(--anima-home-hero-mobile-title-line-height);
    margin-bottom:var(--anima-home-hero-mobile-title-margin-bottom);
  }
  .heroOverlay p{
    font-size:var(--anima-home-hero-mobile-copy-size);
    line-height:var(--anima-home-hero-mobile-copy-line-height);
    max-width:var(--anima-home-hero-mobile-copy-width);
  }
  .heroVisual--video .heroOverlay p{
    max-width:var(--anima-home-hero-mobile-copy-width);
  }
  .heroMoveoInline{
    display:block;
    white-space:nowrap;
  }
  #offer-frauen .heroVisual--video .heroOverlay h1,
  #offer-frauen .heroVisual--video .heroOverlay p,
  #offer-frauen .heroVisual--video .heroOverlay .btnRow{
    margin-left:auto;
    margin-right:auto;
    align-self:center;
  }
  .heroVisual--video .btnRow{
    align-self:center;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }
  #offer-frauen .heroVisual--video .heroOverlay .btnRow{
    align-self:center;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }

#offer-detox,
  #offer-thermo{
    padding:0;
  }
  .heroApple .btnRow .btn{
    width:auto;
    max-width:100%;
    min-height:var(--anima-home-button-mobile-min-height);
  }
  .btn{min-width:var(--anima-home-button-mobile-min-width)}
}