/* ==========================================================================
   Haus Nori – Header & Menü  (Helix Ultimate / Joomla)
   Einbinden: Template-Optionen → Benutzerdefinierter Code → Custom CSS
   oder als templates/shaper_helixultimate/css/custom.css
   Keine externen Schriften (DSGVO-freundlich) – nur System-Serifen.
   ========================================================================== */

:root{
  /* Haus-Nori-Farbpalette */
  --nori-bg:        #141414;   /* Anthrazit-Schwarz */
  --nori-bg-2:      #1d1a17;   /* Anthrazit, leicht warm (Verlauf) */
  --nori-gold:      #C9A45C;   /* Nori-Gold */
  --nori-gold-lt:   #C9A45C;   /* Hover = Nori-Gold */
  --nori-gold-dk:   #6B4A2E;   /* Holzbraun (Linien-Enden, Rahmen) */
  --nori-text:      #F6F0E6;   /* Warmes Creme */
  --nori-red:       #B3261E;   /* Tomatenrot – nur für CTA */
  --nori-serif:     "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --nori-h:         110px;   /* Header-Höhe Desktop */
  --nori-h-sticky:  78px;    /* Header-Höhe beim Scrollen */
  --nori-h-mobile:  76px;
}

/* ---------- Header-Grundfläche ---------- */
#sp-header{
  height: var(--nori-h);
  background:
    radial-gradient(ellipse 60% 140% at 10% 50%, rgba(201,164,92,.10), transparent 60%),
    linear-gradient(180deg, var(--nori-bg-2) 0%, var(--nori-bg) 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  transition: height .35s ease, box-shadow .35s ease;
}
/* feine Goldlinie unten */
#sp-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--nori-gold-dk) 15%, var(--nori-gold-lt) 50%,
    var(--nori-gold-dk) 85%, transparent 100%);
  opacity:.85;
}
#sp-header > .container,
#sp-header .container-inner,
#sp-header .row,
#sp-header #sp-logo,
#sp-header #sp-menu,
#sp-header .sp-column{ height:100%; }
#sp-header .row{ align-items:center; }

/* ---------- Logo ---------- */
#sp-header .logo{ display:flex; align-items:center; height:100%; }
#sp-header .logo a{
  position:relative;
  display:inline-flex; align-items:center;
  background:none !important;
  isolation:isolate;
  outline:none;
  -webkit-tap-highlight-color: transparent;   /* kein grauer Klick-Kasten auf Handy */
}
#sp-header .logo a:focus-visible{ outline:1px dashed var(--nori-gold); outline-offset:4px; }
/* runder Gold-Schein hinter dem Logo (statt drop-shadow – das PNG hat
   halbtransparente Randpixel, die sonst als eckiger Kasten sichtbar werden) */
#sp-header .logo a::before{
  content:"";
  position:absolute; inset:8%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(201,164,92,.28) 0%, rgba(201,164,92,0) 70%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
  z-index:-1;
}
#sp-header .logo a:hover::before{ opacity:1; }
#sp-header .logo-image,
#sp-header .logo-image-phone{
  height: 92px;
  width:auto;
  transition: height .35s ease, transform .35s ease;
}
#sp-header .logo a:hover .logo-image,
#sp-header .logo a:hover .logo-image-phone{
  transform: scale(1.04) rotate(-1.5deg);
}

/* ---------- Hauptmenü ---------- */
@media (min-width: 992px){
  #sp-header .sp-megamenu-parent{ display:flex !important; align-items:center; gap:.35rem; margin:0; }
}
#sp-header .sp-megamenu-parent > li > a{
  position:relative;
  display:inline-block;
  padding: 10px 18px;
  line-height:1;
  font-family: var(--nori-serif) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nori-text);
  transition: color .25s ease;
}
/* Goldlinie wächst aus der Mitte */
#sp-header .sp-megamenu-parent > li > a::after{
  content:"";
  position:absolute; left:50%; bottom:2px;
  width:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--nori-gold-lt), transparent);
  transform: translateX(-50%);
  transition: width .35s ease;
}
/* kleine Raute als Trenner */
#sp-header .sp-megamenu-parent > li + li::before{
  content:"";
  position:absolute; left:-4px; top:50%;
  width:5px; height:5px;
  background: var(--nori-gold);
  transform: translateY(-50%) rotate(45deg);
  opacity:.55;
}
#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li > a:focus-visible{ color: var(--nori-gold-lt); }
#sp-header .sp-megamenu-parent > li:hover > a::after,
#sp-header .sp-megamenu-parent > li > a:focus-visible::after{ width: calc(100% - 36px); }

