/* ============================================================
   DAUD RECYCLING - Responsive Breakpoints
   Mobile First: 320 → 480 → 768 → 1024 → 1280 → 1440+
   ============================================================ */

/* ---------- ≤ 768px (Tablet & Mobile) ---------- */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  /* Navigation */
  .navbar__links {
    display: none;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__logo img {
    height: 44px;
  }

  /* Grid resets */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Counter */
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }

  /* Hero */
  .hero {
    min-height: 100svh;
  }

  .hero__buttons {
    flex-direction: column;
    align-items: center;
  }

  .hero__buttons .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Page Hero */
  .page-hero {
    min-height: 30vh;
  }

  /* Timeline */
  .timeline::before {
    left: 20px;
  }

  .timeline__item,
  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even) {
    left: 0;
    width: 100%;
    text-align: left;
    padding-left: 50px;
    padding-right: 0;
  }

  .timeline__dot,
  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot {
    left: 12px;
  }

  /* Cookie Banner */
  .cookie-banner__inner {
    flex-direction: column;
    text-align: center;
  }

  .cookie-banner__btns {
    width: 100%;
    justify-content: center;
  }

  /* Back to top */
  .back-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  /* Section spacing */
  .section {
    padding: var(--sp-lg) 0;
  }

  /* Cards */
  .card {
    padding: 1.5rem;
  }

  /* Footer bottom */
  .footer__bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  /* Parallax auf Mobil deaktiviert (Performance) */
  .parallax-section__bg {
    /* Der -20%-Überstand in style.css ist nur der Spielraum für den
       JS-Parallax in js/animations.js, der unterhalb von 768px ohnehin
       nicht läuft (window.innerWidth < 768). Ohne Verschiebung wird kein
       Überstand gebraucht, deshalb hier auf 0 statt sich allein auf das
       overflow des Elternelements zu verlassen. */
    inset: 0;
  }

  /* Maps */
  .map-container {
    aspect-ratio: 4/3;
  }

  /* Contact split */
  .contact-split {
    grid-template-columns: 1fr;
  }
}

/* ---------- ≤ 480px (Small Mobile) ---------- */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }

  .counter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }
}

/* ---------- ≥ 769px & ≤ 1024px (Tablet Landscape) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .counter-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- ≥ 1025px (Desktop) ---------- */
@media (min-width: 1025px) {
  .contact-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
  }
}

/* ---------- ≥ 1441px (Large Desktop) ---------- */
@media (min-width: 1441px) {
  :root {
    --max-width: 1400px;
  }
}

/* ---------- Print ---------- */
/* C-2: index.html druckte 4 von 7 Seiten leer, leistungen.html 3 von 9 -
   drei unabhaengige Ursachen wurden gemessen (page.pdf, printBackground:
   false, Chromes Standard):
   1. .reveal/.reveal--left/--right/--scale/.stagger>* starten bei opacity:0
      und werden nur durch einen IntersectionObserver eingeblendet, der beim
      Drucken nie feuert (es wird nicht gescrollt) - das ist der Grossteil
      jeder Seite.
   2. .accordion__body ist mit max-height:0 kollabiert und wird nie
      zurueckgesetzt - alle FAQ-Antworten fehlen.
   3. Dunkle/fotografische Sektionen drucken ohne Hintergrund (Chrome
      rendert Hintergruende im Druck standardmaessig nicht) - der fuer den
      Bildschirm helle/rote Text (H1, Card-Titel, Breadcrumb, Zaehler-Label)
      bleibt dadurch in seiner hellen Farbe auf weissem Papier und
      verschwindet (u.a. H1 weiss-auf-weiss). */
@media print {
  .navbar,
  .back-to-top,
  .cookie-banner,
  .navbar__mobile {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  /* Ursache 1: erzwingt den Endzustand aller Scroll-Reveals. */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Ursache 2: klappt alle FAQ-Antworten auf. */
  .accordion__body {
    max-height: none !important;
    overflow: visible !important;
  }

  .accordion__trigger svg {
    display: none; /* Pfeil-Rotation ist im Ausdruck ohne Bedeutung */
  }

  /* Ursache 3: Hintergrund faellt im Druck ohnehin weg (s.o.) - jede Farbe,
     die auf einem dunklen/fotografischen Hintergrund Sinn ergab, muss hier
     auf gut lesbares Schwarz zurueckgesetzt werden. */
  .hero, .hero *,
  .page-hero, .page-hero *,
  .section--dark, .section--dark *,
  .section--blue, .section--blue *,
  .parallax-section, .parallax-section *,
  .card--dark, .card--dark *,
  .footer__bottom, .footer__bottom * {
    color: #000 !important;
  }

  .section--dark,
  .section--blue,
  .footer,
  .footer__bottom {
    background: #fff;
  }

  /* Verhindert die 1-2 leeren Seiten am Anfang: Hero und Page-Hero sind auf
     dem Bildschirm auf volle Viewport-Hoehe angelegt, im Druck gibt es
     keinen "Fold", der das rechtfertigt. */
  .hero,
  .page-hero {
    min-height: 0 !important;
  }

  /* Die vier Navigationsspalten im Footer haben im Ausdruck keinen Wert und
     erzeugen zusaetzliche, groesstenteils leere Seiten am Ende. */
  .footer__grid {
    display: none !important;
  }
}