/* muster.css */








.font-kaushanscript {
    font-family: 'Kaushan Script', sans-serif;
}
.font-roboto {
    font-family: 'Roboto', sans-serif;
}


body {
    font-family: 'Roboto', sans-serif;
}

.wrapper-outer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 16rem;
    margin: 0 auto;
    position: relative;
}


.page-header {
    position: absolute;
}

.page-main {
    /* background-color: #fefefe; */
}

.page-footer {
    background-color: #000;
    color: #fff;
    padding: 3rem 0;
    
    text-align: center;
}

.page-footer a {
    color: #fff;
    display: inline-block;
}

.page-footer-top {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 2rem;
}

.page-footer-bottom {
    padding-left: 1rem;
    padding-right: 1rem;
}

.page-footer nav {
    display: block;
}

.page-footer .nav-item a {
    color: #fff;
    padding: 0.25rem;
}

.page-footer .nav-item a:after {
    color: #fff;
    content: "|";
    margin-left: 0.25rem;
}


/* split-screen */
.split-screen {
    width: 100%;
}

.split-screen .col-left {
    /* background-color: #99FF66; */
}

.split-screen .col-right {
    /* background-color: #FFCCFF; */
}


h2 {
    font-weight: 700;
}

strong {
    font-size: 1.1em;
}


.col-left-header-2 {
    background-color: #000;
    color: #fff;
    width: 100%;
    padding: 0;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.col-right-header-2 h3 {
    text-transform: uppercase;
    font-size: 2.25rem;
    font-weight: 700;
}



.long  {
    padding-bottom: 5rem;
}

.col-right-header-1 {
    /* background-color: #e3d18c; */
    width: 100%;
    aspect-ratio: 3 / 2;
}

.col-left-header-1 {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0185c5+0,695fad+70,9250a3+100 */
    background: linear-gradient(135deg, rgba(1,133,197,1) 0%,rgba(105,95,173,1) 70%,rgba(146,80,163,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 100%;
    aspect-ratio: 57 / 62;
}

.pagelevel-0 .col-left-header-1 {
    /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#0085c5+0,60abf8+44,11c1ba+100 */
    background: linear-gradient(135deg, rgba(0,133,197,1) 0%,rgba(96,171,248,1) 44%,rgba(17,193,186,1) 100%); 
}



.col-left-header-2 p {
    margin: 0;
}

.col-right-header-2 {
    background-color: #fff;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}


.col-right-header-1 .frame-container {
    padding: 0;
}




.image-as-bg {
    object-fit: contain;
    width: auto;
    max-width: 100%;
    height: 100%;
    display: block;
    margin: auto;
}


.col-left-content {
    padding: 2rem;
    background: #fff;
}




.page-nav  {
    margin: 1rem 1rem;
}

.page-nav li {
    display: inline-block;
}

.page-nav,
.page-nav li a {
    color: #fff;
}

.page-nav li .dropdown-menu a {
    color: #000;
}

.dropdown-menu {
    border-radius: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.page-nav li a {
    padding: 0.25rem;
    display: inline-block;
}

.page-nav li:not(:first-child):before {
    content: "| ";
    display: inline-block;
}


.frame-no-margin {
    margin: 0 !important;
    padding: 0 !important;
}


.icon svg {
    width: 2rem;
    fill: currentColor;
    margin: 0.25rem;
}

.icon-small svg {
    width: 1rem;
}


.line-special {
    color: #fff;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 3200px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.line-special .line-special-inner {
    display: inline-block;
    max-width: 80%;
    padding: 0 1rem;
    position: relative;
}

.line-special .line-special-inner:before {
    left: -10000px;
}
.line-special .line-special-inner:after {
    left: 100%;
}

.line-special .line-special-inner:before,
.line-special .line-special-inner:after {
    border-bottom: 1px solid #fff;
    content: "";
    height: 1px;
    position: absolute;
    top: 50%;
    width: 10000px;
}


.form-control, 
.form-group input[type="file"] {
    border-radius: 1.25rem;
}

.form-select {
    border-radius: 1.25rem;
}

#femanager_field_gender {
    max-width: 20rem;
}

.btn, .cc-btn {
    border-radius: 1.25rem;
    
    background: linear-gradient(135deg, rgba(146,80,163,1) 0%,rgba(105,95,173,1) 30%,rgba(1,133,197,1) 100%);

    border-color: #fff;
    color: #fff;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    min-width: 10rem;
}

.pf-hint {
    margin-bottom: 1rem;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: transparent;
}

.carousel .item {
    height: auto; 
}


@media (min-width: 480px) {

    .col-left-header-2 {
        font-size: 1.5rem;
    }
    
    .page-nav  {
        margin: 1rem 3rem;
    }
    
}

@media (min-width: 576px) {
    .carousel .carousel-content-inner {
        max-width: none;
    }
}



@media (min-width: 640px) {

    .col-right-header-2 .frame-inner {
        display: flex;
        align-items: center;

    }

    .col-right-header-2 .frame-header {
        margin-right: 2rem;
    }
    
    .page-footer nav {
        display: inline-block;
    }
    
}

@media (min-width: 960px) {
    
    .split-screen {
        display: flex;
        width: 100%;
    }
    
    .split-screen .col-left {
        width: 38%;
        margin-left: 0;
        flex-shrink: 0;
    }
    
    .split-screen .col-right {
        margin-bottom: 0;
        width: 62%;
        overflow-y: hidden;
        height: 100vh;
        min-height: 640px;
        margin-left: auto;
        margin-right: auto;
        flex-shrink: 0;
        position: sticky;
        top: 0px;
        display: flex;
        flex-direction: column;
    }
    
    .col-header {
        display: flex;
        flex-direction: column;
        max-height: 100vh;
    }
    
    .col-left-header-1 {
        height: 75vh;
    }
    
    .col-left-header-2 {
        max-height: 25vh;
        font-size: 1.2rem;
    }
    
    
    .col-right-header-1 {
        height: 75vh;
        display: flex;
        overflow: hidden;
    }
    
    .col-right-header-2 {
        height: 25vh;
        padding: 2rem;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    
    .col-right-header-1 .carousel-item-type-image .carousel-image img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .col-right-header-1 div:not(.carousel-inner):not(.carousel-indicators) {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        max-width: none;
        max-height: 75vh;
    }
    
    .col-right-header-1 picture {
        flex: 1 1 auto;
    }
    
    .col-right-header-1 .carousel .carousel-content-inner {
        max-width: none;
        width: 100%;
    }
    
    .col-right-header-1 .carousel .item {
        height: auto;
    }
    
}

@media (min-width: 1120px) {

    .col-left-header-2 {
        font-size: 1.5rem;
    }
}

@media (min-width: 1200px) {
    h2 {
        font-size: 3.75rem;
    }
}

@media (min-width: 1200px) {
    strong {
        font-size: 1.25rem;
    }
}


@media (min-width: 1440px) {

    .col-left-header-2 {
        height: 15rem;
        padding: 1rem 2rem;
        font-size: 1.75rem;
    }
}

@media (min-width: 1600px) {

    .col-left-header-2 {
        font-size: 2rem;
    }
}