/* Ablauf: Fotoausschnitte, Zahlenspur, Organisation, Kosten und Videosprechstunde. */

.ablauf-page {
  --number-height: calc(var(--number-width) * 163 / 159);
}

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

.ablauf-hero-layout {
  display: grid;
  align-items: center;
}

.ablauf-introduction {
  margin: 24px 0 0;
}

.ablauf-photo-window {
  overflow: hidden;
  background: var(--ablauf-light);
}

.ablauf-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 70% 46%;
}

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

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

.ablauf-step {
  display: grid;
  grid-template-columns: var(--number-width) minmax(0, 1fr);
  column-gap: var(--step-gap);
  align-items: stretch;
}

.ablauf-step-copy {
  min-width: 0;
}

.ablauf-rail {
  position: relative;
  min-height: var(--number-height);
}

.ablauf-number {
  position: relative;
  z-index: 1;
  width: var(--number-width);
  height: auto;
  filter: url("#ablauf-number-bordeaux");
}

.ablauf-color-definition {
  position: absolute;
  pointer-events: none;
}

.ablauf-number-color {
  flood-color: var(--ablauf-number-color);
}

.ablauf-connector {
  position: absolute;
  top: calc(var(--number-height) - 2px);
  left: 0;
  width: 100%;
  height: calc(100% - var(--number-height) + 4px);
  overflow: visible;
  fill: none;
  stroke: var(--bordeaux);
  stroke-width: 1.5;
  stroke-linecap: round;
  pointer-events: none;
}

.ablauf-connector path {
  vector-effect: non-scaling-stroke;
}

.ablauf-step h2 {
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.ablauf-step-copy > p {
  margin: 20px 0 0;
  overflow-wrap: break-word;
}

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

.ablauf-costs {
  background: var(--paper);
}

.ablauf-costs-layout {
  display: grid;
  gap: 36px;
}

.ablauf-costs h2,
.ablauf-video h2 {
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.ablauf-costs-heading {
  grid-area: heading;
}

.ablauf-costs h2 {
  max-width: 22ch;
}

.ablauf-costs-copy {
  grid-area: copy;
  min-width: 0;
}

.ablauf-payment h3 {
  margin: 0;
}

.ablauf-payment p,
.ablauf-video-copy p {
  margin: 16px 0 0;
}

.ablauf-video-layout {
  display: grid;
  gap: 28px;
}

.ablauf-video-copy {
  min-width: 0;
  max-width: 62ch;
}

.ablauf-video-copy p:first-child {
  margin-top: 0;
}

:root .ablauf-page .ablauf-step-copy > p {
  max-width: var(--reading-width);
  margin-top: var(--space-text);
}

:root .ablauf-page .ablauf-step-copy {
  padding-top: 24px;
  padding-bottom: var(--space-section);
}

:root .ablauf-page .ablauf-step:last-child .ablauf-step-copy {
  padding-bottom: 0;
}

:root .ablauf-page .ablauf-payment p {
  margin-top: var(--space-label);
}

:root .ablauf-page .ablauf-video {
  padding-block: var(--space-compact);
  background: var(--light);
}

:root .ablauf-page .ablauf-video-copy {
  padding-top: 0;
}

:root .ablauf-page .ablauf-photo {
  transform: none;
  object-position: 60% 50%;
}

:root .ablauf-page .ablauf-transition {
  padding-block: var(--space-section);
  background: var(--paper);
}

:root .ablauf-page .ablauf-transition-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--space-section);
  align-items: center;
}

:root .ablauf-page .ablauf-organisation-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% 50%;
}

:root .ablauf-page .ablauf-organisation-copy {
  min-width: 0;
  max-width: var(--reading-width);
}

:root .ablauf-page .ablauf-organisation-text {
  margin-top: var(--space-text);
}

:root .ablauf-page .ablauf-organisation-text p {
  margin: 0;
}

:root .ablauf-page .ablauf-organisation-text p + p {
  margin-top: var(--space-text);
}

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

:root .ablauf-page .ablauf-costs-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "heading" "copy";
  row-gap: var(--space-group);
}

:root .ablauf-page .ablauf-costs-intro {
  max-width: var(--reading-width);
  margin: var(--space-text) 0 0;
}

:root .ablauf-page .ablauf-costs-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "gesetzlich privat" "beihilfe selbstzahler";
  grid-template-rows: auto auto;
  column-gap: var(--space-compact);
  row-gap: var(--space-group);
  align-items: start;
  max-width: none;
}

:root .ablauf-page .ablauf-payment + .ablauf-payment {
  margin-top: 0;
}

:root .ablauf-page .ablauf-costs-copy > .ablauf-payment:nth-child(1) {
  grid-area: gesetzlich;
}

:root .ablauf-page .ablauf-costs-copy > .ablauf-payment:nth-child(2) {
  grid-area: privat;
}

:root .ablauf-page .ablauf-costs-copy > .ablauf-payment:nth-child(3) {
  grid-area: beihilfe;
}

:root .ablauf-page .ablauf-costs-copy > .ablauf-payment:nth-child(4) {
  grid-area: selbstzahler;
}

@media (min-width: 600px) {
  .ablauf-hero-layout {
    gap: 40px;
  }

  .ablauf-photo-window {
    aspect-ratio: 1.65;
  }

  .ablauf-photo {
    transform-origin: 78% 48%;
  }

}

@media (max-width: 1199px) {
  :root .ablauf-page {
    --number-width: 80px;
    --step-gap: 32px;
  }

  :root .ablauf-page .ablauf-step-copy {
    padding-top: 16px;
  }

}

@media (max-width: 959px) {
  :root .ablauf-page .ablauf-hero-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root .ablauf-page .ablauf-photo-window {
    aspect-ratio: 1.35;
  }

  :root .ablauf-page .ablauf-video-copy {
    max-width: var(--reading-width);
  }

}

@media (max-width: 679px) {
  :root .ablauf-page {
    --number-width: 48px;
    --step-gap: 20px;
  }

  :root .ablauf-page .ablauf-step-copy {
    padding-top: 7px;
  }

  :root .ablauf-page .ablauf-step h2 {
    font-size: clamp(28px, 5vw, 34px);
  }

  :root .ablauf-page .ablauf-costs-copy {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "gesetzlich" "privat" "beihilfe" "selbstzahler";
    grid-template-rows: auto;
    gap: var(--space-group);
  }

  :root .ablauf-page .ablauf-organisation-photo {
    aspect-ratio: 4 / 5;
    max-width: 440px;
  }

  :root .ablauf-page .ablauf-hero-introduction .ablauf-introduction:first-child {
    margin-top: 0;
  }

}

@media (min-width: 960px) {
  .ablauf-page {
    --number-width: 104px;
    --step-gap: 64px;
  }

  .ablauf-hero-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: 72px;
  }

  .ablauf-photo-window {
    aspect-ratio: 1.35;
  }

  .ablauf-costs-layout {
    column-gap: 96px;
  }

  .ablauf-video-layout {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: 96px;
  }

}