/* ========================================================== */
/* 1. HEADER-BEREICH (HAUPTMENÜ REIN HORIZONTAL & EINZEILIG)  */
/* ========================================================== */
header .astroid-menu,
header .navbar-nav,
header .mod-menu ul {
    flex-wrap: nowrap !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 2px !important;
    width: 100% !important;
}

header .astroid-menu > li,
header .navbar-nav > li {
    margin-right: 2px !important;
}

header .astroid-menu > li > a,
header .navbar-nav > li > a,
header .astroid-menu .nav-link,
header .navbar-nav .nav-link {
    padding-left: 3px !important;
    padding-right: 3px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
}

.col-lg-2,
.col-lg-2 .astroid-social-profiles {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

header .astroid-menu .dropdown-menu,
header ul.mod-menu__sub {
    top: 90% !important;
    margin-top: 0 !important;
}

@media (min-width: 992px) {
    header .astroid-column:first-of-type,
    header [class*="col-"]:first-of-type,
    header .col-lg-10 {
        width: 86% !important;
        max-width: 86% !important;
        flex: 0 0 86% !important;
    }
    header .astroid-column:last-of-type,
    header [class*="col-"]:last-of-type,
    header .col-lg-2 {
        width: 14% !important;
        max-width: 14% !important;
        flex: 0 0 14% !important;
    }
}

/* ========================================================== */
/* 2. HEADER-DROP-DOWNS (UNTERMENÜS FÜR BRIARD & CO. VERTIKAL)*/
/* ========================================================== */
header li.nav-item {
    position: relative !important;
}

header ul.mod-menu__sub,
header .astroid-menu .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: #ffffff !important;
    padding: 10px 15px !important;
    min-width: 240px !important;
    width: auto !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2) !important;
    z-index: 9999 !important;
}

/* ========================================================== */
/* 3. CONTENT-BEREICH (STRUKTUR FÜR DAS SEITENMENÜ LINKS)     */
/* ========================================================== */
.astroid-content-section .row,
#astroid-content .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* Sichert die 25% Breite für die linke Spalte */
.astroid-content-section [class*="col-lg-3"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}

/* Sichert die 75% Breite für den Hauptinhalt rechts */
.astroid-content-section .col-lg-9,
.astroid-content-section [class*="col-lg-9"],
.astroid-content-section [class*="col-"]:last-of-type {
    flex: 0 0 75% !important;
    max-width: 75% !important;
    width: 75% !important;
}

/* Zwingt das linke Seitenmenü radikal vertikal untereinander */
div[class*="col-lg-3"] .astroid-menu,
div[class*="col-lg-3"] .navbar-nav,
div[class*="col-lg-3"] ul.mod-menu {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

div[class*="col-lg-3"] li.nav-item,
div[class*="col-lg-3"] li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

div[class*="col-lg-3"] .nav-link,
div[class*="col-lg-3"] a {
    display: block !important;
    width: 100% !important;
}

/* ========================================================== */
/* 4. IHRE FARB-STRUKTUR & TASTENFARBEN                       */
/* ========================================================== */
body, #astroid-body, .astroid-topbar, .astroid-top-section, .astroid-wrapper,
#astroid-content, .astroid-content-section, #astroid-footer, .astroid-footer-section,
#astroid-copyright, .astroid-copyright-section, header.astroid-header-section + div {
    background-color: #59fffe !important;
    background: #59fffe !important;
    color: #333333 !important;
}

.astroid-menu-section, .astroid-navigation, .astroid-nav-wrap, #astroid-header .navbar-nav {
    background-color: #58cdcc !important;
}

#astroid-header .nav-link, #astroid-header .menu-item {
    background-color: #58cdcc !important;
    color: #333333 !important;
}

/* Macht die aktive Menütaste im Hauptmenü hellblau und lesbar */
.astroid-main-menu .active a, 
.astroid-main-menu .current a, 
.nav-link.active,
#astroid-header .nav-item.active .nav-link, 
#astroid-header .nav-item.current .nav-link {
    background-color: #a6ffff !important;
    color: #333333 !important;
}

