/*
  Datei:   startseite-header-menu.css
  Projekt: adventskalender-treffurt.de – Header, Hauptmenü & Footer (seitenweit)
  Autor:   cover72 - Timo Biehl
  Version: 1.2 (2026-09-30) – Footer in Creme
  Einbau:  Helix Ultimate › Template-Optionen › Custom Code › Custom CSS
           (landet in templates/shaper_helixultimate/css/custom.css)
  Farben:  Weihnachtsrot / Gold – identisch mit startseite.css (.atk-home)
*/

:root {
  --atk-red: #8e0e1c;
  --atk-red-dark: #6c000e;
  --atk-gold: #d4a93a;
  --atk-gold-light: #f0d27a;
  --atk-ink: #2a1a1a;
  --atk-cream: #fbf6ee;
  --atk-header-h: 84px;
}

/* ---------- Header-Leiste ---------- */
#sp-header {
  height: var(--atk-header-h);
  --header_height: var(--atk-header-h);
  background: #fff;
  border-bottom: 3px solid var(--atk-red);
  box-shadow: 0 6px 24px rgba(60, 0, 8, .08);
}
#sp-header::after {               /* feine Goldlinie unter dem Rot */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--atk-gold) 20%, var(--atk-gold) 80%, transparent);
  opacity: .8;
  pointer-events: none;
}
#sp-header > .container,
#sp-header .container-inner,
#sp-header .container-inner > .row { height: 100%; }

/* Trennlinien des Templates ausblenden */
#sp-logo.has-border::after,
#sp-menu .social-wrap::after { display: none; }

/* ---------- Logo: hängt als „Wolke“ über den Hero ---------- */
#sp-header #sp-logo { align-self: flex-start; padding-right: 30px; }
#sp-header .logo { height: var(--atk-header-h); align-items: flex-start; }
#sp-header .logo a { display: block; margin-top: 8px; }
#sp-header .logo-image,
#sp-header .logo-image-phone {
  height: 112px !important;       /* überschreibt die 120px aus den Template-Optionen */
  width: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
  transition: height .3s ease, margin .3s ease;
  position: relative;
  z-index: 2;
}

/* ---------- Hauptmenü ---------- */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
  position: relative;
  line-height: var(--atk-header-h);
  padding: 0 16px;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--atk-ink);
  transition: color .25s ease;
}
#sp-header .sp-megamenu-parent > li > a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(50% - 18px);
  height: 3px;
  border-radius: 2px;
  background: var(--atk-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li > a:focus-visible,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active:hover > a { color: var(--atk-red); }
#sp-header .sp-megamenu-parent > li:hover > a::after,
#sp-header .sp-megamenu-parent > li > a:focus-visible::after,
#sp-header .sp-megamenu-parent > li.active > a::after { transform: scaleX(1); }

/* „Onlineshop“ als Button hervorheben */
#sp-header .sp-megamenu-parent > li > a[href*="shop.adventskalender-treffurt.de"] {
  line-height: 1;
  padding: 12px 20px;
  margin-left: 10px;
  border-radius: 999px;
  background: var(--atk-red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(142, 14, 28, .28);
  transition: background-color .25s ease, transform .25s ease;
}
#sp-header .sp-megamenu-parent > li > a[href*="shop.adventskalender-treffurt.de"]::before {
  content: "\f290";               /* Font Awesome: shopping-bag */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
}
#sp-header .sp-megamenu-parent > li > a[href*="shop.adventskalender-treffurt.de"]::after { display: none; }
#sp-header .sp-megamenu-parent > li:hover > a[href*="shop.adventskalender-treffurt.de"],
#sp-header .sp-megamenu-parent > li > a[href*="shop.adventskalender-treffurt.de"]:focus-visible {
  background: var(--atk-red-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* Dropdowns (falls später Unterpunkte kommen) */
#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  border-top: 3px solid var(--atk-red);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--atk-red); }

/* ---------- Social Icons ---------- */
#sp-menu .social-wrap { padding-left: 24px; }
#sp-menu ul.social-icons > li:not(:last-child) { margin-right: 10px; }
#sp-menu ul.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--atk-cream);
  color: var(--atk-red);
  font-size: 17px;
  transition: background-color .25s ease, color .25s ease;
}
#sp-menu ul.social-icons a:hover,
#sp-menu ul.social-icons a:focus-visible { background: var(--atk-red); color: #fff; }

/* ---------- Burger (nur mobil/Tablet) ---------- */
@media (min-width: 992px) {
  #sp-header #offcanvas-toggler { display: none !important; }
}
#sp-header #offcanvas-toggler { margin-left: 18px; }
#sp-header .burger-icon > span,
.offcanvas-menu .burger-icon > span { background-color: var(--atk-red); height: 3px; border-radius: 2px; }

