@charset "utf-8";
@import url("form.css");
@import url("icons.css");
@import url("suche.css");

:root {
  color-scheme: light dark;
  --mainbg-color: #b9d7ec;
}

html {
  background: Whitesmoke;
  scroll-behavior: Smooth;
  /* scrollbar-color: Lightgrey Whitesmoke;*/
  overflow-y: Scroll;
}

body {
  font-family: "Verdana Pro", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
  font-optical-sizing: Auto;
  font-size: 0.95rem;
  color: #303030;
  background-color: #fff;
  margin: 15px Auto 15px Auto;
  max-width: 825px;
  padding: 0.5rem;
  border-radius: 0.2rem;
  scroll-behavior: Smooth;
  overscroll-behavior: none; /*mobile browsers tend to provide a "bounce" effect*/
  overflow-anchor: none; /*To prevent scroll anchoring on the whole webpage*/
  transition: padding, max-width .5s;
}

header {
  background-color: var(--mainbg-color);
  padding: 5px;
  border-radius: 0.2rem;
  text-align: Center;
  margin-bottom: 10px;
  z-index: 10000;
}

header #logo {
  color: #ffffff;
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  font-variant: Small-Caps;
  letter-spacing: 3px;
}

header a#logo:hover {
  text-decoration: None;
}

nav {
  word-spacing: 0.3rem;
}

nav > a:link {
  border-bottom: Solid 3px Transparent;
}

nav > a:hover,
nav > a:active,
nav > a:focus {
  text-decoration: None;
  border-bottom: Solid 3px #ffffff;
}

nav > a#aktuell {
  border-bottom: Solid 3px #ffffff;
}

article {
  background-color: #ffffff;
  -ms-hyphens: Auto;
  -webkit-hyphens: Auto;
  hyphens: Auto;
  word-wrap: Break-Word;
  min-height: 680px;
}

a:link,
a:visited {
  color: #4d95cc;
  text-decoration: None;
}

a:hover,
a:focus,
a:active {
  text-decoration: Underline;
  text-decoration-skip-ink: Auto;
}

a.alle {
  font-size: 0.75rem;
  background-color: #ffffff;
  padding: 2px 5px 2px 5px;
  border-radius: 3px;
}

h1 {
  font-family: Arial, Tahoma, Sans-Serif;
  font-weight: Normal;
  font-size: 1.25rem;
  color: #303030;
  background-color: var(--mainbg-color);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border-radius: 0.2rem;
  margin-bottom: 35px;
  margin: 45px 0 35px 0;
  cursor: Default;
  scroll-margin-top: 25px;
}

h2 {
  font-family: Arial, Tahoma, Sans-Serif;
  font-weight: Normal;
  font-size: 1.1rem;
  color: #303030;
  background-color: var(--mainbg-color);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border-radius: 0.2rem;
  margin: 45px 0 25px 0;
  cursor: Default;
  scroll-margin-top: 25px;
}

h3 {
  font-family: Arial, Tahoma, Sans-Serif;
  font-weight: Normal;
  font-size: 1rem;
  color: #303030;
  background-color: var(--mainbg-color);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border-radius: 0.2rem;
  margin: 45px 0 25px 0;
  cursor: Default;
  scroll-margin-top: 25px;
}

h4 {
  font-family: Arial, Tahoma, Sans-Serif;
  font-weight: Normal;
  font-size: 0.94rem;
  color: #303030;
  background-color: var(--mainbg-color);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border-radius: 0.2rem;
  margin: 25px 0 25px 0;
  cursor: Default;
}

h6 {
  font-family: Arial, Tahoma, Sans-Serif;
  font-weight: Normal;
  font-size: 1rem;
  color: #303030;
  background-color: var(--mainbg-color);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border-radius: 0.2rem;
  cursor: Default;
}

h1 span.navzahl {
  font-size: 1.2rem;
  padding: 0px 7px 1px 6px;
  border-radius: 20px;
  background-color: #000000;
  color: #ffffff;
  display: Inline-Block;
  margin-left: 3px;
}

h1 a.navzahl {
  font-size: 1.2rem;
  padding: 0px 7px 1px 6px;
  border-radius: 20px;
  background-color: #ffffff;
  display: Inline-Block;
  margin-left: 3px;
}

a.navzahl:hover {
  text-decoration: None;
}

b,
strong {
  font-weight: 620;
}

