/* =============================================================
   Moser Data Analytics – Responsive Stylesheet
   Mobile-First: 768px → 1024px → 1440px
   ============================================================= */

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT 1 – Tablet  ≥ 768px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Navigation */
  .nav__toggle  { display: none; }
  .nav__mobile  { display: none !important; }
  .nav__list    { display: flex; }

  /* Hero */
  .hero {
    min-height: 414px;
  }

  .hero__content {
    padding-block-start: 100px;
  }

  /* Two-Column */
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Service Blocks */
  .service-block {
    grid-template-columns: 1fr 1fr;
  }

  /* Reverse layout (Bild links) */
  .service-block--reverse .service-block__text {
    order: 2;
  }
  .service-block--reverse .service-block__image {
    order: 1;
  }

  /* Service Text: tablet → linksbündig */
  .service-block__text {
    text-align: left;
  }

  /* Über-Mich Grid */
  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Kontakt Grid */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer Grid */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer Bottom */
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Expertise Grid: 2 Spalten bleiben */
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tech-Badges: 2-spaltig */
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process Steps: 2-spaltig */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA Panel */
  .cta-panel__inner {
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
  }

  /* Tagline */
  .tagline-banner {
    padding-block: 1.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT 2 – Desktop  ≥ 1024px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Hero */
  .hero {
    min-height: 486px;
  }

  .hero__content {
    padding-block-start: 120px;
  }

  /* Expertise Grid: 4-spaltig auf Desktop */
  .expertise-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Tech Badges: 1-spaltig bleiben (neben Text) — passen perfekt */

  /* Footer Grid: 4-spaltig */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  /* Section Abstände */
  .section {
    padding-block: calc(var(--space-xl) * 1.25);
  }

  /* Service-Block Padding */
  .service-block {
    padding-block: var(--space-xl);
    gap: var(--space-xl);
  }

  /* Über-Mich: Bild etwas kleiner (Gewichtsbalance) */
  .about-grid {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }

  /* Expertise Panel Padding */
  .expertise-panel {
    padding: calc(var(--space-xl) * 1.25) var(--space-xl);
  }

  /* Trust Panel Padding */
  .trust-panel {
    padding: calc(var(--space-xl) * 1.25) var(--space-xl);
  }

  /* Process Steps: 4-spaltig */
  .process-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT 3 – Wide Desktop  ≥ 1440px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

  /* Hero noch großzügiger */
  .hero {
    min-height: 558px;
  }

  /* Breitere Container-Abstände */
  .container {
    padding-inline: var(--space-lg);
  }

  /* Navigation Schrift leicht größer */
  .nav__link {
    font-size: 1rem;
  }

  /* Expertise Panel: mehr Luft */
  .expertise-panel {
    padding: var(--space-xl) calc(var(--space-xl) * 1.5);
  }
}

/* ══════════════════════════════════════════════════════════════
   PRINT  (minimale Anpassungen)
   ══════════════════════════════════════════════════════════════ */
@media print {
  .site-header,
  .nav__toggle,
  .nav__mobile,
  .btn { display: none; }

  body { font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; }
}