/* Responsive — Mobile-first refinements
   Most styling lives in the per-section files; this file handles
   edge tweaks and ensures touch-friendly sizing. */

/* ---------- Touch targets — Pflicht 44x44 ---------- */
@media (hover: none) {
  a, button, summary, .btn, .nav__link, .field input, .field select {
    min-height: 44px;
  }
}

/* ---------- Mobile (< 640px) ---------- */
@media (max-width: 639px) {
  .hero__title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .hero__title .accent-script { font-size: 1.08em; transform: rotate(-2deg); }

  /* Section-CTAs (Hero, Form) full-width auf Mobile */
  .hero__ctas .btn,
  #contact-form > .btn {
    width: 100%;
    height: 56px;
  }

  /* Nav-CTA auf Mobile ausblenden — die Bottom-Sticky-CTA übernimmt diese Funktion */
  .nav .nav__cta-wrap .btn--primary { display: none; }

  /* Make sections more compact on small screens */
  section { padding-block: 3.5rem; }
  .hero { padding-bottom: 2rem; }

  .nav__logo { font-size: 1.25rem; }
}

/* ---------- Tablet (>= 640px) ---------- */
@media (min-width: 640px) {
  .btn { width: auto; }
}

/* ---------- Desktop (>= 1024px) ---------- */
@media (min-width: 1024px) {
  /* Larger hero sub */
  .hero__sub { max-width: 36rem; }
}

/* ---------- Wide Desktop (>= 1280px) ---------- */
@media (min-width: 1280px) {
  .hero__title { font-size: 5.25rem; }
}

/* ---------- Print ---------- */
@media print {
  .nav, .bottom-cta, .footer, .scroll-progress { display: none !important; }
  a { text-decoration: underline; color: #000 !important; }
  body { background: #fff; color: #000; }
}