/* Shared cross-page nav pill — structure and sizing live here only.
   Pages contribute colour via the custom properties below and nothing else, so the
   panel can no longer drift apart between subpages (it previously did: klima clamped
   its icons ~3 px smaller than strom/kosmos because the geometry was duplicated).

   Per-page usage:
     .site-nav { --site-nav-border: …; --site-nav-bg: …; --site-nav-fg: …;
                 --site-nav-item-bg: …; --site-nav-item-hover: …;
                 --site-nav-active-bg: …; --site-nav-active-fg: …; } */
/* Double frame: a 2px border plus a detached outer ring. Everything on these pages
   is a single hairline box, so the doubled edge marks this one as the way off the
   page rather than another control on it.
   Two constraints hold the geometry still: the padding gives back the 1px the
   border took, so the pill stays exactly as tall as the buttons beside it, and the
   ring is an outline - outlines never occupy layout space, so neither the pill nor
   the page grows. The offset stays at 1px: klima clamps .header-actions down to a
   0.2rem gap on narrow viewports, and a wider ring would crowd the button beside it
   (widening the pill instead risks a flex wrap, which would add page height). */
.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: calc(0.2rem - 1px) calc(0.34rem - 1px);
  border: 2px solid var(--site-nav-border, #d4d3cc);
  border-radius: 8px;
  outline: 1px solid var(--site-nav-ring, rgba(0, 0, 0, 0.13));
  outline-offset: 1px;
  background: var(--site-nav-bg, rgba(255, 255, 255, 0.78));
  box-shadow: var(--site-nav-shadow, 0 1px 4px rgba(0, 0, 0, 0.06));
}

/* Each link carries its own fill plus a hairline edge so the pill reads as three
   distinct buttons. The fill must contrast with the pill's own background - a white
   fill on the near-white pill is invisible, which is why the pill is tinted below. */
.site-nav a {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.72rem;
  height: 1.72rem;
  border: 1px solid var(--site-nav-item-border, rgba(0, 0, 0, 0.10));
  border-radius: 6px;
  background: var(--site-nav-item-bg, #fff);
  box-shadow: var(--site-nav-item-shadow, 0 1px 1px rgba(0, 0, 0, 0.05));
  color: var(--site-nav-fg, #555);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
}

.site-nav a:hover { background: var(--site-nav-item-hover, #ebe9e1); }

.site-nav a.active {
  border-color: var(--site-nav-active-bg, #5c7a62);
  background: var(--site-nav-active-bg, #5c7a62);
  box-shadow: none;
  color: var(--site-nav-active-fg, #fff);
}

/* Emoji render optically smaller than the text symbols beside them (⚡), so the two
   emoji icons get a small bump to match their neighbour's visual weight. */
.site-nav a[aria-label="Klima & Wetter"],
.site-nav a[aria-label="Kosmos"] { font-size: 1.16rem; }

/* Small screens only. The pill sits in .header-actions next to the "Ansicht teilen"
   button, which wraps to a second row when the header runs out of width - and a wrap
   there adds page height. Trimming the pill on phones buys that width back.
   Deliberately max-width and deliberately fixed values: the roomier desktop sizing
   above is what it is at every width past this breakpoint, unchanged by this block. */
@media (max-width: 640px) {
  .site-nav { gap: 0.24rem; padding: calc(0.14rem - 1px) calc(0.24rem - 1px); }
  .site-nav a { width: 1.48rem; height: 1.48rem; font-size: 0.9rem; }
  .site-nav a[aria-label="Klima & Wetter"],
  .site-nav a[aria-label="Kosmos"] { font-size: 1.04rem; }
}