/* Verhindert seitliches Zucken beim Seitenwechsel,
   wenn die vertikale Scrollbar erscheint oder verschwindet. */
html {
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}
/* Grundzustand: Der Body selbst bleibt sichtbar.
   Ein- und Ausblenden passiert gezielt ueber #wrapper und Transition-Overlay. */
body {
  opacity: 1;
}

/* Seiteninhalt unterhalb des Overlays.
   Wird beim Laden eingeblendet und beim Seitenwechsel ausgeblendet. */
#wrapper {
  opacity: 0;
  transition: opacity 180ms linear;
}

body.page-loaded #wrapper {
  opacity: 1;
}

body.page-exit #wrapper {
  opacity: 0;
}

/* Transition-Layer ueber die komplette Browserbreite.
   Die boxed Breite entsteht erst in .hk-transition-box. */
.hk-page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 420ms ease;
}

/* Innere Box: Auf grossen Monitoren boxed, auf kleineren Views per Media Query 100%. */
.hk-transition-box {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
}

/* Balken ohne Zwischenraeume direkt aneinander anschliessen lassen. */
.hk-transition-blue-bar,
.hk-transition-white-bar,
.hk-transition-gray-bar {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Oberer Balken: Logo fuellt die volle Balkenhoehe von 100px. */
.hk-transition-blue-bar {
  height: 100px;
  background: #397d99;
  display: flex;
  align-items: center;
}

.hk-transition-logo {
  display: block;
  height: 100px;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

/* Mini-Logo ist nur im Header unter 992px sichtbar. */
.hk-transition-mini-logo {
  display: none;
  height: 30px;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.hk-transition-white-bar {
  height: 60px;
  background: #ffffff;
}

.hk-transition-gray-bar {
  height: 45px;
  background: #697784;
}

/* XXL: ab 1400px, Box 1400px */
@media (min-width: 1400px) {
  .hk-transition-box {
    max-width: 1400px;
    box-shadow:
  -2px 0 10px rgba(0, 0, 0, 0.07),
   2px 0 10px rgba(0, 0, 0, 0.07);
  }

  .hk-transition-logo {
    margin-left: 52px;
    margin-right: 0;
  }
}

/* XL: 1200px bis 1399.98px, Box 1200px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hk-transition-box {
    max-width: 1200px;
  box-shadow:
  -2px 0 10px rgba(0, 0, 0, 0.07),
   2px 0 10px rgba(0, 0, 0, 0.07);
  }

  .hk-transition-logo {
    margin-left: 42px;
    margin-right: 0;
  }
}

/* LG: 992px bis 1199.98px.
   Logo wandert von 28px nach 133px von links.
   105 = 133 - 28
   208 = 1200 - 992 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hk-transition-box {
    max-width: 100%;
  }

  .hk-transition-logo {
    margin-left: clamp(
      28px,
      calc(28px + (100vw - 992px) * 105 / 208),
      133px
    );
    margin-right: 0;
  }
}

/* Unter 992px: anderer Header-Aufbau.
   Blauer Balken und grosses Logo bleiben unveraendert.
   Der weisse Balken wird 40px hoch und bekommt einen feinen Schatten.
   Der graue Balken wird ausgeblendet.
   Das Mini-Logo wird im weissen Balken sichtbar. */
@media (max-width: 991.98px) {
  .hk-transition-white-bar {
    height: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
  }

  .hk-transition-gray-bar {
    height: 0;
  }

  .hk-transition-mini-logo {
    display: block;
  }
}

/* MD: 768px bis 991.98px.
   Grosses Logo und Mini-Logo starten gleich weit von links.
   Beide wandern von 36px nach 148px.
   112 = 148 - 36
   224 = 992 - 768 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hk-transition-box {
    max-width: 100%;
  }

  .hk-transition-logo,
  .hk-transition-mini-logo {
    margin-left: clamp(
      36px,
      calc(36px + (100vw - 768px) * 112 / 224),
      148px
    );
    margin-right: 0;
  }
}

/* SM: 576px bis 767.98px.
   Grosses Logo und Mini-Logo starten gleich weit von links.
   Beide wandern von 30px nach 127px.
   97 = 127 - 30
   192 = 768 - 576 */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hk-transition-box {
    max-width: 100%;
  }

  .hk-transition-logo,
  .hk-transition-mini-logo {
    margin-left: clamp(
      30px,
      calc(30px + (100vw - 576px) * 97 / 192),
      127px
    );
    margin-right: 0;
  }
}

/* XS: kleiner als 576px.
   Fester Abstand 12px von links fuer beide Logos. */
@media (max-width: 575.98px) {
  .hk-transition-box {
    max-width: 100%;
  }

  .hk-transition-logo,
  .hk-transition-mini-logo {
    margin-left: 12px;
    margin-right: 0;
  }
}

/* Sehr schmale Viewports:
   Ab 423px Browserbreite passt das grosse Logo mit 100px Hoehe nicht mehr sauber.
   Es wird proportional auf die verfuegbare Breite geschrumpft:
   100vw minus 12px links und 12px rechts Sicherheitsabstand.
   Das Mini-Logo bleibt 30px hoch. */
@media (max-width: 422.98px) {
  .hk-transition-logo {
    height: auto;
    width: min(399px, calc(100vw - 24px));
  }

  .hk-transition-mini-logo {
    height: 30px;
    width: auto;
  }
}

/* Nach dem Laden: Transition-Header ausblenden. */
body.page-loaded .hk-page-transition {
  opacity: 0;
}

/* Beim Seitenwechsel: Transition-Header wieder einblenden. */
body.page-exit .hk-page-transition {
  opacity: 1;
}

/* Bewegung fuer Nutzer reduzieren, die reduzierte Animation bevorzugen. */
@media (prefers-reduced-motion: reduce) {
  #wrapper,
  .hk-page-transition {
    transition: none;
  }
}