/* =========================================================
   Responsive – Tablet & Smartphone
   - Burger sichtbar
   - Panel rechts, 300px
   - Slide von rechts
   - Header-Höhe bleibt stabil (Overlay)
   Voraussetzung:
   - Button:  #menu-toggle mit 3 span
   - Nav:     #nav-links
   - JS toggelt: #nav-links.open + #menu-toggle.is-open
   ========================================================= */

@media (max-width:1024px){

  /* weißer Rand am Gerät */
  body{
    padding: var(--pad-m);
    background:#fff;
  }

  /* Content-Padding weg (Body macht Rand) */
  .site-content{
    padding-left:0;
    padding-right:0;
  }

  /* Header etwas kompakter */
  .site-header .header-inner,
  .site-header .site-header-inner,
  .site-header .container{
    padding:12px 0;
  }

  .site-header .custom-logo{ height:40px; }

  /* Suche am Handy aus (spart Platz) */
  .header-search{ display:none; }


  /* Header darf nicht „wachsen“ */
  .site-header{
    position:relative;
    overflow:visible;
  }

  /* Desktop-Menü aus (wichtig) */
  #nav-links ul,
  .main-navigation ul,
  .site-header nav ul{
    display:none;
  }

  /* Burger sichtbar */
  #menu-toggle{
    display:inline-flex !important;
    margin-left:auto !important;
    margin-right:16px;
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.12);
    background:#fff;
    cursor:pointer;
    position:relative;
    z-index:1003;
    color:var(--spoe-red); /* Balkenfarbe via currentColor */
  }
  #menu-toggle:hover{ border-color:rgba(0,0,0,.22); }

  /* CTA ("Mach mit") am Tablet/Handy EIN, kompakt und vor dem Burger */
  .site-header .header-cta{
    display:block;
    grid-column:3;
    justify-self:end;
    margin-right:8px;
  }
  .site-header .header-cta .btn-outline{
    padding:8px 12px;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
  }

  /* Burger-Balken -> X */
  #menu-toggle span{
    position:absolute;
    width:22px;
    height:2px;
    border-radius:2px;
    background: currentColor;
    transition: transform .22s ease, opacity .18s ease, top .22s ease;
  }
  #menu-toggle span:nth-child(1){ top:16px; }
  #menu-toggle span:nth-child(2){ top:21px; }
  #menu-toggle span:nth-child(3){ top:26px; }

  #menu-toggle.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
  #menu-toggle.is-open span:nth-child(2){ opacity:0; }
  #menu-toggle.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

  /* Panel rechts (Overlay) – exakt 300px */
  #nav-links{
    position:absolute;
    top:100%;
    right:16px;
    left:auto;
    width:300px;
    z-index:1002;

    background:#fff;
    border:1px solid rgba(0,0,0,.12);
    border-radius:16px;
    box-shadow:0 10px 26px rgba(0,0,0,.12);

    opacity:0;
    transform: translateX(18px) translateY(-4px) scale(.98);
    pointer-events:none;
    transition:
      transform .28s cubic-bezier(.2,.8,.2,1),
      opacity .20s ease;
    will-change: transform, opacity;

    padding:10px 12px;
  }

  #nav-links.open{
    opacity:1;
    transform: translateX(0) translateY(0) scale(1);
    pointer-events:auto;
  }

  /* UL im Panel wieder sichtbar */
  #nav-links ul{
    display:flex !important;
    flex-direction:column;
    margin:0;
    padding:0;
    list-style:none;
  }
  #nav-links li{ width:100%; }

  /* Text im Panel SPÖ-rot */
  #nav-links,
  #nav-links a{
    color:var(--spoe-red);
  }

  #nav-links a{
    display:block;
    width:100%;
    padding:10px 10px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
  }

  #nav-links a:hover{
    color:var(--spoe-red-dark);
    background:rgba(227,6,19,.08);
    text-decoration:none;
  }
}

/* =========================
   Smartphone (<=600)
   - Burger leicht nach links
   - "Mach mit" zentriert
   - Header kompakter
   ========================= */
@media (max-width:600px){

  /* Header insgesamt kompakter */
  .site-header .header-inner,
  .site-header .site-header-inner,
  .site-header .container{
    padding:8px 0;
  }

  .site-header .custom-logo{ height:36px; }

  /* Burger etwas weiter nach links */
  #menu-toggle{
    margin-left:-12px !important;
    margin-right:6px;
    padding:10px 12px;
    width:42px;
    height:42px;
  }

  /* "Mach mit" am Smartphone zentrieren */
  .site-header .header-cta{
    grid-column:1 / -1;
    justify-self:center;
    margin:6px auto 6px auto;
    text-align:center;
  }

  .site-header .header-cta .btn-outline{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    margin:0 auto;
    padding:8px 14px;
    font-size:13px;
  }

  /* Panel etwas näher an den Rand */
  #nav-links{ right:12px; }
}

/* =========================
   Sehr kleine Geräte (<=420)
   - Panel bleibt garantiert im Viewport
   ========================= */
@media (max-width:420px){
  #nav-links{
    width:min(300px, calc(100vw - 24px));
    right:12px;
  }
}

/* Footer-Padding am Mobile etwas kompakter */
@media (max-width:1024px){
  .site-footer .footer-inner,
  .site-footer .container{
    padding:22px 0;
  }
}

/* =========================================================
   Accessibility – Fokus & Tastatur
   ========================================================= */

:where(a, button, [role="button"], input, select, textarea):focus-visible{
  outline: 3px solid rgba(227,6,19,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

#menu-toggle:focus-visible{
  outline: 3px solid rgba(227,6,19,.55);
  outline-offset: 3px;
}

#nav-links a:focus-visible{
  background: rgba(227,6,19,.10);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce){
  #nav-links,
  #menu-toggle span,
  .nav-backdrop{
    transition: none !important;
  }
}

/* =========================================================
   Backdrop/Overlay hinter dem Menü-Panel
   ========================================================= */
@media (max-width:1024px){

  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 1001; /* unter Panel (1002) & Burger (1003) */
  }

  .nav-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* damit Panel über Backdrop liegt */
  #nav-links{ z-index: 1002; }
  #menu-toggle{ z-index: 1003; }
}