/* Hintergrund und Tasten der linken Seitenleiste (#58cdcc) */
.astroid-content-section [class*="col-lg-3"] {
    background-color: #58cdcc !important;
    padding: 15px;
    border-radius: 4px;
}

.astroid-content-section [class*="col-lg-3"] .nav-link,
.astroid-content-section [class*="col-lg-3"] a {
    background-color: #58cdcc !important;
    color: #333333 !important;
    display: block;
    padding: 8px 12px;
    text-decoration: none;
}

.astroid-content-section [class*="col-lg-3"] .active > a,
.astroid-content-section [class*="col-lg-3"] .current > a,
.astroid-content-section [class*="col-lg-3"] a:hover,
.astroid-content-section [class*="col-lg-3"] .nav-link.active {
    background-color: #a6ffff !important;
    color: #333333 !important;
    font-weight: bold;
}

.astroid-footer-menu, #astroid-footer .moduletable_menu, #astroid-footer .nav {
    background-color: #58cdcc !important;
}


/* Versteckt den langen, doppelten Hauptkategorie-Namen im Titel falls nötig */
.pg-cv-name {
    text-shadow: none !important;
}


/* ========================================================== */
/* UNBEDINGTE SCHRIFT-SISS-SPERRE FÜR PHOCA (DE & EN STABIL)   */
/* ========================================================== */

/* Zwingt absolut jeden Überschriften-Typ in den Phoca-Boxen auf 11px */
.pg-cv-name, 
.pg-title,
.pg-box-title,
.phocagallery-box-file-first a,
.pg-categories-view-box h1,
.pg-categories-view-box h2,
.pg-categories-view-box h3,
.pg-categories-view-box h4,
.pg-categories-view-box h5,
div[class*="pg-"] h1,
div[class*="pg-"] h2,
div[class*="pg-"] h3,
div[class*="pg-"] h4,
div[class*="pg-"] h5- {
    font-size: 11px !important; /* Herrlich klein, zierlich und elegant */
    font-weight: bold !important;
    text-shadow: none !important; 
    line-height: 1.2 !important;
    color: #ffffff !important;
}


/* ========================================================== */
/* POPUP-BEREINIGUNG: UNGEWOLLTE BUTTONS IM POPUP ENTFERNEN   */
/* ========================================================== */

/* Blendet den Share-Button (Teilen-Pfeil) im Popup radikal aus */
.pswp__button--share,
button.pswp__button--share,
.phoca-lightbox-share {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    opacity: 0 !important;
}

/* Falls Sie auch den Vollbild-Button (Maximieren) ausblenden möchten: */
.pswp__button--fs,
button.pswp__button--fs {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
}


/* 1. DIE GRUNDORDNUNG FÜR DIE BILDER-REIHE */
.j51imagehover {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Wieder da: Schöner Abstand zwischen den Bildern! */
}

