@import url('https://use.fontawesome.com/releases/v6.2.0/css/all.css'); 
@import url('fontawesome5/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'); }
@-ms-viewport {
   width: device-width; }
@viewport {
   width: device-width; }
*, *::after, *::before {
   box-sizing: border-box; }
/* wegen linear-gradient, jedoch mit Umbrüchen */
html {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   height: 100%;  
   background: linear-gradient(#394fe0, #2b2c36);
   background: -moz-linear-gradient(top, #394fe0 0%, #2b2c36 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #394fe0), color-stop(100%, #2b2c36)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #394fe0 0%, #2b2c36 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, #394fe0 0%, #2b2c36 100%); /* Opera11.10+ */
   background: -ms-linear-gradient(top, #394fe0 0%, #2b2c36 100%); /* IE10+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#394fe0’, endColorstr=’#2b2c36’, GradientType=0 ); /* () IE6-9 */
   background: linear-gradient(top, #394fe0 0%, #2b2c36 100%);  /* W3C */  }
html {
	box-sizing: border-box; }
body {
   font-family: Kurale, KuraleOffline, Lobster, serif; 
   display: flex;
   flex: 1 1 auto;
   margin: 0;
   flex-flow: column;
   min-height: 100vh; 
   color: white; }
header {
   background-color: #a17715;
   padding: 0.5rem;
   margin-bottom: 0.5rem;
   font-size: 2rem;
   text-shadow: 2px 2px 3px black, 
      -2px -2px 3px black; }
nav {
   position: sticky;
   top: 0;
   z-index: 1;
   background: #1aa;
   transition: 0.5s;
}
nav button {
   background-color: greenyellow; }
nav button:hover {
   background-color: yellow; }
nav ul {
   display: grid;
   grid-template-columns: repeat(5, auto);
   margin: 0;
   padding: 0; }
nav ul li {
   display: inline-block;
   margin: 0;
   padding: 0 0.5rem 0.2rem;
   font-size: 1.2rem;
   text-align: center;
}
nav ul li:hover {
   background: #999; }
nav ul li:active {
   background: #aaa; }
nav ul a {
   margin: 0;
   padding: 0; 
}
nav ul a:link {
	text-decoration: none;
}
.active {
   color: #ddd;
   background-color: #000;
} 
nav a:link {
   color: white }
nav a:hover {
   text-shadow: 1px 1px 1px black;
}
nav a[type=href] {
   font-size: 1.5rem;
}
[aria-controls="navi-liste"] {
   display: none; }
nav td {
   display: block;
   float: left; }
main {
      box-sizing: inherit;
      margin-bottom: 3rem;
}
aside {
   margin-top: -0.5rem;
   text-align: right; }
aside.regeln {
   font-size: smaller; 
   padding: 3px; }
footer {
   background: orange;
   color: black;
   margin: 3px;
   padding: 0;
   border-radius: 3px;
   padding: 0.1rem 0.3rem;
      /* flex */
      position: fixed;
      width: 100%;
      bottom: 0;
      margin-bottom: 0;
      margin-top: auto; 
}
footer nav {
   background: inherit; }
footer nav ul {
   grid-template-columns: repeat(4, auto); }
footer nav li b {
   font-weight: normal; }
footer nav li i.fas, 
footer nav li i.fab, 
footer nav li i.far {
   display: none; }

/* formular */
select, input {
   width: 15rem; 
   margin: 3px; }
textarea {
   width: 90% }
select, input, textarea {
   border-radius: 0.3rem }
input[type="submit"] {
   padding: 2px;
   color: #462b65; 
   width: auto; }
input[type="number"] {
   font-size: larger;
   width: 3rem; }
label[for="kniga"], 
label[for="bssg"] {
   font-size: 1.5rem;
   float: left; }

/* article */
article {
   width: 100%;
   background: linear-gradient(40deg, #04021f, #a12d2d);
   padding: 0.6rem; 
   border-radius: 0.3rem;
   margin: 3px 0;
   color: #FFF; }
article:nth-child(4n-2) {
   background: linear-gradient(40deg, #04021f, #58581e) }
article:nth-child(4n-1) {
   background: linear-gradient(40deg, #04021f, #196974) }
article:nth-child(4n) {
   background: linear-gradient(40deg, #04021f, #c4b31c) }
article:hover, td:hover {
   animation: farbe 3s; 
   animation-timing-function: ease-in-out; }

.clear {
   clear: left; }
/* Bild */
img {
   margin: 3px; }
#fade {
   position: relative;
   width: 200px;
   height: 333px;
   float: left;
   margin: 0 1rem 1rem 0; }
#fade img {
   position: absolute;
   transition: 3s ease-in-out; }
#fade:hover img:nth-of-type(2) {
   opacity: 0; }

i.fas, i.far, i.fab {
   margin-right: 0.8rem; }

i.fa-chess, i.fa-home {
   font-size: 1.6rem; }

a {
   font-weight: bold; 
   font-size: larger; 
   padding: 2px; } 
a:hover, a:focus, a:active {
   text-decoration: underline; 
   text-decoration-style: double; }
a[href] {
   color: #dedb93;
   font-weight: bold; 
   font-size: larger; 
   padding: 2px; }

#up {
   right: 5px;
   padding: 5px;
   bottom: 1rem;
   margin-top: 20px;
   margin-bottom: 20px;
   opacity: 0.7;
   color: goldenrod;
   z-index: 2;
   position: fixed; }
#up a:hover {
   color: aqua; }
#up a:active {
   color: black; }

a[href].home {
	color: white;
	font-size: 1.4rem; }

div.box { 
   margin: 0;
   display: flex; }
div.box article {
   margin: 3px;
   padding-right: 3%;
   text-align: center; }

@keyframes farbe {
   50% { background-color: #462b65;
      border: 1rem; } } 

/* table */
table { 
   background-color: #3F51B5; 
   border-radius: 0.5rem; 
   padding: 0 0.5rem;
   margin-bottom: 0; 
   box-sizing: content-box; }
table.salat td {
   font-size: xx-large;
   text-align: center;
   width: 6vw;
   border: 1px;
   padding: 1px;
   animation: none; 
   color: darkblue; 
   background-color: aquamarine;
   text-align: center; 
   break-inside: avoid;
   margin: 1px; }
table.salat.sieben td {
   font-size: 7vmin;
   width: 9vw;
   height: 9vh; }
table.salat.zehn td {
   font-size: 6vmin;
   width: 7vw;
   height: 7vh; }
table.salat:hover td:not(.normal) {
   font-weight: bold; 
   background-color: aqua;
   transition-timing-function: linear;
   transition-duration: 1s;
/*   transform: matrix(1, -0.05, 0, 0.9, 0, 0);*/
   color: black; }
table.salat input {
   text-align: center;
   font-size: 100%;
   border: 1px;
   margin: 1px;
   padding: 1px;
   width: 5vw; 
   height: 6vh; 
   background-color: aquamarine; }
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; }
td.datum {
   color: #9621c9; }
td.name {
   color: #fe7; 
   text-shadow: 1px 1px 1px #6c0505 }
td.thema {
   color: black; }
table.salat tr {
   white-space: nowrap; }

/* sonder */
p.unten {
   background-color: #303F9F; 
   padding: 3px; 
   border-radius: 2px; }
p.unten input {
   width: unset; }
span.zaehlen {
   font-size: smaller;
   color: yellow; }
.big {
   font-size: larger; }
.HA {
   text-shadow: 2px 2px 1px black;
   background-color: yellow; }

/* gitter */
.gitter div {
   display: grid;
   margin-right: 3%;
   grid-template-columns: repeat(auto-fit, minmax(15%, auto));
   grid-auto-flow: dense; }
.gitter .liste {
   display: none; }
.gitter img:hover {
   z-index: 1; }

.transl:hover::after {
   display: block;
   position: absolute;
   margin-left: 5%;
   font-size: smaller;
   color: white; }

/* responsive */
@media screen and (max-width: 860px) {
   nav { 
      display: block;
      float: none;
   }
   nav li {
      padding: 0; }
   nav button#menu {
      width: 100%;
      position: relative;
      font-size: xx-large;
   }

   [aria-controls="navi-liste"] {
      display: block; }
   nav ul {
      display: none; }
   [aria-expanded="true"]~ul {
      display: block; }  
   [aria-expanded="true"]~ul li {
      display: block; 
      text-align: center; }
   [aria-expanded="false"] .geschlossen {
      display: none; }
   [aria-expanded="true"] .geschlossen {
      display: inline-block; }
   [aria-expanded="true"] .offen {
      display: none; }  
   footer nav ul {
      display: grid; }
   footer nav li b {
      display: none; }
   footer nav li i.fas, 
   footer nav li i.fab, 
   footer nav li i.far {
      display: inline; }
   

   header, #zeit, .cut, #fade {
      display: none; }
   table {
      padding: 0; }
   select, input { 
      margin: 0.2rem 0.5rem; } 
   div.box {
      margin-right: 3px;
      flex-direction: column; }
   div.box article {
      width: 99%; }
   .gitter div {
      display: inline; }
   .gitter div div {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30%, auto)); }
} 
@media screen and (max-width: 488px) {
      .gitter .liste {
         display: block }
      .gitter img {
         display: none; }
}
/* @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) */