/* ==========================================================================
   More Town Soul – Effekte
   Effekt 1  Passer rastet ein (scroll-gesteuert)
   Effekt 2  Überschriften werden gedruckt (beim Einscrollen, einmal)
   Effekt 8  Seitenwechsel als Druckgang (View Transitions zwischen Seiten)
   Effekt 9  Foto wächst aus der Vorschau (View Transitions in der Seite)
   Effekt 10 Profile aufklappen (<details> mit animierter Höhe)
   Jeder Effekt hängt an einer Klasse auf <html> (fx-1 … fx-12) und lässt sich
   in config.php einzeln abschalten.
   ========================================================================== */

:root { interpolate-size: allow-keywords; }

/* ==========================================================================
   Effekt 1: Passer rastet ein
   Beim Laden stehen die Farbauszüge versetzt. In den ersten 320 px Scrollweg
   rutschen sie übereinander; danach driften sie leicht auseinander.
   ========================================================================== */
.hero { --passer: 1; }
html.fx-1 .hero .raster__layer--two { animation: none; }
html.fx-1 .hero .raster__layer--two .raster__img {
    transform: translate(calc(-3px - 22px * var(--passer)), calc(2px + 12px * var(--passer)));
}
html.fx-1 .hero .raster__layer--three .raster__img {
    transform: translate(calc(2px + 18px * var(--passer)), calc(-2px - 10px * var(--passer)));
}
html.fx-1 .hero .overprint__shadow {
    transform: translate(calc(16px * var(--passer)), calc(-10px * var(--passer)));
}

@supports (animation-timeline: scroll()) {
    html.fx-1 .hero .raster__layer--two .raster__img {
        animation: fx-passer-two linear both;
        animation-timeline: scroll(root);
        animation-range: 0 320px;
    }
    html.fx-1 .hero .raster__layer--three .raster__img {
        animation: fx-passer-three linear both;
        animation-timeline: scroll(root);
        animation-range: 0 320px;
    }
    html.fx-1 .hero .overprint__shadow {
        animation: fx-passer-title linear both;
        animation-timeline: scroll(root);
        animation-range: 0 320px;
    }
    html.fx-1 .hero .raster {
        animation: fx-drift linear both;
        animation-timeline: scroll(root);
        animation-range: 320px 900px;
    }
}
@keyframes fx-passer-two {
    from { transform: translate(-25px, 14px); }
    to { transform: translate(-3px, 2px); }
}
@keyframes fx-passer-three {
    from { transform: translate(20px, -12px); }
    to { transform: translate(2px, -2px); }
}
@keyframes fx-passer-title {
    from { transform: translate(16px, -10px); }
    to { transform: translate(0, 0); }
}
@keyframes fx-drift {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(60px) scale(1.04); }
}

/* ==========================================================================
   Effekt 2: Überschriften werden gedruckt
   Erst die Petrol-Schicht, dann Orange, dann rastet die Schrift ein.
   ========================================================================== */
.poster-title { --title-color: var(--ink); }
.poster-title--mustard { --title-color: var(--mustard); }

