/* ********************************** ********************************** */
/* *                               SYSTEM                              * */
/* ********************************** ********************************** */

/* TopNavigation */


.ccm-page .desktop-nav .nav-item a,
.ccm-page .desktop-nav .nav li a {            
    font-family: var(--ly-font-family-medium-bold);
    font-size: calc(var(--ly-font-size-medium) - 0.3rem);  
    /* line-height darf hier nicht verändert werden, da sonst
     * die dynamisch Anpassung der Menüpunkte in der 
     * Top-Navigation nicht mehr korrekt erfolgt.
     *      * 
     * line-height: var(--ly-line-height-medium);
     * */
    letter-spacing: var(--ly-letter-spacing-medium);
}

/* Allgemein jeder normale Text */
.ccm-page section p {
    color: var(--ly-font-color-default);
    
    font-family: var(--ly-font-family-medium);
    font-size: var(--ly-font-size-medium);  
    line-height: var(--ly-line-height-medium);
    letter-spacing: var(--ly-letter-spacing-medium);
}

/***** Die Größe des Logos in der TopNavBar anpassen ******/

/* StartPosition - vergrößerte TopNavBar */
.primary-header--fixed-nav .primary-header__logo-image {
    width: 150px !important;
    height: auto !important;

    margin-top: 20px;
}

/* Scrolled - verkleinerte TopNavBar */
.primary-header--resized .primary-header__logo-image {
    width: 150px !important;
    height: auto !important;

    margin-top: 5px;
}




/* Der PageTitel auf den Seiten des Templates "Komplett"   */
/* Betrifft nicht die Startseite (Template: Home), sondern */
/* Unterseiten (Subpages).                                 */
.hero-unit-sub-page p {
    font-family: "Merlo Medium";
    background: var(--ly-color-violett);
    padding: 5px;
    padding-top: 10px;
    display: inline-block;
    letter-spacing: var(--ly-letter-spacing-default);
    text-transform: uppercase;
    zborder-bottom-left-radius:var(--ly-border-radius-default) !important;
    zborder-bottom-right-radius:var(--ly-border-radius-default) !important;
}

/* Auf der SubPage */
.ccm-page .hero-unit-sub-page{
    margin-top:100px !important;
}

/* Damit das PageCoverBild zu sehen ist.*/
.hero-unit-sub-page--overlay{
    background-color: transparent !important;
}

/* Die Dicke Überschrift auf dem Bild (APPs)*/
.hero-unit-sub-page__content h2 {
    background-color:var(--ly-color-green) !important;
    color:#fff;
    display: table;
    margin-bottom: 0;
    padding:5px;
    padding-top:15px;
    zborder-top-left-radius:var(--ly-border-radius-default) !important;
    zborder-top-right-radius:var(--ly-border-radius-default) !important;
}

/* Akkordeon */
.accordion__header {
    font-family: "Merlo Medium" !important;
    font-size: var(--ly-font-size-default);
    padding:30px !important;
    
    font-family: var(--ly-font-family-medium);
    font-size: var(--ly-font-size-medium);  
    line-height: var(--ly-line-height-medium);
    letter-spacing: var(--ly-letter-spacing-medium);
}

.accordion__content {
    zbackground: var(--ly-color-white-dark) !important;
    background-color: #fff;
    border:2px solid var(--ly-color-white-dark);
    padding:30px !important;
}

/* Überschriften ganz allgemein */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
    font-family: var(--ly-font-family-default) !important;
}

section a {
    color: var(--ly-color-violett);
}


section a.button {
    font-family: "Merlo RoundBold";
    font-size: var(--ly-font-size-default);
    letter-spacing: var(--ly-letter-spacing-default);
}

section .ccm-ui .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ly-color-violett);
    --bs-btn-border-color: var(--ly-color-violett);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ly-color-violett-light);
    --bs-btn-hover-border-color: var(--ly-color-violett-light);
    border-radius:100px !important;
}

section .btn{
    border-radius:100px !important;
}

/* LOGIN */
.login-page {
    background-color: var(--ly-color-green);
}


/* .................................. .................................. */
/* .                            Media-Queries                          . */
/* ..................................................................... */

/* Styles für Bildschirme mit einer Mindestbreite von 0px */
@media only screen and (min-width: 0px) {
    .hero-unit.hero-unit--banner-456{
        margin-bottom:0 !important;
    }
}


/* Styles für Bildschirme mit einer Mindestbreite von 576px */
@media only screen and (min-width: 576px) {
}


/* Styles für Bildschirme mit einer Mindestbreite von 992px */
@media only screen and (min-width: 768px) {
}


/* Styles für Bildschirme mit einer Mindestbreite von 992px */
@media only screen and (min-width: 992px) {
    .hero-unit.hero-unit--banner-456{
        margin-bottom:50px !important;
    }
}


/* Styles für Bildschirme mit einer Mindestbreite von 1200px */
@media only screen and (min-width: 1200px) {
    .hero-unit.hero-unit--banner-456{
        margin-bottom:100px !important;
    }
}


/* Styles für Bildschirme mit einer Mindestbreite von 1400px */
@media only screen and (min-width: 1400px) {
}