/*
 *
 *  Reset CSS, 
 *
 *  sets back all values to defined defaults, to be the same in all browsers
 *  Setzt alle Werte auf definierte Standard Werte, damit sie in allen Browsern gleich sind.
 *
 */
 
* { margin:0; padding: 0; border: 0 none; width: auto}
/* for gecko browsers */
option { padding-left: 0.4em }

/* vertical scroll bar not enabled per default - for mobile browsers */
html { height:100%; margin-bottom: 1px; }

/*end reset*/

* {
  box-sizing: border-box;
}

body {
  color: #000;
  background: #eee;
  margin: 0 auto;
  text-align: left;
  font: normal 1.1em Arial, Helvetica, sans-serif;
  line-height: 140%;
  min-width: 20em;
}



@media (min-width: 40em) {
  body {
    width: 40em;
  }
}

@media (min-width: 60em) {
  body {
    width: 60em;
  }
}

#banner {
  width: 100%;
  background-color: #ffffff;
/*  background-image: url(../bilderlayout/banner.jpg);*/
  /*height: 100px;*/
}

#banner p {
  position: relative;
  top: 0;
  left: 2em;
  font: italic normal 1em 'Times New Roman',Times,serif;
  /* color: #ff8c00 */
  color: #000;
  text-shadow: 0.1em 0.1em 0.1em #ff6a00; 
}

@media (min-width: 40em) {
  #banner p {
    font: italic normal 2em 'Times New Roman',Times,serif;
}
}

@media (min-width: 60em) {
  #banner p {
    font: italic normal 3em 'Times New Roman',Times,serif;
}
}

#banner img {
  width: 100%;
  height: auto;
  padding: 0;
}

#banner a {
  text-decoration: none;
  color: #000;
  display: block;
}

#banner a:hover, #banner a:active {
  color: #777777;
  text-decoration: none;
}


/* menue section */
#menue ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff8c00;
    width: 100%;
}

#menue li {
  float: left;
  font: 0.8em  Arial, Helvetica, sans-serif;
}

#menue li a {
    display: block;
    color: white;
    text-align: center;
    border: 0px solid #ffffff;
    border-left: 1px solid #ffffff;
    text-transform: uppercase;
    padding: 0.1em 0.1em;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
#menue a:hover {
    background-color: #fcb814;
}

#menue li.kontakt {
  font: 0.6em  Arial, Helvetica, sans-serif;
  float: right;
  width: 0%;
  height: 0px;
}

#menue li.kontakt a {
  text-transform: initial;
}

@media (min-width: 40em) {

  #menue li {
    font: bold 1em  Arial, Helvetica, sans-serif;
  }

  #menue li a {
    padding: 0.2em 0.5em;
  }
}

@media (min-width: 60em) {

  #menue li {
    font: bold 1,3em  Arial, Helvetica, sans-serif;
  }

  #menue li.kontakt {   
  width: auto;
  height: auto;
  }
}
/* end menue */

/* drop down menue*/
.drop_down_menue {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  .dropdown:hover .dropbtn {
    background-color: #3e8e41;
  }
/*end drop down menue */

#follow_up {
    background-color: #ffffff;
}

#follow_up p {
  padding: 0.5em 1em 0.5em 1em;
  text-align: right;
}


#follow_up a { 
  text-decoration: none;
  color: #ffffff;
  padding: 0em 1em 0em 1em;
  background-color: #ff8c00;
}

#follow_up a:hover {
  background-color: #fcb814;
}
/* end navigation*/

/* kontakt footer*/
#footer { 
  clear: both;
  text-align: center;
  background-color: #ff8c00;
  padding: 0.5em;

}

#kontakt a {
  display: block;
  color: white;
  font: 1em Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-align: center;
}
#kontakt a:hover {
    background-color: #fcb814;
}

/* footer */
#fusszeile {
  text-align: center;
  clear:both;
}
/* end footer section */

/* inhalt */

h1.titel {
  font:  normal 1.5em 'Arial', Helvetica, sans-serif;
  text-align: center;
  color: #ff8c00;
  padding: 0.5em 0 0.7em 0.6em;
  background-color: #ffffff;
}