pre {
  font-family: "Verdana Pro", Verdana, Arial, Sans-Serif !important;
  font-size: 0.85rem;
  font-variant-numeric: slashed-zero;
  color: #000000;
  background-color: #f5f5f5;
  border-radius: 0.2rem;
  overflow: Auto;
  /* scrollbar-width: thin;*/
  padding: 0.2rem;
}

pre code {
  font-family: "Verdana Pro", Verdana, Arial, Sans-Serif !important;
  white-space: Nowrap;
  font-variant-numeric: slashed-zero;
  overscroll-behavior: contain;
}

code {
  font-family: "Verdana Pro", Verdana, Arial, Sans-Serif !important;
  font-size: 0.85rem;
  color: #000000;
  background-color: #f5f5f5;
  hyphens: None;
  font-variant-numeric: slashed-zero;
}

samp {
  font-family: Monospace;
  color: #656565;
}

mark {
  color: #000000;
  background-color: #e0ffc1;
}

q {
  quotes: Auto;
}

hr {
  border: 0;
  height: 2px;
  background-image: linear-gradient(
    to right,
    rgba(223, 223, 223, 0.5),
    rgba(0, 0, 0, 0.45),
    rgba(223, 223, 223, 0.5)
  );
  margin: 2rem 4rem 2rem 4rem;
}

figure > img,
figure > a > img {
  display: Inline;
  max-width: 100%;
  height: Auto;
  object-fit: contain;
  background: url(../img/bildladen.png) No-Repeat Center Center #ffffff;
}

figure > a[target^="_blank"]::after {
  content: "";
}

figure video {
  display: Block;
  max-width: 100%;
  height: Auto;
  box-shadow: 0px 0px 5px 0px #9e9e9e;
}

figure > a > img {
  cursor: zoom-in;
}

details > summary {
  color: #4d95cc;
  cursor: Pointer;
}

details > summary:hover {
  text-decoration: None;
}

details > summary:focus {
  /* Chromium */
  border: 0;
  outline: 0;
}

summary::marker {
  color: #000000;
  font-size: 1.1rem;
}

dl {
  margin-top: 40px;
}

dl dd {
 margin-left: 0px;
}

dl#linkliste dt {
  margin-top: 15px;
  font-size: 1rem;
}

dl#linkliste dd {
  margin-left: 15px;
}

figure figcaption {
  font-size: 0.9rem;
  font-style: Oblique;
  cursor: Default;
  margin: 5px 0 25px 0;
}

span.bewertung_ok {
  color: #f7d209;
  font-size: 1.2rem;
  cursor: Default;
}
span.bewertung_ko {
  color: Silver;
  font-size: 1.2rem;
  cursor: Default;
}

samp.notiz {
  vertical-align: Super;
  font-family: Tahoma, Arial;
  font-size: 0.7rem;
  font-style: Normal;
  color: #ffffff;
  padding: 2px 5px 2px 5px;
  background-color: #656565;
  border-radius: 3px;
  cursor: Default;
}