#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active:hover > a{ color: var(--nori-gold); }
#sp-header .sp-megamenu-parent > li.active > a::after{
  width: calc(100% - 36px);
  background: var(--nori-gold);
}
/* Hover-Linie: Holzbraun → Gold */
#sp-header .sp-megamenu-parent > li > a::after{
  background: linear-gradient(90deg, var(--nori-gold-dk), var(--nori-gold), var(--nori-gold-dk));
}
#sp-header .sp-megamenu-parent > li > a:focus-visible{
  outline: 1px dashed var(--nori-gold); outline-offset: 2px;
}

/* ---------- Optional: „Jetzt reservieren“-Button ----------
   Joomla: Menüpunkt → Linktyp → „CSS-Klasse für Link“: nori-cta          */
#sp-header .sp-megamenu-parent > li > a.nori-cta,
.offcanvas-menu .offcanvas-inner ul.menu > li > a.nori-cta{
  margin-left: 10px;
  padding: 12px 22px;
  background: var(--nori-red);
  color: var(--nori-text) !important;
  border: 1px solid var(--nori-gold);
  border-radius: 2px;
  letter-spacing: .12em;
  box-shadow: 0 4px 14px rgba(179,38,30,.35);
  transition: background .25s, transform .25s, box-shadow .25s;
}
#sp-header .sp-megamenu-parent > li > a.nori-cta::after{ display:none; }
#sp-header .sp-megamenu-parent > li > a.nori-cta:hover{
  background: #9a1f18; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(179,38,30,.45);
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a.nori-cta{
  display:block; text-align:center; margin:18px 0 0; padding:14px; opacity:1;
}

/* ---------- Burger (mobil) ---------- */
#offcanvas-toggler .burger-icon{ width:28px; }
#offcanvas-toggler .burger-icon > span,
.close-offcanvas .burger-icon > span,
.offcanvas-active .burger-icon > span{ background-color: var(--nori-gold) !important; height:2px; }
#offcanvas-toggler:hover .burger-icon > span{ background-color: var(--nori-gold-lt) !important; }
/* Desktop: Menü ist sichtbar → Burger ausblenden */
@media (min-width: 992px){
  #sp-header #offcanvas-toggler{ display:none !important; }
}

/* ---------- Sticky-Header beim Scrollen ---------- */
#sp-header.header-sticky{
  height: var(--nori-h-sticky);
  background: rgba(20,20,20,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#sp-header.header-sticky .logo-image,
#sp-header.header-sticky .logo-image-phone{ height: 64px; }

/* ---------- Offcanvas (mobiles Menü) ---------- */
.offcanvas-menu{
  background: linear-gradient(180deg, var(--nori-bg-2), var(--nori-bg)) !important;
  color: var(--nori-text);
  border-left: 1px solid rgba(201,164,92,.35);
}
.offcanvas-menu .offcanvas-inner ul.menu > li{ border-bottom: 1px solid rgba(201,164,92,.15); }
.offcanvas-menu .offcanvas-inner ul.menu > li > a{
  font-family: var(--nori-serif);
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 0;
  color: var(--nori-text) !important;
  opacity: .85;
  transition: color .25s, padding-left .25s, opacity .25s;
}
.offcanvas-menu .offcanvas-inner ul.menu > li > a:hover{
  color: var(--nori-gold-lt) !important; opacity:1; padding-left:8px;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.active > a{ color: var(--nori-gold) !important; opacity:1; }

/* ---------- Tablet & Handy ---------- */
@media (max-width: 991.98px){
  #sp-header{ height: var(--nori-h-mobile); }
  #sp-header .logo-image,
  #sp-header .logo-image-phone{ height: 62px; }
  #sp-header.header-sticky{ height: 66px; }
  #sp-header.header-sticky .logo-image-phone{ height: 52px; }
}

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

/* ==========================================================================
   Footer – Signatur links, „Nach oben“-Button mittig
   ========================================================================== */
#sp-footer{
  position:relative;
  padding: 0 !important;
  background: var(--nori-bg) !important;           /* Anthrazit-Schwarz */
  color: var(--nori-gold);
  border-top: 1px solid rgba(201,164,92,.35);
}
/* Bottom-Bereich über dem Footer ebenfalls Anthrazit */
#sp-bottom{ background: var(--nori-bg) !important; }

/* Schmaler Abstand statt 142px leerer Fläche über dem Footer */
#sp-bottom { padding: 5px 0 0 !important; }
#sp-bottom .sp-module { margin-bottom: 0 !important; }
#sp-bottom .mod-custom { font-size: 0; line-height: 0; }

#sp-footer .container-inner{
  padding: 30px 0 !important;
  border-top: 0 !important;                         /* graue Template-Linie weg */
}
#sp-footer .sp-copyright{
  display:block;
  text-align:left;
  line-height:40px;                                 /* = Höhe des Buttons */
  white-space:nowrap;
  /* hält Abstand zum WhatsApp-Button unten links (60px + 24px Rand) */
  padding-left: max(0px, calc(108px - (100vw - 100%) / 2));
  font-family: var(--nori-serif);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--nori-gold) !important;               /* Nori-Gold */
}
#sp-footer a{ color: var(--nori-gold); }
#sp-footer a:hover{ color: var(--nori-text); }

