/* ============================================================
   Archivalis AI — Gestaltungsmerkmale
   Dunkel (OLED), Teal-Akzent, zwei Schriften: Inter + JetBrains Mono.
   Farben aus dem Briefing, Abschnitt 4. Nicht mit den Themes der
   Bausteine-Bibliothek mischen — eigene Variablennamen.
   ============================================================ */

:root {
  /* ── Flächen ─────────────────────────────────────────────── */
  --c-bg: #020617;          /* Grund, slate-950 */
  /* Abgesetzte Abschnitte hatten bis zum 17.09.2026 einen eigenen,
     helleren Grund. Seit dem Abend des 17.09.2026 hat die Seite genau
     einen Grund: dasselbe Dunkelblau von oben bis unten. Die Variable
     bleibt stehen, damit kein Bauteil angefasst werden muss — wer die
     Baender wieder absetzen will, aendert nur diese eine Zeile. */
  --c-bg-soft: #020617;
  --c-card: #0f172a;        /* Kacheln, slate-900 */
  --c-border: #1e293b;      /* Linien und Rahmen, slate-800 */
  --c-border-hell: #334155; /* Linien auf Kacheln (schmueckend) */
  --c-rand-bedien: #64748b; /* Raender an Bedienelementen — 4,2:1 auf
                               --c-bg, damit ein Knopf ohne Fuellung
                               auch als Knopf zu erkennen ist */

  /* ── Schrift ─────────────────────────────────────────────── */
  --c-text: #e2e8f0;        /* Fließtext  — 13,6:1 auf --c-bg */
  --c-text-stark: #f8fafc;  /* Überschriften */
  --c-text-leise: #94a3b8;  /* Beiwerk    —  6,9:1 auf --c-bg */

  /* ── Akzente ─────────────────────────────────────────────── */
  --c-akzent: #2dd4bf;      /* Teal, Hauptakzent */
  --c-akzent-stark: #5eead4;/* Überfahren */
  --c-akzent-tief: #14b8a6; /* Flächen, auf denen dunkler Text liegt */
  --c-zweit: #38bdf8;       /* Sky, zweiter Akzent */
  --c-signal: #fbbf24;      /* Bernstein — nur für ehrliche Grenzen */

  /* ── Glaskarten im Vertrauensband (seit 28.09.2026) ─────────── */
  /*  Nach Dorotas Entwurf: Glas, das nach unten heller wird, und
      eine leuchtende Überschrift. Kontraste nachgerechnet am
      hellsten Punkt der Karte, also ganz unten auf --c-glas-unten:
      Text 6,3 : 1, Überschrift 6,8 : 1, Markenname 5,1 : 1.
      --c-text-leise reicht dort NICHT (3,3 : 1), deshalb der eigene
      Textton. Die Kupfer- und Goldtöne stehen in den Zeichnungen
      selbst und haben mit --c-signal nichts zu tun. */
  --c-glas-oben: #131f38;
  --c-glas-unten: #3a4e63;
  --c-glas-rand: rgb(148 163 184 / 0.22);
  --c-glas-titel: #bdeef9;
  --c-glas-schein: rgb(94 234 212 / 0.32);
  --c-glas-text: #d5dde8;
  --c-glas-marke: #7dd3fc;

  /* ── Schriftfamilien ─────────────────────────────────────── */
  /*  Genau diese zwei, auf allen Seiten und in allen Sprachen.
      Es kommt keine dritte dazu — Andreas hat sie festgelegt, und
      dieselben Schriften stecken im Programm selbst. Eine eigene
      Titelschrift fuer die Website wuerde daneben auffallen.
      (Am 17.09.2026 war Archivo kurz drin und ist wieder raus.) */
  --font-text: 'Inter Variable', system-ui, -apple-system, sans-serif;
  --font-maschine: 'JetBrains Mono Variable', ui-monospace, 'Courier New', monospace;

  /* ── Maße ────────────────────────────────────────────────── */
  /* Hoehe der Kopfleiste. HeroBildfolge zieht sich darum nach oben,
     damit die Buehne wirklich am oberen Rand beginnt. */
  --kopf: 4rem;

  /* Die Rahmenbreite der Seite. Stand bis zum 17.09.2026 auf 72rem;
     auf einem 1920er Schirm blieben links und rechts je 364 px
     ungenutzt, waehrend die Ueberschriften und die Bildschirmfotos in
     der Mitte klebten. 80rem nutzt die Flaeche, ohne dass irgendein
     Fliesstext laenger wird: Lesetexte haengen an --breite-text oder
     an einem eigenen Deckel, nie an dieser Zahl.
     (Dasselbe Thema wie auf hebestreit2, dort stehen 76rem.) */
  --breite: 80rem;
  /* Fuer Buehnen, die breiter sein duerfen als der Lesebereich. */
  --breite-weit: 94rem;
  --breite-text: 44rem;     /* Lesebreite für Rechtstexte */
  /* Die Luft ueber und unter einem Abschnitt. EINE Zahl fuer die
     ganze Seite: Zwischen zwei Abschnitten stehen damit immer zwei
     davon, auf einem 1440er Schirm also 208 Bildpunkte. Vorher hatte
     fast jeder Abschnitt sein eigenes Mass (40, 72, 104, 144), und
     die oberen standen sichtbar dichter als die unteren. */
  --luft: clamp(2.25rem, 4.6vw, 4rem); /* 29.09.2026 enger (vorher 3.5/8vw/6.5), Seite soll auf 6-7 Bildschirmhoehen */

  --radius: 14px;
  --radius-gross: 18px;
  --schatten: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.5);
}

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

