body {
  font-size: 0.9411764705882353vw;
}

@media screen and (min-width: 1600px) {
  body {
    font-size: 16px;
  }
}

@media screen and (max-width: 479px) {
  .button-2-copy.is-navbar {
    padding: 0.6em 1.25em;
    font-size: 14px;
    white-space: nowrap;
  }

  .section_hero.is-abnehmspritze .global-h1 {
    font-size: 13vw;
  }
}

/* Dark CTA button variant, matching the external-link callout button's accent color */
.button-2-copy.is-dark {
  background-color: #788792;
  color: #fff;
}
.button-2-copy.is-dark:hover {
  background-color: #636f78;
}

/* Hero image for botox.html (same full-height hero pattern as josefin-kirsch.html). */
.section_hero.is-botox {
  background-image: url(botox-hero.jpg);
}

/* Hero image for prp.html (same full-height hero pattern as josefin-kirsch.html). */
.section_hero.is-prp {
  background-image: url(prp1.jpg);
}

/* Full-width "divider" image breaking out of the centered content column, spanning the
   entire page width - used between content sections (e.g. on prp.html). */
.full-bleed-image {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  display: block;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  max-width: 100vw;
}

/* Make accordion category headings (e.g. FAQ grouping titles) stand out above their questions,
   with a small gap before each one to separate category groups */
.accordion_smalltitle {
  font-size: 1.9em;
  font-weight: 700;
  color: #788792;
  margin-top: 3rem;
}
/* em is relative to the tiny fluid body font-size on tablets/phones, so use a fixed size there */
@media screen and (max-width: 991px) {
  .accordion_smalltitle {
    font-size: 22px;
  }
}

/* prp.html: left-align the FAQ block with the text above it. The accordion container is narrower
   (80em) than the text container (100em) and both are centered, so offset it by the difference. */
.section_hero.is-prp ~ .section_accordions .container-medium.is-accordions {
  margin-left: max(0px, calc((100% - 100em) / 2));
  margin-right: auto;
}

/* Price tables on botox.html / prp.html inherit the tiny fluid body font-size on small screens;
   paragraphs get a fixed 16px there, so do the same for the table. */
@media screen and (max-width: 991px) {
  .legal-rtb table {
    font-size: 16px;
  }
}

/* wissenswertes.html: less space after "Wissenswertes über Abnehmen und Adipositas", more space
   above each following category heading to separate the groups clearly. */
.section_hero.is-wissenswertes ~ .section_legal + .section_accordions .accordion_smalltitle {
  margin-top: 0;
}
.section_hero.is-wissenswertes + .section_legal .legal-rtb > h2:last-child {
  margin-top: 4.5rem;
}
.section_hero.is-wissenswertes ~ .section_accordions + .section_accordions .accordion_smalltitle {
  margin-top: 6rem;
}

/* Tighter rhythm inside each accordion item: less space between a question and its revealed
   answer, and less space after the answer before the next question */
.fs_accordion-1_header-2 {
  padding: 1.5em 0 0.75em;
}
.fs_accordion-1_body {
  padding-bottom: 1.25em;
}

/* Compact spacing variant for a closing legal-wrapper section (e.g. final CTA after an accordion
   list), where the default 15em/10em top/bottom padding leaves far too much empty space */
.legal-wrapper.is-compact {
  padding-top: 3em;
  padding-bottom: 3em;
}

/* Reduced bottom padding for an intro legal-wrapper directly followed by an accordion list,
   where the default 10em bottom padding leaves too much space before the first category.
   Also reduced top padding - the default 15em left a large empty gap below the hero photo
   before the "Klare Orientierung..." heading. */
.legal-wrapper.is-tight-bottom {
  padding-top: 3em;
  padding-bottom: 2em;
}

/* Full-height hero image sections (josefin-kirsch, kontakt, aktuelles, adipositasbehandlung) were
   exactly 100svh tall with the page heading only appearing further below - on first load this can
   look like an empty/broken page since no text is visible without scrolling. Shrinking the image
   slightly and pulling the heading up lets it peek into view, and a gently bouncing "scroll down"
   chevron reinforces that there is more content below. */