/* Rechtliche Links rechts (Impressum · Datenschutz)
   HTML steht im Helix-Feld „Copyright“ – siehe Anleitung */
#sp-footer .sp-copyright{ display:flex; align-items:center; }
#sp-footer .nori-legal{
  margin-left:auto;
  display:flex; align-items:center; gap:22px;
}
#sp-footer .nori-legal a{
  position:relative;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color: var(--nori-text);
  opacity:.75;
  transition: color .25s, opacity .25s;
}
#sp-footer .nori-legal a + a::before{              /* Goldraute als Trenner */
  content:"";
  position:absolute; left:-13px; top:50%;
  width:4px; height:4px;
  background: var(--nori-gold);
  transform: translateY(-50%) rotate(45deg);
  opacity:.6;
}
#sp-footer .nori-legal a:hover,
#sp-footer .nori-legal a:focus-visible{ color: var(--nori-gold); opacity:1; }

/* Helix-„Go to top“-Button in den Footer holen (kein HTML nötig) */
body.helix-ultimate{ position:relative; }
.sp-scroll-up{
  display:flex !important;                          /* immer sichtbar, auch ohne Scrollen */
  opacity:1 !important;
  align-items:center; justify-content:center;
  position:absolute !important;
  top:auto !important; right:auto !important;
  left:50%; bottom:30px;                            /* = Footer-Innenabstand → auf Höhe der Signatur */
  transform:translateX(-50%);
  width:40px; height:40px; line-height:1;
  font-size:0;
  color: var(--nori-gold) !important;
  background: transparent !important;
  border: 1px solid rgba(201,164,92,.45);
  border-radius:50%;
  z-index:5;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
/* eigener Pfeil (unabhängig von Font Awesome) */
.sp-scroll-up > span{ display:none; }
.sp-scroll-up::before{
  content:"";
  width:9px; height:9px;
  border-top:1.5px solid currentColor;
  border-left:1.5px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}
.sp-scroll-up:hover,
.sp-scroll-up:focus-visible{
  background: var(--nori-gold) !important;
  color: var(--nori-bg) !important;
  border-color: var(--nori-gold);
  transform:translateX(-50%) translateY(-3px);
}
.sp-scroll-up:focus{ outline:none; }
.sp-scroll-up:focus-visible{ outline:1px dashed var(--nori-gold); outline-offset:3px; }

/* Handy: Button über der Signatur */
@media (max-width: 575.98px){
  #sp-footer .container-inner{ padding: 76px 0 20px !important; }
  #sp-footer .sp-copyright{
    flex-direction:column; align-items:flex-start;
    font-size:13px; letter-spacing:.08em;
  }
  #sp-footer .nori-legal{ margin-left:0; line-height:32px; }
  .sp-scroll-up{ bottom:108px; }                    /* 20 + 40 + 32 + 16 Abstand */
}