/* Tetto — die Szenen.
   ════════════════════════════════════════════════════════════════════════
   Hier stehen die Keyframes und die Räume, in denen sie stattfinden.
   Das Getriebe dazu steht in bewegung.css, der Antrieb in bewegung.js.

   Eine Regel gilt hier ausnahmslos: Der Grundzustand eines Elements —
   also das, was ohne jede Animation gilt — muss der lesbare sein. Alle
   Bewegungen starten aus einem Versatz und enden im Grundzustand. Damit
   ist jeder Ausfall harmlos: kein JavaScript, keine Scroll-Zeitachsen,
   reduzierte Bewegung — überall bleibt die Aussage sichtbar, nur der Weg
   dorthin fällt weg.                                                     */

/* ── Räumliches Grundgerüst ───────────────────────────────────────────── */

.raum {
  perspective: var(--tiefe, 1400px);
  perspective-origin: 50% 42%;
}

.koerper {
  transform-style: preserve-3d;
}

/* ═══ Szene: der Kartenstapel im Held ═══════════════════════════════════
   Drei Karten hintereinander im Raum. Beim Scrollen dreht sich der ganze
   Stapel leicht und die vorderste Karte fliegt weg — dieselbe Geste wie
   in der App, nur ohne Finger.                                           */

.stapel {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 9 / 15.5;
  margin-inline: auto;
  transform-style: preserve-3d;
}

.stapel__karte {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--schatten);
  overflow: hidden;
  transform-style: flat;                 /* Inhalt liegt flach auf der Karte */
  transform: translate3d(0, 0, calc(var(--z, 0) * -1px))
             scale(calc(1 - var(--z, 0) * 0.00055))
             translateY(calc(var(--z, 0) * 0.052px));
}

/* Die hinteren Karten sind kühler und flacher — Tiefe entsteht durch
   Kontrast, nicht durch Unschärfe (die kostet auf dem Handy zu viel). */
.stapel__karte[data-tiefe="2"] { --z: 90;  filter: saturate(.82); }
.stapel__karte[data-tiefe="3"] { --z: 180; filter: saturate(.62); }

@keyframes stapel-drehen {
  from { transform: rotateY(14deg) rotateX(7deg) translateZ(-30px); }
  to   { transform: rotateY(-9deg) rotateX(-3deg) translateZ(0); }
}

/* Bewusst KEIN Wegwischen nach rechts. Das ist die Tinder-Geste, und das
   erste Bild dieser Seite darf nicht "Dating-App" sagen — die Marke will
   ausdrücklich etwas anderes sein. Stattdessen wird die vorderste Karte
   angehoben, als nähme man sie vom Stapel, um sie genauer anzusehen. Das
   erzählt "durchschauen" statt "aussortieren". */
@keyframes karte-anheben {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(0, -5%, 86px) rotate(-1.6deg); }
}

/* Die hinteren beiden fächern dabei leicht auf — man sieht, dass da noch
   mehr WGs liegen. */
@keyframes stapel-auffaechern {
  from { transform: translate3d(0, 0, calc(var(--z) * -1px)) scale(calc(1 - var(--z) * 0.00055)) translateY(calc(var(--z) * 0.052px)); }
  to   { transform: translate3d(var(--faecher, 0), 0, calc(var(--z) * -1px)) scale(calc(1 - var(--z) * 0.00055)) translateY(calc(var(--z) * 0.052px)) rotate(var(--faecher-dreh, 0deg)); }
}

@media (prefers-reduced-motion: no-preference) {
  .stapel--bewegt { --bewegung: stapel-drehen; --von: .12; --bis: .88; }
  .stapel--bewegt .stapel__karte[data-tiefe="1"] {
    --bewegung: karte-anheben; --von: .42; --bis: .78;
  }
  .stapel--bewegt .stapel__karte[data-tiefe="2"] {
    --bewegung: stapel-auffaechern; --von: .42; --bis: .82;
    --faecher: -7%; --faecher-dreh: -2.4deg;
  }
  .stapel--bewegt .stapel__karte[data-tiefe="3"] {
    --bewegung: stapel-auffaechern; --von: .42; --bis: .86;
    --faecher: 6%; --faecher-dreh: 2deg;
  }
}

