/* Tetto — das Handy mit dem laufenden Beispiel.
   ════════════════════════════════════════════════════════════════════════
   Hier läuft der ganze Ablauf in Endlosschleife ab: Zimmer entdecken,
   bewerben, Anfrage trifft in der WG ein, verdeckt abstimmen, aufdecken,
   Antwort schreiben, Chat.

   Bewusst kein Video, sondern die echten Bildschirme aus denselben Farben
   und Bausteinen wie die App. Ein KI-Video hätte eine erfundene Oberfläche
   gezeigt — hübsch, aber gelogen. Ausserdem: gestochen scharf auf jedem
   Display, ein paar Kilobyte statt Megabyte, und es veraltet nicht, wenn
   sich die App ändert.                                                   */

.buehne-telefon {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

/* Ein warmer Schein hinter dem Gerät — nimmt der Szene das Klinische. */
.buehne-telefon::before {
  content: '';
  position: absolute;
  width: min(560px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--terra) 26%, transparent),
    color-mix(in oklab, var(--amber) 12%, transparent) 45%,
    transparent 68%);
  filter: blur(10px);
}

.geraet {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 9 / 19.2;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(155deg, #2A2521, #16130F 55%, #322B25);
  box-shadow:
    0 2px 6px rgba(30,20,12,.3),
    0 30px 70px -20px rgba(30,20,12,.55),
    inset 0 0 0 1px rgba(255,255,255,.07);
  transform-style: preserve-3d;
}

/* Der Lichtstreifen auf dem Gehäuserand — ohne ihn wirkt es wie ein
   graues Rechteck, mit ihm wie ein Gegenstand. */
.geraet::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(255,255,255,.16) 0%, transparent 22%,
    transparent 78%, rgba(255,255,255,.09) 100%);
}

.geraet__schirm {
  position: relative;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

/* Statusleiste — zwei Zeilen Code, die aus einem Kasten ein Telefon machen. */
.statusleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px 3px;
  font-size: 10px;
  font-weight: 660;
  color: var(--ink);
  flex: none;
}
.statusleiste__zeichen { display: flex; gap: 3px; align-items: center; }
.statusleiste__balken { width: 3px; border-radius: 1px; background: var(--ink); }
.statusleiste__akku {
  width: 18px; height: 9px; border: 1.2px solid var(--ink);
  border-radius: 2.5px; position: relative;
}
.statusleiste__akku::before {
  content: ''; position: absolute; inset: 1.5px; right: 6px;
  background: var(--ink); border-radius: 1px;
}

/* ── Die Bildschirme ──────────────────────────────────────────────────── */

.schirme { position: relative; flex: 1; overflow: hidden; }

.schirm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 14px;
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .45s var(--feder), transform .45s var(--feder);
  pointer-events: none;
}
.schirm.ist-dran {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Der vorige Bildschirm geht nach links hinaus, nicht nach rechts zurück —
   sonst wirkt es wie ein Fehler statt wie ein Weiterblättern. */
.schirm.war-dran { opacity: 0; transform: translateX(-22px); }

.schirm__kopf {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 9px; flex: none;
}
.schirm__titel { font-family: var(--display); font-weight: 680; font-size: 14px; letter-spacing: -.02em; }
.schirm__marke {
  margin-left: auto; font-size: 9px; font-weight: 680;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 3px 7px; border-radius: 999px;
}
.marke--suchen { background: var(--terra-soft); color: var(--terra-deep); }
.marke--wg { background: var(--moss-soft); color: var(--moss); }

/* ── Bildschirm 1: entdecken ──────────────────────────────────────────── */

.mini-stapel { position: relative; flex: 1; transform-style: preserve-3d; }

.mini-karte {
  position: absolute; inset: 0;
  border-radius: 18px; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--schatten);
}
.mini-karte[data-hinten="1"] { transform: translateY(7px) scale(.955); opacity: .75; }
.mini-karte[data-hinten="2"] { transform: translateY(13px) scale(.912); opacity: .5; }

