:root {
   --main-color: #ffffff;
   --special-color: #DBD12D;
   --main-background-color: gray; /*rgba(0,0,0,0.6);*/ /*#000000;*/
   --text-background-color: snow;
   --image-background-color: black;
   --header-background-color: rgb(104,104,104);
   --text-color: rgb(48,48,48);
}

*, *:before, *:after {
   box-sizing: border-box;
   margin: 0;
}

body {
   background-color: var(--main-background-color);
   color: var(--main-color);
   font: 1rem "SourceSansPro", sans-serif;
   overflow-y: hidden;
}

p {
   font: 1rem "SourceSansPro", sans-serif;
   color: var(--text-color);
}

h3 {
   font: 1.3rem "SourceSansPro", sans-serif;
   color: var(--text-color);
}

h4 {
   font: 1.1rem "SourceSansPro", sans-serif;
   font-style: italic;
   color: var(--text-color);
}

a {
   font: 1rem "SourceSansPro", sans-serif;
   /*font-weight: bold;*/
   color: var(--text-color);
}
a:link {
   color: var(--text-color);
   /*font-weight: bold;*/
   text-decoration: none;
}
a:visited {
   color: var(--text-color);
   /*font-weight: bold;*/
   text-decoration: none;
}

a:hover {
    color: var(--special-color);
   /*font-weight: bold;*/
   text-decoration: underline;
}

li {
   color: var(--text-color);
}

.menu_link {
   font-size: 1.4rem;
   /*font-weight: bold;*/
   font-family: 'AlegreyaSansSC', 'SourceSansPro', sans-serif;
   color: var(--main-color);
   margin-bottom:5px;
}
.menu_link:link {
   color: var(--main-color);
   /*font-weight: bold;*/
   text-decoration: none
}
.menu_link:visited {
   color: var(--main-color);
   /*font-weight: bold;*/
   text-decoration: none
}
.menu_link:hover {
    color: var(--special-color);
   /*font-weight: bold;*/
   text-decoration: underline;
}

.menu_entry0 {
   height:3rem;
   text-align:left;
   line-height:2.5rem;
   padding-left:10px;
   padding-bottom:5px;
   padding-top:5px;
   margin-bottom:10px;

   border-left:4px solid var(--special-color);
   border-top:4px solid var(--special-color);
}

.menu_entry {
   height:3rem;
   text-align:left;
   line-height:2.5rem;
   padding-left:10px;
   padding-top:5px;
   padding-bottom:5px;
   margin-top:20px;
   /*! margin-bottom:10px; */

   border-left:4px solid var(--special-color);
   border-top:4px solid var(--special-color);
}

.submenudiv {
   padding-left:25px;
   padding-top:2px;
   padding-bottom:2px;
   margin-top:2px;
   margin-bottom:2px;
}

.submenu {
   font-size: 1.1rem;
   font-family: 'SourceSansPro', sans-serif;
   padding-left:15px;
   padding-top:2px;
   padding-bottom:2px;
   margin-top:2px;
   margin-bottom:2px;
}

.b_link {
   cursor:pointer;
   cursor:hand;
}

.k_link {
   cursor:pointer;
   cursor:hand;
}

.k_werke {
   margin-left:20px;
}

.k_werk {
   margin-left:20px;
   cursor:pointer;
   cursor:hand;
}

.LetterHeader {
   margin-top:10px;
   margin-bottom:5px;
   border-top:2px solid var(--special-color);
   font-weight:bold;
   font-size: 1rem;
   width:100%;
}

/* ----- */

header {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   height: 100px;
   padding: 10px;
   z-index: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 20px;
   background-color: var(--header-background-color);
   opacity: 1;
   /*! border-bottom: 1px solid white; */
}

header div:last-of-type a {
   flex: 1;
   text-transform: capitalize;
   letter-spacing: 1px;
   font-size: 3rem;
   font-family: 'AlegreyaSansSC', 'SourceSansPro', sans-serif;
   font-weight: 200;
   color: var(--main-color);
}

header button {
   display: none;
}

#LogoFS {
   height: 80px;
   width: 80px;
   background-image: url("/res/images/logo_fs_alt.jpg");
   background-repeat: no-repeat;
   background-size: contain;
}

