body {
  background-color: #E8E8E8;
}
h1 {
  background: #0057b7;
  color: #fff;
  padding-left: 10px;
  padding-right: 10px;
}
h2,h3,h4,h5,h6 {
  color: #0057b7;
  padding-left: 10px;
  padding-right: 10px;
}
p {
  padding-left: 10px;
  padding-right: 10px;
}
a {
  color: #0057b7;
}
a:hover {
  color: #9a9da2;
}
a:focus {
  color: #31404b;
}
.btn {
  background: #0057b7;
  color: #fff;
}
.btn:hover {
  background: #003ea1;
  color: #fff;
}
.plg_system_webauthn_login_button svg path, .plg_system_webauthn_login_button svg circle {
  fill: #fff;
}
.header {
  max-height: 40%;
   background: rgb(8,38,66);
background: black; /*linear-gradient(0deg, rgba(8,38,66,1) 0%, rgba(0,87,183,1) 30%, rgba(28,134,238,1) 70%, rgba(255,255,255,1) 100%)*/
}
.site-description {
  font-weight: bold;
  font-size: 16px;
  padding-left: 10%;
  padding-top: 5px;
}
.mod-breadcrumbs__wrapper {
  background: #D1D1D1;
}
article, .item-page, .item-content {
  background: #ffffff;
}
article>p>img {
  float: left;
  padding: 10px;
}
.article-info-term {
  color: #e8e8e8;
  padding-left: 10px;
  padding-right: 10px;
}
.published {
  color: #e8e8e8;
  padding-left: 10px;
  padding-right: 10px;
}
.card-header {
  background: #0057b7;
  color: #fff;
}
figcaption {
  padding-left: 10px;
  padding-right: 10px;
}


/*@media( prefers-color-scheme: dark ){
  html, body { background: #000 }
  h1, h2, h3, h4, p, ul{ color: #1E90FF }
  img { opacity: .75; transition: opacity .5s ease-in-out; }
  img:hover { opacity: 1; }
}
*/

/*

// Schrift aus Google importieren - Gehe auf fonts.google.com, wähle eine Schrift aus und suche dort den Import Befehl 

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');

// Grundsätzliche Template Farben und Einstellungen 

:root {

    --cassiopeia-color-primary: #00ff00;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;

    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
    --blue: #0d6efd;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #d63384;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #198754;
    --teal: #20c997;
    --cyan: #0dcaf0;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --primary: #0d6efd;
    --secondary: #6c757d;
    --success: #198754;
    --info: #0dcaf0;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #212529;
    --primary-rgb: 13, 110, 253;
    --secondary-rgb: 108, 117, 125;
    --success-rgb: 25, 135, 84;
    --info-rgb: 13, 202, 240;
    --warning-rgb: 255, 193, 7;
    --danger-rgb: 220, 53, 69;
    --light-rgb: 248, 249, 250;
    --dark-rgb: 33, 37, 41;
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --body-color-rgb: 33, 37, 41;
    --body-bg-rgb: 255, 255, 255;
    --font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --body-font-family: var(--cassiopeia-font-family-body);
    --body-font-size: 2rem;
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;
    --body-bg: #efefef;
}


// Schrift auf der Seite nutzen: Auf Google findest du auch die CSS Anweisung für die Nutzung der Schrift. Wenn du diese in das body element einfügst dann wird die Schrift auf der ganzen Webseite genutzt. 

body {
      font-family: 'Georama', sans-serif;
}

// Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst diese also mit .header an 

.header {
    background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}

/* Das Dropdown-Menu im Menu färbst du mit der Klasse .metismenu.mod-menu .mm-collapse ein 

.metismenu.mod-menu .mm-collapse {
  background: #475BAF;
}

/* Die Links im Dropdown Menu musst du dann auch einzeln ansteuern 
.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}

/* Module haben die Klasse card, man steuert sie also mit .card an - wenn du nur ein bestimmtes Modul ansteuern willst, kannst du dem Modul in den Einstellungen eine eigene CSS Klasse geben und dann damit ansteuern  

.card {
  box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 12px 4px 18px 0px rgba(0,0,0,0.35);
}

/* Module sind auf verschiedenen Modulpositionen im Cassiopeia Template bekommen dann die Module zusätzlich zu card auch die Position als Klassennamen, zum Beispiel main-top - wenn du also alle Module auf Main Top ändern möchtest, nimmst du .main-top.card 

.main-top.card {
   background: #e1e9f5;
}


/* Überschriften sind html Elemente, die Hauptüberschrift ist eine h1, dann kommt h2, h3, h4 usw. Ein html Element steuerst du an indem du einfach den Namen davorschreibst 

h1 {
  text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
  color: rgba(119,9,121,1);
}

/* In Joomla haben die meisten Buttons die Klasse btn-primary - im Element Inspektor kannst du nachsehen ob der Button, den du einfärben willst wirklich diese Farbe hat.


.btn-primary {
  background: rgba(119,9,121,1);
}

/* Wenn du etwas einfärben möchtest, nur wenn man mit der Maus drüber fährt dann schreibst du :hover dahinter


.btn-primary:hover {
  background: rgba(0,212,255,1);
} 

/* In Joomla haben alle Beitragsbilder die Klasse item-image, wenn du nur ein bestimmtes Bild einsteuern möchtest, dann muss du dem Bild im Beitrag eine eigene CSS Klasse geben.


.item-image {
  border: 2px solid #ff0000;
}


/*Laufen dir auf der Webseite icons über den Weg kannst du diese einzeln einfärben

.icon-user {
  
}

/* oder du färbst mit dieser besonderen Anweisung alle Icon ein

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
  color: #403678;
}

/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an 

.footer {
    background: rgb(2,0,36);
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}