html {
  /* Bewusst KEIN scroll-behavior: smooth. GSAP ScrollTrigger rechnet
     mit der echten Scrollposition; weiches Scrollen verfaelscht die,
     und der gepinnte Hero verrutscht. Sprungmarken springen dafuer
     hart — das ist fuer Tastatur und Vorlesewerkzeuge ohnehin besser. */
  scroll-padding-top: calc(var(--kopf) + 1.5rem);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: 1.125rem;       /* 18px (seit 29.09.2026, Andreas: fuer aeltere Besucher) */
  /* 1,8 statt 1,7. Im Hero stand der Durchschuss schon höher und
     las sich sichtbar besser — seit 17.09.2026 gilt das überall. */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--c-text-stark);
  font-family: var(--font-text);
  font-weight: 650;
  /* Überschriften standen auf 1,15 und klebten dadurch zusammen,
     sobald sie umbrachen. */
  line-height: 1.32;
  letter-spacing: -0.015em;
  /* 0,9 statt 0,6 (19.09.2026). Zwei Gründe, und beide gelten
     unabhängig voneinander: Die Überschriften sind eine Stufe größer
     geworden, und ein Abstand in `em` wächst zwar mit, war aber schon
     vorher knapp. Dazu kommt die Bewegung — die Buchstaben starten
     30 Bildpunkte tiefer und aus der Größe null. Bei 0,6em lief die
     Unterkante einer Überschrift in die erste Textzeile hinein,
     während sie noch federte. */
  margin: 0 0 0.9em;
  text-wrap: balance;
  /* Letzte Rettung fuer ueberlange Einzelwoerter auf schmalen
     Schirmen — „Systemvoraussetzungen" ist 21 Zeichen lang und hat
     keine Stelle zum Umbrechen. Greift nur ohne die Popcorn-Bewegung
     (also auf /privacy und /legal): Sobald die Buchstaben zerlegt
     sind, haelt `.pop__wort` das Wort zusammen. Deshalb ist die
     Schriftgroesse unten so gewaehlt, dass es auch dort passt. */
  overflow-wrap: break-word;
}

/* Eine Stufe größer als bis zum 19.09.2026 (vorher 2,1/5vw/3,4 ·
   1,6/3,2vw/2,3 · 1,15/2vw/1,35). Die Verhältnisse untereinander
   bleiben, nur der Maßstab wächst. */
