/* Farben */

:root {
   
    --cassiopeia-color-primary: #112855;
    --cassiopeia-color-link: #6f6f6f;
    --cassiopeia-color-hover: #2d2c54;
    --focus: #3399ff;
    --card-bg: hsla(0,0%,100%,.7);
    --bluegray: #b2bfcd;
    --lightbluegray: #f6f9fc;
    --toolbar-bg: #fff;
    --success-border: var(--success);
    --info-border: var(--info);
    --warning-border: var(--warning);
    --danger-border: var(--danger);
    --border: #ced4da;
    --white: #fff;
    --white-offset: #fefefe;
    --focus: #39f;
    --focus-shadow: 0 0 0 0.2rem #eaeaea;
    --toggle-color: #fff;
    --template-sidebar-bg: var(--template-bg-dark-80);
    --template-sidebar-font-color: #fff;
    --template-sidebar-link-color: #fff;
    --template-bg-light: #f0f4fb;
    --template-text-light: #fff;
    --template-special-color: #132f53;
    --template-link-color: #2a69b8;
    --template-link-hover-color: #173a65;
    --template-contrast: #2a69b8;
    --template-bg-dark: hsl(var(--hue),40%,20%);
    --template-bg-dark-3: hsl(var(--hue),40%,97%);
    --template-bg-dark-5: hsl(var(--hue),40%,95%);
    --template-bg-dark-7: hsl(var(--hue),40%,93%);
    --template-bg-dark-10: hsl(var(--hue),40%,90%);
    --template-bg-dark-15: hsl(var(--hue),40%,85%);
    --template-bg-dark-20: hsl(var(--hue),40%,80%);
    --template-bg-dark-30: hsl(var(--hue),40%,70%);
    --template-bg-dark-40: hsl(var(--hue),40%,60%);
    --template-bg-dark-50: hsl(var(--hue),40%,50%);
    --template-bg-dark-60: hsl(var(--hue),40%,40%);
    --template-bg-dark-65: hsl(var(--hue),40%,35%);
    --template-bg-dark-70: hsl(var(--hue),40%,30%);
    --template-bg-dark-75: hsl(var(--hue),40%,25%);
    --template-bg-dark-80: hsl(var(--hue),40%,20%);
    --template-bg-dark-90: hsl(var(--hue),40%,10%);
    --gray-100: #f9fafb;
    --gray-200: #eaedf0;
    --gray-300: #dfe3e7;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6d757e;
    --gray-700: #484f56;
    --gray-800: #353b41;
    --gray-900: #22262a;
    --primary: #010156;
    --secondary: #6d757e;
    --success: #448344;
    --info: #30638d;
    --warning: #ad6200;
    --danger: #a51f18;
    --light: #f9fafb;
    --dark: #353b41;
    --primary-rgb: 1,1,86;
    --secondary-rgb: 109,117,126;
    --success-rgb: 68,131,68;
    --info-rgb: 48,99,141;
    --warning-rgb: 173,98,0;
    --danger-rgb: 165,31,24;
    --light-rgb: 249,250,251;
    --dark-rgb: 53,59,65;
    --white-rgb: 255,255,255;
    --black-rgb: 0,0,0;
    --body-color-rgb: 34,38,42;
    --body-bg-rgb: 255,255,255;
}

  
/* Schriften */
    
:root {
  
    --cassiopeia-font-family-body: "Noto Sans", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-normal: 150;
    --cassiopeia-font-weight-headings: 300;

}

/* Navigation */
.container-nav {
  background-color: #e6f0fa;
}
  

/* Banner Image */
.mybanner {
  min-width: 100%;
}

/* Menu */

/* Override the lila background with white */
.container-header {
  background-color: white;
  background-image: none;
}

/* Text should now be blue */
.container-header .mod-menu {
  color: #0082c2;
}

/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  padding: 3px 15px;
  color: #2d434d;
}

/* On hover there should be a gray background*/
.container-header .mod-menu a:hover {
  background-color: #fa2;
}

/* We need to change the color of the Hamburger Menu because white on white is not good */
.container-header .navbar-toggler {
  color: #0088cc;
  border: 1px solid #0088cc;
}