/* Handyansicht für Startseite, Über uns und Unsere Arbeit. */
.mobile-hero-photo { display: none; }
@media (max-width: 850px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-background, .hero-overlay { display: none; }
  .mobile-hero-photo { display: block; width: 100%; height: auto; object-fit: contain; }
  .hero-content { width: 100%; padding: 2rem 1.25rem 2.5rem; background: var(--moss); }
  .hero-content h1 { font-size: clamp(2rem, 8.5vw, 3.25rem); line-height: 1.12; margin-bottom: 1.25rem; }
  .hero-content h1 br { display: none; }
  .hero-content .lead { font-size: 1rem; line-height: 1.65; text-shadow: none; }
  .hero-content .button { background: var(--paper); color: var(--moss); }
  main h1, main h2, main h3 { overflow-wrap: break-word; hyphens: auto; }
  .section { padding: 3rem 1.25rem; }
  .intro-grid, .two-column { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .intro-grid > *, .two-column > * { min-width: 0; }
  .intro-grid p, .center-text, .reading-text { font-size: 1rem; line-height: 1.7; }
  main h2 { font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1.15; }
  .about-hero, .work-hero { padding: 3rem 1.25rem; }
  .center-content h1, .work-hero-inner h1 { font-size: clamp(2rem, 8.5vw, 3.2rem); line-height: 1.15; }
  .team-photo-section, .work-photo-section { padding: 3rem 1.25rem; }
  .section-title-center, .work-photo-title { margin-bottom: 1.5rem; }
  .work-photo-title h2, .work-text-content h2 { font-size: clamp(1.9rem, 7vw, 2.7rem); line-height: 1.15; }
  .work-subsection { margin-top: 2.5rem; padding-top: 2rem; }
  .work-subsection h3 { font-size: 1.8rem; line-height: 1.2; }
  .flyer-section { padding: 2.5rem 1.25rem; }
  .flyer-placeholder { min-height: 0; max-height: none; aspect-ratio: 1 / 1.414; box-shadow: 6px 7px 0 var(--sand); }
  .team-photo-placeholder, .work-photo-placeholder, .image-placeholder, .image-placeholder.tall { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .work-photo-placeholder span, .team-photo-placeholder span { max-width: 85%; font-size: 0.7rem; }
  .work-large-photo img, .team-photo img, .flyer-image { width: 100%; height: auto; max-height: none; object-fit: contain; box-shadow: 6px 7px 0 var(--sand); }
  .closing-line { font-size: 1.6rem; }
  .contact-banner { padding: 2.75rem 1.25rem; }
  .contact-banner-inner { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .contact-banner h2 { font-size: 2rem; }
  .main-nav a { display: block; width: 100%; padding: 0.55rem 0; }
  .menu-button { min-height: 44px; }
  .site-footer { min-height: 0; padding: 1.5rem 1.25rem; }
}

/* Kompakter Bildeinstieg: vollständiges Foto mit Überschrift darauf. */
@media (max-width: 850px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--moss); }
  .mobile-hero-photo { grid-area: 1 / 1; align-self: start; }
  .hero-overlay { display: block; position: relative; inset: auto; grid-area: 1 / 1; align-self: stretch; background: linear-gradient(180deg, transparent 25%, rgba(15,25,22,0.15) 50%, rgba(15,25,22,0.88) 100%); }
  .hero-content { display: contents; }
  .hero-content h1 { grid-area: 1 / 1; align-self: end; z-index: 2; font-size: clamp(1.35rem, 6vw, 2.8rem); line-height: 1.08; padding: 0.75rem 1.25rem; margin: 0; max-width: 100%; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
  .hero-content .eyebrow { margin: 1.5rem 1.25rem 0.85rem; font-size: 0.62rem; }
  .hero-content .lead { margin: 0 1.25rem; max-width: 650px; }
  .hero-content .button { justify-self: start; margin: 1.25rem 1.25rem 1.75rem; }
}