/* * Kreis-Rahmen (Ebene 1: Barnim-Branding) * Oberes Band (Hintergrundbild, Logo, Top-Versatz) ist immer aktiv, auch * unterhalb lg (992px) - sonst verschwindet es beim Reinzoomen, weil dann * die effektive Viewport-Breite unter 992px faellt. * Seitliche Streifen (Inset links/rechts) bleiben Desktop-only: auf * schmalen Viewports wuerden sie den ohnehin knappen Platz weiter * einschraenken. */ :root { --kreisrahmen-inset: 8%; --kreisrahmen-top: 105px; /* Nur im Sticky-Zustand: zusaetzlicher Innenabstand oben in .header-wrapper-bg, damit die geschrumpfte Hauptnav (.sticky .mainnav-desktop-item { margin-top: -2.1875rem }, navigationPrimary.css) nicht buendig an der Bandkante klebt. Wirkt als Padding, nicht als Top-Versatz des Headers selbst - sonst entsteht zwischen Bandkante und dem (transparenten) .header-wrapper eine Luecke, durch die der durchscrollende Inhalt sichtbar wird (der weisse Hintergrund sitzt auf .header-wrapper-bg, nicht auf .header-wrapper). */ --kreisrahmen-sticky-gap: 20px; } /* Bildquelle: Site-Setting branding.kreisrahmenBackgroundImage des Kreisportals, geschrieben vom Background-Partial als genoncter Style-Block (siehe Colors-Partial fuer dasselbe Muster). Ohne gesetztes Bild bleibt --kreisrahmen-bg undefiniert -> "none": kein automatischer Fallback auf ein Bild mit ungeklaerten Rechten. .kreisrahmen-frame (Layout/Page/Default.html) ist ein fixiertes Overlay UEBER dem Inhalt, nicht dahinter: eine fruehere Version mit z-index:-1 hinter dem Seiteninhalt verliess sich darauf, dass Body oder Inhalt zuverlaessig darueber gemalt werden - das kippte unvorhersehbar (weisser Inhaltsbereich zeigte teils das Rahmenbild, an anderer Stelle lief Inhalt ungehindert durchs Band). Jetzt traegt ein einzelnes, viewport-grosses Element das volle Hintergrundbild (background-size:cover bleibt auf die volle Viewport-Box bezogen, damit Band und Streifen denselben durchgehenden Bildausschnitt zeigen, keine getrennt skalierten Krops) und wird per clip-path auf die Rahmen-Form beschnitten - die Mitte ist dadurch gar nicht Teil der gemalten Flaeche, unabhaengig von Body-Hintergrund oder Stacking-Reihenfolge. z-index 1020 (Bootstraps eigene .sticky-top-Konvention) haelt es ueber normalem Inhalt (kein eigener z-index), aber unter Header (1030) und Logo (1040). pointer-events:none, da rein dekorativ - blockiert nie Klicks/Scroll, auch nicht in Browsern mit unklarem Hittest-Verhalten fuer ausgeklippte Flaechen. */ .kreisrahmen-frame { position: fixed; inset: 0; z-index: 1020; pointer-events: none; background: var(--kreisrahmen-bg, none) center / cover no-repeat; clip-path: polygon(0 0, 100% 0, 100% var(--kreisrahmen-top), 0 var(--kreisrahmen-top)); } @media (min-width: 992px) { .kreisrahmen-frame { /* Seitliche Streifen nur ab hier (siehe Kommentar oben im Dateikopf) - Clip-Path erweitert das sichtbare "Fenster" um die beiden Seitenstreifen, ohne die Bildberechnung zu aendern. */ clip-path: polygon( 0 0, 100% 0, 100% 100%, calc(100% - var(--kreisrahmen-inset)) 100%, calc(100% - var(--kreisrahmen-inset)) var(--kreisrahmen-top), var(--kreisrahmen-inset) var(--kreisrahmen-top), var(--kreisrahmen-inset) 100%, 0 100% ); } } /* Solange das Vollbild-Mobilmenue offen ist (active-nav-body auf body), propagiert dessen overflow:hidden laut CSS-Overflow-Spec auf den Viewport, weil html selbst kein eigenes overflow setzt - das clippt das fixed positionierte .kreisrahmen-logo mit. Wenn html hier selbst overflow:hidden traegt, greift die Propagation von body nicht mehr und der Viewport behaelt seine reguraere Ausdehnung. */ html:has(body.active-nav-body) { overflow: hidden; } body { margin-top: var(--kreisrahmen-top); } .header-wrapper { top: var(--kreisrahmen-top); } /* Vendor blendet .meta-desktop (Sprache/Leichte Sprache/Gebaerdensprache/ Anmelden) im Sticky-Zustand per position:absolute; top:-6.25rem aus (navigationPrimary.css) - relativ zum positionierten Vorfahren .container.position-relative im Header. Das setzt voraus, dass der Header bei y:0 beginnt (Vendor-Original). Durch unseren Top-Versatz sitzt dieser Vorfahre jetzt --kreisrahmen-top tiefer, derselbe -100px-Versatz landet dadurch mitten im Rahmenband statt ausserhalb des Viewports. Korrektur um genau --kreisrahmen-top, damit .meta-desktop wieder an derselben (unsichtbaren) Bildschirmposition wie im Vendor-Original landet. */ .sticky .meta-desktop { top: calc(-6.25rem - var(--kreisrahmen-top)); } /* Sticky-Zustand: zusaetzlicher Innenabstand oben statt Top-Versatz des Headers (siehe Kommentar bei --kreisrahmen-sticky-gap im Dateikopf). Additiv zum Vendor-Basiswert (padding:1rem 0 0.5rem) - eine flache Zuweisung wuerde die vorhandenen 16px auf den Gap-Wert verkleinern und die Hauptnav (die per negativem margin-top schon nach oben gezogen wird) noch weiter aus dem weissen Bereich schieben statt ihr mehr Abstand zu geben. margin-top:-2px laesst den weissen Bereich minimal in die Bandkante ueberlappen: Header-Top (var(--kreisrahmen-top), 105px) und die Clip-Path-Kante von .kreisrahmen-frame nutzen denselben Wert, aber unterschiedliche Rendering-Pfade (fixed-Position vs. Clip-Path-Polygon) - je nach Sub-Pixel-Rundung im Browser kann das einen Haarriss Hintergrundbild zwischen Bandkante und Header durchscheinen lassen. Der Overlap ist unterhalb der 105px-Kante nicht sichtbar, da dort ohnehin Weiss auf Weiss liegt. */ .sticky .header-wrapper-bg { padding-top: calc(1rem + var(--kreisrahmen-sticky-gap)); margin-top: -2px; } /* Vendor setzt height:100% !important fuers Vollbild-Mobilmenue, bezogen auf den Viewport. Mit dem jetzt immer aktiven top-Versatz reicht diese Box sonst um --kreisrahmen-top ueber den unteren Viewportrand hinaus. */ .header-wrapper.active-nav { height: calc(100% - var(--kreisrahmen-top)) !important; } /* Bundesadler + GSB-Schriftzug (Header.Image-Trademark.html) sind Kreis- fremdes Branding, unser eigenes Logo (.kreisrahmen-logo) uebernimmt die Rolle. display:none entfernt den kompletten Wrapper inkl. des ggf. vorhandenen Links zur Startseite aus dem Accessibility-Tree - kein leerer Fokus-Stop. */ .header-wrapper .col.logo { display: none; } .kreisrahmen-logo { position: fixed; top: 20px; left: 8%; z-index: 1040; /* ueber .header-wrapper/-bg (1030) */ display: inline-block; } .kreisrahmen-logo img { height: 70px; width: auto; /* Nie hoeher als das Rahmenband (--kreisrahmen-top), auch wenn Logo- Hoehe oder Bandhoehe sich spaeter unabhaengig voneinander aendern: 7px Versatz oben (.kreisrahmen-logo top) + 7px Luft unten. */ max-height: calc(var(--kreisrahmen-top) - 14px); } /* Fixed auf Fotohintergrund: Ring in zwei Kontrastfarben, damit er auf jedem Bildausschnitt sichtbar bleibt, nicht nur auf hellem/dunklem. */ .kreisrahmen-logo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px var(--bs-secondary); } @media (min-width: 992px) { body { /* Inhaltsflaeche innerhalb des Kreisrahmens: --bs-bgcolor-4 statt fest verdrahtetem Weiss, damit der Ton zentral ueber das GSB-Setting gsb-background-color-4 (Default #f5f5f5) gepflegt bleibt. Kacheln (dynamische-navigation.css) bleiben bewusst hart auf #fff, damit sie sich unabhaengig von diesem Setting abheben. .header-wrapper-bg (gsb_public_frontend) bleibt Weiss - sein border-bottom steht schon in --bs-gray-100 (#f2f3f4), optisch praktisch identisch mit #f5f5f5, die Kante bleibt also weich statt hart sichtbar. */ background-color: var(--bs-bgcolor-4); margin-left: var(--kreisrahmen-inset); margin-right: var(--kreisrahmen-inset); min-height: calc(100vh - var(--kreisrahmen-top)); } .header-wrapper { left: var(--kreisrahmen-inset); right: var(--kreisrahmen-inset); /* width:auto Pflicht, nicht Stil: Vendor-CSS setzt width:100%. Mit links+rechts+width gleichzeitig != auto ist die Box bei fixed ueberbestimmt - bei ltr gewinnt `left`, `right` wird aus `left + width` neu berechnet. Mit width:100% liefe der Header 8% rechts ueber den Viewport hinaus. */ width: auto; } }