/* ==========================================================================
   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 <header>-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" ("<p>ihre Themen "im
   Bild"</p>" 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;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   7. UNTERMENÜ-ABSTÄNDE (2. EBENE)
   ========================================================================== */
.container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu ul.mm-collapse {
    position: static !important;
    display: none !important;
    visibility: hidden !important;
    float: none !important;
    padding-left: 15px !important; /* Rrückt Unterpunkte ein */
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Macht geöffnete Unterpunkte sichtbar */
.container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu ul.mm-collapse.mm-show {
    display: block !important;
    visibility: visible !important;
}

.container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu ul.mm-collapse li {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
}

.container-topbar .navbar-expand-lg .navbar-collapse.show ul.metismenu ul.mm-collapse a {
    font-size: 14px !important;
    color: #555555 !important;
    line-height: 1.2 !important;
    padding: 3px 0 !important;
}

/* ==========================================================================
   SUPERUSER / LOGIN FIX V3: PFEIL-UMBRUCH & HEADING-ABSTAND BEHEBEN
   ========================================================================== */