/* Verhindert, dass Browser automatisch ein Dark Theme erzwingen */
@media (prefers-color-scheme: dark) {
  html, body {
    background: #ffffff !important;
    color-scheme: light !important;
  }
}

/* ==========================================================
   HEADER & FOOTER
   ========================================================== */

/* ----- Cassiopeia Header einfarbig (#1B263B) ----- */
.container-header {
  background-image: none !important;
  background-color: #122855 !important;
}

/* ----- Cassiopeia Footer einfarbig (#1B263B) ----- */
.container-footer,
.footer {
  background-image: none !important;
  background-color: #12855 !important;
}

/* ==========================================================
   HAMBURGER-MENÜ (MOBIL)
   ========================================================== */
@media (max-width: 768px) {
  /* Button selbst */
  .container-header .navbar-toggler {
    padding: 0.6rem 0.9rem !important;
    font-size: 1.25rem !important;
    margin-right: 0.4rem;
  }

  /* Hamburger-Icon */
  .container-header .navbar-toggler .icon {
    width: 2.2rem !important;
    height: 2.2rem !important;
  }
}

/* ==========================================================
   MOBILES MENÜ (Cassiopeia / MetisMenu)
   ========================================================== */
@media (max-width: 991.98px) {

  /* Menücontainer */
  .navbar-collapse.show {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100vw;
    margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem));
    background-color: #122855; /* einheitliche Farbe */
    z-index: 2000;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); */ /* optional */
  }

  /* Menüeinträge (alle klickbar, Trennlinie, Schrift etc.) */
  .metismenu.mod-menu .metismenu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .metismenu.mod-menu .metismenu-item > a {
    display: block;
    width: 100%;
    padding: .5rem 1rem;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
    text-decoration: none;
  }

  /* Hover / Active */
  .metismenu.mod-menu .metismenu-item > a:hover,
  .metismenu.mod-menu .metismenu-item.active > a {
    background-color: rgba(255, 255, 255, 0.08);
    color: #EFAC23;
  }

  /* Parent-Menüpunkte (z. B. "Services") */
  .metismenu.mod-menu .metismenu-item > .mod-menu__heading.nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .5rem 1rem;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.5;
    background: transparent;
    text-align: left;
    cursor: pointer;
  }

  .metismenu.mod-menu .metismenu-item > .mod-menu__heading.nav-header:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Pfeil-Icon optisch anpassen */
  .metismenu.mod-menu .metismenu-item > .mod-menu__heading.nav-header::after {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    transform: translateY(1px);
  }

  /* Untermenü (Hintergrund & Layout) */
  .metismenu.mod-menu .mm-collapse {
    position: relative;
    left: 0;
    right: 0;
    width: 100vw; /* volle Breite */
    background-color: #122855;
    /* margin-left: calc(-1 * var(--bs-gutter-x, 0.75rem)); */
  }

  /* Alternative geöffnete Variante (heller) */
  .metismenu.mod-menu .mm-collapse.mm-show {
    background-color: #122855;
  }

  /* Links im Untermenü */
  .metismenu.mod-menu .mm-collapse a {
    display: block;
    width: 100%;
    color: #fff;
    padding: 0.5rem 1rem 0.5rem 2rem; /* Einzug links */
    text-decoration: none;
  }

  .metismenu.mod-menu .mm-collapse a:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}
@media (max-width: 991.98px) {
  /* ----- Textdekoration im mobilen Menü deaktivieren ----- */

  /* Hauptmenü-Links */
  .metismenu.mod-menu .metismenu-item > a,
  .metismenu.mod-menu .metismenu-item > a:hover,
  .metismenu.mod-menu .metismenu-item > a:focus,
  .metismenu.mod-menu .metismenu-item > a:active {
    text-decoration: none !important;
  }

  /* Parent-Menüpunkte (z. B. "Services") */
  .metismenu.mod-menu .metismenu-item > .mod-menu__heading.nav-header,
  .metismenu.mod-menu .metismenu-item > .mod-menu__heading.nav-header:hover,
  .metismenu.mod-menu .metismenu-item > .mod-menu__heading.nav-header:focus {
    text-decoration: none !important;
  }

  /* Untermenü-Links */
  .metismenu.mod-menu .mm-collapse a,
  .metismenu.mod-menu .mm-collapse a:hover,
  .metismenu.mod-menu .mm-collapse a:focus,
  .metismenu.mod-menu .mm-collapse a:active {
    text-decoration: none !important;
  }
}

