/* ==========================================================================
   VLISTA — Unterseiten
   Kopfbereich, Ablaufschritte, Bildstrecke, Aufruf, Weiterführung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kopfbereich einer Rubrik
   Schmaler als die Startseite: hier trägt die Überschrift allein.
   -------------------------------------------------------------------------- */

.vl-page__hero {
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2rem, 1.5rem + 3vw, 4rem);
}

/* --------------------------------------------------------------------------
   Kopfbereich mit grundierendem Motiv
   Das Bild liegt hinter der Schrift und läuft über die volle Fensterbreite.
   Lesbarkeit geht vor Motiv: die Zurückhaltung steckt hier im CSS, nicht in
   der Bilddatei (siehe tools/build_kopf_images.py).
   -------------------------------------------------------------------------- */

.vl-page__hero--bild {
  position: relative;
  isolation: isolate;
  /* Die Hülle ist eingerückt; das Motiv soll die Bildschirmkante berühren.
     Die Einrückung wandert deshalb nach innen an den Text. */
  max-width: none;
  padding-inline: var(--vl-edge);
  overflow: hidden;
}

.vl-page__hero--bild > :not(.vl-page__kopfbild) {
  position: relative;
  z-index: 1;
  /* Der Textkörper behält das Satzmass der übrigen Seite, obwohl die
     Sektion jetzt über die volle Breite läuft. */
  max-width: var(--vl-measure);
  margin-inline: auto;
}

.vl-page__kopfbild {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* So kräftig, dass das Motiv trägt, und so zurückgenommen, dass der Text
     lesbar bleibt. Angehoben von 0.38 auf 0.53 — das Motiv soll deutlicher
     durchscheinen. Den Verlust an Kontrast fängt der Schleier darunter auf,
     der hinter dem Text jetzt dichter liegt. */
  opacity: 0.53;
}

/* Verlauf ins Papier: oben unter der Kopfzeile, unten zur nächsten
   Sektion, damit das Motiv nirgends hart abbricht. */
.vl-page__hero--bild::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--vl-paper) 72%, transparent) 0%,
    color-mix(in srgb, var(--vl-paper) 30%, transparent) 34%,
    color-mix(in srgb, var(--vl-paper) 46%, transparent) 66%,
    var(--vl-paper) 100%
  );
}

.vl-page__headline {
  max-width: 16ch;
  margin-top: var(--vl-gap-7);
}

.vl-page__lede {
  margin-top: var(--vl-gap-7);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Ablaufschritte
   Gezählte Reihen statt gleichförmiger Karten. Auf breiten Ansichten rückt
   jede Reihe etwas weiter ein — das gibt der Aufzählung eine Richtung.
   -------------------------------------------------------------------------- */

.vl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vl-step {
  display: grid;
  gap: var(--vl-gap-4);
  padding-block: var(--vl-gap-7);
  border-top: var(--vl-hairline) solid var(--vl-rule);
}

.vl-step:last-child {
  border-bottom: var(--vl-hairline) solid var(--vl-rule);
}

.vl-step__name {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-l);
  font-weight: 700;
  line-height: var(--vl-leading-snug);
  letter-spacing: var(--vl-track-tight);
  text-transform: uppercase;
  margin: 0;
}

.vl-step__text {
  color: var(--vl-ink-soft);
  max-width: 52ch;
  margin: 0;
}

@media (min-width: 60rem) {
  /* Staffelung nur dort, wo genug Breite da ist. */
  .vl-step:nth-child(2) { padding-inline-start: var(--vl-gap-7); }
  .vl-step:nth-child(3) { padding-inline-start: calc(var(--vl-gap-7) * 2); }
}

/* --------------------------------------------------------------------------
   Bildstrecke
   Waagerechte Bahn, die über den Rand hinausläuft — sie soll angeschnitten
   wirken, damit erkennbar bleibt, dass es weitergeht.
   -------------------------------------------------------------------------- */

.vl-strip {
  padding-block: var(--vl-gap-8);
  background-color: var(--vl-paper-shade);
  overflow: hidden;
}

