/* landing-shell.css — Shared header (nav) + footer for FizzyPeak marketing subpages.
   Extracted verbatim from the landing page (index.html) so header/footer look
   identical everywhere. Self-contained: includes the :root variables the shell uses.
   Loaded AFTER each subpage's own <style> so these rules win on shared selectors
   (.nav, footer, .btn, .logo, .wrap, .lang-switch). */

:root{
  --bg:#0a0a0f; --bg-2:#0f0f18; --bg-3:#14141f;
  --fg:#f5f5f7; --fg-muted:#9ca3af; --fg-dim:#6b7280;
  --accent:#a78bfa; --accent-2:#7c3aed; --accent-3:#5b21b6;
  --success:#34d399; --danger:#f87171; --warning:#fbbf24;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --radius:12px; --radius-lg:18px; --radius-sm:8px;
  --shadow-lg:0 24px 60px -12px rgba(124,58,237,.25);
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
}

/* Layout container */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* Nav — schlank & modern (~64px) */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(18px);background:rgba(10,10,15,.72);border-bottom:1px solid var(--border);transition:background .2s ease,box-shadow .2s ease}
.nav.scrolled{background:rgba(10,10,15,.88);box-shadow:0 10px 34px -16px rgba(0,0,0,.7)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0;min-height:64px;gap:18px}
/* Logo: Marken-Icon + Wortmarke (horizontale Lockup) */
.logo{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.logo-mark-img{height:34px;width:auto;display:block;flex-shrink:0;image-rendering:-webkit-optimize-contrast;transition:transform .18s ease}
.logo:hover .logo-mark-img{transform:scale(1.06) rotate(-2deg)}
.logo-word{font-weight:800;font-size:20px;letter-spacing:-.025em;white-space:nowrap;background:linear-gradient(120deg,#fff 38%,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:780px){.logo-mark-img{height:30px}.logo-word{font-size:18px}}
/* Legacy gestapeltes Logo — nur noch im Footer */
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#a78bfa,#7c3aed);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(124,58,237,.4)}
.logo-mark svg{color:white}
.logo-img{height:48px;width:auto;display:block;image-rendering:-webkit-optimize-contrast}
.logo-img-sm{height:64px;width:auto;display:block;image-rendering:-webkit-optimize-contrast}
@media(max-width:780px){.logo-img{height:40px}.logo-img-sm{height:54px}}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;color:var(--fg-muted);font-weight:500}
.nav-links a{color:var(--fg-muted);text-decoration:none;transition:color .15s ease}
.nav-links a:hover{color:var(--fg)}
.nav-cta{display:flex;gap:14px;align-items:center}
/* dezenter Login-Textlink statt zweitem Button */
.nav-login{color:var(--fg-muted);font-size:14px;font-weight:600;text-decoration:none;transition:color .15s ease;white-space:nowrap}
.nav-login:hover{color:var(--fg)}

/* Sprach-Umschalter — kompakter Segment-Toggle mit Globe */
.lang-switch{display:inline-flex;align-items:center;gap:1px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;padding:2px;position:static}
.lang-globe{width:14px;height:14px;margin:0 4px 0 5px;color:var(--fg-dim);flex-shrink:0}
.lang-switch button{padding:4px 8px;font-size:12px;font-weight:700;color:var(--fg-dim);letter-spacing:.03em;transition:all .15s ease;background:none;border:none;border-radius:6px;cursor:pointer}
.lang-switch button:hover{color:var(--fg)}
.lang-switch button.active{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:#fff}
@media(max-width:780px){.nav-login{display:none}}

/* Hamburger-Button (Mobile only) */
.nav-burger{display:none;width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--border);align-items:center;justify-content:center;flex-shrink:0;transition:all .15s ease;cursor:pointer}
.nav-burger:hover{background:rgba(255,255,255,.08);border-color:var(--border-strong)}
.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-burger span{position:relative;width:18px;height:2px;background:var(--fg);border-radius:2px;display:block;transition:transform .2s ease,opacity .2s ease}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s ease,top .2s ease}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:780px){
  .nav-burger{display:inline-flex}
  .nav-cta .btn-ghost{display:none}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,10,15,.96);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:8px 0;
    max-height:0;overflow:hidden;
    opacity:0;
    transition:max-height .2s ease-out,opacity .15s ease-out;
    pointer-events:none;
  }
  .nav-links.is-open{max-height:340px;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 24px;font-size:15px;color:var(--fg);border-top:1px solid var(--border)}
  .nav-links a:first-child{border-top:none}
  .nav-links a:hover,.nav-links a:active{background:rgba(167,139,250,.08);color:var(--accent)}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px;transition:all .16s ease;white-space:nowrap;border:1px solid transparent;text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#a78bfa,#7c3aed);color:white;box-shadow:0 8px 24px -4px rgba(124,58,237,.5)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px -4px rgba(124,58,237,.7);color:white}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--fg)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--border-strong);color:var(--fg)}
.btn-lg{padding:14px 28px;font-size:15px}

/* Footer */
footer{padding:48px 0 32px;border-top:1px solid var(--border);color:var(--fg-dim);font-size:13px;margin-top:48px;text-align:left}
footer a{color:var(--fg-muted);text-decoration:none;margin:0}
footer a:hover{color:var(--fg);text-decoration:none}
.footer-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:32px}
.footer-col{display:flex;flex-direction:column;gap:8px;min-width:140px}
.footer-col h4{color:var(--fg);font-size:13px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}
.footer-col a{color:var(--fg-muted);transition:color .15s}
.footer-col a:hover{color:var(--fg)}
.footer-bottom{padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}