/* site-nav.css: die eine Navigation für alle Unterseiten von werefine.de.
   Quelle der Optik ist die Startseite (Website/index.html, Glas-Pille oben).
   Markup und Einhängen übernimmt tools/site_nav.py, Verhalten js/site-nav.js.
   Alle Klassen tragen das Präfix sn-, damit alte seitenspezifische nav-Regeln
   (.nav-links, .nav-cta, .nav-hamburger ...) nichts mehr verbiegen. Farben und
   Schriften stehen als feste Werte hier, nicht als Seitenvariablen, weil jede
   Seite --text, --muted und --mono anders belegt. */

nav.site-nav, nav.site-nav *, nav.site-nav *::before, nav.site-nav *::after { box-sizing: border-box; }

nav.site-nav {
  position: fixed; top: 18px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.8rem;
  margin: 0; padding: 0.7rem 0.7rem 0.7rem 1.4rem;
  width: calc(100% - 36px); max-width: 1400px; height: auto; min-height: 0;
  background: linear-gradient(155deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 40%, rgba(255,255,255,.05) 100%), rgba(8,11,14,.86);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 99px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -30px 50px -32px rgba(255,255,255,.05), 0 18px 48px -22px rgba(0,0,0,.65);
  opacity: 1; overflow: visible; float: none; filter: none;
  color: #dde8f0; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 400;
  line-height: 1.6; letter-spacing: normal; text-transform: none; text-align: left;
}

