/* ==========================================================================
   VLISTA — Basis
   Grundtypografie, Layout-Primitive und wiederkehrende Textfiguren.
   ========================================================================== */

body {
  background-color: var(--vl-paper);
  color: var(--vl-ink);
  font-family: var(--vl-font-body);
  font-size: var(--vl-size-body);
  line-height: var(--vl-leading-body);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background-color: var(--vl-signal);
  color: var(--vl-paper);
}

/* --------------------------------------------------------------------------
   Layout-Primitive
   -------------------------------------------------------------------------- */

.vl-shell {
  width: 100%;
  max-width: var(--vl-measure);
  margin-inline: auto;
  padding-inline: var(--vl-edge);
}

.vl-shell--flush {
  padding-inline: 0;
}

.vl-band {
  padding-block: var(--vl-section);
}

.vl-band--shade {
  background-color: var(--vl-paper-shade);
}

.vl-band--night {
  background-color: var(--vl-night);
  color: var(--vl-night-ink);
}

.vl-rule {
  border: 0;
  border-top: var(--vl-hairline) solid var(--vl-rule);
}

/* Nur für Screenreader — etwa Sprungmarken und Statusmeldungen */
.vl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vl-skip {
  position: absolute;
  top: var(--vl-gap-5);
  left: var(--vl-gap-5);
  z-index: var(--vl-z-menu);
  padding: var(--vl-gap-4) var(--vl-gap-6);
  background-color: var(--vl-ink);
  color: var(--vl-paper);
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-label);
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  transform: translateY(calc(-100% - var(--vl-gap-6)));
  transition: transform var(--vl-dur-fast) var(--vl-ease);
}

.vl-skip:focus-visible {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Typografische Figuren
   -------------------------------------------------------------------------- */

/* Grosse Headline: schwere Versalien in der schmalen Grotesk, dazwischen
   einzelne kursive Serif-Wörter als Gegenstimme. */
.vl-headline {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-mega);
  font-weight: 700;
  line-height: var(--vl-leading-tight);
  letter-spacing: var(--vl-track-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

.vl-headline em,
.vl-title em,
.vl-subtitle em,
.vl-accent {
  font-family: var(--vl-font-accent);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
}

.vl-title {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-xl);
  font-weight: 700;
  line-height: var(--vl-leading-snug);
  letter-spacing: var(--vl-track-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Der Name steht in Überschriften als gesetzte Wortmarke, nicht als Schrift.
   Die Höhe folgt der Versalhöhe der Zeile, damit die Marke mitwächst; der
   Versatz nach unten setzt sie auf die Grundlinie, weil die Schreibschrift
   ihre Unterlänge mitbringt. */
.vl-marke {
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.22em);
  /* Ohne dies legt reset.css die Platzhalterfläche für Fotos darunter. */
  background-color: transparent;
}

.vl-subtitle {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-l);
  font-weight: 600;
  line-height: var(--vl-leading-snug);
  text-transform: uppercase;
}

/* Kleinversalien mit Sperrung — Navigation, Rubriken, Bildunterschriften */
.vl-label {
  font-family: var(--vl-font-display);
  font-size: var(--vl-size-label);
  font-weight: 600;
  letter-spacing: var(--vl-track-label);
  text-transform: uppercase;
  line-height: 1.2;
}

.vl-mono {
  font-family: var(--vl-font-mono);
  font-size: var(--vl-size-small);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Rubrik-Kennzeichnung über Titeln, etwa „LEISTUNGEN" */
.vl-eyebrow {
  display: flex;
  align-items: center;
  color: var(--vl-ink-mute);
}

/* Der Vorspann läuft in der kursiven Serif — sie ist die Gegenstimme zu den
   schweren Versalien und trägt die ruhigeren Sätze der Seite. */
.vl-lede {
  max-width: var(--vl-text-max);
  color: var(--vl-ink-soft);
  font-family: var(--vl-font-accent);
  font-style: italic;
  font-size: var(--vl-size-m);
  line-height: 1.5;
}

.vl-prose {
  max-width: var(--vl-text-max);
  color: var(--vl-ink-soft);
}

.vl-prose > * + * {
  margin-top: var(--vl-gap-5);
}

/* Signalpunkt hinter einem Wort — sparsam einsetzen, ein- bis zweimal je Seite */
.vl-dot::after {
  content: "";
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.12em;
  vertical-align: baseline;
  background-color: var(--vl-signal);
  border-radius: var(--vl-radius-pill);
}

/* --------------------------------------------------------------------------
   Kennzeichnung erzeugter Bilder
   Art. 50 Abs. 4 KI-VO verlangt sie "klar und erkennbar". Zurückhaltend
   gesetzt, aber lesbar: dieselbe Kleinversalie wie die übrigen Marker,
   gedeckte Farbe mit 4,8:1 gegen Papier. Nicht kleiner machen.
   -------------------------------------------------------------------------- */

.vl-ki {
  font-family: var(--vl-font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vl-ink-mute);
  margin: 0;
}