/* ══════════════════════════════════════════════════════════
   90sTV, kurze Startseite
   Nur das, was die lange Seite nicht schon kann: ein Raster für
   Bildschirmfotos und etwas mehr Luft um die Überschriften. Alles
   andere kommt aus styles.css, damit beide Seiten dieselbe Sprache
   sprechen und eine Farbänderung dort auch hier ankommt.
   ══════════════════════════════════════════════════════════ */

/* Ein Thema atmet. Die lange Seite setzt ihre Abschnitte dichter,
   weil dort mehr zu lesen ist; hier trägt jeder Abschnitt einen
   Gedanken, und der braucht Rand. */
.topic {
  padding-block: clamp(64px, 11vw, 132px);
}

.topic__head {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
}

.topic__head .h2 {
  margin-bottom: 14px;
}

.topic__head .sub {
  margin-inline: auto;
}

/* Die Bildschirmfotos. Vier nebeneinander wären auf einem Telefon
   vier Briefmarken, also richtet sich die Spaltenzahl nach dem
   Platz und nicht nach der Anzahl. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(34px, 6vw, 58px);
  justify-items: center;
  align-items: start;
}

.shots--two {
  max-width: 760px;
  margin-inline: auto;
}

.shot {
  display: block;
  width: 100%;
  max-width: 320px;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  /* Zwei Schatten: einer, der das Gerät vom Grund abhebt, und ein
     farbiger Schimmer, der dieselbe Palette aufnimmt wie der Rest
     der Seite. */
  box-shadow:
    0 30px 60px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 18px 70px -30px var(--indigo);
}

.shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: .86rem;
  color: var(--ink-faint);
}

/* Der Schlussabschnitt: ein Satz, ein Knopf, Schluss. */
.closing {
  text-align: center;
}

.closing .hero__cta {
  justify-content: center;
  margin-top: 26px;
}

.closing__platforms {
  margin-top: 18px;
  color: var(--ink-dim);
  font-size: .95rem;
}

/* Ein Hinweisstreifen für die Vorschau, damit niemand diese Seite
   für die veröffentlichte hält. Wird beim Umstellen gelöscht. */
.preview-note {
  background: var(--amber);
  color: #1a1200;
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 16px;
}

.preview-note a {
  color: inherit;
}

/* ── Breite Geräte: Mac, Apple TV, iPad im Querformat ───────── */
.shots--wide {
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

@media (max-width: 560px) {
  .shots--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shot--wide {
  max-width: none;
}

.shot--wide img {
  border-radius: clamp(10px, 1.4vw, 16px);
}

.shot--full {
  grid-column: 1 / -1;
  max-width: 980px;
  margin-inline: auto;
}

/* Die Telefonbilder am Schluss sind Beiwerk und dürfen kleiner sein
   als die Geräte, um die es eigentlich geht. */
.shots--phones .shot {
  max-width: 240px;
}

/* Die häufigsten Einwände sitzen als echte Zwischenüberschriften im
   sichtbaren Inhalt. So sind sie für Menschen und Maschinen gleich lesbar. */
.faq--centered {
  margin: clamp(34px, 6vw, 58px) auto 0;
}

.faq__item summary h3 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}