/* staffclean-mobil.css — Handy-Feinschliff für www.staffclean.de (24.09.2026).
   Gilt NUR bis 639 px Breite (Tailwind „sm" beginnt bei 640 px) — Tablet und Desktop bleiben unverändert.
   Gemessen auf echten Geräteprofilen (Playwright: iPhone 15 Pro + iPhone SE in WebKit/Safari, Pixel 7 + Galaxy S9+ in Chromium,
   jeweils mit echtem Gerätefaktor, Touch und Geräte-User-Agent — nicht nur ein verkleinertes Fenster).
   Befunde, die hier behoben werden:
   1. Abgeschnittene Inhalte: Flex-/Grid-Kinder wachsen über den Bildschirm (min-width:auto) — Kopfbereich Startseite 351 px
      auf 320 px, Angebotsformular bis 445 px, Kennzahl-Kacheln.
   2. Uneinheitliche Ausrichtung: zentrierte Überschriften über linksbündigen Karten, Kennzahl-Karten Symbol links / Zahl rechts.
   3. Tippflächen 16–24 px hoch (Footer, Breadcrumb, Telefon/E-Mail) — Apple verlangt 44 px, Google 48 px. */

@media (max-width: 639px) {

  /* ---------- 1. nichts ragt über den Rand ---------- */
  html, body { overflow-x: hidden; }
  #root section > div, #root section > div > div, #root .grid > *, #root .flex > * { min-width: 0; }
  #root section.flex > div, #root section[class*="min-h-"] > div { width: 100%; }
  #root img, #root video, #root iframe, #root svg { max-width: 100%; }
  #root input, #root textarea, #root select, #root button[role="combobox"] { max-width: 100%; min-width: 0; }
  #root form button, #root a.w-full, #root button.w-full { white-space: normal; text-align: center; line-height: 1.3; }
  #root h1, #root h2, #root h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  #root p { overflow-wrap: break-word; }
  /* Karussell-Leisten bleiben absichtlich horizontal scrollbar */
  #root [class*="overflow-x-auto"], #root [class*="snap-x"] { max-width: 100vw; }

  /* ---------- 2. einheitlich zentriert ---------- */
  /* Überschriften, Einleitungen und Karteninhalte zentriert — wie die Abschnittsüberschriften darüber */
  #root main section h1, #root main section h2, #root main section h3, #root main section h4,
  #root main section p, #root main section blockquote { text-align: center; }
  /* Karten: Symbolfeld, Kopfzeile und Knopfzeile mittig */
  #root main section [class*="rounded-xl"], #root main section [class*="rounded-2xl"], #root main section [class*="rounded-3xl"] { text-align: center; }
  #root main section [class*="rounded-xl"] > div[class*="w-1"][class*="h-1"],
  #root main section [class*="rounded-2xl"] > div[class*="w-1"][class*="h-1"],
  #root main section [class*="rounded-xl"] > div > div[class*="w-1"][class*="h-1"],
  #root main section [class*="rounded-2xl"] > div > div[class*="w-1"][class*="h-1"] { margin-left: auto; margin-right: auto; }
  /* Kopfzeilen in Karten (Symbol links, Kennzahl rechts) -> untereinander und mittig */
  #root main section [class*="rounded-xl"] > [class*="justify-between"],
  #root main section [class*="rounded-2xl"] > [class*="justify-between"] { flex-direction: column; align-items: center; gap: .5rem; }
  #root main section [class*="rounded-xl"] > [class*="justify-between"] > *,
  #root main section [class*="rounded-2xl"] > [class*="justify-between"] > * { text-align: center; }
  /* Zeilen aus Symbol + Text (Checklisten, Kontaktzeilen, Abzeichen) mittig */
  #root main section li.flex, #root main section [class*="items-center"][class*="gap-"]:not(form *):not([role="combobox"]) { justify-content: center; }
  #root main section li.flex { text-align: left; }
  #root main section [class*="flex-wrap"] { justify-content: center; }
  /* „Mehr erfahren"-Links und Knopfgruppen mittig */
  #root main section a[class*="inline-flex"] { justify-content: center; }
  #root main section [class*="flex-col"] > a, #root main section [class*="flex-col"] > button { align-self: center; }
  #root main section .w-full { align-self: stretch; }
  /* Zeitleiste / Meilensteine: Punkt oben, Text mittig */
  #root main section [class*="items-start"][class*="gap-"] > div:last-child { text-align: center; }
  /* Formulare bleiben linksbündig — Beschriftung über dem Feld ist am Handy besser lesbar */
  #root form, #root form label, #root form p, #root form h2, #root form h3 { text-align: left; }
  #root form [class*="items-center"][class*="gap-"] { justify-content: flex-start; }

  /* ---------- 3. Tippflächen mindestens 44 px ---------- */
  #root footer a, #root nav[aria-label] a, #root [aria-label*="readcrumb"] a { min-height: 44px; display: inline-flex; align-items: center; }
  #root a[href^="tel:"], #root a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }
  #root footer ul { row-gap: 0; }
  #root footer li { margin-top: 0; margin-bottom: 0; }
  #root main section a[href^="/dienstleistungen/"][class*="text-sm"], #root main section a[href="/standorte"], #root main section a[href="/dienstleistungen"] { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 639px) {
  /* Nachtrag nach der ersten Messung: Breadcrumb im Kopfbild (ol/nav ohne aria-label), Kurz-Links wie „Start" */
  #root main section nav a, #root main section ol a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #root footer a { min-width: 44px; justify-content: center; }
  /* Footer-Fußzeile (Copyright, Konzernzeile) mittig wie der Rest des Footers */
  #root footer p { text-align: center; }
  #root footer [class*="justify-between"] { flex-direction: column; align-items: center; gap: .25rem; }
}

@media (max-width: 639px) {
  /* Nachtrag 2: waagerecht scrollbare Leisten (Kundenstimmen-Karussell): Karte 85 % breit, nächste Karte angeschnitten sichtbar.
     Die Karte trägt min-w-[280px] snap-center; ihre Hülle (.animate-fade-up) ist das Flex-Kind der Leiste. */
  #root [class*="overflow-x-auto"][class*="snap-x"] > * { flex: 0 0 85%; width: 85%; min-width: 0; }
  #root [class*="overflow-x-auto"][class*="snap-x"] > * > [class*="min-w-"] { min-width: 0; width: 100%; }
  /* Kennzahl-Kacheln in 2 Spalten (dunkle Karte der Leistungsseiten): weniger Abstand, Beschriftung darf umbrechen */
  #root main section .grid-cols-2 { column-gap: .75rem; row-gap: .75rem; }
  #root main section .grid-cols-2 > [class*="rounded"] { padding: 1rem .5rem; }
  #root main section .grid-cols-2 [class*="text-sm"], #root main section .grid-cols-2 [class*="text-xs"] { font-size: .75rem; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
}

@media (max-width: 639px) {
  /* Nachtrag 3: Breadcrumbs — Übersicht (nav außerhalb der section) und Kopfbild der Leistungsseiten (div.flex.gap-2.text-xs) */
  #root main nav a,
  #root main div[class*="justify-center"][class*="gap-2"][class*="text-xs"] > a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}