/* ──────────────────────────────────────────────────────────────────────────
   typografie.css – Lesbarkeits-Ebene, dauerhaft auf allen Seiten aktiv.
   Eingebunden ueber includes/pwa_head.php, also NACH dem <style>-Block der
   jeweiligen Seite -> gewinnt bei gleicher Spezifitaet ohne !important.

   Hintergrund (gemessen 18.07.2026 auf der Startseite): Grundschrift 16 px mit
   Zeilenhoehe ~1,2, 144 Textelemente unter 14 px (darunter der Datenschutz-
   Hinweis und die „(optional)"-Marker), und mobil 81 von 107 Tap-Zielen unter
   40 px. Fuer die Zielgruppe (Golfer 55+) war das der groesste Usability-Mangel.

   Bewusste Aufteilung (Marcs Vorgabe nach der Vorschau):
     • MOBIL   = volle Komfort-Kur (Tap-Ziele >= 52 px, groessere Buttons)
     • DESKTOP = nur Lesbarkeit; Bedienelemente bleiben zurueckhaltend, damit es
                 am grossen Bildschirm nicht klobig wirkt.
   Farben, Schriftarten und Layout bleiben unveraendert – das ist KEIN Redesign.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Grundlesbarkeit ───────────────────────────────────────────────────── */
body {
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, h4 { line-height: 1.25; }

/* Hinweis: Die wiederkehrenden Klein-Texte (.privacy-note, .trust-item,
   .hero-proof .hp-lab) sind BEWUSST nicht hier, sondern direkt in style.css
   korrigiert – dort ist ihre Quelle. Ein Overlay mit hoeherer Spezifitaet
   oder !important waere nur ein Pflaster gewesen. */

/* ── Bedienelemente: lesbar tippen ─────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  font-size: 17px;
  line-height: 1.5;
  min-height: 46px;
}
textarea { min-height: 110px; }

/* ⚠ NUR echte Aktions-Buttons, NICHT jedes <button>. Ein pauschales `button {min-height}`
   hat am 18.07. den runden Chat-Knopf zum Ei gemacht (44 breit, 52 hoch) und haette auch
   Hamburger- und Schliessen-Symbole verzerrt. Icon-Buttons duerfen ihre Groesse behalten. */
.submit-btn,
.btn,
button[type="submit"],
input[type="submit"] {
  font-size: 17px;
  line-height: 1.35;
}

/* ── MOBIL: volle Komfort-Kur ──────────────────────────────────────────── */
@media (max-width: 767px) {
  body { line-height: 1.65; }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: 52px;
  }

  .submit-btn,
  .btn,
  button[type="submit"],
  input[type="submit"] {
    min-height: 52px;
    font-size: 18px;
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  /* Runde Icon-Buttons ausdruecklich schuetzen: sie muessen quadratisch bleiben,
     sonst macht border-radius:50% aus dem Kreis eine Ellipse. */
  #fygc-fab .fab-main,
  #hlpw-toggle,
  .hamburger,
  .mobile-nav-close {
    min-height: 0;
  }

  /* Ankreuzfelder leichter treffen */
  input[type="checkbox"],
  input[type="radio"] { width: 22px; height: 22px; }

  label { line-height: 1.5; }
}

/* ── DESKTOP: bewusst zurueckhaltend ───────────────────────────────────── */
@media (min-width: 768px) {
  .submit-btn,
  .btn,
  button[type="submit"],
  input[type="submit"] { min-height: 46px; }
}