/* =========================================================
   PNFLOW HEADER

   Angepasst auf das Design-System:
   - Navigationsfarben auf --accent-text (Gold lag bei 2.3:1)
   - Aktiver Menüpunkt zusätzlich unterstrichen, damit der
     Zustand nicht allein über die Farbe erkennbar ist
   - Kopfleiste etwas deckender, damit die Schrift auch über
     einer dunklen Bildstelle trägt
   - Logo-clamp repariert, es ist nie mitgewachsen
   - Mobile Navigation in --font-primary wie die Desktop-
     Navigation (lief vorher in --font-secondary)

   z-index: Die Werte 9999 und 999 bleiben absichtlich stehen.
   Der Header muss über allem liegen, was Astra und Elementor
   selbst stapeln; die Skala aus den Variablen greift hier
   bewusst nicht.
========================================================= */


/* =========================================================
   POSITIONIERUNG
========================================================= */

body:not(.home) #masthead {
  position: sticky !important;
  top: 0;
  left: auto;
  width: 100%;
  margin: 0 !important;
  z-index: 9999;
}

body.home #masthead {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0 !important;
  z-index: 9999;
}


/* WordPress-Adminbar */

body.admin-bar.home #masthead, body.admin-bar:not(.home) #masthead {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar.home #masthead, body.admin-bar:not(.home) #masthead {
    top: 46px;
  }
}


/* =========================================================
   KOPFLEISTE
   Deckkraft von 0.90 auf 0.96 erhöht. Bei 0.90 lag goldener
   Text über einer dunklen Bildstelle bei 4.2:1 – die Leiste
   liegt auf der Startseite ja fest über dem Hero-Foto.
   Bei 0.96 sind es 4.85:1, sie wirkt weiterhin leicht
   durchscheinend.
========================================================= */

.pnflow-header-light {
  position: relative;
  z-index: 999;
  width: 100%;
  margin: 0 !important;
  padding: 12px 0;
  background-color: rgba(var(--cream-rgb), 0.96);
  border-bottom: 1px solid rgba(var(--primary-rgb), var(--alpha-soft));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color var(--transition-slow), padding var(--transition-slow), box-shadow var(--transition-slow);
}


/* =========================================================
   DESKTOP · INNERER CONTAINER
========================================================= */

