/* ============================================================
   EGH Gebaeudeservice / 11 - TELEFON

   Steht als letzte Datei, damit sie ohne !important gewinnt.
   Hier stehen nur die Stellen, an denen ein Entwurf, der am
   Schreibtisch stimmt, am Telefon nicht mehr stimmt.

   Bei einem Dienstleister wie diesem kommt die Mehrheit der
   Anfragen vom Telefon. Diese Datei ist deshalb keine
   Nacharbeit, sondern der Hauptfall.
   ============================================================ */

@media (max-width: 760px) {

  /* Grosse Grade schrumpfen staerker als die Formel es tut.
     Eine Schlagzeile, die den ganzen ersten Bildschirm frisst,
     schiebt den Knopf darunter aus dem Bild. */
  :root {
    --t-mega: clamp(2rem, 8.4vw, 2.85rem);
    --t-xl:   clamp(1.55rem, 6.4vw, 2.1rem);
    --t-lg:   clamp(1.3rem, 5.2vw, 1.6rem);
    --sec-y:  clamp(3.25rem, 10vw, 4.5rem);
  }

  /* Am Telefon steht das Bild zuoberst, direkt unter der
     Leiste. Dort reicht der halbe Abstand. */
  .hero { padding-top: var(--stack-2); }
  .hero__tasten .knopf { flex: 1 1 100%; }

  /* Der Abschluss und der Fuss brauchen Platz fuer die
     Rufleiste, sonst liegt sie auf der letzten Zeile. */
  .pschluss { margin-bottom: 3.5rem; }

  /* Das Formular bekommt den vollen Rand zurueck: Ein Kasten
     im Kasten laesst auf einem schmalen Geraet keine Zeile
     mehr uebrig. */
  .form { padding-inline: var(--stack-2); }

  .band { flex-direction: column; align-items: flex-start; }
  .band__tasten .knopf { flex: 1 1 100%; }

  /* Die Tafel ueber dem Gebietsbild rueckt nach unten statt
     darueber: Bei 360 Pixel Breite deckt sie sonst das ganze
     Bild ab, und dann kann es auch weg. */
  .gebiet__tafel { margin-top: var(--stack-2); box-shadow: none; }
}

@media (max-width: 420px) {
  .wertung b { font-size: 1.75rem; }
  .planer__takt button { flex: 1 1 100%; }
  .ruf a { font-size: 0.625rem; }
}

/* Auf einem liegenden Telefon ist der Bildschirm knapp 400
   Pixel hoch. Die Rufleiste wuerde dort ein Viertel davon
   verdecken. */
@media (max-height: 460px) and (orientation: landscape) {
  .ruf { display: none; }
  .hero { padding-block: var(--stack-4); }
}

/* Wer Bewegung reduziert, bekommt trotzdem eine vollstaendige
   Seite. Nur die Uebergaenge fallen weg. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}