/* =========================================================
   DH WM PROJEKT – custom.css für Helix Ultimate (Joomla 6)
   Ablage: /templates/shaper_helixultimate/css/custom.css
   ========================================================= */


/* DH WEBFONTS SELFHOSTED ------------------------------------------------
   Schriften-Ordner kopieren nach:
   /templates/shaper_helixultimate/fonts/baskerville/
   /templates/shaper_helixultimate/fonts/hurme/
   Relative Pfade (../fonts/) funktionieren lokal im Unterordner
   (localhost/wm260101/) UND live – absolute Pfade würden lokal brechen.
   EOT/SVG entfernt (nur für IE/alte iOS nötig), WOFF2/WOFF reicht heute.
   ----------------------------------------------------------------------- */

@font-face {
  font-family: 'baskervillenormal';
  src: url('../fonts/baskerville/baskvl-webfont.woff2') format('woff2'),
       url('../fonts/baskerville/baskvl-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'hurmegeometricsans2w01-rgRg';
  src: url('../fonts/hurme/hurme_geometric_sans_2_w01_rg.woff2') format('woff2'),
       url('../fonts/hurme/hurme_geometric_sans_2_w01_rg.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* DH HEADER: Logo mittig, Navigation zentriert darunter ----------------- */

/* Desktop (ab 992px) */
@media (min-width: 992px) {

  /* Feste Header-Höhe aus den Template-Optionen aufheben */
  #sp-header {
    height: auto !important;
    padding-top: 25px;
  }

  /* Logo- und Menüspalte untereinander */
  #sp-header .container-inner > .row {
    flex-direction: column;
    align-items: center;
  }
  #sp-header #sp-logo,
  #sp-header #sp-menu {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* Logo zentrieren */
  #sp-header #sp-logo .sp-column,
  #sp-header .logo {
    display: flex;
    justify-content: center;
    height: auto !important;
  }
  #sp-header .logo-image {
    height: 140px;              /* Logo-Größe */
    width: auto;
  }

  /* Navigation zentrieren */
  #sp-header #sp-menu {
    margin-top: 30px;           /* Abstand Logo – Navigation */
  }
  #sp-header #sp-menu .sp-column {
    justify-content: center !important;
    position: relative;
  }
  #sp-header .header-modules {
    margin: 0 !important;       /* leeres Modul-Feld schiebt Menü sonst nach links */
  }
  #sp-header .sp-megamenu-parent {
    display: flex !important;
    justify-content: center;
    float: none;
    margin: 0;
  }
  #sp-header .sp-megamenu-parent > li > a,
  #sp-header .sp-megamenu-parent > li > span {
    line-height: 70px !important;   /* Höhe der Menüzeile */
    height: auto;
    padding: 0 22px;                /* Abstand der Menüpunkte */
  }

  /* Offcanvas-Burger rechts außen halten (verschiebt die Mitte nicht) */
  #sp-header #offcanvas-toggler {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    line-height: normal;
  }

  /* Sticky Header beim Scrollen: nur Navigation, ohne Logo */
  #sp-header.header-sticky {
    padding-top: 0;
  }
  #sp-header.header-sticky #sp-logo {
    display: none;
  }
  #sp-header.header-sticky #sp-menu {
    margin-top: 0;
  }
  #sp-header.header-sticky .sp-megamenu-parent > li > a,
  #sp-header.header-sticky .sp-megamenu-parent > li > span {
    line-height: 50px !important;
  }
}