.vl-strip__rail {
  display: flex;
  gap: var(--vl-gap-5);
  padding-inline: var(--vl-edge);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.vl-strip__item {
  position: relative;
  /* Untergrenze niedrig genug, dass auf einem Telefon zweieinhalb Kacheln
     stehen — sonst ist nicht erkennbar, dass die Bahn weitergeht. */
  --vl-strip-breite: clamp(8.5rem, 22vw, 17rem);
  --vl-strip-verhaeltnis: 9 / 16;

  flex: 0 0 var(--vl-strip-breite);
  margin: 0;
  scroll-snap-align: start;
}

/* Breite und Verhältnis folgen der Form — ein Querformat so schmal wie ein
   Hochformat wäre nicht mehr zu erkennen. */
.vl-strip__item--portrait {
  --vl-strip-breite: clamp(9.5rem, 24vw, 19rem);
  --vl-strip-verhaeltnis: 4 / 5;
}

.vl-strip__item--quadrat {
  --vl-strip-breite: clamp(10rem, 26vw, 20rem);
  --vl-strip-verhaeltnis: 1 / 1;
}

.vl-strip__item--quer {
  --vl-strip-breite: clamp(14rem, 36vw, 28rem);
  --vl-strip-verhaeltnis: 16 / 9;
}

.vl-strip__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--vl-strip-verhaeltnis);
  object-fit: cover;
  background-color: var(--vl-paper-deep);
  transform: scale(1.01);
  transition: transform var(--vl-dur-slow) var(--vl-ease);
}

.vl-strip__item:hover .vl-strip__media {
  transform: scale(1.06);
}

.vl-strip__caption {
  display: block;
  margin-top: var(--vl-gap-4);
  color: var(--vl-ink-mute);
}

/* Oberkanten bündig. Bei gemischten Formen sähe ein Versatz nach Versehen
   aus statt nach Absicht — den Rhythmus tragen jetzt die Formen selbst. */
.vl-strip__rail {
  align-items: start;
}

/* --------------------------------------------------------------------------
   Aufruf am Seitenende
   -------------------------------------------------------------------------- */

.vl-callout {
  background-color: var(--vl-night);
  color: var(--vl-night-ink);
  padding-block: var(--vl-gap-9);
}

.vl-callout__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vl-gap-7);
}

.vl-callout .vl-subtitle {
  max-width: 22ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Weiterführung zu den übrigen Rubriken
   -------------------------------------------------------------------------- */

.vl-more {
  padding-block: var(--vl-gap-8);
}

.vl-more__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--vl-gap-5) var(--vl-gap-7);
  list-style: none;
  margin: var(--vl-gap-6) 0 0;
  padding: 0;
}

.vl-more__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vl-gap-4);
  padding-block: var(--vl-gap-4);
  border-top: var(--vl-hairline) solid var(--vl-rule);
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--vl-track-tight);
  transition: color var(--vl-dur-fast) var(--vl-ease);
}

.vl-more__link span {
  color: var(--vl-ink-mute);
  transition:
    transform var(--vl-dur) var(--vl-ease),
    color var(--vl-dur-fast) var(--vl-ease);
}

.vl-more__link:hover span,
.vl-more__link:focus-visible span {
  transform: translate(0.2rem, -0.2rem);
  color: var(--vl-signal);
}

/* --------------------------------------------------------------------------
   Studio-Abschnitt der Startseite
   -------------------------------------------------------------------------- */

.vl-studio__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--vl-gap-6) var(--vl-gap-8);
  align-items: start;
  margin-top: var(--vl-gap-7);
}

.vl-studio__body .vl-lede {
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Prosaseiten (Impressum, Datenschutz)
   Schmale Spalte, ruhiger Satz — hier wird gelesen, nicht geschaut.
   -------------------------------------------------------------------------- */

.vl-prose {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--vl-gap-9);
  max-width: 42rem;
}

.vl-prose__title {
  margin-bottom: var(--vl-gap-8);
}

.vl-prose__block + .vl-prose__block {
  margin-top: var(--vl-gap-7);
  padding-top: var(--vl-gap-7);
  border-top: var(--vl-hairline) solid var(--vl-rule);
}

.vl-prose__heading {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-m);
  font-weight: 700;
  letter-spacing: var(--vl-track-tight);
  text-transform: uppercase;
  margin-bottom: var(--vl-gap-5);
}

.vl-prose p {
  color: var(--vl-ink-soft);
  line-height: 1.65;
  max-width: 62ch;
}

.vl-prose p + p {
  margin-top: var(--vl-gap-4);
}

/* Fehlerseite: der Weg zurück steht für sich, mit Luft nach oben. */
.vl-fehler__zurueck {
  margin-top: var(--vl-gap-8);
  max-width: 16rem;
}

/* Kennzeichnung am Kopfbild: unten rechts an der Sektionskante. */
.vl-page__ki {
  position: absolute;
  right: var(--vl-edge);
  bottom: var(--vl-gap-4);
  z-index: 1;
}

/* Kennzeichnung unter der Bildstrecke. */
.vl-strip__ki {
  padding-inline: var(--vl-edge);
  margin-top: var(--vl-gap-5);
}