/*
  Shiatsu Klybeck – stable overrides for the TeleportHQ export
  -----------------------------------------------------------
  This file is intentionally loaded AFTER each Teleport page stylesheet.
  It fixes responsive relationships without rewriting the complete export.
*/

/* ---------- Global stability ---------- */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

iframe {
  display: block;
}

body.nav-mobile-open {
  overflow: hidden !important;
  position: static !important;
  width: auto !important;
}

.hero-title {
  font-style: normal;
}

/* Never leave dead social-media placeholders looking like working links. */
.footer-social-group > a[href="#"] {
  display: none;
}

/* ---------- Navigation ---------- */
.nav-main__container {
  min-height: 72px;
}

.nav-main__links > a,
.nav-mobile-overlay__nav > a {
  text-decoration: none;
}

/* ---------- Homepage hero ----------
   The homepage hero contains only an image/logo, so use a responsive
   visual height instead of the generated fixed pixel offsets. */
.home-thq-hero-zen-elm.hero-zen {
  min-height: clamp(390px, 62vw, 720px);
  height: auto;
  justify-content: center;
}

.home-thq-hero-zenmedia-elm.hero-zen__media {
  inset: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.home-thq-hero-zenimage-elm.hero-zen__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-thq-hero-zencontent-elm.hero-zen__content {
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  position: relative;
  align-self: auto;
  align-items: center;
  justify-content: center;
}

.home-image1 {
  inset: auto;
  width: clamp(120px, 16vw, 190px);
  height: auto;
  position: relative;
}

/* The Teleport export made this normal CTA fixed to the viewport. */
.home-thq-inez-button-elm {
  inset: auto;
  margin: var(--spacing-xl) auto 0;
  position: static;
  padding-top: 0;
}

/* ---------- Content-driven subpage heroes ----------
   Key rule: the section height comes from its text. The background image
   fills the section. Therefore its lower edge always remains the same
   distance below the last line, regardless of text wrapping. */
.was-ist-shiatsu-hero-zen,
.hero-section,
.wie-sieht-die-behandlung-aus-hero-zen,
.kontakt---buchung-hero-section,
.hero-parallax {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(9rem, 24vh, 15rem) var(--spacing-xl) clamp(1.75rem, 4vw, 2.75rem);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

/* Background layers always follow the containing section. */
.hero-zen-media,
.hero-media-container,
.wie-sieht-die-behandlung-aus-hero-zen-media,
.hero-parallax__background,
.hero-bg-layer {
  inset: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.hero-parallax__background {
  will-change: auto;
}

.hero-zen-bg,
.hero-bg-image,
.wie-sieht-die-behandlung-aus-hero-zen-image,
.hero-parallax__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Remove generated top/left/bottom pixel corrections from hero content. */
.was-ist-shiatsu-thq-hero-zen-content-elm,
.angebot-thq-hero-content-wrapper-elm,
.wie-sieht-die-behandlung-aus-thq-hero-zen-container-elm,
.wie-sieht-die-behandlung-aus-thq-hero-zen-content-elm,
.kontakt---buchung-hero-content-wrapper,
.kontakt-buchung-thq-hero-text-block-elm,
.hero-parallax__content,
.ber-mich-thq-hero-parallaxcontent-elm {
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  position: relative;
  max-width: 50rem;
}

.was-ist-shiatsu-thq-hero-title-elm,
.angebot-thq-hero-title-elm,
.wie-sieht-die-behandlung-aus-thq-hero-title-elm,
.kontakt-buchung-thq-hero-title-elm,
.ber-mich-thq-hero-title-elm,
.was-ist-shiatsu-thq-hero-subtitle-elm,
.wie-sieht-die-behandlung-aus-thq-hero-subtitle-elm,
.kontakt-buchung-thq-hero-subtitle-elm,
.ber-mich-thq-hero-subtitle-elm,
.kontakt-buchung-thq-hero-logo-container-elm,
.kontakt-buchung-thq-hero-brand-name-elm {
  inset: auto;
  position: static;
}

.kontakt-buchung-thq-hero-logo-container-elm,
.hero-logo-box {
  margin-bottom: var(--spacing-lg);
}

.was-ist-shiatsu-thq-hero-subtitle-elm,
.wie-sieht-die-behandlung-aus-thq-hero-subtitle-elm,
.kontakt-buchung-thq-hero-subtitle-elm,
.ber-mich-thq-hero-subtitle-elm {
  margin: var(--spacing-md) auto 0;
  max-width: 38rem;
}

/* ---------- "Über mich" / Arbeitsweise ----------
   The image used to have top/left/height values per breakpoint. It is now
   tied to the intro block containing heading + first paragraph. Its bottom
   edge therefore follows the real text height automatically. */
.philosophy-card__wrapper {
  padding: 0;
  overflow: hidden;
}

.philosophy-card__intro {
  isolation: isolate;
  position: relative;
  padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-2xl);
  overflow: hidden;
}

.philosophy-card__intro::after {
  inset: 0;
  content: "";
  z-index: 1;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-surface) 22%, transparent),
    color-mix(in srgb, var(--color-surface) 48%, transparent)
  );
}

