/*
 * BetrTravel — globaler Header & Footer (Single Source of Truth).
 *
 * Markup: tools/site_chrome.py (NAV_HTML / FOOTER_HTML), wird per
 *   python tools/site_chrome.py
 * in jede Seite geschrieben. Tokens kommen aus /brand.css (direkt davor geladen).
 * Der Anmelden-/Konto-Button, das Burger-Menü und der Mobile-Drawer kommen aus
 * /auth-nav.js; ihre Darstellung im Header wird hier an das helle Brand-Layout angepasst.
 *
 * Selektoren hängen an .site-nav / .site-footer, damit generische Seiten-Regeln
 * (nav{}, .logo{}, a{} …) sie nie überschreiben.
 */

/* ── HEADER: hell, ruhig, leicht transluzent ─────────────────────────── */
.site-nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:600;height:var(--bt-nav-h,64px);margin:0;padding:0 max(5%,16px);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(250,247,242,.86);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid rgba(38,70,83,.06);font-family:var(--bt-font,'Manrope',Inter,Arial,sans-serif);line-height:normal;text-align:left;
  transition:box-shadow var(--bt-duration-base,240ms) var(--bt-ease,ease),background-color var(--bt-duration-base,240ms) var(--bt-ease,ease),border-color var(--bt-duration-base,240ms) var(--bt-ease,ease);}
.site-nav.is-scrolled{background:rgba(250,247,242,.94);border-bottom-color:rgba(38,70,83,.09);box-shadow:0 6px 24px rgba(38,70,83,.07);}

