/* =====================================================
   NOVARIS CLEAN - Responsive Fixes & Optimierungen
   Ergänzungs-CSS für bessere Darstellung auf allen Geräten
   ===================================================== */

/* ---- ALLGEMEIN ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ---- TELEFONNUMMERN - kein Umbruch ---- */
a[href^="tel:"],
a[href^="https://wa.me/"] {
  white-space: nowrap;
}

/* ---- NAVBAR ---- */
@media (max-width: 1023px) {
  /* Sicherstellen dass Navbar-Logo nicht zu groß wird */
  nav img[alt="NOVARIS CLEAN"] {
    max-height: 40px !important;
    width: auto !important;
  }
}

/* ---- HERO-SEKTION ---- */
@media (max-width: 640px) {
  /* Hero-Buttons auf Mobil untereinander */
  .hero-buttons,
  section .flex.flex-wrap.gap-3:first-of-type {
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* Hero-Text besser lesbar */
  .hero-text p {
    font-size: 0.8rem;
  }
}

/* ---- LEISTUNGSKARTEN ---- */
@media (max-width: 767px) {
  /* Leistungskarten auf Mobil: 1 Spalte */
  .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  
  /* Karten-Bilder auf Mobil nicht zu hoch */
  .leistung-card img,
  section img[alt*="reinigung"],
  section img[alt*="Reinigung"] {
    max-height: 200px;
    object-fit: cover;
  }
}

/* ---- GALERIE ---- */
@media (max-width: 640px) {
  /* Galerie-Vorschau auf Mobil: 2 Spalten statt 3 */
  .galerie-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- KONTAKTSEITE ---- */
@media (max-width: 767px) {
  /* Kontakt-Layout auf Mobil: Stacked */
  .kontakt-layout {
    flex-direction: column !important;
  }
  
  /* Kontakt-Info-Boxen volle Breite */
  .kontakt-info-box {
    width: 100% !important;
  }
  
  /* Formular volle Breite */
  .kontakt-formular {
    width: 100% !important;
  }
}

/* ---- FOOTER ---- */
@media (max-width: 640px) {
  /* Footer-Grid auf Mobil: 1 Spalte */
  footer .grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Footer-Telefonnummern nebeneinander - kein Umbruch */
  footer .flex[style*="inline-flex"] {
    flex-wrap: nowrap !important;
    overflow: hidden;
  }
  
  /* Footer-Text kleiner auf Mobil */
  footer .text-sm {
    font-size: 0.8rem;
  }
}

/* ---- TABLET (768px - 1023px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Container-Padding auf Tablet */
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  /* Leistungskarten auf Tablet: 2 Spalten */
  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ---- DESKTOP (1024px+) ---- */
@media (min-width: 1024px) {
  /* Container max-width */
  .container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- BILDER ALLGEMEIN ---- */
img {
  max-width: 100%;
  height: auto;
}

/* Galerie-Bilder: Seitenverhältnis beibehalten */
.galerie-bild {
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ---- FORMULARE ---- */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important; /* Verhindert Auto-Zoom auf iOS */
    width: 100% !important;
  }
  
  button[type="submit"],
  .btn-submit {
    width: 100%;
  }
}

/* ---- BEWERTUNGS-SLIDER ---- */
@media (max-width: 640px) {
  .bewertungen-slider {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- STATISTIK-ZAHLEN ---- */
@media (max-width: 640px) {
  .statistik-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .statistik-zahl {
    font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
  }
}

/* ---- SMOOTH SCROLLING ---- */
html {
  scroll-behavior: smooth;
}

/* ---- TOUCH-OPTIMIERUNG ---- */
@media (hover: none) {
  /* Auf Touch-Geräten: Hover-Effekte deaktivieren */
  a:hover,
  button:hover {
    opacity: 1;
  }
}

/* ---- PRINT ---- */
@media print {
  nav, footer, .whatsapp-btn {
    display: none !important;
  }
}

/* ---- GLOBALE AUSRICHTUNGS-FIXES ---- */
/* Sicherstellen, dass Flex-Container Icons und Text perfekt zentrieren */
.flex.items-center {
  align-items: center !important;
}

/* Icons in Kontakt-Boxen zentrieren */
span > svg, span > i {
  display: inline-block;
  vertical-align: middle;
}

/* Spezifisch für die Kontaktseite */
section .flex.items-center.gap-4.p-4 {
  display: flex !important;
  align-items: center !important;
  min-height: 80px; /* Einheitliche Höhe für alle Boxen */
}

/* Footer-Fixes */
footer .flex.items-center {
  display: flex !important;
  align-items: center !important;
}

footer .space-y-3 > div {
  display: flex !important;
  align-items: center !important;
  min-height: 24px;
}

/* Sicherstellen, dass Zeilenhöhen nicht die Ausrichtung stören */
p, span, a {
  line-height: 1.5;
}

/* Verhindert, dass die Adresse im Footer schief wirkt */
footer span.text-sm {
  display: inline-block;
  vertical-align: middle;
}