/* ============================================================
   SVARTLIND · ONE HEADER SYSTEM
   HEADER CORE · 2026-09-27

   EIN Header.
   EINE Geometrie.
   DREI feste Zonen:

     LEFT   = Brand
     CENTER = kontextuelle Hauptnavigation
     RIGHT  = Sprache / Aktionen

   Seiten ändern Inhalt.
   Welten ändern Material.
   PARIS verändert Zustand.

   KEINE Weltfarben in dieser Datei.
   ============================================================ */


/* ------------------------------------------------------------
   CONTRACT
   ------------------------------------------------------------ */

.sl-header {
  --sl-header-max:
    1320px;

  --sl-header-side:
    16px;

  --sl-header-top:
    16px;

  --sl-header-radius:
    22px;

  --sl-header-gap:
    28px;

  --sl-header-control-height:
    38px;

  position:
    sticky;

  top:
    0;

  z-index:
    50;

  width:
    min(
      var(--sl-header-max),
      calc(
        100%
        - (var(--sl-header-side) * 2)
      )
    );

  margin:
    var(--sl-header-top)
    auto
    0;

  padding:
    12px
    14px
    12px
    18px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    var(--sl-header-gap);

  border-radius:
    var(--sl-header-radius);
}


/* ------------------------------------------------------------
   THREE PERMANENT ZONES
   ------------------------------------------------------------ */

.sl-header__left,
.sl-header__center,
.sl-header__right {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;
}


.sl-header__left {
  justify-content:
    flex-start;
}


.sl-header__center {
  justify-content:
    center;
}


.sl-header__right {
  justify-content:
    flex-end;
}


/* ------------------------------------------------------------
   BRAND CONTRACT
   ------------------------------------------------------------ */

.sl-header__brand {
  display:
    inline-flex;

  align-items:
    center;

  min-width:
    0;

  text-decoration:
    none;
}


.sl-header__brand-logo {
  display:
    block;

  height:
    auto;
}


