/* Projektseite Metronaut (metronaut/index.html). Wird nach style.css und
   typography.css eingebunden (weiße Seite, Fließtextschrift wie auf der
   Projekte-Seite). Eigene Titel-/Navi-Schrift: Jost.
   Alle Maße im Kopfbereich sind Anteile der Seitenbreite (cqw): Die Seite ist wie
   auf Projekte/Transrapid min(1120px, 34vw + 460px) breit und auf dem Handy im
   Hochformat randlos; der Kopf skaliert proportional mit. */

@font-face { font-family: "Jost"; src: url("../fonts/Jost-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/Jost-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --metro-red: #f80000;   /* Auszeichnungsfarbe */
  --metro-bar: #d00000;   /* Balken im Kopf */
}

/* Das M und der Balken ragen über die Seitenbreite hinaus (in den Rand bzw. aus
   dem Fenster); seitlich abschneiden, ohne einen Scroll-Container zu erzeugen. */
html:has(.metro-head),
html:has(.metro-head) body {
  overflow-x: clip;
}

.metro-page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem 0 8rem;
  container-type: inline-size;
}

/* --- Kopfbereich --------------------------------------------------------------
   Gemeinsame Mittellinie (c = 30,42 cqw): Mitte der rechten Versalie (Fuß) des
   linken M-Beins = Mitte des Balkens = Mitte des Weißraums zwischen der Grundlinie
   von METRONAUT und der Oberkante von MOSKAU 2010. Das M ist so verschoben, dass
   sein Fuß-Ende (Schnittlinie bei 28,5 % der M-Breite) genau an der linken
   Seitenkante liegt. */
.metro-head {
  position: relative;
  height: 41.55cqw;
}

.metro-m {
  position: absolute;
  left: -10.69cqw;
  top: 5.51cqw;
  width: 37.5cqw;
  height: auto;
  overflow: visible;
}

.metro-bar {
  position: absolute;
  left: 89cqw;
  top: 29.95cqw;
  width: 100vw;
  height: 0.95cqw;
  background: var(--metro-bar);
}

/* METRONAUT als Bild (metro-titel.svg), auf die frühere Textbreite skaliert
   (55,1 cqw); die Unterkante sitzt auf der bisherigen Grundlinie. */
.metro-title {
  position: absolute;
  left: 29.76cqw;
  top: 22.46cqw;
  width: 55.1cqw;
  margin: 0;
  line-height: 0;
}

.metro-title img {
  display: block;
  width: 100%;
  height: auto;
}

.metro-sub {
  position: absolute;
  left: 29.76cqw;
  top: 31.33cqw;
  margin: 0;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 400;
  font-size: 5cqw;
  line-height: 1;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: #000;
}

/* --- Navigation ------------------------------------------------------------- */

.metro-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5em 1.4em;
  margin: 0 15cqw 0 8cqw;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.792rem, 2.2cqw, 1.54rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metro-nav a {
  color: #000;
  text-decoration: none;
}

.metro-nav a:hover,
.metro-nav a:focus-visible {
  color: var(--metro-red);
}

/* --- Inhalt ----------------------------------------------------------------- */

/* Textspalte: 8 % der Seitenbreite Einrückung links und rechts */
.metro-text {
  padding: 0 8cqw;
  margin-top: clamp(2.8rem, 7cqw, 5rem);
  scroll-margin-top: 1.5rem;
}

.metro-text .project-text {
  margin: 0 0 1.2em;
}

.metro-text .project-text:last-child {
  margin-bottom: 0;
}

.metro-map {
  margin: clamp(2.8rem, 6cqw, 4.5rem) 0 clamp(2.8rem, 6cqw, 4.5rem);
}

.metro-map img {
  display: block;
  width: 100%;
  height: auto;
}

.metro-section-title {
  margin: 0;
  padding: 0 8cqw;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.92rem, 5.28cqw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
  scroll-margin-top: 1.5rem;
}

/* Rote Balken links (bis 20px vor dem Titel, vom Fensterrand) und rechts (ab 20px
   nach dem Titel, bis zum Fensterrand), unten bündig mit der Grundlinie der
   Versalien. Bei line-height 1,1 und Jost (Ober-/Unterlänge 1,07/0,375 em) liegt
   die Grundlinie 0,2025 em über der Unterkante der Zeile. */
.metro-section-text {
  position: relative;
  display: inline-block;
}

