header {
  background-color: transparent;
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100vw;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

header.scrolled {
  background-color: transparent;
}

#navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

.nav-left,
.nav-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  gap: 5px;
}

.nav-right {
  justify-content: flex-end;
}

.nav-left {
  justify-content: flex-start;
}

/* ====================================================================
   LOGO – fließender Farbwechsel an der Sektionskante
   Zwei deckungsgleiche Kopien (.upper / .lower) liegen übereinander.
   Beide werden über CSS-mask aus dem echten SVG "ausgestanzt" und per
   background-color eingefärbt. clip-path teilt sie an der --split-Linie.
   Die Variablen --split / --upper / --lower setzt scripts.js beim Scrollen.
   ==================================================================== */
.logo {
  flex-shrink: 0;
  position: relative;
  display: block;
  height: 27px;                         /* Höhe wie zuvor */
  aspect-ratio: var(--logo-ar, 6 / 1);  /* wird per JS auf das echte SVG gesetzt */
  width: auto;
  margin: 0 20px;                        /* ersetzt das frühere img-padding */
  transition: height 0.3s ease;

  /* Vorgaben – werden per JS überschrieben */
  --h: 35px;
  --split: 35px;     /* ganze Höhe = obere Farbe */
  --upper: #ffffff;  /* Startzustand: weiß über der dunklen Slideshow */
  --lower: #ffffff;
}

header.scrolled .logo {
  height: 20px;
}

.logo .layer {
  position: absolute;
  inset: 0;
  -webkit-mask: url(/img/Logo_NOSTRES_white.svg) no-repeat center / contain;
          mask: url(/img/Logo_NOSTRES_white.svg) no-repeat center / contain;
}

/* obere Hälfte: nur bis zur Trennlinie sichtbar */
.logo .layer.upper {
  background-color: var(--upper);
  clip-path: inset(0 0 calc(var(--h) - var(--split)) 0);
}

/* untere Hälfte: ab der Trennlinie sichtbar */
.logo .layer.lower {
  background-color: var(--lower);
  clip-path: inset(var(--split) 0 0 0);
}

/* ---- Scroll-to-top Pfeil: gleiches Split-Prinzip wie das Logo ---- */
.scroll-to-top .arrow-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  --h: 20px;
  --split: 20px;
  --upper: #000;
  --lower: #000;
}

.scroll-to-top .arrow-layer {
  position: absolute;
  inset: 0;
  -webkit-mask: url(/img/arrow.svg) no-repeat center / contain;
          mask: url(/img/arrow.svg) no-repeat center / contain;
}

.scroll-to-top .arrow-layer.upper {
  background-color: var(--upper);
  clip-path: inset(0 0 calc(var(--h) - var(--split)) 0);
}

.scroll-to-top .arrow-layer.lower {
  background-color: var(--lower);
  clip-path: inset(var(--split) 0 0 0);
}

/* Hover: Pille wird weiss -> Pfeil dunkel */
.scroll-to-top:hover .arrow-layer.upper,
.scroll-to-top:hover .arrow-layer.lower {
  background-color: #000;
}

/* All pills: glass effect */
#navbar li a {
  display: block;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
  padding: 5px 15px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 100vh;
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}


/* Termin buchen: solid white */
#navbar li a.pill-solid {
  background-color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#navbar li a:hover {
  background-color: #000;
  color: #fff;
  box-shadow: 0px 0px 30px rgb(255, 255, 255);
}

#navbar li a.lang-switch {
  font-size: 13px;
  padding: 5px 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

#navbar li a.lang-switch:hover {
  opacity: 1;
  background-color: #000;
  color: #fff;
  box-shadow: 0px 0px 30px rgb(255, 255, 255);
}

.responsive-svg {
  width: 95%;
  height: auto;
  display: block;
  z-index: 2;
  position: relative;
  padding: 2vh;
}

/* Hamburger */
.menu-icon {
  display: none;
  cursor: pointer;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
  padding: 15px;
  border-radius: 100vh;
  margin-left: auto;
  position: relative;
  z-index: 1001;
}

.menu-icon:hover {
  background-color: #fff;
  box-shadow: 0px 0px 30px rgb(255, 255, 255);
}

.menu-icon:hover .bar1,
.menu-icon:hover .bar2,
.menu-icon:hover .bar3 {
  background-color: #000;
  
}

.bar1, .bar2, .bar3 {
  width: 25px;
  height: 2px;
  margin: 5px 0;
  /* Farbe wird per JS gesetzt (gleiche Logik wie das Logo) */
  transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.15s ease;
}

.bar1 { background-color: var(--bar-1, #fff); }
.bar2 { background-color: var(--bar-2, #fff); }
.bar3 { background-color: var(--bar-3, #fff); }

.change .bar1 { transform: rotate(-45deg) translate(-4px, 5px); }
.change .bar2 { opacity: 0; }
.change .bar3 { transform: rotate(45deg) translate(-4px, -5px); }

/* Menü offen (X): Overlay ist hell -> Striche dunkel */
.change .bar1,
.change .bar2,
.change .bar3 { background-color: #000; }

/* Mobile Nav: Fullscreen Overlay */
#mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#mobile-nav.active {
  display: flex;
}

#mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#mobile-nav ul li {
  padding: 12px 0;
}

#mobile-nav ul li a {
  font-size: 36px;
  color: #000;
  text-decoration: none;
}

#mobile-nav ul li a:hover {
  color: #000;
  text-decoration: underline;
}

/* Responsive */
@media screen and (max-width: 1000px) {
  .nav-left,
  .nav-right {
    display: none;
  }

  .menu-icon {
    display: block;
  }

  .logo {
    height: 25px;
    margin: 0 15px;
  }
}