/* Gemeinsamer Header und Footer fuer lockcraft.de und shop.lockcraft.de (Quelle: LockcraftWebsite/_partials, angewendet mit scripts/apply_site_nav.sh).
   Alles unter nav.sn / footer.sf gescopt, damit die unterschiedlichen Seiten-Stile nicht stoeren. */
nav.sn { position:sticky; top:0; z-index:40; background:rgba(10,14,21,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--card-border,#232e45); height:auto; }
nav.sn .sn-in { max-width:1100px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:14px; height:68px; }
nav.sn .sn-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; text-decoration:none; color:var(--text,#e4eaf6); flex-shrink:0; }
nav.sn .sn-brand img { width:32px; height:32px; border-radius:8px; object-fit:contain; }
nav.sn .sn-links { display:flex; align-items:center; gap:2px; margin:0 0 0 10px; flex:1; font-size:14px; font-weight:600; }
nav.sn .sn-links > a, nav.sn .sn-dd-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:10px; color:var(--text-dim,#8592ae); background:none; border:0; font:inherit; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap; }
nav.sn .sn-links > a::after, nav.sn .sn-menu a::after { display:none !important; }
nav.sn .sn-links > a:hover, nav.sn .sn-dd-btn:hover, nav.sn .sn-dd:hover > .sn-dd-btn, nav.sn .sn-dd.open > .sn-dd-btn { color:var(--text,#e4eaf6); background:var(--card,#131a29); }
nav.sn .sn-dd-btn i { width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7; }
nav.sn .sn-links > a.sn-shop { color:#06111c; background:var(--accent,#4fc3ff); font-weight:800; margin:0 4px; }
nav.sn .sn-links > a.sn-shop:hover { background:var(--accent,#4fc3ff); filter:brightness(1.1); color:#06111c; }
nav.sn .sn-dd { position:relative; }
nav.sn .sn-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:270px; display:none; flex-direction:column; gap:2px; padding:8px; background:var(--card,#131a29); border:1px solid var(--card-border,#232e45); border-radius:14px; box-shadow:0 22px 50px rgba(0,0,0,.5); }
nav.sn .sn-dd:hover > .sn-menu, nav.sn .sn-dd:focus-within > .sn-menu, nav.sn .sn-dd.open > .sn-menu { display:flex; }
nav.sn .sn-dd::before { content:''; position:absolute; left:0; right:0; top:100%; height:8px; } /* Hover-Bruecke zwischen Button und Menue */
nav.sn .sn-menu a { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; color:var(--text-dim,#8592ae); text-decoration:none; font-size:13px; font-weight:400; }
nav.sn .sn-menu a b { color:var(--text,#e4eaf6); font-size:14px; font-weight:700; }
nav.sn .sn-menu a:hover { background:var(--card-hover,#182036); }
nav.sn .sn-cta { background:#5865F2; color:#fff !important; font-weight:700; font-size:14px; border-radius:10px; padding:10px 18px; text-decoration:none; margin-left:auto; display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; }
nav.sn .sn-cta:hover { filter:brightness(1.1); }
nav.sn .nav-toggle { display:none; align-items:center; justify-content:center; width:44px; height:44px; background:var(--card,#131a29); border:1px solid var(--card-border,#232e45); border-radius:10px; color:var(--text,#e4eaf6); cursor:pointer; padding:0; }
nav.sn .nav-toggle svg { width:22px; height:22px; }
nav.sn .nav-toggle .ic-close { display:none; }
nav.sn.open .nav-toggle .ic-open { display:none; }
nav.sn.open .nav-toggle .ic-close { display:block; }

@media (max-width: 900px) {
  nav.sn .sn-in { padding:0 14px; height:62px; gap:10px; }
  nav.sn .nav-toggle { display:inline-flex; }
  nav.sn .sn-links { display:none; position:absolute; top:100%; left:0; right:0; margin:0; flex-direction:column; align-items:stretch; gap:2px; padding:12px 14px 20px; background:var(--bg,#0a0e15); border-bottom:1px solid var(--card-border,#232e45); max-height:calc(100vh - 62px); overflow-y:auto; }
  nav.sn.open .sn-links { display:flex; }
  nav.sn .sn-links > a { padding:13px 14px; }
  nav.sn .sn-links > a.sn-shop { margin:6px 0; justify-content:center; }
  nav.sn .sn-dd::before { display:none; }
  nav.sn .sn-dd-btn { width:100%; justify-content:space-between; cursor:default; color:var(--accent,#4fc3ff); text-transform:uppercase; letter-spacing:.06em; font-size:12px; padding:14px 14px 6px; }
  nav.sn .sn-dd-btn i { display:none; }
  nav.sn .sn-menu { position:static; display:flex !important; background:none; border:0; box-shadow:none; padding:0 0 6px 6px; min-width:0; }
  nav.sn .sn-brand span { display:none; }
}

footer.sf { text-align:left; background:var(--bg-alt,#0f1420); border-top:1px solid var(--card-border,#232e45); margin-top:56px; padding:44px 0 0; color:var(--text-dim,#8592ae); font-size:14px; }
footer.sf .sf-in { max-width:1100px; margin:0 auto; padding:0 24px 34px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:34px; }
footer.sf .sf-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text,#e4eaf6); font-weight:800; font-size:18px; margin:0; }
footer.sf .sf-logo img { width:32px; height:32px; border-radius:8px; object-fit:contain; }
footer.sf .sf-brand p { margin:14px 0 0; line-height:1.65; max-width:300px; }
footer.sf .sf-ip b { color:var(--accent,#4fc3ff); font-family:'JetBrains Mono',monospace; }
footer.sf h4 { margin:2px 0 14px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text,#e4eaf6); }
footer.sf .sf-col a { display:block; margin:0 0 9px; padding:0; color:var(--text-dim,#8592ae); text-decoration:none; }
footer.sf .sf-col a:hover { color:var(--accent,#4fc3ff); }
footer.sf .sf-bottom { border-top:1px solid var(--card-border,#232e45); text-align:center; padding:18px 24px; font-size:12.5px; color:var(--text-faint,#5b6883); }
@media (max-width: 900px) {
  footer.sf .sf-in { grid-template-columns:1fr 1fr; gap:28px 20px; padding:0 18px 28px; }
  footer.sf .sf-brand { grid-column:1 / -1; }
  footer.sf .sf-col a { padding:5px 0; margin:0; }
}