@charset "utf-8";

:root {
   /* menu mobile = 3*5vh */
   --menu-h: 15vh;
}

* {
   box-sizing: border-box;
   /* Width and height apply to all parts of the element: content, padding and borders */
   margin: 0;
}

html,
body {
   height: 100vh;
   width: 100vw;
   font-family: "'Times New Roman',Times,serif";
   overflow: hidden;
}

#main {
   position: absolute;
   bottom: var(--menu-h);
   left: 0;
   right: 0;
   top: 0;
   width: 100vw;
}



#footer::after {
   content: "";
   clear: both;
}

footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100vw;
   height: var(--menu-h);
   color: white;
   /* background-color: whitesmoke; */
}


.row:after {
   content: "";
   display: table;
   clear: both;
}

.column {
   float: left;
}

.active {
   background-color: rgb(153, 0, 51);
}

.col-0 {
   width: calc(100vw / 3);
}

.col-1 {
   /* col-0 * 3 = col-1 * 2   */
   width: 50%;
}


/* Die Normallinks */
a.normlnk:link,
a.normlnk:visited {
   color: rgb(153, 0, 51);
}

a.normlnk:active,
a.normlnk:hover {
   color: yellow;
}

.menu,
.menuH {
   /* menu-leiste Höhe = 5vh = 2*(0.2vh border +0.3vh padding) + 4vh font-size  */
   /* border-collapse geht nur für tabelle */
   display: block;
   border: 0.2vh solid rgb(81, 0, 51);
   padding: 0.3vh;
   font-size: 3vh;
   height: 5vh;
   background-color: rgb(153, 0, 51);
   text-align: center;
}

.menuH {
   object-fit: contain;
}

/* Die Hyperlinks im Menu  */
a.menulnk:link,
a.menulnk:visited {
   color: white;
}

a.menulnk:active,
a.menulnk:hover {
   color: yellow;
}

@media only screen and (max-width: 768px) and (orientation: landscape) {}

@media only screen and (min-width: 768px) {
   :root {
      --menu-h: 5vh;
   }

   .col-0 {
      width: calc(100vw / 7);
   }

    .col-1 {
      /* with total = 7 * col-0 = 7 * col-1 */
      width: calc(100vw / 7);
   }
}