.pnflow-header-inner-light {
  width: min(var(--header-max-width), calc(100% - var(--gutter) * 2)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center !important;
  gap: 0 clamp(28px, 3.5vw, 72px) !important;
  overflow: visible;
}


/* =========================================================
   DESKTOP · NAVIGATIONSSPALTEN

   flex-direction: row ist neu und der eigentliche Fix.
   Elementor-Container laufen standardmässig in column-
   Richtung. Dadurch wirkte justify-content hier auf die
   senkrechte Achse und hatte keinen Effekt, waehrend
   align-items: center die Menues waagerecht in ihrer Spalte
   zentriert hat. Das rechte Menue stand damit mittig statt
   am Logo und ragte auf beiden Seiten aus seiner Spalte –
   rechts so weit, dass „Kontakt" aus dem Viewport lief.
   In row-Richtung greifen justify-content (waagerecht) und
   align-items (senkrecht) wieder wie gedacht.

   Das padding-left von 100px auf der rechten Spalte ist
   entfallen: Es war die im alten Kommentar beschriebene
   Asymmetrie (links 100px, rechts 200px Abstand zum Logo)
   und hat zusaetzlich nach aussen geschoben. Beide Spalten
   stehen jetzt symmetrisch im Grid-Abstand.
========================================================= */

.pnflow-nav-left-light, .pnflow-nav-right-light {
  --nav-arrow-size: 11px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  min-width: 0;
}

.pnflow-nav-left-light {
  justify-content: flex-end !important;
}

.pnflow-nav-right-light {
  justify-content: flex-start !important;
}


/* =========================================================
   DESKTOP · MENÜSTRUKTUR
========================================================= */

.pnflow-nav-left-light .elementor-widget-navigation-menu, .pnflow-nav-right-light .elementor-widget-navigation-menu {
  width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.pnflow-nav-left-light .hfe-nav-menu__layout-horizontal, .pnflow-nav-right-light .hfe-nav-menu__layout-horizontal {
  width: max-content !important;
  left: auto !important;
}

.pnflow-nav-left-light ul.hfe-nav-menu, .pnflow-nav-right-light ul.hfe-nav-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.pnflow-nav-left-light ul.hfe-nav-menu {
  justify-content: flex-end !important;
  gap: clamp(var(--space-sm), 2.2vw, var(--space-lg));
}

.pnflow-nav-right-light ul.hfe-nav-menu {
  justify-content: flex-start !important;
  gap: clamp(var(--space-sm), 2.2vw, var(--space-lg));
}


/* =========================================================
   DESKTOP · MENÜTYPOGRAFIE
   Navigation ist ein Bedienelement, deshalb --font-primary.
========================================================= */

.pnflow-nav-left-light .hfe-menu-item, .pnflow-nav-right-light .hfe-menu-item {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  padding: 12px 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary);
  font-size: clamp(14px, 1.35vw, 19px) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color var(--transition-base);
}

.pnflow-nav-left-light .hfe-menu-item {
  font-weight: 600 !important;
}


/* Erster Menüpunkt trägt dauerhaft die Goldlinie.

   Nachkomme statt direktes Kind: Sobald ein Menüpunkt ein
   Untermenü hat, packt HFE den Anker in ein zusätzliches
   div.hfe-has-submenu-container. Mit > griff die Regel
   deshalb nicht mehr und die Linie verschwand. Innerhalb
   eines Menüpunkts gibt es genau einen a.hfe-menu-item
   (Untermenü-Links heißen a.hfe-sub-menu-item), der
   Nachkomme ist also eindeutig.

   Kein text-decoration, sondern ein Hintergrundstreifen: Eine
   Unterstreichung liefe auch unter dem Dropdown-Pfeil durch,
   weil sie über den ganzen Link gezeichnet wird. Die Breite
   des Streifens ist die Linkbreite minus Pfeilabstand
   (--space-sm) und Pfeilbreite (--nav-arrow-size), die Linie
   endet damit exakt am letzten Buchstaben. Voraussetzung ist
   die feste Pfeilbreite weiter unten – das Glyph selbst ist
   nur rund 6.9px breit, mit dem alten Festwert 11px endete
   die Linie gut 4px zu früh. */

.pnflow-nav-left-light ul.hfe-nav-menu > li:first-child a.hfe-menu-item {
  text-decoration: none !important;
  background-image: linear-gradient(rgba(var(--accent-rgb), 0.8), rgba(var(--accent-rgb), 0.8));
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: calc(100% - var(--space-sm) - var(--nav-arrow-size)) 3px;
}

/* Hover und Fokus: --accent lag bei 2.3:1 */

.pnflow-nav-left-light .hfe-menu-item:hover, .pnflow-nav-left-light .hfe-menu-item:focus-visible,
.pnflow-nav-right-light .hfe-menu-item:hover, .pnflow-nav-right-light .hfe-menu-item:focus-visible {
  color: var(--accent-text) !important;
}


/* =========================================================
   DESKTOP · AKTIVER MENÜPUNKT
   Zusätzlich unterstrichen. Ein Zustand darf nicht allein
   über die Farbe erkennbar sein.
========================================================= */

.pnflow-nav-left-light .current-menu-item .hfe-menu-item, .pnflow-nav-left-light .current_page_item .hfe-menu-item, .pnflow-nav-left-light .current-menu-ancestor .hfe-menu-item,
.pnflow-nav-right-light .current-menu-item .hfe-menu-item, .pnflow-nav-right-light .current_page_item .hfe-menu-item, .pnflow-nav-right-light .current-menu-ancestor .hfe-menu-item {
  color: var(--accent-text) !important;
  font-weight: 700 !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(var(--accent-rgb), 0.9) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 8px;
}

.pnflow-nav-left-light ul.hfe-nav-menu > li:first-child.current-menu-item a.hfe-menu-item,
.pnflow-nav-left-light ul.hfe-nav-menu > li:first-child.current_page_item a.hfe-menu-item,
.pnflow-nav-left-light ul.hfe-nav-menu > li:first-child.current-menu-ancestor a.hfe-menu-item {
  text-decoration: none !important;
}
/* =========================================================
   DESKTOP · UNTERMENÜ

   Das Aufklappen selbst kommt vom Menü-Plugin. HFE rendert
   Untermenüs als ul.sub-menu im übergeordneten
   li.menu-item-has-children; die Links darin heißen
   a.hfe-sub-menu-item, nicht a.hfe-menu-item. Deshalb
   greifen die Regeln der Hauptnavigation hier nicht und
   das Aussehen steht komplett in diesem Block.

   Die Klappfläche hat ringsum dieselbe Haarlinie. Ein
   zusätzlicher Goldrand oben stand nur 1px unter der
   Goldlinie des ersten Menüpunkts und las sich als doppelte
   Linie. Die Zugehörigkeit trägt jetzt allein die Goldlinie
   über der Fläche.
========================================================= */

/* Feste Pfeilbreite: Das Icon-Glyph ist schmaler als seine
   Schriftgroesse. Ohne feste Box laesst sich die Goldlinie des
   ersten Menuepunkts nicht exakt am Text enden lassen. */

.pnflow-nav-left-light .sub-arrow, .pnflow-nav-right-light .sub-arrow {
  width: var(--nav-arrow-size);
  margin: 0 0 0 var(--space-sm) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pnflow-nav-left-light .sub-arrow i, .pnflow-nav-right-light .sub-arrow i {
  color: inherit !important;
  font-size: var(--nav-arrow-size) !important;
  line-height: 1 !important;
  transition: transform var(--transition-base);
}

.pnflow-nav-left-light .menu-item-has-children:hover .sub-arrow i, .pnflow-nav-right-light .menu-item-has-children:hover .sub-arrow i {
  transform: rotate(180deg);
}


/* Klappfläche */

.pnflow-nav-left-light ul.sub-menu, .pnflow-nav-right-light ul.sub-menu {
  min-width: 280px !important;
  max-width: 340px !important;
  margin: 0 !important;
  padding: var(--space-xs) 0 !important;
  background-color: rgba(var(--cream-rgb), 0.98) !important;
  border: 1px solid rgba(var(--primary-rgb), var(--alpha-soft)) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.pnflow-nav-left-light ul.sub-menu li.menu-item, .pnflow-nav-right-light ul.sub-menu li.menu-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* Einträge im Untermenü
   white-space: normal, weil „Transformative Atemsession in
   Bewegung" sonst die Klappfläche auseinanderzieht. */

.pnflow-nav-left-light a.hfe-sub-menu-item, .pnflow-nav-right-light a.hfe-sub-menu-item {
  position: relative;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px var(--space-md) !important;
  color: var(--primary) !important;
  font-family: var(--font-primary);
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  white-space: normal !important;
  text-decoration: none !important;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.pnflow-nav-left-light a.hfe-sub-menu-item:hover, .pnflow-nav-left-light a.hfe-sub-menu-item:focus-visible,
.pnflow-nav-right-light a.hfe-sub-menu-item:hover, .pnflow-nav-right-light a.hfe-sub-menu-item:focus-visible {
  color: var(--accent-text) !important;
  background-color: rgba(var(--accent-rgb), var(--alpha-soft)) !important;
}

.pnflow-nav-left-light a.hfe-sub-menu-item:focus-visible, .pnflow-nav-right-light a.hfe-sub-menu-item:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
  border-radius: 0;
}


/* Aktive Unterseite: Farbe plus Goldbalken, damit der
   Zustand nicht allein über die Farbe erkennbar ist */

.pnflow-nav-left-light ul.sub-menu .current-menu-item > a.hfe-sub-menu-item, .pnflow-nav-left-light ul.sub-menu .current_page_item > a.hfe-sub-menu-item,
.pnflow-nav-right-light ul.sub-menu .current-menu-item > a.hfe-sub-menu-item, .pnflow-nav-right-light ul.sub-menu .current_page_item > a.hfe-sub-menu-item {
  color: var(--accent-text) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* =========================================================
   DESKTOP · LOGO
   Vorher clamp(430px, 33vw, 500px). Der Mindestwert von
   430px war die zweite Ursache fuer das abgeschnittene
   Menue: Unterhalb ~1300px blieb neben dem Logo nicht genug
   Platz fuer beide Menuespalten. Jetzt clamp(200px, 22vw,
   360px) – bei 1400px sind das 303px statt 462px.
   Die Kopfleiste ist dadurch nur noch rund 126px statt
   172px hoch.
========================================================= */

.pnflow-logo-center-light {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0;
}

.pnflow-logo-light {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

.pnflow-logo-light .tahefobu-site-logo-wrapper, .pnflow-logo-light .tahefobu-site-logo, .pnflow-logo-light .hfe-site-logo, .pnflow-logo-light .hfe-site-logo-container {
  width: auto !important;
}

.pnflow-logo-light a {
  display: block;
}

.pnflow-logo-light img {
  display: block;
  width: clamp(200px, 22vw, 360px);
  max-width: none !important;
  height: auto;
  transition: width var(--transition-slow), transform var(--transition-slow);
}


/* =========================================================
   TASTATURFOKUS
   Ring in --primary (12:1). Gold erreichte als
   Fokusindikator nur 1.9:1.
========================================================= */

.pnflow-nav-left-light .hfe-menu-item:focus-visible, .pnflow-nav-right-light .hfe-menu-item:focus-visible, .pnflow-logo-light a:focus-visible, .pnflow-mobile-logo-img a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
  border-radius: 3px;
}


/* =========================================================
   GESCROLLTER ZUSTAND
========================================================= */

.pnflow-header-light.scrolled {
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: rgba(var(--cream-rgb), 0.96);
  box-shadow: 0 5px 24px rgba(var(--primary-rgb), var(--alpha-soft));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.pnflow-header-light.scrolled .pnflow-header-inner-light {
  gap: 0 30px !important;
}

.pnflow-header-light.scrolled .pnflow-logo-light img {
  width: clamp(180px, 15vw, 230px);
}

.pnflow-header-light.scrolled .pnflow-nav-left-light .hfe-menu-item, .pnflow-header-light.scrolled .pnflow-nav-right-light .hfe-menu-item {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
}


/* =========================================================
   MOBIL + TABLET · KOPFLEISTE
========================================================= */

.pnflow-mobile-header {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-mobile-header-inner {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 82px;
  margin: 0 !important;
  padding: 14px var(--space-md) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}


/* Logo */

.pnflow-mobile-logo {
  position: absolute !important;
  top: 50%;
  left: var(--space-md) !important;
  right: 94px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%);
}

.pnflow-mobile-logo-img {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 auto !important;
}

.pnflow-mobile-logo-img .elementor-widget-container, .pnflow-mobile-logo-img .hfe-site-logo, .pnflow-mobile-logo-img .hfe-site-logo-set, .pnflow-mobile-logo-img .hfe-site-logo-container {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-mobile-logo-img a {
  display: block;
}

.pnflow-mobile-logo-img img {
  display: block;
  width: clamp(200px, 30vw, 280px);
  max-width: 100% !important;
  height: auto;
}


/* =========================================================
   MOBIL · MENÜSCHALTER
   Rahmen von 0.12 auf 0.30 verstärkt. Der Rahmen ist das
   einzige Erkennungsmerkmal der Schaltfläche und lag bei
   0.12 weit unter den geforderten 3:1.
========================================================= */

.pnflow-mobile-nav {
  position: static !important;
  width: auto !important;
  min-width: 46px;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.pnflow-mobile-nav .elementor-widget-navigation-menu {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pnflow-mobile-nav .hfe-nav-menu {
  position: static !important;
}

.pnflow-mobile-nav .hfe-nav-menu__toggle {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: var(--primary) !important;
  background: transparent !important;
  border: 1px solid rgba(var(--primary-rgb), 0.30);
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.pnflow-mobile-nav .hfe-nav-menu__toggle:hover, .pnflow-mobile-nav .hfe-nav-menu__toggle:focus-visible {
  color: var(--accent-text) !important;
  border-color: rgba(var(--accent-text-rgb), 0.55);
  background-color: rgba(var(--accent-rgb), 0.08) !important;
}

.pnflow-mobile-nav .hfe-nav-menu__toggle:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.pnflow-mobile-nav .hfe-nav-menu-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: inherit !important;
  line-height: 1 !important;
}

.pnflow-mobile-nav .hfe-nav-menu-icon i {
  color: inherit !important;
  font-size: 22px !important;
  line-height: 1 !important;
}


/* =========================================================
   MOBIL + TABLET · AUSKLAPPMENÜ
========================================================= */

.pnflow-mobile-nav nav.hfe-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 12px 28px 26px !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  background-image: linear-gradient(rgb(var(--cream-rgb)), rgb(var(--cream-rgb))), linear-gradient(90deg, var(--secondary-blue), var(--secondary-green), var(--accent));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 0 !important;
  border-top: 1px solid rgba(var(--primary-rgb), var(--alpha-soft)) !important;
  border-bottom: 3px solid transparent !important;
  box-shadow: 0 18px 30px rgba(var(--primary-rgb), 0.08);
}

.pnflow-mobile-nav nav.hfe-dropdown ul.hfe-nav-menu {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  background-color: transparent !important;
}

.pnflow-mobile-nav nav.hfe-dropdown li.menu-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12) !important;
}

.pnflow-mobile-nav nav.hfe-dropdown li.menu-item:last-child {
  border-bottom: 0 !important;
}


/* Schrift wie in der Desktop-Navigation: --font-primary.
   Vorher lief die mobile Navigation in --font-secondary,
   die beiden Menüs sahen also unterschiedlich aus. */

.pnflow-mobile-nav nav.hfe-dropdown .hfe-menu-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 17px var(--space-xs) !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  color: var(--primary) !important;
  background-color: transparent !important;
  font-family: var(--font-primary) !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  white-space: normal !important;
  text-decoration: none !important;
  transition: color var(--transition-base);
}

.pnflow-mobile-nav nav.hfe-dropdown .hfe-menu-item:hover, .pnflow-mobile-nav nav.hfe-dropdown .hfe-menu-item:focus-visible {
  color: var(--accent-text) !important;
}

.pnflow-mobile-nav nav.hfe-dropdown .current-menu-item .hfe-menu-item, .pnflow-mobile-nav nav.hfe-dropdown .current_page_item .hfe-menu-item, .pnflow-mobile-nav nav.hfe-dropdown .current-menu-ancestor .hfe-menu-item {
  color: var(--accent-text) !important;
  font-weight: 700 !important;
  text-decoration-line: underline !important;
  text-decoration-color: rgba(var(--accent-rgb), 0.9) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}


/* =========================================================
   MOBIL + TABLET · UNTERMENÜ
   Im Ausklappmenü steht das Untermenü nicht als Panel,
   sondern eingerückt unter dem Elternpunkt. Die Goldlinie
   links macht die Zugehörigkeit sichtbar, ohne eine zweite
   Fläche einzuführen.
========================================================= */

.pnflow-mobile-nav nav.hfe-dropdown .menu-item-has-children .hfe-menu-item {
  justify-content: space-between !important;
}

.pnflow-mobile-nav nav.hfe-dropdown .sub-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -12px -8px -12px 0 !important;
  padding: 0 !important;
}

.pnflow-mobile-nav nav.hfe-dropdown .sub-arrow i {
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1 !important;
  transition: transform var(--transition-base);
}

.pnflow-mobile-nav nav.hfe-dropdown .sub-menu-active .sub-arrow i, .pnflow-mobile-nav nav.hfe-dropdown .hfe-has-submenu-container[aria-expanded="true"] .sub-arrow i {
  transform: rotate(180deg);
}

.pnflow-mobile-nav nav.hfe-dropdown ul.sub-menu {
  width: 100% !important;
  margin: 0 0 var(--space-xs) var(--space-xs) !important;
  padding: 0 0 0 var(--space-md) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-left: 2px solid rgba(var(--accent-rgb), 0.45) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pnflow-mobile-nav nav.hfe-dropdown ul.sub-menu li.menu-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.pnflow-mobile-nav nav.hfe-dropdown a.hfe-sub-menu-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 13px var(--space-xs) !important;
  display: flex !important;
  align-items: center !important;
  color: var(--primary) !important;
  background-color: transparent !important;
  font-family: var(--font-primary) !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  white-space: normal !important;
  text-decoration: none !important;
  transition: color var(--transition-base);
}

.pnflow-mobile-nav nav.hfe-dropdown a.hfe-sub-menu-item:hover, .pnflow-mobile-nav nav.hfe-dropdown a.hfe-sub-menu-item:focus-visible {
  color: var(--accent-text) !important;
}

.pnflow-mobile-nav nav.hfe-dropdown ul.sub-menu .current-menu-item > a.hfe-sub-menu-item, .pnflow-mobile-nav nav.hfe-dropdown ul.sub-menu .current_page_item > a.hfe-sub-menu-item {
  color: var(--accent-text) !important;
  font-weight: 700 !important;
}

/* =========================================================
   UMSCHALTPUNKT DESKTOP / MOBIL
========================================================= */

@media (min-width: 1025px) {
  .pnflow-header-inner-light {
    display: grid !important;
  }

  .pnflow-mobile-header {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .pnflow-header-inner-light {
    display: none !important;
  }

  .pnflow-mobile-header {
    display: flex !important;
  }

  .pnflow-header-light {
    padding: 0 !important;
  }
}


/* =========================================================
   TABLET · MENÜ IN ZWEI SPALTEN
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .pnflow-mobile-nav nav.hfe-dropdown {
    padding: var(--space-md) var(--space-lg) 28px !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown ul.hfe-nav-menu {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, auto) !important;
    column-gap: clamp(48px, 8vw, 90px) !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item {
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.09) !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(3), .pnflow-mobile-nav nav.hfe-dropdown li.menu-item:nth-child(5) {
    border-bottom: 0 !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown .hfe-menu-item {
    padding: 13px 4px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown li.menu-item-has-children {
    grid-column: 1;
    grid-row: 1;
  }

  .pnflow-mobile-nav nav.hfe-dropdown ul.sub-menu {
    margin-left: 0 !important;
    padding-left: var(--space-sm) !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown a.hfe-sub-menu-item {
    padding: 11px 4px !important;
    font-size: 16px !important;
  }
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 767px) {
  .pnflow-mobile-header-inner {
    min-height: 76px;
    padding: 12px var(--space-sm) !important;
  }

  .pnflow-mobile-logo {
    left: var(--space-sm) !important;
    right: 78px !important;
  }

  .pnflow-mobile-logo-img img {
    width: clamp(180px, 58vw, 230px);
  }

  .pnflow-mobile-nav .hfe-nav-menu__toggle {
    width: 44px !important;
    height: 44px !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown {
    padding: 10px var(--space-md) 22px !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown .hfe-menu-item {
    padding: var(--space-sm) 6px !important;
    font-size: 18px !important;
  }
}


/* =========================================================
   KLEINES MOBIL
========================================================= */

@media (max-width: 480px) {
  .pnflow-mobile-header-inner {
    min-height: 72px;
    padding: 10px 14px !important;
  }

  .pnflow-mobile-logo {
    left: 14px !important;
    right: 72px !important;
  }

  .pnflow-mobile-logo-img img {
    width: clamp(165px, 56vw, 205px);
  }

  .pnflow-mobile-nav .hfe-nav-menu__toggle {
    width: 42px !important;
    height: 42px !important;
  }

  .pnflow-mobile-nav .hfe-nav-menu-icon i {
    font-size: 20px !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown {
    padding: var(--space-xs) 22px 20px !important;
  }

  .pnflow-mobile-nav nav.hfe-dropdown .hfe-menu-item {
    padding: 15px 6px !important;
  }
}