/* ============================================================
   digitalantrieb / 12 - TOUCH UND KLEINE BILDSCHIRME

   Diese Datei kommt zuletzt und korrigiert gezielt, was am
   Zeigegeraet funktioniert und am Finger nicht. Sie steht
   bewusst getrennt: So bleibt die Gestaltung in den Dateien
   davor lesbar, und man sieht auf einen Blick, welche
   Entscheidungen fuer den Finger getroffen wurden.

   ------------------------------------------------------------
   WARUM 44 PIXEL
   ------------------------------------------------------------
   Eine Fingerkuppe trifft ungenauer als ein Mauszeiger. Apple
   nennt 44 Punkte als Mindestmass, Google 48 dp. Gemessen lagen
   auf dieser Seite mehrere Ziele darunter: der Menue-Knopf bei
   17 Pixeln, die Menuepunkte bei 27, die Einwilligungs-Box bei
   21. Das ist kein Schoenheitsfehler, das ist der Unterschied
   zwischen "Anfrage abgeschickt" und "dreimal danebengetippt".

   Vergroessert wird die TREFFERFLAECHE, nicht die Schrift. Die
   Gestaltung bleibt damit unveraendert, nur der Bereich, der
   auf eine Beruehrung reagiert, waechst.
   ============================================================ */

@media (pointer: coarse) {

  /* --- Kopfzeile ------------------------------------------- */
  .nav__brand,
  .nav__cta,
  .menu-btn {
    min-height: 44px;
  }

  /* Der Menue-Knopf war mit 17 Pixeln das kleinste Ziel der
     ganzen Seite - und das am haeufigsten benutzte. */
  .menu-btn {
    padding: 0.7rem 0.2rem 0.7rem 0.6rem;
    margin-right: -0.2rem;
  }

  .flywheel {
    min-width: 44px;
    min-height: 44px;
  }

  /* --- Vollbildmenue --------------------------------------- */
  .menu__link {
    padding-block: 0.45rem;
    min-height: 44px;
    align-items: center;
  }

  .menu__foot a {
    display: inline-block;
    padding-block: 0.55rem;
  }

  /* --- Verweise im Fliesstext und im Fuss ------------------- */
  /* inline-block, weil ein reiner Inline-Kasten kein vertikales
     Polster annimmt: es waere sichtbar, aber nicht anfassbar. */
  /* Nachgemessen: mit 0.5rem blieben mehrere Ziele bei 41 bis
     43 Pixeln haengen, also knapp unter dem Mass. 0.65rem
     bringt alle sicher darueber. */
  .ulink,
  .kontakt__mail,
  .foot__mail,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.65rem;
  }

  .foot__col a,
  .foot__legal a,
  .kontakt__block a,
  .pfoot a,
  .pfoot__bar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Das Kaestchen der Einwilligung bleibt klein - angefasst wird
     die Beschriftung darum herum. Deshalb ist die 21 Pixel hohe
     Box hier kein Problem: sie ist nicht das Ziel. */
  .check input[type="checkbox"] { /* bewusst unveraendert */ }

  /* --- Leistungszeilen ------------------------------------- */
  .svc__row { min-height: 56px; }

  /* --- Formular -------------------------------------------- */
  .form input:not([type="checkbox"]),
  .form textarea,
  .form select {
    min-height: 48px;
  }

  /* Die Einwilligung war 21 Pixel hoch. Angefasst wird jetzt
     die ganze Zeile, nicht nur das Kaestchen. */
  .check {
    min-height: 44px;
    align-items: flex-start;
    padding-block: 0.35rem;
  }

  .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .btn,
  .btn--send {
    min-height: 48px;
  }

  /* --- Aufklappbare Fragen auf den Unterseiten -------------- */
  .faq summary { min-height: 48px; display: flex; align-items: center; }
}

/* ------------------------------------------------------------
   KLEINE BILDSCHIRME

   Hier geht es nicht um den Finger, sondern um die Breite.
   ------------------------------------------------------------ */
@media (max-width: 480px) {

  /* Die Treppe in der Schlagzeile ist Teil der Handschrift,
     aber bei vier Zeilen auf 360 Pixeln wird aus der Treppe
     ein Ausfransen. Flacher, nicht weg. */
  .hero__title .l2 { padding-left: 0.4rem; }
  .hero__title .l3 { padding-left: 0.9rem; }

  /* Der schwebende Button steht sonst genau auf dem Text. Er
     rueckt naeher in die Ecke und wird etwas kleiner. */
  .wa {
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.75rem;
  }
  .wa svg { width: 22px; height: 22px; }

  /* Damit der Button den Absendeknopf nicht verdeckt, bekommt
     der Fuss des Formulars Platz darunter. */
  .form__foot { padding-bottom: 3.5rem; }
}

/* ------------------------------------------------------------
   SEHR SCHMAL

   Ab hier zaehlt jede Zeile. Der Preis wandert unter den Namen,
   statt sich mit ihm um dieselbe Zeile zu streiten.
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  .hero__title .l2,
  .hero__title .l3 { padding-left: 0; }

  .nav__cta { display: none; }
}