/* Die Leiste sitzt auf allen Breiten bündig an der oberen Kante: volle Breite,
   kein Radius, kein Schatten, eine Haarlinie unten. Vorher schwebte sie als
   gerundete Karte mit Abstand zum Rand — auf dem Handy sah das Menü damit
   anders aus als am Rechner. Die Begründung steht ausführlich beim
   Desktop-Block am Dateiende. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  backdrop-filter: saturate(150%) blur(24px);
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: none;
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
}

:is(.page-home, .page-subpage) .site-header {
  z-index: 1200;
}

/* Das Logo ist der Verweis auf die Startseite. Die Bilddatei ist auf schmalen
   Geraeten nur 20 px hoch — als Trefferflaeche zu wenig (WCAG 2.2 verlangt
   24x24, angenehm zu treffen sind 44 px). Die Hoehe wirkt nur auf den
   Verweis, das Logo selbst bleibt exakt gleich gross. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  min-height: 44px;
}

.logo-image {
  height: clamp(20px, 2.2vw, 28px);
  width: auto;
  display: block;
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: 46px;
  height: 46px;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  box-shadow: none;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.nav-toggle:hover {
  border-color: var(--color-accent);
  box-shadow: none;
  transform: translateY(-1px);
  background: var(--color-accent);
}

.nav-toggle-icon {
  width: 18px;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  position: relative;
  display: block;
  transition: background 0.2s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
  transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

.site-header[data-nav-open="true"] .nav-toggle-icon {
  background: transparent;
}

.site-header[data-nav-open="true"] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header[data-nav-open="true"] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-toggle-text {
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: none;
}

@media (max-width: 959px) {
  .header-inner {
    min-height: 64px;
    gap: 1rem;
    /* Gleicher Satzspiegel wie der Seiteninhalt. */
    width: min(var(--container-width), 100% - 2rem);
    margin-inline: auto;
    padding: 0;
  }

  .nav-toggle {
    width: 48px;
    height: 48px;
  }

  .site-nav {
    max-height: calc(100vh - 64px - env(safe-area-inset-top));
  }

  .nav-list {
    gap: 0.55rem;
    padding: 1.3rem 1.35rem 0.7rem;
  }

  .nav-list :is(a, .sub-nav-label) {
    font-size: var(--fs-nav);
    line-height: 1.4;
    min-height: 44px;
    padding: 0.82rem 0.75rem;
  }

  .sub-nav a {
    font-size: var(--fs-small);
    line-height: 1.45;
  }

  .sub-nav {
    gap: 0.55rem;
    padding: 0.55rem 0 0.75rem 1rem;
  }

  .sub-nav-toggle {
    width: 36px;
    height: 36px;
  }

  .nav-social {
    gap: 0.75rem;
    padding: 0.55rem 1.35rem 1.2rem 1.75rem;
  }

  .nav-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-item.has-sub > :is(a, .sub-nav-label)::after {
    display: none;
  }
}

/* Aufgeklapptes Menü auf dem Handy: schließt unten an die Leiste an, statt als
   zweite gerundete Karte darunter zu schweben. Weiß deckend, weil hier eine
   lange Liste über bewegtem Bildinhalt steht. */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.06);
  opacity: 0;
  /* visibility nimmt das geschlossene Menue aus der Tab-Reihenfolge.
     Verzoegert um die Dauer der Blende, damit das Ausblenden sichtbar bleibt. */
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  max-height: calc(100vh - var(--header-height) - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Nur mobil relevant: auf Desktop ist die Nav immer sichtbar und wird per
   translateX(-50%) zentriert – diese Regel darf das nie überschreiben. */
@media (max-width: 959px) {
  .site-header[data-nav-open="true"] .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  /* Ohne JavaScript: Menü dauerhaft anzeigen, nutzlosen Toggle ausblenden,
     Untermenüs ausgeklappt lassen, damit alle Ziele erreichbar sind. */
  html.no-js .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  html.no-js .nav-toggle {
    display: none;
  }

  html.no-js .sub-nav {
    display: grid;
  }
}

.nav-list {
  list-style: none;
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.5rem 0.5rem;
}

.nav-item {
  position: relative;
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-start;
  padding: 0.35rem 1.5rem 1rem 2rem;
  width: 100%;
}

.nav-list :is(a, .sub-nav-label) {
  display: block;
  padding: 0.6rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
}

.sub-nav-label {
  cursor: default;
}

.nav-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px !important;
  padding: 0 !important;
  border: 0;
  background: var(--color-accent);
  color: #ffffff !important;
  text-decoration: none !important;
  transition: none;
}

