/* Gemeinsame obere Startkante der Unterseiten, nach den Seitenstilen laden. */
@media screen {
  :root {
    --wg-header-height: 98px;
    --wg-breadcrumb-gap: 34px;
    --wg-intro-gap: 50px;
  }

  body:not([data-page="index"]) main {
    padding-top: var(--wg-header-height);
  }

  body:not([data-page="index"]) .breadcrumbs {
    padding-top: var(--wg-breadcrumb-gap);
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  body:not([data-page="index"]) .breadcrumbs > * {
    flex-shrink: 0;
  }
  body:not([data-page="index"]) .breadcrumbs > span:last-child {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-intro,
  .case-intro,
  .bath-intro {
    padding-top: var(--wg-intro-gap);
  }
  .intro-with-photo,
  .bath-intro,
  #room-studio .room-intro {
    align-items: start;
  }
  #room-studio {
    padding-top: var(--wg-intro-gap);
  }

  @media (max-width: 900px) {
    :root { --wg-header-height: 88px; }

    /* Die Kontakt-Verweise müssen in ihre schmalen Tabletspalten passen. */
    .contact-related > div > a {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    /* Lange Rubrikzeilen dürfen umbrechen, ohne den Seitentitel zu versetzen. */
    .page-intro > div > .eyebrow,
    .page-intro > .eyebrow,
    .bath-intro-copy > .eyebrow,
    .case-intro > .eyebrow,
    #room-studio .room-intro .eyebrow {
      min-height: 3.2em;
    }
  }

  @media (max-width: 720px) {
    :root {
      --wg-header-height: 84px;
      --wg-breadcrumb-gap: 25px;
      --wg-intro-gap: 35px;
    }
  }
}