html.fx-2 .poster-title.fx-print {
    color: transparent;
    text-shadow: 18px -10px 0 rgba(47, 107, 106, 0), -14px 8px 0 rgba(217, 105, 43, 0);
}
html.fx-2 .poster-title.fx-print.is-printed {
    animation: fx-print 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes fx-print {
    0% {
        color: transparent;
        text-shadow: 18px -10px 0 rgba(47, 107, 106, 0), -14px 8px 0 rgba(217, 105, 43, 0);
    }
    30% {
        color: transparent;
        text-shadow: 12px -7px 0 rgba(47, 107, 106, 0.9), -14px 8px 0 rgba(217, 105, 43, 0);
    }
    60% {
        color: transparent;
        text-shadow: 6px -3px 0 rgba(47, 107, 106, 0.9), -7px 4px 0 rgba(217, 105, 43, 0.9);
    }
    85% {
        color: var(--title-color);
        text-shadow: 3px -2px 0 rgba(47, 107, 106, 0.6), -2px 1px 0 rgba(217, 105, 43, 0.6);
    }
    100% {
        color: var(--title-color);
        text-shadow: 0 0 0 rgba(47, 107, 106, 0), 0 0 0 rgba(217, 105, 43, 0);
    }
}

/* ==========================================================================
   Effekt 8: Seitenwechsel als Druckgang
   Die neue Seite wird von links nach rechts „aufgerakelt“, ein Farbbalken
   läuft an der Kante mit. Kopfzeile bleibt stehen, der Seitentitel wandert.
   ========================================================================== */
@view-transition { navigation: auto; }

html.fx-8 .site-header { view-transition-name: site-header; }
html.fx-8 .fx-page-title { view-transition-name: page-title; }

html.fx-8::view-transition-old(root) {
    animation: fx-old-out 0.7s ease both;
}
html.fx-8::view-transition-new(root) {
    animation: fx-squeegee 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
}
html.fx-8::view-transition-group(page-title) {
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes fx-old-out {
    to { filter: brightness(0.6) sepia(0.4); }
}
@keyframes fx-squeegee {
    from { clip-path: polygon(0 0, 0 0, -12% 100%, 0 100%); }
    to { clip-path: polygon(0 0, 112% 0, 100% 100%, 0 100%); }
}

/* Der Rakel-Balken: nur während des Übergangs sichtbar */
.fx-rakel { display: none; }
html.fx-8.fx-vt-reveal .fx-rakel {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 70px;
    height: 100vh;
    background: linear-gradient(90deg, var(--rust) 0 33%, var(--mustard) 33% 66%, var(--petrol) 66% 100%);
    box-shadow: 0 0 30px rgba(36, 24, 16, 0.5);
    transform: skewX(-6deg);
    view-transition-name: fx-rakel;
    animation: fx-rakel 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
    pointer-events: none;
}
@keyframes fx-rakel {
    from { transform: translateX(-120px) skewX(-6deg); }
    to { transform: translateX(calc(100vw + 60px)) skewX(-6deg); }
}
html.fx-8::view-transition-group(fx-rakel) { animation: none; }
html.fx-8::view-transition-new(fx-rakel) { animation: none; }

/* ==========================================================================
   Effekt 9: Foto wächst aus der Vorschau
   ========================================================================== */
html.fx-9::view-transition-group(fx-photo) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.fx-9::view-transition-old(fx-photo),
html.fx-9::view-transition-new(fx-photo) {
    animation: none;
    mix-blend-mode: normal;
    height: 100%;
    object-fit: cover;
}
html.fx-9 .lightbox[open] { animation: fx-backdrop 0.3s ease both; }
@keyframes fx-backdrop { from { background-color: rgba(36, 24, 16, 0); } }

/* ==========================================================================
   Effekt 10: Profile aufklappen
   ========================================================================== */
.fx-profile { border-bottom: 3px solid var(--cream); }
.fx-profile summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    align-items: center;
    padding-block: 28px;
    cursor: pointer;
    list-style: none;
}
.fx-profile summary::-webkit-details-marker { display: none; }
.fx-profile__photo { flex: 0 0 160px; }
/* Farbfläche auf dem Rahmen, Foto wird darauf multipliziert (wie im bisherigen Profil) */
.fx-profile__photo picture {
    display: block;
    width: 160px;
    background: var(--orange);
    border: 4px solid var(--cream);
    isolation: isolate;
}
.fx-profile:nth-child(3n+2) .fx-profile__photo picture { background: var(--petrol); }
.fx-profile:nth-child(3n) .fx-profile__photo picture { background: var(--mustard); }
.fx-profile__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: grayscale(1) contrast(1.2) brightness(1.15);
    mix-blend-mode: multiply;
}
/* Porträt beim Öffnen: Farbe entwickelt sich, Bild wächst nach rechts unten */
/* Öffnen: weich mit Nachschwingen; Schließen: schnell zurück in den Ursprung */
.fx-profile__photo picture {
    transform-origin: 0 0;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.fx-profile__photo img {
    transition: filter 0.15s ease;
}
.fx-profile.is-expanded .fx-profile__photo picture {
    transform: scale(1.18);
    background-color: #fff;
    transition:
        transform 0.55s cubic-bezier(0.25, 0.9, 0.3, 1.12),
        background-color 0.7s ease 0.1s;
}
.fx-profile.is-expanded .fx-profile__photo img {
    filter: grayscale(0) contrast(1) brightness(1);
    transition: filter 0.7s ease 0.1s;
}
/* Platz für das vergrößerte Foto ohne Umbruch des Textes: Der Kopf mit Name und Anriss wird nur verschoben
   (transform), nicht neu umbrochen; rechts ist dafür dauerhaft Raum reserviert. Der Text darunter steht
   von vornherein an der Endposition. */
.fx-profile__head { padding-right: 30px; transition: transform 0.15s ease; }
.fx-profile.is-expanded .fx-profile__head { transform: translateX(30px); transition: transform 0.55s cubic-bezier(0.25, 0.9, 0.3, 1.12); }
.fx-profile__photo { transition: margin 0.15s ease; }
@media (max-width: 640px) {
    /* Text darunter ohne Einzug: das Foto wächst nach unten, der Abstand darunter wächst sanft mit */
    .fx-profile.is-expanded .fx-profile__photo { margin-bottom: 40px; transition: margin 0.55s cubic-bezier(0.25, 0.9, 0.3, 1.12); }
}
@media (max-width: 599px) {
    /* Schmal: Foto immer über dem Text */
    .fx-profile summary .fx-profile__head { flex-basis: 100%; padding-right: 0; }
    .fx-profile.is-expanded .fx-profile__head { transform: none; }
}
.fx-profiles { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
    .fx-profile__photo, .fx-profile__photo picture, .fx-profile__photo img, .fx-profile__head,
    .fx-profile.is-expanded .fx-profile__photo, .fx-profile.is-expanded .fx-profile__photo picture, .fx-profile.is-expanded .fx-profile__photo img, .fx-profile.is-expanded .fx-profile__head { transition: none; }
}
.fx-profile__head { flex: 1 1 360px; min-width: 0; }
.fx-profile__teaser { margin: 10px 0 0; max-width: 60ch; }
.fx-profile__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mustard);
}
.fx-profile__more::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.3s ease;
}
.fx-profile.is-expanded .fx-profile__more::after { transform: rotate(-135deg) translateY(-3px); }
.fx-profile__more .fx-less { display: none; }
.fx-profile.is-expanded .fx-profile__more .fx-more { display: none; }
.fx-profile.is-expanded .fx-profile__more .fx-less { display: inline; }
.fx-profile summary:focus-visible { outline: 3px solid var(--mustard); outline-offset: 4px; }
.fx-profile__body { padding: 0 0 32px 224px; max-width: calc(72ch + 224px); }
@media (max-width: 640px) { .fx-profile__body { padding-left: 0; } }