.nav-social-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.nav-social-link:focus-visible {
  /* Vorher: weisser Ring auf weisser Navbar = 1,04:1. Jetzt Markenrot auf
     Weiss = 5,53:1, mit Abstand, damit er sich vom roten Button absetzt. */
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.nav-item.has-sub > :is(a, .sub-nav-label)::after {
  content: none;
}

.sub-nav {
  list-style: none;
  display: none;
  gap: 0.45rem;
  padding: 0.45rem 0 0.6rem 0.9rem;
  margin-top: 0.2rem;
  background: #ffffff;
  border-left: 0;
  border-radius: var(--radius-s);
  grid-column: 1 / -1;
}

.nav-item.has-sub[data-subnav-open="true"] .sub-nav {
  display: grid;
}

.nav-item.has-sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.7rem;
}

.nav-item.has-sub > :is(a, .sub-nav-label) {
  grid-column: 1;
}

.sub-nav-toggle {
  grid-column: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-ink-muted);
}

.sub-nav-toggle-icon {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  display: block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.nav-item.has-sub[data-subnav-open="true"] .sub-nav-toggle-icon {
  transform: translateY(-1px) rotate(-135deg);
}

/* Gruppe innerhalb des Produkte-Untermenues, z. B. "Schlafstudio" mit
   Relax 2000 und Elastica darunter. Das Label ist bewusst kein Link, weil es
   keine eigene Seite dazu gibt — es benennt nur die Gruppe. */
.sub-nav-group {
  display: grid;
  gap: 0.2rem;
}

.sub-nav-group__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  padding: 0.35rem 0 0.1rem;
}

.sub-nav-group__label.is-current {
  color: var(--color-accent);
}

.sub-nav-group__list {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0 0 0.15rem 0.85rem;
  border-left: 1px solid var(--border-subnav-group, rgba(0, 0, 0, 0.12));
}

.sub-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  padding: 0.35rem 0;
  border-radius: 0;
  color: var(--color-ink-muted);
  text-decoration: none;
  transition: transform 0.2s ease, text-decoration-color 0.2s ease, color 0.2s ease;
}

.nav-list .sub-nav a[aria-current="page"],
.nav-list .sub-nav a[aria-current="location"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  font-weight: 500;
}

