/*!
 * Biologische Station Siegen-Wittgenstein
 * Grauton: #3c5064;
 * Hellgrün: #d4e5ca;
*/

/* Aufbau der Seite */
.page {
    background: #ecedef;
}

nav .footer-menu {
    margin-bottom: 50px;
}


/* Inhalte */

.social-icons {
    margin: 0.5em 0 0 1em;
}

/*--------------------------------------------------------------
# Hintergrundbild, Standard
--------------------------------------------------------------*/

.frame-section.background-image h1, .frame-section.background-image h2, .frame-section.background-image h3 {
    background-color: #3c5064;
}

/*--------------------------------------------------------------
# Hervorhebung
--------------------------------------------------------------*/

.frame-special {
    margin: 0 -15px 0 -15px;
    background-image: url("../media/back-animals.jpg");
    background-repeat: repeat;
    padding: 40px 50px 40px 75px;
}
/*--------------------------------------------------------------
# Hintergrundbild, Heller Hintergrund
--------------------------------------------------------------*/
section.supporter {
    background-color:#fff;
    border-top: 1px solid #ccc;/*#3c5064;*/
    border-bottom: 1px solid #ccc;/*#3c5064;*/
    margin-bottom:1rem;
}
section.logos {
   position: relative;
   margin: 0 -15px 0 -15px;
   background-image: url("../media/footer.jpg");
   background-size: cover;
    background-position: left bottom 46px;
    background-repeat: no-repeat;
    padding: 0;
    height: 505px;
}

.accordion-collapse h1,
.accordion-collapse h2,.accordion-collapse h3,.accordion-collapse h4{
    display:none;
}

.accordion-button, .accordion-button:not(.collapsed) {
    color: #008245;
    background-color: #fff;
    font-size: 1.6rem;
}

.accordion-button:focus {
    border-color: unset;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
     transform: rotate(0deg);
}



.accordion-button::after {
    color:#000;
}

.gridWrap0  .accordion-item h1 {
    margin-bottom:0;
    padding:0.5rem;
}


/*--------------------------------------------------------------
# Kacheln
--------------------------------------------------------------*/

.kachel {
    position: relative;
    padding-bottom: calc(var(--bs-gutter-x));
}
.kachel image {
    width:100%;
    height:auto;
}

.kachel .caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding:10px;
    width: 100%;
    z-index: 1;
    text-align:center;
    background-color: rgba(60, 80, 100, 0.7);
}

.kachel .caption h2 {
    color:#fff;
}

.kachel .caption h3.subheader {
    font-family: 'Caveat', bold;
    font-size: 1.8rem;
    margin-bottom: 0;
    color:#fff;
}

/*--------------------------------------------------------------
# Common classes
--------------------------------------------------------------*/

.divider {
    background-color: #3c5064;
}

/*--------------------------------------------------------------
# Carousel
--------------------------------------------------------------*/
.carousel {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.wrap-carousel {
    position: relative;
}

/* Ausrichtung Mitte horizontal und vertikal*/
.carousel-caption {
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    left: unset;
    right: 100px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: inline-block;
}

.carousel-caption h3 {
    color: #ffffff;
    text-transform: uppercase;
    display: inline-block;
}

.carousel-caption p {
    font-family: 'Caveat', bold;
    font-style: italic;
    font-size: 1.8rem;
    margin-bottom: 0;
}

.carousel-caption .more {
    text-align: right;
    width: 100%;
    margin: 0;
    padding: 0;
}

.carousel-caption .more a {
    background-color: #fff;
    color: #3c5064;
    margin: 0;
    padding: 5px;
    text-transform: uppercase;
}

.carousel-caption h4 {
    font-family: "Dosis", sans-serif;
    font-style: italic;
    color: #ffffff;
}

.carousel-caption .caption-content {
    background-color: #3c5064;
    text-align: left;
    padding: 1rem;
    margin: 0;
}

.overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    max-width: 1620px;
    height: auto;
}

