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