/**
 * @file
 * Konsolidierte Header-, Branding- und Navigationsregeln.
 *
 * Entstanden aus den stabilisierten Sprints S-36.9 bis S-37.3.
 * Die Reihenfolge der ursprünglichen Regeln bleibt erhalten, damit sich
 * Darstellung, Breakpoints, Off-Canvas-Menü und Scroll-Animation nicht ändern.
 */

/* ==========================================================================
   Quelle: header-s36-9.css
   ========================================================================== */

/**
 * Sprint S-36.9 – Header-Feinausrichtung
 *
 * Diese Datei wird nach style.css geladen, damit die drei gezielten
 * Desktop-Korrekturen nicht von älteren Sprint-Regeln überschrieben werden.
 */

@media (min-width: 992px) {
  /* Ausgangszustand: Logo gegenüber S-36.7 nochmals um rund 10 px erhöhen. */
  body:not(.site-is-scrolled) .site-header .site-branding {
    --s36-logo-width: clamp(11.45rem, calc(17vw + 1.25rem), 14.5rem) !important;
  }

  html:not(.site-is-scrolled) .site-header .site-branding__logo-link,
  html:not(.site-is-scrolled) .site-header .site-branding__logo,
  html:not(.site-is-scrolled) .site-header .site-header__branding img {
    inline-size: var(--s36-logo-width) !important;
    max-inline-size: var(--s36-logo-width) !important;
  }

  /* Trennlinie symmetrisch über die sichtbare Logo-Höhe hinaus verlängern. */
  body:not(.site-is-scrolled) .site-header .site-branding__logo-link::after {
    inset-block-start: -.5rem !important;
    inset-block-end: -.5rem !important;
  }

  /*
   * Navigation und Branding-Text verwenden exakt dieselbe horizontale Achse.
   * Zusätzlich werden Drupal-/Menü-Wrapper vollständig ent-rückt.
   */
  body:not(.site-is-scrolled) .site-header .primary-navigation {
    inset-inline-start: calc(
      var(--s36-logo-width)
      + var(--s36-brand-gap)
      + clamp(1.35rem, 2vw, 1.85rem)
    ) !important;
    padding-inline: 0 !important;
  }

  body:not(.site-is-scrolled) .site-header .primary-navigation > *,
  body:not(.site-is-scrolled) .site-header .primary-navigation .block-main-navigation,
  body:not(.site-is-scrolled) .site-header .primary-navigation .block-main-navigation > *,
  body:not(.site-is-scrolled) .site-header .primary-navigation .content,
  body:not(.site-is-scrolled) .site-header .primary-navigation .inklusion-menu--level-0 {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body:not(.site-is-scrolled) .site-header .primary-navigation .inklusion-menu--level-0 {
    justify-content: flex-start !important;
  }
}

@media (min-width: 992px) {
  /* Derselbe +10-px-Schritt im kompakten Desktop-Bereich. */
  html:not(.site-is-scrolled) .site-header .site-branding {
    --s36-logo-width: clamp(9.65rem, calc(14vw + 1.25rem), 11.75rem) !important;
  }

/*  html:not(.site-is-scrolled) .site-header .primary-navigation {
    inset-inline-start: calc(
      var(--s36-logo-width)
      + var(--s36-brand-gap)
      + 1.05rem
    ) !important;
  } */
}


/* ==========================================================================
   Quelle: header-s36-10.css
   ========================================================================== */

/**
 * Sprint S-36.10 – Navigation-Breakpoint und Desktop-Achse
 *
 * - Unter 992 px: ausschliesslich Off-Canvas-Navigation.
 * - Ab 992 px: horizontale Desktop-Navigation.
 * - Im ungescrollten Desktop-Zustand beginnt die Navigation exakt 318 px
 *   vom linken Rand von .site-header__inner.
 */

/* Tablet und Mobil: Off-Canvas bleibt geschlossen, bis der Button ausloest. */
@media (max-width: 991.98px) {
  .site-header__inner {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: clamp(6rem, 11vw, 7.2rem) !important;
    padding-block: .75rem !important;
  }

  .site-header__branding {
    display: block !important;
    max-inline-size: calc(100% - 6.5rem) !important;
  }

  .site-header .site-branding {
    display: flex !important;
    align-items: center !important;
    inline-size: auto !important;
    max-inline-size: 100% !important;
    gap: clamp(.9rem, 2vw, 1.25rem) !important;
  }

  .site-header .site-branding__logo-link {
    inline-size: clamp(7rem, 18vw, 9.5rem) !important;
    max-inline-size: 9.5rem !important;
  }

  .site-header .site-branding__logo,
  .site-header .site-header__branding img {
    inline-size: 100% !important;
    max-inline-size: 9.5rem !important;
  }

  .site-header .site-branding__text {
    transform: none !important;
    gap: .25rem !important;
    padding-inline-start: 1rem !important;
  }

  .site-header .site-branding__name {
    font-size: clamp(1.45rem, 3.3vw, 2.1rem) !important;
    letter-spacing: .04em !important;
  }

  .site-header .site-branding__slogan,
  .site-header .site-branding__locations {
    font-size: clamp(.88rem, 1.7vw, 1.05rem) !important;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
    position: relative !important;
    z-index: 1003 !important;
    flex: 0 0 auto !important;
  }

  .site-header .primary-navigation,
  body:not(.site-is-scrolled) .site-header .primary-navigation,
  .site-is-scrolled .site-header .primary-navigation {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    z-index: 1002 !important;
    display: block !important;
    inline-size: min(88vw, 26rem) !important;
    block-size: 100vh !important;
    margin: 0 !important;
    padding: 6rem 1rem 1.25rem !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: -1rem 0 2.5rem rgba(32, 33, 36, .18) !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform var(--transition), visibility var(--transition), opacity var(--transition) !important;
  }

  .site-header .primary-navigation.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-header .primary-navigation .inklusion-menu--level-0,
  .site-header .primary-navigation .menu,
  .site-header .primary-navigation .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: .25rem !important;
    inline-size: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Desktop: horizontale Navigation erst ab 992 px. */
@media (min-width: 992px) {
  .site-header .nav-toggle {
    display: none !important;
  }

  .site-header .primary-navigation {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  body:not(.site-is-scrolled) .site-header .primary-navigation {
    inset-inline-start: 318px !important;
  }
}


/* ==========================================================================
   Quelle: header-s36-11.css
   ========================================================================== */

/**
 * Sprint S-36.11 – Scroll-Position und Off-Canvas-Sichtbarkeit
 *
 * 1. Ab 992 px wandert die Navigation im gescrollten Zustand wieder
 *    nach rechts in die kompakte Header-Zeile.
 * 2. Unter 992 px liegt der geoeffnete Off-Canvas-Drawer sicher ueber
 *    Overlay und Seiteninhalt.
 */

@media (min-width: 992px) {
  .site-header .primary-navigation {
    transition:
      inset-inline-start var(--transition),
      inset-inline-end var(--transition),
      inset-block-end var(--transition),
      transform var(--transition),
      opacity var(--transition) !important;
  }

  .site-is-scrolled .site-header .primary-navigation {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    inset-block-end: 50% !important;
    margin: 0 !important;
    transform: translateY(50%) !important;
  }

  .site-is-scrolled .site-header .inklusion-menu--level-0 {
    justify-content: flex-end !important;
  }
}

@media (max-width: 991.98px) {
  html.nav-is-open .site-header {
    z-index: 1200 !important;
  }

  html.nav-is-open body::before {
    z-index: 1100 !important;
  }

  .site-header .primary-navigation,
  body:not(.site-is-scrolled) .site-header .primary-navigation,
  .site-is-scrolled .site-header .primary-navigation {
    position: fixed !important;
    inset-block-start: 0 !important;
    inset-block-end: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    z-index: 1202 !important;
    isolation: isolate !important;
    background-color: #fff !important;
  }

  .site-header .primary-navigation.is-open {
    display: block !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-header .nav-toggle {
    z-index: 1203 !important;
  }

  .site-header .primary-navigation > *,
  .site-header .primary-navigation .block-main-navigation,
  .site-header .primary-navigation .content,
  .site-header .primary-navigation nav {
    position: relative !important;
    z-index: 1 !important;
  }
}


/* ==========================================================================
   Quelle: header-s36-12.css
   ========================================================================== */

/**
 * Sprint S-36.12 – Robustes Off-Canvas-Menü
 *
 * Der mobile Drawer wird beim Öffnen per JavaScript direkt unter <body>
 * verschoben. Dadurch kann er nicht mehr durch Header-Wrapper,
 * Overflow-Regeln oder Stacking-Kontexte verdeckt werden.
 */

@media (max-width: 991.98px) {
  html.nav-is-open,
  html.nav-is-open body {
    overflow: hidden !important;
  }

  html.nav-is-open body::before {
    z-index: 2000 !important;
  }

  body > .primary-navigation.is-offcanvas-navigation {
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    z-index: 2002 !important;
    display: block !important;
    inline-size: min(88vw, 26rem) !important;
    block-size: 100dvh !important;
    margin: 0 !important;
    padding: 6rem 1rem 1.25rem !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: -1rem 0 2.5rem rgba(32, 33, 36, .22) !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition:
      transform var(--transition),
      visibility var(--transition),
      opacity var(--transition) !important;
  }

  body > .primary-navigation.is-offcanvas-navigation.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body > .primary-navigation.is-offcanvas-navigation > *,
  body > .primary-navigation.is-offcanvas-navigation .block-main-navigation,
  body > .primary-navigation.is-offcanvas-navigation .content,
  body > .primary-navigation.is-offcanvas-navigation nav,
  body > .primary-navigation.is-offcanvas-navigation .navbar,
  body > .primary-navigation.is-offcanvas-navigation .navbar-collapse {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    inline-size: 100% !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--level-0,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--sub,
  body > .primary-navigation.is-offcanvas-navigation .menu,
  body > .primary-navigation.is-offcanvas-navigation .navbar-nav,
  body > .primary-navigation.is-offcanvas-navigation li > ul,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-menu {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .25rem !important;
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--sub,
  body > .primary-navigation.is-offcanvas-navigation li > ul,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-menu {
    margin-block: .1rem .65rem !important;
    margin-inline-start: 1rem !important;
  }

  body > .primary-navigation.is-offcanvas-navigation a,
  body > .primary-navigation.is-offcanvas-navigation .nav-link,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    inline-size: 100% !important;
    padding: .9rem 1rem !important;
    color: var(--color-text) !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .site-header .nav-toggle {
    z-index: 2003 !important;
  }
}


/* ==========================================================================
   Quelle: header-s36-13.css
   ========================================================================== */

/**
 * Sprint S-36.13 – Einheitliche Navigationstypografie
 *
 * Das Off-Canvas-Menü verwendet dieselbe Schriftgestaltung und dieselben
 * Hover-, Fokus- und Aktivzustände wie die Desktop-Navigation.
 */

@media (max-width: 991.98px) {
  body > .primary-navigation.is-offcanvas-navigation {
    font-family: inherit !important;
  }

  body > .primary-navigation.is-offcanvas-navigation li,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__item,
  body > .primary-navigation.is-offcanvas-navigation .nav-item {
    inline-size: 100% !important;
  }

  body > .primary-navigation.is-offcanvas-navigation a,
  body > .primary-navigation.is-offcanvas-navigation .nav-link,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .55rem !important;
    inline-size: fit-content !important;
    max-inline-size: 100% !important;
    margin: 0 !important;
    padding: .55rem 0 .72rem !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--color-text) !important;
    font-family: inherit !important;
    font-size: clamp(.98rem, 1vw, 1.08rem) !important;
    font-weight: 520 !important;
    letter-spacing: .005em !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  body > .primary-navigation.is-offcanvas-navigation a::before,
  body > .primary-navigation.is-offcanvas-navigation .nav-link::before,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item::before,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link::before {
    content: '' !important;
    position: absolute !important;
    inset-inline: 0 !important;
    inset-block-end: .25rem !important;
    block-size: 3px !important;
    border-radius: 999px !important;
    background: #f5c400 !important;
    opacity: 0 !important;
    transform: scaleX(.82) !important;
    transform-origin: center !important;
    transition: opacity 220ms ease, transform 220ms ease !important;
  }

  body > .primary-navigation.is-offcanvas-navigation a:hover,
  body > .primary-navigation.is-offcanvas-navigation a:focus-visible,
  body > .primary-navigation.is-offcanvas-navigation a.is-active,
  body > .primary-navigation.is-offcanvas-navigation .nav-link:hover,
  body > .primary-navigation.is-offcanvas-navigation .nav-link:focus-visible,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item:hover,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item:focus-visible,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link:hover,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link:focus-visible,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link.is-active,
  body > .primary-navigation.is-offcanvas-navigation .active > a,
  body > .primary-navigation.is-offcanvas-navigation .active > .nav-link,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__item--active > .inklusion-menu__link,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__item--active-trail > .inklusion-menu__link {
    background: transparent !important;
    color: var(--color-text) !important;
  }

  body > .primary-navigation.is-offcanvas-navigation a:hover::before,
  body > .primary-navigation.is-offcanvas-navigation a:focus-visible::before,
  body > .primary-navigation.is-offcanvas-navigation a.is-active::before,
  body > .primary-navigation.is-offcanvas-navigation .nav-link:hover::before,
  body > .primary-navigation.is-offcanvas-navigation .nav-link:focus-visible::before,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item:hover::before,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item:focus-visible::before,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link:hover::before,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link:focus-visible::before,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__link.is-active::before,
  body > .primary-navigation.is-offcanvas-navigation .active > a::before,
  body > .primary-navigation.is-offcanvas-navigation .active > .nav-link::before,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__item--active > .inklusion-menu__link::before,
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu__item--active-trail > .inklusion-menu__link::before {
    opacity: 1 !important;
    transform: scaleX(1) !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--sub,
  body > .primary-navigation.is-offcanvas-navigation li > ul,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-menu {
    margin-block: .1rem .7rem !important;
    margin-inline-start: 1rem !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--sub a,
  body > .primary-navigation.is-offcanvas-navigation li > ul a,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-menu a,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-item {
    font-size: .94rem !important;
    font-weight: 430 !important;
  }
}


/* ==========================================================================
   Quelle: header-s36-14.css
   ========================================================================== */

/**
 * Sprint S-36.14 – Off-Canvas-Kopf und Innenabstände
 *
 * - Eigene Kopfzeile im geöffneten Drawer mit "Menü" und Schließen-Button.
 * - Ruhige, einheitliche Innenabstände im Drawer.
 * - Typografie und Linkzustände aus S-36.13 bleiben unverändert.
 */

@media (max-width: 991.98px) {
  body > .primary-navigation.is-offcanvas-navigation {
    padding: 0 2rem 1.5rem !important;
    scroll-padding-top: 5rem;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__header {
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-block-size: 4.75rem;
    margin-inline: -2rem;
    padding: .85rem 2rem .75rem;
    background: #fff;
    border-block-end: 1px solid rgba(32, 33, 36, .12);
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__title {
    color: var(--color-text);
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .005em;
    line-height: 1.2;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-block-size: 2.75rem;
    margin: 0;
    padding: .65rem .9rem;
    border: 0;
    border-radius: 999px;
    background: var(--color-green);
    color: #fff;
    font: inherit;
    font-size: .96rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close:hover,
  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close:focus-visible {
    filter: brightness(.94);
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close:focus-visible {
    outline: 3px solid #f5c400;
    outline-offset: 3px;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close-icon {
    position: relative;
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 1rem;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close-icon::before,
  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close-icon::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 1.05rem;
    border-block-start: 2px solid currentColor;
    transform-origin: center;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  body > .primary-navigation.is-offcanvas-navigation > .inklusion-menu--level-0,
  body > .primary-navigation.is-offcanvas-navigation > .menu,
  body > .primary-navigation.is-offcanvas-navigation > .navbar-nav,
  body > .primary-navigation.is-offcanvas-navigation > .content,
  body > .primary-navigation.is-offcanvas-navigation > .block-menu,
  body > .primary-navigation.is-offcanvas-navigation > nav,
  body > .primary-navigation.is-offcanvas-navigation > .navbar,
  body > .primary-navigation.is-offcanvas-navigation > .navbar-collapse {
    margin-block-start: .75rem !important;
  }

  /* S-36.13 setzt Links auf Inhaltsbreite; der Drawer gibt ihnen nun den
     fehlenden Abstand zum linken und rechten Rand. */
  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--level-0,
  body > .primary-navigation.is-offcanvas-navigation .menu,
  body > .primary-navigation.is-offcanvas-navigation .navbar-nav {
    inline-size: 100% !important;
  }

  @media (max-width: 479.98px) {
    body > .primary-navigation.is-offcanvas-navigation {
      padding-inline: 1.35rem !important;
    }

    body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__header {
      margin-inline: -1.35rem;
      padding-inline: 1.35rem;
    }
  }
}


/* ==========================================================================
   Quelle: header-s36-15.css
   ========================================================================== */

/**
 * Sprint S-36.15 – Off-Canvas-Kopf und Einrückung
 *
 * - Nur ein sichtbarer Menü-Schließen-Button im Drawer-Kopf.
 * - Eindeutiger, ruhiger Innenabstand für alle Menüebenen.
 */

@media (max-width: 991.98px) {
  body > .primary-navigation.is-offcanvas-navigation {
    --offcanvas-inline-padding: clamp(2rem, 5vw, 3rem);
    box-sizing: border-box !important;
    padding: 0 var(--offcanvas-inline-padding) 1.75rem !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__header {
    justify-content: flex-end !important;
    margin-inline: calc(-1 * var(--offcanvas-inline-padding)) !important;
    padding-inline: var(--offcanvas-inline-padding) !important;
  }

  /* Der Schließen-Button enthält bereits "Menü"; ein zusätzlicher Titel
     wird nicht mehr benötigt. Diese Regel schützt auch alte DOM-Zustände. */
  body > .primary-navigation.is-offcanvas-navigation .offcanvas-navigation__title {
    display: none !important;
  }

  /* Technische Drupal-/Bootstrap-Wrapper dürfen den definierten Abstand
     weder aufheben noch durch negative Margins verschieben. */
  body > .primary-navigation.is-offcanvas-navigation > :not(.offcanvas-navigation__header),
  body > .primary-navigation.is-offcanvas-navigation .block-main-navigation,
  body > .primary-navigation.is-offcanvas-navigation .content,
  body > .primary-navigation.is-offcanvas-navigation nav,
  body > .primary-navigation.is-offcanvas-navigation .navbar,
  body > .primary-navigation.is-offcanvas-navigation .navbar-collapse {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--level-0,
  body > .primary-navigation.is-offcanvas-navigation > .menu,
  body > .primary-navigation.is-offcanvas-navigation .navbar-nav {
    box-sizing: border-box !important;
    inline-size: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  body > .primary-navigation.is-offcanvas-navigation .inklusion-menu--sub,
  body > .primary-navigation.is-offcanvas-navigation li > ul,
  body > .primary-navigation.is-offcanvas-navigation .dropdown-menu {
    margin-inline-start: 1.25rem !important;
  }
}


/* ==========================================================================
   Quelle: header-s37-1.css
   ========================================================================== */

/*
 * Sprint S-37.1 – Header-Feinschliff
 *
 * - Desktop-Menübutton ab 992px zuverlässig ausblenden.
 * - Theme-Header unterhalb der Drupal-Admin-Toolbar halten.
 */

.site-header {
  z-index: 100 !important;
}

@media (min-width: 992px) {
  .site-header .nav-toggle,
  .site-header button.nav-toggle,
  .site-header [data-navigation-toggle],
  .site-header [aria-controls="primary-navigation"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ==========================================================================
   Quelle: header-s37-3.css
   ========================================================================== */

/*
 * Sprint S-37.3 – Off-Canvas-Kopf im Desktop ausblenden
 *
 * Der Drawer-Kopf „Menü ד gehört ausschließlich zum Off-Canvas-Modus.
 */
@media (min-width: 992px) {
  .offcanvas-navigation__header {
    display: none;
  }
}


/* ========================================================================== 
   Sprint S-48.5 – Desktop-Navigation ab 992 px und rechtes Dropdown
   ========================================================================== */

/*
 * Der letzte Hauptmenüpunkt liegt direkt am rechten Rand. Sein Untermenü
 * öffnet sich deshalb nach links und bleibt vollständig im Viewport.
 */
@media (min-width: 992px) {
  .site-header
    .inklusion-menu--level-0
    > .inklusion-menu__item:last-child
    > .inklusion-menu--sub,
  .site-header
    .primary-navigation
    > .menu
    > li:last-child
    > ul,
  .site-header
    .primary-navigation
    .navbar-nav
    > .dropdown:last-child
    > .dropdown-menu {
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
  }
}

/* ==========================================================================
   Mobile kompakter Header im gescrollten Zustand
   ========================================================================== */

@media (max-width: 991.98px) {
  /*
   * Grundzustand:
   * Der Headertext darf weder durch overflow noch durch feste Breiten
   * abgeschnitten werden.
   */
  .site-header {
    overflow: visible !important;
  }

  .site-header__inner {
    overflow: visible !important;
    transition:
      min-height var(--transition),
      padding-block var(--transition) !important;
  }

  .site-header__branding {
    flex: 1 1 auto !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(100% - 4.5rem) !important;
    overflow: visible !important;
  }

  .site-header .site-branding {
    min-inline-size: 0 !important;
    overflow: visible !important;
  }

  .site-header .site-branding__logo-link,
  .site-header .site-branding__logo,
  .site-header .site-header__branding img {
    transition:
      inline-size var(--transition),
      max-inline-size var(--transition) !important;
  }

  .site-header .site-branding__text {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-inline-size: 0 !important;
    inline-size: auto !important;
    max-inline-size: none !important;
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition:
      padding-inline-start var(--transition),
      opacity .16s ease !important;
  }

  .site-header .site-branding__name,
  .site-header .site-branding__slogan,
  .site-header .site-branding__locations {
    max-inline-size: 100% !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header .site-branding__logo-link::after {
    transition: opacity .16s ease !important;
  }
	html.site-is-scrolled .site-header .site-branding__text::before {
	  inset-inline-start: -.63rem !important;
	}

  /*
   * Auf sehr schmalen Smartphones wird das Logo im normalen Zustand etwas
   * kleiner, damit Schulname und Slogan nicht in eine extrem schmale Spalte
   * gedrängt werden.
   */
  @media (max-width: 479.98px) {
    .site-header .site-branding {
      gap: .3rem !important;
    }

    .site-header .site-branding__logo-link {
      flex: 0 0 clamp(5.25rem, 24vw, 6.25rem) !important;
      inline-size: clamp(5.25rem, 24vw, 6.25rem) !important;
      max-inline-size: 6.25rem !important;
    }

    .site-header .site-branding__logo,
    .site-header .site-header__branding img {
      inline-size: 100% !important;
      max-inline-size: 6.25rem !important;
    }

    .site-header .site-branding__text {
      padding-inline-start: .65rem !important;
    }

    .site-header .site-branding__name {
      font-size: clamp(.82rem, 3.5vw, 1rem) !important;
      line-height: 1.2 !important;
      letter-spacing: .025em !important;
    }

    .site-header .site-branding__slogan,
    .site-header .site-branding__locations {
      font-size: clamp(.68rem, 2.7vw, .82rem) !important;
      line-height: 1.2 !important;
    }
  }

  /*
   * Kompakter Header nach dem Scrollen.
   */
  html.site-is-scrolled .site-header__inner {
    min-height: 4.5rem !important;
    padding-block: .35rem !important;
    overflow: visible !important;
  }

  html.site-is-scrolled .site-header__branding {
    display: block !important;
    flex: 1 1 auto !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(100% - 4rem) !important;
    overflow: visible !important;
  }

  html.site-is-scrolled .site-header .site-branding {
    display: flex !important;
    align-items: center !important;
    gap: .7rem !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow: visible !important;
  }

  html.site-is-scrolled .site-header .site-branding__logo-link {
    display: block !important;
    flex: 0 0 5.25rem !important;
    inline-size: 5.25rem !important;
    max-inline-size: 5.25rem !important;
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.site-is-scrolled .site-header .site-branding__logo,
  html.site-is-scrolled .site-header .site-header__branding img {
    display: block !important;
    inline-size: 100% !important;
    max-inline-size: 5.25rem !important;
    block-size: auto !important;
    max-block-size: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.site-is-scrolled .site-header .site-branding__logo-link::after {
    opacity: 0 !important;
  }

  /*
   * Der Textbereich bleibt im Scrollzustand vollständig erhalten.
   */
  html.site-is-scrolled .site-header .site-branding__text {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: .12rem !important;
    min-inline-size: 0 !important;
    inline-size: auto !important;
    max-inline-size: 100% !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /*
   * Schulname: erste Zeile.
   */
  html.site-is-scrolled .site-header .site-branding__name {
    display: block !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--color-text) !important;
    font-size: clamp(.82rem, 3vw, 1.02rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .025em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /*
   * Slogan beziehungsweise Standorte: zweite Zeile.
   */
  html.site-is-scrolled .site-header .site-branding__slogan,
  html.site-is-scrolled .site-header .site-branding__locations {
    display: block !important;
    min-inline-size: 0 !important;
    max-inline-size: 100% !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--color-green) !important;
    font-size: clamp(.66rem, 2.35vw, .78rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* ==========================================================================
   Horizontalen Überlauf durch das mobile Off-Canvas-Menü verhindern
   ========================================================================== */

@media (max-width: 991.98px) {
  html,
  body {
    overflow-x: clip;
  }
}
/* ==========================================================================
   Desktop-Branding und Hauptnavigation als gemeinsames Raster
   ========================================================================== */

@media (max-width: 991.98px) {
  .site-header__brand-area {
    display: contents;
  }
}

@media (min-width: 992px) {
  /*
   * Logo, Identität und Navigation teilen sich ab jetzt ein echtes Raster.
   * Die obere Zeile liegt am Logo-Anfang, die Navigation am Logo-Ende.
   */
  .site-header__brand-area {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "logo identity"
      "logo navigation";
    align-items: start;
    align-content: stretch;
    column-gap: var(--s36-brand-gap, clamp(1.35rem, 2vw, 1.85rem));
    row-gap: 0;
    flex: 1 1 auto;
    inline-size: 100%;
    min-inline-size: 0;
  }

  /* Drupal-Wrapper neutralisieren, damit Logo und Text echte Grid-Elemente sind. */
  .site-header__brand-area > .site-header__branding,
  .site-header__brand-area > .site-header__branding > .region,
  .site-header__brand-area > .site-header__branding .site-branding {
    display: contents !important;
  }

  .site-header__brand-area .site-branding__logo-link {
    grid-area: logo;
    align-self: stretch;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .site-header__brand-area .site-branding__text {
    grid-area: identity;
    align-self: start;
    min-inline-size: 0;
  }

  .site-header__brand-area .primary-navigation,
  body:not(.site-is-scrolled) .site-header__brand-area .primary-navigation,
  .site-is-scrolled .site-header__brand-area .primary-navigation {
    grid-area: navigation;
    position: static !important;
    inset: auto !important;
    align-self: end !important;
    justify-self: start;
    inline-size: auto !important;
    max-inline-size: 100%;
    block-size: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-header__brand-area .primary-navigation > *,
  .site-header__brand-area .primary-navigation .block-main-navigation,
  .site-header__brand-area .primary-navigation .content,
  .site-header__brand-area .primary-navigation nav,
  .site-header__brand-area .primary-navigation .inklusion-menu--level-0 {
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header__brand-area .primary-navigation .inklusion-menu--level-0,
  body:not(.site-is-scrolled)
    .site-header__brand-area
    .primary-navigation
    .inklusion-menu--level-0,
  .site-is-scrolled
    .site-header__brand-area
    .primary-navigation
    .inklusion-menu--level-0 {
    justify-content: flex-start !important;
  }

  /* Gleiche Menütypografie in beiden Headerzuständen. */
  .site-header__brand-area .primary-navigation .inklusion-menu__link,
  .site-is-scrolled
    .site-header__brand-area
    .primary-navigation
    .inklusion-menu__link {
    font-size: 1rem !important;
  }

  .site-header__brand-area .contextual {
    position: absolute;
  }
}

/* ==========================================================================
   Sprint K4-4S – Desktop-Scrollregeln für das Header-Raster bereinigen
   ========================================================================== */

@media (min-width: 992px) {
  /*
   * Ab 992 px ist ausschließlich das gemeinsame Raster für Logo,
   * Identität und Hauptnavigation maßgeblich. Ältere Sprintregeln dürfen
   * im Scrollzustand keine Position, Transformation oder Sichtbarkeit mehr
   * verändern.
   */
  .site-header,
  .site-header__inner,
  .site-header__brand-area,
  .site-header__branding,
  .site-header .site-branding,
  .site-header .site-branding__logo-link,
  .site-header .site-branding__text,
  .site-header .primary-navigation {
    overflow: visible !important;
  }

  .site-header__inner {
    align-items: stretch !important;
  }

  .site-header__brand-area {
    min-block-size: 0;
  }

  .site-header__brand-area .site-branding__logo-link {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site-header__brand-area .site-branding__text,
  html:not(.site-is-scrolled) .site-header__brand-area .site-branding__text,
  html.site-is-scrolled .site-header__brand-area .site-branding__text {
    position: static !important;
    inset: auto !important;
    align-self: start !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: .14rem !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site-header__brand-area .site-branding__name,
  .site-header__brand-area .site-branding__slogan,
  .site-header__brand-area .site-branding__locations,
  html.site-is-scrolled .site-header__brand-area .site-branding__name,
  html.site-is-scrolled .site-header__brand-area .site-branding__slogan,
  html.site-is-scrolled .site-header__brand-area .site-branding__locations {
    position: static !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin-inline: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .site-header__brand-area .primary-navigation,
  html:not(.site-is-scrolled) .site-header__brand-area .primary-navigation,
  html.site-is-scrolled .site-header__brand-area .primary-navigation {
    position: static !important;
    inset: auto !important;
    align-self: end !important;
    justify-self: start !important;
    inline-size: auto !important;
    max-inline-size: 100% !important;
    block-size: auto !important;
    max-block-size: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-header__brand-area .primary-navigation .inklusion-menu--level-0,
  html.site-is-scrolled
    .site-header__brand-area
    .primary-navigation
    .inklusion-menu--level-0 {
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header__brand-area .primary-navigation .inklusion-menu__link,
  html.site-is-scrolled
    .site-header__brand-area
    .primary-navigation
    .inklusion-menu__link {
    font-size: 1rem !important;
  }

  /* Ausgangszustand: Text und Menü nutzen die volle Logo-Höhe. */
  html:not(.site-is-scrolled) .site-header__inner {
    min-height: clamp(8.1rem, 10.5vw, 9.4rem) !important;
    padding-block: .5rem !important;
  }

  /*
   * Scrollzustand: kompakter, aber ohne Verschieben oder Abschneiden von
   * Site-Name, Slogan und Navigation.
   */
  html.site-is-scrolled .site-header__inner {
    min-height: 5.5rem !important;
    padding-block: .35rem !important;
    gap: 0 !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__logo-link {
    inline-size: clamp(6.2rem, 8vw, 7.5rem) !important;
    max-inline-size: 7.5rem !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__logo,
  html.site-is-scrolled .site-header__brand-area img {
    inline-size: 100% !important;
    max-inline-size: 7.5rem !important;
    block-size: auto !important;
    max-block-size: none !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__name {
    font-size: clamp(1.05rem, 1.45vw, 1.42rem) !important;
    line-height: 1.12 !important;
    letter-spacing: .01em !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__slogan,
  html.site-is-scrolled .site-header__brand-area .site-branding__locations {
    font-size: clamp(.7rem, .88vw, .84rem) !important;
    line-height: 1.15 !important;
  }
}

/* ==========================================================================
   Sprint K4-4T – Logoachse im Desktop-Scrollzustand stabilisieren
   ========================================================================== */

@media (min-width: 992px) {
  /*
   * Die Logo-Spalte behält vor und nach dem Scrollen dieselbe Breite.
   * Nur das Bild innerhalb dieser festen Spalte wird kompakter. Dadurch
   * bleibt die horizontale Logoachse unverändert.
   */
  .site-header__brand-area {
    --desktop-logo-column-width:
      clamp(9.025rem, calc(14vw + .625rem), 11.125rem);
    grid-template-columns:
      var(--desktop-logo-column-width)
      minmax(0, 1fr) !important;
  }

  .site-header__brand-area .site-branding__logo-link,
  html:not(.site-is-scrolled)
    .site-header__brand-area
    .site-branding__logo-link,
  html.site-is-scrolled
    .site-header__brand-area
    .site-branding__logo-link {
    inline-size: var(--desktop-logo-column-width) !important;
    max-inline-size: var(--desktop-logo-column-width) !important;
    justify-self: stretch !important;
    justify-content: center !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__logo,
  html.site-is-scrolled .site-header__brand-area img {
    inline-size: clamp(6.2rem, 8vw, 7.5rem) !important;
    max-inline-size: 7.5rem !important;
  }
}


/* ==========================================================================
   Sprint K4-4U – Desktop-Headerhoehen aus dem Rasterinhalt ableiten
   ========================================================================== */

@media (min-width: 992px) {
  /*
   * Das Raster bestimmt die Headerhoehe nun selbst. Die frueheren festen
   * Mindesthoehen erzeugten vor allem nahe 992 px eine grosse Leerflaeche
   * unter Branding und Navigation.
   */
  html:not(.site-is-scrolled) .site-header__inner,
  html.site-is-scrolled .site-header__inner {
    min-height: 0 !important;
    block-size: auto !important;
  }

  html:not(.site-is-scrolled) .site-header__inner {
    padding-block: .45rem !important;
  }

  html.site-is-scrolled .site-header__inner {
    padding-block: .25rem !important;
  }

  /*
   * Beide Rasterzeilen benoetigen nur ihre tatsaechliche Inhaltshoehe.
   * Logo, Identitaet und Navigation bleiben dabei auf ihren festen Achsen.
   */
  .site-header__brand-area,
  html:not(.site-is-scrolled) .site-header__brand-area,
  html.site-is-scrolled .site-header__brand-area {
    grid-template-rows: auto auto !important;
    align-content: center !important;
    min-block-size: 0 !important;
    block-size: auto !important;
  }

  .site-header__brand-area .site-branding__logo-link {
    align-self: stretch !important;
  }

  /*
   * Im Scrollzustand wird nur das Bild innerhalb der unveraenderten
   * Logo-Spalte kompakter. Die horizontale Logoachse bleibt erhalten.
   */
  html.site-is-scrolled .site-header__brand-area .site-branding__logo,
  html.site-is-scrolled .site-header__brand-area img {
    inline-size: clamp(6.25rem, 7vw, 7.25rem) !important;
    max-inline-size: 7.25rem !important;
    block-size: auto !important;
  }

  /* Die beiden rechten Rasterzeilen ruecken im kompakten Zustand zusammen. */
  html.site-is-scrolled .site-header__brand-area {
    row-gap: 0 !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__text {
    gap: .08rem !important;
  }
}

/* ==========================================================================
   Sprint K4-4V – Desktop-Header im Scrollzustand proportional verdichten
   ========================================================================== */

@media (min-width: 992px) {
  /*
   * Die bestehende Rasterstruktur und alle horizontalen Achsen bleiben
   * unveraendert. Verdichtet werden ausschliesslich die Proportionen im
   * Scrollzustand.
   */
  html.site-is-scrolled .site-header__inner {
    padding-block: .22rem !important;
  }

  /*
   * Die Logo-Spalte bleibt gleich breit. Nur das Bild innerhalb der festen
   * Spalte wird kleiner und bleibt darin horizontal zentriert.
   */
  html.site-is-scrolled .site-header__brand-area .site-branding__logo-link {
    justify-content: center !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__logo,
  html.site-is-scrolled .site-header__brand-area img {
    inline-size: 8.5rem !important;
    max-inline-size: 8.5rem !important;
    block-size: auto !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__name {
    font-size: clamp(1.06rem, 1.22vw, 1.28rem) !important;
    line-height: 1.08 !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__slogan,
  html.site-is-scrolled .site-header__brand-area .site-branding__locations {
    font-size: .74rem !important;
    line-height: 1.15 !important;
  }

  html.site-is-scrolled
    .site-header__brand-area
    .primary-navigation
    .inklusion-menu__link {
    font-size: .94rem !important;
    line-height: 1.15 !important;
  }
}

/* ==========================================================================
   Sprint K4-4W – Logo und Trennlinie im Desktop-Header ausbalancieren
   ========================================================================== */

@media (min-width: 992px) {
  /*
   * Der Trennstrich liegt genau in der Mitte des Spaltenabstands. Dadurch ist
   * der sichtbare Abstand zwischen Logo und Linie genauso gross wie zwischen
   * Linie und Branding beziehungsweise Navigation.
   */
  .site-header__brand-area,
  html:not(.site-is-scrolled) .site-header__brand-area,
  html.site-is-scrolled .site-header__brand-area {
    --s4w-separator-space: clamp(.75rem, 1.2vw, 1rem);
    column-gap: calc(2 * var(--s4w-separator-space)) !important;
  }

  /*
   * Die Logo-Spalte bleibt unveraendert. Das deutlich kleinere Logo wird an
   * ihrer rechten Kante ausgerichtet, damit sein Abstand zum Trennstrich auch
   * im kompakten Scrollzustand konstant bleibt.
   */
  .site-header__brand-area .site-branding__logo-link,
  html:not(.site-is-scrolled)
    .site-header__brand-area
    .site-branding__logo-link,
  html.site-is-scrolled
    .site-header__brand-area
    .site-branding__logo-link {
    justify-content: flex-start !important;
  }

  html:not(.site-is-scrolled) .site-header__brand-area .site-branding__logo,
  html:not(.site-is-scrolled) .site-header__brand-area img {
    inline-size: clamp(8rem, 10.5vw, 9.5rem) !important;
    max-inline-size: 9.5rem !important;
    block-size: auto !important;
  }

  html.site-is-scrolled .site-header__brand-area .site-branding__logo,
  html.site-is-scrolled .site-header__brand-area img {
    inline-size: 6.75rem !important;
    max-inline-size: 6.75rem !important;
    block-size: auto !important;
  }

  /*
   * Die Linie endet mit sichtbarer Luft oberhalb und unterhalb des Headers
   * und sitzt horizontal exakt zwischen Logo und den rechten Elementen.
   */
  .site-header__brand-area .site-branding__logo-link::after,
  html:not(.site-is-scrolled)
    .site-header__brand-area
    .site-branding__logo-link::after,
  html.site-is-scrolled
    .site-header__brand-area
    .site-branding__logo-link::after {
    inset-block: .65rem !important;
    inset-inline-end: calc(-1 * var(--s4w-separator-space)) !important;
  }
}

/* ==========================================================================
   Sprint K4-4X – Logozustand beim Desktop-Scrollen eindeutig festlegen
   ========================================================================== */

@media (min-width: 992px) {
  /*
   * Die Scrollklasse wird von navigation.js am html-Element gesetzt.
   * Dieser Abschlussblock verwendet deshalb ausschließlich html-basierte
   * Zustandsselektoren und legt die sichtbare Bildbreite eindeutig fest.
   * Die feste Logo-Spalte und damit auch Trennlinie und Menüachse bleiben
   * vollständig unverändert.
   */
  html:not(.site-is-scrolled)
    .site-header__brand-area
    .site-branding__logo {
    inline-size: 8rem !important;
    width: 8rem !important;
    min-inline-size: 0 !important;
    max-inline-size: 8rem !important;
    block-size: auto !important;
    max-block-size: none !important;
    flex: 0 0 auto !important;
  }

  html.site-is-scrolled
	  .site-header__brand-area
	  .site-branding__logo {
	  inline-size: 9rem !important;
	  width: 9rem !important;
	  min-inline-size: 0 !important;
	  max-inline-size: 9rem !important;
	  block-size: auto !important;
	  max-block-size: none !important;
	  flex: 0 0 auto !important;
  }
	html.site-is-scrolled .site-header__brand-area {
	  --desktop-logo-column-width: 9rem;
	}
	header {
		padding-top: .8rem;
		padding-bottom: .6rem;
	}
	html.site-is-scrolled header {
		padding: .4rem 0 .2rem !important;
	}
}

/**/
/* - User logged in - */
/**/
html.site-is-scrolled body.user-logged-in.toolbar-horizontal header {
	top: 80px;
}
html.site-is-scrolled body.user-logged-in.toolbar-vertical header {
	top: 40px;
}