/* =====================================================================================================================
Stylesheet für die Saddei.de Internet-Seiten - Responsive mit Grid
Stand Februar 2019
datei: runningex.css
datum 01.02.2019
autor: jan saddei
aufbau 1. Kalibrierung und allgemeine styles
       2. STyles für Layoutbereiche
       3. Sonstige STyles
       4. Light Box
======================================================================================================================= */

/* ===========================================
   1. Kalibrierung und allgemeine styles
   ========================================= */
/* Allgemeine Farben: rot: #f0295d (rgb-204-41-93) | gelb: #f9c406 (rgb-249-196-6) | blau: #29647c (rgb-41-100-124) */
/* Kalibrierung der wichtigsten Abstände */

* { padding: 0; margin: 0; box-sizing: border-box;}
/* h4, h2, p, ul, ol { margin-bottom: 1em; } */
ul ul { margin-bottom: 0; }
li { margin-left: 1em; }

/* Allgemeine Sektoren */

html { height: 101%; } /* erzwingt scrollbar im firefox */
body { 
   color: #000000;
  /* background: #feeeb0 url(farbverlauf3.jpg) repeat-x top left; */
   background-color: #ffffff;
   font-family: Verdana;
   font-size: 100%;
   }

h1 { font-size:0.8em;
   /*  text-shadow: 0 0 10px #7fa5d4, 0px 0px  1px black; */
     text-shadow:  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
     color: #8fca79;
     text-indent: 0px;
     letter-spacing: 0.2em;
     font-weight: light;
 }
h2 { font-size: 4.5em;
     text-shadow: 0 0 8px #8d8b24, 0px -1px #29647c, 0px 1px #29647c, 1px 0px #16b8f9, -1px 0px #16b8f9;
     color: white;
     z-index: 1;
     margin-top: -14px;
 }

h3 { font-size: 100%;
     text-indent: 0px;
 }

h4 { font-size: 2.5em;
     text-shadow: 0 0 8px #8d8b24, 0px -1px #16b8f9, 0px 1px #16b8f9, 1px 0px #16b8f9, -1px 0px #16b8f9;
     color: light-green; opacity: 1;
     position: relative;
     z-index: 1;
     left: 0px;
     top: 0px;
 }

h5 { font-size: 1.9em;
     color: #8d8b24;
     text-indent: 0px;
 }

h6 {
font-size: 16px; color: black; position: relative; top: -10px; left: 0px; }

pre {
    white-space: pre-wrap;
}

img {
  max-width: 100%;
  height: auto;
}




address {
   text-align: center;
   font-size: 0.7em;
   font-style: normal;
   letter-spacing: 2px;
   line-height: 1.5em;
   }

.addresse2 {
   position: relative;
   float: right;
  
   margin-right: -4px;
   margin-top: -4px;
   font-size: 0.7em;
   font-style: normal;
   font-weight: bold;
   
   line-height: 1.5em;
   color: #42c8f4;
   border: 0px solid black;
   }

/* Hyperlinks allgemein */
a { text-decoration: none; outline: none; font-size: 12px;}

