/* Standards */

body {
    background: #ffffff;
    font-family: 'Verdana';
    color: #303234;
    line-height: 1.6em;
    font-size: 1em;
    margin: 0em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    color: #557ab5;
    text-align: left;
    line-height: 1.2em;
}

iframe {
    width: 100%;
    height: 350px;
}

/* Container */

.container {
    margin: 0 auto;
    width: 1600px;
}

/* Seitenbereiche */

.logo {
    padding-top: 5px;
}

.menu-white ul {
    list-style: none;
    margin: 0;
    padding: 0px 0px 0px 0px;
}

.menu-white li {
    display: inline;
    color: #424242;
    text-transform: uppercase;
    list-style-type: none;
    padding: 3px 15px 3px 15px;
    margin: 0;
}

.menu-white li:hover {
    color: #e1dcdb;
    background-color: #ff7400;
}

.menu-white li img{
    vertical-align:-9px;
    padding-right: 6px;
}

.menu-blue{
    background-color: #557ab5;
}

.menu-blue ul {
    list-style: none;
    margin: 0;
    padding: 2px 0px 0px 0px;
}

.menu-blue li {
    display: inline;
    color: #ffffff;
    text-transform: uppercase;
    list-style-type: none;
    padding: 3px 15px 3px 15px;
    margin: 0;
}

.menu-blue li:hover {
    color: #e1dcdb;
    background-color: #ff7400;
}

.socialmedia {
    color: #e1dcdb;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #557ab5;
    text-align: center;
}

.menu-blue li img{
    vertical-align:-3px;
    padding-left: 5px;
    padding-right: 5px;
}

.socialmedia .icon {
    padding-left: 15px;
    padding-right: 15px;
}

.footer {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 0.8em;
}

/* Reihen */

.row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
}

.row-normal-87 {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    height: 87px;
}

.row-normal-42 {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    height: 42px;
}

.row-normal-38 {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    height: 38px;
}

.row-normal-29-bl {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    height: 29px;
    background: #557ab5;
}

.row-normal-7 {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
    height: 7px;
}

/* Spalten */

.col-normal {
    width: 100%;
}

.col-normal-outer {
    width: calc((100% - 1600px)/2);
}

.col-normal-3 {
    width: calc(1600px/4*3);
}

.col-normal-2 {
    width: calc(1600px/4*2);
}

.col-normal-1 {
    width: calc(1600px/4);
}

.col-normal-menu-white {
    width: calc(1600px/4);
}

.img-normal-0 {
    width: 0px;
}

/* Styles */

.kubethlogo {
    height: 116px;
}

.kubethlogo2 {
    height: 0px;
}

a:link,
a:visited {
    color: #557ab5;
    text-decoration: none;
}

.hr-blue {
    height: 29px;
    background: #557ab5;
}

.blocktext {
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px;
}

/* Teaser */

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

teaser-home { 
  width: 100%; 
    overflow: hidden; 
    box-sizing: border-box;
    display: flex;
}

figure { 
  margin: 0; 
  object-fit: cover;
    position:bottom;
    height: 400px;
    width: 100%;
}

figure.slider { 
  position: relative; width: 500%;
  font-size: 0; animation: 40s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}
figure.slider img { width: 100%; height: 400px; object-fit: cover;}

/* Karten */

.karte {
    position: relative;
    overflow: hidden;
    margin: 10px 0px 0px 0px;
    
    width: 100%;
    background-color: #f7f7f7;
}

.karte * {

    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.karte img {
    width: 100%;
    vertical-align: top;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.karte .rahmen {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    position: relative;
}

.rahmen img {
    width: auto;
    vertical-align: middle;
}

.karte .datum {
    background-color: #557ab5;
    top: 25px;
    color: #fff;
    left: 25px;
    min-height: 60px;
    min-width: 60px;
    position: absolute;
    text-align: center;
}

.karte .datum {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.karte .datum span {
    display: block;
    line-height: 30px;
}

.karte .datum .monat {
    font-size: 16px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.1);
}

.karte h3,
.karte p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.karte h3 {
    margin-bottom: 10px;

}

.karte button {
    border: medium none;
    padding: 10px 20px;
    background-color: #557ab5;
    color: #ffffff;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8em;
}

.karte a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.karte:hover img,
.karte.hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.karte:hover .datum,
.karte.hover .datum {
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.karte:hover button,
.karte.hover button {
    background-color: #ff7400;
}

/* andere Auflösungen */

@media screen and (max-width: 1650px) {
    
    iframe {
        height: 200px;
    }
    
    /* Container */
    
    .container-l {
        width: 1200px;
    }
    
    /* Seitenbereiche */
    
    /* Reihen */
    
    .row-l-0 {
        height: 0px;
        display: contents;
    }
        
    /* Spalten */
    
    .col-l-outer {
    width: calc((100% - 1200px)/2);
    }
    
    .col-l-0 {
        width: 0px;
        height: 0px;
    }
    
    .col-l-1 {
    width: 400px;
    }
    
    .col-l-2 {
    width: 800px;
    }
    
    .col-l-3 {
    width: 1200px;
    }
    
    .blocktext {
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px;
    }
        
    /* Styles */
    
    .kubethlogo {
    height: 0px;
    }
    
    .kubethlogo2{
        text-align: center;
        width: 100%;
        height: 100%;
    }
    
    .img-l-0 {
        width: 0px;
    }
    
    .img-l-400 {
        width: 400px;
    }
}

@media screen and (max-width: 1250px) {
       /* Container */
    
    .container-s {
        width: 800px;
    }
    
    .container-s100 {
        width: 100%;
    }
    
    /* Seitenbereiche */
    
    /* Reihen */
    
    .row-s-0 {
        height: 0px;
        display: contents;
    }
    .row-s-1 {
        display: contents; 
      /*width: 400px;   */
    }
    
    /* Spalten */
    
    .col-s-0 {
        width: 0px;
        height: 0px;
    }
    
    .col-s-1 {
        width: 400px;
    }
    
    .col-s-2 {
        width: 800px;
    }
    
    .col-s-100 {
        width: 100%;
    }
    .col-s-100 ul{
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        border-bottom-style: solid;
        border-width: 0.1em;
        border-bottom-color: #515151;
    }
    
    .blocktext {
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px;
    }
    
    /* Styles */
    
    .kubethlogo {
    height: 0px;
    }
    
    .kubethlogo2{
        padding: 0.5em;
        text-align: right;
        width: 95%;
    }

    
    .img-s-0 {
        width: 0px;
    }
    .img-s-100 {
        width: 100%;
        max-width: 400px;
    } 
}

@media screen and (max-width: 850px) {
    
    /* Container */
    
    .container-xs {
        width: calc(100% - 80px);
        max-width: 400px;
    }
    
    /* Seitenbereiche */
    
    /* Reihen */
    
    .row-xs-0 {
        height: 0px;
        display: contents;
    }
    .row-xs-1 {
        display: contents;
    }
    
    /* Spalten */
    
    .col-xs-0 {
        width: 0px;
        height: 0px;
    }
    
    .col-xs-1 {
        width: 100%;
    }
    
    .blocktext {
    text-align: justify;
    margin-left: 0px;
    margin-right: 0px;
    }
}