/* ---------------------------------------------------------------
   jennyclone v1 — Enhancement-Schicht
   Abgerundete Bildkanten + koordinierte Scroll-Bewegung.
   Rein additiv: ohne JS bleibt die Seite unverändert sichtbar.
   --------------------------------------------------------------- */

:root {
  --jr-radius: clamp(14px, 1.6vw, 22px);
  --jr-ease: cubic-bezier(.22, .68, .36, 1);
}

/* ---------- 1. Abgerundete Kanten ---------- */
/* .jr-round wird per JS nur an echte Fotos und Videos vergeben,
   nicht an Logos, kleine Kacheln oder Vollbreiten-Bänder. */
.jr-round {
  border-radius: var(--jr-radius) !important;
  overflow: hidden !important;
}

/* ---------- 2. Bild-Zoom beim Hover ---------- */
.jr-round img,
.jr-round video {
  transition: transform .7s var(--jr-ease);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .jr-round:hover img,
  .jr-round:hover video { transform: scale(1.045); }
}

/* ---------- 3. Scroll-Reveal ---------- */
/* Der Ausgangszustand greift nur, wenn JS die Klasse gesetzt hat. */
.jr-anim .jr-reveal {
  opacity: 0;
  /* --jr-py liefert der Parallax; beide Bewegungen addieren sich hier,
     statt sich gegenseitig zu überschreiben. */
  transform: translate3d(0, calc(26px + var(--jr-py, 0px)), 0);
  transition:
    opacity   .75s var(--jr-ease) var(--jr-delay, 0ms),
    transform .75s var(--jr-ease) var(--jr-delay, 0ms);
  will-change: opacity, transform;
}
.jr-anim .jr-reveal.jr-in {
  opacity: 1;
  transform: translate3d(0, var(--jr-py, 0px), 0);
}
/* Bilder kommen zusätzlich aus einem leichten Zoom */
.jr-anim .jr-reveal.jr-media img,
.jr-anim .jr-reveal.jr-media video {
  transform: scale(1.06);
  transition: transform 1.1s var(--jr-ease) var(--jr-delay, 0ms);
}
.jr-anim .jr-reveal.jr-media.jr-in img,
.jr-anim .jr-reveal.jr-media.jr-in video { transform: none; }

/* Nach Abschluss die will-change-Last wieder abgeben */
.jr-anim .jr-reveal.jr-done { will-change: auto; }

/* ---------- 4. Parallax ---------- */
.jr-parallax { will-change: transform; }
.jr-parallax:not(.jr-reveal) { transform: translate3d(0, var(--jr-py, 0px), 0); }

