/* =========================================================
   Ahnen- und Familienforschung Dirk Ullrich
   Anpassungen für Cassiopeia Extended
   ========================================================= */


/* ---------------------------------------------------------
   1. HEADER
   --------------------------------------------------------- */

.container-header {
    background-color: #ffffff;
    background-image: none;
    box-shadow: none;
}


/* ---------------------------------------------------------
   2. KOPFBEREICH
   --------------------------------------------------------- */

.container-header .grid-child {
    padding-top: 0;
    padding-bottom: 0;
}


/* ---------------------------------------------------------
   3. BRAND / LOGO
   --------------------------------------------------------- */

.container-header .navbar-brand {
    color: #203864;
    font-weight: 500;
}

.container-header .navbar-brand img {
    max-height: 95px;
    width: auto;
}


/* ---------------------------------------------------------
   4. NAVIGATION
   --------------------------------------------------------- */

.container-header .navbar {
    padding-top: 12px;
    padding-bottom: 12px;
}

.container-header .navbar-nav > li > a,
.container-header .navbar-nav > li > .nav-link {
    color: #ffffff;
}

.container-header .navbar-nav > li > a:hover,
.container-header .navbar-nav > li > .nav-link:hover {
    color: #ffffff;
}


/* ---------------------------------------------------------
   5. NAVIGATION HINTERGRUND
   --------------------------------------------------------- */

.container-header .navbar {
    background-color: #203864;
}


/* ---------------------------------------------------------
   6. AKTIVER MENÜPUNKT
   --------------------------------------------------------- */

.container-header .navbar-nav > .current > a,
.container-header .navbar-nav > .current > .nav-link {
    color: #ffffff;
    font-weight: 600;
}


/* ---------------------------------------------------------
   7. MOBILE NAVIGATION
   --------------------------------------------------------- */

 {

    .container-header .navbar {
        padding: 10px 15px;
    }

    .container-header .navbar-brand img {
        max-height: 70px;
    }

}

/* =========================================================
   HEADER – Ahnen- und Familienforschung
   ========================================================= */

.af-header {
    max-width: 1320px;
    margin: 0 auto;
    min-height: 95px;

    display: flex;
    align-items: center;

    padding: 10px 25px;
    box-sizing: border-box;

    background: #ffffff;
}

.af-header-logo {
    flex: 0 0 auto;
    margin-right: 22px;
}

.af-header-logo img {
    display: block;
    width: auto;
    max-width: 145px;
    max-height: 105px;
}

.af-header-text {
    display: flex;
    flex-direction: column;
}

.af-header-title {
    color: #203864;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 2.15rem;
    line-height: 1.15;
    font-weight: 600;
}

.af-header-subtitle {
    margin-top: 8px;

    color: #6b6258;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.05rem;
    font-style: italic;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

 {

    .af-header {
        min-height: auto;

        padding: 15px;

        align-items: center;
    }

    .af-header-logo {
        margin-right: 15px;
    }

    .af-header-logo img {
        max-width: 70px;
        max-height: 70px;
    }

    .af-header-title {
        font-size: 1.25rem;
    }

    .af-header-subtitle {
        font-size: 0.85rem;
        margin-top: 4px;
    }
}
/* =========================================================
   HAUPTNAVIGATION
   ========================================================= */

/* Abstand zwischen Header und Navigation reduzieren */
.container-header {
    margin-bottom: 0;
}

.container-header .container-nav {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}


/* Navigationsleiste */
.container-header .navbar {
    background-color: #203864;
    padding: 0;
    min-height: 48px;
}


/* Menü auf die verfügbare Breite bringen */
.container-header .navbar-nav {
    width: 100%;
    display: flex;
    align-items: stretch;
}


/* Einzelne Menüpunkte */
.container-header .navbar-nav > li > a,
.container-header .navbar-nav > li > .nav-link {
    color: #ffffff;
    padding: 14px 18px;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
}


/* Hover */
.container-header .navbar-nav > li > a:hover,
.container-header .navbar-nav > li > .nav-link:hover {
    background-color: #2d4b7c;
    color: #ffffff;
}


/* Aktiver Menüpunkt */
.container-header .navbar-nav > li.current > a,
.container-header .navbar-nav > li.current > .nav-link {
    background-color: #162b4d;
    color: #ffffff;
    font-weight: 600;
}


/* Dropdown-Pfeile */
.container-header .navbar-nav .dropdown-toggle::after {
    margin-left: 7px;
}


/* ---------------------------------------------------------
   DROPDOWN-MENÜS
   --------------------------------------------------------- */

.container-header .navbar-nav .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
}

.container-header .navbar-nav .dropdown-menu a {
    color: #203864;
    padding: 9px 18px;
}

