/*
 * style.css
 * - https://werner-zenk.de
 */

@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;
  overflow-y: Scroll;
}

body {
  font-family: "Verdana Pro", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
  font-optical-sizing: Auto;
  font-size: 0.93rem;
  color: #303030;
  background-color: #fff;
  margin: 15px Auto 15px Auto;
  max-width: 825px;
  padding: 0.5rem;
  border-radius: 0.4rem;
  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*/
}

header {
  background-color: var(--mainbg-color);
  padding: 5px;
  border-radius: 0.3rem 0.3rem 0.2rem 0.2rem;
  text-align: Center;
  z-index: 10000;
  box-sizing: content-box;
  -webkit-user-select: none;
  user-select: none;
}

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

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 > [aria-current="page"] {
 border-bottom: Solid 3px #fff !important;
}

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;
  word-break: break-word;
}

a:hover,
a:focus,
a:active {
  text-decoration: Underline 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: Auto;
}

:any-link {
  text-decoration-thickness: 0.01em;
}

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

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

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

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

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

h6 {
  font-family: Tahoma, Arial, Sans-Serif;
  font-weight: Normal;
  font-size: 1rem;
  color: #303030;
  background-color: var(--mainbg-color);
  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
  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;
  transition: background-color 0.3s;
}

a.navzahl:hover {
  text-decoration: None;
  background-color: #eaeaea;
}

b,
strong,
th {
  font-weight: 500;
}

pre {
  font-family: "Verdana Pro", Verdana, Arial, Sans-Serif !important;
  font-size: 0.85rem;
  color: #000000;
  background-color: #f5f5f5;
  border-radius: 0.2rem;
  overflow: Auto;
  padding: 0.2rem;
}

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

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

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

mark {
  color: #000000;
  background-color: #e0ffc1;
  box-shadow: 0px 0px 5px 0px #E0FFC1;
}

q {
  quotes: Auto;
}

hr {
  border: 0;
  height: 8px;
  margin: 3rem 0.5rem 3rem 0.5rem;
  background-image: linear-gradient(to right, transparent, var(--mainbg-color), transparent);
}

figure > img,
figure > a > img {
  display: Inline;
  max-width: 100%;
  height: Auto;
  height: fit-content;
  aspect-ratio: attr(width) / attr(height);
  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>dt>a:not(a[target="_blank"], dl.dl>dt>a) {
  font-size: 1.1rem;
}

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: #f2cf09;
  font-size: 1.35rem;
  font-weight: Bold;
  cursor: Default;
}
span.bewertung_ko {
  color: Silver;
  font-size: 1.35rem;
  font-weight: Bold;
  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: #6b6b6b;
  border-radius: 3px;
  cursor: Default;
}

span.hilfetext {
  color: #009b00;
  display: block;
  font-size: 0.90rem;
  font-style: Oblique;
}

div#seitennavigation {
  font-size: 1rem;
  color: #000000;
  text-align: Center;
  background-color: #e8e8e8;
  border-radius: 0.2rem;
  padding: 10px;
  margin: 65px 35px 35px 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;
  transition: background-color 0.3s;
}

div#seitennavigation a.navzahl:hover {
  text-decoration: None;
  background-color: #dadada;
}

abbr {
  cursor: Help;
}

div#localInfo {
 font-size: 0.8rem;
}

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 #888888;
  box-shadow: 0px 0px 10px 2px #aaaaaa;
  cursor: Default;
  animation: animationName 2.5s ease-in-out infinite alternate;
  transition: all 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;
  filter: drop-shadow(2px 2px 7px #d5d5d5);
}

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

@media screen and (max-width: 413px) {
div#cloudBox {
  width: 19rem;
 }
div#feder {
  margin: 75px Auto 25px Auto;
  max-width: 550px;
  background: url("../img/feder.gif") no-repeat bottom 0px left 40px;
}

}
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: rgba(241, 241, 241, 0.7);
  color: #000000;
  padding: 15px;
  border-radius: 0.4rem;
  margin: 0rem 1rem 2rem 1rem;
  box-shadow: 0px 0px 6px 0px #858585, inset 0px 0px 8px 7px #FFFFFF;
}

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

fieldset.ideen {
 border-top-left-radius: 10px;
 border-top-right-radius: 35px;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 35px;
 border: Solid 1px #6B6B6B;
 padding: 0px 10px 7px 7px;
 color: #101010;
 background-color: #FFFEF2;
 font-size: 0.90rem;
 font-style: Oblique;
 width: -moz-fit-content;
 width: fit-content;
 margin-top: 25px;
 cursor: Default;
}

/* Kommentare */
section {
  margin-top: 10vh;
}

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

.seitenanfang:hover {
  border-color: Transparent Transparent rgba(170, 170, 170, 0.6) Transparent;
}

footer {
  color: #696969;
  text-align: Right;
  background-color: var(--mainbg-color);
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  padding: 10px 20px 10px 0px;
  margin-top: 250px;
  cursor: Default;
  -webkit-user-select: none;
  user-select: none;
}

/* browserSwitch */
div.browserSwitch {
 font-family: Tahoma, Arial, Sans-Serif;
 font-size: 0.8rem;
 padding: 5px 0 0 10px;
}

div.browserSwitch>img {
 width: 15px;
 height: 15px;
 padding-right: 5px;
 float: left;
}

/* Anpassung an Displays */

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

@media screen and (max-width: 54rem) {
  body {
    margin: 0px Auto 0px Auto;
  }
  footer {
    margin-top: 50px;
  }
}

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

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

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

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

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