/* ==========================================================================
   1. SPRACHFLAGGEN & LOGO-OPTIMIERUNG
   ========================================================================== */
/* WEISSEN RAND BEI AKTIVER FLAGGE ENTFERNEN */
.mod-languages .lang-active, .mod-languages .lang-active img,
.mod-languages img.lang-active, .languages-inline .active,
.languages-inline .active img, [class*="lang"] .active, [class*="lang"] .active img,
.mod-languages a.active, .mod-languages li.active {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}


.yj-logo, #logo, .logo, .navbar-brand, [class*="logo"] {
    display: block !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.yj-logo img, #logo img, .logo img, .navbar-brand img, [class*="logo"] img {
    display: block !important;
    max-width: 1920px !important;
    width: 1920px !important;
    height: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
}


/* ==========================================================================
   2. REINIGUNG DES INHALTSBEREICHS (BOXEN ENTFERNEN)
   ========================================================================== */
#yj-mainbody, mainbody, #yj-container, .container, #yj-content, .content,
.yj-module, .module, div.ba-mod, #user1, .user1, main, .main, #main {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   3. HAUPTMENÜ (INNER1) & SIDEBAR-RECHTECK FIXES
   ========================================================================== */
#inner1.moduletable_menu li, #inner1 .menu li, #inner1 li {
    display: inline-block !important;
    float: left !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#position-7 li, .position-7 li, #position-6 li, .position-6 li, .sidebar li, nav[class*="sidebar"] li {
    display: block !important;
    display: list-item !important;
    float: none !important;
    clear: both !important;
    padding: 8px 0 !important;
    width: 100% !important;
}

/* DROPDOWN-STYLING BEIM HOVERN (IHRE DUNKELROTE VEREINSFARBE) */
.navbar-nav li:hover > ul, .menu li:hover > ul, #inner1 li:hover > ul,
.dropdown:hover > .dropdown-menu, li.dropdown:hover > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    background-color: #731A0C !important; 
    min-width: 160px !important;
    z-index: 99999 !important;
    list-style: none !important;
    padding: 10px !important;
    margin: 0 !important;
}

#inner1 li ul li, .dropdown-menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    position: relative !important;
}

#inner1 li ul a, .dropdown-menu a {
    color: #F7F2A3 !important; /* Ihr edles Gelb */
    display: block !important;
    padding: 5px 10px !important;
}

/* 3. EBENE (HUNDENAMEN) SEITLICH AUSBRECHEN LASSEN */
#inner1 li ul li ul, .dropdown-menu li.dropdown-menu, .dropdown-menu li ul {
    display: none !important;
    position: absolute !important;
    top: 0 !important; 
    left: 100% !important; 
    background-color: #731A0C !important; 
    min-width: 160px !important;
    z-index: 999999 !important;
    list-style: none !important;
    padding: 10px !important;
    margin: 0 !important;
    border: none !important;
}

#inner1 li ul li:hover > ul, .dropdown-menu li:hover > .dropdown-menu, .dropdown-menu li:hover > ul {
    display: block !important;
}

#inner1 li ul li ul a, .dropdown-menu li ul a, .dropdown-menu li.dropdown-menu a {
    color: #F7F2A3 !important;
    font-size: 14px !important;
    display: block !important;
    padding: 5px 10px !important;
    text-transform: none !important;
}

/* ==========================================================================
   4. LAYOUT-KORREKTUREN (ARTIKEL, ARCHIV, NAVI)
   ========================================================================== */
#archive-search, .archive-search, .filter-search, form [id*="archive"] .filters, form[id*="archive"] .btn-wrapper,
#inner2 #archive-search select, #inner2 #archive-search input, #inner2.archive-search select {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.article-index, .toc, #article-index, .page-navigation, pull-right.toc {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.page-header, counter, .pagination {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

h2, .item-title, h2 [itemprop="name"], .page-header h2 {
    margin-top: 20px !important;
    margin-bottom: 25px !important; 
    padding-bottom: 5px !important;
}

.page-navigation a, .page-link, pager a, .pagenav a, .next a, .prev a, [class*="pager"] a, [class*="page-navigation"] a {
    color: #F7F2A3 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    text-decoration: none !important;
}

