/* Kernfusion-Seite (projekt-fusion.html). Schwarze Seite im Aufbau der Projekte-
   Seite (Einleitung wie .projects-intro), darunter Serien mit Titel, Text und
   untereinander stehenden Fotos: einzeln in Spaltenbreite (auf dem Handy im
   Hochformat fensterbreit) oder zwei nebeneinander. Wird nach style.css und
   typography.css eingebunden. */

/* Untertitel unter dem Seitentitel */
.fus-intro .fus-subtitle {
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: calc(var(--title-size) * 0.55);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 calc(0.6em + 1.6rem);
}

/* Abstand Titel - Untertitel halbiert (vorher: 0,6 em + 1,6 rem Titelrand, Untertitel um 0,3 em hochgezogen) */
.fus-intro h1 {
  margin-bottom: max(0px, calc((0.2175em + 0.8rem) * 2 / 3 - 10px)); /* Untertitel weitere 10px näher */
}

/* Titelbild mit weißem Rahmen wie auf der Projekte-Übersicht; Platz oben für den Header */
.fus-lead {
  /* um die Breite des weißen Rahmens (wie .project-frame) nach oben gezogen */
  padding-top: calc(6.4rem - min(40px, 1.21429vw + 16.4286px));
}

/* Der Block ist das einzige <article> im <main>, damit greift in style.css
   .project-block:last-of-type mit 8,8 rem Abstand nach unten - hier aufheben. */
.project-block.fus-lead:last-of-type {
  margin-bottom: 0;
}

.fus-lead .project-frame {
  margin-bottom: 0;
}

.fus-intro {
  /* Abstand Titelbild - Titel: sichtbar 1,5 Titelhöhen (Schriftgröße) bis zur Oberkante
     der Versalien; die Zeile selbst bringt ca. 0,39 em Luft über den Versalien mit. */
  padding-top: calc(var(--title-size) * 1.11);
  padding-bottom: 3.2rem;
}

.fus-intro p {
  margin: 0 0 1.2em;
}

.fus-intro p:last-child {
  margin-bottom: 0;
}

/* Textspalte der Serien: wie die Projekte-Seite (Spalte mit 1,2 rem Innenrand) */
.fus-page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.2rem 6.4rem;
}

.fus-rule {
  border: 0;
  border-top: 1px solid #333;
  margin: 0 0 5.6rem;
}

/* Abstand zwischen den Serien: 5 Textzeilen (ZAB = Zeilenabstand) */
.fus-series {
  margin-bottom: calc(5 * var(--body-lead-size) * 1.65);
}

.fus-after {
  margin-bottom: 5.6rem;
}

.fus-series:last-of-type,
.fus-after:last-of-type {
  margin-bottom: 0;
}

.fus-title {
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: calc(var(--title-size) * 0.7);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.35em;
}

.fus-meta {
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-size: var(--body-lead-size);
  line-height: 1.3;
  color: var(--color-muted);
  margin: 0 0 1.6rem;
}

/* zwischen Text und Fotos: 2,4 rem plus eine halbe Textzeile */
.fus-text {
  margin-bottom: calc(2.4rem + var(--body-lead-size) * 1.65 / 2);
}

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

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

.fus-after .fus-text {
  margin-bottom: 0;
}

/* Fotos: brechen aus dem Innenrand aus und laufen in voller Spaltenbreite
   (Handy im Hochformat: fensterbreit). */
.fus-photos {
  margin: 0 -1.2rem;
}

.fus-row {
  margin-bottom: 1.6rem;
}

.fus-row:last-child {
  margin-bottom: 0;
}