@keyframes motion { 0% { background: linear-gradient(45deg, #656565, #ffffff 0%, #656565); } 1% { background: linear-gradient(45deg, #656565, #ffffff 1%, #656565); } 2% { background: linear-gradient(45deg, #656565, #ffffff 2%, #656565); } 3% { background: linear-gradient(45deg, #656565, #ffffff 3%, #656565); } 4% { background: linear-gradient(45deg, #656565, #ffffff 4%, #656565); } 5% { background: linear-gradient(45deg, #656565, #ffffff 5%, #656565); } 6% { background: linear-gradient(45deg, #656565, #ffffff 6%, #656565); } 7% { background: linear-gradient(45deg, #656565, #ffffff 7%, #656565); } 8% { background: linear-gradient(45deg, #656565, #ffffff 8%, #656565); } 9% { background: linear-gradient(45deg, #656565, #ffffff 9%, #656565); } 10% { background: linear-gradient(45deg, #656565, #ffffff 10%, #656565); } 11% { background: linear-gradient(45deg, #656565, #ffffff 11%, #656565); } 12% { background: linear-gradient(45deg, #656565, #ffffff 12%, #656565); } 13% { background: linear-gradient(45deg, #656565, #ffffff 13%, #656565); } 14% { background: linear-gradient(45deg, #656565, #ffffff 14%, #656565); } 15% { background: linear-gradient(45deg, #656565, #ffffff 15%, #656565); } 16% { background: linear-gradient(45deg, #656565, #ffffff 16%, #656565); } 17% { background: linear-gradient(45deg, #656565, #ffffff 17%, #656565); } 18% { background: linear-gradient(45deg, #656565, #ffffff 18%, #656565); } 19% { background: linear-gradient(45deg, #656565, #ffffff 19%, #656565); } 20% { background: linear-gradient(45deg, #656565, #ffffff 20%, #656565); } 21% { background: linear-gradient(45deg, #656565, #ffffff 21%, #656565); } 22% { background: linear-gradient(45deg, #656565, #ffffff 22%, #656565); } 23% { background: linear-gradient(45deg, #656565, #ffffff 23%, #656565); } 24% { background: linear-gradient(45deg, #656565, #ffffff 24%, #656565); } 25% { background: linear-gradient(45deg, #656565, #ffffff 25%, #656565); } 26% { background: linear-gradient(45deg, #656565, #ffffff 26%, #656565); } 27% { background: linear-gradient(45deg, #656565, #ffffff 27%, #656565); } 28% { background: linear-gradient(45deg, #656565, #ffffff 28%, #656565); } 29% { background: linear-gradient(45deg, #656565, #ffffff 29%, #656565); } 30% { background: linear-gradient(45deg, #656565, #ffffff 30%, #656565); } 31% { background: linear-gradient(45deg, #656565, #ffffff 31%, #656565); } 32% { background: linear-gradient(45deg, #656565, #ffffff 32%, #656565); } 33% { background: linear-gradient(45deg, #656565, #ffffff 33%, #656565); } 34% { background: linear-gradient(45deg, #656565, #ffffff 34%, #656565); } 35% { background: linear-gradient(45deg, #656565, #ffffff 35%, #656565); } 36% { background: linear-gradient(45deg, #656565, #ffffff 36%, #656565); } 37% { background: linear-gradient(45deg, #656565, #ffffff 37%, #656565); } 38% { background: linear-gradient(45deg, #656565, #ffffff 38%, #656565); } 39% { background: linear-gradient(45deg, #656565, #ffffff 39%, #656565); } 40% { background: linear-gradient(45deg, #656565, #ffffff 40%, #656565); } 41% { background: linear-gradient(45deg, #656565, #ffffff 41%, #656565); } 42% { background: linear-gradient(45deg, #656565, #ffffff 42%, #656565); } 43% { background: linear-gradient(45deg, #656565, #ffffff 43%, #656565); } 44% { background: linear-gradient(45deg, #656565, #ffffff 44%, #656565); } 45% { background: linear-gradient(45deg, #656565, #ffffff 45%, #656565); } 46% { background: linear-gradient(45deg, #656565, #ffffff 46%, #656565); } 47% { background: linear-gradient(45deg, #656565, #ffffff 47%, #656565); } 48% { background: linear-gradient(45deg, #656565, #ffffff 48%, #656565); } 49% { background: linear-gradient(45deg, #656565, #ffffff 49%, #656565); } 50% { background: linear-gradient(45deg, #656565, #ffffff 50%, #656565); } 51% { background: linear-gradient(45deg, #656565, #ffffff 51%, #656565); } 52% { background: linear-gradient(45deg, #656565, #ffffff 52%, #656565); } 53% { background: linear-gradient(45deg, #656565, #ffffff 53%, #656565); } 54% { background: linear-gradient(45deg, #656565, #ffffff 54%, #656565); } 55% { background: linear-gradient(45deg, #656565, #ffffff 55%, #656565); } 56% { background: linear-gradient(45deg, #656565, #ffffff 56%, #656565); } 57% { background: linear-gradient(45deg, #656565, #ffffff 57%, #656565); } 58% { background: linear-gradient(45deg, #656565, #ffffff 58%, #656565); } 59% { background: linear-gradient(45deg, #656565, #ffffff 59%, #656565); } 60% { background: linear-gradient(45deg, #656565, #ffffff 60%, #656565); } 61% { background: linear-gradient(45deg, #656565, #ffffff 61%, #656565); } 62% { background: linear-gradient(45deg, #656565, #ffffff 62%, #656565); } 63% { background: linear-gradient(45deg, #656565, #ffffff 63%, #656565); } 64% { background: linear-gradient(45deg, #656565, #ffffff 64%, #656565); } 65% { background: linear-gradient(45deg, #656565, #ffffff 65%, #656565); } 66% { background: linear-gradient(45deg, #656565, #ffffff 66%, #656565); } 67% { background: linear-gradient(45deg, #656565, #ffffff 67%, #656565); } 68% { background: linear-gradient(45deg, #656565, #ffffff 68%, #656565); } 69% { background: linear-gradient(45deg, #656565, #ffffff 69%, #656565); } 70% { background: linear-gradient(45deg, #656565, #ffffff 70%, #656565); } 71% { background: linear-gradient(45deg, #656565, #ffffff 71%, #656565); } 72% { background: linear-gradient(45deg, #656565, #ffffff 72%, #656565); } 73% { background: linear-gradient(45deg, #656565, #ffffff 73%, #656565); } 74% { background: linear-gradient(45deg, #656565, #ffffff 74%, #656565); } 75% { background: linear-gradient(45deg, #656565, #ffffff 75%, #656565); } 76% { background: linear-gradient(45deg, #656565, #ffffff 76%, #656565); } 77% { background: linear-gradient(45deg, #656565, #ffffff 77%, #656565); } 78% { background: linear-gradient(45deg, #656565, #ffffff 78%, #656565); } 79% { background: linear-gradient(45deg, #656565, #ffffff 79%, #656565); } 80% { background: linear-gradient(45deg, #656565, #ffffff 80%, #656565); } 81% { background: linear-gradient(45deg, #656565, #ffffff 81%, #656565); } 82% { background: linear-gradient(45deg, #656565, #ffffff 82%, #656565); } 83% { background: linear-gradient(45deg, #656565, #ffffff 83%, #656565); } 84% { background: linear-gradient(45deg, #656565, #ffffff 84%, #656565); } 85% { background: linear-gradient(45deg, #656565, #ffffff 85%, #656565); } 86% { background: linear-gradient(45deg, #656565, #ffffff 86%, #656565); } 87% { background: linear-gradient(45deg, #656565, #ffffff 87%, #656565); } 88% { background: linear-gradient(45deg, #656565, #ffffff 88%, #656565); } 89% { background: linear-gradient(45deg, #656565, #ffffff 89%, #656565); } 90% { background: linear-gradient(45deg, #656565, #ffffff 90%, #656565); } 91% { background: linear-gradient(45deg, #656565, #ffffff 91%, #656565); } 92% { background: linear-gradient(45deg, #656565, #ffffff 92%, #656565); } 93% { background: linear-gradient(45deg, #656565, #ffffff 93%, #656565); } 94% { background: linear-gradient(45deg, #656565, #ffffff 94%, #656565); } 95% { background: linear-gradient(45deg, #656565, #ffffff 95%, #656565); } 96% { background: linear-gradient(45deg, #656565, #ffffff 96%, #656565); } 97% { background: linear-gradient(45deg, #656565, #ffffff 97%, #656565); } 98% { background: linear-gradient(45deg, #656565, #ffffff 98%, #656565); } 99% { background: linear-gradient(45deg, #656565, #ffffff 99%, #656565); } 100% { background: linear-gradient(45deg, #656565, #ffffff 100%, #656565); } }

h1 a:hover,
h1 a:active,
h1 a:focus,
h2 a:hover,
h2 a:active,
h2 a:focus {
  text-decoration: None;
}

span.hilfetext {
  font-size: 0.8rem;
  font-style: Oblique;
  color: #00a400;
}

div#seitennavigation {
  font-size: 1rem;
  color: #000000;
  text-align: Center;
  background-color: #e8e8e8;
  border-radius: 0.2rem;
  padding: 10px;
  margin: 35px;
  cursor: Default;
}

div#seitennavigation span.navzahl {
  font-size: 1.2rem;
  padding: 0px 5px 1px 6px;
  border-radius: 20px;
  background-color: #000000;
  color: #ffffff;
  display: Inline-Block;
  margin-left: 3px;
}

div#seitennavigation a.navzahl {
  font-size: 1.2rem;
  padding: 0px 5px 1px 6px;
  border-radius: 20px;
  background-color: #ffffff;
  display: Inline-Block;
  margin-left: 3px;
}

