/* ============================================================
   Liederkranz Hohenberg – custom.css
   Shaper Kind / Helix Ultimate Template
   ============================================================ */

/* ── Header ─────────────────────────────────────────────────── */
#sp-header {
  background-color: #ffffff !important;
  border-bottom: 3px solid #cc0000 !important;
}
#sp-header .row.align-items-center {
  flex-wrap: wrap !important;
}

/* ── Logo ───────────────────────────────────────────────────── */
#sp-logo {
  display: flex !important;
  align-items: center !important;
  padding: 12px 0 8px !important;
}
#sp-logo a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
}
#sp-logo a img { flex-shrink: 0; }

/* ── Desktop: menu-right weg, offcanvas weg ─────────────────── */
@media (min-width: 992px) {
  #menu-right { display: none !important; }
  .offcanvas-menu,
  .offcanvas-overlay { display: none !important; }
}

/* ── Rote Menüleiste Desktop ────────────────────────────────── */
@media (min-width: 992px) {
  #sp-menu {
    background-color: #cc0000 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 60px !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
  }
  #sp-menu.menu-hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
}

#sp-menu .nav-item .nav-link,
.sp-megamenu-wrapper .sp-menu-item > a,
.sp-megamenu-wrapper .sp-menu-item > span {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#sp-menu .nav-item:hover .nav-link,
#sp-menu .nav-item.active .nav-link,
.sp-megamenu-wrapper .sp-menu-item:hover > a,
.sp-megamenu-wrapper .sp-menu-item.active > a {
  background-color: #aa0000 !important;
  color: #ffffff !important;
}
#sp-menu .sp-megamenu-wrapper {
  width: 100% !important;
  padding-left: 8px !important;
  justify-content: flex-start !important;
}

/* ── Dropdown ───────────────────────────────────────────────── */
div.sp-dropdown.sp-dropdown-main,
.sp-dropdown.sp-dropdown-main {
  background-color: #cc0000 !important;
  border: none !important;
  border-radius: 0 !important;
}
div.sp-dropdown-inner ul.sp-dropdown-items li.sp-menu-item a,
.sp-dropdown-inner .sp-dropdown-items .sp-menu-item a {
  color: #ffffff !important;
  background-color: #cc0000 !important;
  display: block !important;
  padding: 8px 16px !important;
}
div.sp-dropdown-inner ul.sp-dropdown-items li.sp-menu-item:hover a {
  background-color: #aa0000 !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
  #sp-menu { display: none !important; }

  #sp-header { min-height: 120px !important; }
  #sp-header .row.align-items-center {
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 120px !important;
  }
  #sp-logo {
    flex: 1 !important;
    padding: 20px 0 20px 16px !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
  }
  #menu-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    align-self: center !important;
  }
  #menu-right .d-lg-flex,
  #menu-right > .sp-module { display: none !important; }

  /* Burger – Outline */
  a#offcanvas-toggler {
    background: transparent !important;
    border: 2px solid #cc0000 !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: static !important;
    box-sizing: border-box !important;
  }
  a#offcanvas-toggler::before { display: none !important; content: none !important; }
  a#offcanvas-toggler i { display: none !important; }
  a#offcanvas-toggler .burger-icon {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 18px !important;
    pointer-events: none !important;
  }
  a#offcanvas-toggler .burger-icon > span {
    display: block !important;
    height: 2px !important;
    width: 18px !important;
    background-color: #cc0000 !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ── Offcanvas Styling ──────────────────────────────────────── */
.offcanvas-menu { background-color: #ffffff !important; }
.offcanvas-menu ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }

/* Kopfbereich rot */
.offcanvas-menu .d-flex.align-items-center {
  background: #cc0000 !important;
  padding: 14px 16px !important;
}
.offcanvas-menu .close-offcanvas .burger-icon > span {
  background-color: #ffffff !important;
  display: block !important;
  height: 2px !important;
  width: 18px !important;
  border-radius: 0 !important;
}

