:root {
  --cassiopeia-color-primary: #04821f;
  --cassiopeia-color-link:  #04821f;
  --cassiopeia-color-hover: #11451c;
  --link-color: #04821f;
  --link-color-rgb: 4, 130, 31;
  --link-hover-color: #11451c;
  --link-hover-color-rgb: 17, 69, 28;
  --bs-link-color-rgb: 4, 130, 31;
  --bs-card-cap-bg: #dba507;
}

.card-header-orig {
  padding: var(--bs-card-cap-padding-y)var(--bs-card-cap-padding-x);
  color: #ffffff;
  /*background-color: var(--bs-card-cap-bg);*/
  background-color: #dba507;
  /*border-bottom: var(--bs-card-border-width)solid var(--bs-card-border-color);*/
  border-bottom: var(--bs-card-border-width)solid #dba507;
  border-color: #dba507;
  margin-bottom: 0;
}

.card-header-TMC {
  /*padding: var(--bs-card-cap-padding-y)var(--bs-card-cap-padding-x);*/
  padding: 1%;
  color: #ffffff;
  background-color: #820467;
  border: 2px solid #04821f;
  margin-bottom: 0;
}

.card-body-TMC {
  /*padding: var(--bs-card-cap-padding-y)var(--bs-card-cap-padding-x);*/
  padding: 1%;
  color: #ffffff;
  border: 2px solid #04821f;
  margin-bottom: 0;
}

/* Grundsätzliche Template Farben und Einstellungen */

/* Der Seitenkopf von Cassiopeia hat die Klasse "header" du steuerst diese also mit .header an */
.header {
    background: rgb(4,130,31);
	/*background: linear-gradient(90deg, rgba(4,130,31,1) 0%, rgba(87,199,133,1) 35%, rgba(255,255,0,1) 100%);*/
    /*background: rgb(73,128,45);*/
    /*background-image: url('/images/headers/1.TMC_header7.jpg');*/
}

/* Der Seitenfuß von Cassiopeia hat die Klasse "footer" du steuerst diese also mit .footer an */
.footer {
    background: rgb(4,130,31);  
    /*background: rgb(4, 130, 31);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%,    rgba(0,212,255,1) 100%);
    background-image: url('/images/headers/windows.jpg');*/
}

/* 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: rgb(4,130,31);
    border-color: rgb(4,130,31);
}

/* 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: rgb(17,69,28);
    border-color: rgb(17,69,28);
}

/* vergrößert Bilder um die eingestellten Werte beim Doppeklick */
img.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}

/* vergrößert Bilder um die eingestellten Werte beim überfahren mit der Maus */
img.zoom:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(1.5, 1.5);
 -moz-transform: scale(1.5, 1.5);
 -webkit-transform: scale(1.5, 1.5);
 -o-transform: scale(1.5, 1.5);
 -ms-transform: scale(1.5, 1.5);
}