/* =========================================================================
   Raster und Rhythmus.
   Die Seite atmet: Bildbänder im Vollformat, dazwischen schmale Textbahnen.
   Die Bildkante ist die Trennlinie — deshalb fast keine Regelstriche.
   ========================================================================= */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page--narrow { max-width: 58rem; }

/* --- Bänder. Absichtlich ungleich gepolstert. ------------------------- */

.band            { padding-block: var(--space-3xl); }
.band--tight     { padding-block: var(--space-2xl); }
.band--open      { padding-block: var(--space-4xl) var(--space-3xl); }
.band--paper-2   {
  background:
    radial-gradient(120% 80% at 100% 0%, var(--tint-accent) 0%, transparent 55%),
    var(--color-paper-2);
}
.band--dark {
  background:
    radial-gradient(90% 120% at 0% 0%, var(--color-dark-2) 0%, transparent 60%),
    var(--color-dark);
  color: var(--color-dark-ink);
}
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--color-dark-ink); }
.band--dark .lede,
.band--dark .prose { color: var(--color-dark-muted); }

/* --- Textbahnen ------------------------------------------------------- */

.prose { max-width: var(--measure); font-size: var(--text-md); }
.prose > * + * { margin-block-start: var(--space-md); }
.prose a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.prose a:hover { text-decoration-thickness: 2px; }
.band--dark .prose a { color: var(--color-accent-soft); }

.lede {
  max-width: var(--measure-tight);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.prose ul, .prose ol { padding-inline-start: 1.15em; }
.prose li + li { margin-block-start: var(--space-xs); }
.prose h2 { font-size: var(--text-xl); margin-block-start: var(--space-xl); }
.prose h3 { margin-block-start: var(--space-xl); }

/* --- Abschnittskopf: hängend, ohne Linie, ohne Nummer (S2) ------------ */

.head {
  display: grid;
  gap: var(--space-md);
  max-width: 34ch;
  padding-block-end: var(--space-xl);
}
.head--wide { max-width: 46ch; }
.head__sub {
  max-width: var(--measure-tight);
  font-size: var(--text-md);
  color: var(--color-ink-2);
}
.band--dark .head__sub { color: var(--color-dark-muted); }

/* --- Bildband über die volle Breite ----------------------------------- */

.fold { position: relative; margin: 0; }
.fold > figcaption { padding-block: var(--space-md) 0; }
.fold__img {
  width: 100%;
  height: clamp(20rem, 58vw, 40rem);
  object-fit: cover;
}
/* Eine Bildbahn über die volle Breite, die den ganzen Ort auf einmal zeigt. */
.fold--gross .fold__img { height: clamp(22rem, 72vw, 52rem); }
.fold__caption {
  max-width: var(--measure-tight);
  margin-block-start: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.fold--gross .fold__caption {
  max-width: 52ch;
  margin-block-start: var(--space-md);
}
.band--dark .fold__caption { color: var(--color-dark-muted); }

/* Figur mit Text daneben — Verhältnis 7/5, wechselnde Richtung */

.diptych {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 60rem) {
  .diptych { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
  .diptych--flip > :first-child { order: 2; }
}
.diptych__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* --- Zweispaltig, ungleich ------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-3xl); }
}

/* --- Stapel ----------------------------------------------------------- */

.stack      { display: grid; gap: var(--space-md); }
.stack--lg  { gap: var(--space-xl); }
.stack--xl  { gap: var(--space-2xl); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

/* --- Aus der Seitenpolsterung ausbrechen ------------------------------
   Kein 100vw: das rechnet die Scrollleiste mit und erzeugt auf dem Desktop
   waagerechten Überlauf. Echte Vollbreite entsteht dadurch, dass der
   Abschnitt ausserhalb von .page steht.                                  */

.bleed {
  width: auto;
  margin-inline: calc(var(--gutter) * -1);
}