/* ALLGEMEINES */

body {
    background: #fea041; /* orange */
}
.grid-child.container-component
{
    background: #ffffff; 
    margin-top: 0;
}

/* unter dem Video (nur Startseite) kein Abstand! */
body.itemid-101 .container-banner {
  margin-bottom: -2rem; /* beobachten, ob das eh keine Probleme macht! */
}

/* Überschriften */

h1, h2, h3, h4, h5, h6 {
  color: #93040c; /* dunkelrot */
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #93040c; /* dunkelrot */
}

.com-content-article a {
  color: #93040c;
}

.com-content-article a:hover {
  color: #c2181d; /* etwas heller beim Hover */
}

/* Inhaltsbereich begrenzen */
.grid-child.container-component {
  display: block;
  max-width: 1060px; /* oder deine gewünschte Breite */
  width: 100%;
  margin-left: 0;         /* linksbündig */
  margin-right: auto;     /* rechts flexibel */
  padding-left: 15px;
  padding-right: 15px;
}

/* HEADER */

.header {
    background: #93040c; /* dunkelrot */
    /*background: #fea041; /* orange */
}

/* innerhalb von Header (Inhaltsbereich) - derzeit nicht benötigt
.container-header {
  background-color: #93040c; 
  background-image: none;
} */


/* MENU */
/* Dropdown Menu */
.metismenu.mod-menu .mm-collapse {
  background: #93040c; /* dunkelrot */
}
/* Schriftfarbe für Hauptmenü-Links (Ebene 1) */
.metismenu.mod-menu > .metismenu-item > a {
  color: #fea041; /* orange */
}

/* Hover-Farbe für Hauptmenü-Links (Ebene 1) */
.metismenu.mod-menu > .metismenu-item > a:hover {
  color: #ffd966; /* gelb */
  /* background-color: #c2181d; /* etwas heller nicht schön - müsste für ganzen Bereich sein */
}

/* Schriftfarbe für Untermenü-Links (ab Ebene 2) */
.metismenu.mod-menu .mm-collapse .metismenu-item a {
  color: #fea041; /* orange */
}

/* Hover-Farbe für Untermenü-Links (ab Ebene 2) */
.metismenu.mod-menu .mm-collapse .metismenu-item a:hover {
  color: #ffd966; /* gelb */
  /* background-color: #c2181d; /* etwas heller */
}

/* Farbe kleiner Button im Menü */
.metismenu.mod-menu > .metismenu-item > .mm-toggler-link {
  color: #fea041; /* orange */ 
}

/* Hover-Farbe kleiner Button im Menü */
.metismenu.mod-menu > .metismenu-item > .mm-toggler-link:hover {
  color: #ffd966; /* gelb */
  /* background-color: #c2181d; /* etwas heller */
}

/* Hamburger Menü */
/* Basisstil für den Menü-Button */
button.navbar-toggler.navbar-toggler-right {
  color: #fea041; 
  background-color: transparent;
  border: 1px solid #fea041;
}

/* Hover- und Focus-Zustände */
button.navbar-toggler.navbar-toggler-right:hover,
button.navbar-toggler.navbar-toggler-right:focus {
  background-color: #fea041;
  color: #93040c;
  border-color: #fea041;
}

.schild {
  background-color: #fea041; /* orange */
  color: #93040c; /* dunkelrot */
  border: 2px solid #93040c; /* dunkelrot */  
  border-radius: 8px; /* leicht abgerundete Ecken */
  padding: 1rem;                   
  margin: 1rem 0;                  
  font-weight: bold;             
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2); /* dezenter Schatten */
}

/* FOOTER */

.footer, .container-footer {
  background: #93040c; /* dunkelrot */
  /*background: #fea041; /* orange */
  margin-top: 0;
}
/* Schriftfarbe Footer-Menü Links */
footer.container-footer .mod-menu.nav li.nav-item a {
  color: #fea041; /* orange */
}
/* Hover-Farbe für Footer-Menü Links */
footer.container-footer .mod-menu.nav li.nav-item a:hover {
  color: #ffd966; /* gelb */
}

/* Back-Top Button */
/* Standard-Stil */
#back-top,
.back-to-top-link {
  color: #fea041; /* orange */
  background-color: #93040c; /* dunkelrot */
  font-size: 1.5rem;
  padding: 0.5em;
  border-radius: 6px;
  border-color: #fea041; /* orange */
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover-Zustand */
#back-top:hover,
.back-to-top-link:hover {
  color: #ffd966; /* gelb */
  background-color: #c2181d; /* etwas heller */
}