@import url('https://googleapis.com');

/* ==========================================================================
   1. GLOBAL SYSTEM & BACKGROUNDS
   ========================================================================== */
html {
    overflow-y: scroll;
    background: #eeeeee !important;  
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif, Arial, Helvetica !important;
    font-size: 0.9em !important;
    line-height: 1.3em !important;
    color: #000000 !important;
    background-color: #eeeeee !important;
}

/* Joomla System-Variablen */
:root {
    --template-bg-light: #f9fbfc !important;
    --template-link-color: #0033cc !important;
    --template-special-color: #0088cc !important;
    --cassiopeia-color-primary: #0088cc !important;
}

/* ==========================================================================
   2. ELFENBEINFARBENER CONTAINER (Protostar-Kasten)
   ========================================================================== */
body.site .wrapper,
body.site .wrapper .container,
.site-grid {
    background-color: #fffff4 !important;
    border-top: none !important;
    border-radius: 0px !important;
    max-width: 1320px !important;
    margin: auto !important;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.05) !important;
}

/* ==========================================================================
   3. HEADER & ORIGINAL BANNER FIX
   ========================================================================== */
header.header, 
.container-header, 
.header.full-width {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-bottom: 10px !important;
}

.container-logo, .navbar-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    justify-content: center !important;
    width: 100% !important;
    float: none !important;
}

.brand-logo img, .container-logo img, .navbar-brand img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important; 
    box-shadow: none !important;
    border: none !important;
}

.site-description {
    color: #888888 !important;
    margin-top: 7px !important;
    font-size: initial !important;
    margin-bottom: 3px !important;
    text-align: left !important;
}
.phocamaps .leaflet-touch-zoom{
	z-index:0;
}
/* ==========================================================================
   SUCHLEISTE (CONTAINER-SEARCH) NACH RECHTS VERSCHIEBEN
   ========================================================================== */

/* Holt den gesamten Such-Container an den rechten Rand des Headers */
.container-search,
div.container-search,
header.header .container-search {
    display: flex !important;
    justify-content: flex-end !important; /* Richtet das Suchfeld rechtsbündig aus */
    align-items: center !important;
    margin-left: auto !important;         /* Wirkt wie ein Sprungfeder-Kissen nach links */
    margin-right: 0px !important;        /* Kleiner Sicherheitsabstand zum rechten Forenrand */
    margin-top: -15px !important;          /* Abstand nach oben */
    float: right !important;              /* Rückfalloption für ältere Layout-Stile */
}

/* Formatiert das Suchfeld und den Button im Kasten */
.container-search .mod-finder,
.container-search form,
.search-searchbox {
    display: inline-flex !important;
    flex-direction: row !important;       /* Suchfeld und Lupe nebeneinander */
    justify-content: flex-end !important;
    gap: 5px !important;                  /* Abstand zwischen Eingabefeld und Button */
}

/* Verhindert, dass die Suchbox im Kasten künstlich in die Länge gezogen wird */
.container-search input[type="search"],
.container-search input.search-query {
    max-width: 220px !important;          /* Begrenzt die Breite des Suchfeldes */
    width: 200px !important;
}

.mod-languages {
	z-index:0;
	
}



/* ==========================================================================
   4. NAVIGATION FIX (Nur das Menü-Modul direkt formatiert)
   ========================================================================== */

/* Die Menüleiste (ul) waagerecht linksbündig nebeneinander aufreihen */
ul.mod-menu.nav-pills {
    display: flex !important;
    flex-direction: row !important;      /* Waagerecht nebeneinander */
    flex-wrap: wrap !important;          /* Zeilenumbruch bei Platzmangel */
    justify-content: flex-start !important; /* Strikt LINKSBÜNDIG am Rand */
    align-items: stretch !important;
    gap: 5px !important;
    padding-left: 0 !important;          /* Entfernt Standard-Einrückung links */
    margin: 10px 0 !important;
    width: 100% !important;
    list-style: none !important;
    
    /* Die feinen grauen Trennlinien über und unter dem Menüband */
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
    background-color: #fffff4 !important;
    background: #fffff4 !important;
    box-shadow: none !important;
}

/* Die einzelnen Menüpunkte (Listen-Elemente) */
ul.mod-menu.nav-pills > li.nav-item {
    display: block !important;
    float: left !important;
    margin-left: 0 !important;
    margin-right: 2px !important;
}

/* Die Haupt-Links (Bild/Icon OBEN, Text UNTEN zentriert im Button) */
ul.mod-menu.nav-pills > li.nav-item > a {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #0033cc !important;
    border-radius: 0px !important;
    padding: 10px 12px !important;
    text-shadow: none !important;
    font-size: 14px !important;
    text-decoration: none !important;
    min-width: 80px !important;
    background: transparent !important;
}

