/* ============================================================
   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: bündig mit Brand/Nav */
  #site-header > .service,
  #site-header #topbar .service {
    padding-inline: 0;
  }
}


/* 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;
  }

}