/* ── NAV REBRAND (Presentation-Layer only) ─────────────────────────────────
   Neues Marken-Grün (#1ED760) + Schwarz (#191414) NUR für Header & Drawer.
   Wird NACH header.css bzw. home.css geladen und überschreibt gezielt deren
   Nav-/Drawer-Regeln. Keine Routing-/Struktur-Änderungen, keine Seitenstile.
   Der Rest der Site behält vorerst die bisherigen Tokens; der site-weite
   Rebrand (Hero etc.) folgt separat. */

:root{
  --nav-green:#1ED760;
  --nav-green-dark:#14532D;
  --nav-green-soft:rgba(30,215,96,.12);
  --nav-ink:#191414;
}

/* ── Desktop-Bar ── */
nav#mainNav{height:68px;border-bottom:1px solid rgba(25,20,20,.07);box-shadow:none}
#mainNav .nav-inner{gap:20px}
#mainNav .nav-links{gap:6px}
#mainNav .nav-links a,#mainNav .nav-links button{font-weight:600;color:var(--nav-ink);border-radius:100px;transition:background .15s ease,color .15s ease}
#mainNav .nav-links a:hover,#mainNav .nav-links button:hover{background:var(--nav-green-soft);color:var(--nav-ink)}

/* CTA: schwarze Pille (überschreibt die Ghost-Regel aus header.css).
   Explizite Höhe/Zentrierung, weil je nach Seite (home.css vs header.css)
   sonst min-height verloren geht und die Pille auf Textzeilenhöhe kollabiert. */
#navCtaBtn.nav-cta{background:var(--nav-ink)!important;color:#fff!important;border:none!important;font-weight:700!important;min-width:0!important;min-height:44px!important;padding:0 22px!important;border-radius:100px!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;line-height:1!important}
#navCtaBtn.nav-cta:hover{background:#000!important;border:none!important}
/* ── Mobiler Header: ruhige, ausbalancierte Reihe Logo | CTA | Burger ──────
   80px hoch mit mehr Luft, CTA als 46px-Pille (klar primär, aber nicht
   bullig), Burger als echter 46px-Kreis mit dezentem Rand auf gleicher
   Mittellinie. Body-Offsets werden mitgezogen (header.css setzt 60px). */
@media(max-width:900px){
  nav#mainNav{height:80px;padding:0 18px}
  body > main, body > #home-content{padding-top:80px!important}
  #mainNav .nav-inner{gap:12px}
  #mainNav .nav-right{gap:10px}
  #mainNav .logo{flex:0 0 auto}
  #mainNav .logo img{width:116px;height:auto;max-width:none}
  #navCtaBtn.nav-cta{min-height:46px!important;font-size:16px!important;padding:0 26px!important;min-width:0!important;margin-left:auto}
  .nav-menu-btn,#navMenuBtn{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;border-radius:50%!important;border:1px solid rgba(25,20,20,.14)!important;margin-left:0!important;box-shadow:none!important}
  .nav-menu-btn svg,#navMenuBtn svg{width:17px!important;height:17px!important}
  .hero-bg{min-height:calc(100vh - 80px)}
}
@media(max-width:409px){
  #mainNav .logo img{width:108px}
  #navCtaBtn.nav-cta{padding:0 22px!important}
}
@media(max-width:389px){
  #mainNav .logo img{width:96px}
  #navCtaBtn.nav-cta{padding:0 16px!important;font-size:15.5px!important}
}
@media(max-width:349px){
  nav#mainNav{padding:0 14px}
  #mainNav .nav-inner{gap:10px}
  #mainNav .logo img{width:80px}
  #navCtaBtn.nav-cta{padding:0 11px!important;font-size:15px!important}
}

/* Burger-Button neutral statt grün umrandet */
.nav-menu-btn,#navMenuBtn{border:1.5px solid rgba(25,20,20,.16)!important;color:var(--nav-ink)!important;border-radius:100px!important;background:#fff!important}
.nav-menu-btn svg,#navMenuBtn svg{stroke:var(--nav-ink)!important}
.nav-menu-btn:hover,#navMenuBtn:hover{border-color:var(--nav-ink)!important;background:var(--nav-green-soft)!important}

