/* TOJA · Feinschliff für die Handy-Ansicht
   Wirkt nur bis 640 px Breite. Alles andere bleibt unberührt.
   Die Regeln stehen bewusst mit "html body" davor: Das Seiten-CSS liegt
   in den Elementor-HTML-Widgets, also im Body und damit weiter hinten –
   ohne die höhere Spezifität käme dieses Blatt nicht dagegen an. */

@media (max-width: 640px) {

  /* 1 · Porträt im Kopfbereich der Bewertungsseite
     Das Bild ist hochkant (896 × 1152). In einem 270 px hohen Ausschnitt
     wurden oben rund 35 px abgeschnitten – genau der Kopf. Mehr Höhe,
     und der Ausschnitt sitzt weiter oben. */
  html body #pg-bewertung .hero--photo .hero__photo {
    height: min(48vh, 380px) !important;
  }
  html body #pg-bewertung .hero--photo .hero__photo img {
    object-position: 56% 6% !important;
  }

  /* 2 · Kennzahlen-Karten
     Vorher zwei Spalten, deren erste je nach Textlänge zwischen 64 und
     118 px breit war – dadurch begann der Text in jeder Karte woanders
     und wurde in einen schmalen Rest gequetscht. Jetzt steht die Kennzahl
     über dem Text, der die volle Breite bekommt.

     Nachtrag 23.09.2026 (Punkt 41 des Korrekturprotokolls): Die Kennzahl
     stand hier mit 17 px kleiner da als sie sollte – kleiner als die
     Quellen-Hochzahlen mit 14 px und damit ohne erkennbare Rangfolge.
     Sie ist jetzt das größte Element der Karte; die Hochzahlen sind im
     Plugin TOJA Korrekturen auf 10 px gesetzt. */
  html body .pg .region__stats .stat-card {
    display: block !important;
    padding: 16px !important;
  }
  html body .pg .region__stats .stat-card__big {
    font-size: 26px !important;
    line-height: 1.15 !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    margin-bottom: 2px !important;
  }
  html body .pg .region__stats .stat-card__label {
    margin-bottom: 2px !important;
  }

  /* 3 · Keine automatische Silbentrennung
     "Hoch-schwarzwald" und "am häu-figsten" entstehen durch hyphens:auto.
     Auf schmalen Spalten liest sich das schlecht; geprüft, dass ohne
     Trennung nichts überläuft. */
  html body .pg h1,
  html body .pg h2,
  html body .pg h3,
  html body .pg .section-head p,
  html body .pg .region__stats .stat-card__label,
  html body .pg .region__stats .stat-card__note {
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }

  /* 4 · Brotkrume
     "Start › Unternehmen › Regionen & Marktberichte › Bad Säckingen"
     braucht 506 px, hat aber nur 350 – der Rest wurde abgeschnitten.
     Jetzt bricht sie um. */
  html body .pg .breadcrumb {
    flex-wrap: wrap !important;
    white-space: normal !important;
    row-gap: 2px !important;
  }
}