.page-navigation a:hover, .page-link:hover, .pager a:hover, .pagenav a:hover {
    color: #ffffff !important;
    background-color: transparent !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   5. WUCHTIGER TOP-PFEIL AN DER BRANDUNG DER 1200PX-LINIE
   ========================================================================== */
.cc-top-pfeil {
    position: fixed !important;
    bottom: 60px !important; 
    left: calc(50% - 600px) !important; 
    background: transparent !important;
    background-color: transparent !important;
    color: #F7F2A3 !important;
    font-size: 65px !important;
    font-weight: 900 !important; 
    font-family: Arial, sans-serif !important; 
    width: 70px !important;
    height: 70px !important;
    line-height: 50px !important; 
    text-align: center !important;
    text-decoration: none !important;
    z-index: 999999 !important; 
    display: block !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.2s ease !important;
}

.cc-top-pfeil:hover {
    color: #ffffff !important;
    transform: scale(1.15) !important; 
}

/* ==========================================================================
   DOPPELZEILEN-FIX: ERZWINGT ECHTES DROPDOWN AUF ALLEN UNTERSEITEN
   ========================================================================== */

/* 1. Hauptmenü-Punkte starr in einer horizontalen Reihe halten */
#inner1 ul.menu, #inner1 .menu, .moduletable_menu ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#inner1 ul.menu > li, #inner1 .menu > li {
    display: inline-block !important;
    float: none !important;
    position: relative !important;
}

/* 2. Untermenü (Dyoma, Memy etc.) standardmäßig komplett unsichtbar machen */
#inner1 ul.menu li ul, #inner1 .menu li ul, .moduletable_menu li ul,
#inner1 ul.menu li div, #inner1 .menu li div {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 99999 !important;
}

/* 3. Untermenü nur dann einblenden, wenn man mit der Maus auf den Hauptpunkt zeigt */
#inner1 ul.menu li:hover > ul, #inner1 .menu li:hover > ul, .moduletable_menu li:hover > ul,
#inner1 ul.menu li:hover > div, #inner1 .menu li:hover > div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4. Verhindert das vertikale Aufspalten der Hauptpunkte */
#inner1 ul.menu li ul li, #inner1 .menu li ul li {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

/* ==========================================================================
   6. J51 - IMAGEHOVER GALLERY (2 COLUMNS MIT STABILER LUPE & FETTSCHRIFT)
   ========================================================================== */