@media (min-width: 40em) {
  h1.titel {
  font: normal 2em 'Arial', Helvetica, sans-serif;
}
}

#inhalt {
background-color: #ffffff;
}

@media (min-width: 40em) {
    #inhalt {
        padding-left: 1em;
        padding-right: 1em;
    }
  }

@media (min-width: 60em) {
    #inhalt {
        padding-left: 10em;
        padding-right: 10em;
    }
  }

/* globale level 1 Überschrift
 * Hauptüberschrift
 */
h1 {
  font: bold 2em 'Arial', Helvetica, sans-serif;
  text-align: left;
  padding:  0.5em 0 0.5em 1em
}

h1.zentral {
  font: normal 1.9em 'Arial', Helvetica, sans-serif;
  text-align: center;
  color: #ff8c00;
  padding-top: 0.7em;
  padding-bottom:  0.7em;
}

/* globale level 2 Überschrift
 * Thema, Artikel Überschrift etc.
 */
h2 {
  font: bold 1.5em 'Arial', Helvetica, sans-serif;
  padding:  0.3em 0em;
  hyphens: auto;
  color: #222222;
}

@media (min-width: 40em) {
  h2 {
  font: bold 2em 'Arial', Helvetica, sans-serif;
  padding:  0.5em 1.5em;
}
}

#inhalt  h3 {
  font: normal 1.4em 'Arial', Helvetica, sans-serif;
  padding:  0.3em 0em;
  hyphens: auto;
  color: #222222;
}

@media (min-width: 40em) {
  h3 {
   font: normal 1.3em 'Arial', Helvetica, sans-serif;
   padding:  0.3em 1.3em;
}
}

img {
  width:  100%;
  height: auto;
  padding: 0 0.8em 0.3em 0;
}


@media (min-width: 40em) {
  img {
    width: 300px;
    float: left;
    padding: 0 0.8em 0.3em 0;
  }


}


p {
/* text: globale Einstellungen */
  text-align: justify;
  padding: 0 0 0.5em 0;
  hyphens: auto;
  color: #777777;
}

ul li {
    text-align: justify;
    padding: 0;
    hyphens: auto;
    color: #777777;   
}

#inhalt ul {
  padding-left:  17px;
  padding-bottom: 5px;
}

#inhalt ul li {
  margin-left: 17px;
  padding-left:  0px;
  padding-bottom: 5px;
}

p.spruch {
  text-align: center;
  font-style: italic;
}

@media (min-width: 60em) {
 p.spruch {
  font-size: 1.3em;
}
}

#inhalt p.hervorhebung{
  font-weight: bold;
}

#inhalt .ort{
  font-style: italic;
}

#inhalt p.veranstalter{
  font-style: italic;
}

a {
    color: #ff8c00;
    text-decoration:none;
}

a:hover {
    text-decoration:  underline;
}

a.dokument {
    color:  #ff8c00;
    font-weight:bold;
}


a.extern {
    color: #2783ab;
}


.button {
  background-color: #ff8c00;
  color:  #fff;
  display: inline-block;
  width: auto;
  text-decoration: none;
  border-width: 0px;
  border-radius: 0.5em;
  text-align: center;
  padding: 0.3em;
  margin:auto;
}

.center {
  text-align: center;
}

.block {
  display: block;
  width: 100%;
}

.button a {
  font:  normal 1.4em Arial, Helvetica, sans-serif;
  background-color: #ff8c00;
  color:  #fff;
  text-decoration: none;
}


.button:hover {
    background-color: #fcb814;
}

.button:hover a {
  background-color: #fcb814;
}

.OK { 
    border-width: 4px;
    border-color: #99ca3b;
    border-style: solid;
}

.OK:hover {
    background-color: #99ca3b;
}

.OK:hover a {
  background-color: #99ca3b;
}

a.button_normal {
  font:  normal 1.2em Arial, Helvetica, sans-serif;
  width: 10em;
  text-decoration: none;
}

a.button_normal.hover {
    background-color: #fcb814;
}

div.artikel {
    padding: 0.7em 1.3em;
}


