.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-overlay);
  block-size: 2px;
  
  pointer-events: none;
  view-transition-name: page-progress;
}

.scroll-progress__bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  
  transform: scaleX(0);
  transform-origin: 0 50%;
  background-color: var(--world-accent, var(--color-accent));
}

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);

background-color: transparent;

padding-block-start: var(--header-inset);

view-transition-name: page-header;
}

.header-frost {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  pointer-events: none;

--frost-overhang: 40px;
  block-size: calc(var(--header-offset, calc(var(--header-height) + var(--header-inset))) + var(--frost-overhang));

  background-color: var(--color-header-wash);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--frost-overhang)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--frost-overhang)), transparent 100%);

  opacity: 0;
  transition: opacity var(--duration-slower) var(--easing-standard);

  view-transition-name: page-frost;
}

:root:has(.header.is-compact) .header-frost {
  opacity: 1;
}

:root:has(.header--on-light) .header-frost {
  background-color: var(--color-header-wash-light);
}

.header--on-light .header__logo,
.header--on-light .nav .nav__link,
.header--on-light .nav .nav__summary {
  color: var(--color-deep);
}

.header--on-light .nav .nav__link:hover,
.header--on-light .nav .nav__summary:hover {
  
  color: var(--color-emerald-deep);
}

.header--on-light .header__cta {
  background-color: var(--color-emerald-deep);
  color: var(--color-white);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  min-block-size: var(--header-height);
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--header-inset);
}

.header__inner > * {
  min-width: 0;
}

.header__logo {
  display: flex;
  align-items: center;
  
  min-block-size: var(--tap-target);
  min-inline-size: var(--tap-target);
  justify-content: center;
  margin-inline-start: calc((var(--mark-width) - var(--tap-target)) / 2);
  flex-shrink: 0;
  color: var(--color-text);
}

.header__mark {
  block-size: 1.75rem;
  inline-size: auto;
}

.header__logo { justify-self: start; }
.nav        { justify-self: center; }

.header__cta {
  justify-self: end;
  flex-shrink: 0;
}

@media (max-width: 63.99rem) {
  .header__cta {
    display: none;
  }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;

  inline-size: var(--tap-target);
  min-block-size: var(--tap-target);
  padding: 0;

  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
}

:root.nav-collapsible .header .nav-toggle {
  display: inline-flex;
}

@media (min-width: 768px) {
  :root.nav-collapsible .header .nav-toggle {
    display: none;
  }
}

.nav-toggle__box {
  position: relative;
  display: block;
  inline-size: 1.25rem;
  block-size: 0.75rem;
}

.nav-toggle__bar {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  
  transition: transform var(--duration-base) var(--easing-standard);
}

.nav-toggle__bar:nth-child(1) { inset-block-start: 0; }
.nav-toggle__bar:nth-child(2) { inset-block-end: 0; }

.is-nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.is-nav-open .nav-toggle__bar:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

.header--on-light .nav-toggle {
  color: var(--color-deep);
}

.nav__list {
  display: flex;
  align-items: center;
  
  gap: var(--space-6);
  margin: 0;
}

.nav__list > * {
  min-width: 0;
}

.nav .nav__link,
.nav .nav__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 44px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
}

html.translated-ltr .nav .nav__link,
html.translated-ltr .nav .nav__summary,
html.translated-ltr .nav .nav__sublink,
html.translated-rtl .nav .nav__link,
html.translated-rtl .nav .nav__summary,
html.translated-rtl .nav .nav__sublink {
  text-transform: capitalize;
}

.nav .nav__link:hover,
.nav .nav__summary:hover {
  color: var(--world-accent-lift, var(--color-accent));
}

.header[data-path^="/referenzen/"] .nav__link[href="/referenzen/"],
.header[data-path="/kontakt/"] .nav__link[href="/kontakt/"] {
  color: var(--world-accent-lift, var(--color-accent));
}

.nav__group {
  position: relative;
}

.nav .nav__summary {
  cursor: pointer;
  list-style: none;
}

.nav .nav__summary::-webkit-details-marker {
  display: none;
}

.nav__chevron {
  transition: transform var(--duration-fast) var(--easing-standard);
}

.nav__group[open] .nav__chevron {
  transform: rotate(180deg);
}

.nav__sublist {
  margin: 0;
}

.nav .nav__sublink {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  
  .header__inner {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-3);
    padding-block-end: var(--space-3);
  }

  .header__logo { grid-area: 1 / 1 / 2 / 2; }
  .header__cta  { grid-area: 1 / 2 / 2 / 3; }

  .nav {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: stretch;
  }

  .nav__list {
    flex-direction: column;
    
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
  }

  .nav__item,
  .nav__group {
    width: 100%;
  }

  .nav__sublist {
    padding-inline-start: var(--space-4);
  }

  .header__cta {
    justify-self: end;
  }

