@font-face {
    font-family: "GT Ultrafine";
    src: url("../fonts/GT-Ultra-Fine-Regular.woff") format("woff");
}

@font-face {
    font-family: "Silka";
    src: url("../fonts/Silka-Regular.woff") format("woff");
}

.uk-article-title{color: #282828;}

.uk-logo { padding: 20px 0;}
.uk-navbar-toggle-icon svg, .uk-offcanvas-close svg {height:30px; width:30px;}

.uk-tile{border-radius:50px;}
.uk-card {border-radius:25px; overflow:hidden}

.colSmall {width:35px}

.sectionImgRight .uk-background-norepeat {background-position:120% 50px}
.sectionImgLeft .uk-background-norepeat {background-position:-380px 0px}

.labelBlock {display:inline-block; width:80px; font-size: 80%;}

.polygonImg img{position:absolute; top:-75px; right:-120px; pointer-events: none;}
#heroContainer {overflow:hidden; }
#sliderHero .uk-flex-bottom {bottom:-250px}
#sliderHero .uk-flex-right {right:-100px}
#sliderHero .uk-overlay{border-radius:500px; height:550px; width:550px; display: flex; align-items:center; padding-bottom:220px;}
#sliderHero .el-title {/*padding-top:55px; margin-left:0px;*/ width:90%; font-size:40px; line-height:1.1}

@media(max-width:960px){
    #sliderHero .uk-overlay{height:450px; width:450px}
    .sectionImgRight .uk-background-norepeat {background-position:180% 50px}
    #sliderHero .el-title {padding-top:80px; font-size:34px;width:85%}
}
@media(max-width:640px){
    .sectionImgRight .uk-background-norepeat { background-position: -400px 50px; }
    #sliderHero .uk-overlay{height:300px; width:250px}
    #sliderHero .uk-flex-bottom { bottom: -200px;}
    #sliderHero .uk-flex-right {right:-75px}
    #sliderHero .el-title {padding-top:0px; font-size:17px; width:92%}
}

#sliderHero.green .el-overlay {background-color:rgba(0,67,51,0.5)}
#sliderHero.blue .el-overlay {background-color:rgba(1,75,108,0.5)}
#sliderHero.purple .el-overlay {background-color:rgba(73,95,191,0.5)}
#sliderHero.yellow .el-overlay {background-color:rgba(177,145,71,0.5)}

.green {color:#004333;}
.blue {color:#014B6C}
.purple {color:#495FBF}
.yellow {color:#B19147}

.containerGreen, .bgGreen .uk-tile {background-color:#004333;}
.containerBlue, .bgBlue .uk-tile {background-color:#014B6C}
.containerPurple, .bgPurple .uk-tile {background-color:#273A8C}
.containerYellow, .bgYellow .uk-tile {background-color:#B19147}


.bgGreen .uk-button {background-color:#6B8375!important; border-color:#6B8375!important}
.bgGreen .uk-button:hover {background-color:#FFF!important; border-color:#FFF!important; color:#004333!important;}

.bgBlue .uk-button {background-color:#4892B3!important; border-color:#4892B3!important}
.bgBlue .uk-button:hover {background-color:#FFF!important; border-color:#FFF!important; color:#014B6C!important;}

.bgPurple .uk-button {background-color:#495FBF!important; border-color:#495FBF!important}
.bgPurple .uk-button:hover {background-color:#FFF!important; border-color:#FFF!important; color:#273A8C!important;}

.btnPurple .uk-button {background-color:#273A8C!important; border-color:#273A8C!important}
.btnPurple .uk-button:hover {background-color:#495FBF!important; border-color:#495FBF!important; color:#FFF!important;}

.btnYellow .uk-button {background-color:#B19147!important; border-color:#B19147!important}
.btnYellow .uk-button:hover {background-color:#E9C267!important; border-color:#E9C267!important; color:#FFF!important;}

.btnYellow .uk-button-default {background-color:#E9C267!important; border-color:#E9C267!important}
.btnYellow .uk-button-default:hover {background-color:#B19147!important; border-color:#B19147!important; color:#FFF!important;}

.bgYellow .uk-button {background-color:#E9C267!important; border-color:#E9C267!important}
.bgYellow .uk-button:hover {background-color:#FFF!important; border-color:#FFF!important; color:#B19147!important;}

.uk-accordion-title::before {width: 25px; height: 25px; }
.uk-accordion .el-item  {background-color:#D9DED7; margin:10px 0; padding:20px; border-radius:25px;}
.uk-accordion .el-content {color:#FFF}

.uk-accordion.blue .el-item {background-color:#4892B3}
.uk-accordion.blue .el-item.uk-open {background-color:#014B6C}

.uk-accordion.purple .el-item {background-color:#495FBF}
.uk-accordion.purple .el-item.uk-open {background-color:#273A8C}

.uk-accordion.yellow .el-item {background-color:#E9C267}
.uk-accordion.yellow .el-item.uk-open {background-color:#B19147}




@media(min-width:960px){
    .uk-grid-divider > :not(.uk-first-column)::before {  border-left: 2px solid #FFFFFF; }

    .stepContainer .uk-grid > div:first-of-type {border-top-left-radius:25px; border-bottom-left-radius:25px; }
    .stepContainer .uk-grid > div:last-of-type {border-top-right-radius:25px; border-bottom-right-radius:25px; padding-right:15px }

    .stepContainer .uk-grid > div::after { content: "\2192"; top: 60px; right: 0; transform: translate(90%, -50%); /* halb nach rechts + vertikal zentrieren */ }


}

@media(max-width:960px){

    .uk-grid-divider.uk-grid-stack > .uk-grid-margin::before { border-top: 0px solid transparent;}

    .stepContainer .uk-grid {margin-left:0; }
    .stepContainer .uk-grid-margin {margin-top:5px !important;; }
    .stepContainer .uk-grid > div:first-of-type {border-top-left-radius:25px; border-top-right-radius:25px; }
    .stepContainer .uk-grid > div:last-of-type {border-bottom-right-radius:25px; border-bottom-left-radius:25px; padding-right:15px }

    .stepContainer .uk-grid > div::after {content: "\2193"; bottom: 0px; right: 50%; transform: translate(50%, 50%); /* halb nach rechts + vertikal zentrieren */ }

}

.stepContainer .uk-grid > div::after { position: absolute; width: 32px; height: 32px; background-color: #014B6C; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; z-index: 2; }

.stepContainer .uk-grid > div { background-color:#D9DED7; padding-top:20px; padding-bottom:20px; position: relative; }
.stepContainer .uk-grid > div:last-of-type::after {  content: none; background-color: transparent;   }

.noIcon.stepContainer .uk-grid > div::after {  content: none; background-color: transparent;   }

.stepContainer .el-content {color:#282828}

.stepContainer.blue .uk-grid > div {background-color:#CADEE7}
.stepContainer.blue .el-title, .stepContainer.blue .el-meta {color:#014B6C}

.stepContainer.purple .uk-grid > div {background-color:#DAE1FF}
.stepContainer.purple .el-title, .stepContainer.blue .el-meta {color:#273A8C}
.stepContainer.purple .uk-grid > div::after {background-color:#273A8C ;}

/* Seneca Modell */

:root {
    --seneca-blue:   #0a587e;
    --seneca-purple: #4448a5;
    --seneca-green:  #3f6f57;
    --seneca-gold:   #c79b32;
}


.senecaCircle {
    position: relative;
    width: min(260px, 60vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto;
}

.senecaBadge {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size:25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:GT Ultrafine;
}

.senecaBadge1 {
    top: 14%;
    left: 10%;
    transform: translate(-50%, -50%);
    background: var(--seneca-blue);
}

.senecaBadge2 {
    top: 14%;
    right: 10%;
    transform: translate(50%, -50%);
    background: var(--seneca-purple);
}

.senecaBadge3 {
    bottom: 14%;
    right: 10%;
    transform: translate(50%, 50%);
    background: var(--seneca-green);
}

.senecaBadge4 {
    bottom: 14%;
    left: 10%;
    transform: translate(-50%, 50%);
    background: var(--seneca-gold);
}

.senecaCircleInnernner img {max-width:250px}


.senecaModell .el-title{
        line-height:1.2em
    }

@media(max-width:960px){
    .senecaBadge1, .senecaBadge2, .senecaBadge3, .senecaBadge4 {
        position:relative;
        top: 0; bottom:0;
        left: 0; right:0;
        transform: translate(50%, 50%);
    }
    .senecaModell .el-title{
        font-size: 25px!important;
        line-height:1em;
    }
    .senecaModell .el-meta{
       position:absolute; left:0
    }
    .senecaModell .el-image{
       margin-left: 70px; max-width: 90px;
    }
}