/* ==========================================================================
   Responsive — Mobile First: Basis-Styles gelten überall,
   hier nur die Anpassungen für schmale Viewports.
   ========================================================================== */

/* Tablet und kleiner */
@media (max-width: 960px) {
  .values,
  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split,
  .contact-grid,
  .page-head-split {
    grid-template-columns: 1fr;
  }

  .portrait-foto {
    max-width: 240px;
    justify-self: start;
  }

  .split-media {
    order: -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Hero einspaltig als eine Bühne: Text vorn, Mann und Wasserzeichen
     dahinter — gleiche Ebenen-Logik wie am Desktop, nur übereinander */
  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-content {
    grid-column: 1;
    position: relative;
    z-index: 1;
    padding-bottom: clamp(3.5rem, 9vh, 6rem);
  }

  /* Wasserzeichen: einspaltig breiter, bleibt mittig hinter der Bühne */
  .hero-schriftzug {
    width: 150%;
    max-width: none;
  }

  /* Mann als Hintergrundfigur: gespiegelt (Blick geht zum Text) und
     gedimmt rechts unten angeschnitten. Spiegelung liegt auf dem
     Container, weil das Parallax-Script den transform des img setzt. */
  .hero-mann {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 0;
    justify-content: flex-start; /* erscheint durch scaleX(-1) rechts */
    transform: scaleX(-1);
    pointer-events: none;
  }

  .hero-mann img {
    width: min(320px, 80%);
    opacity: 0.45;
  }

  .deko-maschine {
    display: none;
  }
}

/* Navigation: ab hier Hamburger — Logo + 7 Punkte + CTA brauchen
   einzeilig (white-space: nowrap) rund 1024px Viewport */
@media (max-width: 1023px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--line);
    padding: 1rem 4vw 2rem;
    display: none;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav li {
    border-bottom: 1px solid var(--line);
  }

  .main-nav li:last-child {
    border-bottom: none;
  }

  .main-nav a {
    display: block;
    padding-block: 1rem;
    font-size: 1.05rem;
    background-image: none;
  }

  .main-nav a[aria-current="page"] {
    color: var(--red-bright);
  }

  .nav-cta {
    margin: 1.2rem 0 0;
  }

  .nav-cta .btn {
    width: 100%;
    padding: 0.9rem;
  }
}

/* Smartphone */
@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .brand-logo {
    height: 34px;
  }

  .site-header.is-scrolled .brand-logo {
    height: 30px;
  }

  .brand-city {
    padding-left: 2.4rem;
    letter-spacing: 0.24em;
  }

  .hero-content {
    padding-top: clamp(2.5rem, 7vh, 4rem);
  }

  .hero-contact {
    flex-direction: column;
    gap: 0.9rem;
  }

  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  /* Feature-Grid mobil: großes Tile volle Breite, Rest 2×2 */
  .gallery-grid--feature {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item--feature {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 1;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.5rem;
  }

  .split-media img:nth-child(2) {
    transform: translateY(1rem);
  }

  .split-media--stack img:nth-child(2) {
    transform: none;
  }

  .whatsapp-fab {
    width: 52px;
    height: 52px;
  }
}

/* Sehr große Screens: Zeilenlängen im Zaum halten */
@media (min-width: 1600px) {
  :root {
    --container: 1240px;
  }
}