a.navzahl:hover {
  text-decoration: None;
}

abbr {
  cursor: Help;
}

div#cloudBox {
  transform: rotate(3deg);
  margin: 75px Auto 25px Auto;
  max-width: 550px;
  padding: 10px;
  background: url("../img/anim/floh.gif") no-repeat bottom right,
    url("../img/anim/ball.gif") no-repeat bottom left, Whitesmoke;
  border-radius: 4px;
  color: #aeaeae;
  text-align: Justify;
  line-height: 20px;
  transition: transform 0.8s;
  border: Solid 1px #aaaaaa;
  cursor: Default;
  animation: animationName 2.5s ease-in-out infinite alternate;
  transition: background 0.7s;
}

div#cloudBox:hover {
  background: url("../img/anim/floh3.gif") no-repeat bottom right,
    url("../img/anim/ball_anim.gif") no-repeat bottom right, Whitesmoke;
  animation-play-state: paused;
}

div#feder {
  margin: 75px Auto 25px Auto;
  max-width: 550px;
  background: url("../img/feder.gif") no-repeat bottom left;
}

div#cloudBox > a:hover {
  text-decoration: None;
  text-shadow: 1px 1px 1px currentcolor;
}

p.mark {
  border-left: Dotted 10px currentcolor;
  padding-left: 10px;
}

