/* ============================================================
   Service Navigation — Quick-access icons (Search, Favorites, Login)
   HTML: <nav class="service"> > a[title] > svg
   ============================================================ */

.service {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
}

.service a {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.service a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Favorites counter badge */
.fav-link {
  position: relative;
}

#fav-count {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  color: var(--color-text-inverse);;
  background: var(--color-heart);
  border-radius: 50%;
}

#fav-count[hidden] {
  display: none;
}

/* Such-Historie Counter-Badge — analog #fav-count, am Search-Icon. */
.search-link {
  position: relative;
}

#search-history-count {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-radius: 50%;
}

#search-history-count[hidden] {
  display: none;
}

/* Auth state toggle — controlled via body[data-logged-in] */
.service .auth-only  { display: none; }
body[data-logged-in] .service .guest-only { display: none; }
body[data-logged-in] .service .auth-only  { display: flex; }

/* Social-Mirror — gleicher Inhalt wie in der ContactBar (Facebook/Instagram).
   Default versteckt: Desktop + Tablet-Landscape zeigen die ContactBar selbst,
   da wäre eine Wiederholung in der service-nav redundant. Wenn die ContactBar
   per CSS ausgeblendet ist (Mobile + Tablet-Portrait, siehe 04-layout.css),
   springt der Mirror ein. Gap identisch zum umgebenden `.service` (var(--space-4)),
   damit die Social-Icons visuell denselben Rhythmus haben wie die anderen
   Service-Icons (Search, Favorites, Login). */
.service-social {
  display: none;
  align-items: center;
  gap: var(--space-4);
}

/* Tap-Target-Mindestmass 24x24 (WCAG 2.2 AA / Lighthouse). SVG ist 20px,
   Padding bringt die Hit-Area auf 24px ohne die Service-Nav-Hoehe zu sprengen. */
.service-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  color: inherit;
  transition: color var(--transition);
}

.service-social a:hover {
  color: var(--color-primary);
}

@media screen and (max-width: 44.999rem),
       screen and (min-width: 45rem) and (max-width: 79.499rem) and (orientation: portrait) {
  .service .service-social {
    display: inline-flex;
  }
}

/* --- Tier pro, Desktop: Serviceleiste mit kleinem Abstand zum rechten Rand (1rem) ---
   Kern-Anfrage Topbar-Randabstand (29.09.2026, web4674): Die Pro-Vorlage (html/assets/css/tier/pro/header.css) legt
   die Leiste über die volle Breite, ohne Innenabstand — das letzte Icon stand am Viewport-Rand. Soll (Nutzer-
   entscheidung 29.09.2026): ca. 0,75–1rem zum Rand, NICHT an der Nav-Kante (--header-inset rückte die Icons auf
   breiten Fenstern in die Bildmitte). --space-4 = derselbe Abstand wie am Handy zum Burger (components/header.css).
   Bewusst HIER (tier-unabhängig geladen, gescoped über html[data-tier]) statt in der Tier-Vorlage: die liegt als
   Kopie bei jedem Kunden, eine Korrektur dort erreichte die bestehenden nicht.
   Media-Query wortgleich zur Nav-Umschaltbedingung der Pro-Vorlage. */
@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  /* Leiste direkt im Header (1 Sprache / 6+ im Dropdown) — hier war der Abstand 0 (gemeldeter Fall). */
  [data-tier="pro"] #site-header > .service {
    padding-inline-end: var(--space-4);
  }
  /* Leiste im #topbar-Wrapper (2–5 Sprachen): der Wrapper setzt die Kante (sonst doppelt); links bleibt
     --padding-page (bündig mit dem Logo). */
  [data-tier="pro"] #site-header #topbar {
    padding-inline: var(--padding-page) var(--space-4);
  }
  /* Dropdown-Modus (6+ Sprachen): #lang-switch ist das LETZTE Element der Leiste und bringt eigenen
     margin-inline-end mit — sonst doppelter Abstand. Die Kante setzt jetzt die Leiste. */
  [data-tier="pro"] #site-header .service > #lang-switch:last-child {
    margin-inline-end: 0;
  }
}