/* Karteninhalt */
.karte__bild { height: 46%; position: relative; background: linear-gradient(150deg, var(--amber-soft), var(--terra-soft)); }
.karte__bild svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte__text { padding: 1.1rem 1.2rem; }
.karte__name { font-family: var(--display); font-weight: 660; font-size: 1.18rem; letter-spacing: -.02em; }
.karte__ort { font-size: .84rem; color: var(--ink-faint); margin-top: .1rem; }
.karte__zeile { display: flex; gap: .4rem; margin-top: .9rem; flex-wrap: wrap; }
.karte__fakt { font-size: .76rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
               background: var(--cream-deep); color: var(--ink-soft); }
.karte__leute { display: flex; margin-top: 1rem; }
.karte__leute .gesicht { margin-right: -8px; border: 2px solid var(--paper); }

/* ═══ Szene: der Entscheid ══════════════════════════════════════════════
   Die gepinnte Hauptszene. Über drei Bildschirmhöhen läuft ab, was Tetto
   ausmacht: Anfrage kommt an, drei Stimmen fallen verdeckt, sie werden
   aufgedeckt, daraus wird ein geschriebener Entscheid.                   */

.entscheid { --pin-laenge: 420svh; background: var(--cream-deep); }

.entscheid__buehne {
  width: min(1080px, 100% - 2.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 860px) {
  .entscheid__buehne { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Die Schrittfolge: vier Texte am selben Ort, immer nur einer sichtbar. */
.schrittfolge { position: relative; min-height: 15rem; }

.schritt-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}
.schritt-text__marke {
  font-size: .78rem; font-weight: 660; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terra);
}
.schritt-text h3 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.schritt-text p { color: var(--ink-soft); max-width: 32ch; }

@keyframes text-durchreichen {
  0%        { opacity: 0; transform: translateY(18px); }
  14%, 82%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(-18px); }
}
/* Der erste Text steht schon da, wenn die Szene ankommt, der letzte bleibt
   stehen, bis sie sich löst — sonst ist am Anfang und am Ende der Platz leer. */
@keyframes text-erster {
  0%, 78% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translateY(-18px); }
}
@keyframes text-letzter {
  0%        { opacity: 0; transform: translateY(18px); }
  22%, 100% { opacity: 1; transform: none; }
}

/* Der Stimmtisch: drei Karten, die verdeckt liegen und sich umdrehen. */
.tisch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 2vw, 1.1rem);
  perspective: 1100px;
  perspective-origin: 50% 30%;
  transform-style: preserve-3d;
  /* Eine leicht geneigte Platte statt einer senkrechten Wand — erst
     dadurch liegen die Karten auf etwas, statt zu schweben. 9 Grad ist
     die Grenze, ab der die Beschriftung anfängt zu leiden. */
  transform: rotateX(9deg);
}

.stimmkarte {
  position: relative;
  aspect-ratio: 3 / 4.2;
  transform-style: preserve-3d;
  opacity: 1;
}

/* Innere Hülle: sie dreht sich, während die Karte selbst eintrifft.
   Zwei Animationen auf einem Element gingen nicht — also zwei Elemente. */
