/* =====================================================
   Schwebende Kopfleiste aus einzelnen Pillen und passende
   Farbe hinter der Seite (seit 08.10.2026) – einheitlich mit
   skipperfriends.de. Wird nach styles.css geladen und
   überschreibt dort die Kopfleiste.
   ===================================================== */

:root {
  --pille-glas: rgba(255, 255, 255, .78);
  --pille-rand: rgba(255, 255, 255, .6);
  --pille-schatten: 0 1px 1px rgba(0, 31, 75, .06), 0 10px 30px -12px rgba(0, 31, 75, .45);
  --pille-hoehe: 48px;
  --kopf-blau: #052c60;
}

/* Die Leiste ist nur noch ein unsichtbarer Träger über dem Inhalt */
.site-header, .site-header.scrolled {
  position: fixed; top: 0; left: 0; right: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0; box-shadow: none;
  pointer-events: none;
}
.site-header .brand, .site-header .nav-links, .site-header .nav-login, .site-header .nav-toggle { pointer-events: auto; }

/* Der Inhalt beginnt jetzt unter der schwebenden Leiste */
.hero { padding-top: calc(clamp(48px, 6vw, 84px) + var(--header-h)); }
.hero--sub { padding-top: calc(clamp(44px, 5vw, 70px) + var(--header-h)); }
/* Seiten ohne blauen Kopfbereich (Impressum): durchsichtiger Rand, so läuft die Farbe des Inhalts bis ganz nach oben */
main > :first-child:not(.hero) { border-top: var(--header-h) solid transparent; }

/* Jede Pille: milchiges Glas, feiner Lichtrand, weicher Schatten */
.site-header .brand, .site-header .nav-login, .site-header .nav-toggle {
  background: var(--pille-glas);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--pille-rand); border-radius: 999px;
  box-shadow: var(--pille-schatten);
  transition: background-color .3s var(--ease-out), color .16s var(--ease-out);
}
.site-header.scrolled .brand, .site-header.scrolled .nav-login, .site-header.scrolled .nav-toggle {
  background: rgba(255, 255, 255, .86); border-color: rgba(0, 31, 75, .09);
}
.site-header .brand { height: var(--pille-hoehe); padding: 0 16px 0 20px; }
.site-header .brand__text { gap: 3px; }
.site-header .brand__mark { width: 54px; height: 30px; }
.site-header .nav-login { height: var(--pille-hoehe); padding: 0 20px; }
.site-header .nav-toggle { width: var(--pille-hoehe); height: var(--pille-hoehe); padding: 0; }
.site-header .nav-toggle span { margin: 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .site-header .nav-login:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
}
.site-header .nav-login[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: #fff; }

@media (min-width: 861px) {
  /* Logo links am Fensterrand, Menü genau in der Mitte, Anmelden rechts am Rand */
  .site-header .nav {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    max-width: none; padding-inline: clamp(14px, 2.2vw, 32px); gap: 10px;
  }
  .site-header .brand { justify-self: start; }
  .site-header .nav-right { justify-self: end; }
  .site-header .nav-links {
    height: var(--pille-hoehe); padding: 0 6px; gap: 2px;
    background: var(--pille-glas);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid var(--pille-rand); border-radius: 999px;
    box-shadow: var(--pille-schatten);
    transition: background-color .3s var(--ease-out);
  }
  .site-header.scrolled .nav-links { background: rgba(255, 255, 255, .86); border-color: rgba(0, 31, 75, .09); }

  /* Menüpunkte: dunkelblau getönte Pille unter dem Mauszeiger, kein gelber Strich, kein Ring um die aktuelle Seite */
  .site-header .nav-links a {
    display: block; padding: 10px 16px; border-radius: 999px;
    transition: background-color .18s var(--ease-out);
  }
  .site-header .nav-links a::after { display: none; }
  .site-header .nav-links a:focus-visible { background: rgba(0, 31, 75, .16); }
  @media (hover: hover) and (pointer: fine) {
    .site-header .nav-links a:hover { background: rgba(0, 31, 75, .16); }
  }
}
/* Schmale Rechnerfenster: Menüpunkte enger, die Unterzeile im Logo entfällt */
@media (min-width: 861px) and (max-width: 1100px) {
  .site-header .nav-links a { padding: 10px 11px; }
  .site-header .brand__by { display: none; }
  .site-header .brand { padding: 0 12px 0 16px; }
  .site-header .nav-login { padding: 0 14px; }
}

@media (max-width: 860px) {
  .site-header .nav { padding-inline: 14px; }
  .site-header .nav-right { gap: 8px; }
  /* Das aufgeklappte Menü: eine schwebende weiße Karte unter den Pillen */
  .site-header .nav-links {
    inset: calc(var(--header-h) + 2px) 14px auto 14px;
    border: 1px solid rgba(0, 31, 75, .09); border-radius: 22px;
    box-shadow: var(--pille-schatten); padding: 10px 0; overflow: hidden;
  }
}
@media (max-width: 720px) {
  :root { --pille-hoehe: 44px; }
  .site-header .brand { padding: 0 10px 0 14px; }
  .site-header .nav-login { padding: 0 14px; }
}

/* Wo es eng wird, entfällt das kleine Boot im Logo: mittlere Rechnerfenster und Handy */
@media (min-width: 861px) and (max-width: 980px), (max-width: 480px) {
  .site-header .brand__mark { display: none; }
  .site-header .brand { padding: 0 16px; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header .brand, .site-header .nav-links, .site-header .nav-login, .site-header .nav-toggle {
    background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand, .site-header .nav-links, .site-header .nav-login, .site-header .nav-toggle { transition: none; }
}

/* ---------- Kein weißer Rand beim Überscrollen ----------
   Der Kopfbereich ist ein Verlauf (links heller, rechts dunkler). Hinter der Seite liegt der Mittelton,
   und der Kopfbereich läuft an seiner Oberkante genau in diesen Ton aus. Seiten ohne blauen Kopfbereich:
   rand.js misst die Farbe des obersten Inhalts. Ab der unteren Seitenhälfte gilt der Sandton des Fußbereichs. */
html { background-color: var(--kopf-farbe, var(--white)); }
html:has(.hero) { background-color: var(--kopf-farbe, var(--kopf-blau)); }
html.ist-unten, html.ist-unten:has(.hero) { background-color: var(--fuss-farbe, var(--sand)); }
.hero {
  background:
    linear-gradient(180deg, var(--kopf-blau) 0, rgba(5, 44, 96, 0) 120px),
    radial-gradient(120% 120% at 15% 0%, var(--blue-mid) 0%, var(--blue) 55%);
}