/* 2. DIE BILD-KARTEN (Brav nebeneinander, kein wildes Wachsen mehr) */
.j51imagehover .j51imghvr-item {
    flex: 0 0 calc(50% - 7.5px); /* Perfekt für 2 Spalten: Exakt 50% Breite minus der halbe Abstand! */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Smartphone-Ansicht: Unter 767px Breite schalten wir automatisch auf 1 Spalte um */
@media only screen and (max-width: 767px) {
    .j51imagehover .j51imghvr-item {
        flex: 1 1 100%; /* Auf dem Handy füllt jedes Bild die ganze Breite aus */
    }
}

.j51imagehover .j51imghvr-item figure {
    position: relative !important;
    z-index: 1 !important; /* Bild bleibt im Hintergrund */
    margin: 0;
    width: 100%;
    height: 100%;
}

.j51imagehover .j51imghvr-item img {
    display: block;
    width: 100% !important;
    height: auto !important;
    transition: transform 0.35s ease; /* Wieder da: Macht den Zoom flüssig! */
}

/* 3. DER ZAUBER-EFFEKT BEIM HOVER */
/* Das Bild zoomt leicht heran, wenn die Maus kommt */
.j51imagehover .j51imghvr-item figure:hover img {
    transform: scale(1.05); /* Wieder da: Der edle Zoom-Effekt! */
}

/* 1. Das Hover-Overlay mit Ihrer neuen Cyan-Farbe */
.j51imagehover .j51imghvr-item figcaption {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 9999 !important; /* Text drängt sich nach ganz vorne */
    background-color: rgba(89, 255, 254, 0.5) !important; /* Ihre neue Wunschfarbe */
    transition: opacity 0.35s ease;
    pointer-events: none; /* Maus klickt durch den Text hindurch auf den Link */

    /* Sorgt dafür, dass Lupe und Text perfekt zentriert untereinander sitzen */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. Die Lupe (passend in Textfarbe #333333 eingefärbt) */
.j51imagehover .j51imghvr-item figcaption::before {
    content: "🔍"; /* Das Lupen-Symbol */
    font-size: 32px; /* Die Start-Größe (kann später angepasst werden) */
    color: #333333; /* Exakt dieselbe Farbe wie Ihr Text */
    margin-bottom: 12px; /* Schöner Abstand zum Text darunter */
    display: block;
}

/* 3. Wenn die Maus kommt, blendet sich das Overlay sanft ein */
.j51imagehover .j51imghvr-item figure:hover figcaption {
    opacity: 1 !important;
}

/* 4. DER UNSICHTBARE KLICK-LINK ÜBER DER GANZEN KARTE */
.j51imagehover .j51imghvr-item a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999 !important; /* Der Link liegt ganz oben wie eine Glasscheibe */
}


/* ==========================================
   AHNEN-LAUFBAND ABSOLUTE REPARATUR
   ========================================== */

/* 1. Der äußere Rahmen (Das Sichtfenster) */
.ahnen-laufband {
    width: 100% !important;
    overflow: hidden !important; /* Versteckt alles, was rechts rausragt */
    position: relative !important;
    padding: 15px 0 !important;
    display: block !important;
}

/* 2. Die Bilderreihe in eine einzige lange Reihe zwingen */
.ahnen-laufband .sigplus-gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important; /* Erlaubt der Reihe, unendlich lang zu werden */
    animation: marquee-ahnen 30s linear infinite !important; /* 30 Sekunden für einen Durchlauf */
}

/* 3. Pause beim Drüberfahren mit der Maus */
.ahnen-laufband:hover .sigplus-gallery {
    animation-play-state: paused !important;
}

/* 4. Die Bewegung von rechts nach links */
@keyframes marquee-ahnen {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-33.33%, 0, 0); } /* Schiebt die Kette flüssig weiter */
}

/* 5. Die einzelnen Bilder-Boxen von sigplus zähmen */
.ahnen-laufband .sigplus-gallery a {
    display: inline-block !important;
    margin-right: 15px !important; /* Schöner Abstand zwischen den Ahnen */
    flex: 0 0 auto !important;
}

/* 6. Die einheitliche Höhe für die Ahnen-Fotos */
.ahnen-laufband .sigplus-gallery img {
    height: 150px !important; /* Alle Fotos werden exakt 150px hoch */
    width: auto !important;   /* Breite passt sich automatisch an */
    display: block !important;
    border-radius: 4px !important; /* Schicke, leicht abgerundete Ecken */
    transition: transform 0.3s ease !important;
}

/* Kleiner Extra-Effekt: Das Bild hebt sich leicht, wenn die Maus draufsteht */
.ahnen-laufband .sigplus-gallery a:hover img {
    transform: scale(1.03) !important;
}

/* Blendet die Beschriftung unter den Vorschaubildern im Ahnen-Laufband komplett aus */
.ahnen-laufband .sigplus-gallery span {
    display: none !important;
}

.ba-rotator-lightbox img, .ba-lightbox img, .mfp-img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
}


/* 1. Erzwingt die einheitliche Kachelgröße und verhindert das schmale Quetschen */
.hp-zoom-img .sigProContainer,
.hp-zoom-img .sigProPseudoThumbs,
.hp-zoom-img .sigProThumb,
.hp-zoom-img a.sigProThumb,
.hp-zoom-img img {
    height: 250px !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
}

