/* Beautify by Jolina: nur auf der Website (nicht im Editor)
   Feste Kopfzeile, weichgezeichneter Studiohintergrund und Bewegung.
   Alle versteckten Startzustände gelten nur mit JavaScript (.bj-js) und ohne
   „Bewegung reduzieren“. So bleibt der Inhalt immer sichtbar. */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 6px + var(--wp-admin--admin-bar--height, 0px)); }
body { padding-top: var(--bar-h); }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Feste Kopfzeile ---------- */
body .bar {
  position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 20;
  transition: padding .5s cubic-bezier(0.22, 1, 0.36, 1), background-color .5s ease;
}
body .bar.is-compact { padding-top: 7px; padding-bottom: 7px; background: #ECE9E5; }
body .bar .wordmark { transform-origin: left center; transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
body .bar.is-compact .wordmark { transform: scale(.88); }

/* Zwischen Telefon und Laptop: Menü als zweite Zeile unter Logo und Button */
@media (min-width: 600px) and (max-width: 900px) {
  :root { --bar-h: 108px; }
  body .bar { flex-wrap: wrap; row-gap: 6px; }
  body .bar .wordmark { order: 1; }
  body .bar .wp-block-buttons.bar-cta { order: 2; margin-left: auto; }
  body .bar .wp-block-navigation.nav { order: 3; flex-basis: 100%; margin-left: 0; }
  body .bar .nav .wp-block-navigation__container { justify-content: flex-start; gap: 18px; }
}
/* Telefon: WordPress Menü-Button im Stil der Seite */
@media (max-width: 599px) {
  body .bar { gap: 12px; }
  body .bar .wp-block-buttons.bar-cta { margin-left: auto; }
  body .bar .wp-block-navigation.nav { margin-left: 0; order: 3; }
  body .bar .wp-block-navigation__responsive-container-open {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; min-width: 42px; padding: 0 12px;
    background: var(--field); color: var(--ink); border-radius: 999px;
  }
  body .bar .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--ground) !important; color: var(--ink) !important;
    padding: calc(var(--gutter) + 8px) var(--gutter);
  }
  body .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-family: var(--display); font-weight: var(--display-weight); font-variation-settings: var(--display-axes);
    font-size: 1.6rem; padding: 10px 0;
  }
  body .bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 4px; }
}

/* ---------- Vorher/Nachher-Regler (von main.js aufgebaut) ---------- */
body .compare.is-ready {
  display: block; position: relative; aspect-ratio: 5 / 8; isolation: isolate; touch-action: pan-y;
  border-radius: 999px; overflow: hidden; background: var(--field);
}
body .compare.is-ready > .wp-block-image { position: absolute; inset: 0; margin: 0; }
body .compare.is-ready .wp-block-image img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 46%; }
body .compare.is-ready > .compare-after { clip-path: inset(0 0 0 var(--pos)); }
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--ground); pointer-events: none; z-index: 2;
}
.compare-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ground); color: var(--ink); font-size: 1.1rem; letter-spacing: 0.1em;
  transition: transform .25s var(--ease);
}
.compare:hover .compare-handle::after, .compare-range:focus-visible ~ .compare-handle::after { transform: scale(1.1); }
.compare-tag {
  position: absolute; bottom: 14%; z-index: 2; padding: 6px 14px; border-radius: 999px;
  background: rgba(47, 43, 40, .72); color: var(--on-dark); font-size: 0.875rem; pointer-events: none;
}
.compare-tag-before { left: 14%; }
.compare-tag-after { right: 14%; }
.compare-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 3;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none;
}
.compare:has(.compare-range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- Fotorahmen (main.js legt das Bild in einen .shutter Rahmen) ---------- */
.shutter { overflow: hidden; overflow: clip; }
body .studio-photo .shutter { position: relative; aspect-ratio: 4 / 3; }
body .wp-block-image.studio-photo .shutter img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; aspect-ratio: auto; object-fit: cover; }

/* Hero-Überschrift: Zeilen (von main.js gesetzt) */
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero-title [data-line] { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Ladesequenz im Startbereich */
  .bj-js .hero-title:not(.is-split) { visibility: hidden; animation: bj-show 0s 1.2s forwards; }
  .bj-js .hero-title [data-line] {
    transform: translateY(105%);
    animation: line-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i) * 120ms + 200ms);
  }
  .bj-js .hero-text > .rise {
    opacity: 0; transform: translateY(18px);
    animation: rise .9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 2) * 110ms + 250ms);
  }
  .bj-js .hero-text > .lead { --i: 2; }
  .bj-js .hero-text > .actions { --i: 3; }
  .bj-js .hero-text > .hero-facts { --i: 4; }
  .bj-js .wp-block-image.hero-mirror {
    clip-path: inset(100% 0 0 0 round 999px);
    animation: mirror-open 1.5s cubic-bezier(0.76, 0, 0.24, 1) .1s forwards;
  }
  .bj-js .wp-block-image.hero-mirror img { scale: 1.14; animation: settle 2.2s cubic-bezier(0.33, 1, 0.68, 1) .1s forwards; }

  /* Texte und Abschnitte sanft einblenden */
  .bj-js .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0ms);
  }
  .bj-js .reveal-row {
    opacity: 0; transform: translateY(16px);
    transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1), background-color .25s var(--ease);
    transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms;
  }
  .bj-js :is(.reveal, .reveal-row).is-in { opacity: 1; transform: none; }

  /* Fotos öffnen sich von unten nach oben */
  .bj-js .has-shutter:not(.is-wrapped) img { opacity: 0; }
  .bj-js .shutter { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s cubic-bezier(0.76, 0, 0.24, 1) var(--d, 0ms); }
  .bj-js .shutter img { scale: 1.12; transition: scale 1.8s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0ms); }
  .bj-js .shutter.is-in { clip-path: inset(0); }
  .bj-js .shutter.is-in img { scale: 1; }
  .bj-js .shutter + figcaption { opacity: 0; transition: opacity .8s ease calc(var(--d, 0ms) + 700ms); }
  .bj-js .shutter.is-in + figcaption { opacity: 1; }

  /* Dezenter Parallax bei den Studiofotos */
  @supports (animation-timeline: view()) {
    .shutter.parallax img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes bj-show { to { visibility: visible; } }
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes mirror-open { to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes settle { to { scale: 1; } }
@keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body .bar, body .bar .wordmark { transition: none; }
}

/* ---------- Großer Bildschirm: Seite als Spalte vor dem unscharfen Studio ---------- */
@media (min-width: 1500px) {
  html { background: #A39C95; }
  body { max-width: 1440px; min-height: 100vh; margin-inline: auto; }
  body::before {
    content: ""; position: fixed; inset: -80px; z-index: -1;
    background: url("../img/studio-blur.jpg") center 40% / cover no-repeat;
    filter: blur(26px) saturate(.85) brightness(1.02);
  }
  body .bar { max-width: 1440px; margin-inline: auto; }
}