/* * SPDX-FileCopyrightText: 2026 Bundesrepublik Deutschland, vertreten durch das BMI/ITZBund * * SPDX-License-Identifier: GPL-3.0-or-later */ /* Header-Bild = Gallery-Content-Element in der Backend-Layout-Spalte "Top" (colPos 0), gerendert in .top-container. GSB rendert .top-container bewusst voll-breit ohne Bootstrap-.container-Padding (margin:0 auto; max-width:120rem; siehe screen.css) - das Header-Bild soll aber dieselbe Breite haben wie Navigationsleiste (.mainnav-desktop/.meta-desktop, siehe mandant.css) und Hauptinhalt (.main-container .col-12), beide liegen letztlich in einem echten Bootstrap-".container". Kein Template-Override, um das nachzubilden: .top-container wird sowohl von Templates/Page/Default.html (Startseiten) als auch von OneColArticle.html (Default-Layout fuer alle Unterseiten, siehe backend_layout_next_level) gerendert - ein Override haette beide Vendor-Dateien treffen muessen, dritte und vierte kopierte Vendor-Datei im Sitepackage, die bei jedem GSB-Update von Hand nachgezogen werden muesste. Stattdessen bekommt .top-container hier exakt dieselben Breiten-Eigenschaften wie Bootstraps eigene .container-Klasse (Padding/Margin direkt aus deren Definition uebernommen, die fuenf max-width-Werte 1:1 aus screen.css abgeschrieben, Breakpoints 576/768/992/1200/1400px) - wirkt dadurch auf jeder Seite, ohne eine Vendor-Datei zu duplizieren. Einziger Nachteil: Aendert GSB diese fuenf Werte oder --bs-gutter-x kuenftig, muss diese Regel von Hand nachgezogen werden - kein Automatismus wie bei einer echten CSS-Klasse. !important auf jeder Eigenschaft: notwendig, live getestet. GSBs eigene Regel lautet .main-wrapper .top-container (Spezifitaet 0,2,0, siehe screen.css), unsere zunaechst nur .top-container (0,1,0) - GSBs Regel ist also die spezifischere und gewinnt reguraer, unabhaengig von der Ladereihenfolge. Ohne !important blieb .top-container live nachweisbar bei GSBs eigenem max-width:120rem haengen (kein Effekt unserer Regel). Padding als fester Wert (0.75rem = 12px), nicht als calc(var(--bs-gutter-x) * 0.5) wie bei der Navigation (mandant.css): --bs-gutter-x ist bei Bootstrap nur innerhalb von .container/.row selbst definiert (dort per Grid-Mixin gesetzt), auf .top-container ist die Variable schlicht leer. calc() mit einer nicht definierten, fallback-losen var() macht die gesamte Deklaration ungueltig ("invalid at computed-value time") - Padding fiel dadurch komplett aus, obwohl die Regel per !important theoretisch gewonnen haette (leere Deklaration, nichts zum Gewinnen). Live gemessen ohne Padding: Bild reichte bis 289-1609px (= .top-container max-width 1320px ohne jeden Abzug) statt der Ziel-1296px-Content-Breite. mandant.css braucht diesen festen Wert NICHT, weil .mainnav-desktop/.meta-desktop innerhalb eines echten .container/.row liegen (siehe Header.html) - dort ist --bs-gutter-x reguläer vererbt vorhanden. 0.75rem entspricht exakt der Haelfte von Bootstraps Standard-Gutter (--bs-gutter-x: 1.5rem, siehe screen.css) - hartcodiert, weil an dieser Stelle keine Custom-Property-Vererbung zur Verfuegung steht. Aendert GSB den Standard-Gutter kuenftig, muss auch dieser Wert von Hand nachgezogen werden. Mit !important und festem Padding-Wert sitzt der Container exakt auf Navigationsbreite (Bild 301-1597px auf der GOS-Musterstadt-Seite, live verifiziert). */ .top-container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; margin-left: auto !important; margin-right: auto !important; } @media (min-width: 576px) { .top-container { max-width: 33.75rem !important; } } @media (min-width: 768px) { .top-container { max-width: 45rem !important; } } @media (min-width: 992px) { .top-container { max-width: 60rem !important; } } @media (min-width: 1200px) { .top-container { max-width: 71.25rem !important; } } @media (min-width: 1400px) { .top-container { max-width: 82.5rem !important; } } /* Bild immer auf volle (jetzt korrekte) Breite von .top-container strecken, auch wenn das hochgeladene Original schmaler ist - bewusste Entscheidung fuer Layout-Konsistenz ueber alle Schulseiten hinweg statt Bildschaerfe im Einzelfall (siehe konzept.md, "Header-Bilder"). Redaktionshinweis dazu in musterbaum-texte.md: mind. 1920px breit, 16:5 - sonst wird sichtbar unscharf gestreckt. GSB setzt am umgebenden
display:inline-block (siehe screen.css) - ein inline-block-Element ohne eigene width schrumpft per Shrink-to-fit auf die Breite seines Inhalts. Ein Prozentwert am darin (width:100%) hat dadurch keine konkrete Bezugsbreite und faellt auf die intrinsische Bildbreite zurueck (CSS2.1 10.3.2) - beobachtet: figure blieb exakt bei der Originalbildbreite, width:100% am img griff ins Leere. .figure braucht deshalb zuerst selbst eine konkrete Breite: display:block macht es zum Block-Element (volle Breite seines Elternelements .image-wrapper statt Shrink-to-fit), erst danach hat width:100% am img ueberhaupt etwas zum Skalieren. !important auf allen vier Eigenschaften zur Konsistenz mit der .top-container-Regel oben - hier aus einem anderen Grund noetig: der Selektor .top-container .ce-gallery .figure (0,3,0) ist bereits spezifischer als GSBs bare .figure (0,1,0) und wuerde regulaer auch ohne !important gewinnen, ebenso .top-container .ce-gallery .figure-img (0,3,0) gegenueber .img-fluid (0,1,0). !important schadet hier nicht, ist aber - anders als bei .top-container oben - kein Fix fuer ein tatsaechliches Spezifitaets- oder Ladereihenfolge- Problem. height:auto haelt dabei das Seitenverhaeltnis. Nur auf .top-container beschraenkt, damit normale Gallery-Content-Elemente im Seiteninhalt (Spalte "Main") unveraendert bleiben - dort ist ein schmaleres Bild in einer Text-Kombination gewollt, kein Fehler. */ .top-container .ce-gallery .figure { display: block !important; width: 100% !important; } .top-container .ce-gallery .figure-img { width: 100% !important; height: auto !important; }