.mini-karte__bild {
  height: 52%; background: linear-gradient(150deg, var(--amber-soft), var(--terra-soft));
  background-size: cover; background-position: center;
}
.mini-karte__text { padding: 9px 11px; }
.mini-karte__name { font-family: var(--display); font-weight: 680; font-size: 13px; letter-spacing: -.02em; }
.mini-karte__ort { font-size: 10px; color: var(--ink-faint); margin-top: 1px; }
.mini-fakten { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.mini-fakt {
  font-size: 9px; font-weight: 640; padding: 2.5px 6px; border-radius: 999px;
  background: var(--cream-deep); color: var(--ink-soft);
}

/* Die Geste: die Karte hebt sich an und legt sich zurück. Kein Wegwischen. */
@keyframes mini-anheben {
  0%, 55%  { transform: none; box-shadow: var(--schatten); }
  75%      { transform: translateY(-10px) scale(1.03); box-shadow: var(--schatten-lift, 0 18px 40px -12px rgba(56,38,26,.4)); }
  100%     { transform: none; box-shadow: var(--schatten); }
}
@media (prefers-reduced-motion: no-preference) {
  .schirm.ist-dran .mini-karte[data-hinten="0"] { animation: mini-anheben 2.6s var(--feder); }
}

.mini-knoepfe { display: flex; gap: 7px; margin-top: 10px; flex: none; }
.mini-knopf {
  flex: 1; text-align: center; padding: 8px; border-radius: 12px;
  font-size: 11px; font-weight: 660;
}
.mini-knopf--weiter { background: var(--cream-deep); color: var(--ink-soft); }
.mini-knopf--los { background: var(--terra); color: #fff; }

/* ── Bildschirm 2: bewerben ───────────────────────────────────────────── */

.mini-feld {
  flex: 1; border-radius: 14px; border: 1px solid var(--line);
  background: var(--paper); padding: 10px; font-size: 11px;
  line-height: 1.55; color: var(--ink-soft);
}
.tippen::after {
  content: '';
  display: inline-block; width: 1.5px; height: 1em;
  background: var(--terra); margin-left: 1px;
  vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  .tippen::after { animation: blinken 1s steps(2) infinite; }
}
@keyframes blinken { 50% { opacity: 0; } }

/* ── Bildschirm 3: Posteingang ────────────────────────────────────────── */

.mini-eingang { display: grid; gap: 7px; flex: 1; align-content: start; }

.mini-anfrage {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 14px;
  background: var(--paper); border: 1px solid var(--line);
}
.mini-anfrage--neu { border-color: color-mix(in oklab, var(--terra) 40%, var(--line)); }
@media (prefers-reduced-motion: no-preference) {
  .schirm.ist-dran .mini-anfrage--neu { animation: anfrage-rein .6s var(--feder) .25s both; }
}
@keyframes anfrage-rein {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.mini-anfrage__name { font-size: 11.5px; font-weight: 660; }
.mini-anfrage__zeile { font-size: 9.5px; color: var(--ink-faint); margin-top: 1px; }
.mini-punkt {
  width: 6px; height: 6px; border-radius: 50%; background: var(--terra);
  margin-left: auto; flex: none;
}

/* ── Bildschirm 4 + 5: abstimmen und aufdecken ────────────────────────── */

.mini-tisch {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  perspective: 700px; flex: none; margin-top: 4px;
}
.mini-stimme { aspect-ratio: 3 / 4; position: relative; transform-style: preserve-3d;
               transition: transform .6s var(--feder); }
.mini-stimme__seite {
  position: absolute; inset: 0; border-radius: 11px;
  backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; box-shadow: var(--schatten-weich);
}
.mini-stimme__rueck {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--moss) 11%, var(--paper)) 0 5px, var(--paper) 5px 10px);
  border: 1px solid var(--line);
}
.mini-stimme__vorne {
  background: var(--paper); border: 1px solid var(--line); transform: rotateY(180deg);
}
.mini-stimme__name { font-size: 8.5px; font-weight: 640; }
.mini-stimme__wert { font-size: 8px; font-weight: 700; padding: 1.5px 5px; border-radius: 999px; }
.wert--ja { background: var(--yes-soft); color: var(--yes); }
.wert--vielleicht { background: var(--amber-soft); color: #8A5E12; }

/* Aufgedeckt: alle drei drehen sich gestaffelt. */
.schirm[data-aufgedeckt] .mini-stimme { transform: rotateY(180deg); }
.schirm[data-aufgedeckt] .mini-stimme:nth-child(2) { transition-delay: .12s; }
.schirm[data-aufgedeckt] .mini-stimme:nth-child(3) { transition-delay: .24s; }

.mini-zaehler {
  margin-top: 9px; font-size: 10px; color: var(--ink-soft); text-align: center;
}
.mini-fortschritt {
  height: 4px; border-radius: 2px; background: var(--cream-deep);
  margin-top: 6px; overflow: hidden;
}
.mini-fortschritt span {
  display: block; height: 100%; border-radius: 2px; background: var(--terra);
  width: 0; transition: width .8s var(--feder);
}
.schirm.ist-dran .mini-fortschritt span { width: var(--anteil, 66%); }

.mini-hinweis {
  margin-top: auto; font-size: 9.5px; line-height: 1.5; color: var(--ink-faint);
  background: var(--cream-deep); border-radius: 11px; padding: 7px 9px;
}

/* ── Bildschirm 6 + 7: Antwort und Chat ───────────────────────────────── */

.mini-blasen { display: grid; gap: 7px; flex: 1; align-content: end; }

.mini-blase {
  max-width: 82%; padding: 8px 10px; border-radius: 14px;
  font-size: 10.5px; line-height: 1.5;
}
.mini-blase--wir {
  background: var(--terra); color: #fff; justify-self: end; border-bottom-right-radius: 5px;
}
.mini-blase--sie {
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); justify-self: start; border-bottom-left-radius: 5px;
}
@media (prefers-reduced-motion: no-preference) {
  .schirm.ist-dran .mini-blase { animation: blase-rein .5s var(--feder) both; }
  .schirm.ist-dran .mini-blase:nth-child(2) { animation-delay: .5s; }
  .schirm.ist-dran .mini-blase:nth-child(3) { animation-delay: 1.1s; }
}
@keyframes blase-rein {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Die Fortschrittsanzeige unter dem Gerät ──────────────────────────── */

.telefon__schritte {
  display: flex; gap: 5px; justify-content: center; margin-top: 1.6rem;
}
.telefon__schritt {
  height: 4px; width: 22px; border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 14%, transparent);
  transition: background .3s ease, width .3s var(--feder);
}
.telefon__schritt.aktiv { background: var(--terra); width: 34px; }

