/* Layout corrections to the delivered design. */
@layer components {
/* Cards with "at least 100 % wide" plus padding grew wider than the screen on
   phones (content-box sizing) and their right edge was cut off. */
.flex-col-7, .grid-6 { box-sizing: border-box; }
/* iOS Safari enlarges text in landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Narrow phones (down to 320 px) – things that stuck out of the screen: */
/* link cards on the zh home page: flex-basis 320px plus padding */
.flex-ink-bg-white-round-5 { box-sizing: border-box; }
.flex-3, .flex-col-28 { min-width: 0; }
.flex-col-28 { overflow-wrap: anywhere; }
/* pill buttons with long labels may wrap instead of overflowing */
.iflex-fs16px-medium-red-4 { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
/* long e-mail addresses in the contact details */
.stack-2 { min-width: 0; }
.x-18 { overflow-wrap: anywhere; }
/* long compound words in the news heading */
.news-title { hyphens: auto; overflow-wrap: anywhere; }
/* "AI-generated" badges were placed with a fixed distance from the right edge
   of a wide image; on narrow screens that pushed them off the left edge */
@media (max-width: 640px) {
  .fs115px-white-round-2, .fs115px-white-round-3, .fs115px-white-round-4 { right: auto; left: 12px; }
}
/* Safety net for narrow screens: a word that does not fit may break (iOS Safari
   does not always hyphenate long German compounds like "Gesundheitspersonal"). */
@media (max-width: 480px) {
  .page { overflow-wrap: anywhere; }
}
.flex-col-2 { min-width: 0; }
}