@keyframes animationName {
  from {
    transform: rotate(-1deg);
  }
  to {
    transform: rotate(6deg);
  }
}

div#fehlergesicht {
  background-color: #f8f8f8;
  color: #000000;
  padding: 10px;
  border-radius: 0.2rem;
  margin-bottom: 2rem;
  box-shadow: 0px 0px 3px 0px #656565;
}

img#fehlergesichtbild {
  float: left;
  padding-right: 10px;
  pointer-events: none;
}

/* Kommentare */
section {
  margin-top: 100px;
}

a#shareButton {
  font-size: 0.95rem;
  cursor: Pointer;
  padding-top: 5px;
  display: Inline-Block;
  margin-right: 5px;
  float: Right;
}

a#shareButton::before {
  content: Url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABuElEQVR42mOQkJbllJBV4BSXkeeUkFHglJCW4xQUEWdnQALKyirTVFQ1NK1t7BiRxRkkZeT+iUhIvxUWl3orLCb1VkRM8i2fgPCB+KRURgsrG+7I6Fg9MUnpO1KyCp/kFZTyDY2MeeCaRcUkvjOgAVc3DwljM8sGRRX1a0CX/JGUlf8vKavwH8j+p6quedLK2ta8urqamUFEVBxFc2BQiJGcgvIpkGJcWEJS5r2Ojk4timZZeQUheSXV09g0SMkpQjTKKPxXVFZ9raWlVQTXHBuXwKijZ1ApKSMP0/AX6NxPQPqDhIz8H6jYT6DfVwcGh5qCbYNp1tLW5ZGWVTgLVPhPRkHpioaWTr6ymqaloqqGkbCo+HUpWfn7Wjp6WUqq6hxwP8I029k7qkhKy/4BhvxeGXklOeRwUFBSabCxtdeVlVeSkZaR1cTQrGdgFCwuJftKVV1DDz303dw9WUC0uIR0sqi4xBQMzfwCApHyisq9DHiAmLhkMlA9pubQ0PB6XV1dHbI0V1ZWB7a0tDCRpFlMXAqsedmyFXg1wvwsIobkZ2CS+y8mLfdNHIZlkDCKmPw3oLpfyJoBTSOL9FTr/0kAAAAASUVORK5CYII=");
}

.seitenanfang {
  position: Fixed;
  right: 15px;
  top: 600px;
  border-style: Solid;
  border-width: 0 15px 25px 15px;
  z-index: 1000;
  user-select: None;
  border-color: Transparent Transparent rgba(183, 183, 183, 0.3) Transparent;
  transition: border-width 1s;
}

.seitenanfang:hover {
  border-color: Transparent Transparent rgba(128, 128, 128, 0.3) Transparent;
  cursor: Pointer;
}

footer {
  color: #696969;
  text-align: Right;
  background-color: var(--mainbg-color);
  border-radius: 0.2rem;
  padding: 10px 25px 10px 25px;
  margin-top: 175px;
  cursor: Default;
}

/* Anpassung an Displays */

@media screen and (max-width: 40rem) {
  body {
    padding: 0.3rem;
    margin: 0px Auto 0px Auto;
  }
}

@media screen and (max-width: 56rem) {
  footer {
    margin-top: 50px;
  }
}

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

  header > nav {
    word-spacing: 0.6rem;
  }
}

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

  header > nav {
    word-spacing: 0.8rem;
  }
}

@media screen and (min-width: 100rem) {
  body {
    max-width: 88rem;
    padding: 3.5rem;
  }

  header > nav {
    word-spacing: 1rem;
  }
}

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

  body,
  article {
    background-color: #000;
    color: #fff;
  }

  ul.stein li::before {
    color: #ffffff !important;
  }

  pre,
  code,
  .highlightBorder,
  .highlightCode {
    background-color: #aaaaaa;
    color: #fff;
  }

  .highlightNumber {
    background-color: #999999;
    color: #000;
  }
}

@media (prefers-color-scheme: light) {
  html {
    background-color: #f5f5f5;
  }
  body,
  article {
    background-color: #ffffff;
    color: #303030;
  }
}