/* ==========================================================================
   KÜSTENWERK Racing-Navigation („Boxentafel-Nav")
   Reiner CSS-Skin über der bestehenden Navigation – kein Markup, kein JS.
   Wird in /inc/head-common.html nach custom-theme.css geladen und gewinnt
   dadurch bei gleicher Spezifität.

   Desktop: Racing-Line-Hover, Dropdowns als Boxentafeln (Warnstreifen +
            Startnummern 01–06), Glanz-Sweep auf dem Buchen-Button.
   Mobil:   Menüpunkte fahren gestaffelt ein (Startaufstellung) + Nummern.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Desktop (gelbe Nav-Bar mit Dropdowns)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px){

  /* Kerb-Kante unter der Nav-Bar: auf Tobis Wunsch wieder entfernt (2026-06-12).
     Falls sie zurückkommen soll: als echtes DOM-Element umsetzen
     (<div class="fe-nav-kerb"> als letztes Kind der Nav-Bar), denn
     ::before/::after sind auf Nav-Bar UND Header bereits durch Theme-Deko belegt. */

  /* Dropdown-Pfeil reparieren: das Theme rendert hier nur einen absolut
     positionierten 4px-Punkt (liegt je nach Layout auf dem Text), die
     Chevron-Restore-Regel aus custom-theme greift nicht zuverlässig.
     Hier (lädt zuletzt) eindeutig als FontAwesome-Chevron neben dem Text. */
  .kw-header-v2-nav-bar .tt-main-menu-list > li.tt-submenu-wrap > .tt-submenu-trigger > a::after{
    content: "\f078" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 0.45em !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.75em !important;
    line-height: 1 !important;
    transform: translateY(-0.05em) !important;
    color: #111;
  }

  /* Racing-Line-Hover: schwarze Linie zieht unter dem Punkt durch.
     WICHTIG: bewusst als background-image gelöst – das ::after der Links
     ist bereits vom Dropdown-Pfeil (FontAwesome-Chevron) belegt! */
  .kw-header-v2-nav-bar .tt-main-menu-list > li > a,
  .kw-header-v2-nav-bar .tt-submenu-trigger > a{
    padding-bottom: 4px;
    background-image: linear-gradient(#111, #111);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2.5px;
    transition: background-size .28s cubic-bezier(.3,.9,.3,1);
  }
  .kw-header-v2-nav-bar .tt-main-menu-list > li > a:hover,
  .kw-header-v2-nav-bar .tt-submenu-trigger > a:hover{
    opacity: 1; /* Standard-Ausbleichen ersetzen */
  }
  .kw-header-v2-nav-bar .tt-main-menu-list > li > a:hover,
  .kw-header-v2-nav-bar .tt-submenu-trigger > a:hover,
  .kw-header-v2-nav-bar .tt-main-menu-list > li:hover > .tt-submenu-trigger > a{
    background-size: 100% 2.5px;
  }

  /* Dropdowns als Boxentafeln: Warnstreifen oben */
  .kw-header-v2-nav-bar .tt-submenu-list{
    position: relative;
    padding-top: 18px !important;
  }
  .kw-header-v2-nav-bar .tt-submenu-list::before{
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: repeating-linear-gradient(45deg, #ffc300 0 12px, #15161a 12px 24px);
    pointer-events: none;
  }

  /* Startnummern 01–06 vor den Dropdown-Punkten (automatisch via Counter) */
  .kw-header-v2-nav-bar .tt-submenu-list{
    counter-reset: fenav;
  }
  .kw-header-v2-nav-bar .tt-submenu-list li a::before{
    counter-increment: fenav;
    content: counter(fenav, decimal-leading-zero);
    display: inline-block;
    min-width: 24px;
    margin-right: 10px;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,195,0,.85);
    transition: color .2s ease;
  }
  .kw-header-v2-nav-bar .tt-submenu-list li a:hover::before{
    color: #ffc300;
  }

  /* Aktive Seite: invertierte Startnummer wie ein belegter Grid-Slot */
  .kw-header-v2-nav-bar .tt-submenu-list li.active a{
    color: #ffc300 !important;
    background: rgba(255,195,0,.06);
  }
  .kw-header-v2-nav-bar .tt-submenu-list li.active a::before{
    background: #ffc300;
    color: #111;
    border-radius: 5px;
    text-align: center;
    padding: 1px 0;
  }

  /* Buchen-Button: periodischer Glanz-Sweep (zieht den Blick zur Buchung) */
  .kw-header-v2-booking-btn{
    position: relative;
  }
  .kw-header-v2-booking-btn::after{
    content: "";
    position: absolute; top: -20%; bottom: -20%; left: 0; width: 36px;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
    transform: translateX(-60px) rotate(8deg);
    animation: feNavGlint 7s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes feNavGlint{
  0%   { transform: translateX(-60px) rotate(8deg); }
  9%   { transform: translateX(260px) rotate(8deg); }
  100% { transform: translateX(260px) rotate(8deg); }
}

/* --------------------------------------------------------------------------
   2) Mobil (aufklappendes Menü unter dem Burger)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){

  /* SICHERHEITS-FIX: custom-theme setzt weiter unten pauschal
     overflow: visible !important auf die Nav-Bar (für die Desktop-Dropdowns).
     Mobil hebelt das das Clipping des ZUGEKLAPPTEN Menüs aus – das unsichtbare
     Menü lief unter der Bar aus und fing als Klickfalle Taps auf FAQ &
     Newsletter ab. Hier (lädt nach custom-theme, gleiche Spezifität) wieder
     hart clippen; das geöffnete Menü scrollt intern, braucht also kein
     overflow:visible. */
  #tt-header.kw-header-v2 .kw-header-v2-nav-bar{
    overflow: hidden !important;
  }

  /* Startnummern vor den Hauptpunkten */
  #tt-header.kw-header-v2 .tt-main-menu-list{
    counter-reset: fenavm;
  }
  #tt-header.kw-header-v2 .tt-main-menu-list > li{
    counter-increment: fenavm;
  }
  #tt-header.kw-header-v2 .tt-main-menu-list > li > a::before,
  #tt-header.kw-header-v2 .tt-main-menu-list > li > .tt-submenu-trigger > a::before{
    content: counter(fenavm, decimal-leading-zero);
    display: inline-block;
    min-width: 26px;
    margin-right: 10px;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #ffc300;
  }

  /* Untermenü-Punkte: kleine Nummern + gelbe Leitlinie links */
  #tt-header.kw-header-v2 .tt-submenu-list{
    counter-reset: fenavs;
    border-left: 2px solid rgba(255,195,0,.35);
    padding-left: 8px !important;
  }
  #tt-header.kw-header-v2 .tt-submenu-list a::before{
    counter-increment: fenavs;
    content: counter(fenavs, decimal-leading-zero);
    display: inline-block;
    min-width: 22px;
    margin-right: 8px;
    font-family: "Big Shoulders Display", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,195,0,.75);
  }

  /* Startaufstellung: Hauptpunkte fahren gestaffelt ein, sobald das Menü
     öffnet. Wichtig: Das Theme sperrt transform/opacity auf den <li> mit
     !important – deshalb animieren wir die separaten Properties
     translate + filter, die davon nicht betroffen sind. */
  html.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li,
  body.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li,
  html.tt-m-menu-active #tt-header.kw-header-v2 .tt-main-menu-list > li,
  body.tt-m-menu-active #tt-header.kw-header-v2 .tt-main-menu-list > li,
  #tt-header.kw-header-v2.tt-m-menu-open .tt-main-menu-list > li,
  #tt-header.kw-header-v2.tt-m-menu-active .tt-main-menu-list > li,
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.active) .tt-main-menu-list > li,
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.is-active) .tt-main-menu-list > li,
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.tt-m-menu-open) .tt-main-menu-list > li{
    animation: feNavGridIn .42s cubic-bezier(.25,.9,.3,1) both;
  }
  html.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(2),
  body.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(2),
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.active) .tt-main-menu-list > li:nth-child(2){
    animation-delay: .06s;
  }
  html.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(3),
  body.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(3),
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.active) .tt-main-menu-list > li:nth-child(3){
    animation-delay: .12s;
  }
  html.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(4),
  body.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(4),
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.active) .tt-main-menu-list > li:nth-child(4){
    animation-delay: .18s;
  }
  html.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(5),
  body.tt-m-menu-open #tt-header.kw-header-v2 .tt-main-menu-list > li:nth-child(5),
  #tt-header.kw-header-v2:has(.tt-m-menu-toggle-btn.active) .tt-main-menu-list > li:nth-child(5){
    animation-delay: .24s;
  }
}