h1 { font-size: clamp(2.35rem, 5.6vw, 3.9rem); }
/* Der untere Wert ist gemessen, nicht geschaetzt: „Systemvoraus-
   setzungen" muss bei 375 Bildpunkten in die Spalte passen, ohne
   umzubrechen — es hat keine Stelle dafuer. Bei 1,85rem lief es 14
   Bildpunkte hinaus. */
h2 { font-size: clamp(1.68rem, 3.8vw, 2.8rem); margin-top: 2.5em; }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.6rem); margin-top: 2em; }
h1 + p, h2 + p, h3 + p { margin-top: 0; }

/* Eine Überschrift, die ihren Abschnitt eröffnet, braucht keinen
   Vorschub — den Abstand macht die Polsterung des Abschnitts. Ohne
   diese Regel erbt sie die 2,5em von oben, und bei einer großen
   Überschrift sind das schnell dreistellige Werte, die niemand
   bestellt hat: Zwischen Vertrauensband und „DIE FÜNF" standen am
   17.09.2026 dadurch 280 Bildpunkte zusätzlich — mehr als der ganze
   Abstand zwischen zwei Abschnitten. */
h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p, li { text-wrap: pretty; }
p { margin: 0 0 1.1em; }

a {
  color: var(--c-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
a:hover { color: var(--c-akzent-stark); }

/* Was der Browser mitbringt, gehoert auch zur Seite: Markierung,
   Schreibmarke und Bedienelemente stehen sonst in Systemblau auf
   einem Grund, der nirgends Blau kennt. */
::selection {
  background: color-mix(in srgb, var(--c-akzent) 34%, transparent);
  color: var(--c-text-stark);
}

html {
  caret-color: var(--c-akzent);
  accent-color: var(--c-akzent);
  /* Der Balken am Rand: dunkel wie die Seite, nicht hell wie das
     Betriebssystem. `color-scheme: dark` allein macht ihn grau. */
  scrollbar-color: var(--c-border-hell) var(--c-bg);
}

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

img { max-width: 100%; height: auto; display: block; }

code, kbd, samp, .maschine {
  font-family: var(--font-maschine);
  font-size: 0.92em;
  font-variant-ligatures: none;
}

/* ── Gerüst ───────────────────────────────────────────────── */

.huelle {
  max-width: var(--breite);
  margin-inline: auto;
  /* Der Seitenrand waechst mit dem Fenster mit. Ein fester Wert von
     1,25rem klebte auf grossen Schirmen an der Kante des Rahmens und
     wirkte auf dem Telefon zugleich knapp. */
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}

.abschnitt { padding-block: var(--luft); }
.abschnitt--soft { background: var(--c-bg-soft); }

/* ── Sprungmarke für Tastaturnutzung ──────────────────────── */

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--c-akzent);
  color: #020617;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  text-decoration: none;
}
.sprung:focus {
  left: 0;
  color: #020617;
}

