/* ==========================================================================
   AS E-TECH — responsive.css
   Mobile first heisst hier: Mobile bekommt eigene Loesungen, nicht nur
   kleinere Desktop-Elemente. Reihenfolge: gross -> klein.
   Breakpoints: 1180 / 1024 / 860 / 680 / 430 / 360
   ========================================================================== */

/* ---------- <= 1180px : Header wird enger ------------------------------- */
@media (max-width:1180px) {
  .header-actions .btn--primary { display:none; }   /* Telefon bleibt, CTA weicht */
  .footer-grid { grid-template-columns:1.3fr 1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}

/* ---------- <= 1024px : Tablet ------------------------------------------ */
@media (max-width:1024px) {
  :root { --header-h:68px; }

  /* Desktop-Navigation weicht dem Mobile-Panel */
  .nav, .header-phone { display:none; }
  .menu-toggle { display:grid; }
  .header-inner { grid-template-columns:auto 1fr auto; }

  .hero { min-height:auto; }
  .hero__inner { max-width:none; padding-block:clamp(3.5rem,9vw,5rem) clamp(8rem,16vw,9rem); }
  .hero__media img { object-position:66% center; }

  .credential-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .credential:nth-child(3) { border-left:0; }
  .credential:nth-child(n+3) { border-top:1px solid var(--line); }

  .split, .split--copy-first, .contact-grid { grid-template-columns:minmax(0,1fr); }
  .split .media-frame { order:-1; }

  .grid--4, .process { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fact-band { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fact:nth-child(3) { border-left:0; }
  .fact:nth-child(n+3) { border-top:1px solid var(--line); }

  .service-detail { grid-template-columns:minmax(0,1fr); }
  .service-detail:nth-child(even) .service-detail__media { order:0; }
}

/* ---------- <= 860px : Grids brechen auf -------------------------------- */
@media (max-width:860px) {
  .grid--3 { grid-template-columns:repeat(2, minmax(0,1fr)); }

  .cta-band { grid-template-columns:auto 1fr; }
  .cta-band .btn { grid-column:1 / -1; width:100%; }

  .section-head__top { flex-direction:column; align-items:flex-start; }
}

/* ---------- <= 680px : Telefon ------------------------------------------ */
@media (max-width:680px) {
  :root {
    --header-h:64px;
    --section-y:clamp(3.25rem, 12vw, 4.5rem);
    --fs-display:clamp(2.35rem, 9.5vw, 3.1rem);
  }

  .grid--2, .grid--3, .grid--4, .process, .form-row { grid-template-columns:minmax(0,1fr); }

  /* Kennzahlenband: zweispaltig bleibt lesbarer als eine lange Liste */
  .fact-band { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fact { padding:1.1rem; }
  .fact dd { font-size:1.05rem; }

  /* Hero: Bild rueckt hoeher, Text bekommt vollen Kontrast */
  .hero { min-height:auto; }
  .hero__media img { object-position:62% center; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(6,8,11,.92) 0%, rgba(6,8,11,.72) 34%, rgba(6,8,11,.55) 58%, rgba(6,8,11,.88) 100%);
  }
  .hero__inner { padding-block:2.75rem 1.75rem; gap:1.15rem; }
  .hero__lead { font-size:1rem; }
  .hero__actions { display:grid; grid-template-columns:1fr; gap:.6rem; }
  .hero__actions .btn { width:100%; min-height:3.25rem; }
  .hero__trust { gap:.5rem 1rem; font-size:var(--fs-xs); }

  /* Kennzahlen wandern aus dem Bild heraus -> kein Text auf unruhigem Foto */
  .credential-strip { position:static; background:var(--ink-900); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .credential-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .credential { min-height:auto; padding:.9rem 1rem; gap:.6rem; }
  .credential svg { display:none; }
  .credential dd { font-size:var(--fs-xs); }

  /* Beruehrbare Ziele */
  .btn { min-height:3.15rem; }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:var(--s-5); }
  .footer-legal { flex-direction:column; gap:.75rem; }

  .toast { right:.75rem; left:.75rem; bottom:.75rem; width:auto; }
  .to-top { display:none; }

  .service-card__media { aspect-ratio:16/9; }
  .contact-line { grid-template-columns:2.5rem 1fr; }
}

/* ---------- <= 430px ----------------------------------------------------- */
@media (max-width:430px) {
  :root { --gutter:1.15rem; }
  .brand-word { font-size:1.02rem; }
  .mobile-nav__link { font-size:1.28rem; min-height:3.6rem; }
  .contact-primary__number { font-size:1.4rem; }
}

/* ---------- <= 360px : kleinste unterstuetzte Breite --------------------- */
@media (max-width:360px) {
  :root { --gutter:1rem; }
  .fact-band, .credential-grid { grid-template-columns:minmax(0,1fr); }
  .fact:nth-child(n), .credential:nth-child(n) { border-left:0; border-top:1px solid var(--line); }
  .fact:first-child, .credential:first-child { border-top:0; }
  .contact-primary__number { font-size:1.25rem; }
}

/* ---------- Zeigegeraete ohne Hover -------------------------------------- */
@media (hover:none) {
  a.card:hover { transform:none; box-shadow:none; }
  a.card:hover .service-card__media img,
  a.project-card:hover .project-card__media img { transform:none; }
  .btn:hover { transform:none; }
}

/* ---------- Sehr breite Viewports ---------------------------------------- */
@media (min-width:1600px) {
  :root { --container:1320px; }
}