/*
 * Webseitenschutz - style.css (utf-8)
 * - https://werner-zenk.de
 */

html {
 background-color: #F5F5F5;
 scroll-behavior: smooth;
 cursor: Default;
}

body {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
 color: #000000;
 background-color: #FFFFFF;
 padding: 1rem;
 margin: Auto;
 max-width: 45rem;
 scroll-behavior: smooth;
}

header {
 background-color: #ECECEC;
 text-align: Center;
 padding: 0.5rem;
 font-size: 1.4rem;
}

nav {
 background-color: #F5F5F5;
 text-align: Center;
 padding: 0.5rem;
 word-spacing: 8px;
}


a:link, a:visited {
 color: #4169E1;
}

h1 {
 font-size: 1.2rem;
 font-weight: Normal;
 background-color: #ECECEC;
 padding: 0.2rem 0 0.2rem 0.5rem;
}

h2 {
 font-size: 1rem;
 font-weight: Normal;
 background-color: #ECECEC;
 padding: 0.2rem 0 0.2rem 0.5rem;
}

 /* Formular */
form {
 background-color: #F5F5F5;
 padding: 0.1rem 0 0.5rem 1rem;
}

select {
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="button"],
input[type="reset"],
input[type="submit"],
button[type="submit"] {
 border: Solid 1px #9A9A9A;
 font-family: Verdana, Arial, Sans-Serif;
 font-size: 1rem;
 padding: 3px 5px 3px 5px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="checkbox"]:focus {
 border:0; outline:0; /* Chromium */
 border: Solid 1px #4169E1 !important;
 box-shadow: 0px 0px 3px 0px #4169E1 !important;
}

input[type="submit"],
input[type="button"],
button[type="button"],
button[type="submit"] {
 background-color: #E0E0E0;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button[type="button"]:hover,
button[type="submit"]:hover {
 border: Solid 1px #0078D7;
 background-color: #E5F1FB;
}

input[type="checkbox"]:checked + label {
 color: #4169E1;
}

.ok {
 color: #FFFFFF;
 background-color: #0094D2;
 padding: 15px;
}

.ko {
 color: #FFFFFF;
 background-color: #EE0000;
 padding: 15px;
}

.pflichtfeld {
 color: #FF0000;
}

.hilfetext {
 font-family: Arial, Tahoma, Verdana, Sans-Serif;
 font-size: 0.80rem;
 font-style: Oblique;
 color: #009B00;
}

footer {
 text-align: Center;
 background-color: #ECECEC;
 padding: 0.5rem;
 margin-top: 1rem;
}


 /* Anpassung an Mobile Geräte */
@media screen and (min-width: 43rem) {
 article {
  min-height: 45rem;
 }
 footer {
  margin-top: 5rem;
 }
}

@media screen and (max-width: 49rem) {
 body {
  padding: 0.5rem;
 }
 article {
  min-height: 15rem;
 }
}

@media screen and (min-width: 60rem) {
 body {
   max-width: 55rem;
   padding: 1.5rem;
 }
}

@media screen and (min-width: 75rem) {
 body {
   max-width: 68rem;
   padding: 2.5rem;
 }
}