.j51imagehover {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important; /* Harmonischer Zwischenraum */
    margin: 20px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 2 SPALTEN ERZWINGEN (Geparkt auf 50% minus halber Abstand) */
.j51imagehover .j51imghvr-item {
    flex: 0 0 calc(50% - 7.5px) !important; 
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Automatische Anpassung auf mobilen Smartphones auf 100% Breite */
@media only screen and (max-width: 767px) {
    .j51imagehover .j51imghvr-item { 
        flex: 0 0 100% !important; 
    }
}

.j51imagehover .j51imghvr-item figure {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

.j51imagehover .j51imghvr-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transition: transform 0.35s ease !important;
}

/* 4. BLASS-TRANSPARENTES OVERLAY */
.j51imagehover .j51imghvr-item figcaption {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    background-color: rgba(255, 255, 255, 0.45) !important; 
    color: #333333 !important;
    transition: opacity 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    z-index: 2 !important;
}

/* DIE LUPE: Absolut browser-sicher formatiert */
.j51imagehover .j51imghvr-item figcaption::before {
    content: "🔍" !important; 
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 36px !important; /* Schön markant und gut sichtbar */
    margin-bottom: 10px !important; 
    display: block !important;
}

/* 5. TEXT-STRUKTUR: EXTREM DEUTLICH & GEBALLT FETT */
.j51imagehover .j51imghvr-item figcaption h3 {
    font-size: 19px !important; /* Leicht vergrößert für das 2-Spalten-Layout */
    font-weight: 800 !important; 
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    color: #111111 !important;
}

.j51imagehover .j51imghvr-item figcaption p {
    font-size: 14px !important;
    font-weight: 700 !important; /* Schön dick lesbar */
    line-height: 1.4 !important;
    margin: 3px 0 !important;
    padding: 0 !important;
    color: #222222 !important;
}

/* Farbakzente für Ihre Geschlechtssymbole (♂ und ♀) */
.j51imagehover .j51imghvr-item figcaption .ruede {
    color: #0056b3 !important; 
    font-weight: 900 !important;
    font-size: 18px !important;
}

.j51imagehover .j51imghvr-item figcaption .huendin {
    color: #d81b60 !important; 
    font-weight: 900 !important;
    font-size: 18px !important;
}

.j51imagehover .j51imghvr-item figcaption a { color: #333333 !important; }
.j51imagehover .j51imghvr-item figure:hover figcaption { opacity: 1 !important; }
.j51imagehover .j51imghvr-item figure:hover img { transform: scale(1.03) !important; }
.j51imagehover .j51imghvr-item a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 3 !important;
}


/* =====================================================================
   1. REGULÄRE KACHEL-GALERIE (EINHEITLICHE GRÖSSE & SANFTER ZOOM) - REPARIERT
   ===================================================================== */

/* Das äußere Listen-Element (die Kachel-Hülle) bekommt die feste Größe */
.sigplus-gallery li,
.sigplus-gallery .sigplus-thumb {
    height: 250px !important;
    width: 250px !important; /* Gibt der Kachel eine quadratische Basis */
    display: inline-block !important;
    overflow: hidden !important; /* Schneidet das herangezoomte Bild sauber ab */
    position: relative !important;
    margin: 5px !important; /* Gibt den Kacheln etwas Abstand zueinander */
}

/* Der Link selbst bleibt völlig flexibel, damit er anklickbar ist */
.sigplus-gallery a {
    display: inline !important; /* WICHTIG: Setzt den Link zurück auf Standard */
    width: auto !important;
    height: auto !important;
}

/* Macht die Kachelbilder flüssig und füllt die 250px-Hülle perfekt aus */
.sigplus-gallery img,
.sigplus-gallery a img {
    height: 250px !important;
    width: 250px !important;
    object-fit: cover !important; /* Füllt die 250px Kachel perfekt aus */
    display: block !important;
    transition: transform 0.3s ease-in-out !important; /* Macht den Zoom seidenweich */
}

/* Der sanfte Zoom-Effekt beim Überfahren der Kacheln */
.sigplus-gallery .sigplus-thumb:hover img,
.sigplus-gallery a:hover img {
    transform: scale(1.06) !important;
}


/* =====================================================================
   BA SLIDESHOW LINK-BLOCKIERUNG (GENERALKLAUSEL)
   ===================================================================== */

/* 1. Schritt: Deaktiviere radikal ALLE Links in der gesamten Slideshow */
div[class*="slideshow"] a,
div[class*="gallery"] a {
    pointer-events: none !important;
    cursor: default !important;
}

/* 2. Schritt: Aktiviere gezielt NUR die kleinen Vorschaubilder im Slider-Band unten wieder */
div[class*="slideshow"] div[class*="thumb"] a,
div[class*="slideshow"] ul a,
div[class*="slideshow"] li a,
div[class*="slideshow"] img[src*="thumb"] a,
.slideshow-thumbnails a,
.ba-thumb-container a {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* =====================================================================
   BESTADDON SLIDESHOW: VERSTECKTE TEXTE SICHTBAR MACHEN
   ===================================================================== */

/* Schiebt die Textbox ganz nach vorne und erzwingt die Anzeige */
.ba-gallery-title,
.ba-gallery-caption,
div[class*="ba-gallery"] .title,
div[class*="ba-gallery"] .caption {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999 !important; /* Schiebt den Text vor das Bild */
    color: #ffffff !important; /* Strahlend weißer Text */
}

/* Zwingt alle Texte und Links innerhalb der Slideshow-Beschreibung auf Weiss */
div[class*="ba-gallery"] .title *,
div[class*="ba-gallery"] .caption *,
.ba-gallery-title *,
.ba-gallery-caption * {
    color: #ffffff !important;
    font-size: 14px !important; /* Sorgt für eine gut lesbare Größe */
}

/* =====================================================================
   REPARATUR: UNBEDINGTE FREIGABE FÜR SIGPLUS-KACHELN
   ===================================================================== */

/* Zwingt den Browser, Klicks auf allen Sigplus-Links wieder zuzulassen */
.sigplus-gallery,
.sigplus-gallery a,
.sigplus-gallery .sigplus-thumb,
.sigplus-gallery img {
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* ==========================================================================
   NEW: ABSTAND NACH OBEN WEGEN FIXIERTER MENÜLEISTE & TEXT-ABSTÄNDE
   ========================================================================== */
#yj-mainbody, main, .main, #main, .item-page {
    padding-top: 35px !important;
}

/* Abstand unter dem großen Beitragstitel (z.B. Jaris) */
.page-header h2, h2.item-title {
    margin-bottom: 50px !important;
}

/* Blendet NUR die blasse, vertikale Liste auf den Unterseiten aus */
#topmenu ul.nav, 
#topmenu ul.mod-menu, 
#topmenu .navbar-collapse ul {
    display: none !important;
}