@keyframes feNavGridIn{
  from{ translate: -28px 0; filter: opacity(0); }
  to{   translate: 0 0;     filter: opacity(1); }
}

/* --------------------------------------------------------------------------
   3) Kompakt-fixierte Top-Bar (Logo, Ampel, Buchen-Button)
   Wird von /assets/js/fe-nav.js gesteuert. Zwei Klassen auf <html>:
     fe-nav-fixed  – ab Script-Start: Top-Bar dauerhaft fixiert + Platzhalter.
                     Bei Scrollposition 0 sieht das exakt wie vorher aus,
                     dadurch gibt es KEINEN Positions-Sprung beim Scrollen.
     fe-nav-stuck  – ab ~90px Scroll: nur noch die kompakte Größe (alles
                     per Transition animiert, in beide Richtungen smooth).
   CSS-Variablen: --fe-top-h (Originalhöhe = Platzhalter), --fe-top-now
   (aktuelle Höhe, Offset für das mobil fixierte Menü).
   -------------------------------------------------------------------------- */
.kw-header-v2-top{
  transition: padding .3s ease, box-shadow .3s ease;
}
.kw-header-v2-logo{
  transition: transform .3s ease;
}
.kw-header-v2-logo img{
  transition: max-height .3s ease;
}
.nav-opening-status{
  transition: transform .3s ease;
}
.kw-header-v2-booking-btn{
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease,
              min-height .3s ease, font-size .3s ease, padding .3s ease,
              border-radius .3s ease;
}

