.has-js {
    --motion-duration-fast: 350ms;
    --motion-duration-base: 700ms;
    --motion-duration-slow: 1000ms;
    --motion-duration-text: 820ms;
    --motion-duration-media: 900ms;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* Kräftigere Reveal-Kurve: schneller Start, langes weiches Auslaufen. */
    --motion-ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-duration-reveal: 1150ms;
    --motion-duration-reveal-subtle: 820ms;
    --motion-image-overscale: 1.14;
    --motion-image-overscale-subtle: 1.06;
    --motion-ease-section: cubic-bezier(0.76, 0, 0.24, 1);
    --motion-reveal-distance-section: clamp(16px, 1.45vw, 30px);
    --motion-reveal-distance-media: clamp(18px, 1.9vw, 34px);
    --motion-reveal-distance-media-subtle: clamp(8px, 0.9vw, 14px);
    --motion-reveal-distance-section-subtle: clamp(8px, 0.9vw, 14px);
    --motion-stagger-step: 110ms;
    --motion-stagger-step-subtle: 70ms;
    --motion-overlap-distance: clamp(80px, 18vh, 260px);
    --motion-stack-shadow: 0 -22px 46px rgba(4, 8, 16, 0.24);
}

.has-js .site-main {
    isolation: isolate;
}

.has-js .motion-transition-panel {
    position: relative;
    z-index: 1;
}

.has-js .motion-stack-panel {
    position: relative;
    top: auto;
    isolation: isolate;
    box-shadow: var(--motion-stack-shadow);
}
.has-js .motion-pin-stack-panel {
    position: sticky;
    top: 0;
    transform: translateZ(0);
}

.has-js .motion-overlap-panel {
    position: relative;
    z-index: var(--stack-index, 2);
}

.has-js .motion-reveal-panel {
    position: relative;
}

.has-js .motion-transition-panel + .motion-overlap-panel {
    margin-top: calc(var(--motion-overlap-distance) * -1);
}
.has-js .panel-sequence {
    --hero-peek-height: 94svh;
    position: relative;
    width: 100%;
    isolation: isolate;
}

.has-js .panel-sequence > .panel-sequence__panel {
    position: relative;
    z-index: var(--panel-index, 1);
}

.has-js .panel-sequence > .panel-sequence__panel--index-1 {
    --panel-index: 1;
}

.has-js .panel-sequence > .panel-sequence__panel--index-2 {
    --panel-index: 2;
}

.has-js .panel-sequence > .panel-sequence__panel--index-3 {
    --panel-index: 3;
}

.has-js .panel-sequence > .panel-sequence__panel--index-4 {
    --panel-index: 4;
}

.has-js .panel-sequence > .panel-sequence__panel--index-5 {
    --panel-index: 5;
}

.has-js .panel-sequence > .panel-sequence__panel--index-6 {
    --panel-index: 6;
}

.has-js .panel-sequence > .panel-sequence__panel--fullscreen {
    position: sticky;
    top: 0;
}

.has-js .panel-sequence > .panel-sequence__panel:not(:first-child) {
    box-shadow: var(--motion-stack-shadow);
}

.has-js .motion-stack-panel[data-animate~="section-reveal"],
.has-js .motion-stack-panel.animate-section {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
}

.has-js .motion-stack-panel[data-animate~="section-wipe"],
.has-js .motion-stack-panel.animate-section-wipe {
    overflow: visible;
}

.has-js .motion-stack-panel[data-animate~="section-wipe"]::before,
.has-js .motion-stack-panel.animate-section-wipe::before {
    display: none;
}

.has-js [data-animate~="section-reveal"],
.has-js .animate-section,
.has-js [data-animate~="media-reveal"],
.has-js .animate-media,
.has-js [data-animate~="section-wipe"],
.has-js .animate-section-wipe {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-section), 0);
    filter: saturate(0.94);
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out),
        transform var(--motion-duration-base) var(--motion-ease-out),
        filter var(--motion-duration-base) var(--motion-ease-out);
    will-change: opacity, transform;
}

.has-js [data-animate~="media-reveal"],
.has-js .animate-media {
    transform: translate3d(0, var(--motion-reveal-distance-media), 0);
    transition-duration: var(--motion-duration-media);
}

.has-js [data-animate~="media-reveal-subtle"],
.has-js .animate-media-subtle {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-media-subtle), 0);
    filter: none;
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out),
        transform var(--motion-duration-base) var(--motion-ease-out);
    will-change: opacity, transform;
}

.has-js [data-animate~="section-reveal"].is-visible,
.has-js .animate-section.is-visible,
.has-js [data-animate~="media-reveal"].is-visible,
.has-js .animate-media.is-visible,
.has-js [data-animate~="media-reveal-subtle"].is-visible,
.has-js .animate-media-subtle.is-visible,
.has-js [data-animate~="section-wipe"].is-visible,
.has-js .animate-section-wipe.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Medien-Reveal: der Rahmen wird von unten nach oben aufgewischt, das Bild
   fährt gleichzeitig aus leichter Übergröße in seine Endgröße zurück. Das
   ergibt eine deutlich wahrnehmbare Bewegung als eine reine Verschiebung um
   wenige Pixel - und wirkt trotzdem ruhig, weil beide Teilbewegungen dieselbe
   weiche Kurve nutzen. */
.has-js [data-animate~="media-reveal"] .case-media-item-frame,
.has-js .animate-media .case-media-item-frame,
.has-js [data-animate~="media-reveal"] .work-card-media,
.has-js .animate-media .work-card-media,
.has-js [data-animate~="media-reveal"] .about-image-media,
.has-js .animate-media .about-image-media {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--motion-duration-reveal) var(--motion-ease-reveal);
    will-change: clip-path;
}

.has-js [data-animate~="media-reveal"].is-visible .case-media-item-frame,
.has-js .animate-media.is-visible .case-media-item-frame,
.has-js [data-animate~="media-reveal"].is-visible .work-card-media,
.has-js .animate-media.is-visible .work-card-media,
.has-js [data-animate~="media-reveal"].is-visible .about-image-media,
.has-js .animate-media.is-visible .about-image-media {
    clip-path: inset(0 0 0 0);
}

.has-js [data-animate~="media-reveal"] .case-media-item-image,
.has-js .animate-media .case-media-item-image,
.has-js [data-animate~="media-reveal"] .work-card-media__asset,
.has-js .animate-media .work-card-media__asset {
    transform: scale(var(--motion-image-overscale));
    /* Etwas länger als die Blende, damit das Bild noch minimal nachzieht. */
    transition: transform calc(var(--motion-duration-reveal) + 250ms) var(--motion-ease-reveal);
    will-change: transform;
}

.has-js [data-animate~="media-reveal"].is-visible .case-media-item-image,
.has-js .animate-media.is-visible .case-media-item-image,
.has-js [data-animate~="media-reveal"].is-visible .work-card-media__asset,
.has-js .animate-media.is-visible .work-card-media__asset {
    transform: scale(1);
}

/* Dezente Variante: gleiche Idee, kürzer und mit kleinerem Overscale. */
.has-js [data-animate~="media-reveal-subtle"] .case-media-item-frame,
.has-js .animate-media-subtle .case-media-item-frame,
.has-js [data-animate~="media-reveal-subtle"] .work-card-media,
.has-js .animate-media-subtle .work-card-media,
.has-js [data-animate~="media-reveal-subtle"] .about-image-media,
.has-js .animate-media-subtle .about-image-media {
    clip-path: inset(0 0 62% 0);
    opacity: 0.001;
    transition:
        clip-path var(--motion-duration-reveal-subtle) var(--motion-ease-reveal),
        opacity var(--motion-duration-reveal-subtle) var(--motion-ease-reveal);
    will-change: clip-path, opacity;
}

.has-js [data-animate~="media-reveal-subtle"].is-visible .case-media-item-frame,
.has-js .animate-media-subtle.is-visible .case-media-item-frame,
.has-js [data-animate~="media-reveal-subtle"].is-visible .work-card-media,
.has-js .animate-media-subtle.is-visible .work-card-media,
.has-js [data-animate~="media-reveal-subtle"].is-visible .about-image-media,
.has-js .animate-media-subtle.is-visible .about-image-media {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

.has-js [data-animate~="media-reveal-subtle"] .case-media-item-image,
.has-js .animate-media-subtle .case-media-item-image,
.has-js [data-animate~="media-reveal-subtle"] .work-card-media__asset,
.has-js .animate-media-subtle .work-card-media__asset {
    transform: scale(var(--motion-image-overscale-subtle));
    transition: transform calc(var(--motion-duration-reveal-subtle) + 200ms) var(--motion-ease-reveal);
    will-change: transform;
}

.has-js [data-animate~="media-reveal-subtle"].is-visible .case-media-item-image,
.has-js .animate-media-subtle.is-visible .case-media-item-image,
.has-js [data-animate~="media-reveal-subtle"].is-visible .work-card-media__asset,
.has-js .animate-media-subtle.is-visible .work-card-media__asset {
    transform: scale(1);
}

.has-js [data-animate~="text-reveal"],
.has-js .animate-text {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Text-Reveal: jede Zeile steigt hinter einer Maske hoch, statt nur
   einzublenden. clip-path erzeugt die Maske ohne zusätzliche Wrapper im
   Markup; der negative untere Wert lässt Unterlängen (g, y, p) frei, der
   negative obere Wert lässt Oberlängen/Umlaut-Punkte (Ö/Ü/Ä) frei - sonst
   schneidet die Maske bei knapper line-height genau diese ab. Oben und
   unten bewusst als fixer em-Wert (nicht über line-height gelöst), damit
   der Zeilenabstand bei mehrzeiligen Headlines eng bleibt. */
.has-js [data-animate~="text-reveal"] .text-line,
.has-js .animate-text .text-line,
.has-js [data-animate~="text-reveal"] .about-display-line,
.has-js .animate-text .about-display-line,
.has-js [data-animate~="text-reveal"] .people-page-title-line,
.has-js .animate-text .people-page-title-line {
    display: block;
    opacity: 0;
    /* Waagrecht bewusst weit über die Box hinaus: Display-Headlines laufen per
       Design über ihren Kasten hinaus (z. B. .people-page-title mit
       max-width: 8.4ch). Ein clip-path mit 0 an den Seiten hätte sie
       abgeschnitten. Maskiert wird deshalb nur senkrecht. */
    clip-path: inset(-0.22em -100vw 100% -100vw);
    transform: translate3d(0, 0.72em, 0);
    transition:
        opacity var(--motion-duration-text) var(--motion-ease-reveal),
        clip-path var(--motion-duration-text) var(--motion-ease-reveal),
        transform var(--motion-duration-text) var(--motion-ease-reveal);
    transition-delay: calc(var(--text-line-index, 0) * var(--motion-stagger-step));
    will-change: opacity, clip-path, transform;
}

.has-js [data-animate~="text-reveal"].is-visible .text-line,
.has-js .animate-text.is-visible .text-line,
.has-js [data-animate~="text-reveal"].is-visible .about-display-line,
.has-js .animate-text.is-visible .about-display-line,
.has-js [data-animate~="text-reveal"].is-visible .people-page-title-line,
.has-js .animate-text.is-visible .people-page-title-line {
    opacity: 1;
    clip-path: inset(-0.22em -100vw -0.25em -100vw);
    transform: translate3d(0, 0, 0);
}

.has-js [data-animate~="stagger-children"],
.has-js .animate-stagger {
    opacity: 1;
    transform: none;
    filter: none;
}

.has-js [data-animate~="stagger-children"] > *,
.has-js .animate-stagger > * {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-section), 0);
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out),
        transform var(--motion-duration-base) var(--motion-ease-out);
    transition-delay: calc(var(--stagger-index, 0) * var(--motion-stagger-step));
    will-change: opacity, transform;
}