/* ── Knöpfe (Berührfläche mindestens 48 px) ───────────────── */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.knopf--haupt { background: var(--c-akzent); color: #020617; }
.knopf--haupt:hover { background: var(--c-akzent-stark); color: #020617; }

.knopf--rand { border-color: var(--c-rand-bedien); color: var(--c-text); }
.knopf--rand:hover { border-color: var(--c-akzent); color: var(--c-akzent-stark); }

/* Deaktiviert — solange der Store-Eintrag fehlt. Kein <a> ohne Ziel,
   sondern ein echter Knopf mit disabled, damit Tastatur und Vorlesen
   den Zustand mitbekommen. */
.knopf[disabled] {
  background: var(--c-card);
  border-color: var(--c-border);
  color: var(--c-text-leise);
  cursor: not-allowed;
}

/* ── Tafeln: die eckigen Knoepfe im Store-Zuschnitt ────────── */
/*  Gewuenscht am 17.09.2026: weiss, viereckig, in der Machart des
    Microsoft-Store-Abzeichens — Symbol links, darueber die kleine
    Zeile, darunter der Name. Der zweite Knopf traegt denselben
    Zuschnitt, damit die beiden als Paar stehen.

    Seit dem 17.09.2026 abgerundet und plastisch — 12 px Radius, also
    etwas knapper als die Kacheln (14 px), damit sie als Bedienelement
    lesbar bleiben und nicht als Flaeche.

    Warum eine eigene Klasse und keine Variante von .knopf: Grundform,
    Aufbau und Innenleben unterscheiden sich vollstaendig. Als
    Abwandlung waere jede Eigenschaft eine Ausnahme. */

/*  Dunkel statt weiss, gewuenscht am 17.09.2026: beide Knoepfe sollen
    dieselbe Farbe tragen, und der Store-Knopf ist abgeschaltet (also
    dunkel), solange der Eintrag fehlt.

    ACHTUNG BEIM LIVEGANG: Sobald `storeVerfuegbar` auf true steht,
    wird aus dem abgeschalteten Knopf ein echter — dann entscheidet
    sich, ob beide dunkel bleiben oder der Store-Knopf hervorgehoben
    wird. Bis dahin unterscheiden sich die beiden nur ueber Rand und
    Textfarbe, damit man sieht, welcher klickbar ist. */

.tafel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.7rem 1.35rem 0.7rem 1.1rem;
  border: 1px solid var(--c-rand-bedien);
  border-radius: 12px;
  /* Plastisch statt flach, gewuenscht am 17.09.2026. Drei Schichten
     machen die Woelbung: ein Verlauf von hell nach dunkel, eine
     Lichtkante innen oben, ein Schatten nach unten. Beim Druecken
     kehrt sich die Lichtkante um, dann sieht der Knopf eingedrueckt
     aus. */
  background: linear-gradient(to bottom, #1c2940 0%, #0f172a 62%, #0b1120 100%);
  color: var(--c-text-stark);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.13),
    inset 0 -1px 0 rgb(0 0 0 / 0.5),
    0 1px 1px rgb(0 0 0 / 0.3),
    0 6px 16px rgb(0 0 0 / 0.42);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 120ms ease;
}

.tafel:hover {
  background: linear-gradient(to bottom, #24344f 0%, #16213a 62%, #101830 100%);
  border-color: var(--c-akzent);
  color: var(--c-text-stark);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.17),
    inset 0 -1px 0 rgb(0 0 0 / 0.5),
    0 2px 2px rgb(0 0 0 / 0.3),
    0 10px 22px rgb(0 0 0 / 0.46);
}

/* Eingedrueckt: Licht von oben weg, Schatten nach innen. */
.tafel:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / 0.55),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    0 1px 2px rgb(0 0 0 / 0.3);
}

/* Das Symbol traegt keine Aussage, die nicht daneben steht. */
.tafel__zeichen {
  flex: none;
  width: 26px;
  height: 26px;
}

/* Einzeilig und im Wortlaut des Briefings. Eine zweizeilige Fassung
   im Zuschnitt des Store-Abzeichens war kurz drin und ist wieder
   raus: dafuer haette der Satz zerlegt werden muessen, und dieselben
   Saetze gehen in den Store-Eintrag. */
.tafel__wort {
  font-weight: 620;
  letter-spacing: -0.005em;
}

/* Abgeschaltet, solange der Store-Eintrag fehlt. Echter <button> mit
   disabled statt eines <a> ohne Ziel: Tastatur und Vorlesewerkzeuge
   bekommen den Zustand so mit. Gedaempft, damit das Paar trotzdem
   eine Reihenfolge hat — der weisse Knopf ist dann der naechste
   Schritt. */
/* Abgeschaltet: flacher, weil nichts zu druecken ist. Der Unterschied
   zum klickbaren Knopf liegt in Woelbung, Rand und Textfarbe. */