.metro-section-text::before,
.metro-section-text::after {
  content: "";
  position: absolute;
  bottom: 0.2025em;
  width: 100vw;
  height: 0.95cqw;
  background: var(--metro-red);
}

.metro-section-text::before {
  right: 100%;
  margin-right: 20px;
}

.metro-section-text::after {
  left: 100%;
  margin-left: calc(20px - 0.05em); /* abzüglich nachlaufender Laufweite */
}

/* --- Bilderserie ----------------------------------------------------------------
   Bilder seitenbreit, darunter mit kleinem Abstand die Bildnamen (Deutsch, Russisch,
   Englisch) in Jost Bold; 60px bis zum nächsten Bild, nach der Serie 200px bis zum
   nächsten Rubriktitel. */
.metro-photos {
  margin-top: calc(clamp(1rem, 2.4cqw, 1.6rem) + 60px);
}

.metro-photo {
  margin: 0 0 60px;
}

.metro-photo:last-child {
  margin-bottom: 0;
}

.metro-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.metro-cap {
  margin-top: 0.6rem;
  padding: 0;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.7cqw, 1.15rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: #000;
}

.metro-cap span {
  white-space: nowrap;
}

.metro-photos + .metro-section-title {
  margin-top: 200px;
}

/* --- Ausstellungen --------------------------------------------------------------- */

/* Fahrmarke: ein Drittel der Seitenbreite, zentriert, 130px Luft darüber und darunter */
.metro-marke {
  margin: 130px 0; /* 30px + 100px Extraabstand */
}

.metro-marke img {
  display: block;
  width: 33.333cqw;
  height: auto;
  margin: 0 auto;
}

/* Zeile unter dem Rubriktitel: wie der Titel eingerückt */
.metro-subline {
  margin: 0.9rem 0 0;
  padding: 0 8cqw;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 2cqw, 1.3rem);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
}

/* je eine zusätzliche Textzeile Abstand vor dem Satz und nach dem Satz */
.metro-expo-intro {
  margin-top: calc(clamp(1.6rem, 3.2cqw, 2.4rem) + var(--body-lead-size) * 1.65);
}

/* Bilder links (65 % der Seitenbreite, linksbündig), Textspalte rechts daneben
   mit 30px Abstand. Auf schmalen Seiten (<= 700px) untereinander. */
.metro-expo {
  display: grid;
  grid-template-columns: 65cqw 1fr;
  column-gap: 30px;
  align-items: start;
  margin-top: calc(clamp(1.6rem, 3.2cqw, 2.4rem) + var(--body-lead-size) * 1.65);
  padding-right: 8cqw;
}