.has-js [data-animate~="stagger-children-subtle"] > *,
.has-js .animate-stagger-subtle > * {
    opacity: 0;
    transform: translate3d(0, var(--motion-reveal-distance-section-subtle), 0);
    transition:
        opacity var(--motion-duration-base) var(--motion-ease-out),
        transform var(--motion-duration-base) var(--motion-ease-out);
    transition-delay: calc(var(--stagger-index, 0) * var(--motion-stagger-step-subtle));
    will-change: opacity, transform;
}

.has-js [data-animate~="stagger-children"].is-visible > *,
.has-js .animate-stagger.is-visible > * {
    opacity: 1;
    transform: none;
}

.has-js [data-animate~="stagger-children-subtle"].is-visible > *,
.has-js .animate-stagger-subtle.is-visible > * {
    opacity: 1;
    transform: none;
}

.has-js [data-animate~="section-wipe"],
.has-js .animate-section-wipe {
    position: relative;
    overflow: clip;
    isolation: isolate;
}

.has-js [data-animate~="section-wipe"]::before,
.has-js .animate-section-wipe::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--section-wipe-color, rgba(10, 13, 20, 0.28));
    transform-origin: top;
    transform: scaleY(1);
    transition: transform var(--motion-duration-slow) var(--motion-ease-section);
    transition-delay: 90ms;
}

.has-js [data-animate~="section-wipe"].is-visible::before,
.has-js .animate-section-wipe.is-visible::before {
    transform: scaleY(0);
}
.hero-eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: var(--type-meta);
    line-height: 1.24;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hero-video-background.is-video-ready .hero-video-poster {
    opacity: 0;
}


.hero-title {
    max-width: 15ch;
    margin-bottom: var(--space-4);
    font-size: var(--type-display-lg);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
}

.hero-subtitle {
    max-width: 60ch;
    color: var(--color-muted);
}

.home-video-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100svh;
    height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #05070f;
    color: #ffffff;
}

.home-video-hero.panel-sequence__panel--peek {
    min-height: var(--hero-peek-height);
    height: var(--hero-peek-height);
}

.hero-video-background--desktop {
    display: block;
}

.hero-video-background--mobile {
    display: none;
}

.hero-video-background {
    position: relative;
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #05070f;
    isolation: isolate;
}

.home-video-hero.panel-sequence__panel--peek .hero-video-background,
.home-video-hero.panel-sequence__panel--peek .hero-video-overlay {
    min-height: var(--hero-peek-height);
    height: var(--hero-peek-height);
}

.hero-video-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video-cover {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #05070f;
}

.hero-video-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--hero-video-fallback, #05070f);
}

.hero-video-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #05070f;
    transition: opacity 260ms ease;
}

.hero-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.7778svh;
    min-height: 100svh;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-video-embed--mobile {
    width: 100vw;
    height: 56.25vw;
    min-width: 177.7778svh;
    min-height: 100svh;
}

.hero-video-overlay {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-height: 100%;
    height: 100%;
    padding: var(--edge-y) var(--edge-x);
    background: linear-gradient(180deg, rgba(6, 7, 13, 0) 0%, rgba(6, 7, 13, 0.62) 100%);
}

.hero-video-label {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-display-lg);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
}

.hero-video-overlay--mobile-placeholder {
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(6, 7, 13, 0.25) 0%, rgba(6, 7, 13, 0.82) 100%);
}

.home-claim-block {
    display: grid;
    align-items: center;
    background: var(--color-home-claim);
    color: #05070f;
    padding-block: clamp(2.25rem, 5svh, 4rem);
}