.stimmkarte__dreher {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.stimmkarte__seite {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem;
  box-shadow: var(--schatten-weich);
}

/* Rückseite: das Tetto-Zeichen, wie bei einem Jasskartenspiel. */
.stimmkarte__rueck {
  background:
    repeating-linear-gradient(45deg,
      color-mix(in oklab, var(--moss) 10%, var(--paper)) 0 7px,
      var(--paper) 7px 14px);
  border: 1px solid var(--line);
}
.stimmkarte__vorne {
  background: var(--paper);
  border: 1px solid var(--line);
  transform: rotateY(180deg);
}
.stimmkarte__vorne .gesicht { width: 38px; height: 38px; font-size: .9rem; }
.stimmkarte__name { font-size: .84rem; font-weight: 620; }
.stimmkarte__wert { font-size: .76rem; font-weight: 660; padding: .2rem .65rem; border-radius: 999px; }
.stimmkarte[data-wert="ja"] .stimmkarte__wert { background: var(--yes-soft); color: var(--yes); }
.stimmkarte[data-wert="nein"] .stimmkarte__wert { background: var(--no-soft); color: var(--no); }
.stimmkarte[data-wert="vielleicht"] .stimmkarte__wert { background: var(--amber-soft); color: #9A6A16; }

@keyframes karte-eintreffen {
  0%   { opacity: 0; transform: translateY(46px) rotateX(-40deg) rotateZ(var(--neigung, 0deg)); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) rotateZ(var(--neigung, 0deg)); }
}
/* Heben, drehen, ablegen. Eine reine Drehung um die Hochachse sieht aus
   wie ein Bildschirmeffekt; erst der Weg von der Platte weg und zurück
   macht daraus eine Hand, die eine Karte umdreht. */
@keyframes karte-umdrehen {
  0%   { transform: translateZ(0)    rotateY(0deg)   rotateZ(var(--neigung, 0deg)); }
  34%  { transform: translateZ(52px) rotateY(62deg)  rotateZ(var(--neigung, 0deg)); }
  66%  { transform: translateZ(52px) rotateY(128deg) rotateZ(var(--neigung, 0deg)); }
  100% { transform: translateZ(0)    rotateY(180deg) rotateZ(var(--neigung, 0deg)); }
}

/* Der geschriebene Entscheid am Ende. */
.entscheid__brief {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--schatten);
}
.entscheid__brief p { font-size: .98rem; color: var(--ink-soft); }
.entscheid__brief .kopfzeile { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }

@keyframes brief-auftauchen {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Fortschrittspunkte am Rand der gepinnten Szene */
.pin__punkte {
  position: absolute;
  left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  display: flex; gap: .45rem;
}
.pin__punkt {
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 16%, transparent);
  transition: background .3s ease, width .3s ease;
}
.pin__punkt.aktiv { background: var(--terra); width: 20px; border-radius: 3px; }

/* ── Alles Nicht-Neutrale nur mit Zeitachsen oder mit --p ─────────────── */

@media (prefers-reduced-motion: no-preference) {

  /* Die vier Texte teilen sich den Weg in vier Viertel, mit kleiner
     Überlappung, damit nie eine Lücke entsteht. */
  .schritt-text { --bewegung: text-durchreichen; }
  .schritt-text:nth-child(1) { --bewegung: text-erster;  --von: .00; --bis: .30; }
  .schritt-text:nth-child(2) { --von: .24; --bis: .56; }
  .schritt-text:nth-child(3) { --von: .50; --bis: .80; }
  .schritt-text:nth-child(4) { --bewegung: text-letzter; --von: .74; --bis: 1.0; }

  /* Die Karten treffen nacheinander ein … */
  .stimmkarte { --bewegung: karte-eintreffen; }
  .stimmkarte:nth-child(1) { --von: .06; --bis: .14; }
  .stimmkarte:nth-child(2) { --von: .12; --bis: .20; }
  .stimmkarte:nth-child(3) { --von: .18; --bis: .26; }

  /* … und drehen sich später gemeinsam um. Zwei Bewegungen am selben
     Element gehen nicht, also dreht sich die innere Hülle. */
  .stimmkarte__dreher { --bewegung: karte-umdrehen; }
  .stimmkarte:nth-child(1) .stimmkarte__dreher { --von: .52; --bis: .60; }
  .stimmkarte:nth-child(2) .stimmkarte__dreher { --von: .56; --bis: .64; }
  .stimmkarte:nth-child(3) .stimmkarte__dreher { --von: .60; --bis: .68; }

  .entscheid__brief { --bewegung: brief-auftauchen; --von: .70; --bis: 1.0; }
}

/* ── Wenn nichts sich bewegen kann ────────────────────────────────────────
   Zwei Fälle führen zum selben Bild: jemand will keine Bewegung, oder es
   gibt weder Scroll-Zeitachsen noch JavaScript. Dann wird aus der Szene
   eine schlichte Liste, in der alles gleichzeitig dasteht — die Stimmen
   liegen offen, der Brief ist da, nichts fehlt. */

@media (prefers-reduced-motion: reduce) {
  .entscheid { --pin-laenge: auto; }
  .schrittfolge { min-height: 0; display: grid; gap: 2rem; }
  .schritt-text { position: static; }
  .stimmkarte { aspect-ratio: auto; }
  .stimmkarte__dreher { position: static; transform: none; }
  .stimmkarte__rueck { display: none; }
  .stimmkarte__vorne { position: static; transform: none; padding: 1rem .6rem; }
  .entscheid__buehne { grid-template-columns: 1fr; }
  .pin__punkte { display: none; }
}