/* 2. Zwingt das gesamte Galerie-Element der SIG Pro starr an den linken Rand */
.hp-zoom-img .sigProContainer,
.hp-zoom-img .sigProPseudoThumbs,
.hp-zoom-img .sigProContainer .sigProThumb {
    float: left !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    text-align: left !important;
}

/* 3. Der sanfte Zoom-Effekt beim Hovern */
.hp-card:hover .hp-zoom-img img {
    transform: scale(1.1) !important;
}

/* 4. Blendet den Text unter den Kacheln im Beitrag sicher aus (lässt das Popup in Ruhe) */
.hp-card .sigProCaption,
.hp-card .sigProText,
.hp-card .sigProDesc,
.hp-card br,
.hp-card p {
    display: none !important;
}


/* 1. Hauptmenü: Schließt die Lücke und baut eine unsichtbare Brücke für die Maus */
.astroid-menu .dropdown, 
.navbar-nav .dropdown {
    position: relative !important;
}

.astroid-menu .dropdown::after, 
.navbar-nav .dropdown::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -30px !important; /* Reicht weit genug nach unten */
    height: 35px !important;   /* Baut die unsichtbare Brücke */
    background: transparent !important;
    z-index: 9999 !important;
}

/* 2. Seitenmenü: Schließt die Lücke für aufklappende Menüs an der Seite */
.mod-menu .dropdown-menu,
.astroid-menu .dropdown-menu,
.navbar-nav .dropdown-menu {
    margin-top: -2px !important; /* Schiebt das Untermenü direkt an die Kante */
}


/* 1. Ändert die Schrift auf den Bildern in Ihr gewünschtes Grau */
.olweb_carousel3d .carousel-caption,
.olweb_carousel3d h5,
.olweb_carousel3d p,
.olweb_carousel3d span {
    color: #999999 !important;
}

/* 2. Macht den Popup-Hintergrund wunderschön Türkis statt Schwarz */
.lg-backdrop,
.lg-outer,
.olweb-lightbox-backdrop,
.olweb-lightbox-outer,
[class*="lightbox-backdrop"],
[class*="lg-background"] {
    background-color: #59FFFE !important;
    background: #59FFFE !important;
}

/* Zwingt die lightGallery des 3D-Karussells in die Knie und vernichtet die Symbole */
html body .lg-actions,
html body .lg-toolbar,
html body .lg-toolbar .lg-icon,
html body button[id*="share"],
html body button[class*="share"],
html body .lg-share,
html body .lg-fullscreen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}


/* Ändert die Hintergrundfarbe der boxplus-Lightbox in Ihr geliebtes Türkis */
.boxplusx-dialog {
    background-color: #59EEEF !important;
    background: #59EEEF !important;
    border: none !important; /* Entfernt den alten grauen Standard-Rand */
}


/* Fixes the Astroid sidebar menu shift on active sub-menus */
.astroid-sidebar-menu .menu-item.current.parent > a, 
.astroid-sidebar-menu .nav-item.active > a {
    margin-top: 0 !important;
    padding-top: inherit !important;
}

.astroid-sidebar-menu ul.nav {
    display: block !important;
}


/* Abstand NUR für das Ahnenlaufband in der Nachzucht-Box */
.nachzucht-box .sigplus-gallery img {
    margin: 15px !important;
}


/* Ultimativer Override für JCE Mediabox Texte & Links */
.wf-mediabox-caption,
.wf-mediabox-caption *,
[class*="wf-mediabox"] .wf-mediabox-caption,
[class*="wf-mediabox"] .wf-mediabox-caption a {
    color: #666666 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Hover-Effekt */
.wf-mediabox-caption a:hover,
[class*="wf-mediabox"] .wf-mediabox-caption a:hover {
    color: #BD922A !important;
    text-decoration: underline !important;
}


.verstecke-filter #js-archive-filters,
.verstecke-filter .filters {
    display: none !important;
}