.home-claim-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.home-claim-title {
    margin: 0;
    max-width: 7.4ch;
    font-size: var(--type-claim);
    line-height: var(--lh-display);
    padding-bottom: 0.08em;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.home-work-showcase {
    background: var(--color-home-work-surface);
    color: var(--color-home-work-text);
    padding-block: clamp(3.25rem, 10svh, 7.75rem);
}

.home-work-showcase--claim {
    display: grid;
    align-items: center;
}

.home-work-showcase--claim .home-work-heading {
    margin-bottom: 0;
}

.home-work-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.home-work-heading {
    margin-bottom: clamp(1.8rem, 5vw, 4rem);
}

.home-work-heading h2 {
    margin: 0;
    max-width: 10ch;
    font-size: var(--type-work-title);
    line-height: var(--lh-display);
    padding-bottom: 0.08em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.home-work-grid-wrap {
    width: 100%;
}

.home-work-actions {
    margin-top: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    justify-content: center;
}

.work-grid--home {
    gap: clamp(var(--space-4), 2.8vw, var(--space-7));
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-card--home {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


.work-card--home .work-card-body {
    padding: var(--space-2) 0 0;
}

.work-card--home .work-card-meta {
    margin-bottom: 0.2rem;
    color: #4f5564;
    font-size: var(--type-small);
    line-height: 1.32;
    text-transform: none;
    letter-spacing: 0;
}

.work-card--home h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.45vw, 2.1rem);
    line-height: var(--lh-display);
    padding-bottom: 0.04em;
    overflow-wrap: anywhere;
}

.work-card--home h3 a {
    color: #0a0d14;
    text-decoration: none;
}

.button--home-cases {
    background: transparent;
    color: #0a0d14;
    border-color: #8e95a2;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: var(--type-button);
    line-height: 1.2;
    padding: clamp(8px, 0.8vw, 16px) clamp(18px, 1.8vw, 36px);
    border-radius: clamp(18px, 1.6vw, 34px);
    min-height: clamp(40px, 3.2vw, 56px);
}

.button--home-cases:hover,
.button--home-cases:focus-visible {
    border-color: #0a0d14;
}
.section--work-header {
    background: #ffffff;
    color: #0a0d14;
    padding-block: clamp(2.3rem, 6.2vw, 5.2rem) clamp(1.1rem, 3.3vw, 2.6rem);
}

.work-header-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.work-header-eyebrow {
    margin: 0 0 var(--space-2);
    color: #4d5669;
    font-size: var(--type-meta);
    line-height: 1.24;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-header-title {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(2.5rem, 7.2vw, 6.4rem);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.work-header-subtitle {
    margin: var(--space-3) 0 0;
    max-width: 56ch;
    color: #4d5669;
}

.section--work-overview {
    background: #ffffff;
    color: #0a0d14;
    padding-block: clamp(2.8rem, 8vw, 6.6rem);
}
.section--work-overview--mk-layout {
    padding-block: clamp(1.05rem, 3.4vw, 2.4rem) clamp(2.8rem, 8vw, 6.6rem);
}

.work-overview-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.work-grid--portfolio {
    gap: clamp(1.5rem, 2.6vw, 3.1rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.work-card--portfolio {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
}

.work-card--home .work-card-media,
.work-card--portfolio .work-card-media,
.work-card--related .work-card-media {
    position: relative;
    display: block;
    gap: 0;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: transparent;
}

.work-card--home .work-card-media img,
.work-card--home .work-card-media video,
.work-card--home .work-card-media iframe,
.work-card--home .work-card-media .work-card-media__asset,
.work-card--portfolio .work-card-media img,
.work-card--portfolio .work-card-media video,
.work-card--portfolio .work-card-media iframe,
.work-card--portfolio .work-card-media .work-card-media__asset {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    background: transparent;
    transition: transform 220ms ease;
}

/* Vimeo-Video als Card-Medium: der Player liegt als eigene Ebene über dem
   Poster-Bild (gleiches Muster wie .case-media-item--video). Klicks müssen
   zum umschließenden Card-Link durch - daher pointer-events: none. */
.work-card--video .work-card-media {
    position: relative;
}

.work-card--video .work-card-media__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
}

.work-card--video .work-card-media__embed {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

/* Die Default-Variante (.card.work-card) bezieht ihre Höhe sonst aus dem
   Bild - mit absolut positioniertem Poster/Embed braucht der Rahmen ein
   eigenes Seitenverhältnis. */
.card.work-card--video .work-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.work-card--portfolio .work-card-body {
    min-width: 0;
    padding: var(--space-2) 0 0;
}

.work-card--portfolio .work-card-meta {
    margin-bottom: 0.4rem;
    color: #545d6f;
    font-size: var(--type-meta);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
}

.work-card--portfolio h3 {
    margin: 0;
    font-size: clamp(1.35rem, 2.45vw, 2.2rem);
    line-height: var(--lh-display);
    padding-bottom: 0.04em;
    text-transform: none;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.work-card--portfolio h3 a {
    color: #0a0d14;
    text-decoration: none;
}
.work-card--portfolio .work-card-body > .text-sub {
    margin-top: 0.5rem;
    margin-bottom: 0;
    max-width: 58ch;
    color: #1e2535;
}

.work-card--portfolio:hover .work-card-media img,
.work-card--portfolio:focus-within .work-card-media img,
.work-card--portfolio:hover .work-card-media video,
.work-card--portfolio:focus-within .work-card-media video,
.work-card--portfolio:hover .work-card-media iframe,
.work-card--portfolio:focus-within .work-card-media iframe,
.work-card--portfolio:hover .work-card-media .work-card-media__asset,
.work-card--portfolio:focus-within .work-card-media .work-card-media__asset {
    transform: scale(1.01);
}

.section--case-header-media {
    padding: 0;
    background: #05070f;
    overflow: hidden;
}

.section--case-header-media--immersive {
    min-height: var(--immersive-min-height);
    height: var(--immersive-min-height);
}

.section--case-header-media--fit-full-width-contain.section--case-header-media--immersive,
.section--case-header-media--fit-content-width.section--case-header-media--immersive,
.section--case-header-media--fit-grid-item.section--case-header-media--immersive {
    min-height: 0;
    height: auto;
}

.case-header-media {
    position: relative;
    min-height: 0;
    height: auto;
    overflow: hidden;
    background: #05070f;
    isolation: isolate;
    display: block;
}

.section--case-header-media--fit-viewport-cover .case-header-media {
    min-height: 100%;
    height: 100%;
}

.case-header-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.08) 0%, rgba(4, 5, 10, 0.42) 100%);
}

.case-header-media-media {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    display: block;
}

.case-header-media-cover {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: var(--case-header-fallback, #05070f);
}

.section--case-header-media--fit-viewport-cover .case-header-media-media,
.section--case-header-media--fit-viewport-cover .case-header-media-cover {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 100%;
}

.section--case-header-media--fit-full-width-contain .case-header-media-cover {
    aspect-ratio: var(--case-header-media-ratio, 16 / 9);
}

.section--case-header-media--fit-content-width .case-header-media-cover,
.section--case-header-media--fit-grid-item .case-header-media-cover {
    aspect-ratio: var(--case-header-media-ratio, 16 / 9);
}

.case-header-media-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--case-header-fallback, #05070f);
}

.case-header-media-poster-wrap,
.case-header-media-image-wrap {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    z-index: 1;
    margin: 0;
}

.section--case-header-media--fit-viewport-cover .case-header-media-poster-wrap,
.section--case-header-media--fit-viewport-cover .case-header-media-image-wrap {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 100%;
}

.case-header-media-poster,
.case-header-media-image {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: contain;
    object-position: var(--case-header-object-position, center center);
}

.section--case-header-media--fit-viewport-cover .case-header-media-poster,
.section--case-header-media--fit-viewport-cover .case-header-media-image {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
}

.case-header-media-poster {
    transition: opacity 260ms ease;
}

.case-header-media.is-video-ready .case-header-media-poster {
    opacity: 0;
}

.case-header-media-embed {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    border: 0;
    transform: none;
    pointer-events: none;
    z-index: 2;
    background: transparent;
}
.section--case-header-media--fit-viewport-cover .case-header-media--video .case-header-media-embed {
    /* inset zuerst zuruecksetzen: als Kurzform ueberschreibt es sonst das
       davor gesetzte top/left (Video landete um -50%/-50% verschoben). */
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-width: 177.7778svh;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

.section--case-header-media--fit-full-width-contain .case-header-media--video .case-header-media-embed {
    top: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: none;
}

.case-header-media-embed--mobile {
    display: none;
}

.section--case-intro-modular {
    padding-block: clamp(2.6rem, 8.6vw, 8rem);
    background: #ffffff;
    color: #0a0d14;
}

.case-intro-grid {
    display: grid;
    gap: clamp(1.5rem, 4.6vw, 5rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
}

.case-intro-kicker {
    margin: 0 0 var(--space-3);
    color: #4f596e;
    font-size: var(--type-meta);
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-intro-title {
    margin: 0;
    max-width: 11ch;
    font-size: var(--type-headline);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.case-intro-subline {
    margin: var(--space-3) 0 0;
    color: #1b2232;
    font-size: clamp(1.05rem, 1.85vw, 1.85rem);
    line-height: 1.18;
}

.case-intro-copy p {
    margin-bottom: var(--space-4);
    color: #222b3c;
}

.case-intro-copy p:last-child {
    margin-bottom: 0;
}

.section--case-block {
    padding-block: clamp(1.2rem, 3.8vw, 3.8rem);
}

.section--case-block.section--case-media-full,
.section--case-block.section--case-media-two-column,
.section--case-block.section--case-media-grid,
.section--case-block.section--case-color-media {
    padding-block: 0;
}

.section--case-block + .section--case-block {
    border-top: var(--case-gap) solid #ffffff;
}

/* Optional: nur bei Media-Segmenten aktivieren statt global für alle Case-Blöcke */
/*
.section--case-media-full + .section--case-block,
.section--case-media-two-column + .section--case-block,
.section--case-media-grid + .section--case-block,
.section--case-color-media + .section--case-block {
    border-top: var(--case-gap) solid #ffffff;
}
*/

.case-block-shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.case-media-grid,
.case-media-grid--two,
.case-block-shell--two-column {
    display: grid;
    gap: var(--case-gap);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.case-media-grid > *,
.case-media-grid--two > *,
.case-block-shell--two-column > * {
    min-width: 0;
    max-width: 100%;
}

.case-media-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-media-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.case-block-shell--text {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-default));
    margin-inline: auto;
}

.case-block-shell--media,
.case-block-shell--media-grid,
.case-block-shell--color-media,
.case-block-shell--two-column {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.case-block-shell--media-grid,
.case-block-shell--color-media {
    display: grid;
    gap: clamp(1.1rem, 3vw, 2.2rem);
}

.case-color-media-head {
    /* Die Shell laeuft bewusst randlos (Medium full-bleed), der Textkopf
       braucht aber den normalen Seitenrand - sonst klebte er am Rand. */
    width: min(calc(100% - (2 * var(--edge-x))), 62rem);
    margin-inline: var(--edge-x);
    display: grid;
    gap: var(--space-3);
}

.case-color-media-head h2 {
    margin: 0;
    font-size: var(--type-subheadline);
    line-height: var(--lh-display);
    padding-bottom: 0.05em;
    text-transform: uppercase;
}

.case-color-media-head > .text-sub {
    margin: 0;
}

.case-text-block-content {
    display: grid;
    gap: var(--space-4);
    max-width: 62ch;
}

.case-text-block-kicker {
    margin: 0;
    font-size: var(--type-meta);
    line-height: 1.24;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(12, 16, 27, 0.72);
}

.case-text-block-content h2 {
    margin: 0;
    font-size: var(--type-subheadline);
    line-height: var(--lh-display);
    padding-bottom: 0.05em;
    text-transform: uppercase;
}

.case-text-block-content > .text-sub {
    margin: 0;
    color: inherit;
}

.case-media-item {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
}

.case-media-item-frame {
    position: relative;
    overflow: clip;
    background: var(--case-media-fallback, transparent);
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    min-height: 0;
}

.media--viewport-cover .case-media-item-frame {
    aspect-ratio: 16 / 9;
    min-height: clamp(20rem, 72svh, 66rem);
}

.media--viewport-cover .case-media-item-image,
.media--viewport-cover .case-media-item-poster {
    height: 100%;
    object-fit: cover;
}

.media--full-width-contain .case-media-item-frame,
.media--content-width .case-media-item-frame {
    aspect-ratio: auto;
    min-height: 0;
    background: transparent;
}

.media--content-width {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-default));
    margin-inline: auto;
}

.media--grid-item .case-media-item-frame {
    aspect-ratio: 16 / 10;
    min-height: 0;
}

.media--grid-item.case-media-item--portrait .case-media-item-frame {
    aspect-ratio: 4 / 5;
}

.media--grid-item.case-media-item--tall .case-media-item-frame {
    aspect-ratio: 3 / 4;
}

.media--grid-item.case-media-item--full .case-media-item-frame {
    aspect-ratio: 16 / 9;
}

.media--full-width-contain.case-media-item--video .case-media-item-frame,
.media--content-width.case-media-item--video .case-media-item-frame,
.media--grid-item.case-media-item--video .case-media-item-frame {
    aspect-ratio: var(--case-media-video-ratio, 16 / 9);
}

.case-media-item-image,
.case-media-item-poster {
    display: block;
    width: 100%;
    max-width: 100%;
}

.case-media-item-image {
    height: auto;
    object-fit: contain;
}

.media--grid-item .case-media-item-image {
    height: 100%;
    object-fit: cover;
    background: var(--case-media-fallback, #0b1019);
}

.case-media-item--video .case-media-item-poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
    object-fit: cover;
    transition: opacity 220ms ease;
}

.case-media-item--video .case-media-item-frame {
    background: var(--case-media-fallback, #0b1019);
}

.case-media-item--video.is-video-ready .case-media-item-poster {
    opacity: 0;
}

.case-media-item-embed {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.case-media-item figcaption {
    margin: 0;
    max-width: 100%;
    color: rgba(12, 16, 27, 0.68);
    font-size: var(--type-meta);
    line-height: 1.34;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.case-block-bg--white {
    background: #ffffff;
    color: #0a0d14;
}

.case-block-bg--paper {
    background: #f2f4f8;
    color: #0a0d14;
}

.case-block-bg--charcoal {
    background: #0b1019;
    color: #f6f8ff;
}

.case-block-bg--sun,
.case-block-bg--lime {
    background: #d8ff02;
    color: #0a0d14;
}

.case-block-bg--red {
    background: #ef3535;
    color: #fef7f8;
}

.case-block-bg--charcoal .case-text-block-kicker,
.case-block-bg--charcoal .case-media-item figcaption,
.case-block-bg--red .case-text-block-kicker,
.case-block-bg--red .case-media-item figcaption {
    color: rgba(245, 247, 255, 0.86);
}
.section--case-all-cases {
    padding-block: clamp(1.4rem, 4vw, 3rem);
    background: #f3f5f9;
    color: #0a0d14;
}

.case-all-cases-stage {
    width: 100%;
    padding-inline: var(--edge-x);
    display: flex;
    justify-content: center;
}

.button--case-all-cases {
    color: #556076;
    border-color: #556076;
}

.button--case-all-cases:hover,
.button--case-all-cases:focus-visible {
    color: #0a0d14;
    border-color: #0a0d14;
}

.section--case-related {
    padding-block: clamp(3rem, 8vw, 7.2rem);
    background: #f3f5f9;
    color: #0a0d14;
}

.case-related-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.case-related-heading {
    max-width: min(100%, 68rem);
    margin-bottom: clamp(1.5rem, 4.4vw, 4rem);
}

.case-related-kicker {
    margin: 0 0 var(--space-2);
    color: #556076;
    font-size: var(--type-meta);
    line-height: 1.24;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.case-related-heading h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2.3rem, 4.8vw, 4.6rem);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    text-transform: uppercase;
}

.case-related-heading > .text-sub {
    margin: 0;
    color: #1f2737;
}

.work-grid--related {
    gap: clamp(1.2rem, 2.2vw, 2.2rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-card--related {
    background: #ffffff;
    border: 1px solid #d9dfeb;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.work-card--related .work-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
}

.work-card--related .work-card-body {
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.work-card--related .work-card-meta {
    margin-bottom: var(--space-2);
    color: #556076;
    font-size: var(--type-meta);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.work-card--related h3 {
    margin: 0;
    font-size: clamp(1.2rem, 2.05vw, 1.9rem);
    line-height: var(--lh-display);
    padding-bottom: 0.04em;
    text-transform: uppercase;
}

.section--case-hero {
    padding: 0;
    background: #05070f;
}

.case-media-hero {
    position: relative;
    min-height: var(--immersive-min-height);
    display: grid;
    align-items: end;
    overflow: hidden;
}

.case-media-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.22) 0%, rgba(4, 5, 10, 0.8) 100%);
}

.case-media-hero-media {
    position: absolute;
    inset: 0;
}

.case-media-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-media-hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, var(--site-max));
    padding: var(--edge-y) var(--edge-x);
}

.case-media-hero-kicker {
    margin: 0 0 var(--space-3);
    font-size: var(--type-meta);
    line-height: 1.22;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

.case-media-hero-title {
    margin: 0;
    max-width: 10ch;
    font-size: var(--type-display-lg);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.case-media-hero-meta {
    margin: var(--space-3) 0 0;
    font-size: var(--type-small);
    line-height: 1.35;
    color: rgba(245, 247, 255, 0.94);
}

.section--case-vimeo .container,
.section--case-gallery .container {
    width: min(calc(100% - (2 * var(--edge-x))), var(--site-max));
}

.section--case-vimeo .vimeo-frame {
    aspect-ratio: 16 / 9;
    min-height: clamp(20rem, 70svh, 54rem);
}

.section--case-gallery .gallery-grid {
    gap: clamp(var(--space-4), 2.4vw, var(--space-6));
}

.section--case-gallery .image-block img {
    border-radius: 0;
    border: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.section--case-intro .container,
.section--case-credits .container {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-wide));
}

.section-heading > .text-sub {
    color: var(--color-muted);
}

.site-body .card h2 {
    margin-bottom: var(--space-3);
}


.site-body .card p:last-child {
    margin-bottom: 0;
}

.section--people-page {
    background: #e6e6e6;
    color: #0a0d14;
    padding-block: clamp(7.6rem, 12.2vw, 10.6rem) clamp(2.2rem, 5.5vw, 4.4rem);
}

.people-page-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.people-page-intro {
    max-width: min(100%, 72rem);
    margin-bottom: clamp(1.6rem, 4vw, 3.4rem);
}

.people-page-title {
    margin: 0;
    max-width: 8.4ch;
    font-size: clamp(3.15rem, 10.9vw, 8.6rem);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.people-page-title-line {
    display: block;
}

.people-page-copy {
    margin-top: clamp(1.3rem, 3.5vw, 2.8rem);
    max-width: min(100%, 56rem);
}

.people-page-copy p {
    margin-bottom: var(--space-4);
    color: #1f2532;
}

.people-page-copy p:last-child {
    margin-bottom: 0;
}

.people-team-grid {
    display: grid;
    gap: clamp(0.85rem, 1.55vw, 1.45rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.people-team-card {
    --people-object-position: 50% 20%;
    position: relative;
    min-width: 0;
    aspect-ratio: 561 / 825;
    overflow: hidden;
    background: #b5b5b5;
    outline: 0;
}

.people-team-card__media,
.people-team-card__image,
.people-team-card__placeholder {
    width: 100%;
    height: 100%;
}

.people-team-card__image {
    display: block;
    object-fit: cover;
    object-position: var(--people-object-position, 50% 20%);
}

.people-team-card__placeholder {
    background: #9f9f9f;
}

.people-team-card__trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.people-team-card__trigger:focus-visible {
    outline: 3px solid #0a0d14;
    outline-offset: -3px;
}

.people-team-card__info {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: clamp(0.9rem, 1.55vw, 1.15rem);
    display: grid;
    background: #ef3535;
    color: #fff7f8;
    opacity: 0;
    transform: translateY(3%);
    transition: opacity 210ms ease, transform 210ms ease;
}

.people-team-card__info-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(0.7rem, 1.4vw, 1.1rem);
}

.people-team-card__info-top {
    display: grid;
    gap: clamp(0.42rem, 0.92vw, 0.72rem);
    align-content: start;
}

.people-team-card__name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.45rem, 4.4vw, 4.2rem);
    /* Mehr Luft zwischen Vor- und Nachname (vorher 0.9 - die Zeilen klebten). */
    line-height: 1.02;
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.people-team-card__name-line {
    display: block;
}

.people-team-card__title {
    margin: 0;
    color: #fff7f8;
    font-size: clamp(1.12rem, 1.35vw, 1.62rem);
    line-height: 1.24;
    font-weight: 700;
}

.people-team-card__info-bottom {
    margin-top: auto;
}

.people-team-card__contacts {
    align-self: stretch;
    --text-sub-size: clamp(1.02rem, 1.2vw, 1.36rem);
    --text-sub-line-height: 1.34;
}

.people-team-card__contacts p {
    margin: 0;
    color: rgba(255, 247, 248, 0.97);
}

.people-team-card.is-active .people-team-card__info,
.people-team-card:focus-within .people-team-card__info {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .people-team-card:hover .people-team-card__info {
        opacity: 1;
        transform: translateY(0);
    }
}

.section--about-claim,
.section--about-split {
    display: grid;
    align-items: center;
    padding-block: clamp(2.8rem, 8svh, 8rem);
}


.section--about-claim--lime {
    background: var(--color-home-claim);
    color: #0a0d14;
}

.section--about-split--red {
    background: #ef3535;
    color: #fff7f8;
}

.section--about-split--charcoal {
    background: #05070f;
    color: #f6f8ff;
}

.about-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

.about-split-grid {
    display: grid;
    gap: clamp(1.7rem, 4.6vw, 6.4rem);
}

.about-split-grid--claim,
.about-split-grid--side-by-side {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: end;
}
.about-split-grid--offset-copy,
.about-split-grid--vertical-offset {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    min-height: clamp(29rem, 70svh, 51rem);
    row-gap: clamp(2rem, 4.5svh, 6rem);
}

.about-split-grid > * {
    min-width: 0;
}

.about-display {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    /* Zeilenabstand über den zentralen --lh-display Token: hoch genug,
       dass Umlaut-Punkte nicht mehr in die Zeile darüber laufen, trotzdem
       eng gesetzt. Der obere clip-path-Inset (siehe "Text-Reveal") bleibt
       als Schutz der Animationsmaske bestehen. */
    line-height: var(--lh-display);
    padding-bottom: 0.08em;
}

.about-display--claim {
    font-size: clamp(3.15rem, 12.6vw, 13rem);
}

.about-display--split {
    font-size: clamp(2.8rem, 8.9vw, 9.8rem);
}

.about-display-line {
    display: block;
}

.about-copy-col {
    justify-self: end;
    max-width: 60ch;
}
.about-split-grid--offset-copy .about-display-col {
    align-self: start;
    max-width: min(72vw, 56rem);
}

.about-split-grid--vertical-offset .about-display-col {
    align-self: start;
    width: 100%;
    max-width: none;
}

.about-split-grid--offset-copy .about-display,
.about-split-grid--vertical-offset .about-display {
    max-width: 100%;
}

.about-split-grid--offset-copy .about-split-copy,
.about-split-grid--vertical-offset .about-split-copy {
    align-self: flex-end;
    width: min(100%, clamp(22rem, 42vw, 38.75rem));
    max-width: min(100%, clamp(22rem, 42vw, 38.75rem));
    margin-top: clamp(2.5rem, 7.5svh, 7.5rem);
}

.about-split-grid--vertical-offset .about-split-copy {
    width: clamp(22rem, 50%, 40rem);
    max-width: 100%;
}

.about-split-grid--offset-small .about-split-copy {
    margin-top: clamp(1.75rem, 4.8svh, 4.5rem);
}

.about-split-grid--offset-medium .about-split-copy {
    margin-top: clamp(2.8rem, 8svh, 8.5rem);
}

.about-split-grid--offset-large .about-split-copy {
    margin-top: clamp(4rem, 10.8svh, 11rem);
}

.about-copy-col p {
    margin-bottom: var(--space-4);
    color: inherit;
}

.about-copy-col p:last-child {
    margin-bottom: 0;
}

.section--about-claim--lime .about-copy-col p {
    color: rgba(10, 13, 20, 0.95);
}

.section--about-split--red .about-copy-col p {
    color: rgba(255, 247, 248, 0.98);
}

.section--about-split--charcoal .about-copy-col p {
    color: rgba(246, 248, 255, 0.97);
}

.section--about-image {
    padding: 0;
    background: #05070f;
}

.about-image-stage {
    width: 100%;
}

.about-image-shell {
    position: relative;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

.about-image-shell.media--viewport-cover {
    min-height: clamp(24rem, 92svh, 76rem);
}

.section--about-image--plain .about-image-shell {
    min-height: 0;
}


.section--about-image--plain .about-image-shell.media--viewport-cover {
    min-height: clamp(22rem, 86svh, 70rem);
}

.about-image-shell.media--content-width {
    width: min(calc(100% - (2 * var(--edge-x))), var(--container-default));
    margin-inline: auto;
}

.about-image-media {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: var(--about-image-object-position-desktop, 50% 50%);
}

/* Iframes (Vimeo) auf inset:0/100% Breite+Hoehe zu strecken verzerrt die
   Iframe-Box auf das Wrapper-Format - Vimeo bekommt dadurch selbst ein
   untypisches Seitenverhaeltnis und croppt/skaliert das Video intern
   nicht mehr zuverlaessig auf volle Breite (sichtbare Raender im Player).
   Deshalb wie beim Hero-Video (.hero-video-embed): der Iframe bleibt
   IMMER echtes 16:9 (Breite 100% des Wrappers, Hoehe daraus abgeleitet),
   wird zentriert positioniert - der Ueberstand wird vom Wrapper (overflow:
   hidden) weggeschnitten, ohne dass Vimeo selbst croppen muss. */
.about-image-shell:has(> iframe.about-image-media) {
    aspect-ratio: 16 / 9;
}

.about-image-shell:has(> iframe.about-image-media) > iframe.about-image-media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
    border: 0;
}

.about-image-shell.media--viewport-cover .about-image-media {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
}

.about-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--edge-y) var(--edge-x);
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.06) 0%, rgba(4, 5, 10, 0.74) 100%);
}

.about-image-content {
    max-width: min(100%, 68rem);
}

.section--about-image--plain .about-image-overlay {
    align-items: end;
    background: linear-gradient(180deg, rgba(4, 5, 10, 0.02) 0%, rgba(4, 5, 10, 0.56) 100%);
}

.section--about-image--plain .about-image-content {
    max-width: min(100%, 40rem);
}

.about-image-title {
    margin: 0 0 var(--space-4);
    font-size: clamp(2.6rem, 9.2vw, 8rem);
    line-height: var(--lh-display);
    padding-bottom: 0.08em;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #f6f8ff;
}

.about-image-copy {
    max-width: 56ch;
}

.about-image-copy p {
    margin-bottom: var(--space-3);
    color: rgba(245, 247, 255, 0.96);
}

.about-image-copy p:last-child {
    margin-bottom: 0;
}

.section--about-image--plain .about-image-copy p {
    color: rgba(245, 247, 255, 0.96);
    max-width: 48ch;
    text-shadow: 0 1px 2px rgba(2, 3, 6, 0.58);
}

.section--about-logo-wall {
    background: #05070f;
    color: #f6f8ff;
    padding-block: clamp(3rem, 9svh, 8rem);
}

.about-logo-wall-header {
    max-width: 56rem;
    margin-bottom: clamp(1.5rem, 4.4vw, 3.8rem);
}

.about-logo-wall-header h2 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2.2rem, 6.8vw, 5.4rem);
    line-height: var(--lh-display);
    padding-bottom: 0.06em;
    text-transform: uppercase;
}

.about-logo-wall-header p {
    margin: 0;
    color: rgba(245, 247, 255, 0.82);
}
.about-logo-marquees {
    --about-logo-visible: 5;
    --about-logo-gap: clamp(0.75rem, 1.35vw, 1.45rem);
    --about-logo-marquee-width: calc(100vw - (2 * var(--edge-x)));
    display: grid;
    gap: var(--about-logo-gap);
}

.about-logo-marquee-row {
    width: 100%;
    overflow: hidden;
}

.about-logo-marquee-strip {
    display: flex;
    gap: var(--about-logo-gap);
    width: max-content;
    will-change: transform;
    animation: about-logo-marquee-forward 58s linear infinite;
}

.about-logo-marquee-row--reverse .about-logo-marquee-strip {
    animation-name: about-logo-marquee-reverse;
}

.about-logo-track {
    display: flex;
    gap: var(--about-logo-gap);
    width: max-content;
}

.about-logo-item {
    margin: 0;
    flex: 0 0 calc((var(--about-logo-marquee-width) - (var(--about-logo-gap) * (var(--about-logo-visible) - 1))) / var(--about-logo-visible));
    min-width: calc((var(--about-logo-marquee-width) - (var(--about-logo-gap) * (var(--about-logo-visible) - 1))) / var(--about-logo-visible));
    max-width: calc((var(--about-logo-marquee-width) - (var(--about-logo-gap) * (var(--about-logo-visible) - 1))) / var(--about-logo-visible));
    min-height: clamp(3.8rem, 7vw, 7.4rem);
    display: grid;
    place-items: center;
    padding: clamp(0.55rem, 0.95vw, 1.08rem);
}

.about-logo-item img {
    width: auto;
    max-width: min(100%, 10.8rem);
    max-height: clamp(1.65rem, 2.6vw, 3.1rem);
    height: auto;
    object-fit: contain;
}

@keyframes about-logo-marquee-forward {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - (var(--about-logo-gap) / 2)));
    }
}

