/* 
Beispiel für Desktop und Tablet (1,3-Regel):
P = 18 px (Fließtext) = 1.125 rem
H4 = 23 px = 1.438 rem
H3 = 30 px = 1.875 rem
H2 = 39 px = 2.438 rem  - 2.5 rem
H1 = 51 px = 3.188 rem  - 3 rem


Beispiel für Mobilgeräte (1,2-Regel):
P = 16 px = 1 rem
H4 = 19 px = 1.188 rem
H3 = 23 px = 1.438 rem
H2 = 28 px = 1.75 rem
H1 = 34 px = 2.125 rem

*/

html {scroll-behavior: smooth;}

.rubik-dirt-regular {
  font-family: "Rubik Dirt", system-ui;
  font-weight: 400;
  font-style: normal;
}

.varela-round-regular {
  font-family: "Varela Round", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size:15px;
line-height: 160%;
color:#000;
/*background-color: #f4f4f4;*/
background-image: url("../img/background.png"); /* Pfad zum Bild */
background-repeat: no-repeat; /* Bild nicht wiederholen */
background-position: center center; /* Bild zentrieren */
background-size: 100% ;/* Bild über den gesamten Bereich skalieren */
/* background-size: cover; /* Bild über den gesamten Bereich skalieren */*/
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
margin: 0; padding: 0;
height:100%;
/* automat. Silbentrennung: für Webkit Browser */
-webkit-hyphens: auto; /* Für Mozilla Browser */
-moz-hyphens: auto; /* Für Internet Explorer Browser */
-ms-hyphens: auto;
/*overflow: -moz-scrollbars-vertical;*/
overflow-x: hidden; overflow-y:scroll;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Rubik Dirt", "Varela Round", Helvetica, Arial;
font-weight:400;
font-style: normal; 
padding: 0px;
letter-spacing: 0px;
line-height: 120%; 	
}