/* ==========================================================
   LOGO-AUSRICHTUNG (MOBIL)
   ========================================================== */
@media (max-width: 768px) {
  /* Logo mittig */
  .container-header .navbar-brand {
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Logo-Bild perfekt zentrieren */
  .container-header .navbar-brand img {
    display: inline-block;
    vertical-align: middle;
  }

  /* Header kompakter */
  .container-header,
  .navbar {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================
   BANNER, TYPOGRAFIE & LINKS
   ========================================================== */

/* Smaller banner */
.container-banner .banner-overlay {
  height: 58vh;
}

/* Weiches Scrollen */
html {
  scroll-behavior: smooth;
}

/* Alle Links ohne Unterstreichung */
a {
  text-decoration: none;
}

/* Artikelüberschriften */
.com-content-article h1,
.com-content-article .h1 {
  font-size: 1.8rem;
}

.com-content-article h2,
.com-content-article .h2 {
  font-size: 1.5rem;
}

.com-content-article h3,
.com-content-article .h3 {
  font-size: 1.2rem;
}

.com-content-article h4,
.com-content-article .h4 {
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.1rem; }
  h4 { font-size: 1.0rem; }
}

/* ==========================================================
   MODULE / BOXEN
   ========================================================== */
.login {
  color: #1B263B;
  padding: 1em;
  border-radius: 10px;
  background-color: #EDEDE9;
}
.allert {
  color: #1B263B;
  padding: 1em;
  border-radius: 10px;
  background-color: #F5EBE0;
}
/* ==== Sidebar Service Menu ==== */
.service_menu {
  color: #1B263B;
  padding: 1em;
  border-radius: 10px;
  background-color: #EDEDE9;
}
/* Modul-Titel (z. B. h3) – gleiches Padding wie Menülinks */
.service_menu h3 {
  padding: 0.6rem 0.5rem;
  margin: 0 0 0.4rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #1B263B;
  border-bottom: 1px solid rgba(27, 38, 59, 0.2);
}

/* Menü-Liste zurücksetzen und sauber strukturieren */
.service_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Einzelne Menüeinträge */
.service_menu li {
  border-bottom: 1px solid rgba(27, 38, 59, 0.2); /* dezente Linie */
}

/* Links im Menü */
.service_menu a {
  display: block;
  padding: 0.6rem 0.5rem;
  color: #1B263B;
  font-size: 1.05rem;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover- oder aktiver Zustand */
.service_menu a:hover,
.service_menu a:focus,
.service_menu li.current > a {
  background-color: rgba(27, 38, 59, 0.08);
  /*color: #EFAC23;*/ /* dein Orange-Ton */
  text-decoration: none !important;
}

/* Optional: letzter Eintrag ohne Border */
.service_menu li:last-child {
  border-bottom: none;
}

/* ===== Kontakt-Button in Sidebar ===== */
.contact_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* Abstand zwischen Icon und Text */
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: #122855;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none !important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
}

/* Optional: leichtes "Press"-Feedback beim Hover */
/*.contact_button:hover {
  transform: scale(1.02);
}*/

/* Das kleine Icon im Button */
.contact_button .contact_icon {
  width: 25px;
  height: 25px;
  display: inline-block;
}
/* ==========================================================
   FOOTER STYLING
   ========================================================== */
.c-footer {
  color: #fff;
  padding: 48px 20px 24px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.c-footer__wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 28px;
}

.c-footer__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: #fff;
}

.c-footer__col p,
.c-footer__addr {
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: .98rem;
  color: #fff;
}

.c-footer__addr { font-style: normal; }

.c-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-footer__list li + li {
  margin-top: 8px;
}

.c-footer ul,
.c-footer ul li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* Links */
.c-footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.c-footer a:hover,
.c-footer a:focus {
  color: #4da6ff; /* Hellblau Hover */
  outline: none;
}

/* Unterer Bereich */
.c-footer__bottom {
  max-width: 1200px;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.3);
  text-align: center;
  font-size: .92rem;
  color: #fff;
}

/* Responsive Footer */
@media (max-width: 900px) {
  .c-footer__wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .c-footer__wrap { grid-template-columns: 1fr; text-align: center; }
  .c-footer__bottom { font-size: .9rem; }
}