/* =================================================
   Fonts
================================================= */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Merriweather:wght@700&display=swap");

/* =================================================
   Farbvariablen (einfach anpassbar)
================================================= */
:root{
  --brand-blue: #376f9e;     /* Menüleiste */
  --brand-blue-dark: #003366;/* Dropdown-Linkfarbe */
  --brand-orange: #ff6600;   /* Hover/Aktiv */
}

/* =================================================
   Global
================================================= */
body{
  font-family:"Open Sans", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  color:#000;
  background:#fff;
}

h1,h2,h3,h4,h5,h6{
  font-family:"Merriweather", serif;
  color: var(--brand-blue);
  margin: 1.2em 0 0.5em;
}

a{ color:#0066cc; text-decoration:none; }
a:hover{ color:#004499; text-decoration:underline; }

/* =================================================
   Header (Logo links, Text rechts)
================================================= */
.container-header{
  background:#fff !important;
}

/* Logo+Text nebeneinander */
.container-header .navbar-brand{
  display:flex;
  align-items:center;
  gap:16px;
  background:transparent !important; /* wichtig für mobile (kein Farbblock) */
}

.container-header .navbar-brand img{
  max-height:80px;
  height:auto;
  width:auto;
}

.container-header .site-description{
  color: var(--brand-blue) !important;
  font-weight:700;
}

/* =================================================
   Menü-Bereich allgemein (dein Menü steckt in .container-nav)
================================================= */
.container-header .container-nav{
  /* auf Mobile bleibt dieser Container weiß,
     auf Desktop wird die navbar selbst blau eingefärbt (siehe Media Query) */
}

/* =================================================
   Desktop Menü: blau, kompakt
================================================= */
@media (min-width: 992px){

  /* Nur die Menüzeile blau */
  .container-header .container-nav .navbar{
    background: var(--brand-blue) !important;
  }

  /* MetisMenu Links kompakt */
  .container-header .container-nav ul.metismenu > li.metismenu-item > a{
    color:#fff !important;
    font-weight:600;
    font-size:0.92rem;
    line-height:1.2;
    padding:0.35rem 0.70rem;
    background:transparent !important;
    text-decoration:none;
    display:block;
  }

  .container-header .container-nav ul.metismenu > li.metismenu-item > a:hover,
  .container-header .container-nav ul.metismenu > li.metismenu-item.active > a,
  .container-header .container-nav ul.metismenu > li.metismenu-item.current > a{
    color: var(--brand-orange) !important;
  }

  /* Toggle-Buttons (mm-toggler) in Desktop-Leiste ohne eigene Hintergründe */
  .container-header .container-nav .mm-toggler{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* =================================================
   Dropdowns / Submenus (MetisMenu)
   (Hintergrund weiß, Links dunkelblau, Hover orange)
================================================= */
.container-header .container-nav ul.metismenu .mm-collapse{
  background:#fff !important;
  border:1px solid #ddd;
}

.container-header .container-nav ul.metismenu .mm-collapse a{
  color: var(--brand-blue-dark) !important;
  font-weight:500;
  font-size:0.92rem;
  padding:0.45rem 0.85rem;
  display:block;
  text-decoration:none;
}

.container-header .container-nav ul.metismenu .mm-collapse a:hover{
  background:#f5f5f5 !important;
  color: var(--brand-orange) !important;
}

/* =================================================
   Mobile Menü:
   - Topbar (Hamburger-Zeile) weiß
   - aufgeklapptes Menü blau
   - Hamburger sichtbar und ohne blaues Rechteck
================================================= */
@media (max-width: 991px){

  /* Obere Leiste (nur Header/Hamburger-Zeile) weiß */
  .container-header .container-nav .navbar{
    background:#fff !important;
  }

  /* Aufgeklappter Bereich blau */
  .container-header .container-nav .navbar-collapse{
    background: var(--brand-blue) !important;
    padding:0.25rem 0;
  }

  /* Links im aufgeklappten Menü */
  .container-header .container-nav .navbar-collapse ul.metismenu > li > a{
    color:#fff !important;
    font-weight:600;
    font-size:0.95rem;
    padding:0.45rem 0.85rem;
    line-height:1.2;
  }

  .container-header .container-nav .navbar-collapse ul.metismenu > li > a:hover{
    color: var(--brand-orange) !important;
    background:transparent !important;
  }

  /* Hamburger Button: transparent, kein Hintergrund */
  .container-header .container-nav .navbar-toggler{
    background:transparent !important;
    background-color:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0.25rem 0.5rem;
  }

  /* Dein Icon ist <span class="icon-menu"> … </span>
     -> Hintergrund transparent, Icon sichtbar (schwarz) */
  .container-header .container-nav .navbar-toggler .icon-menu{
    background:transparent !important;
    color:#000 !important;
  }

  /* Falls icon-menu über Pseudoelemente Linien zeichnet */
  .container-header .container-nav .navbar-toggler .icon-menu::before,
  .container-header .container-nav .navbar-toggler .icon-menu::after{
    background:transparent !important;
    color:#000 !important;
  }

  /* Metis toggler Buttons im Mobile-Menü ohne Hintergrund */
  .container-header .container-nav .mm-toggler{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* =================================================
   Buttons (aber NICHT Navbar-Toggler und NICHT mm-toggler)
   -> verhindert das blaue Rechteck hinter dem Hamburger!
================================================= */
.btn,
button:not(.navbar-toggler):not(.mm-toggler),
input[type="submit"]{
  font-family:"Open Sans", Arial, sans-serif;
  font-weight:600;
  font-size:1em;
  color:#fff;
  background:#0066cc;
  border:none;
  padding:0.65em 1.2em;
  cursor:pointer;
}

.btn:hover,
button:not(.navbar-toggler):not(.mm-toggler):hover,
input[type="submit"]:hover{
  background:#004499;
}

/* =================================================
   Tabellen (neutral)
================================================= */
table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:1em;
}
table th, table td{
  border:1px solid #ddd;
  padding:0.75em;
}
table th{
  background:#f5f5f5;
  color: var(--brand-blue-dark);
}

/* =================================================
   Footer / Untere Bereiche (falls gewünscht weiterhin blau)
   (Optional: entfernen, wenn du unten wieder hell willst)
================================================= */
.container-below-top,
.container-footer,
.site-footer{
  background-color: var(--brand-blue) !important;
}

.container-below-top *,
.container-footer *,
.site-footer *{
  color:#fff !important;
}

.container-below-top a,
.container-footer a,
.site-footer a{
  color:#fff !important;
  text-decoration: underline;
}
.container-below-top a:hover,
.container-footer a:hover,
.site-footer a:hover{
  color:#e0e0e0 !important;
}/* =================================================
   Menü-Schriftgrößen & Abstände kleiner (wie Ur-Version)
================================================= */

/* Desktop Menü: kleiner + kompakter */
@media (min-width: 992px){
  .container-header .container-nav ul.metismenu > li.metismenu-item > a{
    font-size: 0.78rem !important;   /* vorher 0.92rem */
    padding: 0.22rem 0.55rem !important;
    line-height: 1.15 !important;
  }
}

/* Dropdown/Submenu: kleiner */
.container-header .container-nav ul.metismenu .mm-collapse a{
  font-size: 0.78rem !important;     /* vorher 0.92rem */
  padding: 0.30rem 0.65rem !important;
  line-height: 1.2 !important;
}

/* Mobile Menü: kleiner + kompakter */
@media (max-width: 991px){
  .container-header .container-nav .navbar-collapse ul.metismenu > li > a{
    font-size: 0.82rem !important;   /* vorher 0.95rem */
    padding: 0.30rem 0.70rem !important;
    line-height: 1.15 !important;
  }
}
/* Slideshow links bündig zum Menü-Hintergrund ausrichten */
.slideshow,
.slider,
.flexslider,
.nivoSlider,
.camera_wrap,
.dj-slideshow,
.bannerslider {
    margin-left: 32px;
}