/* EN-Pille angleichen */
#mainNav .nav-lang{color:var(--nav-ink)!important;border:1.5px solid rgba(25,20,20,.16)!important;font-weight:700!important}
#mainNav .nav-lang:hover{border-color:var(--nav-ink)!important;background:var(--nav-green-soft)!important}

/* ── Audience-Switch: echter Zwei-Zustands-Schalter ─────────────────────────
   EIN weisser Indikator (.aud-ind) gleitet per transform zwischen zwei
   gleich breiten Hälften (Grid 1fr/1fr); aktiv/inaktiv leitet sich rein aus
   data-audience am Container ab. Ohne JS bleibt der Default (Patient) stehen
   und die Optionen funktionieren als normale Links. */
.nav-audience{display:none;position:relative;grid-template-columns:1fr 1fr;background:rgba(25,20,20,.05);border-radius:100px;padding:3px;margin-right:10px;flex-shrink:0}
@media(min-width:1180px){.nav-audience{display:grid}}
.aud-ind{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:#fff;border-radius:100px;box-shadow:0 1px 4px rgba(25,20,20,.12);transform:translateX(0);transition:transform .2s ease;pointer-events:none}
[data-audience="therapist"] .aud-ind{transform:translateX(100%)}
.nav-aud-opt{position:relative;z-index:1;text-align:center;font-size:12.5px;font-weight:600;color:rgba(25,20,20,.62);text-decoration:none;padding:6px 13px;border-radius:100px;white-space:nowrap;transition:color .15s ease;line-height:1}
.nav-aud-opt:hover{color:var(--nav-ink)}
.nav-aud-opt:focus-visible,.drw-aud-opt:focus-visible{outline:2px solid var(--nav-green-dark);outline-offset:1px}
[data-audience="patient"] [data-aud="patient"],[data-audience="therapist"] [data-aud="therapist"]{color:var(--nav-ink);font-weight:700}
[data-audience="patient"] [data-aud="patient"]::before,[data-audience="therapist"] [data-aud="therapist"]::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--nav-green);margin-right:6px;vertical-align:1px}
/* Ausgeblendete Hero-Panels (Audience-Umschaltung auf der Startseite) */
[data-audience-panel][hidden]{display:none!important}

/* ── "Mehr"-Dropdown ── */
.nav-more-li{position:relative}
.nav-more-btn{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--nav-ink);background:none;border:none;cursor:pointer;font-family:var(--font-sans);border-radius:100px;min-height:44px;padding:0 10px}
.nav-more-btn:hover,.nav-more-btn[aria-expanded="true"]{background:var(--nav-green-soft)}
.nav-more-btn svg{transition:transform .2s ease}
.nav-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-more-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:300px;background:#fff;border:1px solid rgba(25,20,20,.1);border-radius:18px;box-shadow:0 18px 50px rgba(25,20,20,.14);padding:10px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:300}
.nav-more-panel.open{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-more-group + .nav-more-group{border-top:1px solid rgba(25,20,20,.07);margin-top:8px;padding-top:8px}
.nav-more-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(25,20,20,.45);padding:6px 12px 4px}
#mainNav .nav-links .nav-more-panel a{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:2px;padding:9px 12px!important;min-height:auto;border-radius:10px;font-size:14px;font-weight:600;color:var(--nav-ink);text-decoration:none;transition:background .12s ease}
.nav-more-panel a:hover{background:var(--nav-green-soft)}
.nav-more-desc{font-size:11.5px;font-weight:400;color:rgba(25,20,20,.5)}

/* ── Drawer: Basis ── */
#siteDrawer{background:#fff}
.drw-header::after{background:linear-gradient(90deg,var(--nav-green) 0%,rgba(30,215,96,0) 100%)}