.nav-list :is(a, .sub-nav-label)[aria-current="page"],
.nav-list :is(a, .sub-nav-label)[aria-current="location"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nav-list a.nav-link-about[aria-current="page"],
.nav-list a.nav-link-about[aria-current="location"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.nav-item.has-sub > :is(a, .sub-nav-label)[aria-current="page"] + .sub-nav-toggle,
.nav-item.has-sub > :is(a, .sub-nav-label)[aria-current="location"] + .sub-nav-toggle {
  color: var(--color-accent);
}

@media (hover: hover) and (pointer: fine) {
  .nav-list :is(a, .sub-nav-label):hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .nav-social-link:hover {
    color: #ffffff !important;
    background: var(--color-accent);
    text-decoration: none !important;
    transform: none;
  }

  .nav-item.has-sub:hover > :is(a, .sub-nav-label) {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .nav-item.has-sub:hover .sub-nav-toggle,
  .nav-item.has-sub > :is(a, .sub-nav-label):hover + .sub-nav-toggle {
    color: var(--color-ink-muted);
  }

  .nav-list .sub-nav a:hover {
    color: var(--color-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transform: translateX(0.28rem);
  }
}

.nav-cta {
  display: none;
}

@media (min-width: 960px) {
  .logo {
    display: none;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    max-height: none;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
  }

  .nav-list :is(a, .sub-nav-label) {
    font-size: var(--fs-nav);
    line-height: 1.15;
  }

  .nav-social {
    padding: 0;
    margin-left: auto;
    width: auto;
  }

  .nav-social-link {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .nav-item.has-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .nav-item.has-sub > :is(a, .sub-nav-label) {
    padding-right: 0;
  }

  .sub-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Mindestzielgroesse 24x24 px (WCAG 2.5.8). Das Icon bleibt 7 px,
       nur die Trefferflaeche waechst. */
    min-width: 24px;
    min-height: 24px;
    width: auto;
    height: auto;
    padding: 0.6rem 0.35rem;
    align-self: center;
    line-height: 1;
  }

  .sub-nav {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 50%;
    transform: translate(-50%, -6px);
    width: max-content;
    min-width: 210px;
    max-width: min(90vw, 260px);
    padding: 0.6rem 0.95rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-top: 0;
    display: grid;
  }

  .sub-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.55rem;
    height: 0.55rem;
  }

  .nav-item.has-sub[data-subnav-open="true"] .sub-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }


  .sub-nav a {
    padding: 0.34rem 0;
    border-radius: 8px;
  }

  .nav-cta {
    padding: 0;
  }

  :is(.page-home, .page-subpage) .site-header {
    --home-header-top: 38px;
    position: fixed;
    top: var(--home-header-top);
    left: 20px;
    right: auto;
    width: calc(100% - 40px);
    margin: 0;
    transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  :is(.page-home, .page-subpage) .header-inner {
    display: block;
    position: relative;
    min-height: 74px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  :is(.page-home, .page-subpage) .logo {
    position: fixed;
    --home-logo-inset: clamp(20px, 2.2vw, 30px);
    left: calc(20px + var(--home-logo-inset));
    top: calc(var(--home-header-top) + var(--home-logo-inset));
    z-index: 1201;
  }

  :is(.page-home, .page-subpage) .logo-image {
    height: clamp(24px, 1.9vw, 30px);
    max-width: min(182px, calc(100vw - 1rem));
    filter: brightness(0) invert(1);
  }

  :is(.page-home, .page-subpage) .site-nav {
    position: absolute;
    left: 50%;
    right: auto;
    top: 0;
    transform: translateX(-50%);
    width: min(980px, calc(100% - 250px));
    min-height: 64px;
    padding: 0 clamp(1.4rem, 2.1vw, 2.2rem);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.88);
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
    margin: 0;
    overflow: visible;
  }



  :is(.page-home, .page-subpage) .site-nav::after {
    content: none;
  }

  :is(.page-home, .page-subpage) .nav-list {
    gap: 1.35rem;
    justify-content: center;
    white-space: nowrap;
  }

  :is(.page-home, .page-subpage) .nav-social-link {
    background: var(--color-accent);
    color: #ffffff !important;
    border: 0;
  }

  :is(.page-home, .page-subpage) .nav-social {
    margin-left: auto;
  }

  /* min-height statt mehr Polsterung: Mit 0.22rem und line-height 1 kam der
     Menuepunkt auf 23 px und blieb damit einen Pixel unter der Mindestgroesse
     von 24x24 (WCAG 2.2, 2.5.8). Die Zeile bleibt optisch, wo sie war — der
     Text steht weiterhin mittig, nur die anklickbare Flaeche waechst. */
  :is(.page-home, .page-subpage) .nav-list :is(a, .sub-nav-label) {
    padding: 0.22rem 0;
    min-height: 24px;
    display: flex;
    align-items: center;
    font-size: var(--fs-nav);
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    line-height: 1;
  }

  :is(.page-home, .page-subpage) .nav-list :is(a, .sub-nav-label)[aria-current="page"],
  :is(.page-home, .page-subpage) .nav-list :is(a, .sub-nav-label)[aria-current="location"] {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    font-weight: 500;
  }

  :is(.page-home, .page-subpage) .nav-item.has-sub > :is(a, .sub-nav-label)[aria-current="page"] + .sub-nav-toggle,
  :is(.page-home, .page-subpage) .nav-item.has-sub > :is(a, .sub-nav-label)[aria-current="location"] + .sub-nav-toggle {
    color: var(--color-accent);
  }

  :is(.page-home, .page-subpage) .sub-nav {
    top: calc(100% + 0.55rem);
    width: max-content;
    min-width: 220px;
    max-width: min(90vw, 270px);
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-s);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    backdrop-filter: none;
    z-index: 3;
  }

  :is(.page-home, .page-subpage) .sub-nav a {
    padding: 0.34rem 0;
    font-size: var(--fs-small);
    color: #000000;
    font-family: var(--font-body);
    font-weight: 400;
    border-radius: 8px;
  }

  :is(.page-home, .page-subpage) .sub-nav-toggle {
    color: #000000;
    min-width: 24px;
    min-height: 24px;
    padding: 0.45rem 0.35rem;
  }

}

@media (min-width: 960px) and (max-width: 1200px) {
  .site-nav {
    gap: 1rem;
  }

  .nav-list {
    gap: 0.7rem;
  }

  :is(.page-home, .page-subpage) .site-nav {
    width: min(980px, calc(100% - 120px));
    padding: 0 clamp(0.8rem, 1.4vw, 1.15rem);
  }

  :is(.page-home, .page-subpage) .nav-list {
    gap: 0.72rem;
  }

  :is(.page-home, .page-subpage) .nav-list :is(a, .sub-nav-label) {
    font-size: var(--fs-small);
  }

  :is(.page-home, .page-subpage) .nav-social-link {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}

@media (min-width: 960px) {
  .nav-item.has-sub:hover .sub-nav,
  .nav-item.has-sub:focus-within .sub-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 959px) {
  /* Die Leiste reicht bis unter die Statusleiste des Geräts; der Inhalt rückt
     per padding nach, damit er nicht in der Kerbe steht. */
  :is(.page-home, .page-subpage) .site-header {
    top: 0;
    padding-top: env(safe-area-inset-top);
  }

  :is(.page-home, .page-subpage) .logo-image {
    filter: none;
  }

  .nav-item.has-sub > :is(a, .sub-nav-label)::after {
    display: none;
  }
}

@media (max-width: 959px) and (hover: hover) and (pointer: fine) {
  .nav-item.has-sub:hover .sub-nav,
  .nav-item.has-sub:focus-within .sub-nav {
    display: grid;
  }

  .nav-item.has-sub:hover .sub-nav-toggle-icon {
    transform: translateY(-1px) rotate(-135deg);
  }
}

@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  /* Vorher Schwarz ohne Unterstreichung — damit wurden Verweise beim
     Zeigen unauffaelliger statt deutlicher. Jetzt einheitlich rot und
     unterstrichen, wie ueberall sonst auf der Website. */
  :is(.page-home, .page-subpage) .nav-list :is(a, .sub-nav-label):hover,
  :is(.page-home, .page-subpage) .nav-item.has-sub:hover > :is(a, .sub-nav-label) {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .sub-nav a:hover,
  :is(.page-home, .page-subpage) .sub-nav a:hover {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transform: translateX(0.28rem);
  }

  :is(.page-home, .page-subpage) .nav-item.has-sub:hover .sub-nav-toggle,
  :is(.page-home, .page-subpage) .nav-item.has-sub > :is(a, .sub-nav-label):hover + .sub-nav-toggle {
    color: var(--color-ink-muted);
  }
}

@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  :is(.page-home, .page-subpage) .nav-item.has-sub:hover > :is(a, .sub-nav-label)[aria-current="page"] + .sub-nav-toggle,
  :is(.page-home, .page-subpage) .nav-item.has-sub:hover > :is(a, .sub-nav-label)[aria-current="location"] + .sub-nav-toggle {
    color: var(--color-ink-muted);
  }

  .nav-list :is(a, .sub-nav-label)[aria-current="page"]:hover,
  .nav-list :is(a, .sub-nav-label)[aria-current="location"]:hover {
    color: #000000;
    text-decoration: none;
  }

  .nav-list a[aria-current="page"]:focus-visible,
  .nav-list a[aria-current="location"]:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  .nav-item.has-sub > :is(a, .sub-nav-label)[aria-current="page"]:hover + .sub-nav-toggle,
  .nav-item.has-sub > :is(a, .sub-nav-label)[aria-current="location"]:hover + .sub-nav-toggle {
    color: var(--color-ink-muted);
  }

  .nav-item.has-sub > a[aria-current="page"]:focus-visible + .sub-nav-toggle,
  .nav-item.has-sub > a[aria-current="location"]:focus-visible + .sub-nav-toggle {
    color: var(--color-accent);
  }
}

.page-subpage .nav-link-about:not([aria-current]) {
  color: var(--color-ink);
  text-decoration: none;
}

.page-subpage .nav-list :is(a, .sub-nav-label)[aria-current="page"],
.page-subpage .nav-list :is(a, .sub-nav-label)[aria-current="location"],
.page-subpage .nav-list .sub-nav a[aria-current="page"],
.page-subpage .nav-list .sub-nav a[aria-current="location"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-subpage .nav-list :is(a, .sub-nav-label).is-current,
.page-subpage .nav-list .sub-nav a.is-current {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-subpage .nav-item.has-sub > :is(a, .sub-nav-label).is-current + .sub-nav-toggle {
  color: var(--color-accent);
}


/* ==========================================================================
   Menü: durchgehende Glasleiste statt schwebender Karte.

   Wegentscheidung (06.08.2026)

   Vorher schwebte eine 980 px breite weiße Karte mittig über dem Inhalt —
   erst als volle Pille (999 px), dann schwach gerundet (8 px). Beides sind
   Varianten derselben Sache: ein Element, das wie ein aufgelegtes Widget
   aussieht. Genau das ist das Muster, das man seit 2021 auf jeder zweiten
   Vorlage sieht.

   Jetzt trägt die Leiste über die volle Breite, sitzt bündig an der oberen
   Kante, hat keinen Radius, keinen Schatten und keine Kontur außer einer
   Haarlinie unten. Kein Rahmen, keine Ecken, kein Objekt — eine Glasfläche,
   unter der das Foto durchzieht. Nichts bewegt sich beim Scrollen außer der
   Höhe.

   Warum kein transparentes Menü über dem Foto (die naheliegende Idee):
   nachgemessen an den Hero-Bildern liegen im Menüstreifen Leuchtdichten bis
   0,999 — helle Fensterflächen. Weiße Schrift käme dort auf 1:1. Damit sie
   4,5:1 hielte, bräuchte es einen Abdunkler von 0,56 quer über die Bildkante,
   also ein sichtbares dunkles Band im Hero. Die helle Glasfläche mit dunkler
   Schrift ist die Lösung, die auf jedem Foto trägt — dunkle Schrift kommt
   dort auf 12:1, das Markenrot auf 4,8:1.

   Der Logoplatz wandert damit aus dem Bild in die Leiste: eine Zeile, links
   die Marke, mittig die Navigation, rechts die Social-Symbole.
   ========================================================================== */
@media (min-width: 960px) {
  /* Die Leiste selbst ist wieder .site-header — nicht mehr .site-nav. */
  :is(.page-home, .page-subpage) .site-header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(150%) blur(24px);
    backdrop-filter: saturate(150%) blur(24px);
    border: 0;
    /* Die Haarlinie ist die einzige Kante, die die Leiste noch hat — sie muss
       deshalb sichtbar sein. Bei 0,07 lag sie 17 sRGB-Stufen unter der Fläche
       und verschwand fast; 0,10 gibt rund 30 Stufen und damit eine Kante, die
       man auch auf einem hellen Bildschirm sieht. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    box-shadow: none;
  }

  :is(.page-home, .page-subpage) .header-inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: min(var(--container-width), 100% - 2rem);
    max-width: none;
    margin-inline: auto;
    padding: 0;
    min-height: 74px;
    transition: min-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }

  /* Beim Scrollen wird nur die Höhe kleiner. Kein Formwechsel, kein
     Einschwenken, kein Schatten, der auftaucht — die Leiste bleibt
     dieselbe Fläche. */
  .site-header[data-scrolled="true"] .header-inner {
    min-height: 58px;
  }

  /* Das Logo steht jetzt in der Leiste, nicht mehr auf dem Foto. Damit
     entfällt die Weißfärbung, die es vorher überhaupt erst lesbar machte. */
  :is(.page-home, .page-subpage) .logo {
    display: inline-flex;
    position: static;
    left: auto;
    top: auto;
    z-index: auto;
  }

  :is(.page-home, .page-subpage) .logo-image {
    height: clamp(22px, 1.7vw, 27px);
    max-width: none;
    filter: none;
  }

  /* .site-nav ist nur noch Gliederung, keine Fläche mehr. */
  :is(.page-home, .page-subpage) .site-nav {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    flex: 1;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  /* Links rechts, nicht mittig. Eine mittige Liste müsste zwischen Logo und
     Social-Symbolen ausbalanciert werden; mit `auto`-Rändern in einem
     Flexcontainer sitzt sie dabei nie exakt in der Blattmitte, sondern je
     nach Textlänge ein Stück daneben — hier waren es 13 px. Rechtsbündig
     ist eindeutig: links die Marke, rechts die Navigation. */
  :is(.page-home, .page-subpage) .nav-list {
    margin-inline: auto 0;
    gap: clamp(1rem, 1.9vw, 1.9rem);
  }

  :is(.page-home, .page-subpage) .nav-social {
    margin-left: 0;
  }

  /* Etwas weitere Laufweite — wirkt in kleinen Graden hochwertiger. */
  :is(.page-home, .page-subpage) .nav-list :is(a, .sub-nav-label) {
    letter-spacing: 0.02em;
  }

  /* Social-Symbole: zarte Kontur statt gefülltem Kreis, füllt sich beim
     Zeigen. Vorher zogen zwei kräftig rote Punkte den Blick vom Menü ab. */
  :is(.page-home, .page-subpage) .nav-social-link,
  .nav-social-link {
    background: transparent;
    border: 1px solid rgba(212, 0, 0, 0.3);
    color: var(--color-accent) !important;
    transition: background-color 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      color 0.35s cubic-bezier(0.23, 1, 0.32, 1),
      border-color 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  }

  :is(.page-home, .page-subpage) .nav-social-link:hover,
  :is(.page-home, .page-subpage) .nav-social-link:focus-visible,
  .nav-social-link:hover,
  .nav-social-link:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-home, .page-subpage) .header-inner {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-home, .page-subpage) .site-nav,
  .nav-social-link {
    transition: none;
  }
}