a:link { border-bottom: 0px dotted #cc0000; color: #16b8f9; }
a:visited { color: #16b8f9; }
}

a:hover { color: border-bottom: 1px dotted #8d8b24; color: #8d8b24; }

a:active {
   color: #8d8b24;
   background-color: #d90000;
}

/* Allgemeine Klassen und IDs */






input {
   border: 2px solid #16b8f9;
   padding: 10px;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   margin: 4px;
   font-size: 1.2em;
   color: black;
   font-weight: bold;
   height: 33px;
   background: url(farbverlauf4.jpg) white;
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
}

input.submit {
   border: 1px solid #666;
   padding: 4px;
   cursor: pointer;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   margin: 4px;
   height: 33px;
   width: 100px;
   color: #666;
   background: rgba(141,139,36,0.5);
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
}

textarea {
   border: 2px solid #16b8f9;
   padding: 10px;
   width: 90%;
   font-size: 1.2em;
   font-weight: bold;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   margin: 4px;
   background: url(farbverlauf4.jpg) white;
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
}

select {
   border: 2px solid #16b8f9;
   padding: 4px;
   font-weight: bold;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   margin: 4px;
   height: 33px;
   background: url(farbverlauf4.jpg) white;
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
}


option {
   color: black;
   font-weight: bold;
   border: 2px solid #16b8f9;
   padding: 10px;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   margin: 4px;
   /* background: url(farbverlauf4.jpg) gold; */
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
}

checkbox {
   color: red;
   font-weight: bolder;
   border: 1px solid #666;
   padding: 10px;
   border-radius: 7px;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   margin: 4px;
   /* background: url(farbverlauf4.jpg) gold; */
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
}

/* ===================================
   2. STyles für die Layoutbereiche
   =================================== */


#teaser2links a {
   float: left;
   position: relative;
   border: 0px solid #666;
   color: black;
   font-size: 12px;
   line-height: 1.5em;
   text-align: center;
   letter-spacing: 2px;
   width: 100%;
   margin-bottom: 4px;
   margin-top: 0px;
   margin-left: 0px;
   border-radius:0 15px 15px  0;
    -webkit-border-radius:0 15px 15px  0;
    -moz-border-radius:0 15px 15px  0;
   background-color: rgba(204,41,93,0.5); /* #f0295d rot */
    box-shadow:0px 0px 15px #8ba67d;
    -webkit-box-shadow: 0px 0px 15px #8ba67d;
    -moz-box-shadow:0px 0px 15px #8ba67d;
    opacity: 1;
    z-index: 1;
    transition: margin-left 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-left 0.5s ease-in-out 0.1s;
}

#teaser2links .submenu a{
  border: 1px solid #666;
  font-size:12px;
 width:100%;
  
  position:relative;
  left: 0px;
 top: -20px;
  margin: 10px 0 -13px 0;
  color: black;
  list-style-type: none;
  background: rgba(249,196,6,0.5);  /* #f9c406 gelb */
  clear:both;
  z-index: 1;
}

#teaser2links a, .submenu a{
  
  border: 1px solid #666;
  border-collapse:collapse;
  color:black;
  font-weight:bold;
  text-decoration:none;
  padding: 4px;
 width: 100%;
  list-style-type: none;
   
}

.kopfbereich {
   padding: 0px;
   border: 0px solid red;
}

.row::after {
  content: '';
  clear: both;
  display: table;
}

[class*='col-'] {
  float: left;
  padding: 15px;
  border: 0px solid red;
}

/* For mobile phones: */
[class*='col-'] {
  width: 100%; 
}

.col-3 { margin: 0px 0px 0px 0px;}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  h1 { font-size: 1.0em }
/*  h2 { font-size: 2.0em;} */
  #teaser2links a { margin-bottom: 20px;}
  #teaser2links .submenu a{margin: 5px 0 5px 0; }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  h1 { font-size: 1.4em }
/*  h2 { font-size: 2.5em; } */
/*  #teaser2links a { margin-bottom: 40px; }
  #teaser2links .submenu a{margin: 10px 0 10px 0; } */
  #textbereich {text-align: justify;}
}

.footer {
  background-color: rgba(143,202,121,0.5); /* grün: #8fca79 */
  color: #000;
  text-align: center;
  padding: 15px;
  
  border: 1px solid black;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  width: 100%;
  margin: 0px;
}













/* .col-3 { margin: 0px 0 0px 0; } */



#textbereich { 
   
    width: 100%;
    position: relative;
   
    
    border: 1px solid black;
    padding: 15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    background-color: white;
    
    /* text-align: justify; */
    text-indent: 0px;
    z-index: 0;
    line-height: 1.8;
    word-spacing: 0.3em;
    margin-bottom: -5px;
    
   
}

