/* ============================
   ShiftNav – FOHOW Light Skin
   Warm, freundlich, premium
   ============================ */
:root{
  --fohow-gold:#AF9245;
  --fohow-gold-light:#C9B47A;
  --fohow-text:#2C2C2C;
  --fohow-muted:#6B6B6B;
  --fohow-surface:#F5F1E8;    /* helle Basis */
  --fohow-surface-2:#FBF9F3;  /* noch heller für Verlauf */
  --fohow-border:#E7E2D6;     /* feine Trenner */
  --fohow-cta:#3C6E47;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);
}

/* Panel (hell + weich) */
.shiftnav.shiftnav-skin-custom{
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.5;
  color:var(--fohow-text);
  background: linear-gradient(180deg, var(--fohow-surface-2) 0%, var(--fohow-surface) 100%);
  border:1px solid var(--fohow-border);
  border-radius:12px;
  box-shadow: var(--shadow-soft);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* dünne Goldlinie oben (dezente „Veredelung“) */
.shiftnav.shiftnav-skin-custom:before{
  content:""; display:block; height:4px; border-top-left-radius:12px; border-top-right-radius:12px;
  background: linear-gradient(135deg, var(--fohow-gold), var(--fohow-gold-light));
}

/* Titel/Logo-Bereich im Panel */
.shiftnav.shiftnav-skin-custom .shiftnav-site-title{
  font-size:24px; line-height:1.2; font-weight:700;
  padding:22px 20px;
  color:var(--fohow-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 12px rgba(175,146,69,.18); /* leichter „goldener“ Lift */
  border-bottom:1px solid var(--fohow-border);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
}

/* Top-Level Items */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item > .shiftnav-target{
  color:var(--fohow-text);
  font-size:16px; font-weight:600;
  background: transparent;
  border-top:1px solid var(--fohow-border);
  border-bottom:1px solid #efeae0;
  padding:14px 20px;
  text-shadow:none; letter-spacing:.2px;
}
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item > .shiftnav-target:hover

/* ============================
   Aktiver Menüpunkt – dezent & premium
   (passt zum FOHOW Light Skin)
   ============================ */

:root{
  /* sanfter Goldschimmer fürs Active-Highlight */
  --fohow-active-bg: rgba(175,146,69,.12);  /* Gold auf hell */
  --fohow-active-bg-sub: rgba(175,146,69,.10);
}

/* Hover (sauber abschließen – falls oben abgeschnitten war) */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item > .shiftnav-target:hover{
  background: rgba(255,255,255,.6);
  color: var(--fohow-text);
}

/* Basis: Ziel-Element muss relativ sein, damit wir den linken Akzent platzieren können */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item > .shiftnav-target{
  position: relative;
}

/* TOP-LEVEL: aktueller/aktiver Punkt */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.shiftnav-active > .shiftnav-target,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-ancestor > .shiftnav-target{
  background: var(--fohow-active-bg);
  color: var(--fohow-text);
  /* feines Relief für „angewählt“ */
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.65),
    inset 0  1px 0 rgba(0,0,0,.04);
}

/* Linker Gold-Akzentbalken für aktive/aktuelle Items */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target::before,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.shiftnav-active > .shiftnav-target::before,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-ancestor > .shiftnav-target::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  background: linear-gradient(180deg, var(--fohow-gold), var(--fohow-gold-light));
}

/* SUBMENÜ: aktueller/aktiver Punkt (etwas softer + Einzug) */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu ul.sub-menu li.menu-item.current-menu-item > .shiftnav-target,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu ul.sub-menu li.menu-item.shiftnav-active > .shiftnav-target{
  background: var(--fohow-active-bg-sub);
  color: var(--fohow-text);
  padding-left: 34px; /* +14px Einzug für bessere Hierarchie */
}

/* dünnerer Gold-Akzent für Submenü */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu ul.sub-menu li.menu-item.current-menu-item > .shiftnav-target::before,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu ul.sub-menu li.menu-item.shiftnav-active > .shiftnav-target::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background: linear-gradient(180deg, var(--fohow-gold), var(--fohow-gold-light));
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
}

/* Pfeil/Toggle in Gold, wenn ein Zweig geöffnet/aktiv ist */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.shiftnav-active > .shiftnav-submenu-activation,
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item.current-menu-ancestor > .shiftnav-submenu-activation{
  color: var(--fohow-gold);
}

/* Tastatur- und Fokus-Zustand (Barrierefreiheit, dezent) */
.shiftnav.shiftnav-skin-custom ul.shiftnav-menu li.menu-item > .shiftnav-target:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(201,180,122,.55) inset; /* Gold-light */
  border-radius: 8px;
}