@font-face { font-family: "Display Saira ExtraCondensed"; src: url('../Fonts/saira-extracondensed.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Display Saira Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 700; font-style: normal; size-adjust: 64.3%; ascent-override: 175.7%; descent-override: 68.4%; line-gap-override: 0%; }
.coverit-motif {
    /* All bands share one height (user decision 11.10.2026); compositions only shift spacing and image focus. */
    --motif-title-scale: .2865; --motif-title-max: 550px; --motif-space: min(4.531vw, 87px); --motif-image-position: center top;
    --motif-word-shift-1: -2.5vw; --motif-word-shift-2: -4vw; --motif-word-y: 0px; --motif-word-opacity: 60%;
    container-type: inline-size; position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: clamp(340px, 48.02vw, 922px);
    display: flex; flex-direction: column; justify-content: space-between; padding: var(--motif-space) 0 calc(var(--motif-space) - 5px) calc(var(--coverit-gutter) + max(0px, (100% - var(--coverit-shell)) / 2));
}
/* Image focus per composition for the XD layers (portrait 3:4, width-filling at every band width): the cut-out edge in front of
   the word (roof, skyline) covers about 15 % of the word height, measured at 360–2560 px (02.11.2026, DESIGN.md "Startseitenbänder"). */
.coverit-motif--0 { --motif-image-position: 50% 33%; padding-top: min(2.7vw, 52px); }
.coverit-motif--1 { --motif-image-position: 50% 56.5%; }
.coverit-motif--2 { --motif-image-position: 50% 47%; }
.coverit-motif--6 { --motif-image-position: 50% 60.97%; }
:is(.coverit-motif--3, .coverit-motif--4) { --motif-image-position: center; }
@media (max-width: 767px) {
    .coverit-motif--0 { --motif-image-position: 50% 38%; }
    .coverit-motif--1 { --motif-image-position: 50% 55.5%; }
    .coverit-motif--2 { --motif-image-position: 50% 50%; }
}
.coverit-content > .frame-type-shortcut:has(> .coverit-motif) { padding: 0; border: 0; }
.coverit-motif--5::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--coverit-background) 83%, transparent) 62%, transparent 80%); }
.coverit-motif--title-1 { --motif-title-scale: .24; --motif-title-max: 460.8px; }
.coverit-motif--title-2 { --motif-title-scale: .1733; --motif-title-max: 332.7px; }
.coverit-motif--title-3 { --motif-title-scale: .118; --motif-title-max: 226.6px; }
.coverit-motif > picture { position: absolute; inset: 0; }
.coverit-motif__background, .coverit-motif__foreground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--motif-image-position); pointer-events: none; }
.coverit-motif__background { z-index: -1; }
.coverit-motif__heading { display: grid; gap: 36px; }
/* Text on photos sits on a scrim of the stage colour (a halo does not count: the sky behind a light 300 weight stays too bright). */
.coverit-motif__label { position: relative; z-index: 3; justify-self: start; margin: 0 0 0 -.5em; border: 0; padding: .15em .5em; max-width: calc(100% - var(--coverit-gutter)); background: var(--coverit-background); color: var(--coverit-text); font-size: clamp(17px, 2.24vw, 43px); font-weight: 300; font-style: italic; line-height: 1.15; }
/* Transparency on the whole word (opacity), not on the fill: a transparent fill let the dark shadow below the glyphs shine through and darkened the orange. */
.coverit-motif__word { position: relative; z-index: 1; margin: 0; border: 0; padding: 0; font-family: "Display Saira ExtraCondensed", "Display Saira Fallback", sans-serif; font-weight: 700; font-style: italic; line-height: .9; white-space: nowrap; font-size: min(calc((100vw - 2 * var(--coverit-gutter)) * var(--motif-title-scale)), var(--motif-title-max)); translate: 0 calc(var(--motif-word-y) + var(--motif-word-lift, 0px)); color: var(--coverit-accent); opacity: var(--motif-word-opacity); text-shadow: 0 0 2px var(--coverit-word-shade), 0 1px 3px var(--coverit-word-shade), 0 2px 8px color-mix(in srgb, var(--coverit-word-shade) 78%, transparent); }
.coverit-motif__foreground { z-index: 2; }
/* The action is anchored to the band itself (user decision 03.11.2026): same distance from the right and bottom edge in every band. */
.coverit-motif__action { position: absolute; z-index: 3; right: 8.5%; bottom: calc(var(--motif-space) - 5px); display: grid; justify-items: end; gap: 12px; }
.coverit-motif__link { min-height: 44px; position: relative; display: inline-flex; align-items: center; gap: .25em; padding: 4px 12px 5.5px; background: color-mix(in srgb, var(--coverit-background) 72%, transparent); font-style: italic; font-weight: 500; font-size: clamp(21px, 1.667vw, 32px); line-height: 1; color: var(--coverit-text); text-decoration: none; }
.coverit-motif__link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 36%; height: 4px; background: var(--coverit-accent); transition: width var(--coverit-hover-duration); }
.coverit-motif__link:hover, .coverit-motif__link:focus-visible { color: var(--coverit-text); }
.coverit-motif__link:hover::after, .coverit-motif__link:focus-visible::after { width: 100%; }
.coverit-motif__link i { width: .5em; height: .5em; border-radius: 50%; background: var(--coverit-accent); }
.coverit-motif__action small { padding: .2em .35em; background: var(--coverit-background); font-size: .8125rem; }
.coverit-motif__caption { padding: .2em .35em; background: var(--coverit-background); position: absolute; z-index: 3; right: 24px; bottom: calc(var(--motif-space) + 37.5px); font-size: 13px; line-height: 1.5; }
@media (min-width: 768px) and (max-width: 1024px) {
    .coverit-motif__action { bottom: calc(var(--motif-space) - 6.5px); }
}
@media (max-width: 767px) {
    /* Fluid floor just above the tallest band content, so every composition renders the same height. */
    .coverit-motif { min-height: calc(36vw + 88px); padding-block: var(--motif-space) calc(var(--motif-space) + 24px); }
    .coverit-motif--0, .coverit-motif--2 { padding-top: 1.5vw; }
    .coverit-motif--3 { padding-top: 4vw; }
    .coverit-motif__action { right: var(--coverit-gutter); bottom: calc(var(--motif-space) + 24px); }
    .coverit-motif__caption { bottom: 8.5px; }
    .coverit-motif__heading { gap: 6px; }
    .coverit-motif__label { font-size: clamp(13px, 4.3vw, 17px); }
}
/* Word position (decision 30.10.2026): offset from the flow position in band widths (cqw) plus a fixed part, set so the foreground hides about 10 % of the glyph box
   on every width (scripts/check_motif_word_cover.mjs). Negative values lift the word. LEBENDIG has no value: it stays within 5 to 11 % at flow position. MEISTER (foreground does not
   reach the word) cannot reach it. TEAM is lifted as far as the label allows; the man in front of the word still hides more than 15 %. */
