/* ========================================
   Handy-Feinschliff (nur <= 820px)
   Gemessen am 16.08.2026 auf 375x812:
     - Seite war 14691px = 18,1 Bildschirme
     - TrackX-Telefone nur 113px breit -> nichts erkennbar
     - 29 Elemente unter 14px Schrift, kleinste 11,84px
     - 4 Tippziele unter 44px
   Desktop bleibt unangetastet: alles steht in einer Media Query.
   ======================================== */

@media (max-width: 820px) {

  /* ---------- 1. Lesbarkeit: nichts unter 14px ---------- */
  body { font-size: 1rem }
  .service-card p,
  .haus-kachel p,
  .produkt-liste li,
  .card-text,
  .package-features li,
  .footer p,
  .footer a { font-size: .9375rem; line-height: 1.55 }

  .produkt-label,
  .haus-kachel .zusatz { font-size: .75rem }

  .footer, .footer-bottom { font-size: .875rem }

  /* ---------- 2. TrackX-Telefone gross genug zum Erkennen ---------- */
  .telefone { gap: 0; justify-content: center }
  .telefone img { width: 46vw; max-width: 230px }
  .telefone img:nth-child(1) { transform: rotate(-4deg) translateX(6%); margin-bottom: 0 }
  .telefone img:nth-child(2) { transform: rotate(4deg) translateX(-6%); margin-bottom: 0; z-index: 2 }
  @media (prefers-reduced-motion: reduce) {
    .telefone img { transform: none }
  }

  /* ---------- 3. Tippziele auf mindestens 44px ---------- */
  .btn { min-height: 44px; padding-block: var(--space-md) }
  .text-center .btn,
  a.btn-text,
  .packages a[href*="packages"] { min-height: 44px; display: inline-flex; align-items: center }
  .nav-link { min-height: 44px; display: flex; align-items: center }

  /* ---------- 4. Laenge: Luft rausnehmen, ohne die Optik zu aendern ---------- */
  .produkte { padding: var(--space-3xl) 0 }
  .produkt { padding: var(--space-2xl) 0; gap: var(--space-xl) }
  .produkt-liste { margin-bottom: var(--space-lg) }
  .produkt-liste li { padding-top: .3rem; padding-bottom: .3rem }

  .service-card { padding: var(--space-lg) }
  .haus-kachel { padding: var(--space-lg) }
  .haus { padding: var(--space-3xl) 0 }

  .section-header { margin-bottom: var(--space-2xl) }
  .trust { padding: var(--space-3xl) 0 }
  .packages { padding: var(--space-3xl) 0 }
  .cta { padding: var(--space-3xl) 0 }

  /* Knoepfe nebeneinander statt gestapelt, wo Platz ist */
  .produkt-knoepfe { gap: var(--space-sm) }
  .produkt-knoepfe .btn { flex: 1 1 auto; min-width: 46% }

  /* Dialogfenster braucht auf dem Handy keine Extrapolster */
  .dialogfenster { padding: var(--space-lg) }
  .blase { max-width: 88% }
}

/* Sehr schmale Geraete: Schlagzeile darf nicht die halbe Seite fressen */
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(2rem, 9.5vw, 2.5rem) }
  .telefone img { width: 48vw }
}

/* ----------------------------------------
   Nachtrag 16.08.: gemessen, welche Elemente wirklich zu klein waren.
   Labels, Badges und die nachgebaute Browserleiste duerfen 12px bleiben --
   das ist ihre Rolle. Angehoben wird nur, was gelesen oder getippt wird.
   ---------------------------------------- */
@media (max-width: 820px) {
  .ft-sc-cta { font-size: .8125rem; min-height: 44px }   /* war 11,84px -- ist ein Knopf */
  .ft-tab .tb { font-size: .8125rem }                     /* Branche unter dem Kundennamen */
  .ft-tab { min-height: 44px }
  .lang-toggle { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .6rem }
  .ft-skip { font-size: .8125rem; padding: .5rem }        /* Ueberspringen muss treffbar sein */

  /* Laenge: die sechs USP-Karten sind der zweitgroesste Brocken.
     Zwei Spalten sparen gut zwei Bildschirme, der Text bleibt lesbar. */
  #usps .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) }
  #usps .service-card { padding: var(--space-md) }
  #usps .service-card h3 { font-size: .9375rem; hyphens: auto; overflow-wrap: break-word }
  #usps .service-card p { font-size: .8125rem; line-height: 1.45 }
  #usps .service-icon { width: 26px; height: 26px }
}
/* 375px ist das haeufigste iPhone -- die Zwei-Spalten-Regel MUSS dort greifen.
   Erst unter 340px wird es wirklich zu eng. */
@media (max-width: 339px) {
  #usps .grid-3 { grid-template-columns: minmax(0, 1fr) }
}

/* ----------------------------------------
   Abschnitts-Ueberschriften: --text-3xl laeuft auf 375px auf ~40px hoch und
   bricht dann ueber zwei Zeilen -- "Was noch aus dem Haus kommt" fuellte damit
   einen halben Bildschirm, bevor der Inhalt anfaengt. Etwas kleiner, gleiche
   Schriftschnitte, gleiche Farben. Desktop bleibt unveraendert.
   ---------------------------------------- */
@media (max-width: 820px) {
  .section-header h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.12 }
  .section-header p { font-size: .9375rem; margin-top: var(--space-sm) }
  .produkt-text h2 { font-size: clamp(1.5rem, 7vw, 2.125rem) }
  .cta h2 { font-size: clamp(1.625rem, 7vw, 2.25rem) }
}