/* assets/css/studio-bilder.css — vier Bildschirmfotos aus dem Gastablauf.
   Markup: _sections/studio-bilder.php.

   ZWEI SPALTEN, NICHT VIER: die Bilder sind 2:1. Vier nebeneinander
   waeren auf einem 1200er Schirm je 280 px breit - dort ist von einer
   Bedienoberflaeche nichts mehr zu erkennen, und ein Bild, auf dem man
   nichts erkennt, ist schlimmer als keins. Zwei Spalten geben jedem Bild
   rund 580 px.

   FESTES SEITENVERHAELTNIS am Bild (aspect-ratio statt nur width/height
   im Markup): die Bilder werden verzoegert geladen, und ohne reservierte
   Hoehe springt die Seite beim Nachladen. */

.studio-bilder .eyebrow { color: var(--accent); }

.bilder-reihe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 30px;
}

.bilder-karte {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.bilder-karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 640;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.bilder-karte figcaption {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 20px 18px;
}
.bilder-karte figcaption b {
  font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
}
.bilder-karte figcaption span {
  font-size: 14px; line-height: 1.6; color: var(--ink-muted);
}

/* Eine Karte ueber beide Spalten.
   Der Vorlagen-Editor ist die dichteste Ansicht im ganzen Programm -
   Werkzeugspalte, Buehne, Ebenenliste nebeneinander. Auf 580 px ist davon
   nichts mehr zu erkennen, auf der vollen Breite (~1180 px) schon. Eine
   Karte, auf der man nichts erkennt, ist schlimmer als keine. */
.bilder-karte--breit { grid-column: 1 / -1; }

.bilder-hinweis {
  margin: 22px 0 0;
  font-size: 13px; line-height: 1.6; color: var(--ink-faint);
}

@media (max-width: 760px) {
  .bilder-reihe { grid-template-columns: 1fr; gap: 14px; }
}

/* Die Schrittnummer in "So laeuft dein Abend" (_sections/ablauf.php).
   Sie steht in derselben Bildunterschrift wie Titel und Text, damit die
   Karte EIN Block bleibt - eine Nummer neben der Karte waere auf dem
   Telefon vom Text getrennt, genau dort, wo die Reihenfolge am meisten
   zaehlt. */
.ablauf-karte figcaption { position: relative; padding-top: 14px; }
.ablauf-nr {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; color: var(--accent);
}
.ablauf-karte figcaption b { margin-top: 2px; }