/*
  Die Website trägt dieselben Tokens wie das Werkzeug.

  Nicht aus Bequemlichkeit: Wer von hier aus in die Anwendung geht, soll nicht
  das Gefühl haben, ein zweites Produkt zu betreten. Die Farben stammen
  wortgleich aus app/assets/css/main.css.

  Kein Framework. Vier statische Seiten rechtfertigen keinen Bauschritt, und
  ohne ihn bleibt die Seite in fünf Jahren noch änderbar.

  Aufbau:
    1  Schrift und Tokens
    2  Atmosphäre  (Korn, Raster, Schein, Bildhintergründe)
    3  Grundbausteine
    4  Kopf und Fuß
    5  Aufmacher
    6  Tafeln und Diagramme
    7  Die einzelnen Abschnitte
    8  Rechtstexte
*/

/* == 1  Schrift und Tokens =============================================== */

@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Slate';
  src: url('fonts/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0a0a0b;
  --panel: #121214;
  --raise: #17171a;
  --rule: #242428;
  --type: #e9e9ec;
  --mute: #85858d;

  /* Abweichung, nicht Dekoration: hoch, runter, hängt. */
  --up: #5bd97a;
  --down: #e8615a;
  --hold: #e0a533;

  /* Identität. Auf der Website steht sie für den einen Kanal im Beispiel. */
  --ident: oklch(0.78 0.15 145);
  --ident-2: oklch(0.78 0.15 55);
  --ident-3: oklch(0.78 0.15 265);

  --sans: 'Plex Sans', system-ui, sans-serif;
  --slate: 'Plex Slate', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, monospace;

  /* Eine Rundung für die ganze Seite. */
  --r: 10px;

  /* Kräftige Kurven statt der schwachen CSS-Vorgaben. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --page: 1160px;

  /* Ein Schatten für alles, was über der Fläche liegt. */
  --lift:
    0 1px 0 0 color-mix(in srgb, #fff 5%, transparent) inset,
    0 24px 60px -28px #000,
    0 2px 8px -4px #000;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--type);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* == 2  Atmosphäre ======================================================= */

/*
  Korn über der ganzen Seite.

  Eine reine Fläche aus #0a0a0b wirkt auf großen Bildschirmen wie eine Wand aus
  Farbe. Das Korn nimmt ihr die Glätte, ohne dass man es bewusst sieht, denn
  es liegt bei drei Prozent. Filmemacher machen dasselbe, aus demselben Grund.
*/
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*
  Millimeterpapier.

  Das Raster ist kein Zierstreifen, sondern das Material, auf dem Messwerte
  gezeichnet werden. Es liegt hinter den Abschnitten, die etwas messen, und
  wird zu den Rändern hin ausgeblendet, damit es keine Kante bildet.
*/
.graticule {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--rule) 85%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--rule) 85%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
  background-position: center;
  mask-image: radial-gradient(115% 78% at 50% 42%, #000 0%, transparent 74%);
}

/* Der Schein eines Messgeräts: ein Kanal, eine Farbe, weit aufgezogen. */
.glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--ident) 26%, transparent),
    transparent 78%
  );
}

/* Ein Abschnitt, der seinen eigenen Grund mitbringt. */
.stage {
  position: relative;
  isolation: isolate;
}

.stage > .wrap {
  position: relative;
  z-index: 1;
}

/*
  Ein Abschnitt, dessen Bild nur Stimmung macht.

  Oben und unten ausgeblendet, damit er sich in die Nachbarn einfügt, und
  deutlich gedämpft, weil darüber gelesen wird.
*/
.stage.soft .backdrop {
  mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.stage.soft .backdrop img {
  opacity: 0.42;
}

/* Bildhintergrund: liegt ganz hinten, gedämpft, unten ausgeblendet. */
.backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
}

/* == 3  Grundbausteine =================================================== */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: 24px;
}

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.15;
}

h3 {
  font-size: 1.06rem;
  line-height: 1.4;
}