.container-header .navbar-nav .dropdown-menu a:hover {
    background-color: #f2f4f7;
    color: #203864;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

 {

    .container-header .navbar {
        min-height: auto;
    }

    .container-header .navbar-nav > li > a,
    .container-header .navbar-nav > li > .nav-link {
        padding: 11px 15px;
    }
}
/* =========================================================
   NAVIGATION – FINAL
   ========================================================= */

.container-nav {
    background-color: #203864 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.container-nav .navbar {
    background-color: #203864 !important;
    width: 100%;
}

/* Alle Hauptmenü-Links */
.container-nav .navbar-nav > li > a,
.container-nav .navbar-nav > li > .nav-link,
.container-nav .navbar-nav > li > a.nav-link {
    color: #ffffff !important;
    background-color: transparent !important;
    padding: 14px 18px !important;
    text-decoration: none !important;
}

/* Hover */
.container-nav .navbar-nav > li > a:hover,
.container-nav .navbar-nav > li > .nav-link:hover,
.container-nav .navbar-nav > li > a.nav-link:hover {
    color: #ffffff !important;
    background-color: #2d4b7c !important;
}

/* Aktiver Menüpunkt */
.container-nav .navbar-nav > li.current > a,
.container-nav .navbar-nav > li.current > .nav-link,
.container-nav .navbar-nav > li.current > a.nav-link {
    color: #ffffff !important;
    background-color: #162b4d !important;
    font-weight: 600;
}

/* Dropdown-Pfeil */
.container-nav .navbar-nav .dropdown-toggle::after {
    border-top-color: #ffffff;
}

/* Dropdown-Menü */
.container-nav .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #d8d8d8;
}

.container-nav .dropdown-menu a,
.container-nav .dropdown-menu .nav-link {
    color: #203864 !important;
    background-color: #ffffff !important;
}

.container-nav .dropdown-menu a:hover,
.container-nav .dropdown-menu .nav-link:hover {
    color: #203864 !important;
    background-color: #f2f4f7 !important;
}
/* =========================================================
   NAVIGATION – SCHRIFTFARBE
   ========================================================= */

.container-nav,
.container-nav .mod-menu,
.container-nav .mod-menu > li,
.container-nav .metismenu,
.container-nav .metismenu-item {
    color: #ffffff !important;
}

.container-nav a,
.container-nav .nav-link,
.container-nav .metismenu-item > a,
.container-nav .metismenu-item > .nav-link {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Hover */
.container-nav a:hover,
.container-nav .nav-link:hover,
.container-nav .metismenu-item > a:hover,
.container-nav .metismenu-item > .nav-link:hover {
    color: #ffffff !important;
    background-color: #2d4b7c !important;
}

/* Aktiver Menüpunkt */
.container-nav .current > a,
.container-nav .current > .nav-link,
.container-nav .active > a,
.container-nav .active > .nav-link {
    color: #ffffff !important;
    background-color: #162b4d !important;
}

/* Dropdown-Pfeile */
.container-nav .dropdown-toggle::after {
    border-top-color: #ffffff !important;
}
/* =========================================================
   HEADER – ABSTAND ZUR NAVIGATION VERKLEINERN
   ========================================================= */

.container-topbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.container-topbar .grid-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.af-header {
    min-height: 90px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* =========================================================
   HEADER – WEISSRAUM REDUZIEREN
   ========================================================= */

.af-header {
    min-height: 80px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.container-topbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.container-topbar .grid-child {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* =========================================================
   STARTSEITE – TYPOGRAFIE UND FARBEN
   ========================================================= */

/* Überschriften und Links im Inhalt */
main h1,
main h2,
main h3 {
    color: #203864;
}

/* Überschrift/Link im bestehenden Startseitenbereich */
main a {
    color: #203864;
}

/* Überschrift des hervorgehobenen Bereichs */
main .alert h2,
main .alert h3 {
    color: #111111;
}

/* Hervorgehobene Box */
main .alert {
    border-left-color: #8b6f47;
}

/* Links beim Darüberfahren */
main a:hover {
    color: #2d4b7c;
}
/* Startseiten-Titel unter dem Foto */
main > .item-page > h1:first-child a,
main > .item-page > h1:first-child a:hover {
    color: #203864 !important;
    text-decoration: none !important;
}
/* =========================================
   Mobile Kopfbereich
   ========================================= */

@media (max-width: 991.98px) {

    .af-header {
    min-height: auto !important;
    padding: 10px 10px 12px !important;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .af-header-logo {
        flex: 0 0 105px;
        width: 105px;
        margin-right: 14px;
      margin-bottom: 0 !important;
    }

    .af-header-logo img {
        display: block;
        width: 105px;
        height: auto;
        max-width: 105px;
        max-height: none;
    }

    .af-header-title {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        font-size: 1.55rem;
        line-height: 1.08;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    .af-header-subtitle {
        margin-top: 7px;
        font-size: 0.9rem;
        line-height: 1.25;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}
/* Startseite: große Überschrift ausblenden */
.com_content.view-featured .page-header,
.com_content.view-featured .page-header h1 {
    display: none !important;
}