/* ============================================================
   Brand — Logo + Icon + Nav Toggle (inside #site-header)
   HTML: <div id="brand"> > #icon + #logo + #nav-toggle
   ============================================================ */

/* --- Icon (favicon / small brand mark) --- */

#icon {
  flex-shrink: 0;
  width: var(--header-height);
  height: var(--header-height);
}

#icon a {
  display: block;
  height: 100%;
}

#icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Logo (full wordmark) --- */

#logo {
  flex: 1;
  min-width: 0;
  height: var(--header-height);
  overflow: hidden;
}

#logo a {
  display: block;
  height: 100%;
}

#logo picture,
#logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* --- Desktop: prominentes Logo (mehr Höhe als var(--header-height)) --- */

@media screen and (min-width: 79.5rem) {
  #icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  #logo {
    height: 3.5rem;
  }
}

/* --- Mobile + Tablet: smaller brand --- */

@media screen and (max-width: 79.499rem) {
  #icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  #logo {
    height: 2.5rem;
  }
}

/* ============================================================
   MOBILE + TABLET (< 79.5rem) — alle Sub-Desktop-Viewports
   volle Breite, Brand + Burger.
   Konsolidiert aus den 3 Tier-Files (default/pro/basic). Tier-Files
   behalten nur noch ihre Optik-spezifischen Anpassungen (Logo hide,
   Topbar-Layout etc.). */

@media (max-width: 79.499rem) {

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

  /* Logo links-bündig, Burger rechts-bündig (overrides 04-layout.css).
     Logo etwas weniger Einrückung (--space-2 = 0.5rem) als Nav-Text
     (--space-4 = 1rem) → Logo wirkt am Rand verankert, Nav-Text hat
     visuell sichtbaren Atemabstand. */
  #site-header #brand > :first-child {
    margin-inline-start: var(--space-4);
  }
  #site-header #brand > :last-child {
    margin-inline-end: var(--space-4);
  }

  /* Service-Icons: rechte Kante = Burger (#brand > :last-child hat margin-inline-end: var(--space-4)), in allen
     Tiers (Kern-Anfrage Topbar-Randabstand, 29.09.2026). Zwei Aufbauten:
     - Leiste direkt im Header (1 Sprache / 6+ im Dropdown): die Leiste setzt die Kante — vorher 0, das letzte
       Icon saß am Viewport-Rand.
     - Leiste im #topbar-Wrapper (2–5 Sprachen): der Wrapper setzt sie (sonst doppelt) — vorher --padding-page,
       8px weiter innen als der Burger. Links fluchtet der Sprachumschalter so mit dem Logo. */
  #site-header > .service {
    padding-inline: 0 var(--space-4);
  }
  #site-header #topbar .service {
    padding-inline: 0;
  }
  #site-header #topbar {
    padding-inline: var(--space-4);
  }
}


/* Tablet-Landscape: nur Icon, kein volles Logo */
@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {

  #site-header #brand > :first-child {
    margin-inline-start:0;
  }

}