:root {
  --cassiopeia-color-primary: #112855; 
  --cassiopeia-color-link: #224faa;
  --link-color: #224faa;
  --cassiopeia-color-hover: #364048;
  --link-hover-color: #364048;
  --text-decoration: none;
  }


/* Header der Seite */

.container-header {
background-color: #364048;
background-image: url(/images/headers/mj_header_ext.png);
background-position: right 20px top 20px;
background-repeat: no-repeat;
}

/* Body */

.body {
background-color: #FFFFFF;
background-image: none;
}

/* Footer der Seite */

.container-footer {
background-color: #364048;
background-image: none;
}

/* Blog Stil*/

.boxed .blog-item {
box-shadow: 0 0 15px #3339421a, 0 2px 10px #33394214, 0 2px 10px #33394214, inset 0 1.0px 0 var(--cassiopeia-color-primary);
background-color: #FFFFFF;
}

/* Weblinkliste*/ 
.list-group-item {
box-shadow: 0 0 5px #3339421a, 0 2px 5px #33394214, 0 2px 5px #33394214, inset 0 0.25px 0 var(--cassiopeia-color-primary);
background-color: #FFFFFF;
}

/* Weblink Kategorien 
.com-content-categories__item {
box-shadow: 0 0 5px #3339421a, 0 2px 5px #33394214, 0 2px 5px #33394214, inset 0 0.25px 0 var(--cassiopeia-color-primary);
background-color: #FFFFFF;
margin-top: 10px; 
margin-bottom: 15px; 
padding-right: 10px; 
padding-left: 10px; 
}*/

/* Navigationsmeü*/
.mod-menu.mod-list {
font-color: #CA2929 ;   /*Farbe*/
/* font-weight: bold; /*Fett*/ 
font-style: italic; /*Style*/
}

.mod-menu.mod-list a:hover {
/* text-transform: none;*/
font-weight: bold;
text-decoration: none;
}

a:active {
font-weight: bold;
text-decoration: bold;
}


/* Liste von Beiträgen in Kategorien */
.com-content-category {
/*  display: flex; 
  gap: 3rem; */
}

/* Details in Beiträgen nebeneinander mit Abstand */
.article-info {
  display: flex;
  gap: 1rem;
}



/*MODULE ALLGEMEIN*/
.card {
box-shadow: 2px 4px 12px 0px rgba(0,0,0,0.35);
-webkit-box-shadow: 2px 4px 12px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 2px 4px 12px 0px rgba(0,0,0,0.35);

  --card-spacer-y: 1rem;
  --card-spacer-x: 1rem;
  --card-title-spacer-y: .5rem;
  --card-title-color: ;
  --card-subtitle-color: ;
  --card-border-width: var(--border-width);
  --card-border-color: #dfe3e7;
  --card-border-radius: var(--border-radius);
  --card-box-shadow: ;
  --card-inner-border-radius: calc(var(--border-radius)  - (var(--border-width)));
  --card-cap-padding-y: .5rem;
  --card-cap-padding-x: 1rem;
  --card-cap-bg: rgba(var(--body-color-rgb), .03);
  --card-cap-color: ;
  --card-height: ;
  --card-color: ;
  --card-bg: var(--body-bg);
  --card-img-overlay-padding: 1rem;
  --card-group-margin: .5em;
  height: var(--card-height);
  color: var(--body-color);
  word-wrap: break-word;
  background-color: var(--card-bg);
  border: var(--card-border-width) solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  background-clip: border-box;
  flex-direction: column;
  min-width: 0;
  display: flex;
  position: relative;
}


h1 {
font-size: calc(1.70rem);
text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
}
h2 {
font-size: calc(1.60rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
}
h3 {
font-size: calc(1.50rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
}
h4 {
font-size: calc(1.40rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
}
h5 {
font-size: calc(1.30rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
}
h6 {
font-size: calc(1.10rem);
font-color: #364048;
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
}

.bildlinks {
float: left;
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-right: 30px; 
margin-bottom: 30px; 
margin-left: 5px; 
box-shadow: 5px 10px 8px silver;
border-radius: 15px;
}

.bildlinks2 {
float: none;
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-right: 30px; 
margin-bottom: 30px; 
margin-left: 5px; 
box-shadow: 5px 10px 8px silver;
border-radius: 15px;
}

.bildrechts {
float: right;
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-right: 5px; 
margin-bottom: 30px; 
margin-left: 30px;
box-shadow: 10px 20px 15px silver;
border-radius: 20px;
}

.bildcenter {
display: block;
margin: auto;
border-width: 0px; 
border-style: none; 
margin-top: 2px; 
margin-bottom: 30px; 
box-shadow: 10px 20px 15px silver;
border-radius: 20px;
}

.bildrundlinks {
float: left;
clip-path: circle(30%);
border-width: 0px; 
border-style: none; 
margin-top: 2px; 
margin-right: 15px; 
margin-bottom: 5px; 
margin-left: 2px; 
}

.bildrundrechts {
position: right;
float: right;
clip-path: circle(30%);
border-width: 0px; 
border-style: none; 
margin-top: 2px; 
margin-right: 5px; 
margin-bottom: 5px; 
margin-left: 5px; 
}

.bildlaufrundlinks {
float: left;
clip-path: circle(50%);
border-width: 0px; 
border-style: none; 
margin-top: 2px; 
margin-right: 35px; 
margin-bottom: 5px; 
margin-left: 2px; 
}

.bildlaufrundrechts {
float: right;
clip-path: circle(50%);
border-width: 0px; 
border-style: none; 
margin-top: 2px; 
margin-right: 5px; 
margin-bottom: 5px; 
margin-left: 35px; 
}

.bildeckiglinks {
float: left;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-right: 40px; 
margin-bottom: 5px; 
margin-left: 5px;
}

.bildeckigrechts {
float: right;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-right: 5px; 
margin-bottom: 5px; 
margin-left: 40px; 
}

.bildeckigcenter {
display: block;
margin: auto;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-bottom: 5px; 
}

/*
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path()
  */

/* Zitatebene */
blockquote p {
box-sizing: content-box;
width: 85%;
margin: auto;
margin-bottom: 25px; 
padding: 10px;
border-radius : 20px;
background-color: #F4F6F1;
box-shadow: 5px 10px 8px silver;
border-radius: 5px;
}

/* Zitatebene */
pre {
box-sizing: content-box;
width: 85%;
margin: auto;
margin-bottom: 25px; 
padding: 5px;
background-color: #E0E6E7;
border: 1px solid #0069D1;
box-shadow: 5px 10px 8px silver;
border-radius: 5px;
}