.sl-header__brand-line {
  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   NAV CONTRACT
   ------------------------------------------------------------ */

.sl-header__nav {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;

  gap:
    8px;
}


.sl-header__control {
  min-height:
    var(--sl-header-control-height);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  white-space:
    nowrap;

  border-radius:
    999px;
}


/* ------------------------------------------------------------
   INTERACTION CONTRACT
   ------------------------------------------------------------ */

.sl-header a {
  text-decoration:
    none;
}


.sl-header a,
.sl-header button {
  -webkit-tap-highlight-color:
    transparent;
}


.sl-header button {
  font:
    inherit;
}


.sl-header a:focus-visible,
.sl-header button:focus-visible {
  outline:
    2px solid currentColor;

  outline-offset:
    2px;
}


/* ------------------------------------------------------------
   NARROW

   Immer dieselbe Regel:
   Mittelblock verschwindet,
   Brand und Actions bleiben.
   ------------------------------------------------------------ */

@media (max-width:1000px) {

  .sl-header {
    grid-template-columns:
      1fr
      auto;

    gap:
      12px;
  }


  .sl-header__center {
    display:
      none;
  }


  .sl-header__right {
    grid-column:
      2;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:680px) {

  .sl-header {
    --sl-header-side:
      10px;

    --sl-header-top:
      10px;

    --sl-header-radius:
      18px;

    --sl-header-control-height:
      36px;

    padding:
      8px
      10px;
  }

}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce) {

  .sl-header *,
  .sl-header *::before,
  .sl-header *::after {
    scroll-behavior:
      auto !important;
  }

}


/* ============================================================
   ONE HEADER · CONTENT GEOMETRY
   2026-09-27

   Gemeinsame Maße für:
   - Brand
   - Nav Controls
   - Language
   - Actions
   - Dropdown Menu

   Gilt in LIND und SVART identisch.
   ============================================================ */


/* ------------------------------------------------------------
   BRAND
   ------------------------------------------------------------ */

.sl-header__brand {
  gap:
    12px;
}


.sl-header__brand-logo {
  width:
    96px;

  max-width:
    100%;
}


.sl-header__brand-line {
  display:
    inline-block;

  margin:
    0;

  padding-left:
    11px;

  border-left:
    1px solid currentColor;

  opacity:
    .58;

  font-size:
    .58rem;

  line-height:
    1.2;

  letter-spacing:
    .13em;
}


/* ------------------------------------------------------------
   CENTER NAV
   ------------------------------------------------------------ */

.sl-header__nav
.sl-glass-control {
  padding:
    9px
    12px;

  font-size:
    .88rem;

  line-height:
    1;

  font-weight:
    500;
}


/* ------------------------------------------------------------
   RIGHT ACTIONS
   ------------------------------------------------------------ */

.sl-header__right {
  gap:
    9px;
}


.sl-header__action {
  height:
    var(--sl-header-control-height);

  padding:
    0
    16px;

  font-size:
    .84rem;

  line-height:
    1;

  font-weight:
    750;
}


/* ------------------------------------------------------------
   LANGUAGE
   ------------------------------------------------------------ */

.sl-header__dropdown {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;
}


.sl-header__language {
  appearance:
    none;

  height:
    var(--sl-header-control-height);

  min-width:
    58px;

  padding:
    0
    11px;

  gap:
    6px;

  cursor:
    pointer;
}


.sl-header__language-code {
  line-height:
    1;
}


.sl-header__chevron {
  opacity:
    .62;

  font-size:
    .62rem;
}


/* ------------------------------------------------------------
   DROPDOWN MENU
   ------------------------------------------------------------ */

.sl-header__menu {
  position:
    absolute;

  top:
    calc(100% + 8px);

  right:
    0;

  z-index:
    100;

  min-width:
    164px;

  padding:
    6px;

  border:
    1px solid
    rgba(22,24,23,.10);

  border-radius:
    15px;

  background:
    rgba(250,249,246,.96);

  -webkit-backdrop-filter:
    blur(18px);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 16px 42px
    rgba(25,30,27,.12);
}


.sl-header[data-world="svart"]
.sl-header__menu {
  color:
    #e9f2ec;

  border-color:
    rgba(44,218,133,.14);

  background:
    rgba(4,12,14,.96);

  box-shadow:
    0 18px 46px
    rgba(0,0,0,.32);
}


.sl-header__menu[hidden] {
  display:
    none !important;
}


.sl-header__menu a {
  display:
    flex;

  align-items:
    center;

  min-height:
    34px;

  padding:
    7px
    10px;

  border-radius:
    10px;

  font-size:
    .76rem;

  text-decoration:
    none;
}


.sl-header__menu a:hover,
.sl-header__menu a:focus-visible {
  background:
    rgba(22,24,23,.06);
}


.sl-header[data-world="svart"]
.sl-header__menu a:hover,

.sl-header[data-world="svart"]
.sl-header__menu a:focus-visible {
  background:
    rgba(82,229,151,.08);
}


/* ------------------------------------------------------------
   MOBILE BRAND
   ------------------------------------------------------------ */

@media (max-width:680px) {

  .sl-header__brand-logo {
    width:
      80px;
  }


  .sl-header__brand-line {
    display:
      none;
  }


  .sl-header__right {
    gap:
      6px;
  }


  .sl-header__language {
    min-width:
      44px;

    padding:
      0
      9px;
  }


  .sl-header__chevron {
    display:
      none;
  }


  .sl-header__menu {
    right:
      -4px;
  }

}


/* ============================================================
   ONE HEADER · UNIVERSAL AXIS LOCK
   2026-09-27

   LEFT und RIGHT besitzen gleichwertige Raumspalten.
   CENTER bleibt dadurch mathematisch auf der Seitenmitte.

   Das ist ab jetzt der verbindliche Header-Vertrag.
   ============================================================ */

.sl-header {
  grid-template-columns:
    minmax(0, 1fr)
    auto
    minmax(0, 1fr);
}


/*
 * LEFT / RIGHT dürfen ihren Inhalt nicht künstlich verbreitern.
 */

.sl-header__left {
  justify-self:
    stretch;
}


.sl-header__right {
  justify-self:
    stretch;
}


/*
 * CENTER besitzt nur die Breite seines tatsächlichen Inhalts.
 */

.sl-header__center {
  justify-self:
    center;
}


/* ============================================================
   ONE HEADER · VIEWPORT AXIS LOCK
   2026-09-27

   Seiten mit und ohne vertikale Scrollbar müssen dieselbe
   optische Mittelachse besitzen.

   both-edges reserviert den Scrollbarraum symmetrisch.
   Auf Systemen mit Overlay-Scrollbars entsteht kein Nachteil.
   ============================================================ */

@supports (scrollbar-gutter: stable) {

  html {
    scrollbar-gutter:
      stable
      both-edges;
  }

}