/* Logo: Signet (Inline-SVG) + Wortmarke in Manrope (Betr 800 / Travel 500) */
.site-nav .logo,.site-footer .footer-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;line-height:1;border-radius:10px;}
.site-nav .logo{color:var(--bt-deepTeal,#264653);}
.site-nav .logo .logo-mark{width:auto;height:34px;flex-shrink:0;display:block;transition:transform var(--bt-duration-card,320ms) var(--bt-ease,ease);}
.site-nav .logo .logo-word,.site-footer .footer-logo .logo-word{font-family:var(--bt-font);font-size:21px;font-weight:500;letter-spacing:-.035em;}
.site-nav .logo .logo-word b,.site-footer .footer-logo .logo-word b{font-weight:800;}
@media(hover:hover){.site-nav .logo:hover .logo-mark{transform:translateY(-1px);}}

.site-nav .nav-links{display:flex;align-items:center;gap:2px;margin:0 0 0 auto;padding:0;}
.site-nav .nav-link{position:relative;padding:8px 14px;border-radius:10px;font-family:var(--bt-font);font-size:14px;font-weight:600;line-height:normal;color:var(--bt-muted,#52625C);background:transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:color var(--bt-duration-fast,180ms) var(--bt-ease,ease),background-color var(--bt-duration-fast,180ms) var(--bt-ease,ease);}
.site-nav .nav-link:hover{color:var(--bt-deepTeal,#264653);background:rgba(38,70,83,.06);}
.site-nav .nav-link[aria-current="page"]{color:var(--bt-deepTeal,#264653);}

/* Auth-Button & Burger aus auth-nav.js im hellen Header */
.site-nav .anb{color:#fff;background:var(--bt-deepTeal,#264653);border:0;border-radius:var(--bt-radius-button,12px);padding:9px 16px;font-family:var(--bt-font);font-size:13.5px;font-weight:700;
  transition:background-color var(--bt-duration-base,240ms) var(--bt-ease,ease),transform var(--bt-duration-base,240ms) var(--bt-ease,ease);}
.site-nav .anb:hover{background:var(--bt-ocean,#2F6F6B);transform:translateY(-1px);}
.site-nav #_anav_burger:hover{background:rgba(38,70,83,.07);}
.site-nav #_anav_burger span{background:var(--bt-deepTeal,#264653);}

/* Mobile: Links ausblenden, Burger (aus auth-nav.js) übernimmt — gleicher Breakpoint wie der Burger. */
@media(max-width:680px){
  .site-nav .nav-links{display:none;}
  .site-nav .logo .logo-mark{height:30px;}
  .site-nav .logo .logo-word{font-size:19px;}
}

/* ── FOOTER: Deep Teal, invertiertes Logo ─────────────────────────────── */
.site-footer{background:var(--bt-deepTeal,#264653);margin:0;padding:clamp(56px,7vw,88px) var(--bt-gutter,max(5%,16px)) 32px;box-sizing:border-box;font-family:var(--bt-font);line-height:normal;text-align:left;color:#fff;}
.site-footer .footer-inner{max-width:var(--bt-max,1100px);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:28px;}
.site-footer .footer-brand{display:flex;flex-direction:column;gap:12px;}
.site-footer .footer-logo{color:#fff;}
.site-footer .footer-logo .logo-mark{height:38px;width:auto;display:block;}
.site-footer .footer-tagline{margin:0;font-size:13.5px;font-weight:500;letter-spacing:.04em;color:rgba(229,239,234,.78);}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:10px;}
.site-footer .footer-link{color:rgba(250,247,242,.78);font-size:14px;font-weight:500;text-decoration:none;border-radius:6px;transition:color var(--bt-duration-fast,180ms) var(--bt-ease,ease);}
.site-footer .footer-link:hover{color:#fff;}
.site-footer :focus-visible{outline-color:var(--bt-sunset,#E8A87C);}
.site-footer .footer-copy{max-width:var(--bt-max,1100px);margin:36px auto 0;padding-top:22px;border-top:1px solid rgba(250,247,242,.12);color:rgba(250,247,242,.6);font-size:12.5px;text-align:left;}

@media(max-width:640px){
  .site-footer{padding:44px 20px 28px;}
  .site-footer .footer-inner{flex-direction:column;align-items:flex-start;gap:22px;}
  .site-footer .footer-links{padding-top:0;gap:12px 22px;}
}

/* Eingeloggt: ruhiger Outline-Button statt Vollfläche */
.site-nav .anb.li{background:var(--bt-white,#fff);color:var(--bt-deepTeal,#264653);border:1px solid var(--bt-border,#E2E7E2);box-shadow:0 1px 2px rgba(38,70,83,.06);}
.site-nav .anb.li:hover{background:var(--bt-eucalyptus-soft,#EAF2EF);color:var(--bt-deepTeal,#264653);}

/* Geschlossener Mobile-Drawer: kein Schatten-Streifen am rechten Rand; Öffnen mit Brand-Easing */
html #_anav_drawer{box-shadow:none;transition:right var(--bt-duration-card,320ms) var(--bt-ease,ease),box-shadow var(--bt-duration-card,320ms) var(--bt-ease,ease);}
html #_anav_drawer.open{box-shadow:-12px 0 40px rgba(27,50,60,.18);}
html #_anav_overlay{background:rgba(27,50,60,.38);}
@media (prefers-reduced-motion: reduce){html #_anav_drawer{transition:none;}}

/* Icons im Auth-Bereich (auth-nav.js) */
.site-nav .anb{display:inline-flex;align-items:center;gap:8px;}
.site-nav .anb .i{width:16px;height:16px;}
html .adrop{border-radius:14px;border:1px solid var(--bt-line,rgba(38,70,83,.13));box-shadow:0 18px 44px rgba(27,50,60,.16);transform-origin:top right;}
html .adrop a,html .adrop button{gap:12px;font-family:var(--bt-font);font-weight:600;color:var(--bt-ink,#263633);}
html .adrop a .i,html .adrop button .i{width:17px;height:17px;color:var(--bt-sage-text,#5E7A72);}
html .adrop .sign-out,html .adrop .sign-out .i{color:var(--bt-danger,#A64037);}
html ._dlink{gap:12px;}
html ._dlink .i{width:18px;height:18px;color:var(--bt-sage-text,#5E7A72);}
html ._dauth-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;}
html ._dauth-btn .i{width:17px;height:17px;}
html ._dx .i,html ._anav_close .i{width:18px;height:18px;}
html ._anav_close{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:36px;height:36px;}