/* ==========================================================================
   CTP Layout-Fixes Mobil/Tablet (2026-10-06, datendrang)
   Ursache "Layoutwackler": einzelne Elemente waren breiter als der Viewport
   -> Mobilbrowser zoomt raus / Seite laesst sich seitlich verschieben.
   Gefunden per Crawl aller 182 Sitemap-URLs x 6 Breiten (320-1024 px).
   ========================================================================== */

/* 1) Brotkrumen + Sprachauswahl (51 Seiten, bis +99 px):
      Leiste war flex/nowrap mit fest 165 px breiter Sprachauswahl.
      Mobil/Tablet: Brotkrumen volle Breite, Sprachauswahl darunter. */
@media (max-width: 767.98px) {
  .ctp-breadcrumbs {
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 2px;
  }
  .ctp-breadcrumbs > .block-system-breadcrumb-block {
    flex: 1 1 100%;
    min-width: 0;
  }
  .ctp-breadcrumbs > .block-lang-dropdown {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
  }
  .ctp-breadcrumbs .custom-lang-dropdown {
    width: auto;
    min-width: 120px;
    max-width: 100%;
  }
  .ctp-breadcrumbs .form-item-lang-dropdown-select {
    margin-bottom: 0;
  }
  .ctp-breadcrumbs ol.breadcrumb,
  .ctp-breadcrumbs .breadcrumb-item {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* 2) Fliesstext: geschuetzte Leerzeichen ( ) aus dem Editor und lange
      Woerter/URLs umbrechen statt ueber den Rand zu schieben. Greift nur,
      wenn ein Wort sonst nicht in die Zeile passt. */
.text-formatted,
.field--type-text-long,
.field--type-text-with-summary,
.node__content p,
.node__content li {
  overflow-wrap: break-word;
}
.text-formatted a,
.field--type-text-long a {
  overflow-wrap: anywhere;
}

/* 3) Ueberschriften mit langen Einzelwoertern (z. B. ZEMENTKLINKERHERSTELLUNG,
      KONSUMGUETERINDUSTRIE): Silbentrennung nur mobil/tablet, damit sich
      die Desktop-Umbrueche nicht aendern; Umbruch-Fallback ueberall. */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  overflow-wrap: break-word;
}
@media (max-width: 767.98px) {
  h1, h2, h3, h4, .h1, .h2, .h3, .h4,
  .h1 .field, .h2 .field, .h3 .field {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* 4) Startseiten-Slider: die .row-Region hat bewusst negativen Rand (randloses
      Bild), ragt dadurch aber 12 px links/rechts ueber den Viewport, dazu der
      unsichtbare Slick-"Weiter"-Button. Am aeusseren <slider>-Wrapper (exakt
      Viewport-breit) abschneiden; Rand/Design bleiben unveraendert. */
#page > slider {
  display: block;
  overflow: hidden;
}

/* 5) Datei-Links mit langen Dateinamen (z. B. CTP_ISO9001_14001_SCC_24_dt_0.pdf) */
span.file {
  max-width: 100%;
}
span.file a {
  overflow-wrap: anywhere;
}

/* 6) Leeres Brotkrumen-Glied ("Startseite / / Titel") auf Seiten ohne URL-Alias
      (Easy Breadcrumb erzeugt fuer das Pfadstueck "node" ein Glied ohne Titel). */
.breadcrumb-item:has(> a:empty) {
  display: none;
}