@keyframes about-logo-marquee-reverse {
    from {
        transform: translateX(calc(-50% - (var(--about-logo-gap) / 2)));
    }
    to {
        transform: translateX(0);
    }
}

.section--about-cta {
    background: #05070f;
    color: #f6f8ff;
    padding-block: clamp(3rem, 9svh, 7.4rem);
}

.about-cta-grid {
    display: grid;
    gap: clamp(1.2rem, 3.4vw, 3rem);
    grid-template-columns: 1fr;
    align-items: start;
}

.about-cta-copy {
    min-width: 0;
}

.about-cta-title {
    margin: 0;
    font-size: clamp(2.6rem, 8.8vw, 8.2rem);
    /* Zeilenabstand bewusst eng - siehe Kommentar bei .about-display. */
    line-height: 1;
    padding-bottom: 0.08em;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.about-cta-title .about-display-line + .about-display-line {
    margin-top: 0.03em;
}

.about-cta-text {
    margin: var(--space-4) 0 0;
    max-width: 48ch;
    color: rgba(245, 247, 255, 0.9);
}

/* Reserviert nur Layout-Raum für den animierten Header-Badge (siehe
   initAboutContactCta() in main.js). Bleibt selbst unsichtbar, damit
   ausschliesslich der Header-Badge sichtbar ist (kein zweites CTA-Element). */
.about-cta-badge-target {
    width: var(--about-cta-target-size);
    height: var(--about-cta-target-size);
    max-width: 100%;
    justify-self: center;
    visibility: hidden;
}

@media (min-width: 64rem) {
    /* Der Ziel-Platzhalter wird ab hier aus dem Grid-Textfluss genommen
       (position: absolute) statt eine eigene Spalte zu beanspruchen. So
       bleibt die volle Breite für die CMS-Headline erhalten - Umbrüche
       entstehen ausschliesslich durch die Redaktion (Zeilenumbrüche im
       Backend), nicht durch reservierten Platz für den Badge.
       Der vertikale Freiraum für den Badge kommt stattdessen über
       padding-bottom auf der Copy - unabhängig davon, wie viele Zeilen
       die Headline tatsächlich braucht, verdeckt der grosse Endzustand
       so nie den Text. */
    .about-cta-grid {
        position: relative;
    }

    .about-cta-copy {
        padding-bottom: calc(var(--about-cta-target-size) * 0.8);
    }

    .about-cta-badge-target {
        position: absolute;
        right: 0;
        bottom: calc(var(--about-cta-target-size) * -0.1);
    }
}

/* Kleinere Zielgrösse auf schmalen Phones, damit der grosse Endzustand
   nicht die Breite des Viewports dominiert. */
@media (max-width: 30rem) {
    .about-cta-badge-target {
        width: clamp(140px, 46vw, 220px);
        height: clamp(140px, 46vw, 220px);
    }
}

@media (max-width: 64rem) {
    .hero-title {
        max-width: 20ch;
    }

    .people-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-page-title {
        font-size: clamp(2.9rem, 11.8vw, 7.1rem);
    }

    .work-grid--home,
    .work-grid--portfolio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .work-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-related-heading h2 {
        max-width: 18ch;
    }


}


@media (max-width: 56rem) {
    .has-js .motion-stack-panel,
    .has-js .motion-overlap-panel {
        position: relative;
        top: auto;
        margin-top: 0 !important;
        box-shadow: none;
    }
    .has-js .panel-sequence.panel-sequence--mobile-active,
    .has-js .panel-sequence.panel-sequence--mobile-active > .panel-sequence__panel {
        overflow-x: clip;
    }
    .has-js .panel-sequence:not(.panel-sequence--mobile-enabled) > .panel-sequence__panel--fullscreen {
        position: relative;
        top: auto;
    }
    .has-js .panel-sequence:not(.panel-sequence--mobile-enabled) > .panel-sequence__panel {
        box-shadow: none;
    }
    .hero-video-background--desktop {
        display: none;
    }

    .hero-video-background--mobile {
        display: block;
    }

    .home-video-hero,
    .home-video-hero .hero-video-background,
    .home-video-hero .hero-video-overlay {
        min-height: 100svh;
        height: 100svh;
    }

    .home-video-hero.panel-sequence__panel--peek,
    .home-video-hero.panel-sequence__panel--peek .hero-video-background,
    .home-video-hero.panel-sequence__panel--peek .hero-video-overlay {
        min-height: 100svh;
        height: 100svh;
    }

    .hero-video-background--mobile .hero-video-media,
    .hero-video-background--mobile .hero-video-cover {
        position: absolute;
        inset: 0;
    }

    .hero-video-background--mobile .hero-video-poster {
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    .hero-video-background--mobile .hero-video-embed {
        top: 50%;
        left: 50%;
        width: 100vw;
        height: 56.25vw;
        min-width: 177.7778svh;
        min-height: 100svh;
        transform: translate(-50%, -50%);
    }

    .home-claim-title {
        max-width: 9ch;
        font-size: clamp(3.1rem, 13.2vw, 6.2rem);
    }

    .home-work-heading h2 {
        font-size: clamp(2.65rem, 11vw, 4.9rem);
    }
    .work-grid--home {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .work-grid--portfolio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .work-card--portfolio h3 {
        font-size: clamp(1.25rem, 4.4vw, 1.9rem);
    }

    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover,
    .section--case-header-media.section--case-header-media--fit-full-width-contain.section--case-header-media--fit-mobile-viewport-cover.section--case-header-media--immersive {
        min-height: 92svh;
        height: 100svh;
    }
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media {
        min-height: 100%;
        height: 100%;
    }
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media-media,
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media-cover {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 100%;
    }
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media-poster-wrap,
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media-image-wrap {
        position: absolute;
        inset: 0;
        height: 100%;
        min-height: 100%;
    }
    .section--case-header-media--fit-mobile-full-width-contain,
    .section--case-header-media--fit-mobile-content-width,
    .section--case-header-media--fit-mobile-grid-item {
        min-height: 0;
        height: auto;
    }
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media,
    .section--case-header-media--fit-mobile-content-width .case-header-media,
    .section--case-header-media--fit-mobile-grid-item .case-header-media {
        min-height: 0;
        height: auto;
    }
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-media,
    .section--case-header-media--fit-mobile-content-width .case-header-media-media,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-media,
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-cover,
    .section--case-header-media--fit-mobile-content-width .case-header-media-cover,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-cover {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 0;
    }
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-cover,
    .section--case-header-media--fit-mobile-content-width .case-header-media-cover,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-cover {
        aspect-ratio: var(--case-header-media-ratio, 16 / 9);
    }
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-poster-wrap,
    .section--case-header-media--fit-mobile-content-width .case-header-media-poster-wrap,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-poster-wrap,
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-image-wrap,
    .section--case-header-media--fit-mobile-content-width .case-header-media-image-wrap,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-image-wrap {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 0;
    }
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-poster,
    .section--case-header-media--fit-mobile-content-width .case-header-media-poster,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-poster,
    .section--case-header-media--fit-mobile-full-width-contain .case-header-media-image,
    .section--case-header-media--fit-mobile-content-width .case-header-media-image,
    .section--case-header-media--fit-mobile-grid-item .case-header-media-image {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 0;
        object-fit: contain;
    }

    .case-intro-grid {
        grid-template-columns: 1fr;
    }

    .case-intro-title {
        max-width: 14ch;
        font-size: clamp(2.4rem, 10.5vw, 5rem);
    }

    .case-intro-subline {
        font-size: clamp(1rem, 5vw, 1.8rem);
    }

    .case-media-grid,
    .case-media-grid--two,
    .case-block-shell--two-column {
        grid-template-columns: 1fr;
    }

    .case-media-item,
    .case-media-item img,
    .case-media-item video,
    .case-media-item iframe {
        width: 100%;
        max-width: 100%;
    }

    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media-poster,
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
        object-fit: cover;
    }

    .case-header-media-embed {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
    }
    .section--case-header-media.section--case-header-media--fit-mobile-viewport-cover .case-header-media--video .case-header-media-embed {
        /* Reihenfolge wie oben: inset vor top/left. */
        inset: auto;
        top: 0;
        left: 50%;
        width: max(100vw, 177.7778svh);
        height: 100%;
        min-width: 0;
        min-height: 100%;
        transform: translateX(-50%);
    }

    .section--case-header-media--fit-mobile-full-width-contain .case-header-media--video .case-header-media-embed,
    .section--case-header-media--fit-mobile-content-width .case-header-media--video .case-header-media-embed,
    .section--case-header-media--fit-mobile-grid-item .case-header-media--video .case-header-media-embed {
        top: 0;
        left: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        transform: none;
    }

    .case-header-media-embed--desktop {
        display: none;
    }

    .case-header-media-embed--mobile {
        display: block;
    }


    .work-grid--related {
        grid-template-columns: 1fr;
    }

    .work-card--home h3 {
        font-size: clamp(2rem, 8.2vw, 3.1rem);
    }


    .case-media-hero-title {
        font-size: clamp(2.3rem, 10.8vw, 4.8rem);
        max-width: 12ch;
    }

    .section--people-page {
        padding-block: clamp(6.8rem, 16vw, 8.8rem) clamp(2.1rem, 8vw, 3.4rem);
    }

    .people-page-title {
        max-width: 100%;
        font-size: clamp(2.5rem, 15vw, 5.8rem);
    }

    .people-page-copy {
        max-width: min(100%, 64ch);
    }


    .people-team-grid {
        grid-template-columns: 1fr;
        gap: clamp(0.85rem, 3.8vw, 1.3rem);
    }

    .people-team-card {
        aspect-ratio: 561 / 825;
    }

    .people-team-card__name {
        font-size: clamp(2.3rem, 12.4vw, 4.2rem);
    }

    .people-team-card__title {
        font-size: clamp(1.1rem, 5vw, 1.42rem);
    }

    .section--about-claim,
    .section--about-split {
        padding-block: clamp(2rem, 10vw, 4.8rem);
    }

    .about-split-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .about-split-grid--offset-copy,
    .about-split-grid--vertical-offset {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: 0;
        row-gap: clamp(0.9rem, 4vw, 1.8rem);
    }

    .about-split-grid--offset-copy .about-split-copy,
    .about-split-grid--vertical-offset .about-split-copy {
        align-self: start;
        justify-self: start;
        width: 100%;
        max-width: 62ch;
        margin-top: clamp(0.9rem, 4.5vw, 1.8rem);
    }

    .about-split-grid--offset-small .about-split-copy,
    .about-split-grid--offset-medium .about-split-copy,
    .about-split-grid--offset-large .about-split-copy {
        margin-top: clamp(0.9rem, 4.5vw, 1.8rem);
    }

    .about-display--claim {
        font-size: clamp(2.8rem, 14vw, 7.2rem);
    }

    .about-display--split {
        font-size: clamp(2.4rem, 12vw, 6.2rem);
    }

    .about-copy-col {
        justify-self: start;
        max-width: 60ch;
    }


    .about-image-title {
        font-size: clamp(2.2rem, 12vw, 5rem);
    }

    .section--about-image.about-image--mobile-cover .about-image-shell {
        min-height: var(--about-image-mobile-height, clamp(25rem, 82svh, 38rem));
        height: var(--about-image-mobile-height, clamp(25rem, 82svh, 38rem));
    }

    .section--about-image.about-image--mobile-cover .about-image-media {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--about-image-object-position-mobile, var(--about-image-object-position-desktop, 50% 50%));
    }

    .section--about-image.section--about-image--overlay.about-image--overlay-safe .about-image-overlay {
        align-items: flex-start;
        padding-top: max(calc(var(--edge-y) + clamp(2.7rem, 8vw, 4.2rem)), calc(env(safe-area-inset-top) + clamp(1.6rem, 4.2vw, 2.8rem)));
        padding-bottom: clamp(1.4rem, 4.5vw, 2.4rem);
        z-index: 3;
    }

    .section--about-image.section--about-image--overlay.about-image--overlay-safe .about-image-content,
    .section--about-image.section--about-image--overlay.about-image--overlay-safe .about-image-title {
        overflow: visible;
    }

    .section--about-image.section--about-image--overlay.about-image--overlay-safe .about-image-content {
        max-width: min(100%, 28rem);
    }

    .section--about-image.section--about-image--overlay.about-image--overlay-safe .about-image-title {
        margin: 0 0 clamp(0.75rem, 3.2vw, 1.4rem);
        font-size: clamp(2.35rem, 12.6vw, 4.5rem);
        line-height: 1.04;
        padding-bottom: 0.14em;
    }


    .about-cta-title {
        font-size: clamp(2.2rem, 12vw, 5.4rem);
    }
}

@media (max-width: 40rem) {
    .home-work-actions {
        justify-content: flex-start;
    }
    .section--work-overview {
        padding-block: clamp(2.1rem, 10vw, 4.2rem);
    }
    .section--work-overview--mk-layout {
        padding-block-start: clamp(0.8rem, 3.8vw, 1.6rem);
    }
    .work-grid--home,
    .work-grid--portfolio,
    .work-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-card--home h3,
    .work-card--portfolio h3,
    .work-card--related h3 {
        font-size: clamp(1.15rem, 5.2vw, 1.55rem);
    }

    .case-header-media {
        min-height: 92svh;
        height: 100svh;
    }


    .case-related-heading h2 {
        font-size: clamp(2rem, 12vw, 3.1rem);
    }

    .button--home-cases {
        width: 100%;
    }

}

@media (max-width: 23.75rem) {
    .work-grid--home,
    .work-grid--portfolio,
    .work-grid--related {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-stack-panel,
    .motion-overlap-panel,
    .motion-transition-panel {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }
    .panel-sequence > .panel-sequence__panel--fullscreen {
        position: relative !important;
        top: auto !important;
    }
    .panel-sequence > .panel-sequence__panel {
        box-shadow: none !important;
    }
    [data-animate~="section-reveal"],
    .animate-section,
    [data-animate~="text-reveal"] .text-line,
    .animate-text .text-line,
    [data-animate~="text-reveal"] .about-display-line,
    .animate-text .about-display-line,
    [data-animate~="text-reveal"] .people-page-title-line,
    .animate-text .people-page-title-line,
    [data-animate~="media-reveal"],
    .animate-media,
    [data-animate~="media-reveal-subtle"],
    .animate-media-subtle,
    [data-animate~="media-reveal"] .work-card-media__asset,
    .animate-media .work-card-media__asset,
    [data-animate~="media-reveal-subtle"] .work-card-media__asset,
    .animate-media-subtle .work-card-media__asset,
    [data-animate~="media-reveal"] .case-media-item-frame,
    .animate-media .case-media-item-frame,
    [data-animate~="media-reveal-subtle"] .case-media-item-frame,
    .animate-media-subtle .case-media-item-frame,
    [data-animate~="media-reveal"] .about-image-media,
    .animate-media .about-image-media,
    [data-animate~="media-reveal-subtle"] .about-image-media,
    .animate-media-subtle .about-image-media,
    [data-animate~="media-reveal"] .case-media-item-image,
    .animate-media .case-media-item-image,
    [data-animate~="media-reveal-subtle"] .case-media-item-image,
    .animate-media-subtle .case-media-item-image,
    [data-animate~="media-reveal"] .work-card-media,
    .animate-media .work-card-media,
    [data-animate~="media-reveal-subtle"] .work-card-media,
    .animate-media-subtle .work-card-media,
    [data-animate~="stagger-children"] > *,
    .animate-stagger > *,
    [data-animate~="stagger-children-subtle"] > *,
    .animate-stagger-subtle > *,
    [data-animate~="section-wipe"],
    .animate-section-wipe {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }

    [data-animate~="section-wipe"]::before,
    .animate-section-wipe::before {
        transform: scaleY(0) !important;
        transition: none !important;
    }
    .hero-video-embed {
        display: none;
    }

    .hero-video-poster {
        opacity: 1;
    }

    .about-logo-marquee-strip {
        animation: none;
        transform: translateX(0);
    }

    .people-team-card__info {
        transition: none;
    }
}

/* ============================================================
   Jobs (Phase 2.7) – Übersicht & Detail
   Grün-gelbes Layout nach 7-Jobs._v2, kein dunkles Card-Raster.
   ============================================================ */
.section--jobs-intro,
.section--jobs-media,
.section--jobs-list,
.section--jobs-initiative,
.section--job-detail-hero,
.section--job-application {
    background: var(--color-home-claim);
    color: #0a0d14;
}

.jobs-stage {
    width: 100%;
    padding-inline: var(--edge-x);
}

/* ---- Übersicht: Intro ---- */
.section--jobs-intro {
    padding-block: clamp(120px, 16vh, 220px) clamp(1.4rem, 4vw, 3rem);
}

.jobs-intro-title {
    margin: 0;
    /* Gleiche Schriftgröße und Zeilenhöhe wie .people-page-title, damit die
       Headlines seitenübergreifend einheitlich wirken. max-width bleibt weiter
       als dort (8.4ch), weil die Zeilen hier redaktionell gesetzt sind und
       sonst zusätzlich umbrächen. */
    max-width: 13.5ch;
    font-size: clamp(3.15rem, 10.9vw, 8.6rem);
    line-height: var(--lh-display);
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.jobs-intro-title .text-line {
    display: block;
}

.jobs-intro-copy {
    margin-top: clamp(1.4rem, 3vw, 2.4rem);
    max-width: 54ch;
    display: grid;
    gap: var(--space-4);
}

.jobs-intro-copy p {
    margin: 0;
}

/* ---- Übersicht: Header-Media (full bleed) ---- */
.section--jobs-media {
    padding-block: clamp(0.6rem, 2vw, 1.6rem);
}

.jobs-media {
    width: 100%;
}

.jobs-media__asset {
    display: block;
    width: 100%;
    height: auto;
    max-height: 82svh;
    object-fit: cover;
    object-position: center 38%;
}

/* Iframes (Vimeo) auf inset:0/100% Breite+Hoehe zu strecken verzerrt die
   Iframe-Box auf das (durch max-height ggf. breitere-als-16:9) Wrapper-
   Format - Vimeo bekommt dadurch selbst ein untypisches Seitenverhaeltnis
   und croppt/skaliert das Video intern nicht mehr zuverlaessig auf volle
   Breite (sichtbare Raender im Player). Deshalb wie beim Hero-Video
   (.hero-video-embed): der Iframe bleibt IMMER echtes 16:9 (Breite 100%
   des Wrappers, Hoehe daraus abgeleitet, kein eigenes max-height), wird
   zentriert positioniert - der Ueberstand wird vom Wrapper (overflow:
   hidden) weggeschnitten, ohne dass Vimeo selbst croppen muss. */
.jobs-media:has(> iframe.jobs-media__asset) {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 82svh;
    overflow: hidden;
}

.jobs-media:has(> iframe.jobs-media__asset) > iframe.jobs-media__asset {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
    transform: translate(-50%, -50%);
    border: 0;
}

/* ---- Übersicht: Jobliste ---- */
.section--jobs-list {
    padding-block: clamp(2rem, 6vw, 4.6rem);
}

.jobs-list {
    display: grid;
    gap: clamp(1.2rem, 3.2vw, 2.8rem);
}

.job-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    color: #0a0d14;
    text-decoration: none;
    padding-block: clamp(0.4rem, 1.2vw, 0.9rem);
}

.job-link-row:hover,
.job-link-row:focus-visible {
    text-decoration: none;
}

.job-link-row__title {
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 6.2vw, 5.2rem);
    line-height: var(--lh-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-link-row__title-line {
    display: block;
}

.job-link-row__arrow {
    flex: 0 0 auto;
    width: clamp(2.4rem, 5vw, 4.4rem);
    color: #0a0d14;
    transition: transform 220ms ease;
}

.job-link-row__arrow svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (hover: hover) and (pointer: fine) {
    .job-link-row:hover .job-link-row__arrow,
    .job-link-row:focus-visible .job-link-row__arrow {
        transform: translate(6px, -6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .job-link-row__arrow {
        transition: none;
    }
}

/* ---- Übersicht: Initiativbewerbung ---- */
.section--jobs-initiative {
    padding-block: clamp(1.6rem, 5vw, 3.6rem) clamp(2.6rem, 8vw, 6rem);
}

.jobs-initiative-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 4rem);
    align-items: start;
}

.jobs-initiative-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 5.8vw, 4.8rem);
    line-height: var(--lh-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.jobs-initiative-title-line {
    display: block;
}

.jobs-initiative-body {
    display: grid;
    gap: var(--space-4);
    max-width: 46ch;
}

.jobs-initiative-body p {
    margin: 0;
}

.jobs-initiative-button {
    justify-self: start;
    margin-top: clamp(0.4rem, 1.4vw, 0.9rem);
}

/* ---- Detail: Hero (grün) ---- */
.section--job-detail-hero {
    padding-block: clamp(120px, 16vh, 220px) clamp(1.2rem, 3vw, 2.2rem);
}

.job-detail-hero-grid {
    display: block;
}

.job-detail-hero-title {
    margin: 0;
    max-width: 18ch;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6.6vw, 5.6rem);
    line-height: var(--lh-display);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-detail-hero-title .text-line {
    display: block;
}

.job-detail-hero-department {
    margin: clamp(0.7rem, 1.5vw, 1.15rem) 0 0;
    font-size: clamp(1.15rem, 1.7vw, 1.7rem);
    line-height: 1.2;
}

.job-detail-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.3rem, 3.2vw, 2.8rem);
    margin-top: clamp(1.3rem, 3.2vw, 2.6rem);
}

.job-detail-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
    line-height: 1.2;
}

