:root {
  /* Hintergrundfarbe (linke) Seite */
  /* --cassiopeia-color-primary: #E0DE13; */
  --cassiopeia-color-primary: #E0DE13;
  --cassiopeia-color-primary2: #ffffff;
  /* Hintergrund (rechte) Seite zu separieren und setzen mit neuer Variablen */
  /* --cassiopeia-color-secondary: #FEFDFD; */
  --cassiopeia-color-secondary: #ffffff;
  /* ehem. Hintergrundfarbe rechts Seite (mit weichen Überlauf) nun nur ausgewählte Menü-Unterpunkte */
  --cassiopeia-color-hover: #6d8b9a;
  /* Farbe Menü-Unterpunkte */
  /* --cassiopeia-color-link: #2B3483; */
  --cassiopeia-color-link: #6d8b9a;
/* Textklau verhindern durch z.B. Markierung und anschliessendem Ctrl/C */
/*    user-select: none; -moz-user-select: none; -webkit-user-select: none;-ms-user-select: none; */
}

  /* Hintergrund rechte Seite separieren und setzen mit neuer Variable cassiopeia-color-secondary. Zusätzlich Verläufe von oben nach unten */
.container-header {
  position: relative;
  z-index: 10;
  background-color: var(--cassiopeia-color-primary2);
  background-image: -o-linear-gradient(180deg, var(--cassiopeia-color-primary2) 0%, var(--cassiopeia-color-secondary) 100%);
  background-image: linear-gradient(0deg, var(--cassiopeia-color-primary2) 0%, var(--cassiopeia-color-secondary) 100%);
  -webkit-box-shadow: 0 5px 5px hsla(0deg, 0%, 0%, 0.03) inset;
          box-shadow: 0 5px 5px hsla(0deg, 0%, 0%, 0.03) inset;
}
.footer {
  margin-top: 1em;
  color: hsl(0deg, 0%, 100%);
  background-color: var(--cassiopeia-color-primary2);
  background-image: -o-linear-gradient(0deg, var(--cassiopeia-color-primary2) 0%, var(--cassiopeia-color-secondary) 100%);
  background-image: linear-gradient(180deg, var(--cassiopeia-color-primary2) 0%, var(--cassiopeia-color-secondary) 100%);
}

/* Farbe Schrift in Menü Ersteinträge anpassen */
.container-header .mod-menu { color: #6d8b9a; }

/* An Menüpunkten Mouseover wird Auswahl zusätzlich signalisiert */
.container-header .metismenu.mod-menu .metismenu-item>a:hover {
  color: #99121a;
  text-decoration: underline #99121a 3px;
}

/* Brechen von Menüpunkt und Pfeil verhindern */
.container-header .mod-menu {flex-wrap: wrap;}

/* Schrift-Font wird nicht im Editor aufgelöst, wohl im Ergebnis */
@font-face {
  font-family: "Gloria";
  src: url("../fonts/GloriaHallelujah-Regular.ttf") format("truetype");
}

/* Schrift-Font wird nicht im Editor aufgelöst, wohl im Ergebnis */
@font-face {
  font-family: "Altdeutsch";
  src: url("../fonts/TheuerdankFraktur.ttf") format("truetype");
}


/* Für Überschriften Farbe sowie font setzen */
h1, .h1 { color: #99121a; font-family: arial, helvetica; font-size: 24pt;}
h2, .h2 { color: #99121a; font-family: arial, helvetica; font-size: 14pt;}
h3, .h3 { color: #6d8b9a; font-family: arial, helvetica; font-size: 14pt;}
h4, .h4 { color: #949599; font-family: arial, helvetica; font-size: 14pt;}


/* variable Video-Größe */
.video-container {
    position: relative;
    padding-bottom: 56.25%; padding-top: 30px;
    height: 0;
    overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; }


/* Trennlinie in jCal Pro Termin Listenansicht */
.jcalpro_events_description {
background-color: #eee;
padding: 10px;
}
ul.jcalpro_events > li:not(:last-of-type)  {
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

/* Hamburger Menü mit anderer Farbe */
.container-header .navbar-toggler {
    color: #6d8b9a;
    border: 1px solid #6d8b9a;
}

/* Test um Farbe unten rechts Wer ist online zu aendern */
.make-me-dark-green {
  color: darkgreen;
  border-color: #264f71;
}
.mod-whosonline {
  color: darkgreen;
  border-color: #264f71;
}

/* Workaround - 3 jüngste Blogeinträge auf Startseite mit nicht-legacy-modul */
@container (width >= 500px) {
  .mod-articles-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  }
}