/* Kopf: liegt ohne eigene Fläche über dem Anfang der Seite (Hero oder Band, beide Graphit), deshalb
   Schrift in Weiß. Kein Balken, kein Schatten. Menü in kleinen Versalien mit weitem Laufabstand, feine Linie unter dem aktiven Punkt,
   Knopf als schmaler Umriss. Ohne JavaScript ist das Menü auf dem Handy über no-js.css sichtbar. */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 28px 0;
}
:root { --header-space: 112px; }
.site-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  border: 0; background: transparent;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle-bar {
  width: 24px; height: 1.5px; background: var(--ink-on-brand); position: relative; display: block;
}
.nav-toggle-bar::before, .nav-toggle-bar::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 1.5px; background: var(--ink-on-brand);
}
.nav-toggle-bar::before { top: -8px; }
.nav-toggle-bar::after { top: 8px; }

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 44px; flex: 1; }
.site-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; max-width: none; }
.site-nav-list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--on-graphite-muted);
  text-decoration: none;
  transition: color var(--ease-out) 150ms;
}
.site-nav-list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ease-out) 220ms;
}
.site-nav-list a:hover { color: var(--ink-on-brand); text-decoration: none; }
.site-nav-list a:hover::after { transform: scaleX(1); }
.site-nav-list a[aria-current] { color: var(--ink-on-brand); }
.site-nav-list a[aria-current]::after { transform: scaleX(1); background: var(--brand-red); height: 2px; }
.site-nav-actions { display: flex; align-items: center; gap: 14px; }
.site-phone { display: none; }
.btn-outline {
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-on-brand);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
}
.btn-outline:hover { border-color: var(--brand-red); color: var(--brand-red); text-decoration: none; }

@media (max-width: 1023px) {
  .site-header { padding: 20px 0; }
  :root { --header-space: 88px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; }
  .site-nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 12px;
    padding: 20px 24px 24px;
    background: var(--graphite);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
  }
  .site-nav-list { flex-direction: column; gap: 4px; }
  .site-nav-list a { display: block; padding: 12px 0; font-size: 17px; }
  .site-nav-list a::after { right: auto; width: 32px; }
  .site-nav-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .site-phone { display: block; text-align: center; padding: 6px 0; font-weight: 600; color: var(--on-graphite-muted); }
  .site-nav-actions .btn { width: 100%; }
}

/* Fuß: Graphit wie Kopf und Band der Seiten (Marc, 11.09.2026) */
.site-footer {
  background: var(--graphite);
  color: var(--on-graphite-soft);
  padding: 56px 0 48px;
  margin-top: 0;
}
/* Dasselbe Licht wie im Kopf der Startseite, damit die Fläche nicht schwarz wirkt (Marc, 11.09.2026) */
.site-footer { position: relative; overflow: hidden; }
.site-footer .glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 62vw; height: 62vw;
  max-width: 980px; max-height: 980px;
  transform: translate(-50%, -50%);
  background: url("../img/glow.png") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.site-footer-inner { position: relative; z-index: 1; }
.site-footer a { color: var(--ink-on-brand); }
.site-footer a:hover { color: var(--brand-red); }
.site-footer-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .site-footer-inner { grid-template-columns: 1.2fr 1fr auto; align-items: start; }
}
.site-brand-footer { display: inline-block; margin-bottom: 16px; }
.site-brand-footer img { height: 36px; width: auto; display: block; }
.site-brand-footer:hover { opacity: .85; }
.site-footer p { margin: 0 0 12px; }
.site-footer-legal { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }

/* Flaches Band als Kopf der Unterseiten, Graphit wie der Kopf der Startseite */
.page-head { background: var(--graphite); color: var(--ink-on-brand); padding: calc(var(--header-space) + 32px) 0 56px; }
.page-head h1 { color: var(--ink-on-brand); }
/* Produktseiten: die Wortmarke als Überschrift (Bild in der h1, Alt-Text trägt den Titel) */
.page-head-wordmark img { height: clamp(44px, 5vw, 68px); width: auto; display: block; }
.page-head p { font-size: 19px; margin: 12px 0 0; color: var(--on-graphite-soft); max-width: 60ch; }