/* Tablet & Handy (bis 991px) */
@media (max-width: 991.98px) {

  #sp-header {
    height: auto !important;
    padding: 12px 0;
  }
  #sp-header .container-inner > .row {
    justify-content: center;
  }
  #sp-header #sp-logo {
    flex: 0 0 100%;
    max-width: 100%;
  }
  #sp-header #sp-logo .sp-column,
  #sp-header .logo {
    display: flex;
    justify-content: center;
    height: auto !important;
  }
  #sp-header .logo-image {
    height: 85px;
    width: auto;
  }

  /* Burger-Menü rechts, vertikal mittig */
  #sp-header #sp-menu {
    position: absolute !important;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }
  #sp-header #offcanvas-toggler {
    height: auto;
    line-height: normal;
  }
  #sp-header .burger-icon > span {
    background-color: #fff;       /* Burger auf schwarzem Header sichtbar */
  }
}


/* DH NAVIGATION --------------------------------------------------------- */

/* Hauptmenü (inkl. Menüpunkte ohne Link wie "STUDIO") */
.sp-megamenu-parent > li.sp-menu-item > a,
.sp-megamenu-parent > li.sp-menu-item > span {
  font-family: 'baskervillenormal', Georgia, serif;
  font-size: 22px;
  text-transform: uppercase;
}
.sp-megamenu-parent > li.sp-menu-item > a:hover,
.sp-megamenu-parent > li.sp-menu-item > span:hover {
  background-color: rgba(144, 137, 119, 0.7);
  color: #fff;
}

/* "STUDIO" (Menü-Überschrift ohne Link) in derselben Farbe wie die Links */
.sp-megamenu-parent > li.sp-menu-item > span.sp-menu-heading {
  color: #908977;               /* = Farbe der übrigen Menüpunkte */
  cursor: default;
}
.sp-megamenu-parent > li.sp-menu-item:hover > span.sp-menu-heading {
  color: #fff;
}

/* Dropdown */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: 'hurmegeometricsans2w01-rgRg', Arial, sans-serif;
  font-size: 18px !important;
  text-transform: none;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background-color: rgba(144, 137, 119, 0.7);
  color: #fff;
}

/* Mobiles Offcanvas-Menü (nutzt in Helix andere Klassen) */
.offcanvas-menu .menu > li > a,
.offcanvas-menu .menu > li > span {
  font-family: 'baskervillenormal', Georgia, serif;
  font-size: 20px;
  text-transform: uppercase;
}
.offcanvas-menu .menu li ul li a {
  font-family: 'hurmegeometricsans2w01-rgRg', Arial, sans-serif;
  font-size: 16px;
  text-transform: none;
}


/* DH TYPOGRAPHY BASIC --------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: 'baskervillenormal', Georgia, serif;
}

p {
  font-family: 'hurmegeometricsans2w01-rgRg', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
}

/* Listen nur im Inhaltsbereich – sonst trifft "ul li" auch das Menü */
#sp-main-body ul li,
.sp-page-builder ul li {
  font-family: 'hurmegeometricsans2w01-rgRg', Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  padding-bottom: 5px;
}

.breadcrumb-manuell-dh .sppb-addon-content h4 {
  font-family: 'baskervillenormal', Georgia, serif;
  color: #918A78;
  font-size: 14px !important;
  text-transform: uppercase;
}
/* Links im manuellen Breadcrumb */
.breadcrumb-manuell-dh .sppb-addon-content h4 a,
.breadcrumb-manuell-dh .sppb-addon-content h4 a:visited {
  color: #918A78 !important;
  text-decoration: underline;
}
.breadcrumb-manuell-dh .sppb-addon-content h4 a:hover,
.breadcrumb-manuell-dh .sppb-addon-content h4 a:focus,
.breadcrumb-manuell-dh .sppb-addon-content h4 a:active,
.breadcrumb-manuell-dh .sppb-addon-content h4 a.active {
  color: #000 !important;
}



/* DH TYPOGRAPHY SLIDESHOW ----------------------------------------------- */

h1.sppb-sp-slider-title,
.slideshow-dh h1 {
  font-family: 'hurmegeometricsans2w01-rgRg', Arial, sans-serif !important;
}


/* DH BOTTOM ------------------------------------------------------------- */

