/* Startseite: Hero, Fadenmotive, Therapie- und Praxisabschnitt sowie Ablaufschritte. */

:root {
  color-scheme: light;
  --body-font: "Segoe UI", Arial, sans-serif;
  --heading-font: Georgia, "Times New Roman", serif;
  --art-width: 132%;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--light);
}

body {
  margin: 0;
}

img {
  max-width: none;
  display: block;
  height: auto;
}

.study {
  margin-inline: auto;
}

h1,
h2 {
  margin: 0;
}

.intro-section {
  position: relative;
}

.intro-copy p {
  margin: 33px 0 0;
}

.therapy-section {
  position: relative;
}

.therapy-field {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bordeaux);
}

.therapy-hand {
  position: absolute;
  top: 150px;
  transform: scaleX(-1);
}

.therapy-description {
  margin: 25px 0 0;
}

.therapy-link {
  display: inline-block;
  margin-top: 24px;
  padding-block: 4px;
  text-decoration: underline;
}

.praxis-section {
  background: var(--light);
}

.praxis-layout {
  display: grid;
  align-items: start;
  margin-inline: auto;
}

.praxis-title {
  margin: 0;
}

.praxis-description {
  margin: 25px 0 0;
}

.praxis-link {
  display: inline-block;
  margin-top: 24px;
  padding-block: 4px;
  text-decoration: underline;
}

.praxis-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  margin-top: 48px;
  object-fit: cover;
  object-position: 60% 50%;
}

.ablauf-section {
  background: var(--light);
}

.ablauf-strip {
  color: #fff;
  background: var(--bordeaux);
}

.ablauf-title {
  margin-inline: auto;
  text-align: center;
}

.ablauf-stations {
  position: relative;
}

.ablauf-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 96px;
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
  stroke-linecap: round;
}

.ablauf-stations-inner,
.ablauf-steps {
  display: grid;
}

.ablauf-stations-inner {
  margin-inline: auto;
}

.ablauf-station {
  position: relative;
  justify-self: center;
  width: 94px;
  background: var(--bordeaux);
}

.ablauf-station img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.ablauf-content {
  margin-inline: auto;
}

.ablauf-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ablauf-step h3 {
  min-height: 60px;
  margin: 0;
}

.ablauf-step p {
  margin: 14px 0 0;
}

.ablauf-link {
  display: block;
  width: max-content;
  margin-left: auto;
  padding-block: 4px;
  text-decoration: underline;
}

.ablauf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.desktop-page {
  margin-inline: auto;
}

.site-header a,
.hero a {
  color: inherit;
}



.skip-link {
  position: absolute;
  z-index: 10;
  left: 16px;
  top: -80px;
  padding: 12px;
  background: var(--paper);
  color: inherit;
}

.skip-link:focus {
  top: 12px;
}

.hero {
  overflow: hidden;
}

.hero-visual {
  position: relative;
  height: clamp(390px, 32vw, 500px);
  background: var(--bordeaux);
}

.image-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--art-width);
  max-width: none;
  height: auto;
  aspect-ratio: 1914 / 885;
  transform: translateY(-38%);
}

.thread-extension {
  overflow: visible;
  pointer-events: none;
  stroke: var(--bordeaux);
}

.thread-extension path {
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.thread-on-bordeaux {
  stroke: #fffaf5;
}

.thread-desktop {
  display: block;
}

.hero-information {
  background: var(--paper);
  padding: 53px var(--page-gutter) 64px;
}

.information-inner {
  max-width: var(--content-width);
  margin-inline: auto;
}

.hero h1 {
  text-wrap: balance;
}

.introduction {
  margin: 22px 0 0;
}

.hero .contact-link {
  display: inline-block;
  margin-top: 21px;
  padding-block: 4px;
  text-decoration: underline;
}

.contact-link span {
  display: inline-block;
  margin-left: 5px;
}

:root .startseite-page :is(.desktop-page, .study) {
  width: 100%;
}

:root .startseite-page .hero h1 {
  max-width: 900px;
}

:root .startseite-page .hero-information {
  padding-block: var(--space-compact);
}

:root .startseite-page .introduction {
  max-width: var(--reading-width);
  margin-top: var(--space-text);
}

:root .startseite-page .intro-section {
  height: auto;
  padding-block: var(--space-section);
  background: var(--light);
}

:root .startseite-page .intro-copy {
  width: min(var(--reading-width), calc(100% - 2 * var(--page-gutter)));
  margin-left: calc((100% - min(var(--content-width), 100% - 2 * var(--page-gutter))) / 2 + 128px);
}

:root .startseite-page .intro-copy p:not(.eyebrow) {
  margin-top: var(--space-text);
}

:root .startseite-page .therapy-section {
  height: auto;
  min-height: 580px;
  padding-block: var(--space-section);
  background: var(--paper);
}

:root .startseite-page .therapy-field {
  width: 43%;
}

:root .startseite-page .therapy-hand {
  left: 20.6%;
  width: 68%;
  max-width: 420px;
}

:root .startseite-page .therapy-copy {
  width: calc(min(var(--content-width), 100% - 2 * var(--page-gutter)) / 2 - 32px);
  margin-left: calc(50% + 32px);
}

:root .startseite-page .therapy-description {
  margin-top: var(--space-text);
}

:root .startseite-page .praxis-section {
  padding-block: var(--space-section);
}

:root .startseite-page .praxis-description + .praxis-description {
  margin-top: var(--space-text);
}

:root .startseite-page .praxis-layout {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--space-section);
}

:root .startseite-page :is(.ablauf-title, .ablauf-stations-inner, .ablauf-content) {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
}