p {
  margin: 0;
  max-width: 62ch;
}

.lede {
  color: var(--mute);
  font-size: 1.16rem;
}

.slate {
  font-family: var(--slate);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Der Aufschlag über einer Überschrift: sagt in drei Wörtern, worum es geht. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--slate);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--type);
}

.kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ident);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ident) 20%, transparent);
}

section {
  padding-block: clamp(72px, 9.5vw, 122px);
}

.rule-top {
  border-top: 1px solid var(--rule);
}

a {
  color: var(--type);
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms var(--ease-out);
}
a:hover {
  text-decoration-color: var(--mute);
}

:focus-visible {
  outline: 2px solid var(--type);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
  Abstandsrhythmus.

  Ein einziger Wert überall ergibt eine Wand ohne Gliederung. Die Unterzeile
  sitzt eng an ihrer Überschrift, der erklärende Absatz danach bekommt Luft, und
  Folgeabsätze rücken wieder zusammen, weil sie denselben Gedanken fortsetzen.
*/
h2 + .lede {
  margin-top: 14px;
}

.lede + p {
  margin-top: 26px;
}

p + p {
  margin-top: 15px;
}

.section-body {
  color: var(--mute);
}

/* == 4  Kopf und Fuß ===================================================== */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}

.top-in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--type);
  text-decoration: none;
  font-family: var(--slate);
  font-size: 17px;
  letter-spacing: 0.01em;
}

.needle {
  width: 22px;
  height: 22px;
  flex: none;
}

.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.top nav a {
  color: var(--mute);
  text-decoration: none;
  font-size: 15px;
  transition: color 160ms var(--ease-out);
}
.top nav a:hover {
  color: var(--type);
}

.to-app {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--raise);
  color: var(--type);
  text-decoration: none;
  font-size: 15px;
  transition:
    border-color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}
.to-app:hover {
  border-color: var(--mute);
}
.to-app:active {
  transform: scale(0.97);
}

@media (max-width: 780px) {
  .top nav a:not(.to-app) {
    display: none;
  }
}

footer {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: 44px 56px;
  color: var(--mute);
  font-size: 14.5px;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: baseline;
}

.foot-in nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: auto;
}

footer a {
  color: var(--mute);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}
footer a:hover {
  color: var(--type);
}

/* == 5  Aufmacher ======================================================== */

.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/*
  Das Hintergrundbild endet nicht, es hört auf.

  Eine harte Unterkante würde die Seite in zwei Hälften schneiden. Die Maske
  löst das Bild nach unten hin auf, sodass der Aufmacher in die Fläche
  übergeht, auf der die Abschnitte stehen.
*/
.hero-stage .backdrop {
  mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 96%);
}

.hero-stage .glow {
  width: min(1100px, 130vw);
  height: min(680px, 80vw);
  top: -22%;
  left: 50%;
  translate: -50% 0;
  opacity: 0.5;
}

.hero {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: clamp(64px, 9vw, 112px);
  display: grid;
  gap: clamp(40px, 6vw, 68px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.hero h1 em {
  font-style: normal;
  color: var(--ident);
}

.hero .lede {
  margin-top: 22px;
  font-size: 1.2rem;
  max-width: 46ch;
}

.hero-cta {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding-inline: 22px;
  border-radius: var(--r);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out);
}
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--type);
  color: var(--ink);
  border: 1px solid var(--type);
}
.btn-primary:hover {
  background: #fff;
}

.btn-ghost {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--type);
}
.btn-ghost:hover {
  border-color: var(--mute);
}

/* Die Fußnote unter den Knöpfen: nimmt die erste Sorge vorweg. */
.hero-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--mute);
}

/* == 6  Tafeln und Diagramme ============================================= */

.board {
  position: relative;
  background: linear-gradient(180deg, var(--raise), var(--panel));
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--lift);
}

.board + .board {
  margin-top: 12px;
}

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 14px;
}

/* Die Angabe rechts ist eine Einheit und wird auf schmalen Geräten nicht
   umgebrochen; lieber rutscht sie in eine eigene Zeile. */
