/* Eigenstaendige Navigation fuer die Unterseiten des alten Builds.
   Bewusst unter dem Praefix .dre-nav gekapselt und ohne CSS-Variablen:
   die alten Seiten bringen eigene .btn-, .brand- und --c-*-Definitionen mit,
   ein gemeinsames Stylesheet wuerde beide Seiten beschaedigen. */

.dre-nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 72px; padding-inline: 1rem;
  background: #0b1430;
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  font-family: "Source Sans 3 Variable", "Source Sans 3", system-ui, sans-serif;
  transition: background 220ms cubic-bezier(.4,0,.2,1), border-color 220ms cubic-bezier(.4,0,.2,1);
}
.dre-nav[data-solid="true"] {
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: #e2e6ef;
}

.dre-nav__brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "Fraunces Variable", Fraunces, Georgia, serif;
  /* Exakt dieselbe Skala wie --fs-h4 auf der Startseite, damit der
     Markenschriftzug bei jeder Breite gleich gross ist. */
  font-size: clamp(1.2rem, 1.3vw + 0.6rem, 1.55rem);
  white-space: nowrap;   /* keine Laufweite - Startseite hat "normal" */
  color: #fff; text-decoration: none;
}
.dre-nav[data-solid="true"] .dre-nav__brand { color: #0b1430; }
.dre-nav__brand img { width: 40px; height: 40px; }
.dre-nav__brand strong { font-weight: 700; }

.dre-nav__list { display: none; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dre-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: .75rem; border-radius: 8px;
  color: rgb(255 255 255 / 0.82); font-size: .95rem; font-weight: 500;
  text-decoration: none; transition: background 220ms, color 220ms;
}
.dre-nav__link:hover { background: rgb(255 255 255 / 0.14); color: #fff; }
.dre-nav__link[aria-current="page"] { color: #fff; font-weight: 640; }
.dre-nav[data-solid="true"] .dre-nav__link { color: #4a5470; }
.dre-nav[data-solid="true"] .dre-nav__link:hover { background: #f5f6fa; color: #0b1430; }
.dre-nav[data-solid="true"] .dre-nav__link[aria-current="page"] { color: #033eb8; }

.dre-nav__cta {
  display: none; align-items: center; justify-content: center;
  min-height: 36px; padding-inline: .9rem; border-radius: 4px;
  background: #fff; color: #0b1430;
  font-size: .9rem; font-weight: 640; text-decoration: none;
  transition: background 220ms, color 220ms;
}
.dre-nav[data-solid="true"] .dre-nav__cta { background: #0b1430; color: #fff; }
.dre-nav__cta:hover { background: #033eb8; color: #fff; }

.dre-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 999px;
  color: #fff; cursor: pointer;
}
.dre-nav[data-solid="true"] .dre-nav__toggle { color: #0b1430; }
.dre-nav__toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; }

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

.dre-nav__drawer {
  position: absolute; top: calc(100% + .5rem); right: 1rem;
  width: min(88vw, 320px); padding: 1rem;
  background: #fff; border: 1px solid #e2e6ef; border-radius: 20px;
  box-shadow: 0 16px 36px rgb(11 20 51 / 0.14);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 220ms cubic-bezier(.4,0,.2,1), transform 220ms cubic-bezier(.4,0,.2,1);
}
.dre-nav__drawer[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
.dre-nav__drawer ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.dre-nav__drawer .dre-nav__link { width: 100%; color: #4a5470; }
.dre-nav__drawer .dre-nav__link:hover { background: #f5f6fa; color: #0b1430; }
.dre-nav__drawer .dre-nav__cta {
  display: flex; width: 100%; min-height: 44px;
  background: #033eb8; color: #fff; margin-top: .5rem;
}

@media (min-width: 1024px) {
  .dre-nav { min-height: 80px; padding-inline: 2rem; }
}
/* Erst ab 1280px ausgeschrieben, wie auf der Startseite: 7 Punkte plus
   Button passen darunter nicht. */
@media (min-width: 1280px) {
  .dre-nav__list { display: flex; }
  .dre-nav__cta { display: inline-flex; }
  .dre-nav__toggle, .dre-nav__drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dre-nav, .dre-nav__drawer, .dre-nav__link, .dre-nav__cta { transition: none; }
}