/* Audience-Switch im Drawer (gleiche Indikator-Mechanik) */
.drw-aud{display:grid;position:relative;grid-template-columns:1fr 1fr;background:rgba(25,20,20,.05);border-radius:100px;padding:3px;margin:14px 22px 6px;flex-shrink:0}
.drw-aud-opt{position:relative;z-index:1;text-align:center;font-size:13px;font-weight:600;color:rgba(25,20,20,.62);text-decoration:none;padding:9px 10px;border-radius:100px;line-height:1;transition:color .15s ease;min-height:auto}

/* Gruppen-Labels (rein visuell) */
.drw-group-label{padding:16px 22px 4px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(25,20,20,.42)}

/* Grün-Akzente im Drawer auf Markengrün umstellen */
.drw-acc-btn::before{background:var(--nav-green)!important;opacity:1}
.drw-acc-btn.open{background:var(--nav-green-soft)}
.drw-acc-btn.open .drw-acc-label{color:var(--nav-ink)!important}
.drw-acc-btn.open .drw-acc-chevron{background:var(--nav-green-soft)!important;color:var(--nav-green-dark)!important}
.drw-links li a:hover,.drw-links li button:hover{background:var(--nav-green-soft);color:var(--nav-ink)}
.drw-plain-links li a:hover,.drw-plain-links li button:hover{background:var(--nav-green-soft);color:var(--nav-ink)}
.drw-plain-links li a,.drw-plain-links li button{font-weight:600;color:var(--nav-ink)}
.drw-acc-label{font-size:15px;color:var(--nav-ink)}
.drw-logo-dot{background:var(--nav-green)!important}

/* Drawer-CTA: Markengrün, gross, sticky am unteren Rand des Scrollbereichs */
.drw-group--cta{position:sticky;bottom:0;background:#fff;border-top:1px solid rgba(25,20,20,.08);padding:12px 18px calc(14px + env(safe-area-inset-bottom));margin-top:auto;box-shadow:0 -10px 24px rgba(25,20,20,.05)}
.drw-cta-primary{background:var(--nav-green)!important;color:var(--nav-ink)!important;min-height:48px;border-radius:100px!important;font-size:15px;font-weight:700;box-shadow:none!important}
.drw-cta-primary:hover{background:#19c556!important;color:var(--nav-ink)!important}
.drw-cta-primary svg{stroke:var(--nav-ink)}
.drw-cta-secondary{border-radius:100px;min-height:44px}
.drw-cta-wa{color:var(--nav-green-dark);border-color:rgba(30,215,96,.4)}

/* ── Drawer-Scrolling-Fix ──────────────────────────────────────────────────
   header.css setzt .drw-body{overflow-y:hidden!important} und erlaubt Scrollen
   nur <=900px: der Desktop-Drawer konnte bei offenen langen Akkordeons
   (Standorte/Beschwerden/Therapien) nicht scrollen, untere Links waren
   unerreichbar. Shell (#siteDrawer) bleibt fixed/overflow:hidden mit
   100dvh-Fallback; NUR .drw-body ist der Scrollbereich. Die sticky CTA
   reserviert ihren Platz am Listenende selbst, daher kein Zusatz-Padding. */
.drw-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  overflow-y:auto!important;overflow-x:hidden;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(25,20,20,.18) transparent}
.drw-body::-webkit-scrollbar{display:block;width:4px}
.drw-body::-webkit-scrollbar-thumb{background:rgba(25,20,20,.18);border-radius:4px}
.drw-body > .drw-group{flex-shrink:0}
@media(max-width:900px){.drw-body{padding-bottom:0!important}}

/* Akkordeons: natürliche Höhe im scrollenden Drawer statt künstlicher Deckel.
   (header.css: 800px-Kappe + mobiler Inner-Scroll mit Maske und
   "scrollen"-Hinweis; beides ist mit scrollbarem Drawer obsolet und hat
   Inhalte abgeschnitten.) 3000px nur als Animations-Obergrenze. */
.drw-acc-body.open{max-height:3000px}
@media(max-width:768px){
  .drw-acc-body.open{max-height:3000px;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  .drw-acc-btn.open .drw-acc-btn-inner::after{display:none}
}