.board-head > :last-child {
  white-space: nowrap;
}

.board svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Die verworfene Tafel steht zurück: sie ist das Gegenbeispiel. */
.board.muted {
  background: var(--panel);
  box-shadow: 0 12px 32px -24px #000;
}

.verdict {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}

.verdict b {
  color: var(--type);
  font-weight: 500;
}

/*
  Farben in den Zeichnungen.

  Als Klassen, nicht als SVG-Attribute: ein Attribut wie stroke="var(--ident)"
  wird nicht von jedem Browser als Variable aufgelöst, eine CSS-Regel schon.
  Damit bleiben die Kurven an dieselben Tokens gebunden wie der Rest der Seite.
*/
.s-ident {
  stroke: var(--ident);
}
.s-ident-2 {
  stroke: var(--ident-2);
}
.s-ident-3 {
  stroke: var(--ident-3);
}
.s-down {
  stroke: var(--down);
}
.f-ident {
  fill: var(--ident);
}
.st-ident {
  stop-color: var(--ident);
}
.st-ident-2 {
  stop-color: var(--ident-2);
}
.st-ident-3 {
  stop-color: var(--ident-3);
}
.st-down {
  stop-color: var(--down);
}
.t-slate {
  fill: var(--mute);
  font-family: var(--slate);
}

/* Der laufende Punkt am Ende einer Live-Kurve. */
.pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 2400ms var(--ease-out) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/*
  Die Kurve zeichnet sich beim Erscheinen.

  Zweck, nicht Zierde: Der Blick soll dem Verlauf von links nach rechts folgen
  und genau dort ankommen, wo die eine Linie abbricht und die andere weiterläuft.
  Das ist die Aussage der Seite, und die Bewegung führt zu ihr hin.
*/
.draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1200ms var(--ease-out) forwards;
}
.draw-late {
  animation-delay: 300ms;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 560ms var(--ease-out) forwards;
}
.d1 {
  animation-delay: 70ms;
}
.d2 {
  animation-delay: 140ms;
}
.d3 {
  animation-delay: 210ms;
}
.d4 {
  animation-delay: 280ms;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: none;
  }
}

/*
  Auftauchen beim Scrollen, ohne Skript.

  Wo der Browser scrollgesteuerte Animationen kennt, hebt sich jeder Abschnitt
  beim Hereinkommen leicht an. Wo nicht, steht er einfach da — die Regel liegt
  hinter @supports, der Ausgangszustand ist also immer sichtbar.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw,
  .fade-up,
  .pulse {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* == 7  Abschnitte ======================================================= */

/* --- Die drei Messwerte direkt unter dem Aufmacher ---------------------- */

.facts {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fact {
  background: var(--ink);
  padding: 30px 26px 32px;
}

.fact b {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--type);
  font-variant-numeric: tabular-nums;
}

.fact span {
  display: block;
  margin-top: 10px;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.5;
  max-width: 34ch;
}

/* --- Die vier Zustände -------------------------------------------------- */

.states {
  margin-top: 44px;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--lift);
}

