/* ENTWURF Hero-Mosaik (24.10.2026): Hinter dem Einstieg der Videoseite steht
   eine gekippte Wand aus Standbildern der Arbeitsproben. Rechts kraeftig,
   nach links laeuft sie ins Dunkelblau aus, damit der Text auf fast
   deckendem Grund steht. Die Kacheln fahren einmal ein, ohne Dauerschleife.
   Verwerfen: Block kv-mosaik und Klasse kv-hero--mosaik im HTML sowie den
   Link auf diese Datei entfernen. */
.kv-hero--mosaik {
    --kv-mosaik-kippung: perspective(calc(var(--space-24) * 16)) rotateX(12deg) rotateY(-20deg) rotateZ(-10deg);
    --kv-mosaik-text: var(--surface-base);
    --kv-mosaik-halb: color-mix(in srgb, var(--surface-base) 72%, transparent);
    --kv-mosaik-licht: color-mix(in srgb, var(--surface-base) 30%, transparent);
    --kv-mosaik-dicht: color-mix(in srgb, var(--surface-base) 90%, transparent);
    isolation: isolate;
}
.kv-hero--mosaik .kv-hero__grid { z-index: 1; }
.kv-mosaik { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.kv-mosaik__wand {
    position: absolute;
    inset-block-start: calc(var(--space-24) * -1);
    inset-inline-end: calc(var(--space-16) * -1);
    display: flex;
    gap: var(--space-4);
    width: min(calc(var(--space-24) * 12), 72%);
    transform: var(--kv-mosaik-kippung);
    transform-origin: right center;
}
.kv-mosaik__spalte { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); min-width: 0; }
.kv-mosaik__spalte:nth-child(even) { margin-top: var(--space-24); }
.kv-mosaik img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border: thin solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
/* Verlauf: Textseite fast deckend, rechts scheinen die Bilder durch,
   unten weicher Uebergang in die Galerie. */
.kv-mosaik::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, var(--kv-mosaik-text) 0%, transparent 22%),
        linear-gradient(90deg, var(--kv-mosaik-text) 0%, var(--kv-mosaik-text) 46%, var(--kv-mosaik-halb) 64%, var(--kv-mosaik-licht) 100%);
}

/* Einmaliges Einfahren, Spalten gestaffelt. */
@media (prefers-reduced-motion: no-preference) {
    .kv-mosaik__spalte { animation: kv-mosaik-ein var(--duration-slow) var(--ease-out) both; }
    .kv-mosaik__spalte:nth-child(2) { animation-delay: calc(var(--duration-fast) * 1); }
    .kv-mosaik__spalte:nth-child(3) { animation-delay: calc(var(--duration-fast) * 2); }
    .kv-mosaik__spalte:nth-child(4) { animation-delay: calc(var(--duration-fast) * 3); }
    .kv-mosaik__spalte:nth-child(5) { animation-delay: calc(var(--duration-fast) * 4); }
    .kv-mosaik__spalte:nth-child(6) { animation-delay: calc(var(--duration-fast) * 5); }
}
@keyframes kv-mosaik-ein {
    from { opacity: 0; translate: 0 var(--space-6); }
    to { opacity: 1; translate: 0 0; }
}

/* Einspaltig: Text steht oben ueber der Wand, also oben fast deckend. */
@media (max-width: 899px) {
    .kv-mosaik__wand { width: 130%; inset-inline-end: -30%; }
    .kv-mosaik::after {
        background: linear-gradient(180deg, var(--kv-mosaik-dicht) 0%, var(--kv-mosaik-text) 55%);
    }
}