.philosophy-card__intro-content {
  z-index: 2;
  position: relative;
}

.philosophy-card__intro .ber-mich-image {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  z-index: 0;
  position: absolute;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.philosophy-card__wrapper > .ber-mich-container2,
.philosophy-card__wrapper > .ber-mich-container3 {
  width: 100%;
  margin: 0;
  padding-left: var(--spacing-3xl);
  padding-right: var(--spacing-3xl);
}

.philosophy-card__wrapper > .ber-mich-container2 {
  padding-top: var(--spacing-2xl);
}

.philosophy-card__wrapper > .ber-mich-container3 {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-3xl);
}

/* Keep content images flexible instead of pinning them to Teleport pixels. */
.about-portrait__img,
.was-ist-shiatsu-geschichte-image,
.home-image2,
.home-image3,
.home-image4,
.was-ist-shiatsu-image,
.wie-sieht-die-behandlung-aus-image {
  max-width: 100%;
  height: auto;
}

/* ---------- Contact/map ---------- */
.kontakt-buchung-container13 {
  inset: auto;
  width: 100%;
  margin: var(--spacing-xl) auto 0;
  position: static;
}

.kontakt-buchung-container14 {
  width: 100%;
}

.kontakt-buchung-container14 iframe {
  width: 100%;
  max-width: 100%;
  min-height: 300px;
  border: 0;
}

/* Let the booking widget decide its own required height. */
.kontakt-buchung-container11 {
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .was-ist-shiatsu-hero-zen,
  .hero-section,
  .wie-sieht-die-behandlung-aus-hero-zen,
  .kontakt---buchung-hero-section,
  .hero-parallax {
    padding-top: clamp(7rem, 20vh, 11rem);
    padding-right: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
    padding-left: var(--spacing-lg);
  }

  .philosophy-card__intro,
  .philosophy-card__wrapper > .ber-mich-container2,
  .philosophy-card__wrapper > .ber-mich-container3 {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
  }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .home-thq-hero-zen-elm.hero-zen {
    min-height: clamp(340px, 105vw, 520px);
  }

  .was-ist-shiatsu-hero-zen,
  .hero-section,
  .wie-sieht-die-behandlung-aus-hero-zen,
  .kontakt---buchung-hero-section,
  .hero-parallax {
    padding: clamp(6rem, 18vh, 8rem) var(--spacing-lg) var(--spacing-lg);
  }

  .hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .philosophy-card__container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .philosophy-card__intro {
    padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg);
  }

  .philosophy-card__wrapper > .ber-mich-container2,
  .philosophy-card__wrapper > .ber-mich-container3 {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .philosophy-card__wrapper > .ber-mich-container2 {
    padding-top: var(--spacing-lg);
  }

  .philosophy-card__wrapper > .ber-mich-container3 {
    padding-bottom: var(--spacing-2xl);
  }

  .kontakt-buchung-container14 iframe {
    min-height: 260px;
  }
}

@media (max-width: 479px) {
  .nav-main__container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .nav-main__logo {
    width: min(150px, 58vw);
  }

  .nav-mobile-overlay__content {
    padding: var(--spacing-xl) var(--spacing-lg);
  }

  .was-ist-shiatsu-hero-zen,
  .hero-section,
  .wie-sieht-die-behandlung-aus-hero-zen,
  .kontakt---buchung-hero-section,
  .hero-parallax {
    padding-top: clamp(5.5rem, 16vh, 7rem);
    padding-bottom: var(--spacing-md);
  }
}