.section_hero {
  height: 85svh;
}
.section_hero + .section_h1 .h1-wrapper {
  padding-top: 2.5em;
}

/* Overlay the hero H1 heading + "scroll down" arrow onto the bottom of the hero photo (used
   on pages whose heading used to sit in a separate section below the image, leaving visitors
   looking at nothing but a full-screen photo with no visible text on first load). The arrow
   sits below the heading, both stacked at the bottom edge of the photo.
   NOTE: keep `.section_hero` AND `.section_h1` out of flex/grid display - the GSAP ScrollTrigger
   heading reveal animation measures `.shifted_h1-row` positions on load, and putting any flex
   display on their ancestors throws off its calculations, leaving the heading stuck at ~0
   opacity. Plain block-flow stacking (the arrow centered via auto margins) avoids that. */
.section_hero.is-heading-overlay {
  display: flex;
  align-items: flex-end;
}
.section_hero.is-heading-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.section_hero.is-heading-overlay .section_h1 {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: transparent;
  color: #fff;
}
.section_hero.is-heading-overlay .shifted_h1-container {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.section_hero.is-heading-overlay .h1-wrapper {
  padding-top: 0;
  padding-bottom: 1em;
}
.section_hero.is-heading-overlay .v-line-container {
  display: none;
}
.section_hero.is-heading-overlay .hero-scroll-cue {
  position: static;
  margin: 0 auto 2em;
}

/* Hero photos for abnehmspritze.html and abnehmpille.html - these pages had no hero image at
   all before (just a plain heading), so the background-image is defined here instead of the
   shared Webflow stylesheet. */
.section_hero.is-abnehmspritze {
  background-image: url(abnehmspritze.jpg);
}
.section_hero.is-abnehmpille {
  background-image: url(abnehmpille.jpg);
}
.section_hero.is-wissenswertes {
  background-image: url(fragen_adipositas.jpg);
}
/* index.html's homehero already overlays its heading at the bottom of the photo, it just needs
   the same "scroll down" cue as the other hero pages */
.section_homehero {
  position: relative;
}

/* Tighten the dead space between the hero photo and the first heading below it - the default
   10em section spacing left a large empty gap now that the hero is shorter and its heading
   overlays the image instead of filling this section. */
.section_about .about-wrapper {
  padding-top: 3em;
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  width: 3.2rem;
  height: 3.2rem;
  margin-left: -1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  /* avoid mobile browsers treating the tap as an ambiguous double-tap-zoom/scroll gesture,
     which can silently swallow the click event on touch devices */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hero-scroll-cue::before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  border-right: 4px solid #fff;
  border-bottom: 4px solid #fff;
  transform: rotate(45deg);
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: hero-scroll-cue 1.8s ease-in-out infinite;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-scroll-cue:hover::before {
  opacity: 1;
  transform: rotate(45deg) scale(1.2);
}
@keyframes hero-scroll-cue {
  0%,
  100% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.9;
  }
  50% {
    transform: translateY(10px) rotate(45deg);
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue::before {
    animation: none;
  }
}

.section_hero.is-heading-overlay + .section_legal .legal-wrapper {
  padding-top: 40px;
  padding-bottom: 32px;
}
.section_hero.is-heading-overlay + .section_legal .legal-rtb {
  margin-top: 0;
}
.section_hero.is-heading-overlay + .section_legal .legal-rtb > :first-child {
  margin-top: 0;
}
.footer.is-compact-top .footer-wrapper {
  padding-top: 24px;
}

/* Multi-level flyout navigation: expandable submenus + active-path highlighting */
.menu-wrapper-2 {
  overflow-y: auto;
  /* override the default justify-content:flex-end - with overflowing content that
     property clips the start of the list instead of allowing normal scrolling */
  justify-content: flex-start !important;
}
.menu-wrapper-2 > .menu-top-wrapper {
  margin-top: auto;
}
/* Keep the first menu entry ("Home") below the fixed navbar/logo even when expanded submenus make
   the list taller than the screen (the list then starts at the top of the panel). */
@media screen and (max-width: 991px) {
  .menu-wrapper-2 {
    padding-top: 96px;
  }
}
.menu-links.has-submenu > .submenu-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}
.menu-links.has-submenu .menu-arrow {
  width: 10px;
  height: 10px;
  flex: none;
  margin-left: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  opacity: 0.7;
}
.menu-links.has-submenu.is-open > .submenu-toggle .menu-arrow {
  transform: rotate(-135deg);
}
.menu-links .submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.menu-links.has-submenu.is-open > .submenu {
  max-height: 1000px;
}
.submenu > .menu-links {
  padding-left: 20px;
  margin-top: 0.6em;
}
.submenu .link-text.is-05 {
  font-size: 2.4em;
}
.submenu .submenu > .menu-links {
  padding-left: 18px;
  margin-top: 14px;
}
/* extra air below an expanded group (e.g. under "Abnehmpille", before "Ästhetik") */
.submenu > .menu-links.has-submenu.is-open + .menu-links {
  margin-top: 24px;
}
.submenu .submenu .link-text.is-05 {
  font-size: 1.6em;
}
a.link-05.is-current-page .link-text,
.menu-links.has-submenu.is-open > .submenu-toggle .link-text {
  color: #fff;
}
a.link-05.is-current-page .link-text {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
@media screen and (max-width: 479px) {
  .submenu .link-text.is-05 {
    font-size: 7vw;
  }
  .submenu .submenu .link-text.is-05 {
    font-size: 5.5vw;
  }
}

/* Persistent WhatsApp button, self-hosted (no third-party dependency), visible on every page/device.
   Sized in px, not em: body uses fluid vw-based font scaling, so em units here would inherit a
   near-invisible font-size on narrow viewports instead of a real touch-target size. */
.whatsapp-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999999;
  width: 58px;
  height: 58px;
  background-color: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: whatsapp-pulse 2.4s ease-out infinite;
}
.whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}
.whatsapp-btn svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn {
    animation: none;
  }
}
@media screen and (max-width: 767px) {
  .whatsapp-btn {
    right: 16px;
    bottom: 20px;
    width: 68px;
    height: 68px;
  }
  .whatsapp-btn svg {
    width: 36px;
    height: 36px;
  }
}

