@charset "UTF-8";
/* css/nav.css – Sticky-Navigation */

:root {
--hs-pad: min(2.4vw, 32px);   /* identisch zu .pad-0-1-3-1 */
--hs-logo-w: 220px;           /* an das SVG anpassen */
--hs-logo-h: 20px;
--hs-nav-h: max(calc(var(--hs-logo-h) + 2 * var(--hs-pad)), 44px);
--hs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--hs-gap: clamp(1.6rem, 2.2vw, 3rem);   /* Abstand zwischen Menüpunkten (und zur Lupe) */
}
@media (max-width: 1002px) { :root { --hs-pad: min(3vw, 30px); } }
@media (max-width: 800px)  { :root { --hs-pad: min(4vw, 36px); --hs-logo-w: 170px; --hs-logo-h: 15px; } }
@media (max-width: 386px)  { :root { --hs-pad: min(5vw, 40px); } }

html { scroll-padding-top: var(--hs-nav-h); }

/* Platz für die fixierte Leiste (außer auf der Startseite mit Hero) */
body:not(.hs-has-hero) .site-content { padding-top: var(--hs-nav-h); }

/* ---- Leiste ---- */
.hs-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--hs-nav-h);
background-color: #ffffff;
color: #333333;
transform: translateY(0);
transition: transform 0.6s var(--hs-ease),
            background-color 0.5s ease,
            color 0.5s ease;
}
.hs-nav.is-hidden { transform: translateY(-100%); }

/* über dem Startseiten-Teaser: transparent + weiße Schrift */
.hs-nav.is-over-hero:not(.is-open) {
background-color: rgba(255, 255, 255, 0);
color: #ffffff;
}

.hs-nav-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
margin: 0;
padding: 0 var(--hs-pad);
}

/* ---- Logo (SVG als Maske, damit es die Textfarbe übernimmt) ---- */
.hs-logo {
display: block;
flex: 0 0 auto;
color: #333333;
opacity: 0.3;
text-decoration: none;
transition: opacity 0.5s ease, color 0.5s ease;
}
.hs-logo:hover,
.hs-logo:focus-visible {
color: #333333;
opacity: 1;
}
.hs-nav.is-over-hero:not(.is-open) .hs-logo {
color: #ffffff;
opacity: 1;
}
.hs-logo-img {
display: block;
width: var(--hs-logo-w);
height: var(--hs-logo-h);
background-color: currentColor;
-webkit-mask: var(--hs-logo) no-repeat left center / contain;
        mask: var(--hs-logo) no-repeat left center / contain;
}

/* ---- Menü (breit) ---- */
.hs-menu {
min-width: 0;
margin-left: auto;
}
.hs-menu-list {
display: flex;
align-items: center;
gap: var(--hs-gap);
width: max-content;
white-space: nowrap;
}
.hs-menu a {
color: #333333;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 400;
text-decoration: underline 2px transparent;
text-underline-offset: 0.3em;
transition: color 0.5s ease, text-decoration-color 0.5s ease;
}
.hs-menu a:hover,
.hs-menu a:focus-visible {
color: #333333;
text-decoration-color: currentColor;
}

/* Über dem Startseiten-Teaser (nur bei breiter Leiste): weiße Schrift */
.hs-nav.is-over-hero:not(.is-open):not(.is-collapsed) .hs-menu a,
.hs-nav.is-over-hero:not(.is-open):not(.is-collapsed) .hs-menu a:hover,
.hs-nav.is-over-hero:not(.is-open):not(.is-collapsed) .hs-menu a:focus-visible {
color: #ffffff;
}

/* Wechsel beim Scrollen (über/unter dem Hero): schnell, unabhängig vom Hover */
.hs-nav.is-switching .hs-logo,
.hs-nav.is-switching .hs-menu a,
.hs-nav.is-switching .hs-search {
transition-duration: 0.2s;
}

.hs-menu .current-menu-item > a,
.hs-menu .current-menu-ancestor > a,
.hs-menu .current-post-ancestor > a,
.hs-menu .current_page_item > a {
font-weight: 700;
text-decoration-color: transparent;
}

.hs-menu .current-menu-item > a:hover,
.hs-menu .current-menu-ancestor > a:hover,
.hs-menu .current-post-ancestor > a:hover,
.hs-menu .current_page_item > a:hover {
text-decoration-color: currentColor;
}