@media (min-width: 820px) {
  .states {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.state {
  background: linear-gradient(180deg, var(--raise), var(--panel));
  padding: 22px 20px 24px;
}

.state svg {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 16px;
}

.state h3 {
  margin-bottom: 6px;
}

.state p {
  font-size: 14.5px;
  color: var(--mute);
  line-height: 1.55;
}

/* --- Zweispalter für Erklärabschnitte ----------------------------------- */

.duo {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 920px) {
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .duo.narrow-first {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

.duo p + p {
  margin-top: 16px;
}

/* --- Fokus: ein Netzwerk statt zehn ------------------------------------- */

/*
  Die Gegenüberstellung.

  Links das übliche Werkzeug, das zehn Netzwerke bedienen muss und deshalb für
  keines eine genaue Sprache hat. Rechts dieselbe Zahl, benannt und erklärt.
  Der Unterschied ist der ganze Grund, warum es dieses Werkzeug gibt.
*/
.versus {
  margin-top: 44px;
  display: grid;
  gap: 14px;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 880px) {
  .versus {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
}

.gloss {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}

.gloss > div {
  background: var(--panel);
  padding: 15px 17px 16px;
}

.gloss dt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
}

.gloss dt .mono {
  color: var(--type);
  font-size: 15.5px;
}

.gloss dd {
  margin: 5px 0 0;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.5;
}

/*
  Die linke Tafel steht zurück, ohne dabei schlechtgemacht zu werden.

  Gleiche Struktur, gedämpfte Farbe. Der Unterschied soll aus dem Inhalt der
  beiden Spalten kommen, nicht aus einer abwertenden Gestaltung.
*/
.gloss.blind > div {
  background: color-mix(in srgb, var(--panel) 76%, var(--ink));
}

.gloss.blind dt,
.gloss.blind dt .mono {
  color: var(--mute);
}

.gloss.blind dd {
  color: color-mix(in srgb, var(--mute) 78%, transparent);
}

/* --- Befunde ------------------------------------------------------------ */

.findings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.finding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 18px 16px;
  background: linear-gradient(180deg, var(--raise), var(--panel));
  border: 1px solid var(--rule);
  border-radius: var(--r);
}

.finding .dot {
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--mute);
  flex: none;
}
.finding.up .dot {
  background: var(--up);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 16%, transparent);
}
.finding.down .dot {
  background: var(--down);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--down) 16%, transparent);
}
.finding.hold .dot {
  background: var(--hold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hold) 16%, transparent);
}

.finding b {
  font-weight: 500;
  font-size: 15.5px;
}

.finding span {
  display: block;
  margin-top: 3px;
  color: var(--mute);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Grenzen ------------------------------------------------------------ */

.limits {
  margin-top: 40px;
  display: grid;
  gap: 28px;
}

@media (min-width: 780px) {
  .limits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
  }
}

.limit {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.limit h3 {
  margin-bottom: 6px;
}

.limit p {
  color: var(--mute);
  font-size: 15px;
}

/* --- Der Schluss -------------------------------------------------------- */

.close-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--rule);
}

.close-stage .backdrop {
  mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 100%);
}

.close-stage .backdrop img {
  opacity: 0.72;
  object-position: center 64%;
}

.close {
  padding-block: clamp(84px, 12vw, 148px);
  text-align: center;
  display: grid;
  justify-items: center;
}

.close .lede {
  margin-top: 18px;
  max-width: 52ch;
}

.close .hero-cta {
  justify-content: center;
}

/* --- Bildschirmfotos, sobald echte vorliegen ---------------------------- */

.shot {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--lift);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--mute);
}

/* == 8  Rechtstexte ====================================================== */

.doc {
  padding-block: clamp(48px, 7vw, 80px) clamp(64px, 9vw, 96px);
  max-width: 74ch;
}

.doc h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
}

.doc h2 {
  font-size: 1.28rem;
  margin-top: 44px;
}

.doc h3 {
  margin-top: 28px;
}

.doc p,
.doc li {
  color: #c9c9cf;
  font-size: 16px;
  max-width: none;
}

.doc p {
  margin-top: 14px;
}

.doc ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.doc li {
  margin-top: 8px;
}

.doc .updated {
  margin-top: 18px;
  color: var(--mute);
  font-size: 14.5px;
}

.doc dl {
  margin: 16px 0 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}

.doc dt,
.doc dd {
  background: var(--panel);
  margin: 0;
  padding: 14px 16px;
}

.doc dt {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--type);
  word-break: break-all;
}

.doc dd {
  color: #c9c9cf;
  font-size: 15px;
  padding-top: 0;
}

@media (min-width: 720px) {
  .doc dl {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }
  .doc dd {
    padding-top: 14px;
  }
}

.doc address {
  font-style: normal;
  margin-top: 14px;
  color: #c9c9cf;
}