/* Burger menu button: the icon's own contrast trick (mix-blend-mode:difference +
   filter:invert()) can wash out to near-invisible against certain mid-tone hero photo areas
   (its native color is near-black, rgb(17,17,17)). A fixed opaque white backdrop circle
   guarantees reliable dark-on-light contrast no matter what photo is behind the navbar, and a
   slow pulsing ring (matching the WhatsApp button's animation style) draws the eye to it. */
.menu-button-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}
.menu-button-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  animation: menu-button-pulse 2.6s ease-out infinite, menu-button-scale 2.6s ease-in-out infinite;
}
.menu-button-wrap .menu-button {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: normal;
  animation: menu-button-wiggle 4.5s ease-in-out infinite;
}
.menu-button-wrap .menu__btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none !important;
}
.menu-button-wrap .menu__btn svg {
  width: 28px !important;
  height: 28px !important;
}
@keyframes menu-button-pulse {
  0% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes menu-button-scale {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes menu-button-wiggle {
  0%,
  82%,
  100% {
    transform: rotate(0deg);
  }
  86% {
    transform: rotate(-10deg);
  }
  90% {
    transform: rotate(10deg);
  }
  94% {
    transform: rotate(-6deg);
  }
  98% {
    transform: rotate(0deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-button-wrap::before {
    animation: none;
  }
  .menu-button-wrap .menu-button {
    animation: none;
  }
}

/* index.html: the "Ärztliche Diagnostik..." moreservices list no longer has its left-column
   image (removed), so let the text list use the full width instead of the narrow .25fr/1fr
   image+text grid. */
/* "Termin buchen" button below the "Leistungsumfang..." list: the shared stylesheet hides
   .show-mobilelandscape outside mobile, so it was missing on laptops. Show it everywhere and pull it
   up close to the list (the wrapper's bottom padding plus the container margin left a big gap). */
.moreservices-wrapper.is-compact-bottom {
  padding-bottom: 0;
}
.moreservices_combo-container.is-no-image,
.moreservices_combo-container.is-compact-top {
  margin-top: 16px;
  grid-row-gap: 0;
}
/* Text block "Medizinisch begleitet abnehmen bei Frankfurt" directly below the process list */
.kontakt-wrapper.is-tight-bottom {
  padding-bottom: 0;
}
.kontakt-wrapper.is-compact-top {
  padding-top: 0;
}
.kontakt-wrapper.is-compact-top .homekontakt_content-wrapper {
  margin-top: 28px;
}
.kontakt-wrapper.is-compact-top .homekontakt_content-right {
  margin-top: 0;
}
.learnmore_text-container.is-cta-only {
  margin-top: 28px;
}
.learnmore_text-container.is-cta-only .button.show-mobilelandscape {
  display: block;
}

.moreservices_combo-container.is-no-image {
  grid-template-columns: 1fr;
}

/* patientenwaage.jpg (251x719) was stretched to the full column width and the container's
   150em/100% height; show it at no more than its natural size instead. */
.parallax-container.is-9 {
  height: auto;
}
.parallax-image.is-9 {
  width: 100%;
  max-width: 251px;
  height: auto;
  display: block;
}

/* adipositasbehandlung.html list: small fixed gap between bullet and text (the default marker
   gap grows with the enlarged marker) and some air between the image and the list. */
.moreservices_list.is-tight-bullets {
  padding-left: 16px;
}
.moreservices_list.is-tight-bullets .moreservices_item-li::marker {
  content: "\2022\00a0";
}
.moreservices_list.is-tight-bullets .moreservices_item-li {
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}
.moreservices_combo-container.is-image-gap {
  grid-column-gap: 48px;
}
@media screen and (max-width: 991px) {
  .moreservices_combo-container.is-image-gap {
    gap: 24px;
  }
}
@media screen and (max-width: 767px) {
  .parallax-image.is-9 {
    max-width: 180px;
    margin: 0 auto;
  }
}

/* Real <ul>/<li> bullet list inside running text (e.g. "Das erwartet dich:" on
   adipositasbehandlung.html). Sized from the parent text so bullets stay readable on phones. */
.bullet-list {
  list-style: disc;
  margin: 0.6em 0 0;
  padding-left: 1.4em;
}
.bullet-list li {
  margin-bottom: 0.3em;
}
.bullet-list li::marker {
  font-size: 1.2em;
}

/* Tighter gap between the "Leistungsumfang..." heading and the list, and no divider line above
   the first item (the 80px extra margin on .moreservices_combo-right was far too much on phones). */
.moreservices_combo-container.is-no-image .moreservices_combo-right,
.moreservices_combo-container.is-compact-top .moreservices_combo-right {
  margin-top: 0;
}
.moreservices_combo-container.is-no-image .moreservices_item-li:first-child,
.moreservices_combo-container.is-compact-top .moreservices_item-li:first-child {
  border-top: 0;
  padding-top: 0;
}
@media screen and (max-width: 767px) {
  .moreservices_combo-container.is-no-image,
  .moreservices_combo-container.is-compact-top {
    margin-top: 12px;
    grid-row-gap: 0;
  }
}

/* The li inherited the tiny fluid body font-size (~3.7px on phones), which made the disc bullets
   almost invisible: the marker size follows the li's font-size, not the title's. Give the li the
   same size as its title and enlarge the marker slightly. */
.moreservices_list.is-large-bullets {
  padding-left: 24px;
}
.moreservices_list.is-large-bullets .moreservices_item-li {
  font-size: 1.35em;
}
.moreservices_list.is-large-bullets .moreservices_item-li::marker {
  font-size: 1.3em;
}
.moreservices_list.is-large-bullets .moreservices_title {
  font-size: inherit;
}
@media screen and (max-width: 991px) {
  .moreservices_list.is-large-bullets .moreservices_item-li {
    font-size: 15px;
  }
}
@media screen and (max-width: 767px) {
  .moreservices_list.is-large-bullets .moreservices_item-li {
    font-size: 18px;
  }
}