.job-detail-hero-meta-icon {
    display: inline-flex;
    width: 1.35em;
    height: 1.35em;
}

.job-detail-hero-meta-icon svg {
    width: 100%;
    height: 100%;
}

/* ---- Detail: Inhalt (weiß) ---- */
.section--job-detail-content {
    background: #ffffff;
    color: #0a0d14;
    padding-block: clamp(2.4rem, 6vw, 5rem);
}

.job-detail-content {
    max-width: var(--container-wide);
    margin-inline: auto;
    display: grid;
    gap: clamp(1.8rem, 3.6vw, 3.2rem);
}

.job-detail-intro__heading {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.04;
    letter-spacing: 0;
}

.job-detail-intro__subheading {
    margin: clamp(0.7rem, 1.5vw, 1.15rem) 0 0;
    max-width: 30ch;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: 0;
    color: rgba(10, 13, 20, 0.82);
}

.job-detail-lead {
    margin: 0;
    max-width: 74ch;
}

.job-detail-block__title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: 0;
}

.job-detail-block__text {
    margin: 0 0 var(--space-3);
}

.job-detail-block__list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.5rem;
}

.job-detail-block__note {
    margin: var(--space-3) 0 0;
}

.job-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.6rem, 4vw, 3.5rem);
    align-items: start;
}