/* Icons (Bilder) im Hauptmenü zentrieren */
ul.mod-menu.nav-pills > li.nav-item > a img {
    display: block !important;
    margin: 0 auto 6px auto !important; 
    float: none !important;
    width: auto !important;
    height: auto !important;
}

/* Text im Hauptmenü unter dem Bild ausrichten */
ul.mod-menu.nav-pills > li.nav-item > a span.image-title {
    display: block !important;
    margin-left: 0px !important; 
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Aktiver Menüpunkt & Hover-Effekte */
/*ul.mod-menu.nav-pills > li.nav-item.active > a,*/
ul.mod-menu.nav-pills > li.nav-item.current > a,
ul.mod-menu.nav-pills > li.nav-item > a:hover {
    border-radius: 0px !important;
}
/*ul.mod-menu.nav-pills > li.nav-item.active > a,*/
ul.mod-menu.nav-pills > li.nav-item.current > a {
    background: #0088cc !important;
    color: #ffffff !important;
}
/*ul.mod-menu.nav-pills > li.nav-item.active > a span.image-title,*/
ul.mod-menu.nav-pills > li.nav-item.current > a span.image-title {
    color: #ffffff !important;
}
ul.mod-menu.nav-pills > li.nav-item > a:hover {
    color: #0033cc !important;
    background-color: #e6e6e6 !important;
}

/* ==========================================================================
   4b. UNTERMENÜS FIX (Dropdowns sauber glätten)
   ========================================================================= */
ul.mod-menu.nav-pills > li.parent {
    position: relative !important;
}
ul.mod-menu__sub {
    display: none; 
    position: absolute !important;
    top: 100% !important; 
    left: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1) !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    min-width: 180px !important;
    list-style: none !important;
}

ul.mod-menu.nav-pills > li.parent:hover ul.mod-menu__sub {
    display: block !important;
}

ul.mod-menu__sub li.nav-item a {
    display: flex !important;
    flex-direction: row !important; /* Bild NEBEN Text im Untermenü */
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 8px 15px !important;
    color: #0033cc !important;
    text-decoration: none !important;
    font-size: 13px !important;
    width: 100% !important;
}

ul.mod-menu__sub li.nav-item a img {
    margin: 0 8px 0 0 !important; 
    display: inline-block !important;
}

ul.mod-menu__sub li.nav-item a:hover {
    background-color: #e6e6e6 !important;
    color: #0033cc !important;
}

.container-header .mod-menu > li + li {
    margin-left: initial !important;
    padding: initial !important;
}
.mod-list li.nav-item{
	padding: 0 !important;
}


/* ==========================================================================
   5. TEXTE & ABSÄTZE
   ========================================================================== */
p {
    font-style: italic !important;
    font-size: 1.23em !important;
    color: #333333 !important;
    line-height: 1.3 !important;
    margin: 0px 0px 1.16em !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", sans-serif, Arial, Helvetica !important;
    font-weight: 400 !important;
    color: #161E21 !important;
    margin: 12px 0 !important;
}

h2 {
    font-size: 138% !important;
    line-height: 1.3125 !important;
}

.well {
    background-color: #ffffff !important;
    box-shadow: inset 0 0 0 rgba(0,0,0,0.05) !important;
}

/* SIGE Thumbnail-Korrekturen */
.sige_thumb {
    margin-bottom: 0px !important;
    margin-top: 5px !important;
}
.sige_thumb img {
    margin: -5px 5px 5px -10px !important;
}
.sige_caption {
    margin-left: -1px !important;
    font-weight: normal !important;
    font-size: smaller !important;
}


/* Macht die hochskalierten GIF-Flaggen im Sprachwähler scharf */
.mod-languages img,
.mod-languages ul li img {
    image-rendering: -moz-crisp-edges !important;    /* Firefox */
    image-rendering: -o-crisp-edges !important;      /* Opera */
    image-rendering: -webkit-optimize-contrast !important; /* Safari/Chrome */
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;           /* Moderne Browser */
    
    width: 30px !important;                          /* Ihre Wunschbreite */
    height: auto !important;                         /* Proportionale Höhe */
	margin:3px !important;

}
.mod-languages ul li{
	height:30px !important;
	padding:3px !important;
}
.mod-languages ul li a{
	padding:3px !important;
}
div.mod-languages ul li.lang-active {
    background-color: #dddddd !important;
}
.mod-languages ul li:has(a:hover){
	background-color: #bbbbbb !important;
	padding:3px !important;
}


/* Verkleinert das riesige Passkey-Schlüssel-SVG im Login-Button */
button.plg_system_webauthn_login_button svg,
svg[id="Passkey"] {
    width: 24px !important;    /* Gewünschte Breite des Schlüssels */
    height: 24px !important;   /* Gewünschte Höhe des Schlüssels */
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important; /* Abstand zum Text "Passkey verwenden" */
}
/* Blendet den verwirrenden Private-Nachricht-Tab im Kunena-Editor aus */
#profile-tab{
    display: none !important;
}