/* ============================================================
   mobil-fixes.css — Mobil/iOS-Nachbesserung der Anfrage-Seiten
   Einbindung: NACH style.css, anfrage.css und (falls vorhanden) anfrage-breit.css bzw.
   erstgespraech-kacheln.css, als letztes Stylesheet.
   Grundsatz: Das Desktop-Bild bleibt gleich. Alle Regeln stehen in @media (max-width: 767px),
   in der Querformat-Abfrage unten oder in Abfragen für Touch-Geräte (hover: none). Ausnahmen
   (ohne sichtbare Wirkung am Desktop): -webkit-text-size-adjust und prefers-reduced-motion.
   Entscheidungen: Fließtext mobil mindestens 16 px, Etiketten (Überschriftenlabel) mindestens 12 px
   bleiben, Tippflächen mindestens 44 px, Eingabefelder mindestens 16 px (iOS zoomt darunter).
   Die Markenregel (feste Schriftgrößen 16/18/20/24/28/40 px) bleibt: rem/clamp nur bei Abständen.
   ============================================================ */

/* Mobil: iOS soll die Schrift beim Drehen nicht selbst vergrößern. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Mobil: Bewegung abschalten, wenn das Gerät es wünscht (Fortschrittsbalken war nicht erfasst). */
@media (prefers-reduced-motion: reduce) {
  .fortschritt-balken, .kachel-knopf { transition: none; }
  html { scroll-behavior: auto; }
}

/* Mobil: Hover nur dort, wo es Hover gibt. Auf iOS bleibt :hover sonst nach dem Tippen hängen. */
@media (hover: none) {
  a:hover { color: var(--tinte); }
  .btn-absenden:hover, .fuss-knopf:hover { background: transparent; }
  .kachel-knopf:hover { background: transparent; color: var(--tinte); }
  .kachel--rechts .kachel-knopf:hover { background: transparent; color: var(--tinte); }
  .kachel-knopf--gefuellt:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
}

/* ------------------------------------------------------------
   Safe-Area (wirkt erst mit viewport-fit=cover im viewport meta, siehe PHP-Liste).
   Mobil: Seitenränder nie kleiner als die Aussparung des Geräts.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .kapitelkopf, .sek, .anfrage-fuss {
    padding-left: max(var(--rand-tablet), env(safe-area-inset-left));
    padding-right: max(var(--rand-tablet), env(safe-area-inset-right));
  }
}
@media (max-width: 640px) {
  .kapitelkopf, .sek, .anfrage-fuss {
    padding-left: max(var(--rand-mobil), env(safe-area-inset-left));
    padding-right: max(var(--rand-mobil), env(safe-area-inset-right));
  }
  .kapitelkopf { padding-top: max(28px, env(safe-area-inset-top)); }
}
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  .anfrage-fuss { padding-bottom: max(40px, env(safe-area-inset-bottom)); }

  /* Mobil: Abstände über clamp statt fest 100 px (Typografie bleibt fest, Markenregel). */
  .sek { padding-top: clamp(48px, 14vw, 100px); padding-bottom: clamp(48px, 14vw, 100px); }

  /* Mobil: Zeilenhöhe Fließtext mindestens 1,5. */
  .t-16, .t-18, .feld label, .feld-titel, .feld-hinweis, .feld-fehler, .einwilligung label, .radio-option,
  .kachel-liste li, .kachel-klein, .plan-liste li, .nachweis-liste li,
  .zusammenfassung dl, .bestellung-preise, .formular-rueckmeldung,
  .ablauf-kasten li, .schritte-anzeige li { line-height: 1.5; }
  .kachel-kern-satz { line-height: 1.3; }

  /* Mobil: Logo-Link 44 px Tippfläche. */
  .kopf-logo-link { min-height: 44px; }

  /* Mobil: Fußlinks 44 px Tippfläche; Unterstrich per text-decoration, damit er nicht 44 px tiefer rutscht. */
  .anfrage-fuss { gap: 4px 24px; }
  .anfrage-fuss a.link-unterstrichen--akzent {
    display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; padding-bottom: 0;
    text-decoration: underline; text-decoration-color: var(--akzent); text-underline-offset: 4px;
  }
  .fuss-knopf { min-height: 44px; display: inline-flex; align-items: center; }

  /* Mobil: Links im Satz vergrößern nur die Tippfläche (Padding am Inline-Element ändert die Zeile nicht). */
  p a.link-unterstrichen--akzent, label a.link-unterstrichen--akzent {
    border-bottom: 0; padding: 13px 0; text-decoration: underline; text-decoration-color: var(--akzent);
    text-underline-offset: 3px;
  }

  /* Mobil: Eingabefelder 16 px oder mehr, 44 px hoch, ohne iOS-Innenschatten. */
  .feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
    -webkit-appearance: none; appearance: none; min-height: 44px;
  }
  .feld textarea { height: auto; min-height: 120px; }
  .feld select { min-height: 44px; font-size: 18px; }
  .feld input[type="date"] {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; box-sizing: border-box;
    min-height: 44px; margin: 0; border: 0; border-bottom: 1px solid var(--akzent); border-radius: 0;
    background: transparent; padding: 6px 0 12px 0; font-size: 18px; font-family: inherit; font-weight: 300;
    line-height: 1.4; color: var(--tinte); text-align: left; outline: none;
  }
  .feld input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  .feld input[type="date"]:focus { border-bottom-color: var(--blass); }
  .feld input[type="date"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

  /* Mobil: Optionsfelder und Häkchen, 44 px Zeile; Label berührt die Box, damit keine tote Lücke bleibt. */
  .einwilligung { flex-wrap: wrap; gap: 0; }
  .einwilligung input[type="checkbox"] { margin-top: 13px; }
  .einwilligung label { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 10px 0 10px 12px; }
  /* Mobil: Fehlermeldung unter Häkchen und Label, nicht als drittes Flex-Item (verursachte 36 px Überlauf). */
  .einwilligung > .feld-fehler { flex: 0 0 100%; min-width: 0; }
  .radio-option { padding-block: 4px; }

  /* Mobil: Preisübersicht, Beträge brechen um statt über den Rand zu laufen. */
  .bestellung-preise > div { flex-wrap: wrap; gap: 0 16px; }
  .bestellung-preise dd { white-space: normal; margin-left: auto; }
  .bestellung--verbraucher .bestellung-gesamt { font-size: 24px; }
  .preis-betrag { font-size: 32px; }

  /* Mobil: Entfernen-Knopf und Tippfläche in der Nachweisliste. */
  .knopf-entfernen { min-width: 44px; }

  /* Mobil: kein Doppeltipp-Zoom auf bedienbaren Elementen. */
  a, button, summary, label, input, select, textarea { touch-action: manipulation; }

  /* Mobil: lange Wörter (E-Mail, Dateinamen) brechen. */
  .feld-fehler, .zusammenfassung dd, .nachweis-liste li, .kachel-klein { overflow-wrap: anywhere; }
}