h1 {
  font-family: "Rubik Dirt", Helvetica, Arial !important;
  font-size: 3.0rem;
  color: #7E7E7E; }

h2 {
  font-family: "Rubik Dirt", Helvetica, Arial !important;
  font-size: 2.5 rem;
  color: #7E7E7E; }

h3 {
  font-family: "Varela Round", Helvetica, Arial !important;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.0; 	
  color: #595858; }

h4 {
  font-family: "Varela Round", Helvetica, Arial !important;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.0; 	
  color: #595858; }

h5 {
  font-family: "Varela Round", Helvetica, Arial !important;
  font-size: 12px;
  color: #595858; }

h6 {
  font-family: "Varela Round", Helvetica, Arial !important;
  font-size: 12px;
  color: #595858;
  text-transform: uppercase;}



a{text-decoration: none; color:#030e68;}
a:hover{text-decoration: none; color: #000;}

/* Dieser Eintrag entfernt den gepunkteten Rahmen um Links beim anklicken. */
a:focus {outline: none;}

hr {border: none; border-top: 1px solid #7E7E7E;}

/* SUCHFUNKTION */
.search-box-2{
margin: 20px 0px 20px 0px;
border: 0px;
float: left;
padding: 20px;
background-color: #fff;
height: 60px;
width: 180px;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.search-box-3{
margin: 20px 0px 20px 0px;
font-family: 'montserrat';
text-transform: uppercase; 
letter-spacing: 3px; 
color:#fff;
background-color: #707070;
font-weight:600;
border: 0px;
float: left;
padding: 0px;
height: 60px;
width: 100px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.search-box-3:hover{background-color: orange;}
.highlight {color: #000; padding: 0px 2px 0px 2px; background-color: yellow;}

/* BUTTON */
.button-1{
background-color: orange;
font-size:12px;  
font-family: 'montserrat', Arial, sans-serif;
padding: 4px 0px 5px 2px;
margin: 0px;
color:#fff;
height: auto;
letter-spacing: 2px;
border-radius: 30px;
width: 120px;
float: left;
text-align: center;
box-sizing: border-box;
text-decoration:none;
transition: all 0.2s;
}
.button-1:hover{ background-color: #45a29e;}
.button-1 a{color:#fff;}

/* MENU ###################################################### */
#menu-top{
position: fixed;
margin: 0 auto;
width: 100%;
background-color: #fff;
display:block;
height: 60px;
border-bottom: 1px solid #cacaca;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index: 10;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.menuwrap{
width: 80%;	
float:löeft;
height:40px;
margin: 10px 0px 10px 130px;
background-color:transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.menu-logo{
max-width: 145px;
max-height 145px;	
float:left;
/*margin: 0px auto 0px auto; */
color:#000;
padding: 10px 10px 10px 10px;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* HEADER ###################################################### */
#head{
margin: 0px auto 0px auto;
padding: 0px;
width: 100%;
background-color: #fff;
min-height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* Flex items */
.teaser-section {display: flex; flex-wrap: wrap;}
.teaser {display: flex;}

.head-links{
margin: 100px auto 0 auto;
background-color: #dddddd;
float:left;
width: 30%;
min-height: 50px;
font-weight: 400;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
text-align:center;
color: #000;
padding: 10px 50px 0px 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

/* Logo/Bilder Header linke Spalte */
.img-responsive {
width: 100%;
max-width: 200px;
height: auto;
}

.head-rechts{
margin: 100px auto 0 auto;
float:left;
overflow: hidden;
width: 70%; 
min-height: 50px;
font-weight: 400;
font-family: 'open sans',Arial,sans-serif;
color: #000;
background-color: #9e9e9e;
padding: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.head-rechts p {
line-height: 0px;
padding: 0px;  
margin: 0px;
}

/* FRAMEWORK ###################################################### */
.hauptfeld{
margin: 25px auto 0 auto;
padding:0px 150px 0px 10px;
top: 0px;
bottom:0px;
width: 80%;
min-height: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.content{
margin: 0 auto;
padding: 0px 0px 20px 0px;
top: 0px;
bottom:0px;
width: 80%;
min-height: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

#totop {
position: fixed;
right: 0px;
bottom: 20px;
padding: 0px;
text-align:left;
width: 40px;
height: 40px;
z-index: 10;
background-image: url("../img/totop.jpg");
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.pagefooter{
font-size: 13px;
margin: 40px auto 0px auto;
padding: 40px 0px 20px 0px;
background-color: #4c4c4c;
color:#dddddd;
min-height: 50px;
text-align:left;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.pagefooterwrap{
width: 80%;
font-size: 13px;
margin: 0px auto 0 auto;
padding: 0px 0px 40px 0px;
color:#a8a8a8;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.pagefooterwrap a{
text-decoration: none;
color: #94dbfc!important;
}

.pagefooterwrap a:hover{
text-decoration: none;
color: #fff!important;
}

.pagefooter h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6{
color: #a8a8a8;
}


.global_footer_top{
font-size: 13px;
text-align:center;
color:#707070;
margin: 25px auto 0 auto;
padding:0px 10px 0px 10px;
top: 0px;
bottom:0px;
width: 100%;
background-color: #70707022;
/*background-image: url("../img/bg_gf_top.png"); /* Pfad zum Bild */*/
min-height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.global_footer_bottom{
font-size: 13px;
text-align:center;
color:#707070;
margin: 25px auto 0 auto;
padding:0px 10px 0px 10px;
top: 0px;
bottom:0px;
width: 100%;
background-color: transparent;
min-height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}


.ellnav{
width: 100%;
height: auto;
font-size: 13px;
margin: 0px auto 0 auto;
padding: 0px 0px 40px 0px;
color:#a8a8a8;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.clear {clear:left;}

/* Responsive Stuff ###################################################### */
/* Responsive Stuff ###################################################### */
/* Responsive Stuff ###################################################### */
/* Responsive Stuff ###################################################### */
/* Responsive Stuff ###################################################### */

@media screen and (max-width: 1300px){
	
body {
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size:14px;
line-height: 140%;
}
	
.scroll, .menu-logo {display: none;}
#menu-top{height: 0px;}

.menuwrap{
width:100%;
float:none;
margin: 0px;	
height:60px;
top: 0px;
position: fixed;
padding: 15px 0px 0px 0px;
background-color: #fff;
border-bottom: 1px solid #cacaca;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.head-links{
margin: 40px auto 0 auto;
background-color: #dddddd;
float:none;
width: 100%;
min-height: 20px;
font-weight: 400;
font-family: 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
text-align:center;
color: #000;
padding: 20px 30px 20px 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.head-rechts{
margin: 0 auto 0 auto;
overflow: hidden;
float:none;
width: 100%;
min-height: 20px;
font-weight: 400;
font-family: 'open sans',Arial,sans-serif;
text-align:left;
color: #000;
background-color: #9E9E9E;
padding: 0px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

.hauptfeld {
padding: 0px 10px 20px 10px;
width: 100%;
min-height: 50px;
margin: 0;
}

.content, .zweispaltig-links, .zweispaltig-rechts, .footer, .footerwrap, .global_footer_top, .global_footer_bottom  {
padding: 0px 0px 20px 0px;
width: 100%;
margin: 0;
min-height: 50px;
}
}

.two_colum {   /* 2-spaltig */
width: 100%;  
column-count: 2; /* Spalten Anzahl */
column-gap: 10px; /* Abstand zwischen den Spalten */
}


@media screen and (max-width: 568px){
.hauptfeld{
width: 100%;
padding: 30px 20px 0px 20px;
}
}