/* Hauptmenüpunkte */
.offcanvas-menu .offcanvas-inner ul.menu > li > a,
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
  color: #1a1a1a !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  display: block !important;
  text-decoration: none !important;
  border-bottom: 0.5px solid #f0f0f0 !important;
}
/* Aktiver Menüpunkt */
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu > li.current > a,
.offcanvas-menu .offcanvas-inner ul.menu > li.current-item > a {
  color: #cc0000 !important;
  font-weight: 500 !important;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover {
  color: #cc0000 !important;
  background: #fafafa !important;
}

/* Pfeil-Abstand */
.offcanvas-menu .offcanvas-inner ul.menu > li .menu-toggler {
  margin-left: 10px !important;
  padding: 0 6px !important;
  color: #cc0000 !important;
  font-size: 16px !important;
}

/* Untermenü */
.offcanvas-menu .mod-menu__sub {
  padding-left: 0 !important;
  background: #f6f6f6 !important;
  border-top: 0.5px solid #eeeeee !important;
}
.offcanvas-menu .mod-menu__sub li {
  border-bottom: 0.5px solid #eeeeee !important;
}
.offcanvas-menu .mod-menu__sub li a {
  color: #444 !important;
  font-size: 14px !important;
  padding: 12px 20px 12px 32px !important;
  display: block !important;
  text-decoration: none !important;
}
.offcanvas-menu .mod-menu__sub li a::before {
  content: "›" !important;
  color: #cc0000 !important;
  margin-right: 8px !important;
  font-size: 16px !important;
}
.offcanvas-menu .mod-menu__sub li a:hover {
  color: #cc0000 !important;
  background: #efefef !important;
}

/* ── Body ───────────────────────────────────────────────────── */
body { background-color: #f2f2f2 !important; }

/* ── Footer – Variante 3: hell, rote Oberkante ──────────────── */
#sp-footer,
footer#sp-footer,
.body-wrapper #sp-footer,
.body-innerwrapper #sp-footer,
div#sp-footer {
  background-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
  border-top: 4px solid #cc0000 !important;
  color: #555555 !important;
}
#sp-footer > *,
#sp-footer .container,
#sp-footer .container-fluid,
#sp-footer .container-inner {
  background-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
}

/* Innenlayout: Adresse links, Links rechts */
#sp-footer .container-inner > .row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 22px 0 !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Linke Spalte – Adresse */
#sp-footer1 {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
#sp-footer1 h4 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 4px 0 !important;
}
#sp-footer1 p,
#sp-footer1 .sp-module-content {
  font-size: 12px !important;
  color: #666666 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
}
#sp-footer1 a {
  color: #cc0000 !important;
  text-decoration: none !important;
}
#sp-footer1 a:hover {
  text-decoration: underline !important;
}

/* Rechte Spalte – Datenschutz + Impressum */
#sp-footer2 {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  text-align: right !important;
}
#sp-footer2 ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}
#sp-footer2 ul li a {
  font-size: 13px !important;
  color: #555555 !important;
  text-decoration: none !important;
  display: inline-block !important;
}
#sp-footer2 ul li a::after {
  content: " →" !important;
  color: #cc0000 !important;
  font-size: 11px !important;
}
#sp-footer2 ul li a:hover {
  color: #cc0000 !important;
}

/* Copyright-Zeile */
#sp-footer2::after {
  content: "© 2026 Liederkranz Hohenberg 1948 e.V." !important;
  display: block !important;
  font-size: 11px !important;
  color: #aaaaaa !important;
  margin-top: 10px !important;
}

/* Modul-Titel im Footer verstecken */
#sp-footer .sp-module-title { display: none !important; }

/* Mobile: untereinander */
@media (max-width: 767px) {
  #sp-footer .container-inner > .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 20px 0 !important;
  }
  #sp-footer2 {
    text-align: left !important;
  }
  #sp-footer2 ul {
    align-items: flex-start !important;
  }
  #sp-footer2::after {
    text-align: left !important;
  }
}

/* ── Modul-Titel ────────────────────────────────────────────── */
.sp-module-title { display: none !important; }

/* ── Joomla Metadaten ───────────────────────────────────────── */
.key-summery-wrapper { display: none !important; }
.social-share-wrapper { display: none !important; }
.sp-article-social { display: none !important; }
.mod-articles-latest ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }

/* ── Galerie-Modul ──────────────────────────────────────────── */
.lk-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lk-gallery-item img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; display: block; }
.lk-gallery-more { text-align: right; margin-top: 8px; }
.lk-gallery-more a { color: #cc0000; font-size: 13px; font-weight: 600; text-decoration: none; }
@media (max-width: 991px) {
  .lk-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}



/* ═══════════════════════════════════════════════════════════════
   NEUIGKEITEN – KARTEN-LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Joomla Standard-Wrapper neutralisieren */
.blog.com-content-category-blog .row,
.blog-items .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.blog.com-content-category-blog .col-12,
.blog-items .col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Liste: Karten mit dünner Trennlinie */
.articles-leading,
.article-list,
.lk-news-liste {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  background: #e0e0e0 !important;
  padding: 0 !important;
}

/* ── KARTE ──────────────────────────────────────────────────── */
.lk-news-card {
  display: flex !important;
  flex-direction: row !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s;
  position: relative;
}
.lk-news-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important;
  z-index: 1;
}

