@layer components {
/* r46: calm orientation images, separated from readable copy in both themes. */
.supporting-image { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--brand-surface); }
.supporting-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.supporting-image--compact { max-width: calc(var(--s8) * 3); margin-bottom: var(--s4); }
.supporting-image--compact img { aspect-ratio: 3 / 2; }
/* Paket T (Daniel 15.10.2026, design B "Bühne"): the area heads, copy left, the picture right fading softly into the card
   like the Prüfen launch card and the Zentrale stage. Phones: copy first, the picture below fading upwards. The info
   panel of the head is fixed to the viewport, so the rounded clip of the card never cuts it. Paket W (Daniel 15.10.2026,
   "Hell bleibt hell"): the card is the theme-following stage (.r4x-stage, its skin), so the picture fades into light in
   the light theme and into the brand black in the dark one. */
.supporting-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.supporting-hero__copy { min-width: 0; align-self: center; padding: var(--s7) var(--s5) var(--s7) var(--s7); }
/* Title and share control stay side by side; only when the longest word of the title and the control do not fit inside
   the card (Wissen, "Nachschlagen", below about 330 px) the control moves one line down at the right edge instead of
   being cut by the card. */
.supporting-hero .title-share { flex-wrap: wrap; }
.supporting-hero .title-share > h1 { flex-basis: 0; min-width: min-content; }
.supporting-hero .title-share > .icon-control { margin-inline-start: auto; }
.supporting-hero .supporting-image { border-radius: 0; background: none; }
.supporting-hero .supporting-image img { height: 100%; mask-image: linear-gradient(90deg, transparent, var(--brand-page) 42%); }
.supporting-media-actions { margin-top: var(--s2); }
.supporting-media-preview { margin: 0; }
.supporting-media-preview svg { width: 100%; height: auto; }
.supporting-media-preview .media-viewer-image { padding: var(--s4); }
.supporting-media-preview .media-viewer-image > img { display: block; width: 100%; height: auto; }
.supporting-media-preview--graphic .media-viewer-image { width: 100%; }
.supporting-media-preview--graphic .media-viewer-image > figure { transform-origin: top left; }
.supporting-media-preview--graphic [data-zoom='1.5'] > figure { transform: scale(1.5); }
.supporting-media-preview--graphic [data-zoom='2'] > figure { transform: scale(2); }
.supporting-media-preview--graphic [data-zoom='2.5'] > figure { transform: scale(2.5); }
.supporting-media-preview--graphic [data-zoom='3'] > figure { transform: scale(3); }
@media (max-width: 767px) {
 .supporting-hero { grid-template-columns: minmax(0, 1fr); }
 .supporting-hero__copy { padding: var(--s5) var(--s4) 0; }
 .supporting-hero .supporting-image img { height: auto; mask-image: linear-gradient(180deg, transparent, var(--brand-page) 34%); }
 .supporting-image--compact { max-width: calc(var(--s8) * 2); }
}
}