:root {
    --cassiopeia-color-primary: #3D5160;
    --cassiopeia-color-link: #224faa;
    --cassiopeia-color-hover: #FDBA60;
  
    --body-bg-rgb: 254, 245, 227;
  	--body-bg: #FEF5E3;  
      
    --orange-rgb: 248, 151, 38;   /* h3 */
    --orange-hex: #F89726;
    --tuerkis-hex: #B0DFD7;
    --graublau-hex: #3D5160;
    --graublau-rgba: rgba(61, 81, 96, 1);  /* h1 */
    --gelb-hex: #FECC5A;
    --gelb-rgba: rgba(254, 204, 90, 1);  /* h4 */
      
}

/* Hintergrund Suchen */
.form-control {
  background-color: var(--body-bg);
}


/* Ü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, .h1 {
  color: rgba(61, 81, 96, 1);     /* graublau */
  font-family: var(--body-font-family);
  font-size: 1.75rem;
}

h2, .h2 {
  color: rgba(176, 223, 215, 1);  /* türkis */
  font-family: var(--body-font-family);
  font-size: 1.5
    1.5rem;
}

h3, .h3 {
  color: rgba(248, 151, 38, 1);      /* orange */
  font-family: var(--body-font-family);
  font-size: 1.35rem;
}


h4, .h4 {
  color: rgba(254, 204, 90, 1);      /* gelb */
  font-family: var(--body-font-family);
}


h5, .h5 {
  color: rgba(207, 84, 25, 1);    /* rotbraun */
  font-family: var(--body-font-family);
  font-size: 1.25rem;
}

h6, .h6 {
  color: rgba(207, 84, 25, 1);    /* rotbraun */
  font-family: var(--body-font-family);
  font-size: 1rem;
}

.container-header {
  background-color: #3D5160;
  background-image: none;
}
.container-footer {
  background-color: #3D5160;
  background-image: none;
}

/* Modulpositionen einfärben */
.card {
    --card-border-color: #B0DFD7;
    --card-cap-bg: rgba(248, 151, 38,.03);
    --card-cap-color: #F89726;
    --card-color: ;
    --card-bg: #FFEBBE;          /* sand-dunkel */
    background-color: var(--card-bg);
    line-height: 1.2;
    font-size: 1.1rem;
}

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

/* Header Menue Background */

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


/* Button Background 

.btn {
      --btn-bg: rgba(254, 217, 211, 193);   gelbgrau ????
}
*/

/* 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(61, 81, 96, 1);
}

/* Button Hintergrund nicht weiß sondern die gewählte Body Hintergrundfarbe */
.btn-secondary {
  background-color: var(--body-bg);
}

/* 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(248, 151, 38, 1);
} 


/* alle Icon einfärben */

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

/*  details, .details {         font-color: #B0DFD7; 
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  
} 

details[open] {
    font-size: 1rem;
    border-style: solid;
	border-width: 0.1em;
	border-color: #B0DFD7;
}*/

details > summary {
  
  padding-top: 0.5rem;
  padding-bottom: 0rem;
  cursor: pointer;
}

details > p {
  padding-left: 0.75rem;
  padding-right: 2rem;

}


blockquote {
  display: block;
 
  width:100%;
  font-style:italic;
  padding:0.75em 10px 1em 20px;
  border-left: 2px solid #F89726;
  margin: 0 0 1rem;
  margin-bottom: 0.5rem;
  line-height:1.0;
  position: relative;
}

blockquote p::before {
  color:#F89726;
  font-size:3em;
  content: '\201C';
}

blockquote > :last-child {
  margin-bottom: 0;
}

blockquote-footer {
  margin-top: .1rem;
  margin-bottom: .5rem;
  font-size: 1em;
  color: #3D5160;
}
blockquote-footer::before {
  content: " ";
}

/*

.blockquote p::after {
  color:#F89726;
  font-size:1em;
  content: '\201D';
}
*/