@import url(normalize.css);

/* Load Lato font, the same as we use in timeline */
@import url(https://fonts.googleapis.com/css?family=Lato:900&text=SMK);
@import url(https://fonts.googleapis.com/css?family=Lato:400);

/* Generell */
body {
  background: #fff;
  color: #000;
  font-family: 'Lato',sans-serif;
  font-size: 1em;
  font-weight: 400;
  height: 100%;
  min-width: 320px;
  text-align: center;
}

/* WRAPPER */
.wrapper {
  max-width: 800px;
  position: relative;
  margin: 0 auto;
}
p {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3em;
}
a:link,
a:visited {
  color: #c00;
  text-decoration: none;
}
a:hover,
a:active {
  color: #000;
  transition: .5s;
}

.stat {
  width: 90%;
  margin: 0 auto;
}
.stat p {
  color: #00c;
  font-style: italic;
}

/* Kopfzeile */
.smkheader {
  display: block;
  background-color:#2E2E2E;
}

smkheader a:link,
smkheader a:active,
smkheader a:hover,
smkheader a:visited {
  color: #EBEBEB;
}

/* NAVIGATION */
nav {
  font-size: 1em;
  margin: 0 auto 2em;
  padding-bottom: 1em;
  text-align: center;
}

/* Bügelverschluss-Linie
nav:after {
  content: "";
  display: block;
  height: 30px;
  width: 100%;
  background: transparent url(./buegelverschluss.jpg) repeat-x bottom;
}
*/

nav ul {
  display: inline-block;
  list-style: none;
  margin: 3px auto;
  padding: 0;
  text-align: center;
}
nav li {
  display: inline;
  margin: 0 1.3em;
}
nav a:link,
nav a:visited {
  color: #ECECEC !important;
  text-decoration: none;
}
nav a:hover,
nav a:active {
  color: #F2BF25 !important;
  transition: .5s;
}
.aktuell a:link,
.aktuell a:visited,
.aktuell a:hover,
.aktuell a:active {
  color: #F2BF25 !important;
}

/* Hauptteil */
main {
  display: block;
}
main h1 {
  color: #c00;
  margin: 1.5em 0 1em;
  font-size: 1.8em;
  font-weight: 400;
}
main h2 {
  margin: 0 0 1em;
  font-size: 1.5em;
  font-weight: 400;
}
main h3 {
  margin: 0 0 1em;
  font-size: 1.2em;
  font-weight: 400;
}

/* Bilder */
main img{
  border: 2px solid #c00;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

/* Kontakt */
.kontakt {
  line-height: 1.6;
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
}
.kontakt input[type="text"],
.kontakt textarea {
  border: 1px solid #000;
  border-radius: 4px;
  height: 20px;
  margin: 5px auto;
  outline: 0 none;
  padding: 10px;
  width: 90%;
}
.kontakt input[type="text"]:focus,
.kontakt textarea:focus {
  box-shadow: 0 0 4px #c00;
}
.kontakt textarea {
  height: 100px;
}
.kontaktfehler { /* Error by sending message; class from gen_validatorv4.js */
  color: #c00;
}
.knopf {
  background: #fff;
  border: 2px solid #900;
  border-radius: 4px;
  color: #000;
  display: inline-block;
  font-weight: 700;
  padding: 10px 10px 5px;
  line-height: 1em;
}
.knopf:hover,
.knopf:active {
  color: #000;
  transition: .5s;
  box-shadow: 0 0 4px #c00;
}

/* Anpassung an kleine Display */
@media all and (max-width: 400px) {
  smkheader h2 {
    font-size: 1em;
  }
}