/* EHA i-Kfz Landingpage - Mobil-Nachtrag 04.08.2026
   -------------------------------------------------
   Bewusst eine EIGENE Datei statt einer Aenderung an eha-ikfz-fix-1.css
   oder am Bundle: das Bundle ist minifiziert und ohne Quellcode, jede
   Aenderung dort ist eine Zeichenkettenersetzung mit Restrisiko fuer
   alle zehn Sprachbloecke. Diese Datei laesst sich mit dem Entfernen
   EINER Zeile in index.html vollstaendig zuruecknehmen.

   Alle Regeln sind auf Handybreite begrenzt (Tailwind-Grenze sm = 640px),
   das Erscheinungsbild auf Tablet und Rechner bleibt unveraendert.
   Die Datei wird NACH index-jG6YLFEF.css geladen; bei gleicher
   Spezifitaet gewinnt daher sie. Wo Tailwind spezifischer waere, ist
   die Spezifitaet hier durch einen Attributselektor angehoben - NICHT
   durch !important, damit spaetere Regeln noch eingreifen koennen.
*/

/* ---------- 1) Karten der Auftragsarten ----------
   Die Karte traegt min-h-[400px], ihr Kopf min-h-[96px] und der
   Beschreibungstext min-h-[160px]. Alle drei sind fuer das
   MEHRSPALTIGE Raster gedacht: nebeneinander sollen die Karten gleich
   hoch sein und die Knoepfe auf einer Linie stehen. Einspaltig auf dem
   Handy erzeugt dieselbe Regel nur Leerraum - gemessen rund 150px
   zwischen Beschreibungstext und dem Knopf "Auswaehlen", bei jeder der
   neun Karten.
   Es sind GENAU diese drei; im Bundle kommt keine weitere min-h-Angabe
   vor (nachgezaehlt, nicht vermutet). Der erste Anlauf hatte nur zwei
   davon aufgehoben, die Luecke blieb sichtbar - eine Mindesthoehe
   reicht aus, um die Wirkung der beiden anderen zu verdecken.
   Der Attributselektor umgeht das Maskieren der eckigen Klammern im
   Klassennamen und ist gegen Aenderungen der Klassenreihenfolge
   unempfindlich. */
@media (max-width: 639.98px) {
  [class*="min-h-[400px]"] { min-height: 0; }
  [class*="min-h-[96px]"] { min-height: 0; }
  [class*="min-h-[160px]"] { min-height: 0; }
}

/* ---------- 2) Tippziele ----------
   Sprachknoepfe, "Auswaehlen" und "Als Unterseite oeffnen" waren 36px
   hoch. Gaengiges Mindestmass fuer eine Fingerkuppe sind 44px.
   min-height statt height: die Regel kann ein Element nur groesser,
   nie kleiner machen - ein bereits ausreichend hoher Knopf bleibt, wie
   er ist. */
@media (max-width: 639.98px) {
  button { min-height: 44px; }
}

/* ---------- 3) Ueberschrift des Kopfbereichs ----------
   Die Ueberschrift verwendet GESCHUETZTE Bindestriche (U+2011).
   "Online-Kfz-Zulassung" ist damit ein einziges unteilbares Wort mit
   320px Mindestbreite. Auf einem 320px-Geraet bleiben nach dem
   seitlichen Innenabstand (px-4, 2x16px) nur 288px uebrig - die
   Ueberschrift sprengte den Rahmen und die GANZE Seite liess sich um
   32px quer schieben. Betroffen waren Deutsch (32px) und Russisch
   (23px), die uebrigen acht Sprachen nicht.
   Der geschuetzte Bindestrich ist gewollt (i-Kfz soll nicht umbrechen)
   und bleibt deshalb im Text; stattdessen wird die Schrift auf sehr
   schmalen Geraeten so weit verkleinert, dass das Wort passt.
   Ab 360px Geraetebreite passt die Ueberschrift in Originalgroesse. */
@media (max-width: 359.98px) {
  h1[class*="text-3xl"] { font-size: 1.6rem; line-height: 1.2; }
}

/* Sicherheitsnetz fuer alle Breiten und alle zehn Sprachen: sollte je ein
   Wort trotzdem nicht passen, bricht es um, statt die Seite zu verbreitern.
   Bei normal umbrechendem Text hat die Regel keine Wirkung. */
h1[class*="text-3xl"] { overflow-wrap: break-word; }