@font-face{
  font-family: "Bembo-SemiboldItalic"; 
src: url("../Fonts/Bembo-SemiboldItalic.otf");
}
@font-face{ 
font-family: "Sansation-Regular.ttf"; 
src: url("../Fonts/Sansation-Regular.ttf");  
}
@font-face{ 
font-family: "Sansation-Bold.ttf"; 
src: url("../Fonts/Sansation-Bold.ttf");    
]  
  
  
}

body {font-family: "Sansation-Bold.ttf"; 

}

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

.header {
	background: rgb(255,255,255);
}

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

.modul-schatten {
	        box-shadow: 8px 4px 8px 0px rgba(0,0,0,0.25);
	-webkit-box-shadow: 8px 4px 8px 0px rgba(0,0,0,0.25);
	   -moz-box-shadow: 8px 4px 8px 0px rgba(0,0,0,0.25);
}

.modul-kein-rand {
--card-border-color: #ffffff;	
}



.footer {
  background: #dcdcdc;
  color: #222222;
}

.nav-item {
  padding-left: 10px;
  border-top: 3px solid rgb(197, 19, 26);     /* Button Rand oben*/
  border-bottom: 3px solid rgb(196, 19, 26);  /* Button Unten oben */
  border-left: 3px solid rgb(197, 19, 26);    /* Button Links oben */
  border-right: 3px solid rgb(196, 19, 26);   /* Button Rechts oben */
  border-radius:6px 10px;

  /* Schatten der Buttons */
  box-shadow:         2px 2px 4px 0px rgba(0,0,0,0.8);
  -webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.8);
  -moz-box-shadow:    2px 2px 4px 0px rgba(0,0,0,0.8);
 
  margin-left: 0px;
  margin-bottom: 15px;

  /* Schatten der Buttons */
  font-size: 20px;     /* Text Größe             ohne Hover */
  color: #eeeeee;      /* Text Farbe             ohne Hover */
  background: #c91519; /* Text Farbe Hintergrund ohne Hover */
  text-align: center;  /* Text Ausrichtung       ohne Hover */  
}

.nav-item a:active:hover{
  background: #c12345;
  border-top: 3px solid rgb(197, 29, 36);
  border-bottom: 3px solid rgb(196, 29, 36);
  border-radius:10px 6px;
}

.nav-item li:hover{
  background: #c12345;
  border-top: 3px solid rgb(197, 29, 36);
  border-bottom: 3px solid rgb(196, 29, 36);
  border-radius:10px 6px;
}


@media (min-width: 1220px) {
.nav-item {
  width: 13.5%;
  font-size: 20px;     /* Text Größe             ohne Hover */
  }
}

@media (min-width: 1135px) and ( max-width: 1219px){
.nav-item {
  width: 13.5%;
  font-size: 18px;     /* Text Größe             ohne Hover */
  }
}

@media (min-width: 992px) and (max-width: 1134px) {
.nav-item {
  width: 13.5%;
  font-size: 16px;     /* Text Größe             ohne Hover */
  }
}

@media (min-width: 992px) {
  .container-header .mod-menu > li + li {
    margin-left: 0.5em;
  }
}

@media (min-width: 992px) {
  .container-header .mod-menu > li::after {
    background: transparent;
	color: #fcdb00;      /* Text Farbe             ohne Hover */
    bottom: 0;
    content: "";
    display: block;
    height: 10%;
    margin: auto;
    opacity: .2;
    position: absolute;
    -webkit-transition: all .2s ease,background-color .2s ease;
    -o-transition: all .2s ease,background-color .2s ease;
    transition: all .2s ease,background-color .2s ease;

  }
}


.container-header .mod-list li a:hover {
  border-top: 3px solid rgb(190, 19, 26);     /* Button Rand oben*/
  border-bottom: 3px solid rgb(190, 19, 26);  /* Button Unten oben */
  border-left: 3px solid rgb(190, 19, 26);    /* Button Links oben */
  border-right: 3px solid rgb(190, 19, 26);   /* Button Rechts oben */
  border-radius:6px 10px;
  color: #fcdb00;      /* Text Farbe             ohne Hover */
  background: #c91519; /* Text Farbe Hintergrund ohne Hover */
}


.CS-Artikel { 
orphans:4; 
widows:4; 
text-align: justify; 
-webkit-hyphens:auto; 
-moz-hyphens:auto; 
-o-hyphens:auto; 
-ms-hyphens:auto; 
hyphens:auto;
font-size: 20pt; 
color: #111111; 
font-family: Bembo-SemiboldItalic;
}



@media (min-width: 450px) and (max-width: 991px) {
.CS-Artikel { 
orphans:4; 
widows:4; 
text-align: justify; 
-webkit-hyphens:auto; 
-moz-hyphens:auto; 
-o-hyphens:auto; 
-ms-hyphens:auto; 
hyphens:auto;
font-size: 16pt; 
color: #111111; 
font-family: Bembo-SemiboldItalic;
}
}

@media (min-width: 992px) {
.CS-Artikel { 
columns: 2; 
orphans:4; 
widows:4; 
text-align: justify; 
-webkit-hyphens:auto; 
-moz-hyphens:auto; 
-o-hyphens:auto; 
-ms-hyphens:auto; 
hyphens:auto;
font-size: 20pt; 
color: #111111; 
font-family: Bembo-SemiboldItalic;
}
}


.CS-Modul-Headline h3{ 
font-size: 14px; 
font-family: "Sansation-Regular.ttf";
color: #444444; 
text-align: center; 
letter-spacing: 0.08em;
background: #f2bf00;
}

@media (min-width: 450px) and (max-width: 991px) {
.CS-Modul-Headline h3{ 
font-size: 18px; 
 } 
}


@media (min-width: 992px) and (max-width: 1149px) {
.CS-Modul-Headline h3{ 
font-size: 17px; 
}
}

@media (min-width: 1150px) and ( max-width: 1269px){
.CS-Modul-Headline h3{ 
font-size: 20px; 
}
}

@media (min-width: 1270px){
.CS-Modul-Headline h3{ 
font-size: 22px; 
}
}

.CS-Startseite-Info { 
font-size: 28pt; 
color: #111111; 
font-family: Bembo-SemiboldItalic;
}