/* * SPDX-FileCopyrightText: 2024 Bundesrepublik Deutschland, vertreten durch das BMI/ITZBund * * SPDX-License-Identifier: GPL-3.0-or-later */ /* Hauptnav (.mainnav-desktop) UND Metanav (.meta-desktop: Sprache/ Leichte Sprache/Anmelden, beide aus NavPrimary.html) buendig mit dem Inhalt darunter (z.B. Textpic-Bild in .main-container .row .col-12): alle drei haengen im selben Bootstrap-Container, aber nur der Bildpfad legt ueber .col-12 den Gutter (--bs-gutter-x * 0.5) wieder auf die negative Row-Margin drauf. Nav und Metanav bleiben ohne diesen Ausgleich bis an die rohe Row-/Container-Kante gestreckt - 289..1609px in der DevTools-Messung, je 12px ueber die Bildkante (301..1597px) hinaus auf beiden Seiten. Identischer Messwert bei beiden trotz unterschiedlicher Ursache (naechster Absatz) - deshalb ein gemeinsamer Selektor statt zwei fast identischer Bloecke. Padding allein haette hier NICHT gereicht: Padding verschiebt nur den Inhalt innerhalb der Element-Box, nicht die Box-Kante selbst - genau die Kante, die oben gemessen wurde. Margin allein reichte ebenfalls nicht, aber aus zwei verschiedenen Gruenden je Element (beide in gsb_public_frontend screen.css): - .row>* setzt generell width:100% (mit flex-shrink:0). Ohne eigene .col-Klasse faellt flex-basis:auto auf dieses width zurueck - genau der Fall bei .mainnav-desktop. Eine Prozentbreite reagiert nicht auf das eigene Margin (wird gegen die Breite der Row berechnet, nicht gegen die eigene Box), der rechte Rand wanderte beim reinen Margin-Versuch nur mit statt sich zu verschmaelern (301..1621px statt 301..1597px in der Messung). - .meta-desktop traegt zusaetzlich die Bootstrap-Klasse .col, die flex:1 0 0 setzt - flex-basis explizit 0 statt auto, das width:100% von .row>* wird dadurch fuer die Groessenberechnung ignoriert (per Flexbox-Spec: width nur relevant bei flex-basis:auto). Die Box waechst stattdessen per flex-grow:1 auf die volle verfuegbare Row-Breite - ein reiner width-Override haette hier nichts bewirkt, weil flex-grow nach der Basis-Berechnung den Rest sowieso wieder auffuellt. flex als Shorthand (statt nur width) setzt grow, shrink UND basis in einem Zug auf einen festen Wert und neutralisiert damit beide Ursachen gleichermassen, unabhaengig davon welche im Einzelfall greift. justify-content-end auf beiden Elementen bleibt unangetastet - Inhalt bzw. Links landen weiterhin an der (jetzt verschmaelerten) rechten Kante der jeweiligen Box. Fuer die Hauptnav-Punkteverteilung siehe die #nav-desktop-Regel weiter unten - die setzt nicht hier an .mainnav-desktop selbst an, siehe Begruendung dort. Gutter-Variable statt fixer 12px/24px, damit der Ausgleich automatisch mitzieht, falls --bs-gutter-x sich je aendert. */ .header-wrapper .mainnav-desktop, .header-wrapper .meta-desktop { flex: 0 0 calc(100% - var(--bs-gutter-x)); margin-left: calc(var(--bs-gutter-x) * 0.5); margin-right: calc(var(--bs-gutter-x) * 0.5); } /* Hauptnav-Punkte ueber die volle (jetzt bildbuendige) Breite verteilt statt rechtsbuendig geklumpt: erster Punkt an der linken, letzter an der rechten Bildkante. Zwei Vendor-Eigenheiten mussten dafuer beide ausgehebelt werden, direkt an der Liste (#nav-desktop), nicht an .mainnav-desktop: - Die eigentlichen Nav-Punkte sind Kinder von