/* ============================================================
   4Tex GmbH — responsive.css
   Breakpoints: 1024 (tablet-l), 820 (tablet), 560 (mobile)
   ============================================================ */

/* ---- <= 1024px : large tablet / small laptop ------------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; margin-bottom: var(--sp-2); }
  .page-hero__ripple { opacity: .06; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---- <= 992px : mobile navigation (slide-in panel from right) --- */
@media (max-width: 992px) {
  .burger { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 auto; width: min(360px, 86vw);
    background: #FFFFFF; border-left: 1px solid #ECECEC;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: clamp(1.25rem, 4vw, 2rem); gap: 0;
    transform: translateX(100%); transition: transform .32s var(--ease);
    box-shadow: -18px 0 50px rgba(0,0,0,.12); overflow-y: auto;
    height: calc(100dvh - var(--header-h));
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav__link { padding: .95rem .5rem; font-size: 1rem; border-bottom: 1px solid #F1F1F1; }
  /* Expandable "Dienstleistungen" submenu */
  .nav__item--dropdown { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav__item--dropdown .nav__link { grid-column: 1; }
  .nav__subtoggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    color: var(--nav-blue); border-radius: var(--radius);
  }
  .nav__subtoggle svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
  .nav__item--dropdown.is-open .nav__subtoggle svg { transform: rotate(180deg); }
  .nav__dropdown {
    grid-column: 1 / -1; position: static; transform: none; min-width: 0;
    margin: 0; padding: 0 0 0 .75rem; border: none; border-radius: 0; box-shadow: none;
    background: transparent; opacity: 1; visibility: hidden; pointer-events: none;
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav__dropdown::before { display: none; }
  .nav__item--dropdown.is-open .nav__dropdown {
    visibility: visible; pointer-events: auto; max-height: 320px;
  }
  /* Neutralise the desktop hover/focus positioning inside the drawer —
     otherwise the focused submenu shifts half off-screen on touch. */
  .nav__item--dropdown:hover .nav__dropdown,
  .nav__item--dropdown:focus-within .nav__dropdown { transform: none; }
  .nav__dropdown a { font-size: .92rem; padding: .8rem .5rem; border-bottom: 1px solid #F1F1F1; }
  :root[data-theme="dark"] .nav__dropdown a { border-bottom-color: #1D2734; }
  .nav__link::after { left: .5rem; right: auto; width: 22px; bottom: .55rem; transform: scaleX(1); }
  .nav__link:not(.is-active)::after { opacity: 0; }
  /* Contact + language inside the drawer */
  .nav__mobile-extras { display: flex; flex-direction: column; align-items: flex-start;
    gap: 1.1rem; margin-top: clamp(1.5rem, 4vw, 2rem); }
  .header-actions { display: none; }
  /* Scrim */
  .nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.42); opacity: 0;
    visibility: hidden; transition: opacity .3s var(--ease); z-index: 99; }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

/* ---- <= 820px : stack splits & grids --------------------- */
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-4); }
  .split--reverse-mobile > *:first-child { order: 2; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: var(--sp-3); row-gap: var(--sp-4); }
  .spec-table th { width: 48%; }
}

/* ---- <= 560px : single column ---------------------------- */
@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .brand__name { font-size: 1.05rem; }
  .footer-bottom { flex-direction: column; }
  .dl-item { flex-wrap: wrap; }
  .spec-table { font-size: .88rem; }
  .spec-table th, .spec-table td { padding: .7rem .7rem; }
  .section-title, .page-hero h1 { max-width: 100%; }
  .feature-strip { grid-template-columns: 1fr; }
}

/* ---- <= 400px : compact ---------------------------------- */
@media (max-width: 400px) {
  .stat-row { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero-cta .btn { width: auto; }
}

/* ---- Print ----------------------------------------------- */
@media print {
  .site-header, .site-footer, .burger, .nav, .hero-cta, .page-hero__ripple { display: none; }
  body { color: #000; }
  .section { padding-block: 1rem; }
}