/*---------------------------Google Schrift importieren-------------------*/

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600&display=swap");

/*-----------------------------Vordefinierte Styles und Farben-----------------------------*/

:root {
  
  	/*KEM Standard Styles*/
    --kem-font-size: clamp(0.9rem, 3vw, 1.05rem);
    --kem-font-header-size: clamp(1.2rem, 3vw, 1.4rem);
  	--kem-font-family: "Roboto", sans-serif;			
 	--kem-font-family-headings: "Roboto", sans-serif;	
  	--kem-font-weight-headings: 400;					
  	--kem-font-weight-normal: 300;						

	/*KEM Farben*/
    --kemgreen: #b8c930;
    --kemblue1: #1b3e84; /*dunkles Blau*/
    --kemblue2: #4e80c1; /*oft verwendetes Blau*/
    --kemblue3: #32519c; 
    --kemgrey1: #f8f9fa;
    --kemgrey2: #dee2e6;
    --kemgrey3: #444444; /* sehr dunkles grau */
}

/*-------------------------------Body-------------------------*/

body {
  	font-family: var(--kem-font-family);
  	font-size: var(--kem-font-size);
  	font-weight: var(--kem-font-weight-normal);
  	background: white;
}


/*---------------------Überschriften, Schriftarten, Links, usw.-------*/

.header {
  	background: var(--kemgreen);					/*Das sind die Links oben in der Menüleiste*/
    justify-content: center;
  	align-items: center;
}
.container-header .mod-menu {
	justify-content: center;
}

h1 {
	color: var(--kemgreen);
  	text-align: left;
    font-size: var(--kem-font-header-size);
  	font-weight: var(--kem-font-weight-headings);
}

h2 {
	color: var(--kemgreen);
  	text-align: center;
    font-size: 1.5rem;
}
h3 {
	color: var(--kemgreen);
  	text-align: center;
    font-size: 1.5rem;
}
h4 {
	color: var(--kemblue2);
  	text-align: center;
/*    font-size: 1.5rem; */
  	font-weight: var(--kem-font-weight-headings);
    font-size: var(--kem-font-header-size);
}
a {
	color: var(--kemblue2);							/*Farbe des Links*/
    
}
a:hover {
  	color: var(--kemgreen);							/*Farbe des Links beim drüberhovern*/
}
a:link {
  	text-decoration: none; 							/*Entfernt den Unterstrich beim Link*/
}

p {
  	color: black;									/*Normaler Text*/
    font-size: var(--kem-font-size);
}
/*.page-header {
  	
}*/
/* ----------------------------Beitragsfeld: item-content (=Beitragsfeld)------------------*/

.item-content {
  	background: var(--kemgrey1); 	/*Farbe des Hintergrunds im Beitragsfeld: Jetzt ein Grauton*/
 	padding: 5px;					/*wie weit der Rand von der Schrift weg ist*/	
  	border-bottom-left-radius: 0px;
  	border-bottom-right-radius: 0px;
	/*height: clamp(150pt, 3vw, 400pt);*/
    overflow-y: auto;
}

.item-title {
    font-weight: var(--kem-font-weight-headings);
    font-size: var(--kem-font-header-size);     
}

.blog-item {
  	-webkit-box-shadow: 12px 4px 18px 0px var(--kemgrey2);
}


/*-------------------------Bilder im Format 2:1------------------------*/

/* Bildcontainer in der Blogübersicht */
.blog-item .item-image {
    width: 100%;
    aspect-ratio: 2 / 1;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

/* Bild innerhalb des Containers in der Blogübersicht */
.blog-item .item-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*
 * Joomla-Bildklassen:
 * Funktioniert, wenn einleitungsbild bzw. beitragsbild
 * direkt am img-Element eingetragen ist.
 */
img.einleitungsbild,
img.beitragsbild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
}

/*
 * Funktioniert alternativ, wenn die CSS-Klasse
 * am umgebenden figure- oder div-Element liegt.
 */
