/* ================================
   Zentrale Responsive-Styles
   ================================ */

/* 1140px Feintuning */
@media (max-width:1140px){
  .container{ padding-inline:18px; }
}

/* 980px – große Tablet-Schwelle */
@media (max-width:980px){
  /* Header / Navigation */
  .nav-row{ min-height:70px; }
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; inset:70px 0 auto 0; background: var(--brand-grad);
    display:none; flex-direction:column; gap:.7rem; padding:1rem;
    border-bottom-left-radius:16px; border-bottom-right-radius:16px;
  }
  .site-nav.open{ display:flex; }

  /* Hero */
  .hero-grid{ grid-template-columns:1fr; }

  /* Leistungen (2 Spalten bei Tablet – Phone siehe 640px) */
  .section--leistungen .cards{ grid-template-columns:1fr 1fr; }

  /* Über mich */
  .about{ grid-template-columns:1fr; justify-items:center; }

  /* Kontakt */
  .contact-grid{ grid-template-columns:1fr; }

  /* Bewertungen */
  .reviews-list{ grid-template-columns:1fr; }

  /* Footer */
  .footer-row{ flex-wrap:wrap; gap:.6rem; }
}

/* 860px – Mobile-CTA im Header auf volle Breite */
@media (max-width:860px){
  .site-header .site-nav .btn-cta{
    width:100%; text-align:center; padding:.9rem 1rem; border-radius:14px;
    background:#f0fdf4; color:#183318; border:0;
  }
}

/* 640px – Phones */
@media (max-width:640px){
  .section{ padding: 52px 0; }
  .title{ font-size: clamp(1.8rem, 5.2vw, 2.2rem); line-height:1.18; }

  /* Leistungen Phone: 1 Spalte */
  .section--leistungen .cards{ grid-template-columns:1fr; }

  /* kleinere Abstände in Grids */
  .hero-grid, .about{ gap:16px; }

  /* Zusammenfassung Bewertungen stackt */
  .reviews-summary{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}

/* 480px – kleines Phone */
@media (max-width:480px){
  .section{ padding: 40px 0; }
  .hero-badge{ width:68px; transform: rotate(-4deg); top:10px; right:10px; }
  .hero-actions .btn, .review-form .btn, .contact-form .btn{ width:100%; }
  .mini-cta{ padding-inline:6px; } .mini-cta a{ width:100%; justify-content:center; }
}

/* reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .btn, .mini-cta a, .mini-cta a::after{ transition:none !important; }
}

/* Mobile Sticky CTA (Phone) */
.mobile-cta{
  position:fixed; left:50%; bottom:12px; transform:translateX(-50%) translateY(120%);
  z-index:60; background: linear-gradient(135deg, #c1dcaf, #2e4820); color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.2px; padding:.9rem 1.15rem; border-radius:999px;
  box-shadow:0 12px 30px rgba(32,56,28,.25);
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.mobile-cta.show{ transform: translateX(-50%) translateY(0); }
.mobile-cta:active{ filter: brightness(1.05); }
@media (min-width:861px){ .mobile-cta{ display:none; } }

/* Reveal-Animationen */
@keyframes slidefade{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
.reveal{ opacity:0; transform: translateY(12px); }
.reveal.is-in{ opacity:1; transform:none; animation: slidefade .6s ease both; }
@media (prefers-reduced-motion: reduce){ .reveal, .reveal.is-in{ opacity:1; transform:none; animation:none; } }
