/* Culmeno — 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 Culmeno
   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 Culmeno-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 Culmeno-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.                                   */

.loslegen {
  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) {
  .loslegen { --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; }
}


/* ══ Alle Arten von WGs ══════════════════════════════════════════════════
   Eine waagrechte Spur, angetrieben vom senkrechten Scrollen. Der Kniff
   steckt in den Keyframes: In `translate3d` bezieht sich ein Prozentwert
   auf die eigene Randbox des Elements. `100cqw - 100%` ist deshalb genau
   der Überhang der Spur über die Bühne — egal, wie viele Karten drin
   stehen. Die Zahl muss nirgends gepflegt werden.

   cqw statt vw: `100vw` schliesst die Bildlaufleiste mit ein, die Bühne
   ist aber schmaler. Mit vw fuhr die letzte Karte um die Leistenbreite zu
   weit hinaus. Kennt ein Browser keine Container, fällt cqw auf die
   kleine Fensterbreite zurück — dasselbe Ergebnis wie vorher, nie
   schlechter.                                                            */

.arten .pin__buehne {
  container: arten-buehne / inline-size;
  display: grid;
  /* `minmax(0, 1fr)` ist hier das Entscheidende und nicht Kosmetik: Eine
     Spalte mit Standardbreite `auto` richtet sich nach ihrem breitesten
     Inhalt — und das ist die Spur mit 3125 px. Titel und Fussnote lagen
     dann in einer 3125 px breiten Spalte und wurden darin zentriert, also
     weit rechts ausserhalb der Bühne. Mit minmax(0, 1fr) ist die Spalte so
     breit wie die Bühne; die Spur ragt darüber hinaus und wird vom
     `overflow: clip` der Bühne beschnitten, so wie sie soll. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: center;
  gap: clamp(1.2rem, 3vh, 2.2rem);
  place-items: stretch;
  /* Oben mehr Platz als unten: Der Seitenkopf klebt mit 78 px Höhe über
     der Bühne und schnitt die Überschrift sonst in der Mitte durch. */
  padding-block: clamp(6rem, 14vh, 8rem) clamp(1.5rem, 5vh, 3rem);
}

.arten__kopf { max-width: 46rem; }
.arten__kopf h2 { margin-bottom: .6rem; }
.arten__kopf p  { color: var(--ink-soft); max-width: 34rem; }

.arten__fussnote {
  font-size: .82rem;
  color: var(--ink-faint);
  margin-block: 0;      /* margin-inline gehoert der .huelle — sie zentriert */
}

.arten__spur {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.8vw, 1.4rem);
  width: max-content;
  /* Genau der Rand der .huelle, damit die erste Karte unter dem
     Titel beginnt und nicht daneben. */
  padding-inline: calc((100cqw - min(1080px, 100cqw - 2.5rem)) / 2);
}

@keyframes arten-fahrt {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(100cqw - 100%), 0, 0); }
}

/* Die Karte selbst. Sie soll nach Inserat aussehen, nicht nach Kachel:
   Bild oben, drei Fakten unten, mehr braucht ein Zimmer nicht. */

.art {
  flex: 0 0 auto;
  width: clamp(15rem, 26cqw, 21rem);
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--schatten);
}

.art__bild {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}

/* Jede zweite Karte steht etwas höher und ist etwas grösser — sonst
   liest sich die Reihe wie eine Tabelle statt wie ein Stapel Inserate. */
.arten__spur .art:nth-child(even) {
  width: clamp(16rem, 29cqw, 24rem);
  transform: translateY(-1.6rem);
}
.arten__spur .art:nth-child(3n) .art__bild { aspect-ratio: 1 / 1; }

.art__text { padding: .9rem 1rem 1.1rem; }

.art__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.art__ort {
  margin: .1rem 0 .7rem;
  font-size: .84rem;
  color: var(--ink-soft);
}

.art__fakten { display: flex; flex-wrap: wrap; gap: .35rem; }

.art__fakt {
  font-size: .74rem;
  font-weight: 600;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: var(--cream-deep);
  color: var(--ink-soft);
}
.art__fakt--preis { background: rgba(217,86,59,.12); color: var(--terra); }

/* Ohne Bewegung — und ohne JavaScript, denn dann steht die Spur still —
   wird aus der Fahrt ein Raster. Sonst ragten acht Karten stumm aus dem
   Bild und die überhohe Hülle wäre 320svh Leere. */
@media (prefers-reduced-motion: reduce) {
  .arten .pin__buehne { container-type: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .arten__spur, html:not(.js) .arten__spur {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 0;
  }
  .arten__spur .art:nth-child(even) { transform: none; }
}
html:not(.js) .arten { height: auto; }
html:not(.js) .arten__spur {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  padding-inline: 0;
}
html:not(.js) .arten .pin__buehne { position: static; height: auto; }

@media (max-width: 640px) {
  .arten__spur .art:nth-child(even) { transform: translateY(-1rem); }
}

/* Die Bildquellen — getrennt vom Markup, wie bei den übrigen Fotos. */
.art__bild[data-foto="altbau"] {
  background-image: image-set(
    url('bilder/altbau-klein.webp') 1x, url('bilder/altbau.webp') 2x);
}
.art__bild[data-foto="neubau"] {
  background-image: image-set(
    url('bilder/neubau-klein.webp') 1x, url('bilder/neubau.webp') 2x);
}
.art__bild[data-foto="kompakt"] {
  background-image: image-set(
    url('bilder/kompakt-klein.webp') 1x, url('bilder/kompakt.webp') 2x);
}
.art__bild[data-foto="gross"] {
  background-image: image-set(
    url('bilder/gross-klein.webp') 1x, url('bilder/gross.webp') 2x);
}
.art__bild[data-foto="dachstock"] {
  background-image: image-set(
    url('bilder/dachstock-klein.webp') 1x, url('bilder/dachstock.webp') 2x);
}
.art__bild[data-foto="loft"] {
  background-image: image-set(
    url('bilder/loft-klein.webp') 1x, url('bilder/loft.webp') 2x);
}
.art__bild[data-foto="bauernhaus"] {
  background-image: image-set(
    url('bilder/bauernhaus-klein.webp') 1x, url('bilder/bauernhaus.webp') 2x);
}
.art__bild[data-foto="student"] {
  background-image: image-set(
    url('bilder/student-klein.webp') 1x, url('bilder/student.webp') 2x);
}