:root {
   --body-font-size: 0.9rem;
}

a {
  color: var(--cassiopeia-color-link);
}

.navbar-toggler {
   background-color: var(--cassiopeia-color-link);
   border-radius: 5px;
}

.footer a:not(.btn):hover {
  color: var(--cassiopeia-color-link);
}

.footer .metismenu.mod-menu .metismenu-item > a:hover {
  text-decoration: none;
}

@media (min-width: 800px) {
   body {
        background-color:#e4e4e4;
   }


   div.mzframe {
       border: 1px solid rgba(0,0,0,0.15);
       box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
       padding: 20px;
       margin: 3em 5em 1em 5em;
       border-radius: 10px;
       background-color: white;
   }
}

figure.item-image {
  padding-right: 1em;
}

figcaption {
  text-align: center;
  padding-top: 1em;
}

.pull-left {
   float: left;
}

.pull-right {
   float: right;
}

.btn-secondary {
   font-size: var(--body-font-size);
   padding: 0.4rem 0.8rem;
   margin-top: 0.7rem;
}

td {
  border: 1px solid;
}

/* Headings */

h2.item-title a {
  text-decoration: none;
}

h2.item-title a:hover {
  text-decoration: underline;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
}

h1, .h1 {
    font-size: 1.5rem;
}

h2, .h2 {
    font-size: 1.2rem;
    font-weight:650;
}

h3, .h3 {
    font-size: 1.1rem;
}

h4, .h4, h5, .h5, h6, .h6 {
    font-size: 1rem;
}

/* Suchfeld */
.container-topbar input {
   border-radius: 10px;
}

/* Sprachmenü */
.mod-languages, .headersearch {
   display: inline-block;
}

ul#mylang {
    display: block;
    float: right;
    padding-right: 8px;
}

ul#mylang li {
	display: inline;
}

header.container-header {
  background-image: none;
  background-color: transparent;
  box-shadow: none;
}

.footer {
  background-color: transparent;
  background-image: none;
  margin: 0 15em 0 15em;
}

.footer .grid-child {
  padding-top: 0;
  padding-bottom: 2.5rem;
  color: var(--cassiopeia-color-link);
}

.footer .metismenu.mod-menu .metismenu-item {
  padding-right: 2em; 
}

span#loginuser {
  padding-right: 1em;
}

div.topic {
      float:left;
      background-color: #f8f8f8;
      width: 230px;
      height: 200px;
      margin: 2ex;
      padding: 1ex;
      box-shadow: 0px 0px 7px #c0c0c0;
}
   
/* Menüpunkte */
.container-header .mod-menu {
    color: var(--cassiopeia-color-link);
}

.smartresize.noborder {
  border: none;
  box-shadow: none;
}

/* Altes Menü */

@media (min-width: 1280px) {
   /* button entfernen (1) Top-Level, (2)Untermenü */
   .metismenu.mod-menu .mm-toggler,
   .metismenu.mod-menu .mm-collapse > li.parent .mm-toggler {
      display: none;
   }

   div.mzframe {
     border: 1px solid rgba(0,0,0,0.15);
     box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
     padding: 20px;
     margin: 3em 10% 1em 10%;
     border-radius: 10px;
     background-color: white;
   }

  div.grid-child {
    max-width: 2400px;
  }

   div.grid-child.container-nav {
      padding-top: 2px;
      padding-bottom: 5px;
      border-top: 1px solid rgba(0,0,0,0.075);
      border-bottom: 1px solid rgba(0,0,0,0.075);
   }

   .metismenu > li > a {
       margin-top: 2px;
       margin-bottom: 2px;
       padding-top: 8px;
       padding-bottom: 8px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
       font-size: 0.9rem;
   }

   .metismenu a:hover {
       background-color: #eee;
   }

   .metismenu a {
       padding-left: 12px;
       padding-right: 12px;
       text-decoration: none;
   }


   /* Aktiver Menüpunkt */
   .container-header .mod-menu > .active > a,
   .container-header .mod-menu > .active > a:hover,
   .container-header .mod-menu > .active > a:focus {
        color: #fff;
        background-color: var(--cassiopeia-color-link);
   }

   .navbar .metismenu .metismenu-item:hover > ul.mm-collapse { 
      display: block; 
   }


   .navbar .metismenu .metismenu-item li > a:hover {
      background-color: var(--cassiopeia-color-link);
      text-decoration: none;
      color: white;
   }

   .metismenu.mod-menu .mm-collapse > li > a {
      display: block; /* als Blockelement darstellen */
      padding: 3px 20px 3px 20px;
   }

   /* Toplevel-Menü */
   ul.mm-collapse {
        position: absolute;
        top: 95%;
        left: 0;
        z-index: 1000;   /* ganz nach vorne */
        display: none;
        float: left;  
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 6px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
        background-clip: padding-box;
   }

   /* Pfeilchen für das Toplevel-Menü */
   ul.mm-collapse::before {
        position: absolute;
        top: -7px;
        left: 9px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-left: 7px solid transparent;
        border-bottom-color: rgba(0,0,0,0.2);
        content: '';
   }

   ul.mm-collapse::after {
        position: absolute;
        top: -6px;
        left: 10px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-left: 6px solid transparent;
        content: '';
   }

   /* Untermenü */
   ul.mm-collapse ul {
       top: -8px;
       left: 100%;
   }

   .metismenu.mod-menu .mm-collapse > li.parent > ul {
      background-color: var(--white);
      box-shadow: 0 5px 10px rgba(0,0,0,0.2);
      position: absolute;
      top: -10px;
   }

   /* Nur die obersten Menüeinträge */
   div > .metismenu.mod-menu > .metismenu-item {
       padding-top: 0;
       padding-bottom: 4px;  
       padding-left: 0.5em;
       padding-right: 0.5em;
   }

   div > .metismenu.mod-menu > .metismenu-item > ul {
      left: 10%;
   }

   .metismenu.mod-menu .metismenu-item > ul {
      padding: 5px 0;
   }

   .metismenu.mod-menu .metismenu-item:not(.level-1) > ul,
   .metismenu.mod-menu .metismenu-item:not(.level-2) > ul {
      margin: 0;
   }

   .metismenu.mod-menu .metismenu-item {
      display: block;
   }

   /* Alle anderen */
   .metismenu.mod-menu .metismenu-item {
      font-size: 0.9rem;
      padding: 0;
   }

   /* Pfeilchen für das Untermenü */
   ul.mm-collapse ul::before {
        position: absolute;
        top: 9px;
        left: -15px;
        display: inline-block;
        border-top: 7px solid transparent;
        border-right: 7px solid #ccc;
        border-bottom: 7px solid transparent;
        content: '';
   }

   ul.mm-collapse ul::after {
        position: absolute;
        top: 10px;
        left: -14px;
        display: inline-block;
        border-top: 6px solid transparent;
        border-right: 6px solid #ffffff;
        border-bottom: 6px solid transparent;
        content: '';
   }

   dd {
      margin: 0;
      font-size: 0.8rem;
   }

   div.container-topbar div.mod-languages ul li.lang-active {
      background-color: #e0e0e0;
   }

   .text-muted {
      color: #9ca4ac !important;
   }

   .metismenu.mod-menu .metismenu-item.active > a {
      text-decoration: none;
   }
}