/* ---- Detail: Bewerbungsblock (grün) ---- */
.section--job-application {
    padding-block: clamp(2.6rem, 7vw, 5rem);
}

.job-application-inner {
    max-width: var(--container-default);
    margin-inline: auto;
    display: grid;
    justify-items: start;
    gap: clamp(1.1rem, 2.6vw, 1.8rem);
}

.job-application-lead {
    margin: 0;
    max-width: 26ch;
    font-family: var(--font-heading);
    font-size: clamp(1.7rem, 3.6vw, 3.2rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-application-contact {
    display: grid;
    gap: 0.35rem;
}

.job-application-name {
    margin: 0;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    color: rgba(10, 13, 20, 0.75);
}

.job-application-mail {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.05;
    color: #0a0d14;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 2px;
    word-break: break-word;
}

.job-application-mail:hover,
.job-application-mail:focus-visible {
    text-decoration-thickness: 3px;
}

.job-application-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.6rem, 1.4vw, 1rem);
    margin-top: clamp(0.3rem, 1vw, 0.7rem);
}

.button--home-cases-solid {
    background: #0a0d14;
    color: #ffffff;
    border-color: #0a0d14;
}

.button--home-cases-solid:hover,
.button--home-cases-solid:focus-visible {
    background: #000000;
    border-color: #000000;
}

