/* ============================================================
   BOOST YOUR BODY — Custom Navigation
   Nutzt durchgaengig die Design-System-Variablen (gcid-* / gvid-*).
   ============================================================ */

:root {
    /* Mapping auf DIVI Design-System (Fallbacks = Markenwerte) */
    --byb-white:     var(--gcid-bg-white, #ffffff);
    --byb-dark:      var(--gcid-dark, #2d2d2d);
    --byb-card-dark: var(--gcid-card-dark, #3a3a3a);
    --byb-ink:       var(--gcid-text-dark, #1a1a1a);
    --byb-light:     var(--gcid-text-light, #f4f4f4);
    --byb-muted:     var(--gcid-text-grey, #666666);
    --byb-border:    var(--gcid-card-border, #e0e0e0);
    --byb-grey-mid:  var(--gcid-bg-grey-mid, #e8e8e8);
    --byb-yellow:    var(--gcid-yellow, #ffcd00);
    --byb-yellow-dk: var(--gcid-yellow-dark, #d4a800);
    --byb-blue:      var(--gcid-blue, #0085ca);
    --byb-purple:    var(--gcid-purple, #7b5ea7);
    --byb-pill:      var(--gvid-radius-pill, 50px);
    --byb-r-lg:      var(--gvid-radius-lg, 16px);
    --byb-r-md:      var(--gvid-radius-md, 12px);
    --byb-r-sm:      var(--gvid-radius-sm, 8px);

    --byb-nav-row:   112px;  /* Hoehe der stickyen Nav-Zeile — Platz fuer grosses Logo (82px) */
    --byb-max:       1280px;
    --byb-pad:       40px;
    --byb-font:      'Archivo', system-ui, -apple-system, sans-serif;
    --byb-font-body: 'Inter', system-ui, sans-serif;
    --byb-ease:      cubic-bezier(.4, 0, .2, 1);
}

/* ── DIVI-Header ausblenden ─────────────────────────────── */
.et-l--header, #et-top-navigation, #main-header,
#et_mobile_nav_menu, .et_pb_menu_0_tb_header { display: none !important; }
/* Kein body-padding-Hack mehr noetig: #byb-nav ist normaler Fluss,
   die Topbar scrollt weg, nur .byb-nav-sticky bleibt stehen (position:sticky). */

/* ── Skip-Link ──────────────────────────────────────────── */
.byb-skip-link {
    position: fixed; top: -100%; left: 0; z-index: 99999;
    padding: 10px 24px; background: var(--byb-yellow); color: var(--byb-ink);
    font-family: var(--byb-font); font-size: 13px; font-weight: 700;
    text-decoration: none; border-radius: 0 0 var(--byb-r-sm) var(--byb-r-sm); white-space: nowrap; transition: top .15s;
}
.byb-skip-link:focus { top: 0; outline: none; }
.admin-bar .byb-skip-link:focus { top: 32px; }

/* ── Header-Wrapper ─────────────────────────────────────── */
/* #byb-nav ist normaler Fluss (nicht fixed) — Topbar + Sticky-Zeile
   nehmen ihre natuerliche Hoehe ein, kein body-padding-Hack noetig. */
/* display:contents -> #byb-nav bildet keine eigene Box; Topbar + Sticky-Zeile
   liegen direkt im Body-Flow. So klebt .byb-nav-sticky am Viewport (Body ist
   seitenhoch) und die Topbar scrollt normal weg. */
#byb-nav { display: contents; font-family: var(--byb-font); }

/* ── Announcement-Bar (scrollt normal mit der Seite weg) ─── */
.byb-topbar {
    background: var(--byb-yellow); text-align: center; padding: 9px 20px; line-height: 1.3;
}
.byb-topbar p {
    margin: 0; font-family: var(--byb-font-body); font-size: 13.5px; font-weight: 600;
    letter-spacing: .01em; color: var(--byb-ink);
}
.byb-topbar a { color: var(--byb-ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.byb-topbar a:hover { color: #000; }

/* ── Sticky Nav-Zeile — bleibt beim Scrollen oben ─────────── */
.byb-nav-sticky {
    position: sticky; top: 0; z-index: 9000;
    background: var(--byb-white);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s var(--byb-ease), border-color .3s var(--byb-ease);
}
.byb-nav-sticky.is-scrolled {
    box-shadow: 0 8px 30px rgba(20, 17, 14, .09);
    border-bottom-color: var(--byb-border);
    --byb-nav-row: 72px;   /* Shrink beim Scrollen: kompaktere Zeile */
}

.admin-bar .byb-nav-sticky { top: 32px; }

.byb-nav-inner {
    display: flex; align-items: center; gap: 30px;
    height: var(--byb-nav-row); max-width: var(--byb-max); margin: 0 auto; padding: 0 var(--byb-pad);
    transition: height .28s var(--byb-ease);
}
/* Logo schrumpft beim Scrollen auf kompakte Groesse */
.byb-nav-sticky.is-scrolled .byb-logo-img { height: 50px; }

/* ── Logo ───────────────────────────────────────────────── */
.byb-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.byb-logo-img { height: 82px; width: auto; max-width: 260px; object-fit: contain; display: block; transition: transform .25s var(--byb-ease), height .28s var(--byb-ease); }
.byb-logo-link:hover .byb-logo-img { transform: scale(1.03); }
.byb-logo-text { font-size: 22px; font-weight: 900; letter-spacing: -.01em; color: var(--byb-ink); }

/* ── Primary Nav ────────────────────────────────────────── */
.byb-primary-nav { display: flex; align-items: center; height: 100%; margin-left: auto; }
.byb-nav-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; height: 100%; }
.byb-nav-item { display: flex; align-items: center; height: 100%; }

.byb-nav-link {
    position: relative; display: flex; align-items: center; gap: 6px; padding: 9px 16px;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em;
    color: var(--byb-ink); text-decoration: none; white-space: nowrap; cursor: pointer;
    border-radius: var(--byb-r-md);
    transition: color .18s var(--byb-ease), background .18s var(--byb-ease);
}
/* Moderner Pill-Hover statt Unterstrich */
.byb-nav-link:hover { color: var(--byb-ink); background: rgba(26,26,26,.06); }
/* Flyout-Trigger: gelber Aktiv-Look solange Hover/Fokus (Menue offen) */
.byb-nav-item.has-flyout:hover > .byb-nav-link,
.byb-nav-item.has-flyout:focus-within > .byb-nav-link { background: rgba(255,205,0,.18); color: var(--byb-ink); }
.byb-nav-link:focus-visible { outline: 2px solid var(--byb-blue); outline-offset: 2px; }
/* Highlight-Nav-Punkt (App) — extra Farbe (Markenblau, gefuellte Pill) */
.byb-nav-item.byb-nav-hl { margin-left: 14px; }   /* Abstand vom letzten Text-Menuepunkt zum Button */
.byb-nav-item.byb-nav-hl .byb-nav-link { background: var(--byb-blue); color: #fff; font-weight: 700; }
.byb-nav-item.byb-nav-hl .byb-nav-link:hover { background: var(--byb-blue); color: #fff; }
.byb-nav-chevron { transition: transform .22s var(--byb-ease); opacity: .55; }
.byb-nav-item.has-flyout:hover .byb-nav-chevron,
.byb-nav-item.has-flyout:focus-within .byb-nav-chevron { transform: rotate(180deg); opacity: 1; }

/* ── Actions ────────────────────────────────────────────── */
.byb-nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.byb-cta {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 16px; background: var(--byb-yellow); color: var(--byb-ink);
    font-family: var(--byb-font); font-size: 13px; font-weight: 700; letter-spacing: -.01em;
    text-decoration: none; border-radius: var(--byb-pill); white-space: nowrap;
    box-shadow: 0 4px 16px rgba(255, 205, 0, .32);
    transition: background .18s var(--byb-ease), transform .18s var(--byb-ease), box-shadow .18s var(--byb-ease);
}
.byb-cta:hover { background: var(--byb-yellow-dk); color: var(--byb-ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 17, 14, .18); }
.byb-cta:active { transform: translateY(0); }
.byb-cta:focus-visible { outline: 2px solid var(--byb-ink); outline-offset: 2px; }
/* Header-Buttons vereinheitlicht: kompakt, gleiches Mass, moderate Rundung (kein Vollpill) */
.byb-cta,
.byb-nav-item.byb-nav-hl .byb-nav-link {
    padding: 8px 16px; font-size: 14px; font-weight: 700; letter-spacing: -.01em;
    font-family: var(--byb-font-body);   /* Inter — UI-Schrift fuer Buttons statt Archivo */
    border-radius: var(--byb-r-md);
}
.byb-cta { box-shadow: none; }
.byb-nav-item.byb-nav-hl .byb-nav-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 17, 14, .18); }

.byb-cta--full { width: 100%; justify-content: center; padding: 18px 26px; font-size: 18px; box-shadow: none; }

/* ── Hamburger ──────────────────────────────────────────── */
.byb-hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; padding: 11px; background: none; border: none; cursor: pointer;
}
.byb-hamburger span { display: block; width: 100%; height: 2.5px; background: var(--byb-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.byb-hamburger:focus-visible { outline: 2px solid var(--byb-blue); outline-offset: 2px; border-radius: var(--byb-r-sm); }

/* ── Aktiv-Zustand (aktuelle Seite) ─────────────────────────────────────────── */
.byb-nav-item.is-active:not(.byb-nav-hl) > .byb-nav-link { font-weight: 700; }
.byb-nav-item.is-active:not(.byb-nav-hl) > .byb-nav-link::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px;
    background: var(--byb-yellow); border-radius: 2px;
}

/* ── Flyout (Desktop) — Hover/Fokus oeffnet, sitzt an der Link-Mitte ────────── */
.byb-nav-item.has-flyout { position: relative; }

.byb-flyout {
    position: absolute; top: calc(50% + 30px); left: 0;
    min-width: 268px; background: var(--byb-white);
    border: 1px solid var(--byb-border); border-radius: var(--byb-r-lg);
    box-shadow: 0 2px 6px rgba(20, 17, 14, .05), 0 18px 44px rgba(20, 17, 14, .14);
    padding: 8px;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 30px top;
    transition: opacity .18s var(--byb-ease), transform .18s var(--byb-ease), visibility .18s;
    z-index: 9010;
}
/* Hover ODER Tastatur-Fokus im Item oeffnet. :hover gilt auch fuer das DOM-Kind (Flyout). */
.byb-nav-item.has-flyout:hover > .byb-flyout,
.byb-nav-item.has-flyout:focus-within > .byb-flyout {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
/* Unsichtbare Bruecke ueberbrueckt die Luecke Trigger->Flyout (kein Hover-Flackern) */
.byb-flyout::before {
    content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}

.byb-flyout-links { list-style: none; margin: 0; padding: 0; }
.byb-flyout-links a {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--byb-r-md);
    font-family: var(--byb-font-body); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
    color: var(--byb-ink); text-decoration: none;
    transition: background .14s var(--byb-ease), color .14s var(--byb-ease);
}
.byb-flyout-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--byb-border);
    transition: background .16s var(--byb-ease), transform .16s var(--byb-ease);
}
.byb-flyout-links a:hover { background: var(--byb-light); }
.byb-flyout-links a:hover .byb-flyout-dot { background: var(--byb-yellow); transform: scale(1.4); }
.byb-flyout-links a.is-active { background: rgba(255, 205, 0, .12); }
.byb-flyout-links a.is-active .byb-flyout-dot { background: var(--byb-yellow); }
.byb-flyout-links a:focus-visible { outline: 2px solid var(--byb-blue); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
    .byb-flyout { transition: opacity .18s, visibility .18s; transform: none; }
    .byb-nav-item.has-flyout:hover > .byb-flyout, .byb-nav-item.has-flyout:focus-within > .byb-flyout { transform: none; }
}

/* ── Backdrop ───────────────────────────────────────────── */
#byb-backdrop {
    position: fixed; inset: var(--byb-nav-row) 0 0 0; background: rgba(20, 17, 14, .42);
    z-index: 8800; opacity: 0; pointer-events: none; transition: opacity .28s var(--byb-ease); backdrop-filter: blur(2px);
}
#byb-backdrop.is-visible { opacity: 1; pointer-events: auto; }

/* ── Mobile Overlay (App-Style, dunkel) ─────────────────── */
#byb-mobile {
    position: fixed; inset: 0; z-index: 9500; background: var(--byb-dark);
    display: flex; flex-direction: column; overflow-y: auto; animation: bybFade .3s var(--byb-ease);
}
#byb-mobile[hidden] { display: none; }
/* WP-Admin-Bar (nur eingeloggt): Overlay darunter schieben, damit Logo + Schliessen-Button
   nicht verdeckt sind. Besucher (ohne Admin-Bar) bekommen weiter Vollbild ab Kante 0. */
.admin-bar #byb-mobile { top: 46px; }
@media (min-width: 783px){ .admin-bar #byb-mobile { top: 32px; } }
@keyframes bybFade { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

.byb-mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: max(0px, env(safe-area-inset-top)) 22px 0; min-height: 64px; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.byb-logo-img--inv { filter: invert(1) brightness(2); height: 48px; }
.byb-mobile-close {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    background: none; border: none; cursor: pointer; color: var(--byb-white);
}
.byb-mobile-close:focus-visible { outline: 2px solid var(--byb-yellow); outline-offset: 2px; border-radius: var(--byb-r-sm); }

.byb-mobile-nav { flex: 1; padding: 28px 0; }
.byb-mobile-list { list-style: none; margin: 0; padding: 0; }
.byb-mobile-li { border-bottom: 1px solid rgba(255,255,255,.08); }

.byb-mobile-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 58px; padding: 4px 26px; background: none; border: none; cursor: pointer; text-align: left;
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(23px, 6vw, 28px); font-weight: 700; letter-spacing: -.02em;
    color: var(--byb-white); text-decoration: none; transition: color .16s;
}
.byb-mobile-row:hover, .byb-mobile-row[aria-expanded="true"] { color: var(--byb-yellow); }
.byb-mobile-row:focus-visible { outline: 2px solid var(--byb-yellow); outline-offset: -3px; }
.byb-acc-icon { transition: transform .2s; flex-shrink: 0; color: rgba(255,255,255,.5); }
.byb-mobile-row[aria-expanded="true"] .byb-acc-icon { transform: rotate(180deg); color: var(--byb-yellow); }

.byb-acc-list { list-style: none; margin: 0; padding: 0 26px 14px; }
.byb-acc-list[hidden] { display: none; }
/* Explizite Font-Family — sonst erbt der Submenu-Link DIVIs kaputten Body-Font
   ("Inter||||||||") und faellt auf Serif zurueck. */
.byb-acc-link { display: block; padding: 8px 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px; font-weight: 500; color: rgba(244,244,244,.82); text-decoration: none; transition: color .14s; }
.byb-acc-link:hover, .byb-acc-link:focus-visible { color: var(--byb-yellow); outline: none; }
.byb-acc-link--parent { color: var(--byb-yellow); font-weight: 700; }

.byb-mobile-foot {
    padding: 28px 30px max(42px, calc(24px + env(safe-area-inset-bottom))); border-top: 1px solid rgba(255,255,255,.1);
    display: flex; flex-direction: column; align-items: center; gap: 16px; flex-shrink: 0;
}
.byb-mobile-meta { margin: 0; font-size: 14px; font-weight: 600; color: rgba(244,244,244,.6); font-family: var(--byb-font-body); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px){ :root { --byb-pad: 26px; } .byb-nav-link { padding: 0 13px; font-size: 15px; } .byb-nav-link::after { left: 13px; right: 13px; } }
@media (max-width: 900px){
    .byb-primary-nav, .byb-cta { display: none; }
    .byb-hamburger { display: flex; }
    .byb-nav-inner { justify-content: space-between; gap: 12px; }
    /* Kompakter App-Header: niedrige Zeile, Logo passend — kein Leerraum.
       is-scrolled auf dieselbe Hoehe fixen, damit die Zeile nicht springt. */
    .byb-nav-sticky, .byb-nav-sticky.is-scrolled { --byb-nav-row: 60px; }
    .byb-logo-img, .byb-nav-sticky.is-scrolled .byb-logo-img { height: 38px; }
    .byb-topbar p { font-size: 12.5px; }
    .admin-bar .byb-nav-sticky { top: 46px; }
}

/* Hero-Karten quadratisch (Startseite: Dein Coach / 1:1 Feedback) */
.byb-hero-sq { aspect-ratio: 1 / 1; max-width: 320px; margin-left: 0; margin-right: auto; }
@media (max-width: 980px){ .byb-hero-sq { aspect-ratio: auto; max-width: none; } }