@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
    --darkgray: #002d2b;
    --lightgreen: #c0d3b5;
    --pink: #a8a8cd;
    --yellow: #d4dc93;
    --fontyellow: #bdd17a;
    --fontpink: #8F8FB3;
    --font: #002d2b;
}

body {
    font-family: 'Hind', sans-serif;
    color: var(--font);
}

a, a:hover, a:active, a:focus {
    color: var(--font);
    text-decoration: underline;
}


.bgcolordark {
    background-color: var(--darkgray);
    color: var(--fontyellow);
}

.bgcolordark a, .bgcolordark a:focus, .bgcolordark a:hover {
    color: var(--fontyellow);
}

.bgcolorgreen {
    background-color: var(--lightgreen);
}
.bgcolorpink {
    background-color: var(--pink);
}

.bgcoloryellow {
    background-color: var(--yellow);
}

.navbar {
    --bs-navbar-toggler-border-color: var(--fontyellow);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%28189, 209, 122, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}

.navbar-toggler:focus {
    box-shadow: var(--fontyellow) 0.25rem;
}

.nav-item {
    padding: 0 0.7rem;
    margin-bottom: 1rem;

}

.nav-link.active, .nav-link:hover {

    color: var(--fontyellow) !important;
}

a.nav-link {
    color: var(--fontyellow);
    border-bottom: 5px solid var(--darkgray);
    text-transform: uppercase;
    padding-bottom: 0;
}

a.nav-link:hover {
    text-decoration: none;
}

.headerbild {
    height: 395px;
    background-image: url(/fileadmin/templates/img/header_okt23.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.btn-primary {
    background-color: var(--fontpink);
    color: white;
    border-color: var(--fontpink);
    border-bottom-left-radius: 25px;
}

.btn-primary:hover, .btn-primary:active {
    background-color: white;
    border-color: var(--fontpink);
    color: var(--fontpink);
}

.btn.btn-secondary {
    border-radius: 0;
    border: 1px solid var(--fontyellow);
    color: var(--fontyellow);
    transition: none;
    background-clip: unset;
    background-color: var(--darkgray);
    text-align: left;
    margin-top: 15px;
    margin-bottom: 15px;
}

.item {
    border-bottom-left-radius: 50px;
    height: 100%;
}

.item ul {
        padding-left: 1.5rem;
}

.img-top {
    max-height: 300px;
}


.form-control {
    border-radius: 0;
    border: 1px solid var(--fontyellow);
    transition: none;
    background-clip: unset;
    background-color: var(--yellow);
    margin-top: 15px;
    margin-bottom: 15px;
}

.font-big {
    font-size: 1.5rem;
}

.adresse {
    padding-left: 30px;
    text-align: right;
}

.catheader {
    cursor:pointer;
}

.catheader > h2 {
    color:var(--darkgray);
    cursor: pointer;
}

.catheader > h2:before {
    font: normal normal normal 1.7rem/1 bootstrap-icons;
    content:"\F286";
    margin-right: 15px;
    color:var(--darkgray);
}
.catheader > h2.collapsed:before {
    content:"\F282";
}

.kursliste .catheader .row .icon span.closed {
    display:none;
}

.kursliste .catheader .row.collapsed .icon span.open {
    display:none;
}
.kursliste .catheader .row.collapsed .icon span.closed {
    display:block;
}
.catitem {
    border-bottom: 1px solid var(--darkgray);
}

.catitem.odd { background-color: var(--pink);}

.icon {
    font-size:3rem;
}

.custom-control-label::before {
    background-color: #fff4d4;
    border: #fcc013 solid 1px;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #fcc013;
    background-color: #f08220
}

.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    border-color: #fcc013;
    background-color: #f08220
}

.custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label, .custom-control-input.is-invalid~.custom-control-label, .was-validated .custom-control-input:invalid~.custom-control-label {
    color: #621615;

}

.form-control.is-valid, .was-validated .form-control:valid, .form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: #fcc013;
    background-image:none;
    box-shadow: none  !important;
}

.form-control.is-invalid, .was-validated .form-control:invalid {

    box-shadow: none !important;
}



@media (min-width: 1200px) {
    .nav-item {
        margin-bottom: 0rem;
    }

    .nav-link.active, .nav-link:hover {
        border-bottom: 5px solid var(--fontyellow);
        color: var(--fontyellow);
    }
}