@font-face {
  font-family: 'ModerneFraktur';
  src: url('fonts/ModerneFraktur/moderne-fraktur.regular.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manufacturing_Consent';
  src: url('fonts/Manufacturing_Consent/ManufacturingConsent-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almendra';
  src: url('fonts/Almendra/Almendra-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almendra';
  src: url('fonts/Almendra/Almendra-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Almendra';
  src: url('fonts/Almendra/Almendra-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Almendra';
  src: url('fonts/Almendra/Almendra-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}



:root {
  /* 1. Main Body Text*/
  --cassiopeia-font-family-body: "Almendra", serif;
  
  /* 2. Main Headings (H1, H2, etc.): Almendra*/
  --cassiopeia-font-family-headings: "ModerneFraktur", serif;

  /* 3. Optional: Navigation/Interface elements*/
  --cassiopeia-font-family-interface: "ModerneFraktur", sans-serif;
  
--body-bg: #f4ebd8;
--card-bg: black;

  	
}

.btn {
	font-family: "ModerneFraktur";
	font-weight: 100;	
	font-size: 1.5em;
}

main, .container-main {
	box-shadow: none !important;
}

/* 4. Special Override: Using UnifrakturCook for Article Titles only */
h1 {
  font-family: "ModerneFraktur", serif;
  font-size: 3.0em; /* Fraktur usually needs to be larger to be readable */
  line-height: 1.2; 
}

h2 {
  font-family: "Manufacturing_Consent", serif;
  font-size: 3.0em; /* Fraktur usually needs to be larger to be readable */
  line-height: 1.2;
}

h3 {
  font-family: "ModerneFraktur", serif;
  font-size: 2em; /* Fraktur usually needs to be larger to be readable */
  line-height: 1.2;
}

h4 {
  font-family: "Manufacturing_Consent", serif;
  font-size: 2em; /* Fraktur usually needs to be larger to be readable */
  line-height: 1.2;
}

h5 {
  font-family: "Almendra", serif;
  font-size: 1.5em; /* Fraktur usually needs to be larger to be readable */
  line-height: 1.2;
  font-weight: 700;
}

h6 {
  font-family: "Almendra", serif;
  font-size: 1.5em; /* Fraktur usually needs to be larger to be readable */
  line-height: 1.2;
  font-weight: 400;
}

ul.mod-login__options, .mod-login__remember {
	display:none;
}
/* 1. Grundgerüst: Alles ist erst mal weiß/hell */


/* 2. Sidebars und Menü-Container schwarz einfärben */
/* In Cassiopeia sind das meist die Bereiche .sidebar-left und .sidebar-right */
.container-sidebar-left, 
.container-sidebar-right,
aside {
    background-color: #000000 !important;
    color: #ffffff !important; /* Text in den Sidebars muss weiß sein */
    padding: 20px;
}

/* 3. Menüs innerhalb der schwarzen Sidebars anpassen */
/* Damit die Links im dunklen Menü lesbar sind */
.container-sidebar-left a, 
.container-sidebar-right a {
    color: #e6d281 !important; /* Goldgelb für den mittelalterlichen Kontrast */
    text-decoration: none;
}

.container-sidebar-left a:hover, 
.container-sidebar-right a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* 4. Hauptinhalt (Main) bleibt hell */
main, 
.container-main {
    background-color: #fdfcf0; /* Dein Pergament-Ton */
    padding: 30px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1); /* Optional: leichter Innenschatten */
}

/* 5. Überschriften in den schwarzen Sidebars */
.container-sidebar-left h3, 
.container-sidebar-right h3,
.mod-menu .module-title {
    color: #ffffff !important;
    font-family: 'ModerneFraktur', serif;
    border-bottom: 1px solid #444;
    margin-bottom: 15px;
}

/*Menü Styling*/
ul.heimseite-menu li.nav-item {
	font-family: "ModerneFraktur", serif;
	font-weight: 100;
	font-size: 2.2em;
	color: wheat;
}

.card-body li.nav-item {
	font-family: "ModerneFraktur", serif;
}

.container-component > main {
    margin: 0; /* Or desired value */
}

.sidebar-left.card, .sidebar-right.card {
    border: 0;
	background-color: black;
}
.container-sidebar-left h3, .container-sidebar-right h3 {
	border: 0;
}

.site-grid {
    grid-gap: 0 0em;
}

.zutritt-wappen main, .zutritt-wappen .container-component {
    background-color: #7e7e7e;
}

.zutritt-start main {
    background-color: #c5c5c5;
}

/* Den Header auf die gleiche Breite wie die Site-Grid einschränken */
.header {
    max-width: var(--cassiopeia-grid-max-width, 1320px); /* Nutzt die Joomla-Variable */
    margin-left: auto;
    margin-right: auto;
}

/* Falls du ein flüssiges (fluid) Layout nutzt, nimm diese Regel: */
.wrapper-fluid .header {
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

/* Sicherstellen, dass die Nav-Container innerhalb des Headers nicht ausbrechen */
.container-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header {
    display: grid;
	padding: 0;
    /* Kopiert das Cassiopeia Spalten-Layout */
    grid-template-columns: 
        [full-start] minmax(0, 1fr) 
        [main-start] repeat(4, minmax(0, 19.875rem)) 
        [main-end] minmax(0, 1fr) [full-end];
    grid-gap: 0 0rem;  /* Der Standard-Spaltenabstand von Cassiopeia */
	background-color: black;
    /*width: 100%;*/
}

/* Inhalt innerhalb des Grids zentrieren */
.header > * {
    grid-column: main-start / main-end;
}

.header .grid-child {
    grid-column: main-start / main-end;
    /* Jetzt ist dein Menü exakt so breit wie die 4 Inhaltsspalten darunter */
	padding-left: 2em; /* Gleicht das Padding der Grid aus */
    padding-right: 1em;
}

.sidebar-left ul.mod-menu li.nav-item a {
    font-family: 'ModerneFraktur', serif;
    font-size: 1.5em;
}

.mod-list li a:hover {
    text-decoration: none;
	text-color: wheat;
}

.mod-list li.active>a {
    text-decoration: none;
	text-color: white;
}


ul.aktuell-menu li:first-child a {
    border: 3px solid #e6d281;
    display: inline-block;
    padding: 2px 7px 0 7px;
}