#textbereich p {
text-indent: 50px;
}
     #textbereich a {
        border-bottom: 1px dotted #16b8f9; color: #16b8f9;
     }
      #textbereich a:hover,
      #textbereich a: focus {
          border-bottom: 1px solid #8d8b24; color: #8d8b24;
       }

#textbereich img {
   border: 1px solid black;

   display: inline;

   padding: 2px;
   margin: 20px 2px 20px 2px;
border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    background-color: white;
   box-shadow:0px 0px 15px #666;
    -webkit-box-shadow: 0px 0px 15px #666;
    -moz-box-shadow:0px 0px 15px #666;
    
}

#textbereich ul {
    width: 80%;
    list-style-type: square;
    list-style-position: outside;
    text-indent: 0px;
    font-size: 16px;
}

#textbereich #fussbereich {
   /* clear: both; */
   
   padding: 10px 20px 20px 20px;
   border-top: 1px solid black;
   margin-top: 20px;
   background: rgba(143, 202, 121, 0.8);
   
   /* opacity: 1; */
}

/* #textbereich ul {
    width: 600px;
    width: 80%;
    list-style-type: square;
    list-style-position: outside;
    text-indent: 0px;
} */


#textbereich a {
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 0 0 8px white;
    background-color: rgba(66,200,244,0.5);
    
    border-radius: 7px;
  border: 1px solid #8d8b24;
  padding: 2px;
  margin-top: 5px;
  
}

#textbereich a:hover {
    color: white;
    font-weight: bold;
    border: 1px black; 
    font-size: 1.1em;
    text-shadow: 0 0 8px black;
}

/* ===============================================

menu

   =============================================== */

/* #menu {
  font-size:12px;
  position:absolute;  
} */

#menu ul {
  list-style-type:none;
  list-style-image:none;
  
  padding:0px;
}

/* #menu li.teaser2links {
  float:left;
} */



/* #teaser2links a {
   float: left;
   position: relative;
   border: 0px solid #666;
   color: black;
   font-size: 12px;
   line-height: 1.5em;
   text-align: center;
   letter-spacing: 2px;
   width: 100%;
   margin-bottom: 4px;
   margin-top: 0px;
   margin-left: 0px;
   border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
   background-color: #42c8f4;
    box-shadow:0px 0px 15px #8ba67d;
    -webkit-box-shadow: 0px 0px 15px #8ba67d;
    -moz-box-shadow:0px 0px 15px #8ba67d;
    opacity: 1;
    transition: margin-left 0.5s ease-in-out 0.1s;
    -webkit-transition: margin-left 0.5s ease-in-out 0.1s;
} */

#teaser2links ul{
 display: none;
  list-style-type: none;
  margin-top: -10px;
}

/* #teaser2links a, .submenu a{
  
  border: 1px solid #666;
  border-collapse:collapse;
  color:black;
  font-weight:bold;
  text-decoration:none;
  padding: 4px;
 width: 100%;
  list-style-type: none;
   
} */

/* #teaser2links .submenu a{
  border: 1px solid #666;
  font-size:12px;
 width:100%;
  
  position:relative;
  left: 0px;
 top: -20px;
  margin: 20px 0 13px 0;
  color: black;
  list-style-type: none;
  background: white;
  clear:both;
  
} */


#teaser2links a:hover {
    box-shadow: inset 0px 0px 5px #666;
    -webkit-box-shadow: inset 0px 0px 5px #666;
    -moz-box-shadow: inset 0px 0px 5px #666;
    opacity: 1;
    background-color: rgba(66,200,244,0.5); /* #42c8f4 blau */
    margin-left: 0px;
    border-radius: 0 15px 15px 0;
    -webkit-border-radius: 0 15px 15px 0;
    -moz-border-radius: 0 15px 15px 0;
   width: 100%;
    z-index: 1;
}

/* ===============================================
14:29 25.01.2019   E N D E   D E S  S T Y L E S H E E T S
   =============================================== */