nav.site-nav .sn-logo { display: flex; align-items: baseline; margin: 0; padding: 0; text-decoration: none; opacity: 1; }
nav.site-nav .sn-logo:hover { opacity: 1; }
nav.site-nav .sn-logo .we { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 1.7rem; color: #2dffa0; letter-spacing: -0.03em; line-height: 1; text-transform: none; }
nav.site-nav .sn-logo .ref { font-family: 'Syne', sans-serif; font-style: normal; font-weight: 700; font-size: 1rem; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; align-self: center; margin-left: 0.1rem; line-height: 1.6; }

nav.site-nav .sn-links {
  display: flex; gap: 1.6rem; list-style: none; flex-wrap: nowrap; margin: 0; padding: 0;
  position: absolute; left: 50%; transform: translateX(-50%);
}
nav.site-nav .sn-links li { margin: 0; padding: 0; list-style: none; border: 0; }
nav.site-nav .sn-links a {
  font-family: 'Space Mono', monospace; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.16em; line-height: 1.6;
  text-transform: uppercase; color: #b6c6d4; text-decoration: none; white-space: nowrap; opacity: 1;
  transition: color 0.2s;
}
nav.site-nav .sn-links a:hover { color: #dde8f0; opacity: 1; }
nav.site-nav .sn-links a[aria-current="page"] { color: #fff; }
nav.site-nav .sn-links li.sn-li-lang { display: none; }

nav.site-nav .sn-right { display: flex; align-items: center; gap: 0.8rem; margin: 0; padding: 0; }

nav.site-nav .sn-lang {
  font-family: 'Space Mono', monospace; font-weight: 400; font-size: 0.66rem; letter-spacing: 0.22em; line-height: normal; text-transform: uppercase;
  color: #90aec8; background: transparent; border: 1px solid #1b2633;
  margin: 0; padding: 0.4rem 0.8rem; border-radius: 99px; cursor: pointer; opacity: 1;
  -webkit-appearance: none; appearance: none;
  transition: color 0.2s, border-color 0.2s;
}
nav.site-nav .sn-lang:hover { color: #dde8f0; border-color: #3a4f60; }

nav.site-nav .sn-cta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 190px;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.6; text-transform: uppercase;
  color: #080b0e;
  background: linear-gradient(155deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.10) 100%), #2dffa0;
  margin: 0; padding: 0.65rem 1.2rem; border-radius: 99px; border: 1px solid rgba(255,255,255,.22);
  text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -10px rgba(45,255,160,.4);
  transition: transform 0.25s, box-shadow 0.25s;
}
nav.site-nav .sn-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -10px rgba(45,255,160,.5); opacity: 0.82; }
nav.site-nav .sn-cta-s { display: none; }

nav.site-nav .sn-burger { display: none; position: relative; width: 44px; height: 44px; margin: 0; padding: 0; background: none; border: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
nav.site-nav .sn-burger span { position: absolute; left: 11px; width: 22px; height: 2px; background: #dde8f0; border-radius: 2px; transition: top 0.25s ease, transform 0.25s ease, opacity 0.15s ease; }
nav.site-nav .sn-burger span:nth-child(1) { top: 16px; }
nav.site-nav .sn-burger span:nth-child(2) { top: 22px; }
nav.site-nav .sn-burger span:nth-child(3) { top: 28px; }
nav.site-nav .sn-burger.open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
nav.site-nav .sn-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
nav.site-nav .sn-burger.open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

nav.site-nav a:focus-visible, nav.site-nav button:focus-visible { outline: 2px solid #2dffa0; outline-offset: 3px; }

/* Früh zu Hamburger zusammenklappen: bei sechs Punkten braucht die Zeile 1200 px, sonst stößt News an den Sprachknopf */
@media (max-width: 1200px) {
  nav.site-nav { padding: 1rem 1.2rem; }
  nav.site-nav .sn-burger { display: flex; }
  nav.site-nav .sn-cta { min-width: 112px; font-size: 0.6rem; padding: 0.8rem 0.9rem; letter-spacing: 0.05em; }
  nav.site-nav .sn-lang { display: none; }
  nav.site-nav .sn-links {
    display: none;
    position: fixed; top: 76px; left: 12px; right: 12px;
    background-color: #080b0e;
    background-image: linear-gradient(155deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.018) 40%, rgba(255,255,255,.05) 100%);
    -webkit-backdrop-filter: blur(34px) saturate(200%); backdrop-filter: blur(34px) saturate(200%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 60px -22px rgba(0,0,0,.7);
    flex-direction: column; gap: 0; padding: 0.6rem 0;
    z-index: 99;
    transform-origin: top right; transform: translateY(-8px) scale(.98); opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
  }
  nav.site-nav .sn-links.open { display: flex; transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  nav.site-nav .sn-links li { border-bottom: 1px solid rgba(255,255,255,.06); }
  nav.site-nav .sn-links li:last-child { border-bottom: none; }
  nav.site-nav .sn-links li.sn-li-lang { display: block; border-top: 1px solid rgba(255,255,255,.10); padding: 0.85rem 1.5rem; }
  nav.site-nav .sn-links a { display: block; padding: 1rem 1.5rem; font-size: 0.78rem; width: 100%; text-align: left; background: none; border: none; color: #dde8f0; letter-spacing: 0.16em; cursor: pointer; transition: color .2s, background .2s; }
  nav.site-nav .sn-links a:hover, nav.site-nav .sn-links a:active { color: #2dffa0; background: rgba(45,255,160,.06); }
  nav.site-nav .sn-links a[aria-current="page"] { color: #2dffa0; }
  nav.site-nav .sn-lang-m {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; padding: 0.55rem 1rem; min-height: 44px; font-size: 0.7rem;
    background: transparent; border: 1px solid #2dffa0;
    color: #2dffa0; font-family: 'Space Mono', monospace; line-height: normal;
    letter-spacing: 0.12em; text-transform: uppercase;
    cursor: pointer; border-radius: 4px;
    -webkit-appearance: none; appearance: none;
    transition: background 0.2s, color 0.2s;
  }
  nav.site-nav .sn-lang-m:hover { background: #2dffa0; color: #080b0e; }
}

@media (max-width: 760px) {
  nav.site-nav .sn-cta { min-height: 44px; }
  nav.site-nav .sn-cta-l { display: none; }
  nav.site-nav .sn-cta-s { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  nav.site-nav, nav.site-nav * { transition: none !important; }
}

/* ─── Inhaltsbreite der Unterseiten (Klasse sn-wide am body, setzt tools/site_nav.py) ───
   Rahmen wie auf der Startseite: 1400 px, 3 rem Rand. Fließtext behält eine eigene,
   lesbare Zeilenlänge (.lead, Artikelspalte 900 px, Rechtstexte 920 px). Der Rand wird
   nur am Desktop gesetzt, am Telefon gelten weiter die Werte der jeweiligen Seite. */
body.sn-wide > main,
body.sn-wide .page-header,
body.sn-wide .partner-wrap,
body.sn-wide .section-wrap,
body.sn-wide .divider-wrap,
body.sn-wide > .news-head,
body.sn-wide > .news-wrap,
body.sn-wide > .related { max-width: 1400px; }
body.sn-wide .article-wrap { max-width: 900px; }
body.sn-wide .page-wrap { max-width: 920px; }
body.sn-wide .page-wrap h1 { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 769px) {
  body.sn-wide > main,
  body.sn-wide > .news-head,
  body.sn-wide > .news-wrap,
  body.sn-wide > .related { padding-left: 3rem; padding-right: 3rem; }
}