/* Auf- und Zuklappen animiert main.js über die Höhe von .fx-profile__body (Web Animations API),
   damit es in allen Browsern gleich weich läuft. Ohne Skript klappt das Profil ohne Animation. */
.fx-profile__body { overflow: hidden; }

/* ---------- Reduzierte Bewegung: alle Effekte aus ---------- */
@media (prefers-reduced-motion: reduce) {
    html.fx-1 .hero .raster__img, html.fx-1 .hero .overprint__shadow, html.fx-1 .hero .raster { animation: none !important; }
    html.fx-1 .hero { --passer: 0; }
    html.fx-2 .poster-title.fx-print { color: var(--title-color); text-shadow: none; animation: none !important; }
    html.fx-8::view-transition-old(root), html.fx-8::view-transition-new(root) { animation: none; }
    .fx-rakel { display: none !important; }
    html.fx-10 .fx-profile::details-content { transition: none; }
}

.fx-profile__head > span { display: block; }
.fx-profile__head .profile__instrument { margin-bottom: 0; }

/* ==========================================================================
   More Town Soul – weitere Effekte
   Effekt 3  Dunkle Fläche hebt sich
   Effekt 4  Raster entwickelt sich
   Effekt 5  Plakate werden geklebt
   Effekt 6  Laufband (Endlosschleife, gegenläufig)
   Effekt 7  Druckfortschritt
   Effekt 11 Video zerfällt ins Raster
   Effekt 12 Fehldruck beim Überfahren
   ========================================================================== */

