/* ============================================================
   responsive.css — gemeinsame Mobile-Schicht für alle Seiten
   Wird in base.html.twig mit niedriger Priorität geladen und
   überschreibt damit die seitenspezifischen Stylesheets.
   ============================================================ */

/* ---------- Global: nichts darf horizontal überlaufen ---------- */
html, body{max-width:100%;overflow-x:hidden}
img, video, iframe, canvas{max-width:100%;height:auto}

/* CTA-Klone im Drawer: auf Desktop unsichtbar */
.nav-mobile-cta{display:none}

/* Icon-Kacheln (z.B. AGB-Karten) behalten ihre 46x46-Form:
   als Flex-Item neben langem Text sonst schmaler gequetscht (Pillenform) */
.card .ic{flex:0 0 auto}

/* ============================================================
   Mobile Navigation (Drawer + Akkordeon) — ersetzt den
   alert()-Platzhalter des Burger-Buttons
   ============================================================ */
@media (max-width:960px){

  /* Alle rem-basierten Schriften mobil verkleinern */
  html{font-size:15px}

  /* Theme-Toggle + Burger rechtsbündig (nav-links als Spacer entfällt) */
  .nav-cta{margin-left:auto}

  /* --- Drawer-Panel unterhalb des sticky Headers ---
     Wichtig: position:absolute statt fixed, denn der backdrop-filter
     des Headers macht ihn zum Containing Block für fixed-Kinder —
     ein fixed-Drawer kollabiert dadurch auf die Header-Höhe. */
  .nav-links{
    position:absolute;
    top:100%;
    left:0; right:0;
    height:calc(100vh - 66px);
    height:calc(100dvh - 66px);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--surface, #0F1112);
    border-top:1px solid var(--line, rgba(255,255,255,.1));
    padding:10px 26px 44px;
    z-index:100;
  }
  header.nav.nav-open .nav-links{display:flex}
  body.nav-open{overflow:hidden}

  /* --- Menüpunkte als volle Zeilen --- */
  .nav-item{position:static;width:100%;border-bottom:1px solid var(--line, rgba(255,255,255,.08))}
  .nav-item > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:.95rem .2rem;
    font-size:1rem;
    font-weight:600;
  }
  .nav-item > a svg{display:inline-block;width:12px;height:12px;transition:transform .2s ease}
  .nav-item.open > a svg{transform:rotate(180deg)}

  /* --- Mega-Menüs: aus dem Overlay in den Fluss holen --- */
  .mega, .mega2{
    position:static;
    display:none;
    width:100%;
    min-width:0;
    transform:none;
    opacity:1;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    border-radius:0;
    background:transparent;
    padding:0 0 14px;
  }
  /* Hover-Regeln des Desktop-CSS neutralisieren */
  .nav-item:hover .mega, .nav-item:focus-within .mega,
  .nav-item:hover .mega2, .nav-item:focus-within .mega2{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .nav-item.open > .mega{display:grid;grid-template-columns:1fr;gap:2px}
  .nav-item.open > .mega2{display:block}

  /* --- mega2: Tab-Seitenleiste ausblenden, Gruppen stapeln --- */
  .mega2 .m2-side{display:none}
  .mega2 .m2-main{min-height:0;padding:0}
  .mega2 .m2-group{display:block;padding:10px 0 4px}
  .mega2 .m2-group h5{margin:0 0 2px}
  .m2-items, .m2-cols{grid-template-columns:1fr;gap:2px}
  .m2-items a, .m2-cols a{padding:.55rem .2rem;min-height:44px;display:flex;align-items:center}
  .m2-items a{gap:.7rem}
  .mega > a{padding:.55rem .2rem;min-height:44px}
  .m2-foot{padding:.55rem .2rem;display:inline-flex;align-items:center;gap:.4rem}

  /* --- Login/Sales im Drawer (per JS geklont) --- */
  .nav-mobile-cta{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    padding:18px .2rem 0;
  }
  .nav-mobile-cta a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-height:46px;
  }

  /* --- Burger-Animation zu X --- */
  .burger span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0;transition:transform .22s ease,opacity .18s ease}
  header.nav.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  header.nav.nav-open .burger span:nth-child(2){opacity:0}
  header.nav.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ============================================================
   Header-Verdichtung auf kleinen Screens
   ============================================================ */
@media (max-width:700px){
  .nav-cta .login{display:none}
}
@media (max-width:560px){
  .nav-inner{gap:1rem}
  .nav-cta{gap:.4rem}
  .nav-cta .btn-primary{padding:.5rem .8rem;font-size:.82rem}
  .nav-cta .btn-primary svg{display:none}
}
@media (max-width:400px){
  .nav-cta .btn-primary{display:none}
}

/* ============================================================
   Inhalte: Tabellen, Code, Typografie, Abstände
   ============================================================ */
@media (max-width:960px){
  /* Tabellen horizontal scrollbar statt Layout-Sprengung */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:0}

  /* Lange Wörter/URLs/Inline-Code umbrechen */
  p, li, td, th{overflow-wrap:break-word}
  p code, li code{overflow-wrap:anywhere}
}

@media (max-width:560px){
  html{font-size:14px}
  .wrap{padding:0 20px}
  .nav-links{padding:10px 22px 44px}
  section{padding:56px 0}
  .hero{padding-top:40px}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
  .hero p{font-size:.95rem}
  .hero-actions{flex-wrap:wrap;gap:.6rem}
  .hero-actions .btn{width:100%;justify-content:center}
  .cta-band{padding:38px 20px}
  .cta-band h2{font-size:1.5rem}

  /* Tutorials: Artikel-Layout */
  .art-body h2{font-size:1.22rem}
  .tcode pre{padding:.75rem .8rem}
  .tcode code{font-size:.78rem}
  .anchor-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}
  .anchor-nav a{white-space:nowrap}
}

/* Feinere Touch-Targets für Fuß-Navigation */
@media (max-width:960px){
  .foot-top a, .foot-bottom a{padding:.3rem 0;display:inline-block}
}

/* ---------- Footer-Akkordeon (mobil) ---------- */
@media(max-width:960px){
  .foot-col h4{cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;padding:.5rem 0;-webkit-user-select:none;user-select:none}
  .foot-col h4::after{content:"";width:8px;height:8px;border-right:1.6px solid var(--muted-2);border-bottom:1.6px solid var(--muted-2);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
  .foot-col.open h4::after{transform:rotate(-135deg)}
  .foot-col a{display:none}
  .foot-col.open a{display:block}
}