@charset "utf-8";
/* CSS Document created by wordandweb.de Ulrike Nolte C2020*/

/*** FARBVERLAUF MIT TÜRKIS
 #009EA3, #00A2A6, #009B9F, #00979B, #008F93, #00878A, #007C80, #007275, #00696C, #006062, #005759
 ***/ 

@font-face {
    font-family: 'latoblack_italic';
    src: url('lato-blackitalic-webfont.woff2') format('woff2'),
         url('lato-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latomedium';
    src: url('lato-medium-webfont.woff2') format('woff2'),
         url('lato-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather_italic';
    src: url('merriweather_italic-webfont.woff2') format('woff2'),
         url('merriweather_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'merriweather_regular';
    src: url('merriweather_regular-webfont.woff2') format('woff2'),
         url('merriweather_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'latomedium';
  font-size: 16px;
  color: #535353; /* #696969;  #5B5B5B;  #003333; #000F0F; #004042; */
}

#logo {
position: relative;
top: 0;
z-index: 1;
  width: auto;
  height: auto;
  text-align: center;
  padding: 2.5em 25% 1em;
  }

  
#normal {
  position: relative;
  top: 0; 
  z-index: 1;
  float: left;
  text-align: left;
  width: 98%;
  min-height: 500px;
  height: auto;
  margin: 0 auto 5em;
  padding: 1em 1% 5em;
  font-size: 0.9em;
  font-family: 'latomedium';
}

#normal a:link,
#normal a:visited {
  color: #535353; /* color: #696969; */
  text-decoration: none;
  border-bottom: 1px solid #009EA3;
}

#normal a:hover,
#normal a:focus {
  color: #86BC24;
  border-bottom: 1px solid #86BC24;
}
/*
#tabellenkopf {
display: inline;
position: sticky;
top: 0;
z-index: 1;
width: 100%;
font-size: 1em;
}
 */
table {
width: 100%;
background: #86BC24;
font-family: 'latomedium';
/* display: block; */
} 
/*  
thead {
height: 2em;
}

.weg {
display: none;
height: 0;
}
 */
th {
padding: 0.2em;
color: #fff;
/* background: conic-gradient(at 0% 0%, #86BC24 25%, #009EA3 10%, #86BC24 35%, #009EA3 40%, #FFF 80%);
background: conic-gradient(at 15% 0%, #86BC24 25%, #009EA3 10%, #86BC24 35%, #009EA3 40%, #FFF 80%); 
DER HIER!  background: conic-gradient(at 20% 0%, #86BC24 5%, #009EA3 25%, #333 70%, #86BC24 50%);   

/*background: conic-gradient(at 20% 0%, #86BC24 5%, #009EA3 25%, #000 70%, #86BC24 50%); DAS HIER!*/
font-size: 1.1em;
text-align: center;
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
/*border-radius: 0; */
}
 
.thnormal {
width: 12%;      
}
        
tr {
background: #fff;
}

.zentriert {
text-align: center;
/* vertical-align: bottom; */
min-width: 4%;
max-width: 4%;
padding: 0.1em;
}

.suchfeld {
background: #009EA3;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
}