html:not(.js):not(.hat-timeline) .schrittfolge { min-height: 0; display: grid; gap: 2rem; }
html:not(.js):not(.hat-timeline) .schritt-text { position: static; }
html:not(.js):not(.hat-timeline) .stimmkarte { aspect-ratio: auto; }
html:not(.js):not(.hat-timeline) .stimmkarte__dreher { position: static; transform: none; }
html:not(.js):not(.hat-timeline) .stimmkarte__rueck { display: none; }
html:not(.js):not(.hat-timeline) .stimmkarte__vorne { position: static; transform: none; }

/* ═══ Szene: die Sparren ════════════════════════════════════════════════
   Das Tetto-Zeichen als Körper im Raum statt als flaches Bild. Jeder
   Sparren ist ein Balken aus vier Flächen — vorne, hinten und die beiden
   Schmalseiten. Mehr braucht es nicht: Ober- und Unterkante sieht man bei
   dieser Neigung nie. Beim Scrollen dreht sich das Ganze einmal um die
   Hochachse, sodass aus zwei Strichen sichtbar ein Dachstuhl wird.       */

.sparren-band {
  background: var(--ink);
  color: var(--cream);
  overflow: clip;
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.sparren-band .huelle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 820px) {
  .sparren-band .huelle { grid-template-columns: 1fr; }
}

.sparren-band h2 { max-width: 16ch; }
.sparren-band p { color: rgba(250,246,241,.66); margin-top: 1.1rem; max-width: 38ch; }

.dachstuhl {
  width: min(340px, 76vw);
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 900px;
}

.dachstuhl__korb {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.balken {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: 13%;
  margin: -6.5% 0 0 -31%;
  transform-style: preserve-3d;
}
.balken--terra { --farbe: #D9563B; --dunkel: #A8331E; --kante: #C0492F; }
.balken--moss  { --farbe: #3E5F4A; --dunkel: #24382C; --kante: #33503D; }

.balken__flaeche {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  backface-visibility: hidden;
}
/* Vorder- und Rückseite, um die halbe Balkenstärke nach vorn und hinten */
.balken__flaeche--vorn   { background: var(--farbe);  transform: translateZ(11px); }
.balken__flaeche--hinten { background: var(--dunkel); transform: translateZ(-11px) rotateY(180deg); }
/* Die beiden Schmalseiten: hochkant gedreht und auf die Enden geschoben */
.balken__flaeche--links {
  width: 22px; left: -11px;
  background: var(--kante);
  transform: rotateY(-90deg);
}
.balken__flaeche--rechts {
  width: 22px; left: auto; right: -11px;
  background: var(--kante);
  transform: rotateY(90deg);
}
/* Die Oberseite trägt das Licht — sie macht aus zwei Rechtecken einen Körper */
.balken__flaeche--oben {
  height: 22px; top: -11px;
  background: color-mix(in oklab, var(--farbe) 72%, white);
  transform: rotateX(90deg);
}

.balken--terra { transform: rotate(-53deg); }
.balken--moss  { transform: rotate(53deg); }

@keyframes dachstuhl-drehen {
  from { transform: rotateY(-38deg) rotateX(16deg); }
  to   { transform: rotateY(34deg) rotateX(-8deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .dachstuhl__korb { --bewegung: dachstuhl-drehen; --von: .05; --bis: .95; }
}
/* Ohne Bewegung steht der Dachstuhl in einer schönen Ruhelage. */
.dachstuhl__korb { transform: rotateY(-6deg) rotateX(4deg); }

/* ═══ Materialschicht ═══════════════════════════════════════════════════
   Ein feines Korn über der ganzen Seite. Als Data-URI direkt im CSS, damit
   es keine zusätzliche Anfrage gibt, und mit sehr niedriger Deckkraft:
   Papier statt Bildschirm, ohne dass man es bewusst bemerkt.             */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ═══ Übergang in den dunklen Abschnitt ═════════════════════════════════
   Die Wartelisten-Sektion schiebt sich mit runden Schultern über den
   hellen Teil davor. Endzustand ist die Ruhelage — fällt also sauber
   auf ein schlichtes Rechteck zurück.                                   */

.warteliste {
  position: relative;
  border-radius: 42px 42px 0 0;
}

@keyframes dunkel-aufziehen {
  from { border-radius: 96px 96px 0 0; transform: scale(.955); }
  to   { border-radius: 42px 42px 0 0;  transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .warteliste { --bewegung: dunkel-aufziehen; --von: .05; --bis: .42; }
}

/* ═══ Seitenwechsel ═════════════════════════════════════════════════════
   Der Weg zu Datenschutz und Impressum blendet weich über, statt zu
   blitzen. Browser ohne Unterstützung wechseln wie bisher.              */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ═══ Atmosphäre — die Wohnung, um die es geht ══════════════════════════
   Bis hierhin war die Seite Farbe und Typografie. Was gefehlt hat, ist
   der Ort: eine echte Altbauwohnung mit abgetretenem Parkett, Velos im
   Gang und Geschirr auf dem Tisch. Erst damit sieht man, wovon die Rede
   ist.                                                                  */

.atmosphaere {
  position: relative;
  overflow: clip;
  background: var(--ink);
  color: var(--cream);
}

.atmosphaere__bild {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 58%;
  opacity: .5;
}

/* Ohne diesen Verlauf steht die Schrift auf dem Bild und ist an den hellen
   Stellen unlesbar. */
.atmosphaere::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--ink) 82%, transparent) 0%,
    color-mix(in oklab, var(--ink) 48%, transparent) 38%,
    color-mix(in oklab, var(--ink) 88%, transparent) 100%);
}

.atmosphaere .huelle { position: relative; z-index: 1; }
.atmosphaere h2 { max-width: 18ch; }
.atmosphaere p { color: rgba(250,246,241,.76); max-width: 44ch; margin-top: 1.2rem; font-size: 1.06rem; }

/* Sanfte Parallaxe: das Bild wandert langsamer als die Seite. Vier
   Prozent Versatz, mehr nicht — alles darüber macht Leuten schlecht. */
@keyframes bild-wandern {
  from { transform: scale(1.14) translateY(-4%); }
  to   { transform: scale(1.14) translateY(4%); }
}
@media (prefers-reduced-motion: no-preference) {
  .atmosphaere__bild { --bewegung: bild-wandern; }
}
.atmosphaere__bild { transform: scale(1.14); }

/* ── Bilderstreifen ────────────────────────────────────────────────────── */

.streifen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1.6vw, 1rem);
  margin-top: 2.6rem;
}
@media (max-width: 720px) { .streifen { grid-template-columns: 1fr 1fr; } }

