/* ============================================================
   BRIGHTLABEL STUDIO · Responsive
   Desktop-first Abstufungen. Breakpoints folgen dem Layout,
   nicht den Geräteklassen.
   ============================================================ */

/* ── Große Desktops: Scroll-Hinweis bekommt Platz ────────── */
@media (min-width: 1200px) and (min-height: 720px) {
  .hero__scroll { display: inline-flex; }
}

/* ── Flache Viewports: Hero passt auf einen Bildschirm ────── */
@media (min-width: 861px) and (max-height: 830px) {
  .hero { padding-top: clamp(5.5rem, 12vh, 7rem); }
  .hero__title { font-size: clamp(2.9rem, 6.4vw, 5.4rem); }
  .hero__inner { row-gap: 1.15rem; }
  .hero__sub { font-size: 1.02rem; }
  .statuscard__wave { height: 46px; margin: .8rem 0; }
}

/* ── Laptop / kleines Desktop ─────────────────────────────── */
@media (max-width: 1180px) {
  .srv__head { grid-template-columns: 9rem minmax(0, 1fr) auto; }
  .srv__hint { display: none; }
  .srv__bodyin p,
  .srv__bodyin .chips { margin-left: 11rem; }
  .foot__grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot__col:first-child { grid-column: 1 / -1; }
}

/* ── Tablet quer ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; align-content: center; }
  .statuscard { max-width: 26rem; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .process__grid,
  .faq__grid,
  .contact__grid,
  .studio__grid { grid-template-columns: 1fr; }
  .process__aside,
  .faq__aside { position: static; }
  .process__rail { max-width: none; }
  .case__link { grid-template-columns: 1fr; gap: 1.75rem; }
  .case--flip .case__link { direction: ltr; }
  .sechead--split { grid-template-columns: 1fr; align-items: start; }
  .sechead--split .sechead__text { text-align: left; }
}

/* ── Tablet hoch / große Phones ───────────────────────────── */
@media (max-width: 860px) {
  :root { --sec-y: clamp(4rem, 9vh, 6rem); }

  .nav__links { display: none; }
  .nav__actions .btn--sm { display: none; }
  .burger { display: grid; }

  .hero { min-height: auto; padding-top: clamp(6rem, 18vh, 8rem); }
  .hero__title { font-size: clamp(2.9rem, 12vw, 4.6rem); }
  .hero__proof { gap: 1.25rem; }
  .hero__proof li { flex: 1 1 8rem; }

  .srv__head { grid-template-columns: 1fr auto; gap: 1rem; row-gap: .3rem; }
  .srv__idx { grid-column: 1 / -1; }
  .srv__bodyin p,
  .srv__bodyin .chips { margin-left: 0; }

  .step { grid-template-columns: 1fr; gap: .75rem; }
  .step__idx { padding-top: 0; }

  .founder__facts li,
  .contact__direct li { flex-wrap: wrap; gap: .2rem; }

  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

/* ── Phones ───────────────────────────────────────────────── */
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; }
  .stat { display: flex; align-items: baseline; gap: 1rem; }
  .stat__num { font-size: 2.4rem; min-width: 4.5ch; }
  .stat__label { max-width: none; }

  .form__row { grid-template-columns: 1fr; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; }
  .vcard { padding: 1.4rem; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__wordmark { transform: translateY(18%); }
}

/* ── Sehr kleine Geräte ───────────────────────────────────── */
@media (max-width: 380px) {
  .hero__title { font-size: 2.55rem; }
  .statuscard { padding: 1.15rem; }
}

/* ── Touch: Hover-Effekte entschärfen ─────────────────────── */
@media (hover: none) {
  .btn:hover::before { transform: translateY(101%); }
  .btn--accent:hover { color: #fff; }
  .btn--solid:hover { color: var(--bg); }
  .btn--ghost:hover { color: var(--fg); }
  .link-underline:hover::after { transform: scaleX(1); }
  .vcard:hover { transform: none; }
  .step:hover { transform: none; }
}

/* ── Sehr breite Screens: Textmaß begrenzen ───────────────── */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; }
  .hero__title { font-size: clamp(6rem, 7.2vw, 8.4rem); }
}

/* ── Druck ────────────────────────────────────────────────── */
@media print {
  .nav, .menu, .cursor, .preloader, .hero__field, .hero__glow,
  .hero__grain, .marquee, .foot__wordmark { display: none !important; }
  body { background: #fff; color: #000; }
  section { padding-block: 1.5rem; }
}