#sp-bottom {
  background-color: #918A78;
  color: #000;
}
#sp-bottom h1, #sp-bottom h2, #sp-bottom h3,
#sp-bottom h4, #sp-bottom h5, #sp-bottom h6,
#sp-bottom .sp-module-title,
#sp-bottom p,
#sp-bottom li,
#sp-bottom span,
#sp-bottom a,
#sp-bottom a:visited {
  color: #000 !important;
}
#sp-bottom a:hover,
#sp-bottom a:focus {
  color: #000 !important;
  text-decoration: underline;
}


/* DH FOOTER ------------------------------------------------------------- */

#sp-footer {
  background-color: #918A78;
  color: #000;
  font-family: 'baskervillenormal', Georgia, serif;
  text-align: center;
}
#sp-footer .container-inner {
  border-top: 1px solid rgba(0, 0, 0, 0.15);  /* Helix-Trennlinie an Farbe anpassen */
}

/* Footer-Spalten untereinander und mittig */
#sp-footer .container-inner > .row {
  justify-content: center;
}
#sp-footer .container-inner > .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}
#sp-footer .sp-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#sp-footer p,
#sp-footer li,
#sp-footer span,
#sp-footer .sp-copyright,
#sp-footer a,
#sp-footer a:visited {
  font-family: 'baskervillenormal', Georgia, serif !important;
  color: #000 !important;
}
#sp-footer .sp-copyright {
  font-size: 13px;
  text-transform: uppercase;
}
#sp-footer a:hover,
#sp-footer a:focus {
  color: #000 !important;
  text-decoration: underline;
}

/* Footer-Menü (falls vorhanden) mittig in einer Zeile */
#sp-footer ul.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* DH BREADCRUMB --------------------------------------------------------- */

.breadcrumb,
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item span,
.breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.breadcrumb .divider {
  font-family: 'baskervillenormal', Georgia, serif;
  color: #918A78 !important;
}
.breadcrumb .breadcrumb-item a:hover,
.breadcrumb .breadcrumb-item a:focus {
  color: #000 !important;
}


/* DH SP PAGE BUILDER DIVIDER -------------------------------------------- */

/* #918A78 mit 10 % Transparenz (= 90 % Deckkraft).
   !important nötig, weil SP Page Builder die Farbe pro Addon per ID setzt. */
.sppb-divider.sppb-divider-border {
  border-color: rgba(145, 138, 120, 0.9) !important;
}

/* Hintergrund des Divider-Bereichs weiß */
.sppb-addon-divider-wrap.divider-position {
  background-color: #ffffff;
}


/* DH SP PAGE BUILDER BUTTONS -------------------------------------------- */

/* Schrift und Rahmen in allen Zuständen schwarz.
   !important nötig, weil SP Page Builder die Farben pro Addon per ID setzt. */
.sppb-btn.sppb-btn-flex.sppb-btn-rounded,
.sppb-btn.sppb-btn-flex.sppb-btn-rounded:visited,
.sppb-btn.sppb-btn-flex.sppb-btn-rounded:hover,
.sppb-btn.sppb-btn-flex.sppb-btn-rounded:focus,
.sppb-btn.sppb-btn-flex.sppb-btn-rounded:active,
.sppb-btn.sppb-btn-flex.sppb-btn-rounded.active {
  color: #000 !important;
  border: 1px solid #000 !important;
}
.sppb-btn.sppb-btn-flex.sppb-btn-rounded * {
  color: #000 !important;         /* Icons/Text-Spans im Button */
}


/* DH SP PAGE BUILDER GALERIE -------------------------------------------- */

/* Rahmen #000000 mit 20 % Deckkraft, 5px Abstand zwischen Bild und Rahmen */
.sppb-addon-gallery .sppb-gallery img {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 5px;
  background-color: transparent;
  box-sizing: border-box;
  object-fit: cover;              /* Bild wird nicht verzerrt */
}