/* ==========================================================================
   Navigation Variante B — Prototyp-Styles
   Farben gemäss Brand Manual Mai 2026 (S. 15/16) und dev.multiplesklerose.ch:
   MS-Rot #d30037 · Spendengrün #92d050 · Herbstblau #d1e6f6 · Petrolblau #005978
   Verlauf MS-Rot: #e63c07 → #d30037
   Schriftgrössen mindestens wie Original (lvl1 1.125–1.25rem, lvl2 1.1875rem).
   ========================================================================== */

/* Original-Layout kompensiert den absolut positionierten Header per
   padding-top auf .page — hier ist der Header sticky im Fluss. */
.page { padding-top: 0; }

/* Keine Silbentrennung in Navigation, Fusszeile und Hub-Karten */
.navb, .navb-footer, .navb-hub__grid, .navb-cta-box { hyphens: none; }

/* Globales Listen-Styling der Site (ul li::before content:'–' + 1rem Einzug)
   für alle Navigations-/Footer-/Hub-Listen zurücksetzen — analog zu den
   Resets der Original-Komponenten (.nav-main__lvl1-item::before etc.). */
.navb li::before,
.navb-footer li::before,
.navb-hub__grid li::before { display: none; content: none; }
.navb li,
.navb-footer li,
.navb-hub__grid li { padding: 0; margin: 0; }

.navb a { text-decoration: none; }

.navb {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  box-shadow: none;
  transition: box-shadow .2s ease;
}
.navb--scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.15); }

