/*
 * Zynelo - permanent solid header for the static Squarespace export
 * -------------------------------------------------------------------------
 * The header was originally set to Squarespace's "dynamic" style: no
 * background of its own, floating transparently over the hero image,
 * with a scroll-triggered script meant to fade in a solid background -
 * that script needs the live Squarespace platform and never ran on this
 * static export (see js/site-fix.js for the same kind of missing-JS
 * issue with the mobile menu).
 *
 * Paired with the "tweak-fixed-header" class on <body> (Squarespace's own
 * existing CSS for position:fixed, see site.css), this makes the header a
 * permanent bar that stays reachable while scrolling, with its own
 * background instead of overlapping whatever is behind it.
* The header background matches the page's own background color
 * (--siteBackgroundColor, set by Squarespace's site.css) so the header
 * blends seamlessly with the page instead of standing out as a
 * separate bar.
 */
#header .header-background {
  background-color: var(--siteBackgroundColor);
}

#header .header-title-text a,
#header .header-nav-wrapper a,
#header button,
#header .icon--fill svg {
  color: hsla(0, 0%, 5.1%, 1);
  fill: hsla(0, 0%, 5.1%, 1);
}

/* Page content used to start right at the top of the viewport, behind
   the (transparent, non-fixed) header. Now that the header is a fixed,
   opaque bar, push the content down by its height so nothing starts
   hidden underneath it. */
#page {
  padding-top: var(--header-height, 82px);
}

/* Zynelo - responsive text+image layout for the Ueber mich and
   Therapie & Kosten subpages: an image pulled from the homepage
   teaser, placed under the page's H1.
   Desktop: text left, image right. Mobile: stacked, image after text. */
.site-fix-media-row {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.site-fix-media-text {
  flex: 1 1 auto;
  min-width: 0;
}
.site-fix-media-image {
  flex: 0 0 auto;
  width: 100%;
}
.site-fix-media-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
@media (min-width: 768px) {
  .site-fix-media-row {
    flex-direction: row;
    align-items: flex-start;
  }
  .site-fix-media-text {
    flex: 1 1 50%;
  }
  .site-fix-media-image {
    flex: 1 1 46%;
    max-width: 46%;
  }
}
/* Zynelo - round all images site-wide for visual consistency,
   except the large hero image at the top of the homepage. */
img:not([src="images/IMG_0499.jpg"]) {
  border-radius: 12px;
}

/* Zynelo - Therapie & Kosten: wider content area and a bigger image
   than the shared default, swapped to the left (text on the right)
   on desktop for a bit more visual variety from Ueber mich. */
[data-page-sections="therapie-kosten"] .content-wrapper {
  max-width: 1100px !important;
}
@media (min-width: 768px) {
  [data-page-sections="therapie-kosten"] .site-fix-media-row {
    flex-direction: row-reverse;
    align-items: center;
  }
  [data-page-sections="therapie-kosten"] .site-fix-media-image {
    flex: 1 1 58%;
    max-width: 58%;
  }
  [data-page-sections="therapie-kosten"] .site-fix-media-text {
    flex: 1 1 42%;
  }
}