.coverit-motif--0 { --motif-word-y: calc(1.85cqw - 29px); }
.coverit-motif--1 { --motif-word-y: calc(1.65cqw - 13px); }
.coverit-motif--2 { --motif-word-y: calc(-.6cqw - 17px); }
.coverit-motif--5 { --motif-word-y: -4cqw; }
.coverit-motif--6 { --motif-word-y: calc(2.3cqw - 30px); }
@media (max-width: 767px) {
    .coverit-motif--0 { --motif-word-y: 0px; }
    .coverit-motif--1 { --motif-word-y: calc(-3.3cqw + 40px); }
    .coverit-motif--2 { --motif-word-y: calc(4.8cqw - 17px); }
    .coverit-motif--5 { --motif-word-y: 0px; }
    .coverit-motif--6 { --motif-word-y: 10px; }
}
@media (max-width: 659px) { .coverit-motif--6 { --motif-word-y: -7px; } }
@media (max-width: 599px) { .coverit-motif--6 { --motif-word-y: calc(-2.65cqw + 16px); } }
@media (max-width: 429px) {
    .coverit-motif--0 { --motif-word-y: calc(-6cqw + 20px); }
    .coverit-motif--2 { --motif-word-y: 2px; }
}
@media (max-width: 391px) { .coverit-motif--2 { --motif-word-y: calc(-13.75cqw + 37px); } }
@media (max-width: 767px) {
    .coverit-motif--shift-1 { --motif-word-lift: var(--motif-word-shift-1); }
    .coverit-motif--shift-2 { --motif-word-lift: var(--motif-word-shift-2); }
}
/* Above the 1920 px shell the band runs edge to edge and the whole 1920 composition scales with the width (decision 31.10.2026):
   every fixed size of the 1920 layout becomes its share of the band width (px / 19.2 = vw), so image crop, word, cut-outs and labels
   keep the proportions of the reference widths instead of a capped height cropping the photo. */
@media (min-width: 1921px) {
    .coverit-motif { --motif-space: 4.531vw; min-height: 48.02vw; padding-left: 2.917vw; }
    .coverit-motif--0 { padding-top: 2.7vw; --motif-word-y: .34cqw; }
    .coverit-motif--1 { --motif-word-y: .973cqw; }
    .coverit-motif--2 { --motif-word-y: -1.485cqw; }
    .coverit-motif--6 { --motif-word-y: .7375cqw; }
    .coverit-motif__word { font-size: calc(94.167vw * var(--motif-title-scale)); }
    .coverit-motif__heading { gap: 1.875vw; }
    .coverit-motif__label { font-size: 2.24vw; max-width: calc(100% - 2.917vw); }
    .coverit-motif__link { font-size: 1.667vw; min-height: 2.292vw; padding: .208vw .625vw .286vw; }
    .coverit-motif__action { gap: .625vw; }
    .coverit-motif__action small, .coverit-motif__caption { font-size: .677vw; }
    .coverit-motif__caption { right: 1.25vw; bottom: calc(var(--motif-space) + 1.953vw); }
}
@media (prefers-reduced-motion: reduce) { .coverit-motif__link::after { transition: none; } }