/* ---------- Sticky-Header ---------- */
#sp-header.header-sticky { --atk-header-h: 68px; box-shadow: 0 6px 24px rgba(60, 0, 8, .14); }
#sp-header.header-sticky .logo-image { height: 60px !important; }
#sp-header.header-sticky .logo a { margin-top: 4px; }

/* ---------- Offcanvas (mobiles Menü) ---------- */
.offcanvas-menu { background: var(--atk-cream); border-left: 4px solid var(--atk-red); }
.offcanvas-menu .offcanvas-inner ul.menu > li { border-bottom: 1px solid rgba(142, 14, 28, .12); }
.offcanvas-menu .offcanvas-inner ul.menu > li > a {
  display: block;
  padding: 14px 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--atk-ink);
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover,
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a { color: var(--atk-red); }
.offcanvas-menu .offcanvas-inner ul.menu > li.item-870 { border-bottom: 0; margin-top: 16px; }
.offcanvas-menu .offcanvas-inner ul.menu > li.item-870 > a {
  text-align: center;
  border-radius: 999px;
  background: var(--atk-red);
  color: #fff;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.item-870 > a:hover { background: var(--atk-red-dark); color: #fff; }

/* ---------- Tablet / Mobil ---------- */
@media (max-width: 991.98px) {
  :root { --atk-header-h: 72px; }
  #sp-header #sp-logo { padding-right: 0; }
  #sp-header .logo-image,
  #sp-header .logo-image-phone { height: 86px !important; }
  #sp-menu .social-wrap { padding-left: 0; }
  #sp-menu ul.social-icons a { width: 34px; height: 34px; font-size: 15px; }
}
@media (max-width: 575.98px) {
  :root { --atk-header-h: 64px; }
  #sp-header .logo-image,
  #sp-header .logo-image-phone { height: 72px !important; }
  #sp-header.header-sticky .logo-image-phone { height: 54px !important; }
  #sp-menu ul.social-icons > li:not(:last-child) { margin-right: 6px; }
}

/* =========================================================
   FOOTER (seitenweit)
   ========================================================= */

/* bisherigen Bottom-Bereich (großes Logo) ausblenden */
#sp-bottom { display: none !important; }

#sp-footer {
  position: relative;
  padding: 0;
  font-size: 15px;
  color: var(--atk-ink);
  background: var(--atk-cream);
  border-top: 4px solid var(--atk-gold);
}
#sp-footer .container-inner {
  padding: 34px 0;
  border-top: 0;
}
#sp-footer .container-inner > .row { align-items: center; row-gap: 18px; }

/* Copyright mit kleinem Logo */
#sp-footer #sp-footer1 .sp-column {
  display: flex;
  align-items: center;
  gap: 16px;
}
#sp-footer #sp-footer1 .sp-column::before {
  content: "";
  flex: 0 0 auto;
  width: 64px;
  height: 56px;
  background: url("/images/logos/logo-bfb-website.png") center / contain no-repeat;
}
#sp-footer .sp-copyright { color: #6d5d5a; line-height: 1.5; }

/* Footer-Menü */
#sp-footer ul.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 0;
  margin: 0;
}
#sp-footer ul.menu li { margin: 0; display: flex; align-items: center; }
#sp-footer ul.menu li + li::before {
  content: "";
  width: 5px; height: 5px;
  margin: 0 14px;
  border-radius: 50%;
  background: var(--atk-gold);
  opacity: .8;
}
#sp-footer ul.menu li a {
  position: relative;
  color: var(--atk-red);
  text-decoration: none;
  transition: color .25s ease;
}
#sp-footer ul.menu li a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--atk-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
#sp-footer ul.menu li a:hover,
#sp-footer ul.menu li a:focus-visible,
#sp-footer ul.menu li.active > a { color: var(--atk-red-dark); }
#sp-footer ul.menu li a:hover::after,
#sp-footer ul.menu li a:focus-visible::after,
#sp-footer ul.menu li.active > a::after { transform: scaleX(1); }

/* Scroll-nach-oben-Button passend */
.sp-scroll-up { background: var(--atk-red) !important; color: #fff !important; border-radius: 50%; }
.sp-scroll-up:hover { background: var(--atk-gold) !important; color: #2a1a00 !important; }

@media (max-width: 991.98px) {
  #sp-footer #sp-footer1 .sp-column,
  #sp-footer #sp-footer2 { justify-content: center; text-align: center; }
  #sp-footer #sp-footer1 .sp-column { flex-direction: column; gap: 10px; }
  #sp-footer ul.menu { justify-content: center; }
}
@media (max-width: 575.98px) {
  #sp-footer ul.menu { gap: 10px 22px; }
  #sp-footer ul.menu li + li::before { display: none; }   /* keine Punkte am Zeilenanfang */
  #sp-footer { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #sp-header, #sp-header * { transition: none !important; animation: none !important; }
}