/* review-fixes.css, Entwurf 12.11.2026 (Design-Review nach Emil Kowalski) */

/* 360 px: Überschrift OUR VERTICALS (4.5rem, 5px Laufweite) lief 20 px über. Nur unter 380 px kleiner */
@media (max-width: 380px) {
    .impact-header { font-size: 3.6rem !important; letter-spacing: 3px; }
}

/* Mobil: Hero-H1 hat inline 4rem und überlappte Untertitel und OUR VERTICALS */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.2rem !important; letter-spacing: 2px; }
    .hero-content { padding: 0 20px; }
    .hero-content .subtitle { font-size: 1.05rem !important; }
    .scroll-indicator { display: none; }
}

/* Lange Wörter in Rechtstexten umbrechen (Impressum lief bei 390/360 px auf 559 px) */
.legal-content h2, .legal-content h3, .legal-content p { overflow-wrap: anywhere; hyphens: auto; }

/* Touchgeräte haben kein Hover: Kachel-Overlay sichtbar lassen, Zoom nur mit echter Maus */
@media (hover: none) {
    .grid-item .overlay { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
    .grid-item:hover img { transform: scale(1.03); }
}
@media (hover: none) {
    .grid-item:hover img { transform: none; }
}

/* Tap-Feedback statt Hover auf Mobil */
.cta-small:active, .grid-item:active { transform: scale(0.98); }
.cta-small, .grid-item { transition-property: transform, box-shadow, background-color, color; }

/* Reduzierte Bewegung: Dauerschleifen und Bewegungen aus, Farbe/Opacity bleiben */
@media (prefers-reduced-motion: reduce) {
    .hero-content h1 { animation: none !important; }
    .scroll-indicator { animation: none !important; }
    .grid-item img, .grid-item .overlay, .nav-links { transition: none !important; }
    .grid-item .overlay { transform: none !important; }
    html { scroll-behavior: auto !important; }
    #particle-canvas { display: none !important; }
}