/* ==========================================================================
   App-Kontext: Header/Footer pro App (KK-Projekt, Schritt 1.2 ff.)
   Wird bis zum Livegang nur in der KK-Vorschau geladen (inc/functions/produkt-kontext.php).
   Farben kommen als CSS-Variablen --ff-* von body.produkt-<app>.
   Listenpfeile und Slider-Pfeile in Akzentfarbe setzt produkt-kontext.php inline.
   ========================================================================== */

/* Flächen pro App. Für Wechseljahre sind das dieselben Werte wie in style.css. */
body[class*="produkt-"],
body[class*="produkt-"] .hero-x {
  background-color: var(--ff-bg);
}
body[class*="produkt-"] .femfeel-welt .container,
body[class*="produkt-"] .footer-x .container {
  background-color: var(--ff-flaeche);
}

/* Header */
header.site-header-app {
  background-color: var(--ff-bg);
}

/* App-Pillen im Menü (Farbe pro App wird inline aus dem Produkt-Kontext gesetzt) */
.site-header-app .menu-app > a,
.site-header-app .menu-app > .dropdown > a {
  padding: 6px 12px !important;
  border-radius: 50px;
  transition: background-color .2s;
}

/* Endometriose: Bis zum Livegang blendet das Customizer-CSS Theme-Header und -Footer aus (.endo-body header/footer),
   die Seite hat beides im Inhalt (.lp-header, .lp-footer). In der Vorschau umgekehrt. */
body.endo-body header.site-header-app,
body.endo-body footer.footer-x {
  display: block !important;
}
body.produkt-endometriose .lp-header,
body.produkt-endometriose .lp-footer {
  display: none !important;
}
/* Der Theme-Header liegt absolut über dem Hero, der Customizer hat das Hero-Padding für den Inhalts-Header
   verkleinert (44px 0 90px). Oben wieder Platz für den Header, unten wie im Customizer. */
body.produkt-endometriose.endo-body .hero-x {
  padding: 157px 0 90px;
}

/* Seitenlayout der Endo-Startseite (Body-Klasse endo-body aus der Metabox „Custom Body Classes“).
   Aus dem Customizer übernommen (Stand 29.10.2026), damit es dort beim Livegang raus kann. */
.endo-body .hero-x .hero-circle-mobile,
.endo-body .ffw-tiles-sl-nav {
  display: none;
}
.endo-body .ffw-tile-wrap {
  max-width: 100%;
  min-width: auto;
}

/* Desktop: Menü, Kassen-Pill und „Jetzt starten“ bleiben einzeilig. Bei wenig Breite geben zuerst die Abstände nach,
   ganz eng fällt der Pill-Text weg (bleibt für Screenreader). Ein langer Kassenname kürzt sich mit „…“. */
@media (min-width: 992px) {
  header.site-header-app .nav-link,
  header.site-header-app .dropdown-toggle,
  header.site-header-app .nav-btn > .btn-primary {
    white-space: nowrap;
  }
  header.site-header-app .navbar-brand,
  header.site-header-app .nav-btn > .btn-primary {
    flex: none;
  }
  header.site-header-app .nav-btn,
  header.site-header-app .kk-finder {
    min-width: 0;
  }
  header.site-header-app .kk-finder__pill {
    max-width: 100%;
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  header.site-header-app .navbar-nav > .nav-item:not(:last-child) {
    padding-right: 24px;
  }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  header.site-header-app .navbar-brand img {
    height: 54px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  header.site-header-app .navbar-nav > .nav-item:not(:last-child) {
    padding-right: 12px;
  }
  header.site-header-app .nav-link,
  header.site-header-app .dropdown-toggle {
    font-size: 15px;
  }
  header.site-header-app .nav-btn > .btn-primary {
    padding: 12px 18px;
    font-size: 15px;
  }
}
@media (min-width: 992px) and (max-width: 1059px) {
  header.site-header-app .nav-btn .kk-finder__pill-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}