/* ============================================================
   deraneck.eu – Marken-Streifen (Cross-Brand)
   Namespace: xb-*  (kollidiert bewusst mit keiner Markenklasse)

   Absicht: Der Streifen passt sich NICHT an die jeweilige Marke an.
   Ein Element, das jeder der drei Welten zu ähneln versucht, wirkt
   wie ein kaputtes Template. Ein Element, das erkennbar eine eigene
   Ebene ist, wirkt wie Absicht. Das hier ist Chrome, nicht Marke.

   Wird auf JEDER Seite nach fonts.css und vor dem Marken-Stylesheet
   geladen. Im Konfliktfall gewinnt damit die Marke.
   ============================================================ */

:root {
  --xb-bg:     #0a0a0a;
  --xb-fg:     #f0f2f5;
  --xb-muted:  rgba(240, 242, 245, .58);
  --xb-rule:   rgba(240, 242, 245, .14);
  --xb-versicherung: #c8a44a;
  --xb-werbewal:     #00e5a0;
  --xb-skyestate:    #00d4e5;
  --xb-height: 40px;
}

/* Der Streifen landet in drei Dokumenten mit drei verschiedenen
   body-Styles und würde deren Typografie und Farbe erben.
   Deshalb hier explizit zurücksetzen. Kein `all: initial` –
   das ist zu grob und killt Vererbung, die gebraucht wird. */
.xb-bar,
.xb-bar * {
  box-sizing: border-box;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .04em;
  font-style: normal;
  text-transform: none;
  color: var(--xb-fg);
}

.xb-bar {
  /* sticky, nicht static: alle drei Marken-Navigationen sind
     `position: fixed; top: 0`. Ein statischer Streifen laege
     zwangslaeufig darunter und waere zur Haelfte verdeckt.
     sticky statt fixed, weil der Streifen so 40px Fluss belegt und
     das Dokument von selbst versetzt - ohne body-padding-Hack.
     Die Marken-Navs bekommen dafuer `top: var(--xb-height)`,
     die Heroes `min-height: calc(100vh - var(--xb-height))`,
     womit der erste Bildschirm exakt 100vh hoch bleibt. */
  position: sticky;
  top: 0;
  z-index: 1500;         /* ueber allen Marken-Navs (1000 / 1000 / 100) */
  width: 100%;
  background: var(--xb-bg);
  border-bottom: 1px solid var(--xb-rule);
}

.xb-bar__inner {
  max-width: 1200px;
  min-height: var(--xb-height);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.xb-bar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  text-decoration: none;
  white-space: nowrap;
  padding: .5rem 0;
}
.xb-bar__brand b {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
}
.xb-bar__brand span {
  color: var(--xb-muted);
  font-weight: 400;
  font-size: 13px;
}
.xb-bar__brand:hover b,
.xb-bar__brand:hover span { color: #fff; }

.xb-bar__nav {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.xb-bar__link {
  display: inline-block;
  padding: .55rem .7rem;
  text-decoration: none;
  color: var(--xb-fg);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.xb-bar__link:hover,
.xb-bar__link:focus-visible {
  background: rgba(255, 255, 255, .06);
}
.xb-bar__link:focus-visible {
  outline: 2px solid var(--xb-fg);
  outline-offset: -2px;
}

/* Akzentfarben aus hub.css übernommen (dort schon auf den Service-Cards
   in Gebrauch) – echte Kontinuität statt eines neu erfundenen Systems. */
.xb-bar__link--versicherung:hover { border-bottom-color: var(--xb-versicherung); }
.xb-bar__link--werbewal:hover     { border-bottom-color: var(--xb-werbewal); }
.xb-bar__link--skyestate:hover    { border-bottom-color: var(--xb-skyestate); }

/* Der aktuelle Bereich wird ZURÜCKGENOMMEN, nicht hervorgehoben.
   Man ist schon da; ihn hervorzuheben lädt zum sinnlosen Klick ein. */
.xb-bar__link[aria-current="page"] {
  color: var(--xb-muted);
  cursor: default;
  pointer-events: none;
}
.xb-bar__link--versicherung[aria-current="page"] { border-bottom-color: var(--xb-versicherung); }
.xb-bar__link--werbewal[aria-current="page"]     { border-bottom-color: var(--xb-werbewal); }

.xb-bar__ext {
  margin-left: .3em;
  font-size: 11px;
  color: var(--xb-muted);
}

/* Rechts-Zeile im Footer, ebenfalls markenneutral */
.xb-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1rem;
  padding: 1rem 1.5rem;
  background: var(--xb-bg);
  border-top: 1px solid var(--xb-rule);
}
.xb-legal a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--xb-muted);
  text-decoration: none;
}
.xb-legal a:hover,
.xb-legal a:focus-visible { color: var(--xb-fg); text-decoration: underline; }
.xb-legal span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--xb-muted);
}

@media (max-width: 640px) {
  :root { --xb-height: 36px; }
  .xb-bar__inner {
    padding: 0 1rem;
    gap: .5rem;
  }
  .xb-bar__brand span { display: none; }   /* nur "Till" auf schmalen Viewports */
  .xb-bar__link { padding: .5rem .45rem; }
  .xb-bar__link,
  .xb-bar__brand b,
  .xb-bar__brand span { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .xb-bar__link { transition: none; }
}