:root {
--cassiopeia-color-primary: #364048; 
--cassiopeia-color-hover: #364048;
--text-decoration: none;
}

a:link {
  color: #3640A8; 
  text-decoration: none;
}

/* Header der Seite */

.container-header {
background-color: #364048;
border-bottom: 5px solid #CED7E1;
}

.container-banner {
background-color: #364048;
/* Zwischenraum Banner Position zum Rest der Seite */
margin: 0;
display: block;
}

/* Menübezeichnung */ 

.mymenuetitle {
font-size: calc(1.20rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
color: #364048;
}

/* Body */

body {
background-color: #FFFFFF;
}

/* Footer der Seite */

.container-footer {
background-color: #364048;
border-top: 5px solid #CED7E1;
}

/* Navigationsmeü*/

.mod-menu.mod-list {
font-style: italic;
text-decoration: none !important;
}

.mod-menu.mod-list a:hover a:active {
font-style: italic;
font-weight: bold !important;
text-decoration: none;
}

/* Menüdropdown Zeile für Zeile */

.metismenu-item {
display: block !important;
margin: 0px;
color: #3640A8;
}

/* Broadcrumps */

.mod-breadcrumbs__wrapper {
border: 1px solid #3640A8;
}

/* Blog Stil */

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

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


/* Details in Beiträgen nebeneinander mit Abstand

.article-info {
display: flex;
gap: 1rem;
font-size: 13px;
} */

/* Autor und Datum in der Blog/Listen-Übersicht ausblenden */
.com-content-category-blog__item .article-info, 
.com-content-featured__item .article-info {
display: none;
}

/* Autor und Datum in der Einzelansicht explizit anzeigen */
.com-content-article .article-info {
display: flex !important;
flex-direction: row;
gap: 0.25rem;
}

/* (Über)Schriften */

h1 {
font-size: calc(1.60rem);
text-shadow: 2px 2px 8px rgba(150, 150, 150, 1);
}

h2 {
font-size: calc(1.50rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
margin-top: 5px;
margin-bottom: 20px;
}

h3 {
font-size: calc(1.40rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
margin-top: 5px;
margin-bottom: 20px;
}

h4 {
font-size: calc(1.30rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
margin-top: 5px;
margin-bottom: 20px;
}

h5 {
font-size: calc(1.20rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
margin-top: 5px;
margin-bottom: 20px;
}

h6 {
font-size: calc(1.10rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
margin-top: 5px;
margin-bottom: 20px;
}

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

/* Vorformatiert */

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

/* Code-Zeilen Container */

code {
font-family: courier new,courier,gorgia,terminal;
color: #E3989D;
box-sizing: content-box;
width: 85%;
margin-top: 5px;
margin-bottom: 25px; 
padding: 5px;
background-color: #19134C;
border: 1px solid #0069D1;
box-shadow: 5px 10px 8px silver;
border-radius: 5px;
}

.t1 {
font-size: calc(1.00rem);
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
color: #364048;
margin-top: 10px;
margin-bottom: 20px;
}

.t2 {
font-size: calc(1.20rem);
font-weight: bold;
text-shadow: 2px 2px 3px rgba(150, 150, 150, 1);
color: #364048;
margin-top: 10px;
margin-bottom: 20px;
}

/* BILDER */

.bildlinks {
float: left;
border-width: 0px; 
border-style: none; 
margin-top: 5px; 
margin-right: 30px; 
margin-bottom: 5px; 
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 {
float: right;
clip-path: circle(30%);
border-width: 0px; 
border-style: none; 
margin-top: 2px; 
margin-right: 5px; 
margin-bottom: 5px; 
margin-left: 5px; 
}

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

.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; 
}


/* Eigene DIV Container */

.diva {
box-sizing: border-box;
width: 85%;
background-color: #ECECEC;
border: 1px inset #0069D1;
box-shadow: 5px 10px 8px silver;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px;
}

.divaa {
box-sizing: border-box;
width: 85%;
background-color: #ECECEC;
border: 1px solid #0069D1;
box-shadow: 5px 10px 8px silver;
border-radius: 15px;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px;
}

.divb {
box-sizing: border-box;
width: 85%;
background-color: #D5E8F7;
border: 1px inset #0069D1;
box-shadow: 5px 10px 8px silver;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px;
}

.divbb {
box-sizing: border-box;
width: 85%;
background-color: #D5E8F7;
border: 1px solid #0069D1;
border-radius: 15px;
box-shadow: 5px 10px 8px silver;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px;
}

.divc {
box-sizing: border-box;
width: 85%;
background-color: #DBE2F5;
border: 1px inset #0069D1;
box-shadow: 5px 10px 8px silver;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px; 
}

.divcc {
box-sizing: border-box;
width: 85%;
background-color: #DBE2F5;
border: 1px solid #0069D1;
box-shadow: 5px 10px 8px silver;
border-radius: 15px;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px; 
}

.divd {
box-sizing: border-box;
width: 85%;
background-color: #DBD5F5;
border: 1px inset #0069D1;
box-shadow: 5px 10px 8px silver;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px; 
}

.divdd {
box-sizing: border-box;
width: 85%;
background-color: #DBD5F5;
border: 1px solid #0069D1;
box-shadow: 5px 10px 8px silver;
border-radius: 15px;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px; 
}

.dive {
box-sizing: border-box;
width: 85%;
background-color: #EDF1DE;
border: 1px inset #0069D1;
box-shadow: 5px 10px 8px silver;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px; 
}

.divee {
box-sizing: border-box;
width: 85%;
background-color: #EDF1DE;
border: 1px solid #0069D1;
box-shadow: 5px 10px 8px silver;
border-radius: 15px;
padding: 15px;
margin-left: 25px;
margin-bottom: 25px;
margin-top: 5px; 
}

.divbg1 {
width: 100%;
height: fit-content;
background-color: #EEEEEE;
padding: 1px 1px 1px 1px;
}

.divbg2 {
width: 100%;
height: fit-content;
background-color: #DFE8FE;
padding: 1px 1px 1px 1px;
}

.divbg3 {
width: 100%;
height: fit-content;
background-color: #CCF6FF;
padding: 1px 1px 1px 1px;
}