.tafel[disabled] {
  background: linear-gradient(to bottom, #141d31 0%, #0f172a 100%);
  border-color: var(--c-border);
  color: var(--c-text-leise);
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 2px 6px rgb(0 0 0 / 0.28);
}
.tafel[disabled]:hover {
  background: linear-gradient(to bottom, #141d31 0%, #0f172a 100%);
  border-color: var(--c-border);
  transform: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.05),
    0 2px 6px rgb(0 0 0 / 0.28);
}
.tafel[disabled] .tafel__zeichen { opacity: 0.55; }

/* ── Text hinter Balken aufdecken ─────────────────────────── */
/*  Gehoert zu verhalten/block-reveal.js. Steht hier und nicht im
    Stilblock einer Seite, weil das Skript die Elemente erst im
    Browser baut — ein seitenweit eingegrenzter Stil greift dann
    nicht sicher. Ohne das Skript wird nichts davon gebraucht. */

.reveal {
  position: relative;
}

.reveal__buehne {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.reveal__kasten {
  position: absolute;
}

.reveal__balken {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--balken, #fff5f5);
  will-change: transform;
  backface-visibility: hidden;
}

/* Zwei Haelften: die eine faehrt aus der Mitte nach links auf, die
   andere nach rechts. Der halbe Pixel schliesst die Fuge. */
.reveal__balken--links {
  left: 0;
  width: calc(50% + 0.5px);
}

.reveal__balken--rechts {
  left: 50%;
  right: 0;
}

/* ── Überschriften, die buchstabenweise hereinspringen ────── */
/*  Gehoert zu Bewegung.astro, Abschnitt 10. Steht hier und nicht im
    Stilblock einer Seite, weil das Skript die Elemente erst im
    Browser baut — ein seitenweit eingegrenzter Stil greift dann
    nicht. Ohne das Skript wird nichts davon gebraucht.

    Das Wort ist die Klammer um seine Buchstaben. Ohne sie brächen
    Wörter mitten im Wort um, sobald jeder Buchstabe für sich steht —
    `inline-block` macht aus jedem ein eigenes Kästchen, und der
    Umbruch darf zwischen zwei Kästchen fallen. */
.pop__wort {
  display: inline-block;
  white-space: nowrap;
}

/* Bei 320 px ist „Systemvoraussetzungen“ breiter als der Schirm
   (Barrierefreiheitspruefung 30.09.2026, WCAG 1.4.10): dort etwas kleiner
   und notfalls zwischen zwei Buchstaben umbrechen. */
@media (max-width: 24rem) {
  h2 { font-size: 1.4rem; }
  .pop__wort { white-space: normal; }
}

/*  KEIN `will-change` hier. Die Vorlage setzt es an jedem Buchstaben,
    und das ist in React mit einer Ueberschrift auch richtig — auf
    /files sind es aber rund 600 Buchstaben, die dann alle dauerhaft
    eine eigene Ebene im Bildspeicher haetten. GSAP schiebt waehrend
    der Bewegung ohnehin auf die Grafikkarte (force3D), und es
    animiert immer nur die eine Ueberschrift, die gerade ins Bild
    kommt. */
.pop__zeichen {
  display: inline-block;
}

/* ── Kacheln ──────────────────────────────────────────────── */

.kachel {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.75rem;
}

/* ── Bildschirmfotos ──────────────────────────────────────── */
/*  Die Bilder zeigen die dunkle Oberfläche auf #020617. Ohne Rahmen
    lösen sie sich im Seitengrund auf — deshalb immer so einfassen. */

/*  Der Rahmen um ein Bildschirmfoto. Seit 17.09.2026 plastisch: Die
    Bilder zeigen eine dunkle Oberfläche auf #020617 und wirkten auf
    dem ebenfalls dunklen Grund wie Löcher — das Briefing sagt das in
    Abschnitt 8 selbst voraus und empfiehlt einen Rahmen.

    Drei Schichten machen die Tiefe: ein heller Anriss oben (das
    Licht), der eigentliche Rahmen, und ein tiefer Schatten nach
    unten. Der innere Schein hebt die Bildkante vom Rahmen ab. */
.schirm {
  position: relative;
  padding: 6px;
  border: 1px solid var(--c-border-hell);
  border-radius: calc(var(--radius-gross) + 6px);
  background: linear-gradient(to bottom, #1e2b45, var(--c-card));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 2px 4px rgb(0 0 0 / 0.3),
    0 26px 60px rgb(0 0 0 / 0.5);
  overflow: hidden;
}

.schirm img {
  display: block;
  width: 100%;
  border-radius: var(--radius-gross);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.6),
    inset 0 0 0 1px rgb(45 212 191 / 0.08);
}

/*  Die Zoomfahrt. Das Bild steht anfangs eine Spur kleiner und wächst
    auf volle Größe, während der Abschnitt durchs Bild zieht — eine
    langsame, durchgehende Bewegung ohne Anfang und Ende.
    `scroll-timeline` kennt Firefox nicht, deshalb hängt sie an
    ScrollTrigger; die Stellschraube ist --zoom. */
.schirm img {
  transform: scale(var(--zoom, 1));
  transform-origin: center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .schirm img { transform: none; }
}

/* ── Der Signal-Hinweis ───────────────────────────────────── */
/*  Der Bernstein-Ton der Seite, und der einzige Ort, an dem er
    vorkommt: dort, wo eine ehrliche Grenze steht. Nicht als Warnung
    gemeint, sondern als Unterscheidung — hier steht, was nicht geht
    oder was fehlt.

    Stand bis zum 18.09.2026 fast gleich in zwei Bauteilen. Jetzt
    einmal hier, damit die beiden Stellen nicht auseinanderlaufen. */

/*  Der Rand laeuft rundum und ist eine Haarlinie. Bis zum 18.09.2026
    stand links ein 3 px breiter Streifen in vollem Bernstein — der
    angeklebte Farbstreifen ist eines der Muster, an denen man
    zusammengeklickte Oberflaechen erkennt, und der Kasten braucht ihn
    nicht: Er ist der einzige Bernstein auf der ganzen Website. */
.notiz-signal {
  padding: 1.1rem 1.35rem;
  border: 1px solid color-mix(in srgb, var(--c-signal) 46%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-signal) 7%, transparent);
}

/* ── Fließtext für die Rechtsseiten ───────────────────────── */

.rechtstext {
  max-width: var(--breite-text);
  margin-inline: auto;
}
.rechtstext h2 {
  padding-top: 0.5em;
  border-top: 1px solid var(--c-border);
}
.rechtstext ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.rechtstext li { margin-bottom: 0.4em; }
/* Lange Pfade und Adressen in den Rechtstexten (z. B.
   der ffmpeg-Lizenzpfad unter resources oder der Chatterbox-Ordner unter %APPDATA%)
   liefen bei 375 px ueber den Rand (30.09.2026). Sie duerfen umbrechen. */
.rechtstext code,
.rechtstext a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rechtstext .stand {
  font-family: var(--font-maschine);
  font-size: 0.85rem;
  color: var(--c-text-leise);
}
/* Rundum eine Linie statt eines Streifens an der linken Kante —
   dieselbe Entscheidung wie bei `.notiz-signal`. */
.rechtstext address {
  font-style: normal;
  background: var(--c-card);
  border: 1px solid color-mix(in srgb, var(--c-akzent) 38%, transparent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5em;
}

/* ── Tabellen (Systemvoraussetzungen, Grenzen) ────────────── */

.tabellenhuelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
th { color: var(--c-text-stark); font-weight: 650; }

/* ── Einblenden beim Scrollen (nur wenn JavaScript läuft) ─── */

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }

/* ── Nur für Vorlesewerkzeuge ─────────────────────────────── */

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}