/* comfortaa-300 - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/comfortaa-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Light'), local('Comfortaa-Light'),
       url('../fonts/comfortaa-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v19-latin-300.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* comfortaa-regular - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/comfortaa-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Regular'), local('Comfortaa-Regular'),
       url('../fonts/comfortaa-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v19-latin-regular.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* comfortaa-700 - latin */
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/comfortaa-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Comfortaa Bold'), local('Comfortaa-Bold'),
       url('../fonts/comfortaa-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/comfortaa-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/comfortaa-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/comfortaa-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/comfortaa-v19-latin-700.svg#Comfortaa') format('svg'); /* Legacy iOS */
}

/* great-vibes-regular - latin */
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/great-vibes-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Great Vibes'), local('GreatVibes-Regular'),
       url('../fonts/great-vibes-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/great-vibes-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/great-vibes-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/great-vibes-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/great-vibes-v6-latin-regular.svg#GreatVibes') format('svg'); /* Legacy iOS */
}


html  {font-family: 'Comfortaa'; color: grey;}

body {
  background: white;
  font-size: 22px;
  line-height: 32px;
  color: #ffffff;
  margin: 0;
  padding: 0;
  word-wrap: break-word !important;}

h3 {
  font-size: 30px;
  line-height: 34px;
  text-align: center;
  color: deeppink;
font-weight: 700;
}

h3 a { color: deeppink;
font-weight: 700;}

a { color: deepskyblue;
font-weight: 400;}

h1 {font-weight: 400;
  margin-top: 50px;
  text-align: center;
  font-size: 60px;
 }

h2 {color: deeppink; font-weight: 700;}
h2 strong {font-weight: 700;}
h3 strong {font-weight: 700;}

.headklein {font-family: 'Great Vibes';
    font-weight: 400;
    position: relative;
    line-height: 0px;
    text-align: center;
    font-size: 40px;
    color: deeppink;
    z-index: -100}


#container {
  margin: 0 auto;
  max-width: 890px;
}

p { text-align: center; }
 .toggle, [id^=drop] {
 display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #00aff0;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
    
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #00aff0;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

nav ul li ul li:hover { background: #1279AC; }

nav a:hover { background-color: #1279AC; }

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}

nav ul li:hover > ul { display: inherit; }

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

li > a:after { content: ' '; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

#logo {
  display: block;
  padding: 0;
  width: 100%;
  text-align: center;
  float: none;
}

nav { margin: 0; }

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block;
  background-color: #1279AC;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}

.toggle:hover { background-color: deeppink; }

[id^=drop]:checked + ul { display: block; }

nav ul li {
  display: block;
  width: 100%;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }

nav ul ul ul a { padding: 0 80px; }

nav a:hover,
 nav ul ul ul a { background-color: deeppink; }

nav ul li ul li .toggle,
 nav ul ul a { background-color: #1279AC; }

nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
    
    
}

@media all and (max-width : 330px) {

nav ul li {
  display: block;
  width: 94%;
}

}



.img_front {
  
  width: 100%;
}

.b-text {color: black;
text-align: center;
max-width: 1300px;
margin: auto;
margin-bottom: 200px;}



.span-pink {color: deeppink}

.span-headline {font-family: 'Great Vibes';
    font-weight: 400;
    position: relative;
    line-height: 90px;
    text-align: center;
    font-size: 80px;
    color: deeppink;
    z-index: -100}

table { width: auto;
    color: black;
    border: 3px solid deepskyblue;
    margin-left: auto;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 0px;
    display: block; float: left; 
    position: relative;
    
       }

    td, th {  }
td { padding: 10px;}

.tipp {color: white; border-radius: 50px; border-left: solid 20px;  border-left-color: deeppink; background-color:#1279AC; padding: 12px; width: 450px; margin: auto;}
.tipp2 {color: black; border-radius: 50px; border-left: solid 20px; border-right: solid 20px; border-left-color: deeppink;  border-right-color: deeppink; padding: 12px; width: 600px; margin: auto;}
.tipp3 {color: black; border-radius: 50px; border-right: solid 20px; border-left: solid 20px; border-right-color: deepskyblue;  border-left-color: deepskyblue; padding: 12px; width: auto; margin: 5%; margin-top: 1%; background-color: aliceblue}
.tipp4 {color: black; border-radius: 50px; border-left: solid 20px; border-right: solid 20px; border-left-color: deeppink;  border-right-color: deeppink; border-top-color: deepskyblue; border-bottom-color: deepskyblue; border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; width: 400px; margin: auto;}

.ifl { margin: 30px;
    width: 500px;
    float: left;
}
.tippform {font-size: 33px; color: deepskyblue;}
.tippformfett {font-size: 50px; color: deepskyblue; font-weight: 700}

ul {list-style-type: none;
    text-align: left;
    }

.content {max-width: 1300px;
            margin: auto;
padding: 20px;}

.img_klein {width: 100%;
    max-width: 1000px;}

.fototipp {width: 100%; max-width: 999px;
     color: white; background-color:#1279AC; padding: 20px; border-radius: 50px; margin: auto; 
}

.tippblau {color: white;}

.linksimtext {
    color: deepskyblue;
    text-decoration: none;
}


/*gallery*/
* {
 
  box-sizing: border-box;
}


.gallery {position: relative;
    
  width: 100%;
    max-width: 1000px;
  margin:auto;
padding-bottom: 50px;}

.gallery > div {
      position: static;}

.gallery > div > img {
      display: block;
      width: 100%;
      transition: .1s transform;
      transform: translateZ(0); /* hack */}

.gallery > div > img.hoch{
    cursor: pointer;
    display: block;
    width: 100%;
    transition: .1s transform;
    transform: translateZ(0); /* hack */}

.gallery > div > img.quad{
        cursor: pointer;
        margin: auto;
        display: block;
        width: 500px;
        transition: .1s transform;
        transform: translateZ(0); /* hack */}

.gallery > div > img.quer{
        cursor: pointer;
          display: block;
          width: 100%;
          transition: .1s transform;
          transform: translateZ(0); /* hack */}


.gallery > div:active {
  z-index: 1;
}

.gallery > div:active > img {
  transform: scale(2.7,2.7);
  transition: .3s transform;
}

.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}

.auftrag {border: solid  5px   deeppink;}
.kauflich {border: dashed 5px #00D307;}
.auftragtext {color: deeppink;}
.kauftext {color: #169D1B}
.ra {border-style: solid; border-radius: 50px; border-left: solid 20px; border-right: solid 20px; border-left-color: deeppink;  border-right-color: deeppink; border-top-width: 0px; border-bottom-width: 0px;}

.butt {border-style: none; border-radius: 50px;}




.endfloat {clear: left;}
.centab {border: none; width: auto; margin: auto;}
.it {font-style: italic  }
.hk { font-size: 22px;
    display: inline;
    color: #ffffff;
    font-weight: 400;}

strong {font-weight: 400;}

div a {text-decoration: none;}


#footer {position: fixed;

    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 55px;
    width: auto;
    background-color: #00aff0;
    z-index: 2;
}

#footertext {position: relative;
    text-align: middle;
    left: auto;
    top: 20px;
    color: white;
}

.seitenlinks {
    text-decoration: none;
    color: white;
}