.metro-expo-images {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.metro-expo-images img {
  display: block;
  width: 65cqw;
  height: auto;
}

.metro-expo-head {
  margin: 0 0 1.2em;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.99rem, 2.09cqw, 1.32rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #000;
}

.metro-expo-head span {
  font-weight: 400;
}

.metro-expo-text .project-text {
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Absatz zwischen den Textabschnitten */
.metro-expo-text .project-text + .project-text {
  margin-top: 1.2em;
}

/* Gruppen (Café Moskau, Kornhausforum): Plakat links mit Text, darunter ein breites
   Bild, darunter zwei Bilder nebeneinander mit schmalem Spalt (gleiche Höhe,
   Breiten im Verhältnis der Seitenverhältnisse). 100px zwischen den Gruppen. */
.metro-expo-group + .metro-expo-group {
  margin-top: 100px;
}

/* beginnt eine spätere Gruppe direkt mit dem Bild-mit-Text-Block, ohne Zusatzabstand */
.metro-expo-group + .metro-expo-group > .metro-expo:first-child {
  margin-top: 0;
}

.metro-expo-wide {
  margin-top: 30px;
}

/* erstes Bild der ersten Gruppe: Abstand nach dem Einleitungssatz (plus eine Zeile) */
.metro-expo-group:first-of-type > .metro-expo-wide:first-child {
  margin-top: calc(clamp(1.6rem, 3.2cqw, 2.4rem) + var(--body-lead-size) * 1.65);
}

/* zweite Gruppe beginnt mit einem breiten Bild direkt nach den 100px Gruppenabstand */
.metro-expo-group + .metro-expo-group > .metro-expo-wide:first-child {
  margin-top: 0;
}

/* Plakat/Bild-mit-Text-Block nach einem breiten Bild: 30px Abstand */
.metro-expo-wide + .metro-expo {
  margin-top: 30px;
}

.metro-expo-wide img {
  display: block;
  width: 100%;
  height: auto;
}

.metro-expo-pair {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.metro-expo-pair img {
  display: block;
  min-width: 0;
  height: auto;
}

/* Variante mit 60 % Bildbreite (Berlin) */
.metro-expo-60 {
  grid-template-columns: 60cqw 1fr;
}

.metro-expo-60 .metro-expo-images img {
  width: 60cqw;
}

@container (max-width: 700px) {
  .metro-expo {
    display: block;
    padding-right: 0;
  }

  .metro-expo-images img,
  .metro-expo-60 .metro-expo-images img {
    width: 100cqw;
  }

  .metro-expo-text {
    margin-top: 1.6rem;
    padding: 0 8cqw;
  }
}

/* 100px zwischen den Ausstellungen und dem nächsten Rubriktitel (Katalog) */
.metro-expo-group + .metro-section-title {
  margin-top: 100px;
}

/* --- Katalog ------------------------------------------------------------------------ */

.metro-catalog {
  margin-top: clamp(1.6rem, 3.2cqw, 2.4rem);
}

.metro-cat-head {
  margin: 0 0 1.2em;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 2cqw, 1.3rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #000;
}

.metro-cat-head b {
  font-weight: 700;
}

/* --- "Aus dem Katalog" (Erzähltext + Bild) ---------------------------------------------- */

.metro-story {
  margin-top: clamp(2.8rem, 6cqw, 4.5rem);
}

.metro-story-head {
  margin: 0 0 1.2rem;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 2cqw, 1.3rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #000;
}

.metro-story .project-text {
  margin: 0 0 1.2em;
}

.metro-story [data-lang] > .project-text:last-child {
  margin-bottom: 0;
}

.metro-story-photo {
  margin: clamp(2rem, 4cqw, 3rem) 0 0;
}

/* Quellenangabe hinter dem Zitat: klein, nicht kursiv */
.metro-source {
  font-size: 0.8em;
  font-style: normal;
  white-space: normal;
}

/* --- METRONAUT.NET (alte Projektwebsite) --------------------------------------------- */

.metro-web-head {
  margin: clamp(2.8rem, 6cqw, 4.5rem) 0 1.2rem;
  padding: 0 8cqw;
}

.metro-web {
  margin-top: 0;
}

.metro-link {
  margin: 1.2em 0 0;
  font-family: "Jost", "Futura", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.9cqw, 1.2rem);
  letter-spacing: 0.04em;
}

.metro-link a {
  color: var(--metro-red);
  text-decoration: none;
}

.metro-link a:hover,
.metro-link a:focus-visible {
  text-decoration: underline;
}

/* Rubriktitel Archiv: 100px unter dem Bild davor; darunter der Eintrag METRONAUT.NET */
.metro-story-photo + .metro-section-title {
  margin-top: 100px;
}

/* Block METRONAUT.NET direkt unter dem Rubriktitel: wie die Ausstellungsgruppen */
.metro-section-title + .metro-web {
  margin-top: calc(clamp(1.6rem, 3.2cqw, 2.4rem) + var(--body-lead-size) * 1.65);
}

/* Katalogbilder: zwei Reihen mit je zwei gleich breiten Bildern, seitenbreit, schmaler Spalt */
.metro-quad {
  margin-top: calc(clamp(1.6rem, 3.2cqw, 2.4rem) + var(--body-lead-size) * 1.65);
}

.metro-quad-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: start;
}

.metro-quad-row + .metro-quad-row {
  margin-top: 6px;
}

.metro-quad-row img {
  display: block;
  width: 100%;
  height: auto;
}

/* Zweite Reihe: gleiche Breite UND gleiche Höhe. Die Höhe ist das Mittel aus den
   natürlichen Höhen von k3 (0,8267) und k4 (0,8729): (1/0,8267 + 1/0,8729) / 2 = 1,1776
   Breiten, also Seitenverhältnis 0,8491. Die Bilder werden mittig eingepasst und
   an den Rändern minimal beschnitten (k3 oben/unten, k4 links/rechts). */
.metro-quad-row-eq img {
  aspect-ratio: 0.8491;
  object-fit: cover;
  object-position: center;
}