/* ============================================================
   Pro Tier — Header, Immobilien Partner Saarland
   Desktop (≥79.5rem) + Tablet quer: Grid mit Kontaktzeile/Service-Nav in
   einer Zeile, darunter Logo links + Navigation rechts.
   Tablet hoch + Smartphone: Kernel-Burger, Logo links.
   Farben ausschließlich über die IPS-Tokens in variables.css.
   ============================================================ */

/* Tiefe unter der Header-Kante: weicher Schatten in Logo-Oliv statt der fast
   unsichtbaren Kernel-Linie (1px, 5 % Schwarz). Alle Viewports. Über dem Hero
   der Startseite gelten die spezifischeren Regeln weiter unten (oben ohne
   Schatten, gescrollt Milchglas-Schatten). */
#site-header {
  /* Dezent: keine harte Kante, nur weicher Auslauf (12 %). Stellschraube = Prozentwert. */
  box-shadow: 0 0.25rem 1.25rem -0.5rem color-mix(in srgb, var(--color-bg-dark) 12%, transparent);
}

/* ⚠ Umschaltbedingung der Navigation aus dem Kernel (components/nav.css) —
   muss hier wortwörtlich stehen: Header-Grid und Nav müssen im selben Bereich
   kippen. Den Zustand über die Klasse abfragen (#site-header.nav-horizontal /
   .nav-burger), nicht über eine eigene Query. */
@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {

  #site-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "topline topline"
      "topbar  topbar"
      "brand   nav";
  }

  #site-header #contact-bar {
    border-bottom: 0.0625rem solid var(--color-border);
  }

  #site-header #contact-bar {
    grid-area: topline;

    justify-self: stretch;
    align-self: stretch;
    justify-content: flex-start;

    background: var(--color-band);

    font-size: inherit;
  }

  #site-header > .service {
    grid-area: topline;
    justify-self: end;
    align-self: center;
    background: transparent;

    padding-inline-end: var(--header-inset);
  }

  #topbar {
    grid-area: topbar;
  }

  #site-header #brand,
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
  }

  #site-header #brand    { padding-inline-start: var(--padding-page); padding-inline-end: 0; }
  #site-header #main-nav { padding-inline-start: 0; padding-inline-end: var(--header-inset); }

  #site-header #brand {
    grid-area: brand;
  }

  #site-header #main-nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: none;
  }

  #contact-bar,
  #topbar,
  #site-header > .service,
  #site-header #brand,
  #site-header #main-nav {
    order: unset;
  }

  #lang-switch > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #lang-switch > a:hover {
    opacity: 0.7;
  }
  #lang-switch > span[aria-current] {
    color: var(--color-topbar-text);
    opacity: 0.6;
  }

  #site-header .service #lang-switch {

    margin-inline-end: var(--padding-page);
  }
  #site-header .service #lang-switch > button:hover,
  #site-header .service #lang-switch > button[aria-expanded="true"] {
    background: transparent;
    border-color: transparent;
  }

  #site-header #topbar > .service > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }

  #site-header > .service > a {
    color: var(--color-text-muted);
    transition: opacity var(--transition);
  }
  #site-header #topbar > .service > a:hover,
  #site-header > .service > a:hover {
    opacity: 0.7;
  }

  #site-header.nav-horizontal #main-nav > ul > li > a {
    color: var(--color-text);
    padding-inline: var(--space-4);
    padding-block: var(--space-2);
    border-radius: var(--radius-pill);
    border-bottom: 0;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    transition: background var(--transition), color var(--transition);
  }

  #site-header.nav-horizontal #main-nav > ul > li > a:hover,
  #site-header.nav-horizontal #main-nav > ul > li:hover > a {
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--color-text);
  }

  #site-header.nav-horizontal #main-nav > ul > li.active > a,
  #site-header.nav-horizontal #main-nav > ul > li > a[aria-current="page"] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
  }

  #site-header.nav-horizontal #main-nav ul ul,
  #site-header.nav-horizontal #main-nav li.open > ul {
    background: var(--color-bg);
    border: 0.0625rem solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  #site-header.nav-horizontal #main-nav ul ul a {
    border-radius: var(--radius-lg);
  }

  #site-header.nav-horizontal #main-nav ul ul a[aria-current="page"] {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }

  #site-header.nav-horizontal #main-nav ul ul a:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding-inline-start: var(--space-3);
  }
}