#LogoAkademie {
   height: 80px;
   width: 80px;
   background-color: var(--main-background-color);
   background-image: url("/res/images/logo_eakg.jpg");
   background-repeat: no-repeat;
   background-size: contain;
}

.clHeaderLink, .clHeaderLink:visited, .clHeaderLink:hover, .clHeaderLink:link {
   text-decoration: none;
}

/* ----- */

#navcontent {
   position: absolute;
   top: 100px;
   left: 10px;
   right: 0px;
   bottom: 0px;
   /*! overflow-y: auto; */
   /*! align-items: stretch; */
   /*! width: 100%; */
   z-index: 0;
   overflow-y: hidden;
}

#Navigation {
   position: absolute;
   top: 0px;
   left: 0px;
   width:300px;
   bottom: 0px;
   /*
   background-image: url("/res/images/menuback.jpg");
   background-repeat:repeat;
   */
   /*! height: 100%; */
   /*! padding: 10px; */
   /*! background-color: var(--main-background-color); */
   overflow-y: scroll;
}

#Content {
   position: absolute;
   top: 0px;
   left: 300px;
   right: 0px;
   bottom: 0px;
   padding-left: 10px;
   /*! position: relative; */
   /*! top: -600px; */
   color: var(--text-color) !important;
   background-color: var(--text-background-color);
   overflow-y: scroll;
}

#Content p {
   font-size: 1.3rem !important;
   width: 80%;
}

#Content li {
   font-size: 1.3rem !important;
   width: 80%;
}

#ContentTitle {
   margin-top:0px;
   margin-bottom: 10px;
   padding-left:0px;
   padding-top:0px;
   text-align:left;
   color: var(--special-color);
   font-size: 2rem;
}

/*
#content * {
   color: var(--text-color) !important;
}
*/

#ifContent {
  width:100%;
  height:100%;
}

.werke {
   font-size: 1rem ;
}

.werkbild {
   text-align: center;
   padding-top:20px;
}

.bwbild {
   text-align: center;
   padding-top:20px;
}

.AuswahlZeile {
   table-layout:fixed;
   width:100%;
   border-collapse:collapse;
}
.AuswahlBuchstabe {
    color: var(--special-color);
}
.AuswahlNachOben {
   text-align:right;
}

.cHinweis {
   font-size: 1rem;
   font-weight: normal;
   margin-top: 10px;
   margin-bottom: 10px;

}

.cOrt0 {
   margin-top: 10px;
   margin-bottom: 0px;
}

p.cOrt0 a {
   font-size: 1.1rem;
   font-weight: bold;
    color: var(--special-color);
}

.cOrt1 {
   font-size: 1.1rem;
   margin-top: 10px;
   margin-left: 40px;
   margin-bottom: 0px;
    color: var(--special-color);
}

.cOrt2 {
   font-size: 1.1rem;
   margin-left: 80px;
   margin-bottom: 0px;
    color: var(--special-color);
}

.cOrtBW {
   margin-left: 160px;
}

.clMark {
   color: var(--special-color) !important;
}

.clHide {
   display: none;
}

a.textlink {
   font-size: 1.3rem;
   color: var(--text-color);
   text-decoration: underline;
}
a.textlink:link {
   color: var(--text-color);
   text-decoration: underline;
}
a.textlink:visited {
   color: var(--text-color);
   text-decoration: underline;
}

a.textlink:hover {
   color: var(--text-color);
   font-weight: bold;
   text-decoration: underline;
}

/* Anpassungsversuche */

@media (width < 768px) {
   header {
      /*position: relative;*/
      height: 60px;
      display: flex;
      justify-content: space-between;
   }
   header div:last-of-type a {
      font-size: 1rem;
   }
   #LogoFS {
      display: none;
   }
   header button {
      display: inline;
      /*
      margin-left: 10px;
      margin-right: 10px;
      */
      background-color: var(--header-background-color);
      border: 1px solid var(--header-background-color);
      color: white;
      cursor: grab;
   }
     
   #navcontent {
      top: 70px;
      right: 10px;
      overflow-y: scroll;
      /*display: flex;
      flex-direction: column;*/
   }
   #Navigation {
      display: none;
      /*flex: 1;*/
      position: relative;
      width: 100%;
   }
   #Content {
      display: block;
      /*flex: 2;*/
      position: relative;
      left: 0;
      border-top: 5px solid  var(--special-color);
   }
}
/* EOF */