/* Bildstrecken der Geschichte-Seite.
   Vier Gruppen mit unterschiedlichem Rhythmus statt einer gleichfoermigen
   Galerie: ein Paar, ein einzelnes Fundstueck auf dunklem Grund, ein
   dichtes Raster und ein ruhiger Abschluss. Jedes Bild kommt genau
   einmal vor.

   Die Gruppen brechen aus der Textspalte aus - der Text bleibt schmal
   und lesbar, die Bilder bekommen Luft. */

/* --- Ausbruch aus der Textspalte ------------------------------------ */
/* Der Ausbruch laeuft ueber `margin-left`, nicht ueber `transform`.
   Mit `translateX(-50%)` haengt die Zentrierung an einer Eigenschaft,
   die sich jede spaetere Animation greift: der Auftritt beim Scrollen
   setzt `transform` und schob die ganze Strecke um eine halbe Breite
   nach rechts aus dem Fenster. Ueber den Rand kann das nicht passieren. */
.gs-strecke {
  --strecke-b: min(1080px, calc(100vw - 8vw));
  width: var(--strecke-b);
  margin-left: calc(50% - var(--strecke-b) / 2);
  margin-top: clamp(26px, 3.5vw, 40px);
  margin-bottom: clamp(30px, 4vw, 46px);
}

/* Kein waagrechter Balken, egal wie schmal das Fenster wird. Steht hier,
   weil der Ausbruch oben ihn ausloest — die Regel gehoert zur Technik
   dieser Datei, nicht zur Seite. */
html {
  overflow-x: clip;
}

.gs-strecke figure {
  margin: 0;
}

.gs-strecke img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(24, 24, 22, 0.06);
}

.gs-strecke figcaption {
  margin-top: 9px;
  color: var(--grau);
  font-size: 12.5px;
  line-height: 1.55;
}

.gs-strecke figcaption b {
  display: block;
  margin-bottom: 2px;
  color: var(--anthracite);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Gruppe 1: Die Spur --------------------------------------------- */
/* Ein breites und ein hohes Bild nebeneinander. Die Inschrift traegt die
   Gruppe, der Briefkasten setzt den Punkt dahinter.

   Beide Gruppen stehen auf `align-items: end`. Mit `start` endete die
   kuerzere Spalte weit oberhalb der anderen und hinterliess ein Loch
   von rund 200px unter ihrem Bildtext. Jetzt schliessen beide Spalten
   auf derselben Linie ab, der Versatz sitzt oben und liest sich als
   gesetzt. Die Seitenverhaeltnisse sind zusaetzlich aneinander
   angeglichen, damit der Versatz ein Versatz bleibt und keine Stufe
   wird. */
.gs-paar {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: end;
}

.gs-paar .gs-breit img {
  aspect-ratio: 3 / 2;
}

.gs-paar .gs-hoch img {
  aspect-ratio: 4 / 5;
}

/* --- Gruppe 2: Das Zeugnis ------------------------------------------ */
/* Die Postkarte liegt als Fundstueck auf dunklem Grund. Bewusst der
   einzige dunkle Block im Textteil - er markiert den Beleg. */
.gs-zeugnis {
  padding: clamp(30px, 5vw, 58px) clamp(20px, 4vw, 56px);
  background: var(--anthracite);
}

.gs-zeugnis-innen {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(22px, 3.5vw, 46px);
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.gs-zeugnis figure img {
  aspect-ratio: 1.47 / 1;
  object-fit: contain;
  background: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.gs-zeugnis-text p.kicker,
.gs-zeugnis-text .gs-marke {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.gs-zeugnis-text h3 {
  margin: 0 0 12px !important;
  color: var(--cream);
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.015em;
}

.gs-zeugnis-text p {
  margin: 0 0 12px !important;
  color: var(--cream-soft);
  font-size: 14px;
  line-height: 1.7;
}

/* Der Wortlaut der Karte, abgesetzt wie ein Zitat. */
.gs-abschrift {
  margin: 0 0 14px !important;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  color: var(--cream) !important;
  font-size: 13.5px !important;
  font-style: italic;
}

/* Die offene Hausnummer wird benannt, nicht verschwiegen. */
.gs-widerspruch {
  display: block;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px dashed var(--gold);
  color: var(--gold-light) !important;
  font-size: 12.5px !important;
  line-height: 1.6;
}

/* --- Gruppe 3: Was bleibt ------------------------------------------- */
/* Vier Aufnahmen des Bestands. Die Reihenhoehe ist fest, das Schnitzwerk
   greift ueber zwei Reihen und zwei Spalten - so entsteht Bewegung ohne
   Masonry-Skript. */
.gs-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 168px;
  gap: clamp(8px, 1.1vw, 14px);
}

.gs-raster figure {
  position: relative;
  overflow: hidden;
}

.gs-raster img {
  aspect-ratio: auto;
}

.gs-raster .gs-gross {
  grid-column: span 2;
  grid-row: span 2;
}

.gs-raster .gs-hoch2 {
  grid-row: span 2;
}

.gs-raster .gs-breit2 {
  grid-column: span 2;
}

/* Die Bildtexte stehen dauerhaft. Vorher erschienen sie erst beim
   Ueberfahren: mit der Maus ein huebscher Effekt, per Tastatur gar
   nicht erreichbar (weder `figure` noch `img` nehmen den Fokus, also
   greift `:focus-within` nie), und ohne Maus blieben vier Bilder ohne
   jede Erklaerung stehen. Der Verlauf ist dafuer kraeftig genug, dass
   Cremeweiss auf jedem der vier Motive traegt. */
.gs-raster figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 34px 13px 11px;
  background: linear-gradient(
    to top,
    rgba(24, 24, 22, 0.92) 0%,
    rgba(24, 24, 22, 0.74) 52%,
    rgba(24, 24, 22, 0) 100%
  );
  color: var(--cream);
  font-size: 11.5px;
  line-height: 1.4;
}

/* --- Gruppe 4: Heute ------------------------------------------------ */
/* Der Bruch: Messing gegen Biedermeier. Die neue Treppe, daneben der
   Blick ueber das alte Gelaender auf die Stadt - mit Baukran. */
.gs-heute {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(12px, 1.8vw, 22px);
  align-items: end;
}

.gs-heute .gs-hoch img {
  aspect-ratio: 3 / 4;
}

.gs-heute .gs-breit img {
  aspect-ratio: 4 / 3;
}

/* --- Schmale Fenster ------------------------------------------------ */
@media (max-width: 860px) {
  .gs-raster {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 148px;
  }
  .gs-raster .gs-gross {
    grid-column: span 2;
  }
  .gs-zeugnis-innen {
    grid-template-columns: 1fr;
  }
  .gs-heute {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .gs-paar {
    grid-template-columns: 1fr;
  }
  .gs-paar .gs-hoch img {
    aspect-ratio: 3 / 2;
  }
  .gs-raster {
    grid-auto-rows: 116px;
  }
}