/* ---- Hamburger ---- */
.hs-burger {
display: none;
position: relative;
flex: 0 0 auto;
width: 40px; height: 40px;
margin-right: -8px;
padding: 0;
border: 0;
background: none;
color: #333333;
cursor: pointer;
transition: color 0.2s ease, opacity 0.4s ease;
}
.hs-nav.is-over-hero:not(.is-open) .hs-burger { color: #ffffff; }
.hs-burger span {
position: absolute;
left: 8px;
width: 24px; height: 2px;
background-color: currentColor;
transition: transform 0.45s var(--hs-ease), opacity 0.3s ease, top 0.45s var(--hs-ease), background-color 0.2s ease;
}
.hs-burger span:nth-child(1) { top: 13px; }
.hs-burger span:nth-child(2) { top: 19px; }
.hs-burger span:nth-child(3) { top: 25px; }
.hs-nav.is-open .hs-burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.hs-nav.is-open .hs-burger span:nth-child(2) { opacity: 0; }
.hs-nav.is-open .hs-burger span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ---- Such-Icon (24x24, immer sichtbar; Trefferfläche 44x44) ---- */
.hs-search,
.hs-search:visited {
position: relative;
display: block;
flex: 0 0 auto;
width: 24px; height: 24px;
margin-left: var(--hs-gap);   /* gleicher Abstand wie zwischen den Menüpunkten */
color: #333333;
transition: color 0.5s ease, opacity 0.2s ease;
}
.hs-search::after {            /* größere Klickfläche, ohne Layout zu ändern */
content: "";
position: absolute;
inset: -10px;
}
.hs-search svg {
display: block;
width: 24px; height: 24px;
}
.hs-search svg path { fill: currentColor; }
.hs-search:hover,
.hs-search:focus-visible {
color: #333333;
opacity: 1.0;
}

/* Über dem Startseiten-Teaser: Lupe weiß (auch bei Hover/Fokus, auch im Burger-Modus) */
.hs-nav.is-over-hero:not(.is-open) .hs-search,
.hs-nav.is-over-hero:not(.is-open) .hs-search:visited,
.hs-nav.is-over-hero:not(.is-open) .hs-search:hover,
.hs-nav.is-over-hero:not(.is-open) .hs-search:focus-visible {
color: #ffffff;
}

/* ---- Menü (eingeklappt): weiße Fläche fährt von der Seitenoberkante herab ---- */
.hs-nav.is-collapsed .hs-burger {
  display: block;
  margin-left: auto;
  margin-right: calc(var(--hs-pad) / 1.2 - 8px);
}

.hs-nav.is-collapsed .hs-search { margin-left: 0; }

.hs-nav.is-collapsed .hs-menu {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: -1;                       /* hinter Logo, Burger, Lupe */
  margin: 0;
  padding-top: var(--hs-nav-h);      /* Inhalt beginnt unter der Leiste */
  background-color: #ffffff;
  color: #333333;
  transform: translateY(-100%);      /* oberhalb des Seitenrands */
  visibility: hidden;
  /* Schließen: Fläche startet erst, wenn die Punkte ausgeblendet sind (0.14s + 0.55s = 0.69s) */
  transition: transform 0.55s var(--hs-ease) 0.14s,
              visibility 0s linear 0.69s;
}

.hs-nav.is-collapsed.is-open .hs-menu {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.55s var(--hs-ease),
              visibility 0s;
}

.hs-nav.is-collapsed .hs-menu-list {
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  white-space: normal;
  padding: 0 var(--hs-pad);
}

/* Menüpunkte einzeln, versetzt einfaden – leicht von oben, synchron zum Einblenden */
.hs-nav.is-collapsed .hs-menu-list li {
  width: 100%;
  opacity: 0;
  transform: translateY(-0.6rem);
  /* Schließen: nur ausblenden, keine Bewegung. Startposition wird erst nach dem Ausfaden (0.3s) unsichtbar zurückgesetzt */
  transition: opacity 0.3s ease,
              transform 0s linear 0.3s;
}

.hs-nav.is-collapsed.is-open .hs-menu-list li {
  opacity: 1;
  transform: translateY(0);
  /* Öffnen: gleiche Dauer, gleiche Verzögerung (Start 0.3s, Versatz 0.07s) */
  transition: opacity 0.6s var(--hs-ease) calc(0.3s + var(--i, 0) * 0.07s),
              transform 0.6s var(--hs-ease) calc(0.3s + var(--i, 0) * 0.07s);
}

.hs-nav.is-collapsed .hs-menu-list li:nth-child(1) { --i: 0; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(2) { --i: 1; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(3) { --i: 2; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(4) { --i: 3; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(5) { --i: 4; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(6) { --i: 5; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(7) { --i: 6; }
.hs-nav.is-collapsed .hs-menu-list li:nth-child(8) { --i: 7; }

.hs-nav.is-collapsed .hs-menu a {
  display: inline-block;
  padding: 0.9rem 0;
  font-size: 1.5rem;
}

/* Abstand unter dem Sprachwähler = Abstand links (--hs-pad) */
.hs-nav.is-collapsed .hs-menu-list::after {
  content: "";
  display: block;
  height: var(--hs-pad);
}

/* Über dem Hero bleibt die Leiste transparent, die Fläche liefert das Weiß */
.hs-nav.is-over-hero.is-collapsed.is-open {
  background-color: rgba(255, 255, 255, 0);
}

/* Logo, Burger, Lupe wechseln zügig, während die Fläche an ihnen vorbeifährt */
.hs-nav.is-collapsed .hs-logo,
.hs-nav.is-collapsed .hs-search {
  transition: opacity 0.35s ease, color 0.35s ease;
}

.hs-nav.is-collapsed .hs-burger {
  transition: color 0.35s ease, opacity 0.4s ease;
}

/* Beim Messen: erzwungene Breitdarstellung ohne Übergänge */
.hs-nav.is-measuring, .hs-nav.is-measuring * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
.hs-nav, .hs-nav * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* Scroll-Anchoring nur auf der Startseite deaktivieren (vorher global auf html) */
.hs-front { overflow-anchor: none; }

/* ---- Animiertes HIFIStatement-Logo ---- */

.hs-logo {
    /*
     * Den bisherigen Platz im Header beibehalten.
     * So verschieben sich Menü und Hamburger beim Animieren nicht.
     */
    width: var(--hs-logo-w);
    height: var(--hs-logo-h);
}

.hs-logo-svg {
    display: block;

    /*
     * Proportionen des gelieferten SVG erhalten.
     * Die Buchstabenhöhe ändert sich beim Wechsel nicht.
     */
    width: auto;
    height: 100%;
    max-width: none;

    overflow: visible;
    fill: currentColor;
}

.hs-logo-svg [data-hs-letter] {
    /*
     * Bewegung und Deckkraft übernimmt ausschließlich JavaScript.
     * Keine zusätzlichen CSS-Transitions auf den Buchstaben.
     */
    transition: none !important;
}

/* ---- Sprachauswahl DE | EN ---- */
.hs-lang-item { display: flex; align-items: center; }

.hs-lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  line-height: 1;
  white-space: nowrap;
}
.hs-menu .hs-lang a {
  display: block;
  padding: 0.22em 0.38em;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  color: inherit;
}
.hs-menu .hs-lang a.is-active { font-weight: 700; }
.hs-menu .hs-lang a:hover,
.hs-menu .hs-lang a:focus-visible { text-decoration: none; opacity: 1.0; }

.hs-lang-sep {
  align-self: stretch;
  width: 1px;
  margin: 0.3em 0;
  background-color: currentColor;
}

/* Desktop: Rahmen in Textfarbe */
.hs-nav:not(.is-collapsed) .hs-lang { color: #333333; }
.hs-nav.is-over-hero:not(.is-open):not(.is-collapsed) .hs-lang,
.hs-nav.is-over-hero:not(.is-open):not(.is-collapsed) .hs-lang a { color: #ffffff; }

/* Responsive (Burger-Panel): links unter den Menüpunkten */
.hs-nav.is-collapsed .hs-menu-list .hs-lang-item {
  width: auto;
  margin-top: 3.6rem;
  padding-bottom: 0;
}

.hs-nav.is-collapsed .hs-lang { color: #333333; }
.hs-nav.is-collapsed .hs-menu .hs-lang a { padding: 0.35em 0.45em 0.25em; font-size: 1rem; }

/* ---- Overlay hinter dem Ausklapp-Menü ---- */
.hs-overlay {
  position: fixed;
  inset: 0;
  z-index: 999; /* unter .hs-nav (1000), über dem Seiteninhalt */
  background-color: rgba(51, 51, 51, 0.3); /* #333333, 30 % Deckkraft */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.55s var(--hs-ease),
              visibility 0s linear 0.55s;
}

.hs-nav.is-collapsed.is-open + .hs-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s var(--hs-ease),
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .hs-overlay { transition-duration: 0.01s !important; }
}

/* ---- Seitenübergang ---- */
@keyframes hs-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: hs-page-in 0.45s ease backwards; /* kein "both"/"forwards" */
  transition: opacity 0.35s ease;
}

.hs-leaving body { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; transition: none; }
  .hs-leaving body { opacity: 1; }
}

/* ---- Menü erst nach dem Messen zeigen (kein Aufblitzen, keine Überlappung) ---- */
.js .hs-nav:not(.is-ready) .hs-menu,
.js .hs-nav:not(.is-ready) .hs-burger {
  visibility: hidden;
  opacity: 0;
}

/* Einmaliges Einblenden beim Laden: Opacity-Transition statt Animation
   (eine Animation würde bei jedem Wechsel von is-collapsed neu starten) */
.hs-nav:not(.is-collapsed) .hs-menu {
  transition: opacity 0.4s ease;
}