.streifen__bild {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  box-shadow: var(--schatten);
}
.streifen__bild:nth-child(2) { aspect-ratio: 3 / 4; grid-row: span 2; }

.streifen__bild figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .9rem .8rem;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(transparent, rgba(20,14,10,.75));
}

/* Die Bildquellen. Getrennt vom Markup, damit `image-set` je nach Display
   die kleine oder die grosse Fassung nimmt. */
.atmosphaere__bild {
  background-image: image-set(
    url('bilder/flur-klein.webp') 1x, url('bilder/flur.webp') 2x);
}
.streifen__bild[data-foto="wohnen"] {
  background-image: image-set(url('bilder/wohnen-klein.webp') 1x, url('bilder/wohnen.webp') 2x);
}
.streifen__bild[data-foto="zimmer"] {
  background-image: image-set(url('bilder/zimmer-klein.webp') 1x, url('bilder/zimmer.webp') 2x);
}
.streifen__bild[data-foto="balkon"] {
  background-image: image-set(url('bilder/balkon-klein.webp') 1x, url('bilder/balkon.webp') 2x);
}
.streifen__bild[data-foto="tisch"] {
  background-image: image-set(url('bilder/tisch-klein.webp') 1x, url('bilder/tisch.webp') 2x);
}

/* Das Video liegt über dem Standbild, nicht an seiner Stelle: Kann oder
   will der Browser es nicht abspielen (Datensparmodus, alter Browser,
   reduzierte Bewegung), bleibt das Bild darunter stehen und niemand sieht
   ein schwarzes Loch. Auf dem Handy wird es gar nicht erst geladen — 0,9 MB
   für eine Hintergrundbewegung sind unterwegs kein guter Tausch. */
.atmosphaere__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .atmosphaere__video { display: none; }
}