/* =====================================================
   Schwebende Kopfleiste aus einzelnen Pillen und passende
   Farbe hinter der Seite (seit 08.10.2026). 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;
}

/* 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;
  height: var(--header-h);
  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 .lang-toggle, .site-header .nav-toggle { pointer-events: auto; }

/* Der Inhalt beginnt jetzt unter der schwebenden Leiste */
.hero { padding-top: calc(clamp(40px, 4.6vw, 62px) + var(--header-h)); }
/* Seiten ohne Kopfbild (Impressum, Datenschutz): durchsichtiger Rand, so läuft die Farbe des Inhalts bis ganz nach oben */
html:not(:has(.hero)) .site-header ~ main { border-top: var(--header-h) solid transparent; }

/* Jede Pille: milchiges Glas, feiner Lichtrand, weicher Schatten */
.site-header .brand, .site-header .lang-toggle, .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);
}
.site-header.scrolled .brand, .site-header.scrolled .lang-toggle, .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 20px 0 18px; }
.site-header .brand img { height: 26px; }
.site-header .lang-toggle { height: var(--pille-hoehe); padding: 5px; }
.site-header .lang-toggle a { height: 100%; padding: 0 14px; }
.site-header .nav-toggle { width: var(--pille-hoehe); height: var(--pille-hoehe); padding: 0; }
.site-header .nav-toggle span { margin: 0 auto; }

@media (min-width: 721px) {
  /* Logo links am Fensterrand, Menü genau in der Mitte, Sprache rechts am Rand */
  .site-header .nav {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    max-width: none; padding-inline: clamp(16px, 2.2vw, 32px);
  }
  .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: 4px;
    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: statt des gelben Strichs eine dunkelblau getönte Pille unter dem Mauszeiger,
     wie auf titus-hildebrand.de, nur eine Spur kräftiger. Die aktuelle Seite wird nicht eigens umrandet. */
  .site-header .nav-links a {
    display: block; padding: 10px 18px; 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); }
  }
}

@media (max-width: 720px) {
  .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;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header .brand, .site-header .nav-links, .site-header .lang-toggle, .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 .lang-toggle, .site-header .nav-toggle { transition: none; }
}

/* ---------- Kein weißer Rand beim Überscrollen ----------
   Seiten mit dunkelblauem Kopfbereich: Dunkelblau hinter der Seite.
   Andere Seiten: rand.js misst die Farbe des obersten Inhalts (Impressum dunkelblau, App-Datenschutzseiten weiß).
   In der unteren Seitenhälfte stellt rand.js auf die Farbe des Fußbereichs um. */
html { background-color: var(--kopf-farbe, var(--white)); }
/* Der Kopfbereich ist ein Verlauf (links heller, rechts dunkler). Hinter der Seite liegt deshalb der Mittelton,
   und der Kopfbereich läuft an seiner Oberkante genau in diesen Ton aus: Beim Überscrollen gibt es keine Kante. */
:root { --kopf-blau: #052c60; }
html:has(.hero) { background-color: var(--kopf-farbe, var(--kopf-blau)); }
.hero:not(.hero--photo) {
  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%);
}
html.ist-unten, html.ist-unten:has(.hero) { background-color: var(--fuss-farbe, var(--sand)); }