/* ===== Kreisportal: Hauptnavigation (neun Schulform-Einträge) =====
   Wirkt nur hier: Attribut data-site am <body>, gesetzt per
   page.bodyTagAdd unter einer Condition auf den Site-Identifier
   (Configuration/TypoScript/setup.typoscript). Schulseiten laden die
   Datei nicht einmal.

   Arbeitsteilung mit kreisportal-nav.js: Diese Datei legt Ausrichtung,
   Zentrierung und den Kompaktmodus fest. Die Breite der einzelnen
   Zellen und der Leiste setzt das Skript, weil beides eine Messung des
   umgebrochenen Textes voraussetzt — CSS kann eine Box nicht auf ihre
   umgebrochenen Zeilen schrumpfen. Ohne JavaScript bleibt die Leiste
   funktionsfähig, nur mit ungleichmäßigen Zellbreiten. */

/* Schriftgrößen spiegeln GSBs dreistufige Staffelung aus
   navigationPrimary.css mit je -2px. Basisstufe (0.875rem) bleibt. */
@media (min-width: 1200px) {
  [data-site="kreisportal"] .mainnav-desktop .first-nav { font-size: 0.9375rem; }
}
@media (min-width: 1400px) {
  [data-site="kreisportal"] .mainnav-desktop .first-nav { font-size: 1rem; }
}

/* Text zentriert statt linksbündig */
[data-site="kreisportal"] .mainnav-desktop .first-nav {
  text-align: center;
}

/* Zeile zentriert statt rechtsbündig.
   !important ist unvermeidbar: Bootstraps .justify-content-end ist
   selbst !important. Unsere Regel gewinnt über die Spezifität
   (1,1,0 gegen 0,1,0). */
[data-site="kreisportal"] #nav-desktop {
  justify-content: center !important;
  flex-wrap: nowrap;
}

/* Die Leiste ist direktes Kind einer Bootstrap-.row und erbt von dort
   max-width: 100% und flex-shrink. Beides würde die vom Skript
   gesetzte Breite auf die Elternbreite zurückstutzen — die Leiste
   bekäme den negativen Rand, aber nicht die Breite, und säße dadurch
   links neben der Mitte. */
[data-site="kreisportal"] .mainnav-desktop {
  flex: 0 0 auto;
  max-width: none;
}

/* Zellen behalten die vom Skript gesetzte Breite. Ohne flex: 0 0 auto
   würde flex-shrink sie wieder verteilen. */
[data-site="kreisportal"] .mainnav-desktop-item {
  flex: 0 0 auto;
}

/* Kompaktmodus — Klasse wird von kreisportal-nav.js am <body> gesetzt.
   Spiegelt exakt den Zustand unterhalb 992px: Desktop-Leiste und
   Servicenavigation aus, Mobil-Layer samt Burger-Button und mobile
   Servicenavigation ein. Der Button ist oberhalb 992px im DOM
   vorhanden; versteckt ist nur sein Elternelement nav#main-menu über
   .d-lg-none. */
[data-site="kreisportal"].nav-kompakt .mainnav-desktop,
[data-site="kreisportal"].nav-kompakt .meta-desktop {
  display: none !important;
}
[data-site="kreisportal"].nav-kompakt #main-menu,
[data-site="kreisportal"].nav-kompakt .meta-mobile {
  display: block !important;
}