:root .startseite-page :is(.ablauf-stations-inner, .ablauf-steps) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-compact);
}

:root .startseite-page .ablauf-strip {
  padding-top: var(--space-compact);
  height: 296px;
}

:root .startseite-page .ablauf-strip h2 {
  color: var(--paper);
}

:root .startseite-page .ablauf-stations {
  margin-top: var(--space-group);
}

:root .startseite-page .ablauf-content {
  padding-block: var(--space-group) var(--space-section);
}

:root .startseite-page .ablauf-link {
  margin-top: var(--space-group);
}

:root .startseite-page .kontakt-wege {
  grid-template-columns: minmax(0, 416px);
}

.mobile-step-number {
  display: none;
}

@media (max-width: 1199px) {
  :root .startseite-page .intro-copy {
    margin-inline: auto;
  }

  :root .startseite-page .therapy-section {
    min-height: 0;
  }

  :root .startseite-page .therapy-hand {
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
  }

  :root .startseite-page .ablauf-strip {
    height: auto;
    padding-bottom: var(--space-group);
  }

  :root .startseite-page .ablauf-stations-inner,
  :root .startseite-page .ablauf-steps {
    column-gap: 24px;
  }

}

@media (max-width: 959px) {
  :root .startseite-page .hero-visual {
    height: clamp(260px, 38vw, 365px);
  }

  :root .startseite-page .hero-art {
    width: 150%;
    transform: translateY(-40%);
  }

  :root .startseite-page .therapy-copy {
    width: calc((100% - 2 * var(--page-gutter)) * .55 - 16px);
    margin-left: calc(45% + 16px);
  }

  :root .startseite-page .therapy-field {
    width: 40%;
  }

  :root .startseite-page .praxis-photo {
    margin-top: 0;
  }

  :root .startseite-page .ablauf-station {
    width: 76px;
  }

  :root .startseite-page .ablauf-thread {
    height: 78px;
  }

  :root .startseite-page .ablauf-step h3 {
    min-height: 0;
  }

}

@media (max-width: 679px) {
  :root .startseite-page .hero-visual {
    height: clamp(230px, 52vw, 350px);
    grid-row: 3;
    margin-top: 24px;
  }

  :root .startseite-page .hero-art {
    width: 190%;
    left: -6%;
    top: 50%;
    transform: translateY(-43%);
  }

  :root .startseite-page .hero-visual > .thread-extension {
    display: none;
  }

  :root .startseite-page .hero-information {
    padding-inline: var(--page-gutter);
  }

  :root .startseite-page .therapy-section {
    display: grid;
    gap: var(--space-group);
    padding-bottom: var(--space-section);
  }

  :root .startseite-page .therapy-copy {
    width: calc(100% - 2 * var(--page-gutter));
    margin-inline: auto;
  }

  :root .startseite-page .therapy-field {
    position: static;
    padding: 32px var(--page-gutter);
    width: calc(100% + 2 * var(--page-gutter));
    margin: 24px calc(-1 * var(--page-gutter)) 0;
    padding-block: 16px;
  }

  :root .startseite-page .therapy-hand {
    position: static;
    margin-inline: auto;
    transform: scaleX(-1);
    width: min(75%, 280px);
  }

  :root .startseite-page .praxis-photo {
    margin-top: 0;
  }

  :root .startseite-page .ablauf-strip {
    padding-block: var(--space-compact);
  }

  :root .startseite-page .ablauf-title {
    text-align: left;
  }

  :root .startseite-page .ablauf-stations {
    display: none;
  }

  :root .startseite-page .ablauf-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-group);
  }

  :root .startseite-page .ablauf-step {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
  }

  :root .startseite-page .mobile-step-number {
    display: block;
    width: 52px;
    height: auto;
    grid-column: 1;
    grid-row: 1 / 3;
  }

  :root .startseite-page .ablauf-step h3 {
    grid-column: 2;
  }

  :root .startseite-page .ablauf-step p {
    grid-column: 2;
    margin-top: 16px;
  }

  :root .startseite-page .praxis-description {
    margin-top: 0;
  }

  :root .startseite-page .ablauf-link {
    margin-left: 72px;
    margin-right: 0;
    max-width: calc(100% - 72px);
  }

  :root .startseite-page .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-compact);
    background: var(--paper);
  }

  :root .startseite-page .hero-information,
  :root .startseite-page .hero .information-inner {
    display: contents;
  }

  :root .startseite-page .hero .eyebrow {
    grid-row: 1;
    margin-inline: var(--page-gutter);
  }

  :root .startseite-page .hero h1 {
    grid-row: 2;
    margin-inline: var(--page-gutter);
  }

  :root .startseite-page .hero .introduction {
    grid-row: 4;
    margin: 24px var(--page-gutter) 0;
  }

  :root .startseite-page .hero .contact-link {
    grid-row: 5;
    justify-self: start;
    margin: 21px var(--page-gutter) var(--space-compact);
  }

}

@media (min-width: 680px) {
  :root .startseite-page .praxis-layout {
    grid-template-rows: auto auto minmax(0, 1fr);
    row-gap: 0;
  }

  :root .startseite-page .praxis-copy {
    grid-column: 1;
    grid-row: 1;
  }

  :root .startseite-page .praxis-teaser-body {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }

  :root .startseite-page .praxis-photo {
    grid-column: 2;
    grid-row: 1 / 4;
  }

}

/* Im ausgeblendeten Schalter bleibt der bisherige Inline-Zustand erhalten. */
.menu-mark {
  display: inline;
}