/* ═══════════════════════════════════════════════════════════════════════════
   Demo auf der Startseite

   Ein Handy, das sich selbst bedient. Die Zustände steuert demo.js über
   data-state am Wurzelelement der Demo:

     idle     leeres Formular
     name     der Name tippt sich
     message  die Nachricht tippt sich
     photo    die Fotos erscheinen
     submit   der Knopf wird gedrückt
     feed     die Liste fährt herauf, der neue Beitrag steht oben
     done     Endzustand

   "done" ist bewusst auch der Ausgangszustand im HTML: Ohne JavaScript oder
   bei „Bewegung reduzieren" bleibt genau dieses fertige Bild stehen.
   ═══════════════════════════════════════════════════════════════════════════ */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* ── Das Gerät ─────────────────────────────────────────────────────────────── */

.demo-stage { display: flex; justify-content: center; }

.demo-phone {
  position: relative;
  width: 100%;
  max-width: 17rem;
  /* Etwas gedrungener als ein echtes Handy: Das Formular hat nur vier Zeilen,
     bei 10/19 bliebe über dem Knopf ein leeres Loch stehen. */
  aspect-ratio: 10 / 17;
  padding: .625rem;
  border: 1px solid var(--rule);
  border-radius: 2.25rem;
  background: var(--paper-raised);
  box-shadow:
    inset 0 0 0 1px var(--paper),
    0 30px 60px -30px rgba(0, 0, 0, .55);
}

/* Der Lautsprecherschlitz sitzt auf dem Rahmen, nicht im Bild. */
.demo-phone::before {
  content: '';
  position: absolute;
  top: .25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.75rem;
  height: .1875rem;
  border-radius: 1rem;
  background: var(--rule);
  opacity: .7;
}

.demo-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 1.75rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.demo-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  padding: .875rem .9375rem .625rem;
  border-bottom: 1px solid var(--hairline);
}
.demo-bar-title {
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.demo-bar-sub {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--ink);
}

/* ── Die beiden Ansichten auf ihrer Schiene ────────────────────────────────── */

.demo-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.demo-track {
  height: 200%;
  display: grid;
  grid-template-rows: 50% 50%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.demo-view {
  min-height: 0;
  padding: .875rem .9375rem;
  display: flex;
  flex-direction: column;
}
/* Nach dem Absenden fährt die Liste herauf. */
.demo[data-state="feed"] .demo-track,
.demo[data-state="done"] .demo-track { transform: translateY(-50%); }

/* ── Formular ──────────────────────────────────────────────────────────────── */

.demo-field-label {
  font-size: .5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .1875rem;
}
.demo-field-label ~ .demo-field-label { margin-top: .625rem; }

.demo-input {
  position: relative;
  padding: .375rem .5rem;
  border: 1px solid var(--hairline);
  background: var(--paper-raised);
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-word;
}
/* Das Nachrichtenfeld füllt den Rest — so bleibt zwischen Fotoreihe und Knopf
   kein toter Raum, egal wie hoch das Gerät gerade gerechnet wird. */
.demo-input-tall { flex: 1 1 auto; min-height: 3.25rem; }

/* Der Strich blinkt nur, solange in dieses Feld getippt wird. */
.demo-caret {
  display: none;
  width: 1px;
  height: .8125rem;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: demo-blink 1s steps(2, start) infinite;
}
@keyframes demo-blink { 50% { opacity: 0; } }

.demo[data-state="name"] .demo-input:nth-of-type(1) .demo-caret,
.demo[data-state="message"] .demo-input:nth-of-type(2) .demo-caret { display: inline-block; }

.demo-thumbs {
  display: flex;
  gap: .3125rem;
  margin-top: .0625rem;
}
/* Die Kacheln im Formular sind hochgeladene Bilder — quadratisch beschnitten,
   wie eine Foto-App sie zeigen würde. */
.demo-thumb {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--hairline);
  opacity: 0;
  transform: scale(.85);
  transition: opacity .4s ease, transform .4s ease;
}

/* Der Platzhalter zum Nachlegen bleibt immer sichtbar — er gehört zum
   Formular, nicht zu den hochgeladenen Bildern. */
.demo-thumb-add {
  opacity: 1;
  transform: none;
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  color: var(--ink-muted);
}