/* ── DATUMS-BOX ─────────────────────────────────────────────── */
.lk-date-box {
  flex-shrink: 0 !important;
  width: 62px !important;
  min-height: 110px !important;
  background: #cc0000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 4px !important;
  text-align: center !important;
}
.lk-date-box--empty {
  background: #cc0000 !important;
}
.lk-date-box--empty .fas {
  color: rgba(255,255,255,0.6);
  font-size: 20px;
}
.lk-date-day {
  display: block !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
}
.lk-date-month {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.9) !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: Arial, sans-serif !important;
}

/* ── BILD ───────────────────────────────────────────────────── */
.lk-card-img {
  flex-shrink: 0 !important;
  width: 150px !important;
  min-height: 110px !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}
.lk-card-img img {
  width: 100% !important;
  height: 100% !important;
  min-height: 110px !important;
  object-fit: cover !important;
  display: block !important;
}
.lk-card-img-fallback {
  width: 100% !important;
  height: 110px !important;
  background: #cc0000 url('/images/logo.jpg') center/60% no-repeat !important;
}

/* ── KARTEN-INHALT ──────────────────────────────────────────── */
.lk-card-body {
  flex: 1 !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}
.lk-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 0 7px 0 !important;
  line-height: 1.4 !important;
  border: none !important;
  padding: 0 !important;
}
.lk-card-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}
.lk-card-title a:hover {
  color: #cc0000 !important;
}
.lk-card-text {
  font-size: 13px !important;
  color: #555555 !important;
  line-height: 1.65 !important;
  margin: 0 0 10px 0 !important;
  flex: 1 !important;
}
.lk-weiterlesen {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #cc0000 !important;
  text-decoration: none !important;
  margin-top: auto !important;
}
.lk-weiterlesen:hover {
  color: #aa0000 !important;
  text-decoration: underline !important;
}

/* ── "WEITERE LINKS" (items-more) ───────────────────────────── */
.items-more {
  background: #ffffff !important;
  border-top: 2px solid #e0e0e0 !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
.com-content-blog__links {
  list-style: none !important;
  padding: 8px 0 4px !important;
  margin: 0 !important;
}
.com-content-blog__links li {
  padding: 0 !important;
  border-bottom: 1px solid #f4f4f4 !important;
}
.com-content-blog__links li:last-child {
  border-bottom: none !important;
}
.com-content-blog__links a {
  display: block !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  color: #cc0000 !important;
  text-decoration: none !important;
}
.com-content-blog__links a::before {
  content: "→ " !important;
}
.com-content-blog__links a:hover {
  background: #fef5f5 !important;
  text-decoration: none !important;
}

/* ── PAGINATION ─────────────────────────────────────────────── */
.com-content-category-blog__pagination .pagination .page-link {
  color: #cc0000 !important;
  border-color: #e0e0e0 !important;
}
.com-content-category-blog__pagination .pagination .active .page-link {
  background-color: #cc0000 !important;
  border-color: #cc0000 !important;
  color: #ffffff !important;
}
.com-content-category-blog__counter {
  font-size: 12px !important;
  color: #888888 !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lk-date-box {
    width: 48px !important;
  }
  .lk-date-day {
    font-size: 20px !important;
  }
  .lk-date-month {
    font-size: 10px !important;
  }
  .lk-card-img {
    width: 90px !important;
  }
  .lk-card-body {
    padding: 10px 12px !important;
  }
  .lk-card-title {
    font-size: 14px !important;
  }
  .lk-card-text {
    display: none !important;
  }
}


/* ── Footer Hintergrund Override (letzter Block) ────────────── */
/* Muss am Ende stehen um template.css/preset2.css zu überschreiben */
html body #sp-footer,
html body footer#sp-footer {
  background-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
}
html body #sp-footer .sp-column,
html body #sp-footer .col-lg-6,
html body #sp-footer .col-lg-12,
html body #sp-footer [class*="col-"] {
  background-color: #f5f5f5 !important;
  background: #f5f5f5 !important;
}
html body #sp-footer h4 {
  color: #1a1a1a !important;
}
html body #sp-footer p,
html body #sp-footer address,
html body #sp-footer li {
  color: #666666 !important;
  font-size: 12px !important;
  line-height: 1.85 !important;
}