.einleitungsbild,
.beitragsbild {
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.einleitungsbild img,
.beitragsbild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
``

/* ---------------------------Weiterlesen-Button----------------------------------*/
.btn {
  	background-color: var(--kemgrey1);
  	font-size: 0.9rem;
  	padding: 5px 0px;
  	color: var(--kemblue2);
    border-style: none;
}													
.btn:hover { 										/*Der Button wenn man den Cursor drüber haltet*/
  	background-color: white;
    color: var(--kemgreen);
}


/*-------------------------Bilder------------------------*/

/*.item-image {
	border-radius: 10px;
  	size: 20px;
}*/
.blog-item .item-image { /*hinzugefügt*/
    margin-top: 0px; /*Der Abstand zwischen Bild und Text auf der Startseite*/
    margin-bottom: 0px; 
    overflow: hidden; /*hidden im Original*/
}

/*-------------------------Icons-------------------------*/
.icon-chevron-right {
  	display: none;
}

/*------------------Dropdown-Menü------------------------*/

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

/*.metismenu.mod-menu {
  	background: var(--kemgreen); derzeit gibt es kein Dropdown Menü, das hat also keinen Effekt, außerdem weiß ich nicht ob da nicht ein Hashtag davorgehört fd7e14
  	align-items: center; 
}*/

/*metismenu müssten dann alle items des Menüs als Ganzes sein --> habe aber keinen effekt dieser Klasse feststellen können*/
.metismenu {
  	align-items: center;	
}

/*.mod-menu ist das Menü als ganzes auch mit Rand nach außen also bis an das rechte und linke limit der Seite (ich denke das funktioniert mit margin oder soiwas*/
.mod-menu {
  	background-color: var(--kemgreen);
  	align-items: center; /*sicher ist sicher ich weiß nämlich nicht was genau .metismenu meint*/
}
.mod-menu:hover {
  	background-color: var(--kemgreen);
}

/*.metismenu-item sind alle verschiedenen Menüpunkte, also jeder einzelne Menüpunkt ist eines dieser Items*/
.metismenu-item {
  	color: white;
  	text-decoration: none;
  	background-color: var(--kemgreen);
    font-weight: var(--kem-font-weight-normal);
    font-size: var(--kem-font-size);
}
.metismenu.mod-menu .metismenu-item{
    font-size: var(--kem-font-size);
}
/*.metismenu-item:active {
  	text-decoration: none;
  	color: black;
	das funktioniert lustiger weise nicht xD
}*/

/*.metismenu.mod-menu .mm-collapse {
  	background-color: black;			----------------Davon hab ich mir erhofft, so wie ursprünglich von Cassiopeia vorgeschlagen, das Dropdownmenü einzufärben was aber nicht funktioniert hat :(
}*/

.metismenu.mod-menu .mm-toggler {
  	color: white;					/*---------------------Das funktioniert nicht, .mm-toggler ist der Knopf neben dem Menütitel--------------
  	display: none;*/
}

/* 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 var(--kemgrey2);
	-webkit-box-shadow: 12px 4px 18px 0px var(--kemgrey2);
	-moz-box-shadow: 12px 4px 18px 0px var(--kemgrey2);
}

/*-----------------------------Footer--------------------------*/

.footer {
	background: rgb(2,0,36); /*ganz dunkles blau*/
	background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
}
/*-----------------------------Navigationsleiste unten zum blättern-----------------*/

/*.w-100 ist die ganze Navigationsleiste von links nach rechts*/
.w-100 {
  	background-color: var(--kemgreen);
}

/*.page-item sollten eigentlich die einzelnen Felder sein also das wo 1, 2, 3, usw. drinnen steht*/
.page-item {
  	
  	border: 1px solid black;
  	text-align: center;
  	color: black;
}
.page-item:active {
  	background-color: black;
}


/*.page-link ist glaube ich die Schrift in den Kasterl*/
.page-link {
  	color: black;
  	text-align: center;
  	
}
.page-link:active {
  	color: black;
}

/*Wenn man die Seite untersucht findet man heraus das die Klasse "disabled page-item" an jene Kasterl vergeben wurde die keinen Effekt haben beim klicken, also z.B. auf S.1 zurück gehen*/
.disabled.page-item {
  	background-color: black;
  	color: black; 	
}

/*Die Aufzählungspunkte vor dem Navigationsmenü unten*/
.items-more {
  	color: var(--kemblue1);
}
.items-more:hover {
   	color: var(--kemgreen);
}



/*-------------Übegebliebener Code den man später vlt verwenden könnte-----------*/

/*weitere Klassen sind: fa & fas, [class*="icon-"], [class^="icon-"] (sind für Icons), article (Artikel???), main-top.card (irgendwelche Module), Die Links im Dropdown Menu musst du dann auch einzeln ansteuern .metismenu.mod-menu .mm-collapse .metismenu-item a {color: #fff;}, 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;}.article {background: #b8c930;}, von .header: /*background: linear-gradient(90deg, #b8c930 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 50%);*/