/*
 * 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: 0.5rem;
 margin: Auto;
 max-width: 45rem;
 scroll-behavior: smooth;
 transition: padding, max-width 1s;
}

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

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

article {
  height: 100vh;
}

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;
}

figure > img,
figure > a > img {
 display: Inline;
 max-width: 100%;
 height: Auto;
 object-fit: contain;
 box-shadow: 0px 0px 3px 1px #595959;
}

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

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

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

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]: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"],
input[type="reset"],
button[type="button"],
button[type="submit"] {
 background-color: #E0E0E0;
 transition: background-color 0.5s;
}

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

input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
 accent-color: #4169E1;
}

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

label {
 white-space: nowrap;
}

label:hover {
 color: #4169E1;
}

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

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

.info {
 font-size: 0.85rem;
 font-style: Oblique;
 background-color: #FFFFEE;
 padding: 5px;
}

.status {
 color: #FFFFFF;
 background-color: #2AB16D;
 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;
 user-select: None;
}

/* Anpassung an Geräte */
@media screen and (max-width: 55rem) {
 body {
  max-width: 45rem;
  padding: 0.5rem;
 }
 article {
  min-height: 15rem;
 }
}

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

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

@media screen and (min-width: 120rem) {
 body {
   max-width: 110rem;
   padding: 3rem;
 }
}

@media (prefers-color-scheme: dark) {
 html {
  background-color: #232323;
 }

 body {
  color: #FFFFFF;
  background-color: #000000;
 }

 header {
  background-color: #686868;
 }

 nav {
  background-color: #9B9B9B;
 }

 form {
  background-color: #686868;
 }

 h1, h2 {
  background-color: #686868;
 }

 footer {
  background-color: #686868;
 }
}