/* Hintergrundbild im Header */
.container-header {
  position: relative;
  background-image: url('/images/headers/header.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* optional: Header etwas höher machen */
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* optional: dunkle Überlagerung für bessere Lesbarkeit */
.container-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
}

/* ---------------------- Ende Hintergrundbild */

/* im folgenden wird die Textfarbe der Untermenues definiert */

/* Dropdown-Hintergrund und -Text (Desktop) */
.container-header .mod-menu .dropdown-menu,
.container-header .navbar .dropdown-menu {
  --bs-dropdown-bg: #fff;                /* Bootstrap-Variante */
  background-color: #fff !important;     /* Fallback/Hard */
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

.container-header .navbar .dropdown-menu .dropdown-item,
.container-header .mod-menu .dropdown-menu .dropdown-item {
  color: #111 !important;
}

.container-header .navbar .dropdown-menu .dropdown-item:hover,
.container-header .navbar .dropdown-menu .dropdown-item:focus,
.container-header .mod-menu .dropdown-menu .dropdown-item:hover,
.container-header .mod-menu .dropdown-menu .dropdown-item:focus {
  background-color: #f2f2f2 !important;
  color: #111 !important;
}

/* Der geöffnete Top-Level-Link (der Toggle) soll auch dunkel sein */
.container-header .navbar .nav-item.show > .nav-link,
.container-header .mod-menu .show > .nav-link {
  color: #111 !important;
}

/* Mobile Offcanvas-Menü */
.offcanvas .offcanvas-body { background: #fff !important; }
.offcanvas .mod-menu .nav-link,
.offcanvas .mod-menu .dropdown-item { color: #111 !important; }
.offcanvas .mod-menu .dropdown-item:hover { background: #f2f2f2 !important; }

/* ---------------------- Ende Hintergrundfarbe Menue */

/* im folgenden wird das Logo im Header verkleinert und unten links positioniert */


/* Eingebautes Logo weiterhin ausblenden */
.container-header .navbar-brand { 
  display: none !important; 
}

/* Nichts abschneiden */
.container-header,
.container-header .navbar { overflow: visible; }

/* Platz für das Logo über dem Menü */
.container-header .navbar {
  position: relative;
  padding-top: 120px;   /* 104px Logo-Höhe + ~16px Abstand zum Menü */
}

/* Logo als Pseudo-Element innerhalb der Navbar */
.container-header .navbar::before {
  content: "";
  position: absolute;
  left: 0;                 /* links bündig mit Menü (Startseite) */
  top: 8px;                /* Logo sitzt innerhalb der Navbar */
  bottom: auto !important; /* überschreibt frühere bottom:100%-Regel */
  width: 492px;            /* vorher ~410px → +20% */
  height: 104px;           /* vorher 87px → +20% */
  background-image: url("/images/logo2_HuV_w.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1100;
  pointer-events: none;    /* stört keine Menühovers */
}

/* Optional: etwas kleiner auf schmalen Screens */
@media (max-width: 991.98px) {
  .container-header .navbar { padding-top: 96px; }  /* 80 + 16 */
  .container-header .navbar::before {
    width: 384px;  /* 80% von 492 */
    height: 80px;
  }
}

/* ----------------------------- Ende des Logo Headers verkleinern */

/* Im Folgenden wird die Positionierung des Untermenues definiert, so dass das aufgeklappte Untermenue immer im Vordergrund angezeigt wird */

/* 1) Header & Dropdown sicher über allem anderen */
.container-header { 
  position: relative;     /* falls noch nicht gesetzt */
  z-index: 3000;          /* höher als Map/Content */
}

.container-header .dropdown-menu {
  z-index: 3100 !important;  /* Untermenü über Karte */
}

/* 2) (optional) Mobile Offcanvas sicher drüber */
.offcanvas,
.offcanvas .offcanvas-body,
.offcanvas .dropdown-menu {
  z-index: 3200 !important;
}

/* 3) Leaflet/OSM unter das Menü legen (falls nötig) */
.leaflet-container,
.leaflet-pane {
  z-index: 0 !important;
}
 
/* -------------------------- Ende Logo Header verkleinern */

/* Im folgendem wird hinter den Menue-Punkten ein transparentes dunkleres Band hinterlegt, damit das Menue besser lesbar ist */

/* Top-Menü: dunkleres, transparentes Band */
.container-header .navbar .navbar-nav > .nav-item > .nav-link {
  background: rgba(0,0,0,.65) !important; /* vorher ~.35 */
  color: #fff !important;
}

/* Hover / aktiv noch etwas dunkler */
.container-header .navbar .navbar-nav > .nav-item > .nav-link:hover,
.container-header .navbar .navbar-nav > .nav-item > .nav-link:focus,
.container-header .navbar .navbar-nav > .nav-item.active > .nav-link,
.container-header .navbar .navbar-nav > .nav-item.show > .nav-link {
  background: rgba(0,0,0,.82) !important;
  color: #fff !important;
}

/* Optional: bessere Tastatur-Sichtbarkeit */
.container-header .navbar .navbar-nav > .nav-item > .nav-link:focus-visible {
  outline: 2px solid rgba(255,255,255,.7);
  outline-offset: 2px;
}

/* Ende Logo Header verkleinern

/* Im folgendem wird die Link-Beitragsueberschrit, Schriftgoesse definiert */

/* Joomla 5 / Cassiopeia – Titel-Links in Blog/Startseite kleiner */
.blog-items .item-title,
.blog-items .item-title a,
.items-leading .item-title,
.items-leading .item-title a,
.items-row .item-title,
.items-row .item-title a,
.com-content-featured .item-title,
.com-content-featured .item-title a {
  font-size: 1rem !important;    /* ≈ 16px – nach Wunsch anpassen */
  line-height: 1.25;
  font-weight: 600;               /* ggf. entfernen, wenn dir zu fett */
  text-decoration: none;          /* z. B. ohne Unterstreichung */
}

/* Optional: etwas weniger Abstand unter dem Titel */
.blog-items .item-title { margin-bottom: .25rem !important; }

/* Optional (größer auf Desktop, kleiner auf Mobile) */
@media (min-width: 992px) {
  .blog-items .item-title,
  .blog-items .item-title a,
  .items-leading .item-title,
  .items-leading .item-title a,
  .items-row .item-title,
  .items-row .item-title a,
  .com-content-featured .item-title,
  .com-content-featured .item-title a {
    font-size: 1.125rem !important;  /* ≈ 18px */
  }
}

/* ---------------------- ENDE Link-Beitragsueberschrift

/* Im folgenden wird die Schriftgroesse von H1 H2 H3 H4 H5 H6 definiert */

/* Kompakte, globale Überschriften – H1 nur leicht größer als der Beitrags-Link */
h1, .h1 { font-size: 1.125rem; line-height: 1.25; }  /* ≈ 18px */
h2, .h2 { font-size: 1.0625rem; }                     /* ≈ 17px */
h3, .h3 { font-size: 1rem; }                          /* ≈ 16px */
h4, .h4 { font-size: 0.9375rem; }                     /* ≈ 15px */
h5, .h5 { font-size: 0.875rem; }                      /* ≈ 14px */
h6, .h6 { font-size: 0.8125rem; }                     /* ≈ 13px */

/* Etwas größer ab Desktop (≥992px), immer noch dezent */
@media (min-width: 992px) {
  h1, .h1 { font-size: 1.25rem; }     /* ≈ 20px (deutlich unter Standard) */
  h2, .h2 { font-size: 1.125rem; }    /* ≈ 18px */
  h3, .h3 { font-size: 1rem; }        /* ≈ 16px */
  h4, .h4 { font-size: 0.9375rem; }
  h5, .h5 { font-size: 0.875rem; }
  h6, .h6 { font-size: 0.8125rem; }
}

/* Optional: kompaktere Abstände */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0.75em;
  margin-bottom: 0.4em;
}