/* ---------- 5. Bedienbarkeit ---------- */
.jr-round:focus-within { outline: 2px solid rgb(0 0 0 / 45%); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .jr-anim .jr-reveal,
  .jr-anim .jr-reveal.jr-media img,
  .jr-anim .jr-reveal.jr-media video {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .jr-round img, .jr-round video { transition: none; }
  @media (hover: hover) {
    .jr-round:hover img, .jr-round:hover video { transform: none; }
  }
  .jr-parallax { --jr-py: 0px !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   6. Mobiles Menü
   Wix liefert das Panel (#…-menu-content) mit height:0 aus und klappt
   es per JavaScript auf. Dieses JS ist beim Statisch-Machen entfallen,
   also wird der geöffnete Zustand hier gestaltet.
   --------------------------------------------------------------- */

/* Panel im Ruhezustand: zusammengeklappt, nicht fokussierbar */
[id$="-menu-content"] {
  visibility: hidden;
}

.jr-menu-open [id$="-menu-content"] {
  visibility: visible;
  position: fixed;
  top: var(--jr-header-h, 48px);
  left: 0;
  right: 0;
  bottom: 0;
  height: auto !important;
  z-index: 9000;
  background: rgb(100, 107, 105);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 32px;
  animation: jr-menu-in .22s cubic-bezier(.22,.68,.36,1);
}

@keyframes jr-menu-in {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Liste und Einträge auf volle Breite bringen */
.jr-menu-open [id$="-menu-content"] nav,
.jr-menu-open [id$="-menu-content"] ul {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jr-menu-open [id$="-menu-content"] li,
.jr-menu-open [id$="-menu-content"] [class*="_itemWrapper"],
.jr-menu-open [id$="-menu-content"] [class*="_labelContainer"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  inset: auto !important;
  transform: none !important;
}

/* Jeder Eintrag bekommt eine eigene Ebene im normalen Fluss.
   Ohne das überlagern sich die Trefferflächen aller sieben Links und
   der letzte im Markup ("Kontakt") fängt jeden Tipp ab. */
.jr-menu-open [id$="-menu-content"] li,
.jr-menu-open [id$="-menu-content"] [class*="_itemWrapper"],
.jr-menu-open [id$="-menu-content"] [class*="_labelContainer"],
.jr-menu-open [id$="-menu-content"] a {
  position: relative !important;
  z-index: 1;
}

/* Die Links: grosse Tippflaechen, klar lesbar */
.jr-menu-open [id$="-menu-content"] a {
  display: flex !important;
  align-items: center;
  min-height: 56px;
  padding: 0 24px;
  width: auto !important;
  color: #fff !important;
  font-size: 17px !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  background: none;
  transition: background .15s ease;
}
.jr-menu-open [id$="-menu-content"] a:active,
.jr-menu-open [id$="-menu-content"] a:hover {
  background: rgb(255 255 255 / 10%);
}
/* Aktuelle Seite markieren */
.jr-menu-open [id$="-menu-content"] a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 #fff;
}
.jr-menu-open [id$="-menu-content"] a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Seite hinter dem offenen Menü nicht mitscrollen */
.jr-menu-open body { overflow: hidden !important; }

/* Burger über dem Panel halten */
.jr-menu-open .hamburger-open-button,
.jr-menu-open [aria-label="Menu"] { position: relative; z-index: 9100; }

@media (prefers-reduced-motion: reduce) {
  .jr-menu-open [id$="-menu-content"] { animation: none; }
}

/* Auf dem Desktop ist das Panel unbeteiligt */
@media (min-width: 1000px) {
  [id$="-menu-content"] { visibility: visible; }
}

/* ---------------------------------------------------------------
   7. Tippflaechen der Video-Play-Buttons
   Wix liefert sie mit 36x38px aus - unter der empfohlenen
   Mindestgroesse von 44px fuer Finger.
   --------------------------------------------------------------- */
[class*="_playButton"],
button[aria-label*="Play"] {
  min-width: 48px !important;
  min-height: 48px !important;
}

/* ---------------------------------------------------------------
   8. Mobile Feinarbeit
   Bewusste Abweichungen vom Wix-Original, wo dessen mobile Ausgabe
   unsauber war.
   --------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Lange deutsche Komposita ("Ernaehrungswissenschaftlerin") brachen
     an beliebiger Stelle um. Mit lang="de" trennt der Browser nach Silben. */
  p, li, .jr-hyphen,
  [class*="wixui-rich-text"] span,
  [data-testid="richTextElement"] * {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Der Sedcard-Button lag in einem anders konfigurierten Wix-Container
     als die beiden Buttons darunter und stand dadurch linksbuendig. */
  a[href$="Jennifer-Reuter-Model-Sedcard.pdf"] {
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Die fuenf Social-Links umbrachen in zwei Reihen, die zweite mittig
     statt an den Spalten der ersten. Jetzt eine gleichmaessige Reihe. */
  [id^="comp-"] > ul:has(a[aria-label*="Facebook"]),
  ul:has(> li > a[aria-label*="Facebook"]),
  [data-testid="social-bar"] {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    justify-items: center !important;
    width: 100% !important;
  }

  /* In 65px-Spalten brechen "Facebook" und "X (Twitter)" mitten im Wort.
     Nur die Symbole zeigen - der Name bleibt fuer Screenreader lesbar. */
  ul:has(> li > a[aria-label*="Facebook"]) a > span:not(:has(img)):not(:has(svg)),
  [id^="comp-"] > ul:has(a[aria-label*="Facebook"]) a [class*="label"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  ul:has(> li > a[aria-label*="Facebook"]) a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Bedienelemente der Slideshow auf Fingergroesse.
     min-width allein reicht nicht - Wix setzt die Breite spezifischer. */
  button[aria-label="Next"],
  button[aria-label="Previous"],
  button[aria-label*="Slideshow"],
  [class*="_pauseButton"],
  [class*="Slideshow"] button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}