/* Dauerhaft fixiert + Platzhalter in Originalhöhe, damit nichts springt
   (custom-theme setzt padding:0 !important, daher hier ebenfalls !important) */
html.fe-nav-fixed #tt-header.kw-header-v2{
  padding-top: var(--fe-top-h, 108px) !important;
}
html.fe-nav-fixed .kw-header-v2-top{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  background: #111;
}

/* Kompakt-Zustand: nur Größenänderungen – alle animiert */
html.fe-nav-stuck .kw-header-v2-top{
  padding: 8px 34px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
html.fe-nav-stuck .kw-header-v2-logo{
  transform: translateY(2px);
}
html.fe-nav-stuck .kw-header-v2-logo img{
  max-height: 46px;
}
html.fe-nav-stuck .kw-header-v2-booking-btn{
  min-height: 42px;
  padding: 0 18px;
  font-size: 12px;
  border-radius: 12px; /* kompakt: weniger rund */
  transform: translateY(0);
}
html.fe-nav-stuck .kw-header-v2-booking-btn:hover{
  transform: translateY(-1px) !important;
}
/* Kompakt: Ampel niedriger. Der Buchen-Button holt sich seine Höhe per
   `#tt-header .kwb{align-self:stretch}` von genau dieser Ampel – sie allein
   bestimmt also die Höhe der ganzen Zeile, beide bleiben von selbst gleich hoch.
   (Die älteren .kw-header-v2-booking-btn-Regeln greifen seit der Umstellung auf
   das kwb-Buttonsystem nur noch auf den Vergleichsseiten.) */
html.fe-nav-stuck .nav-opening-status{
  transform: translateY(0);
  min-height: 46px;
  padding: 6px 14px;
  gap: 11px;
}
html.fe-nav-stuck .nav-opening-detail{
  display: none; /* kompakt: nur Ampel + Status-Label */
}

@media (max-width: 1024px){
  html.fe-nav-stuck .kw-header-v2-top{
    padding: 8px 16px;
  }
  html.fe-nav-stuck .kw-header-v2-logo img{
    max-height: 40px;
  }
  /* Mobiles Menü hängt fixiert direkt unter der Top-Bar,
     damit der Burger auch mitten auf der Seite funktioniert */
  html.fe-nav-fixed #tt-header.kw-header-v2 .kw-header-v2-nav-bar{
    position: fixed; top: var(--fe-top-now, 74px); left: 0; right: 0;
    z-index: 1099;
    padding: 0 12px !important;
    /* Transition-Liste aus custom-theme übernehmen + top ergänzen
       (Shorthand würde sonst die Auf/Zu-Animation des Menüs löschen) */
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      visibility 0.25s ease,
      margin-top 0.25s ease,
      top 0.3s ease;
  }
}

/* --------------------------------------------------------------------------
   4) Reduced Motion: alle Nav-Animationen aus
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .kw-header-v2-booking-btn::after{ animation: none; opacity: 0; }
  #tt-header.kw-header-v2 .tt-main-menu-list > li{ animation: none !important; }
  .kw-header-v2-nav-bar .tt-main-menu-list > li > a,
  .kw-header-v2-nav-bar .tt-submenu-trigger > a{ transition: none; }
  .kw-header-v2-top,
  .kw-header-v2-logo,
  .kw-header-v2-logo img,
  .nav-opening-status{ transition: none; }
}