.suchfeldfilter {
background: linear-gradient(90deg, #00696C, #009EA3, #009EA3, #009EA3, #00696C); 
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
}

.suchfeldanfang {
background: linear-gradient(-90deg, #009EA3, #009EA3, #006062);
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
}
.suchfeldende {
background: linear-gradient(90deg, #009EA3, #009EA3, #006062);
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
}

/*
.suchfeldstandard {
background: #009EA3;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
min-width: 13%;
max-width: 13%;
}

.suchfeldlonger {
background: #009EA3;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
min-width: 18%;
max-width: 18%;
}

.suchfeldshorter {
background: #009EA3;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
min-width: 10%;
max-width: 10%;
}

.suchfeldshortest {
background: #009EA3;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
min-width: 4%;
max-width: 4%;
}
       */
       
td {
padding: 0.2em;
text-align: left; 
}

.standard {      
min-width: 10%;
max-width: 13%; 
/* background: linear-gradient(95deg, #00696C, #009EA3, #009EA3, #009EA3); */
background: #009EA3;
}

.longest {     
min-width: 23%;
max-width: 25%;
background: #009EA3;  
}
.longer {    
min-width: 15%;
max-width: 17%;
/* background: linear-gradient(95deg, #00696C, #009EA3, #009EA3, #009EA3); */
background: #009EA3;
}
.short {  
min-width: 6%;
max-width: 8%;
/* background: linear-gradient(95deg, #00696C, #009EA3, #009EA3, #009EA3); */
background: #009EA3;
}
.shorter {   
min-width: 8%;
max-width: 10%;
/* background: linear-gradient(95deg, #00696C, #009EA3, #009EA3, #009EA3); */
background: #009EA3;
}
.shortest {  
min-width: 4%;
max-width: 4%;
padding: 0.1em;
/* background: linear-gradient(95deg, #00696C, #009EA3, #009EA3, #009EA3); */
background: #009EA3;
}

.shorteranfang {   
min-width: 8%;
max-width: 10%;
background: linear-gradient(-90deg, #009EA3, #009EA3, #006062);
}

.shortende {  
min-width: 6%;
max-width: 8%;
background: linear-gradient(90deg, #009EA3, #009EA3, #006062);
}

.standardfilter {      
min-width: 10%;
max-width: 13%; 
background: linear-gradient(90deg, #00696C, #009EA3, #009EA3, #009EA3, #00696C);
}

.longestfilter {     
min-width: 23%;
max-width: 25%;
background: #009EA3;  
}
.longerfilter {    
min-width: 15%;
max-width: 17%;
background: linear-gradient(90deg, #00696C, #009EA3, #009EA3, #009EA3, #00696C);
}
.shortfilter {  
min-width: 6%;
max-width: 8%;
background: linear-gradient(90deg, #00696C, #009EA3, #009EA3, #009EA3, #00696C);
}
.shorterfilter {   
min-width: 8%;
max-width: 10%;
background: linear-gradient(90deg, #00696C, #009EA3, #009EA3, #009EA3, #00696C);
}
.shortestfilter {  
min-width: 4%;
max-width: 4%;
padding: 0.1em;
background: linear-gradient(90deg, #00696C, #009EA3, #009EA3, #009EA3, #00696C);
}

/*
.suchfeldanfang {
/* background: linear-gradient(20deg, #FFF, #009EA3, #009EA3, #009EA3, #009EA3, #009EA3, #009EA3, #009EA3); 
background: linear-gradient(-90deg, #009EA3, #00979B, #00878A, #007275, #005759);
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
}
.suchfeldende {
/* background: linear-gradient(-20deg, #FFF, #009EA3, #009EA3, #009EA3, #009EA3, #009EA3, #009EA3, #009EA3);  
background: linear-gradient(90deg, #009EA3, #00979B, #00878A, #007275, #005759);
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff; 
text-align: center;
}
     /*** TEST ENDE ***/
     
.small {
font-size: 0.5em;
}
     
.middle {
vertical-align: middle;
}

.links {
 background: linear-gradient(20deg, #009EA3, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF); 
 vertical-align: middle;
}
.rechts {
background: linear-gradient(160deg, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #FFF, #009EA3);
 vertical-align: middle;
}

.notice {
color: #009EA3;
font-size: 1.1em;
font-weight: bold;
}

#fusszeile {
  clear: left;
  display: inline;
  width: 100%;
  height: 1em;
  float: left;
  text-align: center;
  margin: 0;
  padding: 1em 0;
  font-size: 1.1em;
  color: #86BC24;
  background: #FFF;
  border-top: 1px solid #009EA3;
}
  
.buttonnormal {
 background: #FFF;
color: #009EA3;
font-size: 1em;
min-width: 5em;
height: 2em;
padding: 0.3em;
border: 1px solid #86BC24;
box-shadow: 3px 2px 2px #86BC24;
}

.buttongross {
 background: linear-gradient(-90deg, #009EA3, #009EA3, #009EA3, #00696C);
/*background: linear-gradient(150deg, #86BC24, #86BC24, #009EA3, #009EA3, #009EA3, #009EA3);
 background: conic-gradient(at 0% 0%, #009EA3 20%, #009EA3 30%, #FFF 70%); */
color: #FFF;
font-size: 1.3em;
height: 2em;
padding: 0.3em;
border: 0px solid #86BC24;
box-shadow: 3px 2px 2px #86BC24;
}

#fusszeile li {
  display: inline;
  padding-left: 1em;
  padding-right: 1em;
  }

#fusszeile li.active a {
  font-style: italic;
  color: #86BC24;
  text-decoration: none;
}

#fusszeile a:link,
#fusszeile a:visited {
  color: #009EA3;
  text-decoration: none;
  }

#fusszeile a:hover,
#fusszeile a:focus {
  font-style: italic;
  color: #86BC24;
  text-decoration: none;
}

#fuss {
  display: none;
  width: 0;
  height: 0;
  }

h1 { 
  font-family: 'latomedium';
  font-size: 1.3em; /* font-size: 1.5em; */
  font-weight: bold; 
  color: #009EA3;
  padding: 1.5em 0 0.5em;
}

h2 {
  font-family: 'latomedium';
  font-size: 1.3em; /* font-size: 1.5em; */
  font-weight: bold;
  color: #009EA3;
  text-align: center;
  padding: 1.5em 0 0.5em;
}

h3 {
  font-family: 'latomedium';
  font-size: 1.15em; /* font-size: 1.3em; */
  color: #009EA3;
}

h4 {
  font-family: 'latomedium';
  font-size: 1.2em;
  color: #009EA3;
}

h5 {
  font-family: 'merriweather_regular';
  color: #009EA3;
  font-size: 1.1em;
  padding: 0 17%;
  text-align: center;
  font-weight: 400;
  }
  
img.logo {
  object-fit: contain;
  min-width: 300px;
  max-width: 700px;
  height: auto;
  vertical-align: middle;
  overflow: hidden;
  }

img.link {
  text-decoration: none;
  border: 0 none;
  }


/* responsive Design */

/* war 1080! */
@media only screen and (max-width: 1440px) and (orientation: landscape) {

 /*
th {
font-size: 1em;
/*width: 12em;
 min-width: 7em;
max-width: 10em; */
}
   
.button {
background: #ECECFB;
color: #535353;
font-size: 1em;
height: 2em;
}

.filter {
background: #ECECFB;
color: #535353;
/* font-size: 1em;
height: 2em; */
}
 /*
#normal {
  width: 98%;
  min-height: auto;
  height: auto;
  margin: 0 auto;
  padding: 0.1em 1% 0;
}  */
h1 {
  margin-top: -1em;
  }
h2 {
  margin-top: -1em;
  }
h5 {
  padding: 0 10%;
  }
}


@media only screen and (max-device-width: 1200px) {


#logo {
  display: inline;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 98%;
  height: auto;
  background: #FFF;
  float: left;
  text-align: center;
  padding-right: 2%;
  }

#fusszeile {
  display: none;
  width: 0;
  height: 0;
  }
    
#normal {
  clear: left;
  width: 90%;
  min-height: 90%;
  height: auto;
  margin: 5% 5% 10%;
  padding: 0;
  font-size: 1.5em;
  }
  
  th {
font-size: 0.8em;
}
  */
#fuss {
  display: inline;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  float: right;
  width: 100%;
  height: 1em;
  font-size: 1.6em;
/*  line-height: 2em; */
  border-top: 4px double #86BC24;
  float: left;
  list-style: none;
  color: #86BC24;
  text-align: center;
  background: #FFF;
  padding: 0.5em 0 1.5em;
/*  padding: 0.5em 0 2em; */
  margin: 0.3em 0 0;
}

#fuss li {
  display: inline;
  padding: 0 0.5em;
  text-decoration: none;
  }

#fuss li.active a {
  color: #86BC24;
  font-style: italic;
  text-decoration: none;
}

#fuss a:link,
#fuss a:visited {
  color: #009EA3;
  text-decoration: none;
  }