@media (max-width: 64rem) {
    .jobs-initiative-grid {
        grid-template-columns: 1fr;
    }

    .job-detail-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .section--jobs-intro,
    .section--job-detail-hero {
        padding-block-start: clamp(104px, 26vw, 150px);
    }

    .jobs-initiative-button,
    .job-application-actions .button {
        width: 100%;
    }
}

/* ============================================================
   Contact (Phase 2.8) – dunkles Layout nach 8-Kontaktformular
   Kein Card-/Box-Stil, Underline-Inputs, Pill-Outline-Button.
   ============================================================ */
.section--contact-intro {
    padding-block: clamp(120px, 16vh, 220px) clamp(1rem, 2.5vw, 2rem);
}

.section--contact-form {
    padding-block: 0 clamp(3rem, 8vw, 6rem);
}

.contact-stage {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--edge-x);
}

.contact-title {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(2.6rem, 7.4vw, 6.6rem);
    line-height: var(--lh-display);
    padding-bottom: 0.04em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.contact-title .text-line {
    display: block;
}

.contact-direct {
    margin-top: clamp(1.3rem, 3vw, 2.2rem);
    display: grid;
    gap: 0.15rem;
    justify-items: start;
}

.contact-direct__link {
    color: var(--color-text);
    font-size: clamp(1.25rem, 2.2vw, 2rem);
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 1px;
    word-break: break-word;
}

.contact-direct__link:hover,
.contact-direct__link:focus-visible {
    text-decoration-thickness: 2px;
}

.contact-form {
    width: 100%;
    max-width: min(100%, 58rem);
    margin-top: clamp(1.6rem, 4vw, 3rem);
}

.contact-form-grid {
    display: grid;
    gap: clamp(1.3rem, 3vw, 2.1rem);
}

.contact-field {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.contact-field__label {
    font-size: clamp(0.95rem, 1.1vw, 1.12rem);
    line-height: 1.3;
    color: rgba(245, 247, 255, 0.72);
}

.contact-field__control {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 247, 255, 0.32);
    border-radius: 0;
    padding: 0.55rem 0;
    color: var(--color-text);
    font: inherit;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.4;
    transition: border-color 160ms ease;
}

.contact-field__control:focus {
    outline: none;
    border-bottom-color: var(--color-text);
    border-bottom-width: 2px;
}

.contact-field__control:focus-visible {
    outline: none;
}

.contact-field__control--textarea {
    min-height: clamp(8.5rem, 18vh, 13rem);
    resize: vertical;
}

.contact-form-actions {
    margin-top: clamp(1.8rem, 4.5vw, 3.2rem);
    display: flex;
    justify-content: center;
}

.button--contact-submit {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-family: var(--font-body);
    font-size: var(--type-button);
    line-height: 1.2;
    padding: clamp(10px, 1vw, 16px) clamp(28px, 3vw, 54px);
    min-height: clamp(48px, 3.4vw, 60px);
}

.button--contact-submit:hover,
.button--contact-submit:focus-visible {
    background: var(--color-text);
    color: #05070f;
    border-color: var(--color-text);
}

@media (max-width: 40rem) {
    .contact-form-actions {
        justify-content: stretch;
    }

    .button--contact-submit {
        width: 100%;
    }
}

/* ===========================================================================
   Case-Block-Effekte (Phase 3.17)
   Bewusst eigener Satz Modi, getrennt von den älteren media-reveal/text-reveal:
   die stehen fest im Markup von Home/About/People/Jobs und dürfen sich nicht
   ändern. Alle Effekte laufen einmalig beim Eintreten in den Viewport
   (.is-visible kommt aus main.js) und sind auf Transform/Opacity/clip-path/
   filter beschränkt, also GPU-freundlich.
   =========================================================================== */

.has-js {
    --fx-duration: 1200ms;
    --fx-duration-long: 1500ms;
    /* Farbwäsche braucht spürbar länger: der Übergang von Graustufen in Farbe
       wirkt sonst wie ein Umschalten statt wie ein Verlauf. */
    --fx-duration-color: 2400ms;
    --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fx-word-step: 55ms;
    --fx-char-step: 22ms;
    --fx-line-step: 130ms;
}

/* --- Medien: Masken-Wipe (Vorhang von unten) --------------------------- */
.has-js [data-animate~="media-wipe"] .case-media-item-frame,
.has-js [data-animate~="media-wipe"] .work-card-media {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--fx-duration) var(--fx-ease);
    will-change: clip-path;
}