/* Mobil: Querformat (Handy): Kapitelkopf nicht mehr zwei Drittel der Höhe, Schrittleiste ohne Überlauf. */
@media (max-height: 500px) and (orientation: landscape) {
  .kapitelkopf { min-height: 0; padding-bottom: 28px; gap: 16px; }
  .sek { padding-top: 40px; padding-bottom: 40px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .schritte-anzeige li { font-size: 16px; overflow-wrap: anywhere; hyphens: auto; }
}

/* Mobil: lange Wörter in Überschriften, Listen und Optionsfeldern brechen, statt die Spalte zu sprengen (320 px). */
@media (max-width: 767px) {
  h1, h2, h3, .kachel-liste li, .radio-option, .bestellung-preise dt, .einwilligung label, .feld label,
  .feld-titel { overflow-wrap: anywhere; hyphens: auto; }
}

/* Mobil: sehr schmale Geräte (iPhone SE 1. Generation, 320 px): kleinerer Seitenrand und Kapitelüberschrift 36 px,
   sonst ist "Mieteranfrage" (40 px fett, 281 px breit) breiter als die Spalte und die Seite läuft um 1 px über. */
@media (max-width: 360px) {
  :root { --rand-mobil: 24px; }
  .kapitelkopf .h-40 { font-size: 36px; }
  .kachel { padding-left: 20px; padding-right: 20px; }
}

/* Mobil: Fehlerseiten "nicht erreichbar" (503). Sie haben im PHP weder head noch viewport noch anfrage.css (PHP-Liste P4).
   Diese Regeln greifen unabhängig von der Breite, wirken auf styled Seiten nicht (dort steht kein p direkt im body)
   und lassen sich allein mit mobil-fixes.css nutzen. */
body > p { margin: 0; padding: 24px; font-size: 18px; line-height: 1.5; }
.fuss-knopf { min-height: 44px; display: inline-flex; align-items: center; line-height: 1.4; }
body > footer.anfrage-fuss { padding: 8px 24px 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Mobil: Der Pfeil der Kachel-Knöpfe passt neben „Kontaktaufnahme per E-Mail“ nicht in eine Zeile; ohne Maus dreht er
   ohnehin nicht. Unter 768 px entfällt er, die Pill-Form und der Druck bleiben. */
@media (max-width: 767px) {
  .kachel-knopf::after { display: none; }
}

/* Mobil: Der Absende-Knopf ist seit den lebendigen Knöpfen gefüllt (anfrage.css). Ohne Hover bleibt er gefüllt;
   die Regel oben (Hintergrund transparent) gälte sonst nach dem Tippen und ließe weiße Schrift auf Weiß stehen. */
@media (hover: none) {
  .btn-absenden:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
  .btn-absenden.knopf-zweitrangig:hover { background: transparent; border-color: var(--blass); color: var(--tinte); }
  .btn-absenden:hover::after, .kachel-knopf:hover::after { transform: none; }
}

/* Mobil: Der Knopf der Plan-Kachel zeigt die kurze Fassung. Die Zusätze sind display: none und zählen so weder zum
   sichtbaren Text noch zum zugänglichen Namen (WCAG 2.5.3). */
@media (max-width: 767px) {
  .kachel-knopf .knopf-zusatz { display: none; }
  .kachel-knopf { padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }
}