#fuss a:hover,
#fuss a:focus {
  font-style: italic;
  color: #86BC24;
}

.button {
background: #FFF;
color: #8ABE25;
font-size: 1em;
height: 2em;
border: 1px solid #8ABE25;
}

.filter {
background: #FFF;
color: #8ABE25;
/* font-size: 1em;
height: 2em; */
border: 1px solid #8ABE25;
}

h1 {
  font-size: 1.5em;
  }

h2 { 
  font-size: 1.5em;
  width: 96%;
  padding: 0 2%;
  text-align: center;
  }

h3 {
  font-size: 1.2em;
  }

h4 {
  font-size: 1.1em;
  }

h5 {
  font-size: 1.1em;
  padding: 1% 4% 0;
  }
}

@media only screen and (max-width: 980px) and (orientation: portrait) {

#normal {
  font-size: 2em;
  }

#fuss {
  font-size: 2.5em;
  height: 2em;
/*  line-height: 0.6em; */
  padding: 0.5em 0;
  margin: 0.3em 0 -0.3em;
}

#fuss li {
  font-size: 1.1em;
  } 
  
  .button {
background: #FFF;
color: #8ABE25;
font-size: 1em;
height: 2em;
border: 1px solid #8ABE25;
}

.filter {
background: #FFF;
color: #8ABE25;
/* font-size: 1em;
height: 2em; */
border: 1px solid #8ABE25;
}
}

@media only screen and (max-width: 800px) and (orientation: portrait) {

#logo {
  width: 80%;
  padding: 0 17% 0 3%;
  }
/*
#normal {
  font-size: 1.5em;
  }
  */
#fuss {
  font-size: 1.5em;
  height: 2.5em;
  padding: 0.5em 0;
  margin: 0.3em 0 -0.3em;
}

#fuss li {
  font-size: 1.1em;
  }
  
  .button {
background: #FFF;
color: #8ABE25;
font-size: 1em;
height: 2em;
border: 1px solid #8ABE25;
}

.filter {
background: #FFF;
color: #8ABE25;
/* font-size: 1em;
height: 2em; */
border: 1px solid #8ABE25;
}
}