p.datum {
  font-weight: bold;
  color: #6c6d70;
  padding-left: 0;
  padding-bottom: 0.7em;
  width: 100%;
}

div.artikel img {
  padding-top: 0;
  padding-left:0;
  padding-right:1em;
  padding-bottom: 1em;
  width: 90%;
}

@media (min-width: 40em) {
  div.artikel img {
    width: 15em;
  }
}

div .inside_box {
    width: auto;
    border: 2px #ff8c00 solid;
    padding: 0.5em;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
  }

  div.box {
 
    margin: 1%;
    border-top-width: 2px;
    border-top-style: solid;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-color: #ff8c00;
  }
  
    div.box img {
      float: none;
      width: 90%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    div.box h2 {
      display: block;
      text-align: center;
    }
    
    div.box p.datum {
      display: block;
      text-align: center;
    }

    @media (min-width: 40em) {

        div.box {
          width: 46%;
          float: left;
          height: 38em;
        }
    
        div.box img {
    
            width: 15em;
    
        }
    
        div.box h2 {
    
            font-size: 1.5em;
    
        }
      }

    /* overwrite colo schema by accdent colors */
    div.smaragd {
        background-color: #007184;
      }

      div.smaragd p {
        color: #ffffff;
      }
      div.bluelight {
        background-color: #009fdf;
      }

      div.bluelight p {
        color: #ffffff;
      }

      div.patrol {
        background-color: #00a09e;
      }

      div.patrol p {
        color: #ffffff;
      }

      div.yellow {
        background-color: #fcb814;
      }

      div.yellow a {
        color: #ffffff;
      }

      div.grey {
        background-color: #8a8c8f;
      }

      div.grey p {
        color: #ffffff;
      }

      div.kolping {
        background-color: #ff8c00;
      }

      div.kolping p {
        color: #ffffff;
      }

      div.kolping a {
        color: #009fdf;
      }

    div.picture_title {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding-top: 0;
      padding-bottom: 1em;
    }

    div.picture_title img {
      width: 40%;
      padding-left: 0px;
      padding-right: 5px;
      padding-top: 0px;
      padding-bottom: 0em;
      margin-left: 0;
      margin-right: 0;
    }

    div.picture_title h2 {
      padding-left: 0em;
      padding-right: 0em;
      padding-top: 0em;
      padding-bottom: 0em;
      width: 60%;
    }

    div.picture_title_ganz {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      padding-top: 0;
      padding-bottom: 1em;
    }

    div.picture_title_ganz img {
      width: 100%;
      padding-left: 0px;
      padding-right: 5px;
      padding-top: 0px;
      padding-bottom: 0em;
      margin-left: 0;
      margin-right: 0;
    }

    div.picture_title_ganz h2 {
      padding-left: 2em;
      padding-right: 2em;
      padding-top: 2em;
      padding-bottom: 2em;
      width: 100%;
    }

    @media (min-width: 40em) {
      div.picture_title img {
        padding-right: 10px;
        width: 40%;
      }

      div.box div.picture_title img {
        width: 40%;
      }
 
      div.picture_title h2 {
        width: 60%;
      }

      div.box div.picture_title h2 {
        width: 60%;
      }

    }
  
    div.bildergalerie {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding-top: 1em;
      padding-bottom: 1em;
    }

    @media (min-width: 40em) {
      div.bildergalerie img {
        padding-right: 1em;
        padding-left: 1em;
        width: 14em;
      }
    }
  
  /* text formatting*/
  #inhalt span.wichtig {
    color: #ab208e;
    font-weight: bold;
  }

  span.kolping_zitat {
    color: #ff8c00;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;

  }


  /* fixed element abover footer right positined usuable up to 3 chanracters*/
  .fixed_right {
    border-width:0.3em;
    border-color:#ffffff;
    border-style: solid; 
    position:fixed;
    bottom:4em;
    margin-left:21em;
  }

  @media (min-width: 40em) {
    .fixed_right {
        margin-left:37em;
    }
  }
  
  @media (min-width: 60em) {
    .fixed_right {
        margin-left:50em;
    }
  }

  /* end inhalt */