/*
 * uFolien – Grundstil
 *
 * Regeln für jedes Beispiel:
 * - Jede Folie ist 1920 x 1080 px; alle Maße innerhalb der Folie in px (keine vw/vh).
 * - Die Box von .folie (width, height, position, transform, display,
 *   visibility, overflow) gehört der Engine – hier nur Hintergrund, Schrift,
 *   Farbe, padding und Inhalt gestalten.
 * - Keine Kind-Selektoren wie „.deck > .folie" (die Engine umhüllt jede Folie).
 * - Die Fläche um die Folie färbt --buehne.
 */

:root {
  --buehne: #20242b;       /* Fläche um die Folie */
  --papier: #fbfaf7;       /* Folienhintergrund */
  --tinte: #1f2328;        /* Fließtext, Kontrast ca. 15:1 */
  --tinte-leise: #545b66;  /* Nebentext, Kontrast ca. 6.5:1 */
  --akzent: #2b6584;       /* Akzent, Kontrast ca. 6:1 */
}

/* ---------- Alle Folien ---------- */

/* Akzentstreifen am linken Rand als Hintergrundbild, damit die Box unberührt bleibt */
.folie {
  padding: 140px 180px;
  background: var(--papier) linear-gradient(var(--akzent), var(--akzent)) no-repeat 0 0 / 24px 100%;
  color: var(--tinte);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 40px;
  line-height: 1.4;
}

.folie h1,
.folie h2 {
  margin: 0 0 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.folie h1 {
  font-size: 160px;
}

.folie h2 {
  font-size: 88px;
}

.dachzeile {
  margin: 0 0 32px;
  color: var(--akzent);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.untertitel {
  max-width: 1300px;
  margin: 0;
  color: var(--tinte-leise);
  font-size: 52px;
  line-height: 1.3;
}

.fussnote {
  position: absolute;
  left: 180px;
  bottom: 110px;
  margin: 0;
  color: var(--tinte-leise);
  font-size: 32px;
  font-style: italic;
}

.folie code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.9em;
  color: var(--akzent);
}

/* ---------- Titel ---------- */

.folie--titel {
  padding-top: 260px;
}

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

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

.liste li {
  position: relative;
  margin: 0 0 30px;
  padding-left: 56px;
  font-size: 44px;
}

/* Aufzählungspunkt als gezeichnete Fläche, kein Schriftzeichen */
.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--akzent);
}

.liste strong {
  font-weight: 600;
}

/* ---------- Kennzahl ---------- */

.folie--kennzahl {
  padding-top: 220px;
}

.kennzahl {
  margin: 0 0 40px;
  color: var(--akzent);
  font-size: 260px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kennzahl-mal {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: 0.3em;
}

.kennzahl-text {
  max-width: 1300px;
  margin: 0;
  font-size: 46px;
}

/* ---------- Abschluss ---------- */

.folie--abschluss {
  padding-top: 320px;
  background-color: #eef3f6;
}