/* ---------- Effekt 3: Dunkle Fläche hebt sich, Inhalte folgen gestaffelt ---------- */
/* Grundsatz: Die Fläche ist immer sichtbar. Nur Abschnitte, die beim Laden noch unterhalb des Bildschirms
   liegen, bekommen per Skript den Ausgangszustand (fx-rise-pending) und heben sich beim Erreichen.
   Die gerissene Oberkante bleibt als feste Form. */
html.fx-3 .torn.fx-tear {
    clip-path: polygon(0 18px, 4% 6px, 9% 16px, 14% 4px, 20% 14px, 27% 2px, 33% 15px, 40% 5px, 47% 17px, 53% 3px, 60% 14px, 66% 6px, 73% 16px, 80% 2px, 86% 13px, 92% 5px, 100% 15px, 100% 100%, 0 100%);
    transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.fx-3 .torn.fx-tear > .wrap > * {
    transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.fx-3 .torn.fx-tear.fx-rise-pending { opacity: 0; translate: 0 40px; scale: 0.98; }
html.fx-3 .torn.fx-tear.fx-rise-pending > .wrap > * { opacity: 0; translate: 0 14px; }
html.fx-3 .torn.fx-tear.is-torn > .wrap > *:nth-child(1) { transition-delay: 0.2s; }
html.fx-3 .torn.fx-tear.is-torn > .wrap > *:nth-child(2) { transition-delay: 0.32s; }
html.fx-3 .torn.fx-tear.is-torn > .wrap > *:nth-child(3) { transition-delay: 0.44s; }
html.fx-3 .torn.fx-tear.is-torn > .wrap > *:nth-child(4) { transition-delay: 0.56s; }
html.fx-3 .torn.fx-tear.is-torn > .wrap > *:nth-child(n+5) { transition-delay: 0.68s; }
/* Bereits überscrollt (z. B. nach dem Neuladen): sofort im Endzustand */
html.fx-3 .torn.fx-tear.is-open, html.fx-3 .torn.fx-tear.is-open > .wrap > * { transition: none; }

/* ---------- Effekt 4: Raster entwickelt sich ---------- */
.fx-dev-wrap { position: relative; display: block; overflow: hidden; }
.fx-dev {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(36, 24, 16, 0.95) 32%, transparent 34%);
    background-size: 5px 5px;
    mix-blend-mode: multiply;
    opacity: 0;
}
html.fx-4 .fx-dev { opacity: 0.25; }
html.fx-4 .fx-dev-wrap img { filter: grayscale(1) contrast(1.35) brightness(1.08); }
@supports (animation-timeline: view()) {
    html.fx-4 .fx-dev {
        animation: fx-dev-dots linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
    }
    html.fx-4 .fx-dev-wrap img {
        animation: fx-dev-img linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 45%;
    }
}
html.fx-4.fx-no-sda .fx-dev { transition: opacity 1.2s ease, background-size 1.2s ease; opacity: 0.9; background-size: 16px 16px; }
html.fx-4.fx-no-sda .fx-dev-wrap.is-developed .fx-dev { opacity: 0.25; background-size: 5px 5px; }
html.fx-4.fx-no-sda .fx-dev-wrap img { transition: filter 1.2s ease; filter: grayscale(1) contrast(2.4) brightness(1.25) blur(1.5px); }
html.fx-4.fx-no-sda .fx-dev-wrap.is-developed img { filter: grayscale(1) contrast(1.35) brightness(1.08); }
@keyframes fx-dev-dots {
    from { opacity: 0.95; background-size: 18px 18px; }
    to { opacity: 0.25; background-size: 5px 5px; }
}
@keyframes fx-dev-img {
    from { filter: grayscale(1) contrast(2.6) brightness(1.3) blur(2px); }
    to { filter: grayscale(1) contrast(1.35) brightness(1.08) blur(0); }
}

/* ---------- Effekt 5: Plakate werden geklebt ---------- */
html.fx-5 .fx-paste {
    opacity: 0;
    transform: translateY(36px) rotate(var(--fx-rot, -4deg)) scale(0.97);
}
html.fx-5 .fx-paste.is-pasted {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 1.3, 0.4, 1);
    transition-delay: calc(var(--fx-i, 0) * 110ms);
}