/*--------------------------------------------------------------
# Teaser News und Veranstaltungen
--------------------------------------------------------------*/
.teaser {
    background-color: #3c5064;
}

h2.title, h2.title a {
    font-family: "Dosis", sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #fff;
}

/*--------------------------------------------------------------
# Übersicht Logos
--------------------------------------------------------------*/
/*
#c93 figure.image {
    min-height:330px;
    display:flex;
    justify-content: center;
}
*/


#c271 .divider {
    margin-right: 0;
    margin-left: 0;
}

/*--------------------------------------------------------------
# news
--------------------------------------------------------------*/
.news-img-wrap h4 {
    background-color: #008245;
    background-color: rgba(0, 130, 69, 0.7);
}

.news .thumbnail{
    position:relative;
}

/*--------------------------------------------------------------
# Veranstaltungen mit sf_event_mgt
--------------------------------------------------------------*/

.tx-sf-event-mgt .filter{
    margin-bottom: 3rem;
}

.tx-sf-event-mgt .error{
   display:block;
    color:red;
    margin-bottom:0.5rem;
}

.tx-sf-event-mgt .label{
   font-weight:bold;
}
.tx-sf-event-mgt .event-teaser p{
    margin-bottom: 0;
}

.tx-sf-event-mgt .event-teaser p:empty{
display:none;
}

.tx-sf-event-mgt .custom-field label{
    display: inline-block;
}

.tx-sf-event-mgt .custom-field input[type="text"]{
    padding-top: .6rem;
    padding-bottom: .6rem;
    height: 2.5rem;
    border-color: #e7e9ed;
    color: #5d6778;
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-top-color: rgb(206, 212, 218);
    border-right-color: rgb(206, 212, 218);
    border-bottom-color: rgb(206, 212, 218);
    border-left-color: rgb(206, 212, 218);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.tx-sf-event-mgt .list-image {
    padding-left: 0;
}

.tx-sf-event-mgt .date-header {
    background-color:#d1d9e8;
    font-weight:600;
    color:#3b5166;
    display: flex;
    justify-content:space-between;
    align-items:center;
    height:1.6rem;
    margin-bottom:0.5rem;
}

.tx-sf-event-mgt .date-header img{
    margin-right:2rem;
}

.tx-sf-event-mgt .date-header .date{
    margin-left:0.3rem;
}

.tx-sf-event-mgt .spacer {
    width:100%;
    margin:10px 0;
    height:1px;
    background-color:#b3c3d8;
}

.tx-sf-event-mgt .alert {
    margin-bottom: 0;
}

.tx-sf-event-mgt  .booked-out .btn-primary.alert {
    padding: 0.5rem;
    color: #fff;
}

.tx-sf-event-mgt .booked-out .alert {
    color: #853863;
    padding: 0;
}

.tx-sf-event-mgt .btn-primary.alert,.tx-sf-event-mgt .btn-primary.send {
    margin-top:1rem;
}

/*--------------------------------------------------------------
# Normale Inhaltselemente
--------------------------------------------------------------*/
.ce-above h3 {
    margin-top: 0.8rem;
}

/*--------------------------------------------------------------
# Normale Inhaltselemente
--------------------------------------------------------------*/
.image-wrapper {
    position: relative;
}

figure .img-round {
    width: 100%;
    height: auto;

}

.ce-border .img-round {
    border: 2px solid #3c5064;
}

/*--------------------------------------------------------------
# Formulare
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.logo-footer {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px 10px 0 0;
    display: inline-block;
    padding: 15px;
    position: absolute;
    right: 200px;
    bottom: 45px;
    z-index: 1;
}

.logo-footer p {
    padding-right: 5px;
    margin: 0;
    text-align: right;
    color: #70a74e;
    font-size: 1.1rem;
}

.sidepanel-footer {
    background-color: #c56259;
    color: #fff;
    padding: 10px 40px;
    font-size: 1.8rem;
    font-family: 'Caveat', bold;
}

.sidepanel-footer a, .sidepanel-footer a:hover {
    color: #fff;
}

.footer {
    background-color: #3c5064;
}