/* Kopf der Website — Logo, Menü, Anruf-Knopf, auf dem Handy die Branchen-Zeile.
   Eigene Datei (seit 2026-10-24, Spec 2026-10-24-website-menue-branchen-design.md),
   weil auch die Rechner-Seiten ki-im-* diesen Kopf tragen und styles.css nicht
   laden. Deshalb steht hier alles unter .site-header und mit festen Farben statt
   var(--…): die Variablen aus styles.css gibt es dort nicht, und das Inline-CSS
   der Rechner-Seiten (z. B. a{color:var(--blue)}) darf den Kopf nicht umfärben.
   Das Markup schreibt backend/scripts/website_menue.py in jede Seite. */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e5e5;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .site-header .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .site-header .container { padding: 0 2rem; } }

.site-header .nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 4rem;
}
.site-header .brand { display: inline-flex; min-width: 0; flex: 0 1 auto; }
/* max-width wie img{} in styles.css: auf schmalen Schirmen gibt das Logo nach,
   nicht der Anruf-Knopf — sonst ragt er auf 390 px aus der Seite. */
.site-header .brand img { height: 60px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.site-header .site-cta { flex-shrink: 0; }

.site-header .nav-links { display: none; gap: .25rem; align-items: center; }
.site-header .nav-links a {
  padding: .5rem .75rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500; color: #5a5a5a; text-decoration: none;
  white-space: nowrap; /* bei 1024 px brach „Weitere Branchen“ auf den Rechner-Seiten um */
}
.site-header .nav-links a:hover { background: #f5f5f5; color: #0a0a0a; }
.site-header .nav-links a.active { background: #f5f5f5; color: #0a0a0a; }
@media (min-width: 1024px) { .site-header .nav-links { display: flex; } }

/* Nav-CTA: runder Telefonnummer-Button im Header (siehe CI 05) */
.site-header .site-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: linear-gradient(135deg, #1B5FBF, #2F86E8, #2FD3DA);
  color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none;
  box-shadow: 0 4px 14px -4px rgba(47,128,237,.55);
  transition: transform .12s, box-shadow .15s;
  white-space: nowrap;
}
.site-header .site-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(47,128,237,.65); color: #fff; text-decoration: none; }

/* Handy: die Branchen stehen immer sichtbar unter dem Logo — kein Menü-Knopf.
   Martin 2026-10-24: ein zugeklapptes Menü übersieht der Hotelier. */
.site-header .menue-handy {
  display: flex; justify-content: center; align-items: center; gap: .35rem;
  padding: .35rem 1rem .5rem; border-top: 1px solid #f0f0f0;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.site-header .menue-handy a { color: #1B5FBF; text-decoration: none; padding: .2rem .35rem; border-radius: .4rem; }
.site-header .menue-handy a.active { background: #f5f5f5; color: #0a0a0a; }
.site-header .menue-handy span { color: #b0b0b0; }
@media (min-width: 1024px) { .site-header .menue-handy { display: none; } }

/* Sprungziele (#uebersicht, #rueckruf, #hoerprobe …) dürfen nicht unter dem
   festen Kopf landen. 88 px wie in styles.css — die Rechner-Seiten laden
   styles.css nicht und bekommen den Wert hier; die genauer eingestellten
   Werte dort (#schritt #rueckruf, #hoerprobe) bleiben, sie sind spezifischer.
   Auf dem Handy ist der Kopf um die Branchen-Zeile höher (108 statt 64 px):
   scroll-padding legt diese Höhe auf JEDEN Sprung drauf, statt jeden einzelnen
   Wert anzufassen. tests/test_sprungziele.py misst das im Browser. */
:target { scroll-margin-top: 88px; }
@media (max-width: 1023.98px) { html { scroll-padding-top: 44px; } }