/* ========================================================================== HAMBURGER OVERLAY & OPTIK-ANPASSUNGEN (Desktop + Mobile identisch) ========================================================================== */ /* Nachtrag 2026-08-29 (Nutzerauftrag "Module in der Kopfzeile wandern am Handy nach unten / aufgehendes Menü schiebt die Karte nach unten"): der bisherige Gate "@media (min-width: 992px)" wurde entfernt - alle Regeln in diesem Block gelten jetzt bei JEDER Bildschirmbreite identisch (vorher nur ab 992px). Grund: bei schmaleren Breiten griff bisher Cassiopeias eigenes, UNVERAENDERTES Kern-CSS (template.css) fuer ".container-topbar"/ ".navbar-collapse" - dieses laesst ueberzaehlige Topbar-Module in eine zweite Zeile umbrechen und behandelt das aufklappende Menue als normalen, im Dokumentfluss stehenden Block (schiebt daher nachfolgende Inhalte wie die com_bilder-Karte nach unten, statt sie zu ueberlagern). Mit dem entfernten Gate gilt jetzt bei jeder Breite: das aufklappende Menue bleibt "position: absolute" und ueberlagert damit die darunter liegende Seite (Karte) statt sie wegzudruecken - exakt wie zuvor schon am Desktop. Korrektur 2026-08-29 (2/3/4, Nutzermeldungen "Menü verschwindet komplett", "Menü nur eingeschraenkt in Scrollbereich nutzbar", "Menü geht nicht ueber die Topbar hinaus - betrifft ALLE Seiten, Navigation aktuell nicht moeglich"): der urspruengliche Versuch, ZUSAETZLICH ueberzaehlige Topbar-Module per "overflow: hidden" auf .container-topbar auszublenden (statt sie umbrechen zu lassen), erwies sich als nicht mit dem aufklappenden Menue vereinbar - "overflow: hidden" auf .container-topbar (zugleich das Containing Block fuer das absolut positionierte Menue) schneidet das Menue IMMER mit ab, sobald es unterhalb der Leiste erscheint, unabhaengig von z-index. Weder der Achsen-Kniff ("overflow-x: hidden; overflow-y: visible" - wurde in der Praxis zu einem nutzlosen Scrollbereich) noch ein Script-Workaround (siehe "templates/cassiopeia_extended/index.php" - vom Nutzer aus guten Gruenden verworfen: ein Script direkt im Sitetemplate ist schwerer als eine reine CSS-Datei von der Testumgebung auf den Produktivserver zu uebertragen, und das Ergebnis war ohnehin fehlerhaft) loesten das zuverlaessig. Konsequenz: "overflow: hidden"/"flex-wrap: nowrap" sowie die zugehoerige ".container-topbar > * { flex-shrink: 0 }"-Regel wurden HIER wieder vollstaendig entfernt - das Menue funktioniert dadurch auf jeder Seite wieder normal. Korrektur 2026-08-29 (5, Nutzeridee): statt die Zusatzmodule bei Platzmangel per "overflow: hidden" abzuschneiden (mit dem Menue unvereinbar, siehe oben), wurden sie unterhalb von 992px komplett ausgeblendet ("display: none") - es blieb dann nur noch das Hamburger-Icon uebrig. Dadurch entstand gar kein Platzproblem mehr in der Topbar-Zeile, und "overflow: hidden" wurde dafuer gar nicht erst benoetigt. Breakpoint 991.98px war bewusst identisch zu Bootstraps eigenem "lg"-Breakpoint gewaehlt (siehe Klasse "navbar-expand-lg" bereits im Markup). Korrektur 2026-08-30 (Nutzerauftrag "Modul 2 und vermutlich auch Modul 3 wuerden platzmaessig auch am Mobile in Zeile 1 Platz finden"): die vollstaendige Ausblendung wird HIER wieder zurueckgenommen. Per Live-Test im Browser (echte Modul-Inhalte, keine Annahme) gemessen: die Topbar enthaelt aktuell genau drei Kinder - das Hamburger-Menue (~44px), "mod-custom117" ("imBild.info", ~112px) und "mod-custom120" (aktuell nur Platzhaltertext "x x", ~28px). Zusammen mit dem bestehenden "gap: 40px" (siehe Abschnitt 1 unten) ergibt das rund 264px Gesamtbreite - das passt (per Test bei 320px, 375px UND 390px Breite bestaetigt, jeweils OHNE Zeilenumbruch und OHNE horizontales Overflow) selbst auf das schmalste heute noch relevante Mobiltelefon-Format bequem in eine Zeile. Das Ausblenden war fuer den tatsaechlichen Inhalt nie noetig - es loeste ein Problem, das durch die konkrete (kurze) Modul-Bestueckung gar nicht bestand. Kein Ersatz durch "overflow"/"flex-wrap: nowrap" noetig (waere ohnehin mit dem Menue unvereinbar, siehe Korrektur 2/3/4 oben) - faellt ein zukuenftiges, zusaetzliches oder deutlich breiteres Modul aus dem Rahmen, greift ersatzlos Cassiopeias eigenes Standardverhalten (Umbruch in eine zweite Zeile, wie vor Runde A) als unschaedlicher Rueckfall - keine Funktion (insb. das Menue-Overlay) wird dadurch beeintraechtigt, nur die Optik weicht dann wieder wie vor Runde E vom Desktop ab. Bei Bedarf (neues/breiteres Modul, das nicht mehr passt) bitte erneut melden. */ /* Nachtrag 2026-08-29 (Runde F, Nutzerauftrag "&view=geo: Karte scrollt in die Topbar rein / Topbar ist am Handy nicht fixiert" - explizit als generelle, sitweite Aenderung fuer das gesamte cassiopeia_extended- Template gewuenscht, nicht nur fuer com_bilder): Cassiopeias UNVERAENDERTER Kern ("media/templates/site/cassiopeia/css/ template.css") enthaelt die Regel @media (width <= 991.98px) { .container-header { position: relative !important; } } Diese schaltet den GESAMTEN Site-Header (ein einziges
-Element, das Logo/Site-Titel, Hauptmenue UND die Topbar/den Hamburger buendelt - siehe "templates/cassiopeia/index.php") unterhalb von 991.98px IMMER auf normale Positionierung, unabhaengig von der Joomla-Template-Einstellung "Sticky Header". Deshalb war die Topbar am Handy bisher nicht fixiert, und die von com_bilder per JS ermittelte Kopfzeilen-Hoehe ("--cbg-site-topbar-offset", siehe tmpl/gallery/default_mobile.php und tmpl/geo/default.php) blieb dadurch am Handy immer 0 - die eigene, sticky positionierte Karte sass in der Folge direkt bei "top: 0" und scrollte optisch in die (nicht fixierte) Kopfzeile hinein. Fix: die Kernregel wird HIER ausdruecklich wieder aufgehoben, sodass der Header ab sofort bei JEDER Breite sticky bleibt - exakt wie bereits am Desktop. Da "user.css" nach dem Kern-Stylesheet geladen wird, gewinnt diese Regel unabhaengig von der Reihenfolge innerhalb von template.css. z-index bleibt unangetastet (Cassiopeias eigenes ".container-header { z-index: 10 }" gilt unveraendert weiter, siehe bereits vorhandene Korrektur des com_bilder-eigenen z-index auf 5/4 in den Kartentemplates). ACHTUNG - Reichweite: diese Aenderung wirkt SITEWEIT auf JEDE Seite, die dieses Template nutzt (nicht auf com_bilder begrenzbar, da Logo, Hauptmenue und Topbar ein einziges gemeinsames Element sind). Das war ausdruecklicher Nutzerwunsch ("ja auch am handy waere die Fixierung der topbar gewuenscht... generell fuer das casiopeia extended template"). */ @media (max-width: 991.98px) { .container-header { position: sticky !important; top: 0 !important; } } /* 1. TOPBAR BASIS-AUSRICHTUNG */ .container-topbar { display: flex !important; flex-direction: row !important; align-items: center !important; /* Versucht die Grundachsen mittig zu halten */ justify-content: flex-start !important; position: relative !important; width: 100% !important; padding-top: 1px !important; /* Minimaler Basisabstand nach oben */ padding-bottom: 1px !important; /* Innenabstand der gesamten Leiste (oben/unten 10px, links/rechts 15px für sauberen Rand) */ /* padding: 10px 15px !important; */ /* HIER JUSTIEREN: Die leicht graue Hintergrundfarbe */ background-color: #f8f9fa !important; /* HIER JUSTIEREN: Sehr dünner, dezenter Trennstrich nach unten */ border-bottom: 1px solid #e5e5e5 !important; gap: 40px; /* Abstand zwischen Hamburger-Menü und den anderen Modulen */ } /* SEPARATES CSS: Schiebt AUSSCHLIESSLICH die Textmodule nach unten */ /* Nachtrag 2026-08-30 (Runde I, Nutzermeldung "Text von Modul 3 liegt deutlich hoeher als Modul 2 und 4"): "mod-custom124" ("ihre Themen \"im Bild\"") war bislang gar nicht in dieser Regel gelistet - es war bis dahin nur fuer Superuser freigegeben und tauchte deshalb in keinem der bisherigen Live-Tests auf. Der Nutzer hat es inzwischen auf "Public" gestellt. Ohne diese Zeile bekam das Modul "margin-top: 0" statt "15px" und sass dadurch (top ca. 1px) deutlich hoeher als die beiden anderen Textmodule (top ca. 39-45px, buendig zum Hamburger-Icon bei top ca. 46px). Fix: Modul 124 hier ergaenzt, damit es denselben Versatz wie 117/120 erhaelt. */ .container-topbar div#mod-custom117, .container-topbar div#mod-custom120, .container-topbar div#mod-custom124 { /* HIER JUSTIEREN: Erhöhen Sie diesen Wert (z.B. auf 10px, 12px, 15px...), um nur die Texte nach unten zu schieben, während das Icon oben bleibt */ margin-top: 15px !important; } /* Nachtrag 2026-08-30 (Runde I, Nutzermeldung "Schriftfarbe wird scheinbar auf weiss gestellt, Text zunaechst nicht sichtbar"): Ursache ist NICHT user.css, sondern Cassiopeias UNVERAENDERTER Kern ("media/templates/site/ cassiopeia/css/template.css"), der dort die Regel .container-topbar, .container-below-top { color: rgb(255,255,255); } enthaelt - das setzt fuer JEDEN Text in der Topbar ohne eigene Farbangabe die (auf dem hellgrauen Topbar-Hintergrund #f8f9fa unsichtbare) Schriftfarbe Weiss. "mod-custom117" und "mod-custom120" sind nur sichtbar, weil ihr Text im Modul-Editor bereits eine eigene Inline-Farbe hat (#1d7989 bzw. #000000) - genau das fehlt bei "mod-custom124" ("

ihre Themen "im Bild"

" ganz ohne Formatierung), wodurch dessen Text die geerbte weisse Farbe uebernimmt und dadurch unsichtbar wird (bis man ihn markiert - die Markierung liefert per Browser-Vorgabe einen eigenen, meist dunklen Hintergrund, VOR dem der weisse Text dann sichtbar wird - kein Hinweis auf eine zweite Fehlerquelle, sondern dieselbe Ursache). Fix HIER statt in template.css (Kern-Datei wird laut Projektkonvention nicht angetastet): explizite Farbe fuer Modul 124 gesetzt. HIER JUSTIEREN: aktuell Schwarz (#000000), analog zu "mod-custom120" - bei Bedarf anpassen. */ .container-topbar div#mod-custom124, .container-topbar div#mod-custom124 p { color: #000000 !important; } /* Schiebt das allerletzte Modul (Ergänzungsinfo) an den rechten Rand */ .container-topbar > *:last-child { margin-left: auto !important; } /* 2. HAMBURGER-ICON */ .container-topbar .navbar-expand-lg .navbar-toggler { display: block !important; visibility: visible !important; opacity: 1 !important; } .container-topbar .navbar-toggler .icon-menu, .container-topbar .navbar-toggler span { filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important; } /* 3. MENÜ-RUHEZUSTAND */ .container-topbar .navbar-expand-lg .navbar-collapse:not(.show) { display: none !important; visibility: hidden !important; } /* 4. GEÖFFNETES OVERLAY-KÄSTCHEN */ .container-topbar .navbar-expand-lg .navbar-collapse.show { display: block !important; visibility: visible !important; position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; z-index: 99999 !important; background-color: #ffffff !important; padding: 15px 20px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; border: 1px solid #e5e5e5 !important; border-radius: 6px !important; min-width: 320px !important; /* Breite erhöht, damit Pfeile mehr Platz haben */ } /* 5. VERTIKALES MENÜ & OPTIMIERTER ZEILENABSTAND */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu { display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; } .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu li.metismenu-item { display: block !important; float: none !important; width: 100% !important; position: relative !important; margin-top: 0 !important; margin-bottom: 3px !important; /* Spalt zwischen den Zeilen */ padding: 0 !important; } /* FIX: Zwingt alle Links, Buttons und SPAN-Headings (wie "Einstellungen"), linksbündig zu bleiben */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu a, .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu button.mod-menu__heading, .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu span.mod-menu__heading { color: #333333 !important; text-decoration: none !important; display: inline-block !important; /* Verhindert das Ausbrechen nach rechts */ float: none !important; text-align: left !important; font-size: 15px !important; background: none !important; border: none !important; line-height: 1.3 !important; padding: 4px 0 !important; margin: 0 !important; min-height: 0 !important; width: calc(100% - 40px) !important; /* Lässt rechts Platz für den Pfeil */ } /* Spezifischer Fix für den rein textbasierten Menüpunkt (Einstellungs-Überschrift) */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu span.mod-menu__heading { font-weight: bold !important; /* Hebt reine Überschriften optisch ab */ width: 100% !important; /* Darf die volle Breite nutzen, da kein Untermenü existiert */ } /* Hover-Farbe für echte Links */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu a:hover { color: #000000 !important; } /* Nachtrag 2026-09-01 (Nutzerauftrag "Layoutvereinheitlichung Menü"): beim Anwählen/Anklicken eines Menüpunkts zeigte der Browser seinen Standard-Fokusrahmen (schwarz umrandet, "outline" - NICHT "border", daher von der Regel oben ("border: none") bisher nicht erfasst). Ersetzt durch fetten Text statt Rahmen. */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu a:focus, .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu a:active, .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu button.mod-menu__heading:focus, .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu button.mod-menu__heading:active { outline: none !important; box-shadow: none !important; font-weight: bold !important; } /* ========================================================================== 6. PFEILTASTEN-FIX (Holt die Aufklapp-Dreiecke exakt zurück) ========================================================================== */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu .mm-toggler { display: inline-block !important; visibility: visible !important; position: absolute !important; right: 0 !important; /* Setzt den Pfeil an den rechten Rand des Hauptpunktes */ top: 2px !important; /* Richtet ihn bündig an der Oberkante des Textes aus */ width: 30px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; text-align: center !important; cursor: pointer !important; z-index: 10 !important; /* Garantiert Klickbarkeit über dem Text-Link */ } /* Gestaltet das Metismenu-Standarddreieck sichtbar in Schwarz */ .container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu .mm-toggler::after { color: #333333 !important; font-size: 12px !important; display: inline-block !important; visibility: visible !important; } /* Nachtrag 2026-09-01 (Nutzerauftrag "Layoutvereinheitlichung Menü"): auch der Auf-/Zuklapp-Pfeil (".mm-toggler" ist ein