@import url(navham.css);
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css'); 
@import url('fontawesome/css/all.min.css');
@import url('https://fonts.googleapis.com/css?family=Kurale');
@font-face { font-family: 'KuraleOffline'; font-display: active; 
   src: url('../schrift/kurale-regular.otf') format('truetype'); }
@font-face { font-family: 'Lobster'; font-display: active; 
   src: url('../schrift/LobsterTwo-Regular.otf') format('truetype'); }

@viewport {
   width: device-width; }
*, *::after, *::before {
   box-sizing: border-box; }
body {
   font-family: Kurale, KuraleOffline, Lobster, serif; 
   background: linear-gradient(#394fe0, #2b2c36); 
   max-width: 90em; 
   color: white; }
main, header, footer {  
   margin: 5px;
   margin-right: 30%; }
header {
   background-color: blue;
   color: lightgoldenrodyellow;
   font-size: xx-large;
   text-align: center; }
footer {
   clear: both; }
select, input {
   width: 15rem; 
   margin: 3px; }
input[type="submit"] {
   width: auto; }
select, input, textarea {
   border-radius: 0.3rem }
textarea {
   width: 90% }
header, nav {
   margin-bottom: 1rem; }
aside {
   text-indent: 1rem;
   font-size: larger; }
h1 {
   text-shadow: 2px 2px 1px brown;
   color: #34ff2f; }
h2 { 
   color: #04cfff; }
h2:hover { 
   background-color: unset;
   letter-spacing: unset;
   word-spacing: unset;
   text-indent: unset; }
a, aside {
   font-weight: bold;
   font-size: larger; 
   padding: 2px; } 
a[href] {
   color: #dedb93;
   font-weight: normal; 
   font-size: larger; 
   padding: 2px; }
div.box { 
   margin: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex: 1;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   flex-flow: row; }
legend {
   font-size: 1.2rem;
   border-radius: 0.5rem;
   padding: 0.2rem 0.4rem;
   color: white;
   background-color: rebeccapurple;
   text-shadow: 1px 1px 5px darkred; }
article {
   background-color: #63309f;
   padding: 0.3rem; 
   border-radius: 0.3rem;
   margin: 3px auto;
   color: #FFF; }
article.literaturempf {
   background-color: blue }
@keyframes farbe {
   50% { background-color: #462b65; } } 
article:hover, td:hover {
   animation: farbe 3s; 
   animation-timing-function: ease-in-out; }
table { 
   border-radius: 0.5rem; 
   padding: 0 0.5rem;
   margin-bottom: 0; 
   box-sizing: content-box; }
tr, code {
   padding: 0.2rem; 
   border-radius: 0.4rem; 
   text-align: left; }
tr.beitrag, code {
   background-color: #689F38 }
tr.beitrag:nth-child(3n)  {
   background-color: #509F60 }
tr.beitrag:nth-child(3n+1) {
   background-color: #389F88 }
td, th { 
   padding: 3px 7px; 
   display: inline-block; 
   border-radius: 5px; }

/* Tabellen */
table { 
   border-spacing: 0.3rem; }
th {
   letter-spacing: 0.03rem; }
th.links { 
   text-align:left }
th, td {
   padding: 2px; }
/* Definitionen */
dl dt { 
   font-weight: bold;
   margin-top: 5px }
dl dd { 
   margin-top: 3px }

#top {
   right: 5px;
   padding: 5px;
   top: 0px;
   margin-top: 20px;
   margin-bottom: 20px;
   opacity: 0.7; 
   z-index: 2;
   position: fixed; }
#top a {
   color: #dd3;
   background-color: inherit; }
#top a:hover {
   color: aqua; }

footer a:link { 
   letter-spacing: 1px; }
footer a[id="back"]:link { 
   font-weight: bold; 
   margin: 0.5rem; }
footer p#erstellt {
   text-align: right; }
footer p#mehr {
   font-style: normal;
   margin-bottom: 0.4rem;
   color: lightblue; }
footer a[id="back"]::before {
   content: "zurück"}
cite, .quellen { 
   font-variant: small-caps;
   font-style: normal;
   text-align: justify;
   text-indent: -1rem; }
cite ul { 
   list-style-type: none }
cite li { 
   margin-bottom: 5px }

/*Hover state for top level links*/
li:hover a { 
   transition: 0.5s; }
/*Style for dropdown links*/
li:hover ul a {
   background: #f3f3f3;
   color: #2f3036; }
/*Hover state for dropdown links*/
li:hover ul a:hover {
   text-indent: 2rem; 
   transition: 0.5s;
   background: #19c589;
   color: #fff; }
/* Hide dropdown links until they are needed */
li ul { 
   display: block; } /* zum Verstecken "none" */
/* Make dropdown links vertical */
li ul li {
   display: block;
   float: none; }
/* Prevent text wrapping */
li ul li a {
   width: auto;
   min-width: 100px;
   padding: 0 20px; }
/* Display the dropdown on hover */
.hidden {
   display: none; }
ul li a:hover + .hidden, .hidden:hover {
   display: block; } 

#ausverkauf, #privat { 
   font-weight: bold; }
article { 
   padding: 1rem; 
   border-radius: 0.5em; }
article, dl {
   text-align: justify;
   margin: 30px 10px 0 5px;
   padding: 1px 15px 10px;
   border: 3px solid; }
article p::first-letter {  
   font-size: larger;
   font-weight: bold; }
article h1 { 
   font-size: xx-large;
   text-align: left }
article h2 { 
   font-size: x-large;
   text-align: left }
ins {
   text-align:right;
   font-size:smaller;
   font-weight:bold;
   float:right;
   color:grey;
   margin:1px;
   margin-left:15px; }

/* Links allgemein */
a:link {
   color: #ffd;
   text-decoration: none; }
a:visited {
   color: #777; }
a:hover, a:focus, a:active {
   text-decoration: underline; 
   text-decoration-style: double; }
a[href$="pdf"]:after {
   content: " \0028pdf\0029";
   font-size: smaller;
   font-weight: bold;
   color: wheat;   }

/* Formulare */
input {
   border-color: olive;
   padding-left: 0.2rem;
   width: 7rem;
   border-radius: 0.2rem;
   height: 2em; }
input[type="number"] {
   width: 7rem; }
input[type="submit"] {
   padding: 2px; 
   color: #462b65; }

textarea {
   border-color: olivedrab;
   padding-left: 0.5rem;
   border-radius: 0.3rem; }
fieldset {
   padding: 0 0.75rem;
   border-radius: 0.5rem;
   background: linear-gradient(#3091ab, #0f3a44); }
fieldset#mag td, fieldset th { 
   padding: 3px 7px; 
   display: inline-block; 
   border-radius: 5px; }
/* Bilder */
fieldset#bilder picture a { 
   padding: 9px; 
   float: left; }
button {
   font-size: inherit;
   font-family: inherit;
   cursor: pointer;
   letter-spacing: 1px;
   background-color: black;
   color: white;
   padding: 0.25rem;
   border: none;
   border-radius: 0.25rem; }
button:hover, button:focus {
   background-color: darkorange;
   color: white; }

img { 
   margin: 0.2rem;
   padding: 3px;
   background-color: white; }
img[id="fotobild"] { 
   float: right;
   margin-left: 15px;
   margin-top: -0.5rem; 
   border: 0;
   padding: 0 }
label, input, textarea { 
   cursor: pointer; }

/* Popup */
.popup {
    position: relative;
    display: inline-block;
    cursor: help; }
.popup .popuptext {
    visibility: hidden;
    width: 250px;
    background-color: #555;
    color: #BDB;
    text-align: left;
    border-radius: 6px;
    padding: 8px 8px;
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 3%; }
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: 5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; }
.popup .show {
    visibility: visible;
    animation: fade 1s }

/* kleiner Bildschirm */
@media screen and (max-width:999px) {
   body {
      flex-direction: column; 
      display: flex;
      flex-flow: row wrap; }
   header, nav, main, footer, fieldset {
      width: 97%;
      flex: 1 1 auto; 
      margin: 1px;
      padding: 0 0.25rem; }
   article, dl { 
      margin: 3px } 
   img { 
      display: none; } 
   img#keptsch {
      display: inline-block; } }
@media screen and (max-width:666px) {
   header, #zeit, .cut, #fade {
      display: none; } }
@media print {
   body {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 12pt; }
   nav, time, input, textarea, img { 
      display: none }
   body, h1, h2, h3, footer, legend, header,
   legend:first-letter, h2:first-letter, article:first-letter { 
      color: black;
      background-color: white;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-size: 12pt;
      text-shadow: none; }
   a:link, a:visited, a:hover, a:target, a:active { 
      color: #444 }
   a[href]:after { 
      content: " [url: "attr(href)"] " }
   body, main, article, dl, fieldset { 
      width: unset;  } }