.navb .navb-container,
.navb-footer .navb-container,
main .navb-container {
  max-width: 90rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media screen and (min-width: 90em) {
  .navb .navb-container,
  .navb-footer .navb-container,
  main .navb-container { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* --------------------------------------------------------------------------
   Funktionsnavigation (oben) — weiss mit Haarlinie (wie dev)
   -------------------------------------------------------------------------- */
/* Trennung der beiden Nav-Zeilen über Flächenkontrast (leichte Herbstblau-
   Tönung) statt nur über die feine Linie; Linie bleibt als sanfte Kante */
.navb-func {
  background: #f2f8fd;
  color: #1d202f;
  border-bottom: 1px solid rgba(149,166,184,.4);
}
.navb-func__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.25rem;
  flex-wrap: wrap;
  padding: .25rem 0;
}
.navb-func__left,
.navb-func__right {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.navb-func__center {
  flex: 1 1 14rem;
  display: flex;
  justify-content: center;
}
.navb-func a { color: #1d202f; }
.navb-func__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem .625rem;
  font-size: 1rem;
  line-height: 1.4;
  border-radius: 3px;
}
.navb-func__link:hover,
.navb-func__link:focus-visible { background: #d1e6f6; color: #005978; }
.navb-func__label { opacity: .7; margin-right: .25rem; font-size: 1rem; }
.navb-func__tel { font-weight: 700; }

/* Suche */
.navb-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 26rem;
  background: #fff;
  border: 1px solid rgba(149,166,184,.5);
  border-radius: 999px;
  padding: 0 .25rem 0 1rem;
}
.navb-search:focus-within { border-color: #005978; box-shadow: 0 0 0 2px rgba(0,89,120,.15); }
.navb-search__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1rem;
  padding: .5rem 0;
  min-width: 0;
  outline: none;
  color: #1d202f;
  box-shadow: none;
}
/* Foundation gibt [type=search]:focus Rahmen/Schatten (hartes Rechteck in der
   Pille) — unterdrücken; den Fokus zeigt die Pille selbst via :focus-within */
.navb-search__input:focus,
.navb-search__input:focus-visible {
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
}
.navb-search__button {
  border: 0;
  background: transparent;
  color: #005978;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Sprache */
.navb-lang { display: inline-flex; align-items: center; }
.navb-lang__link {
  padding: .625rem .375rem;
  font-size: 1rem;
  opacity: .6;
}
.navb-lang__link:hover, .navb-lang__link:focus-visible { opacity: 1; }
.navb-lang__link--current { opacity: 1; font-weight: 700; }

/* --------------------------------------------------------------------------
   Hauptnavigation
   -------------------------------------------------------------------------- */
.navb-main__row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: .875rem 0;
}
/* Logo: gross im Ruhezustand (NGO-Name lesbar), kompakt nach dem Scrollen —
   Seitenverhältnis 166.07 × 36.71 bleibt unangetastet */
.navb-branding svg {
  display: block;
  width: 212px;
  height: 47px;
  transition: width .2s ease, height .2s ease;
}
.navb--scrolled .navb-branding svg { width: 166px; height: 37px; }
@media screen and (max-width: 47.99em) {
  .navb-branding svg,
  .navb--scrolled .navb-branding svg { width: 140px; height: 31px; }
}

.navb-nav { flex: 1; }
.navb-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .125rem;
}
.navb-nav__item { position: relative; margin: 0; }
.navb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .75rem .625rem;
  font-family: "GT Pressura", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #1d202f;
  border-radius: 3px;
}
@media screen and (min-width: 75em) {
  .navb-nav__link { font-size: 1.1875rem; padding: .75rem .75rem; }
}
@media screen and (min-width: 90em) {
  .navb-nav__link { font-size: 1.25rem; }
}
.navb-nav__link:hover,
.navb-nav__link:focus-visible { color: #d30037; }
.navb-nav__link[aria-expanded="true"] { color: #d30037; background: #d1e6f6; }
.navb-nav__chevron { transition: transform .15s ease; color: currentColor; }
.navb-nav__link[aria-expanded="true"] .navb-nav__chevron { transform: rotate(180deg); }

.navb-cta { flex-shrink: 0; }

/* Dropdown-Panel (nur Variante A) */
.navb-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 19rem;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  border-top: 3px solid #d30037;
  padding: .5rem 0;
  z-index: 210;
}
.navb-panel--open { display: block; }
.navb-panel__list { list-style: none; margin: 0; padding: 0; }
.navb-panel__list li { margin: 0; }
.navb-panel__link {
  display: block;
  padding: .625rem 1.25rem;
  color: #1d202f;
  font-size: 1.1875rem;
  line-height: 1.47619;
}
.navb-panel__link:hover,
.navb-panel__link:focus-visible { background: #d1e6f6; color: #005978; }
/* Hervorgehobene Einträge: Gewicht + Pfeil + Trennlinie statt Farbfüllung,
   damit sie nicht wie ein Selected-/Current-Zustand wirken */
.navb-panel__link--highlight {
  font-weight: 700;
  color: #005978;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: .375rem;
  padding-bottom: .75rem;
}
.navb-panel__link--highlight::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf-8,<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.97 5.47a.75.75 0 0 0 0 1.06l4.72 4.72H6a.75.75 0 0 0 0 1.5h10.69l-4.72 4.72a.75.75 0 1 0 1.06 1.06l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.06 0Z" fill="%23D30037"/></svg>') no-repeat center / contain;
}
.navb-panel__link--overview {
  border-top: 1px solid #e5e5e5;
  margin-top: .375rem;
  padding-top: .75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navb-panel__link--overview::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf-8,<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.97 5.47a.75.75 0 0 0 0 1.06l4.72 4.72H6a.75.75 0 0 0 0 1.5h10.69l-4.72 4.72a.75.75 0 1 0 1.06 1.06l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.06 0Z" fill="%2348526B"/></svg>') no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Mobile (< 1024px): Burger + gestapelte Liste
   -------------------------------------------------------------------------- */
.navb-burger {
  display: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.navb-burger span,
.navb-burger::before,
.navb-burger::after {
  content: '';
  display: block;
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: #1d202f;
  transition: transform .2s ease, opacity .2s ease;
}
.navb-burger::before { top: 14px; }
.navb-burger span { top: 21px; }
.navb-burger::after { top: 28px; }
.navb-burger[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.navb-burger[aria-expanded="true"] span { opacity: 0; }
.navb-burger[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 63.99em) {
  .navb-burger { display: block; }
  /* Nav-Liste ist ausgeblendet (kein flex:1-Füller mehr):
     Spenden + Burger an den rechten Rand schieben */
  .navb-cta { margin-left: auto; }
  .navb-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: .5rem 1.25rem 1.25rem;
  }
  .navb-nav--open { display: block; }
  .navb-nav__list { flex-direction: column; gap: 0; }
  .navb-nav__link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: .875rem .25rem;
    border-bottom: 1px solid #eee;
    font-size: 1.1875rem;
  }
  .navb-panel {
    position: static;
    box-shadow: none;
    border-top: 0;
    padding: 0 0 .5rem .75rem;
    min-width: 0;
  }

  /* Mobile: «Übersicht» als erster Eintrag (begrenzte vertikale Sicht) —
     nur visuelle Reihenfolge, DOM/Desktop bleiben unverändert */
  .navb-panel__list { display: flex; flex-direction: column; }
  .navb-panel__item--overview { order: -1; }
  .navb-panel__link--overview {
    border-top: 0;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 .375rem;
    padding-top: .625rem;
    padding-bottom: .75rem;
  }
  .navb-func__link--optional { display: none; }

  /* Mobile Funktionsleiste: Zeile 1 = MS-Infoline/Kontakt links, Sprache/
     Barrierefreiheit rechts · Zeile 2 = Suche in voller Breite */
  .navb-func__left { order: 1; }
  .navb-func__right { order: 2; margin-left: auto; }
  .navb-func__center { order: 3; flex: 1 1 100%; padding-bottom: .5rem; }
  .navb-search { max-width: none; }
}

/* --------------------------------------------------------------------------
   Fusszeile — oben Herbstblau (Verzeichnis), unten Petrolblau (Service/Legal)
   wie dev: .footer__top #d1e6f6/#005978 · .footer__bottom #005978/#d1e6f6
   -------------------------------------------------------------------------- */
.navb-footer { margin-top: 4rem; font-size: 1rem; }

.navb-footer__top { background: #d1e6f6; color: #005978; }
.navb-footer__top a { color: #005978; }
.navb-footer__top a:hover, .navb-footer__top a:focus-visible { text-decoration: underline; }

.navb-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding: 3rem 0 2.5rem;
}
@media screen and (min-width: 48em) {
  .navb-footer__grid { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 75em) {
  /* max. 5 Spalten: 9 Gruppen fliessen als 5 + 4 */
  .navb-footer__grid { grid-template-columns: repeat(5, 1fr); }
}
.navb-footer__title {
  font-family: "GT Pressura", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: #005978;
}
.navb-footer__title a { font-weight: 700; }

/* Organisations-Spalte: Adresse → Abstand → Infoletter-Box → Social/Sprache
   unten ausgerichtet (etwa auf Höhe des Endes der rechten Spalten) */
.navb-footer__org { display: flex; flex-direction: column; }
.navb-footer__service address { margin: 0 0 1rem; }
/* kein Top-Abstand, damit der Titel horizontal mit «Kontakt»/«Spenden» fluchtet */
.navb-footer__infoletter { margin: 0 0 2rem; }
.navb-footer__org-bottom { margin-top: auto; }
.navb-footer__list { list-style: none; margin: 0; padding: 0; }
.navb-footer__list li { margin: 0 0 .125rem; }
.navb-footer__list a { display: inline-block; padding: .25rem 0; }

.navb-footer__bottom { background: #005978; color: #d1e6f6; }
.navb-footer__bottom a { color: #d1e6f6; }
.navb-footer__bottom a:hover, .navb-footer__bottom a:focus-visible { text-decoration: underline; }
.navb-footer__bottom .navb-footer__title { color: #fff; }

.navb-footer__service {
  padding: 2.5rem 0;
  border-top: 1px solid rgba(0,89,120,.2);
  /* Anker-Ziel (#kontakt): Sticky-Header freihalten, ~50px Abstand
     zwischen Unterkante Hauptnavigation und Titel «Kontakt»
     (inkl. 2.5rem Innenabstand der Service-Zeile) */
  scroll-margin-top: 8rem;
}
@media screen and (max-width: 63.99em) {
  .navb-footer__service { scroll-margin-top: 8rem; }
}
/* h4-Unterüberschriften (MS-Zentrum, MS-Infoline): semantisch eine Stufe
   unter dem Spaltentitel (h3), visuell bewusst kleiner — Fliesstextgrösse */
h4.navb-footer__subtitle,
.navb-footer__subtitle {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: inherit;
  margin: .875rem 0 .125rem;
}
.navb-footer__top .navb-social a { background: rgba(0,89,120,.12); color: #005978; }
.navb-footer__top .navb-social a:hover { background: rgba(0,89,120,.25); }
.navb-infoletter input { border: 1px solid rgba(0,89,120,.3); }
/* Petrol statt Hellblau-auf-Hellblau; Grün bleibt dem Fundraising vorbehalten */
.navb-infoletter .button { background: #005978; color: #fff; }
.navb-infoletter .button:hover,
.navb-infoletter .button:focus-visible { background: #00465e; color: #fff; }
.navb-footer__lang { margin: 1rem 0 0; display: flex; gap: 1rem; }
.navb-footer__sqs { width: 135px; height: 135px; display: inline-block; margin-top: 16px; }

/* Bild über der Infoletter-Anmeldung (emotionale Bindung, verlinkt auf MS Geschichten) */
.navb-footer__figure { display: block; margin: 0 0 1.25rem; max-width: 24rem; }
.navb-footer__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.navb-footer__figure figcaption {
  display: block;
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.4;
}
.navb-footer__colophon { font-size: .875rem; max-width: 24rem; }
.navb-footer__service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 1.5rem;
}
.navb-footer address { font-style: normal; line-height: 1.6; }

.navb-social { display: flex; gap: .5rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.navb-social li { margin: 0; }
.navb-social a {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
}
.navb-social a:hover { background: rgba(255,255,255,.28); }
.navb-social svg { width: 22px; height: 22px; fill: currentColor; }

.navb-infoletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  margin-top: .5rem;
  max-width: 24rem; /* endet auf Breite des Bilds darüber */
}
.navb-infoletter input { width: 100%; }

/* Hervorgehobene Hub-Karte: roter Akzent statt Farbfüllung */
.navb-card--highlight .card__inner {
  border-top: 4px solid #d30037;
  box-shadow: 0 6px 16px rgba(211,0,55,.18);
}
.navb-infoletter input {
  flex: 1;
  border: 0;
  border-radius: 3px;
  padding: .625rem .75rem;
  font-size: 1rem;
  min-width: 0;
}
.navb-footer__legal {
  border-top: 1px solid rgba(209,230,246,.25);
  padding: 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Prototyp-Hilfen
   -------------------------------------------------------------------------- */
.navb-hub__lead { font-size: 1.1875rem; max-width: 44rem; }
.navb-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}
.navb-hub__grid li { margin: 0; }
.navb-hub__card {
  display: block;
  background: #d1e6f6;
  border-radius: 4px;
  padding: 1.25rem;
  color: #005978;
  font-family: "GT Pressura", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.3;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
  transition: background .15s ease;
}
.navb-hub__card:hover, .navb-hub__card:focus-visible { background: #b9d9f0; color: #005978; }
.navb-hub__card--highlight {
  background: linear-gradient(90deg, #e63c07 0%, #d30037 100%);
  color: #fff;
}
.navb-hub__card--highlight:hover, .navb-hub__card--highlight:focus-visible {
  background: linear-gradient(90deg, #d33305 0%, #b80030 100%);
  color: #fff;
}

.navb-breadcrumb { font-size: .875rem; margin: 1.5rem 0 0; color: #6b6b6b; }
.navb-breadcrumb a { color: #6b6b6b; text-decoration: underline; }

.navb-cta-box {
  background: #d1e6f6;
  border-radius: 4px;
  padding: 1.5rem;
  margin: 1rem 0;
}
.navb-cta-box h3 { margin-top: 0; color: #005978; }