/* ---------- Effekt 6: Laufband ---------- */
.fx-marquee { overflow: hidden; padding-block: 34px; }
.fx-marquee__track {
    display: block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1;
    text-transform: uppercase;
    will-change: transform;
}
.fx-marquee__track--two { color: transparent; -webkit-text-stroke: 2px var(--ink); margin-top: 10px; }
/* Endlosschleife: jede Zeile enthält ihre Titel zweimal hintereinander und wird um genau eine Hälfte verschoben.
   Obere Zeile läuft nach links, untere nach rechts. Die Dauer setzt main.js passend zur Zeilenlänge,
   damit das Tempo auf allen Bildschirmen gleich bleibt (obere 40 px/s, untere 35 px/s). */
.fx-marquee__track { width: max-content; }
.fx-marquee__half { display: inline-block; white-space: pre; }
html.fx-6 .fx-marquee__track--one { animation: fx-run-left var(--fx-marquee-dur, 90s) linear infinite; }
html.fx-6 .fx-marquee__track--two { animation: fx-run-right var(--fx-marquee-dur, 100s) linear infinite; }
@keyframes fx-run-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fx-run-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Effekt 7: Druckfortschritt ---------- */
.fx-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 6px;
    background: linear-gradient(90deg, var(--rust) 0 33.3%, var(--mustard) 33.3% 66.6%, var(--petrol) 66.6% 100%);
    transform-origin: 0 50%;
    transform: scaleX(var(--fx-progress, 0));
    display: none;
}
html.fx-7 .fx-progress { display: block; }
@supports (animation-timeline: scroll()) {
    html.fx-7 .fx-progress {
        animation: fx-progress linear both;
        animation-timeline: scroll(root);
    }
}
@keyframes fx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Effekt 11: Video zerfällt ins Raster ---------- */
.fx-video__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, var(--ink) 0, var(--ink) 0, transparent 0);
    background-size: 14px 14px;
}
.video__frame.is-dissolving .fx-video__dots { animation: fx-dissolve 0.8s steps(8) forwards; }
.video__frame.is-dissolving .video__play { animation: fx-play-out 0.3s ease forwards; }
html:not(.fx-11) .video__frame.is-dissolving .fx-video__dots { animation-duration: 0.01s; }
@keyframes fx-dissolve {
    0% { background-image: radial-gradient(circle, var(--ink) 0, transparent 1px); }
    25% { background-image: radial-gradient(circle, var(--ink) 2px, transparent 2.5px); }
    50% { background-image: radial-gradient(circle, var(--ink) 4px, transparent 4.5px); }
    75% { background-image: radial-gradient(circle, var(--ink) 7px, transparent 7.5px); }
    100% { background-image: radial-gradient(circle, var(--ink) 10px, transparent 10.5px); }
}
@keyframes fx-play-out { to { transform: translate(-50%, -50%) scale(0); } }