.telefon__untertitel {
  margin-top: .9rem; text-align: center; font-size: .92rem;
  color: var(--ink-soft); min-height: 2.6em;
  transition: opacity .3s ease;
}

/* Wer keine Bewegung will, bekommt eine Liste statt eines Films: alle
   Bildschirme untereinander, nichts läuft von selbst. */
@media (prefers-reduced-motion: reduce) {
  /* Auch die Uebergaenge: `getAnimations()` zaehlt sie mit, und eine
     Karte, die sich beim Klassenwechsel noch weich umdreht, ist genau
     die Bewegung, die hier niemand will. */
  .schirm, .mini-stimme, .mini-fortschritt span { transition: none; }
  .geraet { aspect-ratio: auto; }
  .schirme { height: auto; }
  /* `opacity: 1` ist hier keine Kosmetik, sondern das Ganze: Der
     Grundzustand von .schirm ist opacity 0, weil im laufenden Betrieb
     immer nur einer sichtbar sein soll. Ohne diese Zeile wäre das Gerät
     für alle, die reduzierte Bewegung eingestellt haben, komplett leer —
     die Bildschirme lägen zwar untereinander, aber unsichtbar. Dasselbe
     gilt für `.ist-dran`/`.war-dran`: Die vergibt das Skript hier gar
     nicht mehr, weil es in diesem Fall früh aussteigt. */
  .schirm,
  .schirm.war-dran {
    position: static;
    opacity: 1;
    transform: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem;
  }
  .schirm .mini-stapel { min-height: 200px; }
  .mini-stimme { transform: rotateY(180deg); }
  .telefon__schritte { display: none; }
}

/* ── Die Bilder im Gerät ───────────────────────────────────────────────────
   `image-set` liefert dem Handy die kleine Fassung und dem scharfen Display
   die grosse. Beide sind WebP und zusammen unter 60 KB — die Rohdateien
   waren 3,5 MB je Stück. */

.mini-karte__bild[data-bild="kuechentisch"] {
  background-image: image-set(
    url('bilder/kuechentisch-klein.webp') 1x,
    url('bilder/kuechentisch.webp') 2x);
}
.mini-karte__bild[data-bild="wohnen"] {
  background-image: image-set(
    url('bilder/wohnen-klein.webp') 1x, url('bilder/wohnen.webp') 2x);
}
.mini-karte__bild[data-bild="zimmer"] {
  background-image: image-set(
    url('bilder/zimmer-klein.webp') 1x, url('bilder/zimmer.webp') 2x);
}

/* ── Die Neigung beim Scrollen ─────────────────────────────────────────────
   Das Gerät steht nicht starr da, sondern dreht sich beim Scrollen leicht
   aus der Achse — als läge es auf einem Tisch, an dem man vorbeigeht.
   Sechs Grad, mehr nicht: Alles darüber verzerrt den Bildschirminhalt so
   stark, dass man ihn nicht mehr lesen kann, und darum geht es hier. */

@keyframes geraet-neigen {
  from { transform: perspective(1600px) rotateY(9deg) rotateX(4deg) translateZ(-30px); }
  to   { transform: perspective(1600px) rotateY(-6deg) rotateX(-2deg) translateZ(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .geraet { --bewegung: geraet-neigen; --von: .05; --bis: .95; }
}

/* Ruhelage für alle, die keine Bewegung wollen — leicht angeschnitten,
   damit es auch stehend nach Gegenstand aussieht und nicht nach Rechteck. */
.geraet { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); }