/* Versuche */
h1 {
  font-size: calc(1.5em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}
h2 {
  font-size: calc(1.4em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}
h3 {
  font-size: calc(1.3em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}
h4 {
  font-size: calc(1.2em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}
/*
h2.item-title {
  font-size: calc(1.4em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}
*/
/* 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;
    --marron: #64201d;
    --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: 1rem;  
    --body-font-weight: 400;
    --body-line-height: 1.5;
    --body-color: #383838;  
    --body-bg: #efefef; 
}

/* 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;
}
*/

/* Ü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 */





/* 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%); 
}
*/





/******************************************************************************************************/
/* Meine Anpassungen */

/* 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: 2px 4px 8px 0px rgba(0,0,0,0.35);
	-webkit-box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.35);
	-moz-box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.35);
}

h3.card-header {
  font-size: calc(1.0em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}

/* 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;
}


.container-topbar {
  color: #050173;
  background-color: #ffffff;
}

/*  Beitragsüberschrift

h2.main.item-title {
  font-size: calc(1.0em + 0.2vw);
  font-weight: normal;
  color: #64201d;
}
*/

/****************************************************************************************************/
/* Layouts aus Zhong importiert */

.monospace {
  font-family:Courier New, Courier, monospace !important
}

.serif {
  font-family:Georgia, Times, "Times New Roman", serif !important
}
.sans-serif {
  font-family:Arial, Helvetica, sans-serif !important
}
.yellow-mark,
.yellow-mark * {
  background:#FE4 !important;
  color:#000 !important
}
.green-mark,
.green-mark * {
  background:#6E3 !important;
  color:#000 !important
}
.red-mark,
.red-mark * {
  background:#D11 !important;
  color:#FFF !important
}
.violet-mark,
.violet-mark * {
  background:#F4E !important;
  color:#000 !important
}
.blue-mark,
.blue-mark * {
  background:#00F !important;
  color:#FFF !important
}
.highlight-grey,
.highlight-green,
.highlight-red,
.highlight-brown,
.highlight-yellow,
.highlight-blue,
.highlight-black {
  display:block;
  width:auto;
  overflow:hidden;
  padding:.6em .3em .6em 1em;
  margin:1em .6%;
  border:0;
  border-left-width:.6em;
  border-left-style:solid
}
.highlight-grey {
  border-left-color:#CCC !important;
  background:#E9E6E9;
  color:#3B3B3B
}
.highlight-green {
  border-left-color:#8ef26f !important;
  background-color:#CFF26F;
  color:#0D1C11
}
.highlight-red {
  border-left-color:#DA3F26 !important;
  background-color:#A62A11;
  color:#FFF
}
.highlight-brown {
  border-left-color:#BFA160 !important;
  background-color:#FFE68C;
  color:#312A1A
}
.highlight-yellow {
  border-left-color:#FFDB4A !important;
  background-color:#FF7;
  color:#382E19
}
.highlight-blue {
  border-left-color:#847FF0 !important;
  background-color:#91B2FF;
  color:#111326
}
.highlight-black {
  border-left-color:#494949 !important;
  background-color:#222;
  color:#EEE
}


.error,
.notice,
.success,
.message {
  padding:.8em;
  margin:1em 0;
  border-top:2px solid #DDD;
  border-bottom:2px solid #DDD
  }

.notice,
.message {
  background:#FFF6BF;
  color:#514721;
  border-color:#FFD324 !important
}
.error {
  background:#FFE9C2;
  color:#881E10;
  border-color:#F62 !important
}
.success {
  background:#E8FFCA;
  color:#264409;
  border-color:#7ED060 !important
}
.notice a,
.message a {
  color:#514721
}
.error a {
  color:#881E10
}
.success a {
  color:#264409
}
.rounded-corners {
  border-radius:1em !important;
  -moz-border-radius:1em !important;
  -webkit-border-radius:1em !important
}

.marked-block-dark,
.marked-block-light {
  display:block;
  overflow:hidden;
  width:auto;
  margin:.8em 2% 1.2em 2%;
  padding:.6em 2% .8em 2%;
  clear:both;
  border-width:3px;
  border-style:solid;
  border-radius:.6em;
  -moz-border-radius:.6em;
  -webkit-border-radius:.6em
}
.marked-block-dark h1,
.marked-block-dark h2,
.marked-block-dark h3,
.marked-block-dark h4,
.marked-block-dark h5,
.marked-block-dark h6,
.marked-block-light h1,
.marked-block-light h2,
.marked-block-light h3,
.marked-block-light h4,
.marked-block-light h5,
.marked-block-light h6 {
  display:block;
  margin:0 .6em .2em .6em;
  padding:.3em 0;
  border-bottom:solid 1px
}
.marked-block-dark p,
.marked-block-light p {
  margin:1.2em .8em;
  width:auto
}
.marked-block-dark {
  color:#434545;
  border-color:#CCC !important;
  background:#EEE
}
.marked-block-dark h1,
.marked-block-dark h2,
.marked-block-dark h3,
.marked-block-dark h4,
.marked-block-dark h5,
.marked-block-dark h6 {
  color:#434545;
  border-bottom-color:#CCC
}
.marked-block-dark p {
  color:#434545
}
.marked-block-light {
  color:#444;
  border-color:#DEDBDB !important;
  background:#FFF
}
.marked-block-light h1,
.marked-block-light h2,
.marked-block-light h3,
.marked-block-light h4,
.marked-block-light h5,
.marked-block-light h6 {
  color:#444;
  border-bottom-color:#DEDBDB
}
.marked-block-light p {
  color:#444
}

.col-style-full,
.col-style-1 {
  display:block;
  float:none;
  clear:both;
  margin:.6em 2%;
  width:96%
}
.col-style-2,
.col-style-3,
.col-style-4,
.col-style-5,
.col-style-6 {
  display:block;
  float:left;
  clear:none
}
.col-style-2 {
  width:46.8%;
  margin:.6em 1.6%
}
.col-style-3 {
  width:30.9%;
  margin:.6em 1.2%
}
.col-style-4 {
  width:23%;
  margin:.6em 1%
}
.col-style-5 {
  width:18.4%;
  margin:.6em .8%

}
.col-style-6 {
  width:15.4%;
  margin:.6em .6%
}

.grey-button-style,
.grey-button-style:visited,
.white-button-style,
.white-button-style:visited,
.green-button-style,
.green-button-style:visited,
.red-button-style,
.red-button-style:visited,
.yellow-button-style,
.yellow-button-style:visited,
.violet-button-style,
.violet-button-style:visited,
.blue-button-style,
.blue-button-style:visited,
.black-button-style,
.black-button-style:visited {
  display:inline-block;
  width:auto;
  padding:.462em .625em;
  margin:0;
  text-align:center;
  text-decoration:none;
  text-indent:0;
  background-position:3% 55%;
  background-repeat:no-repeat;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px
}
.grey-button-style,
.grey-button-style:visited {
  color:#444;
  border:solid 1px #969696;
  background-color:#EEEDED
}
.grey-button-style:hover,
.grey-button-style:focus,
.grey-button-style:active {
  background-color:#DADADA;
  border-color:#6B6B6B;
  color:#3D3D3D;
  text-decoration:none
}
.white-button-style,
.white-button-style:visited {
  color:#444;
  border:solid 1px #666;
  background-color:#FFF
}
.white-button-style:hover,
.white-button-style:focus,
.white-button-style:active {
  background-color:#F1F1F1;
  border-color:#444;
  color:#111;
  text-decoration:none
}
.green-button-style,
.green-button-style:visited {
  color:#0F3B15;
  border:solid 1px #3D8C45;
  background-color:#98E663
}
.green-button-style:hover,
.green-button-style:focus,
.green-button-style:active {
  background-color:#61E200;
  border-color:#1F5F26;
  color:#080A07;
  text-decoration:none
}
.red-button-style,
.red-button-style:visited {
  color:#FFFFFF;
  border:solid 1px #901C11;
  background-color:#C33113;
  text-shadow:1px 1px 1px #5D0F07
}
.red-button-style:hover,
.red-button-style:focus,
.red-button-style:active {
  color:#FFFFFF;
  border-color:#B82213;
  background-color:#F30000;
  text-decoration:none
}
.yellow-button-style,
.yellow-button-style:visited {
  color:#382E19;
  border:solid 1px #F1A548;
  background-color:#FF8;
  text-shadow:1px 1px 1px #FFEA7F
}
.yellow-button-style:hover,
.yellow-button-style:focus,
.yellow-button-style:active {
  color:#382E19;
  border-color:#FDE328;
  background-color:#FF5;
  text-decoration:none
}
.blue-button-style,
.blue-button-style:visited {
  color:#23233B;
  text-shadow:1px 1px 1px #C2D4FF;
  border:solid 1px #847FF0;
  background-color:#91B2FF
}
.blue-button-style:hover,
.blue-button-style:focus,
.blue-button-style:active {
  color:#090910;
  text-shadow:0px 0px 0px #C2D4FF;
  border-color:#615DBB;
  background-color:#6494FF;
  text-decoration:none
}
.violet-button-style,
.violet-button-style:visited {
  color:#4A0A3D;
  border:solid 1px #D147B5;
  background-color:#FFA0EF
}
.violet-button-style:hover,
.violet-button-style:focus,
.violet-button-style:active {
  color:#1A0315;
  border-color:#BB38A1;
  background-color:#FA5ADA;
  text-decoration:none
}
.black-button-style,
.black-button-style:visited {
  border:solid 1px #1D1D1D;
  color:#EEE;
  background-color:#333;
  text-shadow:1px 1px 1px #111
}
.black-button-style:hover,
.black-button-style:focus,
.black-button-style:active {
  color:#FFF;
  text-decoration:none;
  border-color:#333;
  background-color:#555;
  text-shadow:1px 1px 1px #222
}



/* End "meine Anpassungen"    */