/* ---------- Effekt 12: Fehldruck beim Überfahren ---------- */
html.fx-12 .button:hover, html.fx-12 .button:focus-visible { transform: none; animation: fx-misprint-text 0.45s steps(4) both; }
html.fx-12 .section-card a:hover, html.fx-12 .section-card a:focus-visible,
html.fx-12 .photo-grid__link:hover, html.fx-12 .photo-grid__link:focus-visible {
    transform: none;
    animation: fx-misprint-box 0.45s steps(4) both;
}
@keyframes fx-misprint-text {
    0% { text-shadow: 4px -3px 0 var(--petrol), -4px 3px 0 var(--orange); transform: translate(2px, -1px); }
    50% { text-shadow: -2px 2px 0 var(--petrol), 3px -2px 0 var(--orange); transform: translate(-1px, 1px); }
    100% { text-shadow: 1px -1px 0 rgba(47, 107, 106, 0.6), -1px 1px 0 rgba(217, 105, 43, 0.6); transform: none; }
}
@keyframes fx-misprint-box {
    0% { box-shadow: -8px 8px 0 var(--petrol), 8px -8px 0 var(--orange); transform: translate(3px, -2px); }
    50% { box-shadow: 5px -4px 0 var(--petrol), -5px 4px 0 var(--orange); transform: translate(-2px, 1px); }
    100% { box-shadow: -4px 4px 0 var(--petrol), 4px -4px 0 var(--orange); transform: none; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    html.fx-3 .torn.fx-tear, html.fx-3 .torn.fx-tear > .wrap > * { transition: none !important; opacity: 1 !important; translate: none !important; scale: none !important; }
    html.fx-4 .fx-dev, html.fx-4 .fx-dev-wrap img { animation: none !important; transition: none !important; }
    html.fx-5 .fx-paste { opacity: 1; transform: none; transition: none !important; }
    html.fx-6 .fx-marquee__track { animation: none !important; white-space: normal; width: auto; }
    html.fx-6 .fx-marquee__half + .fx-marquee__half { display: none; }
    html.fx-7 .fx-progress { display: none; }
    .video__frame.is-dissolving .fx-video__dots { animation-duration: 0.01s; }
    html.fx-12 .button:hover, html.fx-12 .section-card a:hover, html.fx-12 .photo-grid__link:hover { animation: none !important; }
}
.fx-tear-probe { display: block; height: 1px; margin-bottom: -1px; position: relative; top: 120px; }

/* ---------- Ergänzungen für die Einbindung in die Seite ---------- */
.fx-tear-probe { display: block; height: 1px; margin-bottom: -1px; position: relative; top: 120px; }
.section--marquee-link { padding-bottom: 36px; }
.fx-marquee + .visually-hidden + .section--marquee-link .caps-link { margin-top: 0; }
.section-card .fx-dev-wrap img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.lineup__photo.fx-dev-wrap img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.album-card__image.fx-dev-wrap { display: block; }
.video__start { overflow: hidden; }

/* ---------- Effekt 13: Staub und Kratzer mit sanfter Parallaxe ---------- */
/* Die Ebenen sind um eine Kachelhöhe verlängert und werden beim Scrollen langsamer als der Inhalt verschoben.
   Der Versatz läuft modulo Kachelhöhe, dadurch nahtlos auf beliebig langen Seiten. Werte setzt main.js. */
html.fx-13 .texture--grain {
    bottom: -256px;
    translate: 0 var(--fx-par-grain, 0px);
    will-change: translate;
}
html.fx-13 .texture--scratch {
    bottom: -813px;
    translate: 0 var(--fx-par-scratch, 0px);
    will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
    html.fx-13 .texture--grain, html.fx-13 .texture--scratch { translate: none; }
}

/* Profil, das beim Öffnen eines tiefer liegenden Profils geschlossen wird: ohne Animation (siehe main.js) */
.fx-profile.fx-instant::details-content,
.fx-profile.fx-instant .fx-profile__photo,
.fx-profile.fx-instant .fx-profile__photo picture,
.fx-profile.fx-instant .fx-profile__photo img,
.fx-profile.fx-instant .fx-profile__head { transition: none !important; }