/* components.css — Panzer IT: Header/Navigation, Warenkorb-Icon, Sticky-CTA, Footer
   Setzt auf den Tokens/Utilities aus base.css auf (keine Neudefinition von Variablen). */

/* ==========================================================================
   Skip-Link (Accessibility) — global, da auf JEDER Seite eingebettet.
   Standard versteckt oberhalb des Viewports, nur bei :focus sichtbar.
   ========================================================================== */
.skip-link{
  position:fixed; top:-4rem; left:var(--sp-2); z-index:300;
  background:var(--c-copper); color:#14110c; padding:.7em 1.2em;
  border-radius:8px; font-family:var(--font-display); font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:var(--sp-2); }

/* ==========================================================================
   Site Header / Navigation
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header::before{
  /* dezenter Verlauf im transparenten Zustand, damit heller Content unter dem Header lesbar bleibt */
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(20,22,25,.55), rgba(20,22,25,0));
  opacity:1; transition:opacity .35s var(--ease);
}
.site-header.scrolled{
  background:var(--c-base);
  border-bottom-color:var(--c-copper);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.site-header.scrolled::before{ opacity:0; }

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-block:var(--sp-2);
}

/* --- Logo --- */
.logo{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:700;
  font-size:1.15rem; letter-spacing:-.01em; white-space:nowrap;
  color:var(--c-text);
}
.logo-mark{ flex:none; }
.logo-text em{
  font-style:normal; color:var(--c-copper);
}
.logo-img{
  flex:none; width:auto;
  height:clamp(42px, 3.4vw, 56px);
  display:block;
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.logo:hover .logo-img{ transform:translateY(-1px) scale(1.02); }
@media (max-width:640px){ .logo-img{ height:40px; } }

/* --- Nav --- */
.site-nav ul{
  display:flex; align-items:center; gap:var(--sp-3);
  list-style:none;
}
.site-nav a{
  position:relative; display:inline-block;
  font-family:var(--font-display); font-size:.92rem; font-weight:500;
  letter-spacing:.01em; color:var(--c-text); padding-block:.35em;
  opacity:.85; transition:opacity .25s var(--ease), color .25s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--c-copper); transition:right .25s var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible{ opacity:1; }
.site-nav a:hover::after,
.site-nav a:focus-visible::after{ right:0; }
.site-nav a[aria-current="page"]{
  opacity:1; color:var(--c-brass);
}
.site-nav a[aria-current="page"]::after{ right:0; }

/* --- Actions (Warenkorb + Burger) --- */
.site-header__actions{ display:flex; align-items:center; gap:var(--sp-2); }

.cart-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:999px; border:1px solid var(--c-line);
  background:transparent; color:var(--c-text); cursor:pointer;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.cart-toggle:hover, .cart-toggle:focus-visible{
  border-color:var(--c-copper); transform:translateY(-2px);
}
.cart-count{
  position:absolute; top:-.35rem; right:-.35rem;
  min-width:1.15rem; height:1.15rem; padding:0 .3em;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--c-copper); color:#14110c;
  font-family:var(--font-body); font-size:.68rem; font-weight:700; line-height:1;
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:2.4rem; height:2.4rem; border-radius:999px; border:1px solid var(--c-line);
  background:transparent; cursor:pointer; padding:0; align-items:center;
}
.nav-toggle span{
  display:block; width:1.1rem; height:2px; background:var(--c-text);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Mobile: Off-Canvas-Menü
   ========================================================================== */
@media (max-width:960px){
  .nav-toggle{ display:inline-flex; }

  .site-nav{
    position:fixed; inset:0 0 0 auto; z-index:99;
    width:min(84vw,340px); height:100vh; height:100dvh;
    background:var(--c-panel); border-left:1px solid var(--c-line);
    box-shadow:-16px 0 40px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .4s var(--ease);
    padding:calc(var(--sp-2) + 4.5rem) var(--sp-4) var(--sp-4);
    overflow-y:auto;
  }
  .site-nav.open{ transform:translateX(0); }

  .site-nav ul{
    flex-direction:column; align-items:flex-start; gap:var(--sp-2);
  }
  .site-nav a{ font-size:1.15rem; }
  .site-nav a::after{ display:none; }
}

/* ==========================================================================
   Sticky CTA (mitscrollend)
   ========================================================================== */
.sticky-cta{
  position:fixed; right:var(--sp-3); bottom:var(--sp-3); z-index:90;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9em 1.5em; border-radius:999px;
  background:var(--c-copper); color:#14110c;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  box-shadow:0 10px 28px rgba(184,115,51,.35);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
}
.sticky-cta.show{
  opacity:1; transform:none; pointer-events:auto;
}
.sticky-cta:hover, .sticky-cta:focus-visible{
  background:var(--c-brass);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--c-panel); border-top:1px solid var(--c-line);
  margin-top:var(--sp-7);
}
.site-footer__inner{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-5);
  padding-block:var(--sp-6);
}
.footer-logo{ height:56px; width:auto; margin-bottom:var(--sp-2); }
.footer-col--brand p{ color:var(--c-muted); font-size:.92rem; max-width:34ch; }
.footer-heading{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em;
  font-size:.8rem; color:var(--c-copper); margin-bottom:var(--sp-2);
}
.site-footer address{ font-style:normal; color:var(--c-muted); line-height:1.9; }
.site-footer address a{ color:var(--c-text); transition:color .25s var(--ease); }
.site-footer address a:hover{ color:var(--c-copper); }

.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.6em; }
.footer-col ul a{
  color:var(--c-muted); transition:color .25s var(--ease);
}
.footer-col ul a:hover, .footer-col ul a:focus-visible{ color:var(--c-copper); }

.site-footer__bottom{
  border-top:1px solid var(--c-line); padding-block:var(--sp-3);
}
.site-footer__bottom p{
  color:var(--c-muted); font-size:.85rem; text-align:center;
}

@media (max-width:900px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; gap:var(--sp-4); }
  .footer-col--brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .site-footer__inner{ grid-template-columns:1fr; gap:var(--sp-4); }
}