/* Lemona, Ausrichtung am Handy
   ------------------------------------------------------------------
   Eine Datei für die ganze Website. Eingebunden auf der Startseite,
   über-mich, Gutschein, Blogübersicht, Links und Paper.

   Nicht eingebunden auf Impressum, Datenschutzerklärung und dem
   Blogbeitrag: dort stehen lange Absätze, und zentrierter Fließtext
   liest sich über mehrere Zeilen schlecht.

   23.10.2026: Am Handy wird der Text zentriert. Vorher richtete sich die
   Ausrichtung nach der Hintergrundfarbe des Abschnitts, helle Abschnitte
   mittig, normale linksbündig. Am großen Bildschirm wirkt das wie ein
   Rhythmus, in der schmalen Spalte am Telefon wie ein Versehen.
   Die Grenze liegt bei 860px, dieselbe, ab der auch der Kopfbereich
   zentriert. Am großen Bildschirm ändert sich dadurch nichts.

   29.10.2026: Drei Blöcke stehen wieder linksbündig, siehe unten.
   ------------------------------------------------------------------ */

@media (width <= 860px) {
  .abschnitt .kicker,
  .abschnitt h2,
  .abschnitt h3,
  .abschnitt h4,
  .abschnitt p,
  .abschnitt summary,
  .abschnitt label {
    text-align: center;
  }

  /* Getippter Text liest sich zentriert schlecht. */
  .abschnitt input,
  .abschnitt textarea,
  .abschnitt select {
    text-align: left;
  }

  /* 1. Zielgruppen, also "Wann eignet sich mein Gesangsunterricht für
        dich?" samt Titel, Einträgen und deren Beschreibungen. */
  .zielgruppen,
  .zielgruppen h2,
  .zielgruppen h3,
  .zielgruppen p,
  .zielgruppen li {
    text-align: left;
  }

  /* 2. Häufige Fragen: die Fragen und die Antworten. Überschrift und
        Vorspann des Abschnitts bleiben mittig. */
  .faq details.pane,
  .faq details.pane summary,
  .faq details.pane h4,
  .faq details.pane p {
    text-align: left;
  }

  /* 3. Kontaktformular: Beschriftungen der Felder, Zustimmungstext. */
  .kf .kf-feld,
  .kf .kf-feld span,
  .kf .kf-check,
  .kf .kf-check span {
    text-align: left;
  }
}

/* Der Absendeknopf ist ein <button> und erbt die Schriftart nicht von
   allein, anders als die Knöpfe, die Links sind. Ohne diese Zeile steht
   dort die Systemschrift statt Comfortaa. Gilt in jeder Breite. */
button.btn {
  font-family: inherit;
  letter-spacing: inherit;
}