.has-js [data-animate~="media-wipe"].is-visible .case-media-item-frame,
.has-js [data-animate~="media-wipe"].is-visible .work-card-media {
    clip-path: inset(0 0 0 0);
}

.has-js [data-animate~="media-wipe"] .case-media-item-image,
.has-js [data-animate~="media-wipe"] .work-card-media__asset {
    transform: scale(1.16);
    transition: transform calc(var(--fx-duration) + 300ms) var(--fx-ease);
    will-change: transform;
}

.has-js [data-animate~="media-wipe"].is-visible .case-media-item-image,
.has-js [data-animate~="media-wipe"].is-visible .work-card-media__asset {
    transform: scale(1);
}

/* --- Medien: Blur-Fokus ------------------------------------------------ */
.has-js [data-animate~="media-blur"] .case-media-item-image,
.has-js [data-animate~="media-blur"] .case-media-item-poster,
.has-js [data-animate~="media-blur"] .work-card-media__asset {
    opacity: 0;
    filter: blur(26px);
    transform: scale(1.1);
    transition:
        opacity var(--fx-duration) var(--fx-ease),
        filter var(--fx-duration) var(--fx-ease),
        transform calc(var(--fx-duration) + 250ms) var(--fx-ease);
    will-change: opacity, filter, transform;
}

.has-js [data-animate~="media-blur"].is-visible .case-media-item-image,
.has-js [data-animate~="media-blur"].is-visible .case-media-item-poster,
.has-js [data-animate~="media-blur"].is-visible .work-card-media__asset {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* --- Medien: Split-Shutter (öffnet aus der Mitte) ---------------------- */
.has-js [data-animate~="media-shutter"] .case-media-item-frame,
.has-js [data-animate~="media-shutter"] .work-card-media {
    clip-path: inset(0 50% 0 50%);
    transition: clip-path var(--fx-duration-long) var(--fx-ease);
    will-change: clip-path;
}

.has-js [data-animate~="media-shutter"].is-visible .case-media-item-frame,
.has-js [data-animate~="media-shutter"].is-visible .work-card-media {
    clip-path: inset(0 0 0 0);
}

.has-js [data-animate~="media-shutter"] .case-media-item-image,
.has-js [data-animate~="media-shutter"] .work-card-media__asset {
    transform: scale(1.12);
    transition: transform calc(var(--fx-duration-long) + 200ms) var(--fx-ease);
}

.has-js [data-animate~="media-shutter"].is-visible .case-media-item-image,
.has-js [data-animate~="media-shutter"].is-visible .work-card-media__asset {
    transform: scale(1);
}

/* --- Medien: Farbwäsche (entsättigt in Farbe) -------------------------- */
.has-js [data-animate~="media-color"] .case-media-item-image,
.has-js [data-animate~="media-color"] .case-media-item-poster,
.has-js [data-animate~="media-color"] .work-card-media__asset {
    opacity: 0.55;
    filter: grayscale(1) contrast(1.08);
    transform: scale(1.06);
    transition:
        opacity var(--fx-duration) var(--fx-ease),
        filter var(--fx-duration-color) linear,
        transform var(--fx-duration-color) var(--fx-ease);
    will-change: opacity, filter, transform;
}

.has-js [data-animate~="media-color"].is-visible .case-media-item-image,
.has-js [data-animate~="media-color"].is-visible .case-media-item-poster,
.has-js [data-animate~="media-color"].is-visible .work-card-media__asset {
    opacity: 1;
    filter: grayscale(0) contrast(1);
    transform: scale(1);
}

/* --- Text: gemeinsame Bausteine ---------------------------------------- */
.has-js .anim-word,
.has-js .anim-char {
    display: inline-block;
    /* Unterlängen dürfen nicht abgeschnitten werden. */
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
}

/* --- Text: Zeilen-Maske ------------------------------------------------ */
.has-js [data-animate~="text-lines"] h1,
.has-js [data-animate~="text-lines"] h2,
.has-js [data-animate~="text-lines"] h3,
.has-js [data-animate~="text-lines"] p {
    opacity: 0;
    /* Siehe oben: nur senkrecht maskieren, sonst werden überlaufende
       Headlines abgeschnitten. */
    clip-path: inset(0 -100vw 100% -100vw);
    transform: translate3d(0, 0.8em, 0);
    transition:
        opacity var(--fx-duration) var(--fx-ease),
        clip-path var(--fx-duration) var(--fx-ease),
        transform var(--fx-duration) var(--fx-ease);
    transition-delay: calc(var(--anim-index, 0) * var(--fx-line-step));
    will-change: opacity, clip-path, transform;
}

.has-js [data-animate~="text-lines"].is-visible h1,
.has-js [data-animate~="text-lines"].is-visible h2,
.has-js [data-animate~="text-lines"].is-visible h3,
.has-js [data-animate~="text-lines"].is-visible p {
    opacity: 1;
    clip-path: inset(0 -100vw -0.3em -100vw);
    transform: translate3d(0, 0, 0);
}

/* --- Text: Wort für Wort ----------------------------------------------- */
.has-js [data-animate~="text-words"] .anim-word {
    opacity: 0;
    transform: translate3d(0, 0.9em, 0) rotate(1.5deg);
    transition:
        opacity 700ms var(--fx-ease),
        transform 700ms var(--fx-ease);
    transition-delay: calc(var(--anim-index, 0) * var(--fx-word-step));
    will-change: opacity, transform;
}

.has-js [data-animate~="text-words"].is-visible .anim-word {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
}

/* --- Text: Zeichen-Kaskade --------------------------------------------- */
.has-js [data-animate~="text-chars"] .anim-char {
    opacity: 0;
    transform: translate3d(0, 0.55em, 0) scale(0.86);
    transition:
        opacity 520ms var(--fx-ease),
        transform 520ms var(--fx-ease);
    transition-delay: calc(var(--anim-index, 0) * var(--fx-char-step));
    will-change: opacity, transform;
}

.has-js [data-animate~="text-chars"].is-visible .anim-char {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* --- Text: Marker-Wipe (von links freigelegt) -------------------------- */
.has-js [data-animate~="text-wipe"] h1,
.has-js [data-animate~="text-wipe"] h2,
.has-js [data-animate~="text-wipe"] h3,
.has-js [data-animate~="text-wipe"] p {
    /* Hier ist die waagrechte Bewegung der Effekt; rechts wird beim Zielwert
       aber ebenfalls freigegeben, damit überlaufender Text sichtbar bleibt. */
    clip-path: inset(0 100% -0.3em 0);
    transition: clip-path var(--fx-duration) var(--fx-ease);
    transition-delay: calc(var(--anim-index, 0) * var(--fx-line-step));
    will-change: clip-path;
}

.has-js [data-animate~="text-wipe"].is-visible h1,
.has-js [data-animate~="text-wipe"].is-visible h2,
.has-js [data-animate~="text-wipe"].is-visible h3,
.has-js [data-animate~="text-wipe"].is-visible p {
    clip-path: inset(0 -100vw -0.3em 0);
}

@media (prefers-reduced-motion: reduce) {
    /* Zwingend: ohne diesen Reset blieben Startzustände wie opacity: 0 oder
       clip-path: inset(0 0 100% 0) stehen und Inhalte wären unsichtbar. */
    [data-animate~="media-wipe"] .case-media-item-frame,
    [data-animate~="media-wipe"] .work-card-media,
    [data-animate~="media-wipe"] .case-media-item-image,
    [data-animate~="media-wipe"] .work-card-media__asset,
    [data-animate~="media-blur"] .case-media-item-image,
    [data-animate~="media-blur"] .case-media-item-poster,
    [data-animate~="media-blur"] .work-card-media__asset,
    [data-animate~="media-shutter"] .case-media-item-frame,
    [data-animate~="media-shutter"] .work-card-media,
    [data-animate~="media-shutter"] .case-media-item-image,
    [data-animate~="media-shutter"] .work-card-media__asset,
    [data-animate~="media-color"] .case-media-item-image,
    [data-animate~="media-color"] .case-media-item-poster,
    [data-animate~="media-color"] .work-card-media__asset,
    [data-animate~="text-lines"] h1,
    [data-animate~="text-lines"] h2,
    [data-animate~="text-lines"] h3,
    [data-animate~="text-lines"] p,
    [data-animate~="text-wipe"] h1,
    [data-animate~="text-wipe"] h2,
    [data-animate~="text-wipe"] h3,
    [data-animate~="text-wipe"] p,
    [data-animate~="text-words"] .anim-word,
    [data-animate~="text-chars"] .anim-char {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }
}