/* ─── Logo und Brand-Icon ───────────────────────────────────────────────
   IPS-Logo ist ein Quer-Lockup (350×120): bleibt bis 22rem sichtbar, darunter
   tritt die Bildmarke (icon.svg) an seine Stelle. Desktop 4.5rem, Tablet 3.5rem,
   Smartphone 3rem. --header-fixed-height (variables.css) mitführen. */
#icon {
  display: none;
}

@media (min-width: 79.5rem) {
  #site-header #brand > #logo {
    height: 4.5rem;
    padding-block: var(--space-1);
  }
}

/* Optischer Randausgleich Desktop + Tablet quer: Der goldene Kreis der Bildmarke
   beginnt erst ~7px im Logo-Bild (Dachspitze davor ist fein und hell). -0.375rem setzt
   ihn nahezu bündig auf die Textkante der Kontaktzeile (-6px, Feinabstimmung 25.09.). */
@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  #site-header #brand > #logo,
  #site-header.nav-burger #brand > #logo {
    margin-inline-start: -0.375rem;
  }
}

@media (min-width: 45rem) and (max-width: 79.499rem) {
  #site-header #brand > #logo {
    height: 3.5rem;
  }
}

@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: portrait) {
  #site-header #brand > #logo {
    /* Optischer Randausgleich: Bildmarke (Kreis) bündig mit dem Menütext,
       die feine Dachspitze darf minimal überstehen. */
    margin-inline-start: calc(var(--space-4) - 0.5rem);
  }
}

#site-header #contact-bar .address span {
  font-weight: 600;
}

@media (max-width: 79.499rem) {
  #site-header #main-nav > ul > li {
    padding-inline-start: 0;
  }
}

@media (max-width: 44.999rem) {
  #site-header #brand > #logo {
    display: block;
    height: 3rem;
    margin-inline-start: calc(var(--space-4) - 0.5rem);   /* optischer Randausgleich, s. Tablet hochkant */
  }
}

@media (max-width: 21.999rem) {
  #site-header #brand > #logo {
    display: none;
  }
  #site-header #brand > #icon {
    display: block;
    height: 2.5rem;
    width: auto;
    margin-inline-start: var(--space-4);
  }
  #site-header #brand > #icon img,
  #site-header #brand > #icon svg {
    display: block;
    height: 2.5rem;
    width: auto;
  }
}

@media screen and (max-width: 79.499rem) {
  #site-header #lang-switch {
    margin-inline-end: auto;
    margin-inline-start: -.5rem;
  }
  #site-header #lang-switch > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #site-header #lang-switch > a:hover {
    opacity: 0.7;
  }
  #site-header #lang-switch > span[aria-current] {
    color: var(--color-topbar-text);
    opacity: 0.6;
  }
}

/* ─── Service-Leiste und Randabstände ─────────────────────────────────── */
#site-header > .service {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: var(--padding-page);
}

@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {
  #site-header > .service {
    padding-inline-end: var(--space-2);
  }
}

@media (min-width: 79.5rem) {

  #site-header #main-nav > ul {
    gap: var(--space-2);
  }

}

@media (max-width: 44.999rem) {
  body #site-header #contact-bar {
    display: none;
  }
}

@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: portrait) {
  /* Service-Zeile (Suche, Merkliste, Login) hell mit dunklen Icons — unter der
     dunklen Kontaktzeile, feine Linie zur weißen Logo-Zeile. */
  #site-header > .service {
    background: var(--color-band);
    border-bottom: 0.0625rem solid var(--color-border);
  }
  #site-header > .service > a {
    color: var(--color-text);
    transition: color var(--transition);
  }
  #site-header > .service > a:hover,
  #site-header > .service > a:focus-visible {
    color: var(--color-primary);
    opacity: 1;
  }
  #site-header #topbar {
    background: transparent;
  }
  body #site-header #contact-bar {
    display: flex;
    background: var(--color-topbar);
    color: var(--color-topbar-text);
  }
  body #site-header #contact-bar a {
    color: var(--color-topbar-text);
  }
  #site-header #topbar .service-social {
    display: none;
  }
}