.demo[data-state="photo"] .demo-thumbs .demo-thumb,
.demo[data-state="submit"] .demo-thumbs .demo-thumb,
.demo[data-state="feed"] .demo-thumbs .demo-thumb,
.demo[data-state="done"] .demo-thumbs .demo-thumb {
  opacity: 1;
  transform: scale(1);
}
.demo-thumbs .demo-thumb:nth-child(2) { transition-delay: .14s; }

.demo-submit {
  /* Nicht auto: Das Nachrichtenfeld nimmt den Überschuss schon auf, sonst
     klebte der Knopf an der Fotoreihe. */
  margin-top: .75rem;
  padding: .5rem;
  text-align: center;
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  transition: transform .12s ease, filter .12s ease;
}
.demo[data-state="submit"] .demo-submit { transform: scale(.94); filter: brightness(.85); }

/* ── Liste ─────────────────────────────────────────────────────────────────── */

.demo-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 0;
  overflow: hidden;
  /* Unten ausblenden statt hart abschneiden: Das liest sich als „da kommt
     noch mehr" und sieht nicht nach einem Fehler aus. */
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.demo-entry {
  /* Ohne das quetscht der Flex-Container die Beiträge zusammen, sobald sie
     zusammen höher sind als das Display — der erste blieb dann als 19 Pixel
     hohe Zeile übrig. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--hairline);
}
.demo-entry:last-child { border-bottom: 0; padding-bottom: 0; }

.demo-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.demo-entry-name {
  font-family: var(--font-display);
  font-size: .8125rem;
  line-height: 1.1;
  color: var(--ink);
}
.demo-entry-when {
  font-size: .4375rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.demo-entry-text {
  font-size: .625rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* In der Liste dürfen die Bilder größer sein als im Formular — dort sind sie
   Beleg für „hochgeladen", hier sind sie der eigentliche Inhalt. */
.demo-entry-photos {
  display: flex;
  gap: .25rem;
  margin-top: .25rem;
}
.demo-entry-photos img {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--hairline);
}

/* Der neue Beitrag klappt auf, sobald die Liste heraufgefahren ist. */
.demo-entry-new {
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  border-bottom-color: transparent;
  overflow: hidden;
  transition: max-height .5s ease .15s, opacity .5s ease .15s, padding-bottom .5s ease .15s;
}
.demo[data-state="feed"] .demo-entry-new,
.demo[data-state="done"] .demo-entry-new {
  max-height: 11rem;
  opacity: 1;
  padding-bottom: .75rem;
  border-bottom-color: var(--hairline);
}

/* ── Hinweis unter der Demo ────────────────────────────────────────────────── */

.demo-note {
  margin-top: 2.5rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 42rem;
}

/* ── Schritte daneben ──────────────────────────────────────────────────────── */

.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: demo;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.demo-steps li {
  counter-increment: demo;
  position: relative;
  padding-left: 3rem;
  opacity: .4;
  transition: opacity .4s ease;
}
/* Als Pseudo-Element in absoluter Lage — nicht als Rasterzelle. Sonst rutscht
   der Fließtext in die schmale Zahlenspalte und bricht wortweise um. */
.demo-steps li::before {
  content: counter(demo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .125rem;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--ink-muted);
  transition: color .4s ease;
}
.demo-steps li.is-on { opacity: 1; }
.demo-steps li.is-on::before { color: var(--accent); }

.demo-step-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--ink);
}
.demo-step-text {
  display: block;
  margin-top: .25rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30rem;
}

/* ── Kleinere Bildschirme ──────────────────────────────────────────────────── */

@media (max-width: 52rem) {
  .demo { grid-template-columns: 1fr; gap: 2.75rem; justify-items: center; }
  .demo-steps { width: 100%; max-width: 30rem; }
}

/* ── Bewegung reduzieren ───────────────────────────────────────────────────────
   Wer das eingestellt hat, bekommt den fertigen Zustand ohne jede Bewegung.
   demo.js fragt dieselbe Einstellung ab und startet die Schleife gar nicht. */

@media (prefers-reduced-motion: reduce) {
  .demo-thumb,
  .demo-entry-new,
  .demo-submit,
  .demo-track,
  .demo-steps li,
  .demo-steps li::before { transition: none; }
  .demo-caret { display: none !important; animation: none; }
  .demo-steps li { opacity: 1; }
}