:root.nav-collapsible .header .header__inner {
    
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-2);
    row-gap: 0;
    padding-block-end: 0;
  }

  :root.nav-collapsible .header .header__logo   { grid-area: 1 / 1 / 2 / 2; }
  :root.nav-collapsible .header .header__cta    { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
  :root.nav-collapsible .header .nav-toggle     { grid-area: 1 / 4 / 2 / 5; }

:root.nav-collapsible .header .header__cta {
    padding-inline: var(--space-3);
    font-size: var(--font-size-sm);
  }

:root.nav-collapsible .header .nav {
    position: fixed;
    inset-block-start: var(--header-offset, calc(var(--header-height) + var(--header-inset)));
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-overlay);

    grid-area: auto;
    justify-self: stretch;

    padding: var(--space-5) var(--header-inset) var(--space-8);
    overflow-y: auto;
    overscroll-behavior: contain;

background-color: var(--color-nav-panel);

visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  :root.nav-collapsible .header.is-nav-open .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

:root.nav-collapsible .header.is-nav-open {
    background-color: var(--color-nav-panel);
  }

:root.nav-collapsible:has(.header.is-nav-open) .header-frost {
    opacity: 0;
  }

:root.nav-collapsible .header.is-nav-transitions .nav {
    transition:
      opacity    var(--duration-base) var(--easing-standard),
      transform  var(--duration-base) var(--easing-standard),
      visibility 0s linear var(--duration-base);
  }

  :root.nav-collapsible .header.is-nav-transitions.is-nav-open .nav {
    transition:
      opacity    var(--duration-base) var(--easing-standard),
      transform  var(--duration-base) var(--easing-standard),
      visibility 0s;
  }

:root.nav-collapsible .header .nav__list {
    gap: var(--space-5);
    align-items: stretch;
    text-align: center;

max-inline-size: 22rem;
    margin-inline: auto;
  }

:root.nav-collapsible .header .nav .nav__link,
  :root.nav-collapsible .header .nav .nav__summary {
    display: flex;
    justify-content: center;
    min-block-size: 56px;
    font-size: var(--font-size-lg);
    border-block-end: 1px solid var(--color-border);
  }

:root.nav-collapsible .header .nav__sublist {
    padding-inline-start: 0;
  }

  :root.nav-collapsible .header .nav .nav__sublink {
    justify-content: center;
    text-align: center;
    
    min-block-size: 52px;
  }

:root.nav-collapsible .header .nav__sublist > li + li {
    border-block-start: 1px solid var(--color-border-faint);
  }
}

@media (min-width: 768px) {
  .nav__sublist {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-overlay);

    min-inline-size: 15rem;
    padding: var(--space-3);

background-color: var(--color-nav-panel);
    background-image: var(--gradient-frost-haze);

    border: 1px solid var(--frost-edge);
    border-block-start-color: var(--frost-edge-lit);
    border-radius: var(--radius-lg);

box-shadow:
      var(--shadow-lg),
      inset 0 1px 0 var(--frost-lip),
      inset 0 -1px 0 var(--frost-lip-under);
  }

.nav__group[open] .nav__sublist::before {
    content: "";
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    block-size: var(--space-2);
  }

.nav__chevron {
    display: none;
  }

  .nav .nav__summary {
    cursor: default;
  }

  .nav .nav__sublink:hover,
  .nav .nav__sublink:focus-visible {
    background-color: var(--glass-fill-strong);
    color: var(--color-text);
  }
}

.footer {
  position: relative;
  padding-block: var(--space-9) var(--space-9);
  border-block-start: 1px solid var(--color-border);
}

.immersive:not(:has(.immersive__index)) .footer {
  padding-block-end: var(--space-7);
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-7) var(--space-6);

  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

@media (min-width: 1024px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    column-gap: var(--space-7);
  }
}

.footer__inner > * {
  min-width: 0;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__mark {
  align-self: flex-start;
  block-size: 2.75rem;
  inline-size: auto;
  
  color: var(--color-text);
}

.footer__positioning {
  max-width: 26ch;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.footer__nav,
.footer__contact {
  min-width: 0;
}

.footer__heading {
  margin-block-end: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  color: var(--color-text);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.footer .footer__list--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-inline-end: calc(3.5rem + var(--space-5));
}

.footer .footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  
  min-block-size: 44px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer .footer__link:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.immersive:has(.split) .footer__contact .footer__list {
  display: none;
}

.immersive:has(.split) .footer__address {
  margin-block-start: 0;
}

.footer__address {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);
}

.footer__legal {
  grid-column: 1 / -1;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.footer__vat {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.whatsapp-fab {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: var(--z-sticky);

  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;

  background-color: var(--color-brand-whatsapp);
  border-radius: var(--radius-pill);
  
  overflow: hidden;
  box-shadow: var(--shadow-md);

transition:
    transform var(--duration-base) var(--easing-standard),
    opacity var(--duration-base) var(--easing-standard);

view-transition-name: page-fab;
}

.whatsapp-fab__icon {
  inline-size: 78%;
  block-size: 78%;
  object-fit: contain;
}

.whatsapp-fab:hover {
  transform: scale(1.06);
}

.whatsapp-fab.is-suppressed {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}