/* ─── Schwebender Header über dem Hero (nur Startseite, nur Desktop) ─────
   Oben: dunkler Verlauf, helles Logo, helle Glas-Buttons. Gescrollt (.scrolled):
   Milchglas-Leiste, farbiges Logo, Nav im Primary-Gold. */
@media (min-width: 79.5rem) {

  body:has(#teaser-slider:not(.teaser-compact)) #site-header {
    position: fixed;
    top: var(--header-top-offset, 0);
    inset-inline: 0;
    z-index: 30;
    background: var(--glass);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: none;
    transition: background var(--transition-slow),
                backdrop-filter var(--transition-slow),
                -webkit-backdrop-filter var(--transition-slow),
                box-shadow var(--transition-slow);
  }

  body:has(#admin-bar) { --header-top-offset: 2rem; }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) {
    background: linear-gradient(180deg, var(--color-bg-dark) 0%, transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) > .service,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #topbar,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #contact-bar {
    background: transparent;
    border-color: transparent;
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #contact-bar,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #contact-bar a,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #contact-bar .address span,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #contact-bar svg,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) > .service,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) > .service > a,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) > .service svg,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li > a {
    color: var(--color-topbar-text);
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header #main-nav,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header #brand {
    background: transparent;
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li > a {
    padding-inline: var(--space-4);
    padding-block: var(--space-2);
    border-radius: var(--radius-pill);
    border-bottom: 0;
    background: hsl(0 0% 100% / 0.14);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    transition: background var(--transition-med),
                color var(--transition-med);
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li > a:hover,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li:hover > a {
    background: hsl(0 0% 100% / 0.28);
    color: var(--color-text-inverse);
    border-bottom-color: transparent;
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li.active > a,
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li > a[aria-current="page"] {

    background: color-mix(in srgb, var(--color-bg-dark) 72%, transparent);
    color: var(--color-text-inverse);
    border-bottom-color: transparent;
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #logo img {
    filter: brightness(0) invert(1);
    transition: filter var(--transition-slow);
  }

  body:has(#teaser-slider:not(.teaser-compact)) #site-header.scrolled {
    background: linear-gradient(180deg, var(--glass-heavy) 0%, var(--glass-heavy) 100%);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 0.125rem 0.5rem hsl(0 0% 0% / 0.08);
  }

  #site-header.compact #brand > #logo,
  #site-header #brand > #logo {
    transition: height var(--transition-slow);
  }
  #site-header.compact #brand > #logo {
    height: 3.5rem;
  }
}

/* ─── Dropdown als abgesetzte Karte (nur Desktop) ──────────────────────
   ::before überbrückt den Spalt, damit der Hover beim Wechsel ins Menü hält. */
@media (min-width: 79.5rem) {
  #site-header #main-nav ul ul {
    border-radius: var(--radius-lg);
    margin-top: var(--space-2);
  }

  #site-header #main-nav ul ul::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: var(--space-2);
  }
}

/* ─── Querformat-Tablet mit Burger (nav_landscape_early = false) ────────
   Zwischen 45rem und 79.5rem im Querformat steht der Burger statt der Pillen-
   Leiste (sechs Menüpunkte passen dort nicht neben das Logo). Das Header-Grid
   aus dem Querformat-Block wird dafür einspaltig: Logo links, Burger rechts,
   aufgeklapptes Menü über die volle Breite. Zustand über die Kernel-Klasse
   .nav-burger, nicht über eine eigene Query-Logik. Die Pillen-Optik hängt an
   .nav-horizontal und greift hier deshalb nicht. */
@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {
  #site-header.nav-burger {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topline"
      "topbar"
      "brand"
      "nav";
  }
  #site-header.nav-burger #brand {
    display: flex;
    align-items: center;
    width: 100%;
    padding-inline: var(--padding-page) 0;   /* rechts 0: Burger-X fluchtet mit den Unterpunkt-Pfeilen */
  }
  #site-header.nav-burger #brand > #logo {
    margin-inline: -0.375rem auto;   /* optischer Randausgleich wie Desktop */
  }
  #site-header.nav-burger #brand > #nav-toggle {
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  #site-header.nav-burger #main-nav {
    padding-inline: 0;
    justify-content: stretch;
  }
}