/* Nachbesserungen für die Handydarstellung — HJE-050, 11.10.2026
 *
 * Eigene Datei statt Eingriff in die Vorlage der Agentur: Die Stile des
 * Templates liegen in zusammengeführten Dateien unter /typo3temp/, die bei
 * einem erneuten Abzug aus TYPO3 neu entstehen. Was dort geändert wird, ist
 * beim nächsten Mal weg. Diese Datei wird nach ihnen geladen und überschreibt
 * gezielt einzelne Werte.
 *
 * Alles steht in einer Abfrage für schmale Bildschirme. Am Schreibtisch
 * ändert sich dadurch nichts — dort wird mit der Maus geklickt, und die
 * beanstandeten Maße sind dort kein Problem. Der Auftrag lautete „auf dem
 * Handy".
 *
 * Nicht angefasst: das HJE-Grün #7BB928. Es kommt bei kleiner Schrift nicht
 * auf den geforderten Kontrast, aber Christian Doisl, 11.10.2026: „mir
 * gefallen die gelben Punkte schon".
 */

@media (max-width: 767px) {

  /* --- Klickflächen auf 44 px ---------------------------------------
   * Apple nennt 44 x 44 px als Mindestmaß für eine Fläche, die mit dem
   * Finger getroffen werden soll. Beide Schaltflächen kamen auf 37 px:
   * 25 px Zeilenhöhe + 2 x 5 px Innenabstand + 2 x 1 px Rand. Mit 9 px
   * Innenabstand werden daraus 45 px. Die Schrift bleibt unverändert,
   * nur der Abstand wächst -- das verschiebt kein Layout.
   */
  .button-full-width,
  .teaser-carousel-single-link {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  /* --- Cookie-Hinweis ------------------------------------------------
   * Stand auf 10,2 px. Unter 12 px ist auf einem Telefon im Tageslicht
   * kaum etwas zu lesen. 13 px ist die untere Grenze des Vertretbaren.
   * Der Verweis "Weitere Informationen" war mit 37 px ebenfalls zu
   * flach; 14 px Innenabstand bringen ihn auf 47 px.
   */
  .cc_message,
  .cc_btn,
  .cc_more_info {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .cc_more_info {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* --- Text über den Slider-Bildern ----------------------------------
   * "EMOTIONAL PRÄSENTIEREN" steht in weißer Versalschrift ohne
   * Abdunklung auf einem hellen Foto und verschwindet darin fast. Ein
   * Schatten trennt die Schrift vom Bild, ohne die Gestaltung zu
   * verändern -- anders als eine eingezogene Fläche hinter dem Text.
   * Auf dunklem Grund fällt er nicht auf.
   *
   * Zwei Schatten: ein enger, fast schwarzer zeichnet die Kante der
   * Buchstaben nach, ein weiter, weicher dunkelt das Umfeld ab. Ein
   * einzelner weicher Schatten reichte nicht -- die Vorlage setzt bereits
   * einen (2px 3px 3px), und der Text blieb trotzdem schwer lesbar.
   *
   * !important ist hier nötig: ohne das gewann die Regel der Vorlage.
   */
  .tp-caption,
  .tp-caption * {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.55) !important;
  }

  /* --- Punkte unter dem Kachelkarussell ------------------------------
   * Die Navigationspunkte sind 29 x 25 px. Der sichtbare Punkt misst nur
   * 15 px, der Rest ist Abstand. Mehr Innenabstand vergrößert die Fläche,
   * die der Finger trifft, ohne den Punkt selbst zu verändern -- er bleibt
   * exakt so groß und so gesetzt wie bisher.
   *
   * Der lange Selektor ist nötig: Die Vorlage setzt
   *   .owl-carousel button.owl-dot { padding: 0 !important }
   * Ein kurzes .owl-dot mit !important verliert dagegen, weil bei gleichem
   * Rang die Spezifität entscheidet und erst danach die Reihenfolge.
   * !important allein genügt also nicht.
   */
  .owl-carousel .owl-dots button.owl-dot {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

}