.fus-btn {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.fus-btn img {
  display: block;
  width: 100%;
  height: auto;
}

/* Zwei Bilder nebeneinander: gleiche Höhe, Breiten im Verhältnis der Seitenverhältnisse
   (keine Beschnitte); der flex-Wert steht je Bild am Button. */
.fus-pair {
  display: flex;
  gap: 6.4px;
  align-items: flex-start;
}

.fus-pair .fus-btn {
  width: auto;
}

/* Gerahmtes Bild über der ersten Serie (statt der dünnen Linie): weißer Rahmen wie auf
   der Projekte-Übersicht, danach der übliche Serienabstand */
.fus-page > .fus-frame {
  /* zwei Textzeilen mehr Luft über dem Bild; unten derselbe Abstand zum Rubriktitel
     wie oben zwischen Titelbild und Seitentitel */
  margin-top: calc(2 * var(--body-lead-size) * 1.65);
  margin-bottom: calc(var(--title-size) * 1.11);
}

/* Zwei Bilder gleich breit; mit --fit (Seitenverhältnis Breite/Höhe) auf ein gemeinsames
   Format zugeschnitten, mittig eingepasst (5/4 = 1,25 quer, 1 = quadratisch). */
.fus-pair-eq .fus-btn {
  flex: 1 1 0;
}

.fus-pair-eq img {
  aspect-ratio: var(--fit, auto);
  object-fit: cover;
  object-position: center;
}

/* zwei Textzeilen Abstand vor einem Bild */
.fus-row-gap2 {
  margin-top: calc(2 * var(--body-lead-size) * 1.65);
}

/* Kurzer Fließtext zwischen den Bildreihen: eine Textzeile mehr Luft oben und unten
   (zusätzlich zum normalen Reihenabstand), mit dem Innenrand der Textspalte. */
.fus-photos .fus-caption {
  margin: 0 0 1.6rem;
  padding: calc(var(--body-lead-size) * 1.65) 1.2rem;
}

/* Serien beginnen mit einem weiß gerahmten Bild; danach derselbe Abstand zum Titel wie unter
   dem Titelbild der Seite. */
.fus-series > .fus-frame {
  margin: 0 0 calc(var(--title-size) * 1.11);
}

/* Binnennavigation unter der Einleitung (Aufbau wie beim Transrapid, hier auf dunklem Grund) */
.fus-nav {
  margin-top: 2.4rem;
  row-gap: 0.5em;
}

.fus-nav a {
  color: #fff;
}

.fus-nav a:hover,
.fus-nav a:focus-visible {
  color: #9db4cc;
  text-decoration: underline;
}

/* Sprungziele: etwas Luft über der Serie */
.fus-series,
.fus-frame[id] {
  scroll-margin-top: 1.5rem;
}

/* --- Big Science / Neutronen (projekt-neutronen.html) ------------------------------------
   Gleiche Maße und Schriften wie die Fusion-Seite. Untertitel steht hier ÜBER dem Titel. */
.fus-intro-reverse .fus-subtitle {
  margin: 0 0 0.3em;
}

.fus-intro-reverse h1 {
  margin-bottom: calc(0.6em + 1.6rem);
}

/* Bilder einzeln untereinander, je 2 Textzeilen (ZAB) Abstand; später auch lange Texte dazwischen */
.fus-stack .fus-photos .fus-row {
  margin-bottom: calc(2 * var(--body-lead-size) * 1.65);
}

.fus-stack .fus-photos .fus-row:last-child {
  margin-bottom: 0;
}

/* Bild, das bei Mouseover zu einem zweiten Bild wechselt (e13 -> e13a) */
.fus-swap {
  position: relative;
}

.fus-swap .fus-swap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .fus-swap:hover .fus-swap-img,
  .fus-swap:focus-visible .fus-swap-img {
    opacity: 1;
  }
}

/* --- Big Science: Titelblock und Erklärtexte ------------------------------------------- */

/* Titel, darunter die Zeile mit Ort/Anlage (grau) */
.fus-intro-reverse h1 {
  margin-bottom: 0.15em;
}

.fus-intro-reverse .fus-meta {
  margin: 0 0 calc(0.6em + 1.6rem);
}

/* Erklärtexte (Überschrift + Absätze), im Titelblock und zwischen den Bildern */
.fus-explain-title {
  font-family: "Instrument Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: calc(var(--title-size) * 0.5);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 0.6em;
}

.fus-intro .fus-explain-title {
  margin-top: 2.4rem;
}

.fus-explain {
  padding: 0 1.2rem;
  margin: 0 0 calc(2 * var(--body-lead-size) * 1.65);
}

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

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

/* Bild, auf das direkt sein Erklärtext folgt: 1 Textzeile Abstand statt 2 */
.fus-stack .fus-photos .fus-row.fus-row-tight {
  margin-bottom: calc(1 * var(--body-lead-size) * 1.65);
}

/* Zwischen den Abschnitten der Seite: 5 Textzeilen; Überschrift mit etwas Luft zu den Bildern */
.fus-stack .fus-after {
  margin-bottom: calc(5 * var(--body-lead-size) * 1.65);
}

.fus-stack .fus-